create-react-native-library-template 0.1.0

package/template/gitignore

@@ -0,0 +1,23 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+lib/
+dist/
+storybook-static/
+
+# Expo
+.expo/
+expo-env.d.ts
+
+# Storybook React Native (generated)
+storybook.requires.ts
+
+# Tests
+coverage/
+
+# Misc
+*.log
+.DS_Store
+.env*
+!.env.example

package/template/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "react-native-library-template",
+  "version": "0.0.0",
+  "private": true,
+  "workspaces": [
+    "packages/*",
+    "apps/*"
+  ],
+  "scripts": {
+    "build": "bun run --cwd packages/ui build",
+    "typecheck": "bun run --cwd packages/ui typecheck && bun run --cwd apps/storybook typecheck && bun run --cwd apps/native typecheck",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "test": "bun run test:unit && bun run test:storybook",
+    "test:unit": "bun run --cwd packages/ui test",
+    "test:storybook": "bun run --cwd apps/storybook test",
+    "storybook": "bun run --cwd apps/storybook storybook",
+    "storybook:native": "bun run --cwd apps/native start",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "bun run build && changeset publish"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.3",
+    "@changesets/cli": "^2.31.0",
+    "@iv-stpn/biome-config": "1.2.10",
+    "biome-one-liner-plugin": "1.3.2",
+    "biome-drizzle-best-practices-plugin": "2.0.0",
+    "biome-react-best-practices-plugin": "1.1.0",
+    "biome-typescript-best-practices-plugin": "1.0.0",
+    "typescript": "^6"
+  }
+}

package/template/packages/ui/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@template/ui",
+  "version": "0.1.0",
+  "description": "Reusable React Native UI component library",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/react-native-library-template.git",
+    "directory": "packages/ui"
+  },
+  "keywords": [
+    "react-native",
+    "react",
+    "ui",
+    "components"
+  ],
+  "exports": {
+    "./button": {
+      "source": "./src/components/Button/button.tsx",
+      "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": [
+    "src",
+    "lib",
+    "!**/*.test.*",
+    "!**/*.stories.*"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "bob build",
+    "clean": "rm -rf lib",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "exclude": "**/{*.test,*.stories}.{ts,tsx}",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "devDependencies": {
+    "@storybook/react": "^10.4.6",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "~19.1.10",
+    "jsdom": "^29.1.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.43.0",
+    "react-native-web": "0.21.2",
+    "storybook": "^10.4.6",
+    "typescript": "^6",
+    "vitest": "^4.1.10"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

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

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fireEvent, fn, userEvent, within } from 'storybook/test';
+import { Button } from './button';
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  args: {
+    label: 'Press me',
+    onPress: fn(),
+    variant: 'primary',
+    size: 'md',
+    disabled: false,
+    loading: false,
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'ghost'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
+
+export const Secondary: Story = {
+  args: { variant: 'secondary' },
+};
+
+export const Ghost: Story = {
+  args: { variant: 'ghost' },
+};
+
+export const Small: Story = {
+  args: { size: 'sm' },
+};
+
+export const Large: Story = {
+  args: { size: 'lg' },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+export const Loading: Story = {
+  args: { loading: true },
+};
+
+/** Pressing the button fires `onPress` exactly once. */
+export const FiresOnPress: Story = {
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button', { name: 'Press me' }));
+    await expect(args.onPress).toHaveBeenCalledTimes(1);
+  },
+};
+
+/** A disabled button is exposed as disabled and ignores presses. */
+export const IgnoresPressWhenDisabled: Story = {
+  args: { disabled: true },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button', { name: 'Press me' });
+    await expect(button).toHaveAttribute('aria-disabled', 'true');
+    // A disabled Pressable has `pointer-events: none`, so a real user cannot
+    // click it; dispatch the event directly to prove onPress is still guarded.
+    await fireEvent.click(button);
+    await expect(args.onPress).not.toHaveBeenCalled();
+  },
+};
+
+export default meta;

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

@@ -0,0 +1,33 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Button } from './button';
+
+describe('Button', () => {
+  it('renders its label', () => {
+    render(<Button label="Save" />);
+    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
+  });
+
+  it('calls onPress when pressed', () => {
+    const onPress = vi.fn();
+    render(<Button label="Save" onPress={onPress} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onPress when disabled', () => {
+    const onPress = vi.fn();
+    render(<Button label="Save" onPress={onPress} disabled={true} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('shows a spinner instead of the label while loading', () => {
+    const onPress = vi.fn();
+    render(<Button label="Save" onPress={onPress} loading={true} />);
+    expect(screen.queryByText('Save')).not.toBeInTheDocument();
+    expect(screen.getByTestId('button-spinner')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(onPress).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,128 @@
+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';
+
+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;
+}
+
+const styles = StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    borderRadius: radii.md,
+    alignSelf: 'flex-start',
+  },
+  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 },
+});
+
+const labelSizeStyles = StyleSheet.create({
+  sm: { fontSize: fontSizes.sm },
+  md: { fontSize: fontSizes.md },
+  lg: { fontSize: fontSizes.lg },
+});
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export type ButtonProps = {
+  /** Text rendered inside the button. */
+  label: string;
+  /** Called when the button is pressed. */
+  onPress?: () => void;
+  /** Visual style of the button. @default 'primary' */
+  variant?: ButtonVariant;
+  /** Size of the button. @default 'md' */
+  size?: ButtonSize;
+  /** Disables interaction and applies a muted style. @default false */
+  disabled?: boolean;
+  /** Shows a spinner instead of the label and disables interaction. @default false */
+  loading?: boolean;
+  /** Style override for the outer pressable. */
+  style?: StyleProp<ViewStyle>;
+  /** Accessibility label; falls back to `label`. */
+  accessibilityLabel?: string;
+  /** Test identifier. */
+  testID?: string;
+};
+
+export function Button({
+  label,
+  onPress,
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  loading = false,
+  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}
+      accessibilityState={accessibilityState}
+      disabled={inactive}
+      onPress={onPress}
+      testID={testID}
+      style={buttonStyles}
+    >
+      {loading ? (
+        <ActivityIndicator size="small" color={spinnerColor(variant)} testID="button-spinner" />
+      ) : (
+        <Text style={textStyles()}>{label}</Text>
+      )}
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,40 @@
+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;

package/template/packages/ui/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationMap": true,
+    "rootDir": "src",
+    "outDir": "lib/typescript"
+  },
+  "include": ["src"],
+  "exclude": ["src/**/*.test.*", "src/**/*.stories.*"]
+}

package/template/packages/ui/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["ES2023", "DOM", "DOM.Iterable"]
+  },
+  "include": ["src", "vitest.config.ts", "vitest.setup.ts"]
+}

package/template/packages/ui/vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  resolve: {
+    // Unit tests run in jsdom, so RN primitives are backed by react-native-web.
+    alias: {
+      'react-native': 'react-native-web',
+    },
+  },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./vitest.setup.ts'],
+    include: ['src/**/*.test.{ts,tsx}'],
+  },
+});

package/template/packages/ui/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/template/tsconfig.base.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "Preserve",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "noUncheckedIndexedAccess": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}