@inseefr/lunatic 0.3.0-experimental → 0.3.0-prisme

package/src/stories/dropdown/README.md

@@ -1,44 +1,44 @@
-# Dropdown component
-
-## Props
-
-|      Props       |  Type  | Default value | Required | Description                                          |
-| :--------------: | :----: | :-----------: | :------: | ---------------------------------------------------- |
-|        id        | string |       -       |    ✓     | Id of the dropdown                                   |
-|      label       | string |      ""       |          | Label of the dropdown                                |
-|  preferences \*  | array  | ["COLLECTED"] |          | Preferences to manage dropdown response              |
-|   response \*    | object |      {}       |          | Response concerned by the component                  |
-|    options \*    | array  |       -       |    ✓     | Options of the dropdown                              |
-|   handleChange   |  func  |       -       |    ✓     | Handler of the dropdown                              |
-| placeholderList  | string |      ""       |          | Placeholder of the dropdown                          |
-|     disabled     |  bool  |     false     |          | Is the dropdown disabled                             |
-|     writable     |  bool  |     false     |          | Is the dropdown writable                             |
-|    mandatory     |  bool  |     false     |          | Is the dropdown mandatory                            |
-|    widthAuto     |  bool  |     false     |          | Add the width-auto props for options of the Dropdown |
-| labelPosition \* | string |   "DEFAULT"   |          | Position of the dropdown label                       |
-| declarations \*  | array  |      []       |          | Declarations of the dropdown                         |
-|     features     | array  |      [ ]      |          | Component features for labels                        |
-|     bindings     | object |      [ ]      |          | Questionnaire bindings                               |
-|    management    |  bool  |     false     |          | Management mode of the dropdown                      |
-|      zIndex      | number |       0       |          | z-index of the dropdown                              |
-|      style       | object |      {}       |          | Style of the dropdown                                |
-
-- `preferences` props has to be an ordered array of `COLLECTED`, `FORCED` or `EDITED`
-- `response` props has to be a shape of `{name: string, values: object}`
-- `options` props has to be an array made by objects with a shape of `{label: string, value: string}`
-- `labelPosition` props has to be one of `DEFAULT`, `TOP`, `BOTTOM`, `RIGHT` or `LEFT`
-- `declarations` are documented in the `Declarations` component
-
-## Styles
-
-**Dropdown** component has cascade classes:
-
-- `lunatic-dropdown`
-- `lunatic-dropdown-container`
-- `lunatic-dropdown-content`
-- `lunatic-dropdown-input`
-- `lunatic-icon`
-- `lunatic-transition`
-- `lunatic-dropdown-panel`
-- `lunatic-dropdown-option`
-- `lunatic-prefix`
+# Dropdown component
+
+## Props
+
+|      Props       |  Type  | Default value | Required | Description                                          |
+| :--------------: | :----: | :-----------: | :------: | ---------------------------------------------------- |
+|        id        | string |       -       |    ✓     | Id of the dropdown                                   |
+|      label       | string |      ""       |          | Label of the dropdown                                |
+|  preferences \*  | array  | ["COLLECTED"] |          | Preferences to manage dropdown response              |
+|   response \*    | object |      {}       |          | Response concerned by the component                  |
+|    options \*    | array  |       -       |    ✓     | Options of the dropdown                              |
+|   handleChange   |  func  |       -       |    ✓     | Handler of the dropdown                              |
+| placeholderList  | string |      ""       |          | Placeholder of the dropdown                          |
+|     disabled     |  bool  |     false     |          | Is the dropdown disabled                             |
+|     writable     |  bool  |     false     |          | Is the dropdown writable                             |
+|    mandatory     |  bool  |     false     |          | Is the dropdown mandatory                            |
+|    widthAuto     |  bool  |     false     |          | Add the width-auto props for options of the Dropdown |
+| labelPosition \* | string |   "DEFAULT"   |          | Position of the dropdown label                       |
+| declarations \*  | array  |      []       |          | Declarations of the dropdown                         |
+|     features     | array  |      [ ]      |          | Component features for labels                        |
+|     bindings     | object |      [ ]      |          | Questionnaire bindings                               |
+|    management    |  bool  |     false     |          | Management mode of the dropdown                      |
+|      zIndex      | number |       0       |          | z-index of the dropdown                              |
+|      style       | object |      {}       |          | Style of the dropdown                                |
+
+- `preferences` props has to be an ordered array of `COLLECTED`, `FORCED` or `EDITED`
+- `response` props has to be a shape of `{name: string, values: object}`
+- `options` props has to be an array made by objects with a shape of `{label: string, value: string}`
+- `labelPosition` props has to be one of `DEFAULT`, `TOP`, `BOTTOM`, `RIGHT` or `LEFT`
+- `declarations` are documented in the `Declarations` component
+
+## Styles
+
+**Dropdown** component has cascade classes:
+
+- `lunatic-dropdown`
+- `lunatic-dropdown-container`
+- `lunatic-dropdown-content`
+- `lunatic-dropdown-input`
+- `lunatic-icon`
+- `lunatic-transition`
+- `lunatic-dropdown-panel`
+- `lunatic-dropdown-option`
+- `lunatic-prefix`

package/src/stories/dropdown/data.json

@@ -1,98 +1,98 @@
-{
-	"components": [
-		{
-			"id": "j4nw5cqz",
-			"componentType": "Dropdown",
-			"mandatory": false,
-			"label": "In which state do The Simpsons reside?",
-			"response": {
-				"name": "STATE"
-			},
-			"declarations": [
-				{
-					"id": "d1",
-					"declarationType": "COMMENT",
-					"position": "BEFORE_QUESTION_TEXT",
-					"label": "Test declaration before"
-				},
-				{
-					"id": "d2",
-					"declarationType": "COMMENT",
-					"position": "AFTER_QUESTION_TEXT",
-					"label": "Test declaration after"
-				},
-				{
-					"id": "d3",
-					"declarationType": "COMMENT",
-					"position": "DETACHABLE",
-					"label": "Test detachable declaration"
-				}
-			],
-			"options": [
-				{ "value": "1", "label": "Washington" },
-				{ "value": "2", "label": "Kentucky" },
-				{ "value": "3", "label": "Ohio" },
-				{ "value": "4", "label": "Maine" },
-				{ "value": "5", "label": "North Dakota" },
-				{ "value": "6", "label": "Florida" },
-				{ "value": "7", "label": "North Takoma" },
-				{ "value": "8", "label": "California" },
-				{ "value": "9", "label": "Texas" },
-				{ "value": "10", "label": "Massachusetts" },
-				{ "value": "11", "label": "Nevada" },
-				{ "value": "12", "label": "Illinois" },
-				{ "value": "13", "label": "Not in any state, you fool!" }
-			]
-		},
-		{
-			"id": "j4nw5cqz-bis",
-			"componentType": "Dropdown",
-			"mandatory": false,
-			"label": "In which state do The Simpsons reside?",
-			"response": {
-				"name": "STATE2"
-			},
-			"options": [
-				{ "value": "1", "label": "Washington" },
-				{ "value": "2", "label": "Kentucky" },
-				{ "value": "3", "label": "Ohio" },
-				{ "value": "4", "label": "Maine" },
-				{ "value": "5", "label": "North Dakota" },
-				{ "value": "6", "label": "Florida" },
-				{ "value": "7", "label": "North Takoma" },
-				{ "value": "8", "label": "California" },
-				{ "value": "9", "label": "Texas" },
-				{ "value": "10", "label": "Massachusetts" },
-				{ "value": "11", "label": "Nevada" },
-				{ "value": "12", "label": "Illinois" },
-				{ "value": "13", "label": "Not in any state, you fool!" }
-			]
-		}
-	],
-	"variables": [
-		{
-			"variableType": "COLLECTED",
-			"name": "STATE",
-			"componentRef": "j4nw5cqz",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": "2",
-				"FORCED": "3",
-				"EDITED": null,
-				"INPUTED": null
-			}
-		},
-		{
-			"variableType": "COLLECTED",
-			"name": "STATE2",
-			"componentRef": "j4nw5cqz-bis",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": "3",
-				"FORCED": "2",
-				"EDITED": null,
-				"INPUTED": null
-			}
-		}
-	]
-}
+{
+	"components": [
+		{
+			"id": "j4nw5cqz",
+			"componentType": "Dropdown",
+			"mandatory": false,
+			"label": "In which state do The Simpsons reside?",
+			"response": {
+				"name": "STATE"
+			},
+			"declarations": [
+				{
+					"id": "d1",
+					"declarationType": "COMMENT",
+					"position": "BEFORE_QUESTION_TEXT",
+					"label": "Test declaration before"
+				},
+				{
+					"id": "d2",
+					"declarationType": "COMMENT",
+					"position": "AFTER_QUESTION_TEXT",
+					"label": "Test declaration after"
+				},
+				{
+					"id": "d3",
+					"declarationType": "COMMENT",
+					"position": "DETACHABLE",
+					"label": "Test detachable declaration"
+				}
+			],
+			"options": [
+				{ "value": "1", "label": "Washington" },
+				{ "value": "2", "label": "Kentucky" },
+				{ "value": "3", "label": "Ohio" },
+				{ "value": "4", "label": "Maine" },
+				{ "value": "5", "label": "North Dakota" },
+				{ "value": "6", "label": "Florida" },
+				{ "value": "7", "label": "North Takoma" },
+				{ "value": "8", "label": "California" },
+				{ "value": "9", "label": "Texas" },
+				{ "value": "10", "label": "Massachusetts" },
+				{ "value": "11", "label": "Nevada" },
+				{ "value": "12", "label": "Illinois" },
+				{ "value": "13", "label": "Not in any state, you fool!" }
+			]
+		},
+		{
+			"id": "j4nw5cqz-bis",
+			"componentType": "Dropdown",
+			"mandatory": false,
+			"label": "In which state do The Simpsons reside?",
+			"response": {
+				"name": "STATE2"
+			},
+			"options": [
+				{ "value": "1", "label": "Washington" },
+				{ "value": "2", "label": "Kentucky" },
+				{ "value": "3", "label": "Ohio" },
+				{ "value": "4", "label": "Maine" },
+				{ "value": "5", "label": "North Dakota" },
+				{ "value": "6", "label": "Florida" },
+				{ "value": "7", "label": "North Takoma" },
+				{ "value": "8", "label": "California" },
+				{ "value": "9", "label": "Texas" },
+				{ "value": "10", "label": "Massachusetts" },
+				{ "value": "11", "label": "Nevada" },
+				{ "value": "12", "label": "Illinois" },
+				{ "value": "13", "label": "Not in any state, you fool!" }
+			]
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "STATE",
+			"componentRef": "j4nw5cqz",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "2",
+				"FORCED": "3",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "STATE2",
+			"componentRef": "j4nw5cqz-bis",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "3",
+				"FORCED": "2",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/dropdown/dropdown.stories.js

@@ -1,89 +1,89 @@
-import React, { useState } 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 data from './data';
-import dataProps from './data-props';
-import dataForced from './data-forced';
-import dataNAF from './data-naf';
-import { labelPositionOptions, featuresOptions } from '../utils/options';
-import {
-	text,
-	boolean,
-	select,
-	object,
-	number,
-} from '@storybook/addon-knobs/react';
-
-const stories = storiesOf('Dropdown', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator((Component) => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Dropdown />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<Orchestrator id="default" source={data} />
-));
-
-stories.addWithJSX('Props', () => (
-	<Orchestrator
-		id="props"
-		source={dataProps}
-		placeholderList={text('Placeholder', 'Placeholder')}
-		missing={boolean('Missing', false)}
-		features={select('Features', featuresOptions, ['VTL', 'MD'])}
-		bindings={object('Bindings', { NAME: 'Simpsons', TEXAS: 'Texas' })}
-		disabled={boolean('Disabled', false)}
-		focused={boolean('Focused', false)}
-		writable={boolean('Writable', false)}
-		widthAuto={boolean('Options auto width', false)}
-		labelPosition={select('Label position', labelPositionOptions, 'DEFAULT')}
-		mandatory={boolean('Mandatory', false)}
-		management={boolean('Management', false)}
-		zIndex={number('zIndex', 0)}
-		freezeOptions={boolean('Freeze options', false)}
-	/>
-));
-
-stories.addWithJSX('External update', () => {
-	const Fake = () => {
-		const [up, setUp] = useState(false);
-		return (
-			<>
-				<button
-					type="button"
-					onClick={() => {
-						setUp(true);
-					}}
-					disabled={up}
-				>
-					Force external update
-				</button>
-
-				<Orchestrator id="default" source={up ? dataForced : dataProps} />
-			</>
-		);
-	};
-	return <Fake />;
-});
-
-stories.addWithJSX('Naf', () => (
-	<Orchestrator
-		id="props"
-		source={dataNAF}
-		placeholderList={text('Placeholder', 'Placeholder')}
-		features={select('Features', featuresOptions, ['VTL', 'MD'])}
-		bindings={object('Bindings', { NAME: 'Simpsons', TEXAS: 'Texas' })}
-		disabled={boolean('Disabled', false)}
-		focused={boolean('Focused', false)}
-		writable={boolean('Writable', false)}
-		labelPosition={select('Label position', labelPositionOptions, 'DEFAULT')}
-		mandatory={boolean('Mandatory', false)}
-		management={boolean('Management', false)}
-		zIndex={number('zIndex', 0)}
-		freezeOptions={boolean('Freeze options', true)}
-	/>
-));
+import React, { useState } 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 data from './data';
+import dataProps from './data-props';
+import dataForced from './data-forced';
+import dataNAF from './data-naf';
+import { labelPositionOptions, featuresOptions } from '../utils/options';
+import {
+	text,
+	boolean,
+	select,
+	object,
+	number,
+} from '@storybook/addon-knobs/react';
+
+const stories = storiesOf('Dropdown', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<Dropdown />" />;
+	});
+
+stories.addWithJSX('Default', () => (
+	<Orchestrator id="default" source={data} />
+));
+
+stories.addWithJSX('Props', () => (
+	<Orchestrator
+		id="props"
+		source={dataProps}
+		placeholderList={text('Placeholder', 'Placeholder')}
+		missing={boolean('Missing', false)}
+		features={select('Features', featuresOptions, ['VTL', 'MD'])}
+		bindings={object('Bindings', { NAME: 'Simpsons', TEXAS: 'Texas' })}
+		disabled={boolean('Disabled', false)}
+		focused={boolean('Focused', false)}
+		writable={boolean('Writable', false)}
+		widthAuto={boolean('Options auto width', false)}
+		labelPosition={select('Label position', labelPositionOptions, 'DEFAULT')}
+		mandatory={boolean('Mandatory', false)}
+		management={boolean('Management', false)}
+		zIndex={number('zIndex', 0)}
+		freezeOptions={boolean('Freeze options', false)}
+	/>
+));
+
+stories.addWithJSX('External update', () => {
+	const Fake = () => {
+		const [up, setUp] = useState(false);
+		return (
+			<>
+				<button
+					type="button"
+					onClick={() => {
+						setUp(true);
+					}}
+					disabled={up}
+				>
+					Force external update
+				</button>
+
+				<Orchestrator id="default" source={up ? dataForced : dataProps} />
+			</>
+		);
+	};
+	return <Fake />;
+});
+
+stories.addWithJSX('Naf', () => (
+	<Orchestrator
+		id="props"
+		source={dataNAF}
+		placeholderList={text('Placeholder', 'Placeholder')}
+		features={select('Features', featuresOptions, ['VTL', 'MD'])}
+		bindings={object('Bindings', { NAME: 'Simpsons', TEXAS: 'Texas' })}
+		disabled={boolean('Disabled', false)}
+		focused={boolean('Focused', false)}
+		writable={boolean('Writable', false)}
+		labelPosition={select('Label position', labelPositionOptions, 'DEFAULT')}
+		mandatory={boolean('Mandatory', false)}
+		management={boolean('Management', false)}
+		zIndex={number('zIndex', 0)}
+		freezeOptions={boolean('Freeze options', true)}
+	/>
+));

package/src/stories/progress-bar/progress-bar.stories.js

@@ -1,24 +1,24 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { ProgressBar } from 'components';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-
-const stories = storiesOf('ProgressBar', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator((Component) => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<ProgressBar />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<div className="lunatic-component">
-		{Array.from(new Array(11), (a, i) => (
-			<React.Fragment key={i}>
-				<ProgressBar id={`default-${i * 10}`} value={i * 10} />
-				<br />
-			</React.Fragment>
-		))}
-	</div>
-));
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withReadme } from 'storybook-readme';
+import { ProgressBar } from 'components';
+import readme from './README.md';
+import { titleDecorator } from 'utils/lib';
+
+const stories = storiesOf('ProgressBar', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<ProgressBar />" />;
+	});
+
+stories.addWithJSX('Default', () => (
+	<div className="lunatic-component">
+		{Array.from(new Array(11), (a, i) => (
+			<React.Fragment key={i}>
+				<ProgressBar id={`default-${i * 10}`} value={i * 10} />
+				<br />
+			</React.Fragment>
+		))}
+	</div>
+));

package/src/stories/questionnaire/arithmetic-management.json

@@ -0,0 +1,47 @@
+{
+	"components": [
+		{
+			"id": "A",
+			"componentType": "InputNumber",
+			"mandatory": false,
+			"min": 0,
+			"max": 120,
+			"decimals": 0,
+			"label": "\"How old are you?\"",
+			"conditionFilter": {
+				"value": "true"
+			},
+			"bindingDependencies": ["AGE"],
+			"response": { "name": "AGE" }
+		},
+		{
+			"id": "AA",
+			"componentType": "Subsequence",
+			"label": "\"Multiply age by 10: \" || AGE_10",
+			"conditionFilter": {
+				"value": "true"
+			},
+			"bindingDependencies": ["AGE_10"]
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "AGE",
+			"componentRef": "A",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "5",
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "CALCULATED",
+			"name": "AGE_10",
+			"expression": "cast(cast(AGE, integer) * 10, string)",
+			"bindingDependencies": ["AGE"]
+		}
+	]
+}