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

package/src/components/Modal/README.md

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

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

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

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

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

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

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