@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Label/Label.colors.tsx

@@ -0,0 +1,241 @@
+import { BaseColor, SimenticColor, Transparent } from "@/styles/baseColor";
+import { colorThemes as colorSet } from "@/styles/color2";
+
+const useLabelColors = () => {
+  const inherit = {
+    filled: {
+      backgroundColor: `var(--inheritBgcolor, ${colorSet.light.inheritBgcolor})`,
+      color: `var(--textContrast, ${colorSet.light.textContrast})`,
+      borderColor: "transparent",
+    },
+    outlined: {
+      backgroundColor: "transparent",
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      borderColor: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+    },
+    outlineBack: {
+      backgroundColor: Transparent.grey8,
+      color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+      borderColor: Transparent.grey48,
+    },
+    soft: {
+      backgroundColor: Transparent.grey8,
+      color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+      borderColor: "transparent",
+    },
+    inverted: {
+      backgroundColor: BaseColor.grey.Grey3,
+      color: BaseColor.grey.Grey8,
+      borderColor: "transparent",
+    },
+  };
+
+  const red = {
+    filled: {
+      backgroundColor: SimenticColor.red.Main,
+      color: `var(--textContrast, ${colorSet.light.textContrast})`,
+      borderColor: "transparent",
+    },
+    outlined: {
+      backgroundColor: "transparent",
+      color: SimenticColor.red.Main,
+      borderColor: SimenticColor.red.Main,
+    },
+    outlineBack: {
+      backgroundColor: Transparent.red8,
+      color: SimenticColor.red.Main,
+      borderColor: Transparent.red48,
+    },
+    soft: {
+      backgroundColor: Transparent.red12,
+      color: `var(--swapDarkLightRed, ${colorSet.light.swapDarkLightRed})`,
+      borderColor: "transparent",
+    },
+    inverted: {
+      backgroundColor: SimenticColor.red.Lighter,
+      color: SimenticColor.red.Darker,
+      borderColor: "transparent",
+    },
+  };
+
+  const cyanBlue = {
+    filled: {
+      backgroundColor: SimenticColor.cyanBlue.Main,
+      color: `var(--textContrast, ${colorSet.light.textContrast})`,
+      borderColor: "transparent",
+    },
+    outlined: {
+      backgroundColor: "transparent",
+      color: SimenticColor.cyanBlue.Main,
+      borderColor: SimenticColor.cyanBlue.Main,
+    },
+    outlineBack: {
+      backgroundColor: Transparent.cyanBlue8,
+      color: SimenticColor.cyanBlue.Main,
+      borderColor: Transparent.cyanBlue48,
+    },
+    soft: {
+      backgroundColor: Transparent.cyanBlue12,
+      color: `var(--swapDarkLightCyanBlue, ${colorSet.light.swapDarkLightCyanBlue})`,
+      borderColor: "transparent",
+    },
+    inverted: {
+      backgroundColor: SimenticColor.cyanBlue.Lighter,
+      color: SimenticColor.cyanBlue.Darker,
+      borderColor: "transparent",
+    },
+  };
+
+  const blue = {
+    filled: {
+      backgroundColor: SimenticColor.blue.Main,
+      color: `var(--textContrast, ${colorSet.light.textContrast})`,
+      borderColor: "transparent",
+    },
+    outlined: {
+      backgroundColor: "transparent",
+      color: SimenticColor.blue.Main,
+      borderColor: SimenticColor.blue.Main,
+    },
+    outlineBack: {
+      backgroundColor: Transparent.blue4,
+      color: SimenticColor.blue.Main,
+      borderColor: Transparent.blue48,
+    },
+    soft: {
+      backgroundColor: Transparent.blue12,
+      color: `var(--swapDarkLightBlue, ${colorSet.light.swapDarkLightBlue})`,
+      borderColor: "transparent",
+    },
+    inverted: {
+      backgroundColor: SimenticColor.blue.Lighter,
+      color: SimenticColor.blue.Darker,
+      borderColor: "transparent",
+    },
+  };
+
+  const purple = {
+    filled: {
+      backgroundColor: SimenticColor.purple.Main,
+      color: `var(--textContrast, ${colorSet.light.textContrast})`,
+      borderColor: "transparent",
+    },
+    outlined: {
+      backgroundColor: "transparent",
+      color: SimenticColor.purple.Main,
+      borderColor: SimenticColor.purple.Main,
+    },
+    outlineBack: {
+      backgroundColor: Transparent.purple8,
+      color: SimenticColor.purple.Main,
+      borderColor: Transparent.purple48,
+    },
+    soft: {
+      backgroundColor: Transparent.purple12,
+      color: `var(--swapDarkLightPurple, ${colorSet.light.swapDarkLightPurple})`,
+      borderColor: "transparent",
+    },
+    inverted: {
+      backgroundColor: SimenticColor.purple.Lighter,
+      color: SimenticColor.purple.Darker,
+      borderColor: "transparent",
+    },
+  };
+
+  const gold = {
+    filled: {
+      backgroundColor: SimenticColor.gold.Main,
+      color: `var(--textContrast, ${colorSet.light.textContrast})`,
+      borderColor: "transparent",
+    },
+    outlined: {
+      backgroundColor: "transparent",
+      color: SimenticColor.gold.Main,
+      borderColor: SimenticColor.gold.Main,
+    },
+    outlineBack: {
+      backgroundColor: Transparent.gold4,
+      color: SimenticColor.gold.Main,
+      borderColor: Transparent.gold48,
+    },
+    soft: {
+      backgroundColor: Transparent.gold12,
+      color: `var(--swapDarkLightGold, ${colorSet.light.swapDarkLightGold})`,
+      borderColor: "transparent",
+    },
+    inverted: {
+      backgroundColor: SimenticColor.gold.Lighter,
+      color: SimenticColor.gold.Darker,
+      borderColor: "transparent",
+    },
+  };
+
+  const lightGreen = {
+    filled: {
+      backgroundColor: SimenticColor.lightGreen.Main,
+      color: `var(--textContrast, ${colorSet.light.textContrast})`,
+      borderColor: "transparent",
+    },
+    outlined: {
+      backgroundColor: "transparent",
+      color: SimenticColor.lightGreen.Main,
+      borderColor: SimenticColor.lightGreen.Main,
+    },
+    outlineBack: {
+      backgroundColor: Transparent.lightGreen4,
+      color: SimenticColor.lightGreen.Main,
+      borderColor: Transparent.lightGreen48,
+    },
+    soft: {
+      backgroundColor: Transparent.lightGreen12,
+      color: `var(--swapDarkLightLightGreen, ${colorSet.light.swapDarkLightLightGreen})`,
+      borderColor: "transparent",
+    },
+    inverted: {
+      backgroundColor: SimenticColor.lightGreen.Lighter,
+      color: SimenticColor.lightGreen.Darker,
+      borderColor: "transparent",
+    },
+  };
+
+  const deepGreen = {
+    filled: {
+      backgroundColor: SimenticColor.deepGreen.Main,
+      color: `var(--textContrast, ${colorSet.light.textContrast})`,
+      borderColor: "transparent",
+    },
+    outlined: {
+      backgroundColor: "transparent",
+      color: SimenticColor.deepGreen.Main,
+      borderColor: SimenticColor.deepGreen.Main,
+    },
+    outlineBack: {
+      backgroundColor: Transparent.deepGreen4,
+      color: SimenticColor.deepGreen.Main,
+      borderColor: Transparent.deepGreen48,
+    },
+    soft: {
+      backgroundColor: Transparent.deepGreen12,
+      color: `var(--swapDarkLightDeepGreen, ${colorSet.light.swapDarkLightDeepGreen})`,
+      borderColor: "transparent",
+    },
+    inverted: {
+      backgroundColor: SimenticColor.deepGreen.Lighter,
+      color: SimenticColor.deepGreen.Darker,
+      borderColor: "transparent",
+    },
+  };
+
+  return {
+    inherit,
+    red,
+    cyanBlue,
+    blue,
+    purple,
+    gold,
+    lightGreen,
+    deepGreen,
+  };
+};
+
+export default useLabelColors;

package/src/components/Label/Label.module.scss

@@ -0,0 +1,31 @@
+@layer Label {
+  .Label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: max-content;
+    padding-inline: 6px;
+    border-radius: 6px;
+    gap: 4px;
+    background-color: var(--background-color, #ffab001f);
+    color: var(--color, #b76e00);
+    border: 1px solid var(--border-color, transparent);
+
+    &.cursor {
+      cursor: pointer;
+    }
+
+    &.medium {
+      @include bodyBoldSmall;
+      height: 32px;
+    }
+    &.small {
+      @include captionBoldMedium;
+      height: 24px;
+    }
+    &.xSmall {
+      @include captionBoldSmall;
+      height: 16px;
+    }
+  }
+}

package/src/components/Label/Label.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import cn from "classnames/bind";
+import styles from "./Label.module.scss";
+import useLabelColors from "./Label.colors";
+
+const cx = cn.bind(styles);
+
+interface LabelRootProps {
+  variant?: "filled" | "outlined" | "outlineBack" | "soft" | "inverted";
+  color:
+    | "inherit"
+    | "red"
+    | "cyanBlue"
+    | "blue"
+    | "purple"
+    | "gold"
+    | "lightGreen"
+    | "deepGreen";
+  text?: string;
+  size?: "medium" | "small" | "xSmall";
+  onClick?: () => void;
+}
+
+const Label = (props: LabelRootProps & React.ComponentProps<"div">) => {
+  const {
+    children,
+    size = "small",
+    color,
+    variant = "filled",
+    onClick,
+  } = props;
+
+  const labelColors = useLabelColors();
+  const colorSet = labelColors[color];
+
+  return (
+    <div
+      {...props}
+      className={cx("Label", size, props.className, {
+        cursor: !!onClick,
+      })}
+      onClick={onClick}
+      style={{
+        "--color": colorSet[variant].color,
+        "--background-color": colorSet[variant].backgroundColor,
+        "--border-color": colorSet[variant].borderColor,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Label;

package/src/components/LazyImage/LazyImage.module.scss

@@ -0,0 +1,6 @@
+.LazyImage {
+  background-repeat: no-repeat;
+  background-size: 50% 50%;
+  background-color: #222;
+  background-position: center center;
+}

package/src/components/LazyImage/LazyImage.tsx

@@ -0,0 +1,107 @@
+"use client";
+import React from "react";
+import cn from "classnames/bind";
+import styles from "./LazyImage.module.scss";
+import useIntersectionObserver from "../../hooks/useIntersectionObserver";
+
+const cx = cn.bind(styles);
+
+type ImageProps = {
+  src: string;
+  rootElemRef?: React.RefObject<HTMLElement>;
+  width?: number;
+  height?: number;
+  ratio: "1:1" | "4:3" | "16:9" | "3:4" | "9:16";
+} & React.ImgHTMLAttributes<HTMLImageElement>;
+
+const ioOptions: IntersectionObserverInit = {
+  threshold: 0,
+};
+
+// 얘는 서버에서는 무조건 false
+// 브라우저 진입시 true일수도 있고 false일수도 있다.
+// true일때 => 클라이언트값이 server랑 달라요 error
+const lazyEnabled =
+  typeof HTMLImageElement !== "undefined" &&
+  "loading" in HTMLImageElement.prototype;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const BuiltinImage = ({ rootElemRef: _, ...props }: ImageProps) => {
+  const imgRef = React.useRef<HTMLImageElement>(null);
+
+  React.useEffect(() => {
+    const handleLoaded = () => {
+      imgRef.current?.classList.remove(cx("LazyImage"));
+    };
+    if (imgRef.current) {
+      imgRef.current.addEventListener("load", handleLoaded, { once: true });
+    }
+  }, []);
+
+  return (
+    <img ref={imgRef} {...props} className={cx("LazyImage")} loading="lazy" />
+  );
+};
+
+const LazyLoadImage = ({
+  src,
+  rootElemRef,
+  width,
+  height,
+  ratio,
+  ...otherProps
+}: ImageProps) => {
+  const imgRef = React.useRef<HTMLImageElement>(null);
+  const [loaded, setLoaded] = React.useState(false);
+
+  ioOptions.root = rootElemRef?.current ?? null;
+  const { entries, observerRef } = useIntersectionObserver(imgRef, ioOptions);
+
+  const onLoad = () => {
+    setLoaded(true);
+  };
+
+  React.useEffect(() => {
+    const isVisible = entries[0]?.isIntersecting;
+    if (isVisible) {
+      imgRef.current!.setAttribute("src", src);
+      observerRef.current?.disconnect();
+    }
+  }, [src, entries, observerRef]);
+
+  const widthRatioRate = (() => {
+    switch (ratio) {
+      case "1:1":
+        return 1;
+      case "4:3":
+        return 4 / 3;
+      case "16:9":
+        return 16 / 9;
+      case "3:4":
+        return 3 / 4;
+      case "9:16":
+        return 9 / 16;
+    }
+  })();
+
+  if (!width && !height) {
+    throw new Error("width or height is required");
+  }
+
+  return (
+    <img
+      ref={imgRef}
+      className={cx({ LazyImage: !loaded })}
+      width={width ?? height! * widthRatioRate}
+      height={height ?? width! / widthRatioRate}
+      onLoad={onLoad}
+      style={{ objectFit: "cover" }}
+      alt=""
+      {...otherProps}
+    />
+  );
+};
+
+const LazyImage = lazyEnabled ? LazyLoadImage : BuiltinImage;
+
+export default LazyImage;

package/src/components/List/List.module.scss

@@ -0,0 +1,81 @@
+@layer List {
+  .List {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 4px;
+
+    &.s.row {
+      padding-block: 4px;
+    }
+
+    &.m.row {
+      padding-block: 8px;
+    }
+
+    &.l.row {
+      padding-block: 10px;
+    }
+
+    &.column {
+      padding-block: 8px;
+    }
+  }
+
+  .TextWrapper {
+    display: flex;
+    width: 100%;
+
+    &.row {
+      flex-direction: row;
+      align-items: center;
+      gap: 16px;
+    }
+
+    &.column {
+      flex-direction: column;
+    }
+  }
+
+  .Title {
+    color: var(--textSecondary, #637381);
+
+    &.row {
+      flex-basis: 100px;
+      flex-shrink: 0;
+    }
+
+    &.text.s {
+      @include bodyRegularSmall;
+    }
+
+    &.text.m {
+      @include bodyRegularMedium;
+    }
+
+    &.text.l {
+      @include bodyRegularLarge;
+    }
+
+    &.contentsHeader {
+      @include bodyBoldSmall;
+    }
+  }
+
+  .Label {
+    color: var(--textPrimary, #1c252e);
+    flex-grow: 1;
+
+    &.s {
+      @include bodyRegularSmall;
+    }
+
+    &.m {
+      @include bodyRegularMedium;
+    }
+
+    &.l {
+      @include bodyRegularLarge;
+    }
+  }
+}

package/src/components/List/List.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import styles from "./List.module.scss";
+import cn from "classnames/bind";
+import { Icon } from "../Icon/Icon";
+
+const cx = cn.bind(styles);
+
+type TextProps = {
+  value: string;
+} & React.JSX.IntrinsicElements["div"];
+
+type BaseListProps = {
+  label: TextProps;
+  direction?: "row" | "column";
+  size?: "s" | "m" | "l";
+} & Omit<React.JSX.IntrinsicElements["div"], "title">;
+
+type ListProps =
+  | ({
+      type: "default";
+      title?: never;
+      icon?: React.ComponentProps<typeof Icon>;
+    } & BaseListProps)
+  | ({
+      type: "text" | "contentsHeader";
+      title?: TextProps;
+      icon?: never;
+    } & BaseListProps);
+
+const List = (props: ListProps) => {
+  const {
+    direction = "row",
+    type = "default",
+    size = "m",
+    icon,
+    title,
+    label,
+    children,
+    ...rest
+  } = props;
+
+  const isText = title?.value || label?.value;
+
+  if (type !== "default" && icon) {
+    throw new Error(
+      "text 또는 contentsHeader 타입에서는 icon을 사용할 수 없습니다."
+    );
+  }
+
+  if (type === "default" && title) {
+    throw new Error("default 타입에서는 title을 사용할 수 없습니다.");
+  }
+
+  if (!label) {
+    throw new Error("label이 필요합니다.");
+  }
+
+  return (
+    <div {...rest} className={cx("List", rest.className, size, direction)}>
+      {isText && (
+        <div className={cx("TextWrapper", direction)}>
+          {title?.value && (
+            <div
+              {...title}
+              className={cx("Title", title.className, type, size, direction)}
+            >
+              {title?.value}
+            </div>
+          )}
+          {label?.value && (
+            <div {...label} className={cx("Label", label.className, size)}>
+              {label?.value}
+            </div>
+          )}
+        </div>
+      )}
+      {children}
+      {type === "default" && (
+        <Icon
+          {...icon}
+          name={icon?.name ?? "ExpandMore"}
+          size={icon?.size ?? 24}
+          className={cx("Icon", icon?.className)}
+        />
+      )}
+    </div>
+  );
+};
+
+export type { ListProps };
+export default List;

package/src/components/List/README.md

@@ -0,0 +1,87 @@
+# List UI
+
+## Contents List
+
+1. [Quick Start](#QuickStart)
+2. [Props](#Props)
+3. [Example](#Example)
+
+## Quick Start
+
+```tsx
+import { List } from "@weing-dev/ui-kit-primitive";
+
+const Component = () => {
+  return (
+    <List type="default" label={{ value: "Label" }}>
+      <Button.Root>
+        <Button.Text>Content</Button.Text>
+      </Button.Root>
+    </List>
+  );
+};
+```
+
+## Props
+
+| Prop      | Type                                    | Required | Default                          | Description                               |
+| :-------- | :-------------------------------------- | :------- | :------------------------------- | :---------------------------------------- |
+| type      | "default" \| "text" \| "contentsHeader" | Yes      | "default"                        | 리스트의 타입을 설정합니다                |
+| direction | "row" \| "column"                       | No       | "row"                            | 리스트 아이템의 배치 방향을 설정합니다    |
+| size      | "s" \| "m" \| "l"                       | No       | "m"                              | 리스트의 크기를 설정합니다                |
+| label     | { value: string, ...HTMLDivProps }      | Yes      | -                                | 리스트의 라벨을 설정합니다                |
+| title     | { value: string, ...HTMLDivProps }      | No       | -                                | text/contentsHeader 타입일 때만 사용 가능 |
+| icon      | IconProps                               | No       | { name: "ExpandMore", size: 24 } | default 타입일 때만 사용 가능             |
+| children  | ReactNode                               | No       | -                                | 리스트 끝에 들어갈 ReactNode를 설정합니다 |
+
+## Example
+
+### 기본 리스트 (Default)
+
+```tsx
+<List
+  type="default"
+  label={{ value: "Label" }}
+  icon={{ name: "ExpandMore", size: 24 }}
+>
+  <Button.Root>
+    <Button.Text>Content</Button.Text>
+  </Button.Root>
+</List>
+```
+
+### 텍스트 리스트 (Text)
+
+```tsx
+<List type="text" label={{ value: "Label" }} title={{ value: "Title" }}></List>
+```
+
+### 컨텐츠 헤더 리스트 (ContentsHeader)
+
+```tsx
+<List
+  type="contentsHeader"
+  label={{ value: "Label" }}
+  title={{ value: "Title" }}
+  direction="column"
+></List>
+```
+
+### 커스텀 스타일링
+
+```tsx
+<List
+  type="text"
+  label={{
+    value: "Label",
+    style: { textAlign: "right" },
+  }}
+  title={{
+    value: "Title",
+    style: { textAlign: "left" },
+  }}
+  style={{
+    border: "1px solid black",
+  }}
+></List>
+```