@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Icons/WarningAmber.tsx

@@ -0,0 +1,21 @@
+// Auto-generated file created by svgr-cli source svg-template.js
+// Run yarn icons:create to update
+// Do not edit
+import type { SVGProps } from "react";
+const SvgWarningAmber = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 32 32"
+    fill="none"
+    width={props.width || 24}
+    height={props.height || 24}
+    style={props.style || {}}
+    onClick={props.onClick}
+    {...props}
+  >
+    <path
+      d="M16 7.32495L26.04 24.6716H5.96L16 7.32495ZM3.65333 23.3383C2.62667 25.1116 3.90667 27.3383 5.96 27.3383H26.04C28.0933 27.3383 29.3733 25.1116 28.3467 23.3383L18.3067 5.99162C17.28 4.21829 14.72 4.21829 13.6933 5.99162L3.65333 23.3383ZM14.6667 14.005V16.6716C14.6667 17.405 15.2667 18.005 16 18.005C16.7333 18.005 17.3333 17.405 17.3333 16.6716V14.005C17.3333 13.2716 16.7333 12.6716 16 12.6716C15.2667 12.6716 14.6667 13.2716 14.6667 14.005ZM14.6667 20.6716H17.3333V23.3383H14.6667V20.6716Z"
+      fill="#C4CDD5"
+    />
+  </svg>
+);
+export default SvgWarningAmber;

package/src/components/Icons/WarningFilled.tsx

@@ -0,0 +1,20 @@
+// Auto-generated file created by svgr-cli source svg-template.js
+// Run yarn icons:create to update
+// Do not edit
+import type { SVGProps } from "react";
+const SvgWarningFilled = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    width={props.width || 24}
+    height={props.height || 24}
+    style={props.style || {}}
+    onClick={props.onClick}
+    {...props}
+  >
+    <path
+      d="M1 21 12 2l11 19H1Zm11.104-2.925a.738.738 0 0 0 .746-.754.738.738 0 0 0-.754-.746.738.738 0 0 0-.746.754.738.738 0 0 0 .754.746ZM11.35 15.3h1.5V9.7h-1.5v5.6Z"
+      fill={props.color || `#121416`}
+    />
+  </svg>
+);
+export default SvgWarningFilled;

package/src/components/Icons/index.ts

@@ -0,0 +1,62 @@
+export { default as Add } from "./Add";
+export { default as AddAPhoto } from "./AddAPhoto";
+export { default as ApprovalInactive } from "./ApprovalInactive";
+export { default as ArrowRight } from "./ArrowRight";
+export { default as AttachFile } from "./AttachFile";
+export { default as CancleFilled } from "./CancleFilled";
+export { default as Cancle } from "./Cancle";
+export { default as CartFilled } from "./CartFilled";
+export { default as Cart } from "./Cart";
+export { default as Check } from "./Check";
+export { default as CheckBoxRound } from "./CheckBoxRound";
+export { default as CheckCircle } from "./CheckCircle";
+export { default as Close } from "./Close";
+export { default as Company } from "./Company";
+export { default as Download } from "./Download";
+export { default as DragHandle } from "./DragHandle";
+export { default as Eco } from "./Eco";
+export { default as EditSquare } from "./EditSquare";
+export { default as ErrorFilled } from "./ErrorFilled";
+export { default as Error } from "./Error";
+export { default as ExpandAll } from "./ExpandAll";
+export { default as ExpandLess } from "./ExpandLess";
+export { default as ExpandMore } from "./ExpandMore";
+export { default as Factory } from "./Factory";
+export { default as FileUpload } from "./FileUpload";
+export { default as FilecheckInactive } from "./FilecheckInactive";
+export { default as GoBefore } from "./GoBefore";
+export { default as GoNext } from "./GoNext";
+export { default as HamburgerMenu } from "./HamburgerMenu";
+export { default as ImagecheckPlay } from "./ImagecheckPlay";
+export { default as Inventory } from "./Inventory";
+export { default as KakaoTalk } from "./KakaoTalk";
+export { default as ListAll } from "./ListAll";
+export { default as LocalShipping } from "./LocalShipping";
+export { default as Logout } from "./Logout";
+export { default as Menu } from "./Menu";
+export { default as Minus } from "./Minus";
+export { default as ModeEdit } from "./ModeEdit";
+export { default as More } from "./More";
+export { default as NaverBlog } from "./NaverBlog";
+export { default as Naver } from "./Naver";
+export { default as OrderApprove } from "./OrderApprove";
+export { default as OrderInactive } from "./OrderInactive";
+export { default as OrderPlay } from "./OrderPlay";
+export { default as Outward } from "./Outward";
+export { default as PayApprove } from "./PayApprove";
+export { default as PayInactive } from "./PayInactive";
+export { default as Personcard } from "./Personcard";
+export { default as PrintInactive } from "./PrintInactive";
+export { default as PrintPlay } from "./PrintPlay";
+export { default as Product } from "./Product";
+export { default as Search } from "./Search";
+export { default as Settings } from "./Settings";
+export { default as ShippingDone } from "./ShippingDone";
+export { default as SupportAgent } from "./SupportAgent";
+export { default as SwapVert } from "./SwapVert";
+export { default as Task } from "./Task";
+export { default as Upload } from "./Upload";
+export { default as User } from "./User";
+export { default as WarningFilled } from "./WarningFilled";
+export { default as Warning } from "./Warning";
+export { default as WarningAmber } from "./WarningAmber";

package/src/components/LNB/LNB.context.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Icon } from "../Icon/Icon";
+
+type LNBContextType = {
+  list: {
+    label: string;
+    icon?: React.ComponentProps<typeof Icon>["name"];
+    subtitle?: string;
+    type: "full" | "secondary" | "list" | "title";
+    href: string;
+    isPreparing: boolean;
+    children: LNBContextType["list"];
+    isOpen?: boolean;
+    isActive?: boolean;
+  }[];
+  onClick?: (href: string) => void;
+};
+
+export const initialState: LNBContextType = {
+  list: [],
+  onClick: (href) => {
+    window.location.href = href;
+  },
+};
+
+export const LNBContext = React.createContext<LNBContextType>(initialState);
+
+export type LNBProviderProps = React.PropsWithChildren<
+  LNBContextType & {
+    className?: string;
+  }
+>;

package/src/components/LNB/LNB.module.scss

@@ -0,0 +1,99 @@
+.Wrapper {
+  max-width: 240px;
+  white-space: nowrap;
+  .Logo {
+    padding: 24px 16px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 24px;
+    font-weight: 700;
+  }
+
+  .List {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .Item {
+    cursor: pointer;
+    width: 100%;
+    background-color: transparent;
+    border: none;
+    display: flex;
+    align-items: center;
+    min-height: 40px;
+    color: var(--textSecondary, #637381);
+    border-radius: 8px;
+
+    &:hover {
+      color: var(--textPrimary, #1c252e);
+      background-color: var(--grey4, #919eab0a);
+      svg path {
+        fill: var(--textPrimary, #1c252e);
+      }
+    }
+
+    &:active {
+      color: var(--pDark, #007867);
+      background-color: var(--p4, #00a76f0a);
+      svg path {
+        fill: var(--pDark, #007867);
+      }
+    }
+    &.active {
+      color: var(--pDark, #007867);
+      background-color: var(--p4, #00a76f0a);
+      svg path {
+        fill: var(--pDark, #007867);
+      }
+    }
+
+    .TextGroup {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      text-align: start;
+
+      .Label {
+        font-size: 14px;
+        font-weight: 700;
+        &.secondary {
+          font-weight: 400;
+        }
+        &.list {
+          font-weight: 400;
+        }
+      }
+      .Subtitle {
+        font-size: 12px;
+        font-weight: 400;
+      }
+    }
+    &.full {
+      padding: 0 12px;
+      gap: 8px;
+      min-height: 48px;
+    }
+    &.secondary {
+      padding: 0 12px 0 40px;
+      gap: 8px;
+    }
+    &.list {
+      padding: 0 12px;
+      gap: 8px;
+    }
+    &.title {
+      padding: 0 12px;
+      gap: 8px;
+    }
+
+    &.disabled {
+      color: var(--textDisabled, #c4cdd5);
+      pointer-events: none;
+      svg path {
+        fill: var(--textDisabled, #c4cdd5);
+      }
+    }
+  }
+}

package/src/components/LNB/LNB.tsx

@@ -0,0 +1,190 @@
+"use client";
+import React from "react";
+import styles from "./LNB.module.scss";
+import cn from "classnames/bind";
+
+import { LNBContext, LNBProviderProps, initialState } from "./LNB.context";
+import { Icon } from "../Icon/Icon";
+
+const cx = cn.bind(styles);
+
+type LNBLogoProps = React.PropsWithChildren<{
+  className?: string;
+  src: string;
+}>;
+const Logo = (props: LNBLogoProps) => {
+  const { className, src } = props;
+
+  return (
+    <div className={cx("Logo", className)}>
+      <img src={src} alt="logo" />
+      {props.children}
+    </div>
+  );
+};
+
+type LNBItemProps = React.PropsWithChildren<{
+  className?: string;
+  label: string;
+  icon?: React.ComponentProps<typeof Icon>["name"];
+  subtitle?: string;
+  type: "full" | "secondary" | "list" | "title";
+  href: string;
+  disabled?: boolean;
+  hasChildren: boolean;
+  isOpen?: boolean;
+  isActive?: boolean;
+}>;
+
+const Item = (props: LNBItemProps) => {
+  const {
+    className,
+    label,
+    icon,
+    subtitle,
+    type,
+    disabled,
+    href,
+    hasChildren,
+    isOpen = true,
+    isActive = false,
+  } = props;
+
+  const { onClick } = React.use(LNBContext);
+
+  const [openState, setOpenState] = React.useState(isOpen);
+
+  return (
+    <React.Fragment>
+      <button
+        className={cx(
+          "Item",
+          {
+            full: type === "full",
+            secondary: type === "secondary",
+            list: type === "list",
+            title: type === "title",
+            active: isActive,
+            disabled,
+          },
+          className
+        )}
+        disabled={disabled}
+        onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+          e.stopPropagation();
+
+          if (!hasChildren) {
+            return onClick?.(href);
+          }
+
+          setOpenState(!openState);
+        }}
+      >
+        {icon && (
+          <Icon
+            name={icon}
+            size={20}
+            color={disabled ? "#C4CDD5" : "#637381"}
+            className={cx("Icon")}
+          />
+        )}
+        <div className={cx("TextGroup")}>
+          <span
+            className={cx("Label", {
+              secondary: type === "secondary",
+              list: type === "list",
+            })}
+          >
+            {label}
+          </span>
+          {type === "full" && (
+            <span className={cx("Subtitle")}>{subtitle}</span>
+          )}
+        </div>
+
+        {hasChildren && (
+          <Icon
+            name={openState ? "ExpandMore" : "ArrowRight"}
+            size={20}
+            color={disabled ? "#C4CDD5" : "#637381"}
+            className={cx("Icon")}
+          />
+        )}
+      </button>
+      {openState && <React.Fragment>{props.children}</React.Fragment>}
+    </React.Fragment>
+  );
+};
+
+type LNBListProps = React.PropsWithChildren<{
+  className?: string;
+}>;
+
+const List = (props: LNBListProps) => {
+  const { className } = props;
+  const context = React.use(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 || false}
+          isActive={item.isActive || false}
+        >
+          {item.children && renderList(item.children)}
+        </Item>
+      );
+    });
+  };
+  return (
+    <div className={cx("List", className)}>{renderList(context.list)}</div>
+  );
+};
+
+const Root = (props: LNBProviderProps) => {
+  const { children, className } = props;
+  return (
+    <LNBContext value={{ ...initialState, ...props }}>
+      <div className={cx("Wrapper", className)}>{children}</div>
+    </LNBContext>
+  );
+};
+
+export 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;
+};
+
+interface ILNB {
+  Logo: typeof Logo;
+  List: typeof List;
+  Item: typeof Item;
+  Root: typeof Root;
+}
+
+const LNB: ILNB = {
+  Logo,
+  List,
+  Item,
+  Root,
+};
+
+export default LNB;