pixelize-design-library 2.1.18 → 2.1.20

package/src/Components/Tag/Tag.tsx

@@ -0,0 +1,68 @@
+import React, { ElementType } from "react";
+import { Tag as ChakraTag, TagLabel, TagRightIcon } from "@chakra-ui/react";
+
+interface ChipProps {
+  label: string;
+  onIconClick?: () => void;
+  onTagClick?: () => void;
+  icon?: ElementType;
+  colorScheme?:
+    | "primary"
+    | "secondary"
+    | "tertiary"
+    | "gray"
+    | "red"
+    | "orange"
+    | "yellow"
+    | "green"
+    | "teal"
+    | "blue"
+    | "cyan"
+    | "purple"
+    | "pink";
+  size?: "sm" | "md" | "lg";
+  variant?: "solid" | "outline";
+}
+
+const Tag: React.FC<ChipProps> = ({
+  label,
+  colorScheme = "primary",
+  variant = "solid",
+  size = "md",
+  icon,
+  onTagClick,
+  onIconClick,
+}) => {
+  return (
+    <ChakraTag
+      size={size}
+      variant={variant}
+      colorScheme={colorScheme}
+      borderRadius="full"
+      cursor={"pointer"}
+      onClick={() => onTagClick?.()}
+    >
+      <TagLabel>{label}</TagLabel>
+      {icon && (
+        <TagRightIcon
+          as={icon}
+          boxSize="1em"
+          ml={1.5}
+          cursor={onIconClick ? "pointer" : "default"}
+          onClick={(e) => {
+            e.stopPropagation();
+            onIconClick?.();
+          }}
+          transition="all 0.2s ease"
+          _hover={{
+            opacity: 0.8,
+            transform: "scale(1.05)",
+            cursor: onIconClick ? "pointer" : "default",
+          }}
+        />
+      )}
+    </ChakraTag>
+  );
+};
+
+export default Tag;

package/src/Components/Timeline/Timeline.tsx

@@ -0,0 +1,310 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { TimelineEvents, TimelineProps } from "./TimelineProps";
+import { Tooltip } from "@chakra-ui/react";
+import {FileText, IndianRupee, Info,Volleyball } from "lucide-react";
+
+const TimelineContainer = styled.div`
+  position: relative;
+  padding: 0px 24px;
+  margin: 0 auto;
+  width: 100%;
+  max-width: 800px;
+   @media (max-width: 768px) {
+    padding: 0px 16px;
+    max-width: 100%;
+  }
+`;
+
+const Line = styled.div`
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: #d2d9e0;
+  transform: translateX(-50%);
+  @media (max-width: 768px) {
+    left: 25px; /* Move the line towards the left */
+  }
+`;
+
+const EventContainer = styled.div<{ isLeft: boolean }>`
+  display: flex;
+  justify-content: ${({ isLeft }) => (isLeft ? "flex-end" : "flex-start")};
+  width: 100%;
+  // padding: 1rem 0 1rem 0;
+  box-sizing: border-box;
+  position: relative;
+  margin-bottom: 24px;
+  align-items: center; /* Center alignment for dot and event content */
+  text-align: ${({ isLeft }) => (isLeft ? "left" : "right")};
+  @media (max-width: 768px) {
+    flex-direction: column;
+    text-align: left;
+    align-items: flex-start;
+  }
+`;
+
+const Event = styled.div`
+  // background: white;
+  // padding: 16px;
+  // border: 1px solid #007bff;
+  // border-radius: 8px;
+  // width: 40%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer; /* Indicates that the event is clickable */
+`;
+
+const Dot = styled.div`
+  position: absolute;
+  left: 50%;
+  width: 30px;
+  height: 30px;
+  background-color: #f4f7ff;
+  border-radius: 50%;
+  transform: translateX(-50%);
+  padding: 6px;
+  border: 1px solid #d2d9e0;
+   @media (max-width: 768px) {
+    left: 20px; /* Move dot closer to the left */
+    transform: translateX(0); /* Remove horizontal centering */
+  }
+`;
+
+// const Arrow = styled.div<{ isLeft: boolean }>`
+//   position: absolute;
+//   left: ${({ isLeft }) => (isLeft ? "-10px " : "100%")};
+//   width: 0;
+//   height: 0;
+//   border-style: solid;
+//   border-width: ${({ isLeft }) =>
+//     isLeft ? "10px 10px 10px 0" : "10px 10px 10px 10px"};
+//   border-color: transparent #007bff transparent transparent;
+//   transform: translateX(-50%);
+//   top: 50%;
+//   transform: translateY(-50%);
+//   transform: ${({ isLeft }) =>
+//     isLeft ? "translateY(-50%) " : "translateY(-50%) rotate(180deg)"};
+// `;
+
+const EventContent = styled.div`
+  // margin-left: 24px;
+`;
+
+const EventTitle = styled.h3`
+  margin: 0;
+`;
+
+// const EventDescription = styled.p`
+//   margin: 0;
+// `;
+
+const EventDate = styled.span`
+  display: block;
+  margin-top: 8px;
+  color: #6c757d;
+`;
+
+const EventTime = styled.span<{ isLeft: boolean }>`
+  left: ${({ isLeft }) => (isLeft ? "38% " : "53%")};
+  position: absolute;
+  color: #6c757d;
+  @media (max-width: 768px) {
+    position: relative;
+    left: auto;
+    margin-left: 40px;
+  }
+`;
+
+const EventGroupDate = styled.div`
+  font-size: 1rem;
+  font-weight: 400;
+  color: #464f62;
+  box-sizing: border-box;
+  width: 180px;
+  padding: 5px 25px;
+  text-align: center;
+  background-color: #f4f7ff;
+  border: 1px solid #d2d9e0;
+  border-radius: 5px;
+  margin: 0 auto; /* Center horizontally */
+  display: flex;
+  align-items: center; /* Center vertically */
+  justify-content: center; /* Center horizontally */
+  @media (max-width: 768px) {
+    width: auto;
+    padding: 5px 10px;
+  }
+`;
+
+const EventGroupSeparator = styled.div`
+  width: 100%;
+`;
+
+const EventGroupHeader = styled.div`
+  position: relative;
+  margin-bottom: 24px;
+`;
+
+// const FlexContainer = styled.div`
+//   display: flex;
+//   align-items: center;
+// `;
+
+const Timeline = ({ timelineEvents }: TimelineProps) => {
+  const formatTimestamp = (timestamp: any, type: string) => {
+    const parsedTimestamp = parseInt(timestamp, 10);
+    const date = new Date(parsedTimestamp);
+    if (isNaN(date.getTime())) {
+      return "Invalid Date";
+    }
+
+    if (type === "date") {
+      const monthNames = [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+      ];
+      const month = monthNames[date.getMonth()];
+      const day = date.getDate();
+      const year = date.getFullYear();
+      return `${month} ${day}, ${year}`;
+    } else if (type === "time") {
+      // Convert to IST (UTC+5:30)
+      const istOffset = 5.5 * 60 * 60 * 1000; // 5 hours 30 minutes in milliseconds
+      const istDate = new Date(date.getTime() + istOffset);
+
+      let hours = istDate.getUTCHours();
+      const minutes = istDate.getUTCMinutes();
+      const ampm = hours >= 12 ? "PM" : "AM";
+
+      // Convert hours to 12-hour format
+      hours = hours % 12;
+      hours = hours ? hours : 12; // the hour '0' should be '12'
+
+      // Pad minutes with leading zero if needed
+      const minutesStr = minutes < 10 ? "0" + minutes : minutes;
+
+      return `${hours}:${minutesStr} ${ampm}`;
+    }
+    return date.toLocaleString();
+  };
+
+  const getIcon = (event: any) => {
+    switch (event.action_from) {
+      case "Accounts":
+        return <IndianRupee size={17} />;
+      case "Notes":
+        return <FileText size={17} />;
+      default:
+        return <Volleyball size={17} />;
+    }
+  };
+
+  const groupEventsByDate = (events: TimelineEvents[]) => {
+    return events.reduce(
+      (groups: { [key: string]: TimelineEvents[] }, event) => {
+        const date = formatTimestamp(event.created_at, "date");
+        if (!groups[date]) {
+          groups[date] = [];
+        }
+        groups[date].push(event);
+        return groups;
+      },
+      {},
+    );
+  };
+
+  const groupedEvents = groupEventsByDate(timelineEvents);
+
+  const formatChanges = (changes: any) => {
+    type ChangeRecord = {
+      original?: string | null;
+      updated: string;
+    };
+    if (changes === null) {
+      return "No Changes";
+    }
+    const result = Object.entries(JSON.parse(changes))
+      .map(([key, value]) => {
+        const changeRecord = value as ChangeRecord;
+        if (
+          changeRecord.original === null ||
+          changeRecord.original === undefined
+        ) {
+          return `${key} changed from null to ${changeRecord.updated}`;
+        } else {
+          return `${key} updated to ${changeRecord.updated}`;
+        }
+      })
+      .join("\n");
+    return result;
+  };
+
+  // console.log("groupedEvents", groupedEvents);
+  return (
+    <TimelineContainer>
+      <Line />
+      {Object.keys(groupedEvents).map((date) => (
+        <EventGroupSeparator key={date}>
+          <EventGroupHeader>
+            <EventGroupDate>{date}</EventGroupDate>
+          </EventGroupHeader>
+          {groupedEvents[date].map((event, index) => (
+            <EventContainer key={index} isLeft={index % 2 === 0}>
+              <Dot>{getIcon(event)}</Dot>
+              <EventTime isLeft={index % 2 === 0}>
+                {formatTimestamp(event.created_at, "time")}
+              </EventTime>
+              <Event>
+                <EventContent>
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent:
+                        index % 2 === 0 ? "flex-start" : "flex-end",
+                    }}
+                  >
+                    <EventTitle>
+                      {event.action_from + " " + event.title}
+                    </EventTitle>
+                    <Tooltip
+                      label={formatChanges(event.changes)}
+                      shouldWrapChildren
+                      placement="top"
+                      hasArrow
+                    >
+                      <Info style={{ marginLeft: "5px" }} size={17} />
+                    </Tooltip>
+                  </div>
+                  {/* <EventDescription>{formatChanges(event.changes)}</EventDescription> */}
+                  <EventDate>
+                    {" by " +
+                      event.action_by +
+                      " " +
+                      formatTimestamp(event.created_at, "date")}
+                  </EventDate>
+                </EventContent>
+              </Event>
+            </EventContainer>
+          ))}
+        </EventGroupSeparator>
+      ))}
+    </TimelineContainer>
+  );
+};
+
+export default Timeline;

package/src/Components/Timeline/TimelineProps.tsx

@@ -0,0 +1,22 @@
+export interface TimelineProps {
+  events?: TimelineEvent[];
+  timelineEvents: TimelineEvents[];
+  onEventClick?: (event: TimelineEvents, index: number) => void;
+}
+
+export interface TimelineEvent {
+  title: string;
+  description: string;
+  time: string;
+}
+
+export interface TimelineEvents {
+  logs_id: number;
+  title: string;
+  primary_id: number;
+  is_from: string;
+  action_from: string;
+  action_by: string;
+  created_at: number;
+  changes: any;
+}

package/src/Components/Toaster/Toaster.stories.tsx

@@ -0,0 +1,60 @@
+// // Toaster.stories.tsx
+// import React from 'react';
+// import { Meta, StoryFn } from '@storybook/react';
+// import ToasterProvider, { useToaster } from './Toaster';
+// import { Button, ChakraProvider } from '@chakra-ui/react';
+// import { ToasterToastProps } from './ToasterProps';
+
+// export default {
+//     title: 'Components/Toaster/ToasterProvider',
+//     component: ToasterProvider,
+//     argTypes: {
+//         title: {
+//             control: 'text',
+//             defaultValue: 'Test',
+//         },
+//         status: {
+//             control: 'select',
+//             options: ['info', 'warning', 'success', 'error'],
+//             defaultValue: 'info',
+//         },
+//         position: {
+//             control: 'select',
+//             options: ['top', 'top-right', 'top-left', 'bottom', 'bottom-right', 'bottom-left'],
+//             defaultValue: 'bottom-right',
+//         },
+//     },
+// } as Meta;
+
+// interface StoryProps {
+//     title: string;
+//     status: 'info' | 'warning' | 'success' | 'error';
+//     position: 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
+// }
+
+// const Template: StoryFn<StoryProps> = ({ title, status, position }) => {
+//     const ShowToastButton = () => {
+//         const { showToast } = useToaster();
+//         return (
+//             <Button onClick={() => showToast({
+//                 title,
+//                 description: 'This is a test toast',
+//                 status,
+//                 position,
+//             })}>
+//                 Show Toast
+//             </Button>
+//         );
+//     };
+//     return (
+//         <ToasterProvider>
+//             <ChakraProvider>
+//                 <ShowToastButton />
+//             </ChakraProvider>
+//         </ToasterProvider>
+//     );
+// };
+
+// export const Default = Template.bind({});
+
+export {};

package/src/Components/Toaster/Toaster.tsx

@@ -0,0 +1,99 @@
+import React, { createContext, useContext } from "react";
+import {
+  Box,
+  CloseButton,
+  Flex,
+  Text,
+  useToast,
+  useTheme,
+} from "@chakra-ui/react";
+import {
+  ToasterChildren,
+  ToasterContextType,
+} from "./ToasterProps";
+
+const ToasterContext = createContext<ToasterContextType | undefined>(undefined);
+
+export default function ToasterProvider({ children }: ToasterChildren) {
+  const toast = useToast();
+  const theme = useTheme();
+
+  const showToast: ToasterContextType["showToast"] = ({
+    title,
+    description,
+    status = "info",
+    duration = 5000,
+    isClosable = true,
+    position = "top-right",
+    onClose,
+  }) => {
+    const statusColors: Record<string, { bg: string; border: string }> = {
+      success: {
+        bg: theme.colors.green?.[50],
+        border: theme.colors.green?.[300],
+      },
+      error: {
+        bg: theme.colors.red?.[50],
+        border: theme.colors.red?.[300],
+      },
+      warning: {
+        bg: theme.colors.yellow?.[50],
+        border: theme.colors.yellow?.[300],
+      },
+      info: {
+        bg: theme.colors.blue?.[50] ,
+        border: theme.colors.blue?.[300] ,
+      },
+      loading: {
+        bg: theme.colors.gray?.[50] ,
+        border: theme.colors.gray?.[300] ,
+      },
+    };
+
+    const colors = statusColors[status];
+
+    toast({
+      duration,
+      isClosable,
+      position,
+      onCloseComplete: onClose,
+      render: ({ onClose }) => (
+        <Box
+          bg={colors.bg}
+          border="0.063rem solid"
+          borderColor={colors.border}
+          boxShadow="md"
+          borderRadius="md"
+          p={4}
+          minW="22.5rem"
+        >
+          <Flex justify="space-between" align="flex-start">
+            <Box>
+              <Text fontWeight="semibold" mb="0.25rem">
+                {title}
+              </Text>
+              <Text fontSize="sm">{description}</Text>
+            </Box>
+            {isClosable && (
+              <CloseButton onClick={onClose} size="sm" mt={1} ml={4} />
+            )}
+          </Flex>
+        </Box>
+      ),
+    });
+  };
+
+  return (
+    <ToasterContext.Provider value={{ showToast }}>
+      {children}
+    </ToasterContext.Provider>
+  );
+}
+
+export const useToaster = () => {
+  const context = useContext(ToasterContext);
+  if (!context) {
+    throw new Error("useToaster must be used within a ToasterProvider");
+  }
+  return context;
+};

package/{dist/Components/Toaster/ToasterProps.d.ts → src/Components/Toaster/ToasterProps.tsx}

@@ -1,12 +1,15 @@
 import { ToastProps } from "@chakra-ui/react";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
+
 export type ToasterToastProps = Pick<ToastProps, 'description' | 'title' | 'isClosable' | 'duration' | 'children' | 'onClose'> & {
-    position?: "top" | "bottom" | "top-right" | "top-left" | "bottom-right" | "bottom-left";
-    status?: "success" | "error" | "warning" | "info" | "loading";
-};
+    position?: "top" | "bottom" | "top-right" | "top-left" | "bottom-right" | "bottom-left"
+    status?: "success" | "error" | "warning" | "info" | "loading"
+}
+
 export interface ToasterContextType {
-    showToast: (children: ToasterToastProps) => void;
+    showToast: (children: ToasterToastProps) => void
 }
+
 export interface ToasterChildren {
     children: ReactNode;
-}
+}

package/src/Components/Toggle/TableToggle.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { Box, IconButton } from "@chakra-ui/react";
+import { Columns3, Table2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { ViewMode, ViewToggleProps } from "./TableToggleProps";
+import ToolTip from "../ToolTip/ToolTip";
+
+const TableToggle: React.FC<ViewToggleProps> = ({ value, onChange }) => {
+  const theme: any = useCustomTheme();
+
+  const styles = {
+    container: {
+      display: "flex",
+      alignItems: "center",
+      bg: theme.colors.background[600],
+      p: "0.125rem",
+      borderRadius: "0.375rem",
+      height: "2rem",
+      gap: "0.125rem",
+      width: "6.3rem",
+    },
+    button: (mode: ViewMode) => ({
+      bg: value === mode ? theme.colors.background[50] : "transparent",
+      boxShadow: value === mode ? "md" : "none",
+      color: value === mode ? theme.colors.black : theme.colors.background[800],
+      borderRadius: "0.313rem",
+      height: "1.75rem",
+      border: "0.031rem solid",
+      borderColor:
+        value === mode ? theme.colors.background[400] : "transparent",
+      padding: "0.313rem 0.813rem",
+      _hover: {
+        bg:
+          value === mode
+            ? theme.colors.background[50]
+            : theme.colors.background[400],
+        color:
+          value === mode ? theme.colors.black : theme.colors.background[900],
+      },
+      transition: "all 0.3s ease-in-out",
+    }),
+  };
+
+  return (
+    <Box {...styles.container}>
+      <ToolTip label="Table View" placement="top" fontSize={12} hasArrow>
+        <IconButton
+          aria-label="Grid View"
+          icon={<Table2 size="1.25rem" />}
+          variant="ghost"
+          onClick={() => onChange("grid")}
+          {...styles.button("grid")}
+        />
+      </ToolTip>
+      <ToolTip label="Kanban View" placement="top" fontSize={12} hasArrow>
+        <IconButton
+          aria-label="List View"
+          icon={<Columns3 size="1.25rem" />}
+          variant="ghost"
+          onClick={() => onChange("list")}
+          {...styles.button("list")}
+        />
+      </ToolTip>
+    </Box>
+  );
+};
+
+export default TableToggle;

package/{dist/Components/Toggle/TableToggleProps.d.ts → src/Components/Toggle/TableToggleProps.ts}

@@ -1,5 +1,6 @@
 export type ViewMode = "grid" | "list";
+
 export type ViewToggleProps = {
-    value: ViewMode;
-    onChange: (val: ViewMode) => void;
+  value: ViewMode;
+  onChange: (val: ViewMode) => void;
 };

package/src/Components/ToolTip/ToolTip.stories.tsx

@@ -0,0 +1,38 @@
+// import React from 'react';
+// import ToolTip from './ToolTip';
+// import { ToolTipProps } from "./ToolTipProps";
+// import { StoryFn, Meta } from '@storybook/react';
+// import { Box } from '@chakra-ui/react';
+
+// export default {
+//     title: 'Components/ToolTip/ToolTip',
+//     component: ToolTip,
+// } as Meta;
+
+// const Template: StoryFn<ToolTipProps> = (args) => (
+//     <Box textAlign="center" fontSize="xl">
+//         <ToolTip {...args}>
+//             Hover me
+//         </ToolTip>
+//     </Box>
+// );
+
+// export const Default = Template.bind({});
+// Default.args = {
+//     label: 'Default Tooltip',
+//     placement: 'top',
+//     hasArrow: true,
+// };
+
+// export const Customized = Template.bind({});
+// Customized.args = {
+//     label: 'Customized Tooltip',
+//     placement: 'bottom',
+//     hasArrow: true,
+//     fontSize: 'md',
+//     bg: 'purple.500',
+//     color: 'white',
+//     openDelay: 500,
+//     closeDelay: 200,
+// };
+export {};