feat: enable more options to enable NativeWind v4 (#81)

Co-authored-by: Daniel Williams <dannyhyunsoowilliams@gmail.com>

.eslintrc.js

@@ -1,5 +1,8 @@
 module.exports = {
   root: true,
   extends: ['@react-native-community', 'plugin:storybook/recommended'],
-  rules: { 'jsx-quotes': [2, 'prefer-single'] },
+  rules: {
+    'jsx-quotes': [2, 'prefer-single'],
+    'react/react-in-jsx-scope': 'off',
+  },
 };

.storybook/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

.storybook/main.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 /** @type{import("@storybook/react-webpack5").StorybookConfig} */
 export default {
   stories: [
@@ -11,8 +13,12 @@ export default {
         modulesToTranspile: [
           'react-native-reanimated',
           'react-native-vector-icons',
+          'nativewind',
+          'react-native-css-interop',
         ],
         modulesToAlias: { 'victory-native': 'victory' },
+        babelPresets: ['nativewind/babel'],
+        babelPresetReactOptions: { jsxImportSource: 'nativewind' },
         babelPlugins: [
           '@babel/plugin-proposal-export-namespace-from',
           'react-native-reanimated/plugin',
@@ -43,4 +49,27 @@ export default {
   docs: {
     autodocs: true,
   },
+  webpackFinal: async (config) => {
+    config.module?.rules?.push({
+      test: /\.css$/,
+      use: [
+        {
+          loader: 'postcss-loader',
+          options: {
+            postcssOptions: {
+              plugins: [require('tailwindcss'), require('autoprefixer')],
+            },
+          },
+        },
+      ],
+      include: [
+        path.resolve(__dirname, '../stories/nativewind'),
+        path.resolve(__dirname, './'),
+      ],
+    });
+
+    return {
+      ...config,
+    };
+  },
 };

.storybook/preview.js

@@ -1,12 +1,18 @@
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+import './global.css';
+
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      source: { excludeDecorators: true },
     },
-  },
-  docs: {
-    source: { excludeDecorators: true },
   },
 };
+
+export default preview;

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "tw",
+    ".*Style",
+    "color",
+    "backgroundColor"
+  ],
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ]
+}

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

README.md

@@ -53,12 +53,15 @@ Please see the [FAQ](https://github.com/storybookjs/addon-react-native-web/blob/
 Most packages should work without extra changes however in some cases extra steps are needed.
 One common example is "reanimated" which requires some babel config and extra transpilation.
 
-| Options            | Type                      | Description                                                                     |
-| ------------------ | ------------------------- | ------------------------------------------------------------------------------- |
-| modulesToTranspile | `Array<string>`           | node_modules that need transpiling                                              |
-| modulesToAlias     | `{[key: string]: string}` | node_modules that need aliasing                                                 |
-| babelPlugins       | `Array<string>`           | Babel plugins you want to apply                                                 |
-| projectRoot        | `string`                  | Path to the root of your project, if in a mono repo you might need to set this. |
+| Options                       | Type                                                | Description                                                                     |
+| ----------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------- |
+| modulesToTranspile            | `Array<string>`                                     | node_modules that need transpiling                                              |
+| modulesToAlias                | `{[key: string]: string}`                           | node_modules that need aliasing                                                 |
+| babelPlugins                  | `Array<string \| [string, Record<string, string>]>` | Babel plugins you want to apply                                                 |
+| projectRoot                   | `string`                                            | Path to the root of your project, if in a mono repo you might need to set this. |
+| babelPresets                  | `Array<string \| [string, Record<string, string>]>` | Babel presets you want to apply                                                 |
+| babelPresetReactOptions       | `Record<string, any>`                               | Options to pass options to @babel/preset-react                                  |
+| babelPresetReactNativeOptions | `Record<string, any>`                               | Options to pass options to @react-native/babel-preset                           |
 
 ### Untranspiled react native libraries
 

nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package.json

@@ -27,7 +27,7 @@
     "buildBabel": "concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"",
     "buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"",
     "buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"",
-    "buildTsc": "tsc --declaration --emitDeclarationOnly --outDir ./dist/ts",
+    "buildTsc": "tsc -p tsconfig.prod.json --declaration --emitDeclarationOnly --outDir ./dist/ts",
     "prebuild": "yarn clean",
     "build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"",
     "build:watch": "concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"",
@@ -37,7 +37,8 @@
     "prerelease": "zx scripts/prepublish-checks.mjs",
     "release": "yarn build && auto shipit",
     "eject-ts": "zx scripts/eject-typescript.mjs",
-    "chromatic": "npx chromatic --project-token=c9eb9dda8699"
+    "chromatic": "npx chromatic --project-token=c9eb9dda8699",
+    "check": "tsc --noEmit"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.4",
@@ -50,12 +51,13 @@
     "@expo/html-elements": "^0.5.1",
     "@react-native-community/eslint-config": "^3.2.0",
     "@react-native/babel-preset": "^0.73.19",
-    "@storybook/addon-essentials": "^7.6.9",
-    "@storybook/addon-mdx-gfm": "^7.6.9",
-    "@storybook/react": "^7.6.9",
-    "@storybook/react-webpack5": "^7.6.9",
+    "@storybook/addon-essentials": "^7.6.13",
+    "@storybook/addon-mdx-gfm": "^7.6.13",
+    "@storybook/react": "^7.6.13",
+    "@storybook/react-webpack5": "^7.6.13",
     "@types/react-native-vector-icons": "^6.4.18",
     "auto": "^10.36.5",
+    "autoprefixer": "^10.4.17",
     "babel-loader": "^9.1.3",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
     "babel-plugin-react-native-web": "^0.19.10",
@@ -69,11 +71,14 @@
     "eslint-plugin-storybook": "^0.6.15",
     "expo-linear-gradient": "^12.5.0",
     "native-base": "^3.4.28",
+    "nativewind": "^4.0.1",
     "normalize-css-color": "^1.0.2",
+    "postcss-import": "^16.0.0",
+    "postcss-loader": "^8.1.0",
     "prettier": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "^0.73.1",
+    "react-native": "^0.73.4",
     "react-native-gesture-handler": "^2.14.0",
     "react-native-paper": "^5.11.7",
     "react-native-reanimated": "^3.6.1",
@@ -83,10 +88,9 @@
     "react-native-vector-icons": "^10.0.3",
     "react-native-web": "^0.19.10",
     "rimraf": "^5.0.5",
-    "storybook": "^7.6.9",
+    "storybook": "^7.6.13",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
-    "victory": "^36.7.0",
-    "victory-native": "^40.0.3",
     "webpack": "^5.89.0",
     "zx": "^6.1.0"
   },
@@ -122,5 +126,5 @@
     ],
     "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
   },
-  "packageManager": "yarn@4.0.2"
+  "packageManager": "yarn@4.1.0"
 }

postcss.config.js

@@ -0,0 +1,8 @@
+// postcss.config.js
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/webpack.ts

@@ -4,7 +4,10 @@ import path from 'path';
 export type Options = {
   modulesToTranspile?: string[];
   modulesToAlias?: { [key: string]: string };
-  babelPlugins?: string[];
+  babelPlugins?: Array<string | [string, Record<string, string>]>;
+  babelPresets?: Array<string | [string, Record<string, string>]>;
+  babelPresetReactOptions?: Record<string, any>;
+  babelPresetReactNativeOptions?: Record<string, any>;
   projectRoot?: string;
 };
 
@@ -80,6 +83,10 @@ const webpackFinal = async (config: any, options: Options) => {
   config.plugins.push(new webpack.DefinePlugin({ process: { env: {} } }));
 
   const babelPlugins = getBabelPlugins(options);
+  const babelPresetReactOptions = options?.babelPresetReactOptions ?? {};
+  const babelPresetReactNativeOptions =
+    options?.babelPresetReactNativeOptions ?? {};
+  const babelPresets = options?.babelPresets ?? [];
   const root = options.projectRoot ?? process.cwd();
   const userModules = options.modulesToTranspile?.map(getModule) ?? [];
   const modules = [...DEFAULT_INCLUDES, ...userModules];
@@ -118,14 +125,17 @@ const webpackFinal = async (config: any, options: Options) => {
           getRnPreset(),
           {
             useTransformReactJSXExperimental: true,
+            ...babelPresetReactNativeOptions,
           },
         ],
         [
           '@babel/preset-react',
           {
             runtime: 'automatic',
+            ...babelPresetReactOptions,
           },
         ],
+        ...babelPresets,
       ],
       plugins: [...babelPlugins],
     },

stories/libraries/NativeBase/AppBar.tsx

@@ -8,6 +8,7 @@ import { SearchIcon } from '../Svg/SearchIcon';
 export function AppBar() {
   return (
     <>
+      {/* @ts-ignore not sure why this errors */}
       <StatusBar bg='#3700B3' barStyle='light-content' />
       <Box safeAreaTop bg='#6200ee' />
       <HStack

stories/libraries/Paper/Card.tsx

@@ -10,12 +10,12 @@ const LeftContent = (props: any) => (
   <Avatar.Icon {...props} icon={FolderIcon} />
 );
 
-interface CardProps {
+export type CardProps = {
   title: string;
   content: string;
   onCancel: () => void;
   onConfirm: () => void;
-}
+};
 
 export const Card = ({ title, content, onCancel, onConfirm }: CardProps) => (
   <PaperCard>

stories/libraries/Reanimated/Box.tsx

@@ -31,6 +31,7 @@ export const Box = () => {
     <View style={styles.container}>
       <Animated.View style={[styles.box, animatedStyles]} />
       <Button
+        color={'purple'}
         onPress={() => {
           offset.value = Math.random();
         }}

stories/libraries/Svg/FolderIcon.tsx

@@ -1,8 +1,8 @@
 import { Svg, Path } from 'react-native-svg';
 
-interface FolderProps {
+export type FolderProps = {
   color: string;
-}
+};
 
 export const FolderIcon = ({ color = 'white' }: FolderProps) => (
   <Svg height={24} width={24}>

stories/libraries/nativewind/ButtonWind.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ButtonWind } from './ButtonWind';
+
+const meta = {
+  title: 'components/ButtonWind',
+  component: ButtonWind,
+} satisfies Meta<typeof ButtonWind>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    label: 'Click me',
+  },
+};

stories/libraries/nativewind/ButtonWind.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { StyleProp, Text, ViewStyle, TouchableOpacity } from 'react-native';
+
+type ButtonProps = {
+  onPress: () => void;
+  label: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+export const ButtonWind = ({ onPress, label, style }: ButtonProps) => {
+  return (
+    <TouchableOpacity
+      className='bg-slate-500 min-w-0 px-4 py-2 rounded w-24'
+      style={style}
+      onPress={onPress}
+    >
+      <Text className='text-white text-center'>{label}</Text>
+    </TouchableOpacity>
+  );
+};