@paygreen/pgui 2.0.0 → 2.1.0

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

@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { IconButtonProps } from '@chakra-ui/react';
+export declare type ActionsButtonProps = Omit<IconButtonProps, 'aria-label'> & {
+    label: string;
+};
+export declare const ActionsButton: FC<React.PropsWithChildren<ActionsButtonProps>>;

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

@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+import { AccordionProps, FlexProps } from '@chakra-ui/react';
+export declare const DataListContext: React.Context<any>;
+export declare const DataListHeaderContext: React.Context<boolean>;
+export declare type DataListCellProps = FlexProps & {
+    colName?: string;
+    colWidth?: string | number | Record<string, string | number>;
+    isVisible?: boolean | boolean[] | Record<string, boolean>;
+};
+export declare const DataListCell: ({ children, colName, colWidth, isVisible, ...rest }: DataListCellProps) => JSX.Element | null;
+export declare const DataListAccordion: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+export declare const DataListAccordionButton: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+export declare const DataListAccordionIcon: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+export declare const DataListAccordionPanel: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+export declare type DataListRowProps = FlexProps & {
+    isVisible?: boolean | boolean[] | Record<string, boolean>;
+    isDisabled?: boolean;
+};
+export declare const DataListRow: FC<React.PropsWithChildren<DataListRowProps>>;
+export declare type DataListHeaderProps = DataListRowProps;
+export declare const DataListHeader: FC<React.PropsWithChildren<DataListHeaderProps>>;
+export declare type DataListFooterProps = DataListRowProps;
+export declare const DataListFooter: FC<React.PropsWithChildren<DataListFooterProps>>;
+export declare type DataListProps = AccordionProps & {
+    isHover?: boolean;
+};
+export declare const DataList: FC<React.PropsWithChildren<DataListProps>>;

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { FormControlProps } from '@chakra-ui/react';
+export declare type FormGroupProps = Omit<FormControlProps, 'onChange' | 'defaultValue' | 'label'> & {
+    children?: ReactNode;
+    errorMessage?: ReactNode;
+    helper?: ReactNode;
+    id?: string;
+    isRequired?: boolean;
+    label?: ReactNode;
+    showError?: boolean;
+};
+export declare const FormGroup: ({ children, errorMessage, helper, id, isRequired, label, showError, ...props }: FormGroupProps) => JSX.Element;

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

@@ -0,0 +1,43 @@
+import React, { FC } from 'react';
+import { IconButtonProps, StackProps } from '@chakra-ui/react';
+export declare const getPaginationInfo: ({ page, pageSize, totalItems, }: {
+    page?: number | undefined;
+    pageSize?: number | undefined;
+    totalItems?: number | undefined;
+}) => {
+    firstPage: number;
+    lastPage: number;
+    firstItemOnPage: number;
+    lastItemOnPage: number;
+    isFirstPage: boolean;
+    isLastPage: boolean;
+};
+export declare type PaginationContextValue<PageType = number> = {
+    page: PageType;
+    setPage: (page: PageType) => void;
+    firstPage: PageType;
+    isFirstPage: boolean;
+    lastPage: PageType;
+    isLastPage: boolean;
+    totalItems: number;
+    isLoadingPage: boolean;
+    pageSize: number;
+    firstItemOnPage: number;
+    lastItemOnPage: number;
+};
+export declare const PaginationContext: React.Context<PaginationContextValue<number>>;
+export declare const PaginationButtonFirstPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+export declare const PaginationButtonPrevPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+export declare const PaginationButtonLastPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+export declare const PaginationButtonNextPage: FC<React.PropsWithChildren<Omit<IconButtonProps, 'aria-label'>>>;
+export declare const PaginationInfo: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+export declare type PaginationProps = StackProps & {
+    setPage: (page: number) => void;
+    page?: number;
+    pageSize?: number;
+    totalItems?: number;
+    isLoadingPage?: boolean;
+};
+export declare const Pagination: ({ setPage, page, pageSize, totalItems, isLoadingPage, ...rest }: PaginationProps) => JSX.Element;

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

@@ -0,0 +1,4 @@
+export * from './ActionsButton';
+export * from './DataList';
+export * from './FormGroup';
+export * from './Pagination';

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

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

package/dist/esm/types/theme/components/Badge.d.ts

@@ -0,0 +1,7 @@
+export declare const Badge: {
+    baseStyle: {
+        borderRadius: string;
+        fontWeight: string;
+        paddingX: number;
+    };
+};

package/dist/esm/types/theme/components/Button.d.ts

@@ -0,0 +1,140 @@
+export declare const Button: {
+    baseStyle: {
+        borderRadius: string;
+        fontWeight: string;
+    };
+    variants: {
+        '@primary': (props: any) => {
+            bg: string;
+            color: string;
+            _focus: {
+                boxShadow: string;
+            };
+            _hover: {
+                bg: string;
+                color: string;
+                _disabled: {
+                    bg: string;
+                };
+            };
+            _active: {
+                bg: string;
+            };
+        };
+        '@secondary': (props: any) => {
+            bg: string;
+            color: string;
+            _focus: {
+                boxShadow: string;
+            };
+            _hover: {
+                bg: string;
+                color: string;
+                _disabled: {
+                    bg: string;
+                };
+            };
+            _active: {
+                bg: string;
+            };
+        };
+        '@danger': (props: any) => {
+            bg: string;
+            color: string;
+            _focus: {
+                boxShadow: string;
+            };
+            _hover: {
+                bg: string;
+                color: string;
+                _disabled: {
+                    bg: string;
+                };
+            };
+            _active: {
+                bg: string;
+            };
+        };
+        '@link': (props: any) => {
+            height: string;
+            margin: number;
+            padding: number;
+            _hover: {
+                textDecoration: string;
+                color: string;
+            };
+            _active: {
+                textDecoration: string;
+                color: string;
+            };
+            bg: string;
+            color: string;
+            _focus: {
+                boxShadow: string;
+            };
+        };
+        '@linkNeutral': (props: any) => {
+            height: string;
+            margin: number;
+            padding: number;
+            _hover: {
+                textDecoration: string;
+                color: string;
+            };
+            bg: string;
+            color: string;
+            _focus: {
+                boxShadow: string;
+            };
+            _active: {
+                bg: string;
+            };
+        };
+        '@white': (props: any) => {
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
+            bg: string;
+            color: string;
+            _focus: {
+                boxShadow: string;
+            };
+            _hover: {
+                bg: string;
+                color: string;
+                _disabled: {
+                    bg: string;
+                };
+            };
+            _active: {
+                bg: string;
+            };
+        };
+        '@whiteNeutral': (props: any) => {
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
+            bg: string;
+            color: string;
+            _focus: {
+                boxShadow: string;
+            };
+            _hover: {
+                bg: string;
+                color: string;
+                _disabled: {
+                    bg: string;
+                };
+            };
+            _active: {
+                bg: string;
+            };
+        };
+        ghost: (props: any) => {
+            bg: string;
+            _hover: {
+                bg: string;
+            };
+        };
+    };
+};

package/dist/esm/types/theme/components/Input.d.ts

@@ -0,0 +1,47 @@
+export declare const Input: {
+    baseStyle: {
+        field: {
+            borderRadius: string;
+        };
+    };
+    variants: {
+        outline: (props: any) => {
+            field: {
+                bg: string;
+                borderColor: string;
+                borderRadius: string;
+                _focus: {
+                    borderColor: string;
+                };
+                _focusVisible: {
+                    boxShadow: string;
+                };
+            };
+            addon: {
+                borderRadius: string;
+            };
+        };
+        filled: (props: any) => {
+            field: {
+                bg: string;
+                borderWidth: string;
+                borderColor: string;
+                borderRadius: string;
+                _hover: {
+                    bg: string;
+                    borderColor: string;
+                };
+                _focus: {
+                    bg: string;
+                    borderColor: string;
+                };
+                _focusVisible: {
+                    boxShadow: string;
+                };
+            };
+            addon: {
+                borderRadius: string;
+            };
+        };
+    };
+};

package/dist/esm/types/theme/components/Tag.d.ts

@@ -0,0 +1,8 @@
+export declare const Tag: {
+    baseStyle: {
+        container: {
+            borderRadius: string;
+            fontWeight: string;
+        };
+    };
+};

package/dist/esm/types/theme/foundations/colors.d.ts

@@ -0,0 +1,65 @@
+export declare const colors: {
+    brand: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    orange: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    green: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    gradients: {
+        primary: string;
+    };
+};

package/dist/esm/types/theme/foundations/shadows.d.ts

@@ -0,0 +1,10 @@
+export declare const shadows: {
+    xs: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    layout: string;
+};

package/dist/esm/types/theme/foundations/typography.d.ts

@@ -0,0 +1,10 @@
+export declare const typography: {
+    fonts: {
+        heading: string;
+        body: string;
+        mono: string;
+    };
+    fontSizes: {
+        '2xs': string;
+    };
+};

package/dist/esm/types/theme/index.d.ts

@@ -0,0 +1 @@
+export declare const theme: unknown;

package/dist/index.d.ts

@@ -0,0 +1,96 @@
+import React, { FC, ReactNode } from 'react';
+import { IconButtonProps, FlexProps, AccordionProps, FormControlProps, StackProps } from '@chakra-ui/react';
+
+declare type ActionsButtonProps = Omit<IconButtonProps, 'aria-label'> & {
+    label: string;
+};
+declare const ActionsButton: FC<React.PropsWithChildren<ActionsButtonProps>>;
+
+declare const DataListContext: React.Context<any>;
+declare const DataListHeaderContext: React.Context<boolean>;
+declare type DataListCellProps = FlexProps & {
+    colName?: string;
+    colWidth?: string | number | Record<string, string | number>;
+    isVisible?: boolean | boolean[] | Record<string, boolean>;
+};
+declare const DataListCell: ({ children, colName, colWidth, isVisible, ...rest }: DataListCellProps) => JSX.Element | null;
+declare const DataListAccordion: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+declare const DataListAccordionButton: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+declare const DataListAccordionIcon: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+declare const DataListAccordionPanel: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+declare type DataListRowProps = FlexProps & {
+    isVisible?: boolean | boolean[] | Record<string, boolean>;
+    isDisabled?: boolean;
+};
+declare const DataListRow: FC<React.PropsWithChildren<DataListRowProps>>;
+declare type DataListHeaderProps = DataListRowProps;
+declare const DataListHeader: FC<React.PropsWithChildren<DataListHeaderProps>>;
+declare type DataListFooterProps = DataListRowProps;
+declare const DataListFooter: FC<React.PropsWithChildren<DataListFooterProps>>;
+declare type DataListProps = AccordionProps & {
+    isHover?: boolean;
+};
+declare const DataList: FC<React.PropsWithChildren<DataListProps>>;
+
+declare type FormGroupProps = Omit<FormControlProps, 'onChange' | 'defaultValue' | 'label'> & {
+    children?: ReactNode;
+    errorMessage?: ReactNode;
+    helper?: ReactNode;
+    id?: string;
+    isRequired?: boolean;
+    label?: ReactNode;
+    showError?: boolean;
+};
+declare const FormGroup: ({ children, errorMessage, helper, id, isRequired, label, showError, ...props }: FormGroupProps) => JSX.Element;
+
+declare const getPaginationInfo: ({ page, pageSize, totalItems, }: {
+    page?: number | undefined;
+    pageSize?: number | undefined;
+    totalItems?: number | undefined;
+}) => {
+    firstPage: number;
+    lastPage: number;
+    firstItemOnPage: number;
+    lastItemOnPage: number;
+    isFirstPage: boolean;
+    isLastPage: boolean;
+};
+declare type PaginationContextValue<PageType = number> = {
+    page: PageType;
+    setPage: (page: PageType) => void;
+    firstPage: PageType;
+    isFirstPage: boolean;
+    lastPage: PageType;
+    isLastPage: boolean;
+    totalItems: number;
+    isLoadingPage: boolean;
+    pageSize: number;
+    firstItemOnPage: 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 PaginationInfo: ({ ...rest }: {
+    [x: string]: any;
+}) => JSX.Element;
+declare type PaginationProps = StackProps & {
+    setPage: (page: number) => void;
+    page?: number;
+    pageSize?: number;
+    totalItems?: number;
+    isLoadingPage?: boolean;
+};
+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 };

package/package.json

@@ -1,11 +1,38 @@
 {
   "name": "@paygreen/pgui",
-  "version": "2.0.0",
-  "description": "",
-  "main": "index.js",
+  "version": "2.1.0",
+  "description": "PGUI is the design system coming grom Paygreen.",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "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",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "prepare": "husky install"
   },
+  "lint-staged": {
+    "**/*.{ts,tsx,json,mdx}": [
+      "prettier --write --config ./.prettierrc.json",
+      "eslint --fix --max-warnings=0"
+    ]
+  },
+  "keywords": [
+    "design",
+    "system",
+    "chakra-ui",
+    "component",
+    "library",
+    "theme",
+    "react"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://gitlab.com/Paygreen-paygreen/v3/pgui.git"
@@ -15,5 +42,52 @@
   "bugs": {
     "url": "https://gitlab.com/Paygreen-paygreen/v3/pgui/issues"
   },
-  "homepage": "https://gitlab.com/Paygreen-paygreen/v3/pgui#readme"
+  "homepage": "https://gitlab.com/Paygreen-paygreen/v3/pgui#readme",
+  "devDependencies": {
+    "@babel/core": "^7.18.9",
+    "@chakra-ui/react": "^2.2.3",
+    "@chakra-ui/theme-tools": "^2.0.5",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.3.3",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack4": "^6.5.9",
+    "@storybook/manager-webpack4": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
+    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
+    "@types/react": "^18.0.15",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
+    "babel-loader": "^8.2.5",
+    "eslint": "^8.20.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.2.7",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.1",
+    "framer-motion": "4.1.17",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.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-terser": "^7.0.2",
+    "typescript": "^4.7.4",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^17.0.0"
+  }
 }