pixelize-design-library 2.1.19 → 2.1.20

package/src/Components/KanbanBoard/KanbanBoard.tsx

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

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

@@ -0,0 +1,26 @@
+// 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 {};

package/src/Components/Loading/Loading.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { Box, Center, Spinner, Text } from "@chakra-ui/react";
+import { LoadingProps } from "./LoadingProps";
+import { css, keyframes } from "@emotion/react";
+
+// const blurAnimation = keyframes`
+//   0% {
+//     filter: blur(0);
+//   }
+//   50% {
+//     filter: blur(2px);
+//   }
+//   100% {
+//     filter: blur(0);
+//   }
+// `;
+
+const colorTransition = keyframes`
+  0% {
+    color: black;
+  }
+  50% {
+    color: gray;
+  }
+  100% {
+    color: black;
+  }
+`;
+
+export default function Loading({ text, isLoading, onlytext }: LoadingProps) {
+  if (!isLoading) {
+    return null;
+  }
+  return (
+    <Box
+      position="fixed"
+      top="0"
+      right="0"
+      bottom="0"
+      left="0"
+      backgroundColor="rgba(0, 0, 0, 0.4)"
+      backdropFilter="blur(60px)"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      zIndex="9999"
+    >
+      <Center height="100vh">
+        {!onlytext ? (
+          <>
+            <Spinner
+              thickness="4px"
+              speed="0.65s"
+              emptyColor="gray.200"
+              color="blue.500"
+              size="xl"
+            />
+            <Text mt="2" ml={"5"}>
+              {text}
+            </Text>
+          </>
+        ) : (
+          <Text
+            mt="2"
+            ml={"5"}
+            fontSize="50px"
+            textTransform={"uppercase"}
+            fontWeight={500}
+            css={css`
+              animation: ${colorTransition} 2s infinite;
+            `}
+          >
+            {text}
+          </Text>
+        )}
+      </Center>
+    </Box>
+  );
+}

package/src/Components/Loading/LoadingProps.tsx

@@ -0,0 +1,5 @@
+export type LoadingProps = {
+  text?: string;
+  isLoading: boolean;
+  onlytext?: boolean;
+};

package/src/Components/Modal/Modal.stories.tsx

@@ -0,0 +1,107 @@
+// import React, { useState } from 'react';
+// import { Meta, StoryFn } from '@storybook/react';
+// import Modal from './Modal';
+// import { ChakraProvider, Button } from '@chakra-ui/react';
+// import { ChakraModelProps } from './ModalProps';
+
+// export default {
+//     title: 'Components/Modal/Modal',
+//     component: Modal,
+//     argTypes: {
+//         size: {
+//             control: 'select',
+//             options: ['xs', 'sm', 'md', 'lg', 'xl', 'full'],
+//             defaultValue: 'md',
+//         },
+//         isOpen: {
+//             control: 'boolean',
+//             defaultValue: false,
+//         },
+//         title: {
+//             control: 'text',
+//             defaultValue: 'Modal Title',
+//         },
+//         overlaybg: {
+//             control: 'text',
+//             defaultValue: 'blackAlpha.300',
+//         },
+//         overlaybackdropFilter: {
+//             control: 'text',
+//             defaultValue: 'blur(10px) hue-rotate(90deg)',
+//         },
+//         overlaybackdropInvert: {
+//             control: 'text',
+//             defaultValue: '0%',
+//         },
+//         overlaybackdropBlur: {
+//             control: 'text',
+//             defaultValue: '0px',
+//         },
+//         isCentered: {
+//             control: 'boolean',
+//             defaultValue: true,
+//         },
+//         blockScrollOnMount: {
+//             control: 'boolean',
+//             defaultValue: true,
+//         },
+//         closeOnOverlayClick: {
+//             control: 'boolean',
+//             defaultValue: true,
+//         },
+//         motionPreset: {
+//             control: 'text',
+//             defaultValue: 'scale',
+//         },
+//         scrollBehavior: {
+//             control: 'text',
+//             defaultValue: 'inside',
+//         },
+//         footer: {
+//             control: 'text',
+//             defaultValue: 'Footer Content',
+//         },
+//         children: {
+//             control: 'text',
+//             defaultValue: 'This is the body of the modal',
+//         },
+//     },
+// } as Meta;
+
+// interface StoryProps extends ChakraModelProps {
+//     footer: React.ReactNode;
+// }
+
+// const Template: StoryFn<StoryProps> = (args) => {
+//     const [isOpen, setIsOpen] = useState(args.isOpen);
+
+//     const handleClose = () => setIsOpen(false);
+//     const handleOpen = () => setIsOpen(true);
+
+//     return (
+//         <ChakraProvider>
+//             <Button onClick={handleOpen}>Open Modal</Button>
+//             <Modal {...args} isOpen={isOpen} onClose={handleClose} footer={<Button onClick={handleClose}>Footer Button</Button>}>
+//                 {args.children}
+//             </Modal>
+//         </ChakraProvider>
+//     );
+// };
+
+// export const Default = Template.bind({});
+// Default.args = {
+//     size: 'md',
+//     title: 'Modal Title',
+//     overlaybg: 'blackAlpha.300',
+//     overlaybackdropFilter: 'blur(10px) hue-rotate(90deg)',
+//     overlaybackdropInvert: '0%',
+//     overlaybackdropBlur: '0px',
+//     isCentered: true,
+//     blockScrollOnMount: true,
+//     closeOnOverlayClick: true,
+//     motionPreset: 'scale',
+//     scrollBehavior: 'inside',
+//     footer: <Button onClick={() => alert('Footer button clicked')}>Footer Button</Button>,
+//     children: 'This is the body of the modal',
+// };
+export {};

package/src/Components/Modal/Modal.tsx

@@ -0,0 +1,107 @@
+import React, { ReactElement } from "react";
+import {
+  Modal as ChakraModal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader as ChakraModalHeader,
+  ModalCloseButton,
+  ModalBody as ChakraModalBody,
+  ModalFooter as ChakraModalFooter,
+  Spinner,
+} from "@chakra-ui/react";
+import { ChakraModelProps } from "./ModalProps";
+
+export const ModalHeader: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <>{children}</>;
+};
+export const ModalBody: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <>{children}</>;
+};
+export const ModalFooter: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <>{children}</>;
+};
+
+export default function Modal({
+  size,
+  isOpen = false,
+  onClose,
+  overlaybg = "blackAlpha.300",
+  overlaybackdropFilter = "blur(10px) hue-rotate(90deg)",
+  overlaybackdropInvert,
+  overlaybackdropBlur,
+  isCentered,
+  finalFocusRef,
+  blockScrollOnMount,
+  initialFocusRef,
+  closeOnOverlayClick,
+  motionPreset,
+  scrollBehavior,
+  children,
+  isLoading,
+}: ChakraModelProps) {
+  if (!isOpen) return <></>;
+
+  const isReactElement = (child: React.ReactNode): child is ReactElement => {
+    return child !== null && typeof child === "object" && "type" in child;
+  };
+  const header = React.Children.toArray(children).find(
+    (child) => isReactElement(child) && child.type === ModalHeader,
+  );
+  const body = React.Children.toArray(children).find(
+    (child) => isReactElement(child) && child.type === ModalBody,
+  );
+  const footer = React.Children.toArray(children).find(
+    (child) => isReactElement(child) && child.type === ModalFooter,
+  );
+
+  return (
+    <ChakraModal
+      isOpen={true}
+      onClose={onClose}
+      size={size}
+      isCentered={isCentered}
+      finalFocusRef={finalFocusRef}
+      blockScrollOnMount={blockScrollOnMount}
+      initialFocusRef={initialFocusRef}
+      closeOnOverlayClick={closeOnOverlayClick}
+      motionPreset={motionPreset}
+      scrollBehavior={scrollBehavior}
+    >
+      <ModalOverlay
+        bg={overlaybg}
+        backdropFilter={overlaybackdropFilter}
+        backdropInvert={overlaybackdropInvert}
+        backdropBlur={overlaybackdropBlur}
+      />
+      <ModalContent>
+        {isLoading ? (
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%",
+              width: "100%",
+              padding: "25%",
+            }}
+          >
+            <Spinner
+              thickness="4px"
+              speed="0.65s"
+              emptyColor="gray.200"
+              color="blue.500"
+              size="xl"
+            />
+          </div>
+        ) : (
+          <>
+            {header && <ChakraModalHeader>{header}</ChakraModalHeader>}
+            <ModalCloseButton />
+            <ChakraModalBody>{body}</ChakraModalBody>
+            {footer && <ChakraModalFooter>{footer}</ChakraModalFooter>}
+          </>
+        )}
+      </ModalContent>
+    </ChakraModal>
+  );
+}

package/src/Components/Modal/ModalProps.tsx

@@ -0,0 +1,22 @@
+import { ModalProps } from "@chakra-ui/react";
+
+export type ChakraModelProps = Pick<
+  ModalProps,
+  | "isOpen"
+  | "onClose"
+  | "finalFocusRef"
+  | "blockScrollOnMount"
+  | "initialFocusRef"
+  | "closeOnOverlayClick"
+  | "isCentered"
+  | "motionPreset"
+  | "scrollBehavior"
+> & {
+  overlaybg?: string;
+  overlaybackdropFilter?: string;
+  overlaybackdropInvert?: string;
+  overlaybackdropBlur?: string;
+  size: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  children?: React.ReactNode;
+  isLoading?: boolean;
+};