@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Modal/README.md

@@ -0,0 +1,130 @@
+# Modal UI
+
+## Contents List
+
+1. [Quick Start](#QuickStart)
+2. [Reference](#Reference)
+3. [Example](#Example)
+
+## Quick Start
+
+```tsx
+import { Modal } from "@weing-dev/ui-kit-primitive";
+import { DefaultModal } from "@weing-dev/ui-kit-extension";
+
+const Component = () => {
+  const [visible, setVisible] = React.useState(false);
+
+  return (
+    <Modal visible={visible} onClose={() => setVisible(false)}>
+      <DefaultModal
+        title="Title"
+        description="Information Text"
+        positive={{
+          text: "확인",
+          onClick: () => setVisible(false),
+        }}
+      />
+    </Modal>
+  );
+};
+```
+
+## Reference
+
+### Modal Props
+
+| Prop        | Type                               | Required | Default Value | Description                                    |
+| :---------- | :--------------------------------- | :------- | :------------ | :--------------------------------------------- |
+| visible     | boolean                            | -        | false         | 모달의 표시 여부를 제어합니다                  |
+| dimmedColor | "transparent" \| "light" \| "dark" | -        | "dark"        | 배경의 어두운 정도를 설정합니다                |
+| selector    | string                             | -        | "body"        | 모달이 렌더링될 DOM 요소의 선택자를 지정합니다 |
+| onClose     | () => void                         | -        | -             | 모달이 닫힐 때 실행될 콜백 함수입니다          |
+| children    | React.ReactNode                    | -        | -             | 모달 내부에 표시될 컨텐츠입니다                |
+
+## Example
+
+### 기본 확인 모달
+
+```tsx
+import { Modal } from "@weing-dev/ui-kit-primitive";
+import { DefaultModal } from "@weing-dev/ui-kit-extension";
+
+const Component = () => {
+  const [visible, setVisible] = React.useState(false);
+
+  return (
+    <>
+      <button onClick={() => setVisible(true)}>Open Modal</button>
+      <Modal visible={visible} onClose={() => setVisible(false)}>
+        <DefaultModal
+          title="Title"
+          description="Information Text"
+          positive={{
+            text: "확인",
+            onClick: () => setVisible(false),
+          }}
+        />
+      </Modal>
+    </>
+  );
+};
+```
+
+### 확인/취소 버튼이 있는 모달
+
+```tsx
+import { Modal } from "@weing-dev/ui-kit-primitive";
+import { DefaultModal } from "@weing-dev/ui-kit-extension";
+
+const Component = () => {
+  const [visible, setVisible] = React.useState(false);
+
+  return (
+    <Modal visible={visible} onClose={() => setVisible(false)}>
+      <DefaultModal
+        title="Title"
+        description="Information Text"
+        negative={{
+          text: "취소",
+          onClick: () => setVisible(false),
+        }}
+        positive={{
+          text: "확인",
+          onClick: () => setVisible(false),
+        }}
+      />
+    </Modal>
+  );
+};
+```
+
+### 커스텀 버튼 스타일
+
+```tsx
+import { Modal } from "@weing-dev/ui-kit-primitive";
+import { DefaultModal } from "@weing-dev/ui-kit-extension";
+
+const Component = () => {
+  const [visible, setVisible] = React.useState(false);
+
+  return (
+    <Modal visible={visible} onClose={() => setVisible(false)}>
+      <DefaultModal
+        title="Title"
+        description="Information Text"
+        negative={{
+          text: "삭제",
+          colorType: "red",
+          onClick: () => setVisible(false),
+        }}
+        positive={{
+          text: "취소",
+          colorType: "inherit",
+          onClick: () => setVisible(false),
+        }}
+      />
+    </Modal>
+  );
+};
+```

package/src/components/Pagination/Pagination.colors.tsx

@@ -0,0 +1,85 @@
+import { Transparent } from "@/styles/baseColor";
+import { colorThemes as colorSet } from "@/styles/color2";
+
+const usePaginationColors = () => {
+  const selected = {
+    primary: {
+      text: {
+        backgroundColor: colorSet.primary.pMain,
+        color: `var(--textContrast, ${colorSet.primary.pContrastText})`,
+        borderColor: "transparent",
+      },
+      soft: {
+        backgroundColor: colorSet.primary.p8,
+        color: `var(--swapDarkLightPrimary, ${colorSet.light.swapDarkLightPrimary})`,
+        borderColor: "transparent",
+      },
+      disabled: {
+        backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+        color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+        borderColor: "transparent",
+      },
+    },
+    standard: {
+      text: {
+        backgroundColor: `var(--inheritBgcolor,${colorSet.light.inheritBgcolor})`,
+        color: `var(--inheritColor, ${colorSet.light.inheritColor})`,
+        borderColor: "transparent",
+      },
+      soft: {
+        backgroundColor: Transparent.grey8,
+        color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+        borderColor: "transparent",
+      },
+      disabled: {
+        backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+        color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+        borderColor: "transparent",
+      },
+    },
+  };
+
+  const unselected = {
+    primary: {
+      text: {
+        backgroundColor: "transparent",
+        color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+        borderColor: "transparent",
+      },
+      soft: {
+        backgroundColor: "transparent",
+        color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+        borderColor: "transparent",
+      },
+      disabled: {
+        backgroundColor: "transparent",
+        color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+        borderColor: "transparent",
+      },
+    },
+    standard: {
+      text: {
+        backgroundColor: "transparent",
+        color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+        borderColor: "transparent",
+      },
+      soft: {
+        backgroundColor: "transparent",
+        color: `var(--textSecondary, ${colorSet.light.textSecondary})`,
+        borderColor: "transparent",
+      },
+      disabled: {
+        backgroundColor: "transparent",
+        color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+        borderColor: "transparent",
+      },
+    },
+  };
+
+  return {
+    selected,
+    unselected,
+  };
+};
+
+export default usePaginationColors;

package/src/components/Pagination/Pagination.context.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export type PaginationContextType = {
+  colorType: "primary" | "standard";
+  variant: "text" | "soft";
+  size: "medium" | "small";
+  shapeType?: "square" | "round";
+  disabled?: boolean;
+  offset?: number;
+  limit?: number;
+  total: number;
+  currentPage: number;
+  pageCount: number;
+  onClick: ({ offset, limit }: { offset: number; limit: number }) => void;
+};
+
+const initialState: PaginationContextType = {
+  colorType: "primary",
+  variant: "soft",
+  size: "medium",
+  total: 0,
+  currentPage: 1,
+  pageCount: 5,
+  onClick: () => {},
+};
+
+export const PaginationContext =
+  React.createContext<PaginationContextType>(initialState);

package/src/components/Pagination/Pagination.module.scss

@@ -0,0 +1,60 @@
+@layer Pagination {
+  .Root {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+
+    &.medium {
+      height: 40px;
+    }
+    &.small {
+      height: 32px;
+    }
+  }
+
+  .PageItem {
+    @include bodyRegularMedium;
+    border: none;
+    cursor: pointer;
+    background-color: var(--background-color);
+    color: var(--color);
+    height: inherit;
+    aspect-ratio: 1;
+
+    &.square {
+      border-radius: 8px;
+    }
+    &.round {
+      border-radius: 50%;
+    }
+    &.active {
+      @include bodyBoldMedium;
+    }
+
+    &.disabled {
+      cursor: auto;
+    }
+  }
+
+  .Icon {
+    border: none;
+    background: none;
+    box-sizing: border-box;
+    cursor: pointer;
+    text-align: center;
+    height: inherit;
+    aspect-ratio: 1;
+
+    &.medium {
+      padding: 8px;
+    }
+    &.small {
+      padding: 4px;
+    }
+
+    &.disabled {
+      cursor: auto;
+    }
+  }
+}

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,234 @@
+import React from "react";
+import styles from "./Pagination.module.scss";
+import cn from "classnames/bind";
+import { PaginationContext, PaginationContextType } from "./Pagination.context";
+import { Icon } from "../Icon/Icon";
+import usePaginationColors from "./Pagination.colors";
+
+const cx = cn.bind(styles);
+
+const Next = () => {
+  const {
+    size,
+    onClick,
+    limit = 15,
+    currentPage,
+    disabled,
+    total,
+    pageCount,
+  } = React.use(PaginationContext);
+
+  const iconDisabled = disabled || currentPage === total || total <= pageCount;
+  const handleNext = () => {
+    if (iconDisabled) return;
+    onClick({ offset: currentPage * limit, limit });
+  };
+
+  return (
+    <button
+      className={cx("Icon", size, { disabled: iconDisabled })}
+      onClick={handleNext}
+    >
+      <Icon
+        name={"GoNext"}
+        size={size === "medium" ? 24 : 20}
+        color={iconDisabled ? "#C4CDD5" : "#1C252E"}
+      />
+    </button>
+  );
+};
+
+const Prev = () => {
+  const {
+    size,
+    onClick,
+    limit = 15,
+    currentPage,
+    disabled,
+    total,
+    pageCount,
+  } = React.use(PaginationContext);
+
+  const iconDisabled = disabled || currentPage === 1 || total <= pageCount;
+  const handlePrev = () => {
+    if (iconDisabled) return;
+    onClick({ offset: (currentPage - 2) * limit, limit });
+  };
+
+  return (
+    <button
+      className={cx("Icon", size, { disabled: iconDisabled })}
+      onClick={handlePrev}
+    >
+      <Icon
+        name={"GoBefore"}
+        size={size === "medium" ? 24 : 20}
+        color={iconDisabled ? "#C4CDD5" : "#1C252E"}
+      />
+    </button>
+  );
+};
+
+type PageItemProps = {
+  active: boolean;
+  onClick: (page: number) => void;
+  page: number;
+};
+
+const PageItem = (props: PageItemProps) => {
+  const { active, onClick, page } = props;
+  const {
+    shapeType = "round",
+    variant,
+    colorType,
+    disabled,
+  } = React.use(PaginationContext);
+
+  const paginationColor = usePaginationColors();
+  const colorSet =
+    paginationColor[active ? "selected" : "unselected"][colorType];
+  const styles = {
+    "--color": colorSet[disabled ? "disabled" : variant].color,
+    "--background-color":
+      colorSet[disabled ? "disabled" : variant].backgroundColor,
+    "--border-color": colorSet[variant].borderColor,
+  };
+
+  return (
+    <button
+      onClick={onClick.bind(null, page)}
+      className={cx("PageItem", shapeType, { active, disabled })}
+      style={styles}
+    >
+      {page}
+    </button>
+  );
+};
+
+type PageListProps = {
+  itemAs?: ({
+    page,
+    active,
+    onClick,
+  }: {
+    page: number;
+    active: boolean;
+    onClick: (page: number) => void;
+  }) => React.ReactNode;
+};
+
+const PageList = (props: PageListProps) => {
+  const { itemAs } = props;
+  const {
+    onClick,
+    total,
+    currentPage,
+    pageCount,
+    limit = 15,
+    disabled,
+  } = React.use(PaginationContext);
+
+  const pageNumbers = [];
+  let startPage = currentPage - Math.floor(pageCount / 2);
+  if (startPage < 1) {
+    startPage = 1;
+  }
+  let endPage = startPage + pageCount - 1;
+  if (endPage > total) {
+    endPage = total;
+    startPage = Math.max(1, endPage - pageCount + 1);
+  }
+
+  for (let i = startPage; i <= endPage; i++) {
+    pageNumbers.push(i);
+  }
+  if (total === 0) return null;
+
+  const handleClick = (page: number) => {
+    if (disabled) return;
+    if (currentPage === page) return;
+    onClick({ offset: (page - 1) * limit, limit });
+  };
+
+  return (
+    <React.Fragment>
+      {pageNumbers.map((page, index) => {
+        return (
+          <React.Fragment key={index}>
+            {itemAs ? (
+              itemAs({
+                page,
+                active: currentPage === page,
+                onClick: handleClick,
+              })
+            ) : (
+              <PageItem
+                onClick={handleClick}
+                active={currentPage === page}
+                page={page}
+              />
+            )}
+          </React.Fragment>
+        );
+      })}
+    </React.Fragment>
+  );
+};
+
+type RootProps = {} & Omit<PaginationContextType, "currentPage">;
+
+const Root = (props: React.PropsWithChildren<RootProps>) => {
+  const {
+    variant,
+    shapeType = "round",
+    colorType,
+    size,
+    total,
+    limit = 15,
+    offset = 0,
+    children,
+    pageCount,
+    disabled,
+    onClick,
+  } = props;
+  const totalPages = total < limit ? 1 : Math.ceil(total / limit);
+  const currentPage = Math.ceil(offset / limit) + 1;
+  if (offset > total) {
+    console.error("[Pagination] offset can't be greater than total");
+  }
+  return (
+    <PaginationContext
+      value={{
+        shapeType,
+        variant,
+        colorType,
+        size,
+        total: totalPages,
+        limit,
+        offset,
+        currentPage,
+        pageCount,
+        disabled,
+        onClick,
+      }}
+    >
+      <nav className={cx("Root", size)}>{children}</nav>
+    </PaginationContext>
+  );
+};
+
+interface IPagination {
+  Root: typeof Root;
+  Next: typeof Next;
+  Prev: typeof Prev;
+  PageItem: typeof PageItem;
+  PageList: typeof PageList;
+}
+
+export default {
+  Next,
+  Prev,
+  PageItem,
+  PageList,
+  Root,
+} as IPagination;

package/src/components/Popup/Popup.context.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export type PopupContextType = {
+  id: string;
+  bodyScroll?: boolean;
+  dimmedDisabled?: boolean;
+};
+
+const initialState: PopupContextType = {
+  id: "",
+  bodyScroll: false,
+  dimmedDisabled: false,
+};
+
+export const PopupContext = React.createContext<PopupContextType>(initialState);

package/src/components/Popup/Popup.module.scss

@@ -0,0 +1,53 @@
+@layer Popup {
+  html:has(.Layer:popover-open.bodyScroll) {
+    overflow: auto;
+  }
+
+  html:has(.Layer:popover-open:not(.bodyScroll)) {
+    overflow: hidden;
+  }
+
+  @property --shadow-color {
+    syntax: "<color>";
+    initial-value: #919eab33;
+    inherits: false;
+  }
+
+  .Contents {
+    padding: 16px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 20px 50px 20px var(--shadow-color);
+    z-index: 1000;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .Dimmed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    cursor: default;
+  }
+
+  .Layer {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: none;
+
+    &:popover-open {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &::backdrop {
+      display: none;
+    }
+  }
+}