@inseefr/lunatic 0.3.2-experimental → 0.3.3-v2

package/src/stories/table/source-roster.json

@@ -0,0 +1,484 @@
+{
+	"components": [
+		{
+			"id": "j6qg8rc6",
+			"componentType": "Table",
+			"mandatory": false,
+			"positioning": "HORIZONTAL",
+			"label": {
+				"value": "➡ 1. Please, complete the following grid with your favourite characters"
+			},
+			"missingResponse": {
+				"name": "TABLE_MISSING"
+			},
+			"header": [{ "label": "Id" }, { "label": "Name" }, { "label": "Age" }],
+			"body": [
+				[
+					{ "label": "1" },
+					{
+						"componentType": "Textarea",
+						"maxLength": 255,
+						"id": "j6qg8rc6-QOP-jbgdl5jb",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS11"
+						}
+					},
+					{
+						"componentType": "InputNumber",
+						"min": 0,
+						"max": 120,
+						"decimals": 0,
+						"id": "j6qg8rc6-QOP-jbgdfndq",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS12"
+						}
+					}
+				],
+				[
+					{ "label": "2" },
+					{
+						"componentType": "Textarea",
+						"maxLength": 255,
+						"id": "j6qg8rc6-QOP-jbgd8lwo",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS21"
+						}
+					},
+					{
+						"componentType": "InputNumber",
+						"min": 0,
+						"max": 120,
+						"decimals": 0,
+						"id": "j6qg8rc6-QOP-jbgd7osi",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS22"
+						}
+					}
+				],
+				[
+					{ "label": "3" },
+					{
+						"componentType": "Textarea",
+						"maxLength": 255,
+						"id": "j6qg8rc6-QOP-jbgdbfag",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS31"
+						}
+					},
+					{
+						"componentType": "InputNumber",
+						"min": 0,
+						"max": 120,
+						"decimals": 0,
+						"id": "j6qg8rc6-QOP-jbgd7bnw",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS32"
+						}
+					}
+				],
+				[
+					{ "label": "4" },
+					{
+						"componentType": "Textarea",
+						"maxLength": 255,
+						"id": "j6qg8rc6-QOP-jbgdlgja",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS41"
+						}
+					},
+					{
+						"componentType": "InputNumber",
+						"min": 0,
+						"max": 120,
+						"decimals": 0,
+						"id": "j6qg8rc6-QOP-jbgd9k71",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS42"
+						}
+					}
+				],
+				[
+					{ "label": "5" },
+					{
+						"componentType": "Textarea",
+						"maxLength": 255,
+						"id": "j6qg8rc6-QOP-jbgd745y",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS51"
+						}
+					},
+					{
+						"componentType": "InputNumber",
+						"min": 0,
+						"max": 120,
+						"decimals": 0,
+						"id": "j6qg8rc6-QOP-jbgdimks",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS52"
+						}
+					}
+				],
+				[
+					{ "label": "6" },
+					{
+						"componentType": "Textarea",
+						"maxLength": 255,
+						"id": "j6qg8rc6-QOP-jbgdjkts",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS61"
+						}
+					},
+					{
+						"componentType": "InputNumber",
+						"min": 0,
+						"max": 120,
+						"decimals": 0,
+						"id": "j6qg8rc6-QOP-jbgdjquz",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS62"
+						}
+					}
+				],
+				[
+					{ "label": "7" },
+					{
+						"componentType": "Textarea",
+						"maxLength": 255,
+						"id": "j6qg8rc6-QOP-jbgdcax7",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS71"
+						}
+					},
+					{
+						"componentType": "InputNumber",
+						"min": 0,
+						"max": 120,
+						"decimals": 0,
+						"id": "j6qg8rc6-QOP-jbgdd2w3",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS72"
+						}
+					}
+				],
+				[
+					{ "label": "8" },
+					{
+						"componentType": "Textarea",
+						"maxLength": 255,
+						"id": "j6qg8rc6-QOP-jbgdjye1",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS81"
+						}
+					},
+					{
+						"componentType": "InputNumber",
+						"min": 0,
+						"max": 120,
+						"decimals": 0,
+						"id": "j6qg8rc6-QOP-jbgdkosc",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS82"
+						}
+					}
+				],
+				[
+					{ "label": "9" },
+					{
+						"componentType": "Textarea",
+						"maxLength": 255,
+						"id": "j6qg8rc6-QOP-jbgd5jet",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS91"
+						}
+					},
+					{
+						"componentType": "InputNumber",
+						"min": 0,
+						"max": 120,
+						"decimals": 0,
+						"id": "j6qg8rc6-QOP-jbgdk0x4",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS92"
+						}
+					}
+				],
+				[
+					{ "label": "10" },
+					{
+						"componentType": "Textarea",
+						"maxLength": 255,
+						"id": "j6qg8rc6-QOP-jbgdjw90",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS101"
+						}
+					},
+					{
+						"componentType": "InputNumber",
+						"min": 0,
+						"max": 120,
+						"decimals": 0,
+						"id": "j6qg8rc6-QOP-jbgd2wgf",
+						"response": {
+							"name": "FAVOURITE_CHARACTERS102"
+						}
+					}
+				]
+			],
+			"lines": { "min": "\"1\"", "max": "\"10\"" }
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS11",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "Homer",
+				"FORCED": "Bart",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS12",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "30",
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS21",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS22",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "20",
+				"FORCED": "21",
+				"EDITED": "22",
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS31",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS32",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS41",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS42",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS51",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS52",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS61",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS62",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS71",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS72",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS81",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS82",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS91",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS92",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS101",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "FAVOURITE_CHARACTERS102",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "TABLE_MISSING",
+			"componentRef": "j6qg8rc6",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/table/{data-default.json → source.json}

@@ -1,19 +1,19 @@
-{
-	"components": [
-		{
-			"id": "j6p29i81",
-			"componentType": "Table",
-			"mandatory": false,
-			"cells": [
-				[
-					{ "label": "" },
-					{ "label": "Header 1", "headerCell": true },
-					{ "label": "Header 2", "headerCell": true }
-				],
-				[{ "label": "Line 1" }, { "label": "Cell 11" }, { "label": "Cell 12" }],
-				[{ "label": "Line 2" }, { "label": "Cell 21" }, { "label": "Cell 22" }],
-				[{ "label": "Line 3" }, { "label": "Cell 31" }, { "label": "Cell 32" }]
-			]
-		}
-	]
-}
+{
+	"components": [
+		{
+			"id": "j6p29i81",
+			"componentType": "Table",
+			"mandatory": false,
+			"header": [
+				{ "label": "" },
+				{ "label": "Header 1" },
+				{ "label": "Header 2" }
+			],
+			"body": [
+				[{ "label": "Line 1" }, { "label": "Cell 11" }, { "label": "Cell 12" }],
+				[{ "label": "Line 2" }, { "label": "Cell 21" }, { "label": "Cell 22" }],
+				[{ "label": "Line 3" }, { "label": "Cell 31" }, { "label": "Cell 32" }]
+			]
+		}
+	]
+}

package/src/stories/table/table.stories.js

@@ -1,82 +1,32 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import Orchestrator from '../utils/orchestrator';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import dataDefault from './data-default';
-import dataOneAxisOneMeasure from './data-one-axis-one-measure';
-import dataOneAxisTwoMeasures from './data-one-axis-two-measures';
-import dataOneHierarchicalAxis from './data-one-hierarchical-axis';
-import dataTwoAxisOneMeasure from './data-two-axis-one-measure';
-import dataRoster from './data-roster';
-import { positioningOptions, featuresOptions } from '../utils/options';
-import { text, boolean, select, object } from '@storybook/addon-knobs/react';
-
-const stories = storiesOf('Table', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator((Component) => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Table />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<Orchestrator
-		id="default"
-		source={dataDefault}
-		label={text('Label', '"I\'m the label of the Table"')}
-		features={select('Features', featuresOptions, ['VTL', 'MD'])}
-		bindings={object('Bindings', { test: 'test' })}
-	/>
-));
-
-stories.addWithJSX('OneAxisOneMeasure', () => (
-	<Orchestrator
-		id="default"
-		source={dataOneAxisOneMeasure}
-		missing={boolean('Missing', false)}
-		management={boolean('Management', false)}
-		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
-	/>
-));
-
-stories.addWithJSX('OneAxisTwoMeasure', () => (
-	<Orchestrator
-		id="default"
-		source={dataOneAxisTwoMeasures}
-		missing={boolean('Missing', false)}
-		management={boolean('Management', false)}
-		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
-	/>
-));
-
-stories.addWithJSX('OneHierarchicalAxis', () => (
-	<Orchestrator
-		id="default"
-		source={dataOneHierarchicalAxis}
-		missing={boolean('Missing', false)}
-		management={boolean('Management', false)}
-		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
-	/>
-));
-
-stories.addWithJSX('TwoAxisOneMeasure', () => (
-	<Orchestrator
-		id="default"
-		source={dataTwoAxisOneMeasure}
-		missing={boolean('Missing', false)}
-		management={boolean('Management', false)}
-		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
-	/>
-));
-
-stories.addWithJSX('Roster', () => (
-	<Orchestrator
-		id="default"
-		source={dataRoster}
-		missing={boolean('Missing', false)}
-		management={boolean('Management', false)}
-		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
-		hideBtn={boolean('Hide button', false)}
-	/>
-));
+import React from 'react';
+import Orchestrator from '../utils/orchestrator';
+import source from './source.json';
+import data from './data.json';
+import sourceRoster from './source-roster.json';
+import dataRoster from './data-roster.json';
+import defaultArgTypes from '../utils/default-arg-types';
+import * as custom from '../custom-mui';
+
+const stories = {
+	title: 'Components/Table',
+	component: Orchestrator,
+	argTypes: defaultArgTypes,
+};
+
+export default stories;
+
+const Template = (args) => <Orchestrator {...args} />;
+
+export const Default = Template.bind({});
+Default.args = { id: 'table', source, data };
+
+export const Roster = Template.bind({});
+Roster.args = { id: 'table', source: sourceRoster, data: dataRoster };
+
+export const RosterMui = Template.bind({});
+RosterMui.args = {
+	id: 'table',
+	source: sourceRoster,
+	data: dataRoster,
+	custom,
+};

package/src/stories/utils/custom-lunatic.scss

@@ -1,23 +1,28 @@
-* {
-	box-sizing: border-box;
-	--color-primary-dark: #2a5885;
-	--color-primary-light: #5181b8;
-	--color-primary-main: #4a73a4;
-	--color-primary-contrast-text: #ffffff;
-
-	--color-secondary-dark: #14202d;
-	--color-secondary-light: #f7f8fa;
-	--color-secondary-main: #1a293b;
-	--color-secondary-contrast-text: #ffffff;
-
-	--color-very-light: #dbe4ef;
-	--color-very-very-light: #e6eaee;
-	--color-current-item: #0d823e;
-
-	--color-error: #f50c0c;
-	--color-disabled: rgb(235, 235, 228);
-}
-
-.pagination {
-	margin-top: 2em;
-}
+* {
+	box-sizing: border-box;
+	--color-primary-dark: #2a5885;
+	--color-primary-light: #5181b8;
+	--color-primary-main: #4a73a4;
+	--color-primary-contrast-text: #ffffff;
+
+	--color-secondary-dark: #14202d;
+	--color-secondary-light: #f7f8fa;
+	--color-secondary-main: #1a293b;
+	--color-secondary-contrast-text: #ffffff;
+
+	--color-very-light: #dbe4ef;
+	--color-very-very-light: #e6eaee;
+	--color-current-item: #0d823e;
+
+	--color-error: #f50c0c;
+	--color-disabled: rgb(235, 235, 228);
+}
+
+.pagination {
+	margin-top: 2em;
+}
+
+.waiting-orchestrator {
+	font-size: 1.5em;
+	font-weight: bold;
+}