@teamturing/react-kit 2.13.0 → 2.14.0

package/esm/core/Pagination/index.js

@@ -0,0 +1,273 @@
+import { useCallback, Fragment } from 'react';
+import SvgChevronLeft from '../../packages/icons/esm/ChevronLeft.js';
+import SvgChevronRight from '../../packages/icons/esm/ChevronRight.js';
+import { noop } from '../../packages/utils/esm/noop.js';
+import styled, { css } from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { sx } from '../../utils/styled-system/index.js';
+import UnstyledButton from '../_UnstyledButton.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const Pagination = ({
+  pages: propPages,
+  currentPageIndex,
+  aroundPageCount = 1,
+  edgePageCount = 1,
+  type = 'default',
+  sx,
+  onPageClick = noop,
+  onPreviousClick = noop,
+  onNextClick = noop,
+  renderPage = (page, i) => /*#__PURE__*/jsxRuntimeExports.jsx(PaginationPage, {
+    onClick: () => onPageClick(page, i),
+    selected: i === currentPageIndex,
+    children: page.label
+  }),
+  renderPageWrapper = (children, {
+    label
+  }, i) => /*#__PURE__*/jsxRuntimeExports.jsx(Fragment, {
+    children: children
+  }, [label, i].join('-')),
+  renderPreviousPageDirection = ({
+    previousPageDirectionProps
+  }) => /*#__PURE__*/jsxRuntimeExports.jsxs(PaginationPageDirection, {
+    ...previousPageDirectionProps,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(SvgChevronLeft, {}), "\uC774\uC804"]
+  }),
+  renderNextPageDirection = ({
+    nextPageDirectionProps
+  }) => /*#__PURE__*/jsxRuntimeExports.jsxs(PaginationPageDirection, {
+    ...nextPageDirectionProps,
+    children: ["\uB2E4\uC74C", /*#__PURE__*/jsxRuntimeExports.jsx(SvgChevronRight, {})]
+  }),
+  renderTruncationIndicator = () => /*#__PURE__*/jsxRuntimeExports.jsx(PaginationTruncationIndicator, {
+    children: "\u2026"
+  })
+}) => {
+  const CURRENT_PAGE_COUNT = 1;
+  const totalVisiblePageCount = CURRENT_PAGE_COUNT + 2 * aroundPageCount + 2 * edgePageCount;
+  const pages = propPages.map((page, i) => ({
+    page,
+    originalIndex: i
+  }));
+  const totalPageCount = propPages.length;
+  const isCurrentPageCloseToBeginEdge = currentPageIndex < edgePageCount + aroundPageCount + CURRENT_PAGE_COUNT;
+  const isCurrentPageCloseToEndEdge = totalPageCount - (edgePageCount + aroundPageCount + CURRENT_PAGE_COUNT) < currentPageIndex + 1;
+  const isTruncationNeeded = totalVisiblePageCount < totalPageCount;
+  const renderPaginationPage = useCallback((page, i) => renderPageWrapper(renderPage(page, i), page, i), [currentPageIndex]);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(BasePagination, {
+    type: type,
+    sx: sx,
+    children: [renderPreviousPageDirection({
+      previousPageDirectionProps: {
+        onClick: () => onPreviousClick(currentPageIndex),
+        disabled: currentPageIndex === 0
+      }
+    }), !isTruncationNeeded ? pages.map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)) : isTruncationNeeded && isCurrentPageCloseToBeginEdge ? [pages.slice(0, edgePageCount + aroundPageCount * 2 + CURRENT_PAGE_COUNT).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(Fragment, {
+      children: renderTruncationIndicator()
+    }, 'end_truncation_indicator'), pages.slice(edgePageCount * -1).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex))] : isTruncationNeeded && isCurrentPageCloseToEndEdge ? [pages.slice(0, edgePageCount).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(Fragment, {
+      children: renderTruncationIndicator()
+    }, 'begin_truncation_indicator'), pages.slice(totalPageCount - (edgePageCount + aroundPageCount * 2 + CURRENT_PAGE_COUNT)).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex))] : [pages.slice(0, edgePageCount).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(Fragment, {
+      children: renderTruncationIndicator()
+    }, 'begin_truncation_indicator'), pages.slice(currentPageIndex - aroundPageCount, currentPageIndex + aroundPageCount + CURRENT_PAGE_COUNT).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(Fragment, {
+      children: renderTruncationIndicator()
+    }, 'end_truncation_indicator'), pages.slice(edgePageCount * -1).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex))], renderNextPageDirection({
+      nextPageDirectionProps: {
+        onClick: () => onNextClick(currentPageIndex),
+        disabled: currentPageIndex === totalPageCount - 1
+      }
+    })]
+  });
+};
+const BasePagination = styled.nav`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[1])};
+
+  ${variant({
+  prop: 'type',
+  variants: {
+    default: {},
+    simple: {
+      '& > *:not(:first-child):not(:last-child)': {
+        display: 'none !important'
+      }
+    }
+  }
+})}
+  ${sx}
+`;
+const PaginationPage = styled(UnstyledButton)`
+  transition: background-color 100ms;
+
+  height: ${forcePixelValue(32)};
+  min-width: ${forcePixelValue(32)};
+
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler']};
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.regular};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+
+  ${({
+  selected
+}) => selected ? css`
+          background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/bolder']};
+          color: ${({
+  theme
+}) => theme.colors['text/inverse']};
+        ` : css`
+          &:hover {
+            background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler/hovered']};
+          }
+        `}
+`;
+const PaginationPageDirection = styled(UnstyledButton)`
+  transition: background-color 100ms;
+
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[1])};
+
+  height: ${forcePixelValue(32)};
+  min-width: ${forcePixelValue(32)};
+
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler']};
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.regular};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+
+  & svg {
+    color: ${({
+  theme
+}) => theme.colors['icon/accent/gray']};
+    width: ${forcePixelValue(16)};
+    height: ${forcePixelValue(16)};
+  }
+
+  &:hover:not(:disabled) {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler/hovered']};
+  }
+  &:disabled {
+    cursor: not-allowed;
+    color: ${({
+  theme
+}) => theme.colors['text/disabled']};
+    & > svg {
+      color: ${({
+  theme
+}) => theme.colors['icon/disabled']};
+    }
+  }
+`;
+const PaginationTruncationIndicator = styled.div`
+  min-width: ${forcePixelValue(32)};
+
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler']};
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.regular};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+
+  pointer-events: none;
+
+  ${sx}
+`;
+var index = Object.assign(Pagination, {
+  Page: PaginationPage,
+  PageDirection: PaginationPageDirection,
+  TruncationIndicator: PaginationTruncationIndicator
+});
+
+export { index as default };

package/esm/core/Pill/index.js

@@ -0,0 +1,129 @@
+import { forwardRef } from 'react';
+import SvgClose from '../../packages/icons/esm/Close.js';
+import { r as reactIsExports } from '../../node_modules/react-is/index.js';
+import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { isNullable } from '../../utils/isNullable.js';
+import { sx } from '../../utils/styled-system/index.js';
+import UnstyledButton from '../_UnstyledButton.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const Pill = ({
+  text,
+  size = 'm',
+  variant = 'secondary',
+  leadingVisual: LeadingVisual,
+  onRemove,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntimeExports.jsxs(BasePill, {
+  ref: ref,
+  size: size,
+  variant: variant,
+  hasLeadingVisual: !isNullable(LeadingVisual),
+  hasRemoveButton: !isNullable(onRemove),
+  ...props,
+  children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual, text, onRemove ? /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledButton, {
+    type: 'button',
+    onClick: onRemove,
+    "aria-label": 'Remove Pill',
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(SvgClose, {})
+  }) : null]
+});
+const BasePill = styled.span`
+  display: inline-flex;
+  align-items: center;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xxs)};
+
+  & > button {
+    display: flex;
+    transition: background-color 100ms;
+    border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.full)};
+  }
+
+  ${({
+  theme,
+  hasLeadingVisual,
+  hasRemoveButton
+}) => variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'pl': hasLeadingVisual || hasRemoveButton ? 2 : 3,
+      'pr': hasRemoveButton ? 0.5 : hasLeadingVisual ? 2 : 3,
+      'py': 1,
+      'fontSize': theme.fontSizes.s,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
+      'columnGap': 1,
+      '& svg': {
+        width: 16,
+        height: 16,
+        color: theme.colors['icon/primary']
+      },
+      '& button': {
+        p: 1
+      }
+    },
+    m: {
+      'pl': hasLeadingVisual || hasRemoveButton ? 2 : 3,
+      'pr': hasRemoveButton ? 1 : hasLeadingVisual ? 2 : 3,
+      'py': 1,
+      'fontSize': theme.fontSizes.xs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
+      'columnGap': 0.5,
+      '& svg': {
+        width: 16,
+        height: 16,
+        color: theme.colors['icon/primary']
+      },
+      '& button': {
+        p: 0.5
+      }
+    },
+    s: {
+      'pl': 2,
+      'pr': hasRemoveButton ? 1 : 2,
+      'py': 0.5,
+      'fontSize': theme.fontSizes.xxs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
+      'columnGap': 0.5,
+      '& svg': {
+        width: 12,
+        height: 12,
+        color: theme.colors['icon/primary']
+      },
+      '& button': {
+        p: 0.5
+      }
+    }
+  }
+})}
+  ${({
+  theme
+}) => variant({
+  prop: 'variant',
+  variants: {
+    secondary: {
+      'color': theme.colors['text/primary'],
+      'backgroundColor': theme.colors['bg/secondary'],
+      '& button': {
+        '&:hover': {
+          backgroundColor: theme.colors['bg/secondary/hovered']
+        }
+      }
+    }
+  }
+})}
+  ${sx}
+`;
+var index = /*#__PURE__*/forwardRef(Pill);
+
+export { index as default };

package/esm/index.js

@@ -13,6 +13,8 @@ export { default as ItemList } from './core/ItemList/index.js';
 export { default as MotionView } from './core/MotionView/index.js';
 export { default as Overlay } from './core/Overlay/index.js';
 export { default as OverlayPopper } from './core/OverlayPopper/index.js';
+export { default as Pagination } from './core/Pagination/index.js';
+export { default as Pill } from './core/Pill/index.js';
 export { default as Space } from './core/Space/index.js';
 export { default as Spinner } from './core/Spinner/index.js';
 export { default as Stack } from './core/Stack/index.js';

package/esm/packages/utils/esm/noop.js

@@ -0,0 +1,6 @@
+/**
+ * 아무 행위도 하지 않는 함수입니다.
+ */
+function noop() {}
+
+export { noop };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -62,5 +62,5 @@
     "react-is": "^18.2.0",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "a7cd969d8f547c667184fc37ed1ccdfe1e159106"
+  "gitHead": "544bb0398781216f2425c6e23d897d0eaa029c95"
 }