FEAT: add storybook (#124)

* feat(storybook): setup and initial configuration of Storybook

* feat(dev-menu): add custom Dev Menu item to open Storybook

* feat(storybook-icons): add stories for generated icon components

* feat(storybook) : update storybook requires genrated file

* feat(storybook) : update storybook requires genrated file

* feat(storybook-cards): add stories for cards components

* feat(env.example): add EXPO_PUBLIC_ENVIRONMENT var  to env.exemple

* add storybook scripts

* add screens guards

* clean + storybook app name

* storybook commands and README

* add form docs stories

* storybook: add redirect in app index and update README

* clean deps

---------

Co-authored-by: Hugo Pérard <hugo.perard@bearstudio.fr>

Author: AzizOuertani

.env.example

@@ -2,4 +2,4 @@ EXPO_PUBLIC_BASE_URL=https://demo.start-ui.com
 
 # OPTIONAL TO OVERRIDE
 # EXPO_PUBLIC_AUTH_URL=https://demo.start-ui.com/api/auth
-# EXPO_PUBLIC_OPENAPI_URL=https://demo.start-ui.com/api/openapi/app/schema
+# EXPO_PUBLIC_OPENAPI_URL=https://demo.start-ui.com/api/openapi/app/schema

.rnstorybook/index.ts

@@ -0,0 +1,12 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+import { view } from './storybook.requires';
+
+const StorybookUIRoot = view.getStorybookUI({
+  storage: {
+    getItem: AsyncStorage.getItem,
+    setItem: AsyncStorage.setItem,
+  },
+});
+
+export default StorybookUIRoot;

.rnstorybook/main.ts

@@ -0,0 +1,14 @@
+import type { StorybookConfig } from '@storybook/react-native';
+
+const main: StorybookConfig = {
+  stories: [
+    './stories/**/*.stories.?(ts|tsx|js|jsx)',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-actions',
+  ],
+};
+
+export default main;

.rnstorybook/storybook.requires.ts

@@ -0,0 +1,57 @@
+/* do not change this file, it is auto generated by storybook. */
+import { start, updateView, View } from '@storybook/react-native';
+
+import '@storybook/addon-ondevice-controls/register';
+import '@storybook/addon-ondevice-actions/register';
+
+const normalizedStories = [
+  {
+    titlePrefix: '',
+    directory: './.rnstorybook/stories',
+    files: '**/*.stories.?(ts|tsx|js|jsx)',
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    // @ts-ignore
+    req: require.context(
+      './stories',
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
+    ),
+  },
+  {
+    titlePrefix: '',
+    directory: './src',
+    files: '**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|mjs|ts|tsx))$/,
+    // @ts-ignore
+    req: require.context(
+      '../src',
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|mjs|ts|tsx))$/
+    ),
+  },
+];
+
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+}
+
+const annotations = [require('@storybook/react-native/preview')];
+
+global.STORIES = normalizedStories;
+
+// @ts-ignore
+module?.hot?.accept?.();
+
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories);
+}
+
+export const view: View = global.view;

README.md

@@ -33,7 +33,9 @@ pnpm install # Install dependencies
 
 ## Environment variables
 
-🚨 Using Expo Go, local development urls should not be `localhost`, use public IP instead
+
+> [!TIP]  
+> Using Expo Go, local development urls should not be `localhost`, use public IP instead
 
 ```bash
 EXPO_PUBLIC_BASE_URL # Base URL of your server, usefull if you are using Start UI [web]
@@ -76,6 +78,18 @@ pnpm dev:ios      # To run with local ios build
 pnpm dev:android  # To run with local android build
 ```
 
+## Storybook
+
+Storybook is managed as a specific mode of the app that is launch apart in port 8083
+
+```bash
+pnpm storybook   # To run app in storybook mode
+```
+
+> [!TIP]
+> You can open Storybook in another tab and switch between the app and Storybook by pressing `i` or `a` in each terminal.
+
+
 ## Generate custom icons components from svg files
 
 Put the custom svg files into the `app/components/icons/svg-sources` folder and then run the following command:

app.config.ts

@@ -3,8 +3,11 @@ import { ExpoConfig } from 'expo/config';
 const BUILD_NUMBER: `${number}` = '1';
 const EXPO_PROJECT_ID = 'af6ae74c-f04d-497a-9733-b2b7539f77c5';
 
+const appPrefix =
+  process.env.EXPO_PUBLIC_ENVIRONMENT === 'storybook' ? 'Storybook • ' : '';
+
 export default {
-  name: 'Start UI [native]',
+  name: appPrefix + 'Start UI [native]',
   slug: 'start-ui-native-v9iizxkbojzedvpfkfzcq',
   scheme: 'start-ui-native',
   owner: 'bearstudio',
@@ -24,7 +27,7 @@ export default {
     bundleIdentifier: 'com.bearstudio.startuinative',
     buildNumber: BUILD_NUMBER,
     supportsTablet: true,
-    // appStoreUrl: 'https://apps.apple.com/fr/app/bearstudio/xxxx',
+    // appStoreUrl: 'https://apps.apple.com/fr/app/bearstudio/startuinative',
   },
   android: {
     package: 'com.bearstudio.startuinative',
@@ -63,6 +66,7 @@ export default {
     url: `https://u.expo.dev/${EXPO_PROJECT_ID}`,
   },
   extra: {
+    isStorybook: process.env.EXPO_PUBLIC_ENVIRONMENT === 'storybook',
     eas: {
       projectId: EXPO_PROJECT_ID,
     },

metro.config.cjs

@@ -0,0 +1,14 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-require-imports */
+const path = require('path');
+const { getDefaultConfig } = require('expo/metro-config');
+
+const withStorybook = require('@storybook/react-native/metro/withStorybook');
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+module.exports = withStorybook(config, {
+  enabled: true,
+  configPath: path.resolve(__dirname, './.rnstorybook'),
+});

package.json

@@ -11,6 +11,7 @@
     "dev": "expo start --go",
     "dev:android": "expo run:android",
     "dev:ios": "expo run:ios",
+    "storybook": "EXPO_PUBLIC_ENVIRONMENT='storybook' expo start --go --port 8083",
     "lint": "run-p lint:*",
     "lint:eslint": "eslint ./src --fix",
     "lint:ts": "tsc --noEmit",
@@ -35,6 +36,7 @@
     "dayjs": "1.11.18",
     "expo": "54.0.13",
     "expo-application": "7.0.7",
+    "expo-constants": "18.0.9",
     "expo-device": "8.0.9",
     "expo-font": "14.0.9",
     "expo-haptics": "15.0.7",
@@ -69,9 +71,13 @@
     "zod": "4.1.11"
   },
   "devDependencies": {
+    "@babel/core": "7.28.4",
     "@eslint-react/eslint-plugin": "1.53.1",
     "@eslint/js": "9.36.0",
     "@hey-api/openapi-ts": "0.85.1",
+    "@storybook/addon-ondevice-actions": "9.1.4",
+    "@storybook/addon-ondevice-controls": "9.1.4",
+    "@storybook/react-native": "9.1.4",
     "@svgr/cli": "8.1.0",
     "@types/node": "24.6.1",
     "@types/react": "19.1.13",
@@ -87,6 +93,7 @@
     "lefthook": "1.13.4",
     "npm-run-all": "4.1.5",
     "prettier": "3.6.2",
+    "storybook": "9.1.10",
     "ts-plugin-sort-import-suggestions": "1.0.4",
     "typescript": "5.9.2",
     "typescript-eslint": "8.44.1"
@@ -121,6 +128,9 @@
     "onlyBuiltDependencies": [
       "lefthook",
       "unrs-resolver"
-    ]
+    ],
+    "overrides": {
+      "@react-native-community/slider": "5.0.1"
+    }
   }
 }