pixelize-design-library 2.1.19 → 2.1.20

package/src/Components/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,154 @@
+import React, {
+  useState,
+  KeyboardEvent,
+  ChangeEvent,
+  useRef,
+  useEffect,
+} from "react";
+import {
+  Box,
+  Flex,
+  Tag,
+  TagLabel,
+  TagCloseButton,
+  Input,
+  Text,
+} from "@chakra-ui/react";
+import { MultiSelctOPtions, MultiSelectProps } from "./MultiSelectProps";
+import { TextLabel } from "../Common/FormLabel";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+
+const generateUniqueId = (() => {
+  let counter = 0;
+  return () => {
+    counter += 1;
+    return `${Date.now()}-${counter}`;
+  };
+})();
+
+export default function MultiSelect({
+  value,
+  onValueChange,
+  width = "100%",
+  label = "label",
+  isRequired = true,
+  isInformation = false,
+  informationMessage = "",
+  name,
+  id,
+  placeholderText = "Type valid email and press enter",
+  isDisabled,
+  isReadOnly,
+  size,
+  inputStyle,
+}: MultiSelectProps) {
+  const theme = useCustomTheme();
+
+  const getPadding = () => {
+    return "0.5rem";
+  };
+
+  const [options, setOptions] = useState<MultiSelctOPtions[]>(value);
+  const [inputValue, setInputValue] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setOptions(value);
+  }, [value]);
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+    setError("");
+  };
+
+  const validateEmail = (email: string) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && inputValue.trim() !== "") {
+      if (!validateEmail(inputValue)) {
+        setError("Invalid email address");
+        return;
+      }
+      const existingOption = options.find(
+        (option) => option.label === inputValue
+      );
+      if (!existingOption) {
+        const newOption = { id: generateUniqueId(), label: inputValue };
+        const updatedOptions = [...options, newOption];
+        setOptions(updatedOptions);
+        onValueChange(updatedOptions);
+        setInputValue("");
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }
+    } else if (e.key === "Backspace" && inputValue === "") {
+      const updatedOptions = options.slice(0, -1); // Remove the last item
+      setOptions(updatedOptions);
+      onValueChange(updatedOptions);
+    }
+  };
+
+  const handleRemove = (optionToRemove: MultiSelctOPtions) => {
+    const updatedOptions = options.filter(
+      (option) => option.id !== optionToRemove.id
+    );
+    setOptions(updatedOptions);
+    onValueChange(updatedOptions);
+  };
+
+  return (
+    <Box width={width} borderRadius="md" backgroundColor="white">
+      {label && (
+        <TextLabel
+          label={label}
+          isRequired={isRequired}
+          isInformation={isInformation}
+          informationMessage={informationMessage}
+        />
+      )}
+      <Flex wrap="wrap" gap={2}>
+        {options.map((option) => (
+          <Tag key={option.id} size="md" variant="solid" colorScheme="gray">
+            <TagLabel>{option.label}</TagLabel>
+            <TagCloseButton onClick={() => handleRemove(option)} />
+          </Tag>
+        ))}
+      </Flex>
+      <Input
+        ref={inputRef}
+        type="text"
+        value={inputValue}
+        isDisabled={isDisabled}
+        isReadOnly={isReadOnly}
+        id={id}
+        name={name}
+        size={size}
+        style={{
+          ...inputStyle,
+          backgroundColor: theme.colors.backgroundColor.light,
+          fontWeight: 600,
+          color: theme.colors.gray[600],
+          padding: getPadding(),
+          fontSize: 15,
+          letterSpacing: 0.7,
+          borderRadius: "0.125rem",
+        }}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholderText}
+        marginTop={2}
+        marginLeft={1}
+      />
+      {error && (
+        <Text color="red.500" marginTop={2} marginLeft={1}>
+          {error}
+        </Text>
+      )}
+    </Box>
+  );
+}

package/src/Components/MultiSelect/MultiSelectProps.tsx

@@ -0,0 +1,20 @@
+export type MultiSelectProps = {
+  value: MultiSelctOPtions[];
+  onValueChange: (options: MultiSelctOPtions[]) => void;
+  width?: string;
+  label?: string;
+  id?: string;
+  name?: string;
+  isRequired?: boolean;
+  isInformation?: boolean;
+  informationMessage?: string;
+  placeholderText?: string;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  size?: string;
+  inputStyle?: {};
+};
+export type MultiSelctOPtions = {
+  id: string;
+  label: string;
+};

package/src/Components/NavigationBar/NavBar.stories.tsx

@@ -0,0 +1,27 @@
+// // NavBar.stories.tsx
+
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react/types-6-0';
+// import NavBar from './NavigationBar';
+// import { NavbarProps } from './NavigationBarProps';
+
+// export default {
+//     title: 'Components/NavBar/NavBar',
+//     component: NavBar,
+// } as Meta;
+
+// const Template: StoryFn<NavbarProps> = (args) => <NavBar {...args} />;
+
+// export const Default = Template.bind({});
+// Default.args = {
+//     userAvathar: 'https://example.com/avatar.jpg',
+//     userName: 'John Doe',
+//     navMenu: [
+//         { title: 'Menu 1', url: '/menu1' },
+//         { title: 'Menu 2', url: '/menu2' },
+//     ],
+//     handleNavOnClick: (url: string) => console.log(`Navigate to ${url}`),
+//     handleLogout: () => console.log('Logout'),
+//     logoutText: 'Logout',
+// };
+export {};

package/src/Components/NavigationBar/NavigationBar.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import {
+  Avatar,
+  Box,
+  Button,
+  Center,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuDivider,
+  MenuItem,
+  MenuList,
+  Stack,
+  Text,
+} from "@chakra-ui/react";
+import { MenuProps, NavbarProps } from "./NavigationBarProps";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { CircleArrowLeft, LogOut } from "lucide-react";
+
+export default function NavBar({
+  userAvathar,
+  userName,
+  navMenu,
+  moreIcon,
+  handleNavOnClick,
+  handleLogout,
+  logoutText,
+  navigationBarText,
+}: NavbarProps) {
+  const theme = useCustomTheme();
+  return (
+    <Box
+      bg={theme.colors.backgroundColor.light}
+      px={4}
+      boxShadow={theme.shadows.sm}
+    >
+      <Flex h={16} alignItems={"center"} justifyContent={"space-between"}>
+        <Box display={"flex"} gap={1.5} alignItems={"center"}>
+          {navigationBarText?.onIconClick && (
+            <Box
+              width={"1.5rem"}
+              height={"1.5rem"}
+              display={"flex"}
+              alignItems={"center"}
+              justifyContent={"center"}
+              cursor={"pointer"}
+              onClick={() => navigationBarText?.onIconClick?.()}
+            >
+              <CircleArrowLeft
+                size={"1.25rem"}
+                color={theme?.colors?.text?.[500]}
+              />
+            </Box>
+          )}
+          {navigationBarText?.text && (
+            <Text
+              color={theme?.colors?.secondary?.[500]}
+              fontSize={"1.25rem"}
+              fontWeight={600}
+              fontFamily={"open-sans, sans-serif"}
+              letterSpacing={"-0.013rem"}
+            >
+              {navigationBarText?.text}
+            </Text>
+          )}
+        </Box>
+        <Flex>
+          <Stack direction={"row"} alignItems={"center"} spacing={7}>
+            <Menu>
+              <Box cursor={"pointer"}>{moreIcon}</Box>
+              <MenuButton
+                as={Button}
+                rounded={"full"}
+                variant={"link"}
+                cursor={"pointer"}
+                minW={0}
+              >
+                <Avatar size={"sm"} name={userName} src={userAvathar} />
+              </MenuButton>
+              <MenuList alignItems={"center"} zIndex={5}>
+                <Center py={4}>
+                  <Avatar size={"xl"} name={userName} src={userAvathar} />
+                </Center>
+                <Center>
+                  <Text fontWeight={500}>{userName}</Text>
+                </Center>
+                <MenuDivider />
+                {navMenu?.map((menu: MenuProps) => (
+                  <MenuItem
+                    onClick={() => handleNavOnClick(menu.url)}
+                    key={menu.title}
+                    sx={{
+                      fontWeight: 500,
+                      gap: theme.space["2"],
+                    }}
+                    _hover={{
+                      backgroundColor: theme.colors.primary["50"],
+                    }}
+                  >
+                    {menu.icon && <Box>{menu?.icon}</Box>}
+                    <Box>{menu.title}</Box>
+                  </MenuItem>
+                ))}
+                <MenuDivider />
+                <MenuItem
+                  onClick={handleLogout}
+                  sx={{
+                    fontWeight: 500,
+                    gap: theme.space["2"],
+                  }}
+                  _hover={{
+                    backgroundColor: theme.colors.primary["50"],
+                  }}
+                >
+                  <Box>{<LogOut size={16} />}</Box>
+                  <Box>{logoutText}</Box>
+                </MenuItem>
+              </MenuList>
+            </Menu>
+          </Stack>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+}

package/src/Components/NavigationBar/NavigationBarProps.tsx

@@ -0,0 +1,19 @@
+export type NavbarProps = {
+  userAvathar: string;
+  userName: string;
+  navMenu: MenuProps[];
+  moreIcon?: any;
+  handleNavOnClick: (url: string) => void;
+  handleLogout: () => void;
+  logoutText: string;
+  navigationBarText?: {
+    text: string;
+    onIconClick?: () => void;
+  };
+};
+
+export type MenuProps = {
+  title: string;
+  url: string;
+  icon?: React.ReactNode;
+};