Merge branch 'main' into fix/build-config-script

GDSC-Hongik · Jun 12, 2024 · 93939a3 · 93939a3
2 parents e2d8b0d + 944cf6e
commit 93939a3
Show file tree

Hide file tree

Showing 37 changed files with 1,924 additions and 118 deletions.
diff --git a/apps/wow-docs/app/page.tsx b/apps/wow-docs/app/page.tsx
@@ -1,5 +1,7 @@
+import { css } from "@styled-system/css/css";
 import Checkbox from "wowds-ui/Checkbox";
 import Chip from "wowds-ui/Chip";
+import { RadioButton, RadioGroup } from "wowds-ui/RadioGroup";
 import Switch from "wowds-ui/Switch";
 
 const Home = () => {
@@ -8,6 +10,19 @@ const Home = () => {
       <Checkbox />
       <Chip label="Chip" />
       <Switch />
+      <RadioGroup defaultValue="1학년" name="학년">
+        <RadioButton label="1학년" value="1학년" />
+        <RadioButton label="2학년" value="2학년" />
+      </RadioGroup>
+      <main
+        className={css({
+          color: "textBlack",
+          textStyle: "h1",
+          bg: "backgroundAlternative",
+        })}
+      >
+        <p>docs</p>
+      </main>
     </>
   );
 };

diff --git a/apps/wow-docs/styled-system/tokens/index.js b/apps/wow-docs/styled-system/tokens/index.js
@@ -384,11 +384,11 @@ const tokens = {
     variable: "var(--colors-primary)",
   },
   "colors.success": {
-    value: "#34A853",
+    value: "#2A8642",
     variable: "var(--colors-success)",
   },
   "colors.error": {
-    value: "#EA4335",
+    value: "#BB362A",
     variable: "var(--colors-error)",
   },
   "colors.backgroundNormal": {
@@ -404,7 +404,7 @@ const tokens = {
     variable: "var(--colors-background-dimmer)",
   },
   "colors.sub": {
-    value: "#8F8F8F",
+    value: "#6B6B6B",
     variable: "var(--colors-sub)",
   },
   "colors.outline": {

diff --git a/packages/codegen/package.json b/packages/codegen/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "codegen",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "plop": "^4.0.1"
+  }
+}
diff --git a/packages/codegen/plopfile.js b/packages/codegen/plopfile.js
@@ -0,0 +1,33 @@
+import { promises as fs } from "fs";
+import { exit } from "process";
+
+export default async function async(plop) {
+  const COMPONENT_DIR = "../wow-ui/src/components";
+  const files = await fs.readdir(COMPONENT_DIR);
+
+  plop.setGenerator("Story", {
+    description: "Create a story file",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "스토리를 작성할 컴포넌트 이름을 입력해주세요",
+        validate: (input) => {
+          if (!files.includes(input)) {
+            console.log("\n만들어진 컴포넌트 이름을 입력해주세요.");
+            exit(1);
+          }
+
+          return true;
+        },
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "../wow-ui/src/components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx",
+        templateFile: "templates/Story.tsx.hbs",
+      },
+    ],
+  });
+}
diff --git a/packages/codegen/templates/Story.tsx.hbs b/packages/codegen/templates/Story.tsx.hbs
@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {{pascalCase name}} from "@/components/{{pascalCase name}}";
+
+const meta = {
+  title: "UI/{{pascalCase name}}",
+  component: {{pascalCase name}},
+  tags: ["autodocs"],
+  parameters: {
+    // 컴포넌트 부제목 작성 ex. 버튼 컴포넌트
+    componentSubtitle: "",
+    // 색 대조 관련 웹 접근성 테스트 불가하게 하는 속성
+    // 필요 없으면 지우기
+    //a11y: {
+    //  config: {
+    //    rules: [{ id: "color-contrast", enabled: false }],
+    //  },
+    //},
+  },
+  argTypes: {
+    props1: {
+      description: "props1은 default 값이 있는 필수적인 속성입니다."",
+      table: {
+        // type, 필수가 아닐 경우 required 삭제
+        type: { summary: "string", required: true },
+        // defaultValue (Optional)
+        defaultValue: { summary: "기본 값" },
+      },
+      control: {
+        // Args Table에서 사용자가 조작할 수 있는 타입
+        // select일 경우 options를 배열로 제공
+        // 그 외 text, number, boolean, color, check, radio 등 존재
+        // control 불가능하게 하고 싶을 경우 객체가 아니라 false로 설정
+        // ex. control: false, 
+        // 참고 : https://storybook.js.org/docs/react/essentials/controls
+        type: "select",
+        options: ["option1", "option2"],
+      },
+    },
+  },
+  // decorators (Optional)
+  // 공통적으로 적용하고 싶은 컴포넌트 설정
+  decorators: [
+    (Story) => (
+      <>
+        {Story()}
+      </>
+    ),
+  ],
+} satisfies Meta<typeof {{pascalCase name}}>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {},
+};
diff --git a/packages/theme/src/tokens/breakpoint.ts b/packages/theme/src/tokens/breakpoint.ts
@@ -0,0 +1,8 @@
+import { breakpoint } from "wowds-tokens";
+
+export const breakpoints = {
+  xs: breakpoint.xs,
+  sm: breakpoint.sm,
+  md: breakpoint.md,
+  lg: breakpoint.lg,
+};
diff --git a/packages/theme/src/tokens/index.ts b/packages/theme/src/tokens/index.ts
@@ -1,5 +1,7 @@
+export * from "./breakpoint.ts";
 export * from "./color.ts";
 export * from "./typography.ts";
+
 import { defineTokens } from "@pandacss/dev";
 
 import { colors, gradients } from "./color.ts";

diff --git a/packages/wow-tokens/src/breakpoint.ts b/packages/wow-tokens/src/breakpoint.ts
@@ -0,0 +1,4 @@
+export const xs = "360px";
+export const sm = "600px";
+export const md = "900px";
+export const lg = "1280px";
diff --git a/packages/wow-tokens/src/color.ts b/packages/wow-tokens/src/color.ts
@@ -90,14 +90,14 @@ export const blackOpacity80 = "rgba(0, 0, 0, 0.8)";
 
 // 시맨틱 토큰
 export const primary = blue500;
-export const success = green500;
-export const error = red500;
+export const success = green600;
+export const error = red600;
 
 export const backgroundNormal = white;
 export const backgroundAlternative = mono50;
 export const backgroundDimmer = blackOpacity80;
 
-export const sub = mono600;
+export const sub = mono700;
 export const outline = mono400;
 export const textBlack = black;
 export const textWhite = white;

diff --git a/packages/wow-tokens/src/index.ts b/packages/wow-tokens/src/index.ts
@@ -1,3 +1,4 @@
+export * as breakpoint from "./breakpoint.ts";
 export * as color from "./color.ts";
 export * as radius from "./radius.ts";
 export * as space from "./space.ts";

diff --git a/packages/wow-tokens/src/typography.ts b/packages/wow-tokens/src/typography.ts
@@ -64,6 +64,7 @@ export const label2 = {
   fontSize: "0.875rem",
   lineHeight: "100%",
   fontWeight: 600,
+  letterSpacing: "-0.01rem",
 };
 
 export const label3 = {

diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json
@@ -20,11 +20,26 @@
   "type": "module",
   "exports": {
     "./styles.css": "./dist/styles.css",
+    "./TextField": {
+      "types": "./dist/components/TextField/index.d.ts",
+      "require": "./dist/TextField.cjs",
+      "import": "./dist/TextField.js"
+    },
     "./Switch": {
       "types": "./dist/components/Switch/index.d.ts",
       "require": "./dist/Switch.cjs",
       "import": "./dist/Switch.js"
     },
+    "./RadioButton": {
+      "types": "./dist/components/RadioGroup/RadioButton.d.ts",
+      "require": "./dist/RadioButton.cjs",
+      "import": "./dist/RadioButton.js"
+    },
+    "./RadioGroup": {
+      "types": "./dist/components/RadioGroup/RadioGroup.d.ts",
+      "require": "./dist/RadioGroup.cjs",
+      "import": "./dist/RadioGroup.js"
+    },
     "./Chip": {
       "types": "./dist/components/Chip/index.d.ts",
       "require": "./dist/Chip.cjs",
@@ -55,7 +70,8 @@
     "build-storybook": "storybook build",
     "generate:build-config": "tsx ../scripts/generateBuildConfig.ts && prettier --write ./rollup.config.js ./package.json",
     "test-storybook": "test-storybook --browsers firefox chromium webkit",
-    "test": "jest"
+    "test": "jest",
+    "create:story-file": "plop --plopfile ../codegen/plopfile.js"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.3",
@@ -78,6 +94,7 @@
     "chromatic": "^11.3.0",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.6.15",
+    "plop": "^4.0.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "storybook": "^7.5.3",
     "typescript": "^5.3.3"

diff --git a/packages/wow-ui/panda.config.ts b/packages/wow-ui/panda.config.ts
@@ -1,5 +1,5 @@
 import { defineConfig, defineGlobalStyles } from "@pandacss/dev";
-import { semanticTokens, textStyles, tokens } from "theme";
+import { semanticTokens, textStyles, tokens, breakpoints } from "theme";
 import { removeUnusedCssVars, removeUnusedKeyframes } from "theme/utils";
 
 const globalCss = defineGlobalStyles({
@@ -32,5 +32,6 @@ export default defineConfig({
     tokens,
     textStyles,
     semanticTokens,
+    breakpoints,
   },
 });
diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js
@@ -19,7 +19,10 @@ process.env.BABEL_ENV = "production";
 
 export default {
   input: {
+    TextField: "./src/components/TextField",
     Switch: "./src/components/Switch",
+    RadioButton: "./src/components/RadioGroup/RadioButton",
+    RadioGroup: "./src/components/RadioGroup/RadioGroup",
     Chip: "./src/components/Chip",
     Checkbox: "./src/components/Checkbox",
     Button: "./src/components/Button",

diff --git a/packages/wow-ui/src/components/Checkbox/Checkbox.stories.tsx b/packages/wow-ui/src/components/Checkbox/Checkbox.stories.tsx
@@ -48,9 +48,7 @@ const meta = {
         type: { summary: "ReactNode" },
         defaultValue: { summary: null },
       },
-      control: {
-        type: "text",
-      },
+      control: false,
     },
     onChange: {
       description: "외부 활성 상태가 변경될 때 호출될 콜백 함수를 나타냅니다.",
@@ -122,19 +120,15 @@ const meta = {
         type: { summary: "InputHTMLAttributes<HTMLInputElement>" },
         defaultValue: { summary: "{}" },
       },
-      control: {
-        type: "object",
-      },
+      control: false,
     },
     style: {
       description: "체크박스의 커스텀 스타일을 설정합니다.",
       table: {
         type: { summary: "CSSProperties" },
         defaultValue: { summary: "{}" },
       },
-      control: {
-        type: "object",
-      },
+      control: false,
     },
   },
 } satisfies Meta<typeof Checkbox>;

diff --git a/packages/wow-ui/src/components/Checkbox/index.tsx b/packages/wow-ui/src/components/Checkbox/index.tsx
@@ -103,7 +103,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             aria-checked={checked}
             aria-disabled={disabled}
             aria-label={inputProps?.["aria-label"] ?? "checkbox"}
-            data-pressed={pressed}
+            {...(pressed && { "data-pressed": true })}
             id={id}
             ref={ref}
             tabIndex={0}
@@ -148,6 +148,7 @@ const checkboxStyle = cva({
     alignItems: "center",
     outline: "none",
     position: "relative",
+    cursor: "inherit",
   },
   variants: {
     type: {