pixelize-design-library 0.1.0

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

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

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

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

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