chili-ui 0.0.1

package/leda/components/Pagination/handlers.ts

@@ -0,0 +1,47 @@
+import { isFunction } from 'lodash';
+import type { CustomEventHandler, SetState } from '../../commonTypes';
+import type { ChangeEvent, PageChangeHandler, PageSizeChangeEvent } from './types';
+
+export const createPageChangeHandler = (
+  currentPage: number,
+  onChange: CustomEventHandler<ChangeEvent> | undefined,
+  isLoading: boolean,
+  setCurrentPageState: SetState<number>,
+): PageChangeHandler => (pageNumber: number): void => {
+  // block page changes during loading until the new currentPage value comes to props
+  if (!isLoading) {
+    setCurrentPageState(pageNumber);
+
+    if (isFunction(onChange)) {
+      const newEvent = { component: { value: pageNumber } };
+
+      onChange(newEvent);
+    }
+  }
+};
+
+export const createPageSizeChangeHandler = (
+  onPageSizeChange: CustomEventHandler<PageSizeChangeEvent> | undefined,
+  totalItems: number,
+  currentPage: number,
+  setPageSizeState: SetState<number>,
+  setCurrentPageState: SetState<number>,
+): CustomEventHandler<PageSizeChangeEvent> => (event) => {
+  const { value } = event.component;
+
+  if (value == null || value === 0) {
+    setPageSizeState(totalItems);
+  } else {
+    const newTotalPages = Math.ceil(totalItems / value);
+
+    if (currentPage > newTotalPages) {
+      setCurrentPageState(newTotalPages);
+    }
+
+    setPageSizeState(value);
+  }
+
+  if (isFunction(onPageSizeChange)) {
+    onPageSizeChange(event);
+  }
+};

package/leda/components/Pagination/helpers.ts

@@ -0,0 +1,39 @@
+// if the calculated page number is out of range, then 1 or the last page number is returned
+export const normalizePageNumber = (pageNumber: number, totalItems: number, pageSize: number): number => {
+  const pages = Math.ceil(totalItems / pageSize);
+
+  if (pageNumber < 1) {
+    return 1;
+  }
+
+  if (pageNumber > pages) {
+    return pages;
+  }
+
+  return pageNumber;
+};
+
+// Creates an array of displayed page numbers
+export const getPageNumbers = (currentPage: number, totalPages: number, totalItems: number, pageSize: number): number[] => {
+  // Returns an array with a single item 1 if totalItems = 0
+  if (totalPages === 1) return [totalPages];
+  // from the current page 2 pages on the left and 2 on the right should be displayed
+  let pagesFrom = normalizePageNumber(currentPage - 2, totalItems, pageSize);
+
+  let pagesTo = normalizePageNumber(currentPage + 2, totalItems, pageSize);
+
+  // check the boundary values - first and last values, then they should be displayed
+  // either from first to the right up to max page 5
+  if (pagesFrom === 1) {
+    pagesTo = normalizePageNumber(5, totalItems, pageSize);
+    // or 4 more pages from the last left
+  } else if (pagesTo === totalPages) {
+    pagesFrom = normalizePageNumber(pagesTo - 4, totalItems, pageSize);
+  }
+
+  // Number of page numbers to be added (array length)
+  const pagesLength = (pagesTo - pagesFrom) + 1;
+
+  // return an array with numbers in order starting from pagesFrom
+  return Array(pagesLength).fill(undefined).map((_, index) => pagesFrom + index);
+};

package/leda/components/Pagination/hooks.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { COMPONENTS_NAMESPACES } from '../../constants';
+import { useElement } from '../../utils';
+import { LedaContext } from '../LedaProvider';
+import { PagesDropDown as PaginationPagesDropDown } from './PagesDropDown';
+import { PaginationInfo } from './PaginationInfo';
+import { PaginationRangeInfo } from './PaginationRangeInfo';
+import { PaginationTotalInfo } from './PaginationTotalInfo';
+import type { CustomElements, PaginationProps, PaginationState } from './types';
+
+export const useCustomElements = (props: PaginationProps, state: PaginationState): CustomElements => {
+  const {
+    itemsInfoRender,
+    itemsRangeInfoRender,
+    itemsTotalInfoRender,
+    pagesDropDownRender,
+  } = props;
+
+  const { renders: { [COMPONENTS_NAMESPACES.pagination]: paginationRenders } } = React.useContext(LedaContext);
+
+  const ItemsInfo = useElement(
+    'ItemsInfo',
+    PaginationInfo,
+    itemsInfoRender || paginationRenders.itemsInfoRender,
+    props,
+    state,
+  );
+
+  const ItemsRangeInfo = useElement(
+    'ItemsRangeInfo',
+    PaginationRangeInfo,
+    itemsRangeInfoRender || paginationRenders.itemsRangeInfoRender,
+    props,
+    state,
+  );
+
+  const ItemsTotalInfo = useElement(
+    'ItemsTotalInfo',
+    PaginationTotalInfo,
+    itemsTotalInfoRender || paginationRenders.itemsTotalInfoRender,
+    props,
+    state,
+  );
+
+  const PagesDropDown = useElement(
+    'PagesDropDown',
+    PaginationPagesDropDown,
+    pagesDropDownRender || paginationRenders.pagesDropDownRender,
+    props,
+    state,
+  );
+
+  return {
+    ItemsInfo,
+    ItemsRangeInfo,
+    ItemsTotalInfo,
+    PagesDropDown,
+  };
+};

package/leda/components/Pagination/index.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import * as React from 'react';
+import { isNil } from 'lodash';
+import { COMPONENTS_NAMESPACES } from '../../constants';
+import {
+  getClassNames, useProps, useTheme,
+} from '../../utils';
+import { Div } from '../Div';
+import { createPageChangeHandler, createPageSizeChangeHandler } from './handlers';
+import { getPageNumbers, normalizePageNumber } from './helpers';
+import { useCustomElements } from './hooks';
+import { PagesList } from './PagesList';
+import { PaginationControl } from './PaginationControl';
+import type { PaginationProps } from './types';
+import { Icon } from '../Icon';
+import { IconTypes } from '../..';
+import { useMessages } from '../../utils/useMessages';
+
+export const Pagination = React.forwardRef((props: PaginationProps, ref: React.Ref<HTMLElement>): React.ReactElement => {
+  const {
+    className,
+    theme: themeProp,
+    pageSize: pageSizeProp,
+    defaultPageSize,
+    currentPage: currentPageProp,
+    pageSizeOptions,
+    totalItems = 0,
+    isLoading = false,
+    messages,
+    onChange,
+    onPageSizeChange,
+  } = useProps(props);
+
+  const theme = useTheme(themeProp, COMPONENTS_NAMESPACES.pagination);
+
+  const [currentPageState, setCurrentPageState] = React.useState<number>(1);
+
+  const [pageSizeState, setPageSizeState] = React.useState<number>(defaultPageSize || (pageSizeOptions && pageSizeOptions[0]) || 10);
+
+  const currentPage = isNil(currentPageProp) ? currentPageState : currentPageProp;
+
+  const pageSize = isNil(pageSizeProp) ? pageSizeState : pageSizeProp;
+
+  const pages = Math.ceil(totalItems / pageSize) || 1; // to avoid processing "0"
+
+  const isPageSizeChangeable = !!pageSizeOptions;
+
+  // If the number of pages = 0 or 1, we display pagination with disabled controls
+  const isSinglePage = pages === 1;
+
+  const isFirstPage = currentPage === 1;
+
+  const isLastPage = currentPage === pages;
+  // calculate the page number to go left
+  const previousBlock = normalizePageNumber(currentPage - 5, totalItems, pageSize);
+  // calculate the page number to go right
+  const nextBlock = normalizePageNumber(currentPage + 5, totalItems, pageSize);
+
+  const pagesArray = getPageNumbers(currentPage, pages, totalItems, pageSize);
+
+  const isFirstPageShown = currentPage <= 3 || pages <= 5;
+
+  const isLastPageShown = currentPage >= (pages - 2) || pages <= 5;
+
+  // numbers of displayed records in the list
+  const itemsFrom = currentPage === 1
+    ? 1
+    : ((currentPage - 1) * pageSize) + 1;
+
+  const itemsTo = (currentPage * pageSize) <= totalItems
+    ? (currentPage * pageSize)
+    : totalItems;
+
+  const handlePageChange = createPageChangeHandler(currentPage, onChange, isLoading, setCurrentPageState);
+
+  const handlePageSizeChange = createPageSizeChangeHandler(onPageSizeChange, totalItems, currentPage, setPageSizeState, setCurrentPageState);
+
+  const {
+    ItemsInfo,
+    ItemsTotalInfo,
+    ItemsRangeInfo,
+    PagesDropDown,
+  } = useCustomElements(props, { currentPage: currentPageState, pageSize: pageSizeState });
+
+  const wrapperClassNames = getClassNames(
+    theme.wrapper,
+    className,
+  );
+
+  const msg = useMessages({ fieldName: COMPONENTS_NAMESPACES.pagination, messages });
+
+  return (
+    <Div
+      className={wrapperClassNames}
+      ref={ref}
+    >
+      <PaginationControl
+        className={getClassNames(
+          theme.controlButtons,
+          theme.button,
+          theme.controlFirst,
+        )}
+        theme={theme}
+        title={msg.titleFirst}
+        page={isSinglePage || isFirstPage ? 0 : 1}
+        onClick={handlePageChange}
+      >
+        <Icon
+          icon={IconTypes.Icons.ChevronsLeft}
+          className={theme.iconFirst}
+        />
+      </PaginationControl>
+      <PaginationControl
+        className={getClassNames(
+          theme.controlButtons,
+          theme.button,
+          theme.controlPrev,
+        )}
+        theme={theme}
+        title={msg.titlePrevious}
+        page={isSinglePage || isFirstPage ? 0 : currentPage - 1}
+        onClick={handlePageChange}
+      >
+        <Icon
+          icon={IconTypes.Icons.ChevronLeft}
+          className={theme.iconPrev}
+        />
+      </PaginationControl>
+      { !isFirstPageShown && (
+      <PaginationControl
+        className={theme.button}
+        theme={theme}
+        isPageNumber
+        page={previousBlock}
+        title={msg.titleDotsPrevious}
+        onClick={handlePageChange}
+      >
+        ...
+      </PaginationControl>
+      )}
+      <PagesList
+        theme={theme}
+        pageNumbers={pagesArray}
+        currentPage={currentPage}
+        onClick={handlePageChange}
+      />
+      { !isLastPageShown && (
+      <PaginationControl
+        className={theme.button}
+        theme={theme}
+        isPageNumber
+        page={nextBlock}
+        title={msg.titleDotsNext}
+        onClick={handlePageChange}
+      >
+        ...
+      </PaginationControl>
+      )}
+      <PaginationControl
+        className={getClassNames(
+          theme.controlButtons,
+          theme.button,
+          theme.controlNext,
+        )}
+        theme={theme}
+        page={isSinglePage || isLastPage ? 0 : currentPage + 1}
+        title={msg.titleNext}
+        onClick={handlePageChange}
+      >
+        <Icon
+          icon={IconTypes.Icons.ChevronRight}
+          className={theme.iconNext}
+        />
+      </PaginationControl>
+      <PaginationControl
+        className={getClassNames(
+          theme.controlButtons,
+          theme.button,
+          theme.controlLast,
+        )}
+        theme={theme}
+        page={isSinglePage || isLastPage ? 0 : pages}
+        title={msg.titleLast}
+        onClick={handlePageChange}
+      >
+        <Icon
+          icon={IconTypes.Icons.ChevronsRight}
+          className={theme.iconLast}
+        />
+      </PaginationControl>
+      <PagesDropDown
+        handlePageSizeChange={handlePageSizeChange}
+        isPageSizeChangeable={isPageSizeChangeable}
+        pageSize={pageSize}
+        pageSizeOptions={pageSizeOptions}
+        theme={theme}
+        msg={msg}
+      />
+      <ItemsInfo
+        theme={theme}
+      >
+        {!isSinglePage
+          ? (
+            <ItemsRangeInfo
+              startingItemNumber={itemsFrom}
+              endingItemNumber={itemsTo}
+              totalItemsNumber={totalItems}
+              msg={msg}
+            />
+          )
+          : (
+            <ItemsTotalInfo
+              totalItemsNumber={totalItems}
+            />
+          )}
+      </ItemsInfo>
+    </Div>
+  );
+}) as React.FC<PaginationProps>;
+
+Pagination.displayName = 'Pagination';

package/leda/components/Pagination/messages.ts

@@ -0,0 +1,13 @@
+import type { PaginationMessages } from './types';
+
+export const defaultPaginationMessages: PaginationMessages = {
+  outOf: 'of',
+  pageSize: 'Page size',
+  pageSizeAll: 'All',
+  titleDotsNext: 'Next pages',
+  titleDotsPrevious: 'Previous pages',
+  titleFirst: 'First',
+  titleLast: 'Last',
+  titleNext: 'Next',
+  titlePrevious: 'Previous',
+};

package/leda/components/Pagination/theme.ts

@@ -0,0 +1,22 @@
+/* eslint-disable key-spacing */
+export const defaultPaginationTheme = {
+  wrapper:                    'ld-pagination-wrapper',
+  button:                     'ld-pagination-button',
+  controlButtons:             'ld-pagination-controls',
+  controlFirst:               'ld-pagination-first',
+  controlPrev:                'ld-pagination-prev',
+  controlNext:                'ld-pagination-next',
+  controlLast:                'ld-pagination-last',
+  disabled:                   'ld-pagination-disabled',
+  iconFirst:                  'ld-pagination-icon-first',
+  iconPrev:                   'ld-pagination-icon-prev',
+  iconNext:                   'ld-pagination-icon-next',
+  iconLast:                   'ld-pagination-icon-last',
+  infoLabel:                  'ld-pagination-info-label',
+  numberButtons:              'ld-pagination-numbers',
+  numberSelected:             'ld-pagination-number-selected',
+  options:                    'ld-pagination-options',
+  optionsLabel:               'ld-pagination-options-label',
+  optionsWrapper:             'ld-pagination-options-wrapper',
+};
+/* eslint-enable key-spacing */

package/leda/components/Pagination/types.ts

@@ -0,0 +1,127 @@
+import type * as React from 'react';
+import type { CustomRender } from '../../commonTypes';
+import type { COMPONENTS_NAMESPACES } from '../../constants';
+import type { GlobalDefaultTheme, PartialGlobalDefaultTheme } from '../../utils/useTheme';
+
+export interface ChangeEvent {
+  component: {
+    value: number,
+  },
+}
+
+export interface PageSizeChangeEvent {
+  component: {
+    value: number,
+  },
+}
+
+export interface PaginationMessages {
+  outOf?: string,
+  pageSize?: string,
+  pageSizeAll?: string,
+  titleDotsNext?: string,
+  titleDotsPrevious?: string,
+  titleFirst?: string,
+  titleLast?: string,
+  titleNext?: string,
+  titlePrevious?: string,
+}
+
+export interface PaginationProps {
+  /** Current page number */
+  currentPage?: number,
+  /** Initial number of elements on the page when passing pageSizeOptions. Defaults to the first element of the array */
+  defaultPageSize?: number,
+  /** Loading state, for this time all clicks are blocked */
+  isLoading?: boolean,
+  /** Info customizator */
+  itemsInfoRender?: CustomRender<PaginationProps, PaginationState, PaginationInfoProps>,
+  /** Range info text customizator */
+  itemsRangeInfoRender?: CustomRender<PaginationProps, PaginationState, PaginationRangeInfoProps>,
+  /** Total items info customizator */
+  itemsTotalInfoRender?: CustomRender<PaginationProps, PaginationState, PaginationTotalInfoProps>,
+  /** Customize component text labels */
+  messages?: PaginationMessages,
+  /** Page change handler */
+  onChange?: (event: ChangeEvent) => void,
+  /** Page size change handler */
+  onPageSizeChange?: (event: PageSizeChangeEvent) => void,
+  /** Page size dropdown customizator */
+  pagesDropDownRender?: CustomRender<PaginationProps, PaginationState, PagesDropDownProps>,
+  /** Number of items on the page */
+  pageSize?: number,
+  /** Selects options for the number of elements on the page, if passed, a drop-down list appears */
+  pageSizeOptions?: number[],
+  /** Reference */
+  ref?: React.Ref<HTMLElement>,
+  /** Theme */
+  theme?: PartialGlobalDefaultTheme[typeof COMPONENTS_NAMESPACES.pagination],
+  /** Totl number of items */
+  totalItems: number,
+  /** _css-class-names */
+  [x: string]: unknown,
+}
+
+export interface PaginationState {
+  currentPage: number,
+  pageSize: number,
+}
+
+export interface PagesDropDownProps {
+  /** Handling selection of items in the drop-down list */
+  handlePageSizeChange: (event: PageSizeChangeEvent) => void,
+  /** Is it possible to change the number of elements on the page */
+  isPageSizeChangeable: boolean,
+  /** Messages */
+  msg: PaginationMessages,
+  /** Number of elements on the page */
+  pageSize: number,
+  /** Options for the number of elements on the page */
+  pageSizeOptions?: number[],
+  /** Theme */
+  theme: GlobalDefaultTheme[typeof COMPONENTS_NAMESPACES.pagination],
+}
+
+export interface PaginationInfoProps {
+  children?: React.ReactNode,
+  theme: GlobalDefaultTheme[typeof COMPONENTS_NAMESPACES.pagination],
+}
+
+export interface PaginationRangeInfoProps {
+  endingItemNumber: number,
+  msg: PaginationMessages,
+  startingItemNumber: number,
+  totalItemsNumber: number,
+}
+
+export interface PaginationTotalInfoProps {
+  totalItemsNumber: number,
+}
+
+export interface PaginationControlProps {
+  className?: string,
+  children?: React.ReactNode,
+  isPageNumber?: boolean,
+  onClick: PageChangeHandler,
+  page: number,
+  title?: string,
+  theme: GlobalDefaultTheme[typeof COMPONENTS_NAMESPACES.pagination],
+}
+
+export interface PageChangeHandler {
+  (pageNumber: number): void,
+}
+
+export interface PagesListProps {
+  theme: GlobalDefaultTheme[typeof COMPONENTS_NAMESPACES.pagination],
+  pageNumbers: number[],
+  currentPage: number,
+  onClick: PageChangeHandler,
+}
+
+export interface CustomElements {
+  ItemsInfo: React.FC<PaginationInfoProps>,
+  ItemsRangeInfo: React.FC<PaginationRangeInfoProps>,
+  ItemsTotalInfo: React.FC<PaginationTotalInfoProps>,
+  PagesDropDown: React.FC<PagesDropDownProps>,
+}

package/leda/components/Paragraph/__snapshots__/Paragraph.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Paragraph SNAPSHOTS should render 1`] = `
+<p>
+  Text
+</p>
+`;

package/leda/components/Paragraph/index.ts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+import { htmlTagFactory } from '../../src/HTMLTagsFactory';
+
+export interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  ref?: React.Ref<HTMLElement>,
+  shouldRender?: boolean,
+  [x: string]: unknown,
+}
+
+export const P = htmlTagFactory('P') as React.FC<ParagraphProps>;

package/leda/components/Password/PasswordRulesMessage.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Div } from '../Div';
+import type { PasswordRulesMessageProps } from './types';
+import { isValuePassingRule } from './helpers';
+
+export const PasswordRulesMessage = (props: PasswordRulesMessageProps) => {
+  const {
+    value, theme, passwordRules,
+  } = props;
+
+  return (
+    <Div
+      className={theme?.messageWrapper}
+    >
+      { passwordRules?.map(({ rule, ruleMessage }) => {
+        if (isValuePassingRule(value, rule)) return null;
+
+        return (
+          <div
+            className={theme?.ruleMessage}
+            key={ruleMessage}
+          >
+            { ruleMessage }
+          </div>
+        );
+      }) }
+    </Div>
+  );
+};

package/leda/components/Password/PasswordVisibilityIcon.tsx

@@ -0,0 +1,14 @@
+import type { PasswordVisibilityIconProps } from './types';
+import { Icon, IconTypes } from '../..';
+
+export const PasswordVisibilityIcon = (props: PasswordVisibilityIconProps) => {
+  const { isVisible, theme, onIconClick } = props;
+
+  return (
+    <Icon
+      icon={isVisible ? IconTypes.Icons.EyeOff : IconTypes.Icons.Eye}
+      className={isVisible ? theme.isVisibleIcon : theme.isHiddenIcon}
+      onClick={onIconClick}
+    />
+  );
+};

package/leda/components/Password/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_MIN_PASSWORD_EVALUATION_LENGTH = 0;