pixelize-design-library 0.1.0

package/src/Components/Table/Table.tsx

@@ -0,0 +1,516 @@
+import {
+    Box,
+    Button,
+    ChakraProvider,
+    Checkbox,
+    Flex,
+    Input,
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuList,
+    Popover,
+    PopoverBody,
+    PopoverContent,
+    PopoverTrigger,
+    Select,
+    Spinner,
+    TableContainer,
+    Text,
+} from "@chakra-ui/react";
+import {
+    Table as ChakraTable,
+    Tbody,
+    Td,
+    Th,
+    Thead,
+    Tr,
+} from "@chakra-ui/react";
+
+import { TableProps } from "./TableProps";
+import { useState } from "react";
+import {
+    ArrowDownIcon,
+    ArrowUpIcon,
+    ChevronDownIcon,
+    HamburgerIcon,
+} from "@chakra-ui/icons";
+
+export default function Table({
+    data,
+    headers,
+    tableHeaderBgColor = "#3182ce",
+    tableHeaderColor = "white",
+    handleExportChange,
+    exportOptions,
+    exportLabel,
+    isLoading,
+    loadingContaxt,
+    loadingBoxStyle,
+}: TableProps) {
+    const [currentPage, setCurrentPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(5);
+    const [sortField, setSortField] = useState<string | null>(null);
+    const [sortDirection, setSortDirection] = useState<"asc" | "desc" | null>(
+        null
+    );
+    const [isPopoverOpen, setPopoverOpen] = useState(false);
+    const [activeHeader, setActiveHeader] = useState<string | null>(null);
+    const [searchTerms, setSearchTerms] = useState<Record<string, string>>({});
+    const [searchOperation, setSearchOperation] = useState<
+        Record<string, string>
+    >({});
+    const [betweenValues, setBetweenValues] = useState<
+        Record<string, { min: string; max: string }>
+    >({});
+    const [hoveredHeaderIndex, setHoveredHeaderIndex] = useState<number | null>(
+        null
+    );
+    const [visibleColumns, setVisibleColumns] = useState<Record<string, boolean>>(
+        headers.reduce((acc, curr) => ({ ...acc, [curr.label]: true }), {})
+    );
+    if (isLoading) {
+        return (
+            <ChakraProvider>
+                <Box width="full" overflowX="auto" style={loadingBoxStyle}>
+                    {loadingContaxt ? loadingContaxt :
+                        <Spinner thickness='4px' speed='0.65s' emptyColor='gray.200' color='blue.500' size='xl' />
+                    }
+                </Box>
+            </ChakraProvider>
+        );
+    }
+
+    const handlePageSizeChange = (
+        event: React.ChangeEvent<HTMLSelectElement>
+    ) => {
+        setRowsPerPage(Number(event.target.value));
+        setCurrentPage(0);
+    };
+    const pageSizeOptions = [5, 10, 20, 50, 100].filter(
+        (size) => size <= data.length
+    );
+
+    const sortedData = [...data].sort((a, b) => {
+        if (!sortField) return 0;
+        if (a[sortField] < b[sortField]) return sortDirection === "asc" ? -1 : 1;
+        if (a[sortField] > b[sortField]) return sortDirection === "asc" ? 1 : -1;
+        return 0;
+    });
+
+    const handleSort = (field: string) => {
+        setSortField(field);
+        setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    };
+    const handleSearchOperation = (header: string, operation: string) => {
+        setSearchOperation((prev) => ({ ...prev, [header]: operation }));
+    };
+
+    const handleSearch = (field: string, term: string) => {
+        if (searchOperation[field] === "between") {
+            setBetweenValues((prev) => ({
+                ...prev,
+                [field]: { min: term.split("-")[0], max: term.split("-")[1] },
+            }));
+        } else {
+            setSearchTerms((prev) => ({ ...prev, [field]: term }));
+        }
+    };
+
+    const handleHeaderClick = (header: string) => {
+        setActiveHeader(header);
+        setPopoverOpen(true);
+    };
+    const closePopover = () => {
+        setPopoverOpen(false);
+    };
+
+    const filteredData = sortedData.filter((item) => {
+        return Object.keys(searchTerms).every((key) => {
+            const term = searchTerms[key].toLowerCase();
+            const value = String(item[key]).toLowerCase();
+            const operation = searchOperation[key] || "contains";
+
+            switch (operation) {
+                case "contains":
+                    return value.includes(term);
+                case "notContains":
+                    return !value.includes(term);
+                case "equals":
+                    return value === term;
+                case "notEquals":
+                    return value !== term;
+                case "beginsWith":
+                    return value.startsWith(term);
+                case "endsWith":
+                    return value.endsWith(term);
+                case "greaterThan":
+                    return Number(value) > Number(term);
+                case "greaterThanOrEqual":
+                    return Number(value) >= Number(term);
+                case "lessThan":
+                    return Number(value) < Number(term);
+                case "lessThanOrEqual":
+                    return Number(value) <= Number(term);
+                case "between":
+                    const { min, max } = betweenValues[key] || {};
+                    return Number(value) >= Number(min) && Number(value) <= Number(max);
+                case "blank":
+                    return value === "";
+                case "notBlank":
+                    return value !== "";
+                default:
+                    return true;
+            }
+        });
+    });
+
+    const pages = Math.ceil(filteredData.length / rowsPerPage);
+    const startRow = currentPage * rowsPerPage;
+    const endRow = startRow + rowsPerPage;
+
+    const getFieldType = (header: string) => {
+        for (const row of data) {
+            if (row[header] !== null) {
+                return typeof row[header];
+            }
+        }
+        return "string";
+    };
+    const searchFeatures = (header: string) => {
+        const fieldType = getFieldType(header);
+        return (
+            <>
+                <Select
+                    value={searchOperation[header] || "notBlank"}
+                    onChange={(e) => handleSearchOperation(header, e.target.value)}
+                    style={{ background: "#3182ce", color: "white" }}
+                >
+                    {fieldType === "number" ? (
+                        <>
+                            <option value="equals">Equals</option>
+                            <option value="notEquals">Does not equal</option>
+                            <option value="greaterThan">Greater than</option>
+                            <option value="greaterThanOrEqual">
+                                Greater than or equal to
+                            </option>
+                            <option value="lessThan">Less than</option>
+                            <option value="lessThanOrEqual">Less than or equal to</option>
+                            <option value="between">Between</option>
+                            <option value="blank">Blank</option>
+                            <option value="notBlank">Not blank</option>
+                        </>
+                    ) : (
+                        <>
+                            <option value="contains">Contains</option>
+                            <option value="notContains">Does not contain</option>
+                            <option value="equals">Equals</option>
+                            <option value="notEquals">Does not equal</option>
+                            <option value="beginsWith">Begins with</option>
+                            <option value="endsWith">Ends with</option>
+                            <option value="blank">Blank</option>
+                            <option value="notBlank">Not blank</option>
+                        </>
+                    )}
+                </Select>
+                <br />
+                {searchOperation[header] === "between" && fieldType === "number" ? (
+                    <>
+                        <Input
+                            value={betweenValues[header]?.min || ""}
+                            onChange={(e) =>
+                                setBetweenValues((prev) => ({
+                                    ...prev,
+                                    [header]: { ...prev[header], min: e.target.value },
+                                }))
+                            }
+                            placeholder="Min..."
+                            background="white"
+                            color="black"
+                        />
+                        <br />
+                        <br />
+                        <Input
+                            value={betweenValues[header]?.max || ""}
+                            onChange={(e) =>
+                                setBetweenValues((prev) => ({
+                                    ...prev,
+                                    [header]: { ...prev[header], max: e.target.value },
+                                }))
+                            }
+                            placeholder="Max..."
+                            background="white"
+                            color="black"
+                        />
+                    </>
+                ) : (
+                    <Input
+                        value={searchTerms[header] || ""}
+                        onChange={(e) => handleSearch(header, e.target.value)}
+                        placeholder="Search..."
+                        background="white"
+                        color="black"
+                    />
+                )}
+            </>
+        );
+    };
+
+
+    const handleColumnVisibilityChange = (header: string) => {
+        setVisibleColumns((prev) => ({ ...prev, [header]: !prev[header] }));
+    };
+
+    function calculateLeftOffset(headers: any, currentIndex: number) {
+        let offset = 0;
+        for (let i = 0; i < currentIndex; i++) {
+            if (headers[i].columnFreeze) {
+                offset += 100;
+            }
+        }
+        return offset;
+    }
+
+    const handleMouseEnter = (index: number) => setHoveredHeaderIndex(index);
+    const handleMouseLeave = () => {
+        setHoveredHeaderIndex(null);
+        closePopover();
+    };
+
+    return (
+        <ChakraProvider>
+            <div style={{ width: "97%" }}>
+                <Box display="flex" justifyContent="flex-end">
+                    {exportOptions && exportOptions.length > 0 && (
+                        <Select
+                            placeholder="Exports"
+                            width={160}
+                            onChange={(e) => {
+                                handleExportChange && handleExportChange(e.target.value);
+                            }}
+                            value={exportLabel}
+                        >
+                            {exportOptions.map((option) => (
+                                <option key={option.value} value={option.value}>
+                                    {option.label}
+                                </option>
+                            ))}
+                        </Select>
+                    )}
+                </Box>
+                <br />
+                <TableContainer>
+                    <ChakraTable
+                        variant="simple"
+                        colorScheme="teal"
+                        size={"md"}
+                        overflowX={"scroll"}
+                    >
+                        <Thead background={tableHeaderBgColor}>
+                            <Tr>
+                                {headers.map((header, index) => {
+                                    const isFrozen = header.columnFreeze;
+                                    const leftOffset = calculateLeftOffset(headers, index);
+                                    return (
+                                        visibleColumns[header.label] && (
+                                            <Th
+                                                key={index}
+                                                style={{
+                                                    textTransform: "capitalize",
+                                                    color: tableHeaderColor,
+                                                    fontSize: "medium",
+                                                    fontWeight: 600,
+                                                    position: isFrozen ? "sticky" : undefined,
+                                                    left: isFrozen
+                                                        ? `${leftOffset === 0 ? leftOffset : leftOffset - 4}px`
+                                                        : undefined,
+                                                    zIndex: isFrozen ? 2 : 1,
+                                                    background: tableHeaderBgColor,
+                                                    textAlign: "center",
+                                                }}
+                                                onMouseEnter={() => handleMouseEnter(index)}
+                                                onMouseLeave={handleMouseLeave}
+                                            >
+                                                {header.sort ? (
+                                                    <Button
+                                                        onClick={() => handleSort(header.label)}
+                                                        style={{
+                                                            textTransform: "capitalize",
+                                                            color: "white",
+                                                            background: "none",
+                                                        }}
+                                                    >
+                                                        {header.label}
+                                                        {sortField === header.label &&
+                                                            (sortDirection === "asc" ? (
+                                                                <ArrowUpIcon w={15} h={15} />
+                                                            ) : (
+                                                                <ArrowDownIcon w={15} h={15} />
+                                                            ))}
+                                                    </Button>
+                                                ) : (
+                                                    <span>{header.label}</span>
+                                                )}
+                                                {header.search && (
+                                                    <Popover
+                                                        isOpen={
+                                                            activeHeader === header.label && isPopoverOpen
+                                                        }
+                                                        onClose={closePopover}
+                                                        placement="bottom-start"
+                                                        closeOnBlur={false}
+                                                    >
+                                                        <PopoverTrigger>
+                                                            <HamburgerIcon
+                                                                w={15}
+                                                                h={15}
+                                                                onClick={() => handleHeaderClick(header.label)}
+                                                                style={{
+                                                                    cursor: "pointer",
+                                                                    display:
+                                                                        hoveredHeaderIndex === index
+                                                                            ? "inline"
+                                                                            : "none",
+                                                                }}
+                                                            />
+                                                        </PopoverTrigger>
+                                                        <PopoverContent width={200} zIndex={3}>
+                                                            <PopoverBody background={"#deeefd"}>
+                                                                {searchFeatures(header.label)}
+                                                            </PopoverBody>
+                                                        </PopoverContent>
+                                                    </Popover>
+                                                )}
+                                            </Th>
+                                        )
+                                    );
+                                })}
+                            </Tr>
+                        </Thead>
+                        <Tbody>
+                            {filteredData.slice(startRow, endRow).map((row, index) => (
+                                <Tr
+                                    key={index}
+                                    style={{
+                                        backgroundColor: index % 2 === 0 ? "#f7f7f7" : "white",
+                                    }}
+                                    border={"none"}
+                                >
+                                    {headers.map((header, headerIndex) => {
+                                        const isFrozen = header.columnFreeze;
+                                        const leftOffset = calculateLeftOffset(
+                                            headers,
+                                            headerIndex
+                                        );
+                                        return (
+                                            visibleColumns[header.label] && (
+                                                <Td
+                                                    key={headerIndex}
+                                                    style={{
+                                                        border: "none",
+                                                        textAlign: "center",
+                                                        position: isFrozen ? "sticky" : undefined,
+                                                        left: isFrozen
+                                                            ? `${leftOffset === 0 ? leftOffset : leftOffset - 4}px`
+                                                            : undefined,
+                                                        zIndex: isFrozen ? 1 : 0,
+                                                        backgroundColor:
+                                                            index % 2 === 0 ? "#f7f7f7" : "white",
+                                                    }}
+                                                // onClick={() => handleCellClick(row, header)}
+                                                >
+                                                    {typeof header.accessor_function === "function" &&
+                                                        header.accessor_key in row
+                                                        ? header.accessor_function(row[header.accessor_key])
+                                                        : row[header.accessor_key]}
+                                                </Td>
+                                            )
+                                        );
+                                    })}
+                                </Tr>
+                            ))}
+                        </Tbody>
+                    </ChakraTable>
+                </TableContainer>
+                <Flex justify="flex-end" align="center" mt={4}>
+                    <Flex mr={4}>
+                        <Menu>
+                            <MenuButton
+                                as={Button}
+                                rightIcon={<ChevronDownIcon />}
+                                colorScheme={"blue"}
+                                variant="outline"
+                            >
+                                Visiblity
+                            </MenuButton>
+                            <MenuList height={150} overflow={"scroll"} zIndex={"2"}>
+                                {headers.map((header, index) => (
+                                    <MenuItem key={index}>
+                                        <Checkbox
+                                            isChecked={visibleColumns[header.label]}
+                                            onChange={() =>
+                                                handleColumnVisibilityChange(header.label)
+                                            }
+                                        >
+                                            {header.label}
+                                        </Checkbox>
+                                    </MenuItem>
+                                ))}
+                            </MenuList>
+                        </Menu>
+                    </Flex>
+                    <Text mr={4}>
+                        {startRow + 1} to {endRow} of {filteredData.length}
+                    </Text>
+                    <Select
+                        onChange={handlePageSizeChange}
+                        value={rowsPerPage}
+                        mr={4}
+                        width={20}
+                    >
+                        {pageSizeOptions.map((size, index) => (
+                            <option key={index} value={size}>
+                                {size}
+                            </option>
+                        ))}
+                    </Select>
+                    <Flex>
+                        <Button
+                            mx={1}
+                            disabled={currentPage === 0}
+                            onClick={() => setCurrentPage(0)}
+                        >
+                            {"<<"}
+                        </Button>
+                        <Button
+                            mx={1}
+                            disabled={currentPage === 0}
+                            onClick={() => currentPage > 0 && setCurrentPage(currentPage - 1)}
+                        >
+                            {"<"}
+                        </Button>
+                        <Text mx={1} mt={2}>
+                            Page {currentPage + 1} of {pages}
+                        </Text>
+                        <Button
+                            mx={1}
+                            disabled={currentPage > pages}
+                            onClick={() =>
+                                currentPage < pages - 1 && setCurrentPage(currentPage + 1)
+                            }
+                        >
+                            {">"}
+                        </Button>
+                        <Button
+                            mx={1}
+                            disabled={currentPage >= pages - 1}
+                            onClick={() => setCurrentPage(pages - 1)}
+                        >
+                            {">>"}
+                        </Button>
+                    </Flex>
+                </Flex>
+            </div>
+        </ChakraProvider>
+    );
+}

package/src/Components/Table/TableProps.tsx

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+
+export type TableProps = {
+    data: DataObject[];
+    headers: TableHeader[];
+    // handleCellClick?: (row: any, header: any) => void;
+    tableHeaderBgColor?: string;
+    tableHeaderColor?: string;
+    handleExportChange?: (value: string) => void | undefined;
+    exportOptions?: ExportOption[];
+    exportLabel?: string;
+    isLoading?: boolean;
+    loadingType?: 'skeleton' | 'spinner';
+    loadingContaxt?: ReactNode;
+    loadingBoxStyle?: React.CSSProperties;
+
+};
+export type DataObject = {
+    id: number;
+    name: string;
+    email: string;
+    role: string;
+    [key: string]: string | number;
+}
+export type TableHeader = {
+    label: string;
+    accessor_key: string;
+    sort?: boolean;
+    search?: boolean;
+    columnFreeze?: boolean;
+    accessor_function?: (data: string | number) => JSX.Element | string | number;
+}
+export type ExportOption = {
+    label: string;
+    value: string;
+}

package/src/Components/Toaster/Toaster.stories.tsx

@@ -0,0 +1,58 @@
+// Toaster.stories.tsx
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import ToasterProvider, { useToaster } from './Toaster';
+import { Button, ChakraProvider } from '@chakra-ui/react';
+import { ToasterToastProps } from './ToasterProps';
+
+export default {
+    title: 'Components/Toaster/ToasterProvider',
+    component: ToasterProvider,
+    argTypes: {
+        title: {
+            control: 'text',
+            defaultValue: 'Test',
+        },
+        status: {
+            control: 'select',
+            options: ['info', 'warning', 'success', 'error'],
+            defaultValue: 'info',
+        },
+        position: {
+            control: 'select',
+            options: ['top', 'top-right', 'top-left', 'bottom', 'bottom-right', 'bottom-left'],
+            defaultValue: 'bottom-right',
+        },
+    },
+} as Meta;
+
+interface StoryProps {
+    title: string;
+    status: 'info' | 'warning' | 'success' | 'error';
+    position: 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
+}
+
+const Template: StoryFn<StoryProps> = ({ title, status, position }) => {
+    const ShowToastButton = () => {
+        const { showToast } = useToaster();
+        return (
+            <Button onClick={() => showToast({
+                title,
+                description: 'This is a test toast',
+                status,
+                position,
+            })}>
+                Show Toast
+            </Button>
+        );
+    };
+    return (
+        <ToasterProvider>
+            <ChakraProvider>
+                <ShowToastButton />
+            </ChakraProvider>
+        </ToasterProvider>
+    );
+};
+
+export const Default = Template.bind({});

package/src/Components/Toaster/Toaster.tsx

@@ -0,0 +1,34 @@
+
+import React, { createContext, useContext } from 'react'
+import { useToast } from '@chakra-ui/react'
+import { ToasterChildren, ToasterContextType, ToasterToastProps } from './ToasterProps'
+
+const ToasterContext = createContext<ToasterContextType | undefined>(undefined);
+
+export default function ToasterProvider({ children }: ToasterChildren) {
+    const toast = useToast();
+    const showToast: ToasterContextType["showToast"] = ({ title, description, status, duration = 5000, isClosable = true, position, onClose }: ToasterToastProps) => {
+        toast({
+            title: title,
+            description: description,
+            status: status,
+            duration: duration,
+            isClosable: isClosable,
+            position: position,
+            onCloseComplete: onClose
+        })
+    }
+    return (
+        <ToasterContext.Provider value={{ showToast }}>
+            {children}
+        </ToasterContext.Provider>
+    )
+}
+
+export const useToaster = () => {
+    const context = useContext(ToasterContext);
+    if (!context) {
+        throw new Error("useToaster must be used within a ToasterProvider")
+    }
+    return context;
+}

package/src/Components/Toaster/ToasterProps.tsx

@@ -0,0 +1,15 @@
+import { ToastProps } from "@chakra-ui/react";
+import React, { ReactNode } from "react";
+
+export type ToasterToastProps = Pick<ToastProps, 'description' | 'title' | 'isClosable' | 'duration' | 'children' | 'onClose'> & {
+    position?: "top" | "bottom" | "top-right" | "top-left" | "bottom-right" | "bottom-left"
+    status?: "success" | "error" | "warning" | "info" | "loading"
+}
+
+export interface ToasterContextType {
+    showToast: (children: ToasterToastProps) => void
+}
+
+export interface ToasterChildren {
+    children: ReactNode;
+}