pixelize-design-library 2.1.18 → 2.1.20

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+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/{dist/Components/Buttons/ButtonsProps.d.ts → src/Components/Buttons/ButtonsProps.ts}

@@ -3,4 +3,4 @@ export type ButtonsProps = {
     onClick: () => void;
     className?: string;
     disabled?: boolean;
-};
+}

package/src/Components/Card/Card.tsx

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

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

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

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

@@ -0,0 +1,68 @@
+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>
+  );
+}