[Feature] Checkbox 컴포넌트 구현 (#36)

* feat : CheckBox 컴포넌트 1차 구현 * refactor : controlled checked 지원되도록 리팩토링 * feat: ref 추가, style prop 추가 * chore : gap 토큰으로 수정, style prop optional 수정 * chore: style css 삭제 * style : press 일 떄의 디자인 반영 * style : CheckIcon 색상 상태에 맞게 변경 * feat : 스토리북, param 설명 추가 * feat : style-system 업데이트 * feat : 테스트 코드 작성 * refactor : useCheckedState 로 분리 * feat : use client 추가 * style : 텍스트 색깔 분기처리 * feat : useCheckeState 수정 * feat : displayName 추가 * feat : export 경로 변경 * feat : typepath 추가 * fix : test 과정에서 build 추가 * fix : spacing 토큰 변경된 걸로 수정 * fix : radius 변경된 걸로 수정, FIXME 주석 추가 * fix : Props 네이밍 수정 * fix : test 에 변경된 prop 반영 * fix : uparrow 삭제 * refactor : pressed 도 useCheckState 에서 관리하도록 수정 * style : children 없으면 gap 없도록 수정 * fix : 접근성에 위배되지 않게 data-pressed 로 수정 * fix: useId 사용해서 고유 id 가지도록 수정
GDSC-Hongik · Jun 7, 2024 · ffb0d6a · ffb0d6a
1 parent df1dffe
commit ffb0d6a
Show file tree

Hide file tree

Showing 70 changed files with 1,683 additions and 295 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -38,7 +38,9 @@ jobs:
         run: pnpm install --no-frozen-lockfile
         working-directory: packages/wow-ui
 
+      - name: Build Packages
+        run: pnpm build
+
       - name: Run Tests
         run: pnpm test
         working-directory: packages/wow-ui
-
diff --git a/apps/wow-docs/app/page.tsx b/apps/wow-docs/app/page.tsx
@@ -1,7 +1,8 @@
 import { css } from "@styled-system/css/css";
-import { UpArrow } from "wowds-icons";
 import Switch from "wowds-ui/Switch";
 
+import Checkbox from "../../../packages/wow-ui/src/components/Checkbox";
+
 const Home = () => {
   return (
     <>
@@ -13,9 +14,9 @@ const Home = () => {
         })}
       >
         <p>docs</p>
-        <UpArrow />
       </main>
       <Switch />
+      <Checkbox />
     </>
   );
 };

diff --git a/apps/wow-docs/panda.config.ts b/apps/wow-docs/panda.config.ts
@@ -8,6 +8,7 @@ export default defineConfig({
   watch: true,
   outExtension: "js",
   polyfill: true,
+  jsxFramework: "react",
   include: ["./app/**/*.{ts,tsx,js,jsx}"],
   exclude: [],
   outdir: "styled-system",

diff --git a/apps/wow-docs/styled-system/helpers.js b/apps/wow-docs/styled-system/helpers.js
@@ -5,7 +5,9 @@ function isObject(value) {
 
 // src/compact.ts
 function compact(value) {
-  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));
+  return Object.fromEntries(
+    Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0)
+  );
 }
 
 // src/condition.ts
@@ -21,14 +23,13 @@ function toChar(code) {
 function toName(code) {
   let name = "";
   let x;
-  for (x = Math.abs(code); x > 52; x = x / 52 | 0)
+  for (x = Math.abs(code); x > 52; x = (x / 52) | 0)
     name = toChar(x % 52) + name;
   return toChar(x % 52) + name;
 }
 function toPhash(h, x) {
   let i = x.length;
-  while (i)
-    h = h * 33 ^ x.charCodeAt(--i);
+  while (i) h = (h * 33) ^ x.charCodeAt(--i);
   return h;
 }
 function toHash(value) {
@@ -41,7 +42,9 @@ function isImportant(value) {
   return typeof value === "string" ? importantRegex.test(value) : false;
 }
 function withoutImportant(value) {
-  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;
+  return typeof value === "string"
+    ? value.replace(importantRegex, "").trim()
+    : value;
 }
 function withoutSpace(str) {
   return typeof str === "string" ? str.replaceAll(" ", "_") : str;
@@ -104,37 +107,36 @@ function walkObject(target, predicate, options = {}) {
   return inner(target);
 }
 function mapObject(obj, fn) {
-  if (Array.isArray(obj))
-    return obj.map((value) => fn(value));
-  if (!isObject(obj))
-    return fn(obj);
+  if (Array.isArray(obj)) return obj.map((value) => fn(value));
+  if (!isObject(obj)) return fn(obj);
   return walkObject(obj, (value) => fn(value));
 }
 
 // src/normalize-style-object.ts
 function toResponsiveObject(values, breakpoints) {
-  return values.reduce(
-    (acc, current, index) => {
-      const key = breakpoints[index];
-      if (current != null) {
-        acc[key] = current;
-      }
-      return acc;
-    },
-    {}
-  );
+  return values.reduce((acc, current, index) => {
+    const key = breakpoints[index];
+    if (current != null) {
+      acc[key] = current;
+    }
+    return acc;
+  }, {});
 }
 function normalizeStyleObject(styles, context, shorthand = true) {
   const { utility, conditions } = context;
   const { hasShorthand, resolveShorthand } = utility;
   return walkObject(
     styles,
     (value) => {
-      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;
+      return Array.isArray(value)
+        ? toResponsiveObject(value, conditions.breakpoints.keys)
+        : value;
     },
     {
       stop: (value) => Array.isArray(value),
-      getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0
+      getKey: shorthand
+        ? (prop) => (hasShorthand ? resolveShorthand(prop) : prop)
+        : void 0,
     }
   );
 }
@@ -143,19 +145,24 @@ function normalizeStyleObject(styles, context, shorthand = true) {
 var fallbackCondition = {
   shift: (v) => v,
   finalize: (v) => v,
-  breakpoints: { keys: [] }
+  breakpoints: { keys: [] },
 };
-var sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value;
+var sanitize = (value) =>
+  typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value;
 function createCss(context) {
   const { utility, hash, conditions: conds = fallbackCondition } = context;
-  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");
+  const formatClassName = (str) =>
+    [utility.prefix, str].filter(Boolean).join("-");
   const hashFn = (conditions, className) => {
     let result;
     if (hash) {
       const baseArray = [...conds.finalize(conditions), className];
       result = formatClassName(utility.toHash(baseArray, toHash));
     } else {
-      const baseArray = [...conds.finalize(conditions), formatClassName(className)];
+      const baseArray = [
+        ...conds.finalize(conditions),
+        formatClassName(className),
+      ];
       result = baseArray.join(":");
     }
     return result;
@@ -166,27 +173,31 @@ function createCss(context) {
     const classNames = /* @__PURE__ */ new Set();
     walkObject(normalizedObject, (value, paths) => {
       const important = isImportant(value);
-      if (value == null)
-        return;
+      if (value == null) return;
       const [prop, ...allConditions] = conds.shift(paths);
       const conditions = filterBaseConditions(allConditions);
-      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));
+      const transformed = utility.transform(
+        prop,
+        withoutImportant(sanitize(value))
+      );
       let className = hashFn(conditions, transformed.className);
-      if (important)
-        className = `${className}!`;
+      if (important) className = `${className}!`;
       classNames.add(className);
     });
     return Array.from(classNames).join(" ");
   });
 }
 function compactStyles(...styles) {
-  return styles.flat().filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);
+  return styles
+    .flat()
+    .filter(
+      (style) => isObject(style) && Object.keys(compact(style)).length > 0
+    );
 }
 function createMergeCss(context) {
   function resolve(styles) {
     const allStyles = compactStyles(...styles);
-    if (allStyles.length === 1)
-      return allStyles;
+    if (allStyles.length === 1) return allStyles;
     return allStyles.map((style) => normalizeStyleObject(style, context));
   }
   function mergeCss(...styles) {
@@ -202,9 +213,11 @@ function createMergeCss(context) {
 var wordRegex = /([A-Z])/g;
 var msRegex = /^ms-/;
 var hypenateProperty = memo((property) => {
-  if (property.startsWith("--"))
-    return property;
-  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();
+  if (property.startsWith("--")) return property;
+  return property
+    .replace(wordRegex, "-$1")
+    .replace(msRegex, "-ms-")
+    .toLowerCase();
 });
 
 // src/is-css-function.ts
@@ -213,9 +226,12 @@ var fnRegExp = new RegExp(`^(${fns.join("|")})\\(.*\\)`);
 var isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);
 
 // src/is-css-unit.ts
-var lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";
+var lengthUnits =
+  "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";
 var lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;
-var lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);
+var lengthRegExp = new RegExp(
+  `^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`
+);
 var isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);
 
 // src/is-css-var.ts
@@ -226,12 +242,14 @@ var patternFns = {
   map: mapObject,
   isCssFunction,
   isCssVar,
-  isCssUnit
+  isCssUnit,
 };
 var getPatternStyles = (pattern, styles) => {
-  if (!pattern?.defaultValues)
-    return styles;
-  const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;
+  if (!pattern?.defaultValues) return styles;
+  const defaults =
+    typeof pattern.defaultValues === "function"
+      ? pattern.defaultValues(styles)
+      : pattern.defaultValues;
   return Object.assign({}, defaults, compact(styles));
 };
 
@@ -242,11 +260,15 @@ var getSlotRecipes = (recipe = {}) => {
     base: recipe.base?.[slot] ?? {},
     variants: {},
     defaultVariants: recipe.defaultVariants ?? {},
-    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []
+    compoundVariants: recipe.compoundVariants
+      ? getSlotCompoundVariant(recipe.compoundVariants, slot)
+      : [],
   });
   const slots = recipe.slots ?? [];
   const recipeParts = slots.map((slot) => [slot, init(slot)]);
-  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {
+  for (const [variantsKey, variantsSpec] of Object.entries(
+    recipe.variants ?? {}
+  )) {
     for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {
       recipeParts.forEach(([slot, slotRecipe]) => {
         slotRecipe.variants[variantsKey] ??= {};
@@ -256,7 +278,13 @@ var getSlotRecipes = (recipe = {}) => {
   }
   return Object.fromEntries(recipeParts);
 };
-var getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));
+var getSlotCompoundVariant = (compoundVariants, slotName) =>
+  compoundVariants
+    .filter((compoundVariant) => compoundVariant.css[slotName])
+    .map((compoundVariant) => ({
+      ...compoundVariant,
+      css: compoundVariant.css[slotName],
+    }));
 
 // src/split-props.ts
 function splitProps(props, ...keys) {
@@ -278,7 +306,13 @@ function splitProps(props, ...keys) {
 }
 
 // src/uniq.ts
-var uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);
+var uniq = (...items) =>
+  items
+    .filter(Boolean)
+    .reduce(
+      (acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])),
+      []
+    );
 export {
   compact,
   createCss,
@@ -298,17 +332,28 @@ export {
   toHash,
   uniq,
   walkObject,
-  withoutSpace
+  withoutSpace,
 };
 
-
-
-
+// src/normalize-html.ts
+var htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];
+function convert(key) {
+  return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;
+}
+function normalizeHTMLProps(props) {
+  return Object.fromEntries(
+    Object.entries(props).map(([key, value]) => [convert(key), value])
+  );
+}
+normalizeHTMLProps.keys = htmlProps;
+export { normalizeHTMLProps };
 
 export function __spreadValues(a, b) {
-  return { ...a, ...b }
+  return { ...a, ...b };
 }
 
 export function __objRest(source, exclude) {
-  return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key)))
-}
+  return Object.fromEntries(
+    Object.entries(source).filter(([key]) => !exclude.includes(key))
+  );
+}
diff --git a/apps/wow-docs/styled-system/jsx/aspect-ratio.d.ts b/apps/wow-docs/styled-system/jsx/aspect-ratio.d.ts
@@ -0,0 +1,14 @@
+/* eslint-disable */
+import type { FunctionComponent } from "react";
+import type { AspectRatioProperties } from "../patterns/aspect-ratio";
+import type { HTMLStyledProps } from "../types/jsx";
+import type { DistributiveOmit } from "../types/system-types";
+
+export interface AspectRatioProps
+  extends AspectRatioProperties,
+    DistributiveOmit<
+      HTMLStyledProps<"div">,
+      keyof AspectRatioProperties | "aspectRatio"
+    > {}
+
+export declare const AspectRatio: FunctionComponent<AspectRatioProps>;
diff --git a/apps/wow-docs/styled-system/jsx/aspect-ratio.js b/apps/wow-docs/styled-system/jsx/aspect-ratio.js
@@ -0,0 +1,16 @@
+import { createElement, forwardRef } from "react";
+
+import { splitProps } from "../helpers.js";
+import { getAspectRatioStyle } from "../patterns/aspect-ratio.js";
+import { styled } from "./factory.js";
+
+export const AspectRatio = /* @__PURE__ */ forwardRef(
+  function AspectRatio(props, ref) {
+    const [patternProps, restProps] = splitProps(props, ["ratio"]);
+
+    const styleProps = getAspectRatioStyle(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+
+    return createElement(styled.div, mergedProps);
+  }
+);
diff --git a/apps/wow-docs/styled-system/jsx/bleed.d.ts b/apps/wow-docs/styled-system/jsx/bleed.d.ts
@@ -0,0 +1,11 @@
+/* eslint-disable */
+import type { FunctionComponent } from "react";
+import type { BleedProperties } from "../patterns/bleed";
+import type { HTMLStyledProps } from "../types/jsx";
+import type { DistributiveOmit } from "../types/system-types";
+
+export interface BleedProps
+  extends BleedProperties,
+    DistributiveOmit<HTMLStyledProps<"div">, keyof BleedProperties> {}
+
+export declare const Bleed: FunctionComponent<BleedProps>;
diff --git a/apps/wow-docs/styled-system/jsx/bleed.js b/apps/wow-docs/styled-system/jsx/bleed.js
@@ -0,0 +1,14 @@
+import { createElement, forwardRef } from "react";
+
+import { splitProps } from "../helpers.js";
+import { getBleedStyle } from "../patterns/bleed.js";
+import { styled } from "./factory.js";
+
+export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) {
+  const [patternProps, restProps] = splitProps(props, ["inline", "block"]);
+
+  const styleProps = getBleedStyle(patternProps);
+  const mergedProps = { ref, ...styleProps, ...restProps };
+
+  return createElement(styled.div, mergedProps);
+});