atomsystem 0.1.48 → 0.1.50

package/app/templates/Table/Table.tsx

@@ -1,54 +0,0 @@
-/** 테이블에 표시할 데이터 배열. 각 객체는 하나의 행을 나타냅니다.
- * 객체의 키는 테이블 헤더가 되고, 값은 해당 셀의 내용이 됩니다.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Table = ({ tableData }: { tableData: Record<string, any>[] }) => {
-  // tableData가 제공되지 않았거나 비어있는 경우, 데이터 없음 메시지를 표시합니다.
-  if (!tableData || tableData.length === 0) {
-    return (
-      <div className="table-empty">
-        <p>표시할 데이터가 없습니다.</p>
-      </div>
-    );
-  }
-
-  const headers = Object.keys(tableData[0]);
-
-  return (
-    <div className="table-container">
-      <table className="table">
-        <thead className="table-header">
-          <tr>
-            {/* 헤더 배열을 순회하며 각 헤더에 대한 <th>태그를 생성합니다. */}
-            {headers.map((header, index) => {
-              return (
-                <th key={index}>
-                  {header}
-                </th>
-              );
-            })}
-          </tr>
-        </thead>
-        {/* 테이블 바디 부분 */}
-        <tbody className="table-body">
-          {/* tableData 배열을 순회하며 각 데이터 객체(행)에 대한 <tr> 태그를 생성합니다. */}
-          {tableData.map((row, rowIndex) => {
-            return (
-              <tr key={rowIndex} className="table-row">
-                {/* 각 행 내에서 헤더 배열을 다시 순회하며 해당 헤더에 맞는 셀(<td>)을 생성합니다. */}
-                {headers.map((header, colIndex) => (
-                  <td key={colIndex} className="table-cell">
-                    {/* 현재 행 객체(row)에서 해당 헤더(키)에 해당하는 값을 가져와 셀에 표시합니다. */}
-                    {row[header]}
-                  </td>
-                ))}
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-export default Table;

package/app/templates/Table/table.css

@@ -1,58 +0,0 @@
-.table-container {
-  overflow: auto;
-  width: 100%;
-}
-
-.table {
-  min-width: 100%;
-  border-collapse: collapse;
-  border-radius: var(--radius-common);
-  border: 1px solid var(--color-table-header-border);
-  overflow: hidden;
-}
-
-.table-header {
-  background-color: var(--color-table-header-bg);
-}
-
-.table-header th {
-  padding: var(--spacing-common-y) var(--spacing-common-x);
-  text-align: center;
-  color: var(--color-table-header-text);
-  font-weight: var(--font-weight-header);
-  font-size: var(--text-body);
-  letter-spacing: 0.05em;
-  border-bottom: 1px solid var(--color-table-header-border);
-}
-
-.table-body {
-  /* Body styles if needed */
-}
-
-.table-row {
-  background-color: var(--color-table-body-bg);
-  transition: background-color 0.2s ease;
-}
-
-.table-row:nth-child(even) {
-  background-color: var(--color-table-body-bgEven);
-}
-
-.table-row:hover {
-  filter: brightness(0.95);
-}
-
-.table-cell {
-  padding: var(--spacing-sm-y) var(--spacing-common-x);
-  color: var(--color-table-body-text);
-  font-size: var(--text-body);
-  border-bottom: 1px solid var(--color-table-body-border);
-  text-align: left;
-}
-
-.table-empty {
-  padding: var(--spacing-common-x);
-  text-align: center;
-  color: var(--color-text-standard);
-  font-size: var(--text-body);
-}

package/app/templates/Theme/Theme.tsx

@@ -1,122 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { Radio } from "../Radio/Radio";
-
-import { themes } from "@/build/typescript/theme";
-import { Button } from "../Button/Button";
-import { ModalContent } from "../Modal/Modal";
-
-export const ThemeSelector = () => {
-  const [selectedThemes, setSelectedThemes] = useState<Record<string, string>>({});
-  const [tempThemes, setTempThemes] = useState<Record<string, string>>({});
-  const [isThemeLoading, setThemeLoading] = useState(false);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  useEffect(() => {
-    const chageThemeValue = () => {
-      const newThemes: Record<string, string> = {};
-      Object.entries(themes).forEach(([group, groupThemes]) => {
-        const storedKey = group === "global" ? "theme" : `theme-${group}`;
-        const storedTheme = localStorage.getItem(storedKey) || groupThemes[0];
-        newThemes[group] = storedTheme;
-      });
-      setSelectedThemes(newThemes);
-      setTempThemes(newThemes);
-    };
-
-    chageThemeValue();
-    setThemeLoading(true);
-  }, []);
-
-  const handleTempThemeChange = (group: string, theme: string) => {
-    setTempThemes((prev) => ({ ...prev, [group]: theme }));
-  };
-
-  const handleApply = () => {
-    if (typeof window !== "undefined") {
-      Object.entries(tempThemes).forEach(([group, theme]) => {
-        const storedKey = group === "global" ? "theme" : `theme-${group}`;
-        localStorage.setItem(storedKey, theme);
-      });
-      window.dispatchEvent(new Event("storage"));
-      setSelectedThemes(tempThemes);
-      setIsModalOpen(false);
-    }
-  };
-
-  const handleOpenModal = () => {
-    setTempThemes(selectedThemes); // Reset to current applied themes
-    setIsModalOpen(true);
-  };
-
-  if (isThemeLoading === false) {
-    return null;
-  }
-
-  return (
-    <>
-      <Button type="primary" onClick={handleOpenModal} style={{ width: "100%" }}>
-        <div className="flex items-center justify-center gap-2">
-          <span className="material-symbols-outlined" style={{ fontSize: "18px" }}>palette</span>
-          <span>테마 설정</span>
-        </div>
-      </Button>
-      <ModalContent
-        isOpen={isModalOpen}
-        onRequestClose={() => setIsModalOpen(false)}
-        modalTitle="테마 설정"
-        modalFooter={
-          <div className="flex justify-end gap-2 w-full mt-4">
-            <Button type="gray" onClick={() => setIsModalOpen(false)}>취소</Button>
-            <Button type="primary" onClick={handleApply}>적용</Button>
-          </div>
-        }
-      >
-        <div className="flex flex-col gap-6 p-4">
-          {Object.entries(themes).map(([group, groupThemes]) => (
-            <div key={group} className="flex flex-col gap-3">
-              <p className="font-bold capitalize">{group} Theme</p>
-              <div className="flex gap-4 flex-wrap">
-                {groupThemes.map((theme) => (
-                  <Radio
-                    name={`theme-${group}-modal`}
-                    value={theme}
-                    key={theme}
-                    onChange={() => handleTempThemeChange(group, theme)}
-                    checked={theme === tempThemes[group]}
-                  />
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </ModalContent>
-    </>
-  );
-};
-
-export const ThemeProvider = () => {
-  const [isThemeLoading, setThemeLoading] = useState(false);
-
-  useEffect(() => {
-    const listenStorageChange = () => {
-      Object.entries(themes).forEach(([group, groupThemes]) => {
-        const storedKey = group === "global" ? "theme" : `theme-${group}`;
-        const currentTheme = localStorage.getItem(storedKey) || groupThemes[0];
-        
-        document.documentElement.classList.remove(...groupThemes);
-        document.documentElement.classList.add(currentTheme);
-      });
-    };
-
-    listenStorageChange();
-    window.addEventListener("storage", listenStorageChange);
-    setThemeLoading(true);
-    return () => window.removeEventListener("storage", listenStorageChange);
-  }, []);
-
-  if (isThemeLoading === false) {
-    return null;
-  }
-};

package/app/templates/Toast/Toast.tsx

@@ -1,106 +0,0 @@
-"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?: "standard" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "error";
-  message: string;
-  desc?: string;
-};
-
-// ✅ 전역 메시지 저장소와 구독 시스템
-let messages: ToastMessage[] = [];
-let listener: ((messages: ToastMessage[]) => void) | null = null;
-
-export const addToast = (msg: Omit<ToastMessage, "id">) => {
-  const id = Math.random().toString(36).substring(2) + Date.now().toString(36);
-  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="toast-container">
-      {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={`toast-item ${message.status || "standard"}`}
-    >
-      <p>{message.message}</p>
-      {message.desc ? <p className="toast-desc">{message.desc}</p> : null}
-    </div>
-  );
-};

package/app/templates/Toast/toast.css

@@ -1,69 +0,0 @@
-.toast-container {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm-y);
-  bottom: 24px;
-  right: 24px;
-  z-index: 50;
-}
-
-.toast-item {
-  background-color: var(--toast-bg, var(--color-bg-card));
-  border: 1px solid var(--toast-border, var(--border-standard));
-  border-radius: var(--radius-common);
-  color: var(--toast-color, var(--text-standard));
-  padding: var(--spacing-common-x);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  min-width: 250px;
-}
-
-/* Status Variants */
-.toast-item.standard {
-  --toast-bg: var(--color-bg-card);
-  --toast-border: var(--border-standard);
-  --toast-color: var(--text-standard);
-}
-
-.toast-item.primary {
-  --toast-bg: var(--color-primary);
-  --toast-border: var(--color-primary);
-  --toast-color: var(--color-white);
-}
-
-.toast-item.secondary {
-  --toast-bg: var(--color-secondary);
-  --toast-border: var(--color-secondary);
-  --toast-color: var(--color-white);
-}
-
-.toast-item.success {
-  --toast-bg: var(--color-success);
-  --toast-border: var(--color-success);
-  --toast-color: var(--color-white);
-}
-
-.toast-item.danger,
-.toast-item.error {
-  --toast-bg: var(--color-danger);
-  --toast-border: var(--color-danger);
-  --toast-color: var(--color-white);
-}
-
-.toast-item.warning {
-  --toast-bg: var(--color-warning);
-  --toast-border: var(--color-warning);
-  --toast-color: var(--color-white);
-}
-
-.toast-item.info {
-  --toast-bg: var(--color-info);
-  --toast-border: var(--color-info);
-  --toast-color: var(--color-white);
-}
-
-.toast-desc {
-  font-size: var(--text-sm);
-  margin-top: var(--spacing-gap-small);
-  opacity: 0.9;
-}

package/build/build-tokens.js

@@ -1,223 +0,0 @@
-import StyleDictionary from "style-dictionary";
-
-
-// 1. Style Dictionary 인스턴스 초기화
-const myStyleDictionary = new StyleDictionary({
-  source: ["tokens/tokens.json"],
-  preprocessors: ['flatten-global'],
-  hooks: {
-      preprocessors: {
-        'flatten-global': (dictionary) => {
-          // 1. global 객체를 찾습니다.
-          const { global, ...rest } = dictionary;
-          
-          // 2. global 내부의 내용을 루트로 끌어올려 병합합니다.
-          // 이렇게 하면 {palette.white} 참조가 루트 레벨에서 해석 가능해집니다.
-          return {
-            ...global,
-            ...rest
-          };
-        }
-      }
-    },
-  platforms: {
-    css: {
-      transformGroup: "css", // CSS 기본 변환 적용 (예: size/rem, color/hex 등)
-      buildPath: "build/css/",
-      files: [
-        {
-          destination: "_variables.css",
-          format: "myCustomFormat", // 아래에서 정의한 커스텀 포맷 사용
-          options: {
-            outputReferences: true, // CSS 변수 참조 활성화 (var(--name))
-          },
-        },
-      ],
-    },
-    typescript: {
-      transformGroup: "js",
-      buildPath: "build/typescript/",
-      files: [
-        {
-          destination: "theme.ts",
-          format: "theme",
-        },
-      ],
-    },
-  },
-  log: {
-    verbosity: 'verbose', // 어떤 reference를 못 찾는지 정확히 찍어줍니다.
-  },
-});
-
-// 2. 커스텀 포맷 등록
-// 토큰 그룹을 CSS 변수 블록으로 변환합니다.
-// - 'global' 카테고리 -> @theme 블록
-// - 그 외 카테고리 -> .{category} 클래스 블록
-myStyleDictionary.registerFormat({
-  name: "myCustomFormat",
-  format: function ({ dictionary, options }) {
-    // [헬퍼 함수]
-    // 1. getName: 토큰의 계층(type, item, subitem)을 하이픈(-)으로 연결하여 CSS 변수명 생성
-    //    예: palette.gray.500 -> palette-gray-500
-    const getName = (token) => token.path.slice(1).join("-");
-
-    // 2. getSemanticName: 시멘틱 토큰명을 생성 (예: color-card)
-    //    이름 규칙: $type(color)-...path -> color-bg-card
-    const getSemanticName = (token) => {
-      if (token.$type === "color") {
-        return [token.$type, ...token.path.slice(1)].join("-");
-      } else {
-        return null;
-      }
-    };
-
-    // [참조 맵 생성]
-    // {global.palette.white} 같은 참조 경로를 실제 토큰 객체로 찾기 위한 Map 생성
-    const tokenMap = new Map(
-      dictionary.allTokens.map((t) => [t.path.join("."), t])
-    );
-
-    // [토큰 그룹화]
-    // tokens.json의 최상위 카테고리(global, white, dark)별로 토큰을 묶음
-    const grouped = dictionary.allTokens.reduce((acc, token) => {
-      const category = token.attributes.category;
-      if (!acc[category]) acc[category] = [];
-      acc[category].push(token);
-      return acc;
-    }, {});
-
-    // [시멘틱 변수 수집 로직]
-    // global이 아닌 테마별 토큰(white, dark 등)을 순회하며 시멘틱 변수 정의를 수집함
-    // 목적: @theme 블록 안에 "--color-card: var(--card);" 형태의 매핑을 한 번만 선언하기 위함.
-    // 각 테마 파일(.white, .dark)에서는 --card 변수만 재정의하면 됨.
-    const themeTokens = dictionary.allTokens.filter(t => t.attributes.category !== 'palette');
-    const semanticMap = new Map();
-    
-    themeTokens.forEach(token => {
-        const semanticName = getSemanticName(token); // 예: color-card
-        const varName = getName(token);              // 예: card
-        
-        // 중복 선언 방지: 동일한 시멘틱 이름이 여러 테마에 있어도 한 번만 수집
-        if (semanticName && !semanticMap.has(semanticName)) {
-            semanticMap.set(semanticName, varName);
-        }
-    });
-
-    // 수집된 시멘틱 변수들을 CSS 문자열로 변환
-    const semanticCss = Array.from(semanticMap.entries())
-        .map(([name, val]) => `  --${name}: var(--${val});`)
-        .join('\n');
-
-
-    // [최종 CSS 생성]
-    // 그룹별로 순회하며 CSS 블록 생성
-    return Object.entries(grouped)
-      .map(([category, tokens]) => {
-        // 선택자 결정: 
-        // - 'global' 카테고리는 Tailwind CSS v4의 '@theme' 블록으로 변환
-        // - 나머지(white, dark)는 클래스 선택자(예: .white)로 변환
-        const selector = category === "palette" ? "@theme" : `.${category}`;
-
-
-        // 정렬
-        const typeOrder = ["color", "fontSizes", "fontWeights", "fontFamily", "borderRadius"];
-
-        const cssVariables = tokens
-          .sort((a, b) => {
-            const indexA = typeOrder.indexOf(a.$type);
-            const indexB = typeOrder.indexOf(b.$type);
-            if (indexA !== -1 && indexB !== -1) return indexA - indexB;
-            if (indexA !== -1) return -1;
-            if (indexB !== -1) return 1;
-            return 0;
-          })
-          .map((token) => {
-            const name = getName(token);
-            // 기본 값. 참조가 있다면 원본 값("{global.palette...}")을 가져옴
-            let value = token.$value || token.value;
-            const originalValue = token.original.$value || token.original.value;
-
-            // [수동 참조 해결]
-            // 값이 "{...}" 형태의 참조인 경우, 해당 참조를 var(--이름) 형태로 변환
-            if (
-              options?.outputReferences &&
-              typeof originalValue === "string" && // 값이 문자열이고
-              originalValue.includes("{")          // '{'를 포함하면 참조로 간주
-            ) {
-              value = originalValue.replace(/{([^}]+)}/g, (match, pathStr) => {
-                const refToken = tokenMap.get(pathStr);
-                if (refToken) {
-                  return `var(--${getName(refToken)})`;
-                }
-                return match; 
-              });
-            }
-
-            if (category === "palette") {
-              // $type을 확인하여 borderRadius나 dimension이면 px 추가
-              if(token.$type === "borderRadius" | token.$type === "fontSizes" | token.$type === "spacing" | token.$type === "sizing" | token.$type === "dimension") {
-                 if (!String(value).endsWith("px")) {
-                     return `--${name}: ${value}px;`;
-                 }
-              }
-              return `--${name}: ${value};`;
-            }
-            // 그 외 카테고리(테마)
-            if (token.$type === "color") {
-              return `--${name}: ${value};`;
-            }
-            if (token.$type === "spacing" || token.$type === "sizing") {
-               if (!String(value).endsWith("px") && !String(value).includes("var(")) {
-                   return `--${name}: ${value}px;`;
-               }
-               return `--${name}: ${value};`;
-            }
-            
-            return null;
-          })
-          .filter(Boolean)
-          .join("\n");
-
-        // global(@theme)인 경우에만 수집해둔 시멘틱 변수(semanticCss)를 추가
-        // @theme: Tailwind 유틸리티 클래스 생성에 필요 (bg-primary, text-secondary 등)
-        // Tailwind CSS v4의 @theme은 빌드 시 자동으로 :root에도 등록되므로 별도 :root 선언 불필요
-        if (selector === "@theme") {
-          return `@theme {\n${cssVariables}\n\n${semanticCss}\n}`;
-        }
-        return `${selector} {\n${cssVariables}\n} `;
-      })
-      .join("\n\n");
-  },
-});
-
-// 3. theme와 관련된 커스텀 포맷 등록
-// theme.ts 파일을 위한 포맷 등록
-myStyleDictionary.registerFormat({
-  name: "theme",
-  format: function ({ dictionary }) {
-    const groupedThemes = dictionary.allTokens.reduce((acc, token) => {
-      const category = token.attributes.category;
-      if (category === "palette") return acc;
-
-      if (category.includes("-")) {
-        const prefix = category.split("-")[0];
-        if (!acc[prefix]) acc[prefix] = [];
-        if (!acc[prefix].includes(category)) {
-          acc[prefix].push(category);
-        }
-      } else {
-        if (!acc.global) acc.global = [];
-        if (!acc.global.includes(category)) {
-          acc.global.push(category);
-        }
-      }
-      return acc;
-    }, { global: [] });
-
-    return `export const themes: Record<string, string[]> = ${JSON.stringify(groupedThemes, null, 2)};`;
-  },
-});
-
-// 3. 모든 플랫폼 빌드
-await myStyleDictionary.buildAllPlatforms();