@ssa-ui-kit/core 1.0.16 → 1.0.18

package/dist/styles/safari-focus-outline.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Theme, SerializedStyles } from '@emotion/react';
 type OutlineFn = (theme: Theme, color?: keyof Theme['colors'], borderRadius?: string, borderStyle?: React.CSSProperties['borderStyle']) => SerializedStyles;
 export declare const focusOutline: OutlineFn;

package/dist/types/emotion.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type RGBString = `rgb${string}`;
 type MakeColors<T extends Array<string>> = {
     [K in T[number]]?: RGBString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -35,7 +35,7 @@
   "devDependencies": {
     "@emotion/jest": "^11.11.0",
     "@nivo/line": "0.83.0",
-    "@playwright/test": "^1.37.1",
+    "@playwright/test": "^1.48.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/testing-library__jest-dom": "^5.14.6",
     "@types/uuid": "^9.0.3",
@@ -69,6 +69,7 @@
   "scripts": {
     "test": "jest -i --no-cache",
     "build": "webpack --mode=production --node-env=production && tsc --build --force ./tsconfig.build.json && resolve-tspaths -p ./tsconfig.build.json",
+    "build:watch": "webpack --mode=production --node-env=production --watch && tsc --build --force ./tsconfig.build.json && resolve-tspaths -p ./tsconfig.build.json",
     "sb:dev": "storybook dev -p 6006",
     "sb:build": "storybook build",
     "test:e2e": "pnpm exec playwright test --project=chromium",

package/src/components/Filters/FiltersBlock.tsx

@@ -1,42 +1,17 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useTheme } from '@emotion/react';
 import DropdownOption from '@components/DropdownOption';
 import MultipleDropdown from '@components/MultipleDropdown';
 import { useFiltersContext } from './FiltersContext';
+import { useFiltersBlock } from './hooks/useFiltersBlock';
 
 export const FiltersBlock = () => {
-  const { setElementRef, onDropdownChange, checkboxData } = useFiltersContext();
-  const handleOnChange = (groupName: string) => (item: string | number) => {
-    onDropdownChange(groupName, item);
-  };
-
-  const [selectedItemsWithValue, setSelectedItemsWithValue] = useState<
-    Record<string, Array<{ value: string }>>
-  >({});
-
   const theme = useTheme();
-
-  useEffect(() => {
-    const newData: Record<
-      string,
-      Array<{
-        value: string;
-      }>
-    > = {};
-    Object.keys(checkboxData).map((groupName) => {
-      const selectedItems = checkboxData[groupName]['selectedItemsDraft'];
-      if (selectedItems) {
-        newData[groupName] = selectedItems.map((item) => ({
-          value: item,
-        }));
-      }
-    });
-    setSelectedItemsWithValue(newData);
-  }, [checkboxData]);
+  const { setElementRef, checkboxData } = useFiltersContext();
+  const { selectedItemsWithValue, handleOnChange } = useFiltersBlock();
 
   return (
-    <>
+    <React.Fragment>
       {Object.keys(checkboxData).map((groupName) => {
         const accordionInfo = checkboxData[groupName];
         const selectedItems = selectedItemsWithValue[groupName];
@@ -74,6 +49,6 @@ export const FiltersBlock = () => {
           </MultipleDropdown>
         );
       })}
-    </>
+    </React.Fragment>
   );
 };

package/src/components/Filters/hooks/useFiltersBlock.ts

@@ -0,0 +1,39 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useFiltersContext } from '../FiltersContext';
+
+export const useFiltersBlock = () => {
+  const { onDropdownChange, checkboxData } = useFiltersContext();
+
+  const handleOnChange = (groupName: string) => (item: string | number) => {
+    onDropdownChange(groupName, item);
+  };
+
+  const [selectedItemsWithValue, setSelectedItemsWithValue] = useState<
+    Record<string, Array<{ value: string }>>
+  >({});
+
+  const memoSelectedItemsWithValue = useMemo(
+    () => selectedItemsWithValue,
+    [JSON.stringify(selectedItemsWithValue)],
+  );
+
+  useEffect(() => {
+    const newData: Record<
+      string,
+      Array<{
+        value: string;
+      }>
+    > = {};
+    Object.keys(checkboxData).map((groupName) => {
+      const selectedItems = checkboxData[groupName]['selectedItemsDraft'];
+      if (selectedItems) {
+        newData[groupName] = selectedItems.map((item) => ({
+          value: item,
+        }));
+      }
+    });
+    setSelectedItemsWithValue(newData);
+  }, [checkboxData]);
+
+  return { selectedItemsWithValue: memoSelectedItemsWithValue, handleOnChange };
+};

package/src/components/Pagination/Pagination.spec.tsx

@@ -43,6 +43,7 @@ const testCases = {
 
 const checkPages = (range: number[], selected?: number) => {
   const navigation = screen.getByRole('navigation');
+  const buttonsWrapper = navigation.querySelector('div') as HTMLDivElement;
   const withinNavigation = within(navigation);
 
   const prevPageBtn = within(
@@ -54,7 +55,7 @@ const checkPages = (range: number[], selected?: number) => {
   );
   nextPageBtn.getByTitle('Carrot right');
 
-  const buttonsAndBreaks = Array.from(navigation.children).slice(1, -1);
+  const buttonsAndBreaks = Array.from(buttonsWrapper.children).slice(1, -1);
 
   for (let i = 0; i < range.length; ++i) {
     const page = range[i];

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta } from '@storybook/react';
+import { StoryAnnotations } from '@storybook/types';
 import { Pagination, PaginationContextProvider } from './index';
 
 export default {
@@ -6,9 +7,8 @@ export default {
   component: Pagination,
   decorators: [
     (Story, { parameters, args }) => {
-      const { selectedPage } = parameters;
       return (
-        <PaginationContextProvider selectedPage={selectedPage}>
+        <PaginationContextProvider {...parameters}>
           {Story(args)}
         </PaginationContextProvider>
       );
@@ -58,3 +58,17 @@ export const Disabled = {
     selectedPage: 5,
   },
 };
+
+export const WithManualPageSettingAndPerPage: StoryAnnotations = {
+  args: {
+    pagesCount: 10,
+    isPageSettingVisible: true,
+    isRowPerPageVisible: true,
+  },
+  parameters: {
+    selectedPage: 1,
+  },
+};
+
+WithManualPageSettingAndPerPage.storyName =
+  'With records per page and page number setting';

package/src/components/Pagination/Pagination.tsx

@@ -1,13 +1,13 @@
-import styled from '@emotion/styled';
+import { KeyboardEvent, useState } from 'react';
 import { usePaginationRange } from '@ssa-ui-kit/hooks';
-
+import { InputProps } from '@components/Input/types';
+import Wrapper from '@components/Wrapper';
 import { ArrowButton } from './ArrowButton';
 import { PaginationButtons } from './PaginationButtons';
-
 import { PaginationProps } from './types';
 import { usePaginationContext } from './PaginationContext';
-
-const Nav = styled.nav``;
+import { RowsPerPageDropdown } from './components';
+import * as S from './styles';
 
 const Pagination = ({
   pagesCount,
@@ -15,51 +15,93 @@ const Pagination = ({
   as,
   ariaLabel,
   isDisabled,
+  pageNumberPlaceholder = 'Page №',
+  isPageSettingVisible = false,
+  isRowPerPageVisible = false,
+  rowPerPageProps,
+  manualPageNumberProps,
 }: PaginationProps) => {
   const { page, setPage } = usePaginationContext();
   const range = usePaginationRange({ pagesCount, selectedPage: page });
+  const [inputStatus, setInputStatus] = useState<InputProps['status']>('basic');
+  const handlePageNumberChange = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.code === 'Enter') {
+      const { value: inputValue } = event.currentTarget;
+      const newPageNumber = Number(inputValue);
+      if (newPageNumber > 0 && newPageNumber <= pagesCount) {
+        setInputStatus('basic');
+        setPage(Number(inputValue));
+      } else {
+        setInputStatus('error');
+      }
+    }
+  };
 
   return (
-    <Nav className={className} as={as} aria-label={ariaLabel || 'Pagination'}>
-      <ArrowButton
-        direction="left"
-        onClick={() => {
-          if (page) {
-            setPage(page - 1);
+    <S.PaginationNav
+      className={className}
+      as={as}
+      aria-label={ariaLabel || 'Pagination'}>
+      {isRowPerPageVisible && <RowsPerPageDropdown {...rowPerPageProps} />}
+      {isPageSettingVisible && (
+        <Wrapper css={{ width: 'auto', marginRight: 32 }}>
+          <S.PageNumberInput
+            name="page-number"
+            placeholder={pageNumberPlaceholder}
+            onKeyUp={handlePageNumberChange}
+            status={inputStatus}
+            type="number"
+            inputProps={{
+              autoComplete: 'off',
+            }}
+            {...manualPageNumberProps}
+          />
+          <span css={{ textWrap: 'nowrap', fontSize: 14 }}>
+            {page || 0} / {pagesCount}
+          </span>
+        </Wrapper>
+      )}
+      <Wrapper>
+        <ArrowButton
+          direction="left"
+          onClick={() => {
+            if (page) {
+              setPage(page - 1);
+            }
+          }}
+          isDisabled={
+            isDisabled ||
+            pagesCount == null ||
+            pagesCount <= 1 ||
+            page == null ||
+            page === 1
           }
-        }}
-        isDisabled={
-          isDisabled ||
-          pagesCount == null ||
-          pagesCount <= 1 ||
-          page == null ||
-          page === 1
-        }
-        css={{ marginRight: '12px' }}
-      />
-      <PaginationButtons
-        range={range}
-        selectedPage={page}
-        onClick={setPage}
-        isDisabled={isDisabled}
-      />
-      <ArrowButton
-        direction="right"
-        onClick={() => {
-          if (page) {
-            setPage(page + 1);
+          css={{ marginRight: '12px' }}
+        />
+        <PaginationButtons
+          range={range}
+          selectedPage={page}
+          onClick={setPage}
+          isDisabled={isDisabled}
+        />
+        <ArrowButton
+          direction="right"
+          onClick={() => {
+            if (page) {
+              setPage(page + 1);
+            }
+          }}
+          isDisabled={
+            isDisabled ||
+            pagesCount == null ||
+            pagesCount <= 1 ||
+            page == null ||
+            page === pagesCount
           }
-        }}
-        isDisabled={
-          isDisabled ||
-          pagesCount == null ||
-          pagesCount <= 1 ||
-          page == null ||
-          page === pagesCount
-        }
-        css={{ marginLeft: '7px' }}
-      />
-    </Nav>
+          css={{ marginLeft: '7px' }}
+        />
+      </Wrapper>
+    </S.PaginationNav>
   );
 };
 

package/src/components/Pagination/PaginationContext.tsx

@@ -3,6 +3,7 @@ import {
   PaginationContextProps,
   PaginationContextProviderProps,
 } from './types';
+import { DEFAULT_PER_PAGE_VALUE } from './constants';
 
 export const PaginationContext = createContext<PaginationContextProps>(
   {} as PaginationContextProps,
@@ -12,11 +13,13 @@ export const usePaginationContext = () => useContext(PaginationContext);
 
 export const PaginationContextProvider = ({
   selectedPage,
+  defaultPerPage = DEFAULT_PER_PAGE_VALUE,
   children,
 }: PaginationContextProviderProps) => {
+  const [perPage, setPerPage] = useState<number>(defaultPerPage);
   const [page, setPage] = useState(selectedPage);
   return (
-    <PaginationContext.Provider value={{ page, setPage }}>
+    <PaginationContext.Provider value={{ page, perPage, setPage, setPerPage }}>
       {children}
     </PaginationContext.Provider>
   );

package/src/components/Pagination/components/RowsPerPageDropdown/RowsPerPageDropdown.tsx

@@ -0,0 +1,70 @@
+import { useTheme } from '@emotion/react';
+import {
+  DropdownOption,
+  Typography,
+  Wrapper,
+  Dropdown,
+  usePaginationContext,
+} from '@components';
+import { RowsPerPageDropdownProps } from './types';
+import { DEFAULT_PER_PAGE_VALUE, ROWS_PER_PAGE_LIST } from '../../constants';
+
+export const RowsPerPageDropdown = ({
+  selectedItem = DEFAULT_PER_PAGE_VALUE,
+  rowsPerPageList = ROWS_PER_PAGE_LIST,
+  rowsPerPageText = 'Rows per page',
+  ...rest
+}: RowsPerPageDropdownProps) => {
+  const theme = useTheme();
+  const { setPerPage } = usePaginationContext();
+
+  const selectedItemForDropdown =
+    rowsPerPageList.find(({ value }) => value === selectedItem) ||
+    rowsPerPageList[0];
+
+  const onChange: Parameters<typeof Dropdown>[0]['onChange'] = ({ value }) => {
+    setPerPage(value as number);
+  };
+
+  return (
+    <Wrapper css={{ width: 'auto', ul: { width: 'auto' } }}>
+      <Typography
+        variant="subtitle"
+        css={{
+          fontSize: 14,
+          lineHeight: 1,
+          textWrap: 'nowrap',
+        }}>
+        {rowsPerPageText}:
+      </Typography>
+      <Dropdown
+        selectedItem={selectedItemForDropdown}
+        onChange={onChange}
+        css={{
+          marginLeft: 10,
+          marginRight: 37,
+          background: 'none',
+          color: '#070821',
+          gap: 5,
+          padding: 0,
+          '&:focus': {
+            color: '#070821',
+            background: 'none',
+            '&::before': {
+              display: 'none',
+            },
+          },
+          '& svg path': {
+            stroke: theme.colors.greyDarker,
+          },
+        }}
+        {...rest}>
+        {rowsPerPageList.map((item) => (
+          <DropdownOption key={item.id} value={item.value}>
+            {item.value}
+          </DropdownOption>
+        ))}
+      </Dropdown>
+    </Wrapper>
+  );
+};

package/src/components/Pagination/components/RowsPerPageDropdown/index.ts

@@ -0,0 +1,2 @@
+export * from './RowsPerPageDropdown';
+export * from '../../constants';

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

@@ -0,0 +1,7 @@
+import { CommonProps } from '@global-types/emotion';
+
+export interface RowsPerPageDropdownProps extends CommonProps {
+  selectedItem?: number;
+  rowsPerPageText?: string;
+  rowsPerPageList?: Array<{ id: number; value: number }>;
+}

package/src/components/Pagination/components/index.ts

@@ -0,0 +1 @@
+export * from './RowsPerPageDropdown';

package/src/components/Pagination/constants.ts

@@ -0,0 +1,18 @@
+export const ROWS_PER_PAGE_LIST = [
+  {
+    id: 1,
+    value: 10,
+  },
+  {
+    id: 2,
+    value: 25,
+  },
+  {
+    id: 3,
+    value: 50,
+  },
+];
+
+export const DEFAULT_SELECTED_INDEX = 1;
+export const DEFAULT_PER_PAGE_VALUE =
+  ROWS_PER_PAGE_LIST[DEFAULT_SELECTED_INDEX].value;

package/src/components/Pagination/styles.tsx

@@ -1,4 +1,6 @@
+import Input from '@components/Input';
 import { css, Theme } from '@emotion/react';
+import styled from '@emotion/styled';
 
 const baseBtnStyles = (theme: Theme) => css`
   height: 30px;
@@ -96,3 +98,26 @@ export const arrowBtnStyles = (theme: Theme) => css`
     cursor: pointer;
   }
 `;
+
+export const PaginationNav = styled.nav`
+  display: flex;
+`;
+
+export const PageNumberInput = styled(Input)`
+  width: 80px;
+  margin-right: 16px;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  &:focus,
+  &:hover {
+    border-width: 1px !important;
+  }
+  & + div {
+    right: 24px;
+  }
+`;

package/src/components/Pagination/types.ts

@@ -1,9 +1,16 @@
 import { CommonProps } from '@global-types/emotion';
+import { InputProps } from '@components/Input/types';
+import { RowsPerPageDropdownProps } from './components/RowsPerPageDropdown/types';
 
 export interface PaginationProps extends CommonProps {
   pagesCount: number;
   ariaLabel?: string;
   isDisabled?: boolean;
+  pageNumberPlaceholder?: string;
+  isPageSettingVisible?: boolean;
+  isRowPerPageVisible?: boolean;
+  rowPerPageProps?: RowsPerPageDropdownProps;
+  manualPageNumberProps?: InputProps;
 }
 
 export interface PaginationButtonsProps {
@@ -29,10 +36,13 @@ export interface PageButtonProps {
 
 export interface PaginationContextProps {
   page?: number;
+  perPage: number;
   setPage: React.Dispatch<React.SetStateAction<number | undefined>>;
+  setPerPage: React.Dispatch<React.SetStateAction<number>>;
 }
 
 export interface PaginationContextProviderProps {
   selectedPage?: number;
+  defaultPerPage?: number;
   children: React.ReactNode;
 }

package/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}