pixelize-design-library 2.1.20 → 2.1.21

package/src/Components/Button/Button.styles.ts

@@ -1,104 +0,0 @@
-import { ComponentStyleConfig } from "@chakra-ui/react";
-
-export const Button: ComponentStyleConfig = {
-    baseStyle: ({ theme }) => ({
-        borderRadius: "0.25rem",
-        fontWeight: 500,
-        fontSize: "1rem",
-        _disabled: {
-            opacity: 0.6,
-            cursor: "not-allowed",
-        },
-    }),
-
-    variants: {
-        solid: ({ theme, colorScheme = "primary" }) => ({
-            bg: theme.colors[colorScheme][500],
-            color: theme.colors.white,
-            _hover: {
-                bg: theme.colors[colorScheme][600],
-            },
-            _active: {
-                bg: theme.colors[colorScheme][700],
-            },
-        }),
-
-        outline: ({ theme, colorScheme = "primary" }) => ({
-            border: "0.1rem solid",
-            borderColor: theme.colors[colorScheme][500],
-            color: theme.colors[colorScheme][500],
-            bg: "transparent",
-            _hover: {
-                bg: theme.colors[colorScheme][500],
-                borderColor: theme.colors[colorScheme][600],
-                color: theme.colors.white,
-            },
-            _active: {
-                bg: theme.colors[colorScheme][600],
-                color: theme.colors.white,
-            },
-        }),
-
-        ghost: ({ theme, colorScheme = "primary" }) => ({
-            color: theme.colors[colorScheme][500],
-            bg: "transparent",
-            _hover: {
-                bg: theme.colors.gray[200],
-            },
-            _active: {
-                bg: theme.colors.gray[200],
-            },
-        }),
-
-        link: ({ theme, colorScheme = "primary" }) => ({
-            color: theme.colors[colorScheme][500],
-            textDecoration: "underline",
-            bg: "transparent",
-            _hover: {
-                color: theme.colors[colorScheme][600],
-                textDecoration: "none",
-            },
-            _active: {
-                color: theme.colors[colorScheme][600],
-            },
-        }),
-
-        unstyled: () => ({
-            bg: "transparent",
-            color: "inherit",
-            _hover: {
-                bg: "transparent",
-            },
-        }),
-    },
-
-    sizes: {
-        xs: {
-            h: "1.5rem",
-            fontSize: "0.75rem",
-            px: "0.5rem",
-        },
-        sm: {
-            h: "2rem",
-            fontSize: "0.875rem",
-            px: "0.75rem",
-        },
-        md: {
-            h: "2.5rem",
-            fontSize: "1rem",
-            px: "1rem",
-        },
-        lg: {
-            h: "3rem",
-            fontSize: "1.125rem",
-            px: "1.5rem",
-        },
-
-    },
-
-    defaultProps: {
-        size: "md",
-        variant: "solid",
-        colorScheme: "primary",
-    },
-};

package/src/Components/Button/Button.tsx

@@ -1,49 +0,0 @@
-import React, { memo } from "react";
-import { Button as ChakraButton } from "@chakra-ui/react";
-import { ButtonProps } from "./ButtonProps";
-
-function Button({
-    label,
-    children,
-    onClick,
-    opacity,
-    variant = "solid",
-    leftIcon,
-    rightIcon,
-    size,
-    isDisabled = false,
-    isLoading = false,
-    loadingText = "Loading",
-    type,
-    width,
-    sx,
-    colorScheme,
-    ref,
-    border,
-    borderRadius,
-}: ButtonProps) {
-    return (
-        <ChakraButton
-            type={type}
-            onClick={onClick}
-            width={width || "fit-content"}
-            variant={variant}
-            size={size}
-            isLoading={isLoading}
-            isDisabled={isDisabled}
-            loadingText={loadingText}
-            leftIcon={leftIcon}
-            rightIcon={rightIcon}
-            ref={ref}
-            colorScheme={colorScheme}
-            sx={sx}
-            opacity={opacity}
-            border={border}
-            borderRadius={borderRadius}
-        >
-            {children ?? label}
-        </ChakraButton>
-    );
-}
-
-export default memo(Button);

package/src/Components/Button/ButtonProps.tsx

@@ -1,25 +0,0 @@
-import { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
-
-export type ButtonProps = Pick<
-  ChakraButtonProps,
-  | "onClick"
-  | "leftIcon"
-  | "rightIcon"
-  | "isDisabled"
-  | "isLoading"
-  | "loadingText"
-  | "spinner"
-  | "sx"
-  | "border"
-  | "borderRadius"
-> & {
-  label?: string;
-  width?: string | number;
-  size?: "lg" | "md" | "sm" | "xs";
-  variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
-  type?: "button" | "submit" | "reset";
-  colorScheme?: 'primary' | 'secondary' | 'tertiary' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
-  ref?: React.Ref<HTMLButtonElement>;
-  children?: React.ReactNode;
-  opacity?: number;
-};

package/src/Components/ButtonGroupIcon/ButtonGoupIconProps.tsx

@@ -1,46 +0,0 @@
-import { ReactElement } from "react";
-
-export type ButtonGroupIconProps = {
-  leftIcon?: ReactElement;
-  rightIcon?: ReactElement;
-  onLeftIconClick?: () => void;
-  onRightIconClick?: () => void;
-  buttonText: string;
-  onButtonClick?: () => void;
-  onButtongroupClick?: () => void;
-  size?: "lg" | "md" | "sm" | "xs";
-  variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
-  color?:
-    | "gray"
-    | "red"
-    | "orange"
-    | "yellow"
-    | "green"
-    | "teal"
-    | "blue"
-    | "cyan"
-    | "purple"
-    | "pink"
-    | "whiteAlpha"
-    | "blackAlpha";
-  buttonGroupStyle?: React.CSSProperties;
-  buttonGroupLeftIconStyle?: React.CSSProperties;
-  buttonGroupRightIconStyle?: React.CSSProperties;
-  buttonStyle?: React.CSSProperties;
-  onBlurLeftIcon?: () => void;
-  onBlurRightIcon?: () => void;
-  dropdownOptions?: {
-    label: string;
-    id: string | number;
-    image?: ReactElement | undefined;
-  }[];
-  onDropdownOptionClick?: (
-    event: React.MouseEvent,
-    option: { label: string; id: string | number }
-  ) => void;
-  rightIconDropdown?: boolean;
-  menulistStyle?: React.CSSProperties;
-  menuItemStyle?: React.CSSProperties;
-  isLoading?: boolean;
-  divider?: boolean;
-};

package/src/Components/ButtonGroupIcon/ButtonGroupIcon.stories.tsx

@@ -1,37 +0,0 @@
-// import React from 'react';
-// import { Meta, StoryFn } from '@storybook/react';
-// import ButtonGroupIcon  from './ButtonGroupIcon'; // Adjust the import path and component type if needed
-// import {ButtonGroupIconProps} from './ButtonGoupIconProps';
-
-// export default {
-//   title: 'Components/ButtonGroupIcon/ButtonGroupIcon',
-//   component: ButtonGroupIcon,
-//   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'
-//       },
-//   },
-// } as Meta;
-
-// const Template: StoryFn<ButtonGroupIconProps> = (args) => <ButtonGroupIcon {...args} />;
-
-// export const Default = Template.bind({});
-// Default.args = {
-//   leftIcon: <FiHome/>,
-//   rightIcon: <FiHome />,
-//   onLeftIconClick: () => console.log('Left icon clicked'),
-//   onRightIconClick: () => console.log('Right icon clicked'),
-//   buttonText: 'Button Text',
-//   onButtonClick: () => console.log('Button clicked'),
-//   onButtongroupClick: () => console.log('Button group clicked'),
-//   size: 'md',
-//   variant: 'solid',
-//   color: 'blue',
-// };
-export {};

package/src/Components/ButtonGroupIcon/ButtonGroupIcon.tsx

@@ -1,159 +0,0 @@
-import React, { useState } from "react";
-import {
-  Box,
-  Button,
-  ButtonGroup,
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-} from "@chakra-ui/react";
-import { ButtonGroupIconProps } from "./ButtonGoupIconProps";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-
-export default function ButtonGroupIcon({
-  leftIcon,
-  rightIcon,
-  onLeftIconClick,
-  onRightIconClick,
-  buttonText,
-  onButtonClick,
-  onButtongroupClick,
-  size,
-  variant,
-  color,
-  buttonGroupStyle,
-  buttonGroupLeftIconStyle,
-  buttonGroupRightIconStyle,
-  buttonStyle,
-  onBlurLeftIcon,
-  onBlurRightIcon,
-  dropdownOptions, // New prop for dropdown options
-  onDropdownOptionClick, // New prop to handle option clicks
-  rightIconDropdown,
-  menulistStyle,
-  menuItemStyle,
-  isLoading,
-  divider = true,
-}: ButtonGroupIconProps) {
-  const theme = useCustomTheme();
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-
-  const handleRightIconClick = () => {
-    setIsDropdownOpen(!isDropdownOpen);
-    if (onRightIconClick) {
-      onRightIconClick();
-    }
-  };
-
-  const handleMenuClick = (
-    event: React.MouseEvent,
-    option: { label: string; id: string | number }
-  ) => {
-    setIsDropdownOpen(false);
-    // console.log("Option clicked:", option,event)
-    if (onDropdownOptionClick) {
-      onDropdownOptionClick(event, option);
-    }
-  };
-
-  return (
-    <ButtonGroup
-      size={size}
-      isAttached
-      variant={variant}
-      onClick={onButtongroupClick}
-      colorScheme={color}
-      style={buttonGroupStyle}
-    >
-      {leftIcon && (
-        <IconButton
-          aria-label="Left icon button"
-          icon={leftIcon}
-          onClick={onLeftIconClick}
-          onBlur={onBlurLeftIcon}
-          style={buttonGroupLeftIconStyle}
-          sx={{
-            backgroundColor: theme.colors.primary[500],
-            "&:hover": {
-              backgroundColor: theme.colors.primary[400],
-            },
-          }}
-        />
-      )}
-      <Button
-        onClick={onButtonClick}
-        style={buttonStyle}
-        isLoading={isLoading}
-        sx={{
-          backgroundColor: theme.colors.primary[500],
-          "&:hover": {
-            backgroundColor: theme.colors.primary[400],
-          },
-        }}
-        borderLeft={`1px solid ${theme.colors?.gray[300]}`}
-        borderRight={`1px solid ${theme.colors?.gray[300]}`}
-      >
-        {buttonText}
-      </Button>
-
-      {rightIcon && rightIconDropdown ? (
-        <Menu isOpen={isDropdownOpen} onClose={() => setIsDropdownOpen(false)}>
-          <MenuButton
-            as={IconButton}
-            aria-label="Right icon button"
-            icon={rightIcon}
-            onClick={handleRightIconClick}
-            onBlur={onBlurRightIcon}
-            style={buttonGroupRightIconStyle}
-            sx={{
-              backgroundColor: theme.colors.primary[500],
-              "&:hover": {
-                backgroundColor: theme.colors.primary[400],
-              },
-            }}
-          />
-          <Box sx={{ zIndex: 99 }}>
-            <MenuList style={menulistStyle}>
-              {dropdownOptions?.map((option, index) => (
-                <MenuItem
-                  key={index}
-                  onClick={(event) => handleMenuClick(event, option)}
-                  style={menuItemStyle}
-                  borderBottom={
-                    divider ? `1px solid ${theme.colors?.gray[300]}` : undefined
-                  }
-                  sx={{
-                    "&:last-child": {
-                      borderBottom: "none",
-                    },
-                  }}
-                >
-                  {option?.image}
-                  {option.label}
-                </MenuItem>
-              ))}
-            </MenuList>
-          </Box>
-        </Menu>
-      ) : (
-        rightIcon && (
-          <IconButton
-            aria-label="Right icon button"
-            icon={rightIcon}
-            onClick={onRightIconClick}
-            onBlur={onBlurRightIcon}
-            style={buttonGroupRightIconStyle}
-            sx={{
-              backgroundColor: theme.colors.primary[500],
-              "&:hover": {
-                backgroundColor: theme.colors.primary[400],
-              },
-            }}
-          />
-        )
-      )}
-    </ButtonGroup>
-  );
-}

package/src/Components/Buttons/Buttons.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import { ButtonsProps } from './ButtonsProps'
-
-const Buttons = ({ onClick, label, className, disabled }: ButtonsProps) => {
-    return (
-        <button
-            onClick={onClick}
-            className={`bg-purple-600 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-offset-2  ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
-            disabled={disabled}
-        >
-            {label}
-        </button>
-    )
-}
-
-export default Buttons

package/src/Components/Card/Card.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-import { Card as ChakraCard } from "@chakra-ui/react";
-import { CardProps } from "./CardProps";
-
-export default function Card({
-  key,
-  maxW,
-  align,
-  variant,
-  direction,
-  justify,
-  children,
-  size,
-  color,
-  overflow,
-  sx,
-}: CardProps) {
-  return (
-    <ChakraCard
-      key={key}
-      maxW={maxW}
-      align={align}
-      variant={variant}
-      direction={direction}
-      justify={justify}
-      size={size}
-      overflow={overflow}
-      colorScheme={color}
-      p={4}
-      sx={sx}
-    >
-      {children}
-    </ChakraCard>
-  );
-}

package/src/Components/Card/CardProps.tsx

@@ -1,41 +0,0 @@
-import { CardProps as ChakraCardProps } from "@chakra-ui/react";
-
-export type CardProps = Pick<
-  ChakraCardProps,
-  "direction" | "maxW" | "align" | "justify" | "overflow" | "sx"
-> & {
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-  children: React.ReactNode;
-  variant?: "elevated" | "outline" | "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/Checkbox/Checkbox.stories.tsx

@@ -1,46 +0,0 @@
-// import React, { useState } from 'react';
-// import { Meta, StoryObj } from '@storybook/react';
-// import CheckBox from './Checkbox';
-// import { fn } from '@storybook/test';
-// import { CheckboxProps } from './CheckboxProps';
-
-// const meta: Meta<typeof CheckBox> = {
-//     title: 'Components/CheckBox/CheckBox',
-//     component: CheckBox,
-
-//     parameters: {
-//         layout: 'centered',
-//     },
-//     tags: ['autodocs']
-// };
-
-// export default meta;
-// type Story = StoryObj<typeof meta>;
-
-// const CheckBoxTemplate = (args: CheckboxProps) => {
-//     const [check, setCheck] = useState(true);
-//     const handleCheck = (e: any) => {
-//         setCheck(!check);
-//     }
-//     return <CheckBox {...args} onChange={handleCheck} isChecked={check} />
-// }
-
-// export const Check_box: Story = {
-//     args: {
-//         label: 'Checkbox',
-//         spacing: 6,
-//         isInvalid: false,
-//         color: 'blue',
-//         iconColor: 'white',
-//         iconSize: '1em',
-//         isChecked: true,
-//         isIndeterminate: false,
-//         isDisabled: false,
-//         size: 'md',
-//         value: 'checkbox',
-//         defaultChecked: false,
-//         onChange: fn()
-//     },
-//     render: (args) => CheckBoxTemplate(args)
-// };
-export {};

package/src/Components/Checkbox/Checkbox.styles.ts

@@ -1,56 +0,0 @@
-import { ComponentStyleConfig } from "@chakra-ui/react";
-
-export const Checkbox: ComponentStyleConfig = {
-  baseStyle: ({ theme }) => {
-    return {
-      control: {
-        width: "1.25rem",
-        height: "1.25rem",
-        borderWidth: "1.6px",
-        _disabled: {
-          bg: theme.colors.background[50],
-          borderColor: theme.colors.boxborder[500],
-          cursor: "not-allowed",
-        },
-        _indeterminate: {
-          bg: theme.colors.background[50],
-          borderColor: theme.colors.primary[500],
-          svg: {
-            color: theme.colors.primary[500],
-          },
-        },
-
-        _checked: {
-          bg: theme.colors.primary[600],
-          borderColor: theme.colors.primary[600],
-        },
-
-        _hover: {
-          bg: theme.colors.background[100],
-          borderColor: theme.colors.primary[400],
-          _checked: {
-            bg: theme.colors.primary[600],
-            borderColor: theme.colors.primary[600],
-          },
-          _indeterminate: {
-            bg: "none",
-            borderColor: theme.colors.primary[600],
-          },
-        },
-
-        _focus: {
-          boxShadow: `0 0 0 2px ${theme.colors.primary[300]}`,
-          borderColor: theme.colors.primary[500],
-        },
-
-        _active: {
-          bg: theme.colors.primary[600],
-          borderColor: theme.colors.primary[600],
-        },
-      },
-      icon: {
-        color: theme.colors.background[50],
-      },
-    };
-  },
-};

package/src/Components/Checkbox/Checkbox.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-import { Checkbox as ChakraCheckbox, FormControl } from "@chakra-ui/react";
-import { CheckboxProps } from "./CheckboxProps";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-import { TextLabel } from "../Common/FormLabel";
-import ErrorMessage from "../Common/ErrorMessage";
-import HelperText from "../Common/HelperText";
-
-export default function CheckBox({
-  label,
-  spacing,
-  isInvalid,
-  color,
-  iconColor,
-  iconSize,
-  isChecked,
-  isIndeterminate,
-  onChange,
-  isDisabled,
-  size,
-  value,
-  defaultChecked,
-  sx,
-  isRequired,
-  error,
-  errorMessage,
-  isInformation,
-  informationMessage,
-  id,
-  helperText,
-}: CheckboxProps) {
-  const theme = useCustomTheme();
-  return (
-    <FormControl isInvalid={error}>
-      <ChakraCheckbox
-        spacing={spacing}
-        isInvalid={isInvalid}
-        isRequired={isRequired}
-        colorScheme={color}
-        iconColor={iconColor}
-        iconSize={iconSize}
-        isChecked={isChecked}
-        isIndeterminate={isIndeterminate}
-        onChange={onChange}
-        isDisabled={isDisabled}
-        size={size}
-        value={value}
-        defaultChecked={defaultChecked}
-        borderColor={theme.colors.gray[500]}
-        sx={sx}
-        display={"flex"}
-        alignItems={"inherit"}
-      >
-        {label && (
-          <TextLabel
-            label={label}
-            id={id}
-            isInformation={isInformation}
-            informationMessage={informationMessage}
-            isRequired={isRequired}
-          />
-        )}
-      </ChakraCheckbox>
-      {error && <ErrorMessage errorMessage={errorMessage} />}
-      {helperText && !error && <HelperText helperText={helperText} />}
-    </FormControl>
-  );
-}