@communitiesuk/svelte-component-library 0.1.17

package/dist/package-wrapping/ParametersSection.svelte

@@ -0,0 +1,235 @@
+<script>
+  import Pill from "./Pill.svelte";
+  import DividerLine from "./DividerLine.svelte";
+  import { propPillLookup } from "../config.js";
+  import {
+    Accordion,
+    AccordionItem,
+    Tabs,
+    TabItem,
+    Select,
+    Label,
+  } from "flowbite-svelte";
+  import InputForParameter from "./InputForParameter.svelte";
+
+  import { innerWidth } from "svelte/reactivity/window";
+
+  let {
+    details,
+    parametersSourceArray,
+    parametersVisibleArray,
+    parametersValuesArray = $bindable(),
+    numberOfPropColumnsOnDesktop = 3,
+  } = $props();
+
+  let parameterCategories = $derived(
+    [...new Set(parametersSourceArray.map((el) => el.category))].map((el) => ({
+      name: el,
+      value: el,
+    })),
+  );
+
+  let reactiveNumberOfPropColumns = $derived(
+    innerWidth.current >= 1024
+      ? numberOfPropColumnsOnDesktop
+      : innerWidth.current >= 768
+        ? Math.min(numberOfPropColumnsOnDesktop, 2)
+        : 1,
+  );
+
+  let parametersSectionWidth = $state();
+  let tabWidthsArray = $state([]);
+  let tabsWrapping = $derived(
+    parametersSectionWidth <=
+      tabWidthsArray.reduce((acc, curr) => acc + (curr || 0), 0),
+  );
+
+  $inspect(
+    parametersSectionWidth,
+    tabWidthsArray.reduce((acc, curr) => acc + (curr || 0), 0),
+  );
+
+  $inspect(tabsWrapping);
+
+  let selectedCategory = $state(parameterCategories[0].value);
+</script>
+
+<div data-role="parameters-section" class="mx-auto px-5">
+  <div bind:clientWidth={parametersSectionWidth}>
+    <h5 id="parameters" class="mb-6 underline underline-offset-4">Parameters</h5>
+    <div class="flex flex-row gap-8">
+      <div class="flex flex-row gap-8 pr-4">
+        <p class="m-0 p-0 font-bold">Key</p>
+        <div class="flex flex-row gap-4 mb-2">
+          <div class="flex flex-row gap-2 flex-1">
+            <Pill
+              size={propPillLookup[true].size}
+              textContent={propPillLookup[true].text}
+              bgColor={propPillLookup[true].bgColor}
+              textColor={propPillLookup[true].textColor}
+              borderRadius="15px"
+              padding={propPillLookup[true].padding}
+              tailwindClass={"self-start"}
+            ></Pill>
+            <p
+              class="m-0 p-0 text-sm"
+              style="color: {propPillLookup[true].bgColor}"
+            >
+              {"Parameters with this label are props which are passed directly to the <" +
+                details.name +
+                "> component."}
+            </p>
+          </div>
+          <div class="flex flex-row gap-2 flex-1">
+            <Pill
+              size={propPillLookup["bindable"].size}
+              textContent={propPillLookup["bindable"].text}
+              bgColor={propPillLookup["bindable"].bgColor}
+              textColor={propPillLookup["bindable"].textColor}
+              borderRadius="15px"
+              padding={propPillLookup["bindable"].padding}
+              tailwindClass={"self-start"}
+            ></Pill>
+            <p
+              class="m-0 p-0 text-sm"
+              style="color: {propPillLookup['bindable'].bgColor}"
+            >
+              {"Parameters with this label are bindable props which are accessible outside the <" +
+                details.name +
+                "> component but updated within it."}
+            </p>
+          </div>
+          <div class="flex flex-row gap-2 flex-1">
+            <Pill
+              size={propPillLookup[false].size}
+              textContent={propPillLookup[false].text}
+              bgColor={propPillLookup[false].bgColor}
+              textColor={propPillLookup[false].textColor}
+              borderRadius="15px"
+              padding={propPillLookup[false].padding}
+              tailwindClass={"self-start"}
+            ></Pill>
+            <p
+              class="m-0 p-0 text-sm"
+              style="color: {propPillLookup[false].bgColor}"
+            >
+              {"Parameters with this label are used in the calculation of a prop which is passed to the <" +
+                details.name +
+                "> component."}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <DividerLine margin="5px 0px 15px 0px"></DividerLine> -->
+    <div class="mb-6" data-role="parameters-container">
+      {#if true}
+        <Tabs
+          tabStyle="underline"
+          defaultClass="flex flex-row flex-wrap gap-2 m-0 p-0"
+        >
+          {#each parameterCategories as category, i}
+            {@const visibleParametersForCategory = parametersSourceArray.filter(
+              (el) =>
+                el.category === category.name &&
+                (el.inputType || "label" in el) &&
+                parametersVisibleArray[el.index],
+            )}
+            <div bind:clientWidth={tabWidthsArray[i]}>
+              <TabItem
+                open={selectedCategory === category.name}
+                title={category.name}
+                defaultClass="text-lg "
+              >
+                <div class="flex flex-col">
+                  {#each visibleParametersForCategory as parameter, i}
+                    <div>
+                      <InputForParameter
+                        source={parameter}
+                        bind:value={parametersValuesArray[parameter.index]}
+                      ></InputForParameter>
+                      {#if i < visibleParametersForCategory.length - 1}
+                        <DividerLine margin="15px 0px 15px 0px"></DividerLine>
+                      {/if}
+                    </div>
+                  {/each}
+                </div>
+              </TabItem>
+            </div>
+          {/each}
+        </Tabs>
+      {:else}
+        <Label>
+          Select an option
+          <Select
+            class="mt-2"
+            items={parameterCategories}
+            bind:value={selectedCategory}
+          />
+        </Label>{/if}
+      <!-- {#each [...Array(reactiveNumberOfPropColumns).keys()] as columnNumb}
+        <div data-role="parameters-container-column" class="min-w-60">
+          {#each parameterCategories as category, i}
+            {#if i % reactiveNumberOfPropColumns === columnNumb}
+              {@const visibleParametersForCategory =
+                parametersSourceArray.filter(
+                  (el) =>
+                    el.category === category &&
+                    (el.inputType || "label" in el) &&
+                    parametersVisibleArray[el.index],
+                )}
+
+              <div
+                data-role="parameters-category-group"
+                class="px-4 pt-0 pb-4 rounded-xl bg-gray-200 bg-opacity-25"
+              >
+                <Accordion flush>
+                  <AccordionItem>
+                    <span class="text-2xl text-black" slot="header"
+                      >{category}</span
+                    >
+                    <div class="flex flex-col">
+                      {#each visibleParametersForCategory as parameter, i}
+                        <div>
+                          <InputForParameter
+                            source={parameter}
+                            bind:value={parametersValuesArray[parameter.index]}
+                          ></InputForParameter>
+                          {#if i < visibleParametersForCategory.length - 1}
+                            <DividerLine margin="15px 0px 15px 0px"
+                            ></DividerLine>
+                          {/if}
+                        </div>
+                      {/each}
+                    </div>
+                  </AccordionItem>
+                </Accordion>
+              </div>
+            {/if}
+          {/each}
+        </div>
+      {/each} -->
+    </div>
+    <DividerLine margin="15px 0px 15px 0px"></DividerLine>
+  </div>
+</div>
+
+<style>
+  [data-role="parameters-section"] {
+    max-width: 1024px;
+  }
+  /*[data-role="parameters-container"] {
+    display: flex;
+    gap: 10px;
+  }
+
+  [data-role="parameters-container-column"] {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  [data-role="parameters-category-group"] {
+    border: 1px solid #e5e7eb;
+  }*/
+</style>

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

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

package/dist/package-wrapping/ParsingErrorToastsContainer.svelte

@@ -0,0 +1,50 @@
+<script>
+  import { Toast } from "flowbite-svelte";
+  import { CheckCircleSolid, CloseCircleSolid } from "flowbite-svelte-icons";
+
+  let {
+    parametersParsingErrorsArray,
+    parametersParsingErrorsObject,
+    onCloseFunction,
+  } = $props();
+
+  /*() =>
+            parametersParsingErrorsArray.filter((el) => el != key)*/
+</script>
+
+{#key parametersParsingErrorsArray}
+  <div class="fixed bottom-0 right-0 mr-5 mb-5 z-[3]">
+    {#each Object.keys(parametersParsingErrorsObject) as key}
+      {#if parametersParsingErrorsObject[key]}
+        <Toast
+          divClass="w-100 p-4 text-gray-500 bg-white shadow gap-5"
+          color="red"
+          dismissable={true}
+          on:close={() =>
+            parametersParsingErrorsArray.filter((el) => el != key)}
+        >
+          <svelte:fragment slot="icon">
+            <CloseCircleSolid class="w-5 h-5" />
+            <span class="sr-only">Error icon</span>
+          </svelte:fragment>
+
+          Error: The <code>{key}</code> prop is not a valid JSON object.</Toast
+        >
+      {:else}
+        <Toast
+          divClass="w-100 p-4 text-gray-500 bg-white shadow gap-5"
+          color="green"
+          dismissable={true}
+          on:close={onCloseFunction(key)}
+        >
+          <svelte:fragment slot="icon">
+            <CheckCircleSolid class="w-5 h-5" />
+            <span class="sr-only">Check icon</span>
+          </svelte:fragment>
+
+          Resolved: The <code>{key}</code> prop is valid JSON.</Toast
+        >
+      {/if}
+    {/each}
+  </div>
+{/key}

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

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

package/dist/package-wrapping/Pill.svelte

@@ -0,0 +1,54 @@
+<script>
+  import { Tooltip } from "flowbite-svelte";
+
+  let {
+    textContent,
+    size = "medium",
+    bgColor,
+    textColor,
+    borderRadius = "5px",
+    tooltipText = false,
+    padding = null,
+    tailwindClass = "",
+  } = $props();
+</script>
+
+<div
+  class="pill-container {tailwindClass}"
+  data-role="pill-container-{size}"
+  style="color: {textColor}; background-color: {bgColor}; border-radius: {borderRadius}; padding: {padding ??
+    null};"
+>
+  {textContent}
+</div>
+{#if tooltipText}
+  <Tooltip placement="bottom" color="light">{tooltipText}</Tooltip>
+{/if}
+
+<style>
+  .pill-container {
+    display: inline;
+  }
+  [data-role="pill-container-xs"] {
+    padding: 0.2rem 0.4rem;
+    font-size: 0.9rem;
+    line-height: 0.9rem;
+  }
+  [data-role="pill-container-sm"] {
+    padding: 0.3rem 0.4rem;
+    font-size: 1.1rem;
+    line-height: 1.1rem;
+  }
+
+  [data-role="pill-container-md"] {
+    padding: 0.35rem 0.5rem;
+    font-size: 1.35rem;
+    line-height: 1.35rem;
+  }
+
+  [data-role="pill-container-lg"] {
+    padding: 0.6rem;
+    font-size: 1.6rem;
+    line-height: 1.6rem;
+  }
+</style>

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

@@ -0,0 +1,25 @@
+export default Pill;
+type Pill = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Pill: import("svelte").Component<{
+    textContent: any;
+    size?: string;
+    bgColor: any;
+    textColor: any;
+    borderRadius?: string;
+    tooltipText?: boolean;
+    padding?: any;
+    tailwindClass?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    textContent: any;
+    size?: string;
+    bgColor: any;
+    textColor: any;
+    borderRadius?: string;
+    tooltipText?: boolean;
+    padding?: any;
+    tailwindClass?: string;
+};

package/dist/package-wrapping/PlaygroundDetails.svelte

@@ -0,0 +1,106 @@
+<script>
+  // @ts-nocheck
+  import DividerLine from "./DividerLine.svelte";
+
+  import { textStringConversion } from "../utils/text-string-conversion/textStringConversion.js";
+
+  let { homepage, details } = $props();
+</script>
+
+{#snippet pageDescription()}
+  <dd>
+    {#each details.description as paragraph}
+      {#if paragraph.markdown}
+        <p>{@html paragraph.content}</p>
+      {:else}
+        <p>{paragraph.content}</p>
+      {/if}
+    {/each}
+  </dd>
+{/snippet}
+
+{#snippet linkedNameOfPlaygroundPage(folder, name)}{/snippet}
+
+<div
+  data-role="details-container"
+  class="{homepage ? '' : 'g-top-level-container'} flex flex-col gap-6 {homepage
+    ? 'bg-teal-500 bg-opacity-10 p-5 rounded-lg'
+    : ''}"
+>
+  <div
+    data-role="name-and-desc-container"
+    class="flex flex-row items-start gap-4"
+  >
+    {#if homepage}
+      <a
+        class="underline underline-offset-4"
+        style={homepage ? "width: 450px" : ""}
+        href="/playground/{textStringConversion(details.name, 'kebab')}"
+      >
+        <h8>{details.name}</h8>
+      </a>
+      <div>
+        {@render pageDescription()}
+      </div>
+    {:else}
+      <h4>{details.name}</h4>
+    {/if}
+  </div>
+
+  {#if !homepage}
+    <DividerLine margin="0.2rem 0rem"></DividerLine>
+
+    <dl data-role="details-grid-container" class="grid gap-y-4">
+      {#if details.description?.length > 0}
+        {#if !homepage}
+          <dt>Description:</dt>
+          {@render pageDescription()}
+        {/if}
+      {/if}
+    </dl>
+
+    {#if !homepage && details.steps?.length > 0}
+      <DividerLine margin="0.2rem 0rem"></DividerLine>
+
+      <div class="flex flex-col gap-2 m-0">
+        <h7 class="font-bold">Steps:</h7>
+        <ul class="grid gap-y-2">
+          {#each details.steps as step, i}
+            <li class={step.complete ? "text-green-700" : ""}>
+              <span>{i + 1}.</span>
+              {#if step.markdown}
+                <span class={step.complete ? "line-through" : ""}
+                  >{@html step.label}</span
+                >
+              {:else}
+                <span class={step.complete ? "line-through" : ""}
+                  >{step.label}</span
+                >
+              {/if}
+            </li>
+          {/each}
+        </ul>
+      </div>
+    {/if}
+  {/if}
+</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;
+  }
+
+  ul {
+    grid-template-columns: 40px auto;
+  }
+
+  li {
+    display: contents;
+  }
+</style>

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

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

package/dist/package-wrapping/ScreenSizeRadio.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { defaultScreenWidthBreakpoints } from '../config.js';
+  import { Radio } from 'flowbite-svelte';
+  let { demoScreenWidth = $bindable() } = $props();
+</script>
+
+<ul
+  class="my-4 mx-0 items-center w-full rounded-lg border border-gray-200 sm:flex dark:bg-gray-800 dark:border-gray-600 divide-x rtl:divide-x-reverse divide-gray-200 dark:divide-gray-600"
+  style="min-width: 800px;"
+>
+  {#each Object.keys(defaultScreenWidthBreakpoints) as screenSizeOption}
+    <li class="w-full">
+      <Radio
+        bind:group={demoScreenWidth}
+        name="hor-list"
+        class="p-4 text-base"
+        value={defaultScreenWidthBreakpoints[screenSizeOption]}
+        >{screenSizeOption} ({defaultScreenWidthBreakpoints[
+          screenSizeOption
+        ]}px)</Radio
+      >
+    </li>
+  {/each}
+</ul>

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

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

package/dist/package-wrapping/ScreenSizeRadioUpdated.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { defaultScreenWidthBreakpoints } from "../config.js";
+  import { Radio } from "flowbite-svelte";
+  let { demoScreenWidth = $bindable() } = $props();
+</script>
+
+<ul
+  class="m-0 p-0 items-center w-full rounded-lg flex flex-col divide-x rtl:divide-x-reverse divide-gray-200"
+>
+  {#each Object.keys(defaultScreenWidthBreakpoints) as screenSizeOption}
+    <li class="w-full">
+      <Radio
+        bind:group={demoScreenWidth}
+        name="hor-list"
+        class="px-4 py-3 text-base text-[#6b7280]"
+        value={defaultScreenWidthBreakpoints[screenSizeOption]}
+        >{screenSizeOption} ({defaultScreenWidthBreakpoints[
+          screenSizeOption
+        ]}px)</Radio
+      >
+    </li>
+  {/each}
+</ul>

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

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