pixelize-design-library 1.0.20 → 1.0.22

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "private": false,
-  "main": "dist/index.ts",
+  "main": "dist/index.js",
   "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "dependencies": {
     "@babel/core": "^7.24.5",
     "@chakra-ui/icons": "^2.1.1",

package/src/App.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import Layout from './Layout';
-function App() {
-  return (
-    <div className="App">
-      <Layout />
-    </div >
-  );
-}
-export default App;

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

@@ -1,39 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import ApexBarChart from './ApexBarChart';
-import { ApexBarChartProps } from './ApexBarChartProps';
-
-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.

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

@@ -1,80 +0,0 @@
-import React from "react";
-import ReactApexChart from "react-apexcharts";
-import { ApexOptions } from "apexcharts";
-import { ApexBarChartProps } from "./ApexBarChartProps";
-
-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,20 +0,0 @@
-import { ApexOptions } from "apexcharts";
-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,33 +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.

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

@@ -1,43 +0,0 @@
-import React from 'react';
-import { ApexOptions } from "apexcharts";
-import ReactApexChart from "react-apexcharts";
-import { 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,17 +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
-}

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

@@ -1,26 +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' },
-    ],
-};

package/src/Components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, ChakraProvider } from "@chakra-ui/react";
-import { BreadcrumbsProps } from "./BreadcrumbsProps";
-
-export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items }: BreadcrumbsProps) {
-    return (
-        <ChakraProvider>
-            <Breadcrumb spacing={spacing} separator={separator} fontWeight={fontWeight} fontSize={fontSize}>
-                {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>
-        </ChakraProvider>
-    );
-}

package/src/Components/Breadcrumbs/BreadcrumbsProps.tsx

@@ -1,12 +0,0 @@
-import { BreadcrumbProps } from "@chakra-ui/react";
-
-export type BreadcrumbsProps = Pick<BreadcrumbProps, "spacing" | "separator" | "fontWeight" | "fontSize"> & {
-    isCurrentPage?: boolean;
-    isLastChild?: boolean;
-    handleClick: (path: string) => void;
-    items: BreadcrumbItem[];
-};
-export type BreadcrumbItem = {
-    path: string;
-    label: string;
-};

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

@@ -1,32 +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()
-    },
-};

package/src/Components/Button/Button.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Button as ChakraButton, ChakraProvider, } from '@chakra-ui/react';
-import { ButtonProps } from './ButtonProps';
-
-export default function Button({
-    label,
-    width = "120px",
-    onClick,
-    color,
-    variant,
-    leftIcon,
-    rightIcon,
-    size,
-    isDisabled = false,
-    isLoading = false,
-    loadingText = "Loading",
-    type
-}: ButtonProps) {
-    return (
-        <ChakraProvider>
-            <ChakraButton type={type} onClick={onClick} width={width} colorScheme={color} variant={variant} size={size} isLoading={isLoading} isDisabled={isDisabled} loadingText={loadingText} leftIcon={leftIcon} rightIcon={rightIcon} >
-                {label}
-            </ChakraButton>
-        </ChakraProvider>
-    );
-}

package/src/Components/Button/ButtonProps.tsx

@@ -1,10 +0,0 @@
-import { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
-
-export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "colorScheme" | "spinner"> & {
-    label?: string,
-    width?: string | number,
-    size?: "lg" | "md" | "sm" | "xs",
-    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled",
-    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha",
-    type?: "button" | "submit" | "reset",
-}

package/src/Components/ButtonGroupIcon/ButtonGoupIconProps.tsx

@@ -1,14 +0,0 @@
-import { ReactElement } from "react";
-
-export type ButtonGroupIconProps = {
-    leftIcon?: ReactElement,
-    rightIcon?: ReactElement,
-    onLeftIconClick?: () => void;
-    onRightIconClick?: () => void;
-    buttonText: string,
-    onButtonClick?: () => void,
-    onButtongroupClick?: () => void,
-    size?: "lg" | "md" | "sm" | "xs",
-    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled",
-    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha",
-}

package/src/Components/ButtonGroupIcon/ButtonGroupIcon.stories.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import ButtonGroupIcon  from './ButtonGroupIcon'; // Adjust the import path and component type if needed
-import {ButtonGroupIconProps} from './ButtonGoupIconProps';
-import { FiHome } from 'react-icons/fi';
-
-export default {
-  title: 'Components/ButtonGroupIcon/ButtonGroupIcon',
-  component: ButtonGroupIcon,
-  argTypes: {
-    size: { control: { type: 'select', options: ['sm', 'md', 'lg'] } },
-    variant: {
-        control: { type: 'select', options: ["solid","outline","ghost","link"] },
-        defaultValue: 'solid' 
-      },
-      color: {
-        control: { type: 'select', options: ["gray" ,"red" ,"orange" ,"yellow" ,"green" ,"teal" ,"blue" ,"cyan" ,"purple" ,"pink" ,"whiteAlpha" ,"blackAlpha"] },
-        defaultValue: 'blue' 
-      },
-  },
-} as Meta;
-
-const Template: StoryFn<ButtonGroupIconProps> = (args) => <ButtonGroupIcon {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  leftIcon: <FiHome/>, 
-  rightIcon: <FiHome />, 
-  onLeftIconClick: () => console.log('Left icon clicked'), 
-  onRightIconClick: () => console.log('Right icon clicked'), 
-  buttonText: 'Button Text', 
-  onButtonClick: () => console.log('Button clicked'), 
-  onButtongroupClick: () => console.log('Button group clicked'), 
-  size: 'md',
-  variant: 'solid', 
-  color: 'blue',
-};

package/src/Components/ButtonGroupIcon/ButtonGroupIcon.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Button, ButtonGroup, ChakraProvider, IconButton } from "@chakra-ui/react";
-import { ButtonGroupIconProps } from "./ButtonGoupIconProps";
-
-export default function ButtonGroupIcon({
-    leftIcon,
-    rightIcon,
-    onLeftIconClick,
-    onRightIconClick,
-    buttonText,
-    onButtonClick,
-    onButtongroupClick,
-    size,
-    variant,
-    color
-}: ButtonGroupIconProps) {
-    return (
-        <ChakraProvider>
-            <ButtonGroup size={size} isAttached variant={variant} onClick={onButtongroupClick} colorScheme={color}>
-                {leftIcon && <IconButton aria-label='Left icon button' icon={leftIcon} onClick={onLeftIconClick} />}
-                <Button onClick={onButtonClick}>{buttonText}</Button>
-                {rightIcon && <IconButton aria-label='Right icon button' icon={rightIcon} onClick={onRightIconClick} />}
-            </ButtonGroup>
-        </ChakraProvider>
-    )
-}

package/src/Components/Checkbox/Checkbox.stories.tsx

@@ -1,45 +0,0 @@
-import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import CheckBox from './Checkbox';
-import { fn } from '@storybook/test';
-import { CheckboxProps } from './CheckboxProps';
-
-const meta: Meta<typeof CheckBox> = {
-    title: 'Components/CheckBox/CheckBox',
-    component: CheckBox,
-
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs']
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const CheckBoxTemplate = (args: CheckboxProps) => {
-    const [check, setCheck] = useState(true);
-    const handleCheck = (e: any) => {
-        setCheck(!check);
-    }
-    return <CheckBox {...args} onChange={handleCheck} isChecked={check} />
-}
-
-export const Check_box: Story = {
-    args: {
-        label: 'Checkbox',
-        spacing: 6,
-        isInvalid: false,
-        color: 'blue',
-        iconColor: 'white',
-        iconSize: '1em',
-        isChecked: true,
-        isIndeterminate: false,
-        isDisabled: false,
-        size: 'md',
-        value: 'checkbox',
-        defaultChecked: false,
-        onChange: fn()
-    },
-    render: (args) => CheckBoxTemplate(args)
-};

package/src/Components/Checkbox/Checkbox.tsx

@@ -1,29 +0,0 @@
-import React, { FC } from 'react';
-import { Checkbox as ChakraCheckbox, ChakraProvider, } from '@chakra-ui/react';
-import { CheckboxProps } from './CheckboxProps';
-
-const CheckBox: FC<CheckboxProps> = ({
-    label,
-    spacing,
-    isInvalid,
-    color,
-    iconColor,
-    iconSize,
-    isChecked,
-    isIndeterminate,
-    onChange,
-    isDisabled,
-    size,
-    value,
-    defaultChecked
-}) => {
-    return (
-        <ChakraProvider>
-            <ChakraCheckbox spacing={spacing} isInvalid={isInvalid} colorScheme={color} iconColor={iconColor} iconSize={iconSize} isChecked={isChecked} isIndeterminate={isIndeterminate} onChange={onChange} isDisabled={isDisabled} size={size} value={value} defaultChecked={defaultChecked}>
-                {label}
-            </ChakraCheckbox>
-        </ChakraProvider>
-    );
-}
-
-export default CheckBox;

package/src/Components/Checkbox/CheckboxProps.tsx

@@ -1,9 +0,0 @@
-import { CheckboxProps as ChakraButtonProps } from "@chakra-ui/react";
-
-export type CheckboxProps = Pick<ChakraButtonProps, 'spacing' | 'isInvalid' | 'size' | 'iconColor' | 'iconSize' | 'isChecked' | 'isIndeterminate' | 'onChange' | 'isDisabled' | 'value' | 'defaultChecked'> & {
-    label?: string;
-    width?: string | number;
-    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
-    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
-    size?: "sm" | "md" | "lg";
-}

package/src/Components/Input/TextInput.stories.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import { TextInputProps } from './TextInputProps';
-import TextInput from './TextInput';
-import { useState } from 'react';
-
-const meta: Meta<typeof TextInput> = {
-    title: 'Components/Input/TextInput',
-    component: TextInput,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const TextInputTemplate = (args: TextInputProps) => {
-    const [value, setValue] = useState("");
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setValue(e.target.value);
-    }
-    return <TextInput {...args} onChange={handleChange} value={value} />
-};
-
-export const Primary: Story = {
-    args: {
-        label: 'Button',
-        onChange: fn(),
-        onBlur: fn(),
-        onFocus: fn(),
-        isDisabled: false,
-        isReadOnly: false,
-        isRequired: false,
-        value: "",
-        placeholder: "Placeholder",
-        width: 500,
-        error: true,
-        errorMessage: "jhkjhkjh",
-        helperText: ""
-    },
-    render: (args) => TextInputTemplate(args)
-};