♻️(standalone_site) replace grommet Box with custom Box

In order to do the transition to the cunningham design system, in the standalone_site, we replace the grommet Box component with our custom Box components.
openfun · Nov 3, 2023 · a955180 · a955180
1 parent 50a52e3
commit a955180
Show file tree

Hide file tree

Showing 49 changed files with 360 additions and 438 deletions.
diff --git a/src/frontend/apps/standalone_site/src/components/Cards/WhiteCard/WhiteCard.tsx b/src/frontend/apps/standalone_site/src/components/Cards/WhiteCard/WhiteCard.tsx
@@ -1,19 +1,12 @@
-import { Box, BoxExtendedProps } from 'grommet';
+import { Box, BoxProps } from 'lib-components';
 import { PropsWithChildren } from 'react';
 
 export const WhiteCard = ({
   children,
   ...boxProps
-}: PropsWithChildren<BoxExtendedProps>) => {
+}: PropsWithChildren<BoxProps<'div'>>) => {
   return (
-    <Box
-      background="white"
-      elevation="even"
-      flex
-      round="small"
-      pad="medium"
-      {...boxProps}
-    >
+    <Box background="white" elevation round="small" pad="small" {...boxProps}>
       {children}
     </Box>
   );

diff --git a/src/frontend/apps/standalone_site/src/components/Layout/MainLayout.tsx b/src/frontend/apps/standalone_site/src/components/Layout/MainLayout.tsx
@@ -1,5 +1,5 @@
-import { Box, BoxProps } from 'grommet';
 import { Nullable, colorsTokens } from 'lib-common';
+import { Box, BoxProps } from 'lib-components';
 import React, {
   ForwardRefExoticComponent,
   RefAttributes,
@@ -8,12 +8,12 @@ import React, {
   useState,
 } from 'react';
 
-interface MainLayoutProps extends BoxProps {
+interface MainLayoutProps extends BoxProps<'div'> {
   children: React.ReactNode;
   Header: ForwardRefExoticComponent<RefAttributes<Nullable<HTMLDivElement>>>;
   menu?: React.ReactNode;
   footer?: React.ReactNode;
-  contentBoxProps?: BoxProps;
+  contentBoxProps?: BoxProps<'div'>;
 }
 
 const MainLayout = ({
@@ -52,18 +52,18 @@ const MainLayout = ({
       <Box direction="row" {...boxProps} height={{ min: '75vh' }}>
         <Header ref={headerBoxRef} />
         {menu}
-        <Box flex>
-          <Box
-            pad={{
-              bottom: 'small',
-              top: `${headerHeight}px`,
-              horizontal: 'medium',
-            }}
-            margin={{ bottom: 'medium' }}
-            {...contentBoxProps}
-          >
-            {children}
-          </Box>
+        <Box
+          pad={{
+            bottom: 'small',
+            top: `${headerHeight}px`,
+            horizontal: 'medium',
+          }}
+          margin={{ bottom: 'medium' }}
+          width={{ min: 'none', width: 'full' }}
+          fill
+          {...contentBoxProps}
+        >
+          {children}
         </Box>
       </Box>
       {footer}

diff --git a/src/frontend/apps/standalone_site/src/features/Authentication/components/AuthRouter.tsx b/src/frontend/apps/standalone_site/src/features/Authentication/components/AuthRouter.tsx
@@ -1,4 +1,4 @@
-import { Box } from 'grommet';
+import { Box } from 'lib-components';
 import { Fragment } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
@@ -25,7 +25,7 @@ const AuthRouter = () => {
           <Route path="*" element={<Login />} />
         </Routes>
       </BaseAuthenticationPage>
-      <Box style={{ position: 'absolute', bottom: '0' }} width="100%">
+      <Box style={{ position: 'absolute', bottom: '0' }} fill>
         <Footer />
       </Box>
     </Fragment>

diff --git a/...nd/apps/standalone_site/src/features/Authentication/components/BaseAuthenticationPage.tsx b/...nd/apps/standalone_site/src/features/Authentication/components/BaseAuthenticationPage.tsx
@@ -1,5 +1,5 @@
-import { Box } from 'grommet';
-import { useResponsive, useSiteConfig } from 'lib-components';
+import { colorsTokens } from 'lib-common';
+import { Box, useResponsive, useSiteConfig } from 'lib-components';
 import React, { Fragment, PropsWithChildren, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -47,12 +47,7 @@ const ResponsiveBox = ({ children }: PropsWithChildren) => {
     return (
       <Box height="87vh" background={backgroundImage('30%', '80%')}>
         <HeaderLight bgcolor="transparent" color="white" />
-        <WhiteCard
-          width="90%"
-          margin="auto"
-          flex={false}
-          pad={{ vertical: 'xlarge' }}
-        >
+        <WhiteCard width="90%" margin="auto" pad={{ vertical: 'large' }}>
           {children}
         </WhiteCard>
       </Box>
@@ -76,9 +71,9 @@ const ResponsiveBox = ({ children }: PropsWithChildren) => {
           />
         ) : (
           <Box
-            width="large"
+            width="80%"
             margin="auto"
-            pad={{ vertical: 'small', horizontal: 'medium' }}
+            pad={{ vertical: 'small' }}
             align="center"
           >
             <div
@@ -104,7 +99,7 @@ export const BaseAuthenticationPage = ({
     <Box
       direction={isSmallerXsmedium ? 'column' : 'row'}
       height="100vh"
-      background="bg-lightgrey2"
+      background={colorsTokens['secondary-100']}
     >
       <ResponsiveBox>
         <Box style={{ flex: '1' }} align="center" justify="center">

diff --git a/src/frontend/apps/standalone_site/src/features/Authentication/components/Login.tsx b/src/frontend/apps/standalone_site/src/features/Authentication/components/Login.tsx
@@ -1,5 +1,4 @@
-import { Box } from 'grommet';
-import { useResponsive } from 'lib-components';
+import { Box, useResponsive } from 'lib-components';
 import React from 'react';
 
 import { LoginForm } from './LoginForm';

diff --git a/src/frontend/apps/standalone_site/src/features/Authentication/components/LoginForm.tsx b/src/frontend/apps/standalone_site/src/features/Authentication/components/LoginForm.tsx
@@ -1,8 +1,7 @@
 import { Field, Input } from '@openfun/cunningham-react';
-import { Box } from 'grommet';
 import { Alert } from 'grommet-icons';
 import { colorsTokens } from 'lib-common';
-import { ButtonLoader, Text } from 'lib-components';
+import { Box, ButtonLoader, Text } from 'lib-components';
 import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
@@ -122,14 +121,14 @@ export const LoginForm = () => {
           direction="row"
           align="center"
           justify="center"
-          margin={{ vertical: 'medium' }}
+          margin={{ vertical: 'small' }}
           gap="small"
         >
           <Alert size="medium" color="#df8c00" />
           <Text weight="bold">{error?.detail}</Text>
         </Box>
       )}
-      <Box flex={false} margin={{ top: 'medium' }}>
+      <Box margin={{ top: 'small' }}>
         <ButtonLoader
           aria-label={intl.formatMessage(messages.labelSubmit)}
           isSubmitting={isLoading}

diff --git a/src/frontend/apps/standalone_site/src/features/Authentication/components/PasswordReset.tsx b/src/frontend/apps/standalone_site/src/features/Authentication/components/PasswordReset.tsx
@@ -1,5 +1,4 @@
-import { Box } from 'grommet';
-import { useResponsive } from 'lib-components';
+import { Box, useResponsive } from 'lib-components';
 import { PropsWithChildren, useEffect } from 'react';
 import { toast } from 'react-hot-toast';
 import { defineMessages, useIntl } from 'react-intl';

diff --git a/.../apps/standalone_site/src/features/Authentication/components/PasswordResetConfirmForm.tsx b/.../apps/standalone_site/src/features/Authentication/components/PasswordResetConfirmForm.tsx
@@ -1,7 +1,5 @@
 import { Button, Field } from '@openfun/cunningham-react';
-import { Box } from 'grommet';
-import { Alert } from 'grommet-icons';
-import { Text } from 'lib-components';
+import { Box, BoxError, Text } from 'lib-components';
 import { useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { defineMessages, useIntl } from 'react-intl';
@@ -87,15 +85,9 @@ export const PasswordResetConfirmForm = ({
         setValue((_value) => ({ ..._value, [name]: value }));
       }}
     >
-      <Box
-        direction="row"
-        align="center"
-        justify="center"
-        margin={{ vertical: 'medium' }}
-        gap="small"
-      >
-        <Text weight="bold">{intl.formatMessage(messages.explainingText)}</Text>
-      </Box>
+      <Text type="p" weight="bold">
+        {intl.formatMessage(messages.explainingText)}
+      </Text>
       <PrivateTextInputField
         autoComplete="new-password"
         name="new_password1"
@@ -107,19 +99,8 @@ export const PasswordResetConfirmForm = ({
           label={intl.formatMessage(messages.passwordConfirmLabel)}
         />
       </Field>
-      {message && (
-        <Box
-          direction="row"
-          align="center"
-          justify="center"
-          margin={{ vertical: 'medium' }}
-          gap="small"
-        >
-          <Alert size="medium" color="#df8c00" />
-          <Text weight="bold">{message}</Text>
-        </Box>
-      )}
-      <Box flex={false} margin={{ top: 'medium' }}>
+      {message && <BoxError message={message} className="mt-s" />}
+      <Box margin={{ top: 'medium' }}>
         <Button type="submit" fullWidth>
           {intl.formatMessage(messages.labelSubmit)}
         </Button>

diff --git a/...rontend/apps/standalone_site/src/features/Authentication/components/PasswordResetForm.tsx b/...rontend/apps/standalone_site/src/features/Authentication/components/PasswordResetForm.tsx
@@ -1,7 +1,5 @@
 import { Button, Input } from '@openfun/cunningham-react';
-import { Box } from 'grommet';
-import { Alert } from 'grommet-icons';
-import { Text } from 'lib-components';
+import { Box, BoxError, Text } from 'lib-components';
 import { useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { defineMessages, useIntl } from 'react-intl';
@@ -76,15 +74,9 @@ export const PasswordResetForm = () => {
         }
       }}
     >
-      <Box
-        direction="row"
-        align="center"
-        justify="center"
-        margin={{ vertical: 'medium' }}
-        gap="small"
-      >
-        <Text weight="bold">{intl.formatMessage(messages.explainingText)}</Text>
-      </Box>
+      <Text type="p" weight="bold">
+        {intl.formatMessage(messages.explainingText)}
+      </Text>
       <Input
         aria-label={intl.formatMessage(messages.labelFieldEmail)}
         label={intl.formatMessage(messages.labelFieldEmail)}
@@ -93,19 +85,8 @@ export const PasswordResetForm = () => {
         fullWidth
         required
       />
-      {message && (
-        <Box
-          direction="row"
-          align="center"
-          justify="center"
-          margin={{ vertical: 'medium' }}
-          gap="small"
-        >
-          <Alert size="medium" color="#df8c00" />
-          <Text weight="bold">{message}</Text>
-        </Box>
-      )}
-      <Box flex={false} margin={{ top: 'medium' }}>
+      {message && <BoxError message={message} className="mt-s" />}
+      <Box margin={{ top: 'medium' }}>
         <Button type="submit" fullWidth>
           {intl.formatMessage(messages.labelSubmit)}
         </Button>

diff --git a/...tend/apps/standalone_site/src/features/Authentication/components/RenaterAuthenticator.tsx b/...tend/apps/standalone_site/src/features/Authentication/components/RenaterAuthenticator.tsx
@@ -1,5 +1,6 @@
-import { Box, FormField, Image, ThemeContext } from 'grommet';
-import { ClosingCard, Select, Text, useResponsive } from 'lib-components';
+import { FormField, Image, ThemeContext } from 'grommet';
+import { colorsTokens } from 'lib-common';
+import { Box, ClosingCard, Select, Text, useResponsive } from 'lib-components';
 import { Fragment, useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
@@ -75,14 +76,14 @@ export const RenaterAuthenticator = () => {
 
   return (
     <Box
-      background="bg-select"
+      background={colorsTokens['primary-150']}
       pad={{
         horizontal: isSmallerBreakpoint(breakpoint, 'medium')
           ? 'large'
           : 'xlarge',
-        vertical: 'medium',
+        vertical: 'small',
       }}
-      round="xsmall"
+      round="xxsmall"
     >
       {errorQuery && errorQuery === ERRORTOKEN && (
         <ClosingCard
@@ -109,7 +110,7 @@ export const RenaterAuthenticator = () => {
         />
       )}
       <Box
-        margin={{ bottom: 'medium' }}
+        margin={{ bottom: 'small' }}
         direction="row"
         justify="center"
         align="center"

diff --git a/src/frontend/apps/standalone_site/src/features/Contents/components/Contents/Contents.tsx b/src/frontend/apps/standalone_site/src/features/Contents/components/Contents/Contents.tsx
@@ -1,8 +1,6 @@
-import { Box } from 'grommet';
-import { Heading, StyledLink, Text } from 'lib-components';
+import { Box, Heading, StyledLink, Text } from 'lib-components';
 import { Fragment } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import styled from 'styled-components';
 
 import { useContentFeatures } from '../../store/contentsStore';
 
@@ -14,10 +12,6 @@ const messages = defineMessages({
   },
 });
 
-const BoxText = styled(Box)`
-  color: #002c84;
-`;
-
 interface ContentsProps {
   playlistId?: string;
 }
@@ -32,11 +26,13 @@ const Contents = ({ playlistId }: ContentsProps) => {
   return (
     <Fragment>
       {samples.map((sample, index) => (
-        <Box margin={{ top: 'large' }} key={`content-sample-${index}`}>
-          <BoxText
+        <Box margin={{ top: 'medium' }} key={`content-sample-${index}`}>
+          <Box
+            color="#002c84"
             direction="row"
-            justify="between"
+            justify="space-between"
             margin={{ bottom: 'small' }}
+            align="center"
           >
             <Heading level={3} style={{ margin: '0' }}>
               {intl.formatMessage(sample.title)}
@@ -51,7 +47,7 @@ const Contents = ({ playlistId }: ContentsProps) => {
                 › {intl.formatMessage(messages.SeeEverything)}
               </StyledLink>
             </Text>
-          </BoxText>
+          </Box>
           {sample.component}
         </Box>
       ))}