@communitiesuk/svelte-component-library 0.1.17

package/dist/package-wrapping/InputForParameter.svelte

@@ -0,0 +1,205 @@
+<script>
+  import loader from "@monaco-editor/loader";
+  import Pill from "./Pill.svelte";
+  import CodeBlock from "./CodeBlock.svelte";
+  import { propPillLookup } from "../config.js";
+  import {
+    Checkbox,
+    Input,
+    Modal,
+    Radio,
+    Select,
+    Textarea,
+    Button,
+  } from "flowbite-svelte";
+
+  let { source, value = $bindable() } = $props();
+
+  let propPillObject =
+    propPillLookup[source.isBindable ? "bindable" : source.isProp];
+
+  // Reference to the div element that will contain the editor
+  // Using $state() because Monaco will dynamically modify this element's contents
+  // and we want Svelte to track these DOM mutations
+  let editorContainer = $state();
+
+  // The actual Monaco editor instance that provides editing functionality
+  // This is separate from the container - Monaco will inject its UI into the container
+  // when initialized
+  let monacoEditor;
+
+  let defaultModal = $state(false);
+
+  async function createModal() {
+    defaultModal = true;
+
+    if (source.inputType === "function" || source.inputType === "javascript") {
+      // Load the Monaco editor library
+      const monaco = await loader.init();
+
+      monacoEditor = monaco.editor.create(editorContainer, {
+        value, // Initial editor content bound to the component's value prop
+        language: source.inputType === "javascript" ? "json" : "javascript",
+        theme: "vs-light",
+        minimap: { enabled: false },
+        scrollbar: {
+          verticalScrollbarSize: 8,
+        },
+        lineNumbers: "off",
+        folding: false,
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+        fontSize: 14,
+        formatOnPaste: true,
+        formatOnType: true,
+        wordWrap: "on",
+        overviewRulerLanes: 0, // Disables the overview ruler
+        overviewRulerBorder: false,
+      });
+
+      // Establish two-way data binding between editor content and component's value prop
+      monacoEditor.onDidChangeModelContent(() => {
+        value = monacoEditor.getValue();
+      });
+
+      // Cleanup: Dispose Monaco editor instance on component destruction
+      return () => {
+        monacoEditor?.dispose();
+      };
+    }
+  }
+</script>
+
+{#snippet parameterName(name, propPillObject, inline = false, modal = false)}
+  <div class="flex flex-row flex-wrap justify-between items=center">
+    <div class="flex flex-row flex-wrap gap-1 mb-{inline ? 0 : 1} items-center">
+      <p class="m-0 p-0 text-lg text-black italic" style="font-weight: 500;">
+        {source.name}
+      </p>
+      <Pill
+        size={propPillObject.size}
+        textContent={propPillObject.text}
+        bgColor={propPillObject.bgColor}
+        textColor={propPillObject.textColor}
+        borderRadius="15px"
+        padding={propPillObject.padding}
+      ></Pill>
+    </div>
+    {#if modal}
+      <div class="flex flex-col justify-center text-xs">
+        <Button
+          class="p-0 pl-1  m-0 h-[22px] bg-gray-700"
+          on:click={createModal}
+        >
+          <span class="text-xs">Edit</span>
+          <svg width="22" height="22">
+            <g transform="translate(2,2)scale(0.25)">
+              <path
+                stroke="none"
+                fill="white"
+                d="M38.406 22.234l11.36 11.36L28.784 54.576l-12.876 4.307c-1.725.577-3.367-1.065-2.791-2.79l4.307-12.876L38.406 22.234zM41.234 19.406l5.234-5.234c1.562-1.562 4.095-1.562 5.657 0l5.703 5.703c1.562 1.562 1.562 4.095 0 5.657l-5.234 5.234L41.234 19.406z"
+              ></path>
+            </g>
+          </svg>
+        </Button>
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
+{#if source.inputType === "checkbox"}
+  <Checkbox bind:checked={value} color="orange">
+    {@render parameterName(source.name, propPillObject, true)}
+  </Checkbox>
+{/if}
+
+{#if source.inputType === "function" || source.inputType === "javascript"}
+  {@render parameterName(source.name, propPillObject, false, true)}
+  <!-- Container div for the Monaco editor:
+    - bind:this connects this element to our editorContainer variable state
+    - The height/border/rounded styles create the visual box for the editor
+  -->
+  <CodeBlock code={value} language="svelte" size="xs" includeHeader={false} />
+
+  <Modal
+    title={source.name}
+    bind:open={defaultModal}
+    size="lg"
+    classHeader="m-0 p-0 text-xl italic"
+    outsideclose
+  >
+    <div bind:this={editorContainer} class="h-[480px] w-full p-2"></div>
+    <svelte:fragment slot="footer"></svelte:fragment>
+  </Modal>
+{:else if source.inputType === "dropdown"}
+  {@render parameterName(source.name, propPillObject)}
+  <Select
+    class="text-base"
+    items={source.options.map((el) => ({ name: el, value: el }))}
+    bind:value
+  />
+{:else if source.inputType === "radio"}
+  {@render parameterName(source.name, propPillObject)}
+  {#each source.options as option, i}
+    <Radio value={option} bind:group={value}>
+      <span class="text-base font-normal">
+        {option}
+      </span>
+    </Radio>
+  {/each}
+{:else if source.inputType === "textArea"}
+  <div>
+    {@render parameterName(source.name, propPillObject)}
+    <Textarea id="textarea-id" bind:value rows={9} />
+  </div>
+{:else if source.inputType === "input"}
+  {@render parameterName(source.name, propPillObject)}
+  <Input size="lg" bind:value />
+{:else if source.inputType === "numberInput"}
+  {@render parameterName(source.name, propPillObject)}
+  <Input let:props>
+    <input
+      type="number"
+      {...props}
+      step={source?.step}
+      min={source?.min}
+      max={source?.max}
+      bind:value
+    />
+  </Input>
+{:else if source.inputType === "event"}
+  {@render parameterName(source.name, propPillObject)}
+  <p class="my-2 mx-0 p-0 text-sm text-black">
+    The {source.name} event handler has been called {value[0]} time{value[0] ===
+    1
+      ? ""
+      : "s"}{value[1] ? " (" + value[1] + ")" : ""}.
+  </p>
+{:else if "label" in source}
+  {@render parameterName(source.name, propPillObject)}
+{/if}
+
+{#if source.label}
+  <div
+    class="my-2 mx-0 p-2 text-sm text-slate-600 rounded-lg bg-white border border-solid border-slate-600"
+  >
+    <p class="underline underline-offset-4 p-0 m-0">Desc:</p>
+    <p class="p-0 m-0">
+      {source.label}
+    </p>
+  </div>
+{/if}
+
+{#if source.exampleCode}
+  <p
+    class="mt-4 mb-0 mx-0 p-0 break-words text-sm rounded-md"
+    style="color: #ba029b"
+  >
+    <CodeBlock
+      code={source.exampleCode}
+      language="svelte"
+      size="xs"
+      includeHeader={false}
+    />
+  </p>
+{/if}

package/dist/package-wrapping/InputForParameter.svelte.d.ts

@@ -0,0 +1,13 @@
+export default InputForParameter;
+type InputForParameter = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const InputForParameter: import("svelte").Component<{
+    source: any;
+    value?: any;
+}, {}, "value">;
+type $$ComponentProps = {
+    source: any;
+    value?: any;
+};

package/dist/package-wrapping/InputForParameterUpdated.svelte

@@ -0,0 +1,222 @@
+<script>
+  import { Checkbox, Select, Radio, Textarea, Input } from "flowbite-svelte";
+  import CodeBlock from "./CodeBlock.svelte";
+  import loader from "@monaco-editor/loader";
+  import { onMount } from "svelte";
+
+  let {
+    demoScreenWidth,
+    statedValue = $bindable(),
+    derivedValue,
+    parameter,
+  } = $props();
+
+  let useStatedValue = $derived(derivedValue == null);
+  let useRadio = $derived(
+    parameter.isEditable && parameter.propType === "radio",
+  );
+  let useDropdown = $derived(
+    (parameter.isEditable && parameter.inputType === "dropdown") ||
+      "options" in parameter,
+  );
+  let useTextarea = $derived(
+    parameter.isEditable &&
+      typeof (useStatedValue ? statedValue : derivedValue) === "string" &&
+      typeof parameter.value === "string",
+  );
+  let useNumberInput = $derived(
+    (parameter.isEditable && typeof statedValue === "number") ||
+      (statedValue === null && typeof parameter.value === "number"),
+  );
+  let useCheckbox = $derived(
+    parameter.isEditable && typeof statedValue === "boolean",
+  );
+  let useMonacoEditor = $derived(
+    parameter.isEditable &&
+      useStatedValue &&
+      !useRadio &&
+      !useDropdown &&
+      !useTextarea &&
+      !useNumberInput &&
+      !useCheckbox,
+  );
+
+  let monacoEditorContainerWidth = $derived(
+    useMonacoEditor
+      ? demoScreenWidth < 1024
+        ? 350
+        : demoScreenWidth < 1280
+          ? 450
+          : 550
+      : null,
+  );
+
+  let monacoEditorContainerHeight = $derived(
+    useMonacoEditor && monacoEditorContainerWidth
+      ? 40 +
+          20 *
+            JSON.stringify(parameter.value, null, 2)
+              .split("\n")
+              .reduce(
+                (acc, str) =>
+                  acc +
+                  Math.ceil(
+                    str.length / ((monacoEditorContainerWidth - 15) / 7.5),
+                  ),
+                0,
+              )
+      : null,
+  );
+
+  let editorContainer = $state();
+  let monacoEditor;
+
+  onMount(async () => {
+    if (useMonacoEditor) {
+      // Load the Monaco editor library
+      const monaco = await loader.init();
+
+      monacoEditor = monaco.editor.create(editorContainer, {
+        value: statedValue, // Initial editor content bound to the component's value prop
+        language: "javascript",
+        theme: "vs-light",
+        minimap: { enabled: false },
+        scrollbar: {
+          verticalScrollbarSize: 8,
+        },
+        lineNumbers: "off",
+        folding: false,
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+        fontSize: 13,
+        formatOnPaste: true,
+        formatOnType: true,
+        wordWrap: "on",
+        overviewRulerLanes: 0, // Disables the overview ruler
+        overviewRulerBorder: false,
+      });
+
+      // Establish two-way data binding between editor content and component's value prop
+      monacoEditor.onDidChangeModelContent(() => {
+        statedValue = monacoEditor.getValue();
+      });
+
+      // Cleanup: Dispose Monaco editor instance on component destruction
+      return () => {
+        monacoEditor?.dispose();
+      };
+    }
+  });
+
+  // $inspect(derivedValue, parameter.name);
+</script>
+
+{#if useStatedValue}
+  {#if useRadio}
+    <div class="flex flex-col gap-2">
+      {#each parameter.options as option, i}
+        <Radio value={option} bind:group={statedValue}>
+          <span class="text-sm">
+            {option}
+          </span>
+        </Radio>
+      {/each}
+    </div>
+  {:else if useDropdown}
+    <Select
+      size="sm"
+      class="text-base m-0 py-1 pr-8"
+      items={parameter.options.map((el) => ({ name: el, value: el }))}
+      bind:value={statedValue}
+    />
+  {:else if useTextarea}
+    <Textarea
+      unWrappedClass="m-0 px-2 py-1 focus:ring-orange-500 focus:border-orange-500"
+      id="textarea-id"
+      bind:value={statedValue}
+      rows={parameter.rows ?? 1}
+    />
+  {:else if useNumberInput}
+    <Input let:props>
+      <input
+        type="number"
+        {...props}
+        step={parameter.step}
+        min={parameter.min}
+        max={parameter.max}
+        bind:value={statedValue}
+      />
+    </Input>
+  {:else if useCheckbox}
+    <div class="p-2 h-full">
+      <Checkbox bind:checked={statedValue} color="orange"></Checkbox>
+    </div>
+  {:else if useMonacoEditor}
+    <div
+      bind:this={editorContainer}
+      class="py-2 px-1 m-0 border-solid border-[2px] rounded-md focus-within:ring-orange-500 focus-within:border-orange-500"
+      style="height: {monacoEditorContainerHeight}px; width: {monacoEditorContainerWidth}px;"
+    ></div>
+  {/if}
+{:else}
+  <div class="flex flex-col gap-4">
+    {#if parameter.hasOwnProperty("functionElements") && parameter.functionElements != null && (parameter.functionElements.hasOwnProperty("counter") || (parameter.functionElements.hasOwnProperty("dataset") && parameter.functionElements.hasOwnProperty("dataset") != null))}
+      <div
+        data-role="function-counter-and-data-container"
+        class="py-1 px-3 bg-slate-100 rounded"
+      >
+        {#if parameter.functionElements.hasOwnProperty("counter")}
+          <p>
+            This function has been called <span class="font-bold"
+              >{parameter.functionElements.counter}
+              time{parameter.functionElements.counter === 1 ? "" : "s"}.</span
+            >
+          </p>
+          {#if parameter.functionElements.hasOwnProperty("dataset")}
+            {#each Object.keys(parameter.functionElements.dataset) as key}
+              {#if parameter.functionElements.dataset[key] != null}
+                <p>
+                  When it was last called, its target's data-{key} was
+                  <span class="font-bold"
+                    >{parameter.functionElements.dataset[key]}</span
+                  >.
+                </p>
+              {/if}
+            {/each}
+          {/if}
+        {/if}
+      </div>
+    {/if}
+    {#if (parameter.hasOwnProperty("functionElements") && parameter.functionElements != null && parameter.functionElements.hasOwnProperty("functionAsString") && parameter.functionElements.functionAsString != null) || (parameter?.propType === "fixed" && !parameter.hasOwnProperty("functionElements")) || (!parameter?.isEditable && !parameter.hasOwnProperty("functionElements"))}
+      <div class="overflow-scroll" style="max-height: 768px;">
+        {#key derivedValue}
+          <CodeBlock
+            code={typeof derivedValue === "function"
+              ? parameter.functionElements?.functionAsString.replace(
+                  /getValue\("([^"]+)"\)/g,
+                  "$1",
+                )
+              : typeof derivedValue === "object"
+                ? derivedValue
+                : derivedValue.toString()}
+            language="javascript"
+            size="sm"
+            includeHeader={false}
+          ></CodeBlock>
+        {/key}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  [data-role="function-counter-and-data-container"] p:first-of-type {
+    padding-top: 0px;
+    margin-top: 0px;
+  }
+
+  [data-role="function-counter-and-data-container"] p:last-of-type {
+    padding-bottom: 0px;
+    margin-bottom: 0px;
+  }
+</style>

package/dist/package-wrapping/InputForParameterUpdated.svelte.d.ts

@@ -0,0 +1,17 @@
+export default InputForParameterUpdated;
+type InputForParameterUpdated = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const InputForParameterUpdated: import("svelte").Component<{
+    demoScreenWidth: any;
+    statedValue?: any;
+    derivedValue: any;
+    parameter: any;
+}, {}, "statedValue">;
+type $$ComponentProps = {
+    demoScreenWidth: any;
+    statedValue?: any;
+    derivedValue: any;
+    parameter: any;
+};

package/dist/package-wrapping/InputForParameterUpdatedTEMP.svelte

@@ -0,0 +1,203 @@
+<script>
+  import { Checkbox, Select, Radio, Textarea, Input } from "flowbite-svelte";
+  import CodeBlock from "./CodeBlock.svelte";
+  import loader from "@monaco-editor/loader";
+  import { onMount } from "svelte";
+
+  let {
+    parameter,
+    value = $bindable(),
+    boundedValue,
+    demoScreenWidth,
+  } = $props();
+
+  let editorContainer = $state();
+
+  let monacoEditor;
+
+  let showMonacoEditor = $derived(
+    typeof parameter.value === "object" && parameter.isEditable,
+  );
+
+  let monacoEditorContainerWidth = $derived(
+    showMonacoEditor
+      ? demoScreenWidth < 1024
+        ? 350
+        : demoScreenWidth < 1280
+          ? 450
+          : 550
+      : null,
+  );
+
+  let monacoEditorContainerHeight = $derived(
+    showMonacoEditor && monacoEditorContainerWidth
+      ? 40 +
+          20 *
+            JSON.stringify(parameter.value, null, 2)
+              .split("\n")
+              .reduce(
+                (acc, str) =>
+                  acc +
+                  Math.ceil(
+                    str.length / ((monacoEditorContainerWidth - 15) / 7.5),
+                  ),
+                0,
+              )
+      : null,
+  );
+
+  onMount(async () => {
+    if (showMonacoEditor) {
+      // Load the Monaco editor library
+      const monaco = await loader.init();
+
+      monacoEditor = monaco.editor.create(editorContainer, {
+        value: value, // Initial editor content bound to the component's value prop
+        language: "javascript",
+        theme: "vs-light",
+        minimap: { enabled: false },
+        scrollbar: {
+          verticalScrollbarSize: 8,
+        },
+        lineNumbers: "off",
+        folding: false,
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+        fontSize: 13,
+        formatOnPaste: true,
+        formatOnType: true,
+        wordWrap: "on",
+        overviewRulerLanes: 0, // Disables the overview ruler
+        overviewRulerBorder: false,
+      });
+
+      // Establish two-way data binding between editor content and component's value prop
+      monacoEditor.onDidChangeModelContent(() => {
+        value = monacoEditor.getValue();
+      });
+
+      // Cleanup: Dispose Monaco editor instance on component destruction
+      return () => {
+        monacoEditor?.dispose();
+      };
+    }
+  });
+
+  $inspect(parameter.name, value, boundedValue);
+</script>
+
+{#if parameter.isEditable}
+  {#if showMonacoEditor}
+    <div
+      bind:this={editorContainer}
+      class="py-2 px-1 m-0 border-solid border-[2px] rounded-md focus-within:ring-orange-500 focus-within:border-orange-500"
+      style="height: {monacoEditorContainerHeight}px; width: {monacoEditorContainerWidth}px;"
+    ></div>
+  {:else if parameter.inputType === "checkbox"}
+    <div class="p-2 h-full">
+      <Checkbox bind:checked={value} color="orange"></Checkbox>
+    </div>
+  {:else if parameter.inputType === "dropdown"}
+    <Select
+      size="sm"
+      class="text-base m-0 px-2 py-1"
+      items={parameter.options.map((el) => ({ name: el, value: el }))}
+      bind:value
+    />
+  {:else if parameter.inputType === "radio"}
+    <div class="flex flex-col gap-2">
+      {#each parameter.options as option, i}
+        <Radio value={option} bind:group={value}>
+          <span class="text-sm">
+            {option}
+          </span>
+        </Radio>
+      {/each}
+    </div>
+  {:else if parameter.inputType === "input"}
+    <Textarea
+      unWrappedClass="m-0 px-2 py-1 focus:ring-orange-500 focus:border-orange-500"
+      id="textarea-id"
+      bind:value
+      rows={parameter.rows ?? 1}
+    />
+  {:else if parameter.inputType === "numberInput"}
+    <Input let:props>
+      <input
+        type="number"
+        {...props}
+        step={parameter?.step}
+        min={parameter?.min}
+        max={parameter?.max}
+        bind:value
+      />
+    </Input>
+  {/if}
+{:else}
+  {#key boundedValue}
+    <CodeBlock
+      code={boundedValue}
+      language="javascript"
+      size="sm"
+      includeHeader={false}
+    ></CodeBlock>
+  {/key}
+{/if}
+
+<!-- {#if showMonacoEditor}
+  <div
+    bind:this={editorContainer}
+    class="py-2 px-1 m-0 border-solid border-[2px] rounded-md focus-within:ring-orange-500 focus-within:border-orange-500"
+    style="height: {monacoEditorContainerHeight}px; width: {monacoEditorContainerWidth}px;"
+  ></div>
+{:else if parameter.inputType === "code"}
+  <div bind:clientHeight={codeBlockHeight} bind:clientWidth={codeBlockWidth}>
+    <CodeBlock
+      code={codeBlockType === "function"
+        ? "function " + codeBlockValue.toString().slice(5)
+        : codeBlockValue}
+      language="javascript"
+      size="sm"
+      includeHeader={false}
+    ></CodeBlock>
+  </div>
+{:else if parameter.inputType === "checkbox"}
+  <div class="p-2 h-full">
+    <Checkbox bind:checked={value} color="orange"></Checkbox>
+  </div>
+{:else if parameter.inputType === "dropdown"}
+  <Select
+    size="sm"
+    class="text-base m-0 px-2 py-1"
+    items={parameter.options.map((el) => ({ name: el, value: el }))}
+    bind:value
+  />
+{:else if parameter.inputType === "radio"}
+  <div class="flex flex-col gap-2">
+    {#each parameter.options as option, i}
+      <Radio value={option} bind:group={value}>
+        <span class="text-sm">
+          {option}
+        </span>
+      </Radio>
+    {/each}
+  </div>
+{:else if parameter.inputType === "input"}
+  <Textarea
+    unWrappedClass="m-0 px-2 py-1 focus:ring-orange-500 focus:border-orange-500"
+    id="textarea-id"
+    bind:value
+    rows={parameter.rows ?? 1}
+  />
+{:else if parameter.inputType === "numberInput"}
+  <Input let:props>
+    <input
+      type="number"
+      {...props}
+      step={parameter?.step}
+      min={parameter?.min}
+      max={parameter?.max}
+      bind:value
+    />
+  </Input>
+{/if} -->

package/dist/package-wrapping/InputForParameterUpdatedTEMP.svelte.d.ts

@@ -0,0 +1,17 @@
+export default InputForParameterUpdatedTemp;
+type InputForParameterUpdatedTemp = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const InputForParameterUpdatedTemp: import("svelte").Component<{
+    parameter: any;
+    value?: any;
+    boundedValue: any;
+    demoScreenWidth: any;
+}, {}, "value">;
+type $$ComponentProps = {
+    parameter: any;
+    value?: any;
+    boundedValue: any;
+    demoScreenWidth: any;
+};

package/dist/package-wrapping/ListOfComponentStatuses.svelte

@@ -0,0 +1,19 @@
+<script>
+  import Pill from "./Pill.svelte";
+
+  let { statusObject } = $props();
+</script>
+
+<div data-role="status-container" class="flex flex-row flex-wrap gap-2">
+  {#each Object.keys(statusObject) as category, index}
+    {@const labels = Object.keys(statusObject[category]).filter(
+      (el) => statusObject[category][el],
+    )}
+    <div data-role="category-container" class="flex flex-row gap-2">
+      {#each labels as label}
+        <Pill textContent={label} bgColor="black" textColor="white" size="small"
+        ></Pill>
+      {/each}
+    </div>
+  {/each}
+</div>