pixelize-design-library 2.1.20 → 2.1.22

package/src/Components/Trail/EditableCell.tsx

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

@@ -1,22 +0,0 @@
-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/src/Components/Trail/data.ts

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

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

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

package/src/Theme/Default/palette.ts

@@ -1,373 +0,0 @@
-const palette = {
-  primary: {
-    50: "#f5edfc",
-    100: "#e0c8f7",
-    200: "#d1aef3",
-    300: "#bb89ee",
-    400: "#ae72ea",
-    500: "#9A4FE5", // primary shade
-    600: "#8c48d0",
-    700: "#6d38a3",
-    800: "#552v7e",
-    900: "#412160",
-    opacity: {
-      4: "#9A4FE50a",
-      8: "#9A4FE514",
-      16: "#9A4FE529",
-      24: "#9A4FE53d",
-      32: "#9A4FE552",
-      40: "#9A4FE566",
-      48: "#9A4FE57a",
-    }
-  },
-  secondary: {
-    50: "#e8e8e9",
-    100: "#b7b8bb",
-    200: "#94989b",
-    300: "#63666d",
-    400: "#454951",
-    500: "#161b25", // secondary shade
-    600: "#141922",
-    700: "#10131a",
-    800: "#0c0f14",
-    900: "#090b10",
-    opacity: {
-      4: "#161b250a",
-      8: "#161b2514",
-      16: "#161b2529",
-      24: "#161b253d",
-      32: "#161b2552",
-      40: "#161b2566",
-      48: "#161b257a",
-    }
-  },
-  tertiary: {
-    50: "#e8e8e9",
-    100: "#b7b8bb",
-    200: "#94989b",
-    300: "#63666d",
-    400: "#454951",
-    500: "#161b25", // tertiary shade
-    600: "#141922",
-    700: "#10131a",
-    800: "#0c0f14",
-    900: "#090b10",
-    opacity: {
-      4: "#161b250a",
-      8: "#161b2514",
-      16: "#161b2529",
-      24: "#161b253d",
-      32: "#161b2552",
-      40: "#161b2566",
-      48: "#161b257a",
-    }
-  },
-  transparent: "transparent",
-  black: "#000",
-  white: "#fff",
-  semantic: {
-    success: {
-      50: "#e9f8ef",
-      100: "#bbe9cc",
-      200: "#9adeb4",
-      300: "#6ccf92",
-      400: "#4fc67d",
-      500: "#23b85c", // Main success color
-      600: "#20a754",
-      700: "#198341",
-      800: "#136533",
-      900: "#0f4d27",
-    },
-    error: {
-      50: "#feedeb",
-      100: "#fbc6c2",
-      200: "#f9aaa4",
-      300: "#f6837b",
-      400: "#f56b61",
-      500: "#f2463a", // Main error color
-      600: "#dc4035",
-      700: "#ac3229",
-      800: "#852720",
-      900: "#661d18",
-    },
-    warning: {
-      50: "#fff4ef",
-      100: "#ffddce",
-      200: "#ffccb7",
-      300: "#ffb596",
-      400: "#ffa781",
-      500: "#Ff9162", // Main warning color
-      600: "#e88459",
-      700: "#b56746",
-      800: "#8c5036",
-      900: "#6b3d29",
-    },
-    info: {
-      50: "#eff9fc",
-      100: "#cdedf5",
-      200: "#b5e4f0",
-      300: "#94d7e9",
-      400: "#7fd0e5",
-      500: "#5FC4de", // Main info color
-      600: "#56b2ea",
-      700: "#438b9e",
-      800: "#346c78",
-      900: "#28525d",
-    },
-  },
-  gray: {
-    50: "#f7fafc",
-    100: "#edf2f7",
-    200: "#e2e8f0",
-    300: "#cbd5e0",
-    400: "#a0aec0",
-    500: "#718096",
-    600: "#4a5568",
-    700: "#2d3748",
-    800: "#1a202c",
-    900: "#171923",
-  },
-  red: {
-    50: "#feedeb",
-    100: "#fbc6c2",
-    200: "#f9aaa4",
-    300: "#f6837b",
-    400: "#f56b61",
-    500: "#f2463a", // Main error color
-    600: "#dc4035",
-    700: "#ac3229",
-    800: "#852720",
-    900: "#661d18",
-  },
-  orange: {
-    50: "#fff4ef",
-    100: "#ffddce",
-    200: "#ffccb7",
-    300: "#ffb596",
-    400: "#ffa781",
-    500: "#Ff9162", // Main warning color
-    600: "#e88459",
-    700: "#b56746",
-    800: "#8c5036",
-    900: "#6b3d29",
-  },
-  yellow: {
-    50: "#fefbec",
-    100: "#fdf1c5",
-    200: "#fbeba9",
-    300: "#fae281",
-    400: "#f9dc69",
-    500: "#f7d343",
-    600: "#e1c03d",
-    700: "#af9630",
-    800: "#887425",
-    900: "#68591c",
-  },
-  green: {
-    50: "#e9f8ef",
-    100: "#bbe9cc",
-    200: "#9adeb4",
-    300: "#6ccf92",
-    400: "#4fc67d",
-    500: "#23b85c", // Main success color
-    600: "#20a754",
-    700: "#198341",
-    800: "#136533",
-    900: "#0f4d27",
-  },
-  teal: {
-    50: "#eff9fc",
-    100: "#cdedf5",
-    200: "#b5e4f0",
-    300: "#94d7e9",
-    400: "#7fd0e5",
-    500: "#5FC4de", // Main info color
-    600: "#56b2ea",
-    700: "#438b9e",
-    800: "#346c78",
-    900: "#28525d",
-  },
-  blue: {
-    50: "#ebf8ff",
-    100: "#bee3f8",
-    200: "#90cdf4",
-    300: "#63b3ed",
-    400: "#4299e1",
-    500: "#3182ce",
-    600: "#2b6cb0",
-    700: "#2c5282",
-    800: "#2a4365",
-    900: "#1a365d",
-  },
-  cyan: {
-    50: "#edfdfd",
-    100: "#c4f1f9",
-    200: "#9decf9",
-    300: "#76e4f7",
-    400: "#0bc5ea",
-    500: "#00b5d8",
-    600: "#00a3c4",
-    700: "#0987a0",
-    800: "#086f83",
-    900: "#065666",
-  },
-  purple: {
-    50: "#faf5ff",
-    100: "#e9d8fd",
-    200: "#d6bcfa",
-    300: "#b794f4",
-    400: "#9f7aea",
-    500: "#805ad5",
-    600: "#6b46c1",
-    700: "#553c9a",
-    800: "#44337a",
-    900: "#322659",
-  },
-  pink: {
-    50: "#fff5f7",
-    100: "#fed7e2",
-    200: "#fbb6ce",
-    300: "#f687b3",
-    400: "#ed64a6",
-    500: "#d53f8c",
-    600: "#b83280",
-    700: "#97266d",
-    800: "#702459",
-    900: "#521b41",
-  },
-  background: {
-    50: "#ffffff",
-    100: "#fefefe",
-    200: "#fdfdfd",
-    300: "#fcfcfc",
-    400: "#fcfcfc",
-    500: "#fbfbfb",
-    600: "#e4e4e4",
-    700: "#b2b2b2",
-    800: "#8a8a8a",
-    900: "#696969",
-  },
-  backgroundColor: {
-    main: "#f8f9fa",
-    secondary: "#f1f1f1",
-    tertiary: "#ececec",
-    quaternary: "#e2e6ea",
-    light: "#fafafa",
-    medium: "#eaeaea",
-    accent: "#e5e5e5",
-    subtle: "#f5f6f7",
-    muted: "#dfe3e6",
-    neutral: "#ebedef",
-    base: "#FBFBFB",
-    tableHeader: "#F6F6F6",
-  },
-  text: {
-    50: "#eeeff0",
-    100: "#cacccf",
-    200: "#b1b3b8",
-    300: "#8d9097",
-    400: "#777b83",
-    500: "#555a64",
-    600: "#4d525b",
-    700: "#3c4047",
-    800: "#2f3237",
-    900: "#24262a",
-  },
-  header: {
-    50: "#ecedec",
-    100: "#c5c6ca",
-    200: "#a9abb0",
-    300: "#81848c",
-    400: "#696b75",
-    500: "#434853",
-    600: "#3d424c",
-    700: "#30333b",
-    800: "#25282e",
-    900: "#1c1e23",
-  },
-  placeholder: {
-    50: "#f1f1f2",
-    100: "#d3d5d8",
-    200: "#bec0c5",
-    300: "#a0a3aa",
-    400: "#8d9199",
-    500: "#717680",
-    600: "#676b74",
-    700: "#50545b",
-    800: "#3e4146",
-    900: "#2f3236",
-  },
-  boxShadow: {
-    primary: "#9A52E247",
-    error: "#F2463A47",
-    default: "",
-  },
-  sidebar: {
-    background: {
-      50: "#e9eaf0",
-      100: "#d4d6e0",
-
-      200: "#212747",
-      300: "#7d84a2",
-      400: "#525b83",
-      500: "#161B32",
-      600: "#12162a",
-      700: "#0e1221",
-      800: "#0a0d19",
-      900: "#060911",
-    }
-
-  },
-  boxborder: {
-    50: "#fbfbfb",
-    100: "#f2f3f4",
-    200: "#ecedee",
-    300: "#e4e5e7",
-    400: "#dee0e2",
-    500: "#d6d8db",
-    600: "#c3c5c7",
-    700: "#98999b",
-    800: "#767778",
-    900: "#5a5b5c",
-  },
-  border: {
-    50: "#fdfdfd",
-    100: "#f8f8f8",
-    200: "#f4f4f4",
-    300: "#f0f0f0",
-    400: "#ededed",
-    500: "#e8e8e8",
-    600: "#d3d3d3",
-    700: "#a5a5a5",
-    800: "#808080",
-    900: "#616161",
-  },
-  table: {
-    hover: {
-      50: "#fefefe",
-      100: "#fcfcfc",
-      200: "#fbfbfb",
-      300: "#f9f9f9",
-      400: "#f8f8f8",
-      500: "#f6f6f6",
-      600: "#e0e0e0",
-      700: "#afafaf",
-      800: "#878787",
-      900: "#676767",
-    }
-  },
-  disabled: {
-    50: "#fcfcfc",
-    100: "#f7f7f7",
-    200: "#f3f3f3",
-    300: "#ededed",
-    400: "#e9e9e9",
-    500: "#e4e4e4",
-    600: "#cfcfcf",
-    700: "#a2a2a2",
-    800: "#7d7d7d",
-    900: "#606060",
-  }
-};
-
-export default palette;

package/src/Theme/Default/theme.ts

@@ -1,16 +0,0 @@
-import { extendTheme } from "@chakra-ui/react";
-import palette from "./palette";
-import { CustomThemeProps } from "../themeProps";
-import common from "../common";
-import fonts from "../fonts";
-import { componentStyles } from "../componentStyles";
-
-const lavender: CustomThemeProps = {
-  colors: palette,
-  ...fonts,
-  ...common,
-};
-export default extendTheme({
-  ...lavender,
-  components: componentStyles,
-});