[Feature] Box 컴포넌트 구현 (#45)

* feature: Box 컴포넌트 기본 세팅

* feature: RightIcon 추가

* feature: storybook세팅

* fix: RightArrow 절대경로 수정

* fix: 파이프라인 이름 수정

* fix: panda config 수정

* fix: turbo 버전 조정

* fix: 상태관리 설정

* fix: 스토리북 수정

* fix: 스토리북 에러 수정

* fix: storybook 문서화 추가

* fix: 제네릭을 이용한 타입 정의

* fix: p5 코드리뷰

* fix: 제네릭 타입 깔끔하게 수정

* fix: 코드리뷰 반영

* fix: 터보레포 버전 변경

* fix: 파이프라인 수정

* fix: box props 네이밍 변경

.eslintrc.js

@@ -17,7 +17,6 @@ module.exports = {
     "plugin:import/typescript",
     "plugin:jsx-a11y/recommended",
     "plugin:prettier/recommended",
-    "eslint-config-turbo",
   ],
   plugins: [
     "@typescript-eslint/eslint-plugin",

.gitignore

@@ -37,6 +37,9 @@ yarn-error.log*
 .DS_Store
 *.pem
 
+#bundle
+stats.html
+
 ## Panda
 styled-system-studio
 

apps/wow-docs/app/page.tsx

@@ -10,6 +10,7 @@ const Home = () => {
       <Checkbox />
       <Chip label="Chip" />
       <Switch />
+
       <RadioGroup defaultValue="1학년" name="학년">
         <RadioButton label="1학년" value="1학년" />
         <RadioButton label="2학년" value="2학년" />

apps/wow-docs/panda.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from "@pandacss/dev";
 import { semanticTokens, textStyles, tokens } from "theme";
+
 import { removeUnusedCssVars, removeUnusedKeyframes } from "theme/utils";
 
 export default defineConfig({

apps/wow-docs/styled-system/tokens/index.js

@@ -412,7 +412,7 @@ const tokens = {
     variable: "var(--colors-outline)",
   },
   "colors.textBlack": {
-    value: "#000000",
+    value: "#121212",
     variable: "var(--colors-text-black)",
   },
   "colors.textWhite": {

package.json

@@ -78,6 +78,7 @@
     "rollup-jest": "^3.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-preserve-directives": "^0.4.0",
+    "rollup-plugin-visualizer": "^5.12.0",
     "shared-config": "workspace:^",
     "theme": "workspace:^",
     "ts-jest": "^29.1.2",

packages/scripts/generateTokenList.ts

@@ -0,0 +1,43 @@
+import { promises as fs } from "fs";
+
+const TOKEN_DIR = "../wow-tokens/src/color.ts";
+const outputFile = "../theme/src/config/colorTokenList.ts";
+
+const extractTokenName = async (filePath: string): Promise<string[]> => {
+  try {
+    const data = await fs.readFile(filePath, "utf-8");
+    const regex = /export const (\w+) =/g;
+    const matches = data.match(regex);
+
+    if (!matches) {
+      throw new Error("Token file does not found");
+    }
+
+    const tokenNames = matches.map((match) => {
+      let tokenName = match.replace(/export const (\w+) =/, "$1").trim();
+
+      tokenName = tokenName.replace(/([a-zA-Z])([0-9])/g, "$1.$2");
+
+      return tokenName;
+    });
+
+    return tokenNames;
+  } catch (error) {
+    console.error("Error extracting or saving variable names:", error);
+    return [];
+  }
+};
+
+const generateColorTokenFiles = async (tokenNames: string[]) => {
+  const colorTokenContent = `export const colorTokenList = ${JSON.stringify(tokenNames, null, 2)}`;
+  await fs.writeFile(outputFile, colorTokenContent, "utf-8");
+};
+
+(async () => {
+  try {
+    const tokenNames = await extractTokenName(TOKEN_DIR);
+    await generateColorTokenFiles(tokenNames);
+  } catch (error) {
+    console.log("Error generating TokenList:", error);
+  }
+})();

packages/theme/package.json

@@ -6,7 +6,8 @@
   "exports": {
     ".": "./src/tokens/index.ts",
     "./utils": "./src/utils/index.ts",
-    "./types": "./src/types/index.ts"
+    "./types": "./src/types/index.ts",
+    "./config": "./src/config/index.ts"
   },
   "devDependencies": {
     "@pandacss/dev": "^0.39.0"

packages/theme/src/config/colorTokenList.ts

@@ -0,0 +1,108 @@
+export const colorTokenList = [
+  "blue.50",
+  "blue.100",
+  "blue.150",
+  "blue.200",
+  "blue.300",
+  "blue.400",
+  "blue.500",
+  "blue.600",
+  "blue.700",
+  "blue.800",
+  "blue.850",
+  "blue.900",
+  "blue.950",
+  "yellow.50",
+  "yellow.100",
+  "yellow.150",
+  "yellow.200",
+  "yellow.300",
+  "yellow.400",
+  "yellow.500",
+  "yellow.600",
+  "yellow.700",
+  "yellow.800",
+  "yellow.850",
+  "yellow.900",
+  "yellow.950",
+  "green.50",
+  "green.100",
+  "green.150",
+  "green.200",
+  "green.300",
+  "green.400",
+  "green.500",
+  "green.600",
+  "green.700",
+  "green.800",
+  "green.850",
+  "green.900",
+  "green.950",
+  "red.50",
+  "red.100",
+  "red.150",
+  "red.200",
+  "red.300",
+  "red.400",
+  "red.500",
+  "red.600",
+  "red.700",
+  "red.800",
+  "red.850",
+  "red.900",
+  "red.950",
+  "mono.50",
+  "mono.100",
+  "mono.150",
+  "mono.200",
+  "mono.300",
+  "mono.400",
+  "mono.500",
+  "mono.600",
+  "mono.700",
+  "mono.800",
+  "mono.850",
+  "mono.900",
+  "mono.950",
+  "white",
+  "black",
+  "whiteOpacity.20",
+  "whiteOpacity.40",
+  "whiteOpacity.60",
+  "whiteOpacity.80",
+  "blackOpacity.20",
+  "blackOpacity.40",
+  "blackOpacity.60",
+  "blackOpacity.80",
+  "primary",
+  "success",
+  "error",
+  "backgroundNormal",
+  "backgroundAlternative",
+  "backgroundDimmer",
+  "sub",
+  "outline",
+  "textBlack",
+  "textWhite",
+  "darkDisabled",
+  "lightDisabled",
+  "blueHover",
+  "monoHover",
+  "elevatedHover",
+  "bluePressed",
+  "blueBackgroundPressed",
+  "monoBackgroundPressed",
+  "shadowSmall",
+  "shadowMedium",
+  "blueShadow",
+  "discord",
+  "github",
+  "blueGradientDark",
+  "blueGradientLight",
+  "redGradientDark",
+  "redGradientLight",
+  "greenGradientDark",
+  "greenGradientLight",
+  "yellowGradientDark",
+  "yellowGradientLight",
+];

packages/theme/src/config/index.ts

@@ -0,0 +1 @@
+export * from "./colorTokenList.ts";

packages/wow-icons/src/component/RightArrow.tsx

@@ -0,0 +1,42 @@
+import { forwardRef } from "react";
+import { color } from "wowds-tokens";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const RightArrow = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "20",
+      height = "21",
+      viewBox = "0 0 20 21",
+      stroke = "white",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="rightArrow icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <path
+          d="M10 4.5L15 10.5L10 16.5"
+          stroke={color[stroke]}
+          strokeLinejoin="bevel"
+          strokeWidth="1.4"
+        />
+      </svg>
+    );
+  }
+);
+
+RightArrow.displayName = "RightArrow";
+export default RightArrow;

packages/wow-icons/src/component/index.ts

@@ -1 +1,2 @@
 export { default as Check } from "./Check.tsx";
+export { default as RightArrow } from "./RightArrow.tsx";

packages/wow-tokens/package.json

@@ -26,7 +26,8 @@
     }
   },
   "scripts": {
-    "build": "rm -rf dist && rollup -c --bundleConfigAsCjs && tsc --emitDeclarationOnly"
+    "build": "pnpm generate:staticCSS && rm -rf dist && rollup -c --bundleConfigAsCjs && tsc --emitDeclarationOnly",
+    "generate:staticCSS": "tsx ../scripts/generateTokenList.ts"
   },
   "keywords": [],
   "author": "gdsc-hongik",

packages/wow-tokens/src/color.ts

@@ -99,7 +99,7 @@ export const backgroundDimmer = blackOpacity80;
 
 export const sub = mono700;
 export const outline = mono400;
-export const textBlack = black;
+export const textBlack = mono950;
 export const textWhite = white;
 
 export const darkDisabled = mono400;

packages/wow-ui/panda.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig, defineGlobalStyles } from "@pandacss/dev";
 import { semanticTokens, textStyles, tokens, breakpoints } from "theme";
+import { colorTokenList } from "theme/config";
 import { removeUnusedCssVars, removeUnusedKeyframes } from "theme/utils";
 
 const globalCss = defineGlobalStyles({
@@ -10,6 +11,15 @@ const globalCss = defineGlobalStyles({
 });
 
 export default defineConfig({
+  staticCss: {
+    css: [
+      {
+        properties: {
+          color: colorTokenList,
+        },
+      },
+    ],
+  },
   globalCss,
   preflight: true,
   minify: true,

packages/wow-ui/rollup.config.js

@@ -10,6 +10,7 @@ import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import typescript from "@rollup/plugin-typescript";
 import { fileURLToPath } from "url";
 import preserveDirectives from "rollup-plugin-preserve-directives";
+import { visualizer } from "rollup-plugin-visualizer";
 
 const extensions = [".tsx", ".ts", ".js", ".jsx"];
 
@@ -76,6 +77,7 @@ export default {
     terser(),
     json(),
     preserveDirectives.default(),
+    visualizer(),
   ],
   onwarn: (warning) => {
     if (warning.code !== "MODULE_LEVEL_DIRECTIVE") {