pixelize-design-library 0.1.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,44 @@
+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)
+};

package/src/Components/Input/TextInput.tsx

@@ -0,0 +1,70 @@
+import {
+    ChakraProvider,
+    FormControl,
+    FormErrorMessage,
+    FormHelperText,
+    FormLabel,
+    Input,
+    InputGroup,
+    InputRightElement,
+} from "@chakra-ui/react";
+import { TextInputProps } from "./TextInputProps";
+import React from "react";
+
+export default function TextInput({
+    label,
+    type = "text",
+    id,
+    name,
+    onChange,
+    onBlur,
+    onFocus,
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
+    value,
+    placeholder = "Placeholder",
+    width = "250px",
+    error,
+    errorMessage,
+    helperText,
+    onRightIconclick,
+    inputRightIcon,
+    inputGroupStyle,
+    inputStyle,
+}: TextInputProps) {
+    return (
+        <ChakraProvider>
+            <FormControl isRequired={isRequired} isInvalid={error}>
+                {label && <FormLabel mb="0.25rem">{label}</FormLabel>}
+                <InputGroup width={width} style={inputGroupStyle}>
+                    <Input
+                        type={type}
+                        placeholder={placeholder}
+                        onChange={onChange}
+                        onBlur={onBlur}
+                        onFocus={onFocus}
+                        value={value}
+                        errorBorderColor={error ? "crimson" : ""}
+                        isDisabled={isDisabled}
+                        isReadOnly={isReadOnly}
+                        id={id}
+                        name={name}
+                        style={inputStyle}
+                    />
+                    {inputRightIcon && (
+                        <InputRightElement
+                            children={inputRightIcon}
+                            onClick={onRightIconclick}
+                        />
+                    )}
+                </InputGroup>
+                {/* <Input type={type} placeholder={placeholder} onChange={onChange} onBlur={onBlur} onFocus={onFocus} value={value} width={width} errorBorderColor={error ? "crimson" : ""} isDisabled={isDisabled} isReadOnly={isReadOnly} /> */}
+                {error && <FormErrorMessage pl={4}>{errorMessage}</FormErrorMessage>}
+                {helperText && !error && (
+                    <FormHelperText pl={4}>{helperText}</FormHelperText>
+                )}
+            </FormControl>
+        </ChakraProvider>
+    );
+}

package/src/Components/Input/TextInputProps.tsx

@@ -0,0 +1,27 @@
+import { InputProps } from "@chakra-ui/react";
+
+export type TextInputProps = Pick<
+    InputProps,
+    | "value"
+    | "type"
+    | "onChange"
+    | "placeholder"
+    | "onBlur"
+    | "onFocus"
+    | "isDisabled"
+    | "isRequired"
+    | "isReadOnly"
+    | "width"
+    | "errorBorderColor"
+> & {
+    label?: string;
+    id?: string;
+    name?: string;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    onRightIconclick?: () => void;
+    inputRightIcon?: JSX.Element | string;
+    inputStyle?: {}
+    inputGroupStyle?: {}
+};

package/src/Components/InputTextArea/InputTextArea.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react/*";
+import { InputTextAreaProps } from "./InputTextAreaProps";
+import InputTextArea from "./InputTextArea";
+import { useState } from "react";
+
+const meta: Meta<typeof InputTextArea> = {
+    title: "Components/InputTextArea/InputTextArea",
+    component: InputTextArea,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const TextAreaTemplate = (args: InputTextAreaProps) => {
+    const [value, setValue] = useState("");
+    const handleOnChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setValue(e.target.value);
+    }
+    return <InputTextArea {...args} onChange={handleOnChange} value={value} />
+};
+
+export const Primary: Story = {
+    args: {
+        label: "hello",
+        helperText: 'Hello',
+        errorMessage: 'Required',
+        error: true,
+        rows: 5,
+        onChange: () => { },
+        value: "",
+        placeholder: "Placeholder",
+        width: "100%",
+        isDisabled: false,
+        isReadOnly: false,
+        isRequired: false,
+        resize: "vertical",
+        size: "md",
+        variant: "outline",
+        focusBorderColor: "blue.500",
+        errorBorderColor: "red.500",
+
+
+    }, render: (args) => TextAreaTemplate(args)
+}

package/src/Components/InputTextArea/InputTextArea.tsx

@@ -0,0 +1,36 @@
+import { ChakraProvider, FormControl, FormErrorMessage, FormHelperText, FormLabel, Textarea } from '@chakra-ui/react'
+import React from 'react'
+import { InputTextAreaProps } from './InputTextAreaProps'
+
+export default function InputTextArea({
+    label,
+    placeholder,
+    value,
+    onChange,
+    size = "md",
+    resize = "both",
+    width = 500,
+    isDisabled,
+    errorBorderColor,
+    focusBorderColor,
+    isReadOnly,
+    isRequired = false,
+    error,
+    errorMessage,
+    helperText,
+    rows,
+    height
+}: InputTextAreaProps) {
+    return (
+        <ChakraProvider>
+            <FormControl isRequired={isRequired} isInvalid={error} >
+                {label && <FormLabel mb="0.25rem">{label}</FormLabel>}
+                <Textarea placeholder={placeholder} value={value} onChange={onChange} size={size} resize={resize} isDisabled={isDisabled} errorBorderColor={errorBorderColor} focusBorderColor={focusBorderColor} isReadOnly={isReadOnly} isInvalid={error} width={width} rows={rows} height={height} />
+                {error && (
+                    <FormErrorMessage pl={4}>{errorMessage}</FormErrorMessage>
+                )}
+                {helperText && !error && <FormHelperText pl={4}>{helperText}</FormHelperText>}
+            </FormControl>
+        </ChakraProvider>
+    )
+}

package/src/Components/InputTextArea/InputTextAreaProps.tsx

@@ -0,0 +1,11 @@
+import { TextareaProps } from "@chakra-ui/react";
+
+export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "onChange" | "size" | "resize" | "isDisabled" | "errorBorderColor" | "focusBorderColor" | "isReadOnly" | "isRequired" | "variant"> & {
+    label?: string;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    width?: string | number;
+    rows?: number;
+    height?: string | number;
+}

package/src/Components/Loading/Loading.stories.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
+import { Button } from "@chakra-ui/react";
+import Loading from './Loading';
+import { LoadingProps } from './LoadingProps';
+
+export default {
+    title: 'Components/Loading/Loading',
+    component: Loading,
+} as Meta;
+
+const Template: StoryFn<LoadingProps> = (args) => {
+    const [isLoading, setIsLoading] = useState(false);
+    return (
+        <div>
+            <Button onClick={() => setIsLoading(!isLoading)}>Toggle Loading</Button>
+            <Loading {...args} isLoading={isLoading} />
+        </div>
+    );
+};
+
+export const Interactive = Template.bind({});
+Interactive.args = {
+    text: 'Loading...',
+};

package/src/Components/Loading/Loading.tsx

@@ -0,0 +1,37 @@
+import { Box, Center, ChakraProvider, Spinner, Text } from "@chakra-ui/react";
+import { LoadingProps } from "./LoadingProps";
+
+export default function Loading({ text, isLoading }: LoadingProps) {
+    if (!isLoading) {
+        return null;
+    }
+    return (
+        <ChakraProvider>
+            <Box
+                position="fixed"
+                top="0"
+                right="0"
+                bottom="0"
+                left="0"
+                backgroundColor="rgba(0, 0, 0, 0.4)"
+                backdropFilter="blur(4px)"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                flexDirection="column"
+                zIndex="9999"
+            >
+                <Center height="100vh">
+                    <Spinner
+                        thickness="4px"
+                        speed="0.65s"
+                        emptyColor="gray.200"
+                        color="blue.500"
+                        size="xl"
+                    />
+                    <Text mt="2" ml={"5"}>{text}</Text>
+                </Center>
+            </Box>
+        </ChakraProvider>
+    )
+}