pixelize-design-library 2.1.20 → 2.1.22

package/src/Components/PinInputs/PinInputs.tsx

@@ -1,63 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { PinInputsProps } from './PinInputsProps'
-import Label from '../Common/Label';
-import ErrorComponent from '../Common/ErrorComponent';
-
-const PinInputs = ({ length = 3,
-    label,
-    error,
-    onChange,
-    onComplete,
-    mask = false,
-    placeholder = "*", }: PinInputsProps) => {
-    const [values, setValues] = useState<string[]>(Array(length).fill(""));
-    const inputsRef = useRef<Array<HTMLInputElement | null>>([]);
-
-    const handleChange = (index: number, value: string) => {
-        if (!/^[0-9]?$/.test(value)) return;
-        const newValues = [...values];
-        newValues[index] = value;
-        setValues(newValues);
-        onChange?.(newValues.join(""));
-
-        if (value && index < length - 1) {
-            inputsRef.current[index + 1]?.focus();
-        }
-
-        if (newValues.every((v) => v !== "")) {
-            onComplete?.(newValues.join(""));
-        }
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
-        if (e.key === "Backspace" && !values[index] && index > 0) {
-            inputsRef.current[index - 1]?.focus();
-        }
-    };
-
-    return (
-        <div>
-            {label && <Label label={label} />}
-            <div className="flex space-x-2">
-                {Array.from({ length }).map((_, index) => (
-                    <input
-                        key={index}
-                        ref={(el) => (inputsRef.current[index] = el)}
-                        type={mask ? "password" : "text"}
-                        inputMode="numeric"
-                        maxLength={1}
-                        placeholder={placeholder}
-                        value={values[index]}
-                        onChange={(e) => handleChange(index, e.target.value)}
-                        onKeyDown={(e) => handleKeyDown(e, index)}
-                        className={`w-12 h-12 text-center border rounded-md text-lg focus:outline-none focus:ring-2 ${error ? "border-red-500 focus:ring-red-300" : "border-gray-300 focus:ring-blue-500"
-                            }`}
-                    />
-                ))}
-            </div>
-            {error && <ErrorComponent error={error} />}
-        </div>
-    )
-}
-
-export default PinInputs

package/src/Components/ProductCard/ProductCard.tsx

@@ -1,77 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Box,
-  Image,
-  Badge,
-  VStack,
-} from '@chakra-ui/react';
-import ProductTags from './ProductTags';
-import ProductReview from './ProductReview';
-import ProductPrice from './ProductPrice';
-import Button from '../Button/Button';
-import ProductLabel from './ProductLabel';
-import { ProductCardProps } from './ProductCardProps';
-
-const ProductCard = ({
-  label,
-  productImage,
-  rating,
-  reviews,
-  tags,
-  options,
-  onAddToCart,
-  bag,
-  description,
-}: ProductCardProps) => {
-
-  const [hover, setHover] = useState(false);
-
-  return (
-    <Box
-      borderWidth="0.063 rem"
-      borderRadius="lg"
-      overflow="hidden"
-      p={3}
-      w="16.25rem"
-      position="relative"
-      bg={"white"}
-      boxShadow={"lg"}
-    >
-      <Box
-        onMouseEnter={() => setHover(true)}
-        onMouseLeave={() => setHover(false)}
-        h="11.25rem"
-        w="full"
-        overflow="hidden"
-      >
-        <Image
-          src={hover && productImage.hover ? productImage.hover : productImage.visibile}
-          alt={label}
-          w="full"
-          h="full"
-          objectFit="cover"
-        />
-        {bag && (
-          <Badge colorScheme={bag.color || "red"} position="absolute" top={2} right={2}>
-            {bag.label}
-          </Badge>
-        )}
-      </Box>
-
-      <VStack spacing={2} align="start" mt={3}>
-        <ProductLabel label={label} description={description} />
-        {tags && <ProductTags tags={tags} />}
-        {rating && reviews &&
-          <ProductReview rating={rating} reviewCount={reviews} />}
-
-        {options && <ProductPrice options={options} />}
-
-        {onAddToCart && <Button colorScheme="orange" size="sm" width={"100%"} onClick={onAddToCart}>
-          Add to Cart
-        </Button>}
-      </VStack>
-    </Box>
-  );
-};
-
-export default ProductCard;

package/src/Components/ProductCard/ProductLabel.tsx

@@ -1,13 +0,0 @@
-import { Box, Text } from '@chakra-ui/react'
-import React from 'react'
-
-const ProductLabel = ({ label, description }: { label: string, description?: string }) => {
-    return (
-        <Box>
-            <Text fontWeight="bold">{label}</Text>
-            {description && <Text fontSize="xs" fontStyle={"italic"}>{description}</Text>}
-        </Box>
-    )
-}
-
-export default ProductLabel

package/src/Components/ProductCard/ProductPrice.tsx

@@ -1,177 +0,0 @@
-import React, { useRef, useState, useEffect } from 'react';
-import {
-  Box,
-  Text,
-  Portal,
-  useOutsideClick,
-} from '@chakra-ui/react';
-import { options } from './ProductCardProps';
-
-type ProductPriceProps = {
-  options: options[];
-}
-
-const ProductPrice = ({ options }: ProductPriceProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [selected, setSelected] = useState(options[0]);
-  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
-  const buttonRef = useRef<HTMLDivElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const isSingleOption = options.length === 1;
-
-  useOutsideClick({
-    ref: dropdownRef,
-    handler: () => setIsOpen(false),
-  });
-
-  const getDiscountedPrice = (option: options) =>
-    Math.round(option.price - (option.price * option.offer) / 100);
-
-  useEffect(() => {
-    if (isOpen && buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect();
-      setDropdownPosition({
-        top: rect.bottom + window.scrollY,
-        left: rect.left + window.scrollX,
-        width: rect.width,
-      });
-    }
-  }, [isOpen]);
-
-  return (
-    <>
-      {/* Toggle Button or Static Box for single option */}
-      {isSingleOption ? (
-        <Box
-          border="0.063rem solid"
-          borderColor="orange.300"
-          bg="#FFFCF5"
-          px={3}
-          py={1}
-          rounded="md"
-          display="inline-block"
-          w="100%"
-        >
-          <Text fontSize="sm" fontWeight="medium">{options[0].label}</Text>
-        </Box>
-      ) : (
-        <Box
-          ref={buttonRef}
-          onClick={() => setIsOpen(!isOpen)}
-          border="0.063rem solid"
-          borderColor="orange.300"
-          bg="#FFFCF5"
-          px={3}
-          py={1}
-          rounded="md"
-          cursor="pointer"
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          w="100%"
-        >
-          <Text fontSize="sm" fontWeight="medium">{selected.label}</Text>
-          <Text
-            fontSize="xs"
-            color="orange.400"
-            transform={isOpen ? 'rotate(180deg)' : 'rotate(0deg)'}
-            transition="transform 0.2s"
-          >
-            ▾
-          </Text>
-        </Box>
-      )}
-
-      {/* Dropdown (only if multiple options) */}
-      {!isSingleOption && isOpen && (
-        <Portal>
-          <Box
-            ref={dropdownRef}
-            position="absolute"
-            top={`${dropdownPosition.top}px`}
-            left={`${dropdownPosition.left}px`}
-            width={`${dropdownPosition.width}px`}
-            bg="white"
-            border="0.063rem solid"
-            borderColor="orange.300"
-            shadow="md"
-            zIndex={9999}
-          >
-            {options.map((option) => {
-              const discounted = getDiscountedPrice(option);
-              const isSelected = selected.weight === option.weight;
-
-              return (
-                <Box
-                  key={option.weight}
-                  px={4}
-                  h="2.5rem"
-                  cursor="pointer"
-                  bg={isSelected ? 'orange.50' : 'white'}
-                  _hover={{ bg: 'orange.100' }}
-                  onClick={() => {
-                    setSelected(option);
-                    setIsOpen(false);
-                  }}
-                  display="flex"
-                  alignItems="center"
-                  justifyContent="space-between"
-                >
-                  {/* Left: Label and offer */}
-                  <Box>
-                    <Text fontSize="sm" fontWeight="medium">{option.label}</Text>
-                    {option.offer > 0 && (
-                      <Text fontSize="xs" color="green.600" fontWeight="semibold">
-                        {option.offer}% OFF
-                      </Text>
-                    )}
-                  </Box>
-
-                  {/* Right: Price and strikethrough */}
-                  <Box textAlign="right">
-                    <Text fontSize="sm" fontWeight="semibold" color="orange.500">
-                      ₹{discounted}
-                    </Text>
-                    {option.offer > 0 && (
-                      <Text fontSize="xs" color="gray.400" textDecoration="line-through">
-                        ₹{option.price}
-                      </Text>
-                    )}
-                  </Box>
-
-                  {/* Radio Circle */}
-                  <Box
-                    ml={4}
-                    w="1rem"
-                    h="1rem"
-                    minW="1rem"
-                    borderRadius="full"
-                    border="0.125rem solid"
-                    borderColor={isSelected ? 'orange.400' : 'gray.300'}
-                    display="flex"
-                    alignItems="center"
-                    justifyContent="center"
-                  >
-                    {isSelected && (
-                      <Box w="0.5rem" h="0.5rem" bg="orange.400" borderRadius="full" />
-                    )}
-                  </Box>
-                </Box>
-              );
-            })}
-          </Box>
-        </Portal>
-      )}
-
-      {/* Final Price Display */}
-      <Box mt={2} display="flex" alignItems="center" fontSize="sm" gap={2}>
-        {selected.offer > 0 && (
-          <Text color="gray.400" textDecoration="line-through">₹{selected.price}</Text>
-        )}
-        <Text color="orange.500" fontWeight="semibold">₹{getDiscountedPrice(selected)}</Text>
-      </Box>
-    </>
-  );
-};
-
-export default ProductPrice;

package/src/Components/ProductCard/ProductReview.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Box, Flex, Text, Icon } from '@chakra-ui/react';
-import { BookCheck, Star } from 'lucide-react';
-
-type ProductReviewProps = {
-  rating: string | number;
-  reviewCount: string | number;
-}
-
-const ProductReview = ({ rating, reviewCount }: ProductReviewProps) => {
-  return (
-    <Flex align="center" gap={2}>
-      <Flex
-        align="center"
-        gap="1"
-        bg="teal.900"
-        color="white"
-        px={2}
-        borderRadius="md"
-        fontSize="sm"
-        fontWeight="bold"
-      >
-        <Icon as={Star} boxSize={3.5} />
-        <Text>{rating}</Text>
-      </Flex>
-
-      <Box h="4" w="0.063rem" bg="gray.400" />
-
-      <Flex align="center" gap="1">
-        <Icon as={BookCheck} boxSize={3.5} />
-        <Text fontSize="sm" color="gray.600">({reviewCount})</Text>
-      </Flex>
-    </Flex>
-  );
-};
-
-export default ProductReview;

package/src/Components/ProductCard/ProductTags.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { Box, Flex } from '@chakra-ui/react';
-
-type ProductTagsProps = {
-  tags: string[];
-  className?: string;
-}
-
-const ProductTags = ({ tags, className }: ProductTagsProps) => {
-
-  const getRows = (tags: string[]): string[][] => {
-    const count = tags.length;
-    if (count === 1) return [tags];
-    if (count === 2) return [tags];
-    if (count === 3) return [[tags[0]], tags.slice(1)];
-    if (count === 4) return [tags.slice(0, 2), tags.slice(2, 4)];
-    return [];
-  };
-
-  return (
-    <Flex direction="column" gap="1" className={className} w="full">
-      {getRows(tags).map((row, rowIndex) => (
-        <Flex key={rowIndex} gap="1">
-          {row.map((tag, tagIndex) => (
-            // <></>
-            <Tag key={tagIndex} fullWidth={row.length === 1}>
-              {tag}
-            </Tag>
-          ))}
-        </Flex>
-      ))}
-    </Flex>
-  );
-};
-
-const Tag = ({
-  children,
-  fullWidth = false,
-}: { children: React.ReactNode; fullWidth?: boolean }) => (
-  <Box
-    flex={fullWidth ? '1' : '1'}
-    border="0.063rem solid #f89f24"
-    color="black"
-    fontSize="0.625rem"
-    fontWeight="semibold"
-    borderRadius="full"
-    px="0.5rem"
-    py="0.125rem"
-    textAlign="center"
-    whiteSpace="nowrap"
-    backgroundColor={"orange.100"}
-  >
-    {children}
-  </Box>
-);
-
-export default ProductTags;

package/src/Components/ProfileCard/ProfileCard.stories.tsx

@@ -1,31 +0,0 @@
-// import React from 'react';
-// import { StoryFn, Meta } from '@storybook/react/types-6-0';
-// import ProfileCard from './ProfileCard';
-// import { ProfileCardProps } from './ProfileCardProps';
-
-// export default {
-//     title: 'Components/ProfileCard/ProfileCard',
-//     component: ProfileCard,
-// } as Meta;
-
-// const Template: StoryFn<ProfileCardProps> = (args) => <ProfileCard {...args} />;
-
-// export const Default = Template.bind({});
-// Default.args = {
-//     key: '1',
-//     maxW: 'sm',
-//     align: 'center',
-//     variant: 'filled',
-//     direction: 'column',
-//     justify: 'center',
-//     header: 'Header',
-//     footer: 'Footer',
-//     children: 'Content',
-//     size: 'md',
-//     color: 'teal',
-//     overflow: 'hidden',
-//     dividercolor: 'gray',
-//     dividersize: 'md',
-//     dividervariant: 'solid',
-// };
-export {};

package/src/Components/ProfileCard/ProfileCard.tsx

@@ -1,97 +0,0 @@
-import React, { ReactElement } from "react";
-import {
-  Card as ChakraCard,
-  CardBody,
-  CardFooter,
-  CardHeader,
-  Divider,
-} from "@chakra-ui/react";
-import { ProfileCardProps } from "./ProfileCardProps";
-
-export const ProfileCardHeader: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  return <>{children}</>;
-};
-
-export const ProfileCardBody: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  return <>{children}</>;
-};
-
-export const ProfileCardFooter: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  return <>{children}</>;
-};
-
-export default function ProfileCard({
-  maxW,
-  align,
-  variant,
-  direction,
-  justify,
-  children,
-  size,
-  color,
-  overflow,
-  dividercolor = "#d5cfcf",
-  dividersize = "0.5px",
-  dividervariant = "solid",
-  CardStyle,
-  CardHeaderStyle,
-  CardBodyStyle,
-  borderTopColor,
-  borderLeftColor,
-}: ProfileCardProps) {
-  const isReactElement = (child: React.ReactNode): child is ReactElement => {
-    return child !== null && typeof child === "object" && "type" in child;
-  };
-
-  const header = React.Children.toArray(children).find(
-    (child) => isReactElement(child) && child.type === ProfileCardHeader
-  );
-  const body = React.Children.toArray(children).find(
-    (child) => isReactElement(child) && child.type === ProfileCardBody
-  );
-  const footer = React.Children.toArray(children).find(
-    (child) => isReactElement(child) && child.type === ProfileCardFooter
-  );
-
-  const StylesWithBorder = borderLeftColor
-    ? { ...CardStyle, borderLeft: "2px solid #3182CE" }
-    : borderTopColor
-      ? { ...CardStyle, borderTop: "2px solid #3182CE" }
-      : { ...CardStyle };
-  return (
-    <ChakraCard
-      maxW={maxW}
-      align={align}
-      variant={variant}
-      direction={direction}
-      justify={justify}
-      size={size}
-      overflow={overflow}
-      colorScheme={color}
-      style={StylesWithBorder}
-    >
-      {header && (
-        <>
-          <CardHeader sx={{ ...CardHeaderStyle, fontWeight: "bold" }}>
-            {header}
-          </CardHeader>
-          <Divider
-            style={{
-              borderColor: dividercolor,
-              borderWidth: dividersize,
-              borderStyle: dividervariant,
-            }}
-          />
-        </>
-      )}
-      <CardBody sx={CardBodyStyle}>{body}</CardBody>
-      {footer && <CardFooter>{footer}</CardFooter>}
-    </ChakraCard>
-  );
-}

package/src/Components/ProfileCard/ProfileCardProps.tsx

@@ -1,39 +0,0 @@
-import { CardProps } from "@chakra-ui/react";
-
-export type ProfileCardProps = Pick<
-  CardProps,
-  "direction" | "maxW" | "align" | "justify" | "overflow"
-> & {
-  children: React.ReactNode;
-  variant?: "elevated" | "outlein" | "filled" | "unstyled";
-  size?: "sm" | "md" | "lg";
-  color?:
-    | "whiteAlpha"
-    | "blackAlpha"
-    | "gray"
-    | "red"
-    | "orange"
-    | "yellow"
-    | "green"
-    | "teal"
-    | "blue"
-    | "cyan"
-    | "purple"
-    | "pink";
-  dividercolor?: string;
-  dividersize?: string;
-  dividervariant?:
-    | "solid"
-    | "dashed"
-    | "dotted"
-    | "double"
-    | "groove"
-    | "ridge"
-    | "inset"
-    | "outset";
-  CardStyle?: React.CSSProperties;
-  CardHeaderStyle?: React.CSSProperties;
-  CardBodyStyle?: React.CSSProperties;
-  borderTopColor?: boolean;
-  borderLeftColor?: boolean;
-};

package/src/Components/ProfilePhotoViewer/ProfilePhotoViewer.stories.tsx

@@ -1,26 +0,0 @@
-// import React from 'react';
-// import { StoryFn, Meta } from '@storybook/react';
-// import ProfilePhotoViewer from './ProfilePhotoViewer';
-// import { ProfilePhotoViewerProps } from './ProfilePhotoViewerProps';
-
-// export default {
-//     title: 'Components/ProfilePhotoViewer/ProfilePhotoViewer',
-//     component: ProfilePhotoViewer,
-// } as Meta;
-
-// const Template: StoryFn<ProfilePhotoViewerProps> = (args) => <ProfilePhotoViewer {...args} />;
-
-// export const Default = Template.bind({});
-// Default.args = {
-//     photoUrl: 'https://via.placeholder.com/150',
-//     onPhotoChange: (file: File) => console.log(file.name),
-//     imageWidth: "100px",
-//     imageAlt: "Profile Photo",
-//     imageObjectFit: "cover",
-//     imageBorderRadius: "full",
-//     editIconSize: "sm",
-//     editIconPositionRight: "5px",
-//     editIconPositionBottom: "5px",
-//     isRound: true,
-// };
-export {};