@centreon/ui 23.4.50-MON-15300-dashboard-with-one-layout.13 → 23.10.1

package/jest.config.js

@@ -16,8 +16,5 @@ module.exports = {
   transform: {
     ...baseConfig.transform,
     '^.+\\.mdx?$': '@storybook/addon-docs/jest-transform-mdx'
-  },
-  transformIgnorePatterns: [
-    '<rootDir>/../../node_modules/(?!d3-array|d3-scale|d3-interpolation|d3-interpolate)'
-  ]
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.4.50-MON-15300-dashboard-with-one-layout.13",
+  "version": "23.10.1",
   "description": "Centreon UI Components",
   "main": "src/index.ts",
   "scripts": {
@@ -91,7 +91,6 @@
     "react-dom": "18.x",
     "react-i18next": "12.x",
     "react-router-dom": "6.x",
-    "react-scale-text": "1.x",
     "resize-observer-polyfill": "1.x",
     "ts.data.json": "2.x",
     "tss-react": "4.x"

package/src/Listing/Cell/index.tsx

@@ -99,7 +99,7 @@ const useStyles = makeStyles<StylesProps>()(
       overflow: 'hidden',
       ...getTextStyleByViewMode({ theme, viewMode }),
       p: getRowHighlightStyle({ isRowHighlighted, theme }),
-      padding: 0,
+      padding: theme.spacing(0, 1),
       whiteSpace: 'nowrap'
     }
   })

package/src/Listing/EmptyResult/EmptyResult.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { EmptyRow } from '../Row/EmptyRow';
+
+interface EmptyResultProps {
+  label: string;
+}
+
+const EmptyResult = ({ label }: EmptyResultProps): JSX.Element => (
+  <EmptyRow>{label}</EmptyRow>
+);
+
+export { EmptyResult };

package/src/Listing/Header/SortableCell/Content.tsx

@@ -42,13 +42,15 @@ const useStyles = makeStyles<StylesProps>()(
       borderRadius: isDragging && isInDragOverlay ? theme.spacing(0.5) : 0,
       color: theme.palette.common.white,
       display: 'flex',
-      minHeight: theme.spacing(3)
+      height: '100%'
     },
     dragHandle: {
+      '&, &.Mui-focus, &:focus': {
+        outline: 'none'
+      },
       alignSelf: 'center',
       cursor: isDragging ? 'grabbing' : 'grab',
-      display: 'flex',
-      outline: 'none'
+      display: 'flex'
     },
     simpleHeaderCellContent: {
       alignItems: 'center',
@@ -60,7 +62,8 @@ const useStyles = makeStyles<StylesProps>()(
         ? 'transparent'
         : theme.palette.background.listingHeader,
       borderBottom: 'none',
-      padding: 0,
+      height: 'inherit',
+      padding: theme.spacing(0, 1),
       ...getTextStyleByViewMode({ theme, viewMode })
     }
   })
@@ -148,7 +151,7 @@ const SortableHeaderCellContent = ({
             visible={cellHovered}
             {...props}
             isInteractive
-            className={cx({ [classes.dragHandle]: cellHovered })}
+            className={cx(classes.dragHandle)}
             columnLabel={columnLabel}
           />
         )}

package/src/Listing/Header/index.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { closestCenter, DraggableSyntheticListeners } from '@dnd-kit/core';
 import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
 import { equals, find, isEmpty, map, not, pick, propEq } from 'ramda';
-import { makeStyles, withStyles } from 'tss-react/mui';
+import { makeStyles } from 'tss-react/mui';
 
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import {
@@ -25,14 +25,6 @@ import { labelPredefinedRowsSelectionMenu } from '../translatedLabels';
 import PredefinedSelectionList from './PredefinedSelectionList';
 import SortableHeaderCellContent from './SortableCell/Content';
 
-const height = 28;
-
-const HeaderCell = withStyles(TableCell, (theme) => ({
-  root: {
-    padding: theme.spacing(0)
-  }
-}));
-
 const useStyles = makeStyles()((theme) => ({
   checkbox: {
     '&.Mui-checked': {
@@ -49,6 +41,7 @@ const useStyles = makeStyles()((theme) => ({
     borderBottom: 'none',
     display: 'flex',
     justifyContent: 'start',
+    lineHeight: 'inherit',
     minWidth: theme.spacing(51 / 8),
     padding: 0
   },
@@ -59,6 +52,10 @@ const useStyles = makeStyles()((theme) => ({
     color: theme.palette.common.white,
     width: theme.spacing(2)
   },
+  root: {
+    height: '100%',
+    padding: theme.spacing(0, 1)
+  },
   row: {
     display: 'contents'
   }
@@ -240,4 +237,3 @@ const MemoizedListingHeader = React.memo<Props>(
 );
 
 export default MemoizedListingHeader;
-export { height as headerHeight, HeaderCell };

package/src/Listing/Listing.styles.ts

@@ -0,0 +1,77 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { ListingVariant } from '@centreon/ui-context';
+
+import { TableStyleAtom as TableStyle } from './models';
+
+const loadingIndicatorHeight = 3;
+
+interface StylesProps {
+  dataStyle: TableStyle;
+  getGridTemplateColumn: string;
+  limit: number;
+  rows: Array<unknown>;
+  viewMode: ListingVariant;
+}
+
+const useStyles = makeStyles<StylesProps>()(
+  (theme, { dataStyle, getGridTemplateColumn, rows, limit }) => ({
+    actionBar: {
+      alignItems: 'center',
+      display: 'flex'
+    },
+    checkbox: {
+      justifyContent: 'start'
+    },
+    container: {
+      background: 'none',
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      width: '100%'
+    },
+    loadingIndicator: {
+      height: loadingIndicatorHeight,
+      width: '100%'
+    },
+    table: {
+      '.listingHeader': {
+        backgroundColor: theme.palette.background.listingHeader,
+        boxShadow: `-1px 0px 0px 0px ${theme.palette.background.listingHeader}`,
+        padding: theme.spacing(0, 1)
+      },
+      '.listingHeader > div > div': {
+        backgroundColor: theme.palette.background.listingHeader,
+        height: theme.spacing(dataStyle.header.height / 8)
+      },
+      '.listingHeader > div > div:first-of-type': {
+        height: '100%',
+        paddingLeft: theme.spacing(1.5)
+      },
+      alignItems: 'center',
+      display: 'grid',
+      gridTemplateColumns: getGridTemplateColumn,
+      gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
+        rows?.length || limit
+      }, ${dataStyle.body.height}px)`,
+      position: 'relative'
+    },
+    tableBody: {
+      '.MuiTableRow-root > div:first-of-type': {
+        paddingLeft: theme.spacing(1.5)
+      },
+
+      display: 'contents',
+      'div:first-of-type': {
+        gridColumnStart: 1
+      },
+      position: 'relative'
+    },
+    tableWrapper: {
+      borderBottom: 'none',
+      overflow: 'auto'
+    }
+  })
+);
+
+export { useStyles, loadingIndicatorHeight };

package/src/Listing/Row/EmptyRow.styles.ts

@@ -0,0 +1,14 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()(() => ({
+  emptyDataCell: {
+    flexDirection: 'column',
+    gridColumn: 'auto / -1',
+    justifyContent: 'center'
+  },
+  emptyDataRow: {
+    display: 'contents'
+  }
+}));
+
+export { useStyles };

package/src/Listing/Row/EmptyRow.tsx

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+
+import { TableRow } from '@mui/material';
+
+import Cell from '../Cell';
+
+import { useStyles } from './EmptyRow.styles';
+
+interface EmptyRowProps {
+  children: ReactNode;
+}
+
+const EmptyRow = ({ children }: EmptyRowProps): JSX.Element => {
+  const { classes } = useStyles();
+
+  return (
+    <TableRow className={classes.emptyDataRow} component="div" tabIndex={-1}>
+      <Cell
+        align="center"
+        className={classes.emptyDataCell}
+        disableRowCondition={(): boolean => false}
+        isRowHovered={false}
+      >
+        {children}
+      </Cell>
+    </TableRow>
+  );
+};
+
+export { EmptyRow };

package/src/Listing/{Row.tsx → Row/Row.tsx}

@@ -9,12 +9,10 @@ import { TableRowProps, TableRow, useTheme } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
-import { useViewportIntersection } from '../utils/useViewportIntersection';
-import LoadingSkeleton from '../LoadingSkeleton';
-
-import { Column, ColumnConfiguration, RowColorCondition } from './models';
-
-import { performanceRowsLimit } from '.';
+import { useViewportIntersection } from '../../utils/useViewportIntersection';
+import LoadingSkeleton from '../../LoadingSkeleton';
+import { Column, ColumnConfiguration, RowColorCondition } from '../models';
+import { performanceRowsLimit } from '../index';
 
 const useStyles = makeStyles()((theme) => {
   return {

package/src/Listing/Row/SkeletonLoaderRows.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import LoadingSkeleton from '../../LoadingSkeleton';
+
+import { EmptyRow } from './EmptyRow';
+
+interface SkeletonLoaderProps {
+  rows?: number;
+}
+
+const SkeletonLoader = ({ rows = 10 }: SkeletonLoaderProps): JSX.Element => (
+  <>
+    {[...Array(rows)].map((_v, i) => (
+      <EmptyRow
+        key={`skeleton-row-${i}`} // eslint-disable-line react/no-array-index-key
+      >
+        <LoadingSkeleton variant="text" width="100%" />
+      </EmptyRow>
+    ))}
+  </>
+);
+
+export { SkeletonLoader };

package/src/Listing/index.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import { React, useState } from 'react';
+import { useState } from 'react';
 
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { equals, prop } from 'ramda';
@@ -191,6 +191,10 @@ export const loadingWithData = (): JSX.Element => {
   return <Story loading />;
 };
 
+export const asEmptyState = (): JSX.Element => {
+  return <Story rows={[]} />;
+};
+
 const actions = (
   <Button color="primary" size="small" variant="contained">
     Action

package/src/Listing/index.tsx

@@ -26,16 +26,8 @@ import {
   uniqBy
 } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
 
-import {
-  Box,
-  LinearProgress,
-  Table,
-  TableBody,
-  TableRow,
-  useTheme
-} from '@mui/material';
+import { Box, LinearProgress, Table, TableBody, useTheme } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
@@ -47,21 +39,22 @@ import Cell from './Cell';
 import DataCell from './Cell/DataCell';
 import Checkbox from './Checkbox';
 import getCumulativeOffset from './getCumulativeOffset';
-import ListingHeader, { headerHeight } from './Header/index';
+import ListingHeader from './Header/index';
 import {
   Column,
   ColumnConfiguration,
   PredefinedRowSelection,
   RowColorCondition,
   RowId,
-  SortOrder,
-  TableStyleAtom as TableStyle
+  SortOrder
 } from './models';
-import ListingRow from './Row';
-import ListingLoadingSkeleton from './Skeleton';
+import ListingRow from './Row/Row';
 import { labelNoResultFound } from './translatedLabels';
 import useResizeObserver from './useResizeObserver';
 import useStyleTable from './useStyleTable';
+import { loadingIndicatorHeight, useStyles } from './Listing.styles';
+import { EmptyResult } from './EmptyResult/EmptyResult';
+import { SkeletonLoader } from './Row/SkeletonLoaderRows';
 
 const getVisibleColumns = ({
   columnConfiguration,
@@ -78,88 +71,6 @@ const getVisibleColumns = ({
   ) as Array<Column>;
 };
 
-const loadingIndicatorHeight = 3;
-
-interface StylesProps {
-  checkable: boolean;
-  currentVisibleColumns: Array<Column>;
-  dataStyle: TableStyle;
-  getGridTemplateColumn: string;
-  rows: Array<unknown>;
-  viewMode: ListingVariant;
-}
-
-const useStyles = makeStyles<StylesProps>()(
-  (
-    theme,
-    { dataStyle, getGridTemplateColumn, rows, checkable, currentVisibleColumns }
-  ) => ({
-    actionBar: {
-      alignItems: 'center',
-      display: 'flex'
-    },
-    checkbox: {
-      justifyContent: 'start'
-    },
-    container: {
-      background: 'none',
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      width: '100%'
-    },
-    emptyDataCell: {
-      flexDirection: 'column',
-      gridColumn: `auto / span ${
-        checkable
-          ? currentVisibleColumns.length + 1
-          : currentVisibleColumns.length
-      }`,
-      justifyContent: 'center'
-    },
-    emptyDataRow: {
-      display: 'contents'
-    },
-    loadingIndicator: {
-      height: loadingIndicatorHeight,
-      width: '100%'
-    },
-    table: {
-      '.listingHeader > div > div:first-of-type': {
-        paddingLeft: theme.spacing(1.5)
-      },
-      '.listingHeader div div': {
-        backgroundColor: theme.palette.background.listingHeader,
-        boxShadow: `-1px 0px 0px 0px ${theme.palette.background.listingHeader}`,
-        height: dataStyle.header.height,
-        padding: 0
-      },
-      alignItems: 'center',
-      display: 'grid',
-      gridTemplateColumns: getGridTemplateColumn,
-      gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
-        rows?.length
-      }, ${dataStyle.body.height}px)`,
-      position: 'relative'
-    },
-    tableBody: {
-      '.MuiTableRow-root > div:first-of-type': {
-        paddingLeft: theme.spacing(1.5)
-      },
-
-      display: 'contents',
-      'div:first-of-type': {
-        gridColumnStart: 1
-      },
-      position: 'relative'
-    },
-    tableWrapper: {
-      borderBottom: 'none',
-      overflow: 'auto'
-    }
-  })
-);
-
 interface CustomStyle {
   customStyleViewerModeContainer?: string;
   customStyleViewerModeIcon?: string;
@@ -263,10 +174,9 @@ const Listing = <TRow extends { id: RowId }>({
   });
 
   const { classes } = useStyles({
-    checkable,
-    currentVisibleColumns,
     dataStyle,
     getGridTemplateColumn,
+    limit,
     rows,
     viewMode
   });
@@ -490,9 +400,9 @@ const Listing = <TRow extends { id: RowId }>({
 
     return `calc(100vh - ${tableTopOffset}px - ${
       actionBarRef.current?.offsetHeight
-    }px - ${headerHeight}px - ${loadingIndicatorHeight}px - ${theme.spacing(
-      1
-    )})`;
+    }px - ${
+      dataStyle.header.height
+    }px - ${loadingIndicatorHeight}px - ${theme.spacing(1)})`;
   };
 
   const changeLimit = (updatedLimit: string): void => {
@@ -661,26 +571,13 @@ const Listing = <TRow extends { id: RowId }>({
                   </ListingRow>
                 );
               })}
-              {rows.length < 1 && (
-                <TableRow
-                  className={classes.emptyDataRow}
-                  component="div"
-                  tabIndex={-1}
-                >
-                  <Cell
-                    align="center"
-                    className={classes.emptyDataCell}
-                    disableRowCondition={(): boolean => false}
-                    isRowHovered={false}
-                  >
-                    {loading ? (
-                      <ListingLoadingSkeleton />
-                    ) : (
-                      t(labelNoResultFound)
-                    )}
-                  </Cell>
-                </TableRow>
-              )}
+
+              {rows.length < 1 &&
+                (loading ? (
+                  <SkeletonLoader rows={limit} />
+                ) : (
+                  <EmptyResult label={t(labelNoResultFound)} />
+                ))}
             </TableBody>
           </Table>
         </Box>

package/src/Typography/index.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import TypographtStory from './story.utils';
+import TypographtStory from '.';
 
 export default {
   argTypes: {},

package/src/index.ts

@@ -155,6 +155,3 @@ export { default as ActionsList } from './ActionsList';
 export { getStatusColors, SeverityCode } from './utils/statuses';
 
 export type { ResponseError, CatchErrorProps } from './api/customFetch';
-
-export { default as FluidTypography } from './Typography/FluidTypography';
-export * from './Dashboard';

package/src/Dashboard/DashboardGrid.tsx

@@ -1,50 +0,0 @@
-import { FC, useMemo } from 'react';
-
-import { Grid } from '@visx/visx';
-import { scaleLinear } from '@visx/scale';
-
-import { useTheme } from '@mui/material';
-
-import useMemoComponent from '../utils/useMemoComponent';
-
-interface Props {
-  columns: number;
-  height: number;
-  width: number;
-}
-
-const DashboardGrid: FC<Props> = ({ width, height, columns }) => {
-  const theme = useTheme();
-
-  const xScale = useMemo(
-    () =>
-      scaleLinear({
-        domain: [0, 12],
-        range: [0, width]
-      }),
-    [width]
-  );
-
-  const tick = 12 / columns;
-
-  const xTickValues = Array(columns)
-    .fill(0)
-    .map((_, index) => index * tick);
-
-  return useMemoComponent({
-    Component: (
-      <svg style={{ height, position: 'absolute', width }}>
-        <Grid.GridColumns
-          height={height}
-          scale={xScale}
-          stroke={theme.palette.divider}
-          tickValues={xTickValues}
-          width={width}
-        />
-      </svg>
-    ),
-    memoProps: [height, width, columns]
-  });
-};
-
-export default DashboardGrid;

package/src/Dashboard/DashboardItem.tsx

@@ -1,72 +0,0 @@
-import { CSSProperties, ForwardedRef, MouseEvent, forwardRef } from 'react';
-
-import { isNil } from 'ramda';
-
-import { Card } from '@mui/material';
-
-import useMemoComponent from '../utils/useMemoComponent';
-
-import { useDashboardItemStyles } from './useDashboardStyles';
-
-interface DashboardItemProps {
-  children: JSX.Element;
-  className?: string;
-  header?: JSX.Element;
-  key: string;
-  onMouseDown?: (e: MouseEvent<HTMLDivElement>) => void;
-  onMouseUp?: (e: MouseEvent<HTMLDivElement>) => void;
-  onTouchEnd?: (e) => void;
-  style?: CSSProperties;
-}
-
-const DashboardItem = forwardRef(
-  (
-    {
-      children,
-      key,
-      style,
-      className,
-      header,
-      onMouseDown,
-      onMouseUp,
-      onTouchEnd
-    }: DashboardItemProps,
-    ref: ForwardedRef<HTMLDivElement>
-  ): JSX.Element => {
-    const { classes } = useDashboardItemStyles();
-
-    const hasHeader = !isNil(header);
-
-    const listeners = {
-      onMouseDown,
-      onMouseUp,
-      onTouchEnd
-    };
-
-    const cardContainerListeners = !hasHeader ? listeners : {};
-
-    return useMemoComponent({
-      Component: (
-        <div
-          className={className}
-          key={key}
-          ref={ref}
-          style={style}
-          {...cardContainerListeners}
-        >
-          <Card className={classes.widgetContainer}>
-            {header && (
-              <div {...listeners} className={classes.widgetHeader}>
-                {header}
-              </div>
-            )}
-            <div className={classes.widgetContent}>{children}</div>
-          </Card>
-        </div>
-      ),
-      memoProps: [key, style, className, header]
-    });
-  }
-);
-
-export default DashboardItem;

package/src/Dashboard/DashboardLayout.tsx

@@ -1,78 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { Responsive } from '@visx/visx';
-import GridLayout, { WidthProvider, Layout } from 'react-grid-layout';
-import 'react-grid-layout/css/styles.css';
-
-import { Responsive as ResponsiveHeight, useMemoComponent } from '..';
-
-import { useDashboardLayoutStyles } from './useDashboardStyles';
-import { getColumnsFromScreenSize, getLayout } from './utils';
-import DashboardGrid from './DashboardGrid';
-
-const ReactGridLayout = WidthProvider(GridLayout);
-
-interface DashboardLayoutProps<T> {
-  changeLayout?: (newLayout: Array<Layout>) => void;
-  children: Array<JSX.Element>;
-  displayGrid?: boolean;
-  layout: Array<T>;
-}
-
-const DashboardLayout = <T extends Layout>({
-  children,
-  changeLayout,
-  displayGrid,
-  layout
-}: DashboardLayoutProps<T>): JSX.Element => {
-  const { classes } = useDashboardLayoutStyles();
-
-  const [columns, setColumns] = useState(getColumnsFromScreenSize());
-
-  const resize = (): void => {
-    setColumns(getColumnsFromScreenSize());
-  };
-
-  useEffect(() => {
-    window.addEventListener('resize', resize);
-
-    return (): void => {
-      window.removeEventListener('resize', resize);
-    };
-  }, []);
-
-  return useMemoComponent({
-    Component: (
-      <ResponsiveHeight>
-        <Responsive.ParentSize>
-          {({ width, height }): JSX.Element => (
-            <div className={classes.container}>
-              {displayGrid && (
-                <DashboardGrid
-                  columns={columns}
-                  height={height}
-                  width={width}
-                />
-              )}
-              <ReactGridLayout
-                cols={columns}
-                containerPadding={[4, 0]}
-                layout={getLayout(layout)}
-                margin={[20, 20]}
-                resizeHandles={['s', 'e', 'se']}
-                rowHeight={64}
-                width={width}
-                onLayoutChange={changeLayout}
-              >
-                {children}
-              </ReactGridLayout>
-            </div>
-          )}
-        </Responsive.ParentSize>
-      </ResponsiveHeight>
-    ),
-    memoProps: [columns, layout, displayGrid]
-  });
-};
-
-export default DashboardLayout;

package/src/Dashboard/index.stories.tsx

@@ -1,104 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import { Layout } from 'react-grid-layout';
-
-import { Typography } from '@mui/material';
-
-import FluidTypography from '../Typography/FluidTypography';
-
-import { DashboardLayout, DashboardItem } from '.';
-
-interface CustomLayout extends Layout {
-  content: string;
-  shouldUseFluidTypography: boolean;
-}
-
-const dashboardLayout: Array<CustomLayout> = [
-  {
-    content: 'Hello world',
-    h: 4,
-    i: 'a',
-    shouldUseFluidTypography: false,
-    w: 6,
-    x: 0,
-    y: 0
-  },
-  {
-    content: 'This is a panel',
-    h: 3,
-    i: 'b',
-    minW: 2,
-    shouldUseFluidTypography: false,
-    w: 7,
-    x: 1,
-    y: 7
-  },
-  {
-    content: 'And the last panel with fluid typography',
-    h: 7,
-    i: 'c',
-    shouldUseFluidTypography: true,
-    w: 6,
-    x: 6,
-    y: 6
-  }
-];
-
-const generateLayout = (maxElements: number): Array<CustomLayout> => {
-  return Array(maxElements)
-    .fill(0)
-    .map((_, i): CustomLayout => {
-      return {
-        content: `${i}`,
-        h: 3,
-        i: i.toString(),
-        shouldUseFluidTypography: false,
-        w: 3,
-        x: (i * 3) % 12,
-        y: Math.floor(i / 12)
-      };
-    });
-};
-
-interface DashboardTemplateProps {
-  header?: JSX.Element;
-  layout?: Array<CustomLayout>;
-}
-
-const Header = (): JSX.Element => (
-  <Typography variant="body2">The title</Typography>
-);
-
-const DashboardTemplate = ({
-  header,
-  layout = dashboardLayout
-}: DashboardTemplateProps): JSX.Element => (
-  <DashboardLayout<CustomLayout> layout={layout}>
-    {layout.map(({ i, content, shouldUseFluidTypography }) => (
-      <DashboardItem header={header} key={i}>
-        {shouldUseFluidTypography ? (
-          <FluidTypography text={content} />
-        ) : (
-          <Typography>{content}</Typography>
-        )}
-      </DashboardItem>
-    ))}
-  </DashboardLayout>
-);
-
-export default {
-  argTypes: {},
-  component: DashboardTemplate,
-  title: 'Dashboard'
-} as ComponentMeta<typeof DashboardTemplate>;
-
-export const normal = DashboardTemplate.bind({});
-
-export const withManyPanels = DashboardTemplate.bind({});
-withManyPanels.args = {
-  layout: generateLayout(1000)
-};
-
-export const withItemHeader = DashboardTemplate.bind({});
-withItemHeader.args = {
-  header: <Header />
-};

package/src/Dashboard/index.tsx

@@ -1,3 +0,0 @@
-export { default as DashboardLayout } from './DashboardLayout';
-export { default as DashboardItem } from './DashboardItem';
-export * from './utils';

package/src/Dashboard/useDashboardStyles.ts

@@ -1,83 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { alpha } from '@mui/material';
-
-export const useDashboardLayoutStyles = makeStyles()((theme) => ({
-  container: {
-    '& .react-grid-item': {
-      borderRadius: theme.shape.borderRadius,
-      transition: theme.transitions.create('all', {
-        delay: 0,
-        duration: 100,
-        easing: theme.transitions.easing.easeOut
-      })
-    },
-    '& .react-grid-item.react-draggable-dragging': {
-      boxShadow: theme.shadows[3]
-    },
-    '& .react-grid-item.react-grid-placeholder': {
-      backgroundColor: alpha(theme.palette.primary.main, 0.7)
-    },
-    '& .react-grid-item.resizing': {
-      boxShadow: theme.shadows[3]
-    },
-    '& .react-resizable-handle': {
-      backgroundColor: theme.palette.action.focus,
-      backgroundImage: 'none',
-      borderRadius: theme.shape.borderRadius,
-      display: 'block',
-      opacity: 0,
-      position: 'absolute'
-    },
-    '& .react-resizable-handle.react-resizable-handle-e': {
-      cursor: 'ew-resize',
-      height: `calc(100% - ${theme.spacing(3)})`,
-      marginTop: 0,
-      right: 0,
-      top: 0,
-      transform: 'rotate(0deg)',
-      width: theme.spacing(1)
-    },
-    '& .react-resizable-handle.react-resizable-handle-s': {
-      bottom: 0,
-      cursor: 'ns-resize',
-      height: theme.spacing(1),
-      left: 0,
-      marginLeft: 0,
-      transform: 'rotate(0deg)',
-      width: `calc(100% - ${theme.spacing(3)})`
-    },
-    '& .react-resizable-handle.react-resizable-handle-se': {
-      bottom: 0,
-      cursor: 'nwse-resize',
-      height: theme.spacing(2),
-      right: 0,
-      transform: 'rotate(0deg)',
-      width: theme.spacing(2)
-    },
-    '& .react-resizable-handle::after': {
-      content: 'none'
-    },
-    '& .react-resizable-handle:hover': {
-      opacity: 1
-    }
-  }
-}));
-
-export const useDashboardItemStyles = makeStyles()((theme) => ({
-  widgetContainer: {
-    height: '100%',
-    width: '100%'
-  },
-  widgetContent: {
-    height: '100%',
-    padding: theme.spacing(1, 2)
-  },
-  widgetHeader: {
-    '&:hover': {
-      backgroundColor: theme.palette.action.hover
-    },
-    cursor: 'move',
-    padding: theme.spacing(0.5, 2)
-  }
-}));

package/src/Dashboard/utils.ts

@@ -1,26 +0,0 @@
-import { lt } from 'ramda';
-import { Layout } from 'react-grid-layout';
-
-const maxColumns = 12;
-const minColumns = 1;
-const breakpoint = 768;
-
-export const getIsSmallScreenSize = (): boolean =>
-  lt(window.innerWidth, breakpoint);
-
-export const getColumnsFromScreenSize = (): number =>
-  getIsSmallScreenSize() ? minColumns : maxColumns;
-
-export const getLayout = <T extends Layout>(layout: Array<T>): Array<T> => {
-  const isSmallScreenSize = getIsSmallScreenSize();
-  if (!isSmallScreenSize) {
-    return layout;
-  }
-
-  return layout
-    .sort((a, b) => a.x + a.y - (b.x + b.y))
-    .map((widget) => ({
-      ...widget,
-      w: 1
-    }));
-};

package/src/Listing/Skeleton.tsx

@@ -1,11 +0,0 @@
-import LoadingSkeleton from '../LoadingSkeleton';
-
-const ListingLoadingSkeleton = (): JSX.Element => (
-  <>
-    {['skeleton1', 'skeleton2', 'skeleton3'].map((key) => (
-      <LoadingSkeleton height={20} key={key} variant="text" width="100%" />
-    ))}
-  </>
-);
-
-export default ListingLoadingSkeleton;

package/src/Typography/FluidTypography/index.stories.tsx

@@ -1,63 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-
-import { Box } from '@mui/material';
-
-import FluidTypography, { FluidTypographyProps } from '.';
-
-interface Props extends FluidTypographyProps {
-  height?: string | number;
-  width?: string | number;
-}
-
-const FluidTypographyTemplate = ({
-  width = '900px',
-  height = '700px',
-  text,
-  variant
-}: Props): JSX.Element => {
-  return (
-    <Box sx={{ height, width }}>
-      <FluidTypography text={text} variant={variant} />
-    </Box>
-  );
-};
-
-export default {
-  argTypes: {
-    height: { control: 'text' },
-    text: { control: 'text' },
-    variant: { control: 'text' },
-    width: { control: 'text' }
-  },
-  component: FluidTypographyTemplate,
-  title: 'Fluid Typography'
-} as ComponentMeta<typeof FluidTypographyTemplate>;
-
-export const basic = FluidTypographyTemplate.bind({});
-basic.args = {
-  text: 'Hello world'
-};
-
-export const with200pxWidth = FluidTypographyTemplate.bind({});
-with200pxWidth.args = {
-  height: '200px',
-  text: 'Hello world',
-  width: '200px'
-};
-
-export const with20pxHeight = FluidTypographyTemplate.bind({});
-with20pxHeight.args = {
-  height: '20px',
-  text: 'Hello world'
-};
-
-export const withLongText = FluidTypographyTemplate.bind({});
-withLongText.args = {
-  text: 'This is a very long text becaaaaaaause it has a lot to sayyyyy !!!!!!!!'
-};
-
-export const withHeading5Variant = FluidTypographyTemplate.bind({});
-withHeading5Variant.args = {
-  text: 'Hello world',
-  variant: 'h5'
-};

package/src/Typography/FluidTypography/index.tsx

@@ -1,51 +0,0 @@
-import { useRef } from 'react';
-
-import { Typography, TypographyProps } from '@mui/material';
-
-import useFluidResizeObserver from './useFluidResizeObserver';
-
-type CustomTypographyProps = Pick<TypographyProps, 'variant'>;
-export interface FluidTypographyProps extends CustomTypographyProps {
-  className?: string;
-  text: string;
-}
-
-const FluidTypography = ({
-  text,
-  variant = 'body1',
-  className
-}: FluidTypographyProps): JSX.Element => {
-  const containerRef = useRef<HTMLElement>();
-  const parentRef = useRef<HTMLElement>();
-
-  const size = useFluidResizeObserver({ ref: containerRef });
-  const parentSize = useFluidResizeObserver({ isParent: true, ref: parentRef });
-
-  return (
-    <div
-      ref={parentRef}
-      style={{
-        height: `${parentSize.height}px`,
-        width: `100%`
-      }}
-    >
-      <div ref={containerRef} style={{ height: '100%', width: '100%' }}>
-        <Typography
-          className={className}
-          sx={{
-            fontSize: `clamp(10px, min(${Math.floor(
-              size.width / 6
-            )}px, ${Math.floor(size.height / 6)}px), min(${size.width}px, ${
-              size.height
-            }px))`
-          }}
-          variant={variant}
-        >
-          {text}
-        </Typography>
-      </div>
-    </div>
-  );
-};
-
-export default FluidTypography;

package/src/Typography/FluidTypography/useFluidResizeObserver.ts

@@ -1,56 +0,0 @@
-import {
-  MutableRefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
-
-interface Size {
-  height: number;
-  width: number;
-}
-
-interface UseFluidResizeObserver {
-  isParent?: boolean;
-  ref: MutableRefObject<HTMLElement | undefined>;
-}
-
-const useFluidResizeObserver = ({
-  ref,
-  isParent
-}: UseFluidResizeObserver): Size => {
-  const [size, setSize] = useState<Size>({ height: 0, width: 0 });
-
-  const observer = useRef<ResizeObserver | null>(null);
-
-  const resizeObserver = useCallback(
-    (element) => {
-      if (observer.current) {
-        observer.current.disconnect();
-      }
-
-      observer.current = new ResizeObserver(
-        ([entry]: Array<ResizeObserverEntry>) => {
-          setSize({
-            height: entry.target?.getBoundingClientRect().height || 0,
-            width: entry.target?.getBoundingClientRect().width || 0
-          });
-        }
-      );
-
-      if (element && observer.current) {
-        observer.current.observe(element);
-      }
-    },
-    [ref.current]
-  );
-
-  useEffect(() => {
-    resizeObserver(isParent ? ref.current?.parentElement : ref.current);
-  }, [ref.current]);
-
-  return size;
-};
-
-export default useFluidResizeObserver;