@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Stepper/README.md

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

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

@@ -0,0 +1,163 @@
+.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;
+  }
+}