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

package/lib/css/components/Suggester.scss

@@ -0,0 +1,170 @@
+@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

@@ -0,0 +1,176 @@
+$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

@@ -0,0 +1,27 @@
+.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

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

package/lib/css/components/VariableStatus.scss

@@ -0,0 +1,36 @@
+.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

@@ -0,0 +1,181 @@
+* {
+  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/useSuggesterInfo.js

@@ -21,14 +21,12 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Retrieves suggester info from indexedDB
  */
 function useSuggesterInfo(storeName, version) {
-  var _useState = (0, _react.useState)(),
+  var _useState = (0, _react.useState)({
+      type: 'Loading'
+    }),
     _useState2 = _slicedToArray(_useState, 2),
-    infos = _useState2[0],
-    setInfos = _useState2[1];
-  var _useState3 = (0, _react.useState)('Loading'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    state = _useState4[0],
-    setState = _useState4[1];
+    state = _useState2[0],
+    setState = _useState2[1];
   var fetchInfos = (0, _react.useCallback)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var db, info;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -44,15 +42,19 @@ function useSuggesterInfo(storeName, version) {
         case 6:
           info = _context.sent;
           if (db && info) {
-            setState('Ready');
-            setInfos(info);
+            setState({
+              type: 'Ready',
+              info: info
+            });
           }
           _context.next = 13;
           break;
         case 10:
           _context.prev = 10;
           _context.t0 = _context["catch"](0);
-          setState('Error');
+          setState({
+            type: 'Error'
+          });
         case 13:
         case "end":
           return _context.stop();
@@ -60,8 +62,8 @@ function useSuggesterInfo(storeName, version) {
     }, _callee, null, [[0, 10]]);
   })), [storeName, version]);
   return {
-    infos: infos,
-    state: state,
+    state: state.type,
+    infos: 'info' in state ? state.info : undefined,
     fetchInfos: fetchInfos
   };
 }