pixelize-design-library 2.2.3 → 2.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/Components/SideBar/SideBar.d.ts +1 -1
  2. package/dist/Components/SideBar/SideBar.js +19 -11
  3. package/dist/Components/SideBar/SideBarProps.d.ts +1 -0
  4. package/package.json +1 -1
  5. package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.d.ts +0 -1
  6. package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.js +0 -6
  7. package/dist/Components/NumberInput/NumberInput.stories.d.ts +0 -1
  8. package/dist/Components/NumberInput/NumberInput.stories.js +0 -5
  9. package/dist/bundle.js +0 -282
  10. package/dist/bundle.js.LICENSE.txt +0 -93
  11. package/dist/index.html +0 -43
package/dist/Components/SideBar/SideBar.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { SidebarProps } from "./SideBarProps";
3
- export default function Sidebar({ menus, activeMenu, handleMenuClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, isLoading, }: SidebarProps): React.JSX.Element;
3
+ export default function Sidebar({ menus, activeMenu, handleMenuClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, isLoading, loadingLines, }: SidebarProps): React.JSX.Element;
package/dist/Components/SideBar/SideBar.js CHANGED
@@ -21,28 +21,36 @@ var Sidebar_1 = require("../../Constants/Sidebar");
21
21
  var lucide_react_1 = require("lucide-react");
22
22
  var MenuItems_1 = __importDefault(require("./components/MenuItems"));
23
23
  var defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
24
+ var TextTruncation_1 = __importDefault(require("./components/TextTruncation"));
24
25
  function Sidebar(_a) {
25
26
  var _b;
26
- var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, isLoading = _a.isLoading;
27
+ var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, isLoading = _a.isLoading, loadingLines = _a.loadingLines;
27
28
  var theme = (0, useCustomTheme_1.useCustomTheme)();
28
29
  return (react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "4.688rem" : "15.625rem", flexDir: "column", justifyContent: "space-between", background: theme.colors.sidebar.background[500] },
29
30
  react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", as: "nav", h: "100vh" },
30
- logo ? (react_1.default.createElement(react_2.Flex, { my: 3.5, alignItems: "left", gap: "0.625rem", pl: toggle ? 0 : "0.625rem" },
31
+ isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
32
+ react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4 },
33
+ react_1.default.createElement(react_2.Skeleton, { w: "25px", h: "25px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
34
+ react_1.default.createElement(react_2.Skeleton, { h: "1.5rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))) : (react_1.default.createElement(react_1.default.Fragment, null, logo ? (react_1.default.createElement(react_2.Flex, { my: 3.5, alignItems: "center", gap: "0.625rem", pl: toggle ? 0 : "0.625rem" },
31
35
  react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
32
- react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: 18, fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName))) : (react_1.default.createElement(react_2.Flex, { my: 3.5, alignItems: "center", gap: "0.625rem", pl: toggle ? 0 : "0.625rem" },
36
+ react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName))) : (react_1.default.createElement(react_2.Flex, { my: 3.5, alignItems: "center", gap: "0.625rem", pl: toggle ? 0 : "0.625rem" },
33
37
  react_1.default.createElement(react_2.Box, { bg: theme.colors.white, color: theme.colors.black, borderRadius: "full", boxSize: "2rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: { base: "xl", md: "2xl" } },
34
38
  react_1.default.createElement(defaultLogo_1.default, null)),
35
- react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, display: toggle ? "none" : "flex", lineHeight: 2 }, companyName))),
39
+ react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", color: theme.colors.white, display: toggle ? "none" : "block", lineHeight: 2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", w: "45%" },
40
+ react_1.default.createElement(TextTruncation_1.default, { open: toggle, fontSize: "1rem", flex: "1" }, companyName)))))),
36
41
  react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200] }),
37
42
  react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss, overflowX: "hidden" },
38
- react_1.default.createElement(react_2.Box, { width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading ? (Array.from({ length: 6 }).map(function (_, i) { return (react_1.default.createElement(react_2.Box, { key: i, w: "100%", px: toggle ? 2 : 4, py: 2 },
39
- react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md", startColor: theme.colors.gray[600], endColor: theme.colors.gray[500] }))); })) : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
43
+ react_1.default.createElement(react_2.Box, { width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading ? (Array.from({ length: loadingLines ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(react_2.Box, { key: i, w: "100%", px: toggle ? 2 : 4, py: 3 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
44
+ react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 5 },
45
+ react_1.default.createElement(react_2.Skeleton, { w: "20px", h: "20px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
46
+ react_1.default.createElement(react_2.Skeleton, { h: "1rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))); })) : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
40
47
  react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
41
- !isDisableAddNew && (isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
42
- react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md" }))) : (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onAddNewClick },
43
- react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
44
- react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
45
- react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")))),
48
+ !isDisableAddNew &&
49
+ (isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
50
+ react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md" }))) : (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onAddNewClick },
51
+ react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
52
+ react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
53
+ react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")))),
46
54
  react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: changeToggle, transition: "all 0.5s", bg: theme.colors.gray[700] },
47
55
  react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" }, toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 16, color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 16, color: theme.colors.white }))),
48
56
  react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: "white", fontWeight: "medium", display: toggle ? "none" : "block" }, "Collapse"))))));
package/dist/Components/SideBar/SideBarProps.d.ts CHANGED
@@ -10,6 +10,7 @@ export type SidebarProps = {
10
10
  onAddNewClick?: () => void;
11
11
  selectedSubMenu?: string | null;
12
12
  isLoading?: boolean;
13
+ loadingLines?: number;
13
14
  };
14
15
  export type MenuProps = {
15
16
  id: string | number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.3",
3
+ "version": "2.2.5",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.js DELETED
@@ -1,6 +0,0 @@
1
- "use strict";
2
- // import React from 'react';
3
- // import { StoryFn, Meta } from '@storybook/react';
4
- // import ApexBarChart from './ApexBarChart';
5
- // import { ApexBarChartProps } from './ApexBarChartProps';
6
- Object.defineProperty(exports, "__esModule", { value: true });
package/dist/Components/NumberInput/NumberInput.stories.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
package/dist/Components/NumberInput/NumberInput.stories.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
- // import React from 'react';
3
- // import { StoryFn, Meta } from '@storybook/react';
4
- // import NumberInputs from './NumberInput';
5
- Object.defineProperty(exports, "__esModule", { value: true });