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

package/src/components/Stepper/README.md

@@ -1,320 +0,0 @@
-# Stepper UI
-
-## Contents List
-
-1. [Quick Start](#QuickStart)
-2. [Reference](#Reference)
-3. [Example](#Example)
-
-## Quick Start
-
-```ts
-import { Stepper } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Stepper.Root>
-      <Stepper.Step></Stepper.Step>
-      <Stepper.Step></Stepper.Step>
-      <Stepper.Step></Stepper.Step>
-    </Stepper.Root>
-  );
-};
-```
-
-## Reference
-
-### Root
-
-`Stepper.Root`는 Stepper ui의 공통으로 사용되는 Context를 관리하고 기본 ui를 보여주기 위해 사용됩니다.
-
-| Prop                                       |                           Type                           | Required | Default Value |
-| :----------------------------------------- | :------------------------------------------------------: | :------: | :-----------: |
-| [className](#Root-className)               |                          String                          |    -     |       -       |
-| [children](#Root-children)                 |                     React.ReactNode                      |    -     |       -       |
-| [activeStep](#Root-activeStep)             |                      number or null                      |    -     |     null      |
-| [linear](#Root-linear)                     |                         boolean                          |    -     |     true      |
-| [direction](#Root-direction)               |                    "row" or "column"                     |    -     |     "row"     |
-| [contentsPosition](#Root-contentsPosition) |          "top" or "bottom" or "left" or "right"          |    -     |   "bottom"    |
-| [lineAs](#Root-lineAs)                     | (props?: [LineAsProps](#LineAsProps)) => React.ReactNode |    -     |       -       |
-| [onClick](#Root-onClick)                   |                 (index: number) => void                  |    -     |       -       |
-
-#### Root-className
-
-`Stepper.Root`에 `className`를 전달하기 위한 `props`입니다.
-
-```ts
-import { Stepper } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Stepper.Root className="StepperRootClassName">
-      <!-- ... -->
-    </Stepper.Root>
-  );
-}
-```
-
-#### Root-children
-
-`Stepper.Root`에 `children`를 전달하기 위한 `props`입니다.
-
-`children`으로는 `<Stepper.Step>`컴포넌트를 권장합니다.
-
-`<Stepper.Step>`컴포넌트의 사이에 `Divider`가 자동으로 렌더됩니다.
-
-`Divider`를 커스텀하기 위해서는 [↗Root-lineAs](#Root-lineAs)를 확인하세요.
-
-```ts
-import { Stepper } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Stepper.Root className="StepperRootClassName">
-      <Stepper.Step></Stepper.Step>
-      <Stepper.Step></Stepper.Step>
-      <Stepper.Step></Stepper.Step>
-    </Stepper.Root>
-  );
-};
-```
-
-#### Root-activeStep
-
-`Stepper.Root`에 `activeStep`를 전달하기 위한 `props`입니다. 기본값은 `null`입니다.
-
-`activeStep`에 전달한 숫자값은 현재 활성화하는 `Step`을 의미합니다.
-
-첫 번째 `Step`은 `0`부터 시작합니다.
-
-```ts
-import { Stepper } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Stepper.Root activeStep={0}>
-      <Stepper.Step></Stepper.Step>
-      <Stepper.Step></Stepper.Step>
-      <Stepper.Step></Stepper.Step>
-    </Stepper.Root>
-  );
-};
-```
-
-#### Root-linear
-
-`Stepper.Root`에 `linear`를 전달하기 위한 `props`입니다. 기본값은 `true`입니다.
-
-`linear`가 `true`일때는 `step`을 클릭해서 자유롭게 이동하지 못합니다. `active`의 상태를 직접 변경해야 합니다.
-
-`linear`가 `false`일때는 `step`을 클릭하여 `onClick`을 통해 `active`의 `index`값을 받을 수 있습니다.
-
-`false`일 경우 `onClick`이벤트를 통하여 `active`상태를 컨트롤 해야하므로 함께 사용을 권장합니다.
-
-```ts
-import { Stepper } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  const [active, setActive] = React.useState(0);
-
-  return (
-    <Stepper.Root linear={false} active={active} onClick=(setActive)>
-      <Stepper.Step></Stepper.Step>
-      <Stepper.Step></Stepper.Step>
-      <Stepper.Step></Stepper.Step>
-    </Stepper.Root>
-  );
-}
-```
-
-#### Root-direction
-
-`Stepper.Root`에 `direction`를 전달하기 위한 `props`입니다. 기본값은 `row`입니다.
-
-`Stepper`의 ui를 수직, 수평으로 변경할 수 있습니다.
-
-```ts
-import { Stepper } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Stepper.Root direction="column">
-      <Stepper.Step></Stepper.Step>
-      <Stepper.Step></Stepper.Step>
-      <Stepper.Step></Stepper.Step>
-    </Stepper.Root>
-  );
-};
-```
-
-#### Root-contentsPosition
-
-`Stepper.Root`에 `contentsPosition`를 전달하기 위한 `props`입니다. 기본값은 `bottom`입니다.
-
-`contentPosition`에 따라 `title` ui와 `desc` ui의 위치를 결정할 수 있습니다.
-
-```ts
-import { Stepper } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Stepper.Root contentsPosition="right">
-      <Stepper.Step title="title" desc="description"></Stepper.Step>
-      <Stepper.Step title="title" desc="description"></Stepper.Step>
-      <Stepper.Step title="title" desc="description"></Stepper.Step>
-    </Stepper.Root>
-  );
-};
-```
-
-#### Root-lineAs
-
-`Stepper.Root`에 `lineAs`를 전달하기 위한 `props`입니다.
-
-`Step`사이에 렌더링 되는 `Divider`를 대체하기 위해 사용됩니다.
-
-아래는 `lineAs`가 받는 파라미터의 타입입니다.
-
-##### LineAsProps
-
-```
-{
-  defaultClassName: string;
-  direction: "row" | "column";
-  contentsPosition: "top" | "bottom" | "left" | "right";
-  index: number;
-}
-```
-
-```ts
-import { Stepper } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Stepper.Root
-      lineAs={(props) => {
-        return (
-          props?.direction === "row" && (
-            <Divider
-              className={cx(props?.defaultClassName, "Divider", {
-                active: (props?.index ?? 0) <= active,
-              })}
-              size={props?.direction === "row" ? 5 : undefined}
-            />
-          )
-        );
-      }}
-    >
-      <Stepper.Step></Stepper.Step>
-      <Stepper.Step></Stepper.Step>
-      <Stepper.Step></Stepper.Step>
-    </Stepper.Root>
-  );
-};
-```
-
-#### Root-onClick
-
-`Stepper.Root`에 `className`를 전달하기 위한 `props`입니다.
-
-현재 클릭한 `Step`의 `index`를 파라미터로 받습니다.
-
-해당 기능을 활성화 하기 위해서는 `linear`가 `false`여야 합니다. [↗참고](#Root-linear)
-
-### Step
-
-`Stepper.Step`는 Stepper ui의 각 `Step`을 표시하기 위해 사용됩니다. 각 `Step`에는 자동으로 `index`가 생성됩니다.
-
-| Prop                         |                                         Type                                          | Required | Default Value |
-| :--------------------------- | :-----------------------------------------------------------------------------------: | :------: | :-----------: |
-| [className](#Step-className) |                                        String                                         |    -     |       -       |
-| [index](#Step-index)         |                                        number                                         |    -     |       -       |
-| [title](#Step-title)         | string or number or (props: [StepsRenderProps](#StepsRenderProps)) => React.ReactNode |    -     |       -       |
-| [desc](#Step-desc)           | string or number or (props: [StepsRenderProps](#StepsRenderProps)) => React.ReactNode |    -     |       -       |
-| [point](#Step-point)         | string or number or (props: [StepsRenderProps](#StepsRenderProps)) => React.ReactNode |    -     |       -       |
-
-#### Step-className
-
-`Stepper.Step`에 `className`를 전달하기 위한 `props`입니다.
-
-```ts
-import { Stepper } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Stepper.Root>
-      <Stepper.Step className="StepperStepClassName"></Stepper.Step>
-      <Stepper.Step className="StepperStepClassName"></Stepper.Step>
-      <Stepper.Step className="StepperStepClassName"></Stepper.Step>
-    </Stepper.Root>
-  );
-};
-```
-
-#### Step-index
-
-`Stepper.Step`에 `index`를 전달하기 위한 `props`입니다.
-
-각 `Step`에 자동으로 할당되기에 외부에서 사용하지 않는 것을 권장합니다.
-
-#### StepsRenderProps
-
-`Step-title, Step-desc, Step-point` props의 파라미터 타입입니다.
-
-```
-{
-  index: number;
-  active: boolean;
-  defaultClassName: string;
-}
-```
-
-#### Step-title
-
-`Stepper.Step`에 `title`를 전달하기 위한 `props`입니다.
-
-`string`과 `number`타입의 값을 전달하게 되면 기본 스타일 ui에 값만 변경됩니다.
-
-`function`을 전달할 경우 리턴값을 렌더링하게 됩니다.
-
-```ts
-import { Stepper } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Stepper.Root>
-      <Stepper.Step title={"title"}></Stepper.Step>
-      <Stepper.Step title={1}></Stepper.Step>
-      <Stepper.Step
-        title={({ index, active, defaultClassName }) => (
-          <div
-            className={cx(defaultClassName, "Title", {
-              completed: index <= active,
-            })}
-          >
-            title
-          </div>
-        )}
-      ></Stepper.Step>
-    </Stepper.Root>
-  );
-};
-```
-
-#### Step-desc
-
-`Stepper.Step`에 `desc`를 전달하기 위한 `props`입니다.
-
-사용방법은 `Step-title, Step-desc, Step-point` 전부 동일합니다. [↗참고](#Step-title)
-
-#### Step-point
-
-`Stepper.Step`에 `point`를 전달하기 위한 `props`입니다.
-
-사용방법은 `Step-title, Step-desc, Step-point` 전부 동일합니다. [↗참고](#Step-title)
-
-## Example
-
-프로젝트를 실행하고 해당 [Link](http://localhost:3000/users/Stepper)에서 확인할 수 있습니다.

package/src/components/Stepper/Stepper.context.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-
-type LineAsProps = {
-  defaultClassName: string;
-  direction: "row" | "column";
-  contentsPosition: "top" | "bottom" | "left" | "right";
-  index: number;
-};
-
-type StepperContextType = {
-  activeStep?: number | null;
-  /** linear === false일 경우 onClick이벤트를 통해 active 컨트롤 */
-  linear?: boolean;
-  direction?: "row" | "column";
-
-  contentsPosition?: "top" | "bottom" | "left" | "right";
-  lineAs?: (props?: LineAsProps) => React.ReactNode;
-  onClick?: (index: number) => void;
-  // private state
-};
-
-const initialState: StepperContextType = {
-  activeStep: null,
-  linear: true,
-};
-
-export const StepperContext =
-  React.createContext<StepperContextType>(initialState);
-
-export type StepperProviderProps = React.PropsWithChildren<
-  StepperContextType & {
-    className?: string;
-  }
->;
-
-export const StepperProvider = (props: StepperProviderProps) => {
-  const { children } = props;
-
-  return (
-    <StepperContext.Provider
-      value={{
-        ...initialState,
-        ...props,
-      }}
-    >
-      {children}
-    </StepperContext.Provider>
-  );
-};

package/src/components/Stepper/Stepper.module.scss

@@ -1,163 +0,0 @@
-.Root {
-  width: auto;
-  display: flex;
-  position: relative;
-  align-items: flex-start;
-  &.row {
-    flex-direction: row;
-  }
-  &.column {
-    flex-direction: column;
-    gap: 10px;
-  }
-}
-
-.Divider {
-  height: 1px;
-  width: 100%;
-  background-color: #000;
-  &.row {
-    margin-inline: 10px;
-    transform: translate(0, 25px); // point 크기 / 2 + margin 크기
-
-    &.isTop {
-      align-self: flex-end;
-      transform: translate(0, -25px);
-    }
-  }
-  &.column {
-    width: 1px;
-    height: 100%;
-    min-height: 100px;
-    margin-block: 10px;
-    box-sizing: border-box;
-    transform: translate(25px, 0);
-  }
-}
-
-.Desc {
-  font-size: 14px;
-  color: var(--Gray-Gray70, #989b9f);
-  width: 200px;
-  display: flex;
-}
-
-.Title {
-  font-size: 20px;
-  color: var(--Gray-Gray70, #989b9f);
-  width: 200px;
-  display: flex;
-}
-
-.Content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.Point {
-  background-color: var(--Gray-Gray80, #b1b3b7);
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  flex-shrink: 0;
-  margin: 10px;
-}
-
-.Step {
-  display: flex;
-  position: relative;
-  width: fit-content;
-
-  &.block {
-    flex-direction: column;
-    align-items: center;
-
-    .Title,
-    .Desc {
-      text-align: center;
-      justify-content: center;
-    }
-  }
-  &.inline {
-    flex-direction: row;
-    .Title,
-    .Desc {
-      align-items: center;
-    }
-  }
-  &.left {
-    .Title,
-    .Desc {
-      justify-content: flex-end;
-      text-align: end;
-    }
-  }
-  &.column {
-    .Point {
-      align-self: flex-start;
-    }
-    &.block {
-      .Title,
-      .Desc {
-        text-align: start;
-        justify-content: flex-start;
-        border-left: 1px solid var(--Gray-Gray95, #e8e8e9);
-        transform: translate(25px, 0);
-        padding: 4px 0 4px 25px;
-      }
-    }
-  }
-  &.active {
-    .Point {
-      background-color: #688dee;
-    }
-    .Title {
-      color: #688dee;
-    }
-    .Desc {
-      color: #688dee;
-    }
-  }
-}
-
-.StepWrap {
-  display: flex;
-  cursor: pointer;
-  &.column {
-    flex-direction: column;
-
-    &.inline {
-      .Desc {
-        text-align: start;
-        border-left: 1px solid var(--Gray-Gray95, #e8e8e9);
-        transform: translate(25px, 0);
-        padding: 4px 0 4px 25px;
-      }
-    }
-
-    &.left {
-      align-items: flex-end;
-      .Desc {
-        text-align: end;
-        border-left: unset;
-        border-right: 1px solid var(--Gray-Gray95, #e8e8e9);
-        transform: translate(-25px, 0);
-        padding: 4px 25px 4px 0;
-      }
-    }
-    &.active {
-      .Desc {
-        color: #688dee;
-      }
-    }
-  }
-  &.linear{
-    cursor: default;
-  }
-}