@inseefr/lunatic 3.0.0-rc.11 → 3.0.0-rc.12

package/lib/css/components/Suggester.scss

@@ -1,170 +0,0 @@
-@mixin defaultFont {
-	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-}
-
-@mixin selection() {
-	@include defaultFont();
-}
-
-@mixin placeholderList {
-	color: gray;
-	@include defaultFont();
-	font-size: 15px;
-	line-height: 34px;
-	vertical-align: middle;
-	font-weight: normal;
-}
-
-@mixin icon($name) {
-	&::before {
-		--icon-size: 2rem;
-		display: block;
-		float: left;
-		flex: 0 0 auto;
-		background-color: white;
-		width: var(--icon-size);
-		height: var(--icon-size);
-		-webkit-mask-size: 100% 100%;
-		mask-size: 100% 100%;
-		-webkit-mask-image: url($name);
-		mask-image: url($name);
-		content: '';
-		margin-left: -48px;
-		margin-top: 12px;
-	}
-}
-
-.lunatic-component {
-	.lunatic-suggester-message-error {
-		border: solid 1px darkred;
-		color: darkred;
-		background-color: tomato;
-		display: inline-block;
-		border-radius: 3px;
-		padding: 4px 8px;
-		margin: 4px 4px;
-	}
-
-	.lunatic-suggester-default-style {
-		&.lunatic-suggester-container {
-			margin-bottom: 10px;
-			.lunatic-suggester {
-				min-height: 30px;
-				min-width: 260px;
-				width: 100%;
-				.lunatic-suggester-content {
-
-					&.focused {
-						.lunatic-suggester-selection {
-						}
-					}
-
-					.lunatic-suggester-selection {
-						border-radius: 5px;
-						border: 2px solid var(--color-primary-dark);
-						background-color: white;
-						&:hover {
-							border-color: var(--color-primary-main);
-						}
-						.lunatic-suggester-input {
-							height: 34px;
-							line-height: 34px;
-							font-size: 15px;
-							padding-left: 4px;
-							@include selection();
-
-							&::placeholder {
-								@include placeholderList();
-							}
-						}
-
-						.lunatic-suggester-selected {
-							height: 34px;
-							line-height: 34px;
-							background-color: white;
-							border-radius: 5px;
-							padding-left: 4px;
-							@include selection();
-
-							.placeholderList {
-								display: block;
-								@include placeholderList();
-							}
-							.selection {
-								display: block;
-								line-height: 34px;
-								font-size: 15px;
-							}
-
-							&.disabled {
-								background-color: var(--color-disabled);
-							}
-						}
-					}
-
-					.lunatic-suggester-panel {
-						@include defaultFont();
-						height: 0;
-						opacity: 0;
-						background-color: white;
-						transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-							transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-						&.expended {
-							border: solid 1px var(--color-primary-light);
-							opacity: 1;
-							min-height: 30px;
-							height: max-content;
-							box-shadow: 0 2px 2px grey;
-							border-radius: 4px;
-						}
-						.lunatic-suggester-option {
-							text-overflow: ellipsis;
-							white-space: nowrap;
-							overflow: hidden;
-							margin-bottom: 0.1em;
-							line-height: 2rem;
-							display: block;
-							&.selected {
-								color: var(--color-primary-dark);
-								background-color: var(--color-dropdown-selected);
-							}
-							&:hover {
-								background-color: var(--color-primary-main);
-								color: white;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.lunatic-notification {
-		line-height: 34px;
-		margin: 2px 2px;
-		padding: 1px 1px 1px 60px;
-
-		&.info {
-			background-color: lightblue;
-			@include icon('./icons/wait-icon.svg');
-		}
-		&.warn {
-			background-color: orange;
-			@include icon('./icons/warn-icon.svg');
-		}
-		&.error {
-			background-color: crimson;
-			@include icon('./icons/alert-icon.svg');
-		}
-
-		.lunatic-notification-container {
-			background-color: white;
-			padding: 0 15px;
-			.title {
-				font-weight: bold;
-				font-size: large;
-				margin-bottom: 3px;
-			}
-		}
-	}
-}

package/lib/css/components/SuggesterWidget.scss

@@ -1,176 +0,0 @@
-$colorA: #e9d0d0;
-$colorB: darkred;
-$colorC: #320000;
-$colorD: goldenrod;
-
-@mixin preventSelect() {
-	-moz-user-select: -moz-none;
-	-khtml-user-select: none;
-	-webkit-user-select: none;
-}
-
-@mixin onDrag() {
-	&.drag {
-		box-shadow: $colorD 0px 3px 8px;
-		transition: box-shadow 0.5s;
-	}
-}
-
-.lunatic-suggester-widget-container {
-	&.absolute {
-		position: fixed;
-		z-index: 1;
-	}
-	.lunatic-suggester-widget {
-		position: relative;
-		border: solid $colorB 2px;
-		background-color: $colorA;
-		padding: 4px 4px;
-		border: 2px 2px;
-		width: 400px;
-		box-shadow: $colorC 0px 3px 8px;
-
-		@include onDrag();
-
-		.widget-row {
-			height: 22px;
-			display: flex;
-			flex-direction: row;
-			margin-bottom: 1px;
-			.store-name {
-				width: 60%;
-				color: $colorB;
-				font-size: 18px;
-				white-space: nowrap;
-				overflow-x: hidden;
-			}
-			.stats {
-				color: $colorB;
-				font-size: 18px;
-				white-space: nowrap;
-				overflow-x: hidden;
-				width: 40%;
-			}
-			.widget-button {
-				margin: 0 1px 0 0;
-				padding: 0;
-				border: none;
-				width: 18px;
-				height: 18px;
-				background-color: $colorB;
-
-				&.disabled {
-					background-color: gray;
-					cursor: default;
-				}
-
-				&:hover {
-					background-color: $colorC;
-					transition: background-color 1s;
-					cursor: pointer;
-				}
-
-				.lunatic-suggester-icon {
-					svg {
-						width: 18px;
-						height: 18px;
-						fill: $colorA;
-					}
-				}
-			}
-
-			.lunatic-suggester-loader-progress {
-				height: inherit;
-				border: solid 1px $colorB;
-				border-radius: 2px;
-				width: 70%;
-
-				&.done {
-					&:hover {
-						border-color: $colorC;
-						transition: border-color 1s;
-						.progress {
-							background-color: $colorC;
-							transition: background-color 1s;
-						}
-
-						cursor: pointer;
-					}
-				}
-
-				.content {
-					padding: 2px 2px;
-					height: calc(100%);
-					width: 100%;
-					.progress {
-						background-color: $colorB;
-						height: 100%;
-					}
-				}
-			}
-		}
-
-		.suggester-widget-network {
-			position: absolute;
-			border: solid $colorB 2px;
-			left: 6px;
-			background-color: $colorA;
-			border-radius: 50%;
-			padding: 2px 2px;
-			left: -22px;
-			top: -22px;
-			box-shadow: $colorC 0px 3px 8px;
-
-			&.online {
-				svg {
-					fill: forestgreen;
-				}
-			}
-
-			svg {
-				width: 24px;
-				height: 24px;
-				fill: $colorB;
-			}
-
-			@include onDrag();
-		}
-
-		.lunatic-widget-tools {
-			position: absolute;
-			right: 0;
-			top: -18px;
-			margin-top: -4px;
-
-			.lunatic-action-tool {
-				display: inline-block;
-				height: 18px;
-				width: 18px;
-				background-color: $colorB;
-				border-radius: 50%;
-				margin-left: 2px;
-
-				&:hover {
-					box-shadow: $colorC 0px 3px 8px;
-				}
-
-				&.drag {
-					background-color: $colorD;
-					transition: background-color 0.5s;
-				}
-
-				.on-drag-icon {
-					cursor: grab;
-					&.drag {
-						cursor: grabbing;
-					}
-					svg {
-						width: 16px;
-						height: 16px;
-						fill: $colorA;
-					}
-				}
-			}
-		}
-	}
-}

package/lib/css/components/Table.scss

@@ -1,27 +0,0 @@
-.lunatic-component {
-	.lunatic-table {
-		table-layout: fixed;
-		border-collapse: collapse;
-		margin-top: 0.3em;
-		margin-bottom: 0.3em;
-		& td,
-		th {
-			border: 0.15em solid var(--color-primary-dark);
-			padding: 0.2em;
-			font-size: 13px;
-		}
-		& td {
-			.field,
-			.field-with-tooltip {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
-		}
-	}
-
-	.table-lunatic .tooltip-lunatic img {
-		height: 20px;
-		width: 20px;
-	}
-}

package/lib/css/components/Textarea.scss

@@ -1,8 +0,0 @@
-// see input.scss
-
-.lunatic-component {
-	.textarea-lunatic {
-		height: 3em;
-		width: 100%;
-	}
-}

package/lib/css/components/VariableStatus.scss

@@ -1,36 +0,0 @@
-.lunatic-component-container-test {
-	display: flex;
-
-	.lunatic-component-body {
-		width: 80%;
-	}
-
-	/* Tooltip container */
-	.tooltip-lunatic {
-		margin: auto;
-		width: 20%;
-		position: relative;
-		display: block;
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	/* Tooltip text */
-	.tooltip-lunatic .tooltip-text {
-		min-width: 10em;
-		max-width: 20em;
-		background-color: var(--color-primary-dark);
-		color: #fff;
-		padding: 0.5em;
-		border-radius: 6px;
-		font-size: 1em;
-		&.place-left {
-			&::before {
-				border-left: 10px solid var(--color-primary-dark);
-			}
-			&::after {
-				content: none;
-			}
-		}
-	}
-}

package/lib/css/main.scss

@@ -1,181 +0,0 @@
-* {
-  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);
-  --color-prefix: cornflowerblue;
-  --color-dropdown-active: rgba(0, 0, 0, 0.04);
-  --color-dropdown-selected: rgba(0, 0, 0, 0.08);
-
-  --dropdown-transition-time: 0.5s;
-}
-
-@mixin vertical-placement($reverse: false) {
-  display: flex;
-  flex-direction: if($reverse, column-reverse, column);
-}
-
-@mixin horizontal-placement($reverse: false) {
-  display: flex;
-  flex-direction: if($reverse, row-reverse, row);
-  align-items: baseline;
-
-  :first-child {
-    margin-right: 1rem;
-  }
-}
-
-.lunatic-component {
-  .mandatory:after {
-    content: ' *';
-    color: red;
-  }
-  .horizontal-options {
-    display: inline-block;
-    margin-right: 2em;
-  }
-
-  // Label & Legend
-  label,
-  legend,
-  .subsequence-lunatic,
-  .lunatic-dropdown-label,
-  .lunatic-dropdown-label focused {
-    color: var(--color-primary-dark);
-    background-color: var(--color-primary-contrast-text);
-    border: 0;
-    padding: 0;
-    font-size: 0.75rem;
-    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-    font-weight: bold;
-    margin-bottom: 0.375rem;
-  }
-
-  /* refactor proposition */
-
-  // .lunatic-component {
-  // 	width: fit-content;
-  // }
-
-  .lunatic-component-container {
-    display: flex;
-
-    &.label-left-ex {
-      flex-direction: row;
-      align-items: baseline;
-      .lunatic-label {
-        margin-right: 1em;
-      }
-    }
-    &.label-right-ex {
-      flex-direction: row-reverse;
-      align-items: baseline;
-      .lunatic-label {
-        margin-left: 1em;
-      }
-    }
-    &.label-top-ex {
-      flex-direction: column;
-    }
-    &.label-bottom-ex {
-      flex-direction: column-reverse;
-    }
-  }
-
-  /******/
-
-  .label-top {
-    @include vertical-placement();
-  }
-  .label-bottom {
-    @include vertical-placement(true);
-  }
-  .label-right {
-    justify-content: flex-end;
-    @include horizontal-placement(true);
-  }
-  .label-left {
-    @include horizontal-placement();
-  }
-
-  .field-container {
-    display: flex;
-  }
-
-  .modality-label p {
-    display: inline;
-  }
-
-  .field {
-    width: 100%;
-    position: relative;
-  }
-
-  .link-md {
-    border-bottom: dashed 0.1em var(--color-primary-dark);
-    &:hover {
-      cursor: help;
-      color: var(--color-primary-contrast-text);
-      background-color: var(--color-primary-dark);
-    }
-  }
-
-  .tooltip-content {
-    min-width: 15em;
-    max-width: 25em;
-    background: var(--color-primary-dark);
-    color: var(--color-primary-contrast-text);
-    padding: 0.5em;
-    border-radius: 6px;
-    font-size: 1em;
-    &.place-bottom {
-      &::before {
-        border-bottom: 10px solid var(--color-primary-dark);
-      }
-      &::after {
-        content: none;
-      }
-    }
-  }
-}
-
-@import "./components/Button.scss";
-@import "./components/CheckboxGroup.scss";
-@import "./components/CheckboxOne.scss";
-@import "./components/CheckboxOption.scss";
-@import "./components/Combobox.scss";
-@import "./components/ComponentErrors.scss";
-@import "./components/Datepicker.scss";
-@import "./components/Declarations.scss";
-@import "./components/Dropdown.scss";
-@import "./components/Duration.scss";
-@import "./components/Fieldset.scss";
-@import "./components/IconButton.scss";
-@import "./components/Input.scss";
-@import "./components/InputNumber.scss";
-@import "./components/Label.scss";
-@import "./components/Missing.scss";
-@import "./components/ModalControls.scss";
-@import "./components/RadioGroup.scss";
-@import "./components/RosterForLoop.scss";
-@import "./components/Roundabout.scss";
-@import "./components/Sequence.scss";
-@import "./components/Suggester.scss";
-@import "./components/Table.scss";
-@import "./components/Textarea.scss";
-@import "./components/VariableStatus.scss";
-@import "./components/Dragger";
-@import "./components/SuggesterWidget";

package/lib/hooks/use-auto-focus.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useAutoFocus = useAutoFocus;
-var _react = require("react");
-/**
- * Focus the first focusable element in the wrapper when the "key" changes and is defined
- */
-function useAutoFocus(wrapperRef, key) {
-  (0, _react.useEffect)(function () {
-    var _ref, _wrapperRef$current, _wrapperRef$current2;
-    if (!key || !wrapperRef.current) {
-      return;
-    }
-
-    // First look for invalid fields, then all fields
-    var firstFocusableElement = (_ref = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelector('button[aria-invalid="true"], [href][aria-invalid="true"], input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], [tabindex][aria-invalid="true"]:not([tabindex="-1"])')) !== null && _ref !== void 0 ? _ref : (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-
-    // The first element can be focusable
-    if (firstFocusableElement) {
-      return firstFocusableElement.focus();
-    }
-  }, [key, wrapperRef]);
-}

package/lib/hooks/use-ref-sync.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useRefSync = useRefSync;
-var _react = require("react");
-/**
- * useRef, but keep the value in sync on every render
- */
-function useRefSync(value) {
-  var ref = (0, _react.useRef)(value);
-  ref.current = value;
-  return ref;
-}

package/lib/hooks/use-track-changes.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTrackChanges = useTrackChanges;
-var _react = require("react");
-var _useRefSync = require("./use-ref-sync");
-/**
- * Allow tracking changed while interacting with Lunatic forms
- */
-function useTrackChanges(enabled, store, getData) {
-  // Saves the list of changed variable
-  var changedVariables = (0, _react.useRef)(new Set());
-  // Use ref to avoid dependencies in useCallback
-  var enabledRef = (0, _useRefSync.useRefSync)(enabled);
-  var getDataRef = (0, _useRefSync.useRefSync)(getData);
-  (0, _react.useEffect)(function () {
-    if (!enabled || !store) {
-      return;
-    }
-    var handleChange = function handleChange(e) {
-      changedVariables.current.add(e.detail.name);
-    };
-    store.on('change', handleChange);
-    return function () {
-      return store.off('change', handleChange);
-    };
-  }, [enabled, store]);
-
-  // Reset list of changed variables
-  var resetChangedData = (0, _react.useCallback)(function () {
-    changedVariables.current.clear();
-  }, [changedVariables]);
-  var getChangedData = (0, _react.useCallback)(function () {
-    var reset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    if (!enabledRef.current) {
-      throw new Error('getChangedData() cannot be used without enabling tracking mode, add "trackChanges: true" to useLunatic options');
-    }
-    var data = getDataRef.current(Array.from(changedVariables.current));
-    if (reset) {
-      resetChangedData();
-    }
-    return data;
-  }, [enabledRef, getDataRef, resetChangedData]);
-  return {
-    getChangedData: getChangedData,
-    resetChangedData: resetChangedData
-  };
-}

package/lib/hooks/use-why-render.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useWhyRender = useWhyRender;
-var _react = require("react");
-/**
- * Debugging hook that log what changed between 2 renders
- */
-function useWhyRender(props) {
-  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var propsRef = (0, _react.useRef)(props);
-  for (var key in props) {
-    if (propsRef.current[key] !== props[key]) {
-      console.log("".concat(prefix, ": ").concat(key, " changed"));
-    }
-  }
-  propsRef.current = props;
-}