WIP: Visual Editor v2

src/lib/BuilderNavbar.svelte → src/components/BuilderNavbar.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { createEventDispatcher, onMount } from "svelte";
-  import { getSchemas } from "./editor/actions";
-  import DocLoader from "../components/DocLoader.svelte";
+  import { getSchemas } from "../lib/editor/actions";
+  import DocLoader from "./DocLoader.svelte";
   import logo from "../static/logo-name.svg";
-  import type { ListOption } from "./types/ui";
-  import type { State } from "./types/editor";
-  import SelectSchemas from "./SelectSchemas.svelte";
+  import type { ListOption } from "../lib/types/ui";
+  import type { State } from "../lib/types/editor";
+  import SelectSchemas from "../lib/editor/form/SelectSchemas.svelte";
   import BuilderNavbarOptions from "./BuilderNavbarOptions.svelte";
   import BuilderNavbarActions from "./BuilderNavbarActions.svelte";
   import BuilderNavbarEnvelopeMeta from "./BuilderNavbarEnvelopeMeta.svelte";

src/lib/BuilderNavbarActions.svelte → src/components/BuilderNavbarActions.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { iconButtonClasses } from "./ui/iconButtonClasses";
-  import type { State } from "./types/editor";
+  import { iconButtonClasses } from "./iconButtonClasses";
+  import type { State } from "../lib/types/editor";
   import { Icon } from "@steeze-ui/svelte-icon";
   import { Calculator, Erase, Sign, SquareCheck } from "@invopop/ui-icons";
   import { createEventDispatcher } from "svelte";

src/lib/BuilderNavbarDownload.svelte → src/components/BuilderNavbarDownload.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { Icon } from "@steeze-ui/svelte-icon";
-  import { iconButtonClasses } from "./ui/iconButtonClasses";
+  import { iconButtonClasses } from "./iconButtonClasses";
   import { DocumentText, Download } from "@invopop/ui-icons";
-  import LoadingIcon from "./ui/LoadingIcon.svelte";
+  import LoadingIcon from "../lib/ui/icons/LoadingIcon.svelte";
   import { createEventDispatcher } from "svelte";
   import { toasts } from "svelte-toasts";
 

src/lib/BuilderNavbarEnvelopeMeta.svelte → src/components/BuilderNavbarEnvelopeMeta.svelte

@@ -2,7 +2,7 @@
   import { createEventDispatcher } from "svelte";
   import { Icon } from "@steeze-ui/svelte-icon";
   import { Header, Signature } from "@invopop/ui-icons";
-  import type { State } from "./types/editor";
+  import type { State } from "../lib/types/editor";
 
   const dispatch = createEventDispatcher();
 

src/lib/EnvelopeEditor.svelte

@@ -10,7 +10,7 @@
   import { problemSeverityMap, type EditorProblem } from "./editor/EditorProblem.js";
   import * as actions from "./editor/actions";
   import type { DocumentHeader, State } from "./types/editor";
-  import { displayAllErrors, showErrorToast } from "./helpers";
+  import { displayAllErrors, showErrorToast } from "./helpers/notification";
   import { generateCorrectOptionsModel } from "./editor/form/utils/model";
   import fileSaver from "file-saver";
   import type { Envelope, EnvelopeHeader } from "./types/envelope";

src/lib/editor/actions.ts

@@ -1,9 +1,14 @@
 import { get } from "svelte/store";
 import * as GOBL from "@invopop/gobl-worker";
-import { encodeUTF8ToBase64 } from "$lib/encodeUTF8ToBase64.js";
 import { toasts } from "svelte-toasts";
 import { envelopeGOBLSchema } from "$lib/helpers/envelope";
 import type { BuilderContext } from "$lib/types/editor";
+import utf8 from "utf8";
+import base64 from "base-64";
+
+export function encodeUTF8ToBase64(value: string): string {
+  return base64.encode(utf8.encode(value));
+}
 
 // Send a request to the GOBL worker to run the "build" operation using the current
 // editor window contents and update with the results.

src/lib/editor/code/EditorCode.svelte

@@ -13,7 +13,7 @@
   import SuccessIcon from "$lib/ui/icons/SuccessIcon.svelte";
   import LightbulbIcon from "$lib/ui/icons/LightbulbIcon.svelte";
   import { getBuilderContext } from "$lib/store/builder.js";
-  import { getErrorString } from "$lib/helpers";
+  import { getErrorString } from "$lib/helpers/notification";
 
   let monaco: typeof Monaco;
 

src/lib/editor/form/AbstractField.svelte

@@ -5,7 +5,7 @@
   import StringField from "./StringField.svelte";
   import FallbackField from "./FallbackField.svelte";
   import FieldContextMenu from "./FieldContextMenu.svelte";
-  import hover from "./action/hover.js";
+  import hover from "../../actions/hover.js";
   import IntegerField from "./IntegerField.svelte";
   import type { UIModelField } from "./utils/model.js";
   import AddFieldMenu from "./AddFieldMenu.svelte";

src/lib/editor/form/AddFieldMenu.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
-  import hover from "./action/hover.js";
+  import hover from "$lib/actions/hover.js";
   import { createEventDispatcher } from "svelte";
   import { sleep } from "./utils/sleep.js";
   import type { SchemaOption, UIModelField } from "./utils/model.js";
-  import clickOutside from "$lib/clickOutside.js";
+  import clickOutside from "$lib/actions/clickOutside.js";
   import { Icon } from "svelte-hero-icons";
   import { Search } from "@invopop/ui-icons";
 

src/lib/editor/form/EditableTextField.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SelectSchemas from "$lib/SelectSchemas.svelte";
+  import SelectSchemas from "$lib/editor/form/SelectSchemas.svelte";
   import type { UIModelField } from "$lib/editor/form/utils/model.js";
   import { getBuilderContext } from "$lib/store/builder";
   import clsx from "clsx";

src/lib/editor/form/EditorForm.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import LoadingIcon from "$lib/ui/LoadingIcon.svelte";
+  import LoadingIcon from "$lib/ui/icons/LoadingIcon.svelte";
   import { build, getSchemas } from "../actions.js";
   import DynamicForm from "./DynamicForm.svelte";
   import { createEventDispatcher, setContext } from "svelte";

src/lib/editor/form/SchemaField.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SelectSchemas from "$lib/SelectSchemas.svelte";
+  import SelectSchemas from "$lib/editor/form/SelectSchemas.svelte";
   import { getBuilderContext } from "$lib/store/builder";
 
   const { jsonSchema, updateSchema } = getBuilderContext();

src/lib/SelectSchemas.svelte → src/lib/editor/form/SelectSchemas.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import Select from "svelte-select";
   import { createEventDispatcher, onMount } from "svelte";
-  import { getSchemas } from "./editor/actions";
-  import type { ListOption } from "./types/ui";
+  import { getSchemas } from "../actions";
+  import type { ListOption } from "../../types/ui";
 
   const dispatch = createEventDispatcher();
 

src/lib/store/builder.ts

@@ -3,7 +3,7 @@ import type { GOBLError } from "@invopop/gobl-worker";
 import { getContext, setContext } from "svelte";
 import { derived, get, writable, type Writable } from "svelte/store";
 import type * as monaco from "monaco-editor";
-import { objectHasEmptyProperties } from "$lib/helpers";
+import { objectHasEmptyProperties } from "$lib/helpers/notification";
 import { writableDerived } from "./writableDerived";
 import { getUIModel, type UIModelRootField } from "$lib/editor/form/utils/model";
 import { getDebouncedFunction } from "$lib/editor/form/utils/debounce";

src/lib/ui/Modal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import clickOutside from "$lib/clickOutside.js";
+  import clickOutside from "$lib/actions/clickOutside.js";
   import { createEventDispatcher } from "svelte";
   import BaseButton from "./BaseButton.svelte";
   import type { IconSource } from "@steeze-ui/svelte-icon";