@paygreen/pgui 2.14.7 → 2.14.9

package/README.md

@@ -3,6 +3,7 @@
 ## Information
 PGUI is the current Paygreen's Design System. The purpose of the package is to provide Components for [Paygreen](https://paygreen.io) applications that works with [Chakra UI](https://chakra-ui.com)
 ___
+
 ## Getting Started
 To setup PGUI in a local environment, please install the package in your target project.
 
@@ -10,7 +11,45 @@ To setup PGUI in a local environment, please install the package in your target
 npm i @paygreen/pgui
 ```
 
-When this is done, you will need to link Chakra UI and React packages from your target project to PGUI and then link PGUI to your target project as the schema explains here.
+```javascript
+import { ChakraProvider } from '@chakra-ui/react';
+import { theme } from '@paygreen/pgui',
+
+<ChakraProvider theme={theme}>
+  {Your App}
+</ChakraProvider>
+```
+___
+
+## Develop a new component
+
+If you need to develop or update a component you will need to create a new folder with your component's name inside ```src/components```. Inside this folder you'll need to create 2 files, ```index.tsx``` and ```docs.stories.tsx``` if needed.
+
+Don't hesite to refer yourself to ```FormGroup``` component which is a good simple component created with Chakra.
+
+When your component is finished, you will need to export it globally on the
+```src/components/index.ts``` and ```src/index.ts``` file.
+
+To make your modifications accessible, build the package with rollup.
+```bash
+npm run build
+```
+___
+
+## Storybook
+
+When you add a component and you write documentation, you can see it in storybook.
+To run storybook please use the command
+```bash
+npm run storybook
+```
+
+It should open you storybook on your localhost:6006 port.
+___
+
+## Link PGUI development into your current React project
+
+You will need to link Chakra UI and React packages from your target project to PGUI and then link PGUI to your target project as the schema explains here.
 
 ![Screenshot](pgui-schema.png)
 
@@ -46,50 +85,17 @@ npm run build
 npm link @paygreen/pgui
 ```
 
-7. it should works well, you just now have to link your theme with the one on PGUI on yiour ChakraProvider in your target project, and then use the components you need! 🥳
+7. it should works well, you just now have to link your theme with the one on PGUI on your ChakraProvider in your target project, and then use the components you need! 🥳
 
-```javascript
-import { ChakraProvider } from '@chakra-ui/react';
-import { theme } from '@paygreen/pgui',
-
-<ChakraProvider theme={theme}>
-  {Your App}
-</ChakraProvider>
-```
-
-> Voir tous les links
+> See all links
 ```
 npm ls --link --global
 ```
-___
-## Develop a new component
-
-If you need to develop or update a component you will need to create a new folder with your component's name inside ```src/components```. Inside this folder you'll need to create 2 files, ```index.tsx``` and ```docs.stories.tsx``` if needed.
-
-Don't hesite to refer yourself to ```FormGroup``` component which is a good simple component created with Chakra.
-
-When your component is finished, you will need to export it globally on the
-```src/components/index.ts``` and ```src/index.ts``` file.
-
-To make your modifications accessible, build the package with rollup.
-```bash
-npm run build
-```
 
 Instead of use npm link, to real-time testing your component, run ```npx relative-deps``` in the APP project ad restart it.
 
 Then your modifications will be available on your target project.
-___
-
-## Storybook
-
-When you add a component and you write documentation, you can see it in storybook.
-To run storybook please use the command
-```bash
-npm run storybook
-```
 
-It should open you storybook on your localhost:6006 port.
 ___
 
 ## Troubleshooting
@@ -101,17 +107,3 @@ npm run link-local-lib
 ```
 
 If it doesn't work, please refer to Getting Started guide to check the npm link process.
-
-### Error on storybook build
-
-When you try to ```npm run storybook``` you might catch this error
-```
-ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs 22:4-12
-Can't import the named export 'Children' from non EcmaScript module (only default export is available)
- @ ./node_modules/framer-motion/dist/es/index.mjs
- ```
-When this appens, it is normally because of framer-motion package coming with Chakra UI. It is a known issue with latest version of framer version, to solve this issue please use this version instead
-
-```json
-"framer-motion": "4.1.17"
-```

package/dist/cjs/index.js

@@ -206,7 +206,7 @@ var ActionsButton = react.forwardRef(function (_a, ref) {
 ActionsButton.displayName = 'ActionsButton';
 
 var Card = function (props) {
-    var bgColor = react.useColorModeValue('white', 'gray.900');
+    var bgColor = react.useColorModeValue('white', 'whiteAlpha.50');
     var borderColor = react.useColorModeValue('gray.100', 'gray.700');
     return (React__default["default"].createElement(react.Card, __assign$2({ p: 6, backgroundColor: bgColor, borderWidth: "1px", borderStyle: "solid", borderColor: borderColor, h: "fit-content", w: "full" }, props)));
 };
@@ -381,7 +381,7 @@ var DataListFooter = function (_a) {
     var rest = __rest$2(_a, []);
     return (React__default["default"].createElement(react.Box, { mt: "auto" },
         React__default["default"].createElement(react.Flex, __assign$2({ fontSize: "sm", mt: "-1px", borderTop: "1px solid", p: "2", align: "center", bg: "white", borderTopColor: "gray.100", color: "gray.600", _dark: {
-                bg: 'blackAlpha.50',
+                bg: 'whiteAlpha.50',
                 color: 'gray.300',
                 borderTopColor: 'gray.900'
             } }, rest))));
@@ -394,7 +394,7 @@ var DataList = function (_a) {
             columns: columns,
             isHover: isHover
         } },
-        React__default["default"].createElement(react.Accordion, __assign$2({ border: "2px solid", borderBottom: "none", borderColor: react.useColorModeValue('gray.100', 'gray.700'), borderRadius: "md", display: "flex", flexDirection: "column", position: "relative", boxShadow: "md", overflow: "hidden", allowMultiple: !allowToggle ? allowMultiple : false, allowToggle: allowToggle, bg: react.useColorModeValue('white', 'gray.900') }, rest))));
+        React__default["default"].createElement(react.Accordion, __assign$2({ border: "2px solid", borderBottom: "none", borderColor: react.useColorModeValue('gray.100', 'gray.700'), borderRadius: "md", display: "flex", flexDirection: "column", position: "relative", boxShadow: "md", overflow: "hidden", allowMultiple: !allowToggle ? allowMultiple : false, allowToggle: allowToggle, bg: react.useColorModeValue('white', 'whiteAlpha.50') }, rest))));
 };
 
 var FormGroup = function (_a) {
@@ -59956,61 +59956,82 @@ var BottomBar = function (props) {
     return (React__default["default"].createElement(LayoutContainer, __assign$2({ minH: "4.125rem", bg: bg, boxShadow: "layout", justifyContent: "space-between", alignItems: "center" }, props)));
 };
 
-var useCustomScrollbar = function (options) {
+var chakraStyle = function () { return ({
+    'div[data-popper-placement]': {
+        minWidth: 'auto !important'
+    }
+}); };
+
+var reactDayPicker = {
+    '.rdp': {
+        '--rdp-cell-size': '30px',
+        '--rdp-caption-font-size': 'var(--chakra-sizes-3-5)',
+        '--rdp-accent-color': 'var(--chakra-colors-blue-100)',
+        '--rdp-background-color': 'var(--chakra-colors-gray-200)',
+        '--rdp-outline': '0px',
+        '--rdp-outline-selected': '0px',
+        '--rdp-selected-color': 'var(--chakra-colors-gray-800)',
+        '[data-theme="dark"] &': {
+            '--rdp-accent-color': 'var(--chakra-colors-blue-800)',
+            '--rdp-background-color': 'var(--chakra-colors-gray-600)',
+            '--rdp-selected-color': 'var(--chakra-colors-gray-50)'
+        }
+    },
+    '.rdp-dropdown': {
+        appearance: 'none',
+        backgroundColor: 'var(--chakra-colors-gray-50)',
+        '[data-theme="dark"] &': {
+            backgroundColor: 'var(--chakra-colors-gray-800)'
+        }
+    }
+};
+
+var scrollbarStyles = function () {
     var colorMode = react.useColorMode().colorMode;
-    var scrollbarStyles = {
+    var trackColor = colorMode === 'light' ? 'rgba(0, 0, 0, 0.10)' : 'rgba(255, 255, 255, 0.10)';
+    var thumbColor = colorMode === 'light' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(255, 255, 255, 0.25)';
+    return {
+        // WebKit browsers
         '&::-webkit-scrollbar': {
-            width: options.width || '0.7rem',
+            width: '0.4rem',
             borderRadius: '9999px',
-            backgroundColor: colorMode === 'light'
-                ? options.trackColorLight
-                : options.trackColorDark
+            backgroundColor: trackColor
         },
         '&::-webkit-scrollbar-thumb': {
-            backgroundColor: colorMode === 'light'
-                ? options.thumbColorLight
-                : options.thumbColorDark,
+            backgroundColor: thumbColor,
             borderRadius: '9999px'
         }
     };
-    return scrollbarStyles;
 };
 
-var dateFormat = 'dd/MM/yyyy';
-
-var useIsMobile = function (currentBreakpoint) {
-    return (currentBreakpoint === 'base' ||
-        currentBreakpoint === 'sm' ||
-        currentBreakpoint === 'md' ||
-        currentBreakpoint === 'lg');
-};
+var rawStyle = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  chakraStyle: chakraStyle,
+  reactDayPicker: reactDayPicker,
+  scrollbarStyles: scrollbarStyles
+});
 
 var SideNav = function (_a) {
-    var isMobileMenuOpen = _a.isMobileMenuOpen, onMobileMenuClose = _a.onMobileMenuClose, children = _a.children, props = __rest$2(_a, ["isMobileMenuOpen", "onMobileMenuClose", "children"]);
+    var isOpen = _a.isOpen, onClose = _a.onClose; _a.onToggle; var breakpoint = _a.breakpoint, children = _a.children, props = __rest$2(_a, ["isOpen", "onClose", "onToggle", "breakpoint", "children"]);
     var theme = react.useTheme();
-    var currentBreakpoint = react.useBreakpoint();
-    var isMobile = useIsMobile(currentBreakpoint);
     var colorMode = react.useColorMode().colorMode;
     var useColorModeValue = function (light, dark) {
         return colorMode === 'light' ? light : dark;
     };
-    var customScrollBar = useCustomScrollbar({
-        trackColorLight: 'rgba(0, 0, 0, 0.05)',
-        trackColorDark: 'rgba(255, 255, 255, 0.05)',
-        thumbColorLight: 'rgba(0, 0, 0, 0.10)',
-        thumbColorDark: 'rgba(255, 255, 255, 0.10)'
-    });
     var bgGradient = useColorModeValue(theme.colors.gradients.primary, 'linear(to-l, gray.900, gray.900)');
+    var isMobile = react.useBreakpointValue(breakpoint || {
+        base: true,
+        md: false
+    });
     if (isMobile) {
-        return (React__default["default"].createElement(react.Drawer, { isOpen: isMobileMenuOpen, placement: "left", onClose: onMobileMenuClose, size: "nav" },
+        return (React__default["default"].createElement(react.Drawer, { isOpen: isOpen, placement: "left", onClose: onClose, size: "nav" },
             React__default["default"].createElement(react.DrawerOverlay, null),
-            React__default["default"].createElement(react.DrawerContent, __assign$2({ bgGradient: bgGradient, color: "white", pt: 6, px: 6, overflow: "auto", sx: customScrollBar }, props),
+            React__default["default"].createElement(react.DrawerContent, __assign$2({ bgGradient: bgGradient, color: "white", pt: 6, px: 6, overflow: "auto", sx: scrollbarStyles() }, props),
                 React__default["default"].createElement(react.DrawerCloseButton, null),
                 children)));
     }
     var flexBgGradient = useColorModeValue(theme.colors.gradients.primary, 'linear(to-l, gray.900, gray.900)');
-    var color = useColorModeValue('white', 'gray.50');
-    return (React__default["default"].createElement(react.Flex, __assign$2({ w: "18rem", h: "100vh", flexDir: "column", bgGradient: flexBgGradient, color: color, pt: 6, px: 6, position: "fixed", top: "0", left: "0", sx: customScrollBar }, props), children));
+    return (React__default["default"].createElement(react.Flex, __assign$2({ w: "18rem", h: "100vh", flexDir: "column", bgGradient: flexBgGradient, color: useColorModeValue('white', 'gray.50'), pt: 6, px: 6, position: "fixed", top: "0", left: "0", sx: scrollbarStyles(), transform: !isOpen ? 'translateX(-18rem)' : 'none', transition: '0.4s ease-in-out' }, props), children));
 };
 var SideNavContainer = function (props) { return (React__default["default"].createElement(react.VStack, __assign$2({ spacing: 6, alignItems: "inherit", minH: "100%" }, props))); };
 var SideNavHeader = function (_a) {
@@ -60019,13 +60040,7 @@ var SideNavHeader = function (_a) {
 };
 var SideNavBody = function (_a) {
     var children = _a.children, rest = __rest$2(_a, ["children"]);
-    var customScrollBar = useCustomScrollbar({
-        trackColorLight: 'rgba(0, 0, 0, 0.10)',
-        trackColorDark: 'rgba(255, 255, 255, 0.10)',
-        thumbColorLight: 'rgba(0, 0, 0, 0.15)',
-        thumbColorDark: 'rgba(255, 255, 255, 0.15)'
-    });
-    return (React__default["default"].createElement(react.VStack, __assign$2({ pt: 4, spacing: 5, pr: 1, alignItems: "inherit", overflowY: "auto", sx: customScrollBar }, rest), children));
+    return (React__default["default"].createElement(react.VStack, __assign$2({ pt: 4, spacing: 5, pr: 2, alignItems: "inherit", overflowY: "auto", sx: scrollbarStyles() }, rest), children));
 };
 var SideNavFooter = function (_a) {
     var children = _a.children, rest = __rest$2(_a, ["children"]);
@@ -60791,42 +60806,6 @@ var typography = {
 
 var foundations = __assign$2(__assign$2({ colors: colors }, typography), { sizes: sizes, shadows: shadows, radii: radii });
 
-var chakraStyle = function () { return ({
-    'div[data-popper-placement]': {
-        minWidth: 'auto !important'
-    }
-}); };
-
-var reactDayPicker = {
-    '.rdp': {
-        '--rdp-cell-size': '30px',
-        '--rdp-caption-font-size': 'var(--chakra-sizes-3-5)',
-        '--rdp-accent-color': 'var(--chakra-colors-blue-100)',
-        '--rdp-background-color': 'var(--chakra-colors-gray-200)',
-        '--rdp-outline': '0px',
-        '--rdp-outline-selected': '0px',
-        '--rdp-selected-color': 'var(--chakra-colors-gray-800)',
-        '[data-theme="dark"] &': {
-            '--rdp-accent-color': 'var(--chakra-colors-blue-800)',
-            '--rdp-background-color': 'var(--chakra-colors-gray-600)',
-            '--rdp-selected-color': 'var(--chakra-colors-gray-50)'
-        }
-    },
-    '.rdp-dropdown': {
-        appearance: 'none',
-        backgroundColor: 'var(--chakra-colors-gray-50)',
-        '[data-theme="dark"] &': {
-            backgroundColor: 'var(--chakra-colors-gray-800)'
-        }
-    }
-};
-
-var rawStyle = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  chakraStyle: chakraStyle,
-  reactDayPicker: reactDayPicker
-});
-
 var externalsStyles = function (props) {
     return Object.values(rawStyle).reduce(function (acc, cur) { return (__assign$2(__assign$2({}, acc), (typeof cur === 'function' ? cur(props) : cur))); }, {});
 };
@@ -60848,6 +60827,15 @@ var config = {
 };
 var theme = react.extendTheme(__assign$2(__assign$2({ styles: styles }, foundations), { components: __assign$2({}, components), config: config }));
 
+var dateFormat = 'dd/MM/yyyy';
+
+var useIsMobile = function (currentBreakpoint) {
+    return (currentBreakpoint === 'base' ||
+        currentBreakpoint === 'sm' ||
+        currentBreakpoint === 'md' ||
+        currentBreakpoint === 'lg');
+};
+
 exports.ActionsButton = ActionsButton;
 exports.BottomBar = BottomBar;
 exports.Card = Card;