@weing-dev/ui-kit-primitive 0.0.1 → 0.0.2

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

@@ -1,241 +0,0 @@
-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

@@ -1,31 +0,0 @@
-@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

@@ -1,54 +0,0 @@
-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

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

package/src/components/LazyImage/LazyImage.tsx

@@ -1,107 +0,0 @@
-"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

@@ -1,81 +0,0 @@
-@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

@@ -1,91 +0,0 @@
-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

@@ -1,87 +0,0 @@
-# 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>
-```