pixelize-design-library 2.1.20 → 2.1.21

package/src/Components/Form/FormWrapper.tsx

@@ -1,47 +0,0 @@
-import { Box, Icon } from "@chakra-ui/react";
-import React, { ElementType } from "react";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-
-const FormWrapper = ({
-  icon,
-  text,
-  children,
-}: {
-  icon?: ElementType;
-  text?: string;
-  children: React.ReactNode;
-}) => {
-  const { colors } = useCustomTheme();
-  return (
-    <Box>
-      <Box display="flex" alignItems="center" gap={2} mb={2}>
-        {icon && <Icon as={icon} size={"1rem"} color={colors?.header?.[500]} />}
-        {text && (
-          <Box
-            fontFamily={"open-sans, sans-serif"}
-            fontWeight={600}
-            fontSize={12}
-            lineHeight="100%"
-            letterSpacing="4%"
-            textTransform="uppercase"
-            color={colors?.header?.[500]}
-          >
-            {text}
-          </Box>
-        )}
-      </Box>
-
-      <Box
-        borderRadius="0.25rem"
-        bg={colors?.white}
-        border={`0.075rem solid ${colors?.border?.[500]}`}
-        boxShadow={`0 0.063rem 0.125rem 0 ${colors?.boxShadow?.primary}`}
-        p={"1.5rem"}
-      >
-        {children}
-      </Box>
-    </Box>
-  );
-};
-
-export default FormWrapper;

package/src/Components/Header/Header.tsx

@@ -1,92 +0,0 @@
-import { Box, Flex, HStack, IconButton, useDisclosure } from "@chakra-ui/react";
-import { MenuIcon, X } from "lucide-react";
-import React, { FC, useState } from "react";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-import { HeaderProps } from "./HeaderProps";
-import DesktopMenu from "./components/desktopMenu";
-import MobileMenu from "./components/mobileMenu";
-
-const Header: FC<HeaderProps> = ({
-  logo,
-  menuItems,
-  rightSlot,
-  active,
-  colors,
-}) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const [hoveredMenu, setHoveredMenu] = useState<string | null>(null);
-  const { colors: themeColor } = useCustomTheme();
-
-  const bg = colors?.bg ?? themeColor?.gray?.[700];
-  const color = colors?.color ?? themeColor?.background?.[100];
-  const activeBg = colors?.active ?? themeColor?.primary?.[400];
-  const hoverBg = colors?.hover ?? themeColor?.gray?.[500];
-
-  const isActive = (href?: string) => href && active === href;
-
-  return (
-    <Box
-      bg={bg}
-      color={color}
-      px={4}
-      shadow="md"
-      //   position="sticky"
-      //   top="0"
-      zIndex={1000}
-    >
-      <Flex h={16} align="center" mx="auto">
-        {/* Logo */}
-        <Box cursor={"pointer"}>{logo}</Box>
-
-        {/* Desktop Menu */}
-        <DesktopMenu
-          menuItems={menuItems}
-          rightSlot={rightSlot}
-          setHoveredMenu={setHoveredMenu}
-          isActive={isActive}
-          activeBg={activeBg}
-          hoveredMenu={hoveredMenu}
-          hoverBg={hoverBg}
-          color={color}
-        />
-
-        {/* Right Slot */}
-        <HStack spacing={4} display={{ base: "none", md: "flex" }}>
-          {rightSlot}
-        </HStack>
-
-        {/* Mobile Toggle */}
-        <IconButton
-          variant="unstyled"
-          icon={
-            <Box
-              display="flex"
-              alignItems="center"
-              justifyContent="center"
-              w="full"
-              h="full"
-            >
-              {isOpen ? <X size={20} /> : <MenuIcon size={20} />}
-            </Box>
-          }
-          aria-label="Toggle Menu"
-          display={{ md: "none" }}
-          onClick={isOpen ? onClose : onOpen}
-        />
-      </Flex>
-
-      {/* Mobile Menu */}
-      <MobileMenu
-        menuItems={menuItems}
-        isOpen={isOpen}
-        isActive={isActive}
-        hoverBg={hoverBg}
-        activeBg={activeBg}
-        color={color}
-        rightSlot={rightSlot}
-      />
-    </Box>
-  );
-};
-
-export default Header;

package/src/Components/Header/HeaderActions.tsx

@@ -1,96 +0,0 @@
-import { Box, Text } from "@chakra-ui/react";
-import React from "react";
-import { CirclePlus, SquarePen } from "lucide-react";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-import { OptionProp } from "../Select/SelectProps";
-import Select from "../Select/Select";
-import VeritcalDivider from "../Divider/Divider";
-
-const HeaderActions = ({
-  select,
-  edit,
-  create,
-}: {
-  select?: {
-    isSelect?: boolean;
-    options?: OptionProp[];
-    onSelectChange?: (option?: OptionProp) => void;
-    selectPlaceholderText?: string;
-    width?: string;
-    value?: string;
-  };
-  edit?: {
-    isEditable?: boolean;
-    onEdit?: () => void;
-    label?: string;
-  };
-  create?: {
-    isCreatable?: boolean;
-    onCreate?: () => void;
-    label?: string;
-  };
-}) => {
-  const { colors } = useCustomTheme();
-
-  const elements: React.ReactNode[] = [];
-
-  if (select?.isSelect) {
-    elements.push(
-      <Select
-        key="select"
-        options={select.options ?? []}
-        placeholder={select.selectPlaceholderText}
-        width={select.width ?? "12.5rem"}
-        onChange={(option) => select.onSelectChange?.(option)}
-        value={select.value}
-      />
-    );
-  }
-
-  if (edit?.isEditable) {
-    elements.push(
-      <Box
-        key="edit"
-        display="flex"
-        alignItems="center"
-        gap="0.375rem"
-        cursor="pointer"
-        fontSize={14}
-        onClick={() => edit.onEdit?.()}
-      >
-        <SquarePen size={20} color={colors?.text?.[500]} />
-        <Text color={colors?.secondary?.[500]}>{edit.label ? edit.label : "Edit Layout"}</Text>
-      </Box>
-    );
-  }
-
-  if (create?.isCreatable) {
-    elements.push(
-      <Box
-        key="create"
-        display="flex"
-        alignItems="center"
-        gap="0.375rem"
-        cursor="pointer"
-        fontSize={14}
-        onClick={() => create.onCreate?.()}
-      >
-        <CirclePlus size={20} color={colors?.text?.[500]} />
-        <Text color={colors?.secondary?.[500]}> {create.label ? create.label : "Create New"} </Text>
-      </Box>
-    );
-  }
-
-  return (
-    <Box display="flex" alignItems="center" gap="0.625rem">
-      {elements.map((el, i) => (
-        <React.Fragment key={i}>
-          {i > 0 && <VeritcalDivider />}
-          {el}
-        </React.Fragment>
-      ))}
-    </Box>
-  );
-};
-
-export default HeaderActions;

package/src/Components/Header/HeaderProps.ts

@@ -1,72 +0,0 @@
-type SubItem = {
-  label: string;
-  href: string;
-  badge?: {
-    label: string;
-    colorScheme?:
-      | "blue"
-      | "cyan"
-      | "gray"
-      | "green"
-      | "orange"
-      | "pink"
-      | "purple"
-      | "red"
-      | "teal"
-      | "yellow"
-      | "whiteAlpha"
-      | "blackAlpha"
-      | undefined;
-  };
-  onClick?: () => void;
-};
-
-type MenuItemProp = {
-  label: string;
-  href?: string;
-  badge?: {
-    label: string;
-    colorScheme?:
-      | "blue"
-      | "cyan"
-      | "gray"
-      | "green"
-      | "orange"
-      | "pink"
-      | "purple"
-      | "red"
-      | "teal"
-      | "yellow"
-      | "whiteAlpha"
-      | "blackAlpha"
-      | undefined;
-  };
-  onClick?: () => void;
-  children?: SubItem[];
-};
-
-export type HeaderProps = {
-  logo: React.ReactNode;
-  menuItems: MenuItemProp[];
-  rightSlot?: React.ReactNode;
-  active?: string;
-  colors?: {
-    bg: string;
-    color: string;
-    active: string;
-    hover: string;
-  };
-};
-
-export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
-  setHoveredMenu: (menu: string | null) => void;
-  isActive: (href?: string) => boolean | "" | undefined;
-  activeBg: string;
-  hoveredMenu: string | null;
-  hoverBg: string;
-  color: string;
-};
-
-export type MobileMenuProps = Pick<HeaderProps, 'menuItems' | 'rightSlot'> & Pick<DesktopMenuProps, 'isActive' | 'activeBg' |'color' | 'hoverBg'> & {
-    isOpen: boolean;
-}

package/src/Components/Header/components/desktopMenu.tsx

@@ -1,116 +0,0 @@
-import {
-  Box,
-  HStack,
-  Stack,
-  Button,
-  Badge,
-  Text,
-  VStack,
-  Collapse,
-} from "@chakra-ui/react";
-import { ChevronDown } from "lucide-react";
-import React from "react";
-import { DesktopMenuProps, } from "../HeaderProps";
-import { useCustomTheme } from "../../../Theme/useCustomTheme";
-
-const DesktopMenu = ({
-  menuItems,
-  rightSlot,
-  setHoveredMenu,
-  isActive,
-  activeBg,
-  hoveredMenu,
-  hoverBg,
-  color,
-}: DesktopMenuProps) => {
-  const { colors } = useCustomTheme();
-  return (
-    <HStack
-      spacing={6}
-      align="center"
-      display={{ base: "none", md: "flex" }}
-      mx={rightSlot ? "auto" : 0}
-    >
-      {menuItems.map((item) => {
-        const hasChildren = !!item.children;
-        const isHovered = hoveredMenu === item.label;
-
-        return (
-          <Box
-            key={item.label}
-            position="relative"
-            onMouseEnter={() => hasChildren && setHoveredMenu(item.label)}
-            onMouseLeave={() => hasChildren && setHoveredMenu(null)}
-          >
-            <Button
-              variant="ghost"
-              onClick={item.onClick}
-              rightIcon={hasChildren ? <ChevronDown size={14} /> : undefined}
-              bg={isActive(item.href) ? activeBg : "transparent"}
-              _hover={{ bg: hoverBg }}
-              color={color}
-            >
-              <VStack spacing={0}>
-                {item.badge && (
-                  <Badge
-                    colorScheme={item?.badge?.colorScheme ?? "blue"}
-                    fontSize="0.6em"
-                  >
-                    {item.badge?.label}
-                  </Badge>
-                )}
-                <Text>{item.label}</Text>
-              </VStack>
-            </Button>
-
-            {hasChildren && (
-              <Collapse in={isHovered} animateOpacity>
-                <Box
-                  position="absolute"
-                  top="100%"
-                  bg={colors?.white}
-                  color={colors?.black}
-                  rounded="md"
-                  shadow="md"
-                  minW="10rem"
-                  zIndex={10}
-                >
-                  <Stack spacing={1} p={2}>
-                    {item.children?.map((subItem) => (
-                      <Button
-                        key={subItem.label}
-                        onClick={subItem.onClick}
-                        variant="ghost"
-                        justifyContent="flex-start"
-                        w="full"
-                        bg={isActive(subItem.href) ? activeBg : "transparent"}
-                        _hover={{ bg: hoverBg }}
-                      >
-                        <VStack spacing={0} align="start">
-                          {subItem.badge && (
-                            <Badge
-                              colorScheme={
-                                subItem?.badge?.colorScheme ?? "blue"
-                              }
-                              fontSize="0.6em"
-                              alignItems={"end"}
-                            >
-                              {subItem.badge?.label}
-                            </Badge>
-                          )}
-                          <Text>{subItem.label}</Text>
-                        </VStack>
-                      </Button>
-                    ))}
-                  </Stack>
-                </Box>
-              </Collapse>
-            )}
-          </Box>
-        );
-      })}
-    </HStack>
-  );
-};
-
-export default DesktopMenu;

package/src/Components/Header/components/mobileMenu.tsx

@@ -1,99 +0,0 @@
-import {
-  Box,
-  Stack,
-  Button,
-  Badge,
-  Text,
-  VStack,
-  Collapse,
-} from "@chakra-ui/react";
-import React from "react";
-import { MobileMenuProps } from "../HeaderProps";
-
-const MobileMenu = ({
-  menuItems,
-  isOpen,
-  isActive,
-  hoverBg,
-  activeBg,
-  color,
-  rightSlot,
-}: MobileMenuProps) => {
-  return (
-    <Collapse in={isOpen} animateOpacity>
-      <Box pb={4} display={{ md: "none" }}>
-        <Stack spacing={4}>
-          {menuItems.map((item) =>
-            item.children ? (
-              <Box key={item.label} px={2}>
-                <VStack spacing={0} align="start">
-                  {item.badge && (
-                    <Badge
-                      colorScheme={item?.badge?.colorScheme ?? "blue"}
-                      fontSize="0.6em"
-                    >
-                      {item.badge.label}
-                    </Badge>
-                  )}
-                  <Text fontWeight="medium">{item.label}</Text>
-                </VStack>
-                <Stack pl={4} mt={1}>
-                  {item.children.map((subItem) => (
-                    <Button
-                      key={subItem.label}
-                      onClick={subItem.onClick}
-                      variant="ghost"
-                      w="full"
-                      justifyContent="flex-start"
-                      color={color}
-                      bg={isActive(subItem.href) ? activeBg : "transparent"}
-                      _hover={{ bg: hoverBg }}
-                    >
-                      <VStack spacing={0} align="start">
-                        {subItem.badge && (
-                          <Badge
-                            colorScheme={subItem?.badge?.colorScheme ?? "blue"}
-                            fontSize="0.6em"
-                          >
-                            {subItem.badge?.label}
-                          </Badge>
-                        )}
-                        <Text>{subItem.label}</Text>
-                      </VStack>
-                    </Button>
-                  ))}
-                </Stack>
-              </Box>
-            ) : (
-              <Button
-                key={item.label}
-                onClick={item.onClick}
-                variant="ghost"
-                w="full"
-                justifyContent="flex-start"
-                color={color}
-                bg={isActive(item.href) ? activeBg : "transparent"}
-                _hover={{ bg: hoverBg }}
-              >
-                <VStack spacing={0} align="start">
-                  {item.badge && (
-                    <Badge
-                      colorScheme={item?.badge?.colorScheme ?? "blue"}
-                      fontSize="0.6em"
-                    >
-                      {item.badge?.label}
-                    </Badge>
-                  )}
-                  <Text>{item.label}</Text>
-                </VStack>
-              </Button>
-            )
-          )}
-          {rightSlot && <Box mt={4}>{rightSlot}</Box>}
-        </Stack>
-      </Box>
-    </Collapse>
-  );
-};
-
-export default MobileMenu;

package/src/Components/Input/Input/Input.tsx

@@ -1,56 +0,0 @@
-import React, { useState } from "react";
-import { InputProps } from "./InputProps";
-import { Eye, EyeOff } from 'lucide-react';
-import Label from "../../Common/Label";
-import ErrorComponent from "../../Common/ErrorComponent";
-
-const Input = ({ label,
-    type,
-    value,
-    onChange,
-    error,
-    placeholder, className, inputBoxClassName, isRequired }: InputProps) => {
-    const [showPassword, setShowPassword] = useState(false);
-    const isPassword = type === "password";
-    const inputType = isPassword ? (showPassword ? "text" : "password") : type;
-    return (
-        <div className={`mb-4 ${inputBoxClassName ?? ""}`}>
-            <Label label={label} isRequired={isRequired} />
-            <div className="relative w-full overflow-hidden">
-                <input
-                    type={inputType}
-                    value={value}
-                    onChange={(e) => onChange(e.target.value)}
-                    placeholder={placeholder}
-                    className={`${className && ` ${className}`} w-full px-4 py-2 rounded-md border focus:outline-none focus:ring-purple-500
-                    ${error ? "border-red-500 text-[#161B25]" : ''}
-                    ${value ? "border-purple-500 text-gray-900" : "border-gray-300 text-gray-900"}
-                    ${error ? "focus:ring-red-400" : ''}
-                    ${value ? "focus:ring-purple-500" : "focus:ring-indigo-300"}
-                    ${isPassword ? "pr-10" : ""}
-                    `}
-                    required={isRequired}
-                />
-                {isPassword && (
-                    <button
-                        type="button"
-                        className="absolute inset-y-0 right-3 flex items-center text-gray-400"
-                        onClick={() => setShowPassword((prev) => !prev)}
-                    >
-                        {showPassword ? (
-                            <Eye className="h-5 w-5" />
-
-                        ) : (
-                            <EyeOff className="h-5 w-5" />
-
-                        )}
-                    </button>
-                )}
-            </div>
-            {error && (
-                <ErrorComponent error={error} />
-            )}
-        </div>
-    );
-}
-export default React.memo(Input);

package/src/Components/Input/TextInput.stories.tsx

@@ -1,46 +0,0 @@
-// import React from "react";
-// import type { Meta, StoryObj } from "@storybook/react";
-// import { fn } from "@storybook/test";
-// import { TextInputProps } from "./TextInputProps";
-// import TextInput from "./TextInput";
-// import { useState } from "react";
-
-// const meta: Meta<typeof TextInput> = {
-//   title: "Components/Input/TextInput",
-//   component: TextInput,
-//   parameters: {
-//     layout: "centered",
-//   },
-//   tags: ["autodocs"],
-// };
-
-// export default meta;
-// type Story = StoryObj<typeof meta>;
-
-// const TextInputTemplate = (args: TextInputProps) => {
-//   const [value, setValue] = useState("");
-//   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-//     setValue(e.target.value);
-//   };
-//   return <TextInput {...args} onChange={handleChange} value={value} />;
-// };
-
-// export const Primary: Story = {
-//   args: {
-//     label: "Button",
-//     onChange: fn(),
-//     onBlur: fn(),
-//     onFocus: fn(),
-//     isDisabled: false,
-//     isReadOnly: false,
-//     isRequired: false,
-//     value: "",
-//     placeholder: "Placeholder",
-//     width: 500,
-//     error: true,
-//     errorMessage: "jhkjhkjh",
-//     helperText: "",
-//   },
-//   render: (args) => TextInputTemplate(args),
-// };
-export {};