pixelize-design-library 1.0.13 → 1.0.15

package/src/Components/NumberInput/NumberInputProps.tsx

@@ -1,28 +0,0 @@
-import { NumberInputProps as chakraNumbetInpurProps } from "@chakra-ui/react";
-
-export type NumberInputProps = Pick<
- chakraNumbetInpurProps,
- | "defaultValue"
- | "min"
- | "max"
- | "precision"
- | "step"
- | "clampValueOnBlur"
- | "keepWithinRange"
- | "value"
- | "onChange"
- |"size"
- |"maxW"
- |"allowMouseWheel"
-> & {
-    NumberIncrementStepperBg?:string,
-    NumberIncrementStepperActive?:ActiveStyle,
-    NumberIncrementStepperChildren?:string,
-    NumberDecrementStepperBg?:string,
-    NumberDecrementStepperChildren?:string,
-    NumberDecrementStepperActive?:ActiveStyle,
-};
-
-export type ActiveStyle = {
-    bg: string;
-  };

package/src/Components/PinInput/PinInput.stories.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import PinInput from './PinInput';
-import { ChakraPinInputProps } from './PinInputProps';
-
-export default {
-  title: 'Components/PinInput/PinInput',
-  component: PinInput,
-} as Meta;
-
-const Template: StoryFn<ChakraPinInputProps> = (args) => <PinInput {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  otp: false,
-  mask: false,
-  defaultValue: '',
-  placeholder: '•',
-  manageFocus: true,
-  errorBorderColor: 'red.500',
-  focusBorderColor: 'blue.500',
-  onChange: (value: string) => console.log(value),
-  onComplete: (value: string) => console.log(`Completed: ${value}`),
-  type: 'alphanumeric',
-  color: 'blue',
-  variant: 'outline',
-  pins: 3,
-};
-
-export const Masked = Template.bind({});
-Masked.args = {
-  ...Default.args,
-  mask: true,
-};
-
-export const SixPins = Template.bind({});
-SixPins.args = {
-  ...Default.args,
-  pins: 6,
-};

package/src/Components/PinInput/PinInput.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import {
-  ChakraProvider,
-  HStack,
-  PinInput,
-  PinInputField,
-  Text,
-} from "@chakra-ui/react";
-import { ChakraPinInputProps } from "./PinInputProps";
-export default function PinInputs({
-  otp,
-  mask,
-  defaultValue,
-  placeholder,
-  manageFocus,
-  errorBorderColor,
-  focusBorderColor,
-  onChange,
-  onComplete,
-  type,
-  color,
-  variant,
-  pins = 3,
-  label
-}: ChakraPinInputProps) {
-  return (
-    <ChakraProvider>
-      {label && <Text fontWeight="bold" marginBottom={"8px"}>{label}</Text>}
-      <HStack>
-        <PinInput otp={otp}
-          mask={mask}
-          defaultValue={defaultValue}
-          placeholder={placeholder}
-          manageFocus={manageFocus}
-          errorBorderColor={errorBorderColor}
-          focusBorderColor={focusBorderColor}
-          onChange={onChange}
-          onComplete={onComplete}
-          type={type}
-          colorScheme={color}
-          variant={variant}>
-          {Array.from({ length: pins }).map((_, index) => (
-            <PinInputField key={index} />
-          ))}
-        </PinInput>
-      </HStack>
-    </ChakraProvider>
-  );
-}

package/src/Components/PinInput/PinInputProps.tsx

@@ -1,33 +0,0 @@
-import { PinInputProps } from "@chakra-ui/react";
-
-export type ChakraPinInputProps = Pick<
-  PinInputProps,
-  | "otp"
-  | "mask"
-  | "defaultValue"
-  | "placeholder"
-  | "manageFocus"
-  | "errorBorderColor"
-  | "focusBorderColor"
-  | "onChange"
-  | "onComplete"
-> & {
-  type?: "alphanumeric" | "number";
-  size?: "xs" | "sm" | "md" | "lg";
-  variant?: "flushed" | "outline" | "filled" | "unstyled";
-  color?:
-  | "gray"
-  | "red"
-  | "orange"
-  | "yellow"
-  | "green"
-  | "teal"
-  | "blue"
-  | "cyan"
-  | "purple"
-  | "pink"
-  | "whiteAlpha"
-  | "blackAlpha";
-  pins: number;
-  label?: string;
-};

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

@@ -1,30 +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',
-};

package/src/Components/ProfileCard/ProfileCard.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import {
-    Card as ChakraCard,
-    CardBody,
-    CardFooter,
-    CardHeader,
-    ChakraProvider,
-    Divider,
-    Box,
-    Text,
-    SimpleGrid,
-} from "@chakra-ui/react";
-import { ProfileCardProps } from "./ProfileCardProps";
-
-export default function ProfileCard({
-    key,
-    maxW,
-    align,
-    variant,
-    direction,
-    justify,
-    header,
-    footer,
-    children,
-    size,
-    color,
-    overflow,
-    dividercolor,
-    dividersize,
-    dividervariant,
-}: ProfileCardProps) {
-    return (
-        <ChakraProvider>
-            <ChakraCard
-                key={key}
-                maxW={maxW}
-                align={align}
-                variant={variant}
-                direction={direction}
-                justify={justify}
-                size={size}
-                overflow={overflow}
-                colorScheme={color}
-                mr={10}
-            >
-                <CardHeader >{header}</CardHeader>
-                <Divider
-                    colorScheme={dividercolor}
-                    size={dividersize}
-                    variant={dividervariant}
-                />
-                <CardBody>
-                    {children}
-                </CardBody>
-                <CardFooter>{footer}</CardFooter>
-            </ChakraCard>
-        </ChakraProvider>
-    );
-}

package/src/Components/ProfileCard/ProfileCardProps.tsx

@@ -1,41 +0,0 @@
-import { CardProps } from "@chakra-ui/react";
-
-export type ProfileCardProps = Pick<
- CardProps,
- "direction" | "maxW" | "align" | "justify" | "overflow"
-> & {
- header?: React.ReactNode;
- footer?: React.ReactNode;
- 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";
- key?: string;
- dividercolor?:
-  | "whiteAlpha"
-  | "blackAlpha"
-  | "gray"
-  | "red"
-  | "orange"
-  | "yellow"
-  | "green"
-  | "teal"
-  | "blue"
-  | "cyan"
-  | "purple"
-  | "pink";
- dividersize?: string;
- dividervariant?: "solid" | "dashed";
-};

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

@@ -1,25 +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,
-};

package/src/Components/ProfilePhotoViewer/ProfilePhotoViewer.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { Box, Image, IconButton, Input, ChakraProvider } from "@chakra-ui/react";
-import { ChangeEvent, useRef, useState } from "react";
-import { EditIcon } from "@chakra-ui/icons"; // Ensure you have @chakra-ui/icons installed
-import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
-
-export default function ProfilePhotoViewer({
-    photoUrl,
-    onPhotoChange,
-    imageWidth = "100px",
-    imageAlt = "Profile Photo",
-    imageObjectFit = "cover",
-    imageBorderRadius = "full",
-    editIconSize = "sm",
-    editIconPositionRight = "5px",
-    editIconPositionBottom = "5px",
-    isRound = true,
-    boxStyle
-}: ProfilePhotoViewerProps) {
-    const [photo, setPhoto] = useState<string>(photoUrl);
-    const fileInputRef = useRef<HTMLInputElement>(null);
-
-    const handlePhotoChange = (event: ChangeEvent<HTMLInputElement>) => {
-        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 = () => {
-        fileInputRef.current?.click();
-    };
-    return (
-        <ChakraProvider>
-            <Box position="relative" display="inline-block" style={boxStyle}>
-                <Image
-                    src={photo}
-                    alt={imageAlt}
-                    boxSize={imageWidth}
-                    objectFit={imageObjectFit}
-                    borderRadius={imageBorderRadius}
-
-                />
-                <IconButton
-                    icon={<EditIcon />}
-                    isRound={isRound}
-                    size={editIconSize}
-                    position="absolute"
-                    right={editIconPositionRight}
-                    bottom={editIconPositionBottom}
-                    onClick={handleClick}
-                    aria-label="Edit photo"
-                />
-                <Input
-                    type="file"
-                    accept="image/*"
-                    onChange={handlePhotoChange}
-                    hidden
-                    ref={fileInputRef}
-                />
-            </Box>
-        </ChakraProvider>
-    );
-}

package/src/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.tsx

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

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

@@ -1,46 +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
-};

package/src/Components/ProgressBar/ProgressBar.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { ChakraProvider, 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 (
-        <ChakraProvider>
-            <Progress
-                size={size}
-                isIndeterminate={isIndeterminate}
-                colorScheme={color}
-                hasStripe={hasStripe}
-                height={height}
-                value={value}
-                isAnimated={isAnimated}
-                max={max}
-                min={min}
-                variant={variant}
-            />
-        </ChakraProvider>
-    );
-}

package/src/Components/ProgressBar/ProgressBarProps.tsx

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

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

@@ -1,46 +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', value: '1' },
-    { label: 'Option 2', value: '2' },
-    { label: 'Option 3', value: '3' },
-  ],
-  value: '1',
-  colorScheme: 'blue',
-  size: 'md',
-};

package/src/Components/RadioButton/RadioButton.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { Radio as ChakraRadio, RadioGroup as ChakraRadioGroup, Box, Stack, ChakraProvider } from '@chakra-ui/react';
-import { ChakraRadioProps, ChakraRadioGroupProps } from './RadioButtonProps';
-
-const RadioButton = ({
-    label,
-    colorScheme,
-    isChecked,
-    onChange,
-    isDisabled,
-    size,
-    value,
-    defaultChecked,
-}:ChakraRadioProps) => {
-    return (
-        <ChakraProvider>
-        <ChakraRadio
-            colorScheme={colorScheme}
-            isChecked={isChecked}
-            onChange={onChange}
-            isDisabled={isDisabled}
-            size={size}
-            value={value}
-            defaultChecked={defaultChecked}
-        >
-            <Box as="span">
-                {label}
-            </Box>
-        </ChakraRadio>
-        </ChakraProvider>
-    );
-};
-
-const RadioButtonGroup = ({
-    options,
-    onChange,
-    value,
-    defaultValue,
-    isDisabled,
-    size,
-    colorScheme,
-}:ChakraRadioGroupProps) => {
-    return (
-        <ChakraProvider>
-        <ChakraRadioGroup onChange={onChange} value={value} defaultValue={defaultValue}>
-            <Stack direction="row" spacing={4}>
-                {options.map((option) => (
-                    <RadioButton
-                        key={option.value}
-                        label={option.label}
-                        value={option.value}
-                        isDisabled={isDisabled}
-                        size={size}
-                        colorScheme={colorScheme}
-                    />
-                ))}
-            </Stack>
-        </ChakraRadioGroup>
-        </ChakraProvider>
-    );
-};
-
-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; value: string }[];
-    onChange?: (value: string) => void;
-}

package/src/Components/Select/Select.stories.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { ChakraProvider } from "@chakra-ui/react";
-import { useState } from 'react';
-import Select from './Select';
-import { chakraSelectProps } from './SelectProps';
-
-const meta: Meta<typeof Select> = {
-    title: 'Components/Input/Select',
-    component: Select,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-};
-
-export default meta;
-
-const SelectTemplate: StoryFn<chakraSelectProps> = (args) => {
-    const [value, setValue] = useState("");
-
-    const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        setValue(e.target.value);
-        if (args.onChange) {
-            args.onChange(e);
-        }
-    };
-
-    return (
-        <ChakraProvider>
-            <Select {...args} onChange={handleChange} value={value} />
-        </ChakraProvider>
-    );
-};
-
-export const Primary = SelectTemplate.bind({});
-Primary.args = {
-    placeholder: "Select an option",
-    size: "md",
-    variant: "outline",
-    icon: undefined,
-    bg: undefined,
-    borderColor: undefined,
-    color: undefined,
-    error: false,
-    isRequired: false,
-    label: 'Select Input',
-    errorMessage: "",
-    helperText: "",
-    options: [
-        { id: '1', label: 'Option 1' },
-        { id: '2', label: 'Option 2' },
-        { id: '3', label: 'Option 3' },
-    ],
-    value: "",
-    width: 500,
-};