Add files via upload

apply-color-mapping.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, test } from "vitest"
+
+import {
+  applyColorMapping,
+  splitClassName,
+} from "../../src/utils/transformers/transform-css-vars"
+import baseColor from "../fixtures/colors/slate.json"
+
+describe("split className", () => {
+  test.each([
+    {
+      input: "bg-popover",
+      output: [null, "bg-popover", null],
+    },
+    {
+      input: "bg-popover/50",
+      output: [null, "bg-popover", "50"],
+    },
+    {
+      input: "hover:bg-popover/50",
+      output: ["hover", "bg-popover", "50"],
+    },
+    {
+      input: "hover:bg-popover",
+      output: ["hover", "bg-popover", null],
+    },
+    {
+      input: "[&_[cmdk-group-heading]]:px-2",
+      output: ["[&_[cmdk-group-heading]]", "px-2", null],
+    },
+    {
+      input: "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0",
+      output: ["[&_[cmdk-group]:not([hidden])_~[cmdk-group]]", "pt-0", null],
+    },
+    {
+      input: "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:bg-red-200",
+      output: [
+        "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]",
+        "bg-red-200",
+        null,
+      ],
+    },
+    {
+      input: "sm:focus:text-accent-foreground/30",
+      output: ["sm:focus", "text-accent-foreground", "30"],
+    },
+  ])(`splitClassName($input) -> $output`, ({ input, output }) => {
+    expect(splitClassName(input)).toStrictEqual(output)
+  })
+})
+
+describe("apply color mapping", async () => {
+  test.each([
+    {
+      input: "bg-background text-foreground",
+      output: "bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50",
+    },
+    {
+      input: "rounded-lg border bg-card text-card-foreground shadow-sm",
+      output:
+        "rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+    },
+    {
+      input:
+        "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
+      output:
+        "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900",
+    },
+    {
+      input:
+        "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      output:
+        "flex h-full w-full items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800",
+    },
+    {
+      input:
+        "absolute right-4 top-4 bg-primary rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
+      output:
+        "absolute right-4 top-4 bg-slate-900 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:bg-slate-50 dark:ring-offset-slate-950 dark:focus:ring-slate-800 dark:data-[state=open]:bg-slate-800",
+    },
+  ])(`applyColorMapping($input) -> $output`, ({ input, output }) => {
+    expect(applyColorMapping(input, baseColor.inlineColors)).toBe(output)
+  })
+})

apply-prefix.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, test } from "vitest"
+
+import { applyPrefix } from "../../src/utils/transformers/transform-tw-prefix"
+
+describe("apply tailwind prefix", () => {
+  test.each([
+    {
+      input: "bg-slate-800 text-gray-500",
+      output: "tw-bg-slate-800 tw-text-gray-500",
+    },
+    {
+      input: "hover:dark:bg-background dark:text-foreground",
+      output: "hover:dark:tw-bg-background dark:tw-text-foreground",
+    },
+    {
+      input:
+        "rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+      output:
+        "tw-rounded-lg tw-border tw-border-slate-200 tw-bg-white tw-text-slate-950 tw-shadow-sm dark:tw-border-slate-800 dark:tw-bg-slate-950 dark:tw-text-slate-50",
+    },
+    {
+      input:
+        "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900 dark:text-red-900",
+      output:
+        "tw-text-red-500 tw-border-red-500/50 dark:tw-border-red-500 [&>svg]:tw-text-red-500 tw-text-red-500 dark:tw-text-red-900 dark:tw-border-red-900/50 dark:dark:tw-border-red-900 dark:[&>svg]:tw-text-red-900 dark:tw-text-red-900",
+    },
+    {
+      input:
+        "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      output:
+        "tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-rounded-full tw-bg-muted",
+    },
+    {
+      input:
+        "absolute right-4 top-4 bg-primary rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
+      output:
+        "tw-absolute tw-right-4 tw-top-4 tw-bg-primary tw-rounded-sm tw-opacity-70 tw-ring-offset-background tw-transition-opacity hover:tw-opacity-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-ring focus:tw-ring-offset-2 disabled:tw-pointer-events-none data-[state=open]:tw-bg-secondary",
+    },
+  ])(`applyTwPrefix($input) -> $output`, ({ input, output }) => {
+    expect(applyPrefix(input, "tw-")).toBe(output)
+  })
+})

get-config.test.ts

@@ -0,0 +1,166 @@
+import path from "path"
+import { expect, test } from "vitest"
+
+import { getConfig, getRawConfig } from "../../src/utils/get-config"
+
+test("get raw config", async () => {
+  expect(
+    await getRawConfig(path.resolve(__dirname, "../fixtures/config-none"))
+  ).toEqual(null)
+
+  expect(
+    await getRawConfig(path.resolve(__dirname, "../fixtures/config-partial"))
+  ).toEqual({
+    style: "default",
+    tailwind: {
+      config: "./tailwind.config.ts",
+      css: "./src/assets/css/tailwind.css",
+      baseColor: "neutral",
+      cssVariables: false,
+    },
+    rsc: false,
+    tsx: true,
+    aliases: {
+      components: "@/components",
+      utils: "@/lib/utils",
+    },
+  })
+
+  expect(
+    getRawConfig(path.resolve(__dirname, "../fixtures/config-invalid"))
+  ).rejects.toThrowError()
+})
+
+test("get config", async () => {
+  expect(
+    await getConfig(path.resolve(__dirname, "../fixtures/config-none"))
+  ).toEqual(null)
+
+  expect(
+    getConfig(path.resolve(__dirname, "../fixtures/config-invalid"))
+  ).rejects.toThrowError()
+
+  expect(
+    await getConfig(path.resolve(__dirname, "../fixtures/config-partial"))
+  ).toEqual({
+    style: "default",
+    tailwind: {
+      config: "./tailwind.config.ts",
+      css: "./src/assets/css/tailwind.css",
+      baseColor: "neutral",
+      cssVariables: false,
+    },
+    rsc: false,
+    tsx: true,
+    aliases: {
+      components: "@/components",
+      utils: "@/lib/utils",
+    },
+    resolvedPaths: {
+      tailwindConfig: path.resolve(
+        __dirname,
+        "../fixtures/config-partial",
+        "tailwind.config.ts"
+      ),
+      tailwindCss: path.resolve(
+        __dirname,
+        "../fixtures/config-partial",
+        "./src/assets/css/tailwind.css"
+      ),
+      components: path.resolve(
+        __dirname,
+        "../fixtures/config-partial",
+        "./components"
+      ),
+      utils: path.resolve(
+        __dirname,
+        "../fixtures/config-partial",
+        "./lib/utils"
+      ),
+      ui: path.resolve(__dirname, "../fixtures/config-partial", "./components"),
+    },
+  })
+
+  expect(
+    await getConfig(path.resolve(__dirname, "../fixtures/config-full"))
+  ).toEqual({
+    style: "new-york",
+    rsc: false,
+    tsx: true,
+    tailwind: {
+      config: "tailwind.config.ts",
+      baseColor: "zinc",
+      css: "src/app/globals.css",
+      cssVariables: true,
+      prefix: "tw-",
+    },
+    aliases: {
+      components: "~/components",
+      utils: "~/lib/utils",
+    },
+    resolvedPaths: {
+      tailwindConfig: path.resolve(
+        __dirname,
+        "../fixtures/config-full",
+        "tailwind.config.ts"
+      ),
+      tailwindCss: path.resolve(
+        __dirname,
+        "../fixtures/config-full",
+        "./src/app/globals.css"
+      ),
+      components: path.resolve(
+        __dirname,
+        "../fixtures/config-full",
+        "./src/components"
+      ),
+      ui: path.resolve(
+        __dirname,
+        "../fixtures/config-full",
+        "./src/components"
+      ),
+      utils: path.resolve(
+        __dirname,
+        "../fixtures/config-full",
+        "./src/lib/utils"
+      ),
+    },
+  })
+
+  expect(
+    await getConfig(path.resolve(__dirname, "../fixtures/config-jsx"))
+  ).toEqual({
+    style: "default",
+    tailwind: {
+      config: "./tailwind.config.js",
+      css: "./src/assets/css/tailwind.css",
+      baseColor: "neutral",
+      cssVariables: false,
+    },
+    rsc: false,
+    tsx: false,
+    aliases: {
+      components: "@/components",
+      utils: "@/lib/utils",
+    },
+    resolvedPaths: {
+      tailwindConfig: path.resolve(
+        __dirname,
+        "../fixtures/config-jsx",
+        "tailwind.config.js"
+      ),
+      tailwindCss: path.resolve(
+        __dirname,
+        "../fixtures/config-jsx",
+        "./src/assets/css/tailwind.css"
+      ),
+      components: path.resolve(
+        __dirname,
+        "../fixtures/config-jsx",
+        "./components"
+      ),
+      ui: path.resolve(__dirname, "../fixtures/config-jsx", "./components"),
+      utils: path.resolve(__dirname, "../fixtures/config-jsx", "./lib/utils"),
+    },
+  })
+})

get-item-target-path.test.ts

@@ -0,0 +1,39 @@
+import path from "path"
+import { expect, test } from "vitest"
+
+import { getConfig } from "../../src/utils/get-config"
+import { getItemTargetPath } from "../../src/utils/registry"
+
+test("get item target path", async () => {
+  // Full config.
+  let appDir = path.resolve(__dirname, "../fixtures/config-full")
+  expect(
+    await getItemTargetPath(await getConfig(appDir), {
+      type: "components:ui",
+    })
+  ).toEqual(path.resolve(appDir, "./src/components/ui"))
+
+  // Partial config.
+  appDir = path.resolve(__dirname, "../fixtures/config-partial")
+  expect(
+    await getItemTargetPath(await getConfig(appDir), {
+      type: "components:ui",
+    })
+  ).toEqual(path.resolve(appDir, "./components/ui"))
+
+  // JSX.
+  appDir = path.resolve(__dirname, "../fixtures/config-jsx")
+  expect(
+    await getItemTargetPath(await getConfig(appDir), {
+      type: "components:ui",
+    })
+  ).toEqual(path.resolve(appDir, "./components/ui"))
+
+  // Custom paths.
+  appDir = path.resolve(__dirname, "../fixtures/config-ui")
+  expect(
+    await getItemTargetPath(await getConfig(appDir), {
+      type: "components:ui",
+    })
+  ).toEqual(path.resolve(appDir, "./src/ui"))
+})

get-package-manager.test.ts

@@ -0,0 +1,26 @@
+import path from "path"
+import { expect, test } from "vitest"
+
+import { getPackageManager } from "../../src/utils/get-package-manager"
+
+test("get package manager", async () => {
+  expect(
+    await getPackageManager(path.resolve(__dirname, "../fixtures/project-yarn"))
+  ).toBe("yarn")
+
+  expect(
+    await getPackageManager(path.resolve(__dirname, "../fixtures/project-npm"))
+  ).toBe("npm")
+
+  expect(
+    await getPackageManager(path.resolve(__dirname, "../fixtures/project-pnpm"))
+  ).toBe("pnpm")
+
+  expect(
+    await getPackageManager(path.resolve(__dirname, "../fixtures/project-bun"))
+  ).toBe("bun")
+
+  expect(
+    await getPackageManager(path.resolve(__dirname, "../fixtures/next"))
+  ).toBe("pnpm")
+})

get-project-type.test.ts

@@ -0,0 +1,37 @@
+import path from "path"
+import { describe, expect, test } from "vitest"
+
+import { getProjectType } from "../../src/utils/get-project-info"
+
+describe("get project type", async () => {
+  test.each([
+    {
+      name: "next-app",
+      type: "next-app",
+    },
+    {
+      name: "next-app-src",
+      type: "next-app-src",
+    },
+    {
+      name: "next-pages",
+      type: "next-pages",
+    },
+    {
+      name: "next-pages-src",
+      type: "next-pages-src",
+    },
+    {
+      name: "project",
+      type: null,
+    },
+    {
+      name: "t3-app",
+      type: "next-pages-src",
+    },
+  ])(`getProjectType($name) -> $type`, async ({ name, type }) => {
+    expect(
+      await getProjectType(path.resolve(__dirname, `../fixtures/${name}`))
+    ).toBe(type)
+  })
+})