diff --git a/with-storybook/.expo-shared/assets.json b/with-storybook/.expo-shared/assets.json new file mode 100644 index 0000000..17ad228 --- /dev/null +++ b/with-storybook/.expo-shared/assets.json @@ -0,0 +1,4 @@ +{ + "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true, + "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true +} \ No newline at end of file diff --git a/with-storybook/.gitignore b/with-storybook/.gitignore new file mode 100644 index 0000000..4820714 --- /dev/null +++ b/with-storybook/.gitignore @@ -0,0 +1,11 @@ +node_modules/**/* +.expo/* +npm-debug.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision +*.orig.* +web-build/ +web-report/ diff --git a/with-storybook/.storybook/addons.js b/with-storybook/.storybook/addons.js new file mode 100644 index 0000000..6aed412 --- /dev/null +++ b/with-storybook/.storybook/addons.js @@ -0,0 +1,2 @@ +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; diff --git a/with-storybook/.storybook/config.js b/with-storybook/.storybook/config.js new file mode 100644 index 0000000..0603ed5 --- /dev/null +++ b/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); diff --git a/with-storybook/.storybook/webpack.config.js b/with-storybook/.storybook/webpack.config.js new file mode 100644 index 0000000..4c49001 --- /dev/null +++ b/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, + }, + ); +}; diff --git a/with-storybook/.watchmanconfig b/with-storybook/.watchmanconfig new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/with-storybook/.watchmanconfig @@ -0,0 +1 @@ +{} diff --git a/with-storybook/App.tsx b/with-storybook/App.tsx new file mode 100644 index 0000000..d3e692c --- /dev/null +++ b/with-storybook/App.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { StyleSheet, Text, View } from 'react-native'; + +export default function App() { + return ( + + Open up App.tsx to start working on your app! + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + alignItems: 'center', + justifyContent: 'center', + }, +}); diff --git a/with-storybook/README.md b/with-storybook/README.md new file mode 100644 index 0000000..00bf0b4 --- /dev/null +++ b/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. diff --git a/with-storybook/app.json b/with-storybook/app.json new file mode 100644 index 0000000..a3361fd --- /dev/null +++ b/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 + } + } +} \ No newline at end of file diff --git a/with-storybook/assets/icon.png b/with-storybook/assets/icon.png new file mode 100644 index 0000000..7f5e01c Binary files /dev/null and b/with-storybook/assets/icon.png differ diff --git a/with-storybook/assets/splash.png b/with-storybook/assets/splash.png new file mode 100644 index 0000000..4f9ade6 Binary files /dev/null and b/with-storybook/assets/splash.png differ diff --git a/with-storybook/babel.config.js b/with-storybook/babel.config.js new file mode 100644 index 0000000..2900afe --- /dev/null +++ b/with-storybook/babel.config.js @@ -0,0 +1,6 @@ +module.exports = function(api) { + api.cache(true); + return { + presets: ['babel-preset-expo'], + }; +}; diff --git a/with-storybook/package.json b/with-storybook/package.json new file mode 100644 index 0000000..d2d4d46 --- /dev/null +++ b/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 +} diff --git a/with-storybook/stories/0-Welcome.stories.js b/with-storybook/stories/0-Welcome.stories.js new file mode 100644 index 0000000..fe4de21 --- /dev/null +++ b/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 = () => ; + +toStorybook.story = { + name: 'to Storybook', +}; diff --git a/with-storybook/stories/1-Button.stories.js b/with-storybook/stories/1-Button.stories.js new file mode 100644 index 0000000..12acc8c --- /dev/null +++ b/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 = () => ( +