feat: install SBRN

# 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.

.storybook/index.js

@@ -0,0 +1,12 @@
+import { AppRegistry } from "react-native";
+import { getStorybookUI } from "@storybook/react-native";
+import RNBootSplash from 'react-native-bootsplash'
+
+import { name as appName } from '../src/app.json'
+import "./storybook.requires";
+
+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.

.storybook/main.js

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

.storybook/metro.storybook.js

@@ -0,0 +1,21 @@
+const path = require("path");
+const { getDefaultConfig } = require('metro-config')
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts }
+  } = await getDefaultConfig()
+  return {
+    transformer: {
+      experimentalImportSupport: false,
+      inlineRequires: true,
+      babelTransformerPath: require.resolve('react-native-svg-transformer')
+    },
+    resolver: {
+      assetExts: assetExts.filter(ext => ext !== 'svg'),
+      sourceExts: [...sourceExts, 'jsx', 'svg'],
+      resolverMainFields: ["sbmodern", "react-native", "browser", "main"],
+    },
+    watchFolders: [path.resolve(__dirname, "..")],
+  }
+})()

.storybook/preview.js

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

.storybook/readme.md

@@ -0,0 +1,7 @@
+# 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.

.storybook/stories/Button/Button.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+
+export const MyButton = ({ onPress, text }) => {
+  return (
+    <TouchableOpacity style={styles.container} onPress={onPress} activeOpacity={0.8}>
+      <Text style={styles.text}>{text}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    backgroundColor: 'purple',
+    borderRadius: 8,
+  },
+  text: { color: 'white' },
+});

.storybook/stories/Button/Button.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View } from 'react-native';
+import { MyButton } from './Button';
+
+const MyButtonMeta = {
+  title: 'MyButton',
+  component: MyButton,
+  argTypes: {
+    onPress: { action: 'pressed the button' },
+  },
+  args: {
+    text: 'Hello world',
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+        <Story />
+      </View>
+    ),
+  ],
+};
+
+export default MyButtonMeta;
+
+export const Basic = {};
+
+export const AnotherExample = {
+  args: {
+    text: 'Another example',
+  },
+};

.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: "./.storybook/stories",
+    files: "**/*.stories.?(ts|tsx|js|jsx)",
+    importPathMatcher:
+      "^\\.[\\\\/](?:\\.storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.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 {
+    "./.storybook/stories/Button/Button.stories.js": require("./stories/Button/Button.stories.js"),
+  };
+};
+
+configure(getStories, module, 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": "react-native start --config ./.storybook/metro.storybook.js --host 127.0.0.1"
   },
   "dependencies": {
     "@fengweichong/react-native-gzip": "^2.0.0",
@@ -117,6 +119,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",