feat: update deisgn/react 19/tailwind 4/components styles

package.json

@@ -19,6 +19,7 @@
     "build": "turbo run build",
     "build:cli": "turbo --filter=dotui-cli build",
     "build:www": "pnpm --filter=www build",
+    "build:internal-registry": "pnpm --filter=www build:internal-registry",
     "build:registry": "pnpm --filter=www build:registry",
     "build:docs": "pnpm --filter=www build:docs",
     "dev": "turbo run dev --parallel",
@@ -42,15 +43,17 @@
     "@changesets/cli": "^2.26.1",
     "@commitlint/cli": "^17.6.3",
     "@commitlint/config-conventional": "^17.6.3",
+    "@dotui/eslint-config": "workspace:*",
     "@manypkg/cli": "^0.21.4",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "^14.0.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-turbo": "^2.1.3",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
-    "turbo": "^2.0.12"
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "turbo": "^2.4.0"
   },
-  "packageManager": "pnpm@9.5.0"
+  "packageManager": "pnpm@9.5.0",
+  "pnpm": {
+    "patchedDependencies": {
+      "tailwind-variants": "patches/tailwind-variants.patch"
+    }
+  }
 }

packages/cli/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { config } from "@dotui/eslint-config/base";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

packages/cli/package.json

@@ -8,7 +8,7 @@
   "license": "MIT",
   "author": {
     "name": "mehdibha",
-    "url": "https://twitter.com/mehdibha_"
+    "url": "https://x.com/mehdibha_"
   },
   "repository": {
     "type": "git",
@@ -34,8 +34,11 @@
     "clean": "rimraf dist && rimraf components",
     "start:dev": "cross-env REGISTRY_URL=http://localhost:3000/registry node dist/index.js",
     "start": "node dist/index.js",
+    "lint": "eslint . --fix",
+    "lint:check": "eslint . --max-warnings 0",
     "format": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache --log-level warn",
     "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache --log-level warn",
+    "typecheck": "tsc --noEmit",
     "release": "changeset version",
     "pub:beta": "pnpm build && pnpm publish --no-git-checks --access public --tag beta",
     "pub:next": "pnpm build && pnpm publish --no-git-checks --access public --tag next",
@@ -44,50 +47,26 @@
     "test:dev": "REGISTRY_URL=http://localhost:3000/registry vitest run"
   },
   "dependencies": {
-    "@antfu/ni": "^0.21.4",
-    "@babel/core": "^7.22.1",
-    "@babel/parser": "^7.22.6",
-    "@babel/plugin-transform-typescript": "^7.22.5",
-    "async-retry": "^1.3.3",
-    "ci-info": "^4.0.0",
+    "@clack/prompts": "^0.9.1",
+    "@dotui/schemas": "workspace:*",
+    "@types/fs-extra": "^11.0.4",
     "commander": "^10.0.0",
-    "conf": "^13.0.1",
-    "cosmiconfig": "^8.1.3",
-    "cross-spawn": "^7.0.3",
+    "cosmiconfig": "^9.0.0",
     "deepmerge": "^4.3.1",
-    "diff": "^5.1.0",
-    "execa": "^7.0.0",
-    "fast-glob": "^3.3.2",
-    "fs-extra": "^11.1.0",
-    "https-proxy-agent": "^6.2.0",
-    "kleur": "^4.1.5",
-    "lodash.template": "^4.5.0",
-    "node-fetch": "^3.3.0",
-    "ora": "^6.1.2",
+    "execa": "^9.5.2",
+    "fast-glob": "^3.3.3",
+    "fs-extra": "^11.3.0",
+    "package-manager-detector": "^0.2.9",
     "picocolors": "^1.1.0",
-    "postcss": "^8.4.31",
-    "prompts": "^2.4.2",
-    "recast": "^0.23.2",
-    "stringify-object": "^5.0.0",
-    "tar": "^7.4.3",
-    "ts-morph": "^18.0.0",
+    "ts-morph": "^25.0.0",
     "tsconfig-paths": "^4.2.0",
+    "type-fest": "^4.33.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@dotui/registry": "workspace:*",
-    "@types/async-retry": "^1.4.8",
-    "@types/babel__core": "^7.20.1",
-    "@types/diff": "^5.0.3",
-    "@types/fs-extra": "^11.0.1",
-    "@types/lodash.template": "^4.5.1",
-    "@types/prompts": "^2.4.2",
-    "@types/stringify-object": "^4.0.5",
-    "@types/validate-npm-package-name": "^4.0.2",
-    "rimraf": "^6.0.1",
-    "tailwindcss": "^3.4.3",
-    "tsup": "^6.6.3",
-    "type-fest": "^3.8.0",
+    "@dotui/eslint-config": "workspace:*",
+    "@types/node": "^18.17.0",
+    "tsup": "^8.3.6",
     "typescript": "^5"
   }
 }

packages/cli/src/commands/add.ts

@@ -1,204 +1,49 @@
-import { Command } from "commander";
-import path from "path";
-import prompts from "prompts";
-import { z } from "zod";
-import { addComponents } from "@/helpers/add-components";
-import { getConfig } from "@/helpers/get-config";
-import { handleError } from "@/helpers/handle-error";
-import { getRegistryIndex } from "@/helpers/registry";
-import { highlight, logger } from "@/utils";
-
-export const addOptionsSchema = z.object({
-  components: z.array(z.string()).optional(),
-  yes: z.boolean(),
-  overwrite: z.boolean(),
-  cwd: z.string(),
-  all: z.boolean(),
-  path: z.string().optional(),
-  silent: z.boolean(),
-  srcDir: z.boolean().optional(),
-});
-
-export const addCommand = new Command()
-  .name("add")
-  .description("add a component to your project")
-  .argument(
-    "[components...]",
-    "the components to add or a url to the component."
-  )
-  .option("-y, --yes", "skip confirmation prompt.", false)
-  .option("-o, --overwrite", "overwrite existing files.", false)
-  .option(
-    "-c, --cwd <cwd>",
-    "the working directory. defaults to the current directory.",
-    process.cwd()
-  )
-  .option("-a, --all", "add all available components", false)
-  .option("-p, --path <path>", "the path to add the component to.")
-  .option("-s, --silent", "mute output.", false)
-  .option(
-    "--src-dir",
-    "use the src directory when creating a new project.",
-    false
-  )
-  .action(async (components, opts) => {
-    try {
-      logger.log(`${highlight.warn("⚠️ dotui-cli is under development.")}`);
-      logger.log(`You can follow the progress on https://x.com/mehdibha_.`);
-      logger.break();
-      return;
-      const options = addOptionsSchema.parse({
-        components,
-        cwd: path.resolve(opts.cwd),
-        ...opts,
-      });
-
-      // Confirm if user is installing themes.
-      // For now, we assume a theme is prefixed with "theme-".
-      const isTheme = options.components?.some((component) =>
-        component.includes("theme-")
-      );
-      if (!options.yes && isTheme) {
-        logger.break();
-        const { confirm } = await prompts({
-          type: "confirm",
-          name: "confirm",
-          message: highlight.warn(
-            "You are about to install a new theme. \nExisting CSS variables will be overwritten. Continue?"
-          ),
-        });
-        if (!confirm) {
-          logger.break();
-          logger.log("Theme installation cancelled.");
-          logger.break();
-          process.exit(1);
-        }
-      }
-
-      if (!options.components?.length) {
-        options.components = await promptForRegistryComponents(options);
-      }
-
-      // let { errors, config } = await preFlightAdd(options)
-
-      // // No component.json file. Prompt the user to run init.
-      // if (errors[ERRORS.MISSING_CONFIG]) {
-      //   const { proceed } = await prompts({
-      //     type: "confirm",
-      //     name: "proceed",
-      //     message: `You need to create a ${highlight.info(
-      //       "component.json"
-      //     )} file to add components. Proceed?`,
-      //     initial: true,
-      //   })
-
-      //   if (!proceed) {
-      //     logger.break()
-      //     process.exit(1)
-      //   }
-
-      //   config = await runInit({
-      //     cwd: options.cwd,
-      //     yes: true,
-      //     force: true,
-      //     defaults: false,
-      //     skipPreflight: false,
-      //     silent: true,
-      //     isNewProject: false,
-      //     srcDir: options.srcDir,
-      //   })
-      // }
-
-      // if (errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]) {
-      //   const { projectPath } = await createProject({
-      //     cwd: options.cwd,
-      //     force: options.overwrite,
-      //     srcDir: options.srcDir,
-      //   });
-      //   if (!projectPath) {
-      //     logger.break();
-      //     process.exit(1);
-      //   }
-      //   options.cwd = projectPath;
-
-      //   config = await runInit({
-      //     cwd: options.cwd,
-      //     yes: true,
-      //     force: true,
-      //     defaults: false,
-      //     skipPreflight: true,
-      //     silent: true,
-      //     isNewProject: true,
-      //     srcDir: options.srcDir,
-      //   });
-
-      //   shouldUpdateAppIndex =
-      //     options.components?.length === 1 &&
-      //     !!options.components[0].match(/\/chat\/b\//);
-      // }
-
-      // if (!config) {
-      //   throw new Error(
-      //     `Failed to read config at ${highlight.info(options.cwd)}.`
-      //   );
-      // }
-      const config = await getConfig(options.cwd);
-      if (!config) {
-        throw new Error(
-          `Failed to read config at ${highlight.info(options.cwd)}.`
-        );
-      }
-      await addComponents(options.components, config, options);
-    } catch (error) {
-      logger.break();
-      handleError(error);
-    }
-  });
-
-async function promptForRegistryComponents(
-  options: z.infer<typeof addOptionsSchema>
-) {
-  const registryIndex = await getRegistryIndex();
-  if (!registryIndex) {
-    logger.break();
-    handleError(new Error("Failed to fetch registry index."));
-    return [];
-  }
-
-  if (options.all) {
-    return registryIndex.map((entry) => entry.name);
-  }
-
-  if (options.components?.length) {
-    return options.components;
-  }
-
-  const { components } = await prompts({
-    type: "multiselect",
-    name: "components",
-    message: "Which components would you like to add?",
-    hint: "Space to select. A to toggle all. Enter to submit.",
-    instructions: false,
-    choices: registryIndex
-      .filter((entry) => entry.type === "registry:core")
-      .map((entry) => ({
-        title: entry.name,
-        value: entry.name,
-        selected: options.all ? true : options.components?.includes(entry.name),
-      })),
-  });
-
-  if (!components?.length) {
-    logger.warn("No components selected. Exiting.");
-    logger.info("");
-    process.exit(1);
-  }
-
-  const result = z.array(z.string()).safeParse(components);
-  if (!result.success) {
-    logger.error("");
-    handleError(new Error("Something went wrong. Please try again."));
-    return [];
-  }
-  return result.data;
-}
+import * as p from "@clack/prompts";
+import { Command } from "commander";
+import { addChecks } from "@/helpers/add-checks";
+import { addPrimitives } from "@/helpers/add-primitives";
+import { handleError } from "@/helpers/handle-error";
+import { c } from "@/utils";
+
+export const addCommand = new Command()
+  .name("add")
+  .description(
+    "add primitives to your project and install required dependencies"
+  )
+  .argument(
+    "[primitives...]",
+    "the primitives to add wheather components, hoooks, themes."
+  )
+  .helpOption("-h, --help", "show all available options")
+  .option("-o, --overwrite", "overwrite existing files.", true)
+  .option("-a, --all", "add all available core components.", false)
+  .option(
+    "-d --dir",
+    "the working directory. defaults to the current directory.",
+    process.cwd()
+  )
+  .action(
+    async (
+      primitives: string[],
+      options: { overwrite: boolean; all: boolean; dir: string }
+    ) => {
+      try {
+        p.intro("Adding primitives.");
+        const { config } = await addChecks(options.dir);
+        await addPrimitives(primitives, config, {
+          overwrite: options.overwrite,
+          message: "Updating your project",
+        });
+        p.outro(
+          `Successfully added ${c.info("button, text-field, and 21 other components.")}`
+        );
+      } catch (error) {
+        p.outro(
+          c.error(
+            "Someting went wrong. If the problem persists, please open an issue on GitHub."
+          )
+        );
+        handleError(error);
+      }
+    }
+  );