pixelize-design-library 2.1.18 → 2.1.20

package/{dist/Components/Input/TextInput.styles.js → src/Components/Input/TextInput.styles.ts}

@@ -1,9 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
-exports.Input = {
+
+import { ComponentStyleConfig } from "@chakra-ui/react";
+
+export const Input: ComponentStyleConfig = {
     baseStyle: {
         field: {
+
             fontWeight: 500,
             fontSize: "0.875rem",
             letterSpacing: "0.044rem",
@@ -24,19 +25,19 @@ exports.Input = {
         },
     },
     variants: {
-        outline: function (props) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-            var theme = props.theme;
-            var errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
-            var borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.300";
-            var shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
-            var shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
-            var primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";
+        outline: (props) => {
+            const { theme } = props;
+            const errorColor = theme.colors.semantic?.error?.[500] ?? "red.500";
+            const borderColor = theme.colors.boxborder?.[500] ?? "gray.300";
+            const shadowPrimary = theme.colors.boxShadow?.primary ?? "blue.100";
+            const shadowError = theme.colors.boxShadow?.error ?? "red.100";
+            const primary = theme.colors.primary?.[500] ?? "blue.500";
+
             return {
                 field: {
-                    bg: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "gray.50",
+                    bg: theme.colors.gray?.[50] ?? "gray.50",
                     border: "0.063rem solid",
-                    borderColor: borderColor,
+                    borderColor,
                     _hover: {
                         borderColor: primary,
                         // boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
@@ -44,12 +45,12 @@ exports.Input = {
                     },
                     _focus: {
                         borderColor: primary,
-                        boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
+                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
                         outline: "0"
                     },
                     _invalid: {
                         borderColor: errorColor,
-                        boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
                         _hover: {
                             borderColor: errorColor,
                             // boxShadow: `0 0 0 0.125rem ${shadowError}`,
@@ -57,7 +58,7 @@ exports.Input = {
                         },
                         _focus: {
                             borderColor: errorColor,
-                            boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
                             outline: "0"
                         },
                     },
@@ -65,12 +66,12 @@ exports.Input = {
                         boxShadow: 'inherit',
                     },
                     _disabled: {
-                        bg: (_q = (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[100]) !== null && _q !== void 0 ? _q : "gray.100",
+                        bg: theme.colors.gray?.[100] ?? "gray.100",
                         opacity: 1,
                         cursor: "not-allowed",
                         _hover: {
                             border: "0.063rem solid",
-                            borderColor: borderColor,
+                            borderColor,
                         },
                     },
                 },

package/src/Components/Input/TextInput.tsx

@@ -0,0 +1,112 @@
+import React, { forwardRef } from "react";
+import {
+    FormControl,
+    Input,
+    InputGroup,
+    InputLeftElement,
+    InputRightElement,
+} from "@chakra-ui/react";
+import { TextInputProps } from "./TextInputProps";
+import { TextLabel } from "../Common/FormLabel";
+import HelperText from "../Common/HelperText";
+import ErrorMessage from "../Common/ErrorMessage";
+
+const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+    (
+        {
+            label,
+            type = "text",
+            id,
+            name,
+            onChange,
+            onBlur,
+            onFocus,
+            isDisabled = false,
+            isReadOnly = false,
+            isRequired = false,
+            value,
+            placeholder = "Placeholder",
+            width = "100%",
+            height = "2.75rem",
+            error,
+            errorMessage,
+            helperText,
+            onRightIconclick,
+            inputRightIcon,
+            inputLeftIcon,
+            onLeftIconClick,
+            inputGroupStyle,
+            inputStyle,
+            size = "md",
+            isInformation = false,
+            informationMessage,
+            leftElementStyle,
+            rightElementStyle,
+            autoComplete,
+            minW,
+            maxW,
+            ...props
+        },
+        ref
+    ) => {
+        return (
+            <FormControl w={width} minW={minW} maxW={maxW}>
+                {label && (
+                    <TextLabel
+                        label={label}
+                        id={id}
+                        isInformation={isInformation}
+                        informationMessage={informationMessage}
+                        isRequired={isRequired}
+                    />
+                )}
+                <InputGroup style={inputGroupStyle} height={height} >
+                    {inputLeftIcon && (
+                        <InputLeftElement
+                            onClick={onLeftIconClick}
+                            pointerEvents={onLeftIconClick ? "auto" : "none"}
+                            {...leftElementStyle}
+                        >
+                            {inputLeftIcon}
+                        </InputLeftElement>
+                    )}
+                    <Input
+                        type={type}
+                        placeholder={placeholder}
+                        onChange={onChange}
+                        onBlur={onBlur}
+                        onFocus={onFocus}
+                        value={value}
+                        isDisabled={isDisabled}
+                        isReadOnly={isReadOnly}
+                        id={id}
+                        name={name}
+                        size={size}
+                        height={height}
+                        isInvalid={error}
+                        ref={ref}
+                        autoComplete={autoComplete}
+                        {...inputStyle}
+                        {...props}
+
+                    />
+                    {inputRightIcon && (
+                        <InputRightElement
+                            onClick={onRightIconclick}
+                            pointerEvents={onRightIconclick ? "auto" : "none"}
+                            {...rightElementStyle}
+                        >
+                            {inputRightIcon}
+                        </InputRightElement>
+                    )}
+                </InputGroup>
+                {error && <ErrorMessage errorMessage={errorMessage} />}
+                {helperText && !error && <HelperText helperText={helperText} />}
+            </FormControl >
+        );
+    }
+);
+
+TextInput.displayName = "TextInput";
+
+export default React.memo(TextInput);

package/{dist/Components/Input/TextInputProps.d.ts → src/Components/Input/TextInputProps.tsx}

@@ -1,6 +1,25 @@
-/// <reference types="react" />
 import { InputProps } from "@chakra-ui/react";
-export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "placeholder" | "onBlur" | "onFocus" | "isDisabled" | "isRequired" | "isReadOnly" | "width" | "height" | "errorBorderColor" | "size" | "onKeyDown" | "onKeyUp" | "onMouseEnter" | "onMouseLeave"> & {
+
+export type TextInputProps = Pick<
+    InputProps,
+    | "value"
+    | "type"
+    | "onChange"
+    | "placeholder"
+    | "onBlur"
+    | "onFocus"
+    | "isDisabled"
+    | "isRequired"
+    | "isReadOnly"
+    | "width"
+    | "height"
+    | "errorBorderColor"
+    | "size"
+    | "onKeyDown"
+    | "onKeyUp"
+    | "onMouseEnter"
+    | "onMouseLeave"
+> & {
     label?: string;
     id?: string;
     name?: string;

package/src/Components/InputTextArea/InputTextArea.stories.tsx

@@ -0,0 +1,49 @@
+// import React from "react";
+// import type { Meta, StoryObj } from "@storybook/react/*";
+// import { InputTextAreaProps } from "./InputTextAreaProps";
+// import InputTextArea from "./InputTextArea";
+// import { useState } from "react";
+
+// const meta: Meta<typeof InputTextArea> = {
+//   title: "Components/InputTextArea/InputTextArea",
+//   component: InputTextArea,
+//   parameters: {
+//     layout: "centered",
+//   },
+//   tags: ["autodocs"],
+// };
+
+// export default meta;
+// type Story = StoryObj<typeof meta>;
+
+// const TextAreaTemplate = (args: InputTextAreaProps) => {
+//   const [value, setValue] = useState("");
+//   const handleOnChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+//     setValue(e.target.value);
+//   };
+//   return <InputTextArea {...args} onChange={handleOnChange} value={value} />;
+// };
+
+// export const Primary: Story = {
+//   args: {
+//     label: "hello",
+//     helperText: "Hello",
+//     errorMessage: "Required",
+//     error: true,
+//     rows: 5,
+//     onChange: () => {},
+//     value: "",
+//     placeholder: "Placeholder",
+//     width: "100%",
+//     isDisabled: false,
+//     isReadOnly: false,
+//     isRequired: false,
+//     resize: "vertical",
+//     size: "md",
+//     variant: "outline",
+//     focusBorderColor: "blue.500",
+//     errorBorderColor: "red.500",
+//   },
+//   render: (args) => TextAreaTemplate(args),
+// };
+export {};

package/src/Components/InputTextArea/InputTextArea.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import {
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  Textarea,
+} from "@chakra-ui/react";
+import { InputTextAreaProps } from "./InputTextAreaProps";
+
+export default function InputTextArea({
+  label,
+  placeholder,
+  value,
+  onChange,
+  size = "md",
+  resize = "both",
+  width = 500,
+  isDisabled,
+  errorBorderColor,
+  focusBorderColor,
+  isReadOnly,
+  isRequired = false,
+  error,
+  errorMessage,
+  helperText,
+  rows,
+  height,
+}: InputTextAreaProps) {
+  return (
+    <FormControl isRequired={isRequired} isInvalid={error}>
+      {label && <FormLabel mb="0.25rem">{label}</FormLabel>}
+      <Textarea
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        size={size}
+        resize={resize}
+        isDisabled={isDisabled}
+        errorBorderColor={errorBorderColor}
+        focusBorderColor={focusBorderColor}
+        isReadOnly={isReadOnly}
+        isInvalid={error}
+        width={width}
+        rows={rows}
+        height={height}
+      />
+      {error && <FormErrorMessage pl={4}>{errorMessage}</FormErrorMessage>}
+      {helperText && !error && (
+        <FormHelperText pl={4}>{helperText}</FormHelperText>
+      )}
+    </FormControl>
+  );
+}

package/{dist/Components/InputTextArea/InputTextAreaProps.d.ts → src/Components/InputTextArea/InputTextAreaProps.tsx}

@@ -1,4 +1,5 @@
 import { TextareaProps } from "@chakra-ui/react";
+
 export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "onChange" | "size" | "resize" | "isDisabled" | "errorBorderColor" | "focusBorderColor" | "isReadOnly" | "isRequired" | "variant"> & {
     label?: string;
     error?: boolean;
@@ -7,4 +8,4 @@ export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "
     width?: string | number;
     rows?: number;
     height?: string | number;
-};
+}

package/src/Components/KanbanBoard/AccountCard.tsx

@@ -0,0 +1,121 @@
+import React, { useState } from "react";
+import {
+  Box,
+  Flex,
+  Text,
+  Tooltip,
+  HStack,
+  VStack,
+  Collapse,
+  Spacer,
+} from "@chakra-ui/react";
+import {
+  Draggable,
+} from "@hello-pangea/dnd";
+import { ChevronDown, ChevronUp, ExternalLink, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import AccountRow from "./AccountRow";
+import { Account, KanbanBoardProps } from "./KanbanBoardProps";
+
+const excludeKeys = ["id", "details"];
+
+const AccountCard = ({
+  account,
+  index,
+  onDelete,
+  onOpen,
+}: {
+  account: Account;
+  index: number;
+  onDelete: KanbanBoardProps['onDelete'],
+  onOpen: KanbanBoardProps['onOpen']
+}) => {
+  const { colors } = useCustomTheme();
+  const [showMore, setShowMore] = useState(false);
+
+  const keys = Object.keys(account).filter(
+    (key) => typeof account[key] === "string" && !excludeKeys.includes(key)
+  );
+  const visibleKeys = showMore ? keys : keys.slice(0, 4);
+
+  return (
+    <Draggable draggableId={account.id.toString()} index={index}>
+      {(provided) => (
+        <Box
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          width="16.5rem"
+          borderRadius="0.25rem"
+          borderWidth="0.063rem"
+          background={colors?.background?.[500]}
+          border={`0.1rem solid ${colors.gray?.[200]}`}
+          p={2}
+          mt={3}
+        >
+          <VStack
+            align="start"
+            spacing={2}
+            fontSize="0.875rem"
+            color={colors?.gray?.[700]}
+            overflow={"none"}
+          >
+            {visibleKeys.map((key) => (
+              <AccountRow
+                key={key}
+                label={key.replace(/\b\w/g, (c) => c.toUpperCase())}
+                value={account[key] as string}
+              />
+            ))}
+            <Collapse
+              in={showMore && account.details !== undefined}
+              animateOpacity
+            >
+              <Text pt={2}>{account.details}</Text>
+            </Collapse>
+            {keys.length > 4 && (
+              <Flex justify="space-between" w="full" pt={2} alignItems="center">
+                <Text
+                  color={colors?.primary?.[500]}
+                  fontSize="sm"
+                  fontWeight="medium"
+                  cursor="pointer"
+                  onClick={() => setShowMore(!showMore)}
+                  display={"flex"}
+                  alignItems={"center"}
+                  gap={2}
+                >
+                  Show {showMore ? "less" : "more"}{" "}
+                  {showMore ? (
+                    <ChevronUp size={14} />
+                  ) : (
+                    <ChevronDown size={14} />
+                  )}
+                </Text>
+                <Spacer />
+                <HStack spacing={2}>
+                  <Tooltip label="Delete">
+                    <Trash2
+                      size={16}
+                      color={colors?.red?.[600]}
+                      onClick={() => onDelete?.(account)}
+                    />
+                  </Tooltip>
+                  <Tooltip label="Open">
+                    <ExternalLink
+                      size={16}
+                      color={colors?.blue?.[600]}
+                      onClick={() => onOpen?.(account)}
+                    />
+                  </Tooltip>
+                </HStack>
+              </Flex>
+            )}
+          </VStack>
+        </Box>
+      )}
+    </Draggable>
+  );
+};
+
+export default AccountCard;

package/src/Components/KanbanBoard/AccountRow.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import {
+  Flex,
+  Text,
+  Tooltip,
+} from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+
+const AccountRow = ({ label, value }: { label: string; value: string }) => {
+  const { colors } = useCustomTheme();
+  return (
+    <Flex w="full">
+      <Tooltip label={label} isDisabled={label.length <= 15} hasArrow>
+        <Text color={colors?.text?.[700]} w="45%" noOfLines={1}>
+          {label}
+        </Text>
+      </Tooltip>
+      <Text w="0.625rem" textAlign="center">
+        :
+      </Text>
+      <Tooltip label={value} isDisabled={value.length <= 17} hasArrow>
+        <Text
+          fontWeight={600}
+          color={colors?.text?.[800]}
+          w="calc(55% - 0.625rem)"
+          noOfLines={1}
+        >
+          {value}
+        </Text>
+      </Tooltip>
+    </Flex>
+  );
+};
+
+export default AccountRow;

package/src/Components/KanbanBoard/KanbanActions/KanbanActions.tsx

@@ -0,0 +1,37 @@
+import { Box, Text } from '@chakra-ui/react';
+import React from 'react';
+import Select from '../../Select/Select';
+import { CirclePlus, SquarePen } from 'lucide-react';
+import VeritcalDivider from '../../Divider/Divider';
+import { useCustomTheme } from '../../../Theme/useCustomTheme';
+import { OptionProp } from '../../Select/SelectProps';
+
+const KanbanActions = ({options, onSelectChange, onEdit, onCreate}: {
+    options: OptionProp[];
+    onSelectChange?: (option?: OptionProp) => void;
+    onEdit?: () => void;
+    onCreate?: () => void;
+}) => {
+    const { colors } = useCustomTheme();
+    return (
+        <Box display={"flex"} alignItems="center" gap="0.625rem">
+            <Select
+                options={options}
+                placeholder="Filter by Status"
+                width="12.5rem"
+                onChange={(option) => onSelectChange && onSelectChange(option)}
+            />
+            <Box display={"flex"} alignItems="center" gap="0.375rem" cursor="pointer" fontSize={14} onClick={() => onEdit?.()}>
+                <SquarePen size={20} color={colors?.text?.[500]} />
+                <Text color={colors?.secondary?.[500]}>Edit Layout</Text>
+            </Box>
+            <VeritcalDivider />
+            <Box display={"flex"} alignItems="center" gap="0.375rem" cursor="pointer" fontSize={14} onClick={() => onCreate?.()}>
+                <CirclePlus size={20} color={colors?.text?.[500]} />
+                <Text color={colors?.secondary?.[500]}>Create New</Text>
+            </Box>
+        </Box>
+    );
+};
+
+export default KanbanActions;