atomsystem 0.1.17 → 0.1.18

package/app/templates/Tab/Tab.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useRef, useState } from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+
+const Tab = ({
+  tabs,
+  tabClass,
+  tabNavItemClass,
+  tabNavItemActiveClass,
+  tabContents,
+  tabContentClass,
+  tabContentItem,
+  expectionValue,
+  expectionLayout,
+}: {
+  tabs: Array<{ id: string; target: string[]; tabItem: React.ReactNode }>;
+  tabClass?: string;
+  tabNavItemClass?: string;
+  tabNavItemActiveClass?: string;
+  tabContents: Array<{ id: string; tag: string; content: React.ReactNode }>;
+  tabContentClass?: string;
+  tabContentItem?: string;
+  expectionValue?: string;
+  expectionLayout?: string;
+}) => {
+  const [activeContent, setActiveContent] = useState(tabs[0].target);
+  const [activeTab, setActiveTab] = useState(tabs[0].id);
+  const tabContentRef = useRef<HTMLDivElement>(null);
+
+  const handleTabActive = (target: string[], id: string) => {
+    setActiveContent(target);
+    setActiveTab(id);
+  };
+
+  // 👇 activeContent가 변경된 이후에 실행
+  useGSAP(() => {
+    if (tabContentRef.current) {
+      gsap.fromTo(
+        tabContentRef.current.children,
+        { y: 50, opacity: 0 },
+        {
+          y: 0,
+          opacity: 1,
+          stagger: 0.1,
+          duration: 0.6,
+          ease: "power4.out",
+        }
+      );
+    }
+  }, [activeContent]);
+
+  return (
+    <div className="flex flex-col">
+      <div className={tabClass}>
+        {tabs.map((tab) => {
+          return (
+            <button
+              key={tab.id}
+              id={tab.id}
+              onClick={() => handleTabActive(tab.target, tab.id)}
+              className={`cursor-pointer ${tabNavItemClass} ${
+                activeTab == tab.id
+                  ? `text-primary ${tabNavItemActiveClass}`
+                  : ""
+              }`}
+            >
+              {tab.tabItem}
+            </button>
+          );
+        })}
+      </div>
+      <div ref={tabContentRef} className={tabContentClass}>
+        {tabContents.map((tabContent) => {
+          return activeContent.includes(tabContent.tag) ? (
+            <div
+              key={tabContent.id}
+              id={tabContent.tag}
+              className={`w-full sm:w-auto ${tabContentItem} ${
+                activeTab == expectionValue ? expectionLayout : null
+              }`}
+            >
+              {tabContent.content}
+            </div>
+          ) : null;
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Tab;

package/app/templates/Theme/Theme.tsx

@@ -8,22 +8,22 @@ export const ThemeSelector = ({
 }: {
   type: "all" | "theme" | "input";
 }) => {
-  const themes = ["standard", "dark"];
+  const themes = ["light", "dark"];
   const [selectedTheme, setSelectedTheme] = useState<string | null>(null);
-  const inputThemes = ["inputStandard", "inputCircle"];
-  const [selectedInputTheme, setSelectedInputTheme] = useState<string | null>(
-    null
-  );
+  // const inputThemes = ["inputStandard", "inputCircle"];
+  // const [selectedInputTheme, setSelectedInputTheme] = useState<string | null>(
+  //   null
+  // );
   const [isThemeLoading, setThemeLoading] = useState(false);
 
   useEffect(() => {
     const chageThemeValue = () => {
-      const storedTheme = localStorage.getItem("theme") || "standard";
-      const storedInputTheme =
-        localStorage.getItem("inputTheme") || "inputStandard";
+      const storedTheme = localStorage.getItem("theme") || "light";
+      // const storedInputTheme =
+      //   localStorage.getItem("inputTheme") || "inputStandard";
 
       setSelectedTheme(storedTheme);
-      setSelectedInputTheme(storedInputTheme);
+      // setSelectedInputTheme(storedInputTheme);
     };
 
     chageThemeValue();
@@ -39,13 +39,13 @@ export const ThemeSelector = ({
     }
   };
   // input theme
-  const handleInputThemeChange = (theme: string) => {
-    if (typeof window !== "undefined") {
-      localStorage.setItem("inputTheme", theme);
-      window.dispatchEvent(new Event("storage"));
-      setSelectedInputTheme(theme);
-    }
-  };
+  // const handleInputThemeChange = (theme: string) => {
+  //   if (typeof window !== "undefined") {
+  //     localStorage.setItem("inputTheme", theme);
+  //     window.dispatchEvent(new Event("storage"));
+  //     setSelectedInputTheme(theme);
+  //   }
+  // };
   if (isThemeLoading == false) {
     return null;
   }
@@ -67,7 +67,7 @@ export const ThemeSelector = ({
             ))}
           </div>
         ) : null}
-        {type == "all" || type == "input" ? (
+        {/* {type == "all" || type == "input" ? (
           <div className="flex gap-4">
             {inputThemes.map((inputTheme) => (
               <Radio
@@ -79,7 +79,7 @@ export const ThemeSelector = ({
               />
             ))}
           </div>
-        ) : null}
+        ) : null} */}
       </div>
     </div>
   );
@@ -99,8 +99,10 @@ export const ThemeWrapper = ({
   useEffect(() => {
     // 로컬 스토리지에서 테마 가져오기
     const listenStorageChange = () => {
-      setTheme(localStorage.getItem("theme") || "standard");
+      setTheme(localStorage.getItem("theme") || "light");
       setInputTheme(localStorage.getItem("inputTheme") || "inputStandard");
+
+      document.body.className = `${className} ${theme} ${inputTheme}`;
     };
     listenStorageChange();
     window.addEventListener("storage", listenStorageChange);
@@ -112,7 +114,5 @@ export const ThemeWrapper = ({
     return null;
   }
 
-  return (
-    <body className={`${className} ${theme} ${inputTheme}`}>{children}</body>
-  );
+  return <>{children}</>;
 };

package/app/templates/Toast/Toast.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+
+gsap.registerPlugin(useGSAP);
+
+// ✅ Toast Message 타입 정의
+export type ToastMessage = {
+  id: string;
+  status: "success" | "error";
+  message: string;
+  desc?: string;
+};
+
+// ✅ 전역 메시지 저장소와 구독 시스템
+let messages: ToastMessage[] = [];
+let listener: ((messages: ToastMessage[]) => void) | null = null;
+
+export const addToast = (msg: Omit<ToastMessage, "id">) => {
+  const id = crypto.randomUUID();
+  messages = [...messages, { id, ...msg }];
+  //   messages 값 listener에 반영
+  listener?.(messages);
+};
+
+const removeToast = (id: string) => {
+  messages = messages.filter((m) => m.id !== id);
+  listener?.(messages);
+};
+
+// 콜백으로 message value 추적적
+const subscribeToast = (cb: (messages: ToastMessage[]) => void) => {
+  listener = cb;
+  cb(messages);
+};
+
+const unsubscribeToast = () => {
+  listener = null;
+};
+
+// ✅ useToast 훅 제공
+export const useToast = () => {
+  return addToast;
+};
+
+// ✅ ToastContainer 컴포넌트 (내부 ToastItem 포함)
+export const Toast = () => {
+  const [messages, setMessages] = useState<ToastMessage[]>([]);
+
+  useEffect(() => {
+    subscribeToast(setMessages);
+    return () => unsubscribeToast();
+  }, []);
+
+  return (
+    <div className="fixed flex flex-col gap-2 bottom-[24px] right-[24px] z-50">
+      {messages.map((message) => (
+        <ToastItem
+          key={message.id}
+          message={message}
+          remove={() => removeToast(message.id)}
+        />
+      ))}
+    </div>
+  );
+};
+
+const ToastItem = ({
+  message,
+  remove,
+}: {
+  message: ToastMessage;
+  remove: () => void;
+}) => {
+  const elRef = useRef<HTMLDivElement>(null);
+
+  useGSAP(() => {
+    if (!elRef.current) return;
+
+    const tl = gsap.timeline({ onComplete: remove });
+    tl.from(elRef.current, {
+      opacity: 0,
+      y: 50,
+      ease: "power4.out",
+    });
+
+    tl.to(elRef.current, {
+      delay: 3,
+      y: 50,
+      opacity: 0,
+      ease: "power4.out",
+    });
+  }, []);
+
+  return (
+    <div
+      ref={elRef}
+      className="bg-white/20 border border-primary rounded text-white p-4 shadow-md min-w-[250px]"
+    >
+      <p>{message.message}</p>
+      {message.desc ? <p className="text-sm">{message.desc}</p> : null}
+    </div>
+  );
+};

package/cli/init.js

@@ -15,12 +15,10 @@ const __dirname = path.dirname(__filename);
 // 패키지 내부 경로 설정
 const packageRoot = path.join(__dirname, "..");
 const tokenFile = path.join(packageRoot, "token.json");
-const tokenDir = path.join(packageRoot, "tokens");
 
 // 프로젝트 루트 경로 (사용자가 실행한 곳)
 const projectRoot = process.cwd();
 const targetTokenFile = path.join(projectRoot, "token.json");
-const targetTokensDir = path.join(projectRoot, "tokens");
 
 // 사용자에게 Next.js 설치 여부 질문
 inquirer
@@ -105,19 +103,6 @@ inquirer
     copyFileSync(tokenFile, targetTokenFile);
     console.log(`✅ Copied: token.json -> ${targetTokenFile}`);
 
-    if (!fs.existsSync(targetTokensDir))
-      mkdirSync(targetTokensDir, { recursive: true });
-
-    const tokenFiles = readdirSync(tokenDir).filter((file) =>
-      file.endsWith(".js")
-    );
-    tokenFiles.forEach((file) => {
-      const sourcePath = path.join(tokenDir, file);
-      const targetPath = path.join(targetTokensDir, file);
-      copyFileSync(sourcePath, targetPath);
-      console.log(`✅ Copied: ${file} -> ${targetPath}`);
-    });
-
     console.log("🚀 Token setup complete!");
   })
   .catch((error) => {

package/package.json

@@ -1,51 +1,58 @@
-{
-  "name": "atomsystem",
-  "version": "0.1.17",
-  "type": "module",
-  "bin": {
-    "atomsystem-init": "cli/init.js",
-    "atomsystem-add": "cli/add.js"
-  },
-  "files": [
-    "token.json",
-    "tokens",
-    "tailwind.config.ts",
-    "app/templates"
-  ],
-  "scripts": {
-    "dev": "npm run build:token && next dev",
-    "build": "npm run build:token && next build",
-    "build:token": "node tokens/buildTokenSplit.js && node tokens/buildMergeCss.js",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "peerDependencies": {
-    "@tokens-studio/sd-transforms": "^1.2.8",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "sd-tailwindcss-transformer": "^2.0.0",
-    "style-dictionary": "^4.2.0"
-  },
-  "dependencies": {
-    "@next/third-parties": "^15.0.3",
-    "@tokens-studio/sd-transforms": "^1.2.8",
-    "clsx": "^2.1.1",
-    "highlight.js": "^11.11.1",
-    "inquirer": "^12.4.2",
-    "next": "15.0.3",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "sd-tailwindcss-transformer": "^2.0.0",
-    "style-dictionary": "^4.2.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.3",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
-  }
-}
+{
+  "name": "atomsystem",
+  "version": "0.1.18",
+  "type": "module",
+  "bin": {
+    "atomsystem-init": "cli/init.js",
+    "atomsystem-add": "cli/add.js"
+  },
+  "files": [
+    "token.json",
+    "tokens",
+    "tailwind.config.ts",
+    "app/templates"
+  ],
+  "scripts": {
+    "dev": "node build/build-tokens.js && next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "token-build": "node build/build-tokens.js"
+  },
+  "peerDependencies": {
+    "@tokens-studio/sd-transforms": "^1.2.8",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "sd-tailwindcss-transformer": "^2.0.0",
+    "style-dictionary": "^4.2.0"
+  },
+  "dependencies": {
+    "@gsap/react": "^2.1.2",
+    "@next/third-parties": "^15.0.3",
+    "@tailwindcss/postcss": "^4.0.17",
+    "@tokens-studio/sd-transforms": "^1.2.8",
+    "clsx": "^2.1.1",
+    "gsap": "^3.12.7",
+    "highlight.js": "^11.11.1",
+    "inquirer": "^12.4.2",
+    "next": "^15.2.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "sd-tailwindcss-transformer": "^2.0.0",
+    "style-dictionary": "^4.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitest/browser": "^3.1.1",
+    "@vitest/coverage-v8": "^3.1.1",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
+    "playwright": "^1.51.1",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.0.17",
+    "typescript": "^5",
+    "vitest": "^3.1.1"
+  }
+}