diff --git a/.depcheckrc.yml b/.depcheckrc.yml index 23f79c2b..e1330d46 100644 --- a/.depcheckrc.yml +++ b/.depcheckrc.yml @@ -23,4 +23,6 @@ ignores: - 'babel-jest' # Ignore dependencies which plug into the NPM lifecycle - '@lavamoat/preinstall-always-fail' + - 'react' - 'react-native' + - 'twrnc' diff --git a/apps/storybook-react-native/.storybook/config.js b/apps/storybook-react-native/.storybook/config.js new file mode 100644 index 00000000..a9689d0e --- /dev/null +++ b/apps/storybook-react-native/.storybook/config.js @@ -0,0 +1,12 @@ +import { addDecorator } from '@storybook/react-native'; +import { + ColorSet, + ThemeProvider, + Theme, +} from '@metamask/design-system-twrnc-preset'; + +addDecorator((Story) => ( + + + +)); diff --git a/apps/storybook-react-native/.storybook/index.js b/apps/storybook-react-native/.storybook/index.js index b05efd92..6eb31aa6 100644 --- a/apps/storybook-react-native/.storybook/index.js +++ b/apps/storybook-react-native/.storybook/index.js @@ -1,3 +1,5 @@ +import * as SystemUI from 'expo-system-ui'; +import './config'; import { getStorybookUI } from '@storybook/react-native'; import registerRootComponent from 'expo/build/launch/registerRootComponent'; import './storybook.requires'; // Ensure this file exists and the path is correct diff --git a/apps/storybook-react-native/.storybook/main.js b/apps/storybook-react-native/.storybook/main.js index a4d6acb1..ef9feebf 100644 --- a/apps/storybook-react-native/.storybook/main.js +++ b/apps/storybook-react-native/.storybook/main.js @@ -1,6 +1,8 @@ // .storybook/main.js module.exports = { - stories: ['../src/**/*.stories.?(ts|tsx)'], + stories: [ + '../../../packages/design-system-react-native/src/**/*.stories.@(js|jsx|ts|tsx)', + ], addons: [ '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions', diff --git a/apps/storybook-react-native/.storybook/storybook.requires.js b/apps/storybook-react-native/.storybook/storybook.requires.js index bd039853..066966a3 100644 --- a/apps/storybook-react-native/.storybook/storybook.requires.js +++ b/apps/storybook-react-native/.storybook/storybook.requires.js @@ -6,30 +6,30 @@ import { addParameters, addArgsEnhancer, clearDecorators, -} from '@storybook/react-native'; +} from "@storybook/react-native"; global.STORIES = [ { - titlePrefix: '', - directory: './src', - files: '**/*.stories.?(ts|tsx)', + titlePrefix: "", + directory: "../../packages/design-system-react-native/src", + files: "**/*.stories.@(js|jsx|ts|tsx)", importPathMatcher: - '^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx)?)$', + "^(?:\\.\\.\\/\\.\\.\\/packages\\/design-system-react-native\\/src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$", }, ]; -import '@storybook/addon-ondevice-controls/register'; -import '@storybook/addon-ondevice-actions/register'; +import "@storybook/addon-ondevice-controls/register"; +import "@storybook/addon-ondevice-actions/register"; -import { argsEnhancers } from '@storybook/addon-actions/dist/modern/preset/addArgs'; +import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"; -import { decorators, parameters } from './preview'; +import { decorators, parameters } from "./preview"; if (decorators) { if (__DEV__) { // stops the warning from showing on every HMR - require('react-native').LogBox.ignoreLogs([ - '`clearDecorators` is deprecated and will be removed in Storybook 7.0', + require("react-native").LogBox.ignoreLogs([ + "`clearDecorators` is deprecated and will be removed in Storybook 7.0", ]); } // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185 @@ -46,7 +46,9 @@ try { } catch {} const getStories = () => { - return { './src/Button.stories.tsx': require('../src/Button.stories.tsx') }; + return { + "./../../packages/design-system-react-native/src/components/Button.stories.tsx": require("../../../packages/design-system-react-native/src/components/Button.stories.tsx"), + }; }; configure(getStories, module, false); diff --git a/apps/storybook-react-native/app.json b/apps/storybook-react-native/app.json index 35057567..fbcc5ca9 100644 --- a/apps/storybook-react-native/app.json +++ b/apps/storybook-react-native/app.json @@ -4,24 +4,6 @@ "slug": "storybook-react-native", "version": "1.0.0", "orientation": "portrait", - "icon": "./assets/icon.png", - "userInterfaceStyle": "light", - "splash": { - "image": "./assets/splash.png", - "resizeMode": "contain", - "backgroundColor": "#ffffff" - }, - "ios": { - "supportsTablet": true - }, - "android": { - "adaptiveIcon": { - "foregroundImage": "./assets/adaptive-icon.png", - "backgroundColor": "#ffffff" - } - }, - "web": { - "favicon": "./assets/favicon.png" - } + "userInterfaceStyle": "automatic" } } diff --git a/apps/storybook-react-native/assets/adaptive-icon.png b/apps/storybook-react-native/assets/adaptive-icon.png deleted file mode 100644 index 03d6f6b6..00000000 Binary files a/apps/storybook-react-native/assets/adaptive-icon.png and /dev/null differ diff --git a/apps/storybook-react-native/assets/favicon.png b/apps/storybook-react-native/assets/favicon.png deleted file mode 100644 index e75f697b..00000000 Binary files a/apps/storybook-react-native/assets/favicon.png and /dev/null differ diff --git a/apps/storybook-react-native/assets/icon.png b/apps/storybook-react-native/assets/icon.png deleted file mode 100644 index a0b1526f..00000000 Binary files a/apps/storybook-react-native/assets/icon.png and /dev/null differ diff --git a/apps/storybook-react-native/assets/splash.png b/apps/storybook-react-native/assets/splash.png deleted file mode 100644 index 0e89705a..00000000 Binary files a/apps/storybook-react-native/assets/splash.png and /dev/null differ diff --git a/apps/storybook-react-native/package.json b/apps/storybook-react-native/package.json index 2d962552..c2e1fbc9 100644 --- a/apps/storybook-react-native/package.json +++ b/apps/storybook-react-native/package.json @@ -14,8 +14,11 @@ }, "dependencies": { "@metamask/design-system-react-native": "workspace:^", + "@metamask/design-system-twrnc-preset": "workspace:^", + "@metamask/design-tokens": "^4.1.0", "expo": "~49.0.23", "expo-status-bar": "~1.6.0", + "expo-system-ui": "~2.4.0", "react-native-reanimated": "3.3.0", "uuid": "^3.0.0" }, diff --git a/apps/storybook-react-native/src/Button.stories.tsx b/apps/storybook-react-native/src/Button.stories.tsx index 7d7a7f42..0a196d7a 100644 --- a/apps/storybook-react-native/src/Button.stories.tsx +++ b/apps/storybook-react-native/src/Button.stories.tsx @@ -1,4 +1,5 @@ import { Button } from '@metamask/design-system-react-native'; +import { useTailwind } from '@metamask/design-system-twrnc-preset'; import type { Meta, StoryObj } from '@storybook/react-native'; import React from 'react'; import { View } from 'react-native'; @@ -15,8 +16,9 @@ export default ButtonMeta; export const Basic: StoryObj = { render: () => { + const tw = useTailwind(); return ( - +