pixelize-design-library 1.0.21 → 1.0.23

package/src/Components/Table/Table.tsx

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

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

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

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

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