pixelize-design-library 2.1.18 → 2.1.20

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

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

@@ -0,0 +1,153 @@
+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/{dist/Components/Table/TableToDo.js → src/Components/Table/TableToDo.tsx}

@@ -1,4 +1,3 @@
-"use strict";
 // const [isPopoverOpen, setPopoverOpen] = useState(false);
 // const [activeHeader, setActiveHeader] = useState<string | null>(null);
 // const [searchTerms, setSearchTerms] = useState<Record<string, string>>({});
@@ -8,11 +7,7 @@
 // const [betweenValues, setBetweenValues] = useState<
 //   Record<string, { min: string; max: string }>
 // >({});
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.searchFeatures = void 0;
+
 // const sortedData = [...data].sort((a, b) => {
 //   if (!sortField) return 0;
 //   if (a[sortField] < b[sortField]) return sortDirection === "asc" ? -1 : 1;
@@ -33,6 +28,7 @@ exports.searchFeatures = void 0;
 //   }, []);
 //   return value;
 // };
+
 // const handleSearchOperation = (header: string, operation: string) => {
 //   // setSearchOperation((prev) => ({ ...prev, [header]: operation }));
 //   // const list_ofdata = getValue(header);
@@ -55,6 +51,7 @@ exports.searchFeatures = void 0;
 //   //   }
 //   // }
 // };
+
 // const handleSearch = (field: string, term: string) => {
 //   // if (searchOperation[field] === "between") {
 //   //   setBetweenValues((prev) => ({
@@ -65,6 +62,7 @@ exports.searchFeatures = void 0;
 //   //   setSearchTerms((prev) => ({ ...prev, [field]: term }));
 //   // }
 // };
+
 // const handleHeaderClick = (header: string, search: boolean) => {
 //   // if (!search) {
 //   //   return;
@@ -75,6 +73,7 @@ exports.searchFeatures = void 0;
 // const closePopover = () => {
 //   // setPopoverOpen(false);
 // };
+
 // const filteredData = sortedData.filter((item) => {
 //   return Object.keys(searchTerms).every((key) => {
 //     const term = String(searchTerms[key]).toLowerCase();
@@ -114,108 +113,111 @@ exports.searchFeatures = void 0;
 //     }
 //   });
 // });
-var react_1 = __importDefault(require("react"));
-var searchFeatures = function (header) {
-    return react_1.default.createElement(react_1.default.Fragment, null, "hi");
-    // const fieldType = getFieldType(header, data);
-    // return (
-    //   <>
-    //     <Select
-    //       value={searchOperation[header] || "notBlank"}
-    //       onChange={(e) => handleSearchOperation(header, e.target.value)}
-    //       style={{ background: "#3182ce", color: "white" }}
-    //     >
-    //       <option value="equals">Equals</option>
-    //       <option value="notEquals">Does not equal</option>
-    //       {fieldType === "number" ? (
-    //         <>
-    //           <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="contains">Contains</option>
-    //           <option value="notContains">Does not contain</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>
-    //     {searchOperation[header] !== undefined &&
-    //       searchOperation[header] === "between" &&
-    //       fieldType === "number" && (
-    //         <>
-    //           <br />
-    //           <Input
-    //             value={betweenValues[header]?.min || ""}
-    //             onChange={(e) => {
-    //               setBetweenValues((prev) => ({
-    //                 ...prev,
-    //                 [header]: { ...prev[header], min: e.target.value },
-    //               }));
-    //               setSearchTerms((prev) => ({ ...prev, [header]: "between" }));
-    //             }}
-    //             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 },
-    //               }));
-    //               setSearchTerms((prev) => ({ ...prev, [header]: "between" }));
-    //             }}
-    //             placeholder="Max..."
-    //             background="white"
-    //             color="black"
-    //           />
-    //         </>
-    //       )}
-    //     {searchOperation[header] !== undefined &&
-    //       searchOperation[header] !== "between" &&
-    //       searchOperation[header] !== "blank" &&
-    //       searchOperation[header] !== "notBlank" && (
-    //         <>
-    //           <br />
-    //           <Input
-    //             value={searchTerms[header] || ""}
-    //             onChange={(e) => handleSearch(header, e.target.value)}
-    //             placeholder="Search..."
-    //             background="white"
-    //             color="black"
-    //           />
-    //           {/* <br />
-    //                         <select onChange={(e) => console.log("option 1")} style={{ width: "100%", borderRadius: "2px", height: "30px" }}>
-    //                             <option value="">Select an option</option>
-    //                             <option value="option1">Option 1</option>
-    //                             <option value="option2">Option 2</option>
-    //                             <option value="option3">Option 3</option>
-    //                         </select> */}
-    //         </>
-    //       )}
-    //   </>
-    // );
+import React from "react";
+
+export const searchFeatures = (header: string) => {
+  return <>hi</>;
+  // const fieldType = getFieldType(header, data);
+  // return (
+  //   <>
+  //     <Select
+  //       value={searchOperation[header] || "notBlank"}
+  //       onChange={(e) => handleSearchOperation(header, e.target.value)}
+  //       style={{ background: "#3182ce", color: "white" }}
+  //     >
+  //       <option value="equals">Equals</option>
+  //       <option value="notEquals">Does not equal</option>
+  //       {fieldType === "number" ? (
+  //         <>
+  //           <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="contains">Contains</option>
+  //           <option value="notContains">Does not contain</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>
+  //     {searchOperation[header] !== undefined &&
+  //       searchOperation[header] === "between" &&
+  //       fieldType === "number" && (
+  //         <>
+  //           <br />
+  //           <Input
+  //             value={betweenValues[header]?.min || ""}
+  //             onChange={(e) => {
+  //               setBetweenValues((prev) => ({
+  //                 ...prev,
+  //                 [header]: { ...prev[header], min: e.target.value },
+  //               }));
+  //               setSearchTerms((prev) => ({ ...prev, [header]: "between" }));
+  //             }}
+  //             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 },
+  //               }));
+  //               setSearchTerms((prev) => ({ ...prev, [header]: "between" }));
+  //             }}
+  //             placeholder="Max..."
+  //             background="white"
+  //             color="black"
+  //           />
+  //         </>
+  //       )}
+  //     {searchOperation[header] !== undefined &&
+  //       searchOperation[header] !== "between" &&
+  //       searchOperation[header] !== "blank" &&
+  //       searchOperation[header] !== "notBlank" && (
+  //         <>
+  //           <br />
+  //           <Input
+  //             value={searchTerms[header] || ""}
+  //             onChange={(e) => handleSearch(header, e.target.value)}
+  //             placeholder="Search..."
+  //             background="white"
+  //             color="black"
+  //           />
+  //           {/* <br />
+  //                         <select onChange={(e) => console.log("option 1")} style={{ width: "100%", borderRadius: "2px", height: "30px" }}>
+  //                             <option value="">Select an option</option>
+  //                             <option value="option1">Option 1</option>
+  //                             <option value="option2">Option 2</option>
+  //                             <option value="option3">Option 3</option>
+  //                         </select> */}
+  //         </>
+  //       )}
+  //   </>
+  // );
 };
-exports.searchFeatures = searchFeatures;
+
 // const hasSelection = selection.length > 0;
 // const indeterminate = hasSelection && selection.length < data.length;
+
 // const handleMouseEnter = (index: number) => setHoveredHeaderIndex(index);
 // const handleMouseLeave = () => {
 //   setHoveredHeaderIndex(null);
 //   closePopover();
 // };
+
 // const removeSearchOptionTerm = (key: any) => {
 //   const newSearchTerms = { ...searchTerms };
 //   const newSearchOperation = { ...searchOperation };
@@ -227,6 +229,7 @@ exports.searchFeatures = searchFeatures;
 //   setSearchOperation(newSearchOperation);
 //   setBetweenValues(newBetweenValues);
 // };
+
 // const SearchOptions = () => {
 //   return (
 //     <Wrap>
@@ -259,6 +262,7 @@ exports.searchFeatures = searchFeatures;
 //     </Wrap>
 //   );
 // };
+
 // const Export = ({
 //   exportOptions,
 // }: {
@@ -282,6 +286,7 @@ exports.searchFeatures = searchFeatures;
 //     </Select>
 //   );
 // };
+
 /* <Box display="flex" justifyContent="flex-end">
         <SearchOptions />
         {exportOptions && exportOptions.length > 0 && (

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

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