pixelize-design-library 2.1.20 → 2.1.21

package/src/Components/Table/TableSettings/ManageColumns.tsx

@@ -1,148 +0,0 @@
-import React, { useImperativeHandle, useState } from "react";
-import {
-  Box,
-  Flex,
-  IconButton,
-  Input,
-  List,
-  ListItem,
-  Text,
-} from "@chakra-ui/react";
-import Checkbox from "../../Checkbox/Checkbox";
-import { useCustomTheme } from "../../../Theme/useCustomTheme";
-import { TableProps } from "../TableProps";
-import { GripVertical } from "lucide-react";
-
-type ManageColumnsMethods = {
-  getManageColumnsData: () => TableProps["columns"];
-};
-
-const ManageColumns = ({
-  columns,
-  childInputMethodsRef,
-}: {
-  columns: TableProps["columns"];
-  childInputMethodsRef: React.Ref<ManageColumnsMethods>;
-}) => {
-  const theme = useCustomTheme();
-  const [items, setItems] = useState(
-    columns.map((o) => ({ ...o, isHidden: !o.isHidden }))
-  );
-  const [searchTerm, setSearchTerm] = useState("");
-  const [draggedItemIndex, setDraggedItemIndex] = useState<number | null>(null);
-
-  useImperativeHandle(childInputMethodsRef, () => {
-    return {
-      getManageColumnsData() {
-        return items.map((o) => ({ ...o, isHidden: !o.isHidden }));
-      },
-    };
-  }, [items]);
-
-  const handleDragStart = (index: number) => {
-    setDraggedItemIndex(index);
-  };
-
-  const handleDragOver = (e: React.DragEvent<HTMLLIElement>, index: number) => {
-    e.preventDefault();
-    if (draggedItemIndex === null || draggedItemIndex === index) return;
-
-    const newItems = [...items];
-    const draggedItem = newItems[draggedItemIndex];
-
-    newItems.splice(draggedItemIndex, 1);
-
-    newItems.splice(index, 0, draggedItem);
-
-    setDraggedItemIndex(index);
-    setItems(newItems);
-  };
-
-  const handleDragEnd = () => {
-    setDraggedItemIndex(null);
-  };
-
-  const toggleCheckbox = (index: number) => {
-    const newItems = [...items];
-    newItems[index].isHidden = !newItems[index].isHidden;
-    setItems(newItems);
-  };
-
-  const filteredItems = items.filter((item) =>
-    item.label.toString().toLowerCase().includes(searchTerm.toLowerCase())
-  );
-
-  return (
-    <Box mt="5">
-      <Input
-        placeholder="Search"
-        mb="4"
-        value={searchTerm}
-        onChange={(e) => setSearchTerm(e.target.value)}
-      />
-      {!searchTerm.length && (
-        <Flex align="center" mb="2">
-          <Checkbox
-            isChecked={items.every((item) => item.isHidden)}
-            onChange={() => {
-              const allChecked = items.every((item) => item.isHidden);
-              setItems(
-                items.map((item) => ({ ...item, isHidden: !allChecked }))
-              );
-            }}
-          />
-          <Text ml="2" fontSize={14}>
-            Select all
-          </Text>
-        </Flex>
-      )}
-
-      <List spacing="2">
-        {filteredItems.length > 0 ? (
-          filteredItems.map((item, index) => (
-            <ListItem
-              key={item.id}
-              draggable
-              onDragStart={() => handleDragStart(index)}
-              onDragOver={(e) => handleDragOver(e, index)}
-              onDragEnd={handleDragEnd}
-              bg={theme.colors.gray[50]}
-              display="flex"
-              alignItems="center"
-              justifyContent="space-between"
-              borderRadius="md"
-              border="1px solid"
-              borderColor="gray.200"
-              cursor="grab"
-              position={"relative"}
-              fontSize={14}
-            >
-              <IconButton
-                aria-label="Drag"
-                icon={<GripVertical />}
-                variant="ghost"
-                cursor="grab"
-                mr="1"
-              />
-
-              <Checkbox
-                isChecked={item.isHidden}
-                onChange={() => toggleCheckbox(index)}
-                sx={{
-                  marginRight: "4",
-                }}
-              />
-              <Text flex="1">{item.label}</Text>
-            </ListItem>
-          ))
-        ) : (
-          <Text color="gray.500" textAlign="center">
-            No items found
-          </Text>
-        )}
-      </List>
-    </Box>
-  );
-};
-
-export default ManageColumns;

package/src/Components/Table/TableSettings/TableSettings.tsx

@@ -1,153 +0,0 @@
-import {
-  Box,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Tabs,
-  TabList,
-  TabPanels,
-  Tab,
-  TabPanel,
-  Text,
-} from "@chakra-ui/react";
-import React, { useRef, useState } from "react";
-import ManageColumns from "./ManageColumns";
-import Button from "../../Button/Button";
-import { useCustomTheme } from "../../../Theme/useCustomTheme";
-import { TableProps } from "../TableProps";
-import { Settings } from "lucide-react";
-
-const TableSettings = ({
-  columns,
-  onSave,
-}: {
-  columns: TableProps["columns"];
-  onSave: (updatedColumns: TableProps["columns"]) => void;
-}) => {
-  const theme: any = useCustomTheme();
-  const childInputMethodsRef = useRef<{
-    getManageColumnsData?: () => TableProps["columns"];
-  }>({});
-
-  const [settingsOpen, setSettingsOpen] = useState(false);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  return (
-    <Box>
-      <Box display={"flex"} justifyContent={"flex-end"} cursor={"pointer"}>
-        <Settings
-          onClick={() => setSettingsOpen(true)}
-          size={"1.25rem"}
-          color={theme?.colors?.text?.[500]}
-        />
-      </Box>
-
-      <Modal
-        isOpen={settingsOpen}
-        onClose={() => setSettingsOpen(false)}
-        size={"md"}
-      >
-        <ModalOverlay />
-        <ModalContent minW="700px" minH="600px">
-          <ModalHeader>Table Settings</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <Tabs
-              index={selectedIndex}
-              onChange={setSelectedIndex}
-              orientation="vertical"
-              variant="unstyled"
-            >
-              <TabList
-                whiteSpace={"nowrap"}
-                minWidth={160}
-                height="fit-content"
-              >
-                <Tab
-                  _selected={{
-                    borderLeft: `2px solid ${theme.colors.primary[600]}`,
-                  }}
-                  fontSize={"14px"}
-                  justifyContent="flex-start"
-                >
-                  Manage columns
-                </Tab>
-
-                {/* <Tab
-                  _selected={{
-                    borderLeft: "2px solid blue",
-                  }}
-                  justifyContent="flex-start"
-                >
-                  Font size
-                </Tab>
-                <Tab
-                  _selected={{
-                    borderLeft: "2px solid blue",
-                  }}
-                  justifyContent="flex-start"
-                >
-                  Density
-                </Tab>
-                <Tab
-                  _selected={{
-                    borderLeft: "2px solid blue",
-                  }}
-                  justifyContent="flex-start"
-                >
-                  Scrollbar
-                </Tab> */}
-              </TabList>
-              <TabPanels>
-                <TabPanel>
-                  <ManageColumns
-                    columns={columns}
-                    childInputMethodsRef={
-                      childInputMethodsRef as React.MutableRefObject<{
-                        getManageColumnsData: () => TableProps["columns"];
-                      }>
-                    }
-                  />
-                </TabPanel>
-                <TabPanel>
-                  <Text>Font size settings</Text>
-                </TabPanel>
-                <TabPanel>
-                  <Text>Density settings</Text>
-                </TabPanel>
-                <TabPanel>
-                  <Text>Scrollbar settings</Text>
-                </TabPanel>
-              </TabPanels>
-            </Tabs>
-          </ModalBody>
-
-          <ModalFooter>
-            <Button
-              label={"Close"}
-              size="sm"
-              onClick={() => setSettingsOpen(false)}
-              sx={{ marginRight: "0.5rem" }}
-            />
-            <Button
-              label={"Save"}
-              size={"sm"}
-              onClick={() => {
-                onSave(
-                  childInputMethodsRef.current?.getManageColumnsData?.() ?? []
-                );
-                setSettingsOpen(false);
-              }}
-            />
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </Box>
-  );
-};
-
-export default TableSettings;

package/src/Components/Tag/Tag.styles.tsx

@@ -1,56 +0,0 @@
-import { ComponentStyleConfig } from "@chakra-ui/react";
-
-export const Tag: ComponentStyleConfig = {
-  baseStyle: {
-    borderRadius: "full",
-    fontWeight: "bold",
-    px: 3,
-    py: 1,
-  },
-  sizes: {
-    sm: {
-      fontSize: "0.75rem",
-      px: 2,
-      py: 1,
-    },
-    md: {
-      fontSize: "0.875rem",
-      px: 3,
-      py: 1.5,
-    },
-    lg: {
-      fontSize: "1rem",
-      px: 4,
-      py: 2,
-    },
-  },
-  variants: {
-    solid: ({ theme, colorScheme = "primary" }) => ({
-      bg: theme.colors[colorScheme][500],
-      color: theme.colors.white,
-      _hover: {
-        bg: theme.colors[colorScheme][600],
-      },
-      _active: {
-        bg: theme.colors[colorScheme][700],
-      },
-    }),
-    outline: ({ theme, colorScheme = "primary" }) => ({
-      border: "0.125rem solid",
-      borderColor: theme.colors[colorScheme][500],
-      color: theme.colors[colorScheme][500],
-      bg: "transparent",
-      _hover: {
-        bg: theme.colors[colorScheme][50],
-      },
-      _active: {
-        bg: theme.colors[colorScheme][100],
-      },
-    }),
-  },
-  defaultProps: {
-    size: "md",
-    variant: "solid",
-    colorScheme: "primary",
-  },
-};

package/src/Components/Tag/Tag.tsx

@@ -1,68 +0,0 @@
-import React, { ElementType } from "react";
-import { Tag as ChakraTag, TagLabel, TagRightIcon } from "@chakra-ui/react";
-
-interface ChipProps {
-  label: string;
-  onIconClick?: () => void;
-  onTagClick?: () => void;
-  icon?: ElementType;
-  colorScheme?:
-    | "primary"
-    | "secondary"
-    | "tertiary"
-    | "gray"
-    | "red"
-    | "orange"
-    | "yellow"
-    | "green"
-    | "teal"
-    | "blue"
-    | "cyan"
-    | "purple"
-    | "pink";
-  size?: "sm" | "md" | "lg";
-  variant?: "solid" | "outline";
-}
-
-const Tag: React.FC<ChipProps> = ({
-  label,
-  colorScheme = "primary",
-  variant = "solid",
-  size = "md",
-  icon,
-  onTagClick,
-  onIconClick,
-}) => {
-  return (
-    <ChakraTag
-      size={size}
-      variant={variant}
-      colorScheme={colorScheme}
-      borderRadius="full"
-      cursor={"pointer"}
-      onClick={() => onTagClick?.()}
-    >
-      <TagLabel>{label}</TagLabel>
-      {icon && (
-        <TagRightIcon
-          as={icon}
-          boxSize="1em"
-          ml={1.5}
-          cursor={onIconClick ? "pointer" : "default"}
-          onClick={(e) => {
-            e.stopPropagation();
-            onIconClick?.();
-          }}
-          transition="all 0.2s ease"
-          _hover={{
-            opacity: 0.8,
-            transform: "scale(1.05)",
-            cursor: onIconClick ? "pointer" : "default",
-          }}
-        />
-      )}
-    </ChakraTag>
-  );
-};
-
-export default Tag;