Set up twrnc theming for React Native component library

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

@@ -18,14 +18,15 @@ module.exports = {
     'babel.config.js',
     'metro.config.js',
     'jest.config.js',
+    'tailwind.config.js',
   ],
   rules: {
     'import/extensions': [
       'error',
       '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-react-native';
+
+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,12 @@
   },
   "dependencies": {
     "@metamask/design-system-react-native": "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,4 @@
-import { Button } from '@metamask/design-system-react-native';
+import { Button, useTailwind } from '@metamask/design-system-react-native';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import React from 'react';
 import { View } from 'react-native';
@@ -15,8 +15,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>
     );

apps/storybook-react-native/tailwind.config.d.ts

@@ -0,0 +1,11 @@
+declare const config: {
+  content: string[];
+  theme: {
+    extend: {
+      colors: Record<string, string>;
+    };
+  };
+  plugins: unknown[];
+};
+
+export default config;

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

@@ -0,0 +1,9 @@
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {},
+    },
+  },
+  plugins: [],
+};

apps/storybook-react-native/tsconfig.json

@@ -15,7 +15,8 @@
     "babel.config.js",
     "metro.config.js",
     "jest.config.js",
-    ".eslintrc.js"
+    ".eslintrc.js",
+    "tailwind.config.js"
   ],
   "extends": "expo/tsconfig.base"
 }

package.json

@@ -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

@@ -13,15 +13,20 @@ module.exports = {
       },
     },
   },
-  ignorePatterns: ['.eslintrc.js', 'jest.config.js', 'babel.config.js'],
+  ignorePatterns: [
+    '.eslintrc.js',
+    'jest.config.js',
+    'babel.config.js',
+    'tailwind.config.js',
+  ],
 
   rules: {
     'import/extensions': [
       'error',
       '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 --traceResolution --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",
@@ -42,7 +42,11 @@
     "test:verbose": "NODE_OPTIONS=--experimental-vm-modules jest --verbose",
     "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
   },
+  "dependencies": {
+    "@metamask/design-system-twrnc-preset": "workspace:^"
+  },
   "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 +66,10 @@
     "typescript": "~5.2.2"
   },
   "peerDependencies": {
+    "@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,20 @@
-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);
+
+export type { ThemeContextProps, ThemeProviderProps } from './provider';
+export {
+  useTailwind,
+  ThemeContext,
+  ThemeProvider,
+  Theme,
+  ColorScheme,
+} from './provider';

packages/design-system-react-native/src/provider/Theme.constants.ts

@@ -0,0 +1,22 @@
+import type { Theme as DesignTokenTheme } from '@metamask/design-tokens';
+import { lightTheme, darkTheme } from '@metamask/design-tokens';
+
+import { Theme } from './Theme.types';
+
+type ThemeColors = DesignTokenTheme['colors'];
+
+type ThemeVariant = {
+  light: ThemeColors;
+  dark: ThemeColors;
+};
+
+type Themes = {
+  brand: ThemeVariant;
+};
+
+export const themes: Themes = {
+  [Theme.Brand]: {
+    light: lightTheme.colors,
+    dark: darkTheme.colors,
+  },
+};

packages/design-system-react-native/src/provider/Theme.hooks.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+
+import { ThemeContext } from './Theme.providers';
+
+export const useTailwind = () => {
+  const { tw } = useContext(ThemeContext);
+  return tw;
+};