pixelize-design-library 2.1.20 → 2.1.22

package/src/Components/ProfilePhotoViewer/ProfilePhotoViewer.tsx

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

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

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

@@ -1,31 +0,0 @@
-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/src/Components/RadioButton/RadioButton.stories.tsx

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

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

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

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

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

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

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