Merge pull request #23 from expo/@evanbacon/storybook/init-web-only

[web] Storybook example

with-storybook/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
+  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
+}

with-storybook/.gitignore

@@ -0,0 +1,11 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/

with-storybook/.storybook/addons.js

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

with-storybook/.storybook/config.js

@@ -0,0 +1,4 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+configure(require.context('../stories', true, /\.stories\.js$/), module);

with-storybook/.storybook/webpack.config.js

@@ -0,0 +1,14 @@
+const { resolve } = require('path');
+const withUnimodules = require('@expo/webpack-config/withUnimodules');
+
+module.exports = ({ config }) => {
+  return withUnimodules(
+    config,
+    {
+      projectRoot: resolve(__dirname, '../'),
+    },
+    {
+      supportsFontLoading: false,
+    },
+  );
+};

with-storybook/.watchmanconfig

@@ -0,0 +1 @@
+{}

with-storybook/App.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <Text>Open up App.tsx to start working on your app!</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

with-storybook/README.md

@@ -0,0 +1,38 @@
+# Storybook Example
+
+### Running in the browser
+
+1. Create Expo project `expo init`
+2. cd into the project and run `npx -p @storybook/cli sb init --type react` to bootstrap a new React project
+3. Install the expo webpack config so we can add unimodules support `yarn add -D @expo/webpack-config`
+4. Create a [custom webpack config](/.storybook/webpack.config.js) `touch .storybook/webpack.config.js`
+
+   ```js
+   const { resolve } = require('path');
+   const webpack = require('webpack');
+   const withUnimodules = require('@expo/webpack-config/withUnimodules');
+
+   module.exports = ({ config }) => {
+     return withUnimodules(
+       config,
+       {
+         projectRoot: resolve(__dirname, '../'),
+       },
+       {
+         supportsFontLoading: false,
+       },
+     );
+   };
+   ```
+
+5. Run `yarn storybook` to try it out!
+
+### Running in the client
+
+TBD... Feel free to open a PR!
+
+-> Usage with React Native (not universal) https://storybook.js.org/docs/guides/guide-react-native/
+
+## The idea behind the example
+
+This example shows how to use Unimodules with Storybook for web. You can use Storybook to test and share your component library quickly and easily.

with-storybook/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "with-storybook",
+    "slug": "with-storybook",
+    "privacy": "public",
+    "sdkVersion": "35.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

with-storybook/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

with-storybook/package.json

@@ -0,0 +1,33 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "dependencies": {
+    "expo": "^35.0.0",
+    "react": "16.8.3",
+    "react-dom": "16.8.3",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
+    "react-native-web": "^0.11.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.6.2",
+    "@expo/webpack-config": "^0.7.6",
+    "@storybook/addon-actions": "^5.2.1",
+    "@storybook/addon-links": "^5.2.1",
+    "@storybook/addons": "^5.2.1",
+    "@storybook/react": "^5.2.1",
+    "@types/react": "^16.8.23",
+    "@types/react-native": "^0.57.65",
+    "babel-loader": "^8.0.6",
+    "babel-preset-expo": "^7.0.0",
+    "typescript": "^3.4.5"
+  },
+  "private": true
+}

with-storybook/stories/0-Welcome.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+toStorybook.story = {
+  name: 'to Storybook',
+};

with-storybook/stories/1-Button.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button } from 'react-native';
+
+export default {
+  title: 'Button',
+};
+
+export const text = () => (
+  <Button title="Hello Button" onPress={action('clicked')} />
+);

with-storybook/stories/2-Constants.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import Constants from 'expo-constants';
+import { Text } from 'react-native';
+
+export default {
+  title: 'Constants',
+};
+
+export const constants = () => (
+  <Text>{JSON.stringify(Constants, null, 2)}</Text>
+);

with-storybook/stories/3-LinearGradient.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { LinearGradient } from 'expo-linear-gradient';
+
+export default {
+  title: 'LinearGradient',
+};
+
+export const linearGradient = () => (
+  <LinearGradient
+    style={{ flex: 1, height: 200 }}
+    colors={['red', 'blue', 'yellow']}
+  />
+);

with-storybook/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-native",
+    "lib": ["dom", "esnext"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true
+  }
+}