pixelize-design-library 1.0.21 → 1.0.23

package/src/Components/RadioButton/RadioButton.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { Radio as ChakraRadio, RadioGroup as ChakraRadioGroup, Box, Stack, ChakraProvider } from '@chakra-ui/react';
-import { ChakraRadioProps, ChakraRadioGroupProps } from './RadioButtonProps';
-
-const RadioButton = ({
-    label,
-    colorScheme,
-    isChecked,
-    onChange,
-    isDisabled,
-    size,
-    value,
-    defaultChecked,
-}:ChakraRadioProps) => {
-    return (
-        <ChakraProvider>
-        <ChakraRadio
-            colorScheme={colorScheme}
-            isChecked={isChecked}
-            onChange={onChange}
-            isDisabled={isDisabled}
-            size={size}
-            value={value}
-            defaultChecked={defaultChecked}
-        >
-            <Box as="span">
-                {label}
-            </Box>
-        </ChakraRadio>
-        </ChakraProvider>
-    );
-};
-
-const RadioButtonGroup = ({
-    options,
-    onChange,
-    value,
-    defaultValue,
-    isDisabled,
-    size,
-    colorScheme,
-}:ChakraRadioGroupProps) => {
-    return (
-        <ChakraProvider>
-        <ChakraRadioGroup onChange={onChange} value={value} defaultValue={defaultValue}>
-            <Stack direction="row" spacing={4}>
-                {options.map((option) => (
-                    <RadioButton
-                        key={option.value}
-                        label={option.label}
-                        value={option.value}
-                        isDisabled={isDisabled}
-                        size={size}
-                        colorScheme={colorScheme}
-                    />
-                ))}
-            </Stack>
-        </ChakraRadioGroup>
-        </ChakraProvider>
-    );
-};
-
-export { RadioButton, RadioButtonGroup };

package/src/Components/RadioButton/RadioButtonProps.tsx

@@ -1,10 +0,0 @@
-
-import { RadioProps , RadioGroupProps } from '@chakra-ui/react';
-
-export type ChakraRadioProps= Pick<RadioProps,|"size"|"colorScheme"|"isChecked"|"onChange"|"isDisabled"|"value"|"defaultChecked">&{
-    label: string;
-}
-export type ChakraRadioGroupProps = Pick<RadioGroupProps,|"size"|"colorScheme"|"isDisabled"|"defaultValue"|"value">&{
-    options: { label: string; value: string }[];
-    onChange?: (value: string) => void;
-}

package/src/Components/Select/Select.stories.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { ChakraProvider } from "@chakra-ui/react";
-import { useState } from 'react';
-import Select from './Select';
-import { chakraSelectProps } from './SelectProps';
-
-const meta: Meta<typeof Select> = {
-    title: 'Components/Input/Select',
-    component: Select,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-};
-
-export default meta;
-
-const SelectTemplate: StoryFn<chakraSelectProps> = (args) => {
-    const [value, setValue] = useState("");
-
-    const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        setValue(e.target.value);
-        if (args.onChange) {
-            args.onChange(e);
-        }
-    };
-
-    return (
-        <ChakraProvider>
-            <Select {...args} onChange={handleChange} value={value} />
-        </ChakraProvider>
-    );
-};
-
-export const Primary = SelectTemplate.bind({});
-Primary.args = {
-    placeholder: "Select an option",
-    size: "md",
-    variant: "outline",
-    icon: undefined,
-    bg: undefined,
-    borderColor: undefined,
-    color: undefined,
-    error: false,
-    isRequired: false,
-    label: 'Select Input',
-    errorMessage: "",
-    helperText: "",
-    options: [
-        { id: '1', label: 'Option 1' },
-        { id: '2', label: 'Option 2' },
-        { id: '3', label: 'Option 3' },
-    ],
-    value: "",
-    width: 500,
-};

package/src/Components/Select/Select.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { ChakraProvider, Select as ChakraSelect, FormControl, FormErrorMessage, FormHelperText, FormLabel } from "@chakra-ui/react";
-import { OptionProp, chakraSelectProps } from "./SelectProps";
-import { useCallback } from "react";
-
-export default function Select({
-    placeholder = "Select Option",
-    size = "md",
-    variant = "outline",
-    icon,
-    bg,
-    borderColor,
-    color,
-    error,
-    isRequired,
-    label,
-    errorMessage,
-    helperText,
-    options = [],
-    value = "",
-    onChange,
-    width = 500,
-}: chakraSelectProps) {
-
-    const getOptionsList = useCallback(() => {
-        if (!options.length) return <option value="">No Options</option>;
-        return options.map((option: OptionProp) => <option key={option.id} value={option.id}>{option.label}</option>);
-    }, [options]);
-
-    return (
-        <ChakraProvider>
-
-            <FormControl isRequired={isRequired} isInvalid={error} >
-                {label && <FormLabel mb="0.25rem">{label}</FormLabel>}
-
-                <ChakraSelect placeholder={placeholder} size={size} variant={variant} icon={icon} bg={bg} borderColor={borderColor} color={color} isInvalid={error} value={value} onChange={onChange} width={width}>
-                    {getOptionsList()}
-                </ChakraSelect>
-                {error && (
-                    <FormErrorMessage pl={4}>{errorMessage}</FormErrorMessage>
-                )}
-                {helperText && !error && <FormHelperText pl={4}>{helperText}</FormHelperText>}
-            </FormControl>
-        </ChakraProvider>
-    );
-}

package/src/Components/Select/SelectProps.tsx

@@ -1,15 +0,0 @@
-import { SelectProps } from "@chakra-ui/react";
-
-export type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "variant" | "icon" | "bg" | "borderColor" | "color" | "onChange" | "onBlur" | "onFocus" | "errorBorderColor" | "isDisabled" | "isReadOnly" | "isRequired" | "value"> & {
-    label?: string;
-    error?: boolean;
-    errorMessage?: string;
-    helperText?: string;
-    options: OptionProp[];
-    width?: string | number;
-}
-
-export type OptionProp = {
-    id: string | number,
-    label: string | number
-}

package/src/Components/SideBar/SideBar.tsx

@@ -1,143 +0,0 @@
-import React from 'react'
-import {
-    Flex,
-    Text,
-    IconButton,
-    Menu,
-    Link,
-    MenuButton,
-    Icon,
-    MenuList,
-    Image,
-    MenuItem,
-    ChakraProvider
-} from '@chakra-ui/react'
-import {
-    FiChevronLeft,
-    FiChevronRight,
-} from 'react-icons/fi'
-import { SidebarProps } from './SideBarProps'
-export default function Sidebar({
-    menus,
-    activeMenu,
-    handleMenuClick,
-    toggle,
-    changeToggle,
-    logo,
-    companyName
-}: SidebarProps) {
-    return (
-        <ChakraProvider>
-            <Flex
-                pos="sticky"
-                h="100vh"
-                boxShadow="0 4px 12px 0 rgba(0, 0, 0, 0.05)"
-                w={toggle ? "75px" : "200px"}
-                flexDir="column"
-                justifyContent="space-between"
-                background={"#ffffff"}
-            >
-                <Flex
-                    pl={toggle ? "22%" : "8%"}
-                    flexDir="column"
-                    w="100%"
-                    alignItems={"flex-start"}
-                    as="nav"
-                    h="100vh"
-                >
-                    <Flex
-                        mt={5}
-                        align="center"
-                    >
-                        <Image
-                            borderRadius='full'
-                            boxSize={'45px'}
-                            src={logo}
-                            alt='Company Logo'
-                        />
-                        <Text ml={4} display={toggle ? "none" : "flex"}>{companyName}</Text>
-                    </Flex>
-                    <Flex position={"absolute"} left={toggle ? "55px" : "180px"} top={"60px"} background={"#3182CE"} borderRadius={"23px"}>
-                        <IconButton
-                            background={"none"}
-                            icon={toggle ? <FiChevronRight color={"#ffffff"} /> : <FiChevronLeft color={"#ffffff"} />}
-                            _hover={{ background: "none" }}
-                            onClick={changeToggle}
-                            aria-label='Toggle Navigation'
-                        />
-                    </Flex>
-                    <Flex
-                        mt={30}
-                        flexDir="column"
-                        w="100%"
-                        alignItems={toggle ? "center" : "flex-start"}
-                        h="100vh"
-                        overflow="scroll"
-                        css={{
-
-                            '&::-webkit-scrollbar': {
-                                width: '3px',
-                            },
-                            '&::-webkit-scrollbar-track': {
-                                background: 'transparent',
-                            },
-                            '&::-webkit-scrollbar-thumb': {
-                                background: 'transparent',
-                                transition: 'background 0.5s',
-                            },
-                            '&:hover::-webkit-scrollbar-thumb': {
-                                background: '#888',
-                            },
-                        }}
-                        ml={toggle ? "-8px":"0px"}
-                    >
-                        {menus.map((menu: any) => (
-                            <Menu key={menu.title} placement="right">
-                                <Link
-                                    backgroundColor={activeMenu === menu.title ? "#3182CE" : "none"}
-                                    borderRadius={8}
-                                    _hover={{ textDecor: 'none', backgroundColor: "#3182CE", color: "#ffffff" }}
-                                    _active={{ color: "#ffffff" }}
-                                    w={"98%"}
-                                    onClick={() => handleMenuClick(menu?.title, menu?.url)}
-                                    mt={"5px"}
-                                    className='custom-link'
-                                    width={toggle ? "80%" : "90%"}
-                                >
-                                    <MenuButton w="100%" p={"13px 12px 13px 13px"}>
-                                        <Flex>
-                                            <Icon as={menu.icon} fontSize="xl" color={activeMenu === menu.title ? "#ffff" : ""} />
-                                            <Text ml={5} display={toggle ? "none" : "flex"} color={activeMenu === menu.title ? "#ffff" : ""}>{menu.title}</Text>
-                                        </Flex>
-                                    </MenuButton>
-                                </Link>
-                                {
-                                    menu.subMenu &&
-                                    <MenuList py={0}
-                                        border="none"
-                                        ml={toggle ? 3 : 6}
-                                        boxShadow="0 4px 12px 0 rgba(0, 0, 0, 0.05)"
-                                    >
-                                        <Flex
-                                            pos="absolute"
-                                            mt="calc(100px - 70px)"
-                                            ml={"-10px"}
-                                            width={0}
-                                            height={0}
-                                            borderTop="10px solid transparent"
-                                            borderBottom="10px solid transparent"
-                                            borderRight="10px solid #3182CE"
-                                        />
-                                        {menu.subMenu.map((subMenuItem: any) => (
-                                            <MenuItem key={subMenuItem.title}>{subMenuItem.title}</MenuItem>
-                                        ))}
-                                    </MenuList>
-                                }
-                            </Menu>
-                        ))}
-                    </Flex>
-                </Flex>
-            </Flex >
-        </ChakraProvider >
-    )
-}

package/src/Components/SideBar/SideBarProps.tsx

@@ -1,18 +0,0 @@
-import { IconType } from "react-icons";
-
-export type SidebarProps = {
-    menus: Menu[];
-    activeMenu: string;
-    handleMenuClick: (title: string, url: string) => void;
-    toggle: boolean;
-    changeToggle: () => void;
-    logo: string;
-    companyName: string;
-};
-
-type Menu = {
-    title: string;
-    icon: IconType;
-    url: string;
-    subMenu?: { title: string; url: string }[];
-}

package/src/Components/SideBar/Sidebar.stories.tsx

@@ -1,80 +0,0 @@
-import React, { useState } from 'react';
-import { StoryFn, Meta } from '@storybook/react/types-6-0';
-import Sidebar from './SideBar';
-import { SidebarProps } from './SideBarProps';
-import { FiBriefcase, FiCalendar, FiDollarSign, FiHome, FiSettings, FiUser } from 'react-icons/fi';
-import { fn } from '@storybook/test';
-
-export default {
-    title: 'Components/Sidebar/Sidebar',
-    component: Sidebar,
-} as Meta;
-
-const Template: StoryFn<SidebarProps> = (args) => {
-
-    const [toggle, changeToggle] = useState(true)
-    const [activeMenu, setActiveMenu] = useState("")
-
-    const handleMenuClick = (title: string, url: string) => {
-        setActiveMenu(title)
-    }
-
-    return (<Sidebar {...args} activeMenu={activeMenu} handleMenuClick={handleMenuClick} toggle={toggle} changeToggle={() => changeToggle(!toggle)} />)
-};
-
-const menus = [
-    {
-        title: "Dashboard",
-        icon: FiHome,
-        url: "dashboard"
-    },
-    {
-        title: "Calendar",
-        icon: FiCalendar,
-        url: "description"
-    },
-    {
-        title: "Clients",
-        icon: FiUser,
-        url: "description"
-    }, {
-        title: "Animals",
-        icon: FiCalendar,
-        url: "description"
-    },
-    {
-        title: "Stock's",
-        icon: FiDollarSign,
-        url: "description"
-    }, {
-        title: "Reports",
-        icon: FiBriefcase,
-        url: "description"
-    }, {
-        title: "Settings",
-        icon: FiSettings,
-        url: "description",
-        subMenu: [
-            {
-                title: "Submenu Item 1",
-                url: "Submenu item 1 description"
-            },
-            {
-                title: "Submenu Item 2",
-                url: "Submenu item 2 description"
-            }
-        ]
-    },
-];
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-    menus: menus,
-    activeMenu: '',
-    handleMenuClick: fn(),
-    toggle: false,
-    changeToggle: fn(),
-    logo: 'https://bit.ly/dan-abramov',
-    companyName: 'PIXELIZE'
-};

package/src/Components/Skeletons/Skeleton.stories.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import Skeletons from './Skeletons'; // adjust the import path as necessary
-import { ChakraProvider } from '@chakra-ui/react';
-import { SkeletonProps } from './SkeletonProps'; // adjust the import path as necessary
-
-export default {
-  title: 'Components/Skeletons/Skeletons',
-  component: Skeletons,
-  argTypes: {
-    startColor: { control: 'color' },
-    endColor: { control: 'color' },
-    height: { control: 'text' },
-    isLoaded: { control: 'boolean' },
-    bg: { control: 'color' },
-    color: { control: 'color' },
-    fadeDuration: { control: 'number' },
-    children: { control: 'text' },
-    type: { control: { type: 'select', options: ['skeleton', 'circle', 'text'] } },
-    speed: { control: 'number' },
-    size: { control: 'text' },
-    mt: { control: 'text' },
-    noOfLines: { control: 'number' },
-    spacing: { control: 'text' },
-    skeletonHeight: { control: 'text' },
-  },
-} as Meta;
-
-const Template: StoryFn<SkeletonProps> = (args) => (
-  <ChakraProvider>
-    <Skeletons {...args} />
-  </ChakraProvider>
-);
-
-export const DefaultSkeleton = Template.bind({});
-DefaultSkeleton.args = {
-  type: 'skeleton',
-  isLoaded: false,
-  height: '20px',
-  startColor: 'gray.200',
-  endColor: 'gray.400',
-  speed: 1.2,
-  fadeDuration: 0.4,
-  children: 'Loading...',
-};
-
-export const SkeletonCircle = Template.bind({});
-SkeletonCircle.args = {
-  type: 'circle',
-  isLoaded: false,
-  size: '40px',
-  speed: 1.2,
-};
-
-export const SkeletonText = Template.bind({});
-SkeletonText.args = {
-  type: 'text',
-  isLoaded: false,
-  mt: '4',
-  noOfLines: 4,
-  spacing: '4',
-  skeletonHeight: '20px',
-};

package/src/Components/Skeletons/SkeletonProps.tsx

@@ -1,23 +0,0 @@
-import {
-    SkeletonProps as ChakraSkeleton,
-    SkeletonTextProps,
-} from "@chakra-ui/react";
-
-export type SkeletonProps = Pick<
-    ChakraSkeleton,
-    | "startColor"
-    | "endColor"
-    | "height"
-    | "isLoaded"
-    | "bg"
-    | "color"
-    | "fadeDuration"
-    | "children"
-    | "speed"
-    | "size"
-    | "mt"
-    | "noOfLines"
-    | "width"
-> & {
-    type: "skeleton" | "circle" | "text";
-} & Partial<Pick<SkeletonTextProps, "spacing" | "skeletonHeight">>;

package/src/Components/Skeletons/Skeletons.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { ChakraProvider } from "@chakra-ui/react";
-import { Skeleton, SkeletonCircle, SkeletonText } from "@chakra-ui/react";
-import { SkeletonProps } from "./SkeletonProps";
-
-export default function Skeletons({
-    startColor,
-    endColor,
-    height = "20px",
-    isLoaded,
-    bg,
-    color,
-    fadeDuration,
-    children,
-    type,
-    speed,
-    size,
-    mt,
-    noOfLines,
-    spacing,
-    skeletonHeight,
-    width
-}: SkeletonProps) {
-    return (
-        <ChakraProvider>
-            {type === "skeleton" && (
-                <Skeleton
-                    height={height}
-                    isLoaded={isLoaded}
-                    bg={bg}
-                    color={color}
-                    fadeDuration={fadeDuration}
-                    startColor={startColor}
-                    endColor={endColor}
-                    speed={speed}
-                    width={width}
-                >
-                    {children}
-                </Skeleton>
-            )}
-            {type === "circle" && <SkeletonCircle size={size} speed={speed} />}
-            {type === "text" && (
-                <SkeletonText
-                    mt={mt}
-                    noOfLines={noOfLines}
-                    spacing={spacing}
-                    skeletonHeight={skeletonHeight}
-                />
-            )}
-        </ChakraProvider>
-    );
-}

package/src/Components/Table/Table.stories.tsx

@@ -1,47 +0,0 @@
-// Import React and the Table component
-import React from 'react';
-import Table from './Table';
-import { TableProps } from './TableProps';
-// Import Storybook's required modules
-import { StoryFn, Meta } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-// Define default export with component metadata
-export default {
-    title: 'Components/Table/Table',
-    component: Table,
-} as Meta;
-
-const Template: StoryFn<TableProps> = (args) => <Table {...args} />;
-
-
-export const Default = Template.bind({});
-Default.args = {
-    headers: [
-        { label: 'name', accessor_key: "name", sort: false, search: false, columnFreeze: true },
-        { label: 'email', accessor_key: "email", sort: true, search: true, columnFreeze: true },
-        { label: 'role', accessor_key: "role", sort: true, search: true },
-        { label: 'age', accessor_key: "age", sort: true, search: true },
-        { label: 'age1', accessor_key: "age1", sort: true, search: true },
-        { label: 'age2', accessor_key: "age2", sort: true, search: true },
-        { label: 'age3', accessor_key: "age3", sort: true, search: true },
-        { label: 'age4', accessor_key: "age4", sort: true, search: true },
-        { label: 'age5', accessor_key: "age5", sort: true, search: true },
-        { label: 'age6', accessor_key: "age6", sort: true, search: true },
-        { label: 'age7', accessor_key: "age7", sort: true, search: true },
-    ],
-    data: [{
-        id: 1,
-        name: `User 1`,
-        email: `user1@example.com`,
-        role: 'Developer',
-        age: 20,
-        age1: 34,
-        age2: 56,
-        age3: 66,
-        age4: 68,
-        age5: 70,
-        age6: 35,
-        age7: 24,
-    }],
-};