pixelize-design-library 0.1.0

package/src/Components/ProfilePhotoViewer/ProfilePhotoViewer.tsx

@@ -0,0 +1,68 @@
+import { Box, Image, IconButton, Input, ChakraProvider } from "@chakra-ui/react";
+import { ChangeEvent, useRef, useState } from "react";
+import { EditIcon } from "@chakra-ui/icons"; // Ensure you have @chakra-ui/icons installed
+import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
+
+export default function ProfilePhotoViewer({
+    photoUrl,
+    onPhotoChange,
+    imageWidth = "100px",
+    imageAlt = "Profile Photo",
+    imageObjectFit = "cover",
+    imageBorderRadius = "full",
+    editIconSize = "sm",
+    editIconPositionRight = "5px",
+    editIconPositionBottom = "5px",
+    isRound = true,
+    boxStyle
+}: ProfilePhotoViewerProps) {
+    const [photo, setPhoto] = useState<string>(photoUrl);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const handlePhotoChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = () => {
+                const photoUrl = reader.result as string;
+                setPhoto(photoUrl);
+                onPhotoChange(file);
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+    const handleClick = () => {
+        fileInputRef.current?.click();
+    };
+    return (
+        <ChakraProvider>
+            <Box position="relative" display="inline-block" style={boxStyle}>
+                <Image
+                    src={photo}
+                    alt={imageAlt}
+                    boxSize={imageWidth}
+                    objectFit={imageObjectFit}
+                    borderRadius={imageBorderRadius}
+
+                />
+                <IconButton
+                    icon={<EditIcon />}
+                    isRound={isRound}
+                    size={editIconSize}
+                    position="absolute"
+                    right={editIconPositionRight}
+                    bottom={editIconPositionBottom}
+                    onClick={handleClick}
+                    aria-label="Edit photo"
+                />
+                <Input
+                    type="file"
+                    accept="image/*"
+                    onChange={handlePhotoChange}
+                    hidden
+                    ref={fileInputRef}
+                />
+            </Box>
+        </ChakraProvider>
+    );
+}

package/src/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.tsx

@@ -0,0 +1,14 @@
+
+export type ProfilePhotoViewerProps = {
+    photoUrl: string,
+    onPhotoChange: (photoUrl: File) => void,
+    imageWidth?: string,
+    imageAlt?: string,
+    imageObjectFit?: "cover" | "contain" | "fill" | "none" | "scale-down",
+    imageBorderRadius?: string,
+    editIconSize?: string,
+    editIconPositionRight?: string,
+    editIconPositionBottom?: string,
+    isRound?: boolean,
+    boxStyle?: React.CSSProperties
+}

package/src/Components/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { ChakraProvider } from '@chakra-ui/react';
+import ProgressBar from './ProgressBar'; // Adjust the import path and component type if needed
+import { ProgressBarProps } from "./ProgressBarProps";
+
+export default {
+  title: 'Components/ProgressBar/ProgressBar',
+  component: ProgressBar,
+  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' 
+      },
+    height: { control: { type: 'text' } }, 
+    value: { control: { type: 'range', min: 0, max: 100, step: 1 } }, 
+    max: { control: { type: 'number' } }, 
+    min: { control: { type: 'number' } }, 
+  },
+} as Meta;
+
+const Template: StoryFn<ProgressBarProps> = (args) => (
+  <ChakraProvider>
+    <ProgressBar {...args} />
+  </ChakraProvider>
+);
+
+// Default Story
+export const Default = Template.bind({});
+Default.args = {
+  size: 'md', // Provide appropriate size
+  isIndeterminate: false, // Provide appropriate value
+  color: 'blue', // Provide appropriate color scheme
+  hasStripe: true, // Provide appropriate value
+  height: '12px', // Provide appropriate height
+  value: 50, // Provide appropriate value
+  isAnimated: true, // Provide appropriate value
+  max: 100, // Provide appropriate value
+  min: 0, // Provide appropriate value
+  variant: 'solid', // Provide appropriate variant
+};

package/src/Components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,32 @@
+import { ChakraProvider, Progress } from "@chakra-ui/react";
+import { ProgressBarProps } from "./ProgressBarProps";
+
+export default function ProgressBar({
+ size,
+ isIndeterminate,
+ color,
+ hasStripe,
+ height,
+ value,
+ isAnimated,
+ max,
+ min,
+ variant,
+}: ProgressBarProps) {
+ return (
+  <ChakraProvider>
+   <Progress
+    size={size}
+    isIndeterminate={isIndeterminate}
+    colorScheme={color}
+    hasStripe={hasStripe}
+    height={height}
+    value={value}
+    isAnimated={isAnimated}
+    max={max}
+    min={min}
+    variant={variant}
+   />
+  </ChakraProvider>
+ );
+}

package/src/Components/ProgressBar/ProgressBarProps.tsx

@@ -0,0 +1,7 @@
+import { ProgressProps } from "@chakra-ui/react";
+
+export type ProgressBarProps =Pick<ProgressProps,"size"|"isIndeterminate"|"value"|"height"|"hasStripe"|"isAnimated"|"max"|"min">&{
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha",
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled",
+    size?: "lg" | "md" | "sm" | "xs",
+}

package/src/Components/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { ChakraProvider } from '@chakra-ui/react';
+import { RadioButton, RadioButtonGroup } from './RadioButton';
+import { ChakraRadioProps, ChakraRadioGroupProps } from './RadioButtonProps';
+
+export default {
+  title: 'Components/RadioButton/RadioButton',
+  component: RadioButton,
+  decorators: [(Story:any) => <ChakraProvider><Story /></ChakraProvider>],
+} as Meta<typeof RadioButton>;
+
+const RadioButtonTemplate: StoryFn<typeof RadioButton> = (args: ChakraRadioProps) => <RadioButton {...args} />;
+
+export const SingleRadioButton = RadioButtonTemplate.bind({});
+SingleRadioButton.args = {
+  label: 'Option 1',
+  value: '1',
+  colorScheme: 'blue',
+  size: 'md',
+};
+
+const RadioButtonGroupTemplate: StoryFn<typeof RadioButtonGroup> = (args: ChakraRadioGroupProps) => {
+  const [selectedValue, setSelectedValue] = useState<string>(args.value as string);
+
+  const handleChange = (value: string) => {
+    setSelectedValue(value);
+    if (args.onChange) {
+      args.onChange(value);
+    }
+  };
+
+  return <RadioButtonGroup {...args} value={selectedValue} onChange={handleChange} />;
+};
+
+export const RadioButtonGroupStory = RadioButtonGroupTemplate.bind({});
+RadioButtonGroupStory.args = {
+  options: [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3' },
+  ],
+  value: '1',
+  colorScheme: 'blue',
+  size: 'md',
+};

package/src/Components/RadioButton/RadioButton.tsx

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

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

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

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

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

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

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

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