@weing-dev/ui-kit-primitive 0.0.0

package/src/components/LNB/README.md

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

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

@@ -0,0 +1,15 @@
+/* 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

@@ -0,0 +1,211 @@
+[
+  {
+    "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
+  }
+]