@react-native-reusables/cli 0.6.2 → 0.7.0

package/src/contexts/cli-options.ts

@@ -0,0 +1,29 @@
+import { Options } from "@effect/cli"
+import { Context, Option } from "effect"
+
+type StylingLibrary = "nativewind" | "uniwind"
+
+class CliOptions extends Context.Tag("CommandOptions")<
+  CliOptions,
+  Readonly<{
+    cwd: string
+    yes: boolean
+    stylingLibrary: StylingLibrary | undefined
+  }>
+>() { }
+
+const cwd = Options.directory("cwd", { exists: "yes" }).pipe(Options.withDefault("."), Options.withAlias("c"))
+const yes = Options.boolean("yes", { aliases: ["y"] })
+const summary = Options.boolean("summary").pipe(Options.withAlias("s"))
+const overwrite = Options.boolean("overwrite", { aliases: ["o"] })
+const all = Options.boolean("all", { aliases: ["a"] })
+const path = Options.text("path").pipe(Options.withDefault(""), Options.withAlias("p"))
+const stylingLibrary = Options.choice("styling-library", ["nativewind", "uniwind"] as const).pipe(
+  Options.optional,
+  Options.map(Option.getOrUndefined),
+  Options.withDescription("Override the detected styling library for this command"),
+)
+const template = Options.text("template").pipe(Options.withAlias("t"), Options.withDefault(""))
+
+export { CliOptions, cwd, summary, yes, overwrite, all, path, stylingLibrary, template }
+export type { StylingLibrary }

package/src/project-manifest.ts

@@ -0,0 +1,369 @@
+interface FileCheck {
+  name: string
+  fileNames: Array<string>
+  docs: string
+  includes: Array<{
+    content: Array<string>
+    message: string
+    docs: string
+  }>
+  stylingLibraries: Array<"nativewind" | "uniwind">
+}
+
+type CustomFileCheck = Omit<FileCheck, "fileNames"> & { defaultFileNames?: ReadonlyArray<string> }
+
+interface FileWithContent extends FileCheck {
+  content: string
+}
+
+interface MissingInclude {
+  fileName: string
+  content: ReadonlyArray<string>
+  message: string
+  docs: string
+}
+
+const CORE_DEPENDENCIES = [
+  "expo",
+  "react-native-reanimated",
+  "react-native-safe-area-context",
+  "tailwindcss-animate",
+  "class-variance-authority",
+  "clsx",
+  "tailwind-merge"
+]
+
+const DEPENDENCIES = {
+  nativewind: [...CORE_DEPENDENCIES, "nativewind"],
+  uniwind: [...CORE_DEPENDENCIES, "uniwind"]
+}
+
+const DEV_DEPENDENCIES = ["tailwindcss@^3.4.14"]
+
+const FILE_CHECKS: Array<FileCheck> = [
+  {
+    name: "Babel Config",
+    fileNames: ["babel.config.js", "babel.config.ts"],
+    docs: "https://www.nativewind.dev/docs/getting-started/installation#3-add-the-babel-preset",
+    includes: [
+      {
+        content: ["nativewind/babel", "jsxImportSource"],
+        message: "jsxImportSource or nativewind/babel is missing",
+        docs: "https://www.nativewind.dev/docs/getting-started/installation#3-add-the-babel-preset"
+      }
+    ],
+    stylingLibraries: ["nativewind"] as const
+  },
+  {
+    name: "Metro Config",
+    fileNames: ["metro.config.js", "metro.config.ts"],
+    docs: "https://www.nativewind.dev/docs/getting-started/installation#4-create-or-modify-your-metroconfigjs",
+    includes: [
+      {
+        content: ["withNativeWind("],
+        message: "The withNativeWind function is missing",
+        docs: "https://www.nativewind.dev/docs/getting-started/installation#4-create-or-modify-your-metroconfigjs"
+      },
+      {
+        content: ["inlineRem", "16"],
+        message: "The 'inlineRem: 16' is missing",
+        docs: "https://reactnativereusables.com/docs/installation/manual#update-the-default-inlined-rem-value"
+      }
+    ],
+    stylingLibraries: ["nativewind"] as const
+  },
+  {
+    name: "Metro Config",
+    fileNames: ["metro.config.js", "metro.config.ts"],
+    docs: "https://www.nativewind.dev/docs/getting-started/installation#4-create-or-modify-your-metroconfigjs",
+    includes: [
+      {
+        content: ["withUniwindConfig("],
+        message: "The withUniwindConfig function is missing",
+        docs: "https://docs.uniwind.dev/api/metro-config#metro-config-js"
+      }
+    ],
+    stylingLibraries: ["uniwind"] as const
+  },
+  {
+    name: "Root Layout",
+    fileNames: ["app/_layout.tsx", "src/app/_layout.tsx"],
+    docs: "https://reactnativereusables.com/docs/installation/manual#add-the-portal-host-to-your-root-layout", //
+    includes: [
+      {
+        content: [".css"],
+        message: "The css file import is missing",
+        docs: "https://www.nativewind.dev/docs/getting-started/installation#5-import-your-css-file"
+      },
+      {
+        content: ["<PortalHost"],
+        message: "The PortalHost component is missing",
+        docs: "https://reactnativereusables.com/docs/installation/manual#add-the-portal-host-to-your-root-layout"
+      }
+    ],
+    stylingLibraries: ["nativewind", "uniwind"] as const
+  }
+]
+
+const DEPRECATED_FROM_LIB: Array<Omit<FileCheck, "docs" | "stylingLibraries">> = [
+  {
+    name: "Icons",
+    fileNames: ["icons/iconWithClassName.ts"],
+    includes: [
+      {
+        content: ["iconWithClassName"],
+        message: "lib/icons and its contents are deprecated. Use the new icon wrapper from components/ui/icon.",
+        docs: "https://reactnativereusables.com/docs/changelog#august-2025-deprecated"
+      }
+    ]
+  },
+  {
+    name: "Constants",
+    fileNames: ["constants.ts"],
+    includes: [
+      {
+        content: ["NAV_THEME"],
+        message: "Usage of lib/constants for NAV_THEME is deprecated. Use lib/theme instead.",
+        docs: "https://reactnativereusables.com/docs/installation/manual#configure-your-styles"
+      }
+    ]
+  },
+  {
+    name: "useColorScheme",
+    fileNames: ["useColorScheme.tsx"],
+    includes: [
+      {
+        content: ["useColorScheme"],
+        message: "lib/useColorScheme is deprecated. Use Nativewind's color scheme hook instead.",
+        docs: "https://www.nativewind.dev/docs/api/use-color-scheme"
+      }
+    ]
+  }
+]
+
+const DEPRECATED_FROM_UI: Array<Omit<FileCheck, "docs" | "stylingLibraries">> = [
+  {
+    name: "Typography",
+    fileNames: ["typography.tsx"],
+    includes: [
+      {
+        content: [
+          "function H1({",
+          "function H2({",
+          "function H3({",
+          "function H4({",
+          "function P({",
+          "function BlockQuote({",
+          "function Code({",
+          "function Lead({",
+          "function Large({",
+          "function Small({",
+          "function Muted({"
+        ],
+        message:
+          "Typography is deprecated. Instead, use the Text component with its variant prop (e.g. <Text variant='h1'>Title</Text>)",
+        docs: "https://reactnativereusables.com/docs/components/text#typography"
+      }
+    ]
+  }
+]
+
+// Excludes foreground colors since it is formatted differently in all 3 styling files (tailwind config, global.css, theme.ts)
+const CSS_VARIABLE_NAMES = [
+  "background",
+  "foreground",
+  "card",
+  "popover",
+  "primary",
+  "secondary",
+  "muted",
+  "accent",
+  "destructive",
+  "border",
+  "input",
+  "ring",
+  "radius"
+]
+
+const CUSTOM_FILE_CHECKS: Record<string, CustomFileCheck> = {
+  tailwindConfig: {
+    name: "Tailwind Config",
+    defaultFileNames: ["tailwind.config.js", "tailwind.config.ts"],
+    docs: "https://reactnativereusables.com/docs/installation/manual#configure-your-styles",
+    includes: [
+      {
+        content: ["nativewind/preset"],
+        message: "The nativewind preset is missing",
+        docs: "https://www.nativewind.dev/docs/getting-started/installation#2-setup-tailwind-css"
+      },
+      {
+        content: CSS_VARIABLE_NAMES,
+        message: "At least one of the color css variables is missing",
+        docs: "https://reactnativereusables.com/docs/installation/manual#configure-your-styles"
+      }
+    ],
+    stylingLibraries: ["nativewind"] as const
+  },
+  theme: {
+    name: "Theme",
+    defaultFileNames: ["lib/theme.ts"],
+    docs: "https://reactnativereusables.com/docs/installation/manual#configure-your-styles",
+    includes: [
+      {
+        content: CSS_VARIABLE_NAMES,
+        message: "At least one of the color variables is missing",
+        docs: "https://reactnativereusables.com/docs/installation/manual#configure-your-styles"
+      },
+      {
+        content: ["NAV_THEME"],
+        message: "The NAV_THEME is missing",
+        docs: "https://reactnativereusables.com/docs/installation/manual#configure-your-styles"
+      }
+    ],
+    stylingLibraries: ["nativewind", "uniwind"] as const
+  },
+  nativewindEnv: {
+    name: "Nativewind Env",
+    docs: "https://www.nativewind.dev/docs/getting-started/installation#7-typescript-setup-optional",
+    includes: [
+      {
+        content: ["nativewind/types"],
+        message: "The nativewind types are missing",
+        docs: "https://www.nativewind.dev/docs/getting-started/installation#7-typescript-setup-optional"
+      }
+    ],
+    stylingLibraries: ["nativewind"] as const
+  },
+  uniwindTypes: {
+    name: "Uniwind Types",
+    defaultFileNames: ["uniwind-types.d.ts"],
+    docs: "https://docs.uniwind.dev/api/metro-config#dtsfile",
+    includes: [
+      {
+        content: ["uniwind/types"],
+        message: "The uniwind types are missing",
+        docs: "https://docs.uniwind.dev/api/metro-config#dtsfile"
+      }
+    ],
+    stylingLibraries: ["uniwind"] as const
+  },
+  utils: {
+    name: "Utils",
+    defaultFileNames: ["lib/utils.ts"],
+    docs: "https://reactnativereusables.com/docs/installation/manual#add-a-cn-helper",
+    includes: [
+      {
+        content: ["function cn("],
+        message: "The cn function is missing",
+        docs: "https://reactnativereusables.com/docs/installation/manual#add-a-cn-helper"
+      }
+    ],
+    stylingLibraries: ["nativewind", "uniwind"] as const
+  },
+  css: {
+    name: "CSS",
+    defaultFileNames: ["globals.css", "src/global.css"],
+    docs: "https://reactnativereusables.com/docs/installation/manual#configure-your-styles",
+    includes: [
+      {
+        content: ["@tailwind base", "@tailwind components", "@tailwind utilities"],
+        message: "The tailwind layer directives are missing",
+        docs: "https://reactnativereusables.com/docs/installation/manual#configure-your-styles"
+      },
+      {
+        content: CSS_VARIABLE_NAMES,
+        message: "At least one of the color css variables is missing",
+        docs: "https://reactnativereusables.com/docs/installation/manual#configure-your-styles"
+      }
+    ],
+    stylingLibraries: ["nativewind"] as const
+  },
+  uniwindCss: {
+    name: "CSS",
+    defaultFileNames: ["globals.css", "src/global.css"],
+    docs: "https://reactnativereusables.com/docs/installation/manual#configure-your-styles",
+    includes: [
+      {
+        content: ["tailwindcss", "uniwind"],
+        message: "The tailwind layer directives are missing",
+        docs: "https://reactnativereusables.com/docs/installation/manual#configure-your-styles"
+      },
+      {
+        content: CSS_VARIABLE_NAMES,
+        message: "At least one of the color css variables is missing",
+        docs: "https://reactnativereusables.com/docs/installation/manual#configure-your-styles"
+      }
+    ],
+    stylingLibraries: ["uniwind"] as const
+  }
+}
+
+const NATIVEWIND_ENV_FILE = "nativewind-env.d.ts"
+const UNIWIND_TYPES_FILE = "uniwind-types.d.ts"
+
+const COMPONENTS = [
+  "accordion",
+  "alert-dialog",
+  "alert",
+  "aspect-ratio",
+  "avatar",
+  "badge",
+  "button",
+  "card",
+  "checkbox",
+  "collapsible",
+  "context-menu",
+  "dialog",
+  "dropdown-menu",
+  "hover-card",
+  "input",
+  "label",
+  "menubar",
+  "popover",
+  "progress",
+  "radio-group",
+  "select",
+  "separator",
+  "skeleton",
+  "switch",
+  "tabs",
+  "text",
+  "textarea",
+  "toggle-group",
+  "toggle",
+  "tooltip"
+]
+
+const TEMPLATES = [
+  {
+    name: "Minimal (Nativewind)",
+    url: "https://github.com/founded-labs/react-native-reusables-templates.git",
+    subPath: "minimal"
+  },
+  {
+    name: "Minimal (Uniwind)",
+    url: "https://github.com/founded-labs/react-native-reusables-templates.git",
+    subPath: "minimal-uniwind"
+  },
+  {
+    name: "Clerk auth (Nativewind)",
+    url: "https://github.com/founded-labs/react-native-reusables-templates.git",
+    subPath: "clerk-auth"
+  }
+]
+
+const PROJECT_MANIFEST = {
+  dependencies: DEPENDENCIES,
+  devDependencies: DEV_DEPENDENCIES,
+  fileChecks: FILE_CHECKS,
+  deprecatedFromLib: DEPRECATED_FROM_LIB,
+  deprecatedFromUi: DEPRECATED_FROM_UI,
+  customFileChecks: CUSTOM_FILE_CHECKS,
+  nativewindEnvFile: NATIVEWIND_ENV_FILE,
+  uniwindTypesFile: UNIWIND_TYPES_FILE,
+  components: COMPONENTS,
+  templates: TEMPLATES
+}
+
+export { PROJECT_MANIFEST }
+export type { FileCheck, CustomFileCheck, FileWithContent, MissingInclude }

package/src/services/commands/add.ts

@@ -0,0 +1,127 @@
+import { CliOptions, type StylingLibrary } from "@cli/contexts/cli-options.js"
+import { PROJECT_MANIFEST } from "@cli/project-manifest.js"
+import { Doctor } from "@cli/services/commands/doctor.js"
+import { runCommand } from "@cli/utils/run-command.js"
+import { Prompt } from "@effect/cli"
+import { Effect, Layer } from "effect"
+import { PackageManager } from "../package-manager.js"
+import { ProjectConfig } from "../project-config.js"
+
+type AddOptions = {
+  cwd: string
+  args: { components: Array<string> }
+  yes: boolean
+  overwrite: boolean
+  all: boolean
+  path: string
+  stylingLibrary: StylingLibrary | undefined
+}
+
+class Add extends Effect.Service<Add>()("Add", {
+  dependencies: [PackageManager.Default],
+  effect: Effect.gen(function* () {
+    const doctor = yield* Doctor
+    const projectConfig = yield* ProjectConfig
+    const packageManager = yield* PackageManager
+
+    return {
+      run: (options: AddOptions) =>
+        Effect.gen(function* () {
+          yield* Effect.logDebug(`Add options: ${JSON.stringify(options, null, 2)}`)
+
+          yield* projectConfig.getComponentJson() // ensure components.json config is valid and prompt if not
+
+          const components = options.all ? PROJECT_MANIFEST.components : (options.args?.components ?? [])
+
+          if (components.length === 0) {
+            const selectedComponents = yield* Prompt.multiSelect({
+              message: "Select components to add",
+              choices: PROJECT_MANIFEST.components.map((component) => ({
+                title: component,
+                value: component
+              }))
+            })
+            for (const component of selectedComponents) {
+              components.push(component)
+            }
+          }
+
+          if (components.length === 0) {
+            yield* Effect.fail(new Error("No components selected."))
+          }
+
+          yield* Effect.logDebug(`Selected components: ${components.join(", ")}`)
+
+          const stylingLibrary = yield* projectConfig.getStylingLibrary()
+
+          const registry = stylingLibrary === "uniwind" ? "uniwind" : "nativewind"
+
+          const baseUrl =
+            process.env.INTERNAL_ENV === "development"
+              ? `http://localhost:3000/local/r/${registry}`
+              : `https://reactnativereusables.com/r/${registry}`
+
+          const componentUrls = components.map((component) => {
+            const lowerCaseComponent = component.toLocaleLowerCase()
+            return lowerCaseComponent.startsWith("http") ? lowerCaseComponent : `${baseUrl}/${lowerCaseComponent}.json`
+          })
+
+          const shadcnOptions = toShadcnOptions(options)
+
+          const binaryRunner = yield* packageManager.getBinaryRunner(options.cwd)
+
+          const commandArgs = [
+            ...binaryRunner.slice(1),
+            "shadcn@latest",
+            "add",
+            ...shadcnOptions,
+            ...componentUrls
+          ].filter((option) => option !== undefined)
+
+          yield* Effect.logDebug(`Running command: ${binaryRunner[0]} ${commandArgs.join(" ")}`)
+
+          yield* runCommand(binaryRunner[0], commandArgs, {
+            cwd: options.cwd,
+            stdio: "inherit"
+          })
+
+          yield* doctor.run({ ...options, summary: true })
+        })
+    }
+  })
+}) {}
+
+function make(options: AddOptions) {
+  const optionsLayer = Layer.succeed(CliOptions, { ...options, yes: true }) // For the project config
+  return Effect.gen(function* () {
+    const add = yield* Add
+
+    return yield* add.run(options)
+  }).pipe(
+    Effect.provide(Add.Default),
+    Effect.provide(Doctor.Default),
+    Effect.provide(ProjectConfig.Default),
+    Effect.provide(optionsLayer)
+  )
+}
+
+export { make }
+
+function toShadcnOptions(options: AddOptions) {
+  const shadcnOptions = []
+
+  if (options.overwrite) {
+    shadcnOptions.push("--overwrite")
+  }
+
+  if (options.yes) {
+    shadcnOptions.push("--yes")
+  }
+
+  if (options.path) {
+    shadcnOptions.push("--path")
+    shadcnOptions.push(options.path)
+  }
+
+  return shadcnOptions
+}