@uniai-fe/ui-legacy 0.1.1

package/src/tab-menu/components/custom/AddButton.tsx

@@ -0,0 +1,32 @@
+import Button from "../../../button";
+import StyledTabMenuCustom from "../../styles/styled-components/custom-menu";
+
+export default function TabMenuCustomAddButton({
+  onAdd,
+  children,
+  minWidth,
+  padding,
+}: {
+  onAdd: () => void;
+  children: React.ReactNode;
+} & Partial<{
+  minWidth: number | string;
+  padding: number | string;
+}>) {
+  return (
+    <StyledTabMenuCustom.addButton
+      as={Button.Default}
+      className="tab-menu-addable-button addable-add-button"
+      styleOptions={{
+        priorityType: "pale",
+        fillType: "outline",
+        sizeType: "small",
+      }}
+      clickEvent={onAdd}
+      $minWidth={minWidth}
+      $padding={padding}
+    >
+      {typeof children === "string" ? <span>{children}</span> : children}
+    </StyledTabMenuCustom.addButton>
+  );
+}

package/src/tab-menu/components/custom/Container.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledTabMenuCustom from "../../styles/styled-components/custom-menu";
+import type { TabMenuBaseListDataType } from "../../../types";
+import TabMenuCustomMenuButton from "./MenuButton";
+import TabMenuCustomAddButton from "./AddButton";
+
+export default function TabMenuCustomContainer({
+  className,
+  renderKey,
+  list,
+  onSelect,
+  onAdd,
+  addName,
+  minWidth,
+  padding,
+}: {
+  renderKey: string;
+  list: TabMenuBaseListDataType[];
+  onSelect: (code: string) => void;
+} & Partial<{
+  className: string;
+  onAdd: () => void;
+  addName: React.ReactNode;
+  minWidth: number | string;
+  padding: number | string;
+}>) {
+  return (
+    <StyledTabMenuCustom.container
+      className={clsx("tab-menu-addable-container", className)}
+    >
+      <StyledTabMenuCustom.menuList>
+        {list.map(({ code, name, isSelected }) => (
+          <li key={`${renderKey}/${code}`}>
+            <TabMenuCustomMenuButton
+              selected={isSelected}
+              onSelect={() => onSelect(code)}
+              minWidth={minWidth}
+              padding={padding}
+            >
+              {typeof name === "string" ? <span>{name}</span> : name}
+            </TabMenuCustomMenuButton>
+          </li>
+        ))}
+      </StyledTabMenuCustom.menuList>
+      {onAdd && (
+        <StyledTabMenuCustom.add>
+          <TabMenuCustomAddButton
+            onAdd={onAdd}
+            minWidth={minWidth}
+            padding={padding}
+          >
+            {typeof addName === "string" ? <span>{addName}</span> : addName}
+          </TabMenuCustomAddButton>
+        </StyledTabMenuCustom.add>
+      )}
+    </StyledTabMenuCustom.container>
+  );
+}

package/src/tab-menu/components/custom/MenuButton.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { clsx } from "clsx";
+import Button from "../../../button";
+import StyledTabMenuCustom from "../../styles/styled-components/custom-menu";
+
+export default function TabMenuCustomMenuButton({
+  onSelect,
+  selected,
+  children,
+  minWidth,
+  padding,
+}: {
+  onSelect: () => void;
+  selected: boolean;
+  children: React.ReactNode;
+} & Partial<{
+  minWidth: number | string;
+  padding: number | string;
+}>) {
+  return (
+    <StyledTabMenuCustom.menuButton
+      as={Button.Default}
+      className={clsx("tab-menu-addable-button addable-menu-button", {
+        selected,
+      })}
+      styleOptions={{
+        priorityType: "pale",
+        fillType: "outline",
+        sizeType: "small",
+      }}
+      clickEvent={onSelect}
+      $minWidth={minWidth}
+      $padding={padding}
+    >
+      {typeof children === "string" ? <span>{children}</span> : children}
+    </StyledTabMenuCustom.menuButton>
+  );
+}

package/src/tab-menu/components/filter/Default.tsx

@@ -0,0 +1,3 @@
+export default function TabMenuFilterDefaultList() {
+  return <></>;
+}

package/src/tab-menu/components/filter/WithData.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { clsx } from "clsx";
+import type { TabMenuBaseListDataType } from "../../../types";
+import StyledFilterWithData from "../../styles/styled-components/filter-with-data";
+
+export default function TabMenuFilterWithDataList({
+  className,
+  renderKey,
+  list,
+  onSelect,
+}: {
+  renderKey: string;
+  list: TabMenuBaseListDataType[];
+  onSelect: (code: string) => void;
+} & Partial<{ className: string }>) {
+  return (
+    <StyledFilterWithData.List
+      className={clsx("tab-menu filter-with-data-list", className)}
+    >
+      {list.map(({ code, name, isSelected }) => (
+        <StyledFilterWithData.Item
+          key={`tab-menu/filter/with-data/list/item/${renderKey}/${code}`}
+        >
+          <StyledFilterWithData.Button
+            type="button"
+            onClick={() => onSelect(code)}
+            className={clsx({ selected: isSelected })}
+          >
+            {typeof name === "string" ? <span>{name}</span> : name}
+          </StyledFilterWithData.Button>
+        </StyledFilterWithData.Item>
+      ))}
+    </StyledFilterWithData.List>
+  );
+}

package/src/tab-menu/components/mode/List.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { memo } from "react";
+import { clsx } from "clsx";
+import StyledTabMenu from "../../styled";
+import type { TabMenuBaseListDataType } from "../../../types";
+
+const TabMenuModeTypeList = memo(
+  ({
+    className,
+    renderKey,
+    list,
+    onSelect,
+    type,
+    styleOptions,
+  }: {
+    renderKey: string;
+    list: TabMenuBaseListDataType[];
+    onSelect: (code: string) => void;
+  } & Partial<{
+    className: string;
+    type: "divide" | "box";
+    styleOptions: Partial<{
+      width: number | string;
+      height: number | string;
+      radius: number | string;
+      buttonMinWidth: number | string;
+      buttonRadius: number | string;
+      textSize: number | string;
+    }>;
+  }>) => {
+    return (
+      <StyledTabMenu.Mode.List
+        className={clsx("tab-menu mode-menu", className)}
+        $type={type}
+        $radius={styleOptions?.radius}
+      >
+        {list.map(({ code, name, isSelected }) => (
+          <StyledTabMenu.Mode.Item
+            key={`tab-menu/mode/list/item/${renderKey}/${code}`}
+            $type={type}
+            className={clsx("tab-menu-item mode-menu-item", {
+              selected: isSelected,
+            })}
+          >
+            <StyledTabMenu.Mode.Button
+              type="button"
+              onClick={() => onSelect(code)}
+              $type={type}
+              $selected={isSelected}
+              $width={styleOptions?.width}
+              $minWidth={styleOptions?.buttonMinWidth}
+              $height={styleOptions?.height}
+              $radius={styleOptions?.buttonRadius}
+              $textSize={styleOptions?.textSize}
+            >
+              {typeof name === "string" ? <span>{name}</span> : name}
+            </StyledTabMenu.Mode.Button>
+          </StyledTabMenu.Mode.Item>
+        ))}
+      </StyledTabMenu.Mode.List>
+    );
+  },
+);
+
+export default TabMenuModeTypeList;

package/src/tab-menu/components/page/List.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import { memo, useCallback } from "react";
+import { clsx } from "clsx";
+
+import StyledTabMenu from "../../styled";
+import type { TabMenuPageListDataType } from "../../../types";
+import type { StyleSpacingType } from "@uniai-fe/util-functions";
+
+const TabMenuPageTypeList = memo(
+  ({
+    className,
+    renderKey,
+    list,
+    onSelect,
+    listStyle,
+    buttonStyle,
+  }: {
+    renderKey: string;
+    list: TabMenuPageListDataType[];
+  } & Partial<{
+    className: string;
+    onSelect: (code: string) => void;
+    listStyle: Partial<{
+      width: number | string;
+      padding: StyleSpacingType;
+    }>;
+    buttonStyle: Partial<{
+      width: number | string;
+      height: number | string;
+      padding: StyleSpacingType;
+      minWidth: number | string;
+      textSize: number | string;
+    }>;
+  }>) => {
+    const router = useRouter();
+    const pathname = usePathname();
+
+    const onRouteChange = useCallback(
+      ({ code, path }: { code: string; path: string }) => {
+        router.push(path);
+        if (typeof onSelect !== "undefined") onSelect(code);
+      },
+      [router, onSelect],
+    );
+
+    const isSelected = useCallback(
+      (path: string): boolean => pathname === path,
+      [pathname],
+    );
+
+    return (
+      <>
+        <StyledTabMenu.Page.UpdateHeight $height={buttonStyle?.height} />
+        <StyledTabMenu.Page.List
+          className={clsx("tab-menu page-menu", className)}
+          $width={listStyle?.width}
+          $padding={listStyle?.padding}
+        >
+          {list.map(({ code, path, name }) => (
+            <StyledTabMenu.Page.Item
+              key={`tab-menu/page/list/item/${renderKey}/${code}`}
+              className={clsx("tab-menu-item page-menu-item", {
+                selected: isSelected(path),
+              })}
+            >
+              <StyledTabMenu.Page.Button
+                type="button"
+                className="tab-menu-button page-menu-button"
+                $width={buttonStyle?.width}
+                $minWidth={buttonStyle?.minWidth}
+                // $height={buttonStyle?.height}
+                $textSize={buttonStyle?.textSize}
+                $selected={isSelected(path)}
+                onClick={() => onRouteChange({ code, path })}
+              >
+                {typeof name === "string" ? <span>{name}</span> : name}
+              </StyledTabMenu.Page.Button>
+            </StyledTabMenu.Page.Item>
+          ))}
+        </StyledTabMenu.Page.List>
+      </>
+    );
+  },
+);
+
+export default TabMenuPageTypeList;

package/src/tab-menu/components/separated-square/List.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { clsx } from "clsx";
+import type { TabMenuBaseListDataType } from "../../../types";
+import StyledTabMenuSeparatedSquare from "../../styles/styled-components/separated-square";
+import Button from "../../../button";
+
+export default function TabMenuSeparatedSquareList({
+  className,
+  renderKey,
+  list,
+  onSelect,
+  height,
+  margin,
+  minWidth,
+  fillType,
+  padding,
+  textSize,
+  children,
+}: {
+  renderKey: string;
+  list: TabMenuBaseListDataType[];
+  onSelect: (code: string) => void;
+} & Partial<{
+  className: string;
+  height: number | string;
+  margin: number | string;
+  minWidth: number | string;
+  fillType: "solid" | "outline";
+  padding: number | string;
+  textSize: number | string;
+  children: React.ReactNode;
+}>) {
+  return (
+    <StyledTabMenuSeparatedSquare.Container className="tab-menu-container separated-square">
+      <StyledTabMenuSeparatedSquare.List
+        className={clsx("tab-menu separated-square-list", className)}
+        $height={height}
+        $padding={padding}
+        $textSize={textSize}
+      >
+        {list.map(({ code, name, isSelected }) => (
+          <StyledTabMenuSeparatedSquare.Item
+            key={`tab-menu/separated-square/list/item/${renderKey}/${code}`}
+            $margin={margin}
+          >
+            <StyledTabMenuSeparatedSquare.Button
+              as={Button.Default}
+              clickEvent={() => onSelect(code)}
+              className={clsx({ selected: isSelected })}
+              styleOptions={{
+                priorityType: isSelected ? "primary" : "pale",
+                fillType: fillType || "outline",
+                sizeType: "small",
+              }}
+              $minWidth={minWidth}
+            >
+              {typeof name === "string" ? <span>{name}</span> : name}
+            </StyledTabMenuSeparatedSquare.Button>
+          </StyledTabMenuSeparatedSquare.Item>
+        ))}
+      </StyledTabMenuSeparatedSquare.List>
+      {children}
+    </StyledTabMenuSeparatedSquare.Container>
+  );
+}

package/src/tab-menu/components/text/List.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { clsx } from "clsx";
+import type { ButtonStateType, TabMenuBaseListDataType } from "../../../types";
+import Button from "../../../button";
+import StyledTabMenuText from "../../styles/styled-components/text-menu";
+
+export default function TabMenuTextList({
+  className,
+  renderKey,
+  list,
+  onSelect,
+  margin,
+  textSize = 14,
+  state,
+}: {
+  renderKey: string;
+  list: TabMenuBaseListDataType[];
+  onSelect: (code: string) => void;
+} & Partial<{
+  className: string;
+  margin: number | string;
+  textSize: number | string;
+  state: ButtonStateType;
+}>) {
+  return (
+    <StyledTabMenuText.Container className={className}>
+      <StyledTabMenuText.List className="tab-menu text-list">
+        {list.map(({ code, name, isSelected }) => (
+          <StyledTabMenuText.Item
+            key={`tab-menu/text/list/item/${renderKey}/${code}`}
+            $margin={margin}
+          >
+            <StyledTabMenuText.Button
+              as={Button.Text}
+              clickEvent={() => onSelect(code)}
+              className={clsx({ selected: isSelected })}
+              color={
+                isSelected
+                  ? "var(--tab-menu-text-list-selected)"
+                  : "var(--tab-menu-text-list-default)"
+              }
+              size={textSize}
+              state={state}
+            >
+              {typeof name === "string" ? <span>{name}</span> : name}
+            </StyledTabMenuText.Button>
+          </StyledTabMenuText.Item>
+        ))}
+      </StyledTabMenuText.List>
+    </StyledTabMenuText.Container>
+  );
+}

package/src/tab-menu/index.tsx

@@ -0,0 +1,21 @@
+import TabMenuCustomContainer from "./components/custom/Container";
+import TabMenuFilterDefaultList from "./components/filter/Default";
+import TabMenuFilterWithDataList from "./components/filter/WithData";
+import TabMenuModeTypeList from "./components/mode/List";
+import TabMenuPageTypeList from "./components/page/List";
+import TabMenuSeparatedSquareList from "./components/separated-square/List";
+import TabMenuTextList from "./components/text/List";
+
+const TabMenu = {
+  ModeType: TabMenuModeTypeList,
+  PageType: TabMenuPageTypeList,
+  SeparatedSquare: TabMenuSeparatedSquareList,
+  Text: TabMenuTextList,
+  Custom: TabMenuCustomContainer,
+  Filter: {
+    Default: TabMenuFilterDefaultList,
+    WithData: TabMenuFilterWithDataList,
+  },
+};
+
+export default TabMenu;

package/src/tab-menu/styled.tsx

@@ -0,0 +1,21 @@
+import StyledTabMenuFilterDefault from "./styles/styled-components/separated-square";
+import StyledTabMenuFilterWithData from "./styles/styled-components/filter-with-data";
+import StyledTabMenuMode from "./styles/styled-components/mode-menu";
+import StyledTabMenuPage from "./styles/styled-components/page-menu";
+import StyledTabMenuBase from "./styles/styled-components/tab-menu";
+import StyledTabMenuCustom from "./styles/styled-components/custom-menu";
+import StyledTabMenuText from "./styles/styled-components/text-menu";
+
+const StyledTabMenu = {
+  ...StyledTabMenuBase,
+  Page: StyledTabMenuPage,
+  Mode: StyledTabMenuMode,
+  Text: StyledTabMenuText,
+  Custom: StyledTabMenuCustom,
+  Filter: {
+    Default: StyledTabMenuFilterDefault,
+    WithData: StyledTabMenuFilterWithData,
+  },
+};
+
+export default StyledTabMenu;

package/src/tab-menu/styles/scss/mode.scss

@@ -0,0 +1,5 @@
+:root {
+  --tab-menu-mode-height: 3.6rem;
+  --tab-menu-mode-radius: 0.8rem;
+  --tab-menu-mode-bg: var(--color_0);
+}

package/src/tab-menu/styles/scss/page-menu.scss

@@ -0,0 +1,4 @@
+:root {
+  --page-menu-height: 8rem;
+  --page-menu-border-bottom-width: 1px;
+}

package/src/tab-menu/styles/scss/text-menu.scss

@@ -0,0 +1,7 @@
+:root {
+  --tab-menu-text-list-default: var(--color_90);
+  --tab-menu-text-list-selected: var(--color-light-blue-600);
+
+  --tab-menu-text-list-height: calc(1.4rem + 0.2rem * 2);
+  --tab-menu-text-list-item-margin: 0.4rem;
+}

package/src/tab-menu/styles/styled-components/custom-menu.ts

@@ -0,0 +1,80 @@
+"use client";
+
+import { styled, css } from "styled-components";
+import { styleBaseSize } from "@uniai-fe/util-functions";
+
+const container = styled.div`
+  width: fit-content;
+  display: flex;
+  align-items: center;
+`;
+
+type StyledButtonProps = Partial<{
+  $minWidth: number | string;
+  $padding: number | string;
+}>;
+const menuList = styled.ul`
+  --button-border-width: 0px;
+
+  display: flex;
+  align-items: center;
+  li {
+    margin-right: 0.8rem;
+  }
+`;
+const menuButton = styled.div<StyledButtonProps>`
+  ${({ $minWidth }) =>
+    typeof $minWidth !== "undefined" &&
+    css`
+      min-width: ${styleBaseSize("rem", $minWidth)};
+    `}
+  ${({ $padding }) =>
+    typeof $padding !== "undefined" &&
+    css`
+      padding: 0 ${styleBaseSize("rem", $padding)};
+    `}
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    color: var(--color_70);
+  }
+  &.selected {
+    background-color: var(--color-light-blue-600);
+    span {
+      color: #fff;
+    }
+  }
+`;
+
+const add = styled.div`
+  --button-border-style: dashed;
+`;
+const addButton = styled.div<StyledButtonProps>`
+  ${({ $minWidth }) =>
+    typeof $minWidth !== "undefined" &&
+    css`
+      min-width: ${styleBaseSize("rem", $minWidth)};
+    `}
+  ${({ $padding }) =>
+    typeof $padding !== "undefined" &&
+    css`
+      padding: ${styleBaseSize("rem", $padding)};
+    `}
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const StyledTabMenuCustom = {
+  container,
+  menuList,
+  menuButton,
+  add,
+  addButton,
+};
+
+export default StyledTabMenuCustom;

package/src/tab-menu/styles/styled-components/filter-with-data.ts

@@ -0,0 +1,72 @@
+"use client";
+
+import { styled } from "styled-components";
+import StyledTabMenuBase from "./tab-menu";
+
+const List = styled(StyledTabMenuBase.List)`
+  height: 3.6rem;
+  border: 1px solid var(--color_30);
+  border-radius: 0.4rem;
+  background-color: var(--color_0);
+`;
+
+const Item = styled.li`
+  border-right: 1px solid var(--color_30);
+  &:last-child {
+    border-right: 0;
+  }
+`;
+
+const Button = styled.button`
+  width: fit-content;
+  min-width: 11rem;
+  height: 100%;
+  padding: 0 1.4rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  span:not(.chip-span) {
+    font-size: 1.4rem;
+    color: var(--color_70);
+    font-weight: 500;
+    line-height: 1em;
+  }
+
+  .chip {
+    margin-left: 3.5rem;
+
+    --chip-height: 2.3rem;
+    --chip-padding-horizontal: 0.8rem;
+
+    --chip-border-width: 0px;
+    --chip-border-radius: 0.8rem;
+
+    --chip-text-size: 1.4rem;
+    --chip-text-color: var(--color_80);
+
+    --chip-bg-color: var(--color_20);
+  }
+
+  &.selected {
+    background-color: var(--color_10);
+
+    span:not(.chip-span) {
+      color: var(--color_80);
+    }
+
+    .chip {
+      --chip-text-color: #fff;
+      --chip-bg-color: var(--theme-blue-main);
+    }
+  }
+`;
+
+const StyledTabMenuFilterWithData = {
+  List,
+  Item,
+  Button,
+};
+
+export default StyledTabMenuFilterWithData;