Merge branch 'master' of https://github.com/sudhanshutech/sistent into yash/addShareModal

Author: sudhanshutech

package-lock.json

@@ -46,8 +46,10 @@
     "@reduxjs/toolkit": "^2.2.5",
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.11",
+    "@types/lodash": "^4.17.7",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
+    "@types/react-redux": "^7.1.33",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "commitizen": "^4.3.0",
@@ -67,10 +69,13 @@
     "prettier-plugin-organize-imports": "^3.2.3",
     "react-error-boundary": "^4.0.12",
     "react-markdown": "^8.0.7",
+    "react-redux": "^8.1.1",
+    "redux": "^5.0.1",
     "rehype-raw": "^6.1.1",
     "remark-gfm": "^3.0.1",
     "ts-jest": "^29.1.1",
-    "tsup": "^8.0.1",
+    "@types/lodash": "^4.17.7",
+    "tsup": "^8.2.4",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
@@ -79,12 +84,16 @@
     "@mui/material": "^5.15.11",
     "@types/mui-datatables": "*",
     "@xstate/react": "^4.1.1",
+    "lodash": "^4.17.21",
     "mui-datatables": "*",
     "react": ">=17",
     "react-dom": ">=17",
     "xstate": "^5.13.0"
   },
   "peerDependenciesMeta": {
+    "lodash": {
+      "optional": true
+    },
     "@emotion/react": {
       "optional": true
     },
@@ -106,5 +115,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
   }
 }

package.json

@@ -38,6 +38,7 @@ type CatalogCardProps = {
   cardWidth: string;
   cardStyles: React.CSSProperties;
   type: string;
+  onCardClick?: () => void;
 };
 
 export const ClassToIconMap = {
@@ -63,15 +64,16 @@ const CatalogCard: React.FC<CatalogCardProps> = ({
   cardHeight,
   cardWidth,
   cardStyles,
-  cardLink
+  cardLink,
+  onCardClick
 }) => {
   const outerStyles = {
     height: cardHeight,
     width: cardWidth,
     ...cardStyles
   };
   return (
-    <DesignCardUrl href={cardLink} target="_blank" rel="noreferrer">
+    <DesignCardUrl href={cardLink} onClick={onCardClick} target="_blank" rel="noreferrer">
       <DesignCard outerStyles={outerStyles}>
         <DesignInnerCard className="innerCard">
           <ClassWrap catalogClassName={pattern?.catalog_data?.content_class} />

src/custom/CatalogCard/CatalogCard.tsx

@@ -66,6 +66,7 @@ export const DesignInnerCard = styled('div')(({ theme }) => ({
   height: '100%',
   textAlign: 'center',
   transition: 'transform 0.6s',
+  background: theme.palette.background.default,
   boxShadow: `2px 2px 3px 0px ${theme.palette.background.brand?.default}`,
   borderRadius: '0.9375rem'
 }));

src/custom/CatalogCard/style.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material';
-import { ALABASTER_WHITE, KEPPEL, MIDNIGHT_BLACK } from '../../theme';
+import { ALABASTER_WHITE, MIDNIGHT_BLACK } from '../../theme';
 
 // Styled component for ChapterCardWrapper
 export const ChapterCardWrapper = styled('div')(({ theme }) => ({
@@ -13,7 +13,7 @@ export const ChapterCardWrapper = styled('div')(({ theme }) => ({
   }`,
   justifyContent: 'space-between',
   '&:hover': {
-    border: `1px solid ${KEPPEL}`,
+    border: `1px solid ${theme.palette.background.brand?.default}`,
     transition:
       'background 150ms ease-out 0s, border 150ms ease-out 0s, transform 150ms ease-out 0s',
     transform: 'translate3d(0px, -3px, 0px)',

src/custom/ChapterCard/style.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material';
 import React from 'react';
 import { Box } from '../../base/Box';
 import { Card } from '../../base/Card';
@@ -30,6 +31,7 @@ export function CustomColumnVisibilityControl({
 }: CustomColumnVisibilityControlProps): JSX.Element {
   const [open, setOpen] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const theme = useTheme();
 
   const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -54,7 +56,7 @@ export function CustomColumnVisibilityControl({
         <TooltipIcon
           title="View Columns"
           onClick={handleOpen}
-          icon={<ColumnIcon fill="#3c494f" />}
+          icon={<ColumnIcon fill={theme.palette.icon.default} />}
           arrow
         />
         <PopperListener
@@ -87,7 +89,7 @@ export function CustomColumnVisibilityControl({
                     flexDirection: 'column',
                     padding: '1rem',
                     boxShadow: open ? '0px 4px 8px rgba(0, 0, 0, 0.2)' : 'none',
-                    background: '#f4f5f7'
+                    background: theme.palette.background.surfaces
                   }}
                 >
                   {columns.map((col) => (

src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { Dialog } from '../../base';
+
+interface ImageComponentProps {
+  src: string;
+  alt?: string;
+  width?: number | string;
+  height?: number | string;
+  loading?: undefined | 'eager' | 'lazy';
+  decoding?: 'sync' | 'async' | 'auto';
+  crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  sizes?: string;
+  srcSet?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void;
+}
+
+const CustomImage: React.FC<ImageComponentProps> = ({ src, alt, ...props }) => {
+  const [isZoomed, setIsZoomed] = useState(false);
+
+  const handleZoomClick = () => {
+    setIsZoomed(true);
+  };
+
+  const handleZoomClose = () => {
+    setIsZoomed(false);
+  };
+
+  return (
+    <>
+      <img
+        src={src}
+        alt={alt}
+        loading="lazy"
+        onClick={handleZoomClick}
+        {...props}
+        style={{
+          cursor: 'pointer',
+          maxWidth: '100%',
+          height: 'auto',
+          ...props.style
+        }}
+      />
+      <Dialog
+        open={isZoomed}
+        onClose={handleZoomClose}
+        style={{
+          backgroundColor: 'rgba(0, 0, 0, 0.8)'
+        }}
+        PaperProps={{
+          style: {
+            background: 'transparent',
+            boxShadow: 'none',
+            overflow: 'auto',
+            maxWidth: '100%'
+          }
+        }}
+      >
+        <img
+          src={src}
+          alt={alt}
+          onClick={handleZoomClose}
+          style={{
+            objectFit: 'contain',
+            maxWidth: '100%',
+            maxHeight: '100%'
+          }}
+        />
+      </Dialog>
+    </>
+  );
+};
+
+export default CustomImage;

src/custom/CustomImage/CustomImage.tsx

@@ -0,0 +1,2 @@
+import CustomImage from './CustomImage';
+export { CustomImage };

src/custom/CustomImage/index.tsx

@@ -0,0 +1,4 @@
+import { ColView, updateVisibleColumns } from './responsive-column';
+
+export { updateVisibleColumns };
+export type { ColView };

src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/index.tsx

@@ -0,0 +1,68 @@
+// colViews screen size reference
+/*
+  na: Not visible at any screen width
+  xs: width < 585,
+  s: width > 585 && width < 690,
+  m: width > 690 && width < 775,
+  l: width > 775 && width < 915,
+  xl: width > 915 && width < 1140
+  All columns except "na" are visible for width > 1140
+*/
+
+export interface ColView {
+  0: string; // column name
+  1: 'na' | 'xs' | 's' | 'm' | 'l' | 'xl'; // screen size
+}
+
+export const updateVisibleColumns = (
+  colViews: ColView[],
+  width: number
+): Record<string, boolean> => {
+  // showCols object contains key value pairs that represent whether a column is visible or hidden.
+  // i.e, Here, key = column name, and value = true/false where true means visible and false means hidden
+  const showCols: Record<string, boolean> = {};
+
+  // colViews is a 2D array where each element is an array of 2 elements namely,
+  // column name and the screen size till which they are visible
+  colViews.forEach((col) => {
+    // Hide the columns for any screen size
+    if (col[1] === 'na') {
+      showCols[col[0]] = false;
+    } else if (width > 1140) {
+      // Display all columns above width 1140
+      showCols[col[0]] = true;
+    } else if (width >= 915 && width < 1140) {
+      if (['xs', 's', 'm', 'l', 'xl'].includes(col[1])) {
+        showCols[col[0]] = true;
+      } else {
+        showCols[col[0]] = false;
+      }
+    } else if (width >= 775 && width < 915) {
+      if (['xs', 's', 'm', 'l'].includes(col[1])) {
+        showCols[col[0]] = true;
+      } else {
+        showCols[col[0]] = false;
+      }
+    } else if (width >= 690 && width < 775) {
+      if (['xs', 's', 'm'].includes(col[1])) {
+        showCols[col[0]] = true;
+      } else {
+        showCols[col[0]] = false;
+      }
+    } else if (width >= 585 && width < 690) {
+      if (['xs', 's'].includes(col[1])) {
+        showCols[col[0]] = true;
+      } else {
+        showCols[col[0]] = false;
+      }
+    } else if (width < 585) {
+      if (col[1] === 'xs') {
+        showCols[col[0]] = true;
+      } else {
+        showCols[col[0]] = false;
+      }
+    }
+  });
+
+  return showCols;
+};