pixelize-design-library 1.0.21 → 1.0.22

package/src/Components/Input/TextInput.tsx

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

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

@@ -1,49 +0,0 @@
-import React from 'react';
-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

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

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

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

@@ -1,38 +0,0 @@
-import React from 'react';
-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>
-    )
-}

package/src/Components/Loading/LoadingProps.tsx

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

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

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

@@ -1,45 +0,0 @@
-import React from 'react';
-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

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

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

@@ -1,56 +0,0 @@
-import React from 'react';
-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

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

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

@@ -1,56 +0,0 @@
-import React from 'react';
-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

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