@lunit/oui 1.0.0-alpha.9 → 1.0.1-alpha.1

package/dist/types/components/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination.types';

package/dist/types/components/index.d.ts

@@ -9,10 +9,10 @@ export * from './Dialog';
 export * from './Divider';
 export * from './Dropdown';
 export * from './FileDnDZone';
-export * from './Icons';
 export * from './List';
 export * from './LoadingIndicator';
 export * from './Menu';
+export * from './Pagination';
 export * from './ProductLabel';
 export * from './Progress';
 export * from './Radio';

package/dist/types/foundations/index.d.ts

@@ -1,3 +1,4 @@
 export { default as palette } from './palette';
 export { default as typography } from './typography';
 export { default as spacing } from './spacing';
+export { subScrollbarWidth } from './styles';

package/dist/types/foundations/palette.d.ts

@@ -38,7 +38,14 @@ export type Alert = PaletteOptionItem<AlertKey>;
 type AnalysisStatusKey = 'Uploaded' | 'Ready' | 'ReadyHover' | 'ReadySelected' | 'Inferred' | 'InferredHover' | 'InferredSelected' | 'Analyzing' | 'Analyzed' | 'FailedEnabled' | 'FailedHover' | 'FailedSelected' | 'Ready' | 'ReadyHover' | 'ReadySelected' | 'Inferred' | 'InferredHover' | 'InferredSelected' | 'Invalid' | 'InvalidHover' | 'InvalidSelected';
 export type AnalysisStatus = PaletteOptionItem<AnalysisStatusKey>;
 export interface LunitPalette {
-    brand: unknown;
+    brand: {
+        primary: React.CSSProperties['color'];
+        secondary: React.CSSProperties['color'];
+    };
+    scope1: React.CSSProperties['color'];
+    scope2: React.CSSProperties['color'];
+    scope3: React.CSSProperties['color'];
+    scope4: React.CSSProperties['color'];
     lunitTeal: LunitTeal;
     neutralGrey: NeutralColor;
     yellow: Yellow;

package/dist/types/foundations/styles.d.ts

@@ -0,0 +1,2 @@
+export declare function subScrollbarWidth(value: string): string;
+export declare function subScrollbarWidth(value: number): number;

package/dist/types/{components/Icons → icons}/BellNoti/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/dist/types/{components/Icons → icons}/CloseLarge/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/dist/types/{components/Icons → icons}/CloseSmall/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/dist/types/{components/Icons → icons}/DownloadPdf/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/dist/types/{components/Icons → icons}/Ellipse/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/dist/types/{components/Icons → icons}/FilterNoti/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/dist/types/{components/Icons → icons}/HideLarge/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/dist/types/{components/Icons → icons}/HideSmall/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/dist/types/{components/Icons → icons}/InformationLarge/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/dist/types/{components/Icons → icons}/InformationSmall/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/dist/types/{components/Icons → icons}/Manufacturer/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/dist/types/{components/Icons → icons}/Rectangle/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/dist/types/{components/Icons → icons}/RefreshLeft/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/dist/types/{components/Icons → icons}/RefreshRight/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/dist/types/{components/Icons → icons}/ShowLarge/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/dist/types/{components/Icons → icons}/ShowSmall/index.d.ts

@@ -1,6 +1,6 @@
-import { SvgIconProps } from "@mui/material/SvgIcon";
+import { SvgIconProps } from '@mui/material/SvgIcon';
 declare const variants: readonly ["outlined"];
-type Variant = typeof variants[number];
+type Variant = (typeof variants)[number];
 type IconProps = SvgIconProps & {
     variant?: Variant;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.1-alpha.1",
   "validate-branch-name": {
     "pattern": "^(main|develop)|(feature|fix|release|hotfix|qe)/.+$",
     "errorMsg": "The branch name is not correct. Please check the pattern. (ex. feature/add-something)"

package/src/components/Alert/Alert.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { forwardRef } from 'react';
-import { Close } from '../Icons';
+import { Close } from '../../icons';
 import BaseAlert from './Alert.styled';
 import type { AlertProps } from './Alert.types';
 import { getAccentColor, getIcons } from './Alert.utils';

package/src/components/Alert/Alert.utils.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AlertColor } from '@mui/material';
-import { Success, Error, Information } from '../Icons';
+import { Success, Error, Information } from '../../icons';
 import theme from '../../theme';
 
 export const getIcons = (severity: AlertColor | undefined) => {

package/src/components/Chip/Chip.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CloseSmall } from '../Icons';
+import { CloseSmall } from '../../icons';
 import StyledChip from './Chip.styled';
 import type { ChipProps } from './Chip.types';
 import { presetMap } from './Chip.utils';

package/src/components/Chip/Chip.utils.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Error16, StartT2 } from '../Icons';
+import { Error16, StartT2 } from '../../icons';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const presetMap: any = {

package/src/components/DatePicker/DatePicker.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useState, useMemo, useEffect } from 'react';
-import { CloseSmall, ArrowLeft, ArrowRight } from '../Icons';
+import { CloseSmall, ArrowLeft, ArrowRight } from '../../icons';
 
 import { StyledDatePicker } from './DatePicker.styled';
 import type { DatePickerProps } from './DatePicker.types';

package/src/components/Dialog/Dialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CloseSmall } from '../Icons';
+import { CloseSmall } from '../../icons';
 
 import { Box } from '@mui/material';
 import theme from '../../theme';

package/src/components/Dropdown/Dropdown.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArrowDown } from '../Icons';
+import { ArrowDown } from '../../icons';
 
 import type { SelectChangeEvent } from '@mui/material';
 import { useState } from 'react';

package/src/components/Dropdown/DropdownItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Check } from '../Icons';
+import { Check } from '../../icons';
 import { BaseDropdownItem, KeyboardShortcut } from './DropdownItem.styled';
 import type { DropdownItemProps } from './DropdownItem.types';
 import { BUTTON_DROPDOWN_ITEM, shouldPadForEmptyIcon } from './DropdownItem.utils';

package/src/components/Dropdown/IconDropdown.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useState } from 'react';
-import { ArrowDownXs } from '../Icons';
+import { ArrowDownXs } from '../../icons';
 import { BaseIconDropdown } from './IconDropdown.styled';
 import theme from '../../theme';
 import type { IconDropdownProps } from './IconDropdown.types';

package/src/components/List/List.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import React from 'react';
 import { createContext, useMemo } from 'react';
-import { ArrowDownSm, ArrowUpSm } from '../Icons';
+import { ArrowDownSm, ArrowUpSm } from '../../icons';
 import { Collapse } from '@mui/material';
 import { MuiList, MuiListSubheader } from './List.styled';
 import type { ListProps, ListContextValue } from './List.types';

package/src/components/List/ListItem.styled.tsx

@@ -7,7 +7,7 @@ import {
   styled,
   typographyClasses,
 } from '@mui/material';
-import { Check, Dummy } from '../Icons';
+import { Check, Dummy } from '../../icons';
 import getPadding from './List.utils';
 import type { StyledListItemButtonProps } from './ListItem.types';
 

package/src/components/Pagination/Pagination.styled.tsx

@@ -0,0 +1,71 @@
+import { Button, styled, Box } from '@mui/material';
+import { subScrollbarWidth } from '../../foundations';
+
+export const DEFAULT_PAGE_SIZE = 100;
+export const PAGE_SIZE_LIST = [25, 50, 75, 100];
+
+export const PaginationBox = styled(Box)(({ theme }) => ({
+  ...theme.typography.body5,
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  borderTop: `1px solid ${theme.palette.neutralGrey[90]}`,
+  height: '48px',
+  padding: '14px 0',
+  color: theme.palette.neutralGrey[40],
+}));
+
+export const PaperProps = { style: { maxHeight: 378, width: 136 } };
+
+export const SidePageBox = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  height: '20px',
+});
+
+export const SelectButton = styled(Button)(({ theme }) => ({
+  justifyContent: 'flex-end',
+  border: '1px solid transparent',
+  minWidth: 'auto',
+  width: '58px',
+  height: '28px',
+  marginLeft: theme.spacing(3),
+  padding: '4px 4px 4px 8px',
+  color: theme.palette.neutralGrey[15],
+  '.MuiButton-endIcon': { margin: 0 },
+  '&:hover': {
+    background: 'transparent',
+    borderColor: theme.palette.neutralGrey[40],
+  },
+  '&:focus-visible': {
+    background: 'transparent',
+    borderColor: theme.palette.scope1,
+  },
+}));
+
+export const ArrowButton = styled(Button)(({ theme }) => ({
+  border: '1px solid transparent',
+  minWidth: 'auto',
+  height: '28px',
+  padding: theme.spacing(0.5),
+  color: theme.palette.neutralGrey[40],
+  '&:hover': {
+    background: theme.palette.neutralGrey[70],
+  },
+  '&:disabled': {
+    color: theme.palette.neutralGrey[40],
+    opacity: 0.4,
+  },
+  '.MuiButton-endIcon': {
+    margin: 0,
+  },
+}));
+
+export const PaginationContainer = styled('div')(({ theme }) => ({
+  padding: `0 ${subScrollbarWidth(theme.spacing(5))} 0 ${theme.spacing(5)}`,
+}));
+
+export const divider = {
+  borderWidth: '0',
+  margin: '0 12px',
+} as const;

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import { useState, MouseEvent, useEffect, useMemo } from 'react';
+import { ArrowDown } from '../../icons';
+import { Divider } from '../Divider';
+import { MenuItem, Menu } from '../Menu';
+
+import { PaginationProps } from './Pagination.types';
+import {
+  PaperProps,
+  PaginationBox,
+  SidePageBox,
+  SelectButton,
+  ArrowButton,
+  PAGE_SIZE_LIST,
+  divider,
+} from './Pagination.styled';
+
+function Pagination({
+  count: itemCount,
+  page: selectedPage = 1,
+  perPage: selectedPerPage,
+  totalPage,
+  onPageChange,
+  onPerPageChange,
+}: PaginationProps) {
+  const [perPageAnchorEl, setPerPageAnchorEl] = useState<null | HTMLElement>(null);
+  const [pageAnchorEl, setPageAnchorEl] = useState<null | HTMLElement>(null);
+
+  const perPageOpen = Boolean(perPageAnchorEl);
+  const pageOpen = Boolean(pageAnchorEl);
+
+  const pages = useMemo(
+    () => Array.from({ length: totalPage }, (_, index) => index + 1),
+    [totalPage],
+  );
+
+  const startItemNumber = selectedPerPage * (selectedPage - 1) + 1;
+  const endItemNumber = Math.min(startItemNumber + selectedPerPage - 1, itemCount);
+
+  const handlePerPageClick = (event: MouseEvent<HTMLButtonElement>) => {
+    setPerPageAnchorEl(event.currentTarget);
+  };
+
+  const handlePerPageClose = () => {
+    setPerPageAnchorEl(null);
+  };
+
+  const handlePageClick = (event: MouseEvent<HTMLButtonElement>) => {
+    setPageAnchorEl(event.currentTarget);
+  };
+
+  const handlePageClose = () => {
+    setPageAnchorEl(null);
+  };
+
+  useEffect(() => {
+    if (selectedPage > totalPage) {
+      onPageChange?.(null, totalPage);
+    }
+  }, [totalPage, selectedPage, onPageChange]);
+
+  return (
+    <PaginationBox>
+      <SidePageBox>
+        Items per page
+        <SelectButton
+          endIcon={
+            <ArrowDown
+              style={{
+                transform: perPageOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+              }}
+            />
+          }
+          onClick={handlePerPageClick}
+        >
+          {selectedPerPage}
+        </SelectButton>
+        <Menu
+          showCheck
+          anchorEl={perPageAnchorEl}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          PaperProps={PaperProps}
+          onClose={handlePerPageClose}
+          open={perPageOpen}
+        >
+          {PAGE_SIZE_LIST.map((perPage) => (
+            <MenuItem
+              key={perPage}
+              selected={perPage === selectedPerPage}
+              onClick={(event) => {
+                event.preventDefault();
+                onPerPageChange?.(event, perPage);
+                handlePerPageClose();
+              }}
+              label={perPage}
+            />
+          ))}
+        </Menu>
+        <Divider
+          orientation="vertical"
+          sx={divider}
+        />
+        {startItemNumber}-{endItemNumber} of &nbsp;{itemCount} items
+      </SidePageBox>
+      <SidePageBox>
+        This page
+        <SelectButton
+          id="selected-page"
+          endIcon={
+            <ArrowDown
+              style={{
+                transform: pageOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+              }}
+            />
+          }
+          onClick={handlePageClick}
+        >
+          {selectedPage}
+        </SelectButton>
+        <Menu
+          showCheck
+          anchorEl={pageAnchorEl}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          PaperProps={PaperProps}
+          onClose={handlePageClose}
+          open={pageOpen}
+        >
+          {pages.map((page) => (
+            <MenuItem
+              key={page}
+              selected={page === selectedPage}
+              onClick={(event) => {
+                event.preventDefault();
+                onPageChange?.(event, page);
+                handlePageClose();
+              }}
+              label={page}
+            />
+          ))}
+        </Menu>
+        <Divider
+          orientation="vertical"
+          sx={divider}
+        />
+        <ArrowButton
+          id="prev-button"
+          disabled={selectedPage === 1}
+          onClick={(event) => {
+            event.preventDefault();
+            onPageChange?.(event, selectedPage - 1);
+          }}
+          endIcon={<ArrowDown style={{ transform: 'rotate(90deg)' }} />}
+        />
+        <ArrowButton
+          id="next-button"
+          disabled={selectedPage === totalPage}
+          onClick={(event) => {
+            event.preventDefault();
+            onPageChange?.(event, selectedPage + 1);
+          }}
+          endIcon={<ArrowDown style={{ transform: 'rotate(-90deg)' }} />}
+        />
+      </SidePageBox>
+    </PaginationBox>
+  );
+}
+
+export default Pagination;

package/src/components/Pagination/Pagination.types.ts

@@ -0,0 +1,39 @@
+export interface PaginationProps {
+  count: number;
+  page?: number;
+  perPage: number;
+  totalPage: number;
+  onPageChange?: (
+    event: React.MouseEvent<HTMLLIElement> | React.MouseEvent<HTMLButtonElement> | null,
+    page: number,
+  ) => void;
+  onPerPageChange?: (event: React.MouseEvent<HTMLLIElement> | null, perPage: number) => void;
+}
+
+interface SortObject {
+  empty: boolean;
+  unsorted: boolean;
+  sorted: boolean;
+}
+
+interface Pageable {
+  offset: number;
+  sort: SortObject;
+  paged: boolean;
+  unpaged: boolean;
+  pageNumber: number;
+  pageSize: number;
+}
+
+export interface PaginationViewInfo {
+  totalElements: number;
+  totalPages: number;
+  size: number;
+  number: number;
+  sort: SortObject;
+  pageable: Pageable;
+  numberOfElements: number;
+  first: boolean;
+  last: boolean;
+  empty: boolean;
+}

package/src/components/Pagination/index.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination.types';

package/src/components/ProductLabel/ProductLabel.tsx

@@ -5,7 +5,7 @@ import { Box, Typography } from '@mui/material';
 import { LabelContainer, LabelContent, LabelCloseButton } from './ProductLabel.styled';
 import { ProductLabelProps } from './ProductLabel.types';
 import { Divider } from '../Divider';
-import { Close } from '../Icons';
+import { Close } from '../../icons';
 import { LunitScope } from '@lunit/design-system-logo';
 
 function ProductLabel({ open, onClose, children, footerStart, footerEnd }: ProductLabelProps) {

package/src/components/TextField/components/Buttons.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CloseSmall, HideSmall, ShowSmall } from '../../Icons';
+import { CloseSmall, HideSmall, ShowSmall } from '../../../icons';
 import { ButtonWrapper } from '../TextInput.styled';
 
 function ClearButton({ onClick }: { onClick?: () => void }) {

package/src/components/UploadManager/UploadManager.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Grow, Typography, Box } from '@mui/material';
 
-import { ArrowUp, Close, Success, Error16, RefreshLeft } from '../Icons';
+import { ArrowUp, Close, Success, Error16, RefreshLeft } from '../../icons';
 
 import { useState, Fragment, useMemo } from 'react';
 import { Divider } from '../Divider';

package/src/components/index.ts

@@ -9,10 +9,10 @@ export * from './Dialog';
 export * from './Divider';
 export * from './Dropdown';
 export * from './FileDnDZone';
-export * from './Icons';
 export * from './List';
 export * from './LoadingIndicator';
 export * from './Menu';
+export * from './Pagination';
 export * from './ProductLabel';
 export * from './Progress';
 export * from './Radio';