@paygreen/pgui 2.1.1 → 2.2.0

package/dist/index.d.ts

@@ -1,10 +1,32 @@
-import React, { FC, ReactNode } from 'react';
-import { IconButtonProps, FlexProps, AccordionProps, FormControlProps, StackProps } from '@chakra-ui/react';
+/// <reference types="react" />
+import React, { FC, PropsWithChildren, ReactNode, Dispatch, SetStateAction, ReactComponentElement } from 'react';
+import * as _chakra_ui_react from '@chakra-ui/react';
+import { IconButtonProps, FlexProps, HTMLChakraProps, MenuItemProps, AccordionProps, FormControlProps, PopoverProps, InputProps, StackProps, BoxProps, DrawerContentProps, ButtonProps } from '@chakra-ui/react';
+import { DayPickerProps, DaySelectionMode, DayPickerSingleProps } from 'react-day-picker';
+import * as react_select_dist_declarations_src_useStateManager from 'react-select/dist/declarations/src/useStateManager';
+import * as react_select from 'react-select';
+import { GroupBase, Props } from 'react-select';
+import * as react_select_dist_declarations_src_filters from 'react-select/dist/declarations/src/filters';
+import * as react_select_dist_declarations_src_components from 'react-select/dist/declarations/src/components';
+import * as react_select_dist_declarations_src_Select from 'react-select/dist/declarations/src/Select';
 
 declare type ActionsButtonProps = Omit<IconButtonProps, 'aria-label'> & {
     label: string;
 };
-declare const ActionsButton: FC<React.PropsWithChildren<ActionsButtonProps>>;
+declare const ActionsButton: FC<PropsWithChildren<ActionsButtonProps>>;
+
+declare const Card: (props: FlexProps) => JSX.Element;
+
+declare type StyledMenuItemProps = HTMLChakraProps<'button'>;
+declare const MenuItem: _chakra_ui_react.ComponentWithAs<"button", MenuItemProps>;
+declare type ConfirmMenuItemProps = MenuItemProps & {
+    confirmDelay?: number;
+    confirmColorScheme?: string;
+    confirmContent?: React.ReactNode;
+    confirmText?: React.ReactNode;
+    confirmIcon?: React.FC<React.PropsWithChildren<unknown>>;
+};
+declare const ConfirmMenuItem: _chakra_ui_react.ComponentWithAs<"button", ConfirmMenuItemProps>;
 
 declare type DataListColumns = Record<string, DataListCellProps>;
 declare type DataListContextValue = {
@@ -36,27 +58,43 @@ declare type DataListRowProps = FlexProps & {
     isVisible?: boolean | boolean[] | Record<string, boolean>;
     isDisabled?: boolean;
 };
-declare const DataListRow: FC<React.PropsWithChildren<DataListRowProps>>;
+declare const DataListRow: FC<PropsWithChildren<DataListRowProps>>;
 declare type DataListHeaderProps = DataListRowProps;
-declare const DataListHeader: FC<React.PropsWithChildren<DataListHeaderProps>>;
+declare const DataListHeader: FC<PropsWithChildren<DataListHeaderProps>>;
 declare type DataListFooterProps = DataListRowProps;
-declare const DataListFooter: FC<React.PropsWithChildren<DataListFooterProps>>;
+declare const DataListFooter: FC<PropsWithChildren<DataListFooterProps>>;
 declare type DataListProps = AccordionProps & {
     isHover?: boolean;
 };
-declare const DataList: FC<React.PropsWithChildren<DataListProps>>;
+declare const DataList: FC<PropsWithChildren<DataListProps>>;
+
+declare const DayPicker: (props: DayPickerProps) => JSX.Element;
 
 declare type FormGroupProps = Omit<FormControlProps, 'onChange' | 'defaultValue' | 'label'> & {
     children?: ReactNode;
     errorMessage?: ReactNode;
     helper?: ReactNode;
-    id: string;
+    id?: string;
     isRequired?: boolean;
     label?: ReactNode;
     showError?: boolean;
 };
 declare const FormGroup: ({ children, errorMessage, helper, id, isRequired, label, showError, ...props }: FormGroupProps) => JSX.Element;
 
+declare type SingleDayPickerProps = {
+    mode?: DaySelectionMode;
+} & DayPickerSingleProps;
+declare type InputDayPickerProps = {
+    isDisabled?: boolean;
+    popoverProps?: PopoverProps;
+    inputProps?: InputProps;
+    dayPickerProps?: SingleDayPickerProps;
+    dateFormat?: string;
+    value?: string | '';
+    onChange?: Dispatch<SetStateAction<string | undefined>>;
+};
+declare const InputDayPicker: ({ isDisabled, popoverProps, inputProps, dayPickerProps, dateFormat, value, onChange, }: InputDayPickerProps) => JSX.Element;
+
 declare const getPaginationInfo: ({ page, pageSize, totalItems, }: {
     page?: number | undefined;
     pageSize?: number | undefined;
@@ -83,10 +121,10 @@ declare type PaginationContextValue<PageType = number> = {
     lastItemOnPage: number;
 };
 declare const PaginationContext: React.Context<PaginationContextValue<number>>;
-declare const PaginationButtonFirstPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
-declare const PaginationButtonPrevPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
-declare const PaginationButtonLastPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
-declare const PaginationButtonNextPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+declare const PaginationButtonFirstPage: FC<PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+declare const PaginationButtonPrevPage: FC<PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+declare const PaginationButtonLastPage: FC<PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+declare const PaginationButtonNextPage: FC<PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
 declare const PaginationInfo: ({ ...rest }: {
     [x: string]: any;
 }) => JSX.Element;
@@ -99,4 +137,162 @@ declare type PaginationProps = StackProps & {
 };
 declare const Pagination: ({ setPage, page, pageSize, totalItems, isLoadingPage, ...rest }: PaginationProps) => JSX.Element;
 
-export { ActionsButton, ActionsButtonProps, DataList, DataListAccordion, DataListAccordionButton, DataListAccordionIcon, DataListAccordionPanel, DataListCell, DataListCellProps, DataListContext, DataListFooter, DataListFooterProps, DataListHeader, DataListHeaderContext, DataListHeaderProps, DataListProps, DataListRow, DataListRowProps, FormGroup, FormGroupProps, Pagination, PaginationButtonFirstPage, PaginationButtonLastPage, PaginationButtonNextPage, PaginationButtonPrevPage, PaginationContext, PaginationContextValue, PaginationInfo, PaginationProps, getPaginationInfo };
+declare type CustomProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?(value?: string): void;
+    delay?: number;
+    clearLabel?: string;
+};
+declare type SearchInputProps = Overwrite<InputProps, CustomProps>;
+declare const SearchInput: _chakra_ui_react.ComponentWithAs<"input", SearchInputProps>;
+
+declare module 'react' {
+    function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+}
+declare type SelectProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = {
+    isAsync?: boolean;
+    isCreatable?: boolean;
+    isError?: boolean;
+    size?: string;
+    formatCreateLabel?: (inputValue: string) => ReactNode;
+    loadOptions?: (input: unknown) => TODO;
+    defaultOptions?: unknown | boolean;
+    debounceDelay?: number;
+    variant?: 'unstyled' | 'filled' | 'outlined';
+} & Props<Option, IsMulti, Group> & Omit<BoxProps, 'defaultValue'>;
+declare const Select: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: {
+    isAsync?: boolean | undefined;
+    isCreatable?: boolean | undefined;
+    isError?: boolean | undefined;
+    size?: string | undefined;
+    formatCreateLabel?: ((inputValue: string) => ReactNode) | undefined;
+    loadOptions?: ((input: unknown) => TODO) | undefined;
+    defaultOptions?: unknown | boolean;
+    debounceDelay?: number | undefined;
+    variant?: "unstyled" | "filled" | "outlined" | undefined;
+} & Omit<Pick<react_select_dist_declarations_src_Select.Props<Option, IsMulti, Group>, "aria-label" | "form" | "autoFocus" | "name" | "value" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme"> & {
+    placeholder?: React.ReactNode;
+    tabIndex?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    isLoading?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    components?: Partial<react_select_dist_declarations_src_components.SelectComponents<Option, IsMulti, Group>> | undefined;
+    pageSize?: number | undefined;
+    backspaceRemovesValue?: boolean | undefined;
+    blurInputOnSelect?: boolean | undefined;
+    captureMenuScroll?: boolean | undefined;
+    closeMenuOnSelect?: boolean | undefined;
+    closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
+    controlShouldRenderValue?: boolean | undefined;
+    escapeClearsValue?: boolean | undefined;
+    filterOption?: ((option: react_select_dist_declarations_src_filters.FilterOptionOption<Option>, inputValue: string) => boolean) | null | undefined;
+    formatGroupLabel?: ((group: Group) => React.ReactNode) | undefined;
+    getOptionLabel?: react_select.GetOptionLabel<Option> | undefined;
+    getOptionValue?: react_select.GetOptionValue<Option> | undefined;
+    isOptionDisabled?: ((option: Option, selectValue: react_select.Options<Option>) => boolean) | undefined;
+    isMulti?: IsMulti | undefined;
+    isRtl?: boolean | undefined;
+    isSearchable?: boolean | undefined;
+    loadingMessage?: ((obj: {
+        inputValue: string;
+    }) => React.ReactNode) | undefined;
+    minMenuHeight?: number | undefined;
+    maxMenuHeight?: number | undefined;
+    menuIsOpen?: boolean | undefined;
+    menuPlacement?: react_select.MenuPlacement | undefined;
+    menuPosition?: react_select.MenuPosition | undefined;
+    menuShouldBlockScroll?: boolean | undefined;
+    menuShouldScrollIntoView?: boolean | undefined;
+    noOptionsMessage?: ((obj: {
+        inputValue: string;
+    }) => React.ReactNode) | undefined;
+    openMenuOnFocus?: boolean | undefined;
+    openMenuOnClick?: boolean | undefined;
+    options?: react_select.OptionsOrGroups<Option, Group> | undefined;
+    screenReaderStatus?: ((obj: {
+        count: number;
+    }) => string) | undefined;
+    styles?: react_select.StylesConfig<Option, IsMulti, Group> | undefined;
+    tabSelectsValue?: boolean | undefined;
+} & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<react_select_dist_declarations_src_Select.Props<Option, IsMulti, Group>, "aria-label" | "form" | "autoFocus" | "name" | "value" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom" | "theme"> & {
+    placeholder?: React.ReactNode;
+    tabIndex?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    isLoading?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    components?: Partial<react_select_dist_declarations_src_components.SelectComponents<Option, IsMulti, Group>> | undefined;
+    pageSize?: number | undefined;
+    backspaceRemovesValue?: boolean | undefined;
+    blurInputOnSelect?: boolean | undefined;
+    captureMenuScroll?: boolean | undefined;
+    closeMenuOnSelect?: boolean | undefined;
+    closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
+    controlShouldRenderValue?: boolean | undefined;
+    escapeClearsValue?: boolean | undefined;
+    filterOption?: ((option: react_select_dist_declarations_src_filters.FilterOptionOption<Option>, inputValue: string) => boolean) | null | undefined;
+    formatGroupLabel?: ((group: Group) => React.ReactNode) | undefined;
+    getOptionLabel?: react_select.GetOptionLabel<Option> | undefined;
+    getOptionValue?: react_select.GetOptionValue<Option> | undefined;
+    isOptionDisabled?: ((option: Option, selectValue: react_select.Options<Option>) => boolean) | undefined;
+    isMulti?: IsMulti | undefined;
+    isRtl?: boolean | undefined;
+    isSearchable?: boolean | undefined;
+    loadingMessage?: ((obj: {
+        inputValue: string;
+    }) => React.ReactNode) | undefined;
+    minMenuHeight?: number | undefined;
+    maxMenuHeight?: number | undefined;
+    menuIsOpen?: boolean | undefined;
+    menuPlacement?: react_select.MenuPlacement | undefined;
+    menuPosition?: react_select.MenuPosition | undefined;
+    menuShouldBlockScroll?: boolean | undefined;
+    menuShouldScrollIntoView?: boolean | undefined;
+    noOptionsMessage?: ((obj: {
+        inputValue: string;
+    }) => React.ReactNode) | undefined;
+    openMenuOnFocus?: boolean | undefined;
+    openMenuOnClick?: boolean | undefined;
+    options?: react_select.OptionsOrGroups<Option, Group> | undefined;
+    screenReaderStatus?: ((obj: {
+        count: number;
+    }) => string) | undefined;
+    styles?: react_select.StylesConfig<Option, IsMulti, Group> | undefined;
+    tabSelectsValue?: boolean | undefined;
+} & {}> & react_select_dist_declarations_src_useStateManager.StateManagerAdditionalProps<Option> & Omit<BoxProps, "defaultValue"> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
+
+declare const BottomBar: (props: FlexProps) => JSX.Element;
+
+declare const LayoutContainer: (props: FlexProps) => JSX.Element;
+
+declare type SideNavProps = {
+    isMobileMenuOpen: boolean;
+    onMobileMenuClose: () => void;
+} & FlexProps & DrawerContentProps;
+declare type SideNavMenuItemProps = {
+    isActive?: boolean;
+} & ButtonProps;
+declare const SideNav: ({ isMobileMenuOpen, onMobileMenuClose, children, ...props }: SideNavProps) => JSX.Element;
+declare const SideNavContainer: (props: StackProps) => JSX.Element;
+declare const SideNavHeader: ({ children, ...rest }: FlexProps) => JSX.Element;
+declare const SideNavBody: ({ children, ...rest }: StackProps) => JSX.Element;
+declare const SideNavFooter: ({ children, ...rest }: FlexProps) => JSX.Element;
+declare const SideNavMenu: ({ title, children, ...rest }: StackProps) => JSX.Element;
+declare const SideNavMenuItem: ({ isActive, children, ...rest }: SideNavMenuItemProps) => JSX.Element;
+
+declare type TopBarBackActionProps = {
+    backAction?: () => void;
+    rightInformation?: ReactComponentElement<any>;
+} & FlexProps;
+declare const TopBar: (props: StackProps) => JSX.Element;
+declare const TopBarFirstElement: (props: FlexProps) => JSX.Element;
+declare const TopBarLastElement: (props: StackProps) => JSX.Element;
+declare const TopBarBackAction: ({ backAction, title, rightInformation, ...rest }: TopBarBackActionProps) => JSX.Element;
+
+declare const theme: any;
+
+declare const dateFormat = "dd/MM/yyyy";
+
+declare const useIsMobile: (currentBreakpoint: string) => boolean;
+
+export { ActionsButton, ActionsButtonProps, BottomBar, Card, ConfirmMenuItem, DataList, DataListAccordion, DataListAccordionButton, DataListAccordionIcon, DataListAccordionPanel, DataListCell, DataListCellProps, DataListContext, DataListFooter, DataListFooterProps, DataListHeader, DataListHeaderContext, DataListHeaderProps, DataListProps, DataListRow, DataListRowProps, DayPicker, FormGroup, FormGroupProps, InputDayPicker, InputDayPickerProps, LayoutContainer, MenuItem, Pagination, PaginationButtonFirstPage, PaginationButtonLastPage, PaginationButtonNextPage, PaginationButtonPrevPage, PaginationContext, PaginationContextValue, PaginationInfo, PaginationProps, SearchInput, Select, SelectProps, SideNav, SideNavBody, SideNavContainer, SideNavFooter, SideNavHeader, SideNavMenu, SideNavMenuItem, SideNavMenuItemProps, SideNavProps, SingleDayPickerProps, StyledMenuItemProps, TopBar, TopBarBackAction, TopBarBackActionProps, TopBarFirstElement, TopBarLastElement, dateFormat, getPaginationInfo, theme, useIsMobile };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@paygreen/pgui",
-  "version": "2.1.1",
-  "description": "PGUI is the design system coming grom Paygreen.",
+  "version": "2.2.0",
+  "description": "PGUI is the design system coming from Paygreen.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "files": [
@@ -9,11 +9,11 @@
   ],
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "rollup -c rollup.config.js",
+    "build": "rm -rf ./dist && rollup -c rollup.config.js",
     "lint": "eslint src/**/*.{js,jsx,ts,tsx,json} --max-warnings=0",
     "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc.json",
-    "link-local-lib": "npm link /home/philippe.chevreul@paygreen.ad/Documents/paygreen/app.paygreen.fr/node_modules/@chakra-ui/react",
+    "link-local-lib": "npm link @chakra-ui/react react",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "prepare": "husky install"
@@ -65,7 +65,10 @@
     "@typescript-eslint/eslint-plugin": "^5.30.6",
     "@typescript-eslint/parser": "^5.30.6",
     "babel-loader": "^8.2.5",
+    "date-fns": "^2.29.1",
     "eslint": "^8.20.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^3.2.7",
     "eslint-plugin-import": "^2.26.0",
@@ -79,15 +82,18 @@
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
+    "react-day-picker": "^8.0.7",
     "react-dom": "^18.2.0",
+    "react-focus-lock": "^2.9.1",
     "react-icons": "^4.4.0",
+    "react-select": "^5.4.0",
     "rollup": "^2.77.0",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-node-externals": "^4.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.7.4",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-airbnb-typescript": "^17.0.0"
+    "sass": "^1.53.0",
+    "typescript": "^4.7.4"
   }
-}
+}