pixelize-design-library 2.1.19 → 2.1.20

package/package.json

@@ -1,27 +1,38 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.1.19",
+  "version": "2.1.20",
   "private": false,
   "main": "dist/index.js",
-  "module": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
-  "dependencies": {
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
     "@chakra-ui/react": "^2.8.2",
-    "@hello-pangea/dnd": "^18.0.1",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "framer-motion": "^11.2.2",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "@hello-pangea/dnd": "^18.0.1",
     "jodit-react": "^4.1.2",
     "lucide-react": "^0.487.0",
-    "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
     "react-datepicker": "^7.3.0",
-    "react-dom": "^18.3.1",
-    "react-scripts": "^5.0.1",
-    "react-window": "^1.8.11",
-    "react-dropzone": "^14.3.8"
+    "react-dropzone": "^14.3.8",
+    "react-window": "^1.8.11"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "tsc && copyfiles -u 1 src/**/*.css src/assets/**/* dist/",
+    "build": "tsup",
+    "build:watch": "tsup --watch",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "package": "npm version patch && npm run build && npm publish"
@@ -49,6 +60,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@swc/core": "^1.13.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -63,7 +75,9 @@
     "postcss": "^8.5.4",
     "prettier": "^3.3.2",
     "prop-types": "^15.8.1",
+    "react-scripts": "^5.0.1",
     "tailwindcss": "^3.4.17",
+    "tsup": "^8.5.0",
     "typescript": "^4.9.5",
     "webpack": "^5.91.0"
   }

package/src/Components/Accordion/Accordion.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { AccordionProps } from "./AccordionProps";
+import {
+  Accordion as ChakraAccordian,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+} from "@chakra-ui/react";
+
+const Accordion = ({
+  allowMultiple,
+  allowToggle,
+  index,
+  onChange,
+  reduceMotion,
+  items,
+  ...rest
+}: AccordionProps) => {
+  return (
+    <ChakraAccordian
+      allowMultiple={allowMultiple}
+      allowToggle={allowToggle}
+      index={index}
+      onChange={onChange}
+      reduceMotion={reduceMotion}
+      {...rest}
+    >
+      {items.map((item, idx) => (
+        <AccordionItem
+          key={idx}
+          {...item.itemProps}
+          sx={item.customStyles?.itemStyle}
+        >
+          <h2>
+            <AccordionButton
+              {...item.buttonProps}
+              sx={{
+                ...item.customStyles?.buttonStyle,
+                '&:hover': {
+                  ...item.customStyles?.hoverbuttonStyle,
+                },
+              }}
+            >
+              {item.header}
+            </AccordionButton>
+          </h2>
+          <AccordionPanel
+            {...item.panelProps}
+            sx={item.customStyles?.panelStyle}
+          >
+            {item.content}
+          </AccordionPanel>
+        </AccordionItem>
+      ))}
+    </ChakraAccordian>
+  );
+};
+
+export default Accordion;

package/src/Components/Accordion/AccordionProps.tsx

@@ -0,0 +1,22 @@
+import {
+  AccordionProps as ChakraAccordionProps,
+  AccordionItemProps,
+  AccordionButtonProps,
+  AccordionPanelProps,
+} from "@chakra-ui/react";
+
+export type AccordionProps = ChakraAccordionProps & {
+  items: {
+    header: React.ReactNode;
+    content: React.ReactNode;
+    buttonProps?: AccordionButtonProps;
+    panelProps?: AccordionPanelProps;
+    itemProps?: AccordionItemProps;
+    customStyles?: {
+      buttonStyle?: React.CSSProperties;
+      hoverbuttonStyle?: React.CSSProperties;
+      panelStyle?: React.CSSProperties;
+      itemStyle?: React.CSSProperties;
+    };
+  }[];
+};

package/src/Components/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,69 @@
+import {
+  AlertDialog as ChakraAlertDialog,
+  AlertDialogBody,
+  AlertDialogCloseButton,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button,
+} from "@chakra-ui/react";
+import React from "react";
+import { AlertDialogsProps } from "./AlertDialogProps";
+
+const AlertDialog = ({
+  isOpen,
+  onClose,
+  leastDestructiveRef,
+  content,
+  title,
+  confirmButtonText = "Yes",
+  cancelButtonText = "No",
+  isConfirmLoading,
+  onConfirm,
+  ContentStyle,
+  headerStyle,
+  bodyStyle,
+  footerStyle,
+  closeButtonStyle,
+  button1Style,
+  button2Style,
+  isCentered,
+  confirmButtonColor = "red",
+  key,
+}: AlertDialogsProps) => {
+  return (
+    <ChakraAlertDialog
+      motionPreset="slideInBottom"
+      leastDestructiveRef={leastDestructiveRef}
+      onClose={onClose}
+      isOpen={isOpen}
+      isCentered={isCentered}
+      key={key}
+    >
+      <AlertDialogOverlay />
+      <AlertDialogContent sx={ContentStyle}>
+        <AlertDialogHeader sx={headerStyle}>{title}</AlertDialogHeader>
+        <AlertDialogCloseButton sx={closeButtonStyle} />
+        <AlertDialogBody sx={bodyStyle}>{content}</AlertDialogBody>
+        <AlertDialogFooter sx={footerStyle}>
+          <Button ref={null} onClick={onClose} size={"sm"} sx={button1Style}>
+            {cancelButtonText}
+          </Button>
+          <Button
+            colorScheme={confirmButtonColor}
+            onClick={onConfirm}
+            isLoading={isConfirmLoading}
+            ml={3}
+            size="sm"
+            sx={button2Style}
+          >
+            {confirmButtonText}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </ChakraAlertDialog>
+  );
+};
+
+export default AlertDialog;

package/{dist/Components/AlertDialog/AlertDialogProps.d.ts → src/Components/AlertDialog/AlertDialogProps.tsx}

@@ -1,6 +1,13 @@
 import { AlertDialogProps, AlertProps } from "@chakra-ui/react";
 import { ReactElement } from "react";
-export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "leastDestructiveRef"> & Pick<AlertProps, "addRole" | "colorScheme" | "size" | "status" | "variant"> & {
+export type AlertDialogsProps = Pick<
+  AlertDialogProps,
+  "isOpen" | "onClose" | "leastDestructiveRef"
+> &
+  Pick<
+    AlertProps,
+    "addRole" | "colorScheme" | "size" | "status" | "variant"
+  > & {
     title: string;
     content: ReactElement;
     isCentered?: boolean;
@@ -17,4 +24,4 @@ export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "l
     button2Style?: React.CSSProperties;
     key?: string | number;
     confirmButtonColor?: string;
-};
+  };

package/src/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.tsx

@@ -0,0 +1,42 @@
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import ApexBarChart from './ApexBarChart';
+// import { ApexBarChartProps } from './ApexBarChartProps';
+
+// import exp from "constants";
+
+// export default {
+//     title: 'Components/ApexCharts/ApexBarChart',
+//     component: ApexBarChart,
+//     argTypes: {
+//         backgroundColor: { control: 'color' },
+//     },
+// } as Meta;
+
+// const Template: StoryFn<ApexBarChartProps> = (args) => <ApexBarChart {...args} />;
+
+// export const Primary = Template.bind({});
+// Primary.args = {
+//     data: [44, 55, 41, 64, 22, 43, 21],
+//     Labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+//     title: 'Weekly Sales',
+//     titlePosition: 'left',
+//     height: 400,
+//     width: 500,
+//     barColor: ['#3182ce'],
+//     xAxisStyle: {
+//         color: '#ffffff',
+//     },
+//     yAxisStyle: {
+//         color: '#ffffff',
+//     },
+//     titleStyle: {
+//         color: '#3182ce',
+//         fontSize: '16px',
+//         fontWeight: 600,
+//         fontFamily: 'Arial',
+//     },
+// };
+
+// // You can add more variations of the component by adding more exports like the Primary example.
+export {};

package/src/Components/Apexcharts/ApexBarChart/ApexBarChart.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import ReactApexChart from "react-apexcharts";
+import { ApexBarChartProps } from "./ApexBarChartProps";
+import { ApexOptions } from "../ApexPieChart/ApexPieChartProps";
+
+export default function ApexBarChart({
+  data,
+  labels,
+  title,
+  titlePosition,
+  height = 400,
+  width = 500,
+  barColor = ["#3182ce"],
+  xAxisStyle = {
+    color: "#ffffff",
+  },
+  yAxisStyle = {
+    color: "#ffffff",
+  },
+  titleStyle = {
+    color: "#3182ce",
+    fontSize: "16px",
+    fontWeight: 600,
+    fontFamily: "Arial",
+  },
+}: ApexBarChartProps) {
+  const options: ApexOptions = {
+    chart: {
+      type: "bar",
+      height: 350,
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 4,
+        horizontal: false,
+      },
+    },
+    dataLabels: {
+      enabled: false,
+      style: {
+        fontSize: "12px",
+        colors: ["#00E396"], //data label color
+      },
+    },
+    xaxis: {
+      categories: labels,
+      labels: {
+        style: xAxisStyle,
+      },
+    },
+    yaxis: {
+      labels: {
+        style: yAxisStyle,
+      },
+    },
+    title: {
+      text: title,
+      align: titlePosition,
+      style: titleStyle,
+    },
+    colors: barColor, //bar color
+  };
+  const series = [
+    {
+      name: "Data",
+      data: data,
+    },
+  ];
+  return (
+    <div>
+      <ReactApexChart
+        options={options}
+        series={series}
+        type="bar"
+        height={height}
+        width={width}
+      />
+    </div>
+  );
+}

package/src/Components/Apexcharts/ApexBarChart/ApexBarChartProps.tsx

@@ -0,0 +1,19 @@
+export type ApexBarChartProps = {
+  data: number[];
+  labels: string[];
+  title?: string;
+  titlePosition?: "left" | "center" | "right";
+  height?: number;
+  width?: number;
+  barColor?: string[];
+  xAxisStyle?: StyleProps;
+  yAxisStyle?: StyleProps;
+  titleStyle?: StyleProps;
+};
+
+type StyleProps = {
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string | number;
+  color?: string;
+};

package/src/Components/Apexcharts/ApexPieChart/ApexPieChart.stories.tsx

@@ -0,0 +1,34 @@
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import ApexPieChart from './ApexPieChart';
+// import { ApexPieChartProps } from './ApexPieChartProps';
+
+// export default {
+//     title: 'Components/ApexCharts/ApexPieChart',
+//     component: ApexPieChart,
+//     argTypes: {
+//         backgroundColor: { control: 'color' },
+//     },
+// } as Meta;
+
+// const Template: StoryFn<ApexPieChartProps> = (args) => <ApexPieChart {...args} />;
+
+// export const Primary = Template.bind({});
+// Primary.args = {
+//     data: [44, 55, 41, 64, 22, 43, 21],
+//     labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+//     title: 'Weekly Sales',
+//     titlePosition: 'left',
+//     height: 400,
+//     width: 500,
+//     chartColor: ['#3182ce', '#ff6384', '#36a2eb', '#cc65fe', '#ffce56', '#ff6384', '#36a2eb'],
+//     titleStyle: {
+//         color: '#3182ce',
+//         fontSize: '16px',
+//         fontWeight: 600,
+//         fontFamily: 'Arial',
+//     },
+// };
+
+// // You can add more variations of the component by adding more exports like the Primary example.
+export {};

package/src/Components/Apexcharts/ApexPieChart/ApexPieChart.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import ReactApexChart from "react-apexcharts";
+import { ApexOptions, ApexPieChartProps } from "./ApexPieChartProps";
+
+export default function ApexPieChart({
+  data,
+  labels,
+  title,
+  titlePosition,
+  height = 400,
+  width = 500,
+  chartColor,
+  titleStyle = {
+    color: "#3182ce",
+  },
+}: ApexPieChartProps) {
+  const options: ApexOptions = {
+    chart: {
+      type: "pie",
+      height: 350,
+    },
+    labels: labels,
+    title: {
+      text: title,
+      align: titlePosition,
+      style: titleStyle,
+    },
+    colors: chartColor,
+  };
+  const series = data;
+  return (
+    <div>
+      <ReactApexChart
+        options={options}
+        series={series}
+        type="pie"
+        height={height}
+        width={width}
+      />
+    </div>
+  );
+}

package/src/Components/Apexcharts/ApexPieChart/ApexPieChartProps.tsx

@@ -0,0 +1,42 @@
+export type ApexPieChartProps = {
+  data: number[];
+  labels: string[];
+  title?: string;
+  titlePosition?: "left" | "center" | "right";
+  height?: number;
+  width?: number;
+  chartColor?: string[];
+  titleStyle?: StyleProps;
+};
+
+type StyleProps = {
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string | number;
+  color?: string;
+};
+
+export interface ApexOptions {
+  annotations?: ApexAnnotations;
+  chart?: ApexChart;
+  colors?: any[];
+  dataLabels?: ApexDataLabels;
+  fill?: ApexFill;
+  forecastDataPoints?: ApexForecastDataPoints;
+  grid?: ApexGrid;
+  labels?: string[];
+  legend?: ApexLegend;
+  markers?: ApexMarkers;
+  noData?: ApexNoData;
+  plotOptions?: ApexPlotOptions;
+  responsive?: ApexResponsive[];
+  series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
+  states?: ApexStates;
+  stroke?: ApexStroke;
+  subtitle?: ApexTitleSubtitle;
+  theme?: ApexTheme;
+  title?: ApexTitleSubtitle;
+  tooltip?: ApexTooltip;
+  xaxis?: ApexXAxis;
+  yaxis?: ApexYAxis | ApexYAxis[];
+}

package/src/Components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,27 @@
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react/types-6-0';
+// import Breadcrumbs from './Breadcrumbs';
+// import { BreadcrumbsProps } from './BreadcrumbsProps';
+
+// export default {
+//     title: 'Components/Breadcrumbs/Breadcrumb',
+//     component: Breadcrumbs,
+// } as Meta;
+
+// const Template: StoryFn<BreadcrumbsProps> = (args) => <Breadcrumbs {...args} />;
+
+// export const Default = Template.bind({});
+// Default.args = {
+//     spacing: "8px",
+//     separator: "/",
+//     fontWeight: "normal",
+//     fontSize: "1rem",
+//     isCurrentPage: true,
+//     handleClick: (path) => console.log(`Clicked: ${path}`),
+//     items: [
+//         { path: '/home', label: 'Home' },
+//         { path: '/about', label: 'About' },
+//         { path: '/contact', label: 'Contact' },
+//     ],
+// };
+export {};

package/src/Components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, useTheme } from "@chakra-ui/react";
+import { BreadcrumbsProps } from "./BreadcrumbsProps";
+
+export default function Breadcrumbs({
+  spacing,
+  separator,
+  fontWeight,
+  fontSize,
+  isCurrentPage,
+  handleClick,
+  items,
+}: BreadcrumbsProps) {
+  const theme = useTheme();
+  return (
+    <Breadcrumb
+      spacing={spacing}
+      separator={separator}
+      fontWeight={fontWeight}
+      fontSize={fontSize}
+      fontFamily={theme.fonts.body}
+    >
+      {items.map((item, index) => (
+        <BreadcrumbItem
+          key={index}
+          isCurrentPage={isCurrentPage && index === items.length - 1}
+        >
+          <BreadcrumbLink
+            href={item.path}
+            sx={{ "&:hover, &:active": { textDecoration: "none" } }}
+            onClick={(event) => {
+              event.preventDefault();
+              handleClick(item.path);
+            }}
+          >
+            {item.label}
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+      ))}
+    </Breadcrumb>
+  );
+}

package/{dist/Components/Breadcrumbs/BreadcrumbsProps.d.ts → src/Components/Breadcrumbs/BreadcrumbsProps.tsx}

@@ -1,4 +1,5 @@
 import { BreadcrumbProps } from "@chakra-ui/react";
+
 export type BreadcrumbsProps = Pick<BreadcrumbProps, "spacing" | "separator" | "fontWeight" | "fontSize"> & {
     isCurrentPage?: boolean;
     isLastChild?: boolean;
@@ -8,4 +9,4 @@ export type BreadcrumbsProps = Pick<BreadcrumbProps, "spacing" | "separator" | "
 export type BreadcrumbItem = {
     path: string;
     label: string;
-};
+};

package/src/Components/Button/Button.stories.tsx

@@ -0,0 +1,33 @@
+// import React from 'react';
+// import { Meta, StoryObj } from '@storybook/react';
+// import Button from './Button';
+// import { fn } from '@storybook/test';
+
+// const meta: Meta<typeof Button> = {
+//     title: 'Components/Button/Button',
+//     component: Button,
+
+//     parameters: {
+//         layout: 'centered',
+//     },
+//     tags: ['autodocs']
+// };
+
+// export default meta;
+// type Story = StoryObj<typeof meta>;
+
+// export const Primary: Story = {
+//     args: {
+//         label: 'Button',
+//         width: '',
+//         color: 'blue',
+//         variant: 'solid',
+//         size: 'md',
+//         isDisabled: false,
+//         isLoading: false,
+//         loadingText: 'Loading',
+//         type: 'button',
+//         onClick: fn()
+//     },
+// };
+export {};