feat: install SBRN

`yarn storybook` will launch the application in storybook mode.
This will allow you to view all the components
in the application and their various states.

`yarn prestorybook` is launched automatically before `yarn storybook`
 and will update the storybook.requires.js file
  with the latest components.
 This is required to ensure that the storybook is up to date.

 # Known issues:
- Bad handling of file creation during
Metro watch (storybook.requires isn't rebuilt)
- Should implement a path alias to the Storybook folder

.storybook/StoryWrapper.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { View } from 'react-native'
+
+export const StoryWrapper = (Story: () => JSX.Element): JSX.Element => (
+  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+    <Story />
+  </View>
+)

.storybook/main.js

@@ -0,0 +1,5 @@
+module.exports = {
+  stories: ['../src/**/*.stories.?(ts|tsx|js|jsx)'],
+  addons: ['@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions'],
+};
+

.storybook/preview.js

@@ -0,0 +1,8 @@
+export const parameters = {
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

.storybook/readme.md

@@ -0,0 +1,12 @@
+# Storybook usage
+
+`yarn storybook` will launch the application in storybook mode. This will allow you to view all the components in the application and their various states.
+
+`yarn prestorybook` is launched automatically before `yarn storybook` and will update the storybook.requires.js file with the latest components. This is required to ensure that the storybook is up to date.
+
+Refer to the [Storybook documentation](https://github.com/storybookjs/react-native) for more information.
+
+# Known issues:
+- Bad handling of file creation during Metro watch (storybook.requires isn't rebuilt)
+
+- Should implement a path alias to the Storybook folder

.storybook/storybook.requires.js

@@ -0,0 +1,54 @@
+/* do not change this file, it is auto generated by storybook. */
+
+import {
+  configure,
+  addDecorator,
+  addParameters,
+  addArgsEnhancer,
+  clearDecorators,
+} from "@storybook/react-native";
+
+global.STORIES = [
+  {
+    titlePrefix: "",
+    directory: "./src",
+    files: "**/*.stories.?(ts|tsx|js|jsx)",
+    importPathMatcher:
+      "^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
+  },
+];
+
+import "@storybook/addon-ondevice-controls/register";
+import "@storybook/addon-ondevice-actions/register";
+
+import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs";
+
+import { decorators, parameters } from "./preview";
+
+if (decorators) {
+  if (__DEV__) {
+    // stops the warning from showing on every HMR
+    require("react-native").LogBox.ignoreLogs([
+      "`clearDecorators` is deprecated and will be removed in Storybook 7.0",
+    ]);
+  }
+  // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
+  clearDecorators();
+  decorators.forEach((decorator) => addDecorator(decorator));
+}
+
+if (parameters) {
+  addParameters(parameters);
+}
+
+try {
+  argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
+} catch {}
+
+const getStories = () => {
+  return {
+    "./src/ui/Typography/Typography.stories.tsx": require("../src/ui/Typography/Typography.stories.tsx"),
+  };
+};
+
+configure(getStories, module, false);

index.storybook.js

@@ -0,0 +1,12 @@
+import { getStorybookUI } from '@storybook/react-native'
+import { AppRegistry } from 'react-native'
+import RNBootSplash from 'react-native-bootsplash'
+
+import './.storybook/storybook.requires'
+import { name as appName } from './src/app.json'
+
+const StorybookUIRoot = getStorybookUI({})
+
+AppRegistry.registerComponent(appName, () => StorybookUIRoot)
+
+RNBootSplash.hide({ fade: true }) // Have to manually hide the splash screen for now. Might cause issues when hot reloading.

metro.config.js

@@ -5,6 +5,26 @@ module.exports = (async () => {
   const {
     resolver: { sourceExts, assetExts }
   } = await getDefaultConfig()
+
+  if (process.env.STORYBOOK_ENABLED) {
+    return {
+      transformer: {
+        getTransformOptions: async () => ({
+          transform: {
+            experimentalImportSupport: false,
+            inlineRequires: false
+          }
+        })
+      },
+      resolver: {
+        resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
+        // We do a little bit of tomfoolery and pick *.storybook.js instead of *.js files (if available)
+        // (this is how metro 'prefers' .android.js or .ios.js files)
+        sourceExts: ['storybook.js'].concat(sourceExts)
+      }
+    }
+  }
+
   return {
     transformer: {
       experimentalImportSupport: false,

package.json

@@ -27,7 +27,9 @@
     "typecheck": "yarn tsc",
     "validate:locales": "node scripts/dist/validate-locales.cmd.js",
     "web": "webpack serve --open --config webpack.config.js --inline --hot --port=9999",
-    "web:test": "react-app-rewired test --env=jsdom"
+    "web:test": "react-app-rewired test --env=jsdom",
+    "prestorybook": "sb-rn-get-stories",
+    "storybook": "STORYBOOK_ENABLED=true react-native start"
   },
   "dependencies": {
     "@fengweichong/react-native-gzip": "^2.0.0",
@@ -116,6 +118,13 @@
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
     "@babel/runtime": "^7.17.9",
+    "@react-native-community/datetimepicker": "7.6.2",
+    "@react-native-community/slider": "4.4.4",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-controls": "^6.5.16",
+    "@storybook/addon-ondevice-actions": "^6.5.7",
+    "@storybook/addon-ondevice-controls": "^6.5.7",
+    "@storybook/react-native": "^6.5.7",
     "@svgr/webpack": "5.5.0",
     "@testing-library/jest-native": "5.4.3",
     "@testing-library/react-hooks": "8.0.1",

src/ui/Typography/Typography.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { StoryWrapper } from '/../.storybook/StoryWrapper'
+import { Typography } from '/ui/Typography/index'
+
+const TypographyMeta = {
+  title: 'Typography',
+  component: Typography,
+  decorators: [StoryWrapper]
+}
+
+export default TypographyMeta
+
+export const Default = (): JSX.Element => (
+  <Typography>Default Typography</Typography>
+)

src/ui/Typography/index.tsx

@@ -27,7 +27,7 @@ type TypographyColor =
   | 'textSecondary'
   | 'error'
 
-interface TypographyProps extends TextProps {
+export interface TypographyProps extends TextProps {
   color?: TypographyColor
   variant?: TypographyVariant
 }