♻️ replace grommet Image and Grid

CHANGELOG.md

@@ -8,6 +8,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+### Changed
+
+- Replace grommet Image and Grid component (#2518)
+
 ## [4.9.0] - 2023-12-04
 
 ### Added

src/frontend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentSection/index.tsx

@@ -1,11 +1,11 @@
 import { Button } from '@openfun/cunningham-react';
-import { Grid } from 'grommet';
 import { Nullable } from 'lib-common';
 import {
   Box,
   Classroom,
   ClassroomSVG,
   ContentCard,
+  Grid,
   Text,
 } from 'lib-components';
 import React from 'react';

src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/index.tsx

@@ -1,9 +1,9 @@
-import { Grid } from 'grommet';
 import { Breakpoints } from 'lib-common';
 import {
   Box,
   BoxLoader,
   FileDepository,
+  Grid,
   Heading,
   Text,
   useResponsive,

src/frontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentSection/index.tsx

@@ -1,8 +1,7 @@
 import { Button } from '@openfun/cunningham-react';
-import { Grid } from 'grommet';
 import { DocumentStore } from 'grommet-icons';
 import { Nullable } from 'lib-common';
-import { Box, ContentCard, FileDepository, Text } from 'lib-components';
+import { Box, ContentCard, FileDepository, Grid, Text } from 'lib-components';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 

src/frontend/apps/lti_site/apps/markdown/components/SelectContent/SelectContentSection/index.tsx

@@ -1,10 +1,10 @@
 import { Button } from '@openfun/cunningham-react';
-import { Grid } from 'grommet';
 import { DocumentText } from 'grommet-icons';
 import { Nullable } from 'lib-common';
 import {
   Box,
   ContentCard,
+  Grid,
   MarkdownDocument,
   MarkdownDocumentTranslation,
 } from 'lib-components';

src/frontend/apps/lti_site/components/SelectContent/SelectContentSection/index.tsx

@@ -1,11 +1,11 @@
 import { Button } from '@openfun/cunningham-react';
-import { Grid } from 'grommet';
 import { Document as DocumentIcon } from 'grommet-icons';
 import { Nullable } from 'lib-common';
 import {
   Box,
   ContentCard,
   Document,
+  Grid,
   PlaySVG,
   Text,
   Video,

src/frontend/apps/standalone_site/src/features/Authentication/components/RenaterAuthenticator.tsx

@@ -1,7 +1,6 @@
 import { Select } from '@openfun/cunningham-react';
-import { Image } from 'grommet';
 import { colorsTokens } from 'lib-common';
-import { Box, ClosingCard, Text, useResponsive } from 'lib-components';
+import { Box, ClosingCard, Image, Text, useResponsive } from 'lib-components';
 import React, {
   ComponentPropsWithRef,
   Fragment,
@@ -56,8 +55,8 @@ export const RenaterAuthenticator = () => {
           option.logo ||
           'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==' // 1x1 transparent gif
         }
-        height="16"
-        width="16"
+        height={16}
+        width={16}
         margin={{ right: 'small' }}
       />
       <Text size="small">{option.display_name}</Text>

src/frontend/apps/standalone_site/src/features/Header/HeaderLight.tsx

@@ -1,6 +1,5 @@
-import { Image } from 'grommet';
 import { Nullable, colorsTokens } from 'lib-common';
-import { Box, useSiteConfig } from 'lib-components';
+import { Box, Image, useSiteConfig } from 'lib-components';
 import { forwardRef } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -40,14 +39,7 @@ export const HeaderLight = forwardRef<
     />
   );
   if (showSiteConfigLogo) {
-    Logo = (
-      <Image
-        src={siteConfig.logo_url}
-        alt="Home"
-        fit="contain"
-        alignSelf="start"
-      />
-    );
+    Logo = <Image src={siteConfig.logo_url} alt="Home" fit="contain" />;
   }
 
   if (withLogoLink) {

src/frontend/apps/standalone_site/src/features/HomePage/components/HomePage.tsx

@@ -1,7 +1,7 @@
-import { Image } from 'grommet';
 import {
   Box,
   Heading,
+  Image,
   StyledLink,
   Text,
   useResponsive,

src/frontend/packages/lib_classroom/src/components/DashboardClassroomInfos/index.tsx

@@ -1,6 +1,5 @@
-import { Grid } from 'grommet';
 import { Nullable, colorsTokens } from 'lib-common';
-import { Box, ClassroomInfos, Text } from 'lib-components';
+import { Box, ClassroomInfos, Grid, Text } from 'lib-components';
 import React, { Fragment } from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 

src/frontend/packages/lib_classroom/src/components/DashboardClassroomInstructor/index.tsx

@@ -1,7 +1,6 @@
 import { Button } from '@openfun/cunningham-react';
-import { Grid } from 'grommet';
 import { Breakpoints, Nullable } from 'lib-common';
-import { Box, BoxLoader, Classroom, useResponsive } from 'lib-components';
+import { Box, BoxLoader, Classroom, Grid, useResponsive } from 'lib-components';
 import React, { Suspense, lazy } from 'react';
 import { toast } from 'react-hot-toast';
 import { defineMessages, useIntl } from 'react-intl';

src/frontend/packages/lib_classroom/src/components/DashboardClassroomLayout/index.tsx

@@ -1,5 +1,4 @@
-import { Grid } from 'grommet';
-import { Breakpoints, Nullable, colorsTokens } from 'lib-common';
+import { Nullable, colorsTokens } from 'lib-common';
 import { Box, Text, useAppConfig, useResponsive } from 'lib-components';
 import React from 'react';
 
@@ -32,13 +31,8 @@ export const DashboardClassroomLayout = ({
   right,
 }: DashboardClassroomLayoutProps) => {
   const appData = useAppConfig();
-  const { isSmallerBreakpoint, breakpoint, isDesktop } = useResponsive();
-  let columns = ['1/2', '1/2'];
-  if (!isDesktop) {
-    columns = ['full'];
-  } else if (isSmallerBreakpoint(breakpoint, Breakpoints.large)) {
-    columns = ['2/3', '1/3'];
-  }
+  const { isDesktop } = useResponsive();
+
   return (
     <Box
       style={{
@@ -50,7 +44,7 @@ export const DashboardClassroomLayout = ({
       pad="small"
       className="DashboardClassroomLayout"
     >
-      <Grid columns={columns} gap="small" fill>
+      <Box direction="row" gap="small" wrap="wrap">
         <Box
           background="white"
           round="xsmall"
@@ -59,10 +53,13 @@ export const DashboardClassroomLayout = ({
             vertical: 'small',
           }}
           height={{ min: 'medium' }}
+          width={{ min: 'none' }}
+          flex="grow"
+          basis="60%"
         >
           {left}
         </Box>
-        <Box justify="space-between">
+        <Box justify="space-between" flex="grow">
           <Box direction="row" align="center" gap="xsmall">
             <img
               height="30px"
@@ -83,7 +80,7 @@ export const DashboardClassroomLayout = ({
             {right}
           </Box>
         </Box>
-      </Grid>
+      </Box>
     </Box>
   );
 };

src/frontend/packages/lib_classroom/src/components/DashboardClassroomStudentCounter/index.tsx

@@ -1,5 +1,4 @@
-import { Grid } from 'grommet';
-import { Box, Text } from 'lib-components';
+import { Box, Grid, Text } from 'lib-components';
 import { DateTime, DurationObjectUnits } from 'luxon';
 import React, { useCallback, useEffect } from 'react';
 

src/frontend/packages/lib_common/src/cunningham/cunningham-style.css

@@ -30,6 +30,9 @@
   display: flex;
   box-sizing: border-box;
 }
+.typo-grid{
+  display: grid;
+}
 /**
  * Input
  * TextArea

src/frontend/packages/lib_components/src/common/Box/Grid/index.spec.tsx

@@ -0,0 +1,46 @@
+import { screen } from '@testing-library/react';
+import { render } from 'lib-tests';
+
+import { Grid } from './';
+
+describe('<Grid />', () => {
+  it('renders the default component and children', () => {
+    render(<Grid aria-label="my-label-grid">My Grid</Grid>);
+
+    const grid = screen.getByText('My Grid');
+    expect(grid).toBeInTheDocument();
+    expect(grid).toHaveClass('typo-grid');
+  });
+
+  it('has `columns` prop as number', () => {
+    render(<Grid columns={30}>My Grid</Grid>);
+
+    expect(screen.getByText('My Grid')).toHaveStyle(
+      'grid-template-columns: repeat(auto-fill, minmax(min(30px, 100%), 1fr));',
+    );
+  });
+
+  it('has `columns` prop as string px', () => {
+    render(<Grid columns="45px">My Grid</Grid>);
+
+    expect(screen.getByText('My Grid')).toHaveStyle(
+      'grid-template-columns: repeat(auto-fill, minmax(min(45px, 100%), 1fr));',
+    );
+  });
+
+  it('has `columns` prop as string auto', () => {
+    render(<Grid columns="auto">My Grid</Grid>);
+
+    expect(screen.getByText('My Grid')).toHaveStyle(
+      'grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));',
+    );
+  });
+
+  it('has `columns` prop as ColumnsCount type', () => {
+    render(<Grid columns={{ count: 2, size: 30 }}>My Grid</Grid>);
+
+    expect(screen.getByText('My Grid')).toHaveStyle(
+      'grid-template-columns: repeat(2, minmax(min(30px, 100%), 1fr));',
+    );
+  });
+});

src/frontend/packages/lib_components/src/common/Box/Grid/index.tsx

@@ -0,0 +1,68 @@
+import { forwardRef } from 'react';
+
+import { Box, BoxProps } from '..';
+import { SizeValue, Sizes, sizesValue } from '../../Typo';
+
+type ColumnsCount = { count: number; size: Sizes };
+
+const isColumnsCount = (
+  columns: Sizes | ColumnsCount,
+): columns is ColumnsCount => (columns as ColumnsCount).count !== undefined;
+
+export interface GridPropsOnly {
+  columns?: Sizes | ColumnsCount;
+}
+
+type GridProps = Omit<
+  BoxProps<'div'>,
+  'basis' | 'flex' | 'flow' | 'wrap' | 'direction'
+> &
+  GridPropsOnly;
+
+/**
+ * @param GridProps -
+ * @inheritdoc {@link Typo}
+ * @returns Grid component
+ */
+const Grid = forwardRef<HTMLElement, GridProps>(
+  ({ className, columns, style, ...props }, ref) => {
+    let moreStyles = {};
+    if (columns) {
+      let count: string | number = '';
+      let size: SizeValue = '';
+      if (isColumnsCount(columns)) {
+        count = columns.count;
+        size = sizesValue(columns.size);
+      } else {
+        count = 'auto-fill';
+        size = sizesValue(columns);
+      }
+
+      if (typeof size === 'number') {
+        size = `min(${size}px, 100%)`;
+      } else if (typeof size === 'string' && size.includes('px')) {
+        size = `min(${size}, 100%)`;
+      }
+
+      moreStyles = {
+        ...moreStyles,
+        gridTemplateColumns: size && `repeat(${count}, minmax(${size}, 1fr))`,
+      };
+    }
+
+    return (
+      <Box
+        ref={ref}
+        className={`typo-grid ${className || ''}`}
+        style={{
+          ...moreStyles,
+          ...style,
+        }}
+        {...props}
+      />
+    );
+  },
+);
+
+Grid.displayName = 'Grid';
+export { Grid };

src/frontend/packages/lib_components/src/common/Box/index.spec.tsx

@@ -41,12 +41,6 @@ describe('<Box />', () => {
     );
   });
 
-  it('has gap prop', () => {
-    render(<Box gap="2px">My Box</Box>);
-
-    expect(screen.getByText('My Box')).toHaveStyle(`gap: 2px`);
-  });
-
   it('has round prop', () => {
     render(<Box round="2px">My Box</Box>);
 

src/frontend/packages/lib_components/src/common/Box/index.tsx

@@ -1,5 +1,5 @@
 import { colorsTokens } from 'lib-common';
-import { CSSProperties, ReactElement, ReactHTML, Ref, forwardRef } from 'react';
+import { ReactElement, ReactHTML, Ref, forwardRef } from 'react';
 
 import {
   Spacings,
@@ -8,14 +8,14 @@ import {
   spacingValue,
 } from '@lib-components/common/Typo';
 
+export { Grid } from './Grid';
+
 export interface BoxPropsOnly {
-  gap?: Spacings;
-  direction?: CSSProperties['flexDirection'];
   round?: Spacings;
   elevation?: boolean;
 }
 
-type BoxTypes = Pick<
+export type BoxTypes = Pick<
   ReactHTML,
   'div' | 'header' | 'footer' | 'article' | 'ul' | 'li' | 'nav' | 'section'
 >;
@@ -46,7 +46,6 @@ const BoxRef = forwardRef(
       className,
       direction = 'column',
       elevation,
-      gap,
       justify = 'normal',
       round,
       type = 'div',
@@ -57,15 +56,14 @@ const BoxRef = forwardRef(
     return (
       <Typo<keyof BoxTypes>
         align={align}
+        direction={direction}
         justify={justify}
         ref={ref}
         type={type}
         className={`typo-box ${className || ''}`}
         {...props}
         style={{
           borderRadius: spacingValue(round),
-          flexDirection: direction,
-          gap: spacingValue(gap),
           boxShadow: elevation
             ? `0 2px 6px ${colorsTokens['primary-500']}44`
             : undefined,