chore: upgrade react native, expo and storybook

.gitignore

@@ -47,6 +47,10 @@ storybook-static
 dist/
 web-build/
 
+# Native directories (generated by expo prebuild)
+apps/*/ios/
+apps/*/android/
+
 # Native
 *.orig.*
 *.jks

.prettierignore

@@ -8,6 +8,7 @@ scripts/coverage
 
 # Auto-generated storybook file
 apps/storybook-react-native/.storybook/storybook.requires.js
+apps/storybook-react-native/.rnstorybook/storybook.requires.js
 
 # Auto-generated icon files
 packages/design-system-react/src/components/Icon/icons/

README.md

@@ -17,6 +17,13 @@ This repository contains the following packages [^fn1]:
 
 <!-- end package list -->
 
+## Applications
+
+This repository contains the following applications:
+
+- [`@metamask/storybook-react`](apps/storybook-react) - Storybook for React components
+- [`@metamask/storybook-react-native`](apps/storybook-react-native) - Storybook for React Native components
+
 Or, in graph form [^fn1]:
 
 <!-- start dependency graph -->

apps/storybook-react-native/.rnstorybook/index.tsx

@@ -0,0 +1,14 @@
+import { view } from './storybook.requires';
+
+const StorybookUIRoot = view.getStorybookUI({
+  // Disable AsyncStorage to avoid persistence issues
+  storage: {
+    getItem: async () => null,
+    setItem: async () => {},
+  },
+  // Reset initial selection
+  initialSelection: undefined,
+  shouldPersistSelection: false,
+});
+
+export default StorybookUIRoot;

apps/storybook-react-native/.rnstorybook/main.ts

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

apps/storybook-react-native/.rnstorybook/preview.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+import { StorybookProvider } from '../.storybook/StorybookProvider';
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <StorybookProvider>
+        <Story />
+      </StorybookProvider>
+    ),
+  ],
+};
+
+export default preview;

apps/storybook-react-native/.rnstorybook/storybook.requires.ts

@@ -0,0 +1,65 @@
+/* do not change this file, it is auto generated by storybook. */
+import { start, updateView, View } from '@storybook/react-native';
+
+import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-controls/register";
+import "@storybook/addon-ondevice-backgrounds/register";
+import "@storybook/addon-ondevice-actions/register";
+
+const normalizedStories = [
+  {
+    titlePrefix: "",
+    directory: "./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: "../../packages/design-system-react-native/src",
+    files: "**/*.stories.?(ts|tsx|js|jsx)",
+    importPathMatcher: /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    // @ts-ignore
+    req: require.context(
+      '../../../packages/design-system-react-native/src',
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
+    ),
+  }
+];
+
+
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+}
+
+
+const annotations = [
+  require('./preview'),
+  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;

apps/storybook-react-native/.storybook/StorybookProvider.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View, useColorScheme } from 'react-native';
+import { ThemeProvider, Theme } from '@metamask/design-system-twrnc-preset';
+
+interface StorybookProviderProps {
+  children: React.ReactNode;
+}
+
+export const StorybookProvider: React.FC<StorybookProviderProps> = ({
+  children,
+}) => {
+  const colorScheme = useColorScheme();
+  // Handle null case by defaulting to light mode
+  const isDarkMode = colorScheme === 'dark';
+  const theme = isDarkMode ? Theme.Dark : Theme.Light;
+
+  return (
+    <ThemeProvider theme={theme}>
+      <View style={{ flex: 1, padding: 16 }}>
+        {children}
+      </View>
+    </ThemeProvider>
+  );
+};

apps/storybook-react-native/.storybook/main.ts

@@ -0,0 +1,61 @@
+import type { StorybookConfig } from '@storybook/react-native-web-vite';
+import path from 'path';
+
+const main: StorybookConfig = {
+  stories: [
+    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+    '../../../packages/design-system-react-native/src/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+
+  addons: ['@storybook/addon-docs', '@chromatic-com/storybook'],
+
+  framework: {
+    name: '@storybook/react-native-web-vite',
+    options: {},
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen',
+    // Restrict TypeScript scanning to prevent monorepo conflicts
+    reactDocgenTypescriptOptions: {
+      tsconfigPath: '../tsconfig.json',
+      shouldExtractLiteralValuesFromEnum: true,
+      shouldRemoveUndefinedFromOptional: true,
+    },
+  },
+
+
+  async viteFinal(config) {
+    // Filter out vite-tsconfig-paths plugin to prevent conflicts
+    const filteredPlugins = config.plugins?.filter((plugin) => {
+      const pluginName = plugin?.name || '';
+      return pluginName !== 'vite:tsconfig-paths';
+    });
+
+    if (filteredPlugins) {
+      config.plugins = filteredPlugins;
+    }
+
+    config.resolve = config.resolve || {};
+
+    // Configure aliases for monorepo packages
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      'react-native': require.resolve('react-native-web'),
+      '@metamask/design-system-twrnc-preset': path.resolve(
+        __dirname,
+        '../../../packages/design-system-twrnc-preset/src',
+      ),
+      '@metamask/design-system-react-native': path.resolve(
+        __dirname,
+        '../../../packages/design-system-react-native/src',
+      ),
+    };
+
+    return config;
+  },
+};
+
+export default main;

apps/storybook-react-native/.storybook/preview.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+import { StorybookProvider } from './StorybookProvider';
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <StorybookProvider>
+        <Story />
+      </StorybookProvider>
+    ),
+  ],
+};
+
+export default preview;

apps/storybook-react-native/App.tsx

@@ -0,0 +1,3 @@
+import StorybookUIRoot from './.rnstorybook';
+
+export default StorybookUIRoot;