@remember-web/primitive 0.0.0-alpha.1

package/src/Paginations/Pagination/Pagination.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Pagination } from '.';
+
+type Story = StoryObj<typeof Pagination>;
+
+const meta = {
+  title: 'Common/Pagination',
+  component: Pagination,
+  args: {
+    totalItemCount: 100,
+    pageRangeDisplayed: 10,
+    itemCountPerPage: 10,
+    className: 'pagination',
+    showFirstButton: true,
+    showLastButton: true,
+  },
+} satisfies Meta<typeof Pagination>;
+
+export const Basic: Story = {
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [pageNumber1, setPageNumber1] = useState(1);
+
+    return (
+      <Pagination
+        {...args}
+        onChangePage={(page) => {
+          setPageNumber1(page);
+        }}
+        activePage={pageNumber1}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/Paginations/Pagination/index.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import {
+  IconArrow2Left,
+  IconArrow2Right,
+  IconArrowDoubleLeft,
+  IconArrowDoubleRight,
+} from '@remember-web/icon';
+import { contents000, contents300 } from '@remember-web/mixin';
+import { range } from '@remember-web/shared/utils/common';
+
+import {
+  ArrowButton,
+  Page,
+  PageButton,
+  Pages,
+  PaginationContainer,
+} from '../styles';
+import type { PaginationProps } from '../types';
+import usePagination from '../usePagination';
+
+export function Pagination({
+  activePage = 1,
+  totalItemCount,
+  pageRangeDisplayed = 10,
+  onChangePage,
+  itemCountPerPage,
+  className,
+  showFirstButton = false,
+  showLastButton = false,
+}: PaginationProps) {
+  const {
+    firstPage,
+    rangeLastPage,
+    totalLastPage,
+    prevPage,
+    nextPage,
+    isPrevPageDisabled,
+    isNextPageDisabled,
+    isFirstPageDisabled,
+    isLastPageDisabled,
+  } = usePagination({
+    activePage,
+    totalItemCount,
+    pageRangeDisplayed,
+    itemCountPerPage,
+  });
+
+  const iconColor = (disabled: boolean) =>
+    disabled ? contents300 : contents000;
+
+  const onClickPrevPage = () => onChangePage(prevPage);
+  const onClickNextPage = () => onChangePage(nextPage);
+  const onClickFirstPage = () => onChangePage(1);
+  const onClickLastPage = () => onChangePage(totalLastPage);
+
+  const onClickPage = (page: number) => onChangePage(page);
+
+  return (
+    <PaginationContainer
+      className={className}
+      role="navigation"
+      aria-label="페이지네이션"
+    >
+      {showFirstButton && (
+        <ArrowButton
+          disabled={isFirstPageDisabled}
+          onClick={onClickFirstPage}
+          aria-label="첫 페이지로 이동"
+        >
+          <IconArrowDoubleLeft
+            size="small"
+            color={iconColor(isFirstPageDisabled)}
+            aria-hidden="true"
+          />
+        </ArrowButton>
+      )}
+      <ArrowButton
+        disabled={isPrevPageDisabled}
+        onClick={onClickPrevPage}
+        aria-label="이전 페이지로 이동"
+      >
+        <IconArrow2Left
+          size="small"
+          color={iconColor(isPrevPageDisabled)}
+          aria-hidden="true"
+        />
+      </ArrowButton>
+      <Pages>
+        {range(firstPage, rangeLastPage)?.map((_page) => (
+          <Page key={_page}>
+            <PageButton
+              selected={_page === activePage}
+              onClick={() => onClickPage(_page)}
+              aria-label={`페이지 ${_page}`}
+            >
+              {_page}
+            </PageButton>
+          </Page>
+        ))}
+      </Pages>
+      <ArrowButton
+        disabled={isNextPageDisabled}
+        onClick={onClickNextPage}
+        aria-label="다음 페이지로 이동"
+      >
+        <IconArrow2Right
+          size="small"
+          color={iconColor(isNextPageDisabled)}
+          aria-hidden="true"
+        />
+      </ArrowButton>
+      {showLastButton && (
+        <ArrowButton
+          disabled={isLastPageDisabled}
+          onClick={onClickLastPage}
+          aria-label="마지막 페이지로 이동"
+        >
+          <IconArrowDoubleRight
+            size="small"
+            color={iconColor(isLastPageDisabled)}
+            aria-hidden="true"
+          />
+        </ArrowButton>
+      )}
+    </PaginationContainer>
+  );
+}

package/src/Paginations/index.ts

@@ -0,0 +1,2 @@
+export * from './Pagination';
+export * from './CompactPagination';

package/src/Paginations/styles.ts

@@ -0,0 +1,113 @@
+'use client';
+
+import styled, { css } from 'styled-components';
+import {
+  bg100,
+  bg200,
+  bg300,
+  contents000,
+  contents300,
+  getTypographyStyles,
+} from '@remember-web/mixin';
+
+import { mobileOnly, desktopOnly } from '@remember-web/mixin';
+
+export const PaginationContainer = styled.nav`
+  all: unset;
+  display: inline-flex;
+  list-style-type: none;
+  box-sizing: border-box;
+  user-select: none;
+  margin: 0;
+  padding: 0;
+  gap: 16px;
+
+  ${mobileOnly(css`
+    gap: 8px;
+  `)}
+`;
+
+export const CompactPaginationContainer = styled.div`
+  all: unset;
+
+  ${getTypographyStyles('Body1_M')}
+  gap: 16px;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  height: fit-content;
+`;
+
+export const CurrentPage = styled.span`
+  ${getTypographyStyles('Body1_B')}
+`;
+
+export const Pages = styled.ul`
+  all: unset;
+  display: inherit;
+  gap: 4px;
+`;
+
+export const Page = styled.li``;
+
+const DefaultButton = styled.button.attrs({ type: 'button' })`
+  all: unset;
+  appearance: none;
+  box-sizing: border-box;
+
+  ${getTypographyStyles('Body1_M')}
+  display: grid;
+  place-items: center;
+
+  min-width: 34px;
+  height: 34px;
+  cursor: pointer;
+  color: ${contents000};
+  border-radius: 4px;
+
+  &:disabled {
+    color: ${contents000};
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+`;
+
+export const ArrowButton = styled(DefaultButton)`
+  ${desktopOnly(css`
+    &:hover {
+      background-color: ${bg200};
+    }
+    &:active {
+      background-color: ${bg300};
+    }
+  `)}
+
+  ${mobileOnly(css`
+    min-width: 44px;
+    height: 44px;
+  `)}
+`;
+
+export const BaseButton = styled(DefaultButton)`
+  &:hover,
+  &:focus {
+    border: solid 1px ${contents300};
+    border-radius: 4px;
+    background-color: ${bg100};
+  }
+
+  ${mobileOnly(css`
+    min-width: 44px;
+    height: 44px;
+  `)}
+`;
+
+export const PageButton = styled(BaseButton)<{ selected?: boolean }>`
+  ${({ selected }) =>
+    selected &&
+    css`
+      border: solid 1px ${contents300};
+      border-radius: 4px;
+      background-color: ${bg100};
+    `}
+`;

package/src/Paginations/types.ts

@@ -0,0 +1,24 @@
+export interface DefaultPaginationProps {
+  itemCountPerPage: number;
+  totalItemCount: number;
+  activePage: number;
+  onChangePage: (page: number) => void;
+  className?: string;
+}
+
+export interface CompactPaginationProps extends DefaultPaginationProps {
+  infinite?: boolean;
+}
+
+export interface PaginationProps extends DefaultPaginationProps {
+  pageRangeDisplayed?: number;
+  showFirstButton?: boolean;
+  showLastButton?: boolean;
+}
+
+export type PaginationItems = Required<
+  Pick<
+    PaginationProps,
+    'itemCountPerPage' | 'pageRangeDisplayed' | 'totalItemCount' | 'activePage'
+  >
+>;

package/src/Paginations/usePagination.ts

@@ -0,0 +1,57 @@
+import { useMemo } from 'react';
+
+import type { PaginationItems } from './types';
+
+function usePagination({
+  itemCountPerPage,
+  pageRangeDisplayed,
+  totalItemCount,
+  activePage,
+}: PaginationItems) {
+  const buffer = activePage % pageRangeDisplayed === 0 ? 1 : 0;
+
+  const firstPage = Math.max(
+    1,
+    Math.floor(activePage / pageRangeDisplayed - buffer) * pageRangeDisplayed +
+      1
+  );
+
+  const totalPages = Math.ceil(totalItemCount / itemCountPerPage);
+
+  const rangeLastPage = useMemo(
+    () =>
+      Math.min(
+        totalPages,
+        Math.ceil(activePage / pageRangeDisplayed) * pageRangeDisplayed
+      ),
+    [activePage, pageRangeDisplayed, totalPages]
+  );
+
+  const totalLastPage = useMemo(
+    () => (!totalItemCount ? 1 : Math.ceil(totalItemCount / itemCountPerPage)),
+    [totalItemCount, itemCountPerPage]
+  );
+
+  const prevPage = firstPage - 1;
+  const nextPage = rangeLastPage + 1;
+
+  const isPrevPageDisabled = prevPage < 1;
+  const isNextPageDisabled = nextPage > totalPages;
+
+  const isFirstPageDisabled = activePage === 1;
+  const isLastPageDisabled = activePage === totalLastPage;
+
+  return {
+    firstPage,
+    rangeLastPage,
+    totalLastPage,
+    totalPages,
+    prevPage,
+    nextPage,
+    isPrevPageDisabled,
+    isNextPageDisabled,
+    isFirstPageDisabled,
+    isLastPageDisabled,
+  };
+}
+export default usePagination;

package/src/hooks/useMouseEventAway.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from 'react';
+
+type MouseEventNames = Extract<
+  keyof DocumentEventMap,
+  `mouse${string}` | `pointer${string}` | `touch${string}` | 'click'
+>;
+
+export default function useMouseEventAway<
+  T extends HTMLElement,
+  E extends MouseEventNames
+>(eventName: E, callback: (e: DocumentEventMap[E]) => void) {
+  const ref = useRef<T | null>(null);
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+
+  useEffect(() => {
+    function clickAwayHandler(e: DocumentEventMap[E]) {
+      if (!(e.target instanceof Node)) {
+        return;
+      }
+
+      if (ref.current && !ref.current.contains(e.target)) {
+        callbackRef.current(e);
+      }
+    }
+
+    document.addEventListener(eventName, clickAwayHandler, true);
+
+    return () => {
+      document.removeEventListener(eventName, clickAwayHandler, true);
+    };
+  }, [eventName]);
+
+  return ref;
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+export * from './Avatars';
+export * from './Buttons';
+export * from './Badge';
+export * from './Common';
+export * from './Control';
+export * from './Logos';
+export * from './Modals';
+export * from './Paginations';
+export * from './Inputs';
+export * from './Floating';
+export * from './Gnb';

package/src/stories/common.styles.tsx

@@ -0,0 +1,79 @@
+import type { ReactNode } from 'react';
+import styled, { css } from 'styled-components';
+
+import {
+  bg100,
+  contents000,
+  contents100,
+  contents300,
+} from '@remember-web/mixin';
+
+type TextAlign = 'left' | 'center' | 'right';
+
+export const Paper = styled.div<{
+  $minWidth?: number;
+  $maxWidth?: number;
+}>`
+  background: ${bg100};
+  padding: 30px;
+  border-radius: 5px;
+  box-shadow: 0 0px 16px 0 rgba(0, 0, 0, 0.1);
+
+  ${({ $minWidth }) =>
+    $minWidth &&
+    css`
+      min-width: ${$minWidth}px;
+    `}
+  ${({ $maxWidth }) =>
+    $maxWidth &&
+    css`
+      max-width: ${$maxWidth}px;
+    `}
+`;
+
+export const TitleContainer = styled.div`
+  margin-bottom: 32px;
+`;
+
+export const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  color: ${contents000};
+`;
+
+export const TableHeader = styled.thead``;
+
+export const TableBody = styled.tbody``;
+
+const Th = styled.th<{ align?: TextAlign }>`
+  border: 1px solid ${contents100};
+  border-width: 1px 0 1px 0;
+  padding: 10px;
+  text-align: ${({ align = 'left' }) => align};
+  vertical-align: middle;
+`;
+
+const Td = styled.td<{ align?: TextAlign }>`
+  border-bottom: 1px solid ${contents300};
+  vertical-align: top;
+  padding: 20px 10px;
+  text-align: ${({ align = 'left' }) => align};
+  vertical-align: middle;
+`;
+
+export const TableColumn = ({
+  isHeader,
+  align = 'left',
+  children,
+}: {
+  isHeader?: boolean;
+  align?: TextAlign;
+  children: ReactNode;
+}) =>
+  isHeader ? (
+    <Th align={align}>{children}</Th>
+  ) : (
+    <Td align={align}>{children}</Td>
+  );
+
+export const TableRow = styled.tr``;

package/src/stories/util.tsx

@@ -0,0 +1,18 @@
+import * as Icons from '@remember-web/icon';
+
+export type IconWithSizeNameType = Extract<
+  keyof typeof Icons,
+  `${string}${'S' | 'M' | 'L'}`
+>;
+
+export const iconNames = [
+  'none' as const,
+  ...(Object.keys(Icons) as IconWithSizeNameType[]),
+];
+
+export const isIconName = (value: string): value is IconWithSizeNameType =>
+  Object.keys(Icons).includes(value);
+
+export function getIconComponentFromName(iconName: IconWithSizeNameType) {
+  return Icons[iconName];
+}