From 47cfd907b94130d6c1f46a0a91f05ec31947b8fc Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 14 Jun 2024 23:25:56 +0900
Subject: [PATCH 01/48] refactor(react): split library file to vcn and Slot

---
 packages/react/lib/Slot.tsx            | 97 ++++++++++++++++++++++++++
 packages/react/{lib.tsx => lib/vcn.ts} | 96 -------------------------
 2 files changed, 97 insertions(+), 96 deletions(-)
 create mode 100644 packages/react/lib/Slot.tsx
 rename packages/react/{lib.tsx => lib/vcn.ts} (73%)

diff --git a/packages/react/lib/Slot.tsx b/packages/react/lib/Slot.tsx
new file mode 100644
index 0000000..51ee483
--- /dev/null
+++ b/packages/react/lib/Slot.tsx
@@ -0,0 +1,97 @@
+import { twMerge } from "tailwind-merge";
+import React from "react";
+
+/**
+ * Merges the react props.
+ * Basically childProps will override parentProps.
+ * But if it is a event handler, style, or className, it will be merged.
+ *
+ * @param parentProps - The parent props.
+ * @param childProps - The child props.
+ * @returns The merged props.
+ */
+function mergeReactProps(
+  parentProps: Record<string, unknown>,
+  childProps: Record<string, unknown>,
+) {
+  const overrideProps = { ...childProps };
+
+  for (const propName in childProps) {
+    const parentPropValue = parentProps[propName];
+    const childPropValue = childProps[propName];
+
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (
+        childPropValue &&
+        parentPropValue &&
+        typeof childPropValue === "function" &&
+        typeof parentPropValue === "function"
+      ) {
+        overrideProps[propName] = (...args: unknown[]) => {
+          childPropValue?.(...args);
+          parentPropValue?.(...args);
+        };
+      } else if (parentPropValue) {
+        overrideProps[propName] = parentPropValue;
+      }
+    } else if (
+      propName === "style" &&
+      typeof parentPropValue === "object" &&
+      typeof childPropValue === "object"
+    ) {
+      overrideProps[propName] = { ...parentPropValue, ...childPropValue };
+    } else if (
+      propName === "className" &&
+      typeof parentPropValue === "string" &&
+      typeof childPropValue === "string"
+    ) {
+      overrideProps[propName] = twMerge(parentPropValue, childPropValue);
+    }
+  }
+
+  return { ...parentProps, ...overrideProps };
+}
+
+/**
+ * Takes an array of refs, and returns a single ref.
+ *
+ * @param refs - The array of refs.
+ * @returns The single ref.
+ */
+function combinedRef<I>(refs: React.Ref<I | null>[]) {
+  return (instance: I | null) =>
+    refs.forEach((ref) => {
+      if (ref instanceof Function) {
+        ref(instance);
+      } else if (ref) {
+        (ref as React.MutableRefObject<I | null>).current = instance;
+      }
+    });
+}
+
+interface SlotProps {
+  children?: React.ReactNode;
+}
+export const Slot = React.forwardRef<
+  HTMLElement,
+  SlotProps & Record<string, unknown>
+>((props, ref) => {
+  const { children, ...slotProps } = props;
+  const { asChild: _1, ...safeSlotProps } = slotProps;
+  if (!React.isValidElement(children)) {
+    console.warn(`given children "${children}" is not valid for asChild`);
+    return null;
+  }
+  return React.cloneElement(children, {
+    ...mergeReactProps(safeSlotProps, children.props),
+    ref: combinedRef([
+      ref,
+      (children as unknown as { ref: React.Ref<HTMLElement> }).ref,
+    ]),
+  } as never);
+});
+
+export interface AsChild {
+  asChild?: boolean;
+}
diff --git a/packages/react/lib.tsx b/packages/react/lib/vcn.ts
similarity index 73%
rename from packages/react/lib.tsx
rename to packages/react/lib/vcn.ts
index a3fad95..41f7669 100644
--- a/packages/react/lib.tsx
+++ b/packages/react/lib/vcn.ts
@@ -1,4 +1,3 @@
-import React from "react";
 import { twMerge } from "tailwind-merge";
 
 /**
@@ -273,98 +272,3 @@ export type VariantProps<F extends (props: unknown) => string> = F extends (
 ) => string
   ? P
   : never;
-
-/**
- * Merges the react props.
- * Basically childProps will override parentProps.
- * But if it is a event handler, style, or className, it will be merged.
- *
- * @param parentProps - The parent props.
- * @param childProps - The child props.
- * @returns The merged props.
- */
-function mergeReactProps(
-  parentProps: Record<string, unknown>,
-  childProps: Record<string, unknown>,
-) {
-  const overrideProps = { ...childProps };
-
-  for (const propName in childProps) {
-    const parentPropValue = parentProps[propName];
-    const childPropValue = childProps[propName];
-
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      if (
-        childPropValue &&
-        parentPropValue &&
-        typeof childPropValue === "function" &&
-        typeof parentPropValue === "function"
-      ) {
-        overrideProps[propName] = (...args: unknown[]) => {
-          childPropValue?.(...args);
-          parentPropValue?.(...args);
-        };
-      } else if (parentPropValue) {
-        overrideProps[propName] = parentPropValue;
-      }
-    } else if (
-      propName === "style" &&
-      typeof parentPropValue === "object" &&
-      typeof childPropValue === "object"
-    ) {
-      overrideProps[propName] = { ...parentPropValue, ...childPropValue };
-    } else if (
-      propName === "className" &&
-      typeof parentPropValue === "string" &&
-      typeof childPropValue === "string"
-    ) {
-      overrideProps[propName] = twMerge(parentPropValue, childPropValue);
-    }
-  }
-
-  return { ...parentProps, ...overrideProps };
-}
-
-/**
- * Takes an array of refs, and returns a single ref.
- *
- * @param refs - The array of refs.
- * @returns The single ref.
- */
-function combinedRef<I>(refs: React.Ref<I | null>[]) {
-  return (instance: I | null) =>
-    refs.forEach((ref) => {
-      if (ref instanceof Function) {
-        ref(instance);
-      } else if (ref) {
-        (ref as React.MutableRefObject<I | null>).current = instance;
-      }
-    });
-}
-
-interface SlotProps {
-  children?: React.ReactNode;
-}
-export const Slot = React.forwardRef<
-  HTMLElement,
-  SlotProps & Record<string, unknown>
->((props, ref) => {
-  const { children, ...slotProps } = props;
-  const { asChild: _1, ...safeSlotProps } = slotProps;
-  if (!React.isValidElement(children)) {
-    console.warn(`given children "${children}" is not valid for asChild`);
-    return null;
-  }
-  return React.cloneElement(children, {
-    ...mergeReactProps(safeSlotProps, children.props),
-    ref: combinedRef([
-      ref,
-      (children as unknown as { ref: React.Ref<HTMLElement> }).ref,
-    ]),
-  } as never);
-});
-
-export interface AsChild {
-  asChild?: boolean;
-}

From 0f8c999de7d3cefccbc635444c6254b6040900b9 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 14 Jun 2024 23:26:18 +0900
Subject: [PATCH 02/48] feat(react): add esModuleInterop in tsconfig.json

---
 packages/react/tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 2f201c8..83e4b0b 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -5,6 +5,7 @@
     "lib": ["ES2021", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "esModuleInterop": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",

From 27fcddcc1fbd98aff5b8c4738bd07ed349debfe1 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 14 Jun 2024 23:26:40 +0900
Subject: [PATCH 03/48] refactor(react): add lib directory instead of lib.tsx
 file

---
 packages/react/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 83e4b0b..455187d 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -29,6 +29,6 @@
       "@pswui-lib": ["lib.tsx"]
     }
   },
-  "include": ["components", "src", "./lib.tsx"],
+  "include": ["components", "src", "lib"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

From c201df67cee32fd3f7c57a6c926b03eb50200b38 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 14 Jun 2024 23:27:06 +0900
Subject: [PATCH 04/48] style(react): remove unnecessary linebreaks

---
 packages/react/vite.config.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react/vite.config.ts b/packages/react/vite.config.ts
index 97d5aa2..a059b21 100644
--- a/packages/react/vite.config.ts
+++ b/packages/react/vite.config.ts
@@ -5,9 +5,7 @@ import { resolve } from "node:path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    react()
-  ],
+  plugins: [react()],
   css: {
     postcss: {
       plugins: [tailwindcss()],
@@ -17,7 +15,7 @@ export default defineConfig({
     alias: {
       "@components": resolve(__dirname, "./components"),
       "@": resolve(__dirname, "./src"),
-      "@pswui-lib": resolve(__dirname, "./lib.tsx"),
+      "@pswui-lib": resolve(__dirname, "./vcn.ts"),
     },
   },
 });

From 139d02eb9b52ef1046483e526e03ea75d1f093dd Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 14 Jun 2024 23:29:06 +0900
Subject: [PATCH 05/48] feat(react-lib): add index.ts file

This commit creates a new index.ts file in the react/lib package. It exports from 'vcn' and 'Slot' modules, optimizing the package for component and slot usage.
---
 packages/react/lib/index.ts | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 packages/react/lib/index.ts

diff --git a/packages/react/lib/index.ts b/packages/react/lib/index.ts
new file mode 100644
index 0000000..faba6d8
--- /dev/null
+++ b/packages/react/lib/index.ts
@@ -0,0 +1,2 @@
+export * from "./vcn";
+export * from "./Slot";

From 1f1ca76b6dee65f56a27158790479cea753cf5a9 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 14 Jun 2024 23:47:46 +0900
Subject: [PATCH 06/48] fix: make @pswui-lib references library index

---
 packages/react/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 455187d..7e34c5b 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -26,7 +26,7 @@
     "paths": {
       "@components/*": ["components/*"],
       "@/*": ["src/*"],
-      "@pswui-lib": ["lib.tsx"]
+      "@pswui-lib": ["lib/index.ts"]
     }
   },
   "include": ["components", "src", "lib"],

From 395c2f8ed1c10b75a61a596b8ab7fe7a368931fe Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 14 Jun 2024 23:49:11 +0900
Subject: [PATCH 07/48] fix: use any instead of unknown for
 AnyPropBeforeResolve

TypeScript throws error in component's resolve usage about index signature.
---
 packages/react/lib/vcn.ts | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/react/lib/vcn.ts b/packages/react/lib/vcn.ts
index 41f7669..d232f2c 100644
--- a/packages/react/lib/vcn.ts
+++ b/packages/react/lib/vcn.ts
@@ -108,7 +108,8 @@ export function vcn<V extends VariantType>(param: {
   /**
    * Any Props -> Variant Props, Other Props
    */
-  <AnyPropBeforeResolve extends Record<string, unknown>>(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  <AnyPropBeforeResolve extends Record<string, any>>(
     anyProps: AnyPropBeforeResolve,
   ) => [
     Partial<VariantKV<V>> & {
@@ -138,7 +139,8 @@ export function vcn<V extends VariantType, P extends PresetType<V>>(param: {
   /**
    * Any Props -> Variant Props, Other Props
    */
-  <AnyPropBeforeResolve extends Record<string, unknown>>(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  <AnyPropBeforeResolve extends Record<string, any>>(
     anyProps: AnyPropBeforeResolve,
   ) => [
     Partial<VariantKV<V>> & {
@@ -267,8 +269,5 @@ export function vcn<
  * }
  * ```
  */
-export type VariantProps<F extends (props: unknown) => string> = F extends (
-  props: infer P,
-) => string
-  ? P
-  : never;
+export type VariantProps<F extends (props: Record<string, unknown>) => string> =
+  F extends (props: infer P) => string ? { [key in keyof P]: P[key] } : never;

From 89950524f4a1e7b9fb04b12582d2ffb3d468d27b Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 14 Jun 2024 23:51:41 +0900
Subject: [PATCH 08/48] fix: fix problem with ref element type

---
 packages/react/components/Drawer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/components/Drawer.tsx b/packages/react/components/Drawer.tsx
index b6bb745..bceb316 100644
--- a/packages/react/components/Drawer.tsx
+++ b/packages/react/components/Drawer.tsx
@@ -349,7 +349,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
             transitionDuration: dragState.isDragging ? "0s" : undefined,
             userSelect: dragState.isDragging ? "none" : undefined,
           }}
-          ref={(el) => {
+          ref={(el: HTMLDivElement | null) => {
             internalRef.current = el;
             if (typeof ref === "function") {
               ref(el);

From 2a53a2d3e95c2cee6d01947fecbec77c222f24fd Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 14 Jun 2024 23:52:34 +0900
Subject: [PATCH 09/48] fix: add value to data-toast-root

---
 packages/react/components/Toast.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/components/Toast.tsx b/packages/react/components/Toast.tsx
index 3a1063f..669ca35 100644
--- a/packages/react/components/Toast.tsx
+++ b/packages/react/components/Toast.tsx
@@ -307,7 +307,7 @@ const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
       {ReactDOM.createPortal(
         <div
           {...otherPropsExtracted}
-          data-toaster-root
+          data-toaster-root={true}
           className={toasterVariant(variantProps)}
           ref={(el) => {
             internalRef.current = el;

From 22ab752b75b7841dd351dc533907b7071986fbd1 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 14 Jun 2024 23:59:50 +0900
Subject: [PATCH 10/48] fix: split component file

---
 .../{Dialog.tsx => Dialog/Component.tsx}      | 34 ++++---------------
 packages/react/components/Dialog/Context.ts   | 27 +++++++++++++++
 packages/react/components/Dialog/index.ts     |  2 ++
 3 files changed, 36 insertions(+), 27 deletions(-)
 rename packages/react/components/{Dialog.tsx => Dialog/Component.tsx} (92%)
 create mode 100644 packages/react/components/Dialog/Context.ts
 create mode 100644 packages/react/components/Dialog/index.ts

diff --git a/packages/react/components/Dialog.tsx b/packages/react/components/Dialog/Component.tsx
similarity index 92%
rename from packages/react/components/Dialog.tsx
rename to packages/react/components/Dialog/Component.tsx
index 704db6f..f4bdc36 100644
--- a/packages/react/components/Dialog.tsx
+++ b/packages/react/components/Dialog/Component.tsx
@@ -1,32 +1,13 @@
-import React, { Dispatch, SetStateAction, useState } from "react";
+import React, { useState } from "react";
 import { Slot, VariantProps, vcn } from "@pswui-lib";
 import ReactDOM from "react-dom";
 
-/**
- * =========================
- * DialogContext
- * =========================
- */
-
-interface DialogContext {
-  opened: boolean;
-}
-
-const initialDialogContext: DialogContext = { opened: false };
-const DialogContext = React.createContext<
-  [DialogContext, Dispatch<SetStateAction<DialogContext>>]
->([
+import {
+  DialogContext,
   initialDialogContext,
-  () => {
-    if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
-      console.warn(
-        "It seems like you're using DialogContext outside of a provider.",
-      );
-    }
-  },
-]);
-
-const useDialogContext = () => React.useContext(DialogContext);
+  useDialogContext,
+  IDialogContext,
+} from "./Context";
 
 /**
  * =========================
@@ -39,7 +20,7 @@ interface DialogRootProps {
 }
 
 const DialogRoot = ({ children }: DialogRootProps) => {
-  const state = useState<DialogContext>(initialDialogContext);
+  const state = useState<IDialogContext>(initialDialogContext);
   return (
     <DialogContext.Provider value={state}>{children}</DialogContext.Provider>
   );
@@ -411,7 +392,6 @@ const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
 );
 
 export {
-  useDialogContext,
   DialogRoot,
   DialogTrigger,
   DialogOverlay,
diff --git a/packages/react/components/Dialog/Context.ts b/packages/react/components/Dialog/Context.ts
new file mode 100644
index 0000000..3b59c7b
--- /dev/null
+++ b/packages/react/components/Dialog/Context.ts
@@ -0,0 +1,27 @@
+import { Dispatch, SetStateAction, useContext, createContext } from "react";
+
+/**
+ * =========================
+ * DialogContext
+ * =========================
+ */
+
+export interface IDialogContext {
+  opened: boolean;
+}
+
+export const initialDialogContext: IDialogContext = { opened: false };
+export const DialogContext = createContext<
+  [IDialogContext, Dispatch<SetStateAction<IDialogContext>>]
+>([
+  initialDialogContext,
+  () => {
+    if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+      console.warn(
+        "It seems like you're using DialogContext outside of a provider.",
+      );
+    }
+  },
+]);
+
+export const useDialogContext = () => useContext(DialogContext);
diff --git a/packages/react/components/Dialog/index.ts b/packages/react/components/Dialog/index.ts
new file mode 100644
index 0000000..9202698
--- /dev/null
+++ b/packages/react/components/Dialog/index.ts
@@ -0,0 +1,2 @@
+export * from "./Component";
+export { useDialogContext } from "./Context";

From 6c35e5487524dab7c244e1db14b1dc2eef52e915 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 00:03:07 +0900
Subject: [PATCH 11/48] fix: split component file

---
 .../{Tabs.tsx => Tabs/Component.tsx}          | 98 +------------------
 packages/react/components/Tabs/Context.ts     | 26 +++++
 packages/react/components/Tabs/Hook.ts        | 74 ++++++++++++++
 packages/react/components/Tabs/index.ts       |  2 +
 4 files changed, 104 insertions(+), 96 deletions(-)
 rename packages/react/components/{Tabs.tsx => Tabs/Component.tsx} (59%)
 create mode 100644 packages/react/components/Tabs/Context.ts
 create mode 100644 packages/react/components/Tabs/Hook.ts
 create mode 100644 packages/react/components/Tabs/index.ts

diff --git a/packages/react/components/Tabs.tsx b/packages/react/components/Tabs/Component.tsx
similarity index 59%
rename from packages/react/components/Tabs.tsx
rename to packages/react/components/Tabs/Component.tsx
index 3214bda..bc90902 100644
--- a/packages/react/components/Tabs.tsx
+++ b/packages/react/components/Tabs/Component.tsx
@@ -1,30 +1,7 @@
 import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
 import React from "react";
 
-interface Tab {
-  name: string;
-}
-
-interface TabContextBody {
-  tabs: Tab[];
-  active: [number, string] /* index, name */;
-}
-
-const TabContext = React.createContext<
-  [TabContextBody, React.Dispatch<React.SetStateAction<TabContextBody>>]
->([
-  {
-    tabs: [],
-    active: [0, ""],
-  },
-  () => {
-    if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
-      console.warn(
-        "It seems like you're using TabContext outside of provider.",
-      );
-    }
-  },
-]);
+import { TabContextBody, TabContext, Tab } from "./Context";
 
 interface TabProviderProps {
   defaultName: string;
@@ -40,77 +17,6 @@ const TabProvider = ({ defaultName, children }: TabProviderProps) => {
   return <TabContext.Provider value={state}>{children}</TabContext.Provider>;
 };
 
-/**
- * Provides current state for tab, using context.
- * Also provides functions to control state.
- */
-const useTabState = () => {
-  const [state, setState] = React.useContext(TabContext);
-
-  function getActiveTab() {
-    return state.active;
-  }
-
-  function setActiveTab(name: string): void;
-  function setActiveTab(index: number): void;
-  function setActiveTab(param: string | number) {
-    if (typeof param === "number") {
-      if (param < 0 || param >= state.tabs.length) {
-        if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
-          console.error(
-            `Invalid index passed to setActiveTab: ${param}, valid indices are 0 to ${
-              state.tabs.length - 1
-            }`,
-          );
-        }
-        return;
-      }
-
-      setState((prev) => {
-        return {
-          ...prev,
-          active: [param, prev.tabs[param].name],
-        };
-      });
-    } else if (typeof param === "string") {
-      const index = state.tabs.findIndex((tab) => tab.name === param);
-      if (index === -1) {
-        if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
-          console.error(
-            `Invalid name passed to setActiveTab: ${param}, valid names are ${state.tabs
-              .map((tab) => tab.name)
-              .join(", ")}`,
-          );
-        }
-        return;
-      }
-
-      setActiveTab(index);
-    }
-  }
-
-  function setPreviousActive() {
-    if (state.active[0] === 0) {
-      return;
-    }
-    setActiveTab(state.active[0] - 1);
-  }
-
-  function setNextActive() {
-    if (state.active[0] === state.tabs.length - 1) {
-      return;
-    }
-    setActiveTab(state.active[0] + 1);
-  }
-
-  return {
-    getActiveTab,
-    setActiveTab,
-    setPreviousActive,
-    setNextActive,
-  };
-};
-
 const [TabListVariant, resolveTabListVariantProps] = vcn({
   base: "flex flex-row bg-gray-100 dark:bg-neutral-800 rounded-lg p-1.5 gap-1",
   variants: {},
@@ -227,4 +133,4 @@ const TabContent = (props: TabContentProps) => {
   }
 };
 
-export { TabProvider, useTabState, TabList, TabTrigger, TabContent };
+export { TabProvider, TabList, TabTrigger, TabContent };
diff --git a/packages/react/components/Tabs/Context.ts b/packages/react/components/Tabs/Context.ts
new file mode 100644
index 0000000..4f00846
--- /dev/null
+++ b/packages/react/components/Tabs/Context.ts
@@ -0,0 +1,26 @@
+import React from "react";
+
+export interface Tab {
+  name: string;
+}
+
+export interface TabContextBody {
+  tabs: Tab[];
+  active: [number, string] /* index, name */;
+}
+
+export const TabContext = React.createContext<
+  [TabContextBody, React.Dispatch<React.SetStateAction<TabContextBody>>]
+>([
+  {
+    tabs: [],
+    active: [0, ""],
+  },
+  () => {
+    if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+      console.warn(
+        "It seems like you're using TabContext outside of provider.",
+      );
+    }
+  },
+]);
diff --git a/packages/react/components/Tabs/Hook.ts b/packages/react/components/Tabs/Hook.ts
new file mode 100644
index 0000000..26e2aa3
--- /dev/null
+++ b/packages/react/components/Tabs/Hook.ts
@@ -0,0 +1,74 @@
+import React from "react";
+
+import { TabContext } from "./Context";
+
+/**
+ * Provides current state for tab, using context.
+ * Also provides functions to control state.
+ */
+export const useTabState = () => {
+  const [state, setState] = React.useContext(TabContext);
+
+  function getActiveTab() {
+    return state.active;
+  }
+
+  function setActiveTab(name: string): void;
+  function setActiveTab(index: number): void;
+  function setActiveTab(param: string | number) {
+    if (typeof param === "number") {
+      if (param < 0 || param >= state.tabs.length) {
+        if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+          console.error(
+            `Invalid index passed to setActiveTab: ${param}, valid indices are 0 to ${
+              state.tabs.length - 1
+            }`,
+          );
+        }
+        return;
+      }
+
+      setState((prev) => {
+        return {
+          ...prev,
+          active: [param, prev.tabs[param].name],
+        };
+      });
+    } else if (typeof param === "string") {
+      const index = state.tabs.findIndex((tab) => tab.name === param);
+      if (index === -1) {
+        if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
+          console.error(
+            `Invalid name passed to setActiveTab: ${param}, valid names are ${state.tabs
+              .map((tab) => tab.name)
+              .join(", ")}`,
+          );
+        }
+        return;
+      }
+
+      setActiveTab(index);
+    }
+  }
+
+  function setPreviousActive() {
+    if (state.active[0] === 0) {
+      return;
+    }
+    setActiveTab(state.active[0] - 1);
+  }
+
+  function setNextActive() {
+    if (state.active[0] === state.tabs.length - 1) {
+      return;
+    }
+    setActiveTab(state.active[0] + 1);
+  }
+
+  return {
+    getActiveTab,
+    setActiveTab,
+    setPreviousActive,
+    setNextActive,
+  };
+};
diff --git a/packages/react/components/Tabs/index.ts b/packages/react/components/Tabs/index.ts
new file mode 100644
index 0000000..c16790c
--- /dev/null
+++ b/packages/react/components/Tabs/index.ts
@@ -0,0 +1,2 @@
+export * from "./Component";
+export * from "./Hook";

From 7dd3bf7d9e9a679942fde76c27caf0dc562baaad Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 01:25:00 +0900
Subject: [PATCH 12/48] fix: split component file

---
 .../{Toast.tsx => Toast/Component.tsx}        | 157 ++----------------
 packages/react/components/Toast/Hook.ts       |   9 +
 packages/react/components/Toast/Store.ts      | 100 +++++++++++
 packages/react/components/Toast/Variant.ts    |  40 +++++
 packages/react/components/Toast/index.ts      |   0
 5 files changed, 163 insertions(+), 143 deletions(-)
 rename packages/react/components/{Toast.tsx => Toast/Component.tsx} (62%)
 create mode 100644 packages/react/components/Toast/Hook.ts
 create mode 100644 packages/react/components/Toast/Store.ts
 create mode 100644 packages/react/components/Toast/Variant.ts
 create mode 100644 packages/react/components/Toast/index.ts

diff --git a/packages/react/components/Toast.tsx b/packages/react/components/Toast/Component.tsx
similarity index 62%
rename from packages/react/components/Toast.tsx
rename to packages/react/components/Toast/Component.tsx
index 669ca35..9200465 100644
--- a/packages/react/components/Toast.tsx
+++ b/packages/react/components/Toast/Component.tsx
@@ -2,148 +2,19 @@ import React, { useEffect, useId, useRef } from "react";
 import ReactDOM from "react-dom";
 import { VariantProps, vcn } from "@pswui-lib";
 
-interface ToastOption {
-  closeButton: boolean;
-  closeTimeout: number | null;
-}
-
-const defaultToastOption: ToastOption = {
-  closeButton: true,
-  closeTimeout: 3000,
-};
-
-const toastColors = {
-  background: "bg-white dark:bg-black",
-  borders: {
-    default: "border-black/10 dark:border-white/20",
-    error: "border-red-500/80",
-    success: "border-green-500/80",
-    warning: "border-yellow-500/80",
-    loading: "border-black/50 dark:border-white/50 animate-pulse",
-  },
-};
-
-const [toastVariant] = vcn({
-  base: `flex flex-col gap-2 border p-4 rounded-lg pr-8 pointer-events-auto ${toastColors.background} relative transition-all duration-150`,
-  variants: {
-    status: {
-      default: toastColors.borders.default,
-      error: toastColors.borders.error,
-      success: toastColors.borders.success,
-      warning: toastColors.borders.warning,
-      loading: toastColors.borders.loading,
-    },
-    life: {
-      born: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(0,.6,.7,1)]",
-      normal: "translate-y-0 scale-100 ease-[cubic-bezier(0,.6,.7,1)]",
-      dead: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(.6,0,1,.7)]",
-    },
-  },
-  defaults: {
-    status: "default",
-    life: "born",
-  },
-});
-
-interface ToastBody extends Omit<VariantProps<typeof toastVariant>, "preset"> {
-  title: string;
-  description: string;
-}
-
-let index = 0;
-const toasts: Record<
-  `${number}`,
-  ToastBody & Partial<ToastOption> & { subscribers: (() => void)[] }
-> = {};
-let subscribers: (() => void)[] = [];
-
-/**
- * ====
- * Controls
- * ====
- */
-
-function subscribe(callback: () => void) {
-  subscribers.push(callback);
-  return () => {
-    subscribers = subscribers.filter((subscriber) => subscriber !== callback);
-  };
-}
-
-function getSnapshot() {
-  return { ...toasts };
-}
-
-function subscribeSingle(id: `${number}`) {
-  return (callback: () => void) => {
-    toasts[id].subscribers.push(callback);
-    return () => {
-      toasts[id].subscribers = toasts[id].subscribers.filter(
-        (subscriber) => subscriber !== callback,
-      );
-    };
-  };
-}
-
-function getSingleSnapshot(id: `${number}`) {
-  return () => {
-    return {
-      ...toasts[id],
-    };
-  };
-}
-
-function notify() {
-  subscribers.forEach((subscriber) => subscriber());
-}
-
-function notifySingle(id: `${number}`) {
-  toasts[id].subscribers.forEach((subscriber) => subscriber());
-}
-
-function close(id: `${number}`) {
-  toasts[id] = {
-    ...toasts[id],
-    life: "dead",
-  };
-  notifySingle(id);
-}
-
-function update(
-  id: `${number}`,
-  toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>,
-) {
-  toasts[id] = {
-    ...toasts[id],
-    ...toast,
-  };
-  notifySingle(id);
-}
-
-function addToast(toast: Omit<ToastBody, "life"> & Partial<ToastOption>) {
-  const id: `${number}` = `${index}`;
-  toasts[id] = {
-    ...toast,
-    subscribers: [],
-    life: "born",
-  };
-  index += 1;
-  notify();
-
-  return {
-    update: (toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>) =>
-      update(id, toast),
-    close: () => close(id),
-  };
-}
-
-function useToast() {
-  return {
-    toast: addToast,
-    update,
-    close,
-  };
-}
+import { toastVariant } from "./Variant";
+import {
+  ToastOption,
+  toasts,
+  subscribeSingle,
+  getSingleSnapshot,
+  notifySingle,
+  close,
+  notify,
+  defaultToastOption,
+  subscribe,
+  getSnapshot,
+} from "./Store";
 
 const ToastTemplate = ({
   id,
@@ -333,4 +204,4 @@ const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
   );
 });
 
-export { Toaster, useToast };
+export { Toaster };
diff --git a/packages/react/components/Toast/Hook.ts b/packages/react/components/Toast/Hook.ts
new file mode 100644
index 0000000..f6d74a2
--- /dev/null
+++ b/packages/react/components/Toast/Hook.ts
@@ -0,0 +1,9 @@
+import { addToast, update, close } from "./Store";
+
+export function useToast() {
+  return {
+    toast: addToast,
+    update,
+    close,
+  };
+}
diff --git a/packages/react/components/Toast/Store.ts b/packages/react/components/Toast/Store.ts
new file mode 100644
index 0000000..04fb4f2
--- /dev/null
+++ b/packages/react/components/Toast/Store.ts
@@ -0,0 +1,100 @@
+import { ToastBody } from "./Variant";
+
+export interface ToastOption {
+  closeButton: boolean;
+  closeTimeout: number | null;
+}
+
+export const defaultToastOption: ToastOption = {
+  closeButton: true,
+  closeTimeout: 3000,
+};
+
+let index = 0;
+export const toasts: Record<
+  `${number}`,
+  ToastBody & Partial<ToastOption> & { subscribers: (() => void)[] }
+> = {};
+let subscribers: (() => void)[] = [];
+
+/**
+ * ====
+ * Controls
+ * ====
+ */
+
+export function subscribe(callback: () => void) {
+  subscribers.push(callback);
+  return () => {
+    subscribers = subscribers.filter((subscriber) => subscriber !== callback);
+  };
+}
+
+export function getSnapshot() {
+  return { ...toasts };
+}
+
+export function subscribeSingle(id: `${number}`) {
+  return (callback: () => void) => {
+    toasts[id].subscribers.push(callback);
+    return () => {
+      toasts[id].subscribers = toasts[id].subscribers.filter(
+        (subscriber) => subscriber !== callback,
+      );
+    };
+  };
+}
+
+export function getSingleSnapshot(id: `${number}`) {
+  return () => {
+    return {
+      ...toasts[id],
+    };
+  };
+}
+
+export function notify() {
+  subscribers.forEach((subscriber) => subscriber());
+}
+
+export function notifySingle(id: `${number}`) {
+  toasts[id].subscribers.forEach((subscriber) => subscriber());
+}
+
+export function close(id: `${number}`) {
+  toasts[id] = {
+    ...toasts[id],
+    life: "dead",
+  };
+  notifySingle(id);
+}
+
+export function update(
+  id: `${number}`,
+  toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>,
+) {
+  toasts[id] = {
+    ...toasts[id],
+    ...toast,
+  };
+  notifySingle(id);
+}
+
+export function addToast(
+  toast: Omit<ToastBody, "life"> & Partial<ToastOption>,
+) {
+  const id: `${number}` = `${index}`;
+  toasts[id] = {
+    ...toast,
+    subscribers: [],
+    life: "born",
+  };
+  index += 1;
+  notify();
+
+  return {
+    update: (toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>) =>
+      update(id, toast),
+    close: () => close(id),
+  };
+}
diff --git a/packages/react/components/Toast/Variant.ts b/packages/react/components/Toast/Variant.ts
new file mode 100644
index 0000000..2a0285c
--- /dev/null
+++ b/packages/react/components/Toast/Variant.ts
@@ -0,0 +1,40 @@
+import { VariantProps, vcn } from "@pswui-lib";
+
+const toastColors = {
+  background: "bg-white dark:bg-black",
+  borders: {
+    default: "border-black/10 dark:border-white/20",
+    error: "border-red-500/80",
+    success: "border-green-500/80",
+    warning: "border-yellow-500/80",
+    loading: "border-black/50 dark:border-white/50 animate-pulse",
+  },
+};
+
+export const [toastVariant, resolveToastVariantProps] = vcn({
+  base: `flex flex-col gap-2 border p-4 rounded-lg pr-8 pointer-events-auto ${toastColors.background} relative transition-all duration-150`,
+  variants: {
+    status: {
+      default: toastColors.borders.default,
+      error: toastColors.borders.error,
+      success: toastColors.borders.success,
+      warning: toastColors.borders.warning,
+      loading: toastColors.borders.loading,
+    },
+    life: {
+      born: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(0,.6,.7,1)]",
+      normal: "translate-y-0 scale-100 ease-[cubic-bezier(0,.6,.7,1)]",
+      dead: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(.6,0,1,.7)]",
+    },
+  },
+  defaults: {
+    status: "default",
+    life: "born",
+  },
+});
+
+export interface ToastBody
+  extends Omit<VariantProps<typeof toastVariant>, "preset"> {
+  title: string;
+  description: string;
+}
diff --git a/packages/react/components/Toast/index.ts b/packages/react/components/Toast/index.ts
new file mode 100644
index 0000000..e69de29

From 1cad20eaa2cb535ad83a73ae3a1a59876adf882c Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 01:43:13 +0900
Subject: [PATCH 13/48] feat(registry): apply new structure of registry

---
 registry.json | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/registry.json b/registry.json
index 6a14dc0..269dfeb 100644
--- a/registry.json
+++ b/registry.json
@@ -1,20 +1,25 @@
 {
-  "base": "https://raw.githubusercontent.com/pswui/ui",
+  "base": "https://raw.githubusercontent.com/pswui/ui/{branch}",
   "paths": {
-    "components": "/main/packages/react/components/{componentName}",
-    "lib": "/main/packages/react/lib.tsx"
+    "components": "/packages/react/components/{componentName}",
+    "lib": "/packages/react/lib/{libName}"
   },
+  "lib": [
+    "index.ts",
+    "Slot.tsx",
+    "vcn.ts"
+  ],
   "components": {
-    "button": { "name": "Button.tsx" },
-    "checkbox": { "name": "Checkbox.tsx" },
-    "dialog": { "name": "Dialog.tsx" },
-    "drawer": { "name": "Drawer.tsx" },
-    "input": { "name": "Input.tsx" },
-    "label": { "name": "Label.tsx" },
-    "popover": { "name": "Popover.tsx" },
-    "switch": { "name": "Switch.tsx" },
-    "tabs": { "name": "Tabs.tsx" },
-    "toast": { "name": "Toast.tsx" },
-    "tooltip": {"name": "Tooltip.tsx" }
+    "button": { "type": "file", "name": "Button.tsx" },
+    "checkbox": { "type": "file", "name": "Checkbox.tsx" },
+    "dialog": { "type": "dir", "name": "Dialog", "files": ["index.ts", "Component.tsx", "Context.ts"] },
+    "drawer": { "type": "file", "name": "Drawer.tsx" },
+    "input": { "type": "file", "name": "Input.tsx" },
+    "label": { "type": "file", "name": "Label.tsx" },
+    "popover": { "type": "file", "name": "Popover.tsx" },
+    "switch": { "type": "file", "name": "Switch.tsx" },
+    "tabs": { "type": "dir", "name": "Tabs", "files": ["index.ts", "Context.ts", "Hook.ts", "Component.tsx"] },
+    "toast": { "type": "dir", "name": "Toast", "files": ["index.ts", "Component.tsx", "Hook.ts", "Store.ts", "Variant.ts"] },
+    "tooltip": { "type": "file", "name": "Tooltip.tsx" }
   }
 }
\ No newline at end of file

From 0072836bfc1dd31ac32af2080647522ce6635232 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 01:43:34 +0900
Subject: [PATCH 14/48] feat(registry): apply new structure of registry

---
 packages/cli/src/const.ts | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/cli/src/const.ts b/packages/cli/src/const.ts
index 2779598..858ef86 100644
--- a/packages/cli/src/const.ts
+++ b/packages/cli/src/const.ts
@@ -3,9 +3,16 @@ import {z} from 'zod'
 export const REGISTRY_URL = 'https://raw.githubusercontent.com/pswui/ui/main/registry.json'
 export const CONFIG_DEFAULT_PATH = 'pswui.config.js'
 
-interface RegistryComponent {
-  name: string
-}
+type RegistryComponent =
+  | {
+      type: 'file'
+      name: string
+    }
+  | {
+      type: 'dir'
+      name: string
+      files: string[]
+    }
 
 export interface Registry {
   base: string
@@ -14,6 +21,7 @@ export interface Registry {
     components: string
     lib: string
   }
+  lib: string[]
 }
 
 export interface Config {

From c1d5c5d06bd999ae28f13520dbdf4fe980e71819 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 01:44:06 +0900
Subject: [PATCH 15/48] refactor(cli): make config lib path to directory
 pattern

---
 packages/cli/src/const.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/cli/src/const.ts b/packages/cli/src/const.ts
index 858ef86..350924d 100644
--- a/packages/cli/src/const.ts
+++ b/packages/cli/src/const.ts
@@ -36,7 +36,7 @@ export interface Config {
    */
   paths?: {
     components?: 'src/pswui/components' | string
-    lib?: 'src/pswui/lib.tsx' | string
+    lib?: 'src/pswui/lib' | string
   }
 }
 export type ResolvedConfig<T = Config> = {
@@ -49,7 +49,7 @@ export const DEFAULT_CONFIG = {
   },
   paths: {
     components: 'src/pswui/components',
-    lib: 'src/pswui/lib.tsx',
+    lib: 'src/pswui/lib',
   },
 }
 export const configZod = z.object({

From 7d2453b4cf07f0c26dcfb8b5d91348d889a59c97 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 01:45:00 +0900
Subject: [PATCH 16/48] feat(cli): make getRegistry take custom branch

---
 packages/cli/src/commands/add.tsx    | 6 +++---
 packages/cli/src/commands/search.tsx | 8 ++++----
 packages/cli/src/const.ts            | 2 +-
 packages/cli/src/helpers/registry.ts | 9 ++++++---
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/cli/src/commands/add.tsx b/packages/cli/src/commands/add.tsx
index bc2f139..62a101f 100644
--- a/packages/cli/src/commands/add.tsx
+++ b/packages/cli/src/commands/add.tsx
@@ -85,7 +85,7 @@ export default class Add extends Command {
   static override examples = ['<%= config.bin %> <%= command.id %>']
 
   static override flags = {
-    registry: Flags.string({char: 'r', description: 'override registry url'}),
+    branch: Flags.string({char: 'r', description: 'use other branch instead of main'}),
     force: Flags.boolean({char: 'f', description: 'override the existing file'}),
     config: Flags.string({char: 'p', description: 'path to config'}),
     shared: Flags.string({char: 's', description: 'place for installation of shared.ts'}),
@@ -110,9 +110,9 @@ export default class Add extends Command {
 
     const loadRegistryOra = ora('Fetching registry...').start()
     if (flags.registry) {
-      this.log(`Using ${flags.registry} for registry.`)
+      this.log(`Using ${flags.branch} for branch.`)
     }
-    const unsafeRegistry = await getRegistry(flags.registry)
+    const unsafeRegistry = await getRegistry(flags.branch)
     if (!unsafeRegistry.ok) {
       loadRegistryOra.fail(unsafeRegistry.message)
       return
diff --git a/packages/cli/src/commands/search.tsx b/packages/cli/src/commands/search.tsx
index a339125..141b87c 100644
--- a/packages/cli/src/commands/search.tsx
+++ b/packages/cli/src/commands/search.tsx
@@ -10,7 +10,7 @@ export default class Search extends Command {
   }
 
   static override flags = {
-    registry: Flags.string({char: 'r', description: 'override registry url'})
+    branch: Flags.string({char: 'r', description: 'use other branch instead of main'}),
   }
 
   static override description = 'Search components.'
@@ -20,10 +20,10 @@ export default class Search extends Command {
   public async run(): Promise<void> {
     const {args, flags} = await this.parse(Search)
 
-    if (flags.registry) {
-      this.log(`Using ${flags.registry} for registry.`)
+    if (flags.branch) {
+      this.log(`Using ${flags.branch} for registry.`)
     }
-    const registryResult = await getRegistry(flags.registry)
+    const registryResult = await getRegistry(flags.branch)
     if (!registryResult.ok) {
       this.error(registryResult.message)
     }
diff --git a/packages/cli/src/const.ts b/packages/cli/src/const.ts
index 350924d..95911d4 100644
--- a/packages/cli/src/const.ts
+++ b/packages/cli/src/const.ts
@@ -1,6 +1,6 @@
 import {z} from 'zod'
 
-export const REGISTRY_URL = 'https://raw.githubusercontent.com/pswui/ui/main/registry.json'
+export const REGISTRY_URL = (branch: string) => `https://raw.githubusercontent.com/pswui/ui/${branch}/registry.json`
 export const CONFIG_DEFAULT_PATH = 'pswui.config.js'
 
 type RegistryComponent =
diff --git a/packages/cli/src/helpers/registry.ts b/packages/cli/src/helpers/registry.ts
index 56e265a..498e252 100644
--- a/packages/cli/src/helpers/registry.ts
+++ b/packages/cli/src/helpers/registry.ts
@@ -3,14 +3,17 @@ import fetch from 'node-fetch'
 import {REGISTRY_URL, Registry} from '../const.js'
 
 export async function getRegistry(
-  REGISTRY_OVERRIDE_URL?: string,
+  branch?: string,
 ): Promise<{message: string; ok: false} | {ok: true; registry: Registry}> {
-  const registryResponse = await fetch(REGISTRY_OVERRIDE_URL ?? REGISTRY_URL)
+  const registryResponse = await fetch(REGISTRY_URL(branch ?? 'main'))
 
   if (registryResponse.ok) {
+    const registryJson = (await registryResponse.json()) as Registry
+    registryJson.base = registryJson.base.replace('{branch}', branch ?? 'main')
+
     return {
       ok: true,
-      registry: (await registryResponse.json()) as Registry,
+      registry: registryJson,
     }
   }
 

From 28d5f409f85bff7e888fc6525f6a0a19517f32ce Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 01:45:18 +0900
Subject: [PATCH 17/48] fix(cli): add url in registry fetch error message

---
 packages/cli/src/helpers/registry.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/src/helpers/registry.ts b/packages/cli/src/helpers/registry.ts
index 498e252..404ec2c 100644
--- a/packages/cli/src/helpers/registry.ts
+++ b/packages/cli/src/helpers/registry.ts
@@ -18,7 +18,7 @@ export async function getRegistry(
   }
 
   return {
-    message: `Error while fetching registry: ${registryResponse.status} ${registryResponse.statusText}`,
+    message: `Error while fetching registry from ${registryResponse.url}: ${registryResponse.status} ${registryResponse.statusText}`,
     ok: false,
   }
 }

From b3ebcb45ee62e7fba07c72d3139b5f99646012cf Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 01:45:29 +0900
Subject: [PATCH 18/48] feat(cli): make getRegistry take custom branch

---
 packages/cli/src/commands/list.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/cli/src/commands/list.ts b/packages/cli/src/commands/list.ts
index 279ce68..308bd51 100644
--- a/packages/cli/src/commands/list.ts
+++ b/packages/cli/src/commands/list.ts
@@ -12,8 +12,8 @@ export default class List extends Command {
   static override examples = ['<%= config.bin %> <%= command.id %>']
 
   static override flags = {
+    branch: Flags.string({char: 'r', description: 'use other branch instead of main'}),
     config: Flags.string({char: 'p', description: 'path to config'}),
-    registry: Flags.string({char: 'r', description: 'override registry url'}),
     url: Flags.boolean({char: 'u', description: 'include component file URL'}),
   }
 
@@ -26,11 +26,11 @@ export default class List extends Command {
     const loadedConfig = await validateConfig((message: string) => this.log(message), await loadConfig(flags.config))
 
     registrySpinner.start()
-    if (flags.registry) {
-      this.log(`Using ${flags.registry} for registry.`)
+    if (flags.branch) {
+      this.log(`Using ${flags.branch} for registry.`)
     }
 
-    const unsafeRegistry = await getRegistry(flags.registry)
+    const unsafeRegistry = await getRegistry(flags.branch)
     if (!unsafeRegistry.ok) {
       registrySpinner.fail(unsafeRegistry.message)
       return

From 9709f0e381d47f27cba655b6589a36b8f8bd1d7d Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 01:48:28 +0900
Subject: [PATCH 19/48] fix(react): temporarily remove app import

---
 packages/react/src/main.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/react/src/main.tsx b/packages/react/src/main.tsx
index bfddd5c..b9a9cf4 100644
--- a/packages/react/src/main.tsx
+++ b/packages/react/src/main.tsx
@@ -1,10 +1,7 @@
 import "./tailwind.css";
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <React.StrictMode></React.StrictMode>,
 );

From de8a1129da13e0a3305ac6858d8b621ec6aab298 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 01:57:21 +0900
Subject: [PATCH 20/48] feat(cli): make registry fetch use safeFetcher

---
 packages/cli/src/helpers/registry.ts    | 12 ++++--------
 packages/cli/src/helpers/safeFetcher.ts | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 packages/cli/src/helpers/safeFetcher.ts

diff --git a/packages/cli/src/helpers/registry.ts b/packages/cli/src/helpers/registry.ts
index 404ec2c..efd370c 100644
--- a/packages/cli/src/helpers/registry.ts
+++ b/packages/cli/src/helpers/registry.ts
@@ -1,14 +1,13 @@
-import fetch from 'node-fetch'
-
 import {REGISTRY_URL, Registry} from '../const.js'
+import {safeFetch} from './safeFetcher.js'
 
 export async function getRegistry(
   branch?: string,
 ): Promise<{message: string; ok: false} | {ok: true; registry: Registry}> {
-  const registryResponse = await fetch(REGISTRY_URL(branch ?? 'main'))
+  const registryResponse = await safeFetch(REGISTRY_URL(branch ?? 'main'))
 
   if (registryResponse.ok) {
-    const registryJson = (await registryResponse.json()) as Registry
+    const registryJson = registryResponse.json as Registry
     registryJson.base = registryJson.base.replace('{branch}', branch ?? 'main')
 
     return {
@@ -17,10 +16,7 @@ export async function getRegistry(
     }
   }
 
-  return {
-    message: `Error while fetching registry from ${registryResponse.url}: ${registryResponse.status} ${registryResponse.statusText}`,
-    ok: false,
-  }
+  return registryResponse
 }
 
 export async function getAvailableComponentNames(registry: Registry): Promise<string[]> {
diff --git a/packages/cli/src/helpers/safeFetcher.ts b/packages/cli/src/helpers/safeFetcher.ts
new file mode 100644
index 0000000..7f63d5b
--- /dev/null
+++ b/packages/cli/src/helpers/safeFetcher.ts
@@ -0,0 +1,19 @@
+import fetch, {Response} from 'node-fetch'
+
+export async function safeFetch(
+  url: string,
+): Promise<{ok: true; json: unknown} | {ok: false; message: string; response: Response}> {
+  const response = await fetch(url)
+  if (response.ok) {
+    return {
+      ok: true,
+      json: await response.json(),
+    }
+  }
+
+  return {
+    ok: false,
+    message: `Error while fetching from ${response.url}: ${response.status} ${response.statusText}`,
+    response,
+  }
+}

From f6d2e2335d8267a9dd4fec4b31c7d06c8cacdc1a Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 01:59:10 +0900
Subject: [PATCH 21/48] refactor(cli): safeFetcher return response instead of
 json

---
 packages/cli/src/helpers/registry.ts    | 2 +-
 packages/cli/src/helpers/safeFetcher.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/cli/src/helpers/registry.ts b/packages/cli/src/helpers/registry.ts
index efd370c..ef46c29 100644
--- a/packages/cli/src/helpers/registry.ts
+++ b/packages/cli/src/helpers/registry.ts
@@ -7,7 +7,7 @@ export async function getRegistry(
   const registryResponse = await safeFetch(REGISTRY_URL(branch ?? 'main'))
 
   if (registryResponse.ok) {
-    const registryJson = registryResponse.json as Registry
+    const registryJson = (await registryResponse.response.json()) as Registry
     registryJson.base = registryJson.base.replace('{branch}', branch ?? 'main')
 
     return {
diff --git a/packages/cli/src/helpers/safeFetcher.ts b/packages/cli/src/helpers/safeFetcher.ts
index 7f63d5b..c9ed4bd 100644
--- a/packages/cli/src/helpers/safeFetcher.ts
+++ b/packages/cli/src/helpers/safeFetcher.ts
@@ -2,12 +2,12 @@ import fetch, {Response} from 'node-fetch'
 
 export async function safeFetch(
   url: string,
-): Promise<{ok: true; json: unknown} | {ok: false; message: string; response: Response}> {
+): Promise<{ok: true; response: Response} | {ok: false; message: string; response: Response}> {
   const response = await fetch(url)
   if (response.ok) {
     return {
       ok: true,
-      json: await response.json(),
+      response,
     }
   }
 

From 0be21e2a8d5cb62390d9f00e083922659646035b Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 02:15:33 +0900
Subject: [PATCH 22/48] refactor(cli): export RegistryComponent type

---
 packages/cli/src/const.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/src/const.ts b/packages/cli/src/const.ts
index 95911d4..5a66999 100644
--- a/packages/cli/src/const.ts
+++ b/packages/cli/src/const.ts
@@ -3,7 +3,7 @@ import {z} from 'zod'
 export const REGISTRY_URL = (branch: string) => `https://raw.githubusercontent.com/pswui/ui/${branch}/registry.json`
 export const CONFIG_DEFAULT_PATH = 'pswui.config.js'
 
-type RegistryComponent =
+export type RegistryComponent =
   | {
       type: 'file'
       name: string

From 46bdb3df98c9ffffb5eed07d075b26a16a3fa5c3 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 02:19:40 +0900
Subject: [PATCH 23/48] feat(cli): add getDirComponentRequiredFiles

---
 packages/cli/src/helpers/path.ts | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/cli/src/helpers/path.ts b/packages/cli/src/helpers/path.ts
index 85a9338..a59fa0a 100644
--- a/packages/cli/src/helpers/path.ts
+++ b/packages/cli/src/helpers/path.ts
@@ -2,7 +2,7 @@ import {existsSync} from 'node:fs'
 import {readdir} from 'node:fs/promises'
 import path from 'node:path'
 
-import {ResolvedConfig} from '../const.js'
+import {RegistryComponent, ResolvedConfig} from '../const.js'
 
 export async function getComponentsInstalled(components: string[], config: ResolvedConfig) {
   const componentPath = path.join(process.cwd(), config.paths.components)
@@ -21,6 +21,26 @@ export async function getComponentsInstalled(components: string[], config: Resol
   return []
 }
 
+export async function getDirComponentRequiredFiles<T extends RegistryComponent & {type: 'dir'}>(
+  componentObject: T,
+  config: ResolvedConfig,
+) {
+  const componentPath = path.join(process.cwd(), config.paths.components, componentObject.name)
+  if (!existsSync(componentPath)) {
+    return []
+  }
+
+  const dir = await readdir(componentPath)
+  const dirOnlyContainsComponentFile = []
+  for (const fileName of dir) {
+    if (componentObject.files.includes(fileName)) {
+      dirOnlyContainsComponentFile.push(fileName)
+    }
+  }
+
+  return dirOnlyContainsComponentFile
+}
+
 export async function changeExtension(_path: string, extension: string): Promise<string> {
   return path.join(path.dirname(_path), path.basename(_path, path.extname(_path)) + extension)
 }

From 4148b903e3b1bf46a298740c944736d12c24dd22 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 02:20:15 +0900
Subject: [PATCH 24/48] refactor(cli): simplify getComponentsInstalled

---
 packages/cli/src/helpers/path.ts | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/cli/src/helpers/path.ts b/packages/cli/src/helpers/path.ts
index a59fa0a..62aaa7b 100644
--- a/packages/cli/src/helpers/path.ts
+++ b/packages/cli/src/helpers/path.ts
@@ -6,19 +6,19 @@ import {RegistryComponent, ResolvedConfig} from '../const.js'
 
 export async function getComponentsInstalled(components: string[], config: ResolvedConfig) {
   const componentPath = path.join(process.cwd(), config.paths.components)
-  if (existsSync(componentPath)) {
-    const dir = await readdir(componentPath)
-    const dirOnlyContainsComponent = []
-    for (const fileName of dir) {
-      if (components.includes(fileName)) {
-        dirOnlyContainsComponent.push(fileName)
-      }
-    }
-
-    return dirOnlyContainsComponent
+  if (!existsSync(componentPath)) {
+    return []
   }
 
-  return []
+  const dir = await readdir(componentPath)
+  const dirOnlyContainsComponent = []
+  for (const fileName of dir) {
+    if (components.includes(fileName)) {
+      dirOnlyContainsComponent.push(fileName)
+    }
+  }
+
+  return dirOnlyContainsComponent
 }
 
 export async function getDirComponentRequiredFiles<T extends RegistryComponent & {type: 'dir'}>(

From 36da69240c54cfaa89ec7e9a94eea59686efee28 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 02:21:36 +0900
Subject: [PATCH 25/48] refactor(cli): rename getDirComponentRequiredFiles to
 getDirComponentInstalledFiles

---
 packages/cli/src/helpers/path.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/src/helpers/path.ts b/packages/cli/src/helpers/path.ts
index 62aaa7b..b943d00 100644
--- a/packages/cli/src/helpers/path.ts
+++ b/packages/cli/src/helpers/path.ts
@@ -21,7 +21,7 @@ export async function getComponentsInstalled(components: string[], config: Resol
   return dirOnlyContainsComponent
 }
 
-export async function getDirComponentRequiredFiles<T extends RegistryComponent & {type: 'dir'}>(
+export async function getDirComponentInstalledFiles<T extends RegistryComponent & {type: 'dir'}>(
   componentObject: T,
   config: ResolvedConfig,
 ) {

From 2d68a5051f2f9b25f35dd5fb00554d2ccc0d77ee Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 02:30:29 +0900
Subject: [PATCH 26/48] feat(cli): add ability to make dir component URL in
 getComponentURL

---
 packages/cli/src/helpers/registry.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/cli/src/helpers/registry.ts b/packages/cli/src/helpers/registry.ts
index ef46c29..9379a78 100644
--- a/packages/cli/src/helpers/registry.ts
+++ b/packages/cli/src/helpers/registry.ts
@@ -23,8 +23,17 @@ export async function getAvailableComponentNames(registry: Registry): Promise<st
   return Object.keys(registry.components)
 }
 
-export async function getComponentURL(registry: Registry, componentName: string): Promise<string> {
-  return registry.base + registry.paths.components.replace('{componentName}', registry.components[componentName].name)
+export async function getComponentURL(
+  registry: Registry,
+  componentName: string,
+  dirComponentFile?: string,
+): Promise<string> {
+  let base =
+    registry.base + registry.paths.components.replace('{componentName}', registry.components[componentName].name)
+  if (dirComponentFile) {
+    base += '/' + dirComponentFile
+  }
+  return base
 }
 
 export async function getComponentRealname(

From 66232b2b9abac044843a0530216ad3135ca8a71d Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 02:33:30 +0900
Subject: [PATCH 27/48] feat(cli): add command handles directory library &
 component installation

---
 packages/cli/src/commands/add.tsx | 98 +++++++++++++++++++++----------
 1 file changed, 67 insertions(+), 31 deletions(-)

diff --git a/packages/cli/src/commands/add.tsx b/packages/cli/src/commands/add.tsx
index 62a101f..62d0c89 100644
--- a/packages/cli/src/commands/add.tsx
+++ b/packages/cli/src/commands/add.tsx
@@ -2,15 +2,16 @@ import {Args, Command, Flags} from '@oclif/core'
 import {loadConfig, validateConfig} from '../helpers/config.js'
 import {existsSync} from 'node:fs'
 import {mkdir, writeFile} from 'node:fs/promises'
-import {join, dirname} from 'node:path'
+import {join} from 'node:path'
 import {getAvailableComponentNames, getComponentRealname, getComponentURL, getRegistry} from '../helpers/registry.js'
 import ora from 'ora'
 import React, {ComponentPropsWithoutRef} from 'react'
 import {render, Box} from 'ink'
 import {SearchBox} from '../components/SearchBox.js'
-import {getComponentsInstalled} from '../helpers/path.js'
+import {getComponentsInstalled, getDirComponentInstalledFiles} from '../helpers/path.js'
 import {Choice} from '../components/Choice.js'
 import {colorize} from '@oclif/core/ux'
+import {safeFetch} from '../helpers/safeFetcher.js'
 
 function Generator() {
   let complete: boolean = false
@@ -100,12 +101,12 @@ export default class Add extends Command {
 
     const resolvedConfig = await validateConfig((message: string) => this.log(message), await loadConfig(flags.config))
     const componentFolder = join(process.cwd(), resolvedConfig.paths.components)
-    const libFile = join(process.cwd(), resolvedConfig.paths.lib)
+    const libFolder = join(process.cwd(), resolvedConfig.paths.lib)
     if (!existsSync(componentFolder)) {
       await mkdir(componentFolder, {recursive: true})
     }
-    if (!existsSync(dirname(libFile))) {
-      await mkdir(dirname(libFile), {recursive: true})
+    if (!existsSync(libFolder)) {
+      await mkdir(libFolder, {recursive: true})
     }
 
     const loadRegistryOra = ora('Fetching registry...').start()
@@ -183,39 +184,74 @@ export default class Add extends Command {
     }
 
     const libFileOra = ora('Installing required library...').start()
-    if (!existsSync(libFile)) {
-      const libFileContentResponse = await fetch(registry.base + registry.paths.lib)
-      if (!libFileContentResponse.ok) {
-        libFileOra.fail(
-          `Error while fetching library content: ${libFileContentResponse.status} ${libFileContentResponse.statusText}`,
-        )
-        return
+    let successCount = 0
+    for await (const libFile of registry.lib) {
+      const filePath = join(libFolder, libFile)
+      if (!existsSync(filePath)) {
+        const libFileContentResponse = await safeFetch(registry.base + registry.paths.lib.replace('libName', libFile))
+        if (!libFileContentResponse.ok) {
+          libFileOra.fail(libFileContentResponse.message)
+          return
+        }
+        const libFileContent = await libFileContentResponse.response.text()
+        await writeFile(filePath, libFileContent)
+        successCount++
       }
-      const libFileContent = await libFileContentResponse.text()
-      await writeFile(libFile, libFileContent)
-      libFileOra.succeed('Library is successfully installed!')
+    }
+    if (successCount > 1) {
+      libFileOra.succeed('Successfully installed library files!')
     } else {
-      libFileOra.succeed('Library is already installed!')
+      libFileOra.succeed('Library files are already installed!')
     }
 
     const componentFileOra = ora(`Installing ${name} component...`).start()
-    const componentFile = join(componentFolder, registry.components[name].name)
-    if (existsSync(componentFile) && !force) {
-      componentFileOra.succeed(`Component is already installed! (${componentFile})`)
-    } else {
-      const componentFileContentResponse = await fetch(await getComponentURL(registry, name))
-      if (!componentFileContentResponse.ok) {
-        componentFileOra.fail(
-          `Error while fetching component file content: ${componentFileContentResponse.status} ${componentFileContentResponse.statusText}`,
+    const componentObject = registry.components[name]
+    if (componentObject.type === 'file') {
+      const componentFile = join(componentFolder, registry.components[name].name)
+      if (existsSync(componentFile) && !force) {
+        componentFileOra.succeed(`Component is already installed! (${componentFile})`)
+      } else {
+        const componentFileContentResponse = await safeFetch(await getComponentURL(registry, name))
+        if (!componentFileContentResponse.ok) {
+          componentFileOra.fail(componentFileContentResponse.message)
+          return
+        }
+        const componentFileContent = (await componentFileContentResponse.response.text()).replaceAll(
+          /import\s+{[^}]*}\s+from\s+"@pswui-lib"/g,
+          (match) => match.replace(/@pswui-lib/, resolvedConfig.import.lib),
         )
-        return
+        await writeFile(componentFile, componentFileContent)
+        componentFileOra.succeed('Component is successfully installed!')
+      }
+    } else if (componentObject.type === 'dir') {
+      const componentDir = join(componentFolder, componentObject.name)
+      if (!existsSync(componentDir)) {
+        await mkdir(componentDir, {recursive: true})
+      }
+      const installed = await getDirComponentInstalledFiles(componentObject, resolvedConfig)
+      if (installed.length === 0 && !force) {
+        componentFileOra.succeed(`Component is already installed! (${componentDir})`)
+      } else {
+        const files = componentObject.files.filter((filename) => !installed.includes(filename))
+        for await (const filename of files) {
+          const componentFile = join(componentDir, filename)
+          if (!existsSync(componentFile) || force) {
+            const componentFileContentResponse = await safeFetch(
+              await getComponentURL(registry, componentObject.name, filename),
+            )
+            if (!componentFileContentResponse.ok) {
+              componentFileOra.fail(componentFileContentResponse.message)
+              return
+            }
+            const componentFileContent = (await componentFileContentResponse.response.text()).replaceAll(
+              /import\s+{[^}]*}\s+from\s+"@pswui-lib"/g,
+              (match) => match.replace(/@pswui-lib/, resolvedConfig.import.lib),
+            )
+            await writeFile(componentFile, componentFileContent)
+          }
+        }
+        componentFileOra.succeed('Component is successfully installed!')
       }
-      const componentFileContent = (await componentFileContentResponse.text()).replaceAll(
-        /import\s+{[^}]*}\s+from\s+"@pswui-lib"/g,
-        (match) => match.replace(/@pswui-lib/, resolvedConfig.import.lib),
-      )
-      await writeFile(componentFile, componentFileContent)
-      componentFileOra.succeed('Component is successfully installed!')
     }
 
     this.log('Now you can import the component.')

From 272fc89a92f71e56af57623a3640eca8edfb7254 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 02:54:27 +0900
Subject: [PATCH 28/48] feat(cli): list command handles directory library

---
 packages/cli/src/commands/list.ts | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/cli/src/commands/list.ts b/packages/cli/src/commands/list.ts
index 308bd51..647baa6 100644
--- a/packages/cli/src/commands/list.ts
+++ b/packages/cli/src/commands/list.ts
@@ -1,6 +1,6 @@
 import {Command, Flags} from '@oclif/core'
 import ora from 'ora'
-import {asTree} from 'treeify'
+import treeify from 'treeify'
 
 import {loadConfig, validateConfig} from '../helpers/config.js'
 import {getComponentsInstalled} from '../helpers/path.js'
@@ -48,11 +48,20 @@ export default class List extends Command {
     )
     getInstalledSpinner.succeed(`Got ${installedNames.length} installed components.`)
 
-    let final: Record<string, {URL?: string; installed: 'no' | 'yes'}> = {}
+    let final: Record<string, {URL?: Record<string, string>; installed: 'no' | 'yes'}> = {}
     for await (const name of names) {
+      const componentObject = registry.components[name]
       const installed = installedNames.includes(await getComponentRealname(registry, name)) ? 'yes' : 'no'
       if (flags.url) {
-        const url = await getComponentURL(registry, name)
+        let url: Record<string, string> = {}
+
+        if (componentObject.type === 'file') {
+          url[name] = await getComponentURL(registry, name)
+        } else if (componentObject.type === 'dir') {
+          for await (const file of componentObject.files) {
+            url[file] = await getComponentURL(registry, name, file)
+          }
+        }
         final = {...final, [name]: {URL: url, installed}}
       } else {
         final = {...final, [name]: {installed}}
@@ -60,6 +69,6 @@ export default class List extends Command {
     }
 
     this.log('AVAILABLE COMPONENTS')
-    this.log(asTree(final, true, true))
+    this.log(treeify.asTree(final, true, true))
   }
 }

From d721aa290f48910b16ada79fa988845be4bf70c9 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 02:59:23 +0900
Subject: [PATCH 29/48] fix(cli): check installed check with required files

---
 packages/cli/src/commands/add.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/cli/src/commands/add.tsx b/packages/cli/src/commands/add.tsx
index 62d0c89..205254a 100644
--- a/packages/cli/src/commands/add.tsx
+++ b/packages/cli/src/commands/add.tsx
@@ -188,7 +188,7 @@ export default class Add extends Command {
     for await (const libFile of registry.lib) {
       const filePath = join(libFolder, libFile)
       if (!existsSync(filePath)) {
-        const libFileContentResponse = await safeFetch(registry.base + registry.paths.lib.replace('libName', libFile))
+        const libFileContentResponse = await safeFetch(registry.base + registry.paths.lib.replace('{libName}', libFile))
         if (!libFileContentResponse.ok) {
           libFileOra.fail(libFileContentResponse.message)
           return
@@ -229,10 +229,10 @@ export default class Add extends Command {
         await mkdir(componentDir, {recursive: true})
       }
       const installed = await getDirComponentInstalledFiles(componentObject, resolvedConfig)
-      if (installed.length === 0 && !force) {
+      const files = componentObject.files.filter((filename) => !installed.includes(filename))
+      if (files.length === 0 && !force) {
         componentFileOra.succeed(`Component is already installed! (${componentDir})`)
       } else {
-        const files = componentObject.files.filter((filename) => !installed.includes(filename))
         for await (const filename of files) {
           const componentFile = join(componentDir, filename)
           if (!existsSync(componentFile) || force) {

From 1902b9606a0b942fdcd9e9b003633a156ccb5c59 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:01:48 +0900
Subject: [PATCH 30/48] refactor(cli): rename files to requiredFiles of
 component

---
 packages/cli/src/commands/add.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/cli/src/commands/add.tsx b/packages/cli/src/commands/add.tsx
index 205254a..a8dba7e 100644
--- a/packages/cli/src/commands/add.tsx
+++ b/packages/cli/src/commands/add.tsx
@@ -229,11 +229,11 @@ export default class Add extends Command {
         await mkdir(componentDir, {recursive: true})
       }
       const installed = await getDirComponentInstalledFiles(componentObject, resolvedConfig)
-      const files = componentObject.files.filter((filename) => !installed.includes(filename))
-      if (files.length === 0 && !force) {
+      const requiredFiles = componentObject.files.filter((filename) => !installed.includes(filename))
+      if (requiredFiles.length === 0 && !force) {
         componentFileOra.succeed(`Component is already installed! (${componentDir})`)
       } else {
-        for await (const filename of files) {
+        for await (const filename of requiredFiles) {
           const componentFile = join(componentDir, filename)
           if (!existsSync(componentFile) || force) {
             const componentFileContentResponse = await safeFetch(

From bba1a80550a296d7f8e7ed0a0af7d29a5f6ef99d Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:12:37 +0900
Subject: [PATCH 31/48] feat(cli): add checkComponentInstalled taking
 RegistryComponent

---
 packages/cli/src/helpers/path.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/cli/src/helpers/path.ts b/packages/cli/src/helpers/path.ts
index b943d00..356e19a 100644
--- a/packages/cli/src/helpers/path.ts
+++ b/packages/cli/src/helpers/path.ts
@@ -41,6 +41,21 @@ export async function getDirComponentInstalledFiles<T extends RegistryComponent
   return dirOnlyContainsComponentFile
 }
 
+export async function checkComponentInstalled(component: RegistryComponent, config: ResolvedConfig): Promise<boolean> {
+  const componentDirRoot = path.join(process.cwd(), config.paths.components)
+  if (!existsSync(componentDirRoot)) return false
+
+  if (component.type === 'file') {
+    const dir = await readdir(componentDirRoot)
+    return dir.includes(component.name)
+  } else {
+    const componentDir = path.join(componentDirRoot, component.name)
+    if (!existsSync(componentDir)) return false
+    const dir = await readdir(componentDir)
+    return component.files.filter((filename) => !dir.includes(filename)).length === 0
+  }
+}
+
 export async function changeExtension(_path: string, extension: string): Promise<string> {
   return path.join(path.dirname(_path), path.basename(_path, path.extname(_path)) + extension)
 }

From 5a41b84c9a3eb2882d64e7fdabdb33ff1e71bf91 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:13:04 +0900
Subject: [PATCH 32/48] refactor(cli): remove getComponentsInstalled & make
 getDirComponentRequiredFiles

---
 packages/cli/src/helpers/path.ts | 31 ++++---------------------------
 1 file changed, 4 insertions(+), 27 deletions(-)

diff --git a/packages/cli/src/helpers/path.ts b/packages/cli/src/helpers/path.ts
index 356e19a..549c707 100644
--- a/packages/cli/src/helpers/path.ts
+++ b/packages/cli/src/helpers/path.ts
@@ -4,41 +4,18 @@ import path from 'node:path'
 
 import {RegistryComponent, ResolvedConfig} from '../const.js'
 
-export async function getComponentsInstalled(components: string[], config: ResolvedConfig) {
-  const componentPath = path.join(process.cwd(), config.paths.components)
-  if (!existsSync(componentPath)) {
-    return []
-  }
-
-  const dir = await readdir(componentPath)
-  const dirOnlyContainsComponent = []
-  for (const fileName of dir) {
-    if (components.includes(fileName)) {
-      dirOnlyContainsComponent.push(fileName)
-    }
-  }
-
-  return dirOnlyContainsComponent
-}
-
-export async function getDirComponentInstalledFiles<T extends RegistryComponent & {type: 'dir'}>(
+export async function getDirComponentRequiredFiles<T extends RegistryComponent & {type: 'dir'}>(
   componentObject: T,
   config: ResolvedConfig,
 ) {
   const componentPath = path.join(process.cwd(), config.paths.components, componentObject.name)
   if (!existsSync(componentPath)) {
-    return []
+    return componentObject.files
   }
 
-  const dir = await readdir(componentPath)
-  const dirOnlyContainsComponentFile = []
-  for (const fileName of dir) {
-    if (componentObject.files.includes(fileName)) {
-      dirOnlyContainsComponentFile.push(fileName)
-    }
-  }
+  const dir = await readdir(componentPath):w
 
-  return dirOnlyContainsComponentFile
+  return componentObject.files.map((filename) => !dir.includes(filename))
 }
 
 export async function checkComponentInstalled(component: RegistryComponent, config: ResolvedConfig): Promise<boolean> {

From 9f28779745da6b86f0163cc6944280cf47b1d0e4 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:13:22 +0900
Subject: [PATCH 33/48] fix(cli): remove typo

---
 packages/cli/src/helpers/path.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/src/helpers/path.ts b/packages/cli/src/helpers/path.ts
index 549c707..e435560 100644
--- a/packages/cli/src/helpers/path.ts
+++ b/packages/cli/src/helpers/path.ts
@@ -13,7 +13,7 @@ export async function getDirComponentRequiredFiles<T extends RegistryComponent &
     return componentObject.files
   }
 
-  const dir = await readdir(componentPath):w
+  const dir = await readdir(componentPath)
 
   return componentObject.files.map((filename) => !dir.includes(filename))
 }

From 6f637e51bac33c24ce53c87008a3f19c420b7126 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:21:07 +0900
Subject: [PATCH 34/48] fix(cli): use filter to return string only in
 getDirComponentRequiredFiles

---
 packages/cli/src/helpers/path.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/src/helpers/path.ts b/packages/cli/src/helpers/path.ts
index e435560..8364270 100644
--- a/packages/cli/src/helpers/path.ts
+++ b/packages/cli/src/helpers/path.ts
@@ -15,7 +15,7 @@ export async function getDirComponentRequiredFiles<T extends RegistryComponent &
 
   const dir = await readdir(componentPath)
 
-  return componentObject.files.map((filename) => !dir.includes(filename))
+  return componentObject.files.filter((filename) => !dir.includes(filename))
 }
 
 export async function checkComponentInstalled(component: RegistryComponent, config: ResolvedConfig): Promise<boolean> {

From 217410a50723b3d6a267a44d7256559457c81030 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:29:18 +0900
Subject: [PATCH 35/48] fix(cli): use checkComponentInstalled and
 getDirComponentRequiredFiles

---
 packages/cli/src/commands/add.tsx | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/cli/src/commands/add.tsx b/packages/cli/src/commands/add.tsx
index a8dba7e..6b146d0 100644
--- a/packages/cli/src/commands/add.tsx
+++ b/packages/cli/src/commands/add.tsx
@@ -3,12 +3,12 @@ import {loadConfig, validateConfig} from '../helpers/config.js'
 import {existsSync} from 'node:fs'
 import {mkdir, writeFile} from 'node:fs/promises'
 import {join} from 'node:path'
-import {getAvailableComponentNames, getComponentRealname, getComponentURL, getRegistry} from '../helpers/registry.js'
+import {getAvailableComponentNames, getComponentURL, getRegistry} from '../helpers/registry.js'
 import ora from 'ora'
 import React, {ComponentPropsWithoutRef} from 'react'
 import {render, Box} from 'ink'
 import {SearchBox} from '../components/SearchBox.js'
-import {getComponentsInstalled, getDirComponentInstalledFiles} from '../helpers/path.js'
+import {getDirComponentRequiredFiles, checkComponentInstalled} from '../helpers/path.js'
 import {Choice} from '../components/Choice.js'
 import {colorize} from '@oclif/core/ux'
 import {safeFetch} from '../helpers/safeFetcher.js'
@@ -121,15 +121,15 @@ export default class Add extends Command {
     const registry = unsafeRegistry.registry
     const componentNames = await getAvailableComponentNames(registry)
     loadRegistryOra.succeed(`Successfully fetched registry! (${componentNames.length} components)`)
-    const componentRealNames = await Promise.all(
-      componentNames.map(async (name) => await getComponentRealname(registry, name)),
-    )
-    const installed = await getComponentsInstalled(componentRealNames, resolvedConfig)
-    const searchBoxComponent = componentNames.map((name, index) => ({
-      displayName: installed.includes(componentRealNames[index]) ? `${name} (installed)` : name,
-      key: name,
-      installed: installed.includes(componentRealNames[index]),
-    }))
+    const searchBoxComponent: {displayName: string; key: string; installed: boolean}[] = []
+    for await (const name of componentNames) {
+      const installed = await checkComponentInstalled(registry.components[name], resolvedConfig)
+      searchBoxComponent.push({
+        displayName: installed ? `${name} (installed)` : name,
+        key: name,
+        installed,
+      })
+    }
 
     let name: string | undefined = args.name?.toLowerCase?.()
     let requireForce: boolean =
@@ -228,8 +228,7 @@ export default class Add extends Command {
       if (!existsSync(componentDir)) {
         await mkdir(componentDir, {recursive: true})
       }
-      const installed = await getDirComponentInstalledFiles(componentObject, resolvedConfig)
-      const requiredFiles = componentObject.files.filter((filename) => !installed.includes(filename))
+      const requiredFiles = await getDirComponentRequiredFiles(componentObject, resolvedConfig)
       if (requiredFiles.length === 0 && !force) {
         componentFileOra.succeed(`Component is already installed! (${componentDir})`)
       } else {

From 9b0b37ec01f9bc26136dfd9353979a8592b40b28 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:32:07 +0900
Subject: [PATCH 36/48] refactor(cli): remove meaningless utility functions

---
 packages/cli/src/helpers/registry.ts | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/cli/src/helpers/registry.ts b/packages/cli/src/helpers/registry.ts
index 9379a78..c53fb8b 100644
--- a/packages/cli/src/helpers/registry.ts
+++ b/packages/cli/src/helpers/registry.ts
@@ -19,10 +19,6 @@ export async function getRegistry(
   return registryResponse
 }
 
-export async function getAvailableComponentNames(registry: Registry): Promise<string[]> {
-  return Object.keys(registry.components)
-}
-
 export async function getComponentURL(
   registry: Registry,
   componentName: string,
@@ -35,10 +31,3 @@ export async function getComponentURL(
   }
   return base
 }
-
-export async function getComponentRealname(
-  registry: Registry,
-  componentName: keyof Registry['components'],
-): Promise<string> {
-  return registry.components[componentName].name
-}

From 6d3f29a6141809f9cf265a74ce5b892dcf5d7a72 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:33:26 +0900
Subject: [PATCH 37/48] refactor(cli): make getComponentURL handle only file
 component

---
 packages/cli/src/helpers/registry.ts | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/cli/src/helpers/registry.ts b/packages/cli/src/helpers/registry.ts
index c53fb8b..a048b6b 100644
--- a/packages/cli/src/helpers/registry.ts
+++ b/packages/cli/src/helpers/registry.ts
@@ -1,4 +1,4 @@
-import {REGISTRY_URL, Registry} from '../const.js'
+import {Registry, REGISTRY_URL, RegistryComponent} from '../const.js'
 import {safeFetch} from './safeFetcher.js'
 
 export async function getRegistry(
@@ -19,15 +19,6 @@ export async function getRegistry(
   return registryResponse
 }
 
-export async function getComponentURL(
-  registry: Registry,
-  componentName: string,
-  dirComponentFile?: string,
-): Promise<string> {
-  let base =
-    registry.base + registry.paths.components.replace('{componentName}', registry.components[componentName].name)
-  if (dirComponentFile) {
-    base += '/' + dirComponentFile
-  }
-  return base
+export async function getComponentURL(registry: Registry, component: RegistryComponent): Promise<string> {
+  return registry.base + registry.paths.components.replace('{componentName}', component.name)
 }

From 76e2866bc9cf5b31f717b92dea0b50e17b2025a3 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:35:08 +0900
Subject: [PATCH 38/48] feat(cli): add getDirComponentURL for directory
 component handling

---
 packages/cli/src/helpers/registry.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/cli/src/helpers/registry.ts b/packages/cli/src/helpers/registry.ts
index a048b6b..eaeccef 100644
--- a/packages/cli/src/helpers/registry.ts
+++ b/packages/cli/src/helpers/registry.ts
@@ -19,6 +19,18 @@ export async function getRegistry(
   return registryResponse
 }
 
-export async function getComponentURL(registry: Registry, component: RegistryComponent): Promise<string> {
+export async function getComponentURL(
+  registry: Registry,
+  component: RegistryComponent & {type: 'file'},
+): Promise<string> {
   return registry.base + registry.paths.components.replace('{componentName}', component.name)
 }
+
+export async function getDirComponentURL(
+  registry: Registry,
+  component: RegistryComponent & {type: 'dir'},
+): Promise<string[]> {
+  const base = registry.base + registry.paths.components.replace('{componentName}', component.name)
+
+  return component.files.map((filename) => base + '/' + filename)
+}

From e9c7281c33929a96f257c4fe7baca4b64d5d1b91 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:37:28 +0900
Subject: [PATCH 39/48] feat(cli): add overridable parameter to override
 component.files in getDirComponentURL

---
 packages/cli/src/helpers/registry.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/cli/src/helpers/registry.ts b/packages/cli/src/helpers/registry.ts
index eaeccef..abdb475 100644
--- a/packages/cli/src/helpers/registry.ts
+++ b/packages/cli/src/helpers/registry.ts
@@ -29,8 +29,9 @@ export async function getComponentURL(
 export async function getDirComponentURL(
   registry: Registry,
   component: RegistryComponent & {type: 'dir'},
+  files?: string[],
 ): Promise<string[]> {
   const base = registry.base + registry.paths.components.replace('{componentName}', component.name)
 
-  return component.files.map((filename) => base + '/' + filename)
+  return (files ?? component.files).map((filename) => base + '/' + filename)
 }

From ecaba351a31b7a94f0da67d19b253457e8419f83 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:39:06 +0900
Subject: [PATCH 40/48] feat(cli): make getDirComponentURL return each
 filenames

---
 packages/cli/src/helpers/registry.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/cli/src/helpers/registry.ts b/packages/cli/src/helpers/registry.ts
index abdb475..5ce8545 100644
--- a/packages/cli/src/helpers/registry.ts
+++ b/packages/cli/src/helpers/registry.ts
@@ -30,8 +30,8 @@ export async function getDirComponentURL(
   registry: Registry,
   component: RegistryComponent & {type: 'dir'},
   files?: string[],
-): Promise<string[]> {
+): Promise<[string, string][]> {
   const base = registry.base + registry.paths.components.replace('{componentName}', component.name)
 
-  return (files ?? component.files).map((filename) => base + '/' + filename)
+  return (files ?? component.files).map((filename) => [filename, base + '/' + filename])
 }

From ab95442de11fadad88ed27be74668225de29afde Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:40:52 +0900
Subject: [PATCH 41/48] fix(cli): replace old getAvailableComponentNames to
 Object.keys

---
 packages/cli/src/commands/add.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/cli/src/commands/add.tsx b/packages/cli/src/commands/add.tsx
index 6b146d0..4e9ea89 100644
--- a/packages/cli/src/commands/add.tsx
+++ b/packages/cli/src/commands/add.tsx
@@ -3,7 +3,7 @@ import {loadConfig, validateConfig} from '../helpers/config.js'
 import {existsSync} from 'node:fs'
 import {mkdir, writeFile} from 'node:fs/promises'
 import {join} from 'node:path'
-import {getAvailableComponentNames, getComponentURL, getRegistry} from '../helpers/registry.js'
+import {getComponentURL, getDirComponentURL, getRegistry} from '../helpers/registry.js'
 import ora from 'ora'
 import React, {ComponentPropsWithoutRef} from 'react'
 import {render, Box} from 'ink'
@@ -119,7 +119,7 @@ export default class Add extends Command {
       return
     }
     const registry = unsafeRegistry.registry
-    const componentNames = await getAvailableComponentNames(registry)
+    const componentNames = Object.keys(registry.components)
     loadRegistryOra.succeed(`Successfully fetched registry! (${componentNames.length} components)`)
     const searchBoxComponent: {displayName: string; key: string; installed: boolean}[] = []
     for await (const name of componentNames) {

From 17ea42fe488e91c2e7755e05e854778863de08b0 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:41:13 +0900
Subject: [PATCH 42/48] fix(cli): use getDirComponentURL

---
 packages/cli/src/commands/add.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/cli/src/commands/add.tsx b/packages/cli/src/commands/add.tsx
index 4e9ea89..13b503b 100644
--- a/packages/cli/src/commands/add.tsx
+++ b/packages/cli/src/commands/add.tsx
@@ -211,7 +211,7 @@ export default class Add extends Command {
       if (existsSync(componentFile) && !force) {
         componentFileOra.succeed(`Component is already installed! (${componentFile})`)
       } else {
-        const componentFileContentResponse = await safeFetch(await getComponentURL(registry, name))
+        const componentFileContentResponse = await safeFetch(await getComponentURL(registry, componentObject))
         if (!componentFileContentResponse.ok) {
           componentFileOra.fail(componentFileContentResponse.message)
           return
@@ -232,12 +232,11 @@ export default class Add extends Command {
       if (requiredFiles.length === 0 && !force) {
         componentFileOra.succeed(`Component is already installed! (${componentDir})`)
       } else {
-        for await (const filename of requiredFiles) {
+        const requiredFilesURLs = await getDirComponentURL(registry, componentObject, requiredFiles)
+        for await (const [filename, url] of requiredFilesURLs) {
           const componentFile = join(componentDir, filename)
           if (!existsSync(componentFile) || force) {
-            const componentFileContentResponse = await safeFetch(
-              await getComponentURL(registry, componentObject.name, filename),
-            )
+            const componentFileContentResponse = await safeFetch(url)
             if (!componentFileContentResponse.ok) {
               componentFileOra.fail(componentFileContentResponse.message)
               return

From 78fe5d9b0fb6d03d066bcab8958eb6e6f91bf280 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:42:37 +0900
Subject: [PATCH 43/48] fix(cli): replace old getAvailableComponentNames to
 Object.keys

---
 packages/cli/src/commands/search.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/cli/src/commands/search.tsx b/packages/cli/src/commands/search.tsx
index 141b87c..e5c708b 100644
--- a/packages/cli/src/commands/search.tsx
+++ b/packages/cli/src/commands/search.tsx
@@ -1,7 +1,7 @@
 import {Command, Args, Flags} from '@oclif/core'
 import {render} from 'ink'
 import {SearchBox} from '../components/SearchBox.js'
-import {getAvailableComponentNames, getRegistry} from '../helpers/registry.js'
+import {getRegistry} from '../helpers/registry.js'
 import React from 'react'
 
 export default class Search extends Command {
@@ -28,7 +28,7 @@ export default class Search extends Command {
       this.error(registryResult.message)
     }
     const registry = registryResult.registry
-    const componentNames = await getAvailableComponentNames(registry)
+    const componentNames = Object.keys(registry.components)
 
     await render(
       <SearchBox

From ea9b70bcc605064524d473cdbf71807e4e595273 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:43:23 +0900
Subject: [PATCH 44/48] fix(cli): replace old getAvailableComponentNames to
 Object.keys

---
 packages/cli/src/commands/list.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/cli/src/commands/list.ts b/packages/cli/src/commands/list.ts
index 647baa6..3573cd5 100644
--- a/packages/cli/src/commands/list.ts
+++ b/packages/cli/src/commands/list.ts
@@ -4,7 +4,7 @@ import treeify from 'treeify'
 
 import {loadConfig, validateConfig} from '../helpers/config.js'
 import {getComponentsInstalled} from '../helpers/path.js'
-import {getAvailableComponentNames, getComponentRealname, getComponentURL, getRegistry} from '../helpers/registry.js'
+import {getComponentRealname, getComponentURL, getRegistry} from '../helpers/registry.js'
 
 export default class List extends Command {
   static override description = 'Prints all available components in registry and components installed in this project.'
@@ -37,9 +37,9 @@ export default class List extends Command {
     }
 
     const {registry} = unsafeRegistry
-    registrySpinner.succeed(`Fetched ${Object.keys(registry.components).length} components.`)
+    const names = Object.keys(registry.components)
 
-    const names = await getAvailableComponentNames(registry)
+    registrySpinner.succeed(`Fetched ${names.length} components.`)
 
     getInstalledSpinner.start()
     const installedNames = await getComponentsInstalled(

From 024ae5073885132c6132707b04ef1fc02ae3b68d Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:48:26 +0900
Subject: [PATCH 45/48] fix(cli): replace old things to new utilities

---
 packages/cli/src/commands/list.ts | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/packages/cli/src/commands/list.ts b/packages/cli/src/commands/list.ts
index 3573cd5..33028a1 100644
--- a/packages/cli/src/commands/list.ts
+++ b/packages/cli/src/commands/list.ts
@@ -3,8 +3,8 @@ import ora from 'ora'
 import treeify from 'treeify'
 
 import {loadConfig, validateConfig} from '../helpers/config.js'
-import {getComponentsInstalled} from '../helpers/path.js'
-import {getComponentRealname, getComponentURL, getRegistry} from '../helpers/registry.js'
+import {checkComponentInstalled} from '../helpers/path.js'
+import {getComponentURL, getDirComponentURL, getRegistry} from '../helpers/registry.js'
 
 export default class List extends Command {
   static override description = 'Prints all available components in registry and components installed in this project.'
@@ -21,7 +21,6 @@ export default class List extends Command {
     const {flags} = await this.parse(List)
 
     const registrySpinner = ora('Fetching registry...')
-    const getInstalledSpinner = ora('Getting installed components...')
 
     const loadedConfig = await validateConfig((message: string) => this.log(message), await loadConfig(flags.config))
 
@@ -41,26 +40,17 @@ export default class List extends Command {
 
     registrySpinner.succeed(`Fetched ${names.length} components.`)
 
-    getInstalledSpinner.start()
-    const installedNames = await getComponentsInstalled(
-      await Promise.all(names.map(async (name) => getComponentRealname(registry, name))),
-      loadedConfig,
-    )
-    getInstalledSpinner.succeed(`Got ${installedNames.length} installed components.`)
-
     let final: Record<string, {URL?: Record<string, string>; installed: 'no' | 'yes'}> = {}
     for await (const name of names) {
       const componentObject = registry.components[name]
-      const installed = installedNames.includes(await getComponentRealname(registry, name)) ? 'yes' : 'no'
+      const installed = (await checkComponentInstalled(componentObject, loadedConfig)) ? 'yes' : 'no'
       if (flags.url) {
         let url: Record<string, string> = {}
 
         if (componentObject.type === 'file') {
-          url[name] = await getComponentURL(registry, name)
+          url[name] = await getComponentURL(registry, componentObject)
         } else if (componentObject.type === 'dir') {
-          for await (const file of componentObject.files) {
-            url[file] = await getComponentURL(registry, name, file)
-          }
+          url = Object.fromEntries(await getDirComponentURL(registry, componentObject))
         }
         final = {...final, [name]: {URL: url, installed}}
       } else {

From 02b2c1ac2d86faf68e50fc4f3f37adb300d3f5f0 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:51:23 +0900
Subject: [PATCH 46/48] docs(cli): update docs

---
 packages/cli/README.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/cli/README.md b/packages/cli/README.md
index c50c023..b86cee1 100644
--- a/packages/cli/README.md
+++ b/packages/cli/README.md
@@ -20,7 +20,7 @@ $ npm install -g @psw-ui/cli
 $ pswui COMMAND
 running command...
 $ pswui (--version)
-@psw-ui/cli/0.2.0 linux-x64 node-v20.13.1
+@psw-ui/cli/0.5.0 linux-x64 node-v20.13.1
 $ pswui --help [COMMAND]
 USAGE
   $ pswui COMMAND
@@ -49,7 +49,7 @@ FLAGS
   -c, --components=<value>  place for installation of components
   -f, --force               override the existing file
   -p, --config=<value>      path to config
-  -r, --registry=<value>    override registry ur
+  -r, --branch=<value>      use other branch instead of main
   -s, --shared=<value>      place for installation of shared.ts
 
 DESCRIPTION
@@ -59,7 +59,7 @@ EXAMPLES
   $ pswui add
 ```
 
-_See code: [packages/cli/src/commands/add.tsx](https://github.com/pswui/ui/blob/cli@0.4.1/packages/cli/src/commands/add.tsx)_
+_See code: [packages/cli/src/commands/add.tsx](https://github.com/pswui/ui/blob/cli@0.5.0/packages/cli/src/commands/add.tsx)_
 
 ## `pswui help [COMMAND]`
 
@@ -91,7 +91,7 @@ USAGE
 
 FLAGS
   -p, --config=<value>  path to config
-  -r, --registry=<value>  override registry url
+  -r, --branch=<value>  use other branch instead of main
   -u, --url             include component file URL
 
 DESCRIPTION
@@ -101,7 +101,7 @@ EXAMPLES
   $ pswui list
 ```
 
-_See code: [packages/cli/src/commands/list.ts](https://github.com/pswui/ui/blob/cli@0.4.1/packages/cli/src/commands/list.ts)_
+_See code: [packages/cli/src/commands/list.ts](https://github.com/pswui/ui/blob/cli@0.5.0/packages/cli/src/commands/list.ts)_
 
 ## `pswui search`
 
@@ -117,7 +117,7 @@ ARGUMENTS
   QUERY  search query
 
 FLAGS
-  -r, --registry=<value>  override registry url
+  -r, --branch=<value>  use other branch instead of main
 
 DESCRIPTION
   Search components.
@@ -126,5 +126,5 @@ EXAMPLES
   $ pswui search
 ```
 
-_See code: [packages/cli/src/commands/search.tsx](https://github.com/pswui/ui/blob/cli@0.4.1/packages/cli/src/commands/search.tsx)_
+_See code: [packages/cli/src/commands/search.tsx](https://github.com/pswui/ui/blob/cli@0.5.0/packages/cli/src/commands/search.tsx)_
 <!-- commandsstop -->

From 7f2628eedcefb09cd8bd3357c86db9b6c34f831f Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 03:51:50 +0900
Subject: [PATCH 47/48] chore(cli): minor version bump

---
 packages/cli/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/package.json b/packages/cli/package.json
index d11348e..2db622c 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@psw-ui/cli",
   "description": "CLI for PSW/UI",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "author": "p-sw",
   "bin": {
     "pswui": "./bin/run.js"

From bfb044fd43ee6dbc6faf8b22047d486ae61d2dd0 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 15 Jun 2024 04:00:36 +0900
Subject: [PATCH 48/48] fix(cli): eslint

---
 packages/cli/.eslintrc.json                          |  3 ++-
 packages/cli/src/commands/add.tsx                    |  2 +-
 packages/cli/src/commands/list.ts                    |  1 +
 packages/cli/src/const.ts                            | 10 +++++-----
 packages/cli/src/helpers/path.ts                     | 12 ++++++------
 packages/cli/src/helpers/registry.ts                 | 10 +++++-----
 .../src/helpers/{safeFetcher.ts => safe-fetcher.ts}  |  4 ++--
 7 files changed, 22 insertions(+), 20 deletions(-)
 rename packages/cli/src/helpers/{safeFetcher.ts => safe-fetcher.ts} (78%)

diff --git a/packages/cli/.eslintrc.json b/packages/cli/.eslintrc.json
index a861f56..2ae35f3 100644
--- a/packages/cli/.eslintrc.json
+++ b/packages/cli/.eslintrc.json
@@ -43,7 +43,8 @@
     "@typescript-eslint/no-useless-constructor": "error",
     "@typescript-eslint/no-var-requires": "off",
     "import/no-unresolved": "error",
-    "import/default": "warn",
+    "import/default": "off",
+    "import/no-named-as-default-member": "off",
     "n/no-missing-import": "off",
     "n/no-unsupported-features/es-syntax": "off",
     "no-unused-expressions": "off",
diff --git a/packages/cli/src/commands/add.tsx b/packages/cli/src/commands/add.tsx
index 13b503b..176bdfd 100644
--- a/packages/cli/src/commands/add.tsx
+++ b/packages/cli/src/commands/add.tsx
@@ -11,7 +11,7 @@ import {SearchBox} from '../components/SearchBox.js'
 import {getDirComponentRequiredFiles, checkComponentInstalled} from '../helpers/path.js'
 import {Choice} from '../components/Choice.js'
 import {colorize} from '@oclif/core/ux'
-import {safeFetch} from '../helpers/safeFetcher.js'
+import {safeFetch} from '../helpers/safe-fetcher.js'
 
 function Generator() {
   let complete: boolean = false
diff --git a/packages/cli/src/commands/list.ts b/packages/cli/src/commands/list.ts
index 33028a1..6c1947b 100644
--- a/packages/cli/src/commands/list.ts
+++ b/packages/cli/src/commands/list.ts
@@ -52,6 +52,7 @@ export default class List extends Command {
         } else if (componentObject.type === 'dir') {
           url = Object.fromEntries(await getDirComponentURL(registry, componentObject))
         }
+
         final = {...final, [name]: {URL: url, installed}}
       } else {
         final = {...final, [name]: {installed}}
diff --git a/packages/cli/src/const.ts b/packages/cli/src/const.ts
index 5a66999..4b2ef53 100644
--- a/packages/cli/src/const.ts
+++ b/packages/cli/src/const.ts
@@ -1,27 +1,27 @@
 import {z} from 'zod'
 
-export const REGISTRY_URL = (branch: string) => `https://raw.githubusercontent.com/pswui/ui/${branch}/registry.json`
+export const registryURL = (branch: string) => `https://raw.githubusercontent.com/pswui/ui/${branch}/registry.json`
 export const CONFIG_DEFAULT_PATH = 'pswui.config.js'
 
 export type RegistryComponent =
   | {
-      type: 'file'
+      files: string[]
       name: string
+      type: 'dir'
     }
   | {
-      type: 'dir'
       name: string
-      files: string[]
+      type: 'file'
     }
 
 export interface Registry {
   base: string
   components: Record<string, RegistryComponent>
+  lib: string[]
   paths: {
     components: string
     lib: string
   }
-  lib: string[]
 }
 
 export interface Config {
diff --git a/packages/cli/src/helpers/path.ts b/packages/cli/src/helpers/path.ts
index 8364270..f68699e 100644
--- a/packages/cli/src/helpers/path.ts
+++ b/packages/cli/src/helpers/path.ts
@@ -4,7 +4,7 @@ import path from 'node:path'
 
 import {RegistryComponent, ResolvedConfig} from '../const.js'
 
-export async function getDirComponentRequiredFiles<T extends RegistryComponent & {type: 'dir'}>(
+export async function getDirComponentRequiredFiles<T extends {type: 'dir'} & RegistryComponent>(
   componentObject: T,
   config: ResolvedConfig,
 ) {
@@ -25,12 +25,12 @@ export async function checkComponentInstalled(component: RegistryComponent, conf
   if (component.type === 'file') {
     const dir = await readdir(componentDirRoot)
     return dir.includes(component.name)
-  } else {
-    const componentDir = path.join(componentDirRoot, component.name)
-    if (!existsSync(componentDir)) return false
-    const dir = await readdir(componentDir)
-    return component.files.filter((filename) => !dir.includes(filename)).length === 0
   }
+
+  const componentDir = path.join(componentDirRoot, component.name)
+  if (!existsSync(componentDir)) return false
+  const dir = await readdir(componentDir)
+  return component.files.filter((filename) => !dir.includes(filename)).length === 0
 }
 
 export async function changeExtension(_path: string, extension: string): Promise<string> {
diff --git a/packages/cli/src/helpers/registry.ts b/packages/cli/src/helpers/registry.ts
index 5ce8545..97c0e69 100644
--- a/packages/cli/src/helpers/registry.ts
+++ b/packages/cli/src/helpers/registry.ts
@@ -1,10 +1,10 @@
-import {Registry, REGISTRY_URL, RegistryComponent} from '../const.js'
-import {safeFetch} from './safeFetcher.js'
+import {Registry, RegistryComponent, registryURL} from '../const.js'
+import {safeFetch} from './safe-fetcher.js'
 
 export async function getRegistry(
   branch?: string,
 ): Promise<{message: string; ok: false} | {ok: true; registry: Registry}> {
-  const registryResponse = await safeFetch(REGISTRY_URL(branch ?? 'main'))
+  const registryResponse = await safeFetch(registryURL(branch ?? 'main'))
 
   if (registryResponse.ok) {
     const registryJson = (await registryResponse.response.json()) as Registry
@@ -21,14 +21,14 @@ export async function getRegistry(
 
 export async function getComponentURL(
   registry: Registry,
-  component: RegistryComponent & {type: 'file'},
+  component: {type: 'file'} & RegistryComponent,
 ): Promise<string> {
   return registry.base + registry.paths.components.replace('{componentName}', component.name)
 }
 
 export async function getDirComponentURL(
   registry: Registry,
-  component: RegistryComponent & {type: 'dir'},
+  component: {type: 'dir'} & RegistryComponent,
   files?: string[],
 ): Promise<[string, string][]> {
   const base = registry.base + registry.paths.components.replace('{componentName}', component.name)
diff --git a/packages/cli/src/helpers/safeFetcher.ts b/packages/cli/src/helpers/safe-fetcher.ts
similarity index 78%
rename from packages/cli/src/helpers/safeFetcher.ts
rename to packages/cli/src/helpers/safe-fetcher.ts
index c9ed4bd..271e39b 100644
--- a/packages/cli/src/helpers/safeFetcher.ts
+++ b/packages/cli/src/helpers/safe-fetcher.ts
@@ -2,7 +2,7 @@ import fetch, {Response} from 'node-fetch'
 
 export async function safeFetch(
   url: string,
-): Promise<{ok: true; response: Response} | {ok: false; message: string; response: Response}> {
+): Promise<{message: string; ok: false; response: Response} | {ok: true; response: Response}> {
   const response = await fetch(url)
   if (response.ok) {
     return {
@@ -12,8 +12,8 @@ export async function safeFetch(
   }
 
   return {
-    ok: false,
     message: `Error while fetching from ${response.url}: ${response.status} ${response.statusText}`,
+    ok: false,
     response,
   }
 }