pixelize-design-library 2.1.19 → 2.1.20

package/src/Components/ToolTip/ToolTip.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { 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,
+  styles,
+}: ToolTipProps) {
+  return (
+    <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}
+      style={styles}
+    >
+      {children}
+    </ChakraTooltip>
+  );
+}

package/src/Components/ToolTip/ToolTipProps.tsx

@@ -0,0 +1,46 @@
+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;
+  styles?: React.CSSProperties;
+  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/Components/Trail/EditableCell.tsx

@@ -0,0 +1,116 @@
+import React, { useRef } from "react";
+import {
+  Box,
+  Input,
+  Button,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  useOutsideClick,
+} from "@chakra-ui/react";
+import { Row, Column } from "./data";
+import { ChevronDown } from "lucide-react";
+
+interface EditableCellProps {
+  row: Row;
+  column: Column;
+  isEditable: boolean;
+  handleCellClick: (rowId: number, columnId: number) => void;
+  handleCellChange: (rowId: number, columnLabel: string, value: any) => void;
+}
+
+export const EditableCell: React.FC<EditableCellProps> = ({
+  row,
+  column,
+  isEditable,
+  handleCellClick,
+  handleCellChange,
+}) => {
+  const cellRef = useRef(null);
+  useOutsideClick({
+    ref: cellRef,
+    handler: () =>
+      handleCellChange(
+        row.id,
+        column.label as string,
+        row[column.label as string]
+      ),
+  });
+
+  const value = row[column.label as string] || "-";
+
+  if (isEditable) {
+    if (column.label === "dueDate") {
+      return (
+        <Box width="50%" ref={cellRef}>
+          <Input
+            type="date"
+            value={value}
+            onChange={(e) =>
+              handleCellChange(row.id, column.label as string, e.target.value)
+            }
+          />
+        </Box>
+      );
+    } else if (column.label === "priority") {
+      return (
+        <Box width="100%" ref={cellRef}>
+          <Menu isOpen>
+            <MenuButton
+              as={Button}
+              rightIcon={<ChevronDown />}
+              bg="teal.500"
+              color="white"
+              _hover={{ bg: "teal.600" }}
+              _active={{ bg: "teal.700" }}
+            >
+              {value}
+            </MenuButton>
+            <MenuList>
+              <MenuItem
+                onClick={() =>
+                  handleCellChange(row.id, column.label as string, "Low")
+                }
+                _hover={{ bg: "teal.100" }}
+              >
+                Low
+              </MenuItem>
+              <MenuItem
+                onClick={() =>
+                  handleCellChange(row.id, column.label as string, "Medium")
+                }
+                _hover={{ bg: "teal.100" }}
+              >
+                Medium
+              </MenuItem>
+              <MenuItem
+                onClick={() =>
+                  handleCellChange(row.id, column.label as string, "High")
+                }
+                _hover={{ bg: "teal.100" }}
+              >
+                High
+              </MenuItem>
+            </MenuList>
+          </Menu>
+        </Box>
+      );
+    } else {
+      return (
+        <Box width="100%" ref={cellRef}>
+          <Input
+            value={value}
+            onChange={(e) =>
+              handleCellChange(row.id, column.label as string, e.target.value)
+            }
+          />
+        </Box>
+      );
+    }
+  }
+
+  return (
+    <span onClick={() => handleCellClick(row.id, column.id)}>{value}</span>
+  );
+};

package/src/Components/Trail/SelectAllCheckbox.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Checkbox } from "@chakra-ui/react";
+
+interface SelectAllCheckboxProps {
+  isAllSelected: boolean;
+  isIndeterminate: boolean;
+  handleSelectAll: () => void;
+}
+
+export const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
+  isAllSelected,
+  isIndeterminate,
+  handleSelectAll,
+}) => {
+  return (
+    <Checkbox
+      isChecked={isAllSelected}
+      isIndeterminate={isIndeterminate}
+      onChange={handleSelectAll}
+    />
+  );
+};

package/{dist/Components/Trail/TrailWorks.js → src/Components/Trail/TrailWorks.tsx}

@@ -1,69 +1,100 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import {
+  Box,
+  Thead,
+  Table,
+  Tr,
+  Th,
+  Tbody,
+  Td,
+  Checkbox,
+} from "@chakra-ui/react";
+import React from "react";
+
+const TrailWorks = () => {
+  const data = [
+    {
+      contact: "John Doe",
+      type: "Customer",
+      deals: 5,
+      phone: "555-555-5555",
+      email: "hhhhh@gmail.com",
+    },
+    {
+      contact: "John Doe",
+      type: "Customer",
+      deals: 5,
+      phone: "555-555-5555",
+      email: "hhhhh@gmail.com",
+    },
+  ];
+
+  const columns = [
+    {
+      Header: "Contact",
+      accessor: "contact",
+    },
+    {
+      Header: "Type",
+      accessor: "type",
+    },
+    {
+      Header: "Deals",
+      accessor: "deals",
+    },
+    {
+      Header: "Phone",
+      accessor: "phone",
+    },
+    {
+      Header: "Email",
+      accessor: "email",
+    },
+  ];
+
+  const renderRow = (row: any, index: any) => {
+    return (
+      <Tr key={index} border="1px solid #bbbbbb">
+        <Td border="1px solid #bbbbbb" padding={"5px"}>
+          <Checkbox />
+        </Td>
+        {columns.map((column, index) => {
+          return (
+            <Td key={index} border="1px solid #bbbbbb">
+              {row[column.accessor]}
+            </Td>
+          );
+        })}
+      </Tr>
+    );
+  };
+
+  return (
+    <Box width="100%" overflowX="auto">
+      <Table variant="simple" size="md" border="1px solid #bbbbbb">
+        <Thead border="1px solid #bbbbbb">
+          <Tr border="1px solid #bbbbbb">
+            <Th border="1px solid #bbbbbb" padding={"5px"}>
+              <Checkbox />
+            </Th>
+            {columns.map((column, index) => {
+              return (
+                <Th key={index} border="1px solid #bbbbbb">
+                  {column.Header}
+                </Th>
+              );
+            })}
+          </Tr>
+        </Thead>
+        <Tbody border="1px solid #bbbbbb">
+          {data.map((row, index) => renderRow(row, index))}
+        </Tbody>
+      </Table>
+    </Box>
+  );
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var react_2 = __importDefault(require("react"));
-var TrailWorks = function () {
-    var data = [
-        {
-            contact: "John Doe",
-            type: "Customer",
-            deals: 5,
-            phone: "555-555-5555",
-            email: "hhhhh@gmail.com",
-        },
-        {
-            contact: "John Doe",
-            type: "Customer",
-            deals: 5,
-            phone: "555-555-5555",
-            email: "hhhhh@gmail.com",
-        },
-    ];
-    var columns = [
-        {
-            Header: "Contact",
-            accessor: "contact",
-        },
-        {
-            Header: "Type",
-            accessor: "type",
-        },
-        {
-            Header: "Deals",
-            accessor: "deals",
-        },
-        {
-            Header: "Phone",
-            accessor: "phone",
-        },
-        {
-            Header: "Email",
-            accessor: "email",
-        },
-    ];
-    var renderRow = function (row, index) {
-        return (react_2.default.createElement(react_1.Tr, { key: index, border: "1px solid #bbbbbb" },
-            react_2.default.createElement(react_1.Td, { border: "1px solid #bbbbbb", padding: "5px" },
-                react_2.default.createElement(react_1.Checkbox, null)),
-            columns.map(function (column, index) {
-                return (react_2.default.createElement(react_1.Td, { key: index, border: "1px solid #bbbbbb" }, row[column.accessor]));
-            })));
-    };
-    return (react_2.default.createElement(react_1.Box, { width: "100%", overflowX: "auto" },
-        react_2.default.createElement(react_1.Table, { variant: "simple", size: "md", border: "1px solid #bbbbbb" },
-            react_2.default.createElement(react_1.Thead, { border: "1px solid #bbbbbb" },
-                react_2.default.createElement(react_1.Tr, { border: "1px solid #bbbbbb" },
-                    react_2.default.createElement(react_1.Th, { border: "1px solid #bbbbbb", padding: "5px" },
-                        react_2.default.createElement(react_1.Checkbox, null)),
-                    columns.map(function (column, index) {
-                        return (react_2.default.createElement(react_1.Th, { key: index, border: "1px solid #bbbbbb" }, column.Header));
-                    }))),
-            react_2.default.createElement(react_1.Tbody, { border: "1px solid #bbbbbb" }, data.map(function (row, index) { return renderRow(row, index); })))));
-};
-exports.default = TrailWorks;
+
+export default TrailWorks;
+
 // import React, { useState } from "react";
 // import {
 //   Box,
@@ -85,6 +116,7 @@ exports.default = TrailWorks;
 // import { Row, Column, initialColumns, initialRows } from "./data";
 // import { EditableCell } from "./EditableCell";
 // import { SelectAllCheckbox } from "./SelectAllCheckbox";
+
 // const TrailWorks: React.FC = () => {
 //   const [rows, setRows] = useState<Row[]>(initialRows);
 //   const [columns, setColumns] = useState<Column[]>(initialColumns);
@@ -95,6 +127,7 @@ exports.default = TrailWorks;
 //     columnId: number;
 //   } | null>(null);
 //   const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
+
 //   const addRow = () => {
 //     const newRow: Row = {
 //       id: rows.length + 1,
@@ -106,6 +139,7 @@ exports.default = TrailWorks;
 //     };
 //     setRows([...rows, newRow]);
 //   };
+
 //   const addColumn = () => {
 //     if (newColumnName) {
 //       const newColumn = { id: columns.length + 1, label: newColumnName };
@@ -117,9 +151,11 @@ exports.default = TrailWorks;
 //       setIsAddingColumn(false);
 //     }
 //   };
+
 //   const handleCellClick = (rowId: number, columnId: number) => {
 //     setEditableCell({ rowId, columnId });
 //   };
+
 //   const handleCellChange = (rowId: number, columnLabel: string, value: any) => {
 //     setRows(
 //       rows.map((row) =>
@@ -128,6 +164,7 @@ exports.default = TrailWorks;
 //     );
 //     setEditableCell(null);
 //   };
+
 //   const handleRowSelect = (rowId: number) => {
 //     const newSelectedRows = new Set(selectedRows);
 //     if (newSelectedRows.has(rowId)) {
@@ -137,6 +174,7 @@ exports.default = TrailWorks;
 //     }
 //     setSelectedRows(newSelectedRows);
 //   };
+
 //   const handleSelectAll = () => {
 //     if (selectedRows.size === rows.length) {
 //       setSelectedRows(new Set());
@@ -144,16 +182,20 @@ exports.default = TrailWorks;
 //       setSelectedRows(new Set(rows.map((row) => row.id)));
 //     }
 //   };
+
 //   const handleDeleteSelected = () => {
 //     setRows(rows.filter((row) => !selectedRows.has(row.id)));
 //     setSelectedRows(new Set());
 //   };
+
 //   const handleCloseFooter = () => {
 //     setSelectedRows(new Set());
 //   };
+
 //   const isAllSelected = selectedRows.size === rows.length;
 //   const isIndeterminate =
 //     selectedRows.size > 0 && selectedRows.size < rows.length;
+
 //   return (
 //     <Box width="100%" overflowX="auto" p={5}>
 //       <Table variant="simple" size="md">
@@ -259,4 +301,5 @@ exports.default = TrailWorks;
 //     </Box>
 //   );
 // };
+
 // export default TrailWorks;

package/src/Components/Trail/data.ts

@@ -0,0 +1,42 @@
+export type Row = {
+  id: number;
+  project: string;
+  owner: string;
+  status: string;
+  priority: string;
+  dueDate: string;
+  [key: string]: any; // Allow dynamic keys for new columns
+};
+
+export type Column = {
+  id: number;
+  label: keyof Row | string; // Allow string for new columns
+};
+
+export const initialColumns: Column[] = [
+  { id: 1, label: "project" },
+  { id: 2, label: "owner" },
+  { id: 3, label: "status" },
+  { id: 4, label: "priority" },
+  { id: 5, label: "dueDate" },
+];
+
+export const initialRows: Row[] = [
+  {
+    id: 1,
+    project: "Project A",
+    owner: "Owner A",
+    status: "In Progress",
+    priority: "High",
+    dueDate: "2023-12-31",
+  },
+  {
+    id: 2,
+    project: "Project B",
+    owner: "Owner B",
+    status: "Completed",
+    priority: "Medium",
+    dueDate: "2023-11-30",
+  },
+  // Add more initial rows as needed
+];

package/src/Constants/Sidebar.ts

@@ -0,0 +1,39 @@
+export const FlexCss = {
+  "&::-webkit-scrollbar": {
+    width: "0.188rem",
+  },
+  "&::-webkit-scrollbar-track": {
+    background: "transparent",
+  },
+  "&::-webkit-scrollbar-thumb": {
+    background: "transparent",
+    transition: "background 0.5s",
+  },
+  "&:hover::-webkit-scrollbar-thumb": {
+    background: "#9A4FE5",
+  },
+};
+
+export const cssForScrollBar = (theme: any) => ({
+  "&::-webkit-scrollbar": {
+    width: "0.125rem",
+  },
+  "&::-webkit-scrollbar-track": {
+    background: theme.colors.sidebar.background[500],
+  },
+  "&::-webkit-scrollbar-thumb": {
+    background: "transparent",
+    borderRadius: "0.5rem",
+  },
+  "&:hover::-webkit-scrollbar-thumb": {
+    background: theme.colors.primary[500],
+  },
+  "&:hover::-webkit-scrollbar-thumb:hover": {
+    background: theme.colors.primary[700],
+  },
+  scrollbarWidth: "none",
+  "&:hover": {
+    scrollbarWidth: "thin",
+    scrollbarColor: `${theme.colors.primary[500]} ${theme.colors.sidebar.background[500]}`,
+  },
+});

package/src/Hooks/usePreferences.ts

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+
+type PreferencesProps = {
+  baseUrl: string;
+  key?: string;
+  page?: string;
+  name?: string;
+  authToken?: string;
+};
+
+type PreferencesResponseProps = {
+  json: Record<string, any>;
+  key: string;
+  name: string;
+  page: string;
+  preference_id: string;
+};
+
+const constructUrl = ({ baseUrl, key, page, name }: PreferencesProps) => {
+  const params = new URLSearchParams();
+
+  if (page) {
+    params.append("page", page);
+  }
+  if (key) {
+    params.append("key", key);
+  }
+  if (name) {
+    params.append("name", name);
+  }
+
+  const queryString = params.toString();
+  return `${baseUrl}${queryString ? `?${queryString}` : ""}`;
+};
+
+const useGetPreferences = ({
+  baseUrl = "",
+  key = "",
+  page = "",
+  name = "",
+  authToken = "",
+}: PreferencesProps): {
+  preferences: PreferencesResponseProps[];
+  loading: boolean;
+} => {
+  const [preferences, setPreferences] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!baseUrl) {
+      return;
+    }
+    setLoading(true);
+    const url = constructUrl({ baseUrl, key, page, name });
+    fetch(url, {
+      headers: {
+        Authorization: authToken,
+      },
+    })
+      .then((response) => response.json())
+      .then((data) => setPreferences(data))
+      .catch((error) => console.error(error))
+      .finally(() => setLoading(false));
+    /* eslint-disable */
+  }, [baseUrl]);
+
+  return { preferences, loading };
+};
+
+const useSavePreferences = ({
+  baseUrl = "",
+  key = "",
+  page = "",
+  name = "",
+  authToken = "",
+}: PreferencesProps) => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const savePreferences = (data: Record<string, any> = {}) => {
+    if (!baseUrl) return;
+    setLoading(true);
+    fetch(baseUrl, {
+      method: "POST",
+      headers: {
+        Authorization: authToken,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        key,
+        page,
+        name,
+        json: data,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => console.log(data))
+      .catch((error) => setError(error))
+      .finally(() => setLoading(false));
+  };
+
+  return { savePreferences, loading, error };
+};
+
+export { useGetPreferences, useSavePreferences };