chore(ui-react-native): Add storybook

examples/README.md

@@ -4,12 +4,12 @@ This directory contains example apps for each framework we support.
 
 ## Examples Development
 
-1. Create or Update an example at [`examples/{next,vue,angular}/...`](examples)
+1. Create or Update an example at [`examples/{next,react-native,vue,angular}/...`](examples)
 
    For your `aws-exports.js`, you can [reference an existing or create a new environment](../environments/README.md).
 
-1. Run your example at monorep root: `yarn {react,vue,angular}-example dev`
+1. Run your example at monorep root: `yarn {react,react-native,vue,angular}-example dev`
 1. Visit your example (e.g. <http://localhost:3000/ui/components/authenticator/sign-up-with-username>)
-1. Make changes to [`@aws-amplify/ui-{react,vue,angular}`](packages) & save.
+1. Make changes to [`@aws-amplify/ui-{react,react-native,vue,angular}`](packages) & save.
 
    Examples should automatically hot-reload your changes in the example.

examples/react-native/.gitignore

@@ -59,3 +59,6 @@ buck-out/
 # Ruby / CocoaPods
 /ios/Pods/
 /vendor/bundle/
+
+# Storybook
+/storybook/storyLoader.js

examples/react-native/README.md

@@ -84,6 +84,35 @@ yarn react-native-example dev
 
 1. Open the app on the iOS simulator or Android emulator.
 
+## Storybook
+
+### With Storybook Server
+Will serve a web interface that allows switching between components (stories) and controlling multiple simulators/emulators.
+
+First boot Storybook Server:
+
+```bash
+# terminal 1
+yarn run react-native-example storybook
+```
+
+From a second terminal run iOS simulator, Android emulator or both (requires app to be installed):
+
+```bash
+# terminal 2
+yarn run react-native-example dev
+```
+
+Refresh the Storybook web interface to load all the stories.
+
+### On iOS simulator/Android emulator only
+
+```bash
+yarn run react-native-example dev
+```
+
+In the Storybook app switch between `Navigator` and `Preview` tabs to select components/stories.
+
 ## Running Integration Tests - TODO
 
 ## Linking an Internal Dependency

examples/react-native/index.js

@@ -1,5 +1,11 @@
 import { AppRegistry } from 'react-native';
 import App from './App';
+import StorybookUIRoot from './storybook';
 import { name as appName } from './app.json';
 
-AppRegistry.registerComponent(appName, () => App);
+//TODO: replace with env var
+const isStorybook = false;
+
+AppRegistry.registerComponent(appName, () =>
+  isStorybook ? StorybookUIRoot : App
+);

examples/react-native/package.json

@@ -4,11 +4,15 @@
   "private": true,
   "scripts": {
     "android": "react-native run-android",
+    "clean": "rimraf node_modules",
     "ios": "react-native run-ios",
     "ios:pod-install": "pod install --project-directory=./ios",
     "dev": "react-native start",
     "test": "jest",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "prestorybook": "rnstl",
+    "storybook": "start-storybook -p 7007",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@aws-amplify/ui": "*",
@@ -24,20 +28,31 @@
     "@babel/core": "^7.17.10",
     "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "^2.0.0",
+    "@storybook/addon-actions": "^5.3",
+    "@storybook/addon-knobs": "^5.3",
+    "@storybook/addon-links": "^5.3",
+    "@storybook/addon-ondevice-actions": "^5.3.23",
+    "@storybook/addon-ondevice-knobs": "^5.3.26",
+    "@storybook/react-native": "^5.3.25",
+    "@storybook/react-native-server": "^5.3.23",
     "@types/jest": "^26.0.23",
     "@types/react-native": "^0.67.3",
     "@types/react-test-renderer": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
     "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.5",
     "eslint": "^7.32.0",
     "jest": "^26.6.3",
     "metro-react-native-babel-preset": "^0.70.2",
+    "react-dom": "17.0.2",
+    "react-native-storybook-loader": "^2.0.5",
     "react-test-renderer": "^17.0.2",
     "typescript": "^4.6.3"
   },
   "resolutions": {
-    "@types/react": "^17"
+    "@types/react": "^17",
+    "**/@types/react": "^17"
   },
   "jest": {
     "preset": "react-native",
@@ -49,5 +64,14 @@
       "json",
       "node"
     ]
+  },
+  "config": {
+    "react-native-storybook-loader": {
+      "searchDir": [
+        "./storybook/stories"
+      ],
+      "pattern": "**/*.stories.tsx",
+      "outputFile": "./storybook/storyLoader.js"
+    }
   }
 }

examples/react-native/storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-knobs/register';

examples/react-native/storybook/index.tsx

@@ -0,0 +1,21 @@
+import { getStorybookUI, configure } from '@storybook/react-native';
+import { Platform } from 'react-native';
+
+import { loadStories } from './storyLoader';
+
+// import stories
+configure(() => {
+  loadStories();
+}, module);
+
+// Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
+// To find allowed options for getStorybookUI
+const StorybookUIRoot = getStorybookUI({
+  /*
+   * Get React Native server IP if hostname is `localhost`
+   * On Android emulator, the IP of host is `10.0.2.2`
+   */
+  host: Platform.OS === 'android' ? '10.0.2.2' : '0.0.0.0',
+});
+
+export default StorybookUIRoot;

examples/react-native/storybook/rn-addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-ondevice-actions/register';
+import '@storybook/addon-ondevice-knobs/register';

examples/react-native/storybook/stories/Button.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { action } from '@storybook/addon-actions';
+import { text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react-native';
+import { Button } from '@aws-amplify/ui-react-native/dist/primitives';
+
+storiesOf('Button', module)
+  .add('with text', () => (
+    <Button onPress={action('clicked-text')}>
+      <Text>{text('Button text', 'Hello Button')}</Text>
+    </Button>
+  ))
+  .add('with emoji', () => (
+    <Button onPress={action('clicked-emoji')}>
+      <Text>😀 😎 👍 💯</Text>
+    </Button>
+  ))
+  .add('disabled', () => <Button disabled>Disabled Button</Button>);

package.json

@@ -42,6 +42,7 @@
       "**/@radix-ui",
       "**/@radix-ui/**",
       "**/react",
+      "**/react-dom",
       "**/react-map-gl",
       "**/react-native",
       "**/react-native/**",