@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Breadcrumb/README.md

@@ -0,0 +1,339 @@
+# Breadcrumb UI
+
+## Contents List
+
+1. [Quick Start](#QuickStart)
+2. [Reference](#Reference)
+3. [Example](#Example)
+
+## Quick Start
+
+```ts
+import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
+
+const components = () => {
+  return (
+    <Breadcrumb.List>
+      <Breadcrumb.Item>A</Breadcrumb.Item>
+      <Breadcrumb.Separator />
+      <Breadcrumb.Item>B</Breadcrumb.Item>
+      <Breadcrumb.Separator />
+      <Breadcrumb.Item>C</Breadcrumb.Item>
+    </Breadcrumb.List>
+  );
+};
+```
+
+## Reference
+
+### List
+
+`Breadcrumb.List`는 Breadcrumb ui를 효과적으로 보여주기 위해 스타일링이 적용된 `component`입니다.
+
+스타일을 제외한 기능은 없기에 `일반 태그`나 `component`로 대체가 가능합니다.
+
+| Prop                         |        Type        | Required | Default Value |
+| :--------------------------- | :----------------: | :------: | :-----------: |
+| [separator](#List-separator) | React.ReactElement |    -     |       -       |
+| [className](#List-className) |       String       |    -     |       -       |
+| [children](#List-children)   |  React.ReactNode   |    -     |       -       |
+
+#### List-separator
+
+`Breadcrumb.List`에 `separator`를 전달하기 위한 `props`입니다.
+
+`separator`로 적용하고자 하는 `component`를 `props`로 전달해주면 `Breadcrumb.List`내부 요소들의 사이에 `separator`가 적용됩니다.
+
+```ts
+import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
+
+const components = () => {
+
+  return (
+    <Breadcrumb.List separator={<Breadcrumb.Separator />}>
+      <!-- ... -->
+    </Breadcrumb.List>
+  );
+}
+```
+
+#### List-className
+
+`Breadcrumb.List`에 `className` class를 전달하기 위한 `props`입니다.
+
+```ts
+import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
+
+const components = () => {
+
+  return (
+    <Breadcrumb.List className="BreadcrumbList">
+      <!-- ... -->
+    </Breadcrumb.List>
+  );
+}
+```
+
+#### List-children
+
+`Breadcrumb.List`에 `children`을 전달하기 위한 `props`입니다.
+
+`children`으로는 `Breadcrumb.Item` `Breadcrumb.Seperate` `Breadcrumb.Ellipsis`가 들어갑니다.
+
+```ts
+import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
+
+const components = () => {
+  return (
+    <Breadcrumb.List className="BreadcrumbList">
+      <Breadcrumb.Item>A</Breadcrumb.Item>
+      <Breadcrumb.Separator />
+      <Breadcrumb.Item>B</Breadcrumb.Item>
+      <Breadcrumb.Separator />
+      <Breadcrumb.Item>C</Breadcrumb.Item>
+    </Breadcrumb.List>
+  );
+};
+```
+
+### Link
+
+`Breadcrumb.Link`은 Breadcrumb의 `경로 Text`를 보여주기 위해 스타일링이 적용된 `component`입니다.
+
+| Prop                         |                       Type                       | Required | Default Value |
+| :--------------------------- | :----------------------------------------------: | :------: | :-----------: |
+| [href](#href)                |                      String                      |    -     |       -       |
+| [focused](#focused)          |                     Boolean                      |    -     |     false     |
+| [as](#as)                    |  (props: [AsProps](#AsProps))=>React.ReactNode   |    -     |       -       |
+| [onClick](#onClick)          | (e: React.MouseEvent<HTMLAnchorElement>) => void |    -     |       -       |
+| [className](#Link-className) |                      String                      |    -     |       -       |
+| [children](#Link-children)   |                 React.ReactNode                  |    -     |       -       |
+
+#### href
+
+`Breadcrumb.Link`에 `href`를 전달함과 동시에 기능을 활성화하기 위해 사용됩니다.
+
+```ts
+import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
+
+const components = () => {
+
+  return (
+    <Breadcrumb.List className="BreadcrumbList">
+      <Breadcrumb.Link href="/users/dropdown">Dropdown</Breadcrumb.Link>
+      <!-- ... -->
+    </Breadcrumb.List>
+  );
+}
+```
+
+#### focused
+
+`Breadcrumb.Link`에 `focused`을 전달하기 위한 `props`입니다.
+
+`focused`가 활성화되면 `link`기능이 무효화되고 폰트 색상이 변경됩니다.
+
+```ts
+import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
+
+const components = () => {
+  const [open, setOpen] = React.useState<boolean>(false);
+
+  return (
+    <Breadcrumb.List className="BreadcrumbList">
+      <!-- ... -->
+      <Breadcrumb.Link focused>A</Breadcrumb.Link>
+    </Breadcrumb.List>
+  );
+};
+```
+
+`🔔Tip: <Breadcrumb.List> 내에서 가장 마지막의 <Breadcrumb.Link>에 사용하는걸 권장합니다.`
+
+#### as
+
+`Breadcrumb.Link`에 ui와 기능을 변경을 위해 제공되는 `props`입니다.
+
+`as`는 `props`로 받는 파라미터의 타입은 아래와 같습니다.
+
+##### AsProps
+
+| Prop                         |                       Type                       | Required | Default Value |
+| :--------------------------- | :----------------------------------------------: | :------: | :-----------: |
+| [href](#href)                |                      String                      |    -     |       -       |
+| [focused](#focused)          |                     Boolean                      |    -     |     false     |
+| [onClick](#onClick)          | (e: React.MouseEvent<HTMLAnchorElement>) => void |    -     |       -       |
+| [className](#Link-className) |                      String                      |    -     |       -       |
+
+전달받은 `props`를 통해 `<Breadcrumb.Link>`기본 `props`들을 커스텀하고자 하는 `Element`에 부여할 수 있습니다.
+
+```ts
+import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
+import Link from 'next/link';
+
+const components = () => {
+  const [open, setOpen] = React.useState<boolean>(false);
+
+  return (
+    <Breadcrumb.List className="BreadcrumbList">
+      <!-- ... -->
+      <Breadcrumb.Link as={(props) =>
+        <Link {...props}>go home</Link>}
+      />
+    </Breadcrumb.List>
+  );
+};
+```
+
+#### onClick
+
+`Breadcrumb.Link`에 `onClick`이벤트를 전달하기 위한 `props`입니다.
+
+```ts
+import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
+
+const components = () => {
+  const [open, setOpen] = React.useState<boolean>(false);
+
+  return (
+    <Breadcrumb.List className="BreadcrumbList">
+      <!-- ... -->
+      <Breadcrumb.Link onClick={() =>
+        alert("click!!")
+      }>
+        A
+      </Breadcrumb.Link>
+    </Breadcrumb.List>
+  );
+};
+```
+
+`🔔Tip: <Breadcrumb.List> 내에서 가장 마지막의 <Breadcrumb.Link>에 사용하는걸 권장합니다.`
+
+#### Link-className
+
+`Breadcrumb.Link`에 `className` class를 전달하기 위한 `props`입니다.
+
+```ts
+import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
+
+const components = () => {
+
+  return (
+    <Breadcrumb.List>
+      <Breadcrumb.Link className="BreadcrumbItem">A</Breadcrumb.Link>
+      <!-- ... -->
+    </Breadcrumb.List>
+  );
+}
+```
+
+#### Link-children
+
+`Breadcrumb.Link`에 `children`을 전달하기 위한 `props`입니다.
+
+보여주고자 하는 아이템의 `Text`를 전달하면 `Link`의 기본 ui를 사용할 수 있습니다.
+
+```ts
+import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
+
+const components = () => {
+  return (
+    <Breadcrumb.List>
+      <Breadcrumb.Link>A</Breadcrumb.Link>
+      <!-- ... -->
+    </Breadcrumb.List>
+  );
+};
+```
+
+### Separator
+
+`Breadcrumb.Separator`은 Breadcrumb의 `Item`사이에 상하관계를 보여주기 위해 존재합니다.
+
+| Prop                              |  Type  | Required | Default Value |
+| :-------------------------------- | :----: | :------: | :-----------: |
+| [className](#Separator-className) | String |    -     |       -       |
+
+#### Separator-className
+
+`Breadcrumb.Separator`에 `className` class를 전달하기 위한 `props`입니다.
+
+```ts
+import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
+
+const components = () => {
+
+  return (
+    <Breadcrumb.List>
+      <Breadcrumb.Item>A</Breadcrumb.Item>
+      <Breadcrumb.Seperator className="BreadcrumbSeperator">
+      <Breadcrumb.Item>A</Breadcrumb.Item>
+      <!-- ... -->
+    </Breadcrumb.List>
+  );
+}
+```
+
+### Ellipsis
+
+`Breadcrumb.Ellipsis`은 Breadcrumb의 목록이 길어졌을때 표시하기 위한 축소 아이콘입니다.
+
+| Prop                             |  Type  | Required | Default Value |
+| :------------------------------- | :----: | :------: | :-----------: |
+| [className](#Ellipsis-className) | String |    -     |       -       |
+
+#### Ellipsis-className
+
+`Breadcrumb.Ellipsis`에 `className` class를 전달하기 위한 `props`입니다.
+
+```ts
+import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
+
+const components = () => {
+
+  return (
+    <Breadcrumb.List>
+      <!-- ... -->
+      <Breadcrumb.Seperator>
+      <Breadcrumb.Ellipsis className="BreadcrumbEllipsis">
+      <Breadcrumb.Seperator>
+      <!-- ... -->
+    </Breadcrumb.List>
+  );
+}
+```
+
+#### Ellipsis-dropdown
+
+`Breadcrumb.Ellipsis`에 `dropdown`을 적용한 예시입니다.
+
+```ts
+import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
+
+const components = () => {
+  return (
+    <Dropdown.Root value={dOpen} onChange={handleChangeValue}>
+      <Dropdown.Trigger
+        as={<Breadcrumb.Ellipsis />}
+        className={cx("Trigger")}
+      />
+      <Dropdown.Menu className={cx("Menu")}>
+        {options.map((option, idx) => {
+          return (
+            <a key={idx} href={option.value}>
+              <Dropdown.Item value={option.value} className={cx("Item")}>
+                {option.label}
+              </Dropdown.Item>
+            </a>
+          );
+        })}
+      </Dropdown.Menu>
+    </Dropdown.Root>
+  );
+};
+```
+
+## Example
+
+프로젝트를 실행하고 해당 [Link](http://localhost:3000/users/breadcrumb)에서 확인할 수 있습니다.

package/src/components/Button/Button.colors.tsx

@@ -0,0 +1,322 @@
+import React from "react";
+import { SimenticColor, Transparent } from "../../styles/baseColor";
+import { colorThemes as colorSet } from "../../styles/color2";
+
+// 훅 함수 유지
+const useButtonColors = (shapeType: "square" | "round" = "square") => {
+  // 객체에서 shapeType에 따라 적절한 색상 설정 반환
+
+  const buttonColorsConfig = React.useMemo(() => {
+    return {
+      square: {
+        primary: {
+          contained: {
+            backgroundColor: colorSet.primary.pMain,
+            color: colorSet.primary.pContrastText,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: colorSet.primary.pDark,
+              color: colorSet.primary.pContrastText,
+              borderColor: "transparent",
+            },
+          },
+          outlined: {
+            backgroundColor: "transparent",
+            color: colorSet.primary.pMain,
+            borderColor: colorSet.primary.p48,
+            hover: {
+              backgroundColor: colorSet.primary.p8,
+              color: colorSet.primary.pMain,
+              borderColor: colorSet.primary.pMain,
+            },
+          },
+          soft: {
+            backgroundColor: colorSet.primary.p8,
+            color: `var(--swapDarkLightPrimary, ${colorSet.light.swapDarkLightPrimary})`,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: colorSet.primary.p16,
+              color: `var(--swapDarkLightPrimary, ${colorSet.light.swapDarkLightPrimary})`,
+              borderColor: "transparent",
+            },
+          },
+          text: {
+            backgroundColor: "transparent",
+            color: colorSet.primary.pMain,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: colorSet.primary.p8,
+              color: `var(--swapDarkLightDeepGreen, ${colorSet.light.swapDarkLightDeepGreen})`,
+              borderColor: "transparent",
+            },
+          },
+        },
+        inherit: {
+          contained: {
+            backgroundColor: `var(--inheritBgcolor, ${colorSet.light.inheritBgcolor})`,
+            color: `var(--textContrast, ${colorSet.light.textContrast})`,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: `var(--inheritHover, ${colorSet.light.inheritHover})`,
+              color: `var(--textContrast, ${colorSet.light.textContrast})`,
+              borderColor: "transparent",
+            },
+          },
+          outlined: {
+            backgroundColor: "transparent",
+            color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+            borderColor: Transparent.grey32,
+            hover: {
+              backgroundColor: `var(--actionHover, ${colorSet.light.actionHover})`,
+              color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+              borderColor: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+            },
+          },
+          soft: {
+            backgroundColor: Transparent.grey8,
+            color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: Transparent.grey24,
+              color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+              borderColor: "transparent",
+            },
+          },
+          text: {
+            backgroundColor: "transparent",
+            color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: `var(--actionHover, ${colorSet.light.actionHover})`,
+              color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+              borderColor: "transparent",
+            },
+          },
+        },
+        red: {
+          contained: {
+            backgroundColor: SimenticColor.red.Main,
+            color: colorSet.primary.pContrastText,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: SimenticColor.red.Dark,
+              color: `var(--textContrast, ${colorSet.light.textContrast})`,
+              borderColor: "transparent",
+            },
+          },
+          outlined: {
+            backgroundColor: "transparent",
+            color: SimenticColor.red.Main,
+            borderColor: Transparent.red48,
+            hover: {
+              backgroundColor: Transparent.red8,
+              color: SimenticColor.red.Main,
+              borderColor: SimenticColor.red.Main,
+            },
+          },
+          soft: {
+            backgroundColor: Transparent.red8,
+            color: `var(--swapDarkLightRed, ${colorSet.light.swapDarkLightRed})`,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: Transparent.red16,
+              color: `var(--swapDarkLightRed, ${colorSet.light.swapDarkLightRed})`,
+              borderColor: "transparent",
+            },
+          },
+          text: {
+            backgroundColor: "transparent",
+            color: SimenticColor.red.Main,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: Transparent.red8,
+              color: SimenticColor.red.Dark,
+              borderColor: "transparent",
+            },
+          },
+        },
+        disabled: {
+          contained: {
+            backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+            borderColor: "transparent",
+          },
+          outlined: {
+            backgroundColor: "transparent",
+            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+            borderColor: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
+          },
+          soft: {
+            backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+            borderColor: "transparent",
+          },
+          text: {
+            backgroundColor: "transparent",
+            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+            borderColor: "transparent",
+          },
+        },
+      },
+      round: {
+        primary: {
+          contained: {
+            backgroundColor: colorSet.primary.pMain,
+            color: colorSet.primary.pContrastText,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: colorSet.primary.pDark,
+              color: colorSet.primary.pContrastText,
+              borderColor: "transparent",
+            },
+          },
+          outlined: {
+            backgroundColor: "transparent",
+            color: colorSet.primary.pMain,
+            borderColor: colorSet.primary.p48,
+            hover: {
+              backgroundColor: colorSet.primary.p8,
+              color: colorSet.primary.pMain,
+              borderColor: colorSet.primary.p48,
+            },
+          },
+          soft: {
+            backgroundColor: colorSet.primary.p8,
+            color: `var(--swapDarkLightPrimary, ${colorSet.light.swapDarkLightPrimary})`,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: colorSet.primary.p16,
+              color: `var(--swapDarkLightPrimary, ${colorSet.light.swapDarkLightPrimary})`,
+              borderColor: "transparent",
+            },
+          },
+          text: {
+            backgroundColor: "transparent",
+            color: colorSet.primary.pMain,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: colorSet.primary.p8,
+              color: `var(--swapDarkLightDeepGreen, ${colorSet.light.swapDarkLightDeepGreen})`,
+              borderColor: "transparent",
+            },
+          },
+        },
+        inherit: {
+          contained: {
+            backgroundColor: `var(--inheritBgcolor, ${colorSet.light.inheritBgcolor})`,
+            color: `var(--textContrast, ${colorSet.light.textContrast})`,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: `var(--inheritHover, ${colorSet.light.inheritHover})`,
+              color: `var(--textContrast, ${colorSet.light.textContrast})`,
+              borderColor: "transparent",
+            },
+          },
+          outlined: {
+            backgroundColor: "transparent",
+            color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+            borderColor: Transparent.grey32,
+            hover: {
+              backgroundColor: `var(--actionHover, ${colorSet.light.actionHover})`,
+              color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+              borderColor: Transparent.grey32,
+            },
+          },
+          soft: {
+            backgroundColor: Transparent.grey8,
+            color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: Transparent.grey24,
+              color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+              borderColor: "transparent",
+            },
+          },
+          text: {
+            backgroundColor: "transparent",
+            color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: `var(--actionHover, ${colorSet.light.actionHover})`,
+              color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+              borderColor: "transparent",
+            },
+          },
+        },
+        red: {
+          contained: {
+            backgroundColor: SimenticColor.red.Main,
+            color: colorSet.primary.pContrastText,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: SimenticColor.red.Dark,
+              color: `var(--textContrast, ${colorSet.light.textContrast})`,
+              borderColor: "transparent",
+            },
+          },
+          outlined: {
+            backgroundColor: "transparent",
+            color: SimenticColor.red.Main,
+            borderColor: Transparent.red48,
+            hover: {
+              backgroundColor: Transparent.red8,
+              color: SimenticColor.red.Main,
+              borderColor: Transparent.red48,
+            },
+          },
+          soft: {
+            backgroundColor: Transparent.red8,
+            color: `var(--swapDarkLightRed, ${colorSet.light.swapDarkLightRed})`,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: Transparent.red16,
+              color: `var(--swapDarkLightRed, ${colorSet.light.swapDarkLightRed})`,
+              borderColor: "transparent",
+            },
+          },
+          text: {
+            backgroundColor: "transparent",
+            color: SimenticColor.red.Main,
+            borderColor: "transparent",
+            hover: {
+              backgroundColor: Transparent.red8,
+              color: SimenticColor.red.Dark,
+              borderColor: "transparent",
+            },
+          },
+        },
+        disabled: {
+          contained: {
+            backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+            borderColor: "transparent",
+          },
+          outlined: {
+            backgroundColor: "transparent",
+            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+            borderColor: `var(--actionDisabled, ${colorSet.light.actionDisabled})`,
+          },
+          soft: {
+            backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+            borderColor: "transparent",
+          },
+          text: {
+            backgroundColor: "transparent",
+            color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+            borderColor: "transparent",
+          },
+        },
+      },
+    };
+  }, []);
+
+  return {
+    primary: buttonColorsConfig[shapeType].primary,
+    inherit: buttonColorsConfig[shapeType].inherit,
+    disabled: buttonColorsConfig[shapeType].disabled,
+    red: buttonColorsConfig[shapeType].red,
+  };
+};
+
+export default useButtonColors;

package/src/components/Button/Button.context.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+type Variant = "outlined" | "contained" | "soft" | "text";
+
+type ButtonContextType = {
+  // colorScheme: ColorScheme;
+  /** Color Type */
+  shapeType: "square" | "round";
+  colorType: "primary" | "inherit" | "red";
+  variant: Variant;
+  isLoading: boolean;
+  spinner?: React.ReactNode;
+  loadingText: string;
+  size?: "small" | "medium" | "large";
+  disabled?: boolean;
+  isFitted?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+export const initialState: ButtonContextType = {
+  // colorScheme: "gray",
+  shapeType: "square",
+  colorType: "primary",
+  variant: "contained",
+  isLoading: false,
+  loadingText: "Loading...",
+  disabled: false,
+  size: "medium",
+  isFitted: false,
+};
+
+export const ButtonContext =
+  React.createContext<ButtonContextType>(initialState);
+
+export type ButtonProviderProps = React.PropsWithChildren<
+  Partial<ButtonContextType>
+> & {
+  className?: string;
+};
+
+export const ButtonProvider = (props: ButtonProviderProps) => {
+  const { children, ...rest } = props;
+  return (
+    <ButtonContext.Provider value={{ ...initialState, ...rest }}>
+      {children}
+    </ButtonContext.Provider>
+  );
+};