@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,219 @@
+"use client";
+/* eslint-disable react-refresh/only-export-components */
+import React from "react";
+import cn from "classnames/bind";
+import styles from "./Stepper.module.scss";
+import {
+  StepperContext,
+  StepperProvider,
+  StepperProviderProps,
+} from "./Stepper.context";
+import Divider from "../Divider/Divider";
+
+const cx = cn.bind(styles);
+
+type ContentProps = { children: React.ReactNode };
+const Content = (props: ContentProps) => {
+  const { children } = props;
+
+  const { direction } = React.useContext(StepperContext);
+
+  switch (direction) {
+    case "row":
+      return <div className={cx("Content")}>{children}</div>;
+    case "column":
+      return <>{children}</>;
+  }
+};
+
+type StepsRenderProps = {
+  index: number;
+  active: boolean;
+  defaultClassName: string;
+};
+type StepProps = {
+  className?: string;
+  index?: number;
+  title?: string | number | ((props: StepsRenderProps) => React.ReactNode);
+  desc?: string | number | ((props: StepsRenderProps) => React.ReactNode);
+  point?: string | number | ((props: StepsRenderProps) => React.ReactNode);
+};
+const Step = (props: StepProps) => {
+  const { className, index, title, desc, point } = props;
+
+  const { activeStep, contentsPosition, direction, linear, onClick } =
+    React.useContext(StepperContext);
+
+  const [before, after, inline, block] = React.useMemo(() => {
+    if (!contentsPosition) return [];
+    return [
+      ["top", "left"].includes(contentsPosition),
+      ["bottom", "right"].includes(contentsPosition),
+      ["left", "right"].includes(contentsPosition),
+      ["top", "bottom"].includes(contentsPosition),
+    ];
+  }, [contentsPosition]);
+
+  const active = React.useMemo(() => {
+    if (index === undefined) return false;
+    return activeStep === index;
+  }, [index, activeStep]);
+
+  const clickHandler = React.useCallback(() => {
+    if (index === undefined) return;
+    if (onClick) {
+      if (!linear) {
+        onClick(index);
+      }
+    }
+  }, [index, linear, onClick]);
+
+  const isFunction = React.useCallback(
+    (data: unknown) => typeof data === "function",
+    []
+  );
+
+  if (index === undefined) return;
+
+  return (
+    <div
+      className={cx("StepWrap", direction, contentsPosition, {
+        linear,
+        inline,
+        active,
+      })}
+      onClick={clickHandler}
+    >
+      <div
+        className={cx("Step", className, direction, contentsPosition, {
+          block,
+          inline,
+          active,
+        })}
+      >
+        {before && (
+          <Content>
+            {isFunction(title) ? (
+              title({ index, active, defaultClassName: cx("Title") })
+            ) : (
+              <div className={cx("Title")}>
+                <span>{title ?? index}</span>
+              </div>
+            )}
+            {!(direction === "column" && inline) &&
+              (isFunction(desc) ? (
+                desc({ index, active, defaultClassName: cx("Desc") })
+              ) : (
+                <div className={cx("Desc")}>
+                  <span>{desc ?? index}</span>
+                </div>
+              ))}
+          </Content>
+        )}
+        {isFunction(point) ? (
+          point({ index, active, defaultClassName: cx("Point") })
+        ) : (
+          <div className={cx("Point")}>
+            <span>{point ?? index}</span>
+          </div>
+        )}
+        {after && (
+          <Content>
+            {isFunction(title) ? (
+              title({ index, active, defaultClassName: cx("Title") })
+            ) : (
+              <div className={cx("Title")}>
+                <span>{title ?? index}</span>
+              </div>
+            )}
+            {!(direction === "column" && inline) &&
+              (isFunction(desc) ? (
+                desc({ index, active, defaultClassName: cx("Desc") })
+              ) : (
+                <div className={cx("Desc")}>
+                  <span>{desc ?? index}</span>
+                </div>
+              ))}
+          </Content>
+        )}
+      </div>
+      {direction === "column" &&
+        inline &&
+        (isFunction(desc) ? (
+          desc({ index, active, defaultClassName: cx("Desc") })
+        ) : (
+          <div className={cx("Desc")}>
+            <span>{desc ?? index}</span>
+          </div>
+        ))}
+    </div>
+  );
+};
+
+type OmitContext = "";
+const Root = (props: Omit<StepperProviderProps, OmitContext>) => {
+  const {
+    children,
+    className,
+    direction = "row",
+    contentsPosition = "bottom",
+    lineAs,
+  } = props;
+
+  const contextValue = React.useMemo(() => {
+    return {
+      direction,
+      contentsPosition,
+      ...props,
+    };
+  }, [props, direction, contentsPosition]);
+
+  return (
+    <StepperProvider {...contextValue}>
+      <div className={cx("Root", direction, className)}>
+        {React.Children.map(children, (child, index) => {
+          if (React.isValidElement(child) && child.type === Step) {
+            return (
+              <React.Fragment>
+                {index !== 0 &&
+                  (lineAs
+                    ? lineAs({
+                        defaultClassName: cx("Divider", direction, {
+                          isTop: contentsPosition === "top",
+                        }),
+                        direction,
+                        contentsPosition,
+                        index,
+                      })
+                    : direction === "row" && (
+                        <Divider
+                          className={cx("Divider", direction, {
+                            isTop: contentsPosition === "top",
+                          })}
+                          size={direction === "row" ? 1 : undefined}
+                        />
+                      ))}
+                {React.cloneElement(child, { index } as React.ComponentProps<
+                  typeof Step
+                >)}
+              </React.Fragment>
+            );
+          }
+          return child;
+        })}
+      </div>
+    </StepperProvider>
+  );
+};
+
+interface IStepper {
+  Root: typeof Root;
+  Step: typeof Step;
+}
+
+export default {
+  Root,
+  Step,
+} as IStepper;
+
+export type { StepperProviderProps };

package/src/components/Tab/Tab.colors.tsx

@@ -0,0 +1,54 @@
+const useTabColors = () => {
+  const selected = {
+    // line: {
+    //   backgroundColor: ,
+    //   color: ,
+    //   borderColor: ,
+    // },
+    // text: {
+    //   backgroundColor: ,
+    //   color: ,
+    //   borderColor: ,
+    // },
+    // square: {
+    //   backgroundColor: ,
+    //   color: ,
+    //   borderColor: ,
+    // },
+    // circle: {
+    //   backgroundColor: ,
+    //   color: ,
+    //   borderColor: ,derColor: ,
+    // }
+  };
+
+  const unselected = {
+    // line: {
+    //     backgroundColor: ,
+    //     color: ,
+    //     borderColor: ,
+    // },
+    // text: {
+    //     backgroundColor: ,
+    //     color: ,
+    //     borderColor: ,
+    // },
+    // square: {
+    //     backgroundColor: ,
+    //     color: ,
+    //     borderColor: ,
+    // },
+    // circle: {
+    //     backgroundColor: ,
+    //     color: ,
+    //     borderColor: ,
+    // }
+  };
+
+  return {
+    selected,
+    unselected,
+  };
+};
+
+export default useTabColors;

package/src/components/Tab/Tab.context.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+export const TabType = [
+  "textLine",
+  "line",
+  "text",
+  "squareLine",
+  "circle",
+  "square",
+  "rounded",
+] as const;
+
+type ITabContext = {
+  /** align */
+  align: "start" | "center" | "end";
+  /** direction */
+  direction: "horizontal" | "vertical";
+  /** isFitted */
+  isFitted?: boolean;
+  /** onChange */
+  onChange: (id: string) => void;
+  /** background Color */
+  bg?: string;
+  /** size */
+  size?: "small" | "medium" | "large";
+  /** active */
+  active?: string;
+  /** tabType */
+  tabType?: (typeof TabType)[number];
+};
+
+const initialState: ITabContext = {
+  align: "center",
+  direction: "horizontal",
+  isFitted: false,
+  onChange: () => {},
+  bg: "transparent",
+  size: "small",
+  tabType: "line",
+  active: "0",
+};
+
+export const TabsContext = React.createContext<ITabContext>(initialState);
+
+export type TabsProviderProps = React.PropsWithChildren<
+  Partial<ITabContext> & {
+    className?: string;
+  }
+>;
+
+export const TabProvider = (props: TabsProviderProps) => {
+  const contextValue = React.useMemo(() => {
+    return {
+      ...initialState,
+      ...props,
+    };
+  }, [props]);
+
+  return (
+    <TabsContext.Provider value={contextValue}>
+      {props.children}
+    </TabsContext.Provider>
+  );
+};

package/src/components/Tab/Tab.module.scss

@@ -0,0 +1,239 @@
+@layer Tab {
+  .Root {
+    display: flex;
+    flex-direction: column;
+    box-sizing: content-box;
+
+    &.vertical {
+      flex-direction: row;
+    }
+  }
+
+  .List {
+    display: flex;
+    flex-direction: row;
+
+    &.small {
+      height: 32px;
+    }
+    &.medium {
+      height: 40px;
+    }
+    &.large {
+      height: 48px;
+    }
+
+    &.circle {
+      border-radius: 50px;
+      padding: 4px;
+      background: var(--grey8, #919eab14);
+    }
+    &.square {
+      border-radius: 8px;
+      padding: 4px;
+      background-color: var(--grey8, #919eab14);
+    }
+
+    &.squareLine {
+      background-color: var(--grey4, #919eab0a);
+    }
+
+    &.squareLine,
+    &.circle,
+    &.square {
+      &:not(.fitted) {
+        width: max-content;
+      }
+    }
+
+    &.rounded {
+      border-bottom: 1px solid var(--Simentic-On-Surface-Sub, #abadb0);
+    }
+
+    &.vertical {
+      flex-direction: column;
+
+      &.circle {
+        // padding: 8px;
+      }
+    }
+
+    &.circle,
+    &.square,
+    &.squareLine {
+      &.vertical {
+        &.start {
+          justify-self: flex-start;
+        }
+
+        &.center {
+          justify-self: center;
+        }
+
+        &.end {
+          justify-self: flex-end;
+        }
+      }
+
+      &.horizontal:not(.fitted) {
+        &.start {
+          align-self: flex-start;
+        }
+
+        &.center {
+          align-self: center;
+        }
+
+        &.end {
+          align-self: flex-end;
+        }
+      }
+    }
+
+    &.line,
+    &.textLine,
+    &.rounded,
+    &.text {
+      &.start {
+        justify-content: flex-start;
+      }
+
+      &.center {
+        justify-content: center;
+      }
+
+      &.end {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  .Panel {
+    display: none;
+    padding: 4px;
+
+    &.active {
+      display: block;
+    }
+  }
+
+  .Item {
+    // height: inherit;
+    padding-inline: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--textTertiary, #919eab);
+
+    &.active {
+      color: var(--textPrimary, #1c252e);
+    }
+
+    &.large {
+      @include bodyRegularLarge;
+      padding-inline: 16px;
+
+      &.active {
+        @include bodyBoldLarge;
+      }
+    }
+
+    &.medium {
+      @include bodyRegularMedium;
+
+      &.active {
+        @include bodyBoldMedium;
+      }
+    }
+
+    &.small {
+      @include bodyRegularSmall;
+      // padding: 0 16px;
+
+      &.active {
+        @include bodyBoldSmall;
+      }
+    }
+
+    &:not(.textLine) {
+      &.small {
+        // padding-top: 4px;
+        // padding-bottom: 4px;
+      }
+
+      &.large {
+        // padding-top: 8px;
+        // padding-bottom: 8px;
+      }
+    }
+
+    &.line {
+      padding-inline: 16px;
+      border-bottom: 2px solid var(--actionDisabled, #919eab66);
+
+      &.large {
+        padding-inline: 24px;
+      }
+
+      &.active {
+        border-color: var(--textPrimary, #1c252e);
+      }
+    }
+
+    &.squareLine {
+      border: 1px solid var(--textTertiary, #919eab);
+      background-color: var(--grey4, #919eab0a);
+
+      &.active {
+        border-color: var(--textPrimary, #1c252e);
+        background-color: var(--backgroundDefault, #ffffff);
+      }
+    }
+
+    &.rounded {
+      &.active {
+        border: 1px solid var(--Simentic-On-Surface-Sub, #abadb0);
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+        border-bottom-color: transparent;
+      }
+    }
+
+    &.circle {
+      border-radius: 40px;
+
+      &.active {
+        background: var(--Simentic-On-Surface-Variant, #ffffff);
+      }
+    }
+    &.square {
+      border-radius: 8px;
+
+      &.active {
+        background: var(--Simentic-On-Surface-Variant, #ffffff);
+        box-shadow: 0 4px 8px 0 var(--shadow12, #919eab1f);
+      }
+    }
+
+    &.fitted {
+      flex: 1 auto;
+    }
+
+    .ItemButton {
+      font: inherit;
+      line-height: initial !important;
+      color: inherit;
+      width: 100%;
+      height: 100%;
+
+      &.textLine {
+        // padding-bottom: 5px;
+        border-bottom: 2px solid transparent;
+
+        &.active {
+          border-color: var(--Simentic-On-Surface, #121416);
+        }
+      }
+    }
+  }
+}

package/src/components/Tab/Tab.tsx

@@ -0,0 +1,123 @@
+"use client";
+/* eslint-disable react-refresh/only-export-components */
+import React from "react";
+import { TabProvider, TabsContext, TabsProviderProps } from "./Tab.context";
+import cx from "./cx";
+
+type PanelProps = React.PropsWithChildren<{
+  className?: string;
+  id?: string;
+  index: number;
+}>;
+
+const Panel = (props: PanelProps) => {
+  const { className, children, id, index } = props;
+  const { active } = React.useContext(TabsContext);
+  const PanelId = id ?? index.toString();
+
+  return (
+    <div
+      className={cx("Panel", className, {
+        active: active === PanelId,
+      })}
+    >
+      {children}
+    </div>
+  );
+};
+
+type PanelsProps = React.PropsWithChildren<{
+  className?: string;
+}>;
+
+const Panels = (props: PanelsProps) => {
+  const { className, children } = props;
+
+  return <div className={cx("Paenls", className)}>{children}</div>;
+};
+
+type TabListProps = React.PropsWithChildren<{
+  className?: string;
+}>;
+
+const List = (props: TabListProps) => {
+  const { className } = props;
+  const { tabType, direction, align, isFitted, size } =
+    React.useContext(TabsContext);
+
+  return (
+    <div
+      className={cx("List", direction, align, tabType, className, size, {
+        fitted: isFitted,
+      })}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+type TabProps = React.PropsWithChildren<{
+  className?: string;
+  id?: string;
+  index: number;
+  onClick?: (...args: any) => void;
+  isActive?: boolean;
+}>;
+
+const Item = (props: TabProps) => {
+  const {
+    className,
+    children,
+    id,
+    index,
+    onClick,
+    isActive: forcedActive,
+  } = props;
+  const { onChange, tabType, size, active, isFitted } =
+    React.useContext(TabsContext);
+  const value = id ?? index.toString();
+
+  const isActive = active === value;
+  return (
+    <div
+      className={cx("Item", size, tabType, className, {
+        active: forcedActive ?? isActive,
+        fitted: isFitted,
+      })}
+      onClick={onClick ?? onChange.bind(null, id ?? index.toString())}
+    >
+      <button
+        className={cx("ItemButton", tabType, {
+          active: forcedActive ?? isActive,
+        })}
+      >
+        {children}
+      </button>
+    </div>
+  );
+};
+
+const Root = (props: TabsProviderProps) => {
+  const { children, className, direction } = props;
+  return (
+    <TabProvider {...props}>
+      <div className={cx("Root", direction, className)}>{children}</div>
+    </TabProvider>
+  );
+};
+
+interface ITab {
+  Root: typeof Root;
+  List: typeof List;
+  Item: typeof Item;
+  Panel: typeof Panel;
+  Panels: typeof Panels;
+}
+
+export default {
+  Root,
+  List,
+  Item,
+  Panel,
+  Panels,
+} as ITab;

package/src/components/Tab/cx.ts

@@ -0,0 +1,6 @@
+import cn from "classnames/bind";
+import styles from "./Tab.module.scss";
+
+const cx = cn.bind(styles);
+
+export default cx;