feat(CLI): change resolve path standard tsconfig to packagejson

component-docs/pages/get-started/installation/vite.mdx

@@ -89,37 +89,33 @@ import "@seed-design/stylesheet/global.css";
 
 <Tabs items={['CLI로 추가', '직접 추가']}>
   <Tabs.Tab>
-    <Steps>
-    ### init 명령어 입력하기
-
-    ```sh copy
-    npx @seed-design/cli@latest init
-    ```
-
-    ### seed-design 설정
-
-    ```sh
-    ◇  Would you like to use TypeScript (recommended)?
-    │  Yes
-    │
-    ◇  Are you using React Server Components?
-    │  No
-    │
-    ◇  Enter the path to your components directory
-    │  @/src/components
-    │
-    ◇  seed-design.json written to seed-design.json
-    ```
-    </Steps>
+  #### init 명령어 입력하기
+
+  ```sh copy
+  npx @seed-design/cli@latest init
+  ```
+
+  #### seed-design 설정
+
+  ```sh
+  ◇  Would you like to use TypeScript (recommended)?
+  │  Yes (default)
+  │
+  ◇  Are you using React Server Components?
+  │  No (default)
+  │
+  ◇  Enter the path to your seed-design directory
+  │  ./seed-design (default)
+  │
+  ◇  seed-design.json written to seed-design.json
+  ```
   </Tabs.Tab>
   <Tabs.Tab>
     ```json copy
     {
       "rsc": false,
       "tsx": true,
-      "aliases": {
-        "components": "@/src/components"
-      }
+      "path": "./seed-design"
     }
     ```
   </Tabs.Tab>

examples/cli/seed-design.json

@@ -1,7 +1,5 @@
 {
   "rsc": false,
   "tsx": true,
-  "aliases": {
-    "components": "@/src/components"
-  }
+  "path": "./seed-design"
 }

examples/cli/seed-design/components/box-button.tsx

@@ -0,0 +1,25 @@
+import "@seed-design/stylesheet/boxButton.css";
+
+import * as React from "react";
+import clsx from "clsx";
+import { Slot } from "@radix-ui/react-slot";
+import { boxButton, type BoxButtonVariantProps } from "@seed-design/recipe/boxButton";
+
+export interface BoxButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    BoxButtonVariantProps {
+  prefixIcon?: React.ReactNode;
+}
+
+export const BoxButton = React.forwardRef<HTMLButtonElement, BoxButtonProps>(
+  ({ className, variant = "brand", size = "medium", children, prefixIcon, ...otherProps }, ref) => {
+    const classNames = boxButton({ variant, size });
+    return (
+      <button ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
+        {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}
+        <span className={classNames.label}>{children}</span>
+      </button>
+    );
+  },
+);
+BoxButton.displayName = "BoxButton";

packages/cli/package.json

@@ -33,12 +33,12 @@
     "cac": "^6.7.14",
     "cosmiconfig": "^9.0.0",
     "execa": "^9.3.0",
+    "findup-sync": "^5.0.0",
     "fs-extra": "^11.2.0",
     "mktemp": "^1.0.1",
     "picocolors": "^1.0.1",
     "recast": "^0.23.9",
     "ts-morph": "^23.0.0",
-    "tsconfig-paths": "^4.2.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

packages/cli/src/commands/add.ts

@@ -91,7 +91,7 @@ export const addCommand = (cli: CAC) => {
 
       for (const metadata of metadatas) {
         for (const registry of metadata.registries) {
-          const componentPath = config.resolvedPaths.components;
+          const componentPath = config.resolvedPaths;
 
           if (!fs.existsSync(componentPath)) {
             await fs.mkdir(componentPath, { recursive: true });

packages/cli/src/commands/init.ts

@@ -34,12 +34,12 @@ export const initCommand = (cli: CAC) => {
               message: `Are you using ${highlight("React Server Components")}?`,
               initialValue: false,
             }),
-          components: () =>
+          path: () =>
             p.text({
-              message: `Enter the path to your ${highlight("components directory")}`,
-              initialValue: "@/src/components",
-              defaultValue: "@/src/components",
-              placeholder: "@/src/components",
+              message: `Enter the path to your ${highlight("seed-design directory")}`,
+              initialValue: "./seed-design",
+              defaultValue: "./seed-design",
+              placeholder: "./seed-design",
             }),
         },
         {
@@ -53,9 +53,7 @@ export const initCommand = (cli: CAC) => {
       const config: RawConfig = {
         rsc: group.rsc,
         tsx: group.tsx,
-        aliases: {
-          components: group.components,
-        },
+        path: group.path,
       };
 
       const { start, stop } = p.spinner();

packages/cli/src/utils/get-config.ts

@@ -1,6 +1,5 @@
 import { cosmiconfig } from "cosmiconfig";
-import { loadConfig } from "tsconfig-paths";
-import { createMatchPath, type ConfigLoaderSuccessResult } from "tsconfig-paths";
+import path from "path";
 import { z } from "zod";
 
 const MODULE_NAME = "seed-design";
@@ -9,37 +8,19 @@ const explorer = cosmiconfig(MODULE_NAME, {
   searchPlaces: [`${MODULE_NAME}.json`],
 });
 
-export async function resolveImport(
-  importPath: string,
-  config: Pick<ConfigLoaderSuccessResult, "absoluteBaseUrl" | "paths">,
-) {
-  return createMatchPath(config.absoluteBaseUrl, config.paths)(importPath, undefined, () => true, [
-    ".ts",
-    ".tsx",
-  ]);
-}
-
 export const rawConfigSchema = z
   .object({
     $schema: z.string().optional(),
     rsc: z.coerce.boolean().default(false),
     tsx: z.coerce.boolean().default(true),
-    aliases: z.object({
-      components: z.string(),
-      // utils: z.string(),
-      // ui: z.string().optional(),
-    }),
+    path: z.string(),
   })
   .strict();
 
 export type RawConfig = z.infer<typeof rawConfigSchema>;
 
 export const configSchema = rawConfigSchema.extend({
-  resolvedPaths: z.object({
-    components: z.string(),
-    // utils: z.string(),
-    // ui: z.string(),
-  }),
+  resolvedPaths: z.string(),
 });
 
 export async function getConfig(cwd: string) {
@@ -55,27 +36,11 @@ export async function getConfig(cwd: string) {
 export type Config = z.infer<typeof configSchema>;
 
 export async function resolveConfigPaths(cwd: string, config: RawConfig) {
-  // Read tsconfig.json.
-  const tsConfig = loadConfig(cwd);
-
-  if (tsConfig.resultType === "failed") {
-    throw new Error(
-      `Failed to load ${config.tsx ? "tsconfig" : "jsconfig"}.json. ${
-        tsConfig.message ?? ""
-      }`.trim(),
-    );
-  }
+  const seedComponentRootPath = path.resolve(cwd, config.path);
 
   return configSchema.parse({
     ...config,
-    // NOTE: ui 옵션이 있으면 그냥 ui 폴더를 사용하고 아니면 components를 사용함
-    resolvedPaths: {
-      components: await resolveImport(config.aliases.components, tsConfig),
-      // utils: await resolveImport(config.aliases.utils, tsConfig),
-      // ui: config.aliases.ui
-      //   ? await resolveImport(config.aliases.ui, tsConfig)
-      //   : await resolveImport(config.aliases.components, tsConfig),
-    },
+    resolvedPaths: path.join(seedComponentRootPath, "components"),
   });
 }
 

packages/cli/src/utils/get-metadata.ts

@@ -34,7 +34,7 @@ export async function getMetadataIndex() {
 
     return componentMetadataIndexSchema.parse(result);
   } catch (error) {
-    throw new Error("Failed to fetch components from registry.");
+    throw new Error(`Failed to fetch components from ${BASE_URL}.`);
   }
 }
 

packages/cli/src/utils/get-package-info.ts

@@ -1,9 +1,17 @@
-import path from "path";
+import findup from "findup-sync";
 import fs from "fs-extra";
 import type { PackageJson } from "type-fest";
 
-export function getPackageInfo() {
-  const packageJsonPath = path.join("package.json");
+const PACKAGE_JSON = "package.json";
+
+function getPackagePath() {
+  const packageJsonPath = findup(PACKAGE_JSON);
+  if (!packageJsonPath) {
+    throw new Error("No package.json file found in the project.");
+  }
+  return packageJsonPath;
+}
 
-  return fs.readJSONSync(packageJsonPath) as PackageJson;
+export function getPackageInfo() {
+  return fs.readJSONSync(getPackagePath()) as PackageJson;
 }

yarn.lock

@@ -7376,12 +7376,12 @@ __metadata:
     cosmiconfig: ^9.0.0
     esbuild: ^0.19.3
     execa: ^9.3.0
+    findup-sync: ^5.0.0
     fs-extra: ^11.2.0
     mktemp: ^1.0.1
     picocolors: ^1.0.1
     recast: ^0.23.9
     ts-morph: ^23.0.0
-    tsconfig-paths: ^4.2.0
     type-fest: ^4.23.0
     typescript: ^5.4.5
     ultra-runner: ^3.10.5
@@ -30236,17 +30236,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tsconfig-paths@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "tsconfig-paths@npm:4.2.0"
-  dependencies:
-    json5: ^2.2.2
-    minimist: ^1.2.6
-    strip-bom: ^3.0.0
-  checksum: 28c5f7bbbcabc9dabd4117e8fdc61483f6872a1c6b02a4b1c4d68c5b79d06896c3cc9547610c4c3ba64658531caa2de13ead1ea1bf321c7b53e969c4752b98c7
-  languageName: node
-  linkType: hard
-
 "tshy@npm:^1.17.0":
   version: 1.18.0
   resolution: "tshy@npm:1.18.0"