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

package/src/components/LNB/README.md

@@ -1,411 +0,0 @@
-# LNB UI
-
-## Contents List
-
-1. [Quick Start](#QuickStart)
-2. [Reference](#Reference)
-3. [Example](#Example)
-
-## Quick Start
-
-```ts
-import { LMB } from "@weing-dev/ui-kit-primitive";
-const components = () => {
-  //...
-
-  return (
-    <LNB.Root>
-      <LNB.Logo />
-      <LNB.List />
-    </LNB.Root>
-  );
-};
-```
-
-## Reference
-
-### Root
-
-| prop | Type                                              | Required | Default Value |
-| ---- | ------------------------------------------------- | :------: | :-----------: |
-| list | {                                                 |          |               |
-|      | label: string;                                    |    ○     |       -       |
-|      | icon?: React.ComponentProps["name"];              |    -     |       -       |
-|      | subtitle?: string;                                |    -     |       -       |
-|      | type: "full" \| "secondary" \| "list" \| "title"; |    ○     |       -       |
-|      | href: string;                                     |    ○     |       -       |
-|      | isPreparing: boolean;                             |    ○     |       -       |
-|      | children: LNBContextType["list"];                 |    ○     |       -       |
-|      | isOpen?: boolean;                                 |    -     |     true      |
-|      | isActive?: boolean;                               |    -     |     false     |
-|      | }[];                                              |          |               |
-
-#### list
-
-`LNB`의 `Root`에 추가할 배열 prop입니다. 해당 prop을 바탕으로 `List` 컴포넌트에서 재귀 참조 방식으로 `Item`을 렌더링합니다. `children`은 해당 `list` prop과 동일한 `type`을 가지고 있습니다. 이외 하위 항목은 후에 서술할 `Item` prop와 동일합니다.
-
-### Item
-
-| prop        | Type                                       | Required | Default Value |
-| ----------- | ------------------------------------------ | :------: | :-----------: |
-| className   | string                                     |    -     |       -       |
-| label       | string                                     |    ○     |       -       |
-| icon        | React.ComponentProps<typeof Icon>["name"]  |    -     |       -       |
-| subtitle    | string                                     |    -     |       -       |
-| type        | "full" \| "secondary" \| "list" \| "title" |    ○     |       -       |
-| href        | string                                     |    ○     |       -       |
-| disabled    | boolean                                    |    -     |     false     |
-| hasChildren | boolean                                    |    ○     |       -       |
-| isOpen      | boolean                                    |    -     |     true      |
-| isActive    | boolean                                    |    -     |     false     |
-
-#### className
-
-`Item` 컴포넌트에 추가적으로 스타일을 수정하고자 할 경우, 추가할수 있는 prop입니다. 현재 style은 `classname/bind`를 사용해서 구현했기 때문에 해당 방식과 동일하게 작성해주시면 됩니다.
-
-```ts
-import { LMB } from "@weing-dev/ui-kit-primitive";
-import cn from "classnames/bind";
-import styles from "test.scss";
-
-const cx = cn.bind(styles);
-const components = () => {
-  //...
-
-  return (
-    <LNB.Root list={[]}>
-      <LNB.Item className={cx("Something")} />
-    </LNB.Root>
-  );
-};
-```
-
-#### label
-
-`LNB`의 `Item`에 표시되는 텍스트 prop 입니다.
-
-```ts
-import { LMB } from "@weing-dev/ui-kit-primitive";
-import cn from "classnames/bind";
-import styles from "test.scss";
-
-const cx = cn.bind(styles);
-const components = () => {
-  //...
-
-  return (
-    <LNB.Root list={[]}>
-      <LNB.Item className={cx("Something")} label={"test"} />
-    </LNB.Root>
-  );
-};
-```
-
-#### Icon
-
-`LNB`의 `Item` 좌측에 표시될 `Icon` 컴포넌트의 name prop입니다. value의 type은 해당 프로젝트에 존재하는 `Icon`컴포넌트의 name props type과 동일합니다.
-
-```ts
-import { LMB } from "@weing-dev/ui-kit-primitive";
-import cn from "classnames/bind";
-import styles from "test.scss";
-
-const cx = cn.bind(styles);
-const components = () => {
-  //...
-
-  return (
-    <LNB.Root>
-      <LNB.Item
-        className={cx("Something")}
-        label={"test"}
-        icon={"Personcard"}
-      />
-    </LNB.Root>
-  );
-};
-```
-
-#### subtitle
-
-`LNB`의 `Item`에 존재하는 `label`의 하단에 표시되는 텍스트 prop입니다. 후에 서술할 `type`이라는 prop중 `full`일 경우에만 `subtitle`이 표시됩니다.
-
-```ts
-import { LMB } from "@weing-dev/ui-kit-primitive";
-import cn from "classnames/bind";
-import styles from "test.scss";
-
-const cx = cn.bind(styles);
-const components = () => {
-  //...
-
-  return (
-    <LNB.Root>
-      <LNB.Item
-        className={cx("Something")}
-        label={"test"}
-        icon={"Personcard"}
-        subtitle={"subtitle"}
-      />
-    </LNB.Root>
-  );
-};
-```
-
-#### type
-
-`LNB`에서 생성될 `Item`의 타입을 선택하기 위한 prop입니다. `type`에 따라서 `padding`값과, `subtitle` 표시 여부 등이 결정됩니다. 앞서 서술했듯이, `type`의 값이 `full` 인 경우에만 `subtitle`이 표시됩니다.
-
-```ts
-import { LMB } from "@weing-dev/ui-kit-primitive";
-import cn from "classnames/bind";
-import styles from "test.scss";
-
-const cx = cn.bind(styles);
-const components = () => {
-  //...
-
-  return (
-    <LNB.Root>
-      <LNB.Item
-        className={cx("Something")}
-        type={"full"}
-        label={"test"}
-        icon={"Personcard"}
-        subtitle={"subtitle"}
-      />
-    </LNB.Root>
-  );
-};
-```
-
-#### href
-
-`LNB`에서 `Item`클릭시 이동하는 페이지 경로를 지정하기 위한 prop입니다. 후에 서술할 `hasChildren`이 `false`인 경우에만 클릭시 페이지 이동 이벤트가 호출됩니다.
-
-```ts
-import { LMB } from "@weing-dev/ui-kit-primitive";
-import cn from "classnames/bind";
-import styles from "test.scss";
-
-const cx = cn.bind(styles);
-const components = () => {
-  //...
-
-  return (
-    <LNB.Root>
-      <LNB.Item
-        className={cx("Something")}
-        type={"full"}
-        label={"test"}
-        icon={"Personcard"}
-        subtitle={"subtitle"}
-        href={"/user"}
-      />
-    </LNB.Root>
-  );
-};
-```
-
-#### disabled
-
-`LNB`의 `Item`의 활성화 여부를 판단하기 위한 prop입니다. `true`로 설정시 `click` 및 `hover` 이벤트는 호출되지 않습니다.
-
-```ts
-import { LMB } from "@weing-dev/ui-kit-primitive";
-import cn from "classnames/bind";
-import styles from "test.scss";
-
-const cx = cn.bind(styles);
-const components = () => {
-  //...
-
-  return (
-    <LNB.Root>
-        <LNB.Item
-          className={cx("Something")}
-          type={"full"}
-          label={"test"}
-          icon={"Personcard"}
-          subtitle={"subtitle"}
-          href={"/user"}
-          disabled={false}
-        />
-  );
-};
-```
-
-#### hasChildren
-
-`LNB`의 `Item`이 하위 항목을 보유하고 있는지 판단하기 위한 prop입니다. 해당 prop을 `true`로 설정하면 `Item`클릭 시, 페이지 이동이 되지 않는 대신 `Item`내부에 작성한 `children`을 토글합니다.
-
-```ts
-import { LMB } from "@weing-dev/ui-kit-primitive";
-import cn from "classnames/bind";
-import styles from "test.scss";
-
-const cx = cn.bind(styles);
-const components = () => {
-  //...
-
-  return (
-    <LNB.Root>
-        <LNB.Item
-          className={cx("Something")}
-          type={"full"}
-          label={"test"}
-          icon={"Personcard"}
-          subtitle={"subtitle"}
-          href={"/user/management"}
-          disabled={false}
-          hasChildren={false}
-        />
-  );
-};
-```
-
-#### isOpen
-
-`LNB`의 `Item`의 하위 링크 표시 여부를 결정하는 prop입니다. 해당 prop을 바탕으로 `hasChildren`이 true일 경우에는 해당 prop을 초기값으로 하는 state가 토글되면서 하위 링크 표시를 토글합니다.
-
-```ts
-import { LMB } from "@weing-dev/ui-kit-primitive";
-import cn from "classnames/bind";
-import styles from "test.scss";
-
-const cx = cn.bind(styles);
-const components = () => {
-  //...
-
-  return (
-    <LNB.Root>
-        <LNB.Item
-          className={cx("Something")}
-          type={"full"}
-          label={"test"}
-          icon={"Personcard"}
-          subtitle={"subtitle"}
-          href={"/user/management"}
-          disabled={false}
-          hasChildren={false}
-          isOpen={true}
-        />
-  );
-};
-```
-
-#### isActive
-
-`LNB`의 `Item`의 href와 현재 페이지 path값의 동일 여부를 전달하는 boolean prop 입니다. `isActive`의 값이 `true`인 경우 `Item`의 스타일이 변경됩니다.
-
-```ts
-import { LMB } from "@weing-dev/ui-kit-primitive";
-import cn from "classnames/bind";
-import styles from "test.scss";
-
-const cx = cn.bind(styles);
-const components = () => {
-  //...
-
-  return (
-    <LNB.Root>
-        <LNB.Item
-          className={cx("Something")}
-          type={"full"}
-          label={"test"}
-          icon={"Personcard"}
-          subtitle={"subtitle"}
-          href={"/user/management"}
-          disabled={false}
-          hasChildren={false}
-          isOpen={true}
-          isActive={false}
-        />
-  );
-};
-```
-
-### List
-
-`LNB`의 `Root`에 가지고 있는 prop을 바탕으로 재귀 참조 방식을 사용해서 `Item`을 렌더링하는 컴포넌트입니다.
-
-```ts
-const List = (props: LNBListProps) => {
-  const { className } = props;
-  const context = React.useContext(LNBContext);
-
-  const renderList = (list: LNBProviderProps["list"]) => {
-    return list.map((item) => {
-      return (
-        <Item
-          key={item.href}
-          label={item.label}
-          subtitle={item.subtitle}
-          icon={item.icon}
-          type={item.type}
-          href={item.href}
-          disabled={item.isPreparing}
-          hasChildren={item.children && item.children.length > 0}
-          isOpen={item.isOpen || true}
-          isActive={item.isActive || false}
-        >
-          {item.children && renderList(item.children)}
-        </Item>
-      );
-    });
-  };
-  return (
-    <div className={cx("List", className)}>{renderList(context.list)}</div>
-  );
-};
-```
-
-### Logo
-
-| prop      | Type   | Required | Default Value |
-| --------- | ------ | :------: | :-----------: |
-| src       | string |    ○     |       -       |
-| className | string |    -     |       -       |
-
-#### src
-
-`LNB` 의 `Logo`내부에 존재하는 `img`태그의 src에 들어갈 prop입니다.
-
-```ts
-import { LMB } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  //...
-
-  return (
-    <LNB.Root list={[]}>
-        <LNB.Logo src={""}>
-    </LNB.Root>
-  );
-};
-```
-
-#### className
-
-`Logo` 컴포넌트에 추가적으로 스타일을 수정하고자 할 경우, 추가할수 있는 prop입니다. 현재 style은 `classname/bind`를 사용해서 구현했기 때문에 해당 방식과 동일하게 작성해주시면 됩니다.
-
-```ts
-import { LMB } from "@weing-dev/ui-kit-primitive";
-import cn from "classnames/bind";
-import styles from "test.scss";
-
-const cx = cn.bind(styles);
-const components = () => {
-  //...
-
-  return (
-    <LNB.Root list={[]}>
-        <LNB.Logo src={""} className={cx("Test")}>
-    </LNB.Root>
-  );
-};
-```
-
-## Example
-
-`packages\ui-kit-extension` 경로로 이동하신 뒤 프로젝트 실행후 해당 [Link](http://localhost:3001/lnb)에서 확인할 수 있습니다.

package/src/components/LNB/makeNavigation.ts

@@ -1,51 +0,0 @@
-import { LOCALE_MAP } from "@/constant/locale.constant";
-
-/** 네비게이션 생성 */
-export function makeNavigation<T = never>({
-  list,
-  depth = 1,
-  isCommerce = false,
-  maxDepth,
-  pathName,
-}: {
-  list: Navigation<T>[];
-  depth?: number;
-  isCommerce?: boolean;
-  maxDepth?: number;
-  pathName: string;
-}) {
-  return list.map((navigation) => {
-    const href = navigation.href;
-    const localList: string[] = Array.from(LOCALE_MAP.keys());
-    const isOpen = pathName?.split("/").some((path) => localList.includes(path))
-      ? pathName?.split("/")[depth + 1] === navigation.key
-      : pathName?.split("/")[depth] === navigation.key;
-    const isActive =
-      navigation.children && navigation.children.length > 0
-        ? false // 자식이 있으면 항상 비활성화
-        : pathName?.split("/").some((path) => localList.includes(path))
-        ? "/" + pathName.split("/").slice(2).join("/") === href ||
-          ("/" + pathName.split("/").slice(2).join("/")).startsWith(href + "/")
-        : pathName === href || pathName.startsWith(href + "/");
-
-    // navigation 에 isOpen, isActive 추가
-    navigation.isOpen = isOpen;
-    navigation.isActive = isActive;
-    const children: any = navigation.children
-      ? makeNavigation({
-          list: navigation?.children || [],
-          depth: depth + 1,
-          maxDepth,
-          isCommerce,
-          pathName,
-        })
-      : [];
-
-    return {
-      ...navigation,
-      href,
-      children: maxDepth && depth >= maxDepth ? [] : children,
-      depth,
-    };
-  });
-}

package/src/components/LNB/navigation.d.ts

@@ -1,15 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-type Navigation<T = never> = {
-  label: string;
-  subtitle?: string;
-  key: string;
-  href: string;
-  children?: Navigation<T>[];
-  isPreparing: boolean;
-  type: "full" | "secondary" | "list" | "title";
-  status?: string;
-  icon?: React.ComponentProps<typeof Icon>["name"];
-  isOpen?: boolean;
-  isActive?: boolean;
-  [key: string]: any;
-};

package/src/components/LNB/navigation.json

@@ -1,211 +0,0 @@
-[
-  {
-    "label": "회원",
-    "subtitle": "회원 관리",
-    "key": "user",
-    "type": "full",
-    "href": "/user",
-    "icon": "Personcard",
-    "children": [
-      {
-        "label": "회원관리",
-        "key": "management",
-        "type": "secondary",
-        "href": "/user/management",
-        "icon": "Personcard",
-        "isPreparing": false
-      },
-      {
-        "label": "회원등급",
-        "key": "grade",
-        "type": "secondary",
-        "href": "/user/grade",
-        "icon": "Personcard",
-        "isPreparing": false
-      },
-      {
-        "label": "알림톡",
-        "key": "notify",
-        "type": "secondary",
-        "href": "/user/notify",
-        "icon": "Personcard",
-        "isPreparing": false
-      }
-    ],
-    "isPreparing": false
-  },
-  {
-    "label": "상품",
-    "key": "products",
-    "href": "/products",
-    "icon": null,
-    "type": "title",
-    "children": [
-      {
-        "label": "카테고리",
-        "key": "category",
-        "href": "/products/category",
-        "icon": null,
-        "type": "list",
-        "isPreparing": true
-      },
-      {
-        "label": "상품",
-        "key": "product",
-        "type": "list",
-        "href": "/products/product",
-        "icon": null,
-        "isPreparing": false
-      },
-      {
-        "label": "옵션 관리",
-        "key": "option",
-        "href": "/products/option",
-        "type": "list",
-        "icon": null,
-        "isPreparing": false,
-        "children": [
-          {
-            "label": "옵션 관리 테스트",
-            "key": "test",
-            "href": "/products/option/test",
-            "type": "list",
-            "icon": null,
-            "isPreparing": false,
-            "children": [
-              {
-                "label": "옵션 관리 테스트 어드민",
-                "key": "admin",
-                "href": "/products/option/test/admin",
-                "type": "list",
-                "icon": null,
-                "isPreparing": false
-              },
-              {
-                "label": "옵션 관리 테스트 사용자",
-                "key": "user",
-                "href": "/products/option/test/user",
-                "type": "list",
-                "icon": null,
-                "isPreparing": false
-              }
-            ]
-          },
-          {
-            "label": "옵션 관리 테스트2",
-            "key": "test2",
-            "href": "/products/option/test2",
-            "type": "list",
-            "icon": null,
-            "isPreparing": false
-          }
-        ]
-      },
-      {
-        "label": "옵션 세트 관리",
-        "key": "option-set",
-        "href": "/products/option-set",
-        "type": "list",
-        "icon": null,
-        "isPreparing": false
-      }
-    ],
-    "isPreparing": false
-  },
-  {
-    "label": "문의",
-    "key": "inquiry",
-    "type": "title",
-    "href": "/inquiry",
-    "icon": "EditSquare",
-    "children": [
-      {
-        "label": "대량문의",
-        "key": "bulk",
-        "type": "list",
-        "icon": null,
-        "href": "/inquiry/bulk",
-        "isPreparing": false,
-        "children": [
-          {
-            "label": "대량문의 상품",
-            "key": "products",
-            "href": "/inquiry/bulk/products",
-            "type": "list",
-            "icon": null,
-            "isPreparing": false,
-            "children": [
-              {
-                "label": "대량문의 상품 옵션",
-                "key": "option",
-                "href": "/inquiry/bulk/products/option",
-                "type": "list",
-                "icon": null,
-                "isPreparing": false,
-                "children": [
-                  {
-                    "label": "대량문의 상품 옵션 테스트1",
-                    "key": "test1",
-                    "href": "/inquiry/bulk/products/option/test1",
-                    "type": "list",
-                    "icon": null,
-                    "isPreparing": false
-                  },
-                  {
-                    "label": "대량문의 상품 옵션 테스트2",
-                    "key": "test2",
-                    "href": "/inquiry/bulk/products/option/test2",
-                    "type": "list",
-                    "icon": null,
-                    "isPreparing": false
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "label": "대량문의 템플릿",
-            "key": "template",
-            "href": "/inquiry/bulk/template",
-            "type": "list",
-            "icon": null,
-            "isPreparing": false
-          }
-        ]
-      },
-      {
-        "label": "일반문의",
-        "key": "general",
-        "href": "/inquiry/general",
-        "type": "list",
-        "icon": null,
-        "isPreparing": false
-      },
-      {
-        "label": "제휴문의",
-        "key": "partnership",
-        "href": "/inquiry/partnership",
-        "type": "list",
-        "icon": null,
-        "isPreparing": false
-      },
-      {
-        "label": "공지사항 관리",
-        "key": "notice",
-        "href": "/inquiry/notice",
-        "type": "list",
-        "icon": null,
-        "isPreparing": false
-      },
-      {
-        "label": "FAQ",
-        "key": "faq",
-        "href": "/inquiry/faq",
-        "type": "list",
-        "icon": null,
-        "isPreparing": false
-      }
-    ],
-    "isPreparing": false
-  }
-]