Add storybook and a Header story

.github/workflows/web.yml

@@ -44,6 +44,9 @@ jobs:
             - name: Build web
               run: npm run build
 
+            - name: Build docs
+              run: npm run build-storybook -- -o dist/docs
+
             - name: Deploy to S3
               run: aws s3 cp --recursive --acl public-read $GITHUB_WORKSPACE/dist s3://chat-test-expensify-com/
 

.gitignore

@@ -68,3 +68,6 @@ fastlane/screenshots
 
 # Local DEV config
 /.env
+
+# Storybook build files
+storybook-static

.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+    stories: [
+        '../src/**/*.stories.mdx',
+        '../src/**/*.stories.@(js|jsx|ts|tsx)'
+    ],
+    addons: [
+        '@storybook/addon-essentials',
+        '@storybook/addon-a11y'
+    ]
+};

.storybook/preview.js

@@ -0,0 +1 @@
+import '../assets/css/fonts.css';

.storybook/webpack.config.js

@@ -0,0 +1,7 @@
+const custom = require('../config/webpack/webpack.common');
+
+module.exports = {
+    webpackFinal: (config) => {
+        return {...config, module: {...config.module, rules: custom.module.rules}};
+    },
+};

babel.config.js

@@ -32,6 +32,6 @@ const metro = {
 module.exports = ({caller}) => {
     // For `react-native` (iOS/Android) caller will be "metro"
     // For `webpack` (Web) caller will be "@babel-loader"
-    const runningIn = caller(({name}) => name);
+    const runningIn = caller((args = {}) => args.name);
     return ['metro', 'babel-jest'].includes(runningIn) ? metro : webpack;
 };