🎨Box spacing

src/frontend/apps/impress/jest.setup.ts

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import * as dotenv from 'dotenv';
 
 dotenv.config({ path: './.env.test' });

src/frontend/apps/impress/src/components/Box.tsx

@@ -2,6 +2,12 @@ import { ComponentPropsWithRef, ReactHTML } from 'react';
 import styled from 'styled-components';
 import { CSSProperties } from 'styled-components/dist/types';
 
+import {
+  MarginPadding,
+  stylesMargin,
+  stylesPadding,
+} from '@/utils/styleBuilder';
+
 import { hideEffect, showEffect } from './Effect';
 
 export interface BoxProps {
@@ -18,11 +24,13 @@ export interface BoxProps {
   $height?: CSSProperties['height'];
   $justify?: CSSProperties['justifyContent'];
   $overflow?: CSSProperties['overflow'];
+  $margin?: MarginPadding;
+  $maxWidth?: CSSProperties['maxWidth'];
+  $minWidth?: CSSProperties['minWidth'];
+  $padding?: MarginPadding;
   $position?: CSSProperties['position'];
   $radius?: CSSProperties['borderRadius'];
   $width?: CSSProperties['width'];
-  $maxWidth?: CSSProperties['maxWidth'];
-  $minWidth?: CSSProperties['minWidth'];
 }
 
 export type BoxType = ComponentPropsWithRef<typeof Box>;
@@ -39,12 +47,14 @@ export const Box = styled('div')<BoxProps>`
   ${({ $gap }) => $gap && `gap: ${$gap};`}
   ${({ $height }) => $height && `height: ${$height};`}
   ${({ $justify }) => $justify && `justify-content: ${$justify};`}
+  ${({ $margin }) => $margin && stylesMargin($margin)}
+  ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth};`}
+  ${({ $minWidth }) => $minWidth && `min-width: ${$minWidth};`}
   ${({ $overflow }) => $overflow && `overflow: ${$overflow};`}
+  ${({ $padding }) => $padding && stylesPadding($padding)}
   ${({ $position }) => $position && `position: ${$position};`}
   ${({ $radius }) => $radius && `border-radius: ${$radius};`}
   ${({ $width }) => $width && `width: ${$width};`}
-  ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth};`}
-  ${({ $minWidth }) => $minWidth && `min-width: ${$minWidth};`}
   ${({ $css }) => $css && `${$css};`}
   ${({ $effect }) => {
     let effect;

src/frontend/apps/impress/src/components/TextErrors.tsx

@@ -20,7 +20,7 @@ export const TextErrors = ({
         causes.map((cause, i) => (
           <Text
             key={`causes-${i}`}
-            className="mt-s"
+            $margin={{ top: 'small' }}
             $theme="danger"
             $textAlign="center"
             {...textProps}
@@ -31,7 +31,7 @@ export const TextErrors = ({
 
       {!causes && (
         <Text
-          className="mt-s"
+          $margin={{ top: 'small' }}
           $theme="danger"
           $textAlign="center"
           {...textProps}

src/frontend/apps/impress/src/components/__tests__/Box.spec.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+
+import { Box } from '../Box';
+
+describe('<Box />', () => {
+  it('has the padding from prop', () => {
+    const { unmount } = render(<Box $padding="10px">My Box</Box>);
+
+    expect(screen.getByText('My Box')).toHaveStyle('padding: 10px');
+
+    unmount();
+
+    render(
+      <Box $padding={{ horizontal: 'xl', all: 'large', bottom: 'tiny' }}>
+        My Box
+      </Box>,
+    );
+
+    expect(screen.getByText('My Box')).toHaveStyle(`
+      padding-left: 4rem;
+      padding-right: 4rem;
+      padding-top: 3rem;
+      padding-bottom: 0.5rem;`);
+  });
+
+  it('has the margin from prop', () => {
+    const { unmount } = render(<Box $margin="10px">My Box</Box>);
+    expect(screen.getByText('My Box')).toHaveStyle('margin: 10px');
+
+    unmount();
+
+    render(
+      <Box
+        $margin={{
+          horizontal: 'auto',
+          vertical: 'big',
+          bottom: 'full',
+          all: 'xtiny',
+        }}
+      >
+        My Box
+      </Box>,
+    );
+
+    expect(screen.getByText('My Box')).toHaveStyle(`
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 1.625rem;
+      margin-bottom: 100%;`);
+  });
+});

src/frontend/apps/impress/src/features/header/Header.tsx

@@ -40,7 +40,7 @@ export const Header = () => {
     <StyledHeader>
       <RedStripe />
       <Box
-        className="ml-bx mr-bx"
+        $margin={{ horizontal: 'xbig' }}
         $align="center"
         $justify="space-between"
         $direction="row"
@@ -55,7 +55,7 @@ export const Header = () => {
             />
             <Box $align="center" $gap="1rem" $direction="row">
               <Image priority src={IconImpress} alt={t('Impress Logo')} />
-              <Text className="m-0" as="h2" $theme="primary">
+              <Text $margin="none" as="h2" $theme="primary">
                 {t('Impress')}
               </Text>
             </Box>

src/frontend/apps/impress/src/features/menu/Menu.tsx

@@ -14,12 +14,13 @@ export const Menu = () => {
   return (
     <Box
       as="menu"
-      className="m-0 p-0"
+      $padding="none"
+      $margin="none"
       $background={colorsTokens()['primary-800']}
       $height="100%"
       $justify="space-between"
     >
-      <Box className="pt-l" $direction="column" $gap="0.8rem">
+      <Box $padding={{ top: 'large' }} $direction="column" $gap="0.8rem">
         <MenuItem Icon={IconPad} label={t('Pad')} href="/" alias={['/pads/']} />
       </Box>
     </Box>

src/frontend/apps/impress/src/features/menu/MenuItems.tsx

@@ -52,7 +52,8 @@ const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => {
       style={{ display: 'block' }}
     >
       <Box
-        className="m-st p-t"
+        $margin="xtiny"
+        $padding="tiny"
         as="li"
         $justify="center"
         $css={`

src/frontend/apps/impress/src/features/menu/Tooltip.tsx

@@ -26,7 +26,8 @@ export const Tooltip = ({
     <Popover parentRef={parentRef} onClickOutside={() => ''} borderless>
       <Box
         aria-label="tooltip"
-        className="ml-t p-t"
+        $padding="tiny"
+        $margin={{ left: 'tiny' }}
         $background={backgroundColor}
         $radius="4px"
         $css={`

src/frontend/apps/impress/src/features/pads/pad-tools/components/PadToolBox.tsx

@@ -43,7 +43,7 @@ export const PadToolBox = ({ pad }: PadToolBoxProps) => {
 
   return (
     <Box
-      className="m-b"
+      $margin="big"
       $align="center"
       $direction="row"
       $gap="1rem"

src/frontend/apps/impress/src/features/pads/pad/components/PadEditor.tsx

@@ -15,7 +15,12 @@ export const PadEditor = ({ pad }: PadEditorProps) => {
   return (
     <>
       <PadToolBox pad={pad} />
-      <Card className="m-b p-b" $css="margin-top:0;flex:1;" $overflow="auto">
+      <Card
+        $margin={{ top: 'none', all: 'big' }}
+        $padding="big"
+        $css="flex:1;"
+        $overflow="auto"
+      >
         <Text as="h2" $align="center">
           {pad.title}
         </Text>

src/frontend/apps/impress/src/features/pads/pads-create/components/CardCreatePad.tsx

@@ -30,7 +30,7 @@ export const CardCreatePad = () => {
 
   return (
     <Card
-      className="p-b"
+      $padding="big"
       $height="70%"
       $justify="space-between"
       $width="100%"

src/frontend/apps/impress/src/features/pads/pads-panel/components/PadItem.tsx

@@ -55,7 +55,7 @@ export const PadItem = ({ pad }: PadItemProps) => {
 
   return (
     <Box
-      className="m-0"
+      $margin="none"
       as="li"
       $css={`
         transition: all 0.2s ease-in; 

src/frontend/apps/impress/src/features/pads/pads-panel/components/PadList.tsx

@@ -22,7 +22,7 @@ const PadListState = ({ isLoading, isError, pads }: PanelTeamsStateProps) => {
 
   if (isError) {
     return (
-      <Box $justify="center" className="mb-b">
+      <Box $justify="center" $margin={{ bottom: 'big' }}>
         <Text $theme="danger" $align="center" $textAlign="center">
           {t('Something bad happens, please refresh the page.')}
         </Text>
@@ -32,16 +32,21 @@ const PadListState = ({ isLoading, isError, pads }: PanelTeamsStateProps) => {
 
   if (isLoading) {
     return (
-      <Box $align="center" className="m-l">
+      <Box $align="center" $margin="large">
         <Loader />
       </Box>
     );
   }
 
   if (!pads?.length) {
     return (
-      <Box $justify="center" className="m-s">
-        <Text as="p" className="mb-0 mt-0" $theme="greyscale" $variation="500">
+      <Box $justify="center" $margin="small">
+        <Text
+          as="p"
+          $margin={{ vertical: 'none' }}
+          $theme="greyscale"
+          $variation="500"
+        >
           {t('0 group to display.')}
         </Text>
         <Text as="p" $theme="greyscale" $variation="500">
@@ -85,7 +90,8 @@ export const PadList = () => {
         }}
         scrollContainer={containerRef.current}
         as="ul"
-        className="p-0 mt-0"
+        $padding="none"
+        $margin={{ top: 'none' }}
         role="listbox"
       >
         <PadListState isLoading={isLoading} isError={isError} pads={pads} />

src/frontend/apps/impress/src/features/pads/pads-panel/components/Panel.tsx

@@ -61,13 +61,11 @@ export const Panel = () => {
         `}
       >
         <Box
-          className="pr-l pl-s pt-s pb-s"
+          $padding={{ all: 'small', right: 'large' }}
           $direction="row"
           $align="center"
           $justify="space-between"
-          $css={`
-            border-bottom: 1px solid ${colorsTokens()['primary-300']};
-          `}
+          $css={`border-bottom: 1px solid ${colorsTokens()['primary-300']};`}
         >
           <Text $weight="bold" $size="1.25rem">
             {t('Recents')}

src/frontend/apps/impress/src/pages/404.tsx

@@ -18,7 +18,7 @@ const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
 
   return (
-    <Box $align="center" className="m-auto" $height="70vh" $gap="2rem">
+    <Box $align="center" $margin="auto" $height="70vh" $gap="2rem">
       <Icon404 aria-label="Image 404" role="img" />
 
       <Text $size="h2" $weight="700" $theme="greyscale" $variation="900">
@@ -31,7 +31,7 @@ const Page: NextPageWithLayout = () => {
         )}
       </Text>
 
-      <Box className="mt-l">
+      <Box $margin={{ top: 'large' }}>
         <StyledLink href="/">
           <StyledButton>{t('Back to home page')}</StyledButton>
         </StyledLink>

src/frontend/apps/impress/src/pages/pads/create.tsx

@@ -7,7 +7,7 @@ import { NextPageWithLayout } from '@/types/next';
 
 const Page: NextPageWithLayout = () => {
   return (
-    <Box className="p-l" $justify="center" $align="start" $height="inherit">
+    <Box $padding="large" $justify="center" $align="start" $height="inherit">
       <CardCreatePad />
     </Box>
   );

src/frontend/apps/impress/src/utils/styleBuilder.ts

@@ -0,0 +1,79 @@
+import { tokens } from '@/cunningham/cunningham-tokens';
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const {
+  '0': _0,
+  st,
+  t,
+  s,
+  b,
+  bx,
+  l,
+  ...spacingsLight
+} = tokens.themes.default.theme.spacings;
+/* eslint-enable @typescript-eslint/no-unused-vars */
+
+const spacings = {
+  xtiny: tokens.themes.default.theme.spacings['st'],
+  tiny: tokens.themes.default.theme.spacings['t'],
+  small: tokens.themes.default.theme.spacings['s'],
+  big: tokens.themes.default.theme.spacings['b'],
+  xbig: tokens.themes.default.theme.spacings['bx'],
+  large: tokens.themes.default.theme.spacings['l'],
+  ...spacingsLight,
+};
+
+type SpacingsKey = keyof typeof spacings;
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type Spacings = SpacingsKey | (string & {});
+
+export const spacingValue = (value?: Spacings) =>
+  value && value in spacings ? spacings[value as SpacingsKey] : value;
+
+export type MarginPadding =
+  | Spacings
+  | {
+      vertical?: Spacings;
+      horizontal?: Spacings;
+      top?: Spacings;
+      bottom?: Spacings;
+      left?: Spacings;
+      right?: Spacings;
+      all?: Spacings;
+    };
+
+export const stylesPadding = (pad: MarginPadding) => {
+  if (typeof pad === 'object') {
+    return {
+      'padding-top': spacingValue(pad.top || pad.vertical || pad.all),
+      'padding-bottom': spacingValue(pad.bottom || pad.vertical || pad.all),
+      'padding-left': spacingValue(pad.left || pad.horizontal || pad.all),
+      'padding-right': spacingValue(pad.right || pad.horizontal || pad.all),
+    };
+  } else {
+    return {
+      padding: spacingValue(pad),
+    };
+  }
+};
+
+export const stylesMargin = (margin: MarginPadding) => {
+  if (typeof margin === 'object') {
+    return {
+      'margin-top': spacingValue(margin.top || margin.vertical || margin.all),
+      'margin-bottom': spacingValue(
+        margin.bottom || margin.vertical || margin.all,
+      ),
+      'margin-left': spacingValue(
+        margin.left || margin.horizontal || margin.all,
+      ),
+      'margin-right': spacingValue(
+        margin.right || margin.horizontal || margin.all,
+      ),
+    };
+  } else {
+    return {
+      margin: spacingValue(margin),
+    };
+  }
+};