Implement SmartMenuiserie API + added bun test-server

src/App.scss

@@ -1,41 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.tsx

@@ -1,10 +1,58 @@
-import './App.scss'
+import React from 'react';
+import './App.scss';
+import Sidebar from './Components/Sidebar/Sidebar';
+import { IAvailableContainerModel } from './Interfaces/IAvailableContainerModel';
+import { IConfigurationResponseModel } from './Interfaces/IConfigurationResponseModel';
+
+interface IAppProps {
 
-function App() {
-  return (
-    <div className="App">
-    </div>
-  )
 }
 
-export default App
+interface IAppState {
+  componentOptions: IAvailableContainerModel[]
+}
+class App extends React.Component<IAppProps> {
+  public state: IAppState;
+
+  constructor(props: IAppProps) {
+    super(props);
+    this.state = {
+      componentOptions: []
+    };
+  }
+
+  componentDidMount() {
+    fetchConfiguration().then((configuration: IConfigurationResponseModel) => {
+      this.setState({
+        componentOptions: configuration.AvailableContainers
+      });
+    });
+  }
+
+  render() {
+    return (
+      <div className="App">
+        <Sidebar componentOptions={this.state.componentOptions} />
+      </div>
+    );
+  }
+}
+
+async function fetchConfiguration(): Promise<IConfigurationResponseModel> {
+  const url = `${import.meta.env.VITE_SMARTMENUISERIE_URL}`;
+  const myHeaders = new Headers({
+    'Content-Type': 'application/json'
+  });
+
+  const myInit = {
+    method: 'POST',
+    headers: myHeaders
+  };
+
+  return await fetch(url, myInit)
+    .then((response) =>
+      response.json()
+    ) as IConfigurationResponseModel;
+}
+
+export default App;

src/Components/Sidebar/Sidebar.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { IAvailableContainerModel } from '../../Interfaces/IAvailableContainerModel';
+
+interface ISidebarProps {
+  componentOptions: IAvailableContainerModel[]
+}
+
+export default class Sidebar extends React.PureComponent<ISidebarProps> {
+  public render() {
+    return (
+      <nav className='bg-blue min-h-full'>
+
+      </nav>
+    );
+  }
+}

src/Components/SidebarRow/SidebarRow.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+interface ISidebarRowProps {
+}
+
+export const SidebarRow: React.FC<ISidebarRowProps> = (props) => {
+  return (
+    <div>
+
+    </div>
+  );
+};

src/Enums/AddingBehavior.ts

@@ -0,0 +1,4 @@
+export enum AddingBehavior {
+    InsertInto,
+    Replace
+}

src/Enums/XPositionReference.ts

@@ -0,0 +1,5 @@
+export enum XPositionReference {
+    Left,
+    Center,
+    Right
+}

src/Interfaces/ActionContainerModel.ts

@@ -0,0 +1,11 @@
+import { AddingBehavior } from '../Enums/AddingBehavior';
+import { IImageModel } from './IImageModel';
+
+export interface IActionContainerModel {
+  Id: string
+  CustomLogo: IImageModel
+  Label: string
+  Description: string
+  Action: string
+  AddingBehavior: AddingBehavior
+}

src/Interfaces/IAvailableContainerModel.ts

@@ -0,0 +1,28 @@
+import { IActionContainerModel } from './ActionContainerModel'
+import { IAvailableDefaultContainerModel } from './IAvailableDefaultContainerModel'
+
+/** Model of available container used in application configuration */
+export interface IAvailableContainerModel {
+  Type: string
+  BodyColor: string
+  BorderColor: string
+  BorderWidth: number
+  Width: number
+  Height: number
+  Padding: number
+  MinWidth: number
+  MaxWidth: number
+  MinHeight: number
+  MaxHeight: number
+  IsWidthFixed: boolean
+  IsPositionFixed: boolean
+
+  ShowCotation: boolean
+
+  /** Default Type container to add with this container (Priority on DefaultChildrenContainers property) */
+  TypeChildContainerDefault: string
+
+  /** Default children container to add with this container */
+  DefaultChildrenContainers: IAvailableDefaultContainerModel[]
+  ContainerActions: IActionContainerModel[]
+}

src/Interfaces/IAvailableDefaultContainerModel.ts

@@ -0,0 +1,4 @@
+export interface IAvailableDefaultContainerModel {
+  Type: string
+  DefaultChildrenContainers: IAvailableDefaultContainerModel[]
+}

src/Interfaces/IAvailableSymbolModel.ts

@@ -0,0 +1,12 @@
+import { XPositionReference } from '../Enums/XPositionReference';
+import { IImageModel } from './IImageModel';
+
+/**
+ * Model of available symbol to configure the application */
+export interface IAvailableSymbolModel {
+  Name: string
+  XPositionReference: XPositionReference
+  Image: IImageModel
+  Width: number
+  Height: number
+}

src/Interfaces/IConfigurationResponseModel.ts

@@ -0,0 +1,9 @@
+import { IAvailableContainerModel } from './IAvailableContainerModel';
+import { IAvailableSymbolModel } from './IAvailableSymbolModel';
+
+/** Model of configuration for the application to configure it */
+export interface IConfigurationResponseModel {
+  AvailableContainers: IAvailableContainerModel[];
+  AvailableSymbols: IAvailableSymbolModel[];
+  MainContainer: IAvailableContainerModel;
+}

src/Interfaces/IImageModel.ts

@@ -0,0 +1,7 @@
+/** Model of an image with multiple source */
+export interface IImageModel {
+    Name: string;
+    Url: string;
+    Base64Image: string;
+    Svg: string;
+}

src/main.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-)
+);

src/vite-env.d.ts

@@ -1 +1,10 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_SMARTMENUISERIE_URL: string
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}