@inseefr/lunatic 0.2.62 → 0.3.0-v2

package/src/stories/checkbox-one/checkbox-one.stories.js

@@ -1,112 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { CheckboxOne } from 'components';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import {
-	text,
-	boolean,
-	number,
-	color,
-	object,
-	select,
-} from '@storybook/addon-knobs/react';
-
-const stories = storiesOf('CheckboxOne', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<CheckboxOne />" />;
-	});
-
-const options = [
-	{ value: 'france', label: 'France' },
-	{ value: 'italy', label: 'Italy' },
-];
-
-const positioningOptions = {
-	DEFAULT: 'Default',
-	HORIZONTAL: 'Horizontal',
-	VERTICAL: 'Vertical',
-};
-
-const defaultProps = {
-	handleChange: console.log,
-	response: {
-		name: 'CHECKBOX_ONE',
-		valueState: [
-			{ valueType: 'COLLECTED', value: 'france' },
-			{ valueType: 'FORCED', value: 'italy' },
-		],
-	},
-};
-
-stories.addWithJSX('Default', () => (
-	<CheckboxOne id="default" options={options} {...defaultProps} />
-));
-
-stories.addWithJSX('Props', () => (
-	<CheckboxOne
-		id="props"
-		label={text(
-			'Label',
-			"I'm the label of the checkbox with a single response"
-		)}
-		positioning={select('Items positioning', positioningOptions)}
-		disabled={boolean('Disabled', false)}
-		focused={boolean('Focused', false)}
-		keyboardSelection={boolean('Keyboard selection', false)}
-		options={options}
-		preferences={['COLLECTED', 'FORCED']}
-		tooltip={boolean('Tooltip', false)}
-		{...defaultProps}
-	/>
-));
-
-stories.addWithJSX('Styled', () => (
-	<CheckboxOne
-		id="styled"
-		label={text(
-			'Label',
-			"I'm the label of the checkbox with a single response"
-		)}
-		positioning={select('Items positioning', positioningOptions)}
-		disabled={boolean('Disabled', false)}
-		focused={boolean('Focused', false)}
-		options={options}
-		style={object('Generated style', {
-			fieldsetStyle: {
-				'border-color': color('Fieldset color', '#e80a4d'),
-				'border-width': number('Border-width', 3, {
-					range: true,
-					min: 0,
-					max: 20,
-					step: 1,
-				}),
-				'border-radius': number('Border-radius', 5, {
-					range: true,
-					min: 0,
-					max: 20,
-					step: 1,
-				}),
-			},
-			checkboxStyle: {
-				'border-color': color('Checked label border color', '#e80a4d'),
-				'border-width': number('Checked label border width', 3, {
-					range: true,
-					min: 0,
-					max: 20,
-					step: 1,
-				}),
-				'border-radius': number('Checked label border radius', 5, {
-					range: true,
-					min: 0,
-					max: 20,
-					step: 1,
-				}),
-			},
-		})}
-		{...defaultProps}
-	/>
-));

package/src/stories/datepicker/README.md

@@ -1,27 +0,0 @@
-# Datepicker component
-
-## Props
-
-|      Props      |  Type  | Default value | Required | Description                               |
-| :-------------: | :----: | :-----------: | :------: | ----------------------------------------- |
-|       id        | string |       -       |    ✓     | Id of the datepicker                      |
-|      label      | string |       -       |    ✓     | Label of the datepicker                   |
-| preferences \*  | array  | ["COLLECTED"] |          | Preferences to manage datepicker response |
-|   response \*   | object |      {}       |          | Response concerned by the component       |
-|   placeholder   | string |      ""       |          | Placeholder of the datepicker             |
-|  handleChange   |  func  |       -       |    ✓     | Handler of the datepicker                 |
-|    readOnly     |  bool  |     false     |          | Is the datepicker read only               |
-|  labelPosition  | string |   "DEFAULT"   |          | Position of the datepicker label          |
-|    required     |  bool  |     false     |          | Is the datepicker required                |
-|     focused     |  bool  |     false     |          | Is the datepicker focused                 |
-| declarations \* | array  |      []       |          | Declarations of the datepicker            |
-|     tooltip     |  bool  |     false     |          | Tooltip of the datepicker                 |
-|      style      | object |      {}       |          | Style of the datepicker                   |
-
-- `preferences` props has to be an ordered array of `COLLECTED`, `FORCED` or `EDITED`
-- `response` props has to be a shape of `{name: string, valueState: object}`
-- `declarations` are documented in the `Declarations` component
-
-## Styles
-
-**Datepicker** component has for classes `datepicker-lunatic`.

package/src/stories/datepicker/datepicker.stories.js

@@ -1,82 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { Datepicker } from 'components';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import {
-	text,
-	boolean,
-	number,
-	color,
-	object,
-	select,
-} from '@storybook/addon-knobs/react';
-
-const labelPositionOptions = {
-	DEFAULT: 'Default',
-	TOP: 'Top',
-	RIGHT: 'Right',
-	BOTTOM: 'Bottom',
-	LEFT: 'Left',
-};
-
-const defaultProps = {
-	handleChange: console.log,
-	response: {
-		name: 'DATEPICKER',
-		valueState: [
-			{ valueType: 'COLLECTED', value: '1998-07-12' },
-			{ valueType: 'FORCED', value: '2018-07-15' },
-		],
-	},
-};
-
-const stories = storiesOf('Datepicker', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Datepicker />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<Datepicker id="default" label="Label" {...defaultProps} />
-));
-
-stories.addWithJSX('Props', () => (
-	<Datepicker
-		id="props"
-		label={text('Label', "I'm the label of the datepicker")}
-		placeholder={text('Placeholder', 'Placeholder')}
-		readOnly={boolean('Read only', false)}
-		required={boolean('Required', false)}
-		focused={boolean('Focused', false)}
-		preferences={['COLLECTED', 'FORCED']}
-		tooltip={boolean('Tooltip', false)}
-		labelPosition={select('Label position', labelPositionOptions)}
-		{...defaultProps}
-	/>
-));
-
-stories.addWithJSX('Styled', () => (
-	<Datepicker
-		id="styled"
-		label={text('Label', "I'm the label of the datepicker")}
-		{...defaultProps}
-		style={object('Generated style', {
-			'border-color': color('Border color', '#e80a4d'),
-			'border-width': number('Border-width', 2, {
-				range: true,
-				min: 2,
-				max: 20,
-				step: 1,
-			}),
-			'border-radius': number('Border-radius', 10, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-		})}
-	/>
-));

package/src/stories/declarations/README.md

@@ -1,17 +0,0 @@
-# Declarations component
-
-## Props
-
-|      Props      |  Type  |     Default value     | Required | Description                                    |
-| :-------------: | :----: | :-------------------: | :------: | ---------------------------------------------- |
-|       id        | string |           -           |    ✓     | Id of the declarations                         |
-|      type       | string | 'AFTER_QUESTION_TEXT' |          | Type of the selected position for declarations |
-| declarations \* | number |          [ ]          |          | Array of declaration                           |
-
-- `declarations` props has to be an array made by objects with a shape of `{id : string, label: string, position: position *, declarationType: declarationType *}`
-- `position` props has to be `BEFORE_QUESTION_TEXT`, `AFTER_QUESTION_TEXT` or `DETACHABLE`
-- `declarationType` props has to be `INSTRUCTION`, `COMMENT`, `HELP`, `WARNING`, `MESSAGE_FILTER` or `STATEMENT`
-
-## Styles
-
-**Declarations** component has for classes `.declarations-lunatic`, `.declaration-lunatic`, `.declaration-instruction`, `.declaration-comment`, `.declaration-help`, `.declaration-warning` and `.declaration-message-filter`.

package/src/stories/declarations/declarations.stories.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { Declarations } from 'components';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import * as C from 'utils/constants';
-
-const declarations = [
-	{
-		id: '1',
-		label: "I'm the label of the instruction declaration",
-		position: C.BEFORE_QUESTION_TEXT,
-		declarationType: C.INSTRUCTION,
-	},
-	{
-		id: '2',
-		label: "I'm the label of the comment declaration",
-		position: C.BEFORE_QUESTION_TEXT,
-		declarationType: C.COMMENT,
-	},
-	{
-		id: '3',
-		label: "I'm the label of the help declaration",
-		position: C.BEFORE_QUESTION_TEXT,
-		declarationType: C.HELP,
-	},
-	{
-		id: '4',
-		label: "I'm the label of the warning declaration",
-		position: C.BEFORE_QUESTION_TEXT,
-		declarationType: C.WARNING,
-	},
-	{
-		id: '5',
-		label: "I'm the label of the message filter declaration",
-		position: C.BEFORE_QUESTION_TEXT,
-		declarationType: C.MESSAGE_FILTER,
-	},
-	{
-		id: '6',
-		label: "I'm the label of the statement declaration",
-		position: C.BEFORE_QUESTION_TEXT,
-		declarationType: C.STATEMENT,
-	},
-];
-
-const stories = storiesOf('Declarations', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Declarations />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<Declarations
-		id="default"
-		type={C.BEFORE_QUESTION_TEXT}
-		declarations={declarations}
-	/>
-));

package/src/stories/dropdown/README.md

@@ -1,29 +0,0 @@
-# Dropdown component
-
-## Props
-
-|      Props      |  Type  | Default value | Required | Description                             |
-| :-------------: | :----: | :-----------: | :------: | --------------------------------------- |
-|       id        | string |       -       |    ✓     | Id of the dropdown                      |
-|      label      | string |      ""       |          | Fieldset 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                 |
-|   placeholder   | string |      ""       |          | Placeholder of the dropdown             |
-|    readOnly     |  bool  |     false     |          | Is the dropdown read only               |
-|    writable     |  bool  |     false     |          | Is the dropdown writable                |
-|    required     |  bool  |     false     |          | Is the dropdown required                |
-|  labelPosition  | string |   "DEFAULT"   |          | Position of the dropdown label          |
-| declarations \* | array  |      []       |          | Declarations of the dropdown            |
-|     tooltip     |  bool  |     false     |          | Tooltip 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, valueState: object}`
-- `options` props has to be an array made by objects with a shape of `{label: string, value: string}`
-- `declarations` are documented in the `Declarations` component
-
-## Styles
-
-**Dropdown** component has for classes XXX

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

@@ -1,70 +0,0 @@
-import React, { useState } from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { Dropdown } from 'components';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import {
-	text,
-	boolean,
-	number,
-	color,
-	object,
-	select,
-} from '@storybook/addon-knobs/react';
-
-const stories = storiesOf('Dropdown', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Dropdown />" />;
-	});
-
-const options = [
-	{ value: 'belgium', label: 'Belgium' },
-	{ value: 'france', label: 'France' },
-	{ value: 'italy', label: 'Italy' },
-	{ value: 'netherland', label: 'Netherland' },
-	{ value: 'spain', label: 'Spain' },
-	{ value: 'sweden', label: 'Sweden' },
-];
-
-const labelPositionOptions = {
-	DEFAULT: 'Default',
-	TOP: 'Top',
-	RIGHT: 'Right',
-	BOTTOM: 'Bottom',
-	LEFT: 'Left',
-};
-
-const defaultProps = {
-	handleChange: console.log,
-	response: {
-		name: 'DROPDOWN',
-		valueState: [
-			{ valueType: 'COLLECTED', value: 'belgium' },
-			{ valueType: 'FORCED', value: 'italy' },
-		],
-	},
-	options,
-	labelPositionOptions,
-};
-
-stories.addWithJSX('Default', () => (
-	<Dropdown id="default" label="Default dropdown" {...defaultProps} />
-));
-
-stories.addWithJSX('Props', () => (
-	<Dropdown
-		{...defaultProps}
-		id="props"
-		label={text('Label', "I'm the label of the dropdown")}
-		options={options}
-		placeholder={text('Placeholder', 'Placeholder')}
-		readOnly={boolean('Read only', false)}
-		writable={boolean('Writable', false)}
-		labelPosition={select('Label position', labelPositionOptions)}
-		preferences={['COLLECTED', 'FORCED']}
-		tooltip={boolean('Tooltip', false)}
-	/>
-));

package/src/stories/input/README.md

@@ -1,28 +0,0 @@
-# Input component
-
-## Props
-
-|      Props      |  Type  | Default value | Required | Description                          |
-| :-------------: | :----: | :-----------: | :------: | ------------------------------------ |
-|       id        | string |       -       |    ✓     | Id of the input                      |
-|      label      | string |      ""       |          | Label of the input                   |
-| preferences \*  | array  | ["COLLECTED"] |          | Preferences to manage input response |
-|   response \*   | object |      {}       |          | Response concerned by the component  |
-|   placeholder   | string |      " "      |          | Placeholder of the input             |
-|  handleChange   |  func  |       -       |    ✓     | Handler of the input                 |
-|    readOnly     |  bool  |     false     |          | Is the input read only               |
-|  autoComplete   |  bool  |     false     |          | Is the input autocompletable         |
-|  labelPosition  | string |   "DEFAULT"   |          | Position of the input label          |
-|    required     |  bool  |     false     |          | Is the input required                |
-|     focused     |  bool  |     false     |          | Is the input focused                 |
-| declarations \* | array  |      []       |          | Declarations of the input            |
-|     tooltip     |  bool  |     false     |          | Tooltip of the input                 |
-|      style      | object |      {}       |          | Style of the input                   |
-
-- `preferences` props has to be an ordered array of `COLLECTED`, `FORCED` or `EDITED`
-- `response` props has to be a shape of `{name: string, valueState: object}`
-- `declarations` are documented in the `Declarations` component
-
-## Styles
-
-**Input** component has for class `.input-lunatic`.

package/src/stories/input-number/README.md

@@ -1,31 +0,0 @@
-# InputNumber component
-
-## Props
-
-|      Props      |  Type  |      Default value      | Required | Description                          |
-| :-------------: | :----: | :---------------------: | :------: | ------------------------------------ |
-|       id        | string |            -            |    ✓     | Id of the input                      |
-|      label      | string |           " "           |          | Label of the input                   |
-| preferences \*  | array  |      ["COLLECTED"]      |          | Preferences to manage input response |
-|   response \*   | object |           {}            |          | Response concerned by the component  |
-|       min       | number | Number.MIN_SAFE_INTEGER |          | Minimum of the input                 |
-|       max       | number | Number.MAX_SAFE_INTEGER |          | Maximum of the input                 |
-|    decimals     | number |            0            |          | Number of decimals of the input      |
-|   placeholder   | string |           ""            |          | Placeholder of the input             |
-|  handleChange   |  func  |            -            |    ✓     | Handler of the input                 |
-|    readOnly     |  bool  |          false          |          | Is the input read only               |
-|  autoComplete   |  bool  |          false          |          | Is the input autocompletable         |
-|     focused     |  bool  |          false          |          | Is the input focused                 |
-| declarations \* | array  |           [ ]           |          | Declarations of the input            |
-|  labelPosition  | string |        "DEFAULT"        |          | Position of the input label          |
-|    required     |  bool  |          false          |          | Is the input required                |
-|     tooltip     |  bool  |          false          |          | Tooltip of the input                 |
-|      style      | object |           {}            |          | Style of the input                   |
-
-- `preferences` props has to be an ordered array of `COLLECTED`, `FORCED` or `EDITED`
-- `response` props has to be a shape of `{name: string, valueState: object}`
-- `declarations` are documented in the `Declarations` component
-
-## Styles
-
-**InputNumber** component has for classes `.input-lunatic`, `.warning` and `.lunatic-input-number-errors > error`.

package/src/stories/input-number/input-number.stories.js

@@ -1,95 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { InputNumber } from 'components';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import {
-	text,
-	boolean,
-	number,
-	color,
-	object,
-	select,
-} from '@storybook/addon-knobs/react';
-
-const labelPositionOptions = {
-	DEFAULT: 'Default',
-	TOP: 'Top',
-	RIGHT: 'Right',
-	BOTTOM: 'Bottom',
-	LEFT: 'Left',
-};
-
-const defaultProps = {
-	handleChange: console.log,
-	response: {
-		name: 'INPUT_NUMBER',
-		valueState: [
-			{ valueType: 'COLLECTED', value: '1' },
-			{ valueType: 'FORCED', value: '2' },
-			{ valueType: 'EDITED', value: '3' },
-		],
-	},
-};
-
-const stories = storiesOf('InputNumber', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<InputNumber />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<InputNumber id="default" label="Label" {...defaultProps} />
-));
-
-stories.addWithJSX('Props', () => (
-	<InputNumber
-		id="props"
-		label={text('Label', "I'm the label of the number input")}
-		unit={text('Unit', 'euros')}
-		min={number('Min', 0)}
-		max={number('Max', 10)}
-		decimals={number('Decimals', 1)}
-		placeholder={text('Placeholder', 'Placeholder')}
-		readOnly={boolean('Read only', false)}
-		autoComplete={boolean('Autocomplete', false)}
-		required={boolean('Required', false)}
-		focused={boolean('Focused', false)}
-		tooltip={boolean('Tooltip', false)}
-		labelPosition={select('Label position', labelPositionOptions)}
-		preferences={['COLLECTED', 'FORCED', 'EDITED']}
-		{...defaultProps}
-	/>
-));
-
-stories.addWithJSX('Styled', () => (
-	<InputNumber
-		id="styled"
-		label={text('Label', "I'm the label of the number input")}
-		min={number('Min', 0)}
-		max={number('Max', 0)}
-		decimals={number('Decimals', 0)}
-		placeholder={text('Placeholder', 'Placeholder')}
-		readOnly={boolean('Read only', false)}
-		autoComplete={boolean('Autocomplete', false)}
-		focused={boolean('Focused', false)}
-		style={object('Generated style', {
-			'border-color': color('Border color', '#e80a4d'),
-			'border-width': number('Border-width', 2, {
-				range: true,
-				min: 2,
-				max: 20,
-				step: 1,
-			}),
-			'border-radius': number('Border-radius', 10, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-		})}
-		{...defaultProps}
-	/>
-));

package/src/stories/progress-bar/README.md

@@ -1,13 +0,0 @@
-# ProgressBar component
-
-## Props
-
-| Props |  Type  | Default value | Required | Description                |
-| :---: | :----: | :-----------: | :------: | -------------------------- |
-|  id   | string |       -       |    ✓     | Id of the the progress bar |
-| value | number |               |    ✓     | Value of the progress bar  |
-| style | object |      { }      |          | Style of the progress bar  |
-
-## Styles
-
-**ProgressBar** component has for classes `progress-lunatic`

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

@@ -1,24 +0,0 @@
-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', () => (
-	<React.Fragment>
-		{Array.from(new Array(11), (a, i) => (
-			<React.Fragment key={i}>
-				<ProgressBar id={`default-${i * 10}`} value={i * 10} />
-				<br />
-			</React.Fragment>
-		))}
-	</React.Fragment>
-));

package/src/stories/radio/README.md

@@ -1,30 +0,0 @@
-# Radio component
-
-## Props
-
-|       Props       |  Type  |             Default value             | Required | Description                            |
-| :---------------: | :----: | :-----------------------------------: | :------: | -------------------------------------- |
-|        id         | string |                   -                   |    ✓     | Id of the radio                        |
-|       label       | string |                  ""                   |          | Fieldset label of the radio            |
-|  preferences \*   | array  |             ["COLLECTED"]             |          | Preferences to manage radio response   |
-|    response \*    | object |                  {}                   |          | Response concerned by the component    |
-|    options \*     | array  |                  []                   |          | Options of the radio                   |
-|   handleChange    |  func  |                   -                   |    ✓     | Handler of the radio                   |
-|     disabled      |  bool  |                 false                 |          | Is the radio options disabled          |
-|      focused      |  bool  |                 false                 |          | Is the radio options focused           |
-| keyboardSelection |  bool  |                 false                 |          | Enable keyboard selection of the radio |
-|  positioning \*   | string |               "DEFAULT"               |          | Checkbox options positioning           |
-|  declarations \*  | array  |                  []                   |          | Declarations of the radio              |
-|      tooltip      |  bool  |                 false                 |          | Tooltip of the radio                   |
-|     style \*      | object | { fieldsetStyle: {}, radioStyle: {} } |          | Style of the radio                     |
-
-- `preferences` props has to be an ordered array of `COLLECTED`, `FORCED` or `EDITED`
-- `response` props has to be a shape of `{name: string, valueState: object}`
-- `options` props has to be an array made by objects with a shape of `{label: string, value: string}`
-- `positioning` props has to be one of `DEFAULT`, `HORIZONTAL` or `VERTICAL`
-- `declarations` are documented in the `Declarations` component
-- `style` props has to be composed of `fieldsetStyle` and `radioStyle`
-
-## Styles
-
-**CheckboxOne** component has for classes `radio-group`, `radio-modality` and `radio-lunatic`.