Merge pull request #1 from timelessco/integrating-storybook

Added Storybook and React Native Jest

Author: Karthik-B-06

example/App/index.tsx

@@ -0,0 +1 @@
+export { default } from '../storybook';

example/index.tsx

@@ -1,5 +1,5 @@
 import { AppRegistry } from 'react-native';
-import App from './src/App';
+import App from './App';
 import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

example/ios/Podfile.lock

@@ -245,6 +245,8 @@ PODS:
     - React-Core (= 0.63.4)
     - React-cxxreact (= 0.63.4)
     - React-jsi (= 0.63.4)
+  - RNCAsyncStorage (1.15.7):
+    - React-Core
   - Yoga (1.14.0)
 
 DEPENDENCIES:
@@ -275,6 +277,7 @@ DEPENDENCIES:
   - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -332,6 +335,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNCAsyncStorage:
+    :path: "../node_modules/@react-native-async-storage/async-storage"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -362,6 +367,7 @@ SPEC CHECKSUMS:
   React-RCTText: 5c51df3f08cb9dedc6e790161195d12bac06101c
   React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d
   ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b
+  RNCAsyncStorage: 7102fe8985f889579a3ae148d957bbb3f308122b
   Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
 
 PODFILE CHECKSUM: 13a162c689671245dafa37cc996e23cde5f466da

example/jest.config.json

@@ -0,0 +1,4 @@
+{
+  "preset": "react-native",
+  "setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"]
+}

example/package.json

@@ -6,16 +6,43 @@
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
-    "start": "react-native start"
+    "start": "react-native start --reset-cache",
+    "storybook": "start-storybook -p 7007",
+    "build-storybook": "build-storybook",
+    "prestorybook": "rnstl"
+  },
+  "config": {
+    "react-native-storybook-loader": {
+      "searchDir": [
+        "./App",
+        "./App/stories"
+      ],
+      "pattern": "**/*.stories.tsx",
+      "outputFile": "./storybook/storyLoader.ts"
+    }
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.15.7",
     "react": "16.13.1",
-    "react-native": "0.63.4"
+    "react-native": "0.63.4",
+    "typescript": "4.4.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.12.5",
+    "@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.25",
+    "@storybook/react-native": "^5.3.25",
+    "@storybook/react-native-server": "^5.3.23",
+    "@testing-library/jest-native": "^4.0.2",
+    "@testing-library/react-native": "^7.2.0",
+    "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.0.0",
-    "metro-react-native-babel-preset": "^0.64.0"
+    "metro-react-native-babel-preset": "^0.64.0",
+    "react-dom": "16.13.1",
+    "react-native-storybook-loader": "^2.0.4"
   }
 }

example/src/App.tsx

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

example/storybook/addons.js

@@ -0,0 +1,30 @@
+// if you use expo remove this line
+import { AppRegistry } from 'react-native';
+
+import {
+  getStorybookUI,
+  configure,
+  addDecorator,
+} from '@storybook/react-native';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import './rn-addons';
+import { loadStories } from './storyLoader';
+
+// enables knobs for all stories
+addDecorator(withKnobs);
+
+// import stories
+configure(() => {
+  loadStories();
+}, module);
+
+// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
+// To find allowed options for getStorybookUI
+const StorybookUIRoot = getStorybookUI({ asyncStorage: null });
+
+// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
+// If you use Expo you should remove this line.
+AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);
+
+export default StorybookUIRoot;

example/storybook/index.ts

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

example/storybook/rn-addons.js

@@ -0,0 +1,10 @@
+// Auto-generated file created by react-native-storybook-loader
+// Do not edit.
+//
+// https://github.com/elderfo/react-native-storybook-loader.git
+
+export function loadStories() {
+  require('../App/stories/Button.stories');
+}
+
+export const stories = ['../App/stories/Button.stories'];