atomsystem 0.1.30 → 0.1.32

package/app/templates/Theme/Theme.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { Radio } from "../Form/Form";
-import { themes } from "@/build/typescript/theme";
+import { themes } from "../../../build/typescript/theme";
 import { Button } from "../Button/Button";
 import { ModalContent } from "../Modal/Modal";
 

package/cli/init.js

@@ -49,7 +49,7 @@ inquirer
 
       try {
         await execPromise(
-          "npm install next@latest react@latest react-dom@latest tailwindcss"
+          "npm install next@latest react@latest react-dom@latest tailwindcss clsx typescript @types/react @types/node @types/react-dom"
         );
         pkgSpinner.succeed("Next.js and React installation complete!");
       } catch (err) {
@@ -96,53 +96,19 @@ inquirer
       const appDir = path.join(projectRoot, "app");
       if (!fs.existsSync(appDir)) mkdirSync(appDir);
 
+      // components 및 Theme 디렉토리 생성은 add.js 가 알아서 처리하므로 여기서는 page.tsx 와 layout.tsx, globals.css 만 생성합니다.
       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: `import { ThemeProvider } from "./ThemeProvider";
+          content: `import { ThemeProvider } from "./components/Theme/Theme";
 import "./globals.css";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body>
-        <ThemeProvider>
-          {children}
-        </ThemeProvider>
+        <ThemeProvider />
+        {children}
       </body>
     </html>
   )
@@ -156,12 +122,39 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         {
           path: path.join(appDir, "page.tsx"),
           content: `import { ThemeSelector } from "./components/Theme/Theme";
+import { Button } from "./components/Button/Button";
+import { Card, CardHeader, CardContent, CardFooter } from "./components/Card/Card";
 
 export default function Page() {
   return (
-    <main style={{ padding: "20px" }}>
-      <h1>Hello, atomsystem!</h1>
-      <ThemeSelector />
+    <main style={{ padding: "40px", minHeight: "100vh", background: "var(--color-bg-wrapper)", transition: "background 0.3s ease" }}>
+      <div style={{ maxWidth: "800px", margin: "0 auto", display: "flex", flexDirection: "column", gap: "24px" }}>
+        <h1 style={{ fontSize: "var(--font-sizes-h2)", color: "var(--color-text-standard)", margin: 0 }}>Hello, atomsystem!</h1>
+        <p style={{ color: "var(--color-text-standard)", fontSize: "var(--font-sizes-body)", margin: 0 }}>
+          이 화면은 디자인 토큰이 적용된 샘플 화면입니다. 아래 테마를 변경해보세요.
+        </p>
+        
+        <ThemeSelector />
+
+        <Card>
+          <CardHeader>
+            <h2 style={{ fontSize: "var(--font-sizes-h3)", margin: 0 }}>Sample Card Components</h2>
+          </CardHeader>
+          <CardContent>
+            <p style={{ margin: 0, color: "var(--color-text-disabled)" }}>
+              이 카드는 테마 변경 시 배경색, 텍스트 색상, 테두리 색상이 자동으로 변경됩니다. 
+              여기 있는 버튼들은 제공된 Button 컴포넌트로 구성되었습니다.
+            </p>
+          </CardContent>
+          <CardFooter>
+            <div style={{ display: "flex", gap: "12px" }}>
+               <Button type="primary">Primary Button</Button>
+               <Button type="secondary">Secondary Button</Button>
+               <Button type="gray">Gray Button</Button>
+            </div>
+          </CardFooter>
+        </Card>
+      </div>
     </main>
   )
 }`,
@@ -172,6 +165,21 @@ export default function Page() {
         fs.writeFileSync(path, content);
         console.log(`✅ Created ${path}`);
       });
+
+      // add.js를 실행하여 Theme, Card 컴포넌트 및 하위 의존성을 복사합니다.
+      const addScriptPath = path.join(__dirname, "add.js");
+      if (fs.existsSync(addScriptPath)) {
+        console.log("⏳ Adding default components via add.js...");
+        try {
+          // Theme 설치 (Theme 내부에 Button 등이 포함되어 있음)
+          await execPromise(`node "${addScriptPath}" Theme`, { cwd: projectRoot });
+          // Card 설치
+          await execPromise(`node "${addScriptPath}" Card`, { cwd: projectRoot });
+          console.log("✅ Default components (Theme, Card, Button 등) added successfully.");
+        } catch (err) {
+          console.error("❌ Failed to add components:", err);
+        }
+      }
     } else {
       console.log("🚀 Installation skipped.");
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atomsystem",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "type": "module",
   "homepage": "https://system.atomground.com",
   "bin": {