Merge pull request #238 from aldbr/main_FEAT_improve-datatable

feat: improve datatable

.gitignore

@@ -38,4 +38,7 @@ yarn-error.log*
 next-env.d.ts
 
 # eslint
-.eslintcache
+.eslintcache
+
+# storybook
+**/.cache

packages/diracx-web-components/.eslintrc.json

@@ -17,7 +17,46 @@
     "import/no-useless-path-segments": ["error"],
     "import/no-unresolved": ["off"],
     "react/prop-types": "off",
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "react/destructuring-assignment": ["error", "always"],
+    "no-restricted-properties": [
+      "error",
+      {
+        "object": "React",
+        "property": "useCallback",
+        "message": "Please import 'useCallback' directly from 'react' instead of 'React.useCallback'."
+      },
+      {
+        "object": "React",
+        "property": "useContext",
+        "message": "Please import 'useContext' directly from 'react' instead of 'React.useContext'."
+      },
+      {
+        "object": "React",
+        "property": "useEffect",
+        "message": "Please import 'useEffect' directly from 'react' instead of 'React.useEffect'."
+      },
+      {
+        "object": "React",
+        "property": "useMemo",
+        "message": "Please import 'useMemo' directly from 'react' instead of 'React.useMemo'."
+      },
+      {
+        "object": "React",
+        "property": "useReducer",
+        "message": "Please import 'useReducer' directly from 'react' instead of 'React.useReducer'."
+      },
+      {
+        "object": "React",
+        "property": "useRef",
+        "message": "Please import 'useRef' directly from 'react' instead of 'React.useRef'."
+      },
+      {
+        "object": "React",
+        "property": "useState",
+        "message": "Please import 'useState' directly from 'react' instead of 'React.useState'."
+      }
+    ]
   },
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

packages/diracx-web-components/components/BaseApp/BaseApp.stories.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 import { StoryObj, Meta } from "@storybook/react";
-import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
 import { Paper } from "@mui/material";
 import { Apps } from "@mui/icons-material";
 import { useOidcAccessToken } from "../../mocks/react-oidc.mock";
-import { useMUITheme } from "../../hooks/theme";
 import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
 import { NavigationProvider } from "../../contexts/NavigationProvider";
+import { ThemeProvider } from "../../contexts/ThemeProvider";
 import BaseApp from "./BaseApp";
 
 const meta = {
@@ -16,18 +15,14 @@ const meta = {
     layout: "centered",
   },
   tags: ["autodocs"],
-  argTypes: {
-    headerSize: { control: "radio" },
-  },
   decorators: [
     (Story) => {
-      const theme = useMUITheme();
       return (
-        <MUIThemeProvider theme={theme}>
+        <ThemeProvider>
           <Paper sx={{ p: 2 }}>
             <Story />
           </Paper>
-        </MUIThemeProvider>
+        </ThemeProvider>
       );
     },
     (Story) => (
@@ -76,9 +71,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const LoggedIn: Story = {
-  args: {
-    headerSize: undefined,
-  },
+  args: {},
   render: (props) => {
     useOidcAccessToken.mockReturnValue({
       accessTokenPayload: { preferred_username: "John Doe" },
@@ -88,9 +81,7 @@ export const LoggedIn: Story = {
 };
 
 export const LoggedOff: Story = {
-  args: {
-    headerSize: undefined,
-  },
+  args: {},
   render: (props) => {
     useOidcAccessToken.mockReturnValue({
       accessTokenPayload: null,

packages/diracx-web-components/components/BaseApp/BaseApp.tsx

@@ -1,19 +1,13 @@
 "use client";
 import { useOidcAccessToken } from "@axa-fr/react-oidc/";
 import { useOIDCContext } from "@/hooks/oidcConfiguration";
-import ApplicationHeader from "@/components/shared/ApplicationHeader";
 
 /**
  * Build the User Dashboard page
  *
  * @returns User Dashboard content
  */
-export default function BaseApplication({
-  headerSize,
-}: {
-  /** The size of the header, optional, will default to h4 */
-  headerSize?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-}) {
+export default function BaseApplication() {
   const { configuration } = useOIDCContext();
   const { accessTokenPayload } = useOidcAccessToken(configuration?.scope);
 
@@ -23,7 +17,6 @@ export default function BaseApplication({
 
   return (
     <div>
-      <ApplicationHeader type="Dashboard" size={headerSize} />
       <h2>Hello {accessTokenPayload["preferred_username"]}</h2>
 
       <p>To start with, select an application in the side bar</p>

packages/diracx-web-components/components/DashboardLayout/ApplicationDialog.stories.tsx

@@ -1,13 +1,12 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { ThemeProvider } from "@mui/material";
 import { useArgs } from "@storybook/core/preview-api";
 
 import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
 import { useOidcAccessToken } from "../../mocks/react-oidc.mock";
 import { applicationList } from "../ApplicationList";
-import { useMUITheme } from "../../hooks/theme";
+import { ThemeProvider } from "../../contexts/ThemeProvider";
 import ApplicationDialog from "./ApplicationDialog";
 
 const meta = {
@@ -31,9 +30,8 @@ const meta = {
       );
     },
     (Story) => {
-      const theme = useMUITheme();
       return (
-        <ThemeProvider theme={theme}>
+        <ThemeProvider>
           <Story />
         </ThemeProvider>
       );

packages/diracx-web-components/components/DashboardLayout/ApplicationDialog.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useState, useContext } from "react";
 import {
   Dialog,
   DialogTitle,
@@ -12,6 +12,15 @@ import {
 import { Close, SvgIconComponent } from "@mui/icons-material";
 import { ApplicationsContext } from "@/contexts/ApplicationsProvider";
 
+interface AppDialogProps {
+  /** Determines whether the dialog is open or not. */
+  appDialogOpen: boolean;
+  /** Function to set the open state of the dialog. */
+  setAppDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  /** Function to handle the creation of a new application. */
+  handleCreateApp: (name: string, icon: SvgIconComponent) => void;
+}
+
 /**
  * Renders a dialog component for creating a new application.
  *
@@ -22,16 +31,9 @@ export default function AppDialog({
   appDialogOpen,
   setAppDialogOpen,
   handleCreateApp,
-}: {
-  /** Determines whether the dialog is open or not. */
-  appDialogOpen: boolean;
-  /** Function to set the open state of the dialog. */
-  setAppDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  /** Function to handle the creation of a new application. */
-  handleCreateApp: (name: string, icon: SvgIconComponent) => void;
-}) {
-  const [appType, setAppType] = React.useState("");
-  const applicationList = React.useContext(ApplicationsContext)[2];
+}: AppDialogProps) {
+  const [appType, setAppType] = useState("");
+  const applicationList = useContext(ApplicationsContext)[2];
   return (
     <Dialog
       open={appDialogOpen}

packages/diracx-web-components/components/DashboardLayout/Dashboard.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Dashboard as DashboardIcon } from "@mui/icons-material";
@@ -23,9 +23,7 @@ const meta = {
   },
   decorators: [
     (Story) => {
-      const [userDashboard, setUserDashboard] = React.useState<
-        DashboardGroup[]
-      >([
+      const [userDashboard, setUserDashboard] = useState<DashboardGroup[]>([
         {
           title: "Group Title",
           extended: true,