Merge pull request #20 from InseeFr/develop

Develop

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@inseefr/lunatic-dsfr",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "description": "Couche graphique pour Lunatic reposant sur le Système de Design de l'État (DSFR)",
     "repository": {
         "type": "git",
@@ -81,7 +81,7 @@
         "typescript": "^4.3.5"
     },
     "dependencies": {
-        "@inseefr/lunatic": "^2.0.7-v2",
+        "@inseefr/lunatic": "2.0.7-v2",
         "classnames": "^2.3.2",
         "sass-loader": "^13.2.0"
     }

src/Dropdown.tsx

@@ -1,5 +1,6 @@
-// import { useId } from "react";
+import { ReactNode, useCallback } from "react";
 import classnames from "classnames";
+import { getState, getStateRelatedMessage } from "./utils/errors/getErrorStates";
 import Select from "@codegouvfr/react-dsfr/Select";
 
 export function Dropdown({
@@ -8,23 +9,51 @@ export function Dropdown({
     onSelect,
     className,
     label,
-    state,
-    stateRelatedMessage,
+    errors,
+    id,
 }: {
     disabled: boolean;
     options: { value: string; label: { props: { expression: string } } }[];
     // eslint-disable-next-line @typescript-eslint/ban-types
     onSelect: Function;
     className: string;
     label: string;
-    state: "success" | "error" | "default" | undefined;
-    stateRelatedMessage: string;
+    id: string;
+    errors: {
+        id: [
+            Pick<
+                {
+                    id: string;
+                    criticality: "INFO" | "WARN" | "ERROR";
+                    typeOfControl: "FORMAT" | "CONSISTENCY";
+                    control: { value: string; type: "VTL" | "VTL|MD" };
+                    errorMessage: { value: string; type: "VTL" | "VTL|MD" };
+                    bindingDependencies: string[];
+                },
+                "id" | "criticality" | "typeOfControl"
+            > & {
+                id: string;
+                criticality: "INFO" | "WARN" | "ERROR";
+                formula: string;
+                labelFormula: string;
+                errorMessage: ReactNode;
+            },
+        ];
+    };
 }) {
     // const selectId = `select-${useId()}`;
+    const state = getState(errors, id);
+    const stateRelatedMessage = getStateRelatedMessage(errors, id);
+    const handleChange = useCallback(
+        function (e: React.ChangeEvent<HTMLSelectElement>) {
+            onSelect(e.target.value);
+        },
+        [onSelect],
+    );
     return (
         <Select
             className={classnames("dropdown-lunatic-dsfr", className, { disabled })}
-            nativeSelectProps={{ onSelect: onSelect() }}
+            nativeSelectProps={{ onChange: handleChange }}
             disabled={disabled}
             label={label}
             state={state}

src/Input.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback } from "react";
+import React, { useCallback, ReactNode } from "react";
 import classnames from "classnames";
+import { getState, getStateRelatedMessage } from "./utils/errors/getErrorStates";
 import { Input as InputDSFR } from "@codegouvfr/react-dsfr/Input";
 
 function checkValue(value: string) {
@@ -13,20 +14,41 @@ export function Input({
     required,
     maxLength,
     label,
-    // description,
+    description,
     id,
-}: // labelledBy,
-{
+    errors,
+}: {
     value: string;
     // eslint-disable-next-line @typescript-eslint/ban-types
     onChange: Function;
     disabled: boolean;
     required: boolean;
     maxLength: number;
     label: string;
-    // description: string,
+    description: string;
     id: string;
-    // labelledBy: number,
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    errors: {
+        id: [
+            Pick<
+                {
+                    id: string;
+                    criticality: "INFO" | "WARN" | "ERROR";
+                    typeOfControl: "FORMAT" | "CONSISTENCY";
+                    control: { value: string; type: "VTL" | "VTL|MD" };
+                    errorMessage: { value: string; type: "VTL" | "VTL|MD" };
+                    bindingDependencies: string[];
+                },
+                "id" | "criticality" | "typeOfControl"
+            > & {
+                id: string;
+                criticality: "INFO" | "WARN" | "ERROR";
+                formula: string;
+                labelFormula: string;
+                errorMessage: ReactNode;
+            },
+        ];
+    };
 }) {
     const handleChange = useCallback(
         function (e: React.ChangeEvent<HTMLInputElement>) {
@@ -36,6 +58,8 @@ export function Input({
         [onChange],
     );
 
+    const state = getState(errors, id);
+    const stateRelatedMessage = getStateRelatedMessage(errors, id);
     return (
         <InputDSFR
             label={label}
@@ -47,6 +71,9 @@ export function Input({
                 required: required,
                 onChange: handleChange,
             }}
+            hintText={description}
+            state={state}
+            stateRelatedMessage={stateRelatedMessage}
         />
     );
 }

src/stories/dropdown/dropdown.stories.tsx

@@ -1,63 +1,21 @@
 // import React from 'react';
 import source from "./source.json";
+import data from "./data.json";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import defaultArgTypes from "../utils/default-arg-types";
-import { Dropdown } from "../../";
+import Orchestrator from "../utils/Orchestrator";
+import * as custom from "../../";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const options = source.components[0].options.map((option: any) => ({
-    value: option.value,
-    label: {
-        props: {
-            expression: option.label.value,
-        },
-    },
-}));
 const stories = {
     title: "Components/Dropdown",
-    component: Dropdown,
+    component: Orchestrator,
     argTypes: defaultArgTypes,
-} as ComponentMeta<typeof Dropdown>;
+} as ComponentMeta<typeof Orchestrator>;
 
 export default stories;
 
-const Template: ComponentStory<typeof Dropdown> = args => (
-    <>
-        <Dropdown
-            {...args}
-            options={options}
-            state="default"
-            stateRelatedMessage={source.components[0].controls.stateRelatedMessage.default}
-        />
-    </>
-);
-
-const TemplateError: ComponentStory<typeof Dropdown> = args => (
-    <>
-        <Dropdown
-            {...args}
-            options={options}
-            state="error"
-            stateRelatedMessage={source.components[0].controls.stateRelatedMessage.error}
-        />
-    </>
-);
-
-const TemplateSuccess: ComponentStory<typeof Dropdown> = args => (
-    <>
-        <Dropdown
-            {...args}
-            options={options}
-            state="success"
-            stateRelatedMessage={source.components[0].controls.stateRelatedMessage.success}
-        />
-    </>
-);
+const Template: ComponentStory<typeof Orchestrator> = args => <Orchestrator {...args} custom={custom} />;
 
 export const Default = Template.bind({});
-export const Error = TemplateError.bind({});
-export const Success = TemplateSuccess.bind({});
 
-Default.args = {};
-Error.args = {};
-Success.args = {};
+Default.args = { source, data };

src/stories/dropdown/source.json

@@ -9,13 +9,36 @@
             "response": {
                 "name": "STATE"
             },
-            "controls": {
-                "stateRelatedMessage": {
-                    "default": "Select a state",
-                    "error": "Error",
-                    "success": "Success"
+            "controls": [
+                {
+                    "id": "j4nw5cqz",
+                    "typeOfControl": "CONSISTENCY",
+                    "criticality": "WARN",
+                    "control": {
+                        "value": "not(nvl(STATE,\"\") = \"13\")",
+                        "type": "VTL"
+                    },
+                    "errorMessage": {
+                        "value": "\"Please choose a state!\"",
+                        "type": "VTL|MD"
+                    },
+                    "bindingDependencies": ["STATE"]
+                },
+                {
+                    "id": "j4nw5cqz",
+                    "typeOfControl": "CONSISTENCY",
+                    "criticality": "INFO",
+                    "control": {
+                        "value": "not(nvl(STATE,\"\") = \"4\")",
+                        "type": "VTL"
+                    },
+                    "errorMessage": {
+                        "value": "\"Idk if this is right, I'm just testing error messages!!\"",
+                        "type": "VTL|MD"
+                    },
+                    "bindingDependencies": ["STATE"]
                 }
-            },
+            ],
             "options": [
                 {
                     "value": "1",

src/stories/input/source.json

@@ -2,9 +2,23 @@
     "components": [
         {
             "componentType": "Input",
+            "bindingDependencies": ["NAME"],
             "label": { "value": "\"What's your name?\"", "type": "VTL|MD" },
             "description": "\"This is a test description\"",
             "conditionFilter": { "value": "true", "type": "VTL" },
+            "controls": [
+                {
+                    "id": "name",
+                    "typeOfControl": "CONSISTENCY",
+                    "criticality": "WARN",
+                    "control": { "value": "not(nvl(NAME,\"\") = \"BLABLA\")", "type": "VTL" },
+                    "errorMessage": {
+                        "value": "\"Merci de renseigner le type de logement\"",
+                        "type": "VTL|MD"
+                    },
+                    "bindingDependencies": ["NAME"]
+                }
+            ],
             "maxLength": 30,
             "id": "name",
             "response": {

src/stories/utils/Orchestrator.tsx

@@ -96,7 +96,7 @@ const Orchestrator: FC<OrchestratorProps> = ({
     source,
     data,
     management = false,
-    activeControls = false,
+    activeControls = true,
     features,
     initialPage = "1",
     getStoreInfo = getStoreInfoRequired,
@@ -121,7 +121,6 @@ const Orchestrator: FC<OrchestratorProps> = ({
         isFirstPage,
         isLastPage,
         waiting,
-        // getErrors,
         getModalErrors,
         getCurrentErrors,
         getData,
@@ -139,10 +138,8 @@ const Orchestrator: FC<OrchestratorProps> = ({
         management,
         activeControls,
     });
-    console.log(getComponents);
+
     const components = getComponents();
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    // const errors = getErrors();
     const modalErrors = getModalErrors();
     const currentErrors = getCurrentErrors();
 
@@ -157,9 +154,9 @@ const Orchestrator: FC<OrchestratorProps> = ({
                         storeName?: string;
                     }) {
                         const { id, componentType, storeName, response, ...other } = component;
-
                         const Component = lunatic[componentType];
                         const storeInfo = storeName ? getStoreInfo(storeName) : {};
+
                         return (
                             <div className="lunatic lunatic-component-dsfr" key={`component-${id}`}>
                                 <Component