@inseefr/lunatic 3.4.5 → 3.4.6

package/src/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/src/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/src/css/components/Table.scss

@@ -0,0 +1,43 @@
+.lunatic-component .lunatic-table {
+	table-layout: fixed;
+	border-collapse: collapse;
+	margin-top: 0.3em;
+	margin-bottom: 0.3em;
+
+	thead {
+		border-collapse: separate; /* Don't collapse */
+		border-spacing: 0;
+	}
+
+	td,
+	th {
+		border: 0.15em solid var(--color-primary-dark);
+		padding: 0.2em;
+		font-size: 13px;
+	}
+
+	th {
+		position: sticky;
+		top: 0;
+		z-index: 2;
+		border-collapse: separate;
+		background-color: #FFF;
+		// Borders does not work on position sticky element, use box-shadow to imitate border
+		border-top: none!important;
+		box-shadow: inset 0 1px 0 var(--color-primary-dark), inset 0 -1px 0 var(--color-primary-dark);
+	}
+
+	td {
+		.field,
+		.field-with-tooltip {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	}
+}
+
+  .lunatic-component .table-lunatic .tooltip-lunatic img {
+    height: 20px;
+    width: 20px;
+  }

package/src/css/components/Textarea.scss

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

package/src/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/src/css/icons/alert-icon.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" ?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 52 52" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><path d="M26,0A26,26,0,1,0,52,26,26,26,0,0,0,26,0Zm0,48A22,22,0,1,1,48,26,22,22,0,0,1,26,48Z"/><path d="M28.83,26l8.58-8.59a2,2,0,0,0-2.82-2.82L26,23.17l-8.58-8.58a2,2,0,0,0-2.83,2.82L23.17,26l-8.58,8.58a2,2,0,1,0,2.82,2.83L26,28.83l8.59,8.58A2,2,0,0,0,36,38a2,2,0,0,0,1.42-.59,2,2,0,0,0,0-2.82Z"/></svg>

package/src/css/icons/wait-icon.svg

@@ -0,0 +1,17 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)" stroke-width="2">
+            <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+            <path d="M36 18c0-9.94-8.06-18-18-18">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="1s"
+                    repeatCount="indefinite"/>
+            </path>
+        </g>
+    </g>
+</svg>

package/src/css/icons/warn-icon.svg

@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M956.416 802.816L581.632 159.744c-17.408-30.72-41.984-47.104-69.632-47.104-26.624 0-52.224 16.384-69.632 47.104L66.56 802.816c-17.408 29.696-19.456 59.392-6.144 82.944 13.312 23.552 39.936 35.84 74.752 35.84h753.664c34.816 0 61.44-13.312 74.752-35.84 13.312-23.552 10.24-53.248-7.168-82.944z m-28.672 62.464c-6.144 10.24-19.456 15.36-38.912 15.36H135.168c-19.456 0-33.792-6.144-38.912-15.36-6.144-10.24-4.096-25.6 6.144-41.984l376.832-643.072c10.24-17.408 22.528-26.624 33.792-26.624s24.576 10.24 33.792 26.624L921.6 823.296c9.216 16.384 12.288 31.744 6.144 41.984zM542.72 716.8c0 17.408-13.312 30.72-30.72 30.72s-30.72-13.312-30.72-30.72 13.312-30.72 30.72-30.72 30.72 13.312 30.72 30.72z m0-296.96v194.56c0 17.408-13.312 30.72-30.72 30.72s-30.72-13.312-30.72-30.72V419.84c0-17.408 13.312-30.72 30.72-30.72s30.72 13.312 30.72 30.72z"  /></svg>

package/src/css/main.scss

@@ -0,0 +1,183 @@
+* {
+  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-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;
+      }
+    }
+  }
+}
+
+.lunatic-component + .lunatic-component {
+  margin-top: 1rem;
+}
+
+@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/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/src/hooks/use-auto-focus.ts

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+
+/**
+ * Focus the first focusable element in the wrapper when the "key" changes and is defined
+ */
+export function useAutoFocus(
+	wrapperRef: { current: HTMLDivElement | null },
+	key?: string
+) {
+	useEffect(() => {
+		if (!key || !wrapperRef.current) {
+			return;
+		}
+
+		// First look for invalid fields, then all fields
+		const firstFocusableElement =
+			(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"])'
+			) as HTMLElement | undefined) ??
+			(wrapperRef.current?.querySelector(
+				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+			) as HTMLElement | undefined);
+
+		// The first element can be focusable
+		if (firstFocusableElement) {
+			return firstFocusableElement.focus();
+		}
+	}, [key, wrapperRef]);
+}