@inseefr/lunatic 0.2.62 → 0.3.0-v2

package/src/components/textarea/component.js

@@ -1,117 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import Declarations from '../declarations';
-import { TooltipResponse } from '../tooltip';
-import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
-import './textarea.scss';
-
-const Textarea = ({
-	id,
-	label,
-	preferences,
-	response,
-	placeholder,
-	handleChange,
-	rows,
-	maxLength,
-	readOnly,
-	labelPosition,
-	required,
-	focused,
-	declarations,
-	tooltip,
-	style,
-}) => {
-	const inputRef = useRef();
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	return (
-		<div className={U.getLabelPositionClass(labelPosition)}>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			{label && (
-				<label
-					htmlFor={`textarea-${id}`}
-					id={`textarea-label-${id}`}
-					className={`${required ? 'required' : ''}`}
-				>
-					{label}
-				</label>
-			)}
-			<Declarations
-				id={id}
-				type={C.AFTER_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<div className="field-container">
-				<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
-					<textarea
-						id={`textarea-${id}`}
-						ref={inputRef}
-						placeholder={placeholder}
-						value={U.getResponseByPreference(preferences)(response)}
-						className="textarea-lunatic"
-						style={U.buildStyleObject(style)}
-						rows={rows}
-						maxLength={maxLength}
-						readOnly={readOnly}
-						required={required}
-						aria-required={required}
-						onChange={e =>
-							handleChange({
-								[U.getResponseName(response)]: e.target.value,
-							})
-						}
-					/>
-				</div>
-				{tooltip && (
-					<div className="tooltip">
-						<TooltipResponse id={id} response={response} />
-					</div>
-				)}
-			</div>
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-		</div>
-	);
-};
-
-Textarea.defaultProps = {
-	preferences: ['COLLECTED'],
-	response: {},
-	placeholder: '',
-	rows: 5,
-	readOnly: false,
-	labelPosition: 'DEFAULT',
-	required: false,
-	focused: false,
-	declarations: [],
-	tooltip: false,
-	style: {},
-};
-
-Textarea.propTypes = {
-	id: PropTypes.string,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	placeholder: PropTypes.string,
-	handleChange: PropTypes.func.isRequired,
-	rows: PropTypes.number.isRequired,
-	maxLength: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-	readOnly: PropTypes.bool,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	required: PropTypes.bool,
-	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default Textarea;

package/src/components/tooltip/index.js

@@ -1 +0,0 @@
-export { default as TooltipResponse } from './response';

package/src/components/tooltip/response.js

@@ -1,42 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import * as U from '../../utils/lib';
-import * as img from './img';
-import './tooltip.scss';
-
-const TooltipResponse = ({ id, response }) => {
-	const [tooltipElements, setTooltipElements] = useState(() =>
-		U.buildTooltip(response)
-	);
-
-	useEffect(() => {
-		setTooltipElements(U.buildTooltip(response));
-	}, [response]);
-
-	const { content, imgName } = tooltipElements;
-
-	if (!content) return null;
-	return (
-		<div className="tooltip-lunatic">
-			<img id={id} alt="img-tooltip" src={img[imgName].src || img[imgName]} />
-			<span className="tooltip-text">
-				<ul>
-					{content.map(({ key, value }) => (
-						<li key={`tooltip-${id}-content-${key}`}>{`${key} : ${value}`}</li>
-					))}
-				</ul>
-			</span>
-		</div>
-	);
-};
-
-TooltipResponse.defaultProps = {
-	response: {},
-};
-
-TooltipResponse.propTypes = {
-	id: PropTypes.string,
-	response: U.responsePropTypes,
-};
-
-export default TooltipResponse;

package/src/components/tooltip/tooltip.scss

@@ -1,35 +0,0 @@
-@import 'src/components/index.scss';
-
-/* Tooltip container */
-.tooltip-lunatic {
-	position: relative;
-	display: inline-block;
-	align-items: center;
-}
-
-/* Tooltip text */
-.tooltip-lunatic .tooltip-text {
-	visibility: hidden;
-	width: 20em;
-	background-color: $main_color;
-	color: #fff;
-	padding: 5px 0;
-	border-radius: 6px;
-	text-align: left;
-
-	/* Position the tooltip text */
-	position: absolute;
-	z-index: 1;
-	bottom: 120%;
-	left: -10em;
-
-	/* Fade in tooltip */
-	opacity: 0;
-	transition: opacity 0.3s;
-}
-
-/* Show the tooltip text when you mouse over the tooltip container */
-.tooltip-lunatic:hover .tooltip-text {
-	visibility: visible;
-	opacity: 1;
-}

package/src/stories/breadcrumb/README.md

@@ -1,14 +0,0 @@
-# Breadcrumb component
-
-## Props
-
-|    Props    |  Type  | Default value | Required | Description                |
-| :---------: | :----: | :-----------: | :------: | -------------------------- |
-| elements \* | array  |      [ ]      |          | Elements of the breadcrumb |
-|    style    | object |      { }      |          | Style of the breadcrumb    |
-
-- `elements` props has to be an array composed of ordered strings
-
-## Styles
-
-**Breadcrumb** component has for class `breadcrumb-lunatic`.

package/src/stories/breadcrumb/breadcrumb.stories.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { Breadcrumb } from 'components';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import { number, color, object } from '@storybook/addon-knobs/react';
-
-const elements = ['Sequence', 'Sub-sequence', 'Question'];
-
-const stories = storiesOf('Breadcrumb', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Breadcrumb />" />;
-	});
-
-stories.addWithJSX('Props', () => <Breadcrumb elements={elements} />);
-
-stories.addWithJSX('Styled', () => (
-	<Breadcrumb
-		id="styled"
-		elements={elements}
-		style={object('Generated style', {
-			'background-color': color('Background color', '#e80a4d'),
-			color: color('Color', 'white'),
-			'border-radius': number('Border-radius', 0, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-		})}
-	/>
-));

package/src/stories/button/README.md

@@ -1,14 +0,0 @@
-# Button component
-
-## Props
-
-|  Props   |   Type   | Default value | Required | Description                   |
-| :------: | :------: | :-----------: | :------: | ----------------------------- |
-|  label   |  string  |   "button"    |          | Aria label                    |
-|  value   |  string  |       -       |    ✓     | Label of the button           |
-| onClick  | function |       -       |    ✓     | Callback                      |
-| disabled | boolean  |     false     |          | Boolean to disable the button |
-
-## Styles
-
-**Button** component has for class `button-lunatic`.

package/src/stories/button/button.stories.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { Button } from 'components';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import {
-	text,
-	boolean,
-	number,
-	color,
-	object,
-} from '@storybook/addon-knobs/react';
-
-const stories = storiesOf('Button', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Button />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<Button label="button-default" value="Click me !" onClick={console.log} />
-));
-
-stories.addWithJSX('Props', () => (
-	<Button
-		label="disabled-button"
-		value={text('Value', 'Click me !')}
-		onClick={console.log}
-		disabled={boolean('Disabled', false)}
-	/>
-));
-
-stories.addWithJSX('Styled', () => (
-	<Button
-		label="styled-button"
-		value="Click me !"
-		onClick={console.log}
-		style={object('Generated style', {
-			'border-width': number('Border-width', 5, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-			'border-radius': number('Border-radius', 10, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-			color: color('Color', 'white'),
-			'background-color': color('Background color', '#e80a4d'),
-			'border-color': color('Border color', '#e80a4d'),
-			':hover': {
-				color: color('Hover : color', '#e80a4d'),
-				'background-color': color('Hover : background color', 'white'),
-				'border-color': color('Hover : border color', '#e80a4d'),
-			},
-		})}
-	/>
-));

package/src/stories/checkbox-boolean/README.md

@@ -1,25 +0,0 @@
-# CheckboxBoolean component
-
-## Props
-
-|      Props      |  Type  | Default value | Required | Description                             |
-| :-------------: | :----: | :-----------: | :------: | --------------------------------------- |
-|       id        | string |       -       |    ✓     | Id of the checkbox                      |
-|      label      | string |      ""       |          | Fieldset label of the checkbox          |
-| preferences \*  | array  | ["COLLECTED"] |          | Preferences to manage checkbox response |
-|   response \*   | object |      {}       |          | Response concerned by the component     |
-|  handleChange   |  func  |       -       |    ✓     | Handler of the checkbox                 |
-|    disabled     |  bool  |     false     |          | Is the checkbox item disabled           |
-| positioning \*  | string |   "DEFAULT"   |          | Checkbox item positioning               |
-|     focused     |  bool  |     false     |          | Is the checkbox item focused            |
-| declarations \* | array  |      []       |          | Declarations of the checkbox            |
-|     tooltip     |  bool  |     false     |          | Tooltip of the checkbox                 |
-|      style      | object |      {}       |          | Style of the checkbox                   |
-
-- `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
-
-**CheckboxBoolean** component has for classes `checkbox-lunatic`, `checkbox-lunatic-no-margin` and `checkbox-modality`.

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

@@ -1,49 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { CheckboxBoolean } from 'components';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import { text, boolean, select } from '@storybook/addon-knobs/react';
-
-const positioningOptions = {
-	DEFAULT: 'Default',
-	HORIZONTAL: 'Horizontal',
-	VERTICAL: 'Vertical',
-};
-
-const defaultProps = {
-	handleChange: console.log,
-	response: {
-		name: 'CHECKBOX_BOOLEAN',
-		valueState: [
-			{ valueType: 'COLLECTED', value: false },
-			{ valueType: 'FORCED', value: true },
-			{ valueType: 'EDITED', value: null },
-		],
-	},
-};
-
-const stories = storiesOf('CheckboxBoolean', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<CheckboxBoolean />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<CheckboxBoolean id="default" {...defaultProps} />
-));
-
-stories.addWithJSX('Props', () => (
-	<CheckboxBoolean
-		id="props"
-		label={text('Label', "I'm the label of the boolean checkbox")}
-		positioning={select('Items positioning', positioningOptions)}
-		disabled={boolean('Disabled', false)}
-		focused={boolean('Focused', false)}
-		preferences={['COLLECTED', 'FORCED', 'EDITED']}
-		tooltip={boolean('Tooltip', false)}
-		{...defaultProps}
-	/>
-));

package/src/stories/checkbox-group/README.md

@@ -1,28 +0,0 @@
-# CheckboxGroup component
-
-## Props
-
-|       Props       |  Type  |              Default value               | Required | Description                               |
-| :---------------: | :----: | :--------------------------------------: | :------: | ----------------------------------------- |
-|        id         | string |                    -                     |    ✓     | Id of the checkbox                        |
-|       label       | string |                    ""                    |          | Fieldset label of the checkbox            |
-|  preferences \*   | array  |              ["COLLECTED"]               |          | Preferences to manage checkbox response   |
-|   responses \*    | object |                    []                    |          | Responses concerned by the component      |
-|   handleChange    |  func  |                    -                     |    ✓     | Handler of the checkbox                   |
-|     disabled      |  bool  |                  false                   |          | Is the checkbox responses disabled        |
-|      focused      |  bool  |                  false                   |          | Is the checkbox responses focused         |
-| keyboardSelection |  bool  |                  false                   |          | Enable keyboard selection of the checkbox |
-|  positioning \*   | string |                "DEFAULT"                 |          | CheckboxGroup responses positioning       |
-|  declarations \*  | array  |                    []                    |          | Declarations of the checkbox              |
-|      tooltip      |  bool  |                  false                   |          | Tooltip of the input                      |
-|     style \*      | object | { fieldsetStyle: {}, checkboxStyle: {} } |          | Style of the checkbox                     |
-
-- `preferences` props has to be an ordered array of `COLLECTED`, `FORCED` or `EDITED`
-- `responses` props has to be an array of shape of `{id: string, label: string, response: {name: string, valueState: object}}`
-- `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 `checkboxStyle`
-
-## Styles
-
-**CheckboxGroup** component has for classes `checkbox-group`, `checkbox-modality` and `checkbox-lunatic`.

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

@@ -1,122 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { CheckboxGroup } 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('CheckboxGroup', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<CheckboxGroup />" />;
-	});
-
-const responses = [
-	{ id: '1', value: false, label: 'France' },
-	{ id: '2', value: false, label: 'Italy' },
-];
-
-const positioningOptions = {
-	DEFAULT: 'Default',
-	HORIZONTAL: 'Horizontal',
-	VERTICAL: 'Vertical',
-};
-
-const defaultProps = {
-	handleChange: console.log,
-	responses: [
-		{
-			id: '1',
-			label: 'France',
-			response: {
-				name: 'FRANCE',
-				valueState: [
-					{ valueType: 'COLLECTED', value: null },
-					{ valueType: 'FORCED', value: null },
-					{ valueType: 'EDITED', value: null },
-				],
-			},
-		},
-		{
-			id: '2',
-			label: 'Italy',
-			response: {
-				name: 'ITALY',
-				valueState: [
-					{ valueType: 'COLLECTED', value: false },
-					{ valueType: 'FORCED', value: true },
-					{ valueType: 'EDITED', value: null },
-				],
-			},
-		},
-	],
-};
-
-stories.addWithJSX('Default', () => (
-	<CheckboxGroup id="default" {...defaultProps} />
-));
-
-stories.addWithJSX('Props', () => (
-	<CheckboxGroup
-		id="props"
-		label={text('Label', "I'm the label of the checkbox group")}
-		positioning={select('Items positioning', positioningOptions)}
-		disabled={boolean('Disabled', false)}
-		focused={boolean('Focused', false)}
-		keyboardSelection={boolean('Keyboard selection', false)}
-		preferences={['COLLECTED', 'FORCED']}
-		tooltip={boolean('Tooltip', false)}
-		{...defaultProps}
-	/>
-));
-
-stories.addWithJSX('Styled', () => (
-	<CheckboxGroup
-		id="styled"
-		label={text('Label', "I'm the label of the checkbox group")}
-		positioning={select('Items positioning', positioningOptions)}
-		disabled={boolean('Disabled', false)}
-		{...defaultProps}
-		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,
-				}),
-			},
-		})}
-	/>
-));

package/src/stories/checkbox-one/README.md

@@ -1,30 +0,0 @@
-# CheckboxOne component
-
-## Props
-
-|       Props       |  Type  |              Default value               | Required | Description                               |
-| :---------------: | :----: | :--------------------------------------: | :------: | ----------------------------------------- |
-|        id         | string |                    -                     |    ✓     | Id of the checkbox                        |
-|       label       | string |                    ""                    |          | Fieldset label of the checkbox            |
-|  preferences \*   | array  |              ["COLLECTED"]               |          | Preferences to manage checkbox response   |
-|    response \*    | object |                    {}                    |          | Response concerned by the component       |
-|    options \*     | array  |                    -                     |    ✓     | Options of the checkbox                   |
-|   handleChange    |  func  |                    -                     |    ✓     | Handler of the checkbox                   |
-|     disabled      |  bool  |                  false                   |          | Is the checkbox options disabled          |
-|      focused      |  bool  |                  false                   |          | Is the checkbox options focused           |
-| keyboardSelection |  bool  |                  false                   |          | Enable keyboard selection of the checkbox |
-|  positioning \*   | string |                "DEFAULT"                 |          | Checkbox options positioning              |
-|  declarations \*  | array  |                    []                    |          | Declarations of the checkbox              |
-|      tooltip      |  bool  |                  false                   |          | Tooltip of the checkbox                   |
-|     style \*      | object | { fieldsetStyle: {}, checkboxStyle: {} } |          | Style of the checkbox                     |
-
-- `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 `checkboxStyle`
-
-## Styles
-
-**CheckboxOne** component has for classes `checkbox-group`, `checkbox-modality` and `checkbox-lunatic`.