[FIX] deploy

This feature take a random on the artist and keep the 25 first and ge a single track for each artist.

.gitignore

@@ -65,3 +65,4 @@ __pycache__
 .design/
 .vscode/
 front/storybook-static
+back/bin

Dockerfile

@@ -6,7 +6,7 @@
 FROM archlinux:base-devel AS common
 # update system
 RUN pacman -Syu --noconfirm && pacman-db-upgrade \
-    && pacman -S --noconfirm jdk-openjdk \
+    && pacman -S --noconfirm jdk-openjdk wget\
     && pacman -Scc --noconfirm
 
 WORKDIR /tmp
@@ -53,13 +53,13 @@ RUN pnpm install --prod=false
 FROM dependency_front AS load_sources_front
 
 # JUST to get the vertion of the application and his sha...
-COPY front/build.js \
-  front/version.txt \
+COPY \
   front/tsconfig.json \
   front/tsconfig.node.json \
   front/vite.config.mts \
   front/index.html \
   ./
+
 COPY front/public ./public
 COPY front/src ./src
 
@@ -103,4 +103,8 @@ WORKDIR /application/
 
 EXPOSE 80
 
+# To verify health-check: docker inspect --format "{{json .State.Health }}" YOUR_SERVICE_NAME | jq
+HEALTHCHECK --start-period=10s --start-interval=2s --interval=30s --timeout=5s --retries=10 \
+   CMD wget --no-verbose --tries=1 --spider http://localhost:80/api/health_check || exit 1
+
 CMD ["java", "-Xms64M", "-Xmx1G", "-cp", "/application/application.jar", "org.kar.karusic.WebLauncher"]

README.md

@@ -6,40 +6,90 @@ Karideo
 Run in local:
 =============
 
-so simple...
+Start tools
+-----------
+
+Start the server basic interfaces: (DB(mySQL), Adminer)
 
 ```{.bash}
 # start the Bdd interface (no big data > 50Mo)
-cd bdd
-docker-compose up -d
-# start the REST API
-cd back
-docker-compose up -d
-# start the front API
-cd ../front
-docker-compose up -d
+docker compose -f env_dev/docker-compose.yaml up -d
 ```
 
+Start the Back-end:
+-------------------
 
-convert in an angular application: 
-https://betterprogramming.pub/how-to-convert-your-angular-application-to-a-native-mobile-app-android-and-ios-c212b38976df
+backend is developed in JAVA
 
+The first step is configuring your JAVA version (or select the JVM with the OS)
+```bash
+export PATH=$(ls -d --color=never /usr/lib/jvm/java-2*-openjdk)/bin:$PATH
+```
 
-Link with the external sub-library (front)
-------------------------------------------
+Install the dependency:
+```bash
+mvn install
+```
 
-Link:
+Run the test
+```bash
+mvn test
+```
+
+Install it for external use
+```bash
+mvn install
+```
+
+Execute the local server:
+```bash
+mvn exec:java@dev-mode
+```
+
+Start the Front-end:
+--------------------
+
+backend is developed in JAVA
 ```bash
 cd front
-pnpm run link_kar_cw
+pnpm install
+pnpm dev
 ```
 
-un-link:
+Display the result:
+-------------------
+
+[show the webpage: http://localhost:4203](http://localhost:4203)
+
+Some other dev tools:
+=====================
+
+Format code:
+------------
+
 ```bash
-cd front
-pnpm run unlink_kar_cw
+export PATH=$(ls -d --color=never /usr/lib/jvm/java-2*-openjdk)/bin:$PATH
+mvn formatter:format
+mvn test
 ```
 
+Tools in production mode
+========================
+
+Changing the Log Level
+----------------------
+
+In a production environment, you can adjust the log level to help diagnose bugs more effectively.
+
+The available log levels are:
+| **Log Level Tag** | **org.kar.karusic** | **org.kar.archidata** | **other** |
+| ----------------- | ------------------- | --------------------- | --------- |
+| `prod`            | INFO                | INFO                  | INFO      |
+| `prod-debug`      | DEBUG               | INFO                  | INFO      |
+| `prod-trace`      | TRACE               | DEBUG                 | INFO      |
+| `prod-trace-full` | TRACE               | TRACE                 | INFO      |
+| `dev`             | TRACE               | DEBUG                 | INFO      |
+
 
 Manual set in production:
 =========================
@@ -72,4 +122,4 @@ export TAG_DOCKER=latest
 export REGISTRY_ADDRESS=gitea.atria-soft.org
 docker build -t ${REGISTRY_ADDRESS}/kangaroo-and-rabbit/karusic:${TAG_DOCKER} .
 docker push ${REGISTRY_ADDRESS}/kangaroo-and-rabbit/karusic:${TAG_DOCKER}
-```
+```

back/Dockerfile

@@ -1,7 +1,8 @@
-FROM maven:3-openjdk-18 AS build
+FROM maven:3-openjdk-23 AS build
 
 COPY pom.xml /tmp/
 COPY src /tmp/src/
+COPY Formatter.xml /tmp/
 WORKDIR /tmp/
 RUN mvn clean compile assembly:single
 

back/pom.xml

@@ -3,11 +3,11 @@
 	<modelVersion>4.0.0</modelVersion>
 	<groupId>org.kar</groupId>
 	<artifactId>karusic</artifactId>
-	<version>1.0.4</version>
+	<version>1.1.1-SNAPSHOT</version>
 	<properties>
-		<maven.compiler.version>3.1</maven.compiler.version>
-		<maven.compiler.source>21</maven.compiler.source>
-		<maven.compiler.target>21</maven.compiler.target>
+		<maven.compiler.version>3.13.0</maven.compiler.version>
+		<maven.compiler.source>23</maven.compiler.source>
+		<maven.compiler.target>23</maven.compiler.target>
 		<maven.dependency.version>3.1.1</maven.dependency.version>
 	</properties>
 	<repositories>
@@ -20,7 +20,7 @@
 		<dependency>
 			<groupId>kangaroo-and-rabbit</groupId>
 			<artifactId>archidata</artifactId>
-			<version>0.20.4</version>
+			<version>0.23.6</version>
 		</dependency>
 		<!-- Loopback of logger JDK logging API to SLF4J -->
 		<dependency>
@@ -39,10 +39,15 @@
 			<artifactId>xercesImpl</artifactId>
 			<version>2.12.2</version>
 		</dependency>
+		<dependency>
+			<groupId>org.codehaus.janino</groupId>
+			<artifactId>janino</artifactId>
+			<version>3.1.9</version>
+		</dependency>
 		<dependency>
 			<groupId>com.fasterxml.jackson.datatype</groupId>
 			<artifactId>jackson-datatype-jsr310</artifactId>
-			<version>2.18.0-rc1</version>
+			<version>2.18.1</version>
 		</dependency>
 		<!--
 		************************************************************ 
@@ -99,16 +104,45 @@
 			<plugin>
 				<groupId>org.codehaus.mojo</groupId>
 				<artifactId>exec-maven-plugin</artifactId>
-				<version>1.4.0</version>
+				<version>3.2.0</version>
+				<executions>
+					<execution>
+						<id>prod-mode</id>
+						<goals>
+							<goal>java</goal>
+						</goals>
+						<configuration>
+							<mainClass>org.kar.karusic.WebLauncher</mainClass>
+						</configuration>
+					</execution>
+					<execution>
+						<id>dev-mode</id>
+						<goals>
+							<goal>java</goal>
+						</goals>
+						<configuration>
+							<mainClass>org.kar.karusic.WebLauncherLocal</mainClass>
+						</configuration>
+					</execution>
+					<execution>
+						<id>generate-api</id>
+						<goals>
+							<goal>java</goal>
+						</goals>
+						<configuration>
+							<mainClass>org.kar.karusic.GenerateApi</mainClass>
+						</configuration>
+					</execution>
+				</executions>
 				<configuration>
-					<mainClass>org.kar.karusic.WebLauncher</mainClass>
+					<mainClass/>
 				</configuration>
 			</plugin>
 			<!-- Create the source bundle -->
 			<plugin>
 				<groupId>org.apache.maven.plugins</groupId>
 				<artifactId>maven-source-plugin</artifactId>
-				<version>3.2.1</version>
+				<version>4.0.0-beta-1</version>
 				<executions>
 					<execution>
 						<id>attach-sources</id>
@@ -122,10 +156,12 @@
 			<plugin>
 				<groupId>org.apache.maven.plugins</groupId>
 				<artifactId>maven-surefire-plugin</artifactId>
-				<version>3.0.0-M5</version>
+				<version>3.2.5</version>
 			</plugin>
 			<plugin>
+				<groupId>org.apache.maven.plugins</groupId>
 				<artifactId>maven-assembly-plugin</artifactId>
+				<version>3.7.1</version>
 				<configuration>
 					<archive>
 						<manifest>
@@ -137,81 +173,21 @@
 					</descriptorRefs>
 				</configuration>
 			</plugin>
-			<!-- Create coverage -->
-			<!--
-			<plugin>
-				<groupId>org.jacoco</groupId>
-				<artifactId>jacoco-maven-plugin</artifactId>
-				<version>0.8.10</version>
-				<executions>
-					<execution>
-						<id>prepare-agent</id>
-						<goals>
-							<goal>prepare-agent</goal>
-						</goals>
-					</execution>
-					<execution>
-						<id>report</id>
-						<phase>test</phase>
-						<goals>
-							<goal>report</goal>
-						</goals>
-					</execution>
-					<execution>
-						<id>jacoco-check</id>
-						<goals>
-							<goal>check</goal>
-						</goals>
-						<configuration>
-							<rules>
-								<rule>
-									<element>PACKAGE</element>
-									<limits>
-										<limit>
-											<counter>LINE</counter>
-											<value>COVEREDRATIO</value>
-											<minimum>0.50</minimum>
-										</limit>
-									</limits>
-								</rule>
-							</rules>
-						</configuration>
-					</execution>
-				</executions>
-			</plugin>
-			-->
 			<!-- Java-doc generation for stand-alone site -->
 			<plugin>
 				<groupId>org.apache.maven.plugins</groupId>
 				<artifactId>maven-javadoc-plugin</artifactId>
-				<version>3.2.0</version>
+				<version>3.3.0</version>
 				<configuration>
 					<show>private</show>
 					<nohelp>true</nohelp>
 				</configuration>
 			</plugin>
-			<plugin>
-				<groupId>org.codehaus.mojo</groupId>
-				<artifactId>exec-maven-plugin</artifactId>
-				<version>3.1.0</version>
-				<executions>
-					<execution>
-						<id>exec-application</id>
-						<phase>package</phase>
-						<goals>
-							<goal>java</goal>
-						</goals>
-					</execution>
-				</executions>
-				<configuration>
-					<mainClass>org.kar.karusic.WebLauncher</mainClass>
-				</configuration>
-			</plugin>
 			<!-- Check the style of the code -->
 			<plugin>
 				<groupId>net.revelc.code.formatter</groupId>
 				<artifactId>formatter-maven-plugin</artifactId>
-				<version>2.23.0</version>
+				<version>2.24.1</version>
 				<configuration>
 					<encoding>UTF-8</encoding>
 					<lineEnding>LF</lineEnding>
@@ -242,14 +218,6 @@
 				<configuration>
 					<includeFilterFile>spotbugs-security-include.xml</includeFilterFile>
 					<excludeFilterFile>spotbugs-security-exclude.xml</excludeFilterFile>
-					<!--<plugins>
-						<plugin>
-							<groupId>com.h3xstream.findsecbugs</groupId>
-							<artifactId>findsecbugs-plugin</artifactId>
-							<version>1.12.0</version>
-						</plugin>
-					</plugins>
-					-->
 				</configuration>
 			</plugin>
 		</plugins>
@@ -260,7 +228,7 @@
 			<plugin>
 				<groupId>org.apache.maven.plugins</groupId>
 				<artifactId>maven-javadoc-plugin</artifactId>
-				<version>3.2.0</version>
+				<version>3.3.0</version>
 				<configuration>
 					<show>public</show>
 				</configuration>

back/src/org/kar/karusic/GenerateApi.java

@@ -0,0 +1,17 @@
+package org.kar.karusic;
+
+import org.kar.karusic.migration.Initialization;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+public class GenerateApi {
+	private final static Logger LOGGER = LoggerFactory.getLogger(GenerateApi.class);
+
+	private GenerateApi() {}
+
+	public static void main(final String[] args) throws Exception {
+		LOGGER.info("Generate API");
+		Initialization.generateObjects();
+		LOGGER.info("STOP the REST server.");
+	}
+}

back/src/org/kar/karusic/WebLauncherLocal.java

@@ -1,22 +1,10 @@
 package org.kar.karusic;
 
-import java.util.List;
 import java.util.logging.LogManager;
 
-import org.kar.archidata.api.DataResource;
-import org.kar.archidata.api.ProxyResource;
 import org.kar.archidata.exception.DataAccessException;
-import org.kar.archidata.externalRestApi.AnalyzeApi;
-import org.kar.archidata.externalRestApi.TsGenerateApi;
 import org.kar.archidata.tools.ConfigBaseVariable;
-import org.kar.karusic.api.AlbumResource;
-import org.kar.karusic.api.ArtistResource;
-import org.kar.karusic.api.Front;
-import org.kar.karusic.api.GenderResource;
-import org.kar.karusic.api.HealthCheck;
-import org.kar.karusic.api.PlaylistResource;
-import org.kar.karusic.api.TrackResource;
-import org.kar.karusic.api.UserResource;
+import org.kar.karusic.migration.Initialization;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.slf4j.bridge.SLF4JBridgeHandler;
@@ -26,27 +14,17 @@ public class WebLauncherLocal extends WebLauncher {
 
 	private WebLauncherLocal() {}
 
-	public static void generateObjects() throws Exception {
-		LOGGER.info("Generate APIs");
-		final List<Class<?>> listOfResources = List.of(AlbumResource.class, ArtistResource.class, Front.class, GenderResource.class, HealthCheck.class, PlaylistResource.class, UserResource.class,
-				TrackResource.class, DataResource.class, ProxyResource.class);
-		final AnalyzeApi api = new AnalyzeApi();
-		api.addAllApi(listOfResources);
-		TsGenerateApi.generateApi(api, "../front/src/back-api/");
-		LOGGER.info("Generate APIs (DONE)");
-	}
-
 	public static void main(final String[] args) throws Exception {
 		// Loop-back of logger JDK logging API to SLF4J
 		LogManager.getLogManager().reset();
 		SLF4JBridgeHandler.install();
 		// Generate the APIs in type-script
-		generateObjects();
+		Initialization.generateObjects();
 		final WebLauncherLocal launcher = new WebLauncherLocal();
 		launcher.process();
-		launcher.LOGGER.info("end-configure the server & wait finish process:");
+		LOGGER.info("end-configure the server & wait finish process:");
 		Thread.currentThread().join();
-		launcher.LOGGER.info("STOP the REST server:");
+		LOGGER.info("STOP the REST server:");
 	}
 
 	@Override

back/src/org/kar/karusic/internal/Log.java

@@ -1,60 +0,0 @@
-package org.kar.karusic.internal;
-
-//import io.scenarium.logger.LogLevel;
-//import io.scenarium.logger.Logger;
-
-public class Log {
-	// private static final String LIB_NAME = "logger";
-	// private static final String LIB_NAME_DRAW = Logger.getDrawableName(LIB_NAME);
-	// private static final boolean PRINT_CRITICAL = Logger.getNeedPrint(LIB_NAME, LogLevel.CRITICAL);
-	// private static final boolean PRINT_ERROR = Logger.getNeedPrint(LIB_NAME, LogLevel.ERROR);
-	// private static final boolean PRINT_WARNING = Logger.getNeedPrint(LIB_NAME, LogLevel.WARNING);
-	// private static final boolean PRINT_INFO = Logger.getNeedPrint(LIB_NAME, LogLevel.INFO);
-	// private static final boolean PRINT_DEBUG = Logger.getNeedPrint(LIB_NAME, LogLevel.DEBUG);
-	// private static final boolean PRINT_VERBOSE = Logger.getNeedPrint(LIB_NAME, LogLevel.VERBOSE);
-	// private static final boolean PRINT_TODO = Logger.getNeedPrint(LIB_NAME, LogLevel.TODO);
-	// private static final boolean PRINT_PRINT = Logger.getNeedPrint(LIB_NAME, LogLevel.PRINT);
-	//
-	// private Log() {}
-	//
-	// public static void print(String data) {
-	// if (PRINT_PRINT)
-	// Logger.print(LIB_NAME_DRAW, data);
-	// }
-	//
-	// public static void todo(String data) {
-	// if (PRINT_TODO)
-	// Logger.todo(LIB_NAME_DRAW, data);
-	// }
-	//
-	// public static void critical(String data) {
-	// if (PRINT_CRITICAL)
-	// Logger.critical(LIB_NAME_DRAW, data);
-	// }
-	//
-	// public static void error(String data) {
-	// if (PRINT_ERROR)
-	// Logger.error(LIB_NAME_DRAW, data);
-	// }
-	//
-	// public static void warning(String data) {
-	// if (PRINT_WARNING)
-	// Logger.warning(LIB_NAME_DRAW, data);
-	// }
-	//
-	// public static void info(String data) {
-	// if (PRINT_INFO)
-	// Logger.info(LIB_NAME_DRAW, data);
-	// }
-	//
-	// public static void debug(String data) {
-	// if (PRINT_DEBUG)
-	// Logger.debug(LIB_NAME_DRAW, data);
-	// }
-	//
-	// public static void verbose(String data) {
-	// if (PRINT_VERBOSE)
-	// Logger.verbose(LIB_NAME_DRAW, data);
-	// }
-
-}

back/src/org/kar/karusic/migration/Initialization.java

@@ -2,10 +2,22 @@ package org.kar.karusic.migration;
 
 import java.util.List;
 
+import org.kar.archidata.api.DataResource;
+import org.kar.archidata.api.ProxyResource;
 import org.kar.archidata.dataAccess.DBAccess;
+import org.kar.archidata.externalRestApi.AnalyzeApi;
+import org.kar.archidata.externalRestApi.TsGenerateApi;
 import org.kar.archidata.migration.MigrationSqlStep;
 import org.kar.archidata.model.Data;
 import org.kar.archidata.model.User;
+import org.kar.karusic.api.AlbumResource;
+import org.kar.karusic.api.ArtistResource;
+import org.kar.karusic.api.Front;
+import org.kar.karusic.api.GenderResource;
+import org.kar.karusic.api.HealthCheck;
+import org.kar.karusic.api.PlaylistResource;
+import org.kar.karusic.api.TrackResource;
+import org.kar.karusic.api.UserResource;
 import org.kar.karusic.model.Album;
 import org.kar.karusic.model.Artist;
 import org.kar.karusic.model.Gender;
@@ -25,14 +37,20 @@ public class Initialization extends MigrationSqlStep {
 		return "Initialization";
 	}
 
-	public Initialization() {
-
+	public static void generateObjects() throws Exception {
+		LOGGER.info("Generate APIs");
+		final List<Class<?>> listOfResources = List.of(AlbumResource.class, ArtistResource.class, Front.class, GenderResource.class, HealthCheck.class, PlaylistResource.class, UserResource.class,
+				TrackResource.class, DataResource.class, ProxyResource.class);
+		final AnalyzeApi api = new AnalyzeApi();
+		api.addAllApi(listOfResources);
+		TsGenerateApi.generateApi(api, "../front/src/back-api/");
+		LOGGER.info("Generate APIs (DONE)");
 	}
 
 	@Override
 	public void generateStep() throws Exception {
-		for (final Class<?> elem : CLASSES_BASE) {
-			addClass(elem);
+		for (final Class<?> clazz : CLASSES_BASE) {
+			addClass(clazz);
 		}
 
 		addAction((final DBAccess da) -> {
@@ -63,6 +81,7 @@ public class Initialization extends MigrationSqlStep {
 					new Gender(24L, "Bande Originale"), //
 					new Gender(25L, "Variété Belge"), //
 					new Gender(26L, "Gospel"));
+			da.insertMultiple(data);
 		});
 		// set start increment element to permit to add after default elements
 		addAction("""

back/src/org/kar/karusic/model/Album.java

@@ -6,7 +6,7 @@ import java.util.List;
 import org.bson.types.ObjectId;
 import org.kar.archidata.annotation.DataIfNotExists;
 import org.kar.archidata.annotation.DataJson;
-import org.kar.archidata.dataAccess.options.CheckJPA;
+import org.kar.archidata.checker.CheckJPA;
 import org.kar.archidata.model.Data;
 import org.kar.archidata.model.GenericDataSoftDelete;
 

back/src/org/kar/karusic/model/Artist.java

@@ -6,7 +6,7 @@ import java.util.List;
 import org.bson.types.ObjectId;
 import org.kar.archidata.annotation.DataIfNotExists;
 import org.kar.archidata.annotation.DataJson;
-import org.kar.archidata.dataAccess.options.CheckJPA;
+import org.kar.archidata.checker.CheckJPA;
 import org.kar.archidata.model.Data;
 import org.kar.archidata.model.GenericDataSoftDelete;
 

back/src/org/kar/karusic/model/Gender.java

@@ -17,7 +17,7 @@ import java.util.List;
 import org.bson.types.ObjectId;
 import org.kar.archidata.annotation.DataIfNotExists;
 import org.kar.archidata.annotation.DataJson;
-import org.kar.archidata.dataAccess.options.CheckJPA;
+import org.kar.archidata.checker.CheckJPA;
 import org.kar.archidata.model.Data;
 import org.kar.archidata.model.GenericDataSoftDelete;
 

back/src/org/kar/karusic/model/Playlist.java

@@ -17,7 +17,7 @@ import java.util.List;
 import org.bson.types.ObjectId;
 import org.kar.archidata.annotation.DataIfNotExists;
 import org.kar.archidata.annotation.DataJson;
-import org.kar.archidata.dataAccess.options.CheckJPA;
+import org.kar.archidata.checker.CheckJPA;
 import org.kar.archidata.model.Data;
 import org.kar.archidata.model.GenericDataSoftDelete;
 

back/src/org/kar/karusic/model/Track.java

@@ -17,7 +17,7 @@ import java.util.List;
 import org.bson.types.ObjectId;
 import org.kar.archidata.annotation.DataIfNotExists;
 import org.kar.archidata.annotation.DataJson;
-import org.kar.archidata.dataAccess.options.CheckJPA;
+import org.kar.archidata.checker.CheckJPA;
 import org.kar.archidata.model.Data;
 import org.kar.archidata.model.GenericDataSoftDelete;
 

back/src/resources/logback.xml

@@ -1,18 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <configuration>
-    <appender name="CONSOLE" class="ch.qos.logback.core.ConsoleAppender">
-        <encoder>
-            <pattern>
-                %d{HH:mm:ss.SSS} [%thread] %highlight(%-5level) %logger - %msg%n
-            </pattern>
-            <!--
-            <pattern>
-                %d{HH:mm:ss.SSS} | %thread | %highlight(%-5level) | %logger - %msg%n
-            </pattern>
-            -->
-        </encoder>
-    </appender>
-
-    <root level="info">
-        <appender-ref ref="CONSOLE" />
-    </root>
-</configuration>
+    <!-- environment detection (defaut: dev) -->
+    <property name="LOG_LEVEL_ENV" value="${LOG_LEVEL:-dev}" />
+    <!-- Appender for development -->
+    <if condition="property(&quot;LOG_LEVEL_ENV&quot;).equals(&quot;dev&quot;)">
+        <then>
+            <appender name="CONSOLE" class="ch.qos.logback.core.ConsoleAppender">
+                <encoder>
+                    <pattern>%green(%d{HH:mm:ss.SSS}) %highlight(%-5level) %-30((%file:%line\)): %msg%n</pattern>
+                </encoder>
+            </appender>
+            <logger name="org.kar.karusic" level="TRACE" />
+            <logger name="org.kar.archidata" level="DEBUG" />
+            <root level="INFO">
+                <appender-ref ref="CONSOLE" />
+            </root>
+        </then>
+    </if>
+    <!-- Appender for production -->
+    <if condition="property(&quot;LOG_LEVEL_ENV&quot;).matches(&quot;^prod.*&quot;)">
+        <then>
+            <appender name="CONSOLE" class="ch.qos.logback.core.ConsoleAppender">
+                <encoder>
+                    <pattern>[%thread] %level %logger - %msg%n</pattern>
+                </encoder>
+            </appender>
+            <root level="INFO">
+                <appender-ref ref="CONSOLE" />
+            </root>
+        </then>
+    </if>
+    <if condition="property(&quot;LOG_LEVEL_ENV&quot;).equals(&quot;prod-debug&quot;)">
+        <then>
+            <logger name="org.kar.karusic" level="DEBUG" />
+        </then>
+    </if>
+    <if condition="property(&quot;LOG_LEVEL_ENV&quot;).equals(&quot;prod-trace&quot;)">
+        <then>
+            <logger name="org.kar.karusic" level="TRACE" />
+            <logger name="org.kar.archidata" level="DEBUG" />
+        </then>
+    </if>
+    <if condition="property(&quot;LOG_LEVEL_ENV&quot;).equals(&quot;prod-trace-full&quot;)">
+        <then>
+            <logger name="org.kar.karusic" level="TRACE" />
+            <logger name="org.kar.archidata" level="TRACE" />
+        </then>
+    </if>
+</configuration>

back/src/resources/simplelogger.properties

@@ -1,42 +0,0 @@
-# SLF4J's SimpleLogger configuration file
-# Simple implementation of Logger that sends all enabled log messages, for all defined loggers, to System.err.
-# Default logging detail level for all instances of SimpleLogger.
-# Must be one of ("trace", "debug", "info", "warn", or "error").
-# If not specified, defaults to "info".
-org.slf4j.simpleLogger.defaultLogLevel=INFO
-
-# Logging detail level for a SimpleLogger instance named "xxxxx".
-# Must be one of ("trace", "debug", "info", "warn", or "error").
-# If not specified, the default logging detail level is used.
-#org.slf4j.simpleLogger.log.xxxxx=
-org.slf4j.simpleLogger.log.org.kar.archidata=TRACE
-org.slf4j.simpleLogger.log.org.kar.karusic=TRACE
-
-# Set to true if you want the current date and time to be included in output messages.
-# Default is false, and will output the number of milliseconds elapsed since startup.
-#org.slf4j.simpleLogger.showDateTime=false
-
-# The date and time format to be used in the output messages.
-# The pattern describing the date and time format is the same that is used in java.text.SimpleDateFormat.
-# If the format is not specified or is invalid, the default format is used.
-# The default format is yyyy-MM-dd HH:mm:ss:SSS Z.
-#org.slf4j.simpleLogger.dateTimeFormat=yyyy-MM-dd HH:mm:ss:SSS Z
-
-# Set to true if you want to output the current thread name.
-# Defaults to true.
-org.slf4j.simpleLogger.showThreadName=true
-
-# Set to true if you want the Logger instance name to be included in output messages.
-# Defaults to true.
-#org.slf4j.simpleLogger.showLogName=true
-
-# Set to true if you want the last component of the name to be included in output messages.
-# Defaults to false.
-#org.slf4j.simpleLogger.showShortLogName=false
-
-# Utilise les codes ANSI pour la couleur
-org.slf4j.simpleLogger.warnColor=\u001B[33m
-org.slf4j.simpleLogger.errorColor=\u001B[31m
-org.slf4j.simpleLogger.infoColor=\u001B[32m
-org.slf4j.simpleLogger.debugColor=\u001B[34m
-

back/test/src/test/kar/karusic/ConfigureDb.java

@@ -35,6 +35,10 @@ public class ConfigureDb {
 		if (modeTestForced != null) {
 			modeTest = modeTestForced;
 		}
+		// for local test:
+		ConfigBaseVariable.apiAdress = "http://127.0.0.1:12342/test/api/";
+		// Enable the test mode permit to access to the test token (never use it in production).
+		ConfigBaseVariable.testMode = "true";
 		final List<Class<?>> listObject = List.of( //
 				Album.class, //
 				Artist.class, //

back/test/src/test/kar/karusic/TestBase.java

@@ -25,8 +25,6 @@ public class TestBase {
 		ConfigureDb.configure();
 		LOGGER.info("configure server ...");
 		webInterface = new WebLauncherTest();
-		LOGGER.info("Clean previous table");
-
 		LOGGER.info("Start REST (BEGIN)");
 		webInterface.process();
 		LOGGER.info("Start REST (DONE)");

front/.storybook/preview.tsx

@@ -4,23 +4,11 @@ import { Box } from '@chakra-ui/react';
 import { ChakraProvider } from '@chakra-ui/react';
 import { MemoryRouter } from 'react-router-dom';
 
-import theme from '../src/theme';
-
-// .storybook/preview.js
-export const parameters = {
-  options: {
-    storySort: {
-      order: ['StyleGuide', 'Components', 'Fields', 'App Layout'],
-    },
-  },
-  actions: {},
-  layout: 'fullscreen',
-  backgrounds: { disable: true, grid: { disable: true } },
-  chakra: {
-    theme,
-  },
-};
+import { ColorModeProvider } from '../src/components/ui/color-mode';
+import { Toaster } from '../src/components/ui/toaster';
+import { systemTheme } from '../src/theme/theme';
 
+// .
 const DocumentationWrapper = ({ children }) => {
   return (
     <Box id="start-ui-storybook-wrapper" p="4" pb="8" flex="1">
@@ -31,13 +19,16 @@ const DocumentationWrapper = ({ children }) => {
 
 export const decorators = [
   (Story, context) => (
-    <ChakraProvider theme={theme}>
-      {/* Using MemoryRouter to avoid route clashing with Storybook */}
-      <MemoryRouter>
-        <DocumentationWrapper>
-          <Story {...context} />
-        </DocumentationWrapper>
-      </MemoryRouter>
-    </ChakraProvider>
+    <ColorModeProvider>
+      <ChakraProvider value={systemTheme}>
+        {/* Using MemoryRouter to avoid route clashing with Storybook */}
+        <MemoryRouter>
+          <DocumentationWrapper>
+            <Story {...context} />
+          </DocumentationWrapper>
+        </MemoryRouter>
+        <Toaster />
+      </ChakraProvider>
+    </ColorModeProvider>
   ),
 ];

front/app-build.json

@@ -1,6 +0,0 @@
-{
-  "display": "2025-01-06",
-  "version": "0.0.1-dev\n - 2025-01-06T00:49:52+01:00",
-  "commit": "0.0.1-dev\n",
-  "date": "2025-01-06T00:49:52+01:00"
-}

front/build.js

@@ -1,25 +0,0 @@
-const dayjs = require('dayjs');
-
-const fs = require('fs');
-
-const generateAppBuild = () => {
-  const getVersion = () => fs.readFileSync('version.txt', 'utf8');
-
-  const commit = process.env.VERCEL_GIT_COMMIT_SHA
-    ? process.env.VERCEL_GIT_COMMIT_SHA
-    : getVersion();
-
-  const appBuildContent = {
-    display: `${dayjs().format('YYYY-MM-DD')}`,
-    version: `${commit} - ${dayjs().format()}`,
-    commit,
-    date: dayjs().format(),
-  };
-
-  fs.writeFileSync(
-    './app-build.json',
-    JSON.stringify(appBuildContent, null, 2)
-  );
-};
-
-generateAppBuild();

front/knip.ts

@@ -3,16 +3,7 @@ import type { KnipConfig } from 'knip';
 const config: KnipConfig = {
   // Ignoring mostly shell binaries
   ignoreBinaries: ['export', 'sleep'],
-  ignore: [
-    // Related to tests
-    'tests/**',
-    '**.conf.js',
-    'steps.d.ts',
-    'steps_file.js',
-    'env_ci/codecept.conf.js',
-    // Generic components are useful.
-    'src/components/**',
-  ],
+  ignore: [],
 };
 
 export default config;

front/package.json

@@ -12,12 +12,13 @@
     "node": ">=20"
   },
   "scripts": {
-    "update_packages": "ncu --upgrade",
+    "update_packages": "ncu --target minor",
+    "upgrade_packages": "ncu --upgrade ",
     "install_dependency": "pnpm install",
     "test": "vitest run",
     "test:watch": "vitest watch",
     "build": "tsc && vite build",
-    "static:build": "node build.js && pnpm build",
+    "static:build": "pnpm build",
     "dev": "vite",
     "pretty": "prettier -w .",
     "lint": "pnpm tsc --noEmit",
@@ -28,84 +29,63 @@
     "*.{ts,tsx,js,jsx,json}": "prettier --write"
   },
   "dependencies": {
-    "@chakra-ui/anatomy": "2.2.2",
-    "@chakra-ui/cli": "2.4.1",
-    "@chakra-ui/react": "2.8.2",
-    "@chakra-ui/theme-tools": "2.2.6",
-    "@dnd-kit/core": "6.3.1",
-    "@dnd-kit/modifiers": "9.0.0",
-    "@dnd-kit/sortable": "10.0.0",
-    "@dnd-kit/utilities": "3.2.2",
+    "@trivago/prettier-plugin-sort-imports": "5.2.2",
+    "@chakra-ui/cli": "3.7.0",
+    "@chakra-ui/react": "3.7.0",
     "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
-    "@formiz/core": "2.4.5",
-    "@formiz/validations": "2.0.1",
     "allotment": "1.20.2",
     "css-mediaquery": "0.1.2",
     "dayjs": "1.11.13",
     "history": "5.3.0",
-    "react": "18.3.1",
-    "react-color-palette": "7.3.0",
-    "react-currency-input-field": "3.9.0",
-    "react-custom-scrollbars": "4.2.1",
-    "react-day-picker": "9.5.0",
-    "react-dom": "18.3.1",
-    "react-error-boundary": "4.0.13",
-    "react-focus-lock": "2.13.2",
-    "react-icons": "5.3.0",
-    "react-popper": "2.3.0",
-    "react-router-dom": "6.26.2",
-    "react-select": "5.9.0",
-    "react-simple-keyboard": "3.8.33",
-    "react-sticky-el": "2.1.1",
+    "next-themes": "^0.4.4",
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1",
+    "react-error-boundary": "5.0.0",
+    "react-icons": "5.4.0",
+    "react-router-dom": "7.1.5",
+    "react-select": "5.10.0",
     "react-use": "17.6.0",
-    "react-use-draggable-scroll": "0.4.7",
-    "react-virtuoso": "4.12.3",
-    "ts-pattern": "5.6.0",
-    "uuid": "11.0.4",
     "zod": "3.24.1",
-    "zustand": "5.0.2"
+    "zustand": "5.0.3"
   },
   "devDependencies": {
-    "@chakra-ui/styled-system": "2.12.0",
-    "@playwright/test": "1.49.1",
-    "@storybook/addon-actions": "8.4.7",
-    "@storybook/addon-essentials": "8.4.7",
-    "@storybook/addon-links": "8.4.7",
-    "@storybook/addon-mdx-gfm": "8.4.7",
-    "@storybook/react": "8.4.7",
-    "@storybook/react-vite": "8.4.7",
-    "@storybook/theming": "8.4.7",
+    "@chakra-ui/styled-system": "^2.12.0",
+    "@playwright/test": "1.50.1",
+    "@storybook/addon-actions": "8.5.4",
+    "@storybook/addon-essentials": "8.5.4",
+    "@storybook/addon-links": "8.5.4",
+    "@storybook/addon-mdx-gfm": "8.5.4",
+    "@storybook/react": "8.5.4",
+    "@storybook/react-vite": "8.5.4",
+    "@storybook/theming": "8.5.4",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.1.0",
-    "@testing-library/user-event": "14.5.2",
-    "@trivago/prettier-plugin-sort-imports": "5.2.1",
+    "@testing-library/react": "16.2.0",
+    "@testing-library/user-event": "14.6.1",
+    "@trivago/prettier-plugin-sort-imports": "5.2.2",
     "@types/jest": "29.5.14",
-    "@types/node": "22.10.5",
-    "@types/react": "18.3.8",
-    "@types/react-dom": "18.3.0",
-    "@types/react-sticky-el": "1.0.7",
-    "@typescript-eslint/eslint-plugin": "8.19.0",
-    "@typescript-eslint/parser": "8.19.0",
+    "@types/node": "22.13.1",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
+    "@typescript-eslint/eslint-plugin": "8.24.0",
+    "@typescript-eslint/parser": "8.24.0",
     "@vitejs/plugin-react": "4.3.4",
-    "eslint": "9.17.0",
-    "eslint-plugin-codeceptjs": "1.3.0",
+    "eslint": "9.20.1",
     "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-react": "7.37.3",
+    "eslint-plugin-react": "7.37.4",
     "eslint-plugin-react-hooks": "5.1.0",
     "eslint-plugin-storybook": "0.11.2",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "knip": "5.41.1",
-    "lint-staged": "15.3.0",
-    "npm-check-updates": "^17.1.13",
-    "prettier": "3.4.2",
-    "puppeteer": "23.11.1",
+    "knip": "5.44.0",
+    "lint-staged": "15.4.3",
+    "npm-check-updates": "^17.1.14",
+    "prettier": "3.5.0",
+    "puppeteer": "24.2.0",
     "react-is": "19.0.0",
-    "storybook": "8.4.7",
+    "storybook": "8.5.4",
     "ts-node": "10.9.2",
-    "typescript": "5.7.2",
-    "vite": "6.0.7",
-    "vitest": "2.1.8"
+    "typescript": "5.7.3",
+    "vite": "6.1.0",
+    "vitest": "3.0.5"
   }
 }

front/src/App.tsx

@@ -1,117 +1,19 @@
-import { useState } from 'react';
+import { ErrorBoundary } from '@/errors/ErrorBoundary';
 
-import { ChakraProvider, Select } from '@chakra-ui/react';
-import {
-  Box,
-  Button,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Stack,
-  Text,
-  useDisclosure,
-} from '@chakra-ui/react';
-
-import { environment } from '@/environment';
-import { App as SpaApp } from '@/scene/App';
-import { USERS } from '@/service/session';
-import theme from '@/theme';
-import { hashLocalData } from '@/utils/sso';
-
-const AppEnvHint = () => {
-  const modal = useDisclosure();
-  const [selectUserTest, setSelectUserTest] = useState<string>('NO_USER');
-  //const setUser = useRightsStore((store) => store.setUser);
-  const buildEnv =
-    process.env.NODE_ENV === 'development'
-      ? 'Development'
-      : import.meta.env.VITE_DEV_ENV_NAME;
-  const envName: Array<string> = [];
-  !!buildEnv && envName.push(buildEnv);
-  if (!envName.length) {
-    return null;
-  }
-  const handleChange = (selectedOption) => {
-    console.log(`SELECT: [${selectedOption.target.value}]`);
-    setSelectUserTest(selectedOption.target.value);
-  };
-  const onClose = () => {
-    modal.onClose();
-    if (selectUserTest == 'NO_USER') {
-      window.location.href = `/${environment.applName}/sso/${hashLocalData()}/false/__LOGOUT__`;
-    } else {
-      window.location.href = `/${environment.applName}/sso/${hashLocalData()}/true/${USERS[selectUserTest]}`;
-    }
-  };
+import { AudioPlayer } from './components';
+import { EnvDevelopment } from './components/EnvDevelopment/EnvDevelopment';
+import { AppRoutes } from './scene/AppRoutes';
+import { ServiceContextProvider } from './service/ServiceContext';
 
+export const App = () => {
   return (
-    <>
-      <Box
-        zIndex="100000"
-        position="fixed"
-        top="0"
-        insetStart="0"
-        insetEnd="0"
-        h="2px"
-        bg="warning.400"
-        as="button"
-        cursor="pointer"
-        data-test-id="devtools"
-        onClick={modal.onOpen}
-      >
-        <Text
-          position="fixed"
-          top="0"
-          insetStart="4"
-          bg="warning.400"
-          color="warning.900"
-          fontSize="0.6rem"
-          fontWeight="bold"
-          px="10px"
-          marginLeft="25%"
-          borderBottomStartRadius="sm"
-          borderBottomEndRadius="sm"
-          textTransform="uppercase"
-        >
-          {envName.join(' : ')}
-        </Text>
-      </Box>
-      <Modal isOpen={modal.isOpen} onClose={modal.onClose}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Outils développeurs</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <Stack>
-              <Text>Utilisateur</Text>
-              <Select placeholder="Select test user" onChange={handleChange}>
-                {Object.keys(USERS).map((key) => (
-                  <option value={key} key={key}>
-                    {key}
-                  </option>
-                ))}
-              </Select>
-            </Stack>
-          </ModalBody>
-          <ModalFooter>
-            <Button onClick={onClose}>Apply</Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  );
-};
-
-const App = () => {
-  return (
-    <ChakraProvider theme={theme}>
-      <AppEnvHint />
-      <SpaApp />
-    </ChakraProvider>
+    <ServiceContextProvider>
+      <EnvDevelopment />
+      <ErrorBoundary>
+        <AppRoutes />
+      </ErrorBoundary>
+      <AudioPlayer />
+    </ServiceContextProvider>
   );
 };
 

front/src/assets/images/404.svg

@@ -1,72 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   stroke="currentColor"
-   fill="currentColor"
-   stroke-width="0"
-   viewBox="0 0 24 24"
-   height="250px"
-   width="250px"
-   version="1.1"
-   id="svg2"
-   sodipodi:docname="404.svg"
-   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="namedview2"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     showgrid="true"
-     inkscape:zoom="3.448"
-     inkscape:cx="134.28074"
-     inkscape:cy="125"
-     inkscape:window-width="1918"
-     inkscape:window-height="1044"
-     inkscape:window-x="0"
-     inkscape:window-y="17"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2">
-    <inkscape:grid
-       id="grid2"
-       units="px"
-       originx="0"
-       originy="0"
-       spacingx="0.096"
-       spacingy="0.096"
-       empcolor="#0099e5"
-       empopacity="0.30196078"
-       color="#0099e5"
-       opacity="0.14901961"
-       empspacing="5"
-       dotted="false"
-       gridanglex="30"
-       gridanglez="30"
-       visible="true" />
-  </sodipodi:namedview>
-  <path
-     fill="none"
-     d="M0 0h24v24H0z"
-     id="path1" />
-  <path
-     d="M13 10h5l3-3-3-3h-5V2h-2v2H4v6h7v2H6l-3 3 3 3h5v4h2v-4h7v-6h-7z"
-     id="path2" />
-  <path
-     id="rect2"
-     style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.384;stroke-linecap:square"
-     d="M 17.394219,5.0400499 19.459554,6.9903325 17.438107,9.0722051 4.9259029,9.0569946 4.9284452,5.0338374 Z"
-     sodipodi:nodetypes="cccccc" />
-  <path
-     id="rect2-3"
-     style="fill:#f8fefb;fill-opacity:1;stroke:none;stroke-width:0.384;stroke-linecap:square"
-     d="m 6.5757719,13.021525 -2.065335,1.950283 2.021447,2.081873 12.5122061,-0.01521 -0.0025,-4.023157 z"
-     sodipodi:nodetypes="cccccc" />
-</svg>

front/src/back-api/model/album.ts

@@ -8,7 +8,7 @@ import {ZodLocalDate} from "./local-date";
 import {ZodGenericDataSoftDelete, ZodGenericDataSoftDeleteWrite } from "./generic-data-soft-delete";
 
 export const ZodAlbum = ZodGenericDataSoftDelete.extend({
-	name: zod.string().max(256).optional(),
+	name: zod.string().optional(),
 	description: zod.string().optional(),
 	/**
 	 * List of Id of the specific covers
@@ -30,7 +30,7 @@ export function isAlbum(data: any): data is Album {
 	}
 }
 export const ZodAlbumWrite = ZodGenericDataSoftDeleteWrite.extend({
-	name: zod.string().max(256).nullable().optional(),
+	name: zod.string().nullable().optional(),
 	description: zod.string().nullable().optional(),
 	/**
 	 * List of Id of the specific covers

front/src/back-api/model/artist.ts

@@ -8,14 +8,14 @@ import {ZodLocalDate} from "./local-date";
 import {ZodGenericDataSoftDelete, ZodGenericDataSoftDeleteWrite } from "./generic-data-soft-delete";
 
 export const ZodArtist = ZodGenericDataSoftDelete.extend({
-	name: zod.string().max(256).optional(),
+	name: zod.string().optional(),
 	description: zod.string().optional(),
 	/**
 	 * List of Id of the specific covers
 	 */
 	covers: zod.array(ZodObjectId).optional(),
-	firstName: zod.string().max(256).optional(),
-	surname: zod.string().max(256).optional(),
+	firstName: zod.string().optional(),
+	surname: zod.string().optional(),
 	birth: ZodLocalDate.optional(),
 	death: ZodLocalDate.optional(),
 
@@ -33,14 +33,14 @@ export function isArtist(data: any): data is Artist {
 	}
 }
 export const ZodArtistWrite = ZodGenericDataSoftDeleteWrite.extend({
-	name: zod.string().max(256).nullable().optional(),
+	name: zod.string().nullable().optional(),
 	description: zod.string().nullable().optional(),
 	/**
 	 * List of Id of the specific covers
 	 */
 	covers: zod.array(ZodObjectId).nullable().optional(),
-	firstName: zod.string().max(256).nullable().optional(),
-	surname: zod.string().max(256).nullable().optional(),
+	firstName: zod.string().nullable().optional(),
+	surname: zod.string().nullable().optional(),
 	birth: ZodLocalDate.nullable().optional(),
 	death: ZodLocalDate.nullable().optional(),
 

front/src/back-api/model/gender.ts

@@ -7,7 +7,7 @@ import {ZodObjectId} from "./object-id";
 import {ZodGenericDataSoftDelete, ZodGenericDataSoftDeleteWrite } from "./generic-data-soft-delete";
 
 export const ZodGender = ZodGenericDataSoftDelete.extend({
-	name: zod.string().max(256).optional(),
+	name: zod.string().optional(),
 	description: zod.string().optional(),
 	/**
 	 * List of Id of the specific covers
@@ -28,7 +28,7 @@ export function isGender(data: any): data is Gender {
 	}
 }
 export const ZodGenderWrite = ZodGenericDataSoftDeleteWrite.extend({
-	name: zod.string().max(256).nullable().optional(),
+	name: zod.string().nullable().optional(),
 	description: zod.string().nullable().optional(),
 	/**
 	 * List of Id of the specific covers

front/src/back-api/model/generic-data-soft-delete.ts

@@ -24,9 +24,7 @@ export function isGenericDataSoftDelete(data: any): data is GenericDataSoftDelet
 		return false;
 	}
 }
-export const ZodGenericDataSoftDeleteWrite = ZodGenericDataWrite.extend({
-
-});
+export const ZodGenericDataSoftDeleteWrite = ZodGenericDataWrite;
 
 export type GenericDataSoftDeleteWrite = zod.infer<typeof ZodGenericDataSoftDeleteWrite>;
 

front/src/back-api/model/generic-data.ts

@@ -25,9 +25,7 @@ export function isGenericData(data: any): data is GenericData {
 		return false;
 	}
 }
-export const ZodGenericDataWrite = ZodGenericTimingWrite.extend({
-
-});
+export const ZodGenericDataWrite = ZodGenericTimingWrite;
 
 export type GenericDataWrite = zod.infer<typeof ZodGenericDataWrite>;
 

front/src/back-api/model/playlist.ts

@@ -7,7 +7,7 @@ import {ZodObjectId} from "./object-id";
 import {ZodGenericDataSoftDelete, ZodGenericDataSoftDeleteWrite } from "./generic-data-soft-delete";
 
 export const ZodPlaylist = ZodGenericDataSoftDelete.extend({
-	name: zod.string().max(256).optional(),
+	name: zod.string().optional(),
 	description: zod.string().optional(),
 	/**
 	 * List of Id of the specific covers
@@ -29,7 +29,7 @@ export function isPlaylist(data: any): data is Playlist {
 	}
 }
 export const ZodPlaylistWrite = ZodGenericDataSoftDeleteWrite.extend({
-	name: zod.string().max(256).nullable().optional(),
+	name: zod.string().nullable().optional(),
 	description: zod.string().nullable().optional(),
 	/**
 	 * List of Id of the specific covers

front/src/back-api/model/rest-error-response.ts

@@ -3,11 +3,11 @@
  */
 import { z as zod } from "zod";
 
-import {ZodUUID} from "./uuid";
+import {ZodObjectId} from "./object-id";
 import {ZodInteger} from "./integer";
 
 export const ZodRestErrorResponse = zod.object({
-	uuid: ZodUUID.optional(),
+	oid: ZodObjectId.optional(),
 	name: zod.string(),
 	message: zod.string(),
 	time: zod.string(),

front/src/back-api/model/track.ts

@@ -8,7 +8,7 @@ import {ZodLong} from "./long";
 import {ZodGenericDataSoftDelete, ZodGenericDataSoftDeleteWrite } from "./generic-data-soft-delete";
 
 export const ZodTrack = ZodGenericDataSoftDelete.extend({
-	name: zod.string().max(256).optional(),
+	name: zod.string().optional(),
 	description: zod.string().optional(),
 	/**
 	 * List of Id of the specific covers
@@ -34,7 +34,7 @@ export function isTrack(data: any): data is Track {
 	}
 }
 export const ZodTrackWrite = ZodGenericDataSoftDeleteWrite.extend({
-	name: zod.string().max(256).nullable().optional(),
+	name: zod.string().nullable().optional(),
 	description: zod.string().nullable().optional(),
 	/**
 	 * List of Id of the specific covers

front/src/back-api/model/user-karusic.ts

@@ -5,9 +5,7 @@ import { z as zod } from "zod";
 
 import {ZodUser, ZodUserWrite } from "./user";
 
-export const ZodUserKarusic = ZodUser.extend({
-
-});
+export const ZodUserKarusic = ZodUser;
 
 export type UserKarusic = zod.infer<typeof ZodUserKarusic>;
 
@@ -20,9 +18,7 @@ export function isUserKarusic(data: any): data is UserKarusic {
 		return false;
 	}
 }
-export const ZodUserKarusicWrite = ZodUserWrite.extend({
-
-});
+export const ZodUserKarusicWrite = ZodUserWrite;
 
 export type UserKarusicWrite = zod.infer<typeof ZodUserKarusicWrite>;
 

front/src/back-api/model/user-me.ts

@@ -8,7 +8,7 @@ import {ZodPartRight} from "./part-right";
 
 export const ZodUserMe = zod.object({
 	id: ZodLong,
-	login: zod.string().max(255).optional(),
+	login: zod.string().optional(),
 	/**
 	 * Map<EntityName, Map<PartName, Right>>
 	 */

front/src/back-api/model/user.ts

@@ -10,7 +10,7 @@ import {ZodGenericDataSoftDelete, ZodGenericDataSoftDeleteWrite } from "./generi
 export const ZodUser = ZodGenericDataSoftDelete.extend({
 	login: zod.string().min(3).max(128),
 	lastConnection: ZodTimestamp.optional(),
-	blocked: zod.boolean(),
+	blocked: zod.boolean().optional(),
 	blockedReason: zod.string().max(512).optional(),
 	/**
 	 * List of Id of the specific covers
@@ -33,7 +33,7 @@ export function isUser(data: any): data is User {
 export const ZodUserWrite = ZodGenericDataSoftDeleteWrite.extend({
 	login: zod.string().min(3).max(128).optional(),
 	lastConnection: ZodTimestamp.nullable().optional(),
-	blocked: zod.boolean(),
+	blocked: zod.boolean().nullable().optional(),
 	blockedReason: zod.string().max(512).nullable().optional(),
 	/**
 	 * List of Id of the specific covers

front/src/components/AudioPlayer.tsx

@@ -1,26 +1,12 @@
-import { SyntheticEvent, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
+import { Box, Flex, IconButton, SliderTrack, Text } from '@chakra-ui/react';
 import {
-  Box,
-  Button,
-  Flex,
-  IconButton,
-  Slider,
-  SliderFilledTrack,
-  SliderThumb,
-  SliderTrack,
-  Text,
-  position,
-} from '@chakra-ui/react';
-import {
-  MdCheck,
   MdFastForward,
   MdFastRewind,
-  MdGraphicEq,
   MdLooksOne,
   MdNavigateBefore,
   MdNavigateNext,
-  MdOutlinePlayArrow,
   MdPause,
   MdPlayArrow,
   MdRepeat,
@@ -29,15 +15,17 @@ import {
   MdTrendingFlat,
 } from 'react-icons/md';
 
+import { useColorModeValue } from '@/components/ui/color-mode';
 import { useActivePlaylistService } from '@/service/ActivePlaylist';
 import { useSpecificAlbum } from '@/service/Album';
 import { useSpecificArtists } from '@/service/Artist';
 import { useSpecificGender } from '@/service/Gender';
 import { useSpecificTrack } from '@/service/Track';
 import { DataUrlAccess } from '@/utils/data-url-access';
-import { useThemeMode } from '@/utils/theme-tools';
 import { isNullOrUndefined } from '@/utils/validator';
 
+import { Slider } from './ui/slider';
+
 export enum PlayMode {
   PLAY_ONE,
   PLAY_ALL,
@@ -46,10 +34,16 @@ export enum PlayMode {
 }
 
 const playModeIcon = {
-  [PlayMode.PLAY_ONE]: <MdLooksOne size="30px" />,
-  [PlayMode.PLAY_ALL]: <MdTrendingFlat size="30px" />,
-  [PlayMode.PLAY_ONE_LOOP]: <MdRepeatOne size="30px" />,
-  [PlayMode.PLAY_ALL_LOOP]: <MdRepeat size="30px" />,
+  [PlayMode.PLAY_ONE]: <MdLooksOne style={{ width: '100%', height: '100%' }} />,
+  [PlayMode.PLAY_ALL]: (
+    <MdTrendingFlat style={{ width: '100%', height: '100%' }} />
+  ),
+  [PlayMode.PLAY_ONE_LOOP]: (
+    <MdRepeatOne style={{ width: '100%', height: '100%' }} />
+  ),
+  [PlayMode.PLAY_ALL_LOOP]: (
+    <MdRepeat style={{ width: '100%', height: '100%' }} />
+  ),
 };
 
 export type AudioPlayerProps = {};
@@ -66,7 +60,6 @@ const formatTime = (time) => {
 };
 
 export const AudioPlayer = ({}: AudioPlayerProps) => {
-  const { mode } = useThemeMode();
   const { playTrackList, trackOffset, previous, next, first } =
     useActivePlaylistService();
   const audioRef = useRef<HTMLAudioElement>(null);
@@ -89,14 +82,16 @@ export const AudioPlayer = ({}: AudioPlayerProps) => {
         : ''
     );
   }, [dataTrack, setMediaSource]);
-  const backColor = mode('back.100', 'back.800');
+  const backColor = useColorModeValue('back.100', 'back.800');
   const configButton = {
     borderRadius: 'full',
-    backgroundColor: '#00000000',
+    backgroundColor: 'transparent',
     _hover: {
-      boxShadow: 'outline-over',
       bgColor: 'brand.500',
     },
+    width: '50px',
+    height: '50px',
+    padding: '5px',
   };
 
   useEffect(() => {
@@ -209,6 +204,14 @@ export const AudioPlayer = ({}: AudioPlayerProps) => {
   const onChangeStateToPause = () => {
     setIsPlaying(false);
   };
+  const marks = () => {
+    const minutes = Math.floor(duration / 60);
+    const result: number[] = [];
+    for (let i = 1; i <= minutes; i++) {
+      result.push(60 * i);
+    }
+    return result;
+  };
   return (
     <>
       {!isNullOrUndefined(trackOffset) && (
@@ -230,23 +233,23 @@ export const AudioPlayer = ({}: AudioPlayerProps) => {
           direction="column"
         >
           <Text
-            align="left"
+            alignContent="left"
             fontSize="20px"
             fontWeight="bold"
             userSelect="none"
             marginRight="auto"
             overflow="hidden"
-            noOfLines={1}
+            // noOfLines={1}
           >
             {dataTrack?.name ?? '???'}
           </Text>
           <Text
-            align="left"
+            alignContent="left"
             fontSize="16px"
             userSelect="none"
             marginRight="auto"
             overflow="hidden"
-            noOfLines={1}
+            // noOfLines={1}
           >
             {dataArtists.map((data) => data.name).join(', ')} /{' '}
             {dataAlbum && dataAlbum?.name}
@@ -254,35 +257,36 @@ export const AudioPlayer = ({}: AudioPlayerProps) => {
           </Text>
           <Box width="full" paddingX="15px">
             <Slider
-              aria-label="slider-ex-4"
-              defaultValue={0}
-              value={timeProgress}
+              defaultValue={[0]}
+              value={[timeProgress]}
               min={0}
               max={duration}
               step={0.1}
-              onChange={onSeek}
-              focusThumbOnChange={false}
+              onValueChange={(e) => onSeek(e.value)}
+              variant="outline"
+              colorPalette="brand"
+              marks={marks()}
+              //focusCapture={false}
             >
-              <SliderTrack bg="gray.200" height="10px" borderRadius="full">
-                <SliderFilledTrack bg="brand.600" />
-              </SliderTrack>
-              <SliderThumb boxSize={6}>
-                <Box color="brand.600" as={MdGraphicEq} />
-              </SliderThumb>
+              <SliderTrack
+                bg="brand.200"
+                height="10px"
+                borderRadius="full"
+              ></SliderTrack>
             </Slider>
           </Box>
           <Flex>
             <Text
-              align="left"
+              alignContent="left"
               fontSize="16px"
               userSelect="none"
               marginRight="auto"
               overflow="hidden"
-              noOfLines={1}
+              // noOfLines={1}
             >
               {formatTime(timeProgress)}
             </Text>
-            <Text align="left" fontSize="16px" userSelect="none">
+            <Text alignContent="left" fontSize="16px" userSelect="none">
               {formatTime(duration)}
             </Text>
           </Flex>
@@ -290,53 +294,65 @@ export const AudioPlayer = ({}: AudioPlayerProps) => {
             <IconButton
               {...configButton}
               aria-label={'Play'}
-              icon={
-                isPlaying ? (
-                  <MdPause size="30px" />
-                ) : (
-                  <MdPlayArrow size="30px" />
-                )
-              }
               onClick={onPlay}
-            />
+              variant="ghost"
+            >
+              {isPlaying ? (
+                <MdPause style={{ width: '100%', height: '100%' }} />
+              ) : (
+                <MdPlayArrow style={{ width: '100%', height: '100%' }} />
+              )}
+            </IconButton>
             <IconButton
               {...configButton}
               aria-label={'Stop'}
-              icon={<MdStop size="30px" />}
               onClick={onStop}
-            />
+              variant="ghost"
+            >
+              <MdStop style={{ width: '100%', height: '100%' }} />
+            </IconButton>
             <IconButton
               {...configButton}
               aria-label={'Previous track'}
-              icon={<MdNavigateBefore size="30px" />}
               onClick={onNavigatePrevious}
               marginLeft="auto"
-            />
+              variant="ghost"
+            >
+              <MdNavigateBefore style={{ width: '100%', height: '100%' }} />{' '}
+            </IconButton>
             <IconButton
               {...configButton}
               aria-label={'jump 15sec in past'}
-              icon={<MdFastRewind size="30px" />}
               onClick={onFastRewind}
-            />
+              variant="ghost"
+            >
+              <MdFastRewind style={{ width: '100%', height: '100%' }} />
+            </IconButton>
             <IconButton
               {...configButton}
               aria-label={'jump 15sec in future'}
-              icon={<MdFastForward size="30px" />}
               onClick={onFastForward}
-            />
+              variant="ghost"
+            >
+              <MdFastForward style={{ width: '100%', height: '100%' }} />
+            </IconButton>
             <IconButton
               {...configButton}
               aria-label={'Next track'}
-              icon={<MdNavigateNext size="30px" />}
               marginRight="auto"
               onClick={onNavigateNext}
-            />
+              variant="ghost"
+            >
+              <MdNavigateNext style={{ width: '100%', height: '100%' }} />
+            </IconButton>
             <IconButton
               {...configButton}
               aria-label={'continue to the end'}
-              icon={playModeIcon[playingMode]}
               onClick={onTypePlay}
-            />
+              variant="ghost"
+            >
+              {playModeIcon[playingMode]}
+            </IconButton>
           </Flex>
         </Flex>
       )}

front/src/components/Cover.tsx

@@ -1,16 +1,17 @@
 import { ReactElement, useEffect, useState } from 'react';
 
-import { As, Box, BoxProps, Flex, StyleProps } from '@chakra-ui/react';
+import { Box, BoxProps, Flex, FlexProps } from '@chakra-ui/react';
 import { Image } from '@chakra-ui/react';
 
-import { DataUrlAccess } from '@/utils/data-url-access';
-import { Icon } from './Icon';
 import { ObjectId } from '@/back-api';
+import { DataUrlAccess } from '@/utils/data-url-access';
 
-export type CoversProps = BoxProps & {
+import { Icon } from './Icon';
+
+export type CoversProps = Omit<BoxProps, 'iconEmpty'> & {
   data?: ObjectId[];
-  size?: StyleProps["width"];
-  iconEmpty?: As;
+  size?: BoxProps['width'];
+  iconEmpty?: ReactElement;
   slideshow?: boolean;
 };
 
@@ -33,7 +34,9 @@ export const Covers = ({
       setPreviousImageIndex(currentImageIndex);
       setTopOpacity(0.0);
       setTimeout(() => {
-        setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (data?.length ?? 1));
+        setCurrentImageIndex(
+          (prevIndex) => (prevIndex + 1) % (data?.length ?? 1)
+        );
         setTopOpacity(1.0);
       }, 1500);
     }, 3000);
@@ -42,7 +45,7 @@ export const Covers = ({
 
   if (!data || data.length < 1) {
     if (iconEmpty) {
-      return <Icon icon={iconEmpty} sizeIcon={size} />;
+      return <Icon children={iconEmpty} sizeIcon={size} />;
     } else {
       return (
         <Box
@@ -60,34 +63,50 @@ export const Covers = ({
   }
   if (slideshow === false || data.length === 1) {
     const url = DataUrlAccess.getThumbnailUrl(data[0]);
-    return <Image loading="lazy" src={url} maxWidth={size} boxSize={size} {...rest} />;
+    return (
+      <Image
+        loading="lazy"
+        src={url}
+        maxWidth={size}
+        boxSize={size} /*{...rest}*/
+      />
+    );
   }
   const urlCurrent = DataUrlAccess.getThumbnailUrl(data[currentImageIndex]);
   const urlPrevious = DataUrlAccess.getThumbnailUrl(data[previousImageIndex]);
-  return <Flex position="relative" {...rest} maxWidth={size} width={size} height={size} overflow="hidden">
-    <Image
-      src={urlPrevious}
-      loading="lazy"
-      position="absolute"
-      top="0"
-      left="0"
-      width="100%"
-      height="100%"
-      zIndex={1}
-      boxSize={size}
-    />
-    <Image
-      src={urlCurrent}
-      loading="lazy"
-      position="absolute"
-      top="0"
-      left="0"
-      width="100%"
-      height="100%"
-      boxSize={size}
-      transition="opacity 0.5s ease-in-out"
-      opacity={topOpacity}
-      zIndex={2}
-    />
-  </Flex>
+  return (
+    <Flex
+      position="relative"
+      // {...rest}
+      maxWidth={size}
+      width={size}
+      height={size}
+      overflow="hidden"
+    >
+      <Image
+        src={urlPrevious}
+        loading="lazy"
+        position="absolute"
+        top="0"
+        left="0"
+        width="100%"
+        height="100%"
+        zIndex={1}
+        boxSize={size}
+      />
+      <Image
+        src={urlCurrent}
+        loading="lazy"
+        position="absolute"
+        top="0"
+        left="0"
+        width="100%"
+        height="100%"
+        boxSize={size}
+        transition="opacity 0.5s ease-in-out"
+        opacity={topOpacity}
+        zIndex={2}
+      />
+    </Flex>
+  );
 };

front/src/components/EmptyEnd.tsx

@@ -6,8 +6,8 @@ export const EmptyEnd = () => {
       width="full"
       height="25%"
       minHeight="250px"
-    // borderWidth="1px"
-    // borderColor="red"
+      // borderWidth="1px"
+      // borderColor="red"
     ></Box>
   );
 };

front/src/components/EnvDevelopment/EnvDevelopment.tsx

@@ -0,0 +1,117 @@
+import { useState } from 'react';
+
+import {
+  Box,
+  Button,
+  Dialog,
+  Select,
+  Stack,
+  Text,
+  createListCollection,
+  useDisclosure,
+} from '@chakra-ui/react';
+
+import { environment } from '@/environment';
+import { USERS } from '@/service/session';
+import { hashLocalData } from '@/utils/sso';
+
+export const USERS_COLLECTION = createListCollection({
+  items: [
+    { label: 'karadmin', value: 'adminA@666' },
+    { label: 'karuser', value: 'userA@666' },
+    { label: 'NO_USER', value: '' },
+  ],
+});
+
+export const EnvDevelopment = () => {
+  const dialog = useDisclosure();
+  const [selectUserTest, setSelectUserTest] = useState<string>('NO_USER');
+  //const setUser = useRightsStore((store) => store.setUser);
+  const buildEnv =
+    process.env.NODE_ENV === 'development'
+      ? 'Development'
+      : import.meta.env.VITE_DEV_ENV_NAME;
+  const envName: Array<string> = [];
+  !!buildEnv && envName.push(buildEnv);
+  if (!envName.length) {
+    return null;
+  }
+  const handleChange = (selectedOption) => {
+    console.log(`SELECT: [${selectedOption.target.value}]`);
+    setSelectUserTest(selectedOption.target.value);
+  };
+  const onClose = () => {
+    dialog.onClose();
+    if (selectUserTest == 'NO_USER') {
+      window.location.href = `/${environment.applName}/sso/${hashLocalData()}/false/__LOGOUT__`;
+    } else {
+      window.location.href = `/${environment.applName}/sso/${hashLocalData()}/true/${USERS[selectUserTest]}`;
+    }
+  };
+
+  return (
+    <>
+      <Box
+        as="button"
+        zIndex="100000"
+        position="fixed"
+        top="0"
+        insetStart="0"
+        insetEnd="0"
+        h="2px"
+        bg="warning.400"
+        cursor="pointer"
+        data-test-id="devtools"
+        onClick={dialog.onOpen}
+      >
+        <Text
+          position="fixed"
+          top="0"
+          insetStart="4"
+          bg="warning.400"
+          color="warning.900"
+          fontSize="0.6rem"
+          fontWeight="bold"
+          px="10px"
+          marginLeft="25%"
+          borderBottomStartRadius="sm"
+          borderBottomEndRadius="sm"
+          textTransform="uppercase"
+        >
+          {envName.join(' : ')}
+        </Text>
+      </Box>
+      <Dialog.Root open={dialog.open} onOpenChange={dialog.onClose}>
+        <Dialog.Positioner>
+          <Dialog.Backdrop />
+          <Dialog.Content>
+            <Dialog.Header>Outils développeurs</Dialog.Header>
+            <Dialog.Body>
+              <Stack>
+                <Text>User</Text>
+                <Select.Root
+                  onChange={handleChange}
+                  collection={USERS_COLLECTION}
+                >
+                  <Select.Trigger>
+                    <Select.ValueText placeholder="Select test user" />
+                  </Select.Trigger>
+                  <Select.Content>
+                    {USERS_COLLECTION.items.map((value) => (
+                      <Select.Item item={value} key={value.value}>
+                        {value.label}
+                      </Select.Item>
+                    ))}
+                  </Select.Content>
+                </Select.Root>
+              </Stack>
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Button onClick={onClose}>Close</Button>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Dialog.Root>
+    </>
+  );
+};

front/src/components/Icon.tsx

@@ -1,42 +1,40 @@
-import {
-    As,
-    Box,
-    BoxProps,
-    Icon as ChakraIcon,
-    IconProps as ChakraIconProps,
-    Flex,
-    FlexProps,
-    forwardRef,
-    LayoutProps,
-} from '@chakra-ui/react';
+import { ReactNode, forwardRef } from 'react';
+
+import { Box, Flex, FlexProps } from '@chakra-ui/react';
 
 export type IconProps = FlexProps & {
-    icon: As;
-    color?: string;
-    sizeIcon?: LayoutProps['width'];
+  children: ReactNode;
+  color?: string;
+  sizeIcon?: FlexProps['width'];
 };
 
-export const Icon = forwardRef<IconProps, 'span'>(
-    ({ icon: IconEl, color, sizeIcon = '1em', ...rest }, ref) => {
-        return (
-            <Flex flex="none"
-                minWidth={sizeIcon}
-                minHeight={sizeIcon}
-                maxWidth={sizeIcon}
-                maxHeight={sizeIcon}
-                align="center"
-                padding="1px"
-                ref={ref}
-                {...rest}>
-                <Box
-                    marginX="auto"
-                    as={IconEl}
-                    width="100%"
-                    minWidth="100%"
-                    height="100%"
-                    color={color}
-                />
-            </Flex>
-        );
-    }
-);
+export const Icon = forwardRef<HTMLDivElement, IconProps>(
+  ({ children, color, sizeIcon = '1em', ...rest }, ref) => {
+    return (
+      <Flex
+        flex="none"
+        minWidth={sizeIcon}
+        minHeight={sizeIcon}
+        maxWidth={sizeIcon}
+        maxHeight={sizeIcon}
+        align="center"
+        padding="1px"
+        ref={ref}
+        {...rest}
+      >
+        <Box
+          marginX="auto"
+          width="100%"
+          minWidth="100%"
+          height="100%"
+          color={color}
+          asChild
+        >
+          {children}
+        </Box>
+      </Flex>
+    );
+  }
+);
+
+Icon.displayName = 'Icon';

front/src/components/Layout/PageLayout.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode, useEffect } from 'react';
 import { Flex, Image } from '@chakra-ui/react';
 import { useLocation } from 'react-router-dom';
 
-import background from '@/assets/images/ikon.svg';
+import ikon from '@/assets/images/ikon.svg';
 import { TOP_BAR_HEIGHT } from '@/components/TopBar/TopBar';
 
 export type LayoutProps = React.PropsWithChildren<unknown> & {
@@ -28,9 +28,9 @@ export const PageLayout = ({ children }: LayoutProps) => {
         left={0}
         right={0}
         minWidth="300px"
-        zIndex={-1}
+        zIndex={0}
       >
-        <Image src={background} boxSize="90%" margin="auto" opacity="30%" />
+        <Image src={ikon} boxSize="90vh" margin="auto" />
       </Flex>
       <Flex
         direction="column"

front/src/components/Layout/PageLayoutInfoCenter.tsx

@@ -1,11 +1,11 @@
-import React, { ReactNode, useEffect } from 'react';
+import { ReactNode, useEffect } from 'react';
 
 import { Flex, FlexProps } from '@chakra-ui/react';
 import { useLocation } from 'react-router-dom';
 
 import { PageLayout } from '@/components/Layout/PageLayout';
-import { colors } from '@/theme/foundations/colors';
-import { useThemeMode } from '@/utils/theme-tools';
+import { useColorModeValue } from '@/components/ui/color-mode';
+import { colors } from '@/theme/colors';
 
 export type LayoutProps = FlexProps & {
   children: ReactNode;
@@ -22,7 +22,6 @@ export const PageLayoutInfoCenter = ({
     window.scrollTo(0, 0);
   }, [pathname]);
 
-  const { mode } = useThemeMode();
   return (
     <PageLayout>
       <Flex
@@ -34,7 +33,7 @@ export const PageLayoutInfoCenter = ({
         borderRadius="8px"
         padding="10px"
         boxShadow={'0px 0px 16px ' + colors.back[900]}
-        backgroundColor={mode('#FFFFFF', '#000000')}
+        backgroundColor={useColorModeValue('#FFFFFF', '#000000')}
         {...rest}
       >
         {children}

front/src/components/ParameterLayout/ParameterLayout.ts

@@ -0,0 +1,20 @@
+export {
+  ParameterLayoutContent as Content,
+  type ParameterLayoutContentProps as ContentProps,
+} from './ParameterLayoutContent';
+export {
+  ParameterLayoutFooter as Footer,
+  type ParameterLayoutFooterProps as FooterProps,
+} from './ParameterLayoutFooter';
+export {
+  ParameterLayoutHeader as Header,
+  type ParameterLayoutHeaderProps as HeaderProps,
+} from './ParameterLayoutHeader';
+export {
+  ParameterLayoutHeaderBase as HeaderBase,
+  type ParameterLayoutHeaderBaseProps as HeaderBaseProps,
+} from './ParameterLayoutHeaderBase';
+export {
+  ParameterLayoutRoot as Root,
+  type ParameterLayoutRootProps as RootProps,
+} from './ParameterLayoutRoot';

front/src/components/ParameterLayout/ParameterLayoutContent.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+
+import { Flex } from '@chakra-ui/react';
+
+export type ParameterLayoutContentProps = {
+  children?: ReactNode;
+};
+
+export const ParameterLayoutContent = ({
+  children,
+}: ParameterLayoutContentProps) => {
+  return (
+    <Flex
+      direction="column"
+      width="full"
+      borderY="1px solid black"
+      paddingY="15px"
+      paddingX="25px"
+      minHeight="10px"
+      background="gray.700"
+    >
+      {children}
+    </Flex>
+  );
+};

front/src/components/ParameterLayout/ParameterLayoutFooter.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+import { Flex } from '@chakra-ui/react';
+
+export type ParameterLayoutFooterProps = {
+  children?: ReactNode;
+};
+
+export const ParameterLayoutFooter = ({
+  children,
+}: ParameterLayoutFooterProps) => {
+  return (
+    <Flex width="full" paddingY="15px" paddingX="25px" minHeight="10px">
+      {children}
+    </Flex>
+  );
+};

front/src/components/ParameterLayout/ParameterLayoutHeader.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+import { Flex } from '@chakra-ui/react';
+
+export type ParameterLayoutHeaderProps = {
+  children?: ReactNode;
+};
+
+export const ParameterLayoutHeader = ({
+  children,
+}: ParameterLayoutHeaderProps) => {
+  return (
+    <Flex width="full" paddingY="15px" paddingX="25px" minHeight="10px">
+      {children}
+    </Flex>
+  );
+};

front/src/components/ParameterLayout/ParameterLayoutHeaderBase.tsx

@@ -0,0 +1,24 @@
+import { Flex, Text } from '@chakra-ui/react';
+
+import { ParameterLayoutHeader } from './ParameterLayoutHeader';
+
+export type ParameterLayoutHeaderBaseProps = {
+  title: string;
+  description?: string;
+};
+
+export const ParameterLayoutHeaderBase = ({
+  title,
+  description,
+}: ParameterLayoutHeaderBaseProps) => {
+  return (
+    <ParameterLayoutHeader>
+      <Flex direction="column">
+        <Text fontSize="25px" fontWeight="bold">
+          {title}
+        </Text>
+        {description && <Text>{description}</Text>}
+      </Flex>
+    </ParameterLayoutHeader>
+  );
+};

front/src/components/ParameterLayout/ParameterLayoutRoot.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+
+import { VStack } from '@chakra-ui/react';
+
+export type ParameterLayoutRootProps = {
+  children?: ReactNode;
+};
+
+export const ParameterLayoutRoot = ({ children }: ParameterLayoutRootProps) => {
+  return (
+    <VStack
+      gap="0px"
+      marginX="15%"
+      marginY="20px"
+      justify="center"
+      //borderRadius="20px"
+      borderRadius="0px"
+      border="1px solid black"
+      background="gray.500"
+    >
+      {children}
+    </VStack>
+  );
+};

front/src/components/ParameterLayout/index.ts

@@ -0,0 +1 @@
+export * as ParameterLayout from './ParameterLayout';

front/src/components/SearchInput.tsx

@@ -1,10 +1,6 @@
 import { useState } from 'react';
 
-import {
-  Input,
-  InputGroup,
-  InputLeftElement,
-} from '@chakra-ui/react';
+import { Group, Input } from '@chakra-ui/react';
 import { MdSearch } from 'react-icons/md';
 
 export type SearchInputProps = {
@@ -44,16 +40,14 @@ export const SearchInput = ({
     }
   }
   return (
-    <InputGroup maxWidth="200px" marginLeft="auto" {...searchInputProperty}>
-      <InputLeftElement pointerEvents="none">
-        <MdSearch color="gray.300" />
-      </InputLeftElement>
+    <Group maxWidth="200px" marginLeft="auto" {...searchInputProperty}>
+      <MdSearch color="gray.300" />
       <Input
         onFocus={onFocusKeep}
         onBlur={() => setTimeout(() => onFocusLost(), 200)}
         onChange={onChange}
         onSubmit={onSubmit}
       />
-    </InputGroup>
+    </Group>
   );
 };

front/src/components/TopBar/TopBar.tsx

@@ -1,49 +1,36 @@
 import { ReactNode } from 'react';
 
-import {
-  Button,
-  Drawer,
-  DrawerBody,
-  DrawerContent,
-  DrawerHeader,
-  DrawerOverlay,
-  Flex,
-  HStack,
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Text,
-  useDisclosure,
-} from '@chakra-ui/react';
-import {
-  LuAlignJustify,
-  LuArrowBigLeft,
-  LuArrowUpSquare,
-  LuHelpCircle,
-  LuHome,
-  LuLogIn,
-  LuLogOut,
-  LuMoon,
-  LuPlusCircle,
-  LuSettings,
-  LuSun,
-  LuUserCircle,
-} from 'react-icons/lu';
+
+
+import { Box, Button, ConditionalValue, Flex, HStack, IconButton, Span, Text, useDisclosure } from '@chakra-ui/react';
+import { LuAlignJustify, LuArrowBigLeft, LuCircleUserRound, LuKeySquare, LuLogIn, LuLogOut, LuMoon, LuSettings, LuSun } from 'react-icons/lu';
+import { MdHelp, MdHome, MdMore, MdOutlinePlaylistPlay, MdOutlineUploadFile, MdSupervisedUserCircle } from 'react-icons/md';
 import { useNavigate } from 'react-router-dom';
 
+
+
+import { useColorMode, useColorModeValue } from '@/components/ui/color-mode';
+import { DrawerBody, DrawerContent, DrawerHeader, DrawerRoot } from '@/components/ui/drawer';
+import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '@/components/ui/menu';
 import { useServiceContext } from '@/service/ServiceContext';
 import { SessionState } from '@/service/SessionState';
-import { colors } from '@/theme/foundations/colors';
-import { requestSignIn, requestSignOut, requestSignUp } from '@/utils/sso';
-import { useThemeMode } from '@/utils/theme-tools';
 import { useSessionService } from '@/service/session';
+import { colors } from '@/theme/colors';
+import { requestOpenSite, requestSignIn, requestSignOut, requestSignUp } from '@/utils/sso';
+
+
+
+
 
 export const TOP_BAR_HEIGHT = '50px';
 
 export const BUTTON_TOP_BAR_PROPERTY = {
-  variant: '@menu',
+  variant: 'ghost' as ConditionalValue<
+    'ghost' | 'outline' | 'solid' | 'subtle' | 'surface' | 'plain' | undefined
+  >,
+  //colorPalette: "brand",
+  fontSize: '20px',
+  textTransform: 'uppercase',
   height: TOP_BAR_HEIGHT,
 };
 
@@ -52,17 +39,51 @@ export type TopBarProps = {
   title?: string;
 };
 
+const ButtonMenuLeft = ({
+  dest,
+  title,
+  icon,
+  onClickEnd = () => {},
+}: {
+  dest: string;
+  title: string;
+  icon: ReactNode;
+  onClickEnd?: () => void;
+}) => {
+  const navigate = useNavigate();
+  return (
+    <>
+      <Button
+        background="#00000000"
+        borderRadius="0px"
+        onClick={() => {
+          navigate(dest);
+          onClickEnd();
+        }}
+        width="full"
+        {...BUTTON_TOP_BAR_PROPERTY}
+      >
+        <Box asChild style={{ width: '45px', height: '45px' }}>
+          {icon}
+        </Box>
+        <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
+          {title}
+        </Text>
+      </Button>
+      <Box marginY="5" marginX="10" height="2px" background="brand.600" />
+    </>
+  );
+};
 export const TopBar = ({ title, children }: TopBarProps) => {
-  const { mode, colorMode, toggleColorMode } = useThemeMode();
-  const { clearToken } = useSessionService();
-
+  const navigate = useNavigate();
+  const { colorMode, toggleColorMode } = useColorMode();
   const { session } = useServiceContext();
-  const backColor = mode('back.100', 'back.800');
+  const { clearToken } = useSessionService();
+  const backColor = useColorModeValue('back.100', 'back.800');
   const drawerDisclose = useDisclosure();
   const onChangeTheme = () => {
     drawerDisclose.onOpen();
   };
-  const navigate = useNavigate();
   const onSignIn = (): void => {
     clearToken();
     requestSignIn();
@@ -75,17 +96,8 @@ export const TopBar = ({ title, children }: TopBarProps) => {
     clearToken();
     requestSignOut();
   };
-  const onSelectAdd = () => {
-    navigate('/add');
-  };
-  const onSelectHome = () => {
-    navigate('/');
-  };
-  const onHelp = () => {
-    navigate('/help');
-  };
-  const onSettings = () => {
-    navigate('/settings');
+  const onKarso = (): void => {
+    requestOpenSite();
   };
   return (
     <Flex
@@ -103,10 +115,12 @@ export const TopBar = ({ title, children }: TopBarProps) => {
       zIndex={200}
     >
       <Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onChangeTheme}>
-        <LuAlignJustify />
-        <Text paddingLeft="3px" fontWeight="bold">
-          Karusic
-        </Text>
+        <HStack>
+          <LuAlignJustify />
+          <Text paddingLeft="3px" fontWeight="bold">
+            Karusic
+          </Text>
+        </HStack>
       </Button>
       {title && (
         <Text
@@ -115,6 +129,7 @@ export const TopBar = ({ title, children }: TopBarProps) => {
           textTransform="uppercase"
           marginRight="auto"
           userSelect="none"
+          color="brand.500"
         >
           {title}
         </Text>
@@ -134,7 +149,7 @@ export const TopBar = ({ title, children }: TopBarProps) => {
               onClick={onSignUp}
               disabled={true}
             >
-              <LuPlusCircle />
+              <MdMore />
               <Text paddingLeft="3px" fontWeight="bold">
                 Sign-up
               </Text>
@@ -142,86 +157,111 @@ export const TopBar = ({ title, children }: TopBarProps) => {
           </>
         )}
         {session?.state === SessionState.CONNECTED && (
-          <Menu>
-            <MenuButton
-              as={IconButton}
-              aria-label="Options"
-              icon={<LuUserCircle />}
-              {...BUTTON_TOP_BAR_PROPERTY}
-              width={TOP_BAR_HEIGHT}
-            />
-            <MenuList>
-              <MenuItem _hover={{}} color={mode('brand.800', 'brand.200')}>
-                Sign in as {session?.login ?? 'Fail'}
+          <MenuRoot>
+            <MenuTrigger asChild>
+              <IconButton {...BUTTON_TOP_BAR_PROPERTY} width={TOP_BAR_HEIGHT}>
+                <LuCircleUserRound />
+              </IconButton>
+            </MenuTrigger>
+            <MenuContent>
+              <MenuItem
+                value="user"
+                valueText="user"
+                color={useColorModeValue('brand.800', 'brand.200')}
+              >
+                <MdSupervisedUserCircle />
+                <Box flex="1">Sign in as {session?.login ?? 'Fail'}</Box>
               </MenuItem>
-              <MenuItem icon={<LuSettings />} onClick={onSettings}>Settings</MenuItem>
-              <MenuItem icon={<LuHelpCircle />} onClick={onHelp}>Help</MenuItem>
-              <MenuItem icon={<LuLogOut />} onClick={onSignOut}>
-                Sign-out
+              <MenuItem
+                value="Settings"
+                valueText="Settings"
+                onClick={() => navigate('/settings')}
+              >
+                <LuSettings />
+                Settings
+              </MenuItem>
+              <MenuItem
+                value="Help"
+                valueText="Help"
+                onClick={() => navigate('/help')}
+              >
+                <MdHelp /> Help
+              </MenuItem>
+              <MenuItem
+                value="Sign-out"
+                valueText="Sign-out"
+                onClick={onSignOut}
+              >
+                <LuLogOut /> Sign-out
+              </MenuItem>
+              <MenuItem value="karso" valueText="Karso" onClick={onKarso}>
+                <LuKeySquare /> Karso (SSO)
               </MenuItem>
               {colorMode === 'light' ? (
-                <MenuItem icon={<LuMoon />} onClick={toggleColorMode}>
-                  Set dark mode
+                <MenuItem
+                  value="set-dark"
+                  valueText="set-dark"
+                  onClick={toggleColorMode}
+                >
+                  <LuMoon /> Set dark mode
                 </MenuItem>
               ) : (
-                <MenuItem icon={<LuSun />} onClick={toggleColorMode}>
-                  Set light mode
+                <MenuItem
+                  value="set-light"
+                  valueText="set-light"
+                  onClick={toggleColorMode}
+                >
+                  <LuSun /> Set light mode
                 </MenuItem>
               )}
-            </MenuList>
-          </Menu>
+            </MenuContent>
+          </MenuRoot>
         )}
       </Flex>
-      <Drawer
-        placement="left"
-        onClose={drawerDisclose.onClose}
-        isOpen={drawerDisclose.isOpen}
+      <DrawerRoot
+        placement="start"
+        onOpenChange={drawerDisclose.onClose}
+        open={drawerDisclose.open}
+        data-testid="top-bar_drawer-root"
       >
-        <DrawerOverlay />
-        <DrawerContent>
+        <DrawerContent data-testid="top-bar_drawer-content">
           <DrawerHeader
             paddingY="auto"
             as="button"
             onClick={drawerDisclose.onClose}
             boxShadow={'0px 2px 4px ' + colors.back[900]}
             backgroundColor={backColor}
-            color={mode('brand.900', 'brand.50')}
+            color={useColorModeValue('brand.900', 'brand.50')}
             textTransform="uppercase"
           >
-            <HStack height={TOP_BAR_HEIGHT}>
+            <HStack {...BUTTON_TOP_BAR_PROPERTY} cursor="pointer">
               <LuArrowBigLeft />
-              <Text as="span" paddingLeft="3px">
-                Karusic
-              </Text>
+              <Span paddingLeft="3px">Karusic</Span>
             </HStack>
           </DrawerHeader>
           <DrawerBody paddingX="0px">
-            <Button
-              background="#00000000"
-              borderRadius="0px"
-              onClick={onSelectHome}
-              width="full"
-            >
-              <LuHome />
-              <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
-                Home
-              </Text>
-            </Button>
-            <hr />
-            <Button
-              background="#00000000"
-              borderRadius="0px"
-              onClick={onSelectAdd}
-              width="full"
-            >
-              <LuArrowUpSquare />
-              <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
-                Add Media
-              </Text>
-            </Button>
+            <Box marginY="3" />
+            <ButtonMenuLeft
+              onClickEnd={drawerDisclose.onClose}
+              dest="/"
+              title="Home"
+              icon={<MdHome />}
+            />
+            <ButtonMenuLeft
+              onClickEnd={drawerDisclose.onClose}
+              dest="/on-air"
+              title="On air"
+              icon={<MdOutlinePlaylistPlay />}
+            />
+            <ButtonMenuLeft
+              onClickEnd={drawerDisclose.onClose}
+              dest="/add"
+              title="Add Media"
+              icon={<MdOutlineUploadFile />}
+            />
           </DrawerBody>
         </DrawerContent>
-      </Drawer>
+      </DrawerRoot>
     </Flex>
   );
-};
+};

front/src/components/album/DisplayAlbum.tsx

@@ -1,10 +1,10 @@
-import { Flex, Text } from '@chakra-ui/react';
+import { Flex, Span } from '@chakra-ui/react';
 import { LuDisc3 } from 'react-icons/lu';
 
 import { Album } from '@/back-api';
 import { Covers } from '@/components/Cover';
-import { useCountTracksWithAlbumId } from '@/service/Track';
 import { BASE_WRAP_ICON_SIZE } from '@/constants/genericSpacing';
+import { useCountTracksWithAlbumId } from '@/service/Track';
 
 export type DisplayAlbumProps = {
   dataAlbum?: Album;
@@ -19,12 +19,17 @@ export const DisplayAlbum = ({ dataAlbum }: DisplayAlbumProps) => {
     );
   }
   return (
-    <Flex direction="row" width="full" height="full">
+    <Flex
+      direction="row"
+      width="full"
+      height="full"
+      data-testid="display-album_flex"
+    >
       <Covers
         data={dataAlbum?.covers}
         size={BASE_WRAP_ICON_SIZE}
         flex={1}
-        iconEmpty={LuDisc3}
+        iconEmpty={<LuDisc3 />}
       />
       <Flex
         direction="column"
@@ -35,29 +40,27 @@ export const DisplayAlbum = ({ dataAlbum }: DisplayAlbumProps) => {
         overflowX="hidden"
         flex={1}
       >
-        <Text
-          as="span"
-          align="left"
+        <Span
+          textAlign="left"
           fontSize="20px"
           fontWeight="bold"
           userSelect="none"
           marginRight="auto"
           overflow="hidden"
-          noOfLines={[1, 2]}
+          // noOfLines={[1, 2]}
         >
           {dataAlbum?.name}
-        </Text>
-        <Text
-          as="span"
-          align="left"
+        </Span>
+        <Span
+          textAlign="left"
           fontSize="15px"
           userSelect="none"
           marginRight="auto"
           overflow="hidden"
-          noOfLines={1}
+          // noOfLines={1}
         >
           {countTracksOfAnAlbum} track{countTracksOfAnAlbum >= 1 && 's'}
-        </Text>
+        </Span>
       </Flex>
     </Flex>
   );

front/src/components/album/DisplayAlbumId.tsx

@@ -6,5 +6,5 @@ export type DisplayAlbumIdProps = {
 };
 export const DisplayAlbumId = ({ id }: DisplayAlbumIdProps) => {
   const { dataAlbum } = useSpecificAlbum(id);
-  return <DisplayAlbum dataAlbum={dataAlbum} />;
+  return <DisplayAlbum dataAlbum={dataAlbum} data-testid="display-album-id" />;
 };

front/src/components/contextMenu/ContextMenu.tsx

@@ -1,15 +1,12 @@
-import { useState } from 'react';
+import { ReactNode } from 'react';
 
-import {
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-} from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { LuMenu } from 'react-icons/lu';
 
+import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../ui/menu';
+
 export type MenuElement = {
+  icon?: ReactNode;
   name: string;
   onClick: () => void;
 };
@@ -23,20 +20,32 @@ export const ContextMenu = ({ elements }: ContextMenuProps) => {
     return <></>;
   }
   return (
-    <Menu>
-      <MenuButton
-        as={IconButton}
-        aria-label="Options"
-        icon={<LuMenu />}
+    <MenuRoot data-testid="context-menu">
+      <MenuTrigger
+        asChild
         marginY="auto"
-      />
-      <MenuList>
+        marginRight="4px"
+        data-testid="context-menu_trigger"
+      >
+        <Box asChild color="brand.500" cursor="pointer">
+          <LuMenu />
+        </Box>
+      </MenuTrigger>
+      <MenuContent data-testid="context-menu_content">
         {elements?.map((data) => (
-          <MenuItem key={data.name} onClick={data.onClick}>
+          <MenuItem
+            key={data.name}
+            value={data.name}
+            onClick={data.onClick}
+            height="65px"
+            fontSize="25px"
+            data-test-id="context-menu_item"
+          >
+            {data.icon}
             {data.name}
           </MenuItem>
         ))}
-      </MenuList>
-    </Menu>
+      </MenuContent>
+    </MenuRoot>
   );
 };

front/src/components/form/FormCovers.tsx

@@ -1,25 +1,13 @@
-import {
-  DragEventHandler,
-  RefObject,
-} from 'react';
+import { DragEventHandler, ReactNode, RefObject } from 'react';
 
-import {
-  Box,
-  BoxProps,
-  Center,
-  Image,
-  Wrap,
-  WrapItem,
-} from '@chakra-ui/react';
-import {
-  MdHighlightOff,
-  MdUploadFile,
-} from 'react-icons/md';
+import { Box, BoxProps, Center, Flex, HStack, Image } from '@chakra-ui/react';
+import { MdHighlightOff, MdUploadFile } from 'react-icons/md';
 
 import { FormGroup } from '@/components/form/FormGroup';
-import { UseFormidableReturn } from '@/components/form/Formidable';
 import { DataUrlAccess } from '@/utils/data-url-access';
 
+import { useFormidableContextElement } from '../formidable';
+
 export type DragNdropProps = {
   onFilesSelected?: (file: File[]) => void;
   onUriSelected?: (uri: string) => void;
@@ -28,8 +16,8 @@ export type DragNdropProps = {
 };
 
 export const DragNdrop = ({
-  onFilesSelected = () => { },
-  onUriSelected = () => { },
+  onFilesSelected = () => {},
+  onUriSelected = () => {},
   width = '100px',
   height = '100px',
 }: DragNdropProps) => {
@@ -92,33 +80,33 @@ export const DragNdrop = ({
 };
 
 export type CenterIconProps = BoxProps & {
-  icon: any;
+  children: ReactNode;
   sizeIcon?: string;
 };
 
 export const CenterIcon = ({
-  icon: IconEl,
+  children,
   sizeIcon = '15px',
   ...rest
 }: CenterIconProps) => {
   return (
     <Box position="relative" w={sizeIcon} h={sizeIcon} flex="none" {...rest}>
       <Box
-        as={IconEl}
         w={sizeIcon}
         h={sizeIcon}
         position="absolute"
         top="50%"
         left="50%"
         transform="translate(-50%, -50%)"
-      />
+      >
+        {children}
+      </Box>
     </Box>
   );
 };
 
 export type FormCoversProps = {
-  form: UseFormidableReturn;
-  variableName: string;
+  name: string;
   ref?: RefObject<any>;
   label?: string;
   isRequired?: boolean;
@@ -127,51 +115,48 @@ export type FormCoversProps = {
   onRemove?: (index: number) => void;
 };
 
+/** This field component is a direct insertion component ==> not manage with formidable */
 export const FormCovers = ({
-  form,
-  variableName,
+  name,
   ref,
-  onFilesSelected = () => { },
-  onUriSelected = () => { },
-  onRemove = () => { },
+  onFilesSelected = () => {},
+  onUriSelected = () => {},
+  onRemove = () => {},
   ...rest
 }: FormCoversProps) => {
-  const urls =
-    DataUrlAccess.getListThumbnailUrl(form.values[variableName]) ?? [];
+  const { value } = useFormidableContextElement(name);
+  const urls = DataUrlAccess.getListThumbnailUrl(value) ?? [];
   return (
-    <FormGroup
-      isModify={form.isModify[variableName]}
-      onRestore={() => form.restoreValue({ [variableName]: true })}
-      {...rest}
-    >
-      <Wrap width="full">
+    <FormGroup name={name} {...rest}>
+      <HStack wrap="wrap" width="full">
         {urls.map((data, index) => (
-          <WrapItem key={data}>
+          <Flex align="flex-start" key={data}>
             <Box width="125px" height="125px" position="relative">
               <Box width="125px" height="125px" position="absolute">
                 <CenterIcon
-                  icon={MdHighlightOff}
                   width="125px"
                   sizeIcon="100%"
                   zIndex="+1"
                   color="#00000020"
                   _hover={{ color: 'red' }}
                   onClick={() => onRemove && onRemove(index)}
-                />
+                >
+                  <MdHighlightOff />
+                </CenterIcon>
               </Box>
               <Image loading="lazy" src={data} boxSize="full" />
             </Box>
-          </WrapItem>
+          </Flex>
         ))}
-        <WrapItem key="data">
+        <Flex align="flex-start" key="data">
           <DragNdrop
             height="125px"
             width="125px"
             onFilesSelected={onFilesSelected}
             onUriSelected={onUriSelected}
           />
-        </WrapItem>
-      </Wrap>
+        </Flex>
+      </HStack>
     </FormGroup>
   );
 };

front/src/components/form/FormGroup.tsx

@@ -3,60 +3,173 @@ import { ReactNode } from 'react';
 import { Flex, Text } from '@chakra-ui/react';
 import { MdErrorOutline, MdHelpOutline, MdRefresh } from 'react-icons/md';
 
+import { Icon } from '../Icon';
+import { useFormidableContextElement } from '../formidable';
+
+const DisplayLabel = ({
+  label,
+  isRequired,
+}: {
+  label?: ReactNode;
+  isRequired: boolean;
+}) => {
+  if (!label) {
+    return <></>;
+  }
+  return (
+    <Text marginRight="auto" paddingY="5px" fontWeight="bold">
+      {label}{' '}
+      {isRequired && (
+        <Text as="span" color="red.600">
+          *
+        </Text>
+      )}
+    </Text>
+  );
+};
+
+const DisplayHelp = ({ help }: { help?: ReactNode }) => {
+  if (!help) {
+    return <></>;
+  }
+  return (
+    <Flex direction="row">
+      <MdHelpOutline />
+      <Text alignContent="center">{help}</Text>
+    </Flex>
+  );
+};
+const DisplayError = ({ error }: { error?: ReactNode }) => {
+  if (!error) {
+    return <></>;
+  }
+  return (
+    <Flex direction="row" color="red.600">
+      <MdErrorOutline />
+      <Text alignContent="center">{error}</Text>
+    </Flex>
+  );
+};
+
 export type FormGroupProps = {
+  children: ReactNode;
+  name: string;
   error?: ReactNode;
   help?: ReactNode;
   label?: ReactNode;
-  isModify?: boolean;
-  onRestore?: () => void;
   isRequired?: boolean;
-  children: ReactNode;
+  disableSingleLine?: boolean;
 };
 
 export const FormGroup = ({
   children,
-  error,
+  name,
   help,
   label,
-  isModify = false,
   isRequired = false,
+  disableSingleLine,
+}: FormGroupProps) => {
+  const { form, error, isModify, onRestore } =
+    useFormidableContextElement(name);
+  const enableModifyNotification =
+    form.configuration.enableModifyNotification ?? false;
+  const enableReset = form.configuration.enableReset ?? false;
+  const singleLine = disableSingleLine
+    ? false
+    : form.configuration.singleLineForm;
+  return (
+    <FormGroupShow
+      help={help}
+      label={label}
+      isRequired={isRequired}
+      error={error}
+      isModify={isModify}
+      enableModifyNotification={enableModifyNotification}
+      enableReset={enableReset}
+      singleLine={singleLine}
+      onRestore={onRestore}
+    >
+      {children}
+    </FormGroupShow>
+  );
+};
+
+export type FormGroupShowProps = {
+  children: ReactNode;
+  help?: ReactNode;
+  label?: ReactNode;
+  isRequired?: boolean;
+  error?: ReactNode;
+  isModify?: boolean;
+  enableModifyNotification?: boolean;
+  enableReset?: boolean;
+  singleLine?: boolean;
+  onRestore?: () => void;
+};
+
+export const FormGroupShow = ({
+  children,
+  help,
+  label,
+  isRequired = false,
+  error,
+  isModify = false,
+  enableModifyNotification = true,
+  enableReset = true,
+  singleLine = false,
   onRestore,
-}: FormGroupProps) => (
-  <Flex
-    borderLeftWidth="3px"
-    borderLeftColor={error ? 'red' : isModify ? 'blue' : '#00000000'}
-    paddingLeft="7px"
-    paddingY="4px"
-    direction="column"
-  >
-    <Flex direction="row" width="full" gap="52px">
-      {!!label && (
-        <Text marginRight="auto" fontWeight="bold">
-          {label}{' '}
-          {isRequired && (
-            <Text as="span" color="red.600">
-              *
-            </Text>
-          )}
-        </Text>
+}: FormGroupShowProps) => {
+  return (
+    <Flex
+      borderLeftWidth="3px"
+      borderLeftColor={
+        error
+          ? 'red.600'
+          : enableModifyNotification && isModify
+            ? 'blue.600'
+            : '#00000000'
+      }
+      paddingLeft="7px"
+      paddingY="4px"
+      width="full"
+      direction="column"
+    >
+      {singleLine && (
+        <>
+          <Flex direction="row" width="full" gap="52px">
+            <Flex width="10%">
+              <DisplayLabel label={label} isRequired={isRequired} />
+              {!!onRestore && isModify && enableReset && (
+                <Icon sizeIcon="150px">
+                  <MdRefresh onClick={onRestore} cursor="pointer" />
+                </Icon>
+              )}
+            </Flex>
+            <Flex direction="column" width={'90%'} gap="5px">
+              {children}
+              <DisplayHelp help={help} />
+              <DisplayError error={error} />
+            </Flex>
+          </Flex>
+        </>
       )}
-      {!!onRestore && isModify && (
-        <MdRefresh size="15px" onClick={onRestore} cursor="pointer" />
+      {!singleLine && (
+        <>
+          <Flex direction="row" width="full" gap="52px">
+            <Flex width="full">
+              <DisplayLabel label={label} isRequired={isRequired} />
+              {!!onRestore && isModify && enableReset && (
+                <Icon sizeIcon="30px" onClick={onRestore} cursor="pointer">
+                  <MdRefresh />
+                </Icon>
+              )}
+            </Flex>
+          </Flex>
+          {children}
+          <DisplayHelp help={help} />
+          <DisplayError error={error} />
+        </>
       )}
     </Flex>
-    {children}
-    {!!help && (
-      <Flex direction="row">
-        <MdHelpOutline />
-        <Text>{help}</Text>
-      </Flex>
-    )}
-
-    {!!error && (
-      <Flex direction="row">
-        <MdErrorOutline />
-        <Text>{error}</Text>
-      </Flex>
-    )}
-  </Flex>
-);
+  );
+};

front/src/components/form/FormInput.tsx

@@ -2,35 +2,34 @@ import { RefObject } from 'react';
 
 import { Input } from '@chakra-ui/react';
 
-import { FormGroup } from '@/components/form/FormGroup';
-import { UseFormidableReturn } from '@/components/form/Formidable';
+import { FormGroup, FormGroupProps } from '@/components/form/FormGroup';
+
+import { useFormidableContextElement } from '../formidable';
 
 export type FormInputProps = {
-  form: UseFormidableReturn;
-  variableName: string;
+  name: string;
   ref?: RefObject<any>;
   label?: string;
   placeholder?: string;
   isRequired?: boolean;
-};
+} & Omit<FormGroupProps, 'children'>;
 
 export const FormInput = ({
-  form,
-  variableName,
+  name,
   ref,
   placeholder,
   ...rest
 }: FormInputProps) => {
+  const { value, onChange } = useFormidableContextElement(name);
   return (
-    <FormGroup
-      isModify={form.isModify[variableName]}
-      onRestore={() => form.restoreValue({ [variableName]: true })}
-      {...rest}
-    >
+    <FormGroup name={name} {...rest}>
       <Input
         ref={ref}
-        value={form.values[variableName]}
-        onChange={(e) => form.setValues({ [variableName]: e.target.value })}
+        type="text"
+        name={name}
+        autoComplete={name}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
       />
     </FormGroup>
   );

front/src/components/form/FormNumber.tsx

@@ -1,23 +1,19 @@
 import { RefObject } from 'react';
 
+import { FormGroup } from '@/components/form/FormGroup';
+
+import { useFormidableContextElement } from '../formidable';
 import {
-  NumberDecrementStepper,
-  NumberIncrementStepper,
-  NumberInput,
   NumberInputField,
   NumberInputProps,
-  NumberInputStepper,
-} from '@chakra-ui/react';
-
-import { FormGroup } from '@/components/form/FormGroup';
-import { UseFormidableReturn } from '@/components/form/Formidable';
+  NumberInputRoot,
+} from '../ui/number-input';
 
 export type FormNumberProps = Pick<
   NumberInputProps,
   'step' | 'defaultValue' | 'min' | 'max'
 > & {
-  form: UseFormidableReturn;
-  variableName: string;
+  name: string;
   ref?: RefObject<any>;
   label?: string;
   placeholder?: string;
@@ -25,8 +21,7 @@ export type FormNumberProps = Pick<
 };
 
 export const FormNumber = ({
-  form,
-  variableName,
+  name,
   ref,
   placeholder,
   step,
@@ -35,27 +30,21 @@ export const FormNumber = ({
   defaultValue,
   ...rest
 }: FormNumberProps) => {
+  const { form, value, isModify, onChange, onRestore } =
+    useFormidableContextElement(name);
   return (
-    <FormGroup
-      isModify={form.isModify[variableName]}
-      onRestore={() => form.restoreValue({ [variableName]: true })}
-      {...rest}
-    >
-      <NumberInput
+    <FormGroup name={name} {...rest}>
+      <NumberInputRoot
         ref={ref}
-        value={form.values[variableName]}
-        onChange={(_, value) => form.setValues({ [variableName]: value })}
+        value={value}
+        onValueChange={(e) => onChange(e.value)}
         step={step}
         defaultValue={defaultValue}
         min={min}
         max={max}
       >
         <NumberInputField />
-        <NumberInputStepper>
-          <NumberIncrementStepper />
-          <NumberDecrementStepper />
-        </NumberInputStepper>
-      </NumberInput>
+      </NumberInputRoot>
     </FormGroup>
   );
 };

front/src/components/form/FormPassword.tsx

@@ -0,0 +1,50 @@
+import { RefObject, useState } from 'react';
+
+import { chakra, Group, Input } from '@chakra-ui/react';
+
+import { FormGroup, FormGroupProps } from '@/components/form/FormGroup';
+import { Button } from '../ui/button';
+import { LuEye, LuEyeOff } from 'react-icons/lu';
+import { useFormidableContextElement } from '../formidable';
+
+export type FormInputProps = {
+  name: string;
+  ref?: RefObject<any>;
+  label?: string;
+  placeholder?: string;
+  isRequired?: boolean;
+} & Omit<FormGroupProps, 'children'>;
+
+export const FormPassword = ({
+  name,
+  ref,
+  placeholder,
+  ...rest
+}: FormInputProps) => {
+  const {value, onChange} = useFormidableContextElement(name);
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  function toggleVisible(): void {
+    setShowPassword((value) => ! value)
+  }
+  return (
+    <FormGroup
+      name={name}
+      {...rest}
+    >
+      <chakra.div position="relative" width="full">
+        <Input
+          ref={ref}
+          type={showPassword? "text" : "password"}
+          name={name}
+          autoComplete={name}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          paddingRight="47px"
+        />
+        <Button variant="ghost" onClick={toggleVisible} position="absolute" top="0" right="0" _hover={{bg:"#0000", shadow:"none", color:"black"}}>
+          {showPassword? <LuEye/> : <LuEyeOff/>}
+        </Button>
+      </chakra.div>
+    </FormGroup>
+  );
+};

front/src/components/form/FormSelect.stories.tsx

@@ -3,7 +3,9 @@ import { useState } from 'react';
 import { Box } from '@chakra-ui/react';
 
 import { FormSelect } from '@/components/form/FormSelect';
-import { useFormidable } from '@/components/form/Formidable';
+import { useFormidable } from '@/components/formidable/FormidableConfig';
+
+import { Formidable } from '../formidable';
 
 export default {
   title: 'Components/FormSelect',
@@ -16,46 +18,49 @@ type BasicFormData = {
 export const Default = () => {
   const form = useFormidable<BasicFormData>({});
   return (
-    <FormSelect
-      label="Simple Title"
-      form={form}
-      variableName={'data'}
-      keyInputValue="id"
-      options={[{ id: 111 }, { id: 222 }, { id: 333 }, { id: 123 }]}
-    />
+    <Formidable.From form={form}>
+      <FormSelect
+        label="Simple Title"
+        name="data"
+        keyInputValue="id"
+        options={[{ id: 111 }, { id: 222 }, { id: 333 }, { id: 123 }]}
+      />
+    </Formidable.From>
   );
 };
 
 export const ChangeKeys = () => {
   const form = useFormidable<BasicFormData>({});
   return (
-    <FormSelect
-      label="Simple Title for (ChangeKeys)"
-      form={form}
-      variableName={'data'}
-      keyInputKey="key"
-      keyInputValue="plop"
-      options={[
-        { key: 111, plop: 'first Item' },
-        { key: 222, plop: 'Second Item' },
-        { key: 333, plop: 'third item' },
-      ]}
-    />
+    <Formidable.From form={form}>
+      <FormSelect
+        label="Simple Title for (ChangeKeys)"
+        name="data"
+        keyInputKey="key"
+        keyInputValue="plop"
+        options={[
+          { key: 111, plop: 'first Item' },
+          { key: 222, plop: 'Second Item' },
+          { key: 333, plop: 'third item' },
+        ]}
+      />
+    </Formidable.From>
   );
 };
 export const ChangeName = () => {
   const form = useFormidable<BasicFormData>({});
   return (
-    <FormSelect
-      label="Simple Title for (ChangeName)"
-      form={form}
-      variableName={'data'}
-      options={[
-        { id: 111, name: 'first Item' },
-        { id: 222, name: 'Second Item' },
-        { id: 333, name: 'third item' },
-      ]}
-    />
+    <Formidable.From form={form}>
+      <FormSelect
+        label="Simple Title for (ChangeName)"
+        name="data"
+        options={[
+          { id: 111, name: 'first Item' },
+          { id: 222, name: 'Second Item' },
+          { id: 333, name: 'third item' },
+        ]}
+      />
+    </Formidable.From>
   );
 };
 export const AddableItem = () => {
@@ -66,27 +71,28 @@ export const AddableItem = () => {
     { id: 333, name: 'third item' },
   ]);
   return (
-    <FormSelect
-      label="Simple Title for (ChangeName)"
-      form={form}
-      variableName={'data'}
-      addNewItem={(data: string) => {
-        return new Promise((resolve, _rejects) => {
-          let upperId = 0;
-          setData((previous) => {
-            previous.forEach((element) => {
-              if (element['id'] > upperId) {
-                upperId = element['id'];
-              }
+    <Formidable.From form={form}>
+      <FormSelect
+        label="Simple Title for (ChangeName)"
+        name="data"
+        addNewItem={(data: string) => {
+          return new Promise((resolve, _rejects) => {
+            let upperId = 0;
+            setData((previous) => {
+              previous.forEach((element) => {
+                if (element['id'] > upperId) {
+                  upperId = element['id'];
+                }
+              });
+              upperId++;
+              return [...previous, { id: upperId, name: data }];
             });
-            upperId++;
-            return [...previous, { id: upperId, name: data }];
+            resolve({ id: upperId, name: data });
           });
-          resolve({ id: upperId, name: data });
-        });
-      }}
-      options={data}
-    />
+        }}
+        options={data}
+      />
+    </Formidable.From>
   );
 };
 
@@ -94,18 +100,19 @@ export const DarkBackground = {
   render: () => {
     const form = useFormidable<BasicFormData>({});
     return (
-      <Box p="4" color="white" bg="gray.800">
-        <FormSelect
-          label="Simple Title for (DarkBackground)"
-          form={form}
-          variableName={'data'}
-          options={[
-            { id: 111, name: 'first Item' },
-            { id: 222, name: 'Second Item' },
-            { id: 333, name: 'third item' },
-          ]}
-        />
-      </Box>
+      <Formidable.From form={form}>
+        <Box p="4" color="white" bg="gray.800">
+          <FormSelect
+            label="Simple Title for (DarkBackground)"
+            name="data"
+            options={[
+              { id: 111, name: 'first Item' },
+              { id: 222, name: 'Second Item' },
+              { id: 333, name: 'third item' },
+            ]}
+          />
+        </Box>
+      </Formidable.From>
     );
   },
 

front/src/components/form/FormSelect.tsx

@@ -1,16 +1,13 @@
 import { RefObject } from 'react';
 
-import { Text } from '@chakra-ui/react';
-
 import { FormGroup } from '@/components/form/FormGroup';
-import { UseFormidableReturn } from '@/components/form/Formidable';
 import { SelectSingle } from '@/components/select/SelectSingle';
 
+import { useFormidableContextElement } from '../formidable';
+
 export type FormSelectProps = {
-  // Generic Form input
-  form: UseFormidableReturn;
   // Form: Name of the variable
-  variableName: string;
+  name: string;
   // Forward object reference
   ref?: RefObject<any>;
   // Form: Label of the input
@@ -32,8 +29,7 @@ export type FormSelectProps = {
 };
 
 export const FormSelect = ({
-  form,
-  variableName,
+  name,
   ref,
   placeholder,
   options,
@@ -43,23 +39,23 @@ export const FormSelect = ({
   addNewItem,
   ...rest
 }: FormSelectProps) => {
+  const { form, value, isModify, onChange, onRestore } =
+    useFormidableContextElement(name);
   // if set add capability to add the search item
   const onCreate = !addNewItem
     ? undefined
     : (data: string) => {
-      addNewItem(data).then((data: object) => form.setValues({ [variableName]: data[keyInputKey] }));
-    };
+        addNewItem(data).then((data: object) =>
+          form.setValues({ [name]: data[keyInputKey] })
+        );
+      };
   return (
-    <FormGroup
-      isModify={form.isModify[variableName]}
-      onRestore={() => form.restoreValue({ [variableName]: true })}
-      {...rest}
-    >
+    <FormGroup name={name} {...rest}>
       <SelectSingle
         ref={ref}
-        value={form.values[variableName]}
+        value={value}
         options={options}
-        onChange={(value) => form.setValues({ [variableName]: value })}
+        onChange={(value) => onChange(value)}
         keyKey={keyInputKey}
         keyValue={keyInputValue}
         onCreate={onCreate}

front/src/components/form/FormSelectMultiple.stories.tsx

@@ -3,7 +3,9 @@ import { useState } from 'react';
 import { Box } from '@chakra-ui/react';
 
 import { FormSelectMultiple } from '@/components/form/FormSelectMultiple';
-import { useFormidable } from '@/components/form/Formidable';
+import { useFormidable } from '@/components/formidable/FormidableConfig';
+
+import { Formidable } from '../formidable';
 
 export default {
   title: 'Components/FormSelectMultipleMultiple',
@@ -16,46 +18,49 @@ type BasicFormData = {
 export const Default = () => {
   const form = useFormidable<BasicFormData>({});
   return (
-    <FormSelectMultiple
-      label="Simple Title"
-      form={form}
-      variableName={'data'}
-      keyInputValue="id"
-      options={[{ id: 111 }, { id: 222 }, { id: 333 }, { id: 123 }]}
-    />
+    <Formidable.From form={form}>
+      <FormSelectMultiple
+        label="Simple Title"
+        name={'data'}
+        keyInputValue="id"
+        options={[{ id: 111 }, { id: 222 }, { id: 333 }, { id: 123 }]}
+      />
+    </Formidable.From>
   );
 };
 
 export const ChangeKeys = () => {
   const form = useFormidable<BasicFormData>({});
   return (
-    <FormSelectMultiple
-      label="Simple Title for (ChangeKeys)"
-      form={form}
-      variableName={'data'}
-      keyInputKey="key"
-      keyInputValue="plop"
-      options={[
-        { key: 111, plop: 'first Item' },
-        { key: 222, plop: 'Second Item' },
-        { key: 333, plop: 'third item' },
-      ]}
-    />
+    <Formidable.From form={form}>
+      <FormSelectMultiple
+        label="Simple Title for (ChangeKeys)"
+        name="data"
+        keyInputKey="key"
+        keyInputValue="plop"
+        options={[
+          { key: 111, plop: 'first Item' },
+          { key: 222, plop: 'Second Item' },
+          { key: 333, plop: 'third item' },
+        ]}
+      />
+    </Formidable.From>
   );
 };
 export const ChangeName = () => {
   const form = useFormidable<BasicFormData>({});
   return (
-    <FormSelectMultiple
-      label="Simple Title for (ChangeName)"
-      form={form}
-      variableName={'data'}
-      options={[
-        { id: 111, name: 'first Item' },
-        { id: 222, name: 'Second Item' },
-        { id: 333, name: 'third item' },
-      ]}
-    />
+    <Formidable.From form={form}>
+      <FormSelectMultiple
+        label="Simple Title for (ChangeName)"
+        name="data"
+        options={[
+          { id: 111, name: 'first Item' },
+          { id: 222, name: 'Second Item' },
+          { id: 333, name: 'third item' },
+        ]}
+      />
+    </Formidable.From>
   );
 };
 export const AddableItem = () => {
@@ -66,27 +71,28 @@ export const AddableItem = () => {
     { id: 333, name: 'third item' },
   ]);
   return (
-    <FormSelectMultiple
-      label="Simple Title for (ChangeName)"
-      form={form}
-      variableName={'data'}
-      addNewItem={(data: string) => {
-        return new Promise((resolve, _rejects) => {
-          let upperId = 0;
-          setData((previous) => {
-            previous.forEach((element) => {
-              if (element['id'] > upperId) {
-                upperId = element['id'];
-              }
+    <Formidable.From form={form}>
+      <FormSelectMultiple
+        label="Simple Title for (ChangeName)"
+        name="data"
+        addNewItem={(data: string) => {
+          return new Promise((resolve, _rejects) => {
+            let upperId = 0;
+            setData((previous) => {
+              previous.forEach((element) => {
+                if (element['id'] > upperId) {
+                  upperId = element['id'];
+                }
+              });
+              upperId++;
+              return [...previous, { id: upperId, name: data }];
             });
-            upperId++;
-            return [...previous, { id: upperId, name: data }];
+            resolve({ id: upperId, name: data });
           });
-          resolve({ id: upperId, name: data });
-        });
-      }}
-      options={data}
-    />
+        }}
+        options={data}
+      />
+    </Formidable.From>
   );
 };
 
@@ -94,18 +100,19 @@ export const DarkBackground = {
   render: () => {
     const form = useFormidable<BasicFormData>({});
     return (
-      <Box p="4" color="white" bg="gray.800">
-        <FormSelectMultiple
-          label="Simple Title for (DarkBackground)"
-          form={form}
-          variableName={'data'}
-          options={[
-            { id: 111, name: 'first Item' },
-            { id: 222, name: 'Second Item' },
-            { id: 333, name: 'third item' },
-          ]}
-        />
-      </Box>
+      <Formidable.From form={form}>
+        <Box p="4" color="white" bg="gray.800">
+          <FormSelectMultiple
+            label="Simple Title for (DarkBackground)"
+            name="data"
+            options={[
+              { id: 111, name: 'first Item' },
+              { id: 222, name: 'Second Item' },
+              { id: 333, name: 'third item' },
+            ]}
+          />
+        </Box>
+      </Formidable.From>
     );
   },
 

front/src/components/form/FormSelectMultiple.tsx

@@ -1,14 +1,16 @@
 import { RefObject } from 'react';
 
 import { FormGroup } from '@/components/form/FormGroup';
-import { UseFormidableReturn } from '@/components/form/Formidable';
 import { SelectMultiple } from '@/components/select/SelectMultiple';
 
+import {
+  useFormidableContext,
+  useFormidableContextElement,
+} from '../formidable';
+
 export type FormSelectMultipleProps = {
-  // Generic Form input
-  form: UseFormidableReturn;
   // Form: Name of the variable
-  variableName: string;
+  name: string;
   // Forward object reference
   ref?: RefObject<any>;
   // Form: Label of the input
@@ -28,8 +30,7 @@ export type FormSelectMultipleProps = {
 };
 
 export const FormSelectMultiple = ({
-  form,
-  variableName,
+  name,
   ref,
   placeholder,
   options,
@@ -38,23 +39,25 @@ export const FormSelectMultiple = ({
   addNewItem,
   ...rest
 }: FormSelectMultipleProps) => {
+  const { form, value, isModify, onChange, onRestore } =
+    useFormidableContextElement(name);
   // if set add capability to add the search item
   const onCreate = !addNewItem
     ? undefined
     : (data: string) => {
-      addNewItem(data).then((data: object) => form.setValues({ [variableName]: [...(form.values[variableName] ?? []), data[keyInputKey]] }));
-    };
+        addNewItem(data).then((data: object) =>
+          form.setValues({
+            [name]: [...(form.values[name] ?? []), data[keyInputKey]],
+          })
+        );
+      };
   return (
-    <FormGroup
-      isModify={form.isModify[variableName]}
-      onRestore={() => form.restoreValue({ [variableName]: true })}
-      {...rest}
-    >
+    <FormGroup name={name} {...rest}>
       <SelectMultiple
         //ref={ref}
-        values={form.values[variableName]}
+        values={value}
         options={options}
-        onChange={(value) => form.setValues({ [variableName]: value })}
+        onChange={(value) => onChange(value)}
         keyKey={keyInputKey}
         keyValue={keyInputValue}
         onCreate={onCreate}

front/src/components/form/FormTextarea.tsx

@@ -3,11 +3,11 @@ import { RefObject } from 'react';
 import { Textarea } from '@chakra-ui/react';
 
 import { FormGroup } from '@/components/form/FormGroup';
-import { UseFormidableReturn } from '@/components/form/Formidable';
+
+import { useFormidableContextElement } from '../formidable';
 
 export type FormTextareaProps = {
-  form: UseFormidableReturn;
-  variableName: string;
+  name: string;
   ref?: RefObject<any>;
   label?: string;
   placeholder?: string;
@@ -15,22 +15,20 @@ export type FormTextareaProps = {
 };
 
 export const FormTextarea = ({
-  form,
-  variableName,
+  name,
   ref,
   placeholder,
   ...rest
 }: FormTextareaProps) => {
+  const { value, onChange } = useFormidableContextElement(name);
   return (
-    <FormGroup
-      isModify={form.isModify[variableName]}
-      onRestore={() => form.restoreValue({ [variableName]: true })}
-      {...rest}
-    >
+    <FormGroup name={name} {...rest}>
       <Textarea
+        name={name}
         ref={ref}
-        value={form.values[variableName]}
-        onChange={(e) => form.setValues({ [variableName]: e.target.value })}
+        autoComplete={name}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
       />
     </FormGroup>
   );

front/src/components/formidable/FormidableConfig.tsx

@@ -1,66 +1,44 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
-import { isArray, isNullOrUndefined, isObject } from '@/utils/validator';
+import { isNullOrUndefined } from '@/utils/validator';
 
-const hasAnyTrue = (obj: { [key: string]: boolean }): boolean => {
-  for (const key in obj) {
-    if (obj.hasOwnProperty(key) && obj[key] === true) {
-      return true;
-    }
-  }
-  return false;
+import { getDifferences, hasAnyTrue } from './utils';
+
+export type FormidableDeltaConfig<TYPE> = {
+  omit?: string[]; // (keyof TYPE)[];
+  only?: string[]; // (keyof TYPE)[];
 };
 
-function getDifferences(
-  obj1: object,
-  obj2: object
-): { [key: string]: boolean } {
-  // Create an empty object to store the differences
-  const result: { [key: string]: boolean } = {};
-  // Recursive function to compare values
-  function compareValues(value1: any, value2: any): boolean {
-    // If both values are objects, compare their properties recursively
-    if (isObject(value1) && isObject(value2)) {
-      return hasAnyTrue(getDifferences(value1, value2));
-    }
-    // If both values are arrays, compare their elements
-    if (isArray(value1) && isArray(value2)) {
-      //console.log(`Check is array: ${JSON.stringify(value1)} =?= ${JSON.stringify(value2)}`);
-      if (value1.length !== value2.length) {
-        return true;
-      }
-      for (let i = 0; i < value1.length; i++) {
-        if (compareValues(value1[i], value2[i])) {
-          return true;
-        }
-      }
-      return false;
-    }
-    // Otherwise, compare the values directly
-    //console.log(`compare : ${value1} =?= ${value2}`);
-    return value1 !== value2;
-  }
-
-  // Get all keys from both objects
-  const allKeys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]);
-
-  // Iterate over all keys
-  for (const key of allKeys) {
-    if (compareValues(obj1[key], obj2[key])) {
-      result[key] = true;
-    } else {
-      result[key] = false;
-    }
-  }
-  return result;
-}
+export type FormidableConfig = {
+  enableReset?: boolean;
+  enableModifyNotification?: boolean;
+  singleLineForm?: boolean;
+};
+const initialFormConfig: Required<FormidableConfig> = {
+  enableReset: true,
+  enableModifyNotification: true,
+  singleLineForm: false,
+};
 
 export const useFormidable = <TYPE extends object = object>({
   initialValues = {} as TYPE,
+  configuration: inputConfiguration = initialFormConfig,
+  deltaConfig,
+  resolver = (_data: TYPE) => {
+    return {};
+  },
 }: {
   initialValues?: TYPE;
+  configuration?: FormidableConfig;
+  deltaConfig?: FormidableDeltaConfig<TYPE>;
+  resolver?: (data: any) => Record<string, string>;
 }) => {
+  const configuration: Required<FormidableConfig> = {
+    ...initialFormConfig,
+    ...inputConfiguration,
+  };
   const [values, setValues] = useState<TYPE>({ ...initialValues } as TYPE);
+  const [errors, setErrors] = useState<object>({});
   const [initialData, setInitialData] = useState<TYPE>(initialValues);
   const [isModify, setIsModify] = useState<{ [key: string]: boolean }>({});
   const [isFormModified, setIsFormModified] = useState<boolean>(false);
@@ -97,10 +75,11 @@ export const useFormidable = <TYPE extends object = object>({
         const ret = getDifferences(initialData, newValues);
         setIsModify(ret);
         setIsFormModified(hasAnyTrue(ret));
+        setErrors(resolver(newValues));
         return newValues;
       });
     },
-    [setValues, initialData]
+    [setValues, initialData, setErrors, setIsFormModified, setIsModify]
   );
   const restoreValue = useCallback(
     (data: object) => {
@@ -133,7 +112,7 @@ export const useFormidable = <TYPE extends object = object>({
     [setValues, initialData, setIsFormModified, setIsModify]
   );
   const getDeltaData = useCallback(
-    ({ omit = [], only }: { omit?: string[]; only?: string[] }) => {
+    ({ omit = [], only }: FormidableDeltaConfig<TYPE> = {}) => {
       const out = {};
       Object.keys(isModify).forEach((key) => {
         if (omit.includes(key) || (only && !only.includes(key))) {
@@ -161,6 +140,9 @@ export const useFormidable = <TYPE extends object = object>({
     restoreValue,
     setValues: setValuesExternal,
     values,
+    errors,
+    configuration,
+    deltaConfig,
   };
 };
 

front/src/components/formidable/FormidableContext.tsx

@@ -0,0 +1,92 @@
+import {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+} from 'react';
+
+import { UseFormidableReturn } from './FormidableConfig';
+
+export type FromContextProps = {
+  form: UseFormidableReturn;
+};
+
+export const formContext = createContext<FromContextProps>({
+  form: {
+    getDeltaData: ({}: { omit?: string[]; only?: string[] }) => {
+      return {};
+    },
+    isFormModified: false,
+    isModify: {},
+    restoreValues: () => {},
+    restoreValue: (_data: object) => {},
+    setValues: (_data: object) => {},
+    values: {},
+    errors: {},
+    configuration: {
+      enableReset: false,
+      enableModifyNotification: false,
+      singleLineForm: false,
+    },
+    deltaConfig: {},
+  },
+});
+
+export const useFormidableContext = () => {
+  const context = useContext(formContext);
+  if (!context) {
+    throw new Error('useFormContext must be used within a FormProvider');
+  }
+  if (!context.form) {
+    throw new Error('useFormContext without defining a From');
+  }
+  return context;
+};
+export const useFormidableContextElement = (name: string) => {
+  const { form } = useFormidableContext();
+  if (name === undefined) {
+    console.error(
+      "Can not request useFormidableContextElement with empty 'name'"
+    );
+  }
+  const onChange = useCallback(
+    (value) => {
+      console.log(`new values: ${name}=>${value}`);
+      form.setValues({ [name]: value });
+    },
+    [name, form, form.setValues]
+  );
+  const onRestore = useCallback(() => {
+    console.log('Restore value : ' + name);
+    form.restoreValue({ [name]: true });
+  }, [name, form, form.restoreValue]);
+  return {
+    form,
+    value: form.values[name] || '',
+    error: form.errors[name],
+    isModify: form.isModify[name],
+    onChange,
+    onRestore,
+  };
+};
+
+export type FormidableContextProps = {
+  form: UseFormidableReturn;
+  children: ReactNode;
+};
+
+export const FormidableContext = ({
+  form,
+  children,
+}: FormidableContextProps) => {
+  const memoContext = useMemo(
+    () => ({
+      form,
+    }),
+    [form]
+  );
+  return (
+    <formContext.Provider value={memoContext}>{children}</formContext.Provider>
+  );
+};

front/src/components/formidable/FormidableForm.tsx

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+
+import { Box } from '@chakra-ui/react';
+
+import { useFormidable } from './FormidableConfig';
+import { FormidableContext } from './FormidableContext';
+
+export interface FormidableFormProps<TYPE extends object = object> {
+  form: ReturnType<typeof useFormidable<TYPE>>;
+  children: ReactNode;
+  onSubmit?: (data: TYPE) => void;
+  onSubmitDelta?: (data: Partial<TYPE>) => void;
+}
+
+export const FormidableForm = <TYPE extends object = object>({
+  onSubmit,
+  onSubmitDelta,
+  form,
+  children,
+}: FormidableFormProps<TYPE>) => {
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    const hasErrors = false; //Object.values(errors).some((err) => err);
+    if (!hasErrors) {
+      console.log(
+        `request From submit !!! ${JSON.stringify(form.values, null, 2)}`
+      );
+      if (onSubmit) {
+        onSubmit(form.values);
+      }
+      if (onSubmitDelta) {
+        onSubmitDelta(form.getDeltaData(form.deltaConfig));
+      }
+    }
+  };
+  return (
+    <FormidableContext form={form}>
+      <Box as="form" onSubmit={handleSubmit}>
+        {children}
+      </Box>
+    </FormidableContext>
+  );
+};

front/src/components/formidable/Fromidable.tsx

@@ -0,0 +1,8 @@
+export {
+  type FormidableConfig as config,
+  useFormidable,
+} from './FormidableConfig';
+export {
+  FormidableForm as From,
+  type FormidableFormProps as FormProps,
+} from './FormidableForm';

front/src/components/formidable/index.ts

@@ -0,0 +1,7 @@
+export * as Formidable from './Fromidable';
+export {
+  useFormidableContext,
+  useFormidableContextElement,
+} from './FormidableContext';
+export { useFormidable } from './FormidableConfig';
+export { zodResolver } from './utils';

front/src/components/formidable/utils.ts

@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { ZodError } from 'zod';
+
+import { isArray, isNullOrUndefined, isObject } from '@/utils/validator';
+
+export const hasAnyTrue = (obj: { [key: string]: boolean }): boolean => {
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key) && obj[key] === true) {
+      return true;
+    }
+  }
+  return false;
+};
+
+export function getDifferences(
+  obj1: object,
+  obj2: object
+): { [key: string]: boolean } {
+  // Create an empty object to store the differences
+  const result: { [key: string]: boolean } = {};
+  // Recursive function to compare values
+  function compareValues(value1: any, value2: any): boolean {
+    // If both values are objects, compare their properties recursively
+    if (isObject(value1) && isObject(value2)) {
+      return hasAnyTrue(getDifferences(value1, value2));
+    }
+    // If both values are arrays, compare their elements
+    if (isArray(value1) && isArray(value2)) {
+      //console.log(`Check is array: ${JSON.stringify(value1)} =?= ${JSON.stringify(value2)}`);
+      if (value1.length !== value2.length) {
+        return true;
+      }
+      for (let i = 0; i < value1.length; i++) {
+        if (compareValues(value1[i], value2[i])) {
+          return true;
+        }
+      }
+      return false;
+    }
+    // Otherwise, compare the values directly
+    //console.log(`compare : ${value1} =?= ${value2}`);
+    return value1 !== value2;
+  }
+
+  // Get all keys from both objects
+  const allKeys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]);
+
+  // Iterate over all keys
+  for (const key of allKeys) {
+    if (compareValues(obj1[key], obj2[key])) {
+      result[key] = true;
+    } else {
+      result[key] = false;
+    }
+  }
+  return result;
+}
+
+export const zodResolver = (zodModel) => {
+  return (data: any) => {
+    try {
+      console.log(`check resolver of: ${JSON.stringify(data, null, 2)}`);
+      zodModel.parse(data);
+      return {};
+    } catch (error) {
+      if (error instanceof ZodError) {
+        console.log(
+          `catch error with resolver: ${JSON.stringify(error, null, 2)}`
+        );
+        const formattedErrors = error.issues.reduce(
+          (acc, issue) => {
+            if (issue.path.length > 0) {
+              acc[issue.path[0]] = issue.message;
+            }
+            return acc;
+          },
+          {} as Record<string, string>
+        );
+        console.log(`get errors: ${JSON.stringify(formattedErrors, null, 2)}`);
+        return formattedErrors;
+      }
+      // prevent zod error
+      throw error;
+    }
+  };
+};

front/src/components/gender/DisplayGender.tsx

@@ -23,7 +23,7 @@ export const DisplayGender = ({ dataGender }: DisplayGenderProps) => {
         data={dataGender?.covers}
         size="100"
         height="full"
-        iconEmpty={LuDisc3}
+        iconEmpty={<LuDisc3 />}
       />
       <Flex
         direction="column"
@@ -35,24 +35,24 @@ export const DisplayGender = ({ dataGender }: DisplayGenderProps) => {
       >
         <Text
           as="span"
-          align="left"
+          alignContent="left"
           fontSize="20px"
           fontWeight="bold"
           userSelect="none"
           marginRight="auto"
           overflow="hidden"
-          noOfLines={[1, 2]}
+          //TODO: noOfLines={[1, 2]}
         >
           {dataGender?.name}
         </Text>
         <Text
           as="span"
-          align="left"
+          alignContent="left"
           fontSize="15px"
           userSelect="none"
           marginRight="auto"
           overflow="hidden"
-          noOfLines={1}
+          //TODO: noOfLines={1}
         >
           {countTracksOnAGender} track{countTracksOnAGender >= 1 && 's'}
         </Text>

front/src/components/popup/AlbumEditPopUp.tsx

@@ -1,18 +1,6 @@
 import { useRef, useState } from 'react';
 
-import {
-  Button,
-  Flex,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Text,
-  useDisclosure,
-} from '@chakra-ui/react';
+import { Flex, Text, useDisclosure } from '@chakra-ui/react';
 import {
   MdAdminPanelSettings,
   MdDeleteForever,
@@ -21,21 +9,30 @@ import {
 } from 'react-icons/md';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { Album, AlbumResource } from '@/back-api';
+import { AlbumResource, AlbumWrite } from '@/back-api';
 import { FormCovers } from '@/components/form/FormCovers';
-import { FormGroup } from '@/components/form/FormGroup';
+import { FormGroupShow } from '@/components/form/FormGroup';
 import { FormInput } from '@/components/form/FormInput';
 import { FormTextarea } from '@/components/form/FormTextarea';
-import { useFormidable } from '@/components/form/Formidable';
 import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp';
+import {
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+} from '@/components/ui/dialog';
 import { useAlbumService, useSpecificAlbum } from '@/service/Album';
 import { useServiceContext } from '@/service/ServiceContext';
 import { useCountTracksWithAlbumId } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
 
+import { Formidable, useFormidable } from '../formidable';
+import { Button } from '../ui/button';
+
 export type AlbumEditPopUpProps = {};
 
-export const AlbumEditPopUp = ({ }: AlbumEditPopUpProps) => {
+export const AlbumEditPopUp = ({}: AlbumEditPopUpProps) => {
   const { albumId } = useParams();
   const albumIdInt = isNullOrUndefined(albumId)
     ? undefined
@@ -65,21 +62,21 @@ export const AlbumEditPopUp = ({ }: AlbumEditPopUpProps) => {
     );
     onClose();
   };
-  const initialRef = useRef(null);
-  const finalRef = useRef(null);
-  const form = useFormidable<Album>({
+  const initialRef = useRef<HTMLButtonElement>(null);
+  const finalRef = useRef<HTMLButtonElement>(null);
+  const form = useFormidable<AlbumWrite>({
     initialValues: dataAlbum,
+    deltaConfig: { omit: ['covers'] },
   });
-  const onSave = async () => {
+  const onSave = async (deltaData: AlbumWrite) => {
     if (isNullOrUndefined(albumIdInt)) {
       return;
     }
-    const dataThatNeedToBeUpdated = form.getDeltaData({ omit: ['covers'] });
-    console.log(`onSave = ${JSON.stringify(dataThatNeedToBeUpdated, null, 2)}`);
+    console.log(`onSave = ${JSON.stringify(deltaData, null, 2)}`);
     store.update(
       AlbumResource.patch({
         restConfig: session.getRestConfig(),
-        data: dataThatNeedToBeUpdated,
+        data: deltaData,
         params: {
           id: albumIdInt,
         },
@@ -141,106 +138,98 @@ export const AlbumEditPopUp = ({ }: AlbumEditPopUpProps) => {
     );
   };
   return (
-    <Modal
-      initialFocusRef={initialRef}
-      finalFocusRef={finalRef}
-      closeOnOverlayClick={false}
-      onClose={onClose}
-      isOpen={true}
+    <DialogRoot
+      //initialFocusRef={initialRef}
+      //finalFocusRef={finalRef}
+      //closeOnOverlayClick={false}
+      //onOpenChange={onClose}
+      open={true}
+      data-testid="album-edit-pop-up"
     >
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Edit Album</ModalHeader>
-        <ModalCloseButton ref={finalRef} />
+      <DialogContent>
+        <Formidable.From form={form} onSubmitDelta={onSave}>
+          <DialogHeader>Edit Album</DialogHeader>
+          {/* <DialogCloseButton ref={finalRef} /> */}
 
-        <ModalBody pb={6} gap="0px" paddingLeft="18px">
-          {admin && (
-            <>
-              <FormGroup isRequired label="Id">
-                <Text>{dataAlbum?.id}</Text>
-              </FormGroup>
-              {countTracksOfAnAlbum !== 0 && (
-                <Flex paddingLeft="14px">
-                  <MdWarning color="red.600" />
-                  <Text paddingLeft="6px" color="red.600" fontWeight="bold">
-                    Can not remove album {countTracksOfAnAlbum} track(s) depend
-                    on it.
-                  </Text>
-                </Flex>
-              )}
-              <FormGroup label="Action(s):">
-                <Button
-                  onClick={disclosure.onOpen}
-                  marginRight="auto"
-                  variant="@danger"
-                  isDisabled={countTracksOfAnAlbum !== 0}
-                >
-                  <MdDeleteForever /> Remove Media
-                </Button>
-              </FormGroup>
-              <ConfirmPopUp
-                disclosure={disclosure}
-                title="Remove album"
-                body={`Remove Album [${dataAlbum?.id}] ${dataAlbum?.name}`}
-                confirmTitle="Remove"
-                onConfirm={onRemove}
-              />
-            </>
-          )}
-          {!admin && (
-            <>
-              <FormInput
-                form={form}
-                variableName="name"
-                isRequired
-                label="Title"
-                ref={initialRef}
-              />
-              <FormTextarea
-                form={form}
-                variableName="description"
-                label="Description"
-              />
-              <FormInput
-                form={form}
-                variableName="publication"
-                label="Publication"
-              />
-              <FormCovers
-                form={form}
-                variableName="covers"
-                onFilesSelected={onFilesSelected}
-                onUriSelected={onUriSelected}
-                onRemove={onRemoveCover}
-              />
-            </>
-          )}
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            onClick={() => setAdmin((value) => !value)}
-            marginRight="auto"
-          >
-            {admin ? (
+          <DialogBody pb={6} gap="0px" paddingLeft="18px">
+            {admin && (
               <>
-                <MdEdit />
-                Edit
-              </>
-            ) : (
-              <>
-                <MdAdminPanelSettings />
-                Admin
+                <FormGroupShow isRequired label="Id">
+                  <Text>{dataAlbum?.id}</Text>
+                </FormGroupShow>
+                {countTracksOfAnAlbum !== 0 && (
+                  <Flex paddingLeft="14px">
+                    <MdWarning color="red.600" />
+                    <Text paddingLeft="6px" color="red.600" fontWeight="bold">
+                      Can not remove album {countTracksOfAnAlbum} track(s)
+                      depend on it.
+                    </Text>
+                  </Flex>
+                )}
+                <FormGroupShow label="Action(s):">
+                  <Button
+                    onClick={disclosure.onOpen}
+                    marginRight="auto"
+                    colorPalette="@danger"
+                    disabled={countTracksOfAnAlbum !== 0}
+                  >
+                    <MdDeleteForever /> Remove Media
+                  </Button>
+                </FormGroupShow>
+                <ConfirmPopUp
+                  disclosure={disclosure}
+                  title="Remove album"
+                  body={`Remove Album [${dataAlbum?.id}] ${dataAlbum?.name}`}
+                  confirmTitle="Remove"
+                  onConfirm={onRemove}
+                />
               </>
             )}
-          </Button>
-          {!admin && form.isFormModified && (
-            <Button colorScheme="blue" mr={3} onClick={onSave}>
-              Save
+            {!admin && (
+              <>
+                <FormInput
+                  name="name"
+                  isRequired
+                  label="Title"
+                  ref={initialRef}
+                />
+                <FormTextarea name="description" label="Description" />
+                <FormInput name="publication" label="Publication" />
+                <FormCovers
+                  name="covers"
+                  onFilesSelected={onFilesSelected}
+                  onUriSelected={onUriSelected}
+                  onRemove={onRemoveCover}
+                />
+              </>
+            )}
+          </DialogBody>
+          <DialogFooter>
+            <Button
+              onClick={() => setAdmin((value) => !value)}
+              marginRight="auto"
+            >
+              {admin ? (
+                <>
+                  <MdEdit />
+                  Edit
+                </>
+              ) : (
+                <>
+                  <MdAdminPanelSettings />
+                  Admin
+                </>
+              )}
             </Button>
-          )}
-          <Button onClick={onClose}>Cancel</Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+            {!admin && form.isFormModified && (
+              <Button colorScheme="blue" mr={3} type="submit">
+                Save
+              </Button>
+            )}
+            <Button onClick={onClose}>Cancel</Button>
+          </DialogFooter>
+        </Formidable.From>
+      </DialogContent>
+    </DialogRoot>
   );
 };

front/src/components/popup/ArtistEditPopUp.tsx

@@ -1,18 +1,6 @@
 import { useRef, useState } from 'react';
 
-import {
-  Button,
-  Flex,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Text,
-  useDisclosure,
-} from '@chakra-ui/react';
+import { Button, Flex, Text, useDisclosure } from '@chakra-ui/react';
 import {
   MdAdminPanelSettings,
   MdDeleteForever,
@@ -21,21 +9,29 @@ import {
 } from 'react-icons/md';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { Artist, ArtistResource } from '@/back-api';
+import { ArtistResource, ArtistWrite } from '@/back-api';
 import { FormCovers } from '@/components/form/FormCovers';
-import { FormGroup } from '@/components/form/FormGroup';
 import { FormInput } from '@/components/form/FormInput';
 import { FormTextarea } from '@/components/form/FormTextarea';
-import { useFormidable } from '@/components/form/Formidable';
 import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp';
+import {
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+} from '@/components/ui/dialog';
 import { useArtistService, useSpecificArtist } from '@/service/Artist';
 import { useServiceContext } from '@/service/ServiceContext';
 import { useCountTracksOfAnArtist } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
 
+import { FormGroupShow } from '../form/FormGroup';
+import { Formidable, useFormidable } from '../formidable';
+
 export type ArtistEditPopUpProps = {};
 
-export const ArtistEditPopUp = ({ }: ArtistEditPopUpProps) => {
+export const ArtistEditPopUp = ({}: ArtistEditPopUpProps) => {
   const { artistId } = useParams();
   const artistIdInt = isNullOrUndefined(artistId)
     ? undefined
@@ -65,21 +61,21 @@ export const ArtistEditPopUp = ({ }: ArtistEditPopUpProps) => {
     );
     onClose();
   };
-  const initialRef = useRef(null);
-  const finalRef = useRef(null);
-  const form = useFormidable<Artist>({
+  const initialRef = useRef<HTMLButtonElement>(null);
+  const finalRef = useRef<HTMLButtonElement>(null);
+  const form = useFormidable<ArtistWrite>({
     initialValues: dataArtist,
+    deltaConfig: { omit: ['covers'] },
   });
-  const onSave = async () => {
+  const onSave = async (dataDelta: ArtistWrite) => {
     if (isNullOrUndefined(artistIdInt)) {
       return;
     }
-    const dataThatNeedToBeUpdated = form.getDeltaData({ omit: ['covers'] });
-    console.log(`onSave = ${JSON.stringify(dataThatNeedToBeUpdated, null, 2)}`);
+    console.log(`onSave = ${JSON.stringify(dataDelta, null, 2)}`);
     store.update(
       ArtistResource.patch({
         restConfig: session.getRestConfig(),
-        data: dataThatNeedToBeUpdated,
+        data: dataDelta,
         params: {
           id: artistIdInt,
         },
@@ -140,109 +136,103 @@ export const ArtistEditPopUp = ({ }: ArtistEditPopUpProps) => {
     );
   };
   return (
-    <Modal
-      initialFocusRef={initialRef}
-      finalFocusRef={finalRef}
-      closeOnOverlayClick={false}
-      onClose={onClose}
-      isOpen={true}
+    <DialogRoot
+      //initialFocusRef={initialRef}
+      //finalFocusRef={finalRef}
+      //closeOnOverlayClick={false}
+      onOpenChange={onClose}
+      open={true}
+      data-testid="artist-edit-pop-up"
     >
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Edit Artist</ModalHeader>
-        <ModalCloseButton ref={finalRef} />
+      {/* <DialogOverlay /> */}
+      <DialogContent>
+        <Formidable.From form={form} onSubmitDelta={onSave}>
+          <DialogHeader>Edit Artist</DialogHeader>
+          {/* <DialogCloseButton ref={finalRef} /> */}
 
-        <ModalBody pb={6} gap="0px" paddingLeft="18px">
-          {admin && (
-            <>
-              <FormGroup isRequired label="Id">
-                <Text>{dataArtist?.id}</Text>
-              </FormGroup>
-              {countTracksOnAnArtist !== 0 && (
-                <Flex paddingLeft="14px">
-                  <MdWarning color="red.600" />
-                  <Text paddingLeft="6px" color="red.600" fontWeight="bold">
-                    Can not remove artist {countTracksOnAnArtist} track(s)
-                    depend on it.
-                  </Text>
-                </Flex>
-              )}
-              <FormGroup label="Action(s):">
-                <Button
-                  onClick={disclosure.onOpen}
-                  marginRight="auto"
-                  variant="@danger"
-                  isDisabled={countTracksOnAnArtist !== 0}
-                >
-                  <MdDeleteForever /> Remove Media
-                </Button>
-              </FormGroup>
-              <ConfirmPopUp
-                disclosure={disclosure}
-                title="Remove artist"
-                body={`Remove Artist [${dataArtist?.id}] ${dataArtist?.name}`}
-                confirmTitle="Remove"
-                onConfirm={onRemove}
-              />
-            </>
-          )}
-          {!admin && (
-            <>
-              <FormInput
-                form={form}
-                variableName="name"
-                isRequired
-                label="Artist name"
-                ref={initialRef}
-              />
-              <FormTextarea
-                form={form}
-                variableName="description"
-                label="Description"
-              />
-              <FormInput
-                form={form}
-                variableName="firstName"
-                label="First Name"
-              />
-              <FormInput form={form} variableName="surname" label="SurName" />
-              <FormInput form={form} variableName="birth" label="Birth date" />
-              <FormInput form={form} variableName="death" label="Death date" />
-              <FormCovers
-                form={form}
-                variableName="covers"
-                onFilesSelected={onFilesSelected}
-                onUriSelected={onUriSelected}
-                onRemove={onRemoveCover}
-              />
-            </>
-          )}
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            onClick={() => setAdmin((value) => !value)}
-            marginRight="auto"
-          >
-            {admin ? (
+          <DialogBody pb={6} gap="0px" paddingLeft="18px">
+            {admin && (
               <>
-                <MdEdit />
-                Edit
-              </>
-            ) : (
-              <>
-                <MdAdminPanelSettings />
-                Admin
+                <FormGroupShow isRequired label="Id">
+                  <Text>{dataArtist?.id}</Text>
+                </FormGroupShow>
+                {countTracksOnAnArtist !== 0 && (
+                  <Flex paddingLeft="14px">
+                    <MdWarning color="red.600" />
+                    <Text paddingLeft="6px" color="red.600" fontWeight="bold">
+                      Can not remove artist {countTracksOnAnArtist} track(s)
+                      depend on it.
+                    </Text>
+                  </Flex>
+                )}
+                <FormGroupShow label="Action(s):">
+                  <Button
+                    onClick={disclosure.onOpen}
+                    marginRight="auto"
+                    colorPalette="@danger"
+                    disabled={countTracksOnAnArtist !== 0}
+                  >
+                    <MdDeleteForever /> Remove Media
+                  </Button>
+                </FormGroupShow>
+                <ConfirmPopUp
+                  disclosure={disclosure}
+                  title="Remove artist"
+                  body={`Remove Artist [${dataArtist?.id}] ${dataArtist?.name}`}
+                  confirmTitle="Remove"
+                  onConfirm={onRemove}
+                />
               </>
             )}
-          </Button>
-          {!admin && form.isFormModified && (
-            <Button colorScheme="blue" mr={3} onClick={onSave}>
-              Save
+            {!admin && (
+              <>
+                <FormInput
+                  name="name"
+                  isRequired
+                  label="Artist name"
+                  ref={initialRef}
+                />
+                <FormTextarea name="description" label="Description" />
+                <FormInput name="firstName" label="First Name" />
+                <FormInput name="surname" label="SurName" />
+                <FormInput name="birth" label="Birth date" />
+                <FormInput name="death" label="Death date" />
+                <FormCovers
+                  name="covers"
+                  onFilesSelected={onFilesSelected}
+                  onUriSelected={onUriSelected}
+                  onRemove={onRemoveCover}
+                />
+              </>
+            )}
+          </DialogBody>
+          <DialogFooter>
+            <Button
+              onClick={() => setAdmin((value) => !value)}
+              marginRight="auto"
+              colorPalette={admin ? undefined : '@danger'}
+            >
+              {admin ? (
+                <>
+                  <MdEdit />
+                  Edit
+                </>
+              ) : (
+                <>
+                  <MdAdminPanelSettings />
+                  Admin
+                </>
+              )}
             </Button>
-          )}
-          <Button onClick={onClose}>Cancel</Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+            {!admin && form.isFormModified && (
+              <Button colorScheme="blue" mr={3} type="submit">
+                Save
+              </Button>
+            )}
+            <Button onClick={onClose}>Cancel</Button>
+          </DialogFooter>
+        </Formidable.From>
+      </DialogContent>
+    </DialogRoot>
   );
 };

front/src/components/popup/ConfirmPopUp.tsx

@@ -1,15 +1,14 @@
 import { useRef } from 'react';
 
+import { Button, UseDisclosureReturn } from '@chakra-ui/react';
+
 import {
-  AlertDialog,
-  AlertDialogBody,
-  AlertDialogContent,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  Button,
-  UseDisclosureReturn,
-} from '@chakra-ui/react';
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+} from '@/components/ui/dialog';
 
 export type ConfirmPopUpProps = {
   title: string;
@@ -30,31 +29,31 @@ export const ConfirmPopUp = ({
     onConfirm();
     disclosure.onClose();
   };
-  const cancelRef = useRef(null);
+  const cancelRef = useRef<HTMLButtonElement>(null);
   return (
-    <AlertDialog
-      isOpen={disclosure.isOpen}
-      leastDestructiveRef={cancelRef}
-      onClose={disclosure.onClose}
+    <DialogRoot
+      role="alertdialog"
+      open={disclosure.open}
+      //leastDestructiveRef={cancelRef}
+      onOpenChange={disclosure.onClose}
+      data-testid="confirm-pop-up"
     >
-      <AlertDialogOverlay>
-        <AlertDialogContent>
-          <AlertDialogHeader fontSize="lg" fontWeight="bold">
-            {title}
-          </AlertDialogHeader>
+      <DialogContent>
+        <DialogHeader fontSize="lg" fontWeight="bold">
+          {title}
+        </DialogHeader>
 
-          <AlertDialogBody>{body}</AlertDialogBody>
+        <DialogBody>{body}</DialogBody>
 
-          <AlertDialogFooter>
-            <Button onClick={disclosure.onClose} ref={cancelRef}>
-              Cancel
-            </Button>
-            <Button colorScheme="red" onClick={onClickConfirm} ml={3}>
-              {confirmTitle}
-            </Button>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialogOverlay>
-    </AlertDialog>
+        <DialogFooter>
+          <Button onClick={disclosure.onClose} ref={cancelRef}>
+            Cancel
+          </Button>
+          <Button colorScheme="red" onClick={onClickConfirm} ml={3}>
+            {confirmTitle}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </DialogRoot>
   );
 };

front/src/components/popup/GenderEditPopUp.tsx

@@ -1,18 +1,6 @@
 import { useRef, useState } from 'react';
 
-import {
-  Button,
-  Flex,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Text,
-  useDisclosure,
-} from '@chakra-ui/react';
+import { Button, Flex, Text, useDisclosure } from '@chakra-ui/react';
 import {
   MdAdminPanelSettings,
   MdDeleteForever,
@@ -21,21 +9,29 @@ import {
 } from 'react-icons/md';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { Gender, GenderResource } from '@/back-api';
+import { GenderResource, GenderWrite } from '@/back-api';
 import { FormCovers } from '@/components/form/FormCovers';
-import { FormGroup } from '@/components/form/FormGroup';
 import { FormInput } from '@/components/form/FormInput';
 import { FormTextarea } from '@/components/form/FormTextarea';
-import { useFormidable } from '@/components/form/Formidable';
 import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp';
+import {
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+} from '@/components/ui/dialog';
 import { useGenderService, useSpecificGender } from '@/service/Gender';
 import { useServiceContext } from '@/service/ServiceContext';
 import { useCountTracksOfAGender } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
 
+import { FormGroupShow } from '../form/FormGroup';
+import { Formidable, useFormidable } from '../formidable';
+
 export type GenderEditPopUpProps = {};
 
-export const GenderEditPopUp = ({ }: GenderEditPopUpProps) => {
+export const GenderEditPopUp = ({}: GenderEditPopUpProps) => {
   const { genderId } = useParams();
   const genderIdInt = isNullOrUndefined(genderId)
     ? undefined
@@ -65,21 +61,21 @@ export const GenderEditPopUp = ({ }: GenderEditPopUpProps) => {
     );
     onClose();
   };
-  const initialRef = useRef(null);
-  const finalRef = useRef(null);
-  const form = useFormidable<Gender>({
+  const initialRef = useRef<HTMLButtonElement>(null);
+  const finalRef = useRef<HTMLButtonElement>(null);
+  const form = useFormidable<GenderWrite>({
     initialValues: dataGender,
+    deltaConfig: { omit: ['covers'] },
   });
-  const onSave = async () => {
+  const onSave = async (dataDelta: GenderWrite) => {
     if (isNullOrUndefined(genderIdInt)) {
       return;
     }
-    const dataThatNeedToBeUpdated = form.getDeltaData({ omit: ['covers'] });
-    console.log(`onSave = ${JSON.stringify(dataThatNeedToBeUpdated, null, 2)}`);
+    console.log(`onSave = ${JSON.stringify(dataDelta, null, 2)}`);
     store.update(
       GenderResource.patch({
         restConfig: session.getRestConfig(),
-        data: dataThatNeedToBeUpdated,
+        data: dataDelta,
         params: {
           id: genderIdInt,
         },
@@ -139,101 +135,98 @@ export const GenderEditPopUp = ({ }: GenderEditPopUpProps) => {
     );
   };
   return (
-    <Modal
-      initialFocusRef={initialRef}
-      finalFocusRef={finalRef}
-      closeOnOverlayClick={false}
-      onClose={onClose}
-      isOpen={true}
+    <DialogRoot
+      //initialFocusRef={initialRef}
+      //finalFocusRef={finalRef}
+      //closeOnOverlayClick={false}
+      onOpenChange={onClose}
+      open={true}
+      data-testid="gender-edit-pop-up"
     >
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Edit Gender</ModalHeader>
-        <ModalCloseButton ref={finalRef} />
+      {/* <DialogOverlay /> */}
+      <DialogContent>
+        <Formidable.From form={form} onSubmitDelta={onSave}>
+          <DialogHeader>Edit Gender</DialogHeader>
+          {/* <DialogCloseButton ref={finalRef} /> */}
 
-        <ModalBody pb={6} gap="0px" paddingLeft="18px">
-          {admin && (
-            <>
-              <FormGroup isRequired label="Id">
-                <Text>{dataGender?.id}</Text>
-              </FormGroup>
-              {countTracksOnAGender !== 0 && (
-                <Flex paddingLeft="14px">
-                  <MdWarning color="red.600" />
-                  <Text paddingLeft="6px" color="red.600" fontWeight="bold">
-                    Can not remove gender {countTracksOnAGender} track(s) depend
-                    on it.
-                  </Text>
-                </Flex>
-              )}
-              <FormGroup label="Action(s):">
-                <Button
-                  onClick={disclosure.onOpen}
-                  marginRight="auto"
-                  variant="@danger"
-                  isDisabled={countTracksOnAGender !== 0}
-                >
-                  <MdDeleteForever /> Remove gender
-                </Button>
-              </FormGroup>
-              <ConfirmPopUp
-                disclosure={disclosure}
-                title="Remove gender"
-                body={`Remove gender [${dataGender?.id}] ${dataGender?.name}`}
-                confirmTitle="Remove"
-                onConfirm={onRemove}
-              />
-            </>
-          )}
-          {!admin && (
-            <>
-              <FormInput
-                form={form}
-                variableName="name"
-                isRequired
-                label="Gender name"
-                ref={initialRef}
-              />
-              <FormTextarea
-                form={form}
-                variableName="description"
-                label="Description"
-              />
-              <FormCovers
-                form={form}
-                variableName="covers"
-                onFilesSelected={onFilesSelected}
-                onUriSelected={onUriSelected}
-                onRemove={onRemoveCover}
-              />
-            </>
-          )}
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            onClick={() => setAdmin((value) => !value)}
-            marginRight="auto"
-          >
-            {admin ? (
+          <DialogBody pb={6} gap="0px" paddingLeft="18px">
+            {admin && (
               <>
-                <MdEdit />
-                Edit
-              </>
-            ) : (
-              <>
-                <MdAdminPanelSettings />
-                Admin
+                <FormGroupShow isRequired label="Id">
+                  <Text>{dataGender?.id}</Text>
+                </FormGroupShow>
+                {countTracksOnAGender !== 0 && (
+                  <Flex paddingLeft="14px">
+                    <MdWarning color="red.600" />
+                    <Text paddingLeft="6px" color="red.600" fontWeight="bold">
+                      Can not remove gender {countTracksOnAGender} track(s)
+                      depend on it.
+                    </Text>
+                  </Flex>
+                )}
+                <FormGroupShow label="Action(s):">
+                  <Button
+                    onClick={disclosure.onOpen}
+                    marginRight="auto"
+                    colorPalette="@danger"
+                    disabled={countTracksOnAGender !== 0}
+                  >
+                    <MdDeleteForever /> Remove gender
+                  </Button>
+                </FormGroupShow>
+                <ConfirmPopUp
+                  disclosure={disclosure}
+                  title="Remove gender"
+                  body={`Remove gender [${dataGender?.id}] ${dataGender?.name}`}
+                  confirmTitle="Remove"
+                  onConfirm={onRemove}
+                />
               </>
             )}
-          </Button>
-          {!admin && form.isFormModified && (
-            <Button colorScheme="blue" mr={3} onClick={onSave}>
-              Save
+            {!admin && (
+              <>
+                <FormInput
+                  name="name"
+                  isRequired
+                  label="Gender name"
+                  ref={initialRef}
+                />
+                <FormTextarea name="description" label="Description" />
+                <FormCovers
+                  name="covers"
+                  onFilesSelected={onFilesSelected}
+                  onUriSelected={onUriSelected}
+                  onRemove={onRemoveCover}
+                />
+              </>
+            )}
+          </DialogBody>
+          <DialogFooter>
+            <Button
+              onClick={() => setAdmin((value) => !value)}
+              marginRight="auto"
+            >
+              {admin ? (
+                <>
+                  <MdEdit />
+                  Edit
+                </>
+              ) : (
+                <>
+                  <MdAdminPanelSettings />
+                  Admin
+                </>
+              )}
             </Button>
-          )}
-          <Button onClick={onClose}>Cancel</Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+            {!admin && form.isFormModified && (
+              <Button colorScheme="blue" mr={3} type="submit">
+                Save
+              </Button>
+            )}
+            <Button onClick={onClose}>Cancel</Button>
+          </DialogFooter>
+        </Formidable.From>
+      </DialogContent>
+    </DialogRoot>
   );
 };

front/src/components/popup/PopUpUploadProgress.tsx

@@ -1,38 +1,14 @@
-import { ReactElement, useRef, useState } from 'react';
+import { useRef } from 'react';
+
+import { Button, Flex, Progress, Text } from '@chakra-ui/react';
 
 import {
-  Button,
-  Flex,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Progress,
-  Text,
-  useDisclosure,
-} from '@chakra-ui/react';
-import {
-  MdAdminPanelSettings,
-  MdDeleteForever,
-  MdEdit,
-  MdWarning,
-} from 'react-icons/md';
-import { useNavigate, useParams } from 'react-router-dom';
-
-import { Artist, ArtistResource } from '@/back-api';
-import { FormCovers } from '@/components/form/FormCovers';
-import { FormGroup } from '@/components/form/FormGroup';
-import { FormInput } from '@/components/form/FormInput';
-import { FormTextarea } from '@/components/form/FormTextarea';
-import { useFormidable } from '@/components/form/Formidable';
-import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp';
-import { useArtistService, useSpecificArtist } from '@/service/Artist';
-import { useServiceContext } from '@/service/ServiceContext';
-import { useCountTracksOfAnArtist } from '@/service/Track';
-import { isNullOrUndefined } from '@/utils/validator';
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+} from '@/components/ui/dialog';
 
 export type PopUpUploadProgressProps = {
   title: string;
@@ -63,22 +39,23 @@ export const PopUpUploadProgress = ({
   title,
   totalSize,
 }: PopUpUploadProgressProps) => {
-  const initialRef = useRef(null);
-  const finalRef = useRef(null);
+  const initialRef = useRef<HTMLButtonElement>(null);
+  const finalRef = useRef<HTMLButtonElement>(null);
   return (
-    <Modal
-      initialFocusRef={initialRef}
-      finalFocusRef={finalRef}
-      closeOnOverlayClick={false}
-      onClose={onClose}
-      isOpen={true}
+    <DialogRoot
+      //initialFocusRef={initialRef}
+      //finalFocusRef={finalRef}
+      //closeOnOverlayClick={false}
+      onOpenChange={onClose}
+      open={true}
+      data-testid="upload-progress-edit-pop-up"
     >
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>{title}</ModalHeader>
-        <ModalCloseButton ref={finalRef} />
+      {/* <DialogOverlay /> */}
+      <DialogContent>
+        <DialogHeader>{title}</DialogHeader>
+        {/* <DialogCloseButton ref={finalRef} /> */}
 
-        <ModalBody pb={6} paddingLeft="18px">
+        <DialogBody pb={6} paddingLeft="18px">
           <Flex direction="column" gap="10px">
             {isFinished ? (
               <Text fontSize="20px" fontWeight="bold">
@@ -89,11 +66,11 @@ export const PopUpUploadProgress = ({
                 [{index + 1}/{elements.length}] {elements[index]}
               </Text>
             )}
-            <Progress
+            <Progress.Root
               colorScheme="green"
-              hasStripe
+              striped
               value={currentSize}
-              isAnimated
+              animated
               max={totalSize}
               height="24px"
             />
@@ -109,10 +86,10 @@ export const PopUpUploadProgress = ({
               </Text>
             )}
           </Flex>
-        </ModalBody>
-        <ModalFooter>
+        </DialogBody>
+        <DialogFooter>
           {isFinished ? (
-            <Button onClick={onClose} variant="@success">
+            <Button onClick={onClose} colorPalette="green">
               Ok
             </Button>
           ) : (
@@ -120,8 +97,8 @@ export const PopUpUploadProgress = ({
               Abort
             </Button>
           )}
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+        </DialogFooter>
+      </DialogContent>
+    </DialogRoot>
   );
 };

front/src/components/popup/TrackEditPopUp.tsx

@@ -1,29 +1,24 @@
 import { useRef, useState } from 'react';
 
-import {
-  Button,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Text,
-  useDisclosure,
-} from '@chakra-ui/react';
+import { Button, Text, useDisclosure } from '@chakra-ui/react';
 import { MdAdminPanelSettings, MdDeleteForever, MdEdit } from 'react-icons/md';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { Track, TrackResource } from '@/back-api';
-import { FormGroup } from '@/components/form/FormGroup';
+import { TrackResource, TrackWrite } from '@/back-api';
+import { FormGroupShow } from '@/components/form/FormGroup';
 import { FormInput } from '@/components/form/FormInput';
 import { FormNumber } from '@/components/form/FormNumber';
 import { FormSelect } from '@/components/form/FormSelect';
 import { FormSelectMultiple } from '@/components/form/FormSelectMultiple';
 import { FormTextarea } from '@/components/form/FormTextarea';
-import { useFormidable } from '@/components/form/Formidable';
 import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp';
+import {
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+} from '@/components/ui/dialog';
 import { useOrderedAlbums } from '@/service/Album';
 import { useOrderedArtists } from '@/service/Artist';
 import { useOrderedGenders } from '@/service/Gender';
@@ -31,6 +26,8 @@ import { useServiceContext } from '@/service/ServiceContext';
 import { useSpecificTrack, useTrackService } from '@/service/Track';
 import { isNullOrUndefined } from '@/utils/validator';
 
+import { Formidable, useFormidable } from '../formidable';
+
 export type TrackEditPopUpProps = {};
 
 export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
@@ -65,25 +62,21 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
     );
     onClose();
   };
-  const initialRef = useRef(null);
-  const finalRef = useRef(null);
-  const form = useFormidable<Track>({
-    //onSubmit,
-    //onValuesChange,
+  const initialRef = useRef<HTMLButtonElement>(null);
+  const finalRef = useRef<HTMLButtonElement>(null);
+  const form = useFormidable<TrackWrite>({
     initialValues: dataTrack,
-    //onValid: () => console.log('onValid'),
-    //onInvalid: () => console.log('onInvalid'),
+    deltaConfig: { omit: ['covers'] },
   });
-  const onSave = async () => {
+  const onSave = async (dataDelta: TrackWrite) => {
     if (isNullOrUndefined(trackIdInt)) {
       return;
     }
-    const dataThatNeedToBeUpdated = form.getDeltaData({ omit: ['covers'] });
-    console.log(`onSave = ${JSON.stringify(dataThatNeedToBeUpdated, null, 2)}`);
+    console.log(`onSave = ${JSON.stringify(dataDelta, null, 2)}`);
     store.update(
       TrackResource.patch({
         restConfig: session.getRestConfig(),
-        data: dataThatNeedToBeUpdated,
+        data: dataDelta,
         params: {
           id: trackIdInt,
         },
@@ -91,114 +84,104 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
     );
   };
   return (
-    <Modal
-      initialFocusRef={initialRef}
-      finalFocusRef={finalRef}
-      closeOnOverlayClick={false}
-      onClose={onClose}
-      isOpen={true}
+    <DialogRoot
+      //initialFocusRef={initialRef}
+      //finalFocusRef={finalRef}
+      //closeOnOverlayClick={false}
+      onOpenChange={onClose}
+      open={true}
+      data-testid="track-edit-pop-up"
     >
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Edit Track</ModalHeader>
-        <ModalCloseButton ref={finalRef} />
+      {/* <DialogOverlay /> */}
+      <DialogContent>
+        <Formidable.From form={form} onSubmitDelta={onSave}>
+          <DialogHeader>Edit Track</DialogHeader>
+          {/* <DialogCloseButton ref={finalRef} /> */}
 
-        <ModalBody pb={6} gap="0px" paddingLeft="18px">
-          {admin && (
-            <>
-              <FormGroup isRequired label="Id">
-                <Text>{dataTrack?.id}</Text>
-              </FormGroup>
-              <FormGroup label="Data Id">
-                <Text>{dataTrack?.dataId}</Text>
-              </FormGroup>
-              <FormGroup label="Action(s):">
-                <Button
-                  onClick={disclosure.onOpen}
-                  marginRight="auto"
-                  variant="@danger"
-                >
-                  <MdDeleteForever /> Remove Media
-                </Button>
-              </FormGroup>
-              <ConfirmPopUp
-                disclosure={disclosure}
-                title="Remove track"
-                body={`Remove Media [${dataTrack?.id}] ${dataTrack?.name}`}
-                confirmTitle="Remove"
-                onConfirm={onRemove}
-              />
-            </>
-          )}
-          {!admin && (
-            <>
-              <FormInput
-                form={form}
-                variableName="name"
-                isRequired
-                label="Title"
-                ref={initialRef}
-              />
-              <FormTextarea
-                form={form}
-                variableName="description"
-                label="Description"
-              />
-              <FormSelect
-                form={form}
-                variableName="genderId"
-                options={dataGenders}
-                label="Gender"
-              />
-              <FormSelectMultiple
-                form={form}
-                variableName="artists"
-                options={dataArtist}
-                label="Artist(s)"
-              />
-              <FormSelect
-                form={form}
-                variableName="albumId"
-                options={dataAlbums}
-                label="Album"
-              />
-              <FormNumber
-                form={form}
-                variableName="track"
-                label="Track n°"
-                step={1}
-                defaultValue={0}
-                min={0}
-                max={1000}
-              />
-            </>
-          )}
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            onClick={() => setAdmin((value) => !value)}
-            marginRight="auto"
-          >
-            {admin ? (
+          <DialogBody pb={6} gap="0px" paddingLeft="18px">
+            {admin && (
               <>
-                <MdEdit />
-                Edit
-              </>
-            ) : (
-              <>
-                <MdAdminPanelSettings />
-                Admin
+                <FormGroupShow isRequired label="Id">
+                  <Text>{dataTrack?.id}</Text>
+                </FormGroupShow>
+                <FormGroupShow label="Data Id">
+                  <Text>{dataTrack?.dataId}</Text>
+                </FormGroupShow>
+                <FormGroupShow label="Action(s):">
+                  <Button
+                    onClick={disclosure.onOpen}
+                    marginRight="auto"
+                    colorPalette="@danger"
+                  >
+                    <MdDeleteForever /> Remove Media
+                  </Button>
+                </FormGroupShow>
+                <ConfirmPopUp
+                  disclosure={disclosure}
+                  title="Remove track"
+                  body={`Remove Media [${dataTrack?.id}] ${dataTrack?.name}`}
+                  confirmTitle="Remove"
+                  onConfirm={onRemove}
+                />
               </>
             )}
-          </Button>
-          {!admin && form.isFormModified && (
-            <Button colorScheme="blue" mr={3} onClick={onSave}>
-              Save
+            {!admin && (
+              <>
+                <FormInput
+                  name="name"
+                  isRequired
+                  label="Title"
+                  ref={initialRef}
+                />
+                <FormTextarea name="description" label="Description" />
+                <FormSelect
+                  name="genderId"
+                  options={dataGenders}
+                  label="Gender"
+                />
+                <FormSelectMultiple
+                  name="artists"
+                  options={dataArtist}
+                  label="Artist(s)"
+                />
+                <FormSelect name="albumId" options={dataAlbums} label="Album" />
+                <FormNumber
+                  name="track"
+                  label="Track n°"
+                  step={1}
+                  //defaultValue={0}
+                  min={0}
+                  max={1000}
+                />
+              </>
+            )}
+          </DialogBody>
+          <DialogFooter>
+            <Button
+              onClick={() => setAdmin((value) => !value)}
+              marginRight="auto"
+            >
+              {admin ? (
+                <>
+                  <MdEdit />
+                  Edit
+                </>
+              ) : (
+                <>
+                  <MdAdminPanelSettings />
+                  Admin
+                </>
+              )}
             </Button>
-          )}
-          <Button onClick={onClose}>Cancel</Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+            {!admin && form.isFormModified && (
+              <Button colorScheme="blue" mr={3} type="submit">
+                Save
+              </Button>
+            )}
+            <Button onClick={onClose}>Cancel</Button>
+          </DialogFooter>
+        </Formidable.From>
+      </DialogContent>
+    </DialogRoot>
   );
 };

front/src/components/select/SelectMultiple.tsx

@@ -1,16 +1,6 @@
 import { RefObject, useEffect, useMemo, useRef, useState } from 'react';
 
-import {
-  Button,
-  Flex,
-  Input,
-  Spinner,
-  Tag,
-  TagCloseButton,
-  TagLabel,
-  Wrap,
-  WrapItem,
-} from '@chakra-ui/react';
+import { Button, Flex, HStack, Input, Spinner, Tag } from '@chakra-ui/react';
 import { MdEdit, MdKeyboardArrowDown, MdKeyboardArrowUp } from 'react-icons/md';
 
 import { SelectList, SelectListModel } from '@/components/select/SelectList';
@@ -104,29 +94,37 @@ export const SelectMultiple = ({
   const createNewItem = !onCreate
     ? undefined
     : (data: string) => {
-      onCreate(data);
-      setCurrentSearch(undefined);
-    };
+        onCreate(data);
+        setCurrentSearch(undefined);
+      };
 
   return (
     <Flex direction="column" width="full" gap="0px">
       {selectedOptions && (
-        <Wrap spacing="5px" justify="left" width="full" marginBottom="2px">
+        <HStack
+          wrap="wrap"
+          gap="5px"
+          justify="left"
+          width="full"
+          marginBottom="2px"
+        >
           {selectedOptions.map((data) => (
-            <WrapItem key={data[keyKey]}>
-              <Tag
-                size="md"
-                key="md"
+            <Flex align="flex-start" key={data[keyKey]}>
+              <Tag.Root
+                size="xl"
                 borderRadius="5px"
-                variant="solid"
-                backgroundColor="green.500"
+                variant="surface"
+                backgroundColor="green.800"
               >
-                <TagLabel>{data[keyValue] ?? `id=${data[keyKey]}`}</TagLabel>
-                <TagCloseButton onClick={() => selectValue(data)} />
-              </Tag>
-            </WrapItem>
+                <Tag.Label>{data[keyValue] ?? `id=${data[keyKey]}`}</Tag.Label>
+                <Tag.CloseTrigger
+                  boxSize="5"
+                  onClick={() => selectValue(data)}
+                />
+              </Tag.Root>
+            </Flex>
           ))}
-        </Wrap>
+        </HStack>
       )}
 
       <Flex>
@@ -137,7 +135,13 @@ export const SelectMultiple = ({
           //onSubmit={onSubmit}
           onFocus={() => setShowList(true)}
           onBlur={() => setTimeout(() => setShowList(false), 200)}
-          value={showList ? (currentSearch ?? '') : hasSuggestion ? `suggest: ${currentSearch}` : ''}
+          value={
+            showList
+              ? (currentSearch ?? '')
+              : hasSuggestion
+                ? `suggest: ${currentSearch}`
+                : ''
+          }
           borderRadius="5px 0 0 5px"
         />
         <Button

front/src/components/select/SelectSingle.tsx

@@ -50,7 +50,9 @@ export const SelectSingle = ({
     onCreate ? suggestion : undefined
   );
   useEffect(() => {
-    console.log(`Update suggestion : ${onCreate} ${suggestion} ==> ${onCreate ? suggestion : undefined} .. ${onCreate && !isNullOrUndefined(suggestion) ? true : false}`);
+    console.log(
+      `Update suggestion : ${onCreate} ${suggestion} ==> ${onCreate ? suggestion : undefined} .. ${onCreate && !isNullOrUndefined(suggestion) ? true : false}`
+    );
     setCurrentSearch(onCreate ? suggestion : undefined);
     setHasSuggestion(onCreate && !isNullOrUndefined(suggestion) ? true : false);
   }, [suggestion]);
@@ -95,10 +97,10 @@ export const SelectSingle = ({
   const createNewItem = !onCreate
     ? undefined
     : (data: string) => {
-      onCreate(data);
-      setCurrentSearch(undefined);
-      setHasSuggestion(false);
-    };
+        onCreate(data);
+        setCurrentSearch(undefined);
+        setHasSuggestion(false);
+      };
 
   return (
     <Flex direction="column" width="full" gap="0px">
@@ -110,10 +112,13 @@ export const SelectSingle = ({
           onFocus={() => setShowList(true)}
           onBlur={() => setTimeout(() => setShowList(false), 200)}
           value={
-            showList ? (currentSearch ?? '') : (selectedOptions?.name ?? (hasSuggestion ? `suggest: ${currentSearch}` : ''))
+            showList
+              ? (currentSearch ?? '')
+              : (selectedOptions?.name ??
+                (hasSuggestion ? `suggest: ${currentSearch}` : ''))
           }
           backgroundColor={
-            showList || !selectedOptions ? undefined : 'green.500'
+            showList || !selectedOptions ? undefined : 'green.800'
           }
           borderRadius="5px 0 0 5px"
         />

front/src/components/track/DisplayTrack.tsx

@@ -23,9 +23,7 @@ export const DisplayTrack = ({
         data={track?.covers}
         size="50"
         height="full"
-        iconEmpty={
-          trackActive?.id === track.id ? LuPlay : LuMusic2
-        }
+        iconEmpty={trackActive?.id === track.id ? <LuPlay /> : <LuMusic2 />}
         onClick={onClick}
       />
       <Flex
@@ -38,13 +36,13 @@ export const DisplayTrack = ({
       >
         <Text
           as="span"
-          align="left"
+          alignContent="left"
           fontSize="20px"
           fontWeight="bold"
           userSelect="none"
           marginRight="auto"
           overflow="hidden"
-          noOfLines={[1, 2]}
+          // TODO: noOfLines={[1, 2]}
           marginY="auto"
           color={trackActive?.id === track.id ? 'green.700' : undefined}
         >

front/src/components/track/DisplayTrackFull.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from 'react';
-
 import { Flex, Text } from '@chakra-ui/react';
 import { LuMusic2, LuPlay } from 'react-icons/lu';
 
@@ -26,14 +24,17 @@ export const DisplayTrackFull = ({
   const { dataGender } = useSpecificGender(track?.genderId);
   const { dataArtists } = useSpecificArtists(track?.artists);
   return (
-    <Flex direction="row" width="full" height="full">
+    <Flex
+      direction="row"
+      width="full"
+      height="full"
+      data-testid="display-track-full"
+    >
       <Covers
         data={track?.covers}
-        size="50"
+        size="60px"
         marginY="auto"
-        iconEmpty={
-          trackActive?.id === track.id ? LuPlay : LuMusic2
-        }
+        iconEmpty={trackActive?.id === track.id ? <LuPlay /> : <LuMusic2 />}
         onClick={onClick}
       />
       <Flex
@@ -46,13 +47,13 @@ export const DisplayTrackFull = ({
       >
         <Text
           as="span"
-          align="left"
+          alignContent="left"
           fontSize="20px"
           fontWeight="bold"
           userSelect="none"
           marginRight="auto"
           overflow="hidden"
-          noOfLines={1}
+          // TODO: noOfLines={1}
           color={trackActive?.id === track.id ? 'green.700' : undefined}
         >
           {track.name} {track.track && ` [${track.track}]`}
@@ -60,53 +61,65 @@ export const DisplayTrackFull = ({
         {dataAlbum && (
           <Text
             as="span"
-            align="left"
+            alignContent="left"
             fontSize="15px"
             fontWeight="bold"
             userSelect="none"
             marginRight="auto"
             overflow="hidden"
-            noOfLines={1}
+            //noOfLines={1}
             marginY="auto"
             color={trackActive?.id === track.id ? 'green.700' : undefined}
           >
-            <Text as="span" fontWeight="normal">Album:</Text> {dataAlbum.name}
+            <Text as="span" fontWeight="normal">
+              Album:
+            </Text>{' '}
+            {dataAlbum.name}
           </Text>
         )}
         {dataArtists && (
           <Text
             as="span"
-            align="left"
+            alignContent="left"
             fontSize="15px"
             fontWeight="bold"
             userSelect="none"
             marginRight="auto"
             overflow="hidden"
-            noOfLines={1}
+            //noOfLines={1}
             marginY="auto"
             color={trackActive?.id === track.id ? 'green.700' : undefined}
           >
-            <Text as="span" fontWeight="normal">Artist(s):</Text> {dataArtists.map((data) => data.name).join(', ')}
+            <Text as="span" fontWeight="normal">
+              Artist(s):
+            </Text>{' '}
+            {dataArtists.map((data) => data.name).join(', ')}
           </Text>
         )}
         {dataGender && (
           <Text
             as="span"
-            align="left"
+            alignContent="left"
             fontSize="15px"
             fontWeight="bold"
             userSelect="none"
             marginRight="auto"
             overflow="hidden"
-            noOfLines={1}
+            //noOfLines={1}
             marginY="auto"
             color={trackActive?.id === track.id ? 'green.700' : undefined}
           >
-            <Text as="span" fontWeight="normal">Gender:</Text> {dataGender.name}
+            <Text as="span" fontWeight="normal">
+              Gender:
+            </Text>{' '}
+            {dataGender.name}
           </Text>
         )}
       </Flex>
-      <ContextMenu elements={contextMenu} />
+      <ContextMenu
+        elements={contextMenu}
+        data-testid="display-track-full_context-menu"
+      />
     </Flex>
   );
 };

front/src/components/track/DisplayTrackFullId.tsx

@@ -0,0 +1,30 @@
+import { Track } from '@/back-api';
+import { MenuElement } from '@/components/contextMenu/ContextMenu';
+import { useSpecificTrack } from '@/service/Track';
+
+import { DisplayTrackFull } from './DisplayTrackFull';
+import { DisplayTrackSkeleton } from './DisplayTrackSkeleton';
+
+export type DisplayTrackProps = {
+  trackId: Track['id'];
+  onClick?: () => void;
+  contextMenu?: MenuElement[];
+};
+export const DisplayTrackFullId = ({
+  trackId,
+  onClick,
+  contextMenu,
+}: DisplayTrackProps) => {
+  const { dataTrack } = useSpecificTrack(trackId);
+  if (dataTrack) {
+    return (
+      <DisplayTrackFull
+        track={dataTrack}
+        onClick={onClick}
+        contextMenu={contextMenu}
+      />
+    );
+  } else {
+    return <DisplayTrackSkeleton />;
+  }
+};

front/src/components/track/DisplayTrackSkeleton.tsx

@@ -1,4 +1,4 @@
-import { Flex, Skeleton, SkeletonText } from '@chakra-ui/react';
+import { Flex, Skeleton } from '@chakra-ui/react';
 
 export const DisplayTrackSkeleton = () => {
   return (
@@ -17,13 +17,13 @@ export const DisplayTrackSkeleton = () => {
         paddingLeft="5px"
         overflowX="hidden"
       >
-        <SkeletonText
+        {/* <SkeletonText
           skeletonHeight="20px"
           noOfLines={1}
-          spacing={0}
+          gap={0}
           width="50%"
           marginY="auto"
-        />
+        /> */}
       </Flex>
     </Flex>
   );

front/src/components/ui/avatar.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import * as React from 'react';
+
+import type { GroupProps, SlotRecipeProps } from '@chakra-ui/react';
+import { Avatar as ChakraAvatar, Group } from '@chakra-ui/react';
+
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+
+export interface AvatarProps extends ChakraAvatar.RootProps {
+  name?: string;
+  src?: string;
+  srcSet?: string;
+  loading?: ImageProps['loading'];
+  icon?: React.ReactElement;
+  fallback?: React.ReactNode;
+}
+
+export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+  function Avatar(props, ref) {
+    const { name, src, srcSet, loading, icon, fallback, children, ...rest } =
+      props;
+    return (
+      <ChakraAvatar.Root ref={ref} {...rest}>
+        <AvatarFallback name={name} icon={icon}>
+          {fallback}
+        </AvatarFallback>
+        <ChakraAvatar.Image src={src} srcSet={srcSet} loading={loading} />
+        {children}
+      </ChakraAvatar.Root>
+    );
+  }
+);
+
+interface AvatarFallbackProps extends ChakraAvatar.FallbackProps {
+  name?: string;
+  icon?: React.ReactElement;
+}
+
+const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
+  function AvatarFallback(props, ref) {
+    const { name, icon, children, ...rest } = props;
+    return (
+      <ChakraAvatar.Fallback ref={ref} {...rest}>
+        {children}
+        {name != null && children == null && <>{getInitials(name)}</>}
+        {name == null && children == null && (
+          <ChakraAvatar.Icon asChild={!!icon}>{icon}</ChakraAvatar.Icon>
+        )}
+      </ChakraAvatar.Fallback>
+    );
+  }
+);
+
+function getInitials(name: string) {
+  const names = name.trim().split(' ');
+  const firstName = names[0] != null ? names[0] : '';
+  const lastName = names.length > 1 ? names[names.length - 1] : '';
+  return firstName && lastName
+    ? `${firstName.charAt(0)}${lastName.charAt(0)}`
+    : firstName.charAt(0);
+}
+
+interface AvatarGroupProps extends GroupProps, SlotRecipeProps<'avatar'> {}
+
+export const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
+  function AvatarGroup(props, ref) {
+    const { size, variant, borderless, ...rest } = props;
+    return (
+      <ChakraAvatar.PropsProvider value={{ size, variant, borderless }}>
+        <Group gap="0" spaceX="-3" ref={ref} {...rest} />
+      </ChakraAvatar.PropsProvider>
+    );
+  }
+);

front/src/components/ui/button.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import type { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
+import {
+  AbsoluteCenter,
+  Button as ChakraButton,
+  Span,
+  Spinner,
+} from '@chakra-ui/react';
+
+interface ButtonLoadingProps {
+  loading?: boolean;
+  loadingText?: React.ReactNode;
+}
+
+export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(props, ref) {
+    const { loading, disabled, loadingText, children, ...rest } = props;
+    return (
+      <ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
+        {loading && !loadingText ? (
+          <>
+            <AbsoluteCenter display="inline-flex">
+              <Spinner size="inherit" color="inherit" />
+            </AbsoluteCenter>
+            <Span opacity={0}>{children}</Span>
+          </>
+        ) : loading && loadingText ? (
+          <>
+            <Spinner size="inherit" color="inherit" />
+            {loadingText}
+          </>
+        ) : (
+          children
+        )}
+      </ChakraButton>
+    );
+  }
+);

front/src/components/ui/checkbox.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { Checkbox as ChakraCheckbox } from '@chakra-ui/react';
+
+export interface CheckboxProps extends ChakraCheckbox.RootProps {
+  icon?: React.ReactNode;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  rootRef?: React.Ref<HTMLLabelElement>;
+}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  function Checkbox(props, ref) {
+    const { icon, children, inputProps, rootRef, ...rest } = props;
+    return (
+      <ChakraCheckbox.Root ref={rootRef} {...rest}>
+        <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
+        <ChakraCheckbox.Control>
+          {icon || <ChakraCheckbox.Indicator />}
+        </ChakraCheckbox.Control>
+        {children != null && (
+          <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
+        )}
+      </ChakraCheckbox.Root>
+    );
+  }
+);

front/src/components/ui/close-button.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import type { ButtonProps } from '@chakra-ui/react';
+import { IconButton as ChakraIconButton } from '@chakra-ui/react';
+import { LuX } from 'react-icons/lu';
+
+export type CloseButtonProps = ButtonProps;
+
+export const CloseButton = React.forwardRef<
+  HTMLButtonElement,
+  CloseButtonProps
+>(function CloseButton(props, ref) {
+  return (
+    <ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
+      {props.children ?? <LuX />}
+    </ChakraIconButton>
+  );
+});

front/src/components/ui/color-mode.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import * as React from 'react';
+
+import type { IconButtonProps } from '@chakra-ui/react';
+import { ClientOnly, IconButton, Skeleton } from '@chakra-ui/react';
+import { ThemeProvider, useTheme } from 'next-themes';
+import type { ThemeProviderProps } from 'next-themes';
+import { LuMoon, LuSun } from 'react-icons/lu';
+
+export interface ColorModeProviderProps extends ThemeProviderProps {}
+
+export function ColorModeProvider(props: ColorModeProviderProps) {
+  return (
+    <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
+  );
+}
+
+export type ColorMode = 'light' | 'dark';
+
+export interface UseColorModeReturn {
+  colorMode: ColorMode;
+  setColorMode: (colorMode: ColorMode) => void;
+  toggleColorMode: () => void;
+}
+
+export function useColorMode(): UseColorModeReturn {
+  const { resolvedTheme, setTheme } = useTheme();
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
+  };
+  return {
+    colorMode: resolvedTheme as ColorMode,
+    setColorMode: setTheme,
+    toggleColorMode,
+  };
+}
+
+export function useColorModeValue<T>(light: T, dark: T) {
+  const { colorMode } = useColorMode();
+  return colorMode === 'dark' ? dark : light;
+}
+
+export function ColorModeIcon() {
+  const { colorMode } = useColorMode();
+  return colorMode === 'dark' ? <LuMoon /> : <LuSun />;
+}
+
+interface ColorModeButtonProps extends Omit<IconButtonProps, 'aria-label'> {}
+
+export const ColorModeButton = React.forwardRef<
+  HTMLButtonElement,
+  ColorModeButtonProps
+>(function ColorModeButton(props, ref) {
+  const { toggleColorMode } = useColorMode();
+  return (
+    <ClientOnly fallback={<Skeleton boxSize="8" />}>
+      <IconButton
+        onClick={toggleColorMode}
+        variant="ghost"
+        aria-label="Toggle color mode"
+        size="sm"
+        ref={ref}
+        {...props}
+        css={{
+          _icon: {
+            width: '5',
+            height: '5',
+          },
+        }}
+      >
+        <ColorModeIcon />
+      </IconButton>
+    </ClientOnly>
+  );
+});

front/src/components/ui/dialog.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import { Dialog as ChakraDialog, Portal } from '@chakra-ui/react';
+
+import { CloseButton } from './close-button';
+
+interface DialogContentProps extends ChakraDialog.ContentProps {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+  backdrop?: boolean;
+}
+
+export const DialogContent = React.forwardRef<
+  HTMLDivElement,
+  DialogContentProps
+>(function DialogContent(props, ref) {
+  const {
+    children,
+    portalled = true,
+    portalRef,
+    backdrop = true,
+    ...rest
+  } = props;
+
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      {backdrop && <ChakraDialog.Backdrop />}
+      <ChakraDialog.Positioner>
+        <ChakraDialog.Content ref={ref} {...rest} asChild={false}>
+          {children}
+        </ChakraDialog.Content>
+      </ChakraDialog.Positioner>
+    </Portal>
+  );
+});
+
+export const DialogCloseTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraDialog.CloseTriggerProps
+>(function DialogCloseTrigger(props, ref) {
+  return (
+    <ChakraDialog.CloseTrigger
+      position="absolute"
+      top="2"
+      insetEnd="2"
+      {...props}
+      asChild
+    >
+      <CloseButton size="sm" ref={ref}>
+        {props.children}
+      </CloseButton>
+    </ChakraDialog.CloseTrigger>
+  );
+});
+
+export const DialogRoot = ChakraDialog.Root;
+export const DialogFooter = ChakraDialog.Footer;
+export const DialogHeader = ChakraDialog.Header;
+export const DialogBody = ChakraDialog.Body;
+export const DialogBackdrop = ChakraDialog.Backdrop;
+export const DialogTitle = ChakraDialog.Title;
+export const DialogDescription = ChakraDialog.Description;
+export const DialogTrigger = ChakraDialog.Trigger;
+export const DialogActionTrigger = ChakraDialog.ActionTrigger;

front/src/components/ui/drawer.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+import { Drawer as ChakraDrawer, Portal } from '@chakra-ui/react';
+
+import { CloseButton } from './close-button';
+
+interface DrawerContentProps extends ChakraDrawer.ContentProps {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+  offset?: ChakraDrawer.ContentProps['padding'];
+}
+
+export const DrawerContent = React.forwardRef<
+  HTMLDivElement,
+  DrawerContentProps
+>(function DrawerContent(props, ref) {
+  const { children, portalled = true, portalRef, offset, ...rest } = props;
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      <ChakraDrawer.Positioner padding={offset}>
+        <ChakraDrawer.Content ref={ref} {...rest} asChild={false}>
+          {children}
+        </ChakraDrawer.Content>
+      </ChakraDrawer.Positioner>
+    </Portal>
+  );
+});
+
+export const DrawerCloseTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraDrawer.CloseTriggerProps
+>(function DrawerCloseTrigger(props, ref) {
+  return (
+    <ChakraDrawer.CloseTrigger
+      position="absolute"
+      top="2"
+      insetEnd="2"
+      {...props}
+      asChild
+    >
+      <CloseButton size="sm" ref={ref} />
+    </ChakraDrawer.CloseTrigger>
+  );
+});
+
+export const DrawerTrigger = ChakraDrawer.Trigger;
+export const DrawerRoot = ChakraDrawer.Root;
+export const DrawerFooter = ChakraDrawer.Footer;
+export const DrawerHeader = ChakraDrawer.Header;
+export const DrawerBody = ChakraDrawer.Body;
+export const DrawerBackdrop = ChakraDrawer.Backdrop;
+export const DrawerDescription = ChakraDrawer.Description;
+export const DrawerTitle = ChakraDrawer.Title;
+export const DrawerActionTrigger = ChakraDrawer.ActionTrigger;

front/src/components/ui/field.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import { Field as ChakraField } from '@chakra-ui/react';
+
+export interface FieldProps extends Omit<ChakraField.RootProps, 'label'> {
+  label?: React.ReactNode;
+  helperText?: React.ReactNode;
+  errorText?: React.ReactNode;
+  optionalText?: React.ReactNode;
+}
+
+export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  function Field(props, ref) {
+    const { label, children, helperText, errorText, optionalText, ...rest } =
+      props;
+    return (
+      <ChakraField.Root ref={ref} {...rest}>
+        {label && (
+          <ChakraField.Label>
+            {label}
+            <ChakraField.RequiredIndicator fallback={optionalText} />
+          </ChakraField.Label>
+        )}
+        {children}
+        {helperText && (
+          <ChakraField.HelperText>{helperText}</ChakraField.HelperText>
+        )}
+        {errorText && (
+          <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
+        )}
+      </ChakraField.Root>
+    );
+  }
+);

front/src/components/ui/input-group.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+import type { BoxProps, InputElementProps } from '@chakra-ui/react';
+import { Group, InputElement } from '@chakra-ui/react';
+
+export interface InputGroupProps extends BoxProps {
+  startElementProps?: InputElementProps;
+  endElementProps?: InputElementProps;
+  startElement?: React.ReactNode;
+  endElement?: React.ReactNode;
+  children: React.ReactElement<InputElementProps>;
+  startOffset?: InputElementProps['paddingStart'];
+  endOffset?: InputElementProps['paddingEnd'];
+}
+
+export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
+  function InputGroup(props, ref) {
+    const {
+      startElement,
+      startElementProps,
+      endElement,
+      endElementProps,
+      children,
+      startOffset = '6px',
+      endOffset = '6px',
+      ...rest
+    } = props;
+
+    const child =
+      React.Children.only<React.ReactElement<InputElementProps>>(children);
+
+    return (
+      <Group ref={ref} {...rest}>
+        {startElement && (
+          <InputElement pointerEvents="none" {...startElementProps}>
+            {startElement}
+          </InputElement>
+        )}
+        {React.cloneElement(child, {
+          ...(startElement && {
+            ps: `calc(var(--input-height) - ${startOffset})`,
+          }),
+          ...(endElement && { pe: `calc(var(--input-height) - ${endOffset})` }),
+          ...children.props,
+        })}
+        {endElement && (
+          <InputElement placement="end" {...endElementProps}>
+            {endElement}
+          </InputElement>
+        )}
+      </Group>
+    );
+  }
+);

front/src/components/ui/menu.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import * as React from 'react';
+
+import { AbsoluteCenter, Menu as ChakraMenu, Portal } from '@chakra-ui/react';
+import { LuCheck, LuChevronRight } from 'react-icons/lu';
+
+interface MenuContentProps extends ChakraMenu.ContentProps {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+}
+
+export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(
+  function MenuContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props;
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraMenu.Positioner>
+          <ChakraMenu.Content ref={ref} {...rest} />
+        </ChakraMenu.Positioner>
+      </Portal>
+    );
+  }
+);
+
+export const MenuArrow = React.forwardRef<
+  HTMLDivElement,
+  ChakraMenu.ArrowProps
+>(function MenuArrow(props, ref) {
+  return (
+    <ChakraMenu.Arrow ref={ref} {...props}>
+      <ChakraMenu.ArrowTip />
+    </ChakraMenu.Arrow>
+  );
+});
+
+export const MenuCheckboxItem = React.forwardRef<
+  HTMLDivElement,
+  ChakraMenu.CheckboxItemProps
+>(function MenuCheckboxItem(props, ref) {
+  return (
+    <ChakraMenu.CheckboxItem ref={ref} {...props}>
+      <ChakraMenu.ItemIndicator hidden={false}>
+        <LuCheck />
+      </ChakraMenu.ItemIndicator>
+      {props.children}
+    </ChakraMenu.CheckboxItem>
+  );
+});
+
+export const MenuRadioItem = React.forwardRef<
+  HTMLDivElement,
+  ChakraMenu.RadioItemProps
+>(function MenuRadioItem(props, ref) {
+  const { children, ...rest } = props;
+  return (
+    <ChakraMenu.RadioItem ps="8" ref={ref} {...rest}>
+      <AbsoluteCenter axis="horizontal" left="4" asChild>
+        <ChakraMenu.ItemIndicator>
+          <LuCheck />
+        </ChakraMenu.ItemIndicator>
+      </AbsoluteCenter>
+      <ChakraMenu.ItemText>{children}</ChakraMenu.ItemText>
+    </ChakraMenu.RadioItem>
+  );
+});
+
+export const MenuItemGroup = React.forwardRef<
+  HTMLDivElement,
+  ChakraMenu.ItemGroupProps
+>(function MenuItemGroup(props, ref) {
+  const { title, children, ...rest } = props;
+  return (
+    <ChakraMenu.ItemGroup ref={ref} {...rest}>
+      {title && (
+        <ChakraMenu.ItemGroupLabel userSelect="none">
+          {title}
+        </ChakraMenu.ItemGroupLabel>
+      )}
+      {children}
+    </ChakraMenu.ItemGroup>
+  );
+});
+
+export interface MenuTriggerItemProps extends ChakraMenu.ItemProps {
+  startIcon?: React.ReactNode;
+}
+
+export const MenuTriggerItem = React.forwardRef<
+  HTMLDivElement,
+  MenuTriggerItemProps
+>(function MenuTriggerItem(props, ref) {
+  const { startIcon, children, ...rest } = props;
+  return (
+    <ChakraMenu.TriggerItem ref={ref} {...rest}>
+      {startIcon}
+      {children}
+      <LuChevronRight />
+    </ChakraMenu.TriggerItem>
+  );
+});
+
+export const MenuRadioItemGroup = ChakraMenu.RadioItemGroup;
+export const MenuContextTrigger = ChakraMenu.ContextTrigger;
+export const MenuRoot = ChakraMenu.Root;
+export const MenuSeparator = ChakraMenu.Separator;
+
+export const MenuItem = ChakraMenu.Item;
+export const MenuItemText = ChakraMenu.ItemText;
+export const MenuItemCommand = ChakraMenu.ItemCommand;
+export const MenuTrigger = ChakraMenu.Trigger;

front/src/components/ui/number-input.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { NumberInput as ChakraNumberInput } from '@chakra-ui/react';
+
+export interface NumberInputProps extends ChakraNumberInput.RootProps {}
+
+export const NumberInputRoot = React.forwardRef<
+  HTMLDivElement,
+  NumberInputProps
+>(function NumberInput(props, ref) {
+  const { children, ...rest } = props;
+  return (
+    <ChakraNumberInput.Root ref={ref} variant="outline" {...rest}>
+      {children}
+      <ChakraNumberInput.Control>
+        <ChakraNumberInput.IncrementTrigger />
+        <ChakraNumberInput.DecrementTrigger />
+      </ChakraNumberInput.Control>
+    </ChakraNumberInput.Root>
+  );
+});
+
+export const NumberInputField = ChakraNumberInput.Input;
+export const NumberInputScrubber = ChakraNumberInput.Scrubber;
+export const NumberInputLabel = ChakraNumberInput.Label;

front/src/components/ui/popover.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+import { Popover as ChakraPopover, Portal } from '@chakra-ui/react';
+
+import { CloseButton } from './close-button';
+
+interface PopoverContentProps extends ChakraPopover.ContentProps {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+}
+
+export const PopoverContent = React.forwardRef<
+  HTMLDivElement,
+  PopoverContentProps
+>(function PopoverContent(props, ref) {
+  const { portalled = true, portalRef, ...rest } = props;
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      <ChakraPopover.Positioner>
+        <ChakraPopover.Content ref={ref} {...rest} />
+      </ChakraPopover.Positioner>
+    </Portal>
+  );
+});
+
+export const PopoverArrow = React.forwardRef<
+  HTMLDivElement,
+  ChakraPopover.ArrowProps
+>(function PopoverArrow(props, ref) {
+  return (
+    <ChakraPopover.Arrow {...props} ref={ref}>
+      <ChakraPopover.ArrowTip />
+    </ChakraPopover.Arrow>
+  );
+});
+
+export const PopoverCloseTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraPopover.CloseTriggerProps
+>(function PopoverCloseTrigger(props, ref) {
+  return (
+    <ChakraPopover.CloseTrigger
+      position="absolute"
+      top="1"
+      insetEnd="1"
+      {...props}
+      asChild
+      ref={ref}
+    >
+      <CloseButton size="sm" />
+    </ChakraPopover.CloseTrigger>
+  );
+});
+
+export const PopoverTitle = ChakraPopover.Title;
+export const PopoverDescription = ChakraPopover.Description;
+export const PopoverFooter = ChakraPopover.Footer;
+export const PopoverHeader = ChakraPopover.Header;
+export const PopoverRoot = ChakraPopover.Root;
+export const PopoverBody = ChakraPopover.Body;
+export const PopoverTrigger = ChakraPopover.Trigger;

front/src/components/ui/provider.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
+
+import { ColorModeProvider, type ColorModeProviderProps } from './color-mode';
+
+export function Provider(props: ColorModeProviderProps) {
+  return (
+    <ChakraProvider value={defaultSystem}>
+      <ColorModeProvider {...props} />
+    </ChakraProvider>
+  );
+}

front/src/components/ui/radio.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { RadioGroup as ChakraRadioGroup } from '@chakra-ui/react';
+
+export interface RadioProps extends ChakraRadioGroup.ItemProps {
+  rootRef?: React.Ref<HTMLDivElement>;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+
+export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  function Radio(props, ref) {
+    const { children, inputProps, rootRef, ...rest } = props;
+    return (
+      <ChakraRadioGroup.Item ref={rootRef} {...rest}>
+        <ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
+        <ChakraRadioGroup.ItemIndicator />
+        {children && (
+          <ChakraRadioGroup.ItemText>{children}</ChakraRadioGroup.ItemText>
+        )}
+      </ChakraRadioGroup.Item>
+    );
+  }
+);
+
+export const RadioGroup = ChakraRadioGroup.Root;

front/src/components/ui/slider.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+
+import { Slider as ChakraSlider, For, HStack } from '@chakra-ui/react';
+
+export interface SliderProps extends ChakraSlider.RootProps {
+  marks?: Array<number | { value: number; label: React.ReactNode }>;
+  label?: React.ReactNode;
+  showValue?: boolean;
+}
+
+export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
+  function Slider(props, ref) {
+    const { marks: marksProp, label, showValue, ...rest } = props;
+    const value = props.defaultValue ?? props.value;
+
+    const marks = marksProp?.map((mark) => {
+      if (typeof mark === 'number') return { value: mark, label: undefined };
+      return mark;
+    });
+
+    const hasMarkLabel = !!marks?.some((mark) => mark.label);
+
+    return (
+      <ChakraSlider.Root ref={ref} thumbAlignment="center" {...rest}>
+        {label && !showValue && (
+          <ChakraSlider.Label>{label}</ChakraSlider.Label>
+        )}
+        {label && showValue && (
+          <HStack justify="space-between">
+            <ChakraSlider.Label>{label}</ChakraSlider.Label>
+            <ChakraSlider.ValueText />
+          </HStack>
+        )}
+        <ChakraSlider.Control data-has-mark-label={hasMarkLabel || undefined}>
+          <ChakraSlider.Track>
+            <ChakraSlider.Range />
+          </ChakraSlider.Track>
+          <SliderThumbs value={value} />
+          <SliderMarks marks={marks} />
+        </ChakraSlider.Control>
+      </ChakraSlider.Root>
+    );
+  }
+);
+
+function SliderThumbs(props: { value?: number[] }) {
+  const { value } = props;
+  return (
+    <For each={value}>
+      {(_, index) => (
+        <ChakraSlider.Thumb key={index} index={index}>
+          <ChakraSlider.HiddenInput />
+        </ChakraSlider.Thumb>
+      )}
+    </For>
+  );
+}
+
+interface SliderMarksProps {
+  marks?: Array<number | { value: number; label: React.ReactNode }>;
+}
+
+const SliderMarks = React.forwardRef<HTMLDivElement, SliderMarksProps>(
+  function SliderMarks(props, ref) {
+    const { marks } = props;
+    if (!marks?.length) return null;
+
+    return (
+      <ChakraSlider.MarkerGroup ref={ref}>
+        {marks.map((mark, index) => {
+          const value = typeof mark === 'number' ? mark : mark.value;
+          const label = typeof mark === 'number' ? undefined : mark.label;
+          return (
+            <ChakraSlider.Marker key={index} value={value}>
+              <ChakraSlider.MarkerIndicator />
+              {label}
+            </ChakraSlider.Marker>
+          );
+        })}
+      </ChakraSlider.MarkerGroup>
+    );
+  }
+);