pixelize-design-library 2.1.18 → 2.1.20

package/src/Components/ProfilePhotoViewer/ProfilePhotoViewer.tsx

@@ -0,0 +1,177 @@
+import React, { ChangeEvent, useRef, useState } from "react";
+import { Box, Image, IconButton, Input, Text, Tooltip } from "@chakra-ui/react";
+import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
+import { Eye, FileText, SquarePen, User } from "lucide-react";
+
+export default function ProfilePhotoViewer({
+  photoUrl,
+  onPhotoChange,
+  imageWidth = "100px",
+  imageAlt = "Profile Photo",
+  imageObjectFit = "cover",
+  imageBorderRadius = "full",
+  editIconSize = "sm",
+  editIconPositionRight = "0px",
+  editIconPositionBottom = "0px",
+  isRound = true,
+  boxStyle,
+  isEditable = false,
+  isView = false,
+  style,
+  handleIsView,
+  fallbackText,
+}: ProfilePhotoViewerProps) {
+  const [photo, setPhoto] = useState<string>(photoUrl);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handlePhotoChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (!isEditable) return;
+    const file = event.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const photoUrl = reader.result as string;
+        setPhoto(photoUrl);
+        onPhotoChange(file);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+  const handleClick = () => {
+    if (!isEditable) return;
+    fileInputRef.current?.click();
+  };
+
+  const isPdf = photo?.endsWith(".pdf");
+
+  return (
+    <Box
+      position="relative"
+      display="inline-block"
+      style={boxStyle}
+      sx={{
+        "&:hover .icon-button": {
+          opacity: 1,
+        },
+      }}
+    >
+      {photo ? (
+        isPdf ? (
+          <Box
+            width={imageWidth}
+            height={imageWidth}
+            borderRadius={imageBorderRadius}
+            bg="gray.200"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            overflow="hidden"
+          >
+            <FileText size={"50%"} />
+          </Box>
+        ) : (
+          <Image
+            src={photo}
+            alt={imageAlt}
+            boxSize={imageWidth}
+            objectFit={imageObjectFit}
+            borderRadius={imageBorderRadius}
+          />
+        )
+      ) : fallbackText ? (
+        <Box
+          boxSize={imageWidth}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          borderRadius={imageBorderRadius}
+          bg="gray.200"
+        >
+          <Text fontSize="2xl" fontWeight="bold">
+            {fallbackText}
+          </Text>
+        </Box>
+      ) : (
+        <Box
+          boxSize={imageWidth}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          borderRadius={imageBorderRadius}
+          bg="gray.200"
+        >
+          <User size="50%" />
+        </Box>
+      )}
+
+      {(isEditable || isView) && (
+        <>
+          <Box
+            className="icon-button"
+            position="absolute"
+            right={editIconPositionRight}
+            bottom={editIconPositionBottom}
+            transform="translate(-25%, -25%)"
+            sx={{
+              opacity: 0,
+              transition: "opacity 0.3s",
+            }}
+          >
+            {isEditable && (
+              <Tooltip label="Edit" aria-label="Edit">
+                <IconButton
+                  icon={<SquarePen size={14}/>}
+                  isRound={isRound}
+                  size={editIconSize}
+                  onClick={handleClick}
+                  aria-label="Edit photo"
+                  style={{
+                    ...style,
+                    transition: "transform 0.3s, box-shadow 0.3s",
+                    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
+                    marginRight: "3px",
+                  }}
+                  _hover={{
+                    transform: "scale(1.1)",
+                    color: "blue.500",
+                    boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
+                  }}
+                />
+              </Tooltip>
+            )}
+            {isView && (
+              <Tooltip label="View" aria-label="View">
+                <IconButton
+                  icon={<Eye size={14}/>}
+                  isRound={isRound}
+                  size={editIconSize}
+                  onClick={handleIsView}
+                  aria-label="View photo"
+                  style={{
+                    ...style,
+                    transition: "transform 0.3s, box-shadow 0.3s",
+                    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
+                  }}
+                  _hover={{
+                    transform: "scale(1.1)",
+                    color: "blue.500",
+                    boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
+                  }}
+                />
+              </Tooltip>
+            )}
+          </Box>
+          {isEditable && (
+            <Input
+              type="file"
+              accept="image/*"
+              onChange={handlePhotoChange}
+              hidden
+              ref={fileInputRef}
+            />
+          )}
+        </>
+      )}
+    </Box>
+  );
+}

package/src/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.tsx

@@ -0,0 +1,18 @@
+export type ProfilePhotoViewerProps = {
+  photoUrl: string;
+  onPhotoChange: (photoUrl: File) => void;
+  imageWidth?: string;
+  imageAlt?: string;
+  imageObjectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+  imageBorderRadius?: string;
+  isEditable?: boolean;
+  editIconSize?: string;
+  editIconPositionRight?: string;
+  editIconPositionBottom?: string;
+  isRound?: boolean;
+  boxStyle?: React.CSSProperties;
+  isView?: boolean;
+  style?: React.CSSProperties;
+  handleIsView?: () => void;
+  fallbackText?: string;
+};

package/src/Components/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,48 @@
+// import React from 'react';
+// import { Meta, StoryFn } from '@storybook/react';
+// import { ChakraProvider } from '@chakra-ui/react';
+// import ProgressBar from './ProgressBar'; // Adjust the import path and component type if needed
+// import { ProgressBarProps } from "./ProgressBarProps";
+
+// export default {
+//   title: 'Components/ProgressBar/ProgressBar',
+//   component: ProgressBar,
+//   argTypes: {
+//     size: { control: { type: 'select', options: ['sm', 'md', 'lg'] } },
+//     variant: {
+//         control: { type: 'select', options: ["solid","outline","ghost","link"] },
+//         defaultValue: 'solid'
+//       },
+//       color: {
+//         control: { type: 'select', options: ["gray" ,"red" ,"orange" ,"yellow" ,"green" ,"teal" ,"blue" ,"cyan" ,"purple" ,"pink" ,"whiteAlpha" ,"blackAlpha"] },
+//         defaultValue: 'blue'
+//       },
+//     height: { control: { type: 'text' } },
+//     value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+//     max: { control: { type: 'number' } },
+//     min: { control: { type: 'number' } },
+//   },
+// } as Meta;
+
+// const Template: StoryFn<ProgressBarProps> = (args) => (
+//   <ChakraProvider>
+//     <ProgressBar {...args} />
+//   </ChakraProvider>
+// );
+
+// // Default Story
+// export const Default = Template.bind({});
+// Default.args = {
+//   size: 'md', // Provide appropriate size
+//   isIndeterminate: false, // Provide appropriate value
+//   color: 'blue', // Provide appropriate color scheme
+//   hasStripe: true, // Provide appropriate value
+//   height: '12px', // Provide appropriate height
+//   value: 50, // Provide appropriate value
+//   isAnimated: true, // Provide appropriate value
+//   max: 100, // Provide appropriate value
+//   min: 0, // Provide appropriate value
+//   variant: 'solid', // Provide appropriate variant
+// };
+
+export {};

package/src/Components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Progress } from "@chakra-ui/react";
+import { ProgressBarProps } from "./ProgressBarProps";
+
+export default function ProgressBar({
+  size,
+  isIndeterminate,
+  color,
+  hasStripe,
+  height,
+  value,
+  isAnimated,
+  max,
+  min,
+  variant,
+}: ProgressBarProps) {
+  return (
+    <Progress
+      size={size}
+      isIndeterminate={isIndeterminate}
+      colorScheme={color}
+      hasStripe={hasStripe}
+      height={height}
+      value={value}
+      isAnimated={isAnimated}
+      max={max}
+      min={min}
+      variant={variant}
+    />
+  );
+}

package/{dist/Components/ProgressBar/ProgressBarProps.d.ts → src/Components/ProgressBar/ProgressBarProps.tsx}

@@ -1,6 +1,7 @@
 import { ProgressProps } from "@chakra-ui/react";
-export type ProgressBarProps = Pick<ProgressProps, "size" | "isIndeterminate" | "value" | "height" | "hasStripe" | "isAnimated" | "max" | "min"> & {
-    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
-    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
-    size?: "lg" | "md" | "sm" | "xs";
-};
+
+export type ProgressBarProps =Pick<ProgressProps,"size"|"isIndeterminate"|"value"|"height"|"hasStripe"|"isAnimated"|"max"|"min">&{
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha",
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled",
+    size?: "lg" | "md" | "sm" | "xs",
+}

package/src/Components/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,47 @@
+// import React, { useState } from 'react';
+// import { Meta, StoryFn } from '@storybook/react';
+// import { ChakraProvider } from '@chakra-ui/react';
+// import { RadioButton, RadioButtonGroup } from './RadioButton';
+// import { ChakraRadioProps, ChakraRadioGroupProps } from './RadioButtonProps';
+
+// export default {
+//   title: 'Components/RadioButton/RadioButton',
+//   component: RadioButton,
+//   decorators: [(Story: any) => <ChakraProvider><Story /></ChakraProvider>],
+// } as Meta<typeof RadioButton>;
+
+// const RadioButtonTemplate: StoryFn<typeof RadioButton> = (args: ChakraRadioProps) => <RadioButton {...args} />;
+
+// export const SingleRadioButton = RadioButtonTemplate.bind({});
+// SingleRadioButton.args = {
+//   label: 'Option 1',
+//   value: '1',
+//   colorScheme: 'blue',
+//   size: 'md',
+// };
+
+// const RadioButtonGroupTemplate: StoryFn<typeof RadioButtonGroup> = (args: ChakraRadioGroupProps) => {
+//   const [selectedValue, setSelectedValue] = useState<string>(args.value as string);
+
+//   const handleChange = (value: string) => {
+//     setSelectedValue(value);
+//     if (args.onChange) {
+//       args.onChange(value);
+//     }
+//   };
+
+//   return <RadioButtonGroup {...args} value={selectedValue} onChange={handleChange} />;
+// };
+
+// export const RadioButtonGroupStory = RadioButtonGroupTemplate.bind({});
+// RadioButtonGroupStory.args = {
+//   options: [
+//     { label: 'Option 1', id: '1' },
+//     { label: 'Option 2', id: '2' },
+//     { label: 'Option 3', id: '3' },
+//   ],
+//   value: '1',
+//   colorScheme: 'blue',
+//   size: 'md',
+// };
+export {};

package/src/Components/RadioButton/RadioButton.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import {
+  Radio as ChakraRadio,
+  RadioGroup as ChakraRadioGroup,
+  Box,
+  Stack,
+} from "@chakra-ui/react";
+import { ChakraRadioProps, ChakraRadioGroupProps } from "./RadioButtonProps";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+
+const RadioButton = ({
+  label,
+  colorScheme,
+  isChecked,
+  onChange,
+  isDisabled,
+  size,
+  value,
+  defaultChecked,
+}: ChakraRadioProps) => {
+  const theme = useCustomTheme();
+  return (
+    <ChakraRadio
+      colorScheme={colorScheme}
+      isChecked={isChecked}
+      onChange={onChange}
+      isDisabled={isDisabled}
+      size={size}
+      value={value}
+      defaultChecked={defaultChecked}
+      sx={{
+        "&[data-checked]": {
+          backgroundColor: theme.colors.primary[500],
+          borderColor: theme.colors.primary[500]
+        },
+        "&[data-checked]:hover": {
+          backgroundColor: theme.colors.primary[300], // Change this to your desired hover color
+          borderColor: theme.colors.primary[300], // Change this to your desired hover color
+        },
+      }}
+    >
+      <Box as="span">{label}</Box>
+    </ChakraRadio>
+  );
+};
+
+const RadioButtonGroup = ({
+  options,
+  onChange,
+  value,
+  defaultValue,
+  isDisabled,
+  size,
+  colorScheme,
+}: ChakraRadioGroupProps) => {
+  return (
+    <ChakraRadioGroup
+      onChange={onChange}
+      value={value}
+      defaultValue={defaultValue}
+    >
+      <Stack direction="row" spacing={4}>
+        {options.map((option) => (
+          <RadioButton
+            key={option.id}
+            label={option.label}
+            value={option.id}
+            isDisabled={isDisabled}
+            size={size}
+            colorScheme={colorScheme}
+          />
+        ))}
+      </Stack>
+    </ChakraRadioGroup>
+  );
+};
+
+export { RadioButton, RadioButtonGroup };

package/src/Components/RadioButton/RadioButtonProps.tsx

@@ -0,0 +1,10 @@
+
+import { RadioProps, RadioGroupProps } from '@chakra-ui/react';
+
+export type ChakraRadioProps = Pick<RadioProps, | "size" | "colorScheme" | "isChecked" | "onChange" | "isDisabled" | "value" | "defaultChecked"> & {
+    label: string;
+}
+export type ChakraRadioGroupProps = Pick<RadioGroupProps, | "size" | "colorScheme" | "isDisabled" | "defaultValue" | "value"> & {
+    options: { label: string; id: string }[];
+    onChange?: (value: string) => void;
+}

package/src/Components/Reorder/Reorder.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import {
+    Badge,
+  Box,
+  Divider,
+  HStack,
+  IconButton,
+  Image,
+  Text,
+} from "@chakra-ui/react";
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  DropResult,
+} from "@hello-pangea/dnd";
+import { BetweenHorizonalStart, GripVertical } from "lucide-react";
+import { ReorderItem, ReorderListProps } from "./ReorderProps";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+
+const ReorderList = <T extends ReorderItem>({
+  label = "",
+  items,
+  onReorder,
+}: ReorderListProps<T>): JSX.Element => {
+    const { colors } = useCustomTheme();
+  const handleDragEnd = (result: DropResult) => {
+    if (!result.destination) return;
+
+    const reordered = Array.from(items);
+    const [moved] = reordered.splice(result.source.index, 1);
+    reordered.splice(result.destination.index, 0, moved);
+    onReorder(reordered);
+  };
+
+  return (
+    <Box
+      borderWidth="0.063rem"
+      borderRadius="md"
+      px={3}
+      py={2}
+      bg={colors?.white}
+    >
+      <Box display={"flex"} alignItems={"center"} gap={2}>
+        <BetweenHorizonalStart />
+        <Text
+          fontFamily={"open-sans, sans-serif"}
+          fontWeight={600}
+          fontSize={14}
+          lineHeight="100%"
+          letterSpacing="4%"
+          textTransform="uppercase"
+          py={4}
+        >
+          {label}
+        </Text>
+      </Box>
+      <Divider />
+      <br />
+      <DragDropContext onDragEnd={handleDragEnd}>
+        <Droppable droppableId="item-list" direction="horizontal">
+          {(provided) => (
+            <HStack
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+              spacing={4}
+              overflowX="auto"
+            >
+              {items.map((item, index) => (
+                <Draggable key={item.id} draggableId={item.id} index={index}>
+                  {(provided) => (
+                    <Box
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      position="relative"
+                      border="0.063rem solid"
+                      borderColor={colors?.gray?.[300]}
+                      borderRadius="md"
+                      overflow="hidden"
+                    >
+                      <Image
+                        src={item.previewUrl}
+                        alt={item.name ?? `item-${index}`}
+                        boxSize="7.5rem"
+                        objectFit="cover"
+                      />
+                      <IconButton
+                        icon={
+                          <GripVertical size={16} color={colors?.gray?.[500]} />
+                        }
+                        aria-label="Drag"
+                        size="sm"
+                        position="absolute"
+                        top={1}
+                        left={1}
+                        variant="ghost"
+                      />
+                      <Badge
+                        position={"absolute"}
+                        colorScheme="gray"
+                        variant="solid"
+                        bottom={1}
+                        right={1}
+                      >
+                        {index + 1}
+                      </Badge>
+                    </Box>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </HStack>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </Box>
+  );
+};
+
+export default ReorderList;

package/src/Components/Reorder/ReorderProps.tsx

@@ -0,0 +1,11 @@
+export interface ReorderItem {
+  id: string;
+  previewUrl: string;
+  name?: string;
+}
+
+export interface ReorderListProps<T extends ReorderItem> {
+  label?: string;
+  items: T[];
+  onReorder: (items: T[]) => void;
+}

package/src/Components/Search/Search.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useRef } from "react";
+import styled from "@emotion/styled";
+import { SearchProps } from "./SearchProps";
+import { Search as SearchIconComponent, X } from 'lucide-react';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  padding: 0.5rem 0.7rem 0.5rem 0.7rem;
+  width: 100%;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  background: #fff;
+  border: 1px solid #f1f1f1;
+`;
+
+const Input = styled.input`
+  flex: 1;
+  border: none;
+  outline: none;
+  margin-left: 0.5rem;
+  background: transparent;
+`;
+
+const SearchIcon = styled(SearchIconComponent)`
+  color: #888;
+`;
+const CloseIcon = styled(X)`
+  color: #888;
+  font-size: 1.5rem;
+`;
+
+const Shortcut = styled.span`
+  margin-left: auto;
+  padding-left: 0.5rem;
+  color: #888;
+  font-size: 0.9rem;
+`;
+
+export default function Search({
+  placeholder = "Search...",
+  onSearch,
+  onclose,
+  shortcut = "Ctrl+K",
+  query,
+}: SearchProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        shortcut &&
+        event.ctrlKey &&
+        event.key === shortcut.split("+")[1].toLowerCase()
+      ) {
+        event.preventDefault();
+        inputRef.current?.focus();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [shortcut]);
+
+  return (
+    <Container>
+      <SearchIcon />
+      <Input
+        ref={inputRef}
+        type="text"
+        value={query}
+        onChange={onSearch}
+        placeholder={placeholder}
+      />
+      {query && <CloseIcon onClick={onclose} />}
+      {shortcut && <Shortcut>{shortcut}</Shortcut>}
+    </Container>
+  );
+}

package/src/Components/Search/SearchProps.tsx

@@ -0,0 +1,7 @@
+export type SearchProps = {
+  placeholder?: string;
+  onSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  shortcut?: "Ctrl+K";
+  query?: string;
+  onclose: () => void;
+};