pixelize-design-library 2.1.20 → 2.1.21

package/dist/withTheme.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const withTheme: (Component: React.ComponentType, theme?: any) => (props: any) => React.JSX.Element;
+export default withTheme;

package/dist/withTheme.js

@@ -0,0 +1,28 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var Theme_1 = require("./Theme"); // Import your custom theme
+var Toaster_1 = __importDefault(require("./Components/Toaster/Toaster"));
+var withTheme = function (Component, theme) {
+    var customTheme = theme !== null && theme !== void 0 ? theme : Theme_1.lavender;
+    return function (props) { return (react_1.default.createElement(react_2.ChakraProvider, { theme: customTheme },
+        react_1.default.createElement(Toaster_1.default, null,
+            react_1.default.createElement(react_2.ColorModeScript, { initialColorMode: customTheme.config.initialColorMode }),
+            react_1.default.createElement(Component, __assign({}, props))))); };
+};
+exports.default = withTheme;

package/package.json

@@ -1,38 +1,27 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.1.20",
+  "version": "2.1.21",
   "private": false,
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    }
-  },
-  "peerDependencies": {
-    "@chakra-ui/react": "^2.8.2",
-    "@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": {
+    "@chakra-ui/react": "^2.8.2",
     "@hello-pangea/dnd": "^18.0.1",
+    "framer-motion": "^11.2.2",
     "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-dropzone": "^14.3.8",
-    "react-window": "^1.8.11"
+    "react-dom": "^18.3.1",
+    "react-scripts": "^5.0.1",
+    "react-window": "^1.8.11",
+    "react-dropzone": "^14.3.8"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "tsup",
-    "build:watch": "tsup --watch",
+    "build": "tsc && copyfiles -u 1 src/**/*.css src/assets/**/* dist/",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "package": "npm version patch && npm run build && npm publish"
@@ -60,7 +49,6 @@
     "@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",
@@ -75,9 +63,7 @@
     "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/.github/workflows/build.yml

@@ -1,31 +0,0 @@
-name: Check Build on PR
-
-# Trigger the workflow when a pull request is raised against the develop branch
-on:
-  pull_request:
-    branches:
-      - develop
-
-# Define the job to run the build
-jobs:
-  check-build:
-    runs-on: ubuntu-latest
-
-    steps:
-    # Check out the code from the repository
-    - name: Checkout code
-      uses: actions/checkout@v3
-
-    # Set up Node.js environment
-    - name: Set up Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: '18'  # Specify your required Node.js version
-
-    # Install npm dependencies
-    - name: Install dependencies
-      run: npm install
-
-    # Run the build script
-    - name: Run build
-      run: npm run build

package/src/Components/Accordion/Accordion.tsx

@@ -1,59 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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/src/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.tsx

@@ -1,42 +0,0 @@
-// 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

@@ -1,80 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,34 +0,0 @@
-// 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

@@ -1,42 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,27 +0,0 @@
-// 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

@@ -1,42 +0,0 @@
-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/src/Components/Button/Button.stories.tsx

@@ -1,33 +0,0 @@
-// 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 {};