Set up twrnc theming for React Native component library

apps/storybook-react-native/.eslintrc.js

@@ -25,7 +25,7 @@ module.exports = {
       'ignorePackages',
       {
         js: 'always',
-        jsx: 'never',
+        jsx: 'always',
         ts: 'never',
         tsx: 'never',
       },

apps/storybook-react-native/.storybook/config.js

@@ -0,0 +1,12 @@
+import { addDecorator } from '@storybook/react-native';
+import {
+  Theme,
+  ThemeProvider,
+  ColorScheme,
+} from '@metamask/design-system-twrnc-preset';
+
+addDecorator((Story) => (
+  <ThemeProvider theme={Theme.Brand} colorScheme={ColorScheme.Themed}>
+    <Story />
+  </ThemeProvider>
+));

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

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: "./src",
+    files: "**/*.stories.?(ts|tsx)",
     importPathMatcher:
-      '^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx)?)$',
+      "^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?: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,7 @@ try {
 } catch {}
 
 const getStories = () => {
-  return { './src/Button.stories.tsx': require('../src/Button.stories.tsx') };
+  return { "./src/Button.stories.tsx": require("../src/Button.stories.tsx") };
 };
 
 configure(getStories, module, false);

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"
   }
 }

apps/storybook-react-native/package.json

@@ -14,9 +14,13 @@
   },
   "dependencies": {
     "@metamask/design-system-react-native": "workspace:^",
+    "@metamask/design-system-twrnc-preset": "workspace:^",
+    "@metamask/design-tokens": "^4.0.0",
     "expo": "~49.0.23",
     "expo-status-bar": "~1.6.0",
+    "expo-system-ui": "~2.4.0",
     "react-native-reanimated": "3.3.0",
+    "twrnc": "^4.5.1",
     "uuid": "^3.0.0"
   },
   "devDependencies": {

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<typeof Button> = {
   render: () => {
+    const tw = useTailwind();
     return (
-      <View>
+      <View style={tw`bg-primary-default p-3`}>
         <Button text="Sample Button" />
       </View>
     );

package.json

@@ -13,7 +13,7 @@
     "packages/*"
   ],
   "scripts": {
-    "build": "yarn ts-bridge --project tsconfig.build.json --verbose && yarn workspace @metamask/design-system-react-native build",
+    "build": "yarn ts-bridge --project tsconfig.build.json --verbose && yarn workspace @metamask/design-system-twrnc-preset build && yarn workspace @metamask/design-system-react-native build",
     "build:clean": "rimraf dist '**/*.tsbuildinfo' && yarn build",
     "build:docs": "yarn workspaces foreach --all --no-private --parallel --interlaced --verbose run build:docs",
     "build:types": "tsc --build tsconfig.build.json --verbose",
@@ -94,6 +94,7 @@
     "semver": "^7.6.3",
     "simple-git-hooks": "^2.8.0",
     "ts-node": "^10.9.1",
+    "twrnc": "^4.5.1",
     "typescript": "~5.2.2",
     "yargs": "^17.7.2"
   },

packages/design-system-react-native/.eslintrc.js

@@ -21,7 +21,7 @@ module.exports = {
       'ignorePackages',
       {
         js: 'always',
-        jsx: 'never',
+        jsx: 'always',
         ts: 'never',
         tsx: 'never',
       },

packages/design-system-react-native/package.json

@@ -31,7 +31,7 @@
     "dist/"
   ],
   "scripts": {
-    "build": "tsc --project tsconfig.build.json",
+    "build": "rm -rf tsconfig.build.tsbuildinfo dist && tsc --project tsconfig.build.json",
     "build:docs": "typedoc",
     "changelog:update": "../../scripts/update-changelog.sh @metamask/design-system-react-native",
     "changelog:validate": "../../scripts/validate-changelog.sh @metamask/design-system-react-native",
@@ -43,6 +43,7 @@
     "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
   },
   "devDependencies": {
+    "@babel/core": "^7.23.5",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.23.3",
@@ -62,8 +63,11 @@
     "typescript": "~5.2.2"
   },
   "peerDependencies": {
+    "@metamask/design-system-twrnc-preset": "workspace:^",
+    "@metamask/design-tokens": "^4.0.0",
     "react": "^18.2.0",
-    "react-native": "0.72.15"
+    "react-native": "0.72.15",
+    "twrnc": "^4.5.1"
   },
   "engines": {
     "node": "^18.18 || >=20"

packages/design-system-react-native/src/components/Button.tsx

@@ -1,13 +1,14 @@
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import React from 'react';
 import { TouchableOpacity, Text } from 'react-native';
 
 export type ButtonProps = {
   text: string;
 };
-
 const Button = ({ text }: ButtonProps) => {
+  const tw = useTailwind();
   return (
-    <TouchableOpacity>
+    <TouchableOpacity style={tw`bg-primary-default`}>
       <Text>{text}</Text>
     </TouchableOpacity>
   );

packages/design-system-react-native/src/hocs/withThemeProvider.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable jsdoc/require-returns */
+// src/hocs/withThemeProvider.tsx
+
+import {
+  ThemeProvider,
+  ThemeContext,
+  Theme,
+  ColorScheme,
+} from '@metamask/design-system-twrnc-preset';
+import React, { forwardRef, useContext } from 'react';
+
+/**
+ * HOC to wrap components with ThemeProvider if none is present.
+ * @param Component - The component to wrap with ThemeProvider.
+ */
+export function withThemeProvider<Props extends object>(
+  Component: React.ComponentType<Props>,
+) {
+  const WrappedComponent = forwardRef<unknown, Props>((props, ref) => {
+    // Check if a ThemeProvider is already present
+    const themeContext = useContext(ThemeContext);
+
+    // If ThemeProvider exists, use the component as is
+    if (themeContext) {
+      return <Component {...(props as Props)} ref={ref} />;
+    }
+
+    // Otherwise, wrap with ThemeProvider
+    return (
+      <ThemeProvider theme={Theme.Brand} colorScheme={ColorScheme.Themed}>
+        <Component {...(props as Props)} ref={ref} />
+      </ThemeProvider>
+    );
+  });
+
+  return WrappedComponent;
+}

packages/design-system-react-native/src/index.ts

@@ -1 +1,11 @@
-export { default as Button } from './components/Button';
+// index.ts
+
+import ButtonComponent from './components/Button';
+import { withThemeProvider } from './hocs/withThemeProvider';
+
+// Wrap the Button component
+export const Button = withThemeProvider(ButtonComponent);
+
+// Export other components similarly
+// import OtherComponent from './components/OtherComponent';
+// export const OtherComponent = withThemeProvider(OtherComponent);

packages/design-system-react-native/tsconfig.build.json

@@ -8,6 +8,10 @@
     "types": ["react-native", "jest"],
     "emitDeclarationOnly": false
   },
-  "references": [],
+  "references": [
+    {
+      "path": "../design-system-twrnc-preset/tsconfig.build.json"
+    }
+  ],
   "include": ["./src"]
 }

packages/design-system-react-native/tsconfig.json

@@ -5,7 +5,11 @@
     "jsx": "react-native",
     "skipLibCheck": true
   },
-  "references": [],
+  "references": [
+    {
+      "path": "../design-system-twrnc-preset"
+    }
+  ],
   "include": ["src/**/*"],
   "exclude": ["jest.config.js", ".eslintrc.js", "babel.config.js"]
 }

packages/design-system-twrnc-preset/.eslintrc.js

@@ -0,0 +1,35 @@
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+  },
+  settings: {
+    'import/resolver': {
+      typescript: {
+        tsconfigRootDir: __dirname,
+        project: './tsconfig.json',
+      },
+    },
+  },
+  ignorePatterns: [
+    '.eslintrc.js',
+    'jest.config.js',
+    'babel.config.js',
+    'tailwind.config.js',
+  ],
+
+  rules: {
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'always',
+        jsx: 'always',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+  },
+};

packages/design-system-twrnc-preset/README.md

@@ -1,6 +1,6 @@
 # `@metamask/design-system-twrnc-preset`
 
-Design System twrnc preset
+Design System React Native
 
 ## Installation
 

packages/design-system-twrnc-preset/babel.config.js

@@ -0,0 +1,18 @@
+// We use Babel for our tests in scripts/.
+module.exports = {
+  env: {
+    test: {
+      presets: [
+        'module:metro-react-native-babel-preset',
+        '@babel/preset-env',
+        '@babel/preset-react',
+        '@babel/preset-typescript',
+      ],
+      plugins: [
+        ['@babel/plugin-transform-class-properties', { loose: true }],
+        ['@babel/plugin-transform-private-methods', { loose: true }],
+        ['@babel/plugin-transform-private-property-in-object', { loose: true }],
+      ],
+    },
+  },
+};

packages/design-system-twrnc-preset/jest.config.js

@@ -23,4 +23,15 @@ module.exports = merge(baseConfig, {
       statements: 100,
     },
   },
+  preset: 'react-native',
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!(react-native|@react-native|@react-navigation)/)',
+  ],
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+  moduleNameMapper: {
+    '\\.(css|less|scss)$': 'identity-obj-proxy',
+  },
 });