🧑‍💻(app-desk) add styled-components and create generic components

Add styled-components to the app-desk, it will help us to create
easily styled components.
We create 2 components, Box and Text, it is 2 generic components
that we help us to style quickly html elements. They use
the power of styled-components and Cunningham's design system.

src/frontend/apps/desk/package.json

@@ -20,6 +20,7 @@
     "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "styled-components": "6.1.8",
     "zustand": "4.4.7"
   },
   "devDependencies": {

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

@@ -0,0 +1,33 @@
+import { ReactHTML } from 'react';
+import styled from 'styled-components';
+import { CSSProperties } from 'styled-components/dist/types';
+
+export interface BoxProps {
+  as?: keyof ReactHTML;
+  $align?: CSSProperties['alignItems'];
+  $background?: CSSProperties['background'];
+  $color?: CSSProperties['color'];
+  $css?: string;
+  $direction?: CSSProperties['flexDirection'];
+  $flex?: boolean;
+  $gap?: CSSProperties['gap'];
+  $height?: CSSProperties['height'];
+  $justify?: CSSProperties['justifyContent'];
+  $position?: CSSProperties['position'];
+  $width?: CSSProperties['width'];
+}
+
+export const Box = styled('div')<BoxProps>`
+  display: flex;
+  ${({ $align }) => $align && `align-items: ${$align};`}
+  ${({ $background }) => $background && `background: ${$background};`}
+  ${({ $color }) => $color && `color: ${$color};`}
+  ${({ $direction }) => $direction && `flex-direction: ${$direction};`}
+  ${({ $flex }) => $flex === false && `display: block;`}
+  ${({ $gap }) => $gap && `gap: ${$gap};`}
+  ${({ $height }) => $height && `height: ${$height};`}
+  ${({ $justify }) => $justify && `justify-content: ${$justify};`}
+  ${({ $position }) => $position && `position: ${$position};`}
+  ${({ $width }) => $width && `width: ${$width};`}
+  ${({ $css }) => $css && `${$css};`}
+`;

src/frontend/apps/desk/src/components/Text.tsx

@@ -0,0 +1,53 @@
+import { CSSProperties, ComponentPropsWithRef, ReactHTML } from 'react';
+import styled from 'styled-components';
+
+import { Box, BoxProps } from './Box';
+
+export interface TextProps extends BoxProps {
+  as?: keyof Pick<
+    ReactHTML,
+    'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  >;
+  $weight?: CSSProperties['fontWeight'];
+  $size?: CSSProperties['fontSize'];
+  $theme?:
+    | 'primary'
+    | 'secondary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'greyscale';
+  $variation?:
+    | 'text'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900';
+}
+
+export const TextStyled = styled(Box)<TextProps>`
+  ${({ $weight }) => $weight && `font-weight: ${$weight};`}
+  ${({ $size }) => $size && `font-size: ${$size};`}
+  ${({ $color }) => $color && `color: ${$color};`}
+  ${({ $theme, $variation }) =>
+    `color: var(--c--theme--colors--${$theme}-${$variation});`}
+`;
+
+export const Text = ({
+  ...props
+}: ComponentPropsWithRef<typeof TextStyled>) => {
+  return (
+    <TextStyled
+      as="span"
+      $theme="primary"
+      $variation="text"
+      {...props}
+    ></TextStyled>
+  );
+};

src/frontend/apps/desk/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Box';
+export * from './Text';