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

package/src/components/Stepper/Stepper.tsx

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

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

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

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

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

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