pixelize-design-library 1.0.21 → 1.0.22

package/src/Components/ToolTip/ToolTip.stories.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import ToolTip from './ToolTip';
-import { ToolTipProps } from "./ToolTipProps";
-import { StoryFn, Meta } from '@storybook/react';
-import { Box } from '@chakra-ui/react';
-
-export default {
-    title: 'Components/ToolTip/ToolTip',
-    component: ToolTip,
-} as Meta;
-
-
-const Template: StoryFn<ToolTipProps> = (args) => (
-    <Box textAlign="center" fontSize="xl">
-        <ToolTip {...args}>
-            Hover me
-        </ToolTip>
-    </Box>
-);
-
-
-export const Default = Template.bind({});
-Default.args = {
-    label: 'Default Tooltip',
-    placement: 'top',
-    hasArrow: true,
-};
-
-export const Customized = Template.bind({});
-Customized.args = {
-    label: 'Customized Tooltip',
-    placement: 'bottom',
-    hasArrow: true,
-    fontSize: 'md',
-    bg: 'purple.500',
-    color: 'white',
-    openDelay: 500,
-    closeDelay: 200,
-};

package/src/Components/ToolTip/ToolTip.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import { ChakraProvider, Tooltip as ChakraTooltip } from "@chakra-ui/react";
-import { ToolTipProps } from "./ToolTipProps";
-
-export default function ToolTip({
-    placement,
-    label,
-    children,
-    hasArrow,
-    fontSize,
-    bg,
-    color,
-    isDisabled,
-    isOpen,
-    defaultIsOpen,
-    openDelay,
-    closeDelay,
-    arrowSize,
-    closeOnClick,
-    size,
-    width,
-    height,
-    arrowPadding,
-    arrowShadowColor,
-    direction,
-    gutter,
-    onClose,
-    modifiers,
-    closeOnPointerDown
-}: ToolTipProps) {
-    return (
-        <ChakraProvider>
-            <ChakraTooltip
-                label={label}
-                placement={placement}
-                hasArrow={hasArrow}
-                fontSize={fontSize}
-                bg={bg}
-                color={color}
-                isDisabled={isDisabled}
-                isOpen={isOpen}
-                defaultIsOpen={defaultIsOpen}
-                openDelay={openDelay}
-                closeDelay={closeDelay}
-                arrowSize={arrowSize}
-                closeOnClick={closeOnClick}
-                size={size}
-                width={width}
-                height={height}
-                arrowPadding={arrowPadding}
-                arrowShadowColor={arrowShadowColor}
-                direction={direction}
-                gutter={gutter}
-                onClose={onClose}
-                modifiers={modifiers}
-                closeOnPointerDown={closeOnPointerDown}
-            >
-                {children}
-            </ChakraTooltip>
-        </ChakraProvider>
-    );
-}

package/src/Components/ToolTip/ToolTipProps.tsx

@@ -1,45 +0,0 @@
-import { TooltipProps as ChakraTooltip } from "@chakra-ui/react";
-export type ToolTipProps = Pick<
-    ChakraTooltip,
-    | "placement"
-    | "label"
-    | "hasArrow"
-    | "fontSize"
-    | "bg"
-    | "color"
-    | "isDisabled"
-    | "isOpen"
-    | "defaultIsOpen"
-    | "openDelay"
-    | "closeDelay"
-    | "arrowSize"
-    | "closeOnClick"
-    | "size"
-    | "width"
-    | "height"
-    | "arrowPadding"
-    | "arrowShadowColor"
-    | "direction"
-    | "gutter"
-    | "onClose"
-    | "modifiers"
-    | "closeOnPointerDown"
-> & {
-    children: React.ReactNode;
-    placement:
-    | "auto"
-    | "auto-start"
-    | "auto-end"
-    | "top"
-    | "top-start"
-    | "top-end"
-    | "right"
-    | "right-start"
-    | "right-end"
-    | "bottom"
-    | "bottom-start"
-    | "bottom-end"
-    | "left"
-    | "left-start"
-    | "left-end";
-};

package/src/Layout.tsx

@@ -1,499 +0,0 @@
-import {
-    Box,
-    Flex,
-    Heading,
-    Text,
-    Button as ChakraButton,
-    Stack,
-    Skeleton,
-} from "@chakra-ui/react";
-import React, { useEffect, useState } from "react";
-import Button from "./Components/Button/Button";
-import CheckBox from "./Components/Checkbox/Checkbox";
-import TextInput from "./Components/Input/TextInput";
-import { useToaster } from "./Components/Toaster/Toaster";
-import Modal from "./Components/Modal/Modal";
-import Select from "./Components/Select/Select";
-import Sidebar from "./Components/SideBar/SideBar";
-import {
-    FiBriefcase,
-    FiCalendar,
-    FiDollarSign,
-    FiHome,
-    FiSettings,
-    FiUser,
-} from "react-icons/fi";
-import NavBar from "./Components/NavigationBar/NavigationBar";
-import Loading from "./Components/Loading/Loading";
-import Skeletons from "./Components/Skeletons/Skeletons";
-import {
-    RadioButton,
-    RadioButtonGroup,
-} from "./Components/RadioButton/RadioButton";
-import ButtonGroupIcon from "./Components/ButtonGroupIcon/ButtonGroupIcon";
-import ProgressBar from "./Components/ProgressBar/ProgressBar";
-import NumberInput from "./Components/NumberInput/NumberInput";
-import PinInputs from "./Components/PinInput/PinInput";
-import Card from "./Components/ProfileCard/ProfileCard";
-import Breadcrumbs from "./Components/Breadcrumbs/Breadcrumbs";
-import { ChevronRightIcon } from "@chakra-ui/icons";
-import Table from "./Components/Table/Table";
-import ToolTip from "./Components/ToolTip/ToolTip";
-import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";
-import ApexPieChart from "./Components/Apexcharts/ApexPieChart/ApexPieChart";
-import ProfilePhotoViewer from "./Components/ProfilePhotoViewer/ProfilePhotoViewer";
-
-
-const Layout = () => {
-    const navmenus = [
-        { title: "Account Settings", url: "myaccount" },
-        { title: "Resetpassword", url: "resetpassword" },
-    ];
-
-    const handleNavOnClick = (title: string) => {
-        // setActiveMenu(title)
-        console.log(title);
-    };
-
-    const handleLogout = () => {
-        console.log("Logout");
-    };
-    const { showToast } = useToaster();
-    const [isOpen, setIsOpen] = useState(false);
-    const [selected, setSelected] = useState("");
-
-    const handleOnclick = () => {
-        showToast({
-            title: "Hello",
-            duration: 3000,
-            status: "success",
-        });
-
-        //setIsOpen(true);
-    };
-
-    const handleOnclick2 = () => {
-        setIsOpen(true);
-    };
-
-    const handleOnChange = (e: any) => {
-        const checked = e.target.value;
-        setSelected(checked);
-    };
-
-    const menu = [
-        {
-            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",
-                },
-            ],
-        },
-    ];
-
-    const [toggle, changeToggle] = useState(true);
-    const [activeMenu, setActiveMenu] = useState("");
-
-    const handleMenuClick = (title: string, url: string) => {
-        setActiveMenu(title);
-        console.log(title);
-        console.log(url);
-    };
-
-    const [selectedValue, setSelectedValue] = useState<string>("1");
-
-    const radioOptions = [
-        { label: "Option 1", value: "1" },
-        { label: "Option 2", value: "2" },
-        { label: "Option 3", value: "3" },
-    ];
-
-    const handleChange = (value: string) => {
-        setSelectedValue(value);
-    };
-    const [numbetInputValue, setNumbetInputValue] = useState("0");
-    const handleNumberinput = (value: string) => {
-        setNumbetInputValue(value);
-    };
-    const breadcrumbItems = [
-        { path: "/home", label: "Home" },
-        { path: "/about", label: "About" },
-        { path: "/contact", label: "Contact" },
-    ];
-    const handleClick = (path: string) => {
-        console.log(`Navigating to ${path}`);
-    };
-
-    const tableDataheader = [
-        {
-            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,
-            accessor_function: (value: any): JSX.Element => {
-                return <div onClick={() => console.log("hello")}>{value.toUpperCase()}</div>;
-            },
-        },
-        { 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 },
-        { label: "age8", accessor_key: "age8", sort: true, search: true },
-        { label: "age9", accessor_key: "age9", sort: true, search: true },
-        { label: "age10", accessor_key: "age10", sort: true, search: true },
-    ];
-
-    const tableData = Array.from({ length: 20 }, (_, i) => ({
-        id: i + 1,
-        name: `User ${i + 1}`,
-        email: `user${i + 1}@example.com`,
-        role: i % 2 === 0 ? "Developer" : "Manager",
-        age: Math.floor(Math.random() * 100),
-        age1: Math.floor(Math.random() * 100),
-        age2: Math.floor(Math.random() * 100),
-        age3: Math.floor(Math.random() * 100),
-        age4: Math.floor(Math.random() * 100),
-        age5: Math.floor(Math.random() * 100),
-        age6: Math.floor(Math.random() * 100),
-        age7: Math.floor(Math.random() * 100),
-        age8: Math.floor(Math.random() * 100),
-        age9: Math.floor(Math.random() * 100),
-        age10: Math.floor(Math.random() * 100),
-    }));
-
-    function useWindowSize() {
-        const [windowSize, setWindowSize] = useState({
-            width: 0,
-            height: 0,
-        });
-
-        useEffect(() => {
-            function handleResize() {
-                setWindowSize({
-                    width: window.innerWidth,
-                    height: window.innerHeight,
-                });
-            }
-            window.addEventListener("resize", handleResize);
-            handleResize();
-
-            return () => window.removeEventListener("resize", handleResize);
-        }, []);
-
-        return windowSize;
-    }
-
-    const { width, height } = useWindowSize();
-
-    // console.log(width, height);
-
-    const exportOptions = [
-        { value: "PDF", label: "Export as PDF" },
-        { value: "XLS", label: "Export as XLS" },
-    ];
-
-    const data = Array.from({ length: 10 }, () =>
-        Math.floor(Math.random() * 100)
-    );
-    const categories = data.map((_, index) => `Category ${index + 1}`);
-
-    return (
-        <Box minH="100vh" bg="gray.100" overflow={"hidden"}>
-            <Loading text="Loading" isLoading={false} />
-            <Flex>
-                <Box>
-                    <Sidebar
-                        menus={menu}
-                        activeMenu={activeMenu}
-                        handleMenuClick={handleMenuClick}
-                        toggle={toggle}
-                        changeToggle={() => changeToggle(!toggle)}
-                        logo={"https://bit.ly/dan-abramov"}
-                        companyName="PIXELIZE"
-                    />
-                </Box>
-                <Box flex={"1"} maxWidth={width} overflow={"hidden"}>
-                    <NavBar
-                        userAvathar="https://bit.ly/dan-abramov"
-                        userName="PIXELIZE"
-                        navMenu={navmenus}
-                        handleNavOnClick={handleNavOnClick}
-                        handleLogout={handleLogout}
-                        logoutText="Logout"
-                        key={"navbar"}
-                    />
-                    <br />
-                    <Breadcrumbs
-                        separator={<ChevronRightIcon color="gray.500" />}
-                        items={breadcrumbItems}
-                        handleClick={handleClick}
-                    />
-                    <Box
-                        p={"50px"}
-                        height={height - 160}
-                        overflowY="scroll"
-                        width={width}
-                    >
-                        <TextInput
-                            //label="hello"
-                            id="hello"
-                            name="hello"
-                            //helperText="Hello"
-                            //errorMessage="Required"
-                            //error={true}
-                            type="file"
-                            // inputRightIcon={<FiUser color="gray.300" />}
-                            // onRightIconclick={() => {
-                            //     console.log("icon click");
-                            // }}
-                            key={"input"}
-                            // border={"0px solid"}
-                            // padding={"0px"}
-                            inputStyle={{ border: "0px solid", padding: "0px" }}
-                            inputGroupStyle={{ border: "0px solid", padding: "0px" }}
-                            onChange={(e) => {
-                                console.log(e.target.files);
-                            }}
-                        />
-                        <br />
-                        <Button
-                            label="Tosterbutton"
-                            onClick={handleOnclick}
-                            width={250}
-                            variant={"solid"}
-                            color={"blue"}
-                        />
-                        <br />
-                        <br />
-                        <CheckBox label="hello world" />
-                        <br />
-                        <br />
-                        <Button
-                            label="ModelButton"
-                            onClick={handleOnclick2}
-                            width={250}
-                            variant={"solid"}
-                            color={"blue"}
-                        />
-                        <br />
-                        <Modal
-                            isOpen={isOpen}
-                            onClose={() => setIsOpen(false)}
-                            overlaybg={"blackAlpha.300"}
-                            overlaybackdropFilter={"blur(10px) hue-rotate(90deg)"}
-                            size={"sm"}
-                            isCentered={true}
-                        >
-                            helldddddlo
-                        </Modal>
-                        <br />
-                        <Select
-                            options={[
-                                { id: 1, label: "mages" },
-                                { id: 2, label: "sjdfg" },
-                            ]}
-                            onChange={handleOnChange}
-                            value={selected}
-                            width={200}
-                        />
-                        <br />
-                        {/* <TextArea label="hello" helperText='Hello' errorMessage='Required' error={true} rows={5} /> */}
-                        <br />
-                        <Box width={"150px"}>
-                            <Skeletons type="skeleton" />
-                            <br />
-                            <Skeletons type="circle" />
-                            <br />
-                            <Skeletons type="text" mt={4} />
-                            <br />
-                            <br />
-                            <Skeletons
-                                height="10px"
-                                isLoaded={false}
-                                fadeDuration={4}
-                                bg="blue.500"
-                                color="white"
-                                type="skeleton"
-                            >
-                                <Box>Hello ChakraUI!</Box>
-                            </Skeletons>
-                        </Box>
-                        <br />
-                        <br />
-                        <RadioButton label="dinesh" />
-                        <br />
-                        <br />
-                        <RadioButtonGroup
-                            options={radioOptions}
-                            value={selectedValue}
-                            onChange={handleChange}
-                            colorScheme="blue"
-                            size="md"
-                        />
-                        <br />
-                        <br />
-                        <ButtonGroupIcon
-                            buttonText="hello"
-                            rightIcon={<FiHome />}
-                            size="md"
-                            variant="solid"
-                            color="red"
-                        />
-                        <br /> <br />
-                        <ProgressBar min={10} max={0} isIndeterminate={true} size="xs" />
-                        <br />
-                        <br />
-                        <NumberInput
-                            min={0}
-                            max={20}
-                            value={numbetInputValue}
-                            onChange={handleNumberinput}
-                        />
-                        <br />
-                        <br />
-                        <PinInputs pins={5} label="Enter pin" />
-                        <br />
-                        <br />
-                        <Card
-                            align={"center"}
-                            header={<Heading size="md"> Customer dashboard</Heading>}
-                            footer={<ChakraButton colorScheme="blue">View here</ChakraButton>}
-                        >
-                            <Text>
-                                View a summary of all your customers over the last month.
-                            </Text>
-                        </Card>
-                        <br />
-                        <Table
-                            data={tableData}
-                            headers={tableDataheader}
-                            // handleCellClick={(row, header) => {
-                            //     console.log("Cell clicked", row, header);
-                            // }}
-                            exportOptions={exportOptions}
-                            handleExportChange={(value) => {
-                                console.log("click label", value);
-                            }}
-                            isLoading={true}
-                            loadingContaxt={<Stack spacing={4}>
-                                <Stack direction="row" justifyContent="space-between" paddingX="4" paddingY="2">
-                                    <Skeleton height="20px" width="10%" />
-                                    <Skeleton height="20px" width="20%" />
-                                    <Skeleton height="20px" width="15%" />
-                                    <Skeleton height="20px" width="25%" />
-                                    <Skeleton height="20px" width="10%" />
-                                    <Skeleton height="20px" width="20%" />
-                                </Stack>
-                                {[...Array(5)].map((_, index) => (
-                                    <Stack key={index} direction="row" justifyContent="space-between" paddingX="4" paddingY="2" borderWidth="1px" borderRadius="md">
-                                        <Skeleton height="20px" width="10%" />
-                                        <Skeleton height="20px" width="20%" />
-                                        <Skeleton height="20px" width="15%" />
-                                        <Skeleton height="20px" width="25%" />
-                                        <Skeleton height="20px" width="10%" />
-                                        <Skeleton height="20px" width="20%" />
-                                    </Stack>
-                                ))}
-                            </Stack>}
-                            loadingBoxStyle={{ padding: "10px", width: "100%" }}
-                        />
-                        <ToolTip
-                            label="Hello"
-                            placement="top"
-                            hasArrow
-                            size={"20"}
-                            width={"300px"}
-                            height={"100px"}
-                            bg={"green"}
-                        >
-                            hai
-                        </ToolTip>
-                        <br />
-                        <Box>
-                            <div style={{ display: "flex", justifyContent: "space-around" }}>
-                                <ApexBarChart
-                                    data={data}
-                                    Labels={categories}
-                                    title="Bar Chart"
-                                    titlePosition="left"
-                                    // barColor={["#00E396"]}
-                                    // xAxisStyle={{ colors: "#00E396", fontSize: "12px" }}
-                                    // yAxisStyle={{ colors: "#00E396", fontSize: "12px" }}
-                                    titleStyle={{ color: "#00E396" }}
-                                />
-                                <ApexPieChart
-                                    data={data}
-                                    labels={categories}
-                                    title="Pie Chart"
-                                    titlePosition="left"
-                                    // chartColor={["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"]}
-                                    titleStyle={{ color: "#00E396" }}
-                                />
-                            </div>
-                        </Box>
-                        <br />
-                        <ProfilePhotoViewer photoUrl="https://bit.ly/dan-abramov" onPhotoChange={(file) => console.log(file)} />
-                    </Box>
-                </Box>
-            </Flex>
-        </Box>
-    );
-};
-
-export default Layout;