Merge branch 'master' into update-schema

Author: amitamrutiya

examples/next-12/components/ResponsiveDataTable/ResponsiveDataTable.jsx

@@ -13,7 +13,7 @@ export function ResponsiveDataTable({ data, columns, options = {}, ...props }) {
       year: 'numeric'
     };
 
-    return new Intl.DateTimeFormat('en-US', dateOptions).format(date);
+    return new Intl.DateTimeFormat('un-US', dateOptions).format(date);
   };
 
   const updatedOptions = {
@@ -37,21 +37,14 @@ export function ResponsiveDataTable({ data, columns, options = {}, ...props }) {
           break;
         }
       }
-    },
-    filter: true,
-    sort: true,
-    responsive: 'standard',
-    serverSide: false,
+    }
   };
 
   useEffect(() => {
     columns?.forEach((col) => {
       if (!col.options) {
         col.options = {};
       }
-
-      col.options.sort = true;
-      col.options.filter = true;
       col.options.display = columnVisibility[col.name];
 
       if (

package-lock.json

@@ -80,8 +80,8 @@
   },
   "peerDependencies": {
     "@xstate/react": "^4.1.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^17.0.2 || ^18.3.1",
+    "react-dom": "^17.0.2 || ^18.3.1",
     "xstate": "^5.18.2"
   },
   "peerDependenciesMeta": {

package.json

@@ -0,0 +1,54 @@
+import { ChevronLeft, ChevronRight } from '@mui/icons-material';
+import React, { ReactNode, useRef } from 'react';
+import { CarouselButton, CarouselContainer, CarouselWrapper } from './style';
+
+interface CarouselProps {
+  items: ReactNode[];
+  title?: string;
+  scrollAmount?: number;
+  showNavButtons?: boolean;
+  itemClassName?: string;
+}
+
+const Carousel: React.FC<CarouselProps> = ({
+  items,
+  scrollAmount = 300,
+  showNavButtons = true,
+  itemClassName = 'carousel-item'
+}) => {
+  const carouselRef = useRef<HTMLDivElement>(null);
+  if (!items.length) return null;
+
+  const scroll = (direction: 'left' | 'right') => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  return (
+    <CarouselWrapper>
+      {showNavButtons && (
+        <CarouselButton onClick={() => scroll('left')}>
+          <ChevronLeft />
+        </CarouselButton>
+      )}
+      <CarouselContainer ref={carouselRef}>
+        {items.map((item, index) => (
+          <div key={`carousel-item-${index}`} className={itemClassName}>
+            {item}
+          </div>
+        ))}
+      </CarouselContainer>
+      {showNavButtons && (
+        <CarouselButton onClick={() => scroll('right')}>
+          <ChevronRight />
+        </CarouselButton>
+      )}
+    </CarouselWrapper>
+  );
+};
+
+export default Carousel;

src/custom/Carousel/Carousel.tsx

@@ -0,0 +1,3 @@
+import Carousel from './Carousel';
+
+export { Carousel };

src/custom/Carousel/index.tsx

@@ -0,0 +1,49 @@
+import { styled } from '../../theme';
+
+export const CarouselButton = styled('button')(({ theme }) => ({
+  position: 'absolute',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  zIndex: '1',
+  background: theme.palette.background.paper,
+  border: 'none',
+  cursor: 'pointer',
+  padding: '0.5rem',
+  borderRadius: '50%',
+  boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
+  '&:hover': {
+    background: theme.palette.primary.main,
+    color: '#fff'
+  },
+  '&:first-of-type': {
+    left: '-1.2rem'
+  },
+  '&:last-of-type': {
+    right: '-1.2rem'
+  }
+}));
+
+export const CarouselWrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  position: 'relative'
+});
+
+export const CarouselContainer = styled('div')({
+  display: 'flex',
+  overflowX: 'auto',
+  scrollBehavior: 'smooth',
+  scrollSnapType: 'x mandatory',
+  gap: '1rem',
+  padding: '1rem 0',
+  width: '100%',
+  '&::-webkit-scrollbar': {
+    display: 'none'
+  },
+  '.carousel-item': {
+    flex: '0 0 auto',
+    scrollSnapAlign: 'center',
+    width: 'auto'
+  }
+});

src/custom/Carousel/style.tsx

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import { MUIDataTableColumn } from 'mui-datatables';
 import { useCallback, useMemo, useRef } from 'react';
 import { PublishIcon } from '../../icons';
-import { CHARCOAL, useTheme } from '../../theme';
+import { CHARCOAL } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
@@ -52,10 +52,8 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
   handleBulkDeleteModal,
   setSearch,
   rowsPerPageOptions = [10, 25, 50, 100],
-  tableBackgroundColor,
   handleBulkpatternsDataUnpublishModal
 }) => {
-  const theme = useTheme();
   const modalRef = useRef<PromptRef>(null);
 
   const formatDate = useCallback((date: string | Date): string => {
@@ -72,8 +70,6 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
     return columns.map((col) => {
       const newCol = { ...col };
       if (!newCol.options) newCol.options = {};
-      newCol.options.sort = true;
-      newCol.options.filter = true;
       newCol.options.display = columnVisibility[col.name];
       if (
         [
@@ -149,8 +145,6 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
       rowsPerPage: pageSize,
       page,
       elevation: 0,
-      sort: true,
-      filter: true,
       sortOrder: {
         name: sortOrder.split(' ')[0],
         direction: sortOrder.split(' ')[1]
@@ -208,13 +202,6 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
         colViews={colViews}
         tableCols={processedColumns}
         columnVisibility={columnVisibility}
-        backgroundColor={
-          tableBackgroundColor
-            ? tableBackgroundColor
-            : theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : theme.palette.background.secondary
-        }
       />
     </ErrorBoundary>
   );

src/custom/CatalogDesignTable/CatalogDesignTable.tsx

@@ -72,17 +72,15 @@ export const createDesignsColumnsConfig = ({
       name: 'id',
       label: 'ID',
       options: {
-        filter: true,
-        sort: true,
-        searchable: true,
+        filter: false,
         customBodyRender: (value: string) => <ConditionalTooltip value={value} maxLength={10} />
       }
     },
     {
       name: 'name',
       label: 'Name',
       options: {
-        filter: true,
+        filter: false,
         sort: true,
         searchable: true,
         customBodyRender: (value: string, tableMeta: MUIDataTableMeta) => {
@@ -97,7 +95,7 @@ export const createDesignsColumnsConfig = ({
       name: 'first_name',
       label: 'Author',
       options: {
-        filter: true,
+        filter: false,
         sort: true,
         searchable: true,
         customBodyRender: (_, tableMeta: MUIDataTableMeta) => {
@@ -122,7 +120,7 @@ export const createDesignsColumnsConfig = ({
       name: 'created_at',
       label: 'Created At',
       options: {
-        filter: true,
+        filter: false,
         sort: true,
         searchable: true,
         setCellHeaderProps: () => {
@@ -134,7 +132,7 @@ export const createDesignsColumnsConfig = ({
       name: 'updated_at',
       label: 'Updated At',
       options: {
-        filter: true,
+        filter: false,
         sort: true,
         searchable: true,
         setCellHeaderProps: () => {
@@ -146,36 +144,38 @@ export const createDesignsColumnsConfig = ({
       name: 'visibility',
       label: 'Visibility',
       options: {
-        filter: true,
-        sort: true,
+        filter: false,
+        sort: false,
         searchable: true
       }
     },
     {
       name: 'user_id',
       label: 'User ID',
       options: {
-        filter: true,
-        sort: true,
-        searchable: true
+        filter: false,
+        sort: false,
+        searchable: false
       }
     },
+
     {
       name: 'email',
-      label: 'Email',
+      label: 'email',
       options: {
-        filter: true,
-        sort: true,
-        searchable: true
+        filter: false,
+        sort: false,
+        searchable: false
       }
     },
+
     {
       name: 'actions',
       label: 'Actions',
       options: {
-        filter: true,
-        sort: true,
-        searchable: true,
+        filter: false,
+        sort: false,
+        searchable: false,
         setCellHeaderProps: () => ({ align: 'center' as const }),
         setCellProps: () => ({ align: 'center' as const }),
         customBodyRender: function CustomBody(_, tableMeta: MUIDataTableMeta) {
@@ -247,7 +247,7 @@ export const createDesignsColumnsConfig = ({
             actionsList.splice(1, 0, publishAction);
           }
 
-          return <DataTableEllipsisMenu actionsList={actionsList} theme={theme} />;
+          return <DataTableEllipsisMenu actionsList={actionsList} />;
         }
       }
     }