diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index a4fef7ef..c21b2200 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -37,19 +37,15 @@ const preview = { docs: { autodocs: true, container: DocsContainer, + controls: { exclude: ["darkMode"] }, }, darkMode: { light: lightTheme, dark: darkTheme, }, controls: { - exclude: [ - "activeControls", - "initialPage", - "autoSuggesterLoading", - "shortcut", - "filterDescription", - ], + exclude: ["activeControls", "shortcut", "filterDescription"], + expanded: true, }, }, argTypes: { @@ -58,6 +54,14 @@ const preview = { "description": "Global color scheme enabled, light or dark, it change only the color scheme of the Canvas", }, + initialPage: { + table: { disable: true }, + control: { type: "text" }, + }, + autoSuggesterLoading: { + table: { disable: true }, + control: { type: "boolean" }, + }, }, decorators: [ (Story, context) => { diff --git a/src/stories/checkboxBoolean/default.ts b/src/stories/checkboxBoolean/default.ts index 453d656e..2a885d30 100644 --- a/src/stories/checkboxBoolean/default.ts +++ b/src/stories/checkboxBoolean/default.ts @@ -53,447 +53,3 @@ export const source: LunaticSource = { "id": "lsvuvtbg", "maxPage": "1", }; - -export const toto: LunaticSource = { - "cleaning": {}, - "variables": [ - { - "variableType": "COLLECTED", - "values": { - "COLLECTED": null, - "EDITED": null, - "INPUTED": null, - "FORCED": null, - "PREVIOUS": null, - }, - "name": "COMMENT_QE", - }, - { - "variableType": "EXTERNAL", - "name": "EXTERNAL1", - "value": null, - }, - { - "variableType": "COLLECTED", - "values": { - "COLLECTED": null, - "EDITED": null, - "INPUTED": null, - "FORCED": null, - "PREVIOUS": null, - }, - "name": "Q1", - }, - { - "variableType": "COLLECTED", - "values": { - "COLLECTED": null, - "EDITED": null, - "INPUTED": null, - "FORCED": null, - "PREVIOUS": null, - }, - "name": "Q2", - }, - { - "variableType": "COLLECTED", - "values": { - "COLLECTED": null, - "EDITED": null, - "INPUTED": null, - "FORCED": null, - "PREVIOUS": null, - }, - "name": "Q3", - }, - { - "variableType": "COLLECTED", - "values": { - "COLLECTED": null, - "EDITED": null, - "INPUTED": null, - "FORCED": null, - "PREVIOUS": null, - }, - "name": "Q4", - }, - { - "variableType": "COLLECTED", - "values": { - "COLLECTED": null, - "EDITED": null, - "INPUTED": null, - "FORCED": null, - "PREVIOUS": null, - }, - "name": "Q5", - }, - { - "variableType": "CALCULATED", - "expression": { - "type": "VTL", - "value": "true", - }, - "name": "FILTER_RESULT_Q1", - "inFilter": "false", - }, - { - "variableType": "CALCULATED", - "expression": { - "type": "VTL", - "value": "true", - }, - "name": "FILTER_RESULT_Q2", - "inFilter": "false", - }, - { - "variableType": "CALCULATED", - "expression": { - "type": "VTL", - "value": "true", - }, - "name": "FILTER_RESULT_Q3", - "inFilter": "false", - }, - { - "variableType": "CALCULATED", - "expression": { - "type": "VTL", - "value": "true", - }, - "name": "FILTER_RESULT_Q4", - "inFilter": "false", - }, - { - "variableType": "CALCULATED", - "expression": { - "type": "VTL", - "value": "true", - }, - "name": "FILTER_RESULT_Q5", - "inFilter": "false", - }, - { - "variableType": "CALCULATED", - "bindingDependencies": ["Q3"], - "expression": { - "type": "VTL", - "value": "cast(Q3, integer) + 5", - }, - "name": "CALCULATED1", - "inFilter": "false", - }, - ], - "components": [ - { - "componentType": "Sequence", - "hierarchy": { - "sequence": { - "id": "lk6zlgzm", - "page": "1", - "label": { - "type": "VTL|MD", - "value": '"I - " || "Types of declaration"', - }, - }, - }, - "conditionFilter": { - "type": "VTL", - "value": "true", - }, - "id": "lk6zlgzm", - "page": "1", - "label": { - "type": "VTL|MD", - "value": '"I - " || "Types of declaration"', - }, - }, - { - "componentType": "Input", - "bindingDependencies": ["Q1"], - "response": { - "name": "Q1", - }, - "hierarchy": { - "sequence": { - "id": "lk6zlgzm", - "page": "1", - "label": { - "type": "VTL|MD", - "value": '"I - " || "Types of declaration"', - }, - }, - }, - "conditionFilter": { - "type": "VTL", - "value": "true", - }, - "id": "lk6zkkfr", - "page": "2", - "label": { - "type": "VTL|MD", - "value": '"➡ 1. " || "Question 1"', - }, - "mandatory": false, - "maxLength": 249, - }, - { - "componentType": "Sequence", - "bindingDependencies": ["Q1"], - "hierarchy": { - "sequence": { - "id": "lk6znaqx", - "page": "3", - "label": { - "type": "VTL|MD", - "value": '"II - " || "Dynamic declarations"', - }, - }, - }, - "conditionFilter": { - "type": "VTL", - "value": "true", - }, - "id": "lk6znaqx", - "page": "3", - "label": { - "type": "VTL|MD", - "value": '"II - " || "Dynamic declarations"', - }, - "declarations": [], - }, - { - "componentType": "Input", - "bindingDependencies": ["Q1", "Q2"], - "response": { - "name": "Q2", - }, - "hierarchy": { - "sequence": { - "id": "lk6znaqx", - "page": "3", - "label": { - "type": "VTL|MD", - "value": '"II - " || "Dynamic declarations"', - }, - }, - }, - "conditionFilter": { - "type": "VTL", - "value": "true", - }, - "id": "lk6zs7tw", - "page": "4", - "label": { - "type": "VTL|MD", - "value": '"➡ 2. " || "Question 2"', - }, - "mandatory": false, - "maxLength": 249, - "declarations": [ - { - "declarationType": "STATEMENT", - "id": "lk709w0i-SI", - "label": { - "type": "VTL|MD", - "value": '"Dynamic declaration using one collected: " || Q1', - }, - "position": "BEFORE_QUESTION_TEXT", - }, - ], - }, - { - "componentType": "InputNumber", - "controls": [ - { - "criticality": "ERROR", - "errorMessage": { - "type": "VTL|MD", - "value": '" La valeur doit être comprise entre 0 et 10."', - }, - "typeOfControl": "FORMAT", - "control": { - "type": "VTL", - "value": "not(not(isnull(Q3)) and (0>Q3 or 10Q3)", - }, - "id": "lk709m8o-format-decimal", - }, - ], - "max": 10, - "hierarchy": { - "sequence": { - "id": "lk6znaqx", - "page": "3", - "label": { - "type": "VTL|MD", - "value": '"II - " || "Dynamic declarations"', - }, - }, - }, - "conditionFilter": { - "type": "VTL", - "value": "true", - }, - "label": { - "type": "VTL|MD", - "value": '"➡ 3. " || "Question 3"', - }, - "mandatory": false, - "declarations": [ - { - "declarationType": "STATEMENT", - "id": "lk703vgg-SI", - "label": { - "type": "VTL|MD", - "value": '"Dynamic declaration using two collected: " || Q1 || " and " || Q2', - }, - "position": "BEFORE_QUESTION_TEXT", - }, - ], - "bindingDependencies": ["Q1", "Q2", "Q3"], - "min": 0, - "response": { - "name": "Q3", - }, - "decimals": 0, - "id": "lk709m8o", - "page": "5", - }, - { - "componentType": "CheckboxBoolean", - "bindingDependencies": ["CALCULATED1", "Q4"], - "response": { - "name": "Q4", - }, - "hierarchy": { - "sequence": { - "id": "lk6znaqx", - "page": "3", - "label": { - "type": "VTL|MD", - "value": '"II - " || "Dynamic declarations"', - }, - }, - }, - "conditionFilter": { - "type": "VTL", - "value": "true", - }, - "id": "lk702f0b", - "page": "6", - "label": { - "type": "VTL|MD", - "value": '"➡ 4. " || "Question 4"', - }, - "mandatory": false, - "declarations": [], - }, - { - "componentType": "CheckboxBoolean", - "bindingDependencies": ["EXTERNAL1", "Q5"], - "response": { - "name": "Q5", - }, - "hierarchy": { - "sequence": { - "id": "lk6znaqx", - "page": "3", - "label": { - "type": "VTL|MD", - "value": '"II - " || "Dynamic declarations"', - }, - }, - }, - "conditionFilter": { - "type": "VTL", - "value": "true", - }, - "id": "lk70b3kk", - "page": "7", - "label": { - "type": "VTL|MD", - "value": '"➡ 5. " || "Question 5"', - }, - "mandatory": false, - "declarations": [], - }, - { - "componentType": "Sequence", - "hierarchy": { - "sequence": { - "id": "COMMENT-SEQ", - "page": "8", - "label": { - "type": "VTL|MD", - "value": '"Commentaire"', - }, - }, - }, - "conditionFilter": { - "type": "VTL", - "value": "true", - }, - "id": "COMMENT-SEQ", - "page": "8", - "label": { - "type": "VTL|MD", - "value": '"Commentaire"', - }, - }, - { - "componentType": "Textarea", - "bindingDependencies": ["COMMENT_QE"], - "response": { - "name": "COMMENT_QE", - }, - "hierarchy": { - "sequence": { - "id": "COMMENT-SEQ", - "page": "8", - "label": { - "type": "VTL|MD", - "value": '"Commentaire"', - }, - }, - }, - "conditionFilter": { - "type": "VTL", - "value": "true", - }, - "id": "COMMENT-QUESTION", - "page": "9", - "label": { - "type": "VTL|MD", - "value": '"Avez-vous des remarques concernant l\'enquête ou des commentaires ?"', - }, - "mandatory": false, - "maxLength": 2000, - }, - ], - "pagination": "question", - "resizing": {}, - "label": { - "type": "VTL|MD", - "value": "Eno - Declarations and instructions", - }, - "lunaticModelVersion": "2.5.0", - "modele": "ENODECLARATIONS", - "enoCoreVersion": "2.7.1", - "generatingDate": "29-01-2024 13:50:24", - "missing": false, - "id": "lrkdvib9", - "maxPage": "9", -}; diff --git a/src/stories/paste/default.ts b/src/stories/paste/default.ts index fd126272..19fb3be9 100644 --- a/src/stories/paste/default.ts +++ b/src/stories/paste/default.ts @@ -1,4 +1,4 @@ -import type { LunaticSource } from "@inseefr/lunatic"; +import type { LunaticData, LunaticSource } from "@inseefr/lunatic"; export const source: LunaticSource = { "cleaning": {}, @@ -16,6 +16,16 @@ export const source: LunaticSource = { "name": "NAME", }, }, + { + "id": "seq", + "componentType": "Sequence", + "label": { + "value": '"Bye!"', + "type": "VTL|MD", + }, + "conditionFilter": { "value": "true", "type": "VTL" }, + "page": "2", + }, ], "variables": [ { @@ -42,5 +52,9 @@ export const source: LunaticSource = { "generatingDate": "06-03-2024 12:46:44", "missing": false, "id": "lsvuvtbg", - "maxPage": "1", + "maxPage": "2", +}; + +export const data: LunaticData = { + "COLLECTED": { "NAME": { "COLLECTED": "Bob Dylan" } }, }; diff --git a/src/stories/paste/paste.stories.tsx b/src/stories/paste/paste.stories.tsx index 8f362864..1489c1a6 100644 --- a/src/stories/paste/paste.stories.tsx +++ b/src/stories/paste/paste.stories.tsx @@ -1,23 +1,26 @@ import { Orchestrator } from "../utils/Orchestrator"; import type { StoryObj, Meta } from "@storybook/react"; -import { source } from "./default"; +import { source, data } from "./default"; const meta = { title: "Test/Paste", component: Orchestrator, - - argTypes: { - source: { - control: "object", - }, - }, parameters: { + controls: { include: ["initialPage", "source", "data", "autoSuggesterLoading"] }, docs: { description: { component: "You can paste your questionnaire here to test it.", }, }, }, + argTypes: { + initialPage: { + table: { disable: false }, + }, + autoSuggesterLoading: { + table: { disable: false }, + }, + }, } satisfies Meta; export default meta; @@ -26,6 +29,7 @@ type Story = StoryObj; export const Default = { args: { - source: source, + source, + data, }, } satisfies Story; diff --git a/src/stories/suggester/Suggester.stories.tsx b/src/stories/suggester/Suggester.stories.tsx index f487152d..296957f9 100644 --- a/src/stories/suggester/Suggester.stories.tsx +++ b/src/stories/suggester/Suggester.stories.tsx @@ -17,6 +17,11 @@ const meta = { }, }, }, + argTypes: { + autoSuggesterLoading: { + table: { disable: false }, + }, + }, } satisfies Meta; export default meta; diff --git a/src/stories/utils/Orchestrator.tsx b/src/stories/utils/Orchestrator.tsx index eda34104..40c313d2 100644 --- a/src/stories/utils/Orchestrator.tsx +++ b/src/stories/utils/Orchestrator.tsx @@ -15,56 +15,18 @@ import { slotComponents } from "../.."; import { fr } from "@codegouvfr/react-dsfr"; export type OrchestratorProps = { + /** The survey generated in Lunatic json format */ source: LunaticSource; - data: LunaticData; + /** The initial data */ + data?: LunaticData; activeControls?: boolean; + /** The initial page */ initialPage?: Parameters[2]["initialPage"]; shortcut?: boolean; autoSuggesterLoading: boolean; filterDescription: boolean; }; -function getReferentiel(name: string) { - return fetch(`./nomenclatures/${name}.json`).then(r => r.json()); -} -function Pager({ - goPrevious, - logData, - goNext, - isLast, - isFirst, - pageTag, - maxPage, -}: { - goPrevious: () => void; - logData: () => void; - goNext: () => void; - isLast: boolean; - isFirst: boolean; - pageTag: string; - maxPage?: string; -}) { - if (maxPage && parseInt(maxPage) > 1) { - return ( - <> -
- - -
- -
PAGE: {pageTag}
- - ); - } - return null; -} - const onLogChange: LunaticState["handleChange"] = (response, value, args) => console.log("onChange", { response, value, args }); @@ -74,7 +36,7 @@ export const Orchestrator: (props: OrchestratorProps) => JSX.Element = ({ activeControls = true, initialPage = "1", shortcut = false, - autoSuggesterLoading, + autoSuggesterLoading = false, filterDescription = true, }) => { const { maxPage } = source; @@ -144,3 +106,44 @@ export const Orchestrator: (props: OrchestratorProps) => JSX.Element = ({ ); }; + +function getReferentiel(name: string) { + return fetch(`./nomenclatures/${name}.json`).then(r => r.json()); +} +function Pager({ + goPrevious, + logData, + goNext, + isLast, + isFirst, + pageTag, + maxPage, +}: { + goPrevious: () => void; + logData: () => void; + goNext: () => void; + isLast: boolean; + isFirst: boolean; + pageTag: string; + maxPage?: string; +}) { + if (maxPage && parseInt(maxPage) > 1) { + return ( + <> +
+ + +
+ +
PAGE: {pageTag}
+ + ); + } + return null; +}