pixelize-design-library 2.1.20 → 2.1.21

package/src/Components/Timeline/Timeline.tsx

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

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

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

@@ -1,99 +0,0 @@
-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/src/Components/Toggle/TableToggle.tsx

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

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

package/src/Components/ToolTip/ToolTip.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-import { Tooltip as ChakraTooltip } from "@chakra-ui/react";
-import { ToolTipProps } from "./ToolTipProps";
-
-export default function ToolTip({
-  placement,
-  label,
-  children,
-  hasArrow,
-  fontSize,
-  bg,
-  color,
-  isDisabled,
-  isOpen,
-  defaultIsOpen,
-  openDelay,
-  closeDelay,
-  arrowSize,
-  closeOnClick,
-  size,
-  width,
-  height,
-  arrowPadding,
-  arrowShadowColor,
-  direction,
-  gutter,
-  onClose,
-  modifiers,
-  closeOnPointerDown,
-  styles,
-}: ToolTipProps) {
-  return (
-    <ChakraTooltip
-      label={label}
-      placement={placement}
-      hasArrow={hasArrow}
-      fontSize={fontSize}
-      bg={bg}
-      color={color}
-      isDisabled={isDisabled}
-      isOpen={isOpen}
-      defaultIsOpen={defaultIsOpen}
-      openDelay={openDelay}
-      closeDelay={closeDelay}
-      arrowSize={arrowSize}
-      closeOnClick={closeOnClick}
-      size={size}
-      width={width}
-      height={height}
-      arrowPadding={arrowPadding}
-      arrowShadowColor={arrowShadowColor}
-      direction={direction}
-      gutter={gutter}
-      onClose={onClose}
-      modifiers={modifiers}
-      closeOnPointerDown={closeOnPointerDown}
-      style={styles}
-    >
-      {children}
-    </ChakraTooltip>
-  );
-}

package/src/Components/ToolTip/ToolTipProps.tsx

@@ -1,46 +0,0 @@
-import { TooltipProps as ChakraTooltip } from "@chakra-ui/react";
-export type ToolTipProps = Pick<
-  ChakraTooltip,
-  | "placement"
-  | "label"
-  | "hasArrow"
-  | "fontSize"
-  | "bg"
-  | "color"
-  | "isDisabled"
-  | "isOpen"
-  | "defaultIsOpen"
-  | "openDelay"
-  | "closeDelay"
-  | "arrowSize"
-  | "closeOnClick"
-  | "size"
-  | "width"
-  | "height"
-  | "arrowPadding"
-  | "arrowShadowColor"
-  | "direction"
-  | "gutter"
-  | "onClose"
-  | "modifiers"
-  | "closeOnPointerDown"
-> & {
-  children: React.ReactNode;
-  styles?: React.CSSProperties;
-  placement:
-    | "auto"
-    | "auto-start"
-    | "auto-end"
-    | "top"
-    | "top-start"
-    | "top-end"
-    | "right"
-    | "right-start"
-    | "right-end"
-    | "bottom"
-    | "bottom-start"
-    | "bottom-end"
-    | "left"
-    | "left-start"
-    | "left-end";
-};