atomsystem 0.1.25 → 0.1.27

package/cli/add.js

@@ -19,7 +19,7 @@ const components = [
   "Card",
   "Collapse",
   "CodeBlock",
-  "GlobalNav",
+  "Navigation",
   "Input",
   "Theme",
   "Tab",
@@ -34,21 +34,53 @@ const components = [
 const args = process.argv.slice(2); // 'npx atomsystem-add Button -> [Button]'
 const component = args[0] || "all"; // '사용자가 입력하지 않으면 기본적으로 'all''
 
+// 일부 컴포넌트의 의존성 구조 (Theme 설치시 내부적으로 Button, Form, Modal 등이 필요함)
+const dependenciesMap = {
+  Theme: ["Button", "Form", "Modal"], // Form 안에는 Radio가 들어있음
+};
+
+// 재귀 방지를 위한 Set
+const addedComponents = new Set();
+
 function addComponent(comp) {
+  if (addedComponents.has(comp)) return;
+  addedComponents.add(comp);
   const componentPath = path.join(templateDir, comp, `${comp}.tsx`);
   const targetDir = path.join(process.cwd(), "app", "components", comp);
   const targetPath = path.join(targetDir, `${comp}.tsx`);
 
+  // 컴포넌트의 CSS 파일 복제 지원
+  const cssFileName = `${comp}.css`.toLowerCase();
+  const sourceCssPath = path.join(__dirname, "..", "css", cssFileName);
+  const targetCssPath = path.join(targetDir, cssFileName);
+
   if (fs.existsSync(componentPath)) {
     // 대상 디렉토리가 없으면 생성
     if (!fs.existsSync(targetDir)) {
       fs.mkdirSync(targetDir, { recursive: true });
       console.log(`Created directory: ${targetDir}`);
     }
+    
+    // 1) TSX 복사
     copyFileSync(componentPath, targetPath);
-    console.log(`${comp} component has been added to ${targetPath}`);
+    console.log(`✅ ${comp} component typescript has been added to ${targetPath}`);
+
+    // 2) CSS 복사
+    if (fs.existsSync(sourceCssPath)) {
+      copyFileSync(sourceCssPath, targetCssPath);
+      console.log(`✅ ${comp} component stylesheet has been added to ${targetCssPath}`);
+    }
+    // 3) 의존성 컴포넌트 자동 복사 (Recursive Copy)
+    if (dependenciesMap[comp]) {
+      console.log(`\n⏳ Checking dependencies for ${comp}...`);
+      dependenciesMap[comp].forEach((dep) => {
+        addComponent(dep);
+      });
+      console.log(`✅ Finished adding dependencies for ${comp}.\n`);
+    }
+
   } else {
-    console.log(`Component ${comp} does not exist in the atomsystem.`);
+    console.log(`❌ Component ${comp} does not exist in the atomsystem.`);
   }
 }
 

package/cli/init.js

@@ -14,14 +14,23 @@ const __dirname = path.dirname(__filename);
 
 // 패키지 내부 경로 설정
 const packageRoot = path.join(__dirname, "..");
-const tokenFile = path.join(packageRoot, "token.json");
-const buildFile = path.join(packageRoot, "/build/build-tokens.js");
+const tokenFile = path.join(packageRoot, "tokens", "tokens.json");
+const buildFile = path.join(packageRoot, "build", "build-tokens.js");
 
 // 프로젝트 루트 경로 (사용자가 실행한 곳)
 const projectRoot = process.cwd();
-const targetTokenFile = path.join(projectRoot, "token.json");
+const targetTokenDir = path.join(projectRoot, "tokens");
+const targetTokenFile = path.join(targetTokenDir, "tokens.json");
 const targetBuildDir = path.join(projectRoot, "build");
-const targetBuildFile = path.join(projectRoot, "/build/build-tokens.js");
+const targetBuildFile = path.join(targetBuildDir, "build-tokens.js");
+
+// 사용자 프로젝트에 package.json이 존재하는지 먼저 확인 (안전장치)
+const packageJsonPath = path.join(projectRoot, "package.json");
+if (!fs.existsSync(packageJsonPath)) {
+  console.error("❌ Error: package.json not found in the current directory.");
+  console.error("Please run 'npm init' or 'npm init -y' before running atomsystem-init.");
+  process.exit(1);
+}
 
 // 사용자에게 Next.js 설치 여부 질문
 inquirer
@@ -41,9 +50,18 @@ inquirer
         await execPromise(
           "npm install next@latest react@latest react-dom@latest tailwindcss"
         );
-        console.log("✅ Installation complete!");
+        console.log("✅ Next.js and React Installation complete!");
       } catch (err) {
-        console.error("❌ Error during installation:", err);
+        console.error("❌ Error during Next.js/React installation:", err);
+        return;
+      }
+
+      console.log("Installing style-dictionary for atom design tokens...");
+      try {
+        await execPromise("npm install style-dictionary -D");
+        console.log("✅ style-dictionary Installation complete!");
+      } catch (err) {
+        console.error("❌ Error during style-dictionary installation:", err);
         return;
       }
 
@@ -54,6 +72,7 @@ inquirer
           fs.readFileSync(packageJsonPath, "utf8")
         );
 
+        packageJson.type = "module";
         packageJson.scripts = {
           ...packageJson.scripts,
           "token-build": "node build/build-tokens.js",
@@ -71,20 +90,68 @@ inquirer
       if (!fs.existsSync(appDir)) mkdirSync(appDir);
 
       const files = [
+        {
+          path: path.join(appDir, "ThemeProvider.tsx"),
+          content: `"use client";
+import { useEffect, useState } from "react";
+import { themes } from "@/build/typescript/theme";
+
+export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
+  const [theme, setTheme] = useState<Record<string, string>>({});
+  const [isThemeLoading, setThemeLoading] = useState(false);
+
+  useEffect(() => {
+    const listenStorageChange = () => {
+      const newThemes: Record<string, string> = {};
+      Object.entries(themes).forEach(([group, groupThemes]) => {
+        const storedKey = group === "global" ? "theme" : \`theme-\${group}\`;
+        const currentTheme = localStorage.getItem(storedKey) || groupThemes[0];
+        newThemes[group] = currentTheme;
+        
+        document.documentElement.classList.remove(...groupThemes);
+        document.documentElement.classList.add(currentTheme);
+      });
+      setTheme(newThemes);
+    };
+
+    listenStorageChange();
+    window.addEventListener("storage", listenStorageChange);
+    setThemeLoading(true);
+    return () => window.removeEventListener("storage", listenStorageChange);
+  }, []);
+
+  if (isThemeLoading === false) return null;
+  return <>{children}</>;
+};`,
+        },
         {
           path: path.join(appDir, "layout.tsx"),
-          content: `export default function RootLayout({ children }: { children: React.ReactNode }) {
+          content: `import { ThemeProvider } from "./ThemeProvider";
+import "../css/global.css"; // Ensure to load the CSS configuration if possible
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <ThemeProvider>
+          {children}
+        </ThemeProvider>
+      </body>
     </html>
   )
 }`,
         },
         {
           path: path.join(appDir, "page.tsx"),
-          content: `export default function Page() {
-  return <h1>Hello, Next.js!</h1>
+          content: `import { ThemeSelector } from "./components/Theme/Theme";
+
+export default function Page() {
+  return (
+    <main style={{ padding: "20px" }}>
+      <h1>Hello, atomsystem!</h1>
+      <ThemeSelector />
+    </main>
+  )
 }`,
         },
       ];
@@ -97,13 +164,14 @@ inquirer
       console.log("🚀 Installation skipped.");
     }
 
-    // ✅ 토큰 파일 복사 (Next.js 설치 여부와 관계없이 실행)
+    // ✅ 토큰 파일과 빌드 파일 복사 (Next.js 설치 여부와 관계없이 실행)
+    if (!fs.existsSync(targetTokenDir)) mkdirSync(targetTokenDir, { recursive: true });
     copyFileSync(tokenFile, targetTokenFile);
-    console.log(`✅ Copied: token.json -> ${targetTokenFile}`);
+    console.log(`✅ Copied: tokens/tokens.json -> ${targetTokenFile}`);
 
-    if (!fs.existsSync(targetBuildDir)) mkdirSync(targetBuildDir);
+    if (!fs.existsSync(targetBuildDir)) mkdirSync(targetBuildDir, { recursive: true });
     copyFileSync(buildFile, targetBuildFile);
-    console.log(`✅ Copied: build-token.json -> ${targetTokenFile}`);
+    console.log(`✅ Copied: build-tokens.js -> ${targetBuildFile}`);
 
     console.log("🚀 Token setup complete!");
   })

package/css/badge.css

@@ -0,0 +1,28 @@
+.badge,
+.badge-tint {
+    font-size: var(--text-sm);
+    padding: 0 var(--spacing-common-y);
+    border-radius: var(--radius-common);
+}
+
+
+
+.badge.primary { --badge-bg: var(--color-primary); }
+.badge.secondary { --badge-bg: var(--color-secondary); }
+.badge.warning { --badge-bg: var(--color-warning); }
+.badge.danger { --badge-bg: var(--color-danger); }
+
+.badge {
+    background-color: var(--badge-bg);
+    color: var(--color-white);
+}
+
+.badge-tint.primary { --badge-bg: var(--color-blue-100);  --text-color: var(--color-primary); }
+.badge-tint.secondary { --badge-bg: var(--color-indigo-100);  --text-color: var(--color-secondary); }
+.badge-tint.warning { --badge-bg: var(--color-yellow-100); --text-color: var(--color-warning); }
+.badge-tint.danger { --badge-bg: var(--color-red-100); --text-color: var(--color-danger); }
+
+.badge-tint {
+    background-color: var(--badge-bg);
+    color: var(--text-color);
+}

package/css/button.css

@@ -0,0 +1,75 @@
+.btn {
+    padding: var(--spacing-common-y) var(--spacing-common-x);
+    color: var(--color-white);
+    transition: all 0.2s;
+    cursor: pointer;
+    border-radius: var(--radius-common);
+    border: none;
+    font-family: var(--font-spoqaNeo);
+}
+
+.btn.primary { 
+    --btn-bg: var(--color-primary); 
+    --btn-hover: var(--color-blue-600);
+    --btn-active: var(--color-blue-700);
+    --btn-bg-disabled: var(--button-primary-bg-disabled);
+    --btn-text-disabled: var(--button-primary-text-disabled);
+    --btn-border-disabled: var(--button-primary-border-disabled);
+}
+.btn.secondary { 
+    --btn-bg: var(--color-secondary);
+    --btn-hover: var(--color-indigo-600);
+    --btn-active: var(--color-indigo-700);
+    --btn-bg-disabled: var(--button-secondary-bg-disabled);
+    --btn-text-disabled: var(--button-secondary-text-disabled);
+    --btn-border-disabled: var(--button-secondary-border-disabled);
+}
+.btn.success { 
+    --btn-bg: var(--color-success); 
+    --btn-hover: var(--color-green-600);
+    --btn-active: var(--color-green-700);
+    --btn-bg-disabled: var(--button-success-bg-disabled);
+    --btn-text-disabled: var(--button-success-text-disabled);
+    --btn-border-disabled: var(--button-success-border-disabled);
+}
+.btn.warning { 
+    --btn-bg: var(--color-warning); 
+    --btn-hover: var(--color-yellow-600);
+    --btn-active: var(--color-yellow-700);
+    --btn-bg-disabled: var(--button-warning-bg-disabled);
+    --btn-text-disabled: var(--button-warning-text-disabled);
+    --btn-border-disabled: var(--button-warning-border-disabled);
+}
+.btn.danger { 
+    --btn-bg: var(--color-danger); 
+    --btn-hover: var(--color-red-600);
+    --btn-active: var(--color-red-700);
+    --btn-bg-disabled: var(--button-danger-bg-disabled);
+    --btn-text-disabled: var(--button-danger-text-disabled);
+    --btn-border-disabled: var(--button-danger-border-disabled);
+}
+.btn.gray { 
+    --btn-bg: var(--color-gray-500); 
+    --btn-hover: var(--color-gray-600);
+    --btn-active: var(--color-gray-700);
+    --btn-bg-disabled: var(--button-gray-bg-disabled);
+    --btn-text-disabled: var(--button-gray-text-disabled);
+    --btn-border-disabled: var(--button-gray-border-disabled);
+}
+
+.btn {
+    background-color: var(--btn-bg);
+}
+.btn:hover:not(:disabled) {
+    background-color: var(--btn-hover);
+}
+.btn:active:not(:disabled) {
+    background-color: var(--btn-active);
+}
+.btn:disabled {
+    background-color: var(--btn-bg-disabled);
+    color: var(--btn-text-disabled);
+    cursor: not-allowed;
+    opacity: 0.7;
+    border: 1px solid var(--btn-border-disabled);
+}

package/css/card.css

@@ -0,0 +1,17 @@
+.card {
+  background-color: var(--color-bg-card);
+  border-radius: var(--radius-common);
+  border: 1px solid var(--border-standard);
+}
+
+.card-header,
+.card-content,
+.card-footer {
+  padding: var(--spacing-common-x);
+}
+
+.card-header.no-margin,
+.card-content.no-margin,
+.card-footer.no-margin {
+  padding: 0;
+}

package/css/collapse.css

@@ -0,0 +1,33 @@
+.collapse-item {
+  border-top: 1px solid var(--border-standard);
+  background-color: var(--color-bg-card);
+}
+
+.collapse-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  padding: var(--spacing-common-x);
+  color: var(--text-standard);
+  font-size: var(--text-body);
+}
+
+.collapse-icon {
+  transition: transform 0.3s ease;
+  color: var(--text-standard);
+}
+
+.collapse-icon.open {
+  transform: rotate(90deg);
+}
+
+.collapse-icon.closed {
+  transform: rotate(0deg);
+}
+
+.collapse-content {
+  padding: var(--spacing-common-x);
+  color: var(--text-standard);
+  font-size: var(--text-body);
+}

package/css/form.css

@@ -0,0 +1,115 @@
+
+.input{
+    background: var(--bg-input-standard);
+    border: 1px solid var(--border-standard);   
+    color: var(--text-standard);
+    padding: var(--spacing-common-y) var(--spacing-common-x);
+    border-radius: var(--radius-common);
+}
+
+.input::placeholder{
+    color: var(--text-placeholder);
+}
+
+.input:focus{
+    border: 1px solid var(--border-active);   
+}
+
+.input:disabled{
+    background: var(--bg-input-disabled);
+    border: 1px solid var(--border-standard);   
+    color: var(--text-disabled);
+}
+
+.select{
+    background: var(--bg-input-standard);
+    border: 1px solid var(--border-standard);   
+    color: var(--text-standard);
+    padding: var(--spacing-common-y) var(--spacing-common-x);
+    border-radius: var(--radius-common);
+}
+.select:focus{
+    border: 1px solid var(--border-active);   
+}
+
+.select:disabled{
+    background: var(--bg-input-disabled);
+    border: 1px solid var(--border-standard);   
+    color: var(--text-disabled);
+}
+
+.select-menu {
+    border: 1px solid var(--border-active);   
+    border-radius: var(--radius-common);
+    overflow:hidden;
+}
+
+.select-menu .select-menu-item {
+    background: var(--bg-input-standard);
+    border: 1px solid var(--border-standard);   
+    color: var(--text-standard);
+    padding: var(--spacing-common-y) var(--spacing-common-x);
+    cursor:pointer
+}
+
+.select-menu .select-menu-item:hover {
+    background: var(--bg-input-hover);
+}
+
+.select-menu .select-menu-item:active,
+.select-menu .select-menu-item:focus  {
+    background: var(--color-primary);
+    border: 1px solid var(--color-primary);   
+    color: var(--text-active);
+}
+
+.checkbox{
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: var(--spacing-small);
+  height: var(--spacing-small);  
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-common);
+  background: var(--bg-input-standard);
+  color: var(--bg-input-standard);
+}
+
+.checkbox span svg{
+    color: var(--bg-input-standard);
+    fill: var(--bg-input-standard);
+}
+
+.checkbox:has(input:checked){
+    background: var(--color-primary);
+    border: 1px solid var(--color-primary);
+}
+
+.checkbox:has(input:checked) span svg{
+    color: var(--text-active);
+    fill: var(--text-active);
+}
+
+.radio{
+    position: relative;
+    width: var(--spacing-small);
+    height: var(--spacing-small);  
+    border: 1px solid var(--border-standard);
+    background: var(--bg-input-standard);
+    color: var(--bg-input-standard);
+}
+
+.radio::after{
+    content:'';
+    position:absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--spacing-common-y);
+    height: var(--spacing-common-y);  
+    border-radius: var(--radius-circle);
+}
+
+.radio:checked::after{
+    background: var(--color-primary);
+}

package/css/modal.css

@@ -0,0 +1,98 @@
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 50;
+}
+
+.modal {
+  background-color: var(--color-bg-card);
+  padding: 0;
+  border-radius: var(--radius-common);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  color: var(--color-text-standard);
+  border: 1px solid var(--color-border-standard);
+  max-height: 90vh;
+}
+
+.modal-content {
+  padding: var(--spacing-common-x);
+  width: 100%;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-common-y) var(--spacing-common-x);
+  border-bottom: 1px solid var(--color-border-standard);
+}
+
+.modal-title {
+  font-size: var(--text-h6);
+  font-weight: var(--font-weight-header);
+  margin: 0;
+  color: var(--color-text-standard);
+}
+
+.modal-close {
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  color: var(--color-text-standard);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: color 0.2s ease-in-out;
+}
+
+.modal-close:hover {
+  color: var(--color-danger);
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--spacing-common-y) var(--spacing-common-x);
+  border-top: 1px solid var(--color-border-standard);
+  gap: var(--spacing-gap-small);
+}
+
+/* Modal Sizes */
+.modal-normal {
+  max-width: 28rem; /* Tailwind max-w-md */
+}
+
+.modal-middle {
+  max-width: 36rem; /* Tailwind max-w-xl */
+}
+
+.modal-large {
+  max-width: 64rem; /* Tailwind max-w-5xl */
+}
+
+.modal-xl {
+  max-width: 72rem; /* Tailwind max-w-6xl */
+}
+
+.modal-full {
+  max-width: calc(100vw - (var(--spacing-common-x) * 2));
+}
+
+.modal-full-screen {
+  width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+  max-width: 100vw;
+  border-radius: 0;
+  border: none;
+}

package/css/navigation.css

@@ -0,0 +1,69 @@
+
+
+.nav-container.nav-topnav {
+    background-color: var(--bg-topnav);
+    color: var(--text-topnav-standard);
+    border-color: var(--border-topnav);
+}
+
+.nav-container.nav-sidenav {
+    background-color: var(--bg-sidenav);
+    color: var(--text-sidenav-standard);
+    border-color: var(--border-sidenav);
+}
+
+.nav-bg.nav-topnav {
+    background-color: var(--bg-topnav);
+}
+
+.nav-bg.nav-sidenav {
+    background-color: var(--bg-sidenav);
+}
+
+.nav-border.nav-topnav {
+    border-color: var(--border-topnav);
+}
+
+.nav-border.nav-sidenav {
+    border-color: var(--border-sidenav);
+}
+
+.nav-text-standard.nav-topnav {
+    color: var(--text-topnav-standard);
+}
+
+.nav-text-standard.nav-sidenav {
+    color: var(--text-sidenav-standard);
+}
+
+.nav-text-active.nav-topnav {
+    color: var(--text-topnav-active);
+}
+
+.nav-text-active.nav-sidenav {
+    color: var(--text-sidenav-active);
+}
+
+.nav-text-sub.nav-topnav {
+    color: var(--text-topnav-sub);
+}
+
+.nav-text-sub.nav-sidenav {
+    color: var(--text-sidenav-sub);
+}
+
+.nav-padding.nav-topnav {
+    padding: var(--spacing-topnav-y) var(--spacing-topnav-x);
+}
+
+.nav-padding.nav-sidenav {
+    padding: var(--spacing-sidenav-y) var(--spacing-sidenav-x);
+}
+
+.nav-gap.nav-topnav {
+    gap: var(--spacing-topnav-gap);
+}
+
+.nav-gap.nav-sidenav {
+    gap: var(--spacing-sidenav-gap);
+}