pixelize-design-library 0.1.0

package/src/Components/Loading/LoadingProps.tsx

@@ -0,0 +1 @@
+export type LoadingProps = { text?: string, isLoading: boolean }

package/src/Components/Modal/Modal.stories.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import Modal from './Modal';
+import { ChakraProvider, Button } from '@chakra-ui/react';
+import { ChakraModelProps } from './ModalProps';
+
+export default {
+    title: 'Components/Modal/Modal',
+    component: Modal,
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl', 'full'],
+            defaultValue: 'md',
+        },
+        isOpen: {
+            control: 'boolean',
+            defaultValue: false,
+        },
+        title: {
+            control: 'text',
+            defaultValue: 'Modal Title',
+        },
+        overlaybg: {
+            control: 'text',
+            defaultValue: 'blackAlpha.300',
+        },
+        overlaybackdropFilter: {
+            control: 'text',
+            defaultValue: 'blur(10px) hue-rotate(90deg)',
+        },
+        overlaybackdropInvert: {
+            control: 'text',
+            defaultValue: '0%',
+        },
+        overlaybackdropBlur: {
+            control: 'text',
+            defaultValue: '0px',
+        },
+        isCentered: {
+            control: 'boolean',
+            defaultValue: true,
+        },
+        blockScrollOnMount: {
+            control: 'boolean',
+            defaultValue: true,
+        },
+        closeOnOverlayClick: {
+            control: 'boolean',
+            defaultValue: true,
+        },
+        motionPreset: {
+            control: 'text',
+            defaultValue: 'scale',
+        },
+        scrollBehavior: {
+            control: 'text',
+            defaultValue: 'inside',
+        },
+        footer: {
+            control: 'text',
+            defaultValue: 'Footer Content',
+        },
+        children: {
+            control: 'text',
+            defaultValue: 'This is the body of the modal',
+        },
+    },
+} as Meta;
+
+interface StoryProps extends ChakraModelProps {
+    footer: React.ReactNode;
+}
+
+const Template: StoryFn<StoryProps> = (args) => {
+    const [isOpen, setIsOpen] = useState(args.isOpen);
+
+    const handleClose = () => setIsOpen(false);
+    const handleOpen = () => setIsOpen(true);
+
+    return (
+        <ChakraProvider>
+            <Button onClick={handleOpen}>Open Modal</Button>
+            <Modal {...args} isOpen={isOpen} onClose={handleClose} footer={<Button onClick={handleClose}>Footer Button</Button>}>
+                {args.children}
+            </Modal>
+        </ChakraProvider>
+    );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    size: 'md',
+    title: 'Modal Title',
+    overlaybg: 'blackAlpha.300',
+    overlaybackdropFilter: 'blur(10px) hue-rotate(90deg)',
+    overlaybackdropInvert: '0%',
+    overlaybackdropBlur: '0px',
+    isCentered: true,
+    blockScrollOnMount: true,
+    closeOnOverlayClick: true,
+    motionPreset: 'scale',
+    scrollBehavior: 'inside',
+    footer: <Button onClick={() => alert('Footer button clicked')}>Footer Button</Button>,
+    children: 'This is the body of the modal',
+};

package/src/Components/Modal/Modal.tsx

@@ -0,0 +1,44 @@
+import { ChakraProvider, Modal as ChakraModal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter } from "@chakra-ui/react";
+import { ChakraModelProps } from "./ModalProps";
+
+export default function Modal({
+    size,
+    isOpen = false,
+    onClose,
+    title,
+    footer,
+    overlaybg = "blackAlpha.300",
+    overlaybackdropFilter = "blur(10px) hue-rotate(90deg)",
+    overlaybackdropInvert,
+    overlaybackdropBlur,
+    isCentered,
+    finalFocusRef,
+    blockScrollOnMount,
+    initialFocusRef,
+    closeOnOverlayClick,
+    motionPreset,
+    scrollBehavior,
+    children,
+}: ChakraModelProps) {
+    if (!isOpen) return <></>;
+    return (
+        <ChakraProvider>
+            <ChakraModal isOpen={true} onClose={onClose} size={size} isCentered={isCentered} finalFocusRef={finalFocusRef} blockScrollOnMount={blockScrollOnMount} initialFocusRef={initialFocusRef} closeOnOverlayClick={closeOnOverlayClick} motionPreset={motionPreset} scrollBehavior={scrollBehavior}>
+                <ModalOverlay bg={overlaybg}
+                    backdropFilter={overlaybackdropFilter}
+                    backdropInvert={overlaybackdropInvert}
+                    backdropBlur={overlaybackdropBlur} />
+                <ModalContent>
+                    <ModalHeader>{title}</ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody>
+                        {children}
+                    </ModalBody>
+                    <ModalFooter>
+                        {footer}
+                    </ModalFooter>
+                </ModalContent>
+            </ChakraModal>
+        </ChakraProvider>
+    );
+}

package/src/Components/Modal/ModalProps.tsx

@@ -0,0 +1,12 @@
+import { ModalProps } from "@chakra-ui/react";
+
+export type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFocusRef" | "blockScrollOnMount" | "initialFocusRef" | "closeOnOverlayClick" | "isCentered" | "motionPreset" | "scrollBehavior"> & {
+    title?: string,
+    footer?: any,
+    overlaybg?: string,
+    overlaybackdropFilter?: string,
+    overlaybackdropInvert?: string,
+    overlaybackdropBlur?: string,
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full',
+    children?: any
+}

package/src/Components/NavigationBar/NavBar.stories.tsx

@@ -0,0 +1,26 @@
+// NavBar.stories.tsx
+
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
+import NavBar from './NavigationBar';
+import { NavbarProps } from './NavigationBarProps';
+
+export default {
+    title: 'Components/NavBar/NavBar',
+    component: NavBar,
+} as Meta;
+
+const Template: StoryFn<NavbarProps> = (args) => <NavBar {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    userAvathar: 'https://example.com/avatar.jpg',
+    userName: 'John Doe',
+    navMenu: [
+        { title: 'Menu 1', url: '/menu1' },
+        { title: 'Menu 2', url: '/menu2' },
+    ],
+    handleNavOnClick: (url: string) => console.log(`Navigate to ${url}`),
+    handleLogout: () => console.log('Logout'),
+    logoutText: 'Logout',
+};

package/src/Components/NavigationBar/NavigationBar.tsx

@@ -0,0 +1,55 @@
+import { Avatar, Box, Button, Center, ChakraProvider, Flex, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Stack } from "@chakra-ui/react";
+import { MenuProps, NavbarProps } from "./NavigationBarProps";
+
+export default function NavBar({ userAvathar, userName, navMenu, handleNavOnClick, handleLogout, logoutText }: NavbarProps) {
+    return (
+        <ChakraProvider>
+            <Box bg={"#ffffff"} px={4} boxShadow="0 4px 12px 0 rgba(0, 0, 0, 0.05)">
+                <Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
+                    <Box></Box>
+                    <Flex alignItems={'center'}>
+                        <Stack direction={'row'} spacing={7}>
+                            <Menu>
+                                <MenuButton
+                                    as={Button}
+                                    rounded={'full'}
+                                    variant={'link'}
+                                    cursor={'pointer'}
+                                    minW={0}>
+                                    <Avatar
+                                        size={'sm'}
+                                        src={userAvathar}
+                                    />
+                                </MenuButton>
+                                <MenuList alignItems={'center'}>
+                                    <br />
+                                    <Center>
+                                        <Avatar
+                                            size={'2xl'}
+                                            src={userAvathar}
+                                        />
+                                    </Center>
+                                    <br />
+                                    <Center>
+                                        <p>{userName}</p>
+                                    </Center>
+                                    <br />
+                                    <MenuDivider />
+                                    {navMenu?.map((menu: MenuProps) => (
+                                        <div onClick={() => handleNavOnClick(menu.url)} key={menu.title}>
+                                            <MenuItem>{menu.title}</MenuItem>
+                                        </div>
+                                    ))}
+                                    <MenuDivider />
+                                    <div onClick={handleLogout} key={"logout"}>
+                                        <MenuItem >{logoutText}</MenuItem>
+                                    </div>
+                                </MenuList>
+                            </Menu>
+                        </Stack>
+                    </Flex>
+                </Flex>
+            </Box>
+        </ChakraProvider>
+    )
+}

package/src/Components/NavigationBar/NavigationBarProps.tsx

@@ -0,0 +1,13 @@
+export type NavbarProps = {
+    userAvathar: string;
+    userName: string;
+    navMenu: MenuProps[];
+    handleNavOnClick: (url: string) => void;
+    handleLogout: () => void;
+    logoutText: string;
+};
+
+export type MenuProps = {
+    title: string;
+    url: string;
+}

package/src/Components/NumberInput/NumberInput.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import NumberInputs from './NumberInput';
+
+export default {
+  title: 'Components/NumberInputs/NumberInputs',
+  component: NumberInputs,
+} as Meta;
+
+const Template: StoryFn = (args) => <NumberInputs {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  defaultValue: 0,
+  min: 0,
+  max: 100,
+  step: 1,
+  precision: 0,
+  clampValueOnBlur: true,
+  keepWithinRange: true,
+  size: 'md',
+  maxW: 'full',
+  allowMouseWheel: true,
+  NumberIncrementStepperBg: 'blue.200',
+  NumberIncrementStepperActive: { bg: 'blue.400' },
+  NumberIncrementStepperChildren: '+',
+  NumberDecrementStepperBg: 'blue.200',
+  NumberDecrementStepperActive: { bg: 'blue.400' },
+  NumberDecrementStepperChildren: '-',
+  onChange: (value: number) => console.log(value),
+};

package/src/Components/NumberInput/NumberInput.tsx

@@ -0,0 +1,55 @@
+import {
+ ChakraProvider,
+ NumberDecrementStepper,
+ NumberIncrementStepper,
+ NumberInput as ChakraNumberInput,
+ NumberInputField,
+ NumberInputStepper,
+} from "@chakra-ui/react";
+import { NumberInputProps } from "./NumberInputProps";
+
+export default function NumberInput({
+ defaultValue,
+ min,
+ max,
+ precision,
+ step,
+ clampValueOnBlur,
+ keepWithinRange,
+ value,
+ onChange,
+ size,
+ maxW,
+ allowMouseWheel,
+ NumberIncrementStepperBg,
+ NumberIncrementStepperActive,
+ NumberIncrementStepperChildren,
+ NumberDecrementStepperBg,
+ NumberDecrementStepperChildren, 
+ NumberDecrementStepperActive
+}: NumberInputProps) {
+ return (
+  <ChakraProvider>
+   <ChakraNumberInput
+    defaultValue={defaultValue}
+    min={min}
+    max={max}
+    step={step}
+    precision={precision}
+    clampValueOnBlur={clampValueOnBlur}
+    keepWithinRange={keepWithinRange}
+    value={value}
+    onChange={onChange}
+    size={size}
+    maxW={maxW}
+    allowMouseWheel={allowMouseWheel}
+   >
+    <NumberInputField/>
+    <NumberInputStepper>
+     <NumberIncrementStepper bg={NumberIncrementStepperBg} _active={NumberIncrementStepperActive} children={NumberIncrementStepperChildren}/>
+     <NumberDecrementStepper bg={NumberDecrementStepperBg} _active={NumberDecrementStepperActive} children={NumberDecrementStepperChildren}/>
+    </NumberInputStepper>
+   </ChakraNumberInput>
+  </ChakraProvider>
+ );
+}

package/src/Components/NumberInput/NumberInputProps.tsx

@@ -0,0 +1,28 @@
+import { NumberInputProps as chakraNumbetInpurProps } from "@chakra-ui/react";
+
+export type NumberInputProps = Pick<
+ chakraNumbetInpurProps,
+ | "defaultValue"
+ | "min"
+ | "max"
+ | "precision"
+ | "step"
+ | "clampValueOnBlur"
+ | "keepWithinRange"
+ | "value"
+ | "onChange"
+ |"size"
+ |"maxW"
+ |"allowMouseWheel"
+> & {
+    NumberIncrementStepperBg?:string,
+    NumberIncrementStepperActive?:ActiveStyle,
+    NumberIncrementStepperChildren?:string,
+    NumberDecrementStepperBg?:string,
+    NumberDecrementStepperChildren?:string,
+    NumberDecrementStepperActive?:ActiveStyle,
+};
+
+export type ActiveStyle = {
+    bg: string;
+  };

package/src/Components/PinInput/PinInput.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import PinInput from './PinInput';
+import { ChakraPinInputProps } from './PinInputProps';
+
+export default {
+  title: 'Components/PinInput/PinInput',
+  component: PinInput,
+} as Meta;
+
+const Template: StoryFn<ChakraPinInputProps> = (args) => <PinInput {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  otp: false,
+  mask: false,
+  defaultValue: '',
+  placeholder: '•',
+  manageFocus: true,
+  errorBorderColor: 'red.500',
+  focusBorderColor: 'blue.500',
+  onChange: (value: string) => console.log(value),
+  onComplete: (value: string) => console.log(`Completed: ${value}`),
+  type: 'alphanumeric',
+  color: 'blue',
+  variant: 'outline',
+  pins: 3,
+};
+
+export const Masked = Template.bind({});
+Masked.args = {
+  ...Default.args,
+  mask: true,
+};
+
+export const SixPins = Template.bind({});
+SixPins.args = {
+  ...Default.args,
+  pins: 6,
+};

package/src/Components/PinInput/PinInput.tsx

@@ -0,0 +1,48 @@
+import {
+  ChakraProvider,
+  HStack,
+  PinInput,
+  PinInputField,
+  Text,
+} from "@chakra-ui/react";
+import { ChakraPinInputProps } from "./PinInputProps";
+export default function PinInputs({
+  otp,
+  mask,
+  defaultValue,
+  placeholder,
+  manageFocus,
+  errorBorderColor,
+  focusBorderColor,
+  onChange,
+  onComplete,
+  type,
+  color,
+  variant,
+  pins = 3,
+  label
+}: ChakraPinInputProps) {
+  return (
+    <ChakraProvider>
+      {label && <Text fontWeight="bold" marginBottom={"8px"}>{label}</Text>}
+      <HStack>
+        <PinInput otp={otp}
+          mask={mask}
+          defaultValue={defaultValue}
+          placeholder={placeholder}
+          manageFocus={manageFocus}
+          errorBorderColor={errorBorderColor}
+          focusBorderColor={focusBorderColor}
+          onChange={onChange}
+          onComplete={onComplete}
+          type={type}
+          colorScheme={color}
+          variant={variant}>
+          {Array.from({ length: pins }).map((_, index) => (
+            <PinInputField key={index} />
+          ))}
+        </PinInput>
+      </HStack>
+    </ChakraProvider>
+  );
+}

package/src/Components/PinInput/PinInputProps.tsx

@@ -0,0 +1,33 @@
+import { PinInputProps } from "@chakra-ui/react";
+
+export type ChakraPinInputProps = Pick<
+  PinInputProps,
+  | "otp"
+  | "mask"
+  | "defaultValue"
+  | "placeholder"
+  | "manageFocus"
+  | "errorBorderColor"
+  | "focusBorderColor"
+  | "onChange"
+  | "onComplete"
+> & {
+  type?: "alphanumeric" | "number";
+  size?: "xs" | "sm" | "md" | "lg";
+  variant?: "flushed" | "outline" | "filled" | "unstyled";
+  color?:
+  | "gray"
+  | "red"
+  | "orange"
+  | "yellow"
+  | "green"
+  | "teal"
+  | "blue"
+  | "cyan"
+  | "purple"
+  | "pink"
+  | "whiteAlpha"
+  | "blackAlpha";
+  pins: number;
+  label?: string;
+};

package/src/Components/ProfileCard/ProfileCard.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
+import ProfileCard from './ProfileCard';
+import { ProfileCardProps } from './ProfileCardProps';
+
+export default {
+    title: 'Components/ProfileCard/ProfileCard',
+    component: ProfileCard,
+} as Meta;
+
+const Template: StoryFn<ProfileCardProps> = (args) => <ProfileCard {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    key: '1',
+    maxW: 'sm',
+    align: 'center',
+    variant: 'filled',
+    direction: 'column',
+    justify: 'center',
+    header: 'Header',
+    footer: 'Footer',
+    children: 'Content',
+    size: 'md',
+    color: 'teal',
+    overflow: 'hidden',
+    dividercolor: 'gray',
+    dividersize: 'md',
+    dividervariant: 'solid',
+};

package/src/Components/ProfileCard/ProfileCard.tsx

@@ -0,0 +1,58 @@
+import {
+    Card as ChakraCard,
+    CardBody,
+    CardFooter,
+    CardHeader,
+    ChakraProvider,
+    Divider,
+    Box,
+    Text,
+    SimpleGrid,
+} from "@chakra-ui/react";
+import { ProfileCardProps } from "./ProfileCardProps";
+
+export default function ProfileCard({
+    key,
+    maxW,
+    align,
+    variant,
+    direction,
+    justify,
+    header,
+    footer,
+    children,
+    size,
+    color,
+    overflow,
+    dividercolor,
+    dividersize,
+    dividervariant,
+}: ProfileCardProps) {
+    return (
+        <ChakraProvider>
+            <ChakraCard
+                key={key}
+                maxW={maxW}
+                align={align}
+                variant={variant}
+                direction={direction}
+                justify={justify}
+                size={size}
+                overflow={overflow}
+                colorScheme={color}
+                mr={10}
+            >
+                <CardHeader >{header}</CardHeader>
+                <Divider
+                    colorScheme={dividercolor}
+                    size={dividersize}
+                    variant={dividervariant}
+                />
+                <CardBody>
+                    {children}
+                </CardBody>
+                <CardFooter>{footer}</CardFooter>
+            </ChakraCard>
+        </ChakraProvider>
+    );
+}

package/src/Components/ProfileCard/ProfileCardProps.tsx

@@ -0,0 +1,41 @@
+import { CardProps } from "@chakra-ui/react";
+
+export type ProfileCardProps = Pick<
+ CardProps,
+ "direction" | "maxW" | "align" | "justify" | "overflow"
+> & {
+ header?: React.ReactNode;
+ footer?: React.ReactNode;
+ children: React.ReactNode;
+ variant?: "elevated" | "outlein" | "filled" | "unstyled";
+ size?: "sm" | "md" | "lg";
+ color?:
+  | "whiteAlpha"
+  | "blackAlpha"
+  | "gray"
+  | "red"
+  | "orange"
+  | "yellow"
+  | "green"
+  | "teal"
+  | "blue"
+  | "cyan"
+  | "purple"
+  | "pink";
+ key?: string;
+ dividercolor?:
+  | "whiteAlpha"
+  | "blackAlpha"
+  | "gray"
+  | "red"
+  | "orange"
+  | "yellow"
+  | "green"
+  | "teal"
+  | "blue"
+  | "cyan"
+  | "purple"
+  | "pink";
+ dividersize?: string;
+ dividervariant?: "solid" | "dashed";
+};

package/src/Components/ProfilePhotoViewer/ProfilePhotoViewer.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import ProfilePhotoViewer from './ProfilePhotoViewer';
+import { ProfilePhotoViewerProps } from './ProfilePhotoViewerProps';
+
+export default {
+    title: 'Components/ProfilePhotoViewer/ProfilePhotoViewer',
+    component: ProfilePhotoViewer,
+} as Meta;
+
+const Template: StoryFn<ProfilePhotoViewerProps> = (args) => <ProfilePhotoViewer {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    photoUrl: 'https://via.placeholder.com/150',
+    onPhotoChange: (file: File) => console.log(file.name),
+    imageWidth: "100px",
+    imageAlt: "Profile Photo",
+    imageObjectFit: "cover",
+    imageBorderRadius: "full",
+    editIconSize: "sm",
+    editIconPositionRight: "5px",
+    editIconPositionBottom: "5px",
+    isRound: true,
+};