From 97191938caaa6e9d5270424771f4cb6efc786c6a Mon Sep 17 00:00:00 2001 From: evanbacon Date: Thu, 5 Oct 2023 13:58:05 -0700 Subject: [PATCH 1/2] update storybook example --- with-storybook/.gitignore | 37 +- with-storybook/.storybook/addons.js | 2 - with-storybook/.storybook/config.js | 4 - with-storybook/.storybook/main.js | 64 +++ with-storybook/.storybook/preview.js | 14 + with-storybook/.storybook/webpack.config.js | 6 - with-storybook/App.js | 20 + with-storybook/App.tsx | 13 - with-storybook/README.md | 120 +----- with-storybook/assets/retro-regular.ttf | Bin 60684 -> 0 bytes with-storybook/package.json | 44 +-- with-storybook/stories/0-Welcome.stories.js | 17 - with-storybook/stories/1-Button.stories.js | 15 - with-storybook/stories/2-Constants.stories.js | 15 - .../stories/3-LinearGradient.stories.js | 17 - with-storybook/stories/4-Font.stories.js | 39 -- with-storybook/stories/Button.jsx | 56 +++ with-storybook/stories/Button.stories.js | 45 +++ with-storybook/stories/Configure.mdx | 364 ++++++++++++++++++ with-storybook/stories/Gradient.jsx | 15 + with-storybook/stories/Gradient.stories.js | 18 + .../stories/assets/accessibility.png | Bin 0 -> 42336 bytes .../stories/assets/accessibility.svg | 5 + .../stories/assets/addon-library.png | Bin 0 -> 467366 bytes with-storybook/stories/assets/assets.png | Bin 0 -> 3899 bytes with-storybook/stories/assets/context.png | Bin 0 -> 6119 bytes with-storybook/stories/assets/discord.svg | 15 + with-storybook/stories/assets/docs.png | Bin 0 -> 27875 bytes .../stories/assets/figma-plugin.png | Bin 0 -> 44246 bytes with-storybook/stories/assets/github.svg | 3 + with-storybook/stories/assets/share.png | Bin 0 -> 40767 bytes with-storybook/stories/assets/styling.png | Bin 0 -> 7237 bytes with-storybook/stories/assets/testing.png | Bin 0 -> 49313 bytes with-storybook/stories/assets/theming.png | Bin 0 -> 44374 bytes with-storybook/stories/assets/tutorials.svg | 12 + with-storybook/stories/assets/youtube.svg | 4 + with-storybook/stories/index.js | 4 - with-storybook/tsconfig.json | 15 - 38 files changed, 702 insertions(+), 281 deletions(-) delete mode 100644 with-storybook/.storybook/addons.js delete mode 100644 with-storybook/.storybook/config.js create mode 100644 with-storybook/.storybook/main.js create mode 100644 with-storybook/.storybook/preview.js delete mode 100644 with-storybook/.storybook/webpack.config.js create mode 100644 with-storybook/App.js delete mode 100644 with-storybook/App.tsx delete mode 100755 with-storybook/assets/retro-regular.ttf delete mode 100644 with-storybook/stories/0-Welcome.stories.js delete mode 100644 with-storybook/stories/1-Button.stories.js delete mode 100644 with-storybook/stories/2-Constants.stories.js delete mode 100644 with-storybook/stories/3-LinearGradient.stories.js delete mode 100644 with-storybook/stories/4-Font.stories.js create mode 100644 with-storybook/stories/Button.jsx create mode 100644 with-storybook/stories/Button.stories.js create mode 100644 with-storybook/stories/Configure.mdx create mode 100644 with-storybook/stories/Gradient.jsx create mode 100644 with-storybook/stories/Gradient.stories.js create mode 100644 with-storybook/stories/assets/accessibility.png create mode 100644 with-storybook/stories/assets/accessibility.svg create mode 100644 with-storybook/stories/assets/addon-library.png create mode 100644 with-storybook/stories/assets/assets.png create mode 100644 with-storybook/stories/assets/context.png create mode 100644 with-storybook/stories/assets/discord.svg create mode 100644 with-storybook/stories/assets/docs.png create mode 100644 with-storybook/stories/assets/figma-plugin.png create mode 100644 with-storybook/stories/assets/github.svg create mode 100644 with-storybook/stories/assets/share.png create mode 100644 with-storybook/stories/assets/styling.png create mode 100644 with-storybook/stories/assets/testing.png create mode 100644 with-storybook/stories/assets/theming.png create mode 100644 with-storybook/stories/assets/tutorials.svg create mode 100644 with-storybook/stories/assets/youtube.svg delete mode 100644 with-storybook/stories/index.js delete mode 100644 with-storybook/tsconfig.json diff --git a/with-storybook/.gitignore b/with-storybook/.gitignore index 13dc43e9..05647d55 100644 --- a/with-storybook/.gitignore +++ b/with-storybook/.gitignore @@ -1,2 +1,35 @@ -node_modules -/storybook-static +# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files + +# dependencies +node_modules/ + +# Expo +.expo/ +dist/ +web-build/ + +# Native +*.orig.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision + +# Metro +.metro-health-check* + +# debug +npm-debug.* +yarn-debug.* +yarn-error.* + +# macOS +.DS_Store +*.pem + +# local env files +.env*.local + +# typescript +*.tsbuildinfo diff --git a/with-storybook/.storybook/addons.js b/with-storybook/.storybook/addons.js deleted file mode 100644 index 6aed412d..00000000 --- a/with-storybook/.storybook/addons.js +++ /dev/null @@ -1,2 +0,0 @@ -import '@storybook/addon-actions/register'; -import '@storybook/addon-links/register'; diff --git a/with-storybook/.storybook/config.js b/with-storybook/.storybook/config.js deleted file mode 100644 index 8452b27e..00000000 --- a/with-storybook/.storybook/config.js +++ /dev/null @@ -1,4 +0,0 @@ -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/main.js b/with-storybook/.storybook/main.js new file mode 100644 index 00000000..d29b7309 --- /dev/null +++ b/with-storybook/.storybook/main.js @@ -0,0 +1,64 @@ +import path from "path"; +import { DefinePlugin } from "webpack"; +import { getConfig } from "@expo/webpack-config/env"; + +/** @type { import('@storybook/react-webpack5').StorybookConfig } */ +const config = { + stories: [ + "../stories/**/*.mdx", + "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)", + ], + addons: [ + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-onboarding", + "@storybook/addon-interactions", + { + name: "@storybook/addon-react-native-web", + options: { + modulesToTranspile: [], + projectRoot: "../", + babelPlugins: ["@babel/plugin-proposal-export-namespace-from"], + }, + }, + ], + framework: { + name: "@storybook/react-webpack5", + options: {}, + }, + docs: { + autodocs: "tag", + }, + webpackFinal: (config) => { + config.plugins.push( + // Used for surfacing information related to constants + new DefinePlugin({ + "process.env.APP_MANIFEST": JSON.stringify( + sanitizeConfig( + getConfig({ + mode: config.mode, + projectRoot: path.join(__dirname, ".."), + }) + ) + ), + }) + ); + + return config; + }, +}; + +function sanitizeConfig(config) { + delete config._internal; + delete config.ios; + delete config.android; + delete config.plugins; + delete config.hooks; + delete config.facebookScheme; + delete config.facebookAppId; + delete config.facebookDisplayName; + delete config.assetBundlePatterns; + return config; +} + +export default config; diff --git a/with-storybook/.storybook/preview.js b/with-storybook/.storybook/preview.js new file mode 100644 index 00000000..0f07f766 --- /dev/null +++ b/with-storybook/.storybook/preview.js @@ -0,0 +1,14 @@ +/** @type { import('@storybook/react').Preview } */ +const preview = { + parameters: { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + }, +}; + +export default preview; diff --git a/with-storybook/.storybook/webpack.config.js b/with-storybook/.storybook/webpack.config.js deleted file mode 100644 index 67c2a3ac..00000000 --- a/with-storybook/.storybook/webpack.config.js +++ /dev/null @@ -1,6 +0,0 @@ -const { resolve } = require("path"); -const { withUnimodules } = require("@expo/webpack-config/addons"); - -module.exports = ({ config }) => { - return withUnimodules(config, { projectRoot: resolve(__dirname, "../") }); -}; diff --git a/with-storybook/App.js b/with-storybook/App.js new file mode 100644 index 00000000..09f879b8 --- /dev/null +++ b/with-storybook/App.js @@ -0,0 +1,20 @@ +import { StatusBar } from 'expo-status-bar'; +import { StyleSheet, Text, View } from 'react-native'; + +export default function App() { + return ( + + Open up App.js to start working on your app! + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + alignItems: 'center', + justifyContent: 'center', + }, +}); diff --git a/with-storybook/App.tsx b/with-storybook/App.tsx deleted file mode 100644 index fe43f8ed..00000000 --- a/with-storybook/App.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { configure, getStorybookUI } from '@storybook/react-native'; - -configure(() => { - // Since require.context doesn't exist in metro bundler world, we have to - // manually import files ending in *.stories.js - require('./stories'); -}, module); - -export default getStorybookUI({ - // Pass AsyncStorage below if you want Storybook to open your - // last visited story after you close and re-open your app - asyncStorage: null -}); diff --git a/with-storybook/README.md b/with-storybook/README.md index 39a3c1a7..d92097a3 100644 --- a/with-storybook/README.md +++ b/with-storybook/README.md @@ -1,126 +1,26 @@ -# Storybook Example +# Storybook Webpack Example

- - Supports Expo iOS - - Supports Expo Android Supports Expo Web

-expo examples - -You can use Storybook to test and share your component library quickly and easily! This example shows how to use Expo modules with Storybook CLI and Expo CLI. +You can use Storybook to test and share your component library quickly and easily! This example shows how to use Expo libraries with Storybook CLI and Webpack. ## Running with Storybook CLI -![expo web with storybook-cli](https://i.imgur.com/0x0Ecmp.png "expo web with storybook-cli") +> web only / Webpack -> web only +This system uses the [community react-native-web addon](https://github.com/storybookjs/addon-react-native-web/) to configure Storybook's Webpack config to support running React Native for web. -This method runs your Expo components in a Storybook-React environment. This is different to Expo web, but may prove helpful as the Storybook-React community is more robust than the Storybook-React Native community. +This method runs your Expo components in a Storybook-React environment. This is different to Expo CLI's Webpack config. -- Create Expo project `expo init my-project` +- Create Expo project `npx create expo my-project` - You can use any template, we'll use the managed blank TypeScript project for this example. -- `cd` into the project and run `npx -p @storybook/cli sb init --type react` to bootstrap a new React project -- Install the expo webpack config so we can add unimodules support `yarn add -D @expo/webpack-config` -- Create a [custom webpack config](./.storybook/webpack.config.js) `touch .storybook/webpack.config.js` - - ```js - const { resolve } = require("path"); - const { withUnimodules } = require("@expo/webpack-config/addons"); - - module.exports = ({ config }) => { - return withUnimodules(config, { projectRoot: resolve(__dirname, "../") }); - }; - ``` - +- `cd` into the project and run `npx sb init --type react`, and select Webpack 5 to bootstrap a new React project. +- Install the requisite dependencies `npx expo add react-dom react-native-web @storybook/addon-react-native-web @expo/webpack-config` +- The contents of `.storybook/main.js` have been modified to support loading the Expo config for the `expo-constants` libraries. - Run `yarn build-storybook` to try it out! - The example should open to `http://localhost:6006/` -- You may also want to add `storybook-static` to your `.gitignore` - -### 📁 File Structure - -``` -Expo with Storybook CLI -├── stories -│ └── Example.stories.js ➡️ A Storybook page to render -├── .storybook -│ ├── config.js ➡️ The entry point / config for a typical Storybook project. -│ └── webpack.config.js ➡️ The custom Webpack config used to add Expo support to Storybook CLI. -├── assets ➡️ All static assets for your project -├── storybook-static ➡️ Generated Storybook files (should be ignored) -└── babel.config.js ➡️ Babel config (should be using `babel-preset-expo`) -``` - -## Running with Expo CLI - -storybook with expo-cli - -> This method is universal :] - -This project can be used for iOS, Android, and web! You may find that it's better to use it for native only, and to use the "Running with Storybook" method for web. Unlike the Expo + Next.js flow, you can use both web methods at the same time! - -- Create Expo project `expo init my-project` - - You can use any template, we'll use the managed blank TypeScript project for this example. -- `cd` into the project and run `npx -p @storybook/cli sb init --type react` to bootstrap a new React project. -- Install the Storybook React Native package: - - `yarn add -D @storybook/react-native` -- In your `App.tsx` or `App.js` - -```ts -import { configure, getStorybookUI } from "@storybook/react-native"; - -configure(() => { - // Since require.context doesn't exist in metro bundler world, we have to - // manually import files ending in *.stories.js - require("./stories"); -}, module); - -export default getStorybookUI(); -``` - -- Create a file for importing all of the stories ([`stories/index.js`](./stories/index.js)): - - - `touch stories/index.js` - - Import all of your stories in this file. Ex: - - ```js - // stories/index.js - import "./1-Button.stories"; - ``` - -- Register your stories for React Native: - -```diff -// Example.stories.js -+ import { storiesOf } from '@storybook/react-native'; - -export const text = () => ( /_ Example JSX _/ ); - -// Register your story with the `module`, name, and React functional component. - -+ storiesOf('Button', module).add('Text', text); - -``` - -- Now run `yarn start` or `npm run start` to see it in action! - -### 📁 File Structure - -``` -Storybook with Expo CLI -├── stories -│ ├── index.js ➡️ Native story imports -│ └── Example.stories.js ➡️ A Storybook page to render -├── assets ➡️ All static assets for your project -├── App.tsx ➡️ Entry Point for universal Expo apps -├── app.config.js ➡️ Expo config file -└── babel.config.js ➡️ Babel config (should be using `babel-preset-expo`) -``` - -## 📝 Notes -- [Storybook React](https://storybook.js.org/docs/react/get-started/introduction) -- [Storybook React Native](https://storybook.js.org/docs/guides/guide-react-native/) +To learn more, configure the Storybook plugin according to [the official guide](https://github.com/storybookjs/addon-react-native-web/). diff --git a/with-storybook/assets/retro-regular.ttf b/with-storybook/assets/retro-regular.ttf deleted file mode 100755 index 15bb923ce24337748938c9da0e21c15e1047208e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 60684 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 ; - -toStorybook.story = { - name: 'to Storybook', -}; - -// On-Device Register -storiesOf('Welcome', module).add(toStorybook.story.name, toStorybook); diff --git a/with-storybook/stories/1-Button.stories.js b/with-storybook/stories/1-Button.stories.js deleted file mode 100644 index 661a490e..00000000 --- a/with-storybook/stories/1-Button.stories.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react-native'; -import { Button } from 'react-native'; - -export default { - title: 'Button', -}; - -export const text = () => ( -