pixelize-design-library 2.1.19 → 2.1.20

package/src/Components/PinInputs/PinInputs.tsx

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

@@ -6,4 +6,4 @@ export type PinInputsProps = {
     placeholder?: string;
     onChange?: (value: string) => void;
     onComplete?: (value: string) => void;
-};
+}

package/src/Components/ProductCard/ProductCard.tsx

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

@@ -1,26 +1,27 @@
 export type ProductCardProps = {
-    label: string;
-    description?: string;
-    productImage: productImage;
-    tags?: string[];
-    rating?: string | number;
-    reviews?: string | number;
+    label: string,
+    description?: string,
+    productImage: productImage,
+    tags?: string[],
+    rating?: string | number,
+    reviews?: string | number,
     options?: options[];
     onClick?: () => void;
     onAddToCart?: () => void;
-    bag?: bag;
-};
+    bag?: bag
+}
+
 export type options = {
     label: string;
     weight: number;
     price: number;
     offer: number;
-};
+}
 export type bag = {
     label: string;
-    color?: string;
-};
+    color?: string
+}
 export type productImage = {
-    visibile: string;
-    hover?: string;
-};
+    visibile: string,
+    hover?: string,
+}

package/src/Components/ProductCard/ProductLabel.tsx

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

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

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

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

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

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

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

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