create-react-native-library-template 0.1.5 → 0.2.0

package/template/gitignore

@@ -13,6 +13,9 @@ expo-env.d.ts
 # Storybook React Native (generated)
 storybook.requires.ts
 
+# Uniwind (generated type declarations for className autocomplete)
+uniwind-types.d.ts
+
 # Tests
 coverage/
 

package/template/packages/ui/package.json

@@ -20,11 +20,6 @@
       "types": "./lib/typescript/components/Button/button.d.ts",
       "default": "./lib/module/components/Button/button.js"
     },
-    "./theme": {
-      "source": "./src/theme/tokens.ts",
-      "types": "./lib/typescript/theme/tokens.d.ts",
-      "default": "./lib/module/theme/tokens.js"
-    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -44,7 +39,7 @@
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
-    "exclude": "**/{*.test,*.stories}.{ts,tsx}",
+    "exclude": "**/*.{test,stories,d}.{ts,tsx}",
     "targets": [
       [
         "module",
@@ -72,10 +67,19 @@
     "react-native-builder-bob": "^0.43.0",
     "react-native-web": "0.21.2",
     "storybook": "^10.4.6",
+    "tailwindcss": "^4.3.2",
     "typescript": "^6",
+    "uniwind": "^1.10.0",
     "vitest": "^4.1.10"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^4.3.2",
+    "uniwind": "^1.10.0"
   }
 }

package/template/packages/ui/src/components/Button/button.tsx

@@ -1,68 +1,56 @@
-import { useCallback, useMemo } from 'react';
-import { ActivityIndicator, Pressable, type StyleProp, StyleSheet, Text, type ViewStyle } from 'react-native';
-import { colors, fontSizes, radii, spacing } from '../../theme/tokens';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { useMemo } from 'react';
+import { ActivityIndicator, Pressable, type StyleProp, Text, type ViewStyle } from 'react-native';
 
-function getButtonOpacity(inactive: boolean, pressed: boolean) {
-  if (inactive) return 0.5;
-  if (pressed) return 0.7;
-  return 1;
-}
-
-function variantStyles(variant: ButtonVariant, pressed: boolean, inactive: boolean): ViewStyle {
-  if (inactive && variant !== 'ghost') return { backgroundColor: colors.disabled };
-  switch (variant) {
-    case 'primary':
-      return { backgroundColor: pressed ? colors.primaryPressed : colors.primary };
-    case 'secondary':
-      return { backgroundColor: pressed ? colors.secondaryPressed : colors.secondary };
-    case 'ghost':
-      return {
-        backgroundColor: 'transparent',
-        borderWidth: StyleSheet.hairlineWidth,
-        borderColor: colors.border,
-        opacity: getButtonOpacity(inactive, pressed),
-      };
-    default:
-      return {};
-  }
-}
-
-function labelStyles(variant: ButtonVariant, inactive: boolean) {
-  if (inactive && variant !== 'ghost') return { color: colors.textDisabled };
-  return { color: variant === 'primary' ? colors.textInverse : colors.textPrimary };
-}
-
-function spinnerColor(variant: ButtonVariant): typeof colors.textInverse | typeof colors.textPrimary {
-  return variant === 'primary' ? colors.textInverse : colors.textPrimary;
-}
+// Uniwind resolves these Tailwind classes at build time. Pressable exposes the
+// `active:` (pressed) and `disabled:` pseudo-variants; Text has neither, so its
+// disabled color is driven by the `disabled` cva variant below.
+//
+// On web, react-native-web renders Pressable as a focusable `div[role=button]`,
+// which gets the browser's UA outline on *every* focus (including mouse clicks) —
+// unlike a native `<button>`. The `web:`-scoped classes suppress that always-on
+// outline and restore a keyboard-only focus ring; they compile to `@supports`
+// blocks the native bundler skips, so native styling is unaffected.
+const FOCUS_RING =
+  'web:focus:outline-none web:focus-visible:ring-2 web:focus-visible:ring-indigo-500 web:focus-visible:ring-offset-2';
 
-const styles = StyleSheet.create({
-  base: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row',
-    borderRadius: radii.md,
-    alignSelf: 'flex-start',
+const container = cva(`flex-row items-center justify-center self-start rounded-lg ${FOCUS_RING}`, {
+  variants: {
+    variant: {
+      primary: 'bg-indigo-600 active:bg-indigo-700 disabled:bg-zinc-200',
+      secondary: 'bg-indigo-100 active:bg-indigo-200 disabled:bg-zinc-200',
+      ghost: 'border border-zinc-300 active:opacity-70 disabled:opacity-50',
+    },
+    size: {
+      sm: 'min-h-8 px-3 py-1',
+      md: 'min-h-10 px-4 py-2',
+      lg: 'min-h-12 px-6 py-3',
+    },
   },
-  label: {
-    fontWeight: '600',
-  },
-});
-
-const sizeStyles = StyleSheet.create({
-  sm: { paddingVertical: spacing.xs, paddingHorizontal: spacing.md, minHeight: 32 },
-  md: { paddingVertical: spacing.sm, paddingHorizontal: spacing.lg, minHeight: 40 },
-  lg: { paddingVertical: spacing.md, paddingHorizontal: spacing.xl, minHeight: 48 },
+  defaultVariants: { variant: 'primary', size: 'md' },
 });
 
-const labelSizeStyles = StyleSheet.create({
-  sm: { fontSize: fontSizes.sm },
-  md: { fontSize: fontSizes.md },
-  lg: { fontSize: fontSizes.lg },
+const label = cva('font-semibold', {
+  variants: {
+    variant: { primary: '', secondary: '', ghost: '' },
+    size: { sm: 'text-sm', md: 'text-base', lg: 'text-lg' },
+    disabled: { true: '', false: '' },
+  },
+  compoundVariants: [
+    { variant: 'primary', disabled: false, class: 'text-white' },
+    { variant: 'secondary', disabled: false, class: 'text-zinc-900' },
+    { variant: 'ghost', disabled: false, class: 'text-zinc-900' },
+    // Muted label for disabled primary/secondary; ghost keeps its color and the
+    // container dims via `disabled:opacity-50`.
+    { variant: 'primary', disabled: true, class: 'text-zinc-400' },
+    { variant: 'secondary', disabled: true, class: 'text-zinc-400' },
+    { variant: 'ghost', disabled: true, class: 'text-zinc-900' },
+  ],
+  defaultVariants: { variant: 'primary', size: 'md', disabled: false },
 });
 
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost';
-export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonVariant = NonNullable<VariantProps<typeof container>['variant']>;
+export type ButtonSize = NonNullable<VariantProps<typeof container>['size']>;
 
 export type ButtonProps = {
   /** Text rendered inside the button. */
@@ -77,6 +65,8 @@ export type ButtonProps = {
   disabled?: boolean;
   /** Shows a spinner instead of the label and disables interaction. @default false */
   loading?: boolean;
+  /** Extra Tailwind classes merged onto the outer pressable. */
+  className?: string;
   /** Style override for the outer pressable. */
   style?: StyleProp<ViewStyle>;
   /** Accessibility label; falls back to `label`. */
@@ -86,42 +76,39 @@ export type ButtonProps = {
 };
 
 export function Button({
-  label,
+  label: text,
   onPress,
   variant = 'primary',
   size = 'md',
   disabled = false,
   loading = false,
+  className,
   style,
   accessibilityLabel,
   testID,
 }: ButtonProps) {
   const inactive = disabled || loading;
   const accessibilityState = useMemo(() => ({ disabled: inactive, busy: loading }), [inactive, loading]);
-  const buttonStyles = useCallback(
-    ({ pressed }: { pressed: boolean }) => [styles.base, sizeStyles[size], variantStyles(variant, pressed, inactive), style],
-    [size, variant, inactive, style],
-  );
-
-  const textStyles = useCallback(
-    () => [styles.label, labelSizeStyles[size], labelStyles(variant, inactive)],
-    [size, variant, inactive],
-  );
 
   return (
     <Pressable
       accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityLabel={accessibilityLabel ?? text}
       accessibilityState={accessibilityState}
       disabled={inactive}
       onPress={onPress}
       testID={testID}
-      style={buttonStyles}
+      className={container({ variant, size, className })}
+      style={style}
     >
       {loading ? (
-        <ActivityIndicator size="small" color={spinnerColor(variant)} testID="button-spinner" />
+        <ActivityIndicator
+          size="small"
+          colorClassName={variant === 'primary' ? 'text-white' : 'text-zinc-900'}
+          testID="button-spinner"
+        />
       ) : (
-        <Text style={textStyles()}>{label}</Text>
+        <Text className={label({ variant, size, disabled: inactive })}>{text}</Text>
       )}
     </Pressable>
   );

package/template/packages/ui/src/uniwind-env.d.ts

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

package/template/storybook/native/.rnstorybook/preview.tsx

@@ -1,11 +1,11 @@
 import type { Preview } from '@storybook/react';
 import { View } from 'react-native';
+import '../global.css';
 
 const preview: Preview = {
   decorators: [
     (Story) => (
-      // biome-ignore lint/plugin: exception for storybook preview
-      <View style={{ flex: 1, alignItems: 'flex-start', padding: 16 }}>
+      <View className="flex-1 items-start p-4">
         <Story />
       </View>
     ),

package/template/storybook/native/global.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+@import "uniwind";
+
+/* Stories live in the library workspace, so point Tailwind's class scanner there. */
+@source "../../packages/ui/src";

package/template/storybook/native/metro.config.js

@@ -2,6 +2,7 @@
 const path = require('node:path');
 const { withStorybook } = require('@storybook/react-native/metro/withStorybook');
 const { getDefaultConfig } = require('expo/metro-config');
+const { withUniwindConfig } = require('uniwind/metro');
 
 const projectRoot = import.meta.dirname;
 const workspaceRoot = path.resolve(projectRoot, '../..');
@@ -12,7 +13,16 @@ const config = getDefaultConfig(projectRoot);
 config.watchFolders = [workspaceRoot];
 config.resolver.nodeModulesPaths = [path.resolve(projectRoot, 'node_modules'), path.resolve(workspaceRoot, 'node_modules')];
 
-module.exports = withStorybook(config, {
-  enabled: true,
-  configPath: path.resolve(projectRoot, '.rnstorybook'),
-});
+// Uniwind rewrites `react-native` imports to className-aware components at bundle
+// time. It must be the outermost Metro wrapper. `cssEntryFile` must stay a plain
+// relative string (not path.resolve). The generated dtsFile is gitignored.
+module.exports = withUniwindConfig(
+  withStorybook(config, {
+    enabled: true,
+    configPath: path.resolve(projectRoot, '.rnstorybook'),
+  }),
+  {
+    cssEntryFile: './global.css',
+    dtsFile: './uniwind-types.d.ts',
+  },
+);

package/template/storybook/native/package.json

@@ -30,7 +30,9 @@
     "react-native-safe-area-context": "5.6.0",
     "react-native-svg": "15.12.1",
     "react-native-worklets": "0.5.1",
-    "storybook": "^10.4.6"
+    "storybook": "^10.4.6",
+    "tailwindcss": "^4.3.2",
+    "uniwind": "^1.10.0"
   },
   "devDependencies": {
     "@types/react": "~19.1.10",

package/template/storybook/native/uniwind-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="uniwind/types" />
+
+declare module '*.css';

package/template/storybook/web/.storybook/main.ts

@@ -1,4 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-native-web-vite';
+import tailwindcss from '@tailwindcss/vite';
+import { uniwind } from 'uniwind/vite';
 
 const config: StorybookConfig = {
   stories: ['../../../packages/ui/src/**/*.stories.@(ts|tsx)'],
@@ -7,6 +9,20 @@ const config: StorybookConfig = {
     name: '@storybook/react-native-web-vite',
     options: {},
   },
+  // Uniwind resolves `className` on RN components at build time; it composes with
+  // the framework's react-native-web aliasing. `@tailwindcss/vite` processes the
+  // `@import 'tailwindcss'` in global.css.
+  viteFinal: (viteConfig) => {
+    viteConfig.plugins ??= [];
+    viteConfig.plugins.push(tailwindcss(), uniwind({ cssEntryFile: './global.css', dtsFile: './uniwind-types.d.ts' }));
+    // Uniwind excludes `react-native` from dep optimization, which otherwise stops Vite
+    // from pre-bundling react-native-web as a unit — leaving its CJS transitive dep
+    // `@react-native/normalize-colors` served without a synthesized `default` export.
+    // Force-optimize react-native-web so esbuild/rolldown inlines those CJS deps again.
+    viteConfig.optimizeDeps ??= {};
+    viteConfig.optimizeDeps.include = [...(viteConfig.optimizeDeps.include ?? []), 'react-native-web'];
+    return viteConfig;
+  },
 };
 
 export default config;

package/template/storybook/web/.storybook/preview.tsx

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react';
+import '../global.css';
 
 const preview: Preview = {
   parameters: {

package/template/storybook/web/.storybook/uniwind-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="uniwind/types" />
+
+declare module '*.css';

package/template/storybook/web/global.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+@import "uniwind";
+
+/* Stories live in the library workspace, so point Tailwind's class scanner there. */
+@source "../../packages/ui/src";

package/template/storybook/web/package.json

@@ -21,12 +21,15 @@
     "@storybook/addon-vitest": "^10.4.6",
     "@storybook/react": "^10.4.6",
     "@storybook/react-native-web-vite": "^10.4.6",
+    "@tailwindcss/vite": "^4.3.2",
     "@types/node": "^26",
     "@types/react": "~19.1.10",
     "@vitest/browser-playwright": "^4.1.10",
     "playwright": "^1.61.1",
     "storybook": "^10.4.6",
+    "tailwindcss": "^4.3.2",
     "typescript": "^6",
+    "uniwind": "^1.10.0",
     "vite": "^8.1.3",
     "vitest": "^4.1.10"
   }

package/template/packages/ui/src/theme/tokens.ts

@@ -1,40 +0,0 @@
-export const colors = {
-  primary: '#4f46e5',
-  primaryPressed: '#4338ca',
-  secondary: '#e0e7ff',
-  secondaryPressed: '#c7d2fe',
-  surface: '#ffffff',
-  border: '#d4d4d8',
-  textPrimary: '#18181b',
-  textInverse: '#ffffff',
-  textMuted: '#71717a',
-  danger: '#dc2626',
-  disabled: '#e4e4e7',
-  textDisabled: '#a1a1aa',
-} as const;
-
-export const spacing = {
-  xs: 4,
-  sm: 8,
-  md: 12,
-  lg: 16,
-  xl: 24,
-} as const;
-
-export const radii = {
-  sm: 4,
-  md: 8,
-  lg: 16,
-  full: 9999,
-} as const;
-
-export const fontSizes = {
-  sm: 13,
-  md: 15,
-  lg: 17,
-} as const;
-
-export type Color = keyof typeof colors;
-export type Spacing = keyof typeof spacing;
-export type Radius = keyof typeof radii;
-export type FontSize = keyof typeof fontSizes;