@communitiesuk/svelte-component-library 0.1.17

package/dist/package-wrapping/ComponentDemo.svelte

@@ -0,0 +1,114 @@
+<script>
+  import SidebarContainer from "./SidebarContainer.svelte";
+  import OverlayAndComponentContainer from "./OverlayAndComponentContainer.svelte";
+  import { Tooltip, Button } from "flowbite-svelte";
+
+  /* incoming props from wrapper page --------------------------- */
+  let {
+    Component,
+    demoScreenWidth = $bindable(),
+    parametersSourceArray,
+    statedParametersValuesArray = $bindable(),
+    derivedParametersValuesArray,
+    parametersVisibleArray,
+    parametersParsingErrorsObject,
+    copyParametersToClipboardObject,
+  } = $props();
+
+  /* derive categories for the sidebar / overlay ---------------- */
+  let parameterCategories = $derived(
+    [
+      ...new Set(
+        parametersSourceArray
+          .filter((_, i) => parametersVisibleArray[i])
+          .map((el) => el.category),
+      ),
+    ].map((name) => ({ name, value: name })),
+  );
+
+  let categoriesOverlayOpenArray = $state(parameterCategories.map(() => false));
+  let selectedCategory = $derived(
+    categoriesOverlayOpenArray.findIndex((v) => v),
+  );
+
+  /* UI state ---------------------------------------------------- */
+  let sideBarOpen = $state(true);
+  let overlayOpen = $state(false);
+  let componentOpacity = $state(0.1);
+</script>
+
+<!-- ===== COMPONENT DEMO ======================================= -->
+<div data-role="component-demo-container" class="flex flex-col gap-2">
+  <!-- header with copy button -->
+  <div class="flex flex-row justify-between mb-6 mt-12">
+    <h5 id="component-demo" class="underline underline-offset-4">
+      Component Demo
+    </h5>
+
+    <div>
+      <Button
+        onclick={() =>
+          navigator.clipboard.writeText(
+            JSON.stringify(copyParametersToClipboardObject, null, 2),
+          )}
+        color="alternative"
+        id="copy-props-btn"
+        class="m-0 p-1.5 border-none"
+      >
+        <!-- simple copy icon -->
+        <svg width="25" height="30">
+          {#each [{ x: 8, stroke: "#6b7280", strokeWidth: "1.5" }, { x: 1, stroke: "white", strokeWidth: "3" }, { x: 1, stroke: "#6b7280", strokeWidth: "1.5" }] as rect}
+            <rect
+              x={rect.x}
+              y={rect.x === 8 ? 2 : 8}
+              width="16"
+              height="20"
+              rx="2"
+              stroke={rect.stroke}
+              stroke-width={rect.strokeWidth}
+              fill="white"
+            ></rect>
+          {/each}
+        </svg>
+      </Button>
+      <Tooltip trigger="click" triggeredBy="#copy-props-btn">
+        Props copied to clipboard
+      </Tooltip>
+    </div>
+  </div>
+
+  <!-- sidebar + component stack -->
+  <!-- sidebar -->
+  <div class="w-full">
+    <SidebarContainer
+      bind:demoScreenWidth
+      {parameterCategories}
+      bind:categoriesOverlayOpenArray
+      {selectedCategory}
+      bind:sideBarOpen
+      bind:overlayOpen
+      bind:componentOpacity
+    />
+  </div>
+
+  <!-- component & overlay -->
+  <div class="flex-1 min-w-0">
+    <OverlayAndComponentContainer
+      {Component}
+      {demoScreenWidth}
+      {parametersSourceArray}
+      bind:statedParametersValuesArray
+      {derivedParametersValuesArray}
+      {parametersVisibleArray}
+      {parametersParsingErrorsObject}
+      {parameterCategories}
+      bind:categoriesOverlayOpenArray
+      {selectedCategory}
+      bind:overlayOpen
+      {componentOpacity}
+    />
+  </div>
+</div>
+
+<style>
+</style>

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

@@ -0,0 +1,25 @@
+export default ComponentDemo;
+type ComponentDemo = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ComponentDemo: import("svelte").Component<{
+    Component: any;
+    demoScreenWidth?: any;
+    parametersSourceArray: any;
+    statedParametersValuesArray?: any;
+    derivedParametersValuesArray: any;
+    parametersVisibleArray: any;
+    parametersParsingErrorsObject: any;
+    copyParametersToClipboardObject: any;
+}, {}, "demoScreenWidth" | "statedParametersValuesArray">;
+type $$ComponentProps = {
+    Component: any;
+    demoScreenWidth?: any;
+    parametersSourceArray: any;
+    statedParametersValuesArray?: any;
+    derivedParametersValuesArray: any;
+    parametersVisibleArray: any;
+    parametersParsingErrorsObject: any;
+    copyParametersToClipboardObject: any;
+};

package/dist/package-wrapping/ComponentDemoTEMP.svelte

@@ -0,0 +1,305 @@
+<script>
+  import DividerLine from "./DividerLine.svelte";
+  import DoubleChevronButton from "../icons/DoubleChevronButton.svelte";
+  import SingleChevronButtonWithLabel from "../icons/SingleChevronButtonWithLabel.svelte";
+  import { Tabs, TabItem, Range, Label } from "flowbite-svelte";
+  import InputForParameterUpdated from "./InputForParameterUpdated.svelte";
+  import ScreenSizeRadioUpdated from "./ScreenSizeRadioUpdated.svelte";
+
+  let {
+    Component,
+    parametersSourceArray,
+    parametersVisibleArray,
+    bindingsParametersValuesArray,
+    parametersValuesArray = $bindable(),
+    demoScreenWidth = $bindable(),
+  } = $props();
+
+  let parameterCategories = $derived(
+    [...new Set(parametersSourceArray.map((el) => el.category))].map((el) => ({
+      name: el,
+      value: el,
+    })),
+  );
+
+  let categoriesOverlayOpenArray = $state([]);
+
+  $effect(() => {
+    categoriesOverlayOpenArray = parameterCategories.map((el) => false);
+  });
+
+  let selectedCategory = $derived(
+    categoriesOverlayOpenArray.findIndex((el) => el),
+  );
+
+  let sideBarOpen = $state(true);
+  let overlayOpen = $state(false);
+
+  let componentOpacity = $state(0.1);
+
+  let componentWidth = $state();
+  let componentHeight = $state();
+</script>
+
+<div
+  data-role="component-demo-container"
+  class="flex flew-row xl:justify-center xl:mx-0 justify-start mx-5"
+>
+  <div class="w-[1378px]">
+    <h5 class="mb-6 mt-12 underline underline-offset-4">Component Demo</h5>
+    <div class="flex flex-row gap-2">
+      <div>
+        {#if sideBarOpen}
+          <div data-role="sidebar-container" class="px-1 pt-0 pb-2">
+            <Tabs tabStyle="underline">
+              <div
+                class="flex flex-row justify-between items-center w-full pr-1"
+              >
+                <div class="flex flex-row gap-2">
+                  <TabItem
+                    open={true}
+                    title={"Parameters"}
+                    defaultClass="text-lg"
+                  >
+                    <div class="flex flex-col gap-0 m-0 p-0">
+                      {#each parameterCategories as category, index}
+                        <button>
+                          <div
+                            class="flex flex-row gap-0 justify-start items-center"
+                          >
+                            <SingleChevronButtonWithLabel
+                              text={category.name}
+                              {index}
+                              bind:openArray={categoriesOverlayOpenArray}
+                              bind:overlayOpen
+                              open={categoriesOverlayOpenArray[index] &&
+                                overlayOpen}
+                            ></SingleChevronButtonWithLabel>
+                          </div>
+                        </button>
+                      {/each}
+                    </div>
+                  </TabItem>
+                  <TabItem
+                    open={false}
+                    title={"Container width"}
+                    defaultClass="text-lg"
+                    ><ScreenSizeRadioUpdated bind:demoScreenWidth
+                    ></ScreenSizeRadioUpdated>
+                  </TabItem>
+                </div>
+                <DoubleChevronButton
+                  bind:open={sideBarOpen}
+                  onClickFunction={() => {
+                    sideBarOpen = !sideBarOpen;
+                  }}
+                ></DoubleChevronButton>
+              </div>
+            </Tabs>
+            {#if overlayOpen && selectedCategory > -1}
+              <DividerLine margin="10px 0px"></DividerLine>
+              <div class="ml-2 mr-4 flex flex-row gap-4 items-center">
+                <Label class="text-lg text-[#6b7280]">Component opacity:</Label>
+                <div class="grow">
+                  <Range
+                    class="orange-500"
+                    id="range1"
+                    bind:value={componentOpacity}
+                    min="0"
+                    max="0.5"
+                    step="0.1"
+                  />
+                </div>
+              </div>
+            {/if}
+          </div>
+        {:else}
+          <div class="mt-2 inline-block">
+            <div
+              data-role="sidebar-floating-button"
+              class="flex flex-row items-center justify-center p-2"
+            >
+              <DoubleChevronButton
+                bind:open={sideBarOpen}
+                onClickFunction={() => {
+                  sideBarOpen = !sideBarOpen;
+                }}
+              ></DoubleChevronButton>
+            </div>
+          </div>
+        {/if}
+      </div>
+      <div data-role="component-and-overlay-container">
+        {#if overlayOpen && selectedCategory > -1}
+          <div
+            data-role="overlay-container"
+            class="absolute z-[2] p-0 m-0 overflow-scroll"
+            style="width: {componentWidth +
+              2}px; min-width: 768px; height: {componentHeight}px;"
+          >
+            <div class="p-5 flex flex-row justify-between bg-white">
+              <h6 class="underline underline-offset-4">
+                {parameterCategories.find((el, i) => i === selectedCategory)
+                  .name}
+              </h6>
+              <DoubleChevronButton
+                bind:open={overlayOpen}
+                onClickFunction={() => {
+                  overlayOpen = !overlayOpen;
+                  if (!overlayOpen) {
+                    categoriesOverlayOpenArray = categoriesOverlayOpenArray.map(
+                      (el) => false,
+                    );
+                  }
+                }}
+              ></DoubleChevronButton>
+            </div>
+            <DividerLine></DividerLine>
+            <div data-role="grid-container" class="m-2 p-5 text-base">
+              <div data-role="item" class="font-bold">Parameter</div>
+              <div data-role="item" class="font-bold">Value</div>
+              <div data-role="item" class="font-bold">Description</div>
+              {#each parametersSourceArray as parameter}
+                {#if parameter.category === parameterCategories[selectedCategory]?.name && parametersVisibleArray[parameter.index]}
+                  <div class="col-span-full">
+                    <DividerLine></DividerLine>
+                  </div>
+                  <div
+                    data-role="item"
+                    data-width={demoScreenWidth < 1024
+                      ? "col1Sm"
+                      : demoScreenWidth < 1280
+                        ? "col1Md"
+                        : "col1Lg"}
+                    class="m-1 hyphens-auto break-words"
+                  >
+                    {parameter.name}
+                  </div>
+                  <div
+                    data-role="item"
+                    data-width={demoScreenWidth < 1024
+                      ? "col2Sm"
+                      : demoScreenWidth < 1280
+                        ? "col2Md"
+                        : "col2Lg"}
+                  >
+                    <InputForParameterUpdated
+                      {parameter}
+                      bind:value={parametersValuesArray[parameter.index]}
+                      boundedValue={bindingsParametersValuesArray[
+                        parameter.index
+                      ]}
+                      {demoScreenWidth}
+                    ></InputForParameterUpdated>
+                  </div>
+                  <div data-role="item" class="m-1 hyphens-auto break-words">
+                    {#if typeof parameter.description === "string"}
+                      {parameter.description}
+                    {:else if typeof parameter.description === "object"}
+                      {#each parameter.description.arr as line}
+                        <p>
+                          {#if parameter.description.markdown}
+                            {@html line}
+                          {:else}
+                            {line}
+                          {/if}
+                        </p>
+                      {/each}
+                    {:else if typeof parameter.description === "function"}
+                      {@render parameter.description()}
+                    {:else}
+                      -
+                    {/if}
+                  </div>
+                {/if}
+              {/each}
+            </div>
+          </div>
+        {/if}
+        <div
+          data-role="component-container-centered"
+          class="px-0 py-5 rounded-md {overlayOpen
+            ? ''
+            : 'border border-solid border-[#d1d5db]}'}"
+          style="width: {demoScreenWidth}px;"
+        >
+          <div
+            class="z-[1]"
+            style="z-index: 1; min-height: 600px; opacity: {overlayOpen
+              ? componentOpacity
+              : 1};"
+            bind:clientWidth={componentWidth}
+            bind:clientHeight={componentHeight}
+          >
+            {@render Component()}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  [data-role="sidebar-container"] {
+    width: 346px;
+    border: solid #d1d5db 1px;
+    border-radius: 5px;
+  }
+
+  [data-role="sidebar-floating-button"] {
+    border: solid #d1d5db 1px;
+    border-radius: 5px;
+  }
+
+  [data-role="component-and-overlay-container"] {
+    display: inline-block;
+  }
+
+  [data-role="overlay-container"] {
+    border: solid #d1d5db 1px;
+    border-radius: 5px;
+  }
+
+  [data-role="grid-container"] {
+    display: grid;
+    grid-template-columns: auto auto 1fr;
+    gap: 20px;
+  }
+
+  [data-role="item"] {
+    color: #6b7280;
+  }
+
+  [data-role="item"] p:first-of-type {
+    margin-top: 0px;
+    padding-top: 0px;
+  }
+
+  [data-role="item"] p:last-of-type {
+    margin-bottom: 0px;
+    padding-bottom: 0px;
+  }
+  [data-width="col1Sm"] {
+    max-width: 125px;
+  }
+
+  [data-width="col1Md"] {
+    max-width: 175px;
+  }
+
+  [data-width="col1Lg"] {
+    max-width: 225px;
+  }
+
+  [data-width="col2Sm"] {
+    max-width: 350px;
+  }
+
+  [data-width="col2Md"] {
+    max-width: 450px;
+  }
+
+  [data-width="col2Lg"] {
+    max-width: 550px;
+  }
+</style>

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

@@ -0,0 +1,21 @@
+export default ComponentDemoTemp;
+type ComponentDemoTemp = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ComponentDemoTemp: import("svelte").Component<{
+    Component: any;
+    parametersSourceArray: any;
+    parametersVisibleArray: any;
+    bindingsParametersValuesArray: any;
+    parametersValuesArray?: any;
+    demoScreenWidth?: any;
+}, {}, "demoScreenWidth" | "parametersValuesArray">;
+type $$ComponentProps = {
+    Component: any;
+    parametersSourceArray: any;
+    parametersVisibleArray: any;
+    bindingsParametersValuesArray: any;
+    parametersValuesArray?: any;
+    demoScreenWidth?: any;
+};

package/dist/package-wrapping/ComponentDetails.svelte

@@ -0,0 +1,123 @@
+<script>
+  // @ts-nocheck
+  import Pill from "./Pill.svelte";
+  import DividerLine from "./DividerLine.svelte";
+
+  import { componentStausLookup } from "../config.js";
+  import { textStringConversion } from "../utils/text-string-conversion/textStringConversion.js";
+
+  let { homepage, details } = $props();
+</script>
+
+{#snippet linkedNameOfComponent(folder, name, isLinkToChildComponent = true)}
+  <a
+    class="underline underline-offset-4"
+    href="/components/{folder}/{textStringConversion(name, 'kebab')}"
+  >
+    {#if isLinkToChildComponent}
+      <p class="m-0">{name}</p>
+    {:else}
+      <h6>{name}</h6>
+    {/if}
+  </a>
+{/snippet}
+
+<div
+  data-role="details-container"
+  class="{homepage ? '' : 'g-top-level-container'} flex flex-col gap-6 {homepage
+    ? 'bg-slate-100 p-5 rounded-lg'
+    : ''}"
+>
+  <div
+    data-role="name-and-pill-container"
+    class="flex flex-row items-center gap-4"
+  >
+    {#if homepage}
+      {@render linkedNameOfComponent(details.folder, details.name, false)}
+    {:else}
+      <h2>{details.name}</h2>
+    {/if}
+    {#if details.status}
+      <Pill
+        size={homepage ? "small" : "medium"}
+        textContent={textStringConversion(details.status, "title-first-word")}
+        bgColor={"black"}
+        textColor={"white"}
+      ></Pill>
+    {/if}
+  </div>
+
+  <DividerLine margin="0.2rem 0rem"></DividerLine>
+
+  <dl data-role="details-grid-container" class="grid gap-y-4">
+    {#each ["description", "context"] as detail}
+      {@const detailData = details[detail]}
+      {#if detailData?.length > 0}
+        <dt id={detail}>{textStringConversion(detail, "title-first-word")}:</dt>
+        <dd>
+          {#each detailData as paragraph}
+            {#if paragraph.markdown}
+              <p>{@html paragraph.content}</p>
+            {:else}
+              <p>{paragraph.content}</p>
+            {/if}
+          {/each}
+        </dd>
+      {/if}
+    {/each}
+
+    {#if details.childComponents?.length > 0}
+      <div class="col-span-2">
+        <DividerLine margin="0.6rem 0rem"></DividerLine>
+      </div>
+      <dt>Child components:</dt>
+      <dd class="flex flex-row flex-wrap gap-4">
+        {#each details.childComponents as childComponent}
+          {@render linkedNameOfComponent(
+            childComponent.folder,
+            childComponent.name,
+          )}
+        {/each}
+      </dd>
+    {/if}
+
+    {#if !homepage}
+      {#if details.requirements?.length > 0}
+        <div class="col-span-2">
+          <DividerLine margin="0.6rem 0rem"></DividerLine>
+        </div>
+        <dt>Requirements:</dt>
+        <ul class="flex flex-col gap-4">
+          {#each details.requirements as requirement, i}
+            <li
+              class="flex flex-col gap-4 {requirement.fulfilled
+                ? 'text-green-700 line-through'
+                : ''}"
+            >
+              <dt class="font-bold">{requirement.label}</dt>
+              <dd>{requirement.description}</dd>
+              {#if i != details.requirements.length - 1}
+                <DividerLine margin="0.2rem 0rem"></DividerLine>
+              {/if}
+            </li>
+          {/each}
+        </ul>
+      {/if}
+      <div class="col-span-2">
+        <DividerLine margin="0.6rem 0rem"></DividerLine>
+      </div>
+    {/if}
+  </dl>
+</div>
+
+<style>
+  [data-role="details-grid-container"] {
+    grid-template-columns: 180px auto;
+  }
+  dd p:first-of-type {
+    margin-top: 0;
+  }
+  dd p:last-of-type {
+    margin-bottom: 0;
+  }
+</style>

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

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

package/dist/package-wrapping/DividerLine.svelte

@@ -0,0 +1,21 @@
+<script>
+  let {
+    directionIsVertical = false,
+    color = '#cbd5e1',
+    margin = '0px',
+    thickness = '1px',
+  } = $props();
+</script>
+
+{#if directionIsVertical}
+  <div
+    data-role="divider-line-vertical"
+    class="self-stretch"
+    style="margin: {margin}; border-left: {thickness} solid {color};"
+  ></div>
+{:else}
+  <hr
+    data-role="divider-line-horizontal"
+    style="margin: {margin}; border-top: {thickness} solid {color}"
+  />
+{/if}

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

@@ -0,0 +1,17 @@
+export default DividerLine;
+type DividerLine = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const DividerLine: import("svelte").Component<{
+    directionIsVertical?: boolean;
+    color?: string;
+    margin?: string;
+    thickness?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    directionIsVertical?: boolean;
+    color?: string;
+    margin?: string;
+    thickness?: string;
+};