pixelize-design-library 2.1.18 → 2.1.20

package/src/Components/Form/FormWrapper.tsx

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

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

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

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

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

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

@@ -0,0 +1,56 @@
+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/{dist/Components/Input/Input/InputProps.d.ts → src/Components/Input/Input/InputProps.tsx}

@@ -14,4 +14,5 @@ export type InputProps = {
     autoComplete?: string;
     autoFocus?: boolean;
     isRequired?: boolean;
-};
+
+}

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

@@ -0,0 +1,46 @@
+// 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 {};