feat: storybook v8

trajano · Oct 16, 2024 · bf5d881 · bf5d881
1 parent 9dbd6ce
commit bf5d881
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 31 deletions.
diff --git a/packages/my-app/.storybook/main.ts b/packages/my-app/.storybook/main.ts
@@ -11,4 +11,7 @@ export default <StorybookConfig>{
     '@storybook/addon-ondevice-actions',
     '@storybook/addon-ondevice-backgrounds',
   ],
+  core: {
+    disableTelemetry: true,
+  },
 };
diff --git a/packages/my-app/.storybook/preview.tsx b/packages/my-app/.storybook/preview.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import { ScrollView, Appearance, StyleSheet } from 'react-native';
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
 import type { Preview } from '@storybook/react';
+import { ComponentType } from 'react';
+import { Appearance, ScrollView, StyleSheet } from 'react-native';
 
 const preview: Preview = {
   decorators: [
-    (Story) => (
+    (Story: ComponentType) => (
       <ScrollView contentContainerStyle={styles.scrollContainer}>
         <Story />
       </ScrollView>
@@ -36,5 +36,4 @@ const styles = StyleSheet.create({
     flexGrow: 1, // Ensures content can grow and scroll when necessary
   },
 });
-
 export default preview;
diff --git a/packages/my-app/metro.config.js b/packages/my-app/metro.config.js
@@ -0,0 +1,22 @@
+// @ts-check
+/* eslint-env node */
+const { getDefaultConfig } = require('expo/metro-config');
+const withStorybook = require('@storybook/react-native/metro/withStorybook');
+const path = require('path');
+
+const monorepoRoot = path.resolve(__dirname, '../..');
+const config = getDefaultConfig(__dirname);
+
+config.watchFolders = [monorepoRoot];
+if (!config.resolver) {
+  throw new Error('config.resolver is undefined');
+}
+config.resolver.nodeModulesPaths = [
+  path.resolve(__dirname, 'node_modules'),
+  path.resolve(monorepoRoot, 'node_modules'),
+];
+
+module.exports = withStorybook(config, {
+  enabled: true,
+  configPath: path.resolve(__dirname, './.storybook'),
+});
diff --git a/packages/my-app/metro.config.ts b/packages/my-app/metro.config.ts
diff --git a/packages/my-app/package.json b/packages/my-app/package.json
@@ -28,12 +28,7 @@
     "@react-native-picker/picker": "2.7.5",
     "@react-navigation/native": "^6.1.18",
     "@shopify/flash-list": "1.6.4",
-    "@storybook/addon-ondevice-actions": "^7.6.20",
-    "@storybook/addon-ondevice-backgrounds": "^7.6.20",
-    "@storybook/addon-ondevice-controls": "^7.6.20",
-    "@storybook/addon-ondevice-notes": "^7.6.20",
-    "@storybook/react-native": "^7.6.20",
-    "expo": "^51.0.37",
+    "expo": "^51.0.38",
     "expo-auth-session": "~5.5.2",
     "expo-background-fetch": "~12.0.1",
     "expo-camera": "~15.0.16",
@@ -61,13 +56,14 @@
     "expo-updates": "~0.25.27",
     "expo-web-browser": "~13.0.3",
     "formik": "^2.4.6",
-    "i18n-js": "^4.4.3",
+    "i18n-js": "^4.5.0",
     "lottie-react-native": "6.7.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.53.0",
     "react-native": "0.74.5",
-    "react-native-gesture-handler": "~2.16.2",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-i18n": "*",
     "react-native-my-components": "*",
     "react-native-my-empty": "*",
     "react-native-my-hooks": "*",
@@ -83,7 +79,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.8",
-    "@storybook/react": "^7.6.20",
+    "@gorhom/bottom-sheet": "^5.0.2",
+    "@storybook/addon-ondevice-actions": "^8.3.9",
+    "@storybook/addon-ondevice-backgrounds": "^8.3.9",
+    "@storybook/addon-ondevice-controls": "^8.3.9",
+    "@storybook/addon-ondevice-notes": "^8.3.9",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-native": "^8.3.9",
     "@testing-library/react-native": "^12.7.2",
     "@types/jest": "^29.5.13",
     "@types/react": "~18.2.45",

diff --git a/packages/my-app/src/Intl.stories.tsx b/packages/my-app/src/Intl.stories.tsx
@@ -69,8 +69,6 @@ const IntlEvaluationTable: FC = () => {
 
 const styles = StyleSheet.create({
   outerBox: {
-    flex: 1,
-    width: '100%', // Fills the width of the parent
     borderWidth: 1,
     borderColor: 'red',
   },

diff --git a/packages/my-app/tsconfig.json b/packages/my-app/tsconfig.json
@@ -8,9 +8,12 @@
     "moduleResolution": "Bundler"
   },
   "include": [
+    ".storybook/*.ts",
+    ".storybook/*.tsx",
     "**/*.ts",
     "**/*.tsx",
     ".expo/types/**/*.ts",
-    "expo-env.d.ts"
+    "expo-env.d.ts",
+    "metro.config.js"
   ]
 }
diff --git a/packages/my-app/withStorybook.d.ts b/packages/my-app/withStorybook.d.ts
@@ -0,0 +1,22 @@
+declare module '@storybook/react-native/metro/withStorybook' {
+  import { InputConfigT } from 'metro-config';
+
+  interface WebsocketsOptions {
+    port?: number;
+    host?: string;
+  }
+
+  interface WithStorybookOptions {
+    configPath?: string;
+    enabled?: boolean;
+    websockets?: WebsocketsOptions;
+    useJs?: boolean;
+  }
+
+  function withStorybook(
+    config: InputConfigT,
+    options?: WithStorybookOptions,
+  ): InputConfigT;
+
+  export = withStorybook;
+}