pixelize-design-library 2.1.20 → 2.1.21

package/src/Components/Input/TextInput.tsx

@@ -1,112 +0,0 @@
-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/src/Components/InputTextArea/InputTextArea.stories.tsx

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

@@ -1,54 +0,0 @@
-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/src/Components/KanbanBoard/AccountCard.tsx

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

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

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

package/src/Components/KanbanBoard/KanbanBoard.tsx

@@ -1,185 +0,0 @@
-import React, { useState } from "react";
-import {
-  Box,
-  Flex,
-  Text,
-  Skeleton,
-  SkeletonText,
-} from "@chakra-ui/react";
-import {
-  DragDropContext,
-  Droppable,
-  DropResult,
-} from "@hello-pangea/dnd";
-import { Trash2 } from "lucide-react";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-import AccountCard from "./AccountCard";
-import { ColumnType, KanbanBoardProps } from "./KanbanBoardProps";
-
-const KanbanBoard = ({
-  data,
-  onDrag,
-  onDelete,
-  onOpen,
-  onColumnDelete,
-  isLoading = false,
-}: KanbanBoardProps) => {
-  const { colors } = useCustomTheme();
-  const [columns, setColumns] = useState<Record<string, ColumnType>>(data);
-
-  const onDragEnd = (result: DropResult) => {
-    const { source, destination } = result;
-    if (!destination) return;
-
-    const sourceCol = columns[source.droppableId];
-    const destCol = columns[destination.droppableId];
-    const draggedItem = sourceCol.items[source.index];
-
-    if (!draggedItem) return;
-
-    if (source.droppableId === destination.droppableId) {
-      const copiedItems = [...sourceCol.items];
-      copiedItems.splice(source.index, 1);
-      copiedItems.splice(destination.index, 0, draggedItem);
-      const newCol = {
-        ...columns,
-        [source.droppableId]: {
-          ...sourceCol,
-          items: copiedItems,
-        },
-      };
-      setColumns(newCol);
-    } else {
-      const sourceItems = [...sourceCol.items];
-      const destItems = [...destCol.items];
-      sourceItems.splice(source.index, 1);
-      destItems.splice(destination.index, 0, draggedItem);
-
-      const updatedCols = {
-        ...columns,
-        [source.droppableId]: { ...sourceCol, items: sourceItems },
-        [destination.droppableId]: { ...destCol, items: destItems },
-      };
-
-      setColumns(updatedCols);
-      onDrag?.({
-        from: source.droppableId,
-        to: destination.droppableId,
-        item: draggedItem,
-      });
-    }
-  };
-
-  const handleColumnDelete = (colId: string) => {
-    const columnIds = columns[colId]?.items?.map((item) => item.id) || [];
-    onColumnDelete?.(columnIds);
-  };
-
-  return (
-    <DragDropContext onDragEnd={onDragEnd}>
-      <Flex
-        gap={4}
-        p={4}
-        bg={colors?.gray?.[200]}
-        minH="100vh"
-        overflowX="auto"
-        maxWidth="100vw"
-      >
-        {isLoading ? (
-          Array.from({ length: 5 })?.map((_, idx) => (
-            <Box
-              key={idx}
-              width="17.5rem"
-              p={4}
-              borderRadius="0.5rem"
-              bg={colors?.background?.[100]}
-              border={`0.125rem solid ${colors?.gray?.[200]}`}
-              flexShrink={0}
-            >
-              <Skeleton height="2.75rem" mb={4} borderRadius="0.25rem" />
-              <SkeletonText mt="4" noOfLines={5} spacing="4" />
-            </Box>
-          ))
-        ) : (
-          Object.entries(columns)?.map(([colId, column]) => (
-            <Droppable droppableId={colId.toString()} key={colId}>
-              {(provided, snapshot) => (
-                <Box
-                  ref={provided.innerRef}
-                  {...provided.droppableProps}
-                  width="17.5rem"
-                  opacity={1}
-                  borderRadius="0.5rem"
-                  borderWidth="0.063rem"
-                  background={
-                    snapshot.isDraggingOver
-                      ? colors?.blue?.[50]
-                      : colors?.background?.[100]
-                  }
-                  border={`${snapshot.isDraggingOver
-                    ? "0.5px dashed" + colors?.blue?.[500]
-                    : "0.125rem solid" + colors.gray?.[200]
-                    }`}
-                  display="flex"
-                  flexDirection="column"
-                  flexShrink={0}
-                >
-                  <Flex
-                    width="16.5rem"
-                    height="2.75rem"
-                    borderRadius="0.25rem"
-                    borderLeft="0.188rem solid"
-                    borderLeftColor={column.color ?? colors?.primary?.[500]}
-                    background={colors?.gray?.[100]}
-                    align="center"
-                    px={2}
-                    mb={3}
-                    flexShrink={0}
-                    m={2}
-                    justifyContent="space-between"
-                  >
-                    <Text
-                      fontWeight="600"
-                      fontSize="1rem"
-                      color={colors?.text?.[700]}
-                    >
-                      {column.title}
-                    </Text>
-                    <Box
-                      as={Trash2}
-                      size={16}
-                      cursor="pointer"
-                      color={colors?.text?.[600]}
-                      _hover={{ color: colors?.red?.[600] }}
-                      onClick={() => handleColumnDelete(colId)}
-                    />
-                  </Flex>
-                  <Box
-                    px={2}
-                    pb={2}
-                    overflowY="auto"
-                    maxHeight="calc(100vh - 7rem)"
-                    overflowX="hidden"
-                  >
-                    {column.items?.map((account, index) => (
-                      <AccountCard
-                        key={account.id}
-                        account={account}
-                        index={index}
-                        onDelete={onDelete}
-                        onOpen={onOpen}
-                      />
-                    ))}
-                    {provided.placeholder}
-                  </Box>
-                </Box>
-              )}
-            </Droppable>
-          ))
-        )}
-      </Flex>
-    </DragDropContext>
-  );
-};
-
-export default KanbanBoard;

package/src/Components/KanbanBoard/KanbanBoardProps.ts

@@ -1,34 +0,0 @@
-
-export type Account = {
-  id: string;
-  rating: string;
-  name: string;
-  owner: string;
-  site: string;
-  details?: string;
-  [key: string]: string | undefined;
-}
-
-export type ColumnType = {
-  id: string;
-  title: string;
-  color: string;
-  items: Account[];
-}
-
-export type KanbanBoardProps = {
-  data: Record<string, ColumnType>;
-  onDelete?: (account: Account) => void;
-  onOpen?: (account: Account) => void;
-  onColumnDelete?: (colId: (string | number)[]) => void;
-  onDrag?: ({
-    from,
-    to,
-    item,
-  }: {
-    from: string;
-    to: string;
-    item: Account;
-  }) => void;
-  isLoading?: boolean;
-};

package/src/Components/Loading/Loading.stories.tsx

@@ -1,26 +0,0 @@
-// import React, { useState } from 'react';
-// import { StoryFn, Meta } from '@storybook/react/types-6-0';
-// import { Button } from "@chakra-ui/react";
-// import Loading from './Loading';
-// import { LoadingProps } from './LoadingProps';
-
-// export default {
-//     title: 'Components/Loading/Loading',
-//     component: Loading,
-// } as Meta;
-
-// const Template: StoryFn<LoadingProps> = (args) => {
-//     const [isLoading, setIsLoading] = useState(false);
-//     return (
-//         <div>
-//             <Button onClick={() => setIsLoading(!isLoading)}>Toggle Loading</Button>
-//             <Loading {...args} isLoading={isLoading} />
-//         </div>
-//     );
-// };
-
-// export const Interactive = Template.bind({});
-// Interactive.args = {
-//     text: 'Loading...',
-// };
-export {};