✨(frontend) add styledCss props to Box component

In order to facilitate DX and not to use a string in the code for the css.
We add the $styledCss props to the Box component.
This object comes from Styled component

CHANGELOG.md

@@ -14,11 +14,13 @@ and this project adheres to
 - 🌐(frontend) Add German translation #255
 - ✨(frontend) Add a broadcast store #387
 
+
 ## Changed
 
 - 🚸(backend) improve users similarity search and sort results #391
 - 🌐(backend) add german translation #259
 - ♻️(frontend) simplify stores #402
+- ✨(frontend) update $css Box props type to add styled components RuleSet #423
 
 ## Fixed
 

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

@@ -1,6 +1,6 @@
 import { ComponentPropsWithRef, ReactHTML } from 'react';
 import styled from 'styled-components';
-import { CSSProperties } from 'styled-components/dist/types';
+import { CSSProperties, RuleSet } from 'styled-components/dist/types';
 
 import {
   MarginPadding,
@@ -15,7 +15,7 @@ export interface BoxProps {
   $align?: CSSProperties['alignItems'];
   $background?: CSSProperties['background'];
   $color?: CSSProperties['color'];
-  $css?: string;
+  $css?: string | RuleSet<object>;
   $direction?: CSSProperties['flexDirection'];
   $display?: CSSProperties['display'];
   $effect?: 'show' | 'hide';
@@ -73,7 +73,7 @@ export const Box = styled('div')<BoxProps>`
   ${({ $transition }) => $transition && `transition: ${$transition};`}
   ${({ $width }) => $width && `width: ${$width};`}
   ${({ $wrap }) => $wrap && `flex-wrap: ${$wrap};`}
-  ${({ $css }) => $css && `${$css};`}
+  ${({ $css }) => $css && (typeof $css === 'string' ? `${$css};` : $css)}
   ${({ $zIndex }) => $zIndex && `z-index: ${$zIndex};`}
   ${({ $effect }) => {
     let effect;

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

@@ -1,4 +1,5 @@
 import { ComponentPropsWithRef, forwardRef } from 'react';
+import { css } from 'styled-components';
 
 import { Box, BoxType } from './Box';
 
@@ -26,7 +27,7 @@ const BoxButton = forwardRef<HTMLDivElement, BoxType>(
         $background="none"
         $margin="none"
         $padding="none"
-        $css={`
+        $css={css`
           cursor: pointer;
           border: none;
           outline: none;

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

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react';
+import { css } from 'styled-components';
 
 import { useCunninghamTheme } from '@/cunningham';
 
@@ -15,7 +16,7 @@ export const Card = ({
     <Box
       $background="white"
       $radius="4px"
-      $css={`
+      $css={css`
         box-shadow: 2px 2px 5px ${colorsTokens()['greyscale-300']};
         border: 1px solid ${colorsTokens()['card-border']};
         ${$css}

src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx

@@ -1,5 +1,6 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 
 import { Box, Card, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
@@ -46,7 +47,11 @@ export const DocHeader = ({ doc, versionId }: DocHeaderProps) => {
               $theme="primary"
               $variation="600"
               $size="2rem"
-              $css={`&:hover {background-color: ${colorsTokens()['primary-100']}; };`}
+              $css={css`
+                &:hover {
+                  background-color: ${colorsTokens()['primary-100']};
+                }
+              `}
               $hasTransition
               $radius="5px"
               $padding="tiny"

src/frontend/apps/impress/src/features/footer/Footer.tsx

@@ -1,5 +1,4 @@
 import Image from 'next/image';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';