@abcnews/components-builder 0.0.1

package/dist/ScreenshotTool/ScreenshotTool.svelte

@@ -0,0 +1,292 @@
+<script>
+  import { untrack } from "svelte";
+  import JSZip from "jszip";
+  import { saveAs } from "file-saver";
+  import eachLimit from "async/eachLimit";
+  import Modal from "../Modal/Modal.svelte";
+
+  const GENERATOR_URL = "https://fallback-automations-yknow.kyd.au/api";
+  const GENERATOR_MAX_PARALLEL = 3;
+  const GENERATOR_WIDTH = "1000";
+
+  let {
+    defaultMarkerName = () => "Marker",
+    prefixes = {},
+    parseMarker = (str) => ({}),
+    iframeUrl = "",
+  } = $props();
+
+  // closed => pasting => preview => generate => done
+  let status = $state("closed");
+  let pastedState = $state();
+  let preview = $state([]);
+  let progress = $state(0);
+  let error = $state("");
+
+  // When the user first hits the "preview" screen, parse our textarea and show them a preview
+  $effect(() => {
+    (async () => {
+      let _pastedState = untrack(() => pastedState);
+      let _status = status;
+      if (_status !== "preview") {
+        return;
+      }
+      const allowedPrefixes = Object.values(prefixes).map((prefix) =>
+        prefix.replace(/\d$/, ""),
+      );
+
+      // Find markers in the text
+      const markers = _pastedState
+        .split("\n")
+        .filter((row) =>
+          allowedPrefixes.find(
+            (prefix) => row.slice(0, prefix.length) === prefix,
+          ),
+        );
+
+      const uniqueMarkers = Array.from(new Set(markers));
+
+      // parse to object
+      const encodedMarkers = uniqueMarkers.map((marker) => parse(marker));
+
+      // pass through schema
+      const parsedMarkers = await Promise.all(encodedMarkers.map(parseMarker));
+
+      // generate a friendly name &  reencode markers with hexFlip="none"
+      preview = await Promise.all(
+        parsedMarkers.map(async (marker) => ({
+          name: defaultMarkerName(marker),
+          marker,
+          markerString: "#" + marker,
+        })),
+      );
+    })();
+  });
+
+  function doFetch(generatorUrl) {
+    return fetch(generatorUrl).then((response) => {
+      if (response.status !== 200) {
+        return null;
+      }
+      return response.blob();
+    });
+  }
+
+  async function sleep(seconds) {
+    return new Promise((resolve) => setTimeout(resolve, seconds));
+  }
+
+  async function createScreenshots({ preview }) {
+    const zip = new JSZip();
+    let completed = 0;
+    // Put a little bit in the bar at the start so it's clear what it is.
+    progress = 0.5 / preview.length;
+    error = "";
+    const imageBlobs = [];
+    await eachLimit(
+      preview,
+      GENERATOR_MAX_PARALLEL,
+      async ({ markerString }, callback) => {
+        const thisIframeUrl = iframeUrl + markerString;
+        const generatorUrl = [
+          GENERATOR_URL,
+          new URLSearchParams({
+            url: thisIframeUrl,
+            selector: `.iframe-mount > *`,
+            width: GENERATOR_WIDTH,
+          }).toString(),
+        ].join("?");
+
+        let blob;
+        // retry. It fails sometimes.
+        for (let retry = 0; retry < 5; retry++) {
+          console.log(thisIframeUrl, "attempt ", retry);
+          blob = await doFetch(generatorUrl);
+          if (!blob) {
+            await sleep(1000 * 2 * retry);
+          }
+          if (blob) {
+            break;
+          }
+        }
+        completed += 1;
+        progress = completed / preview.length;
+
+        imageBlobs.push(blob);
+        callback();
+      },
+    );
+
+    const errors = [];
+    imageBlobs.forEach((blob, index) => {
+      const filename = `${String(index).padStart(3, "0")}-${preview[index].name}.png`;
+      if (blob) {
+        zip.file(filename, blob);
+      } else {
+        errors.push(filename);
+      }
+    });
+
+    if (errors.length) {
+      status = "error";
+      if (errors.length === imageBlobs.length) {
+        error =
+          "Could not download files. The fallback service may not be running.";
+        return;
+      } else if (errors.length) {
+        error =
+          "Error: could not download some files. These might be missing from the zip:\n\n" +
+          errors.join("\n");
+      }
+    }
+
+    return zip.generateAsync({ type: "blob" }).then((content) => {
+      if (!errors.length) {
+        status = "complete";
+      }
+      saveAs(content, `fallback-bundle-${Date.now()}.zip`);
+    });
+  }
+
+  // When the user first hits the "generate" screen, call createScreenshot()
+  $effect(() => {
+    let _preview = untrack(() => preview);
+    let _status = status;
+    if (_status !== "generate") {
+      return;
+    }
+    createScreenshots({ preview: _preview });
+  });
+
+  function onClose() {
+    status = "closed";
+  }
+</script>
+
+<button
+  onclick={(e) => {
+    e.preventDefault();
+    status = "pasting";
+    pastedState = "";
+  }}
+>
+  Screenshot tool
+</button>
+
+{#snippet footerChildren()}
+  {#if status === "preview"}
+    <button
+      onclick={(e) => {
+        e.preventDefault();
+        status = "pasting";
+      }}
+    >
+      Back
+    </button>
+  {/if}
+  <button
+    disabled={status === "generate"}
+    onclick={(e) => {
+      e.preventDefault();
+      switch (status) {
+        case "error":
+          status = "closed";
+          return;
+        case "pasting":
+          status = "preview";
+          return;
+        case "preview":
+          status = "generate";
+          return;
+        default:
+          status = "closed";
+      }
+    }}
+  >
+    {#if status === "preview"}
+      Generate screenshots
+    {:else if status === "error" || status === "complete"}
+      Close
+    {:else}
+      Next
+    {/if}
+  </button>
+{/snippet}
+
+{#if status !== "closed"}
+  <Modal title="Screenshot tool" {onClose} {footerChildren}>
+    <div class="screenshot-tool">
+      {#if status === "pasting"}
+        <p>Paste your story, or a series of markers to create screenshots</p>
+        <textarea bind:value={pastedState} placeholder="#markVER1"></textarea>
+      {/if}
+
+      {#if status === "preview"}
+        <p>
+          This will create {preview.length} screenshot{preview.length === 1
+            ? ""
+            : "s"}:
+        </p>
+        <table class="builder__table">
+          <thead>
+            <tr><th>#</th><th>Marker</th><th>Marker</th></tr>
+          </thead>
+          <tbody>
+            {#each preview as { name, markerString }, i}
+              <tr
+                ><td>{i + 1}</td><td>{name}</td><td
+                  ><code class="marker">{markerString}</code></td
+                ></tr
+              >
+            {/each}
+          </tbody>
+        </table>
+      {/if}
+
+      {#if status === "generate"}
+        <p>Generating screenshots. This may take some time.</p>
+        <progress max="100" value={Math.round(progress * 100)}></progress>
+      {/if}
+
+      {#if status === "error"}
+        <p>{error}</p>
+      {/if}
+
+      {#if status === "complete"}
+        <p>
+          Your screenshots are finished. Check for the zip file in your
+          Downloads folder.
+        </p>
+      {/if}
+    </div>
+  </Modal>
+{/if}
+
+<style>
+  .screenshot-tool {
+    width: 100vw;
+    max-width: 640px;
+    position: relative;
+    height: 100vh;
+    max-height: 200px;
+  }
+  textarea {
+    min-height: 150px;
+  }
+  table,
+  progress,
+  textarea {
+    width: calc(100% - 2px);
+  }
+  table {
+    max-width: calc(100% - 2px);
+  }
+
+  .marker {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    max-width: 20em;
+  }
+</style>

package/dist/ScreenshotTool/ScreenshotTool.svelte.d.ts

@@ -0,0 +1,17 @@
+export default ScreenshotTool;
+type ScreenshotTool = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ScreenshotTool: import("svelte").Component<{
+    defaultMarkerName?: Function;
+    prefixes?: Record<string, any>;
+    parseMarker?: Function;
+    iframeUrl?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    defaultMarkerName?: Function;
+    prefixes?: Record<string, any>;
+    parseMarker?: Function;
+    iframeUrl?: string;
+};

package/dist/Typeahead/Typeahead.stories.svelte

@@ -0,0 +1,26 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import Typeahead from "./Typeahead.svelte";
+  import BuilderStyleRoot from "../BuilderStyleRoot/BuilderStyleRoot.svelte";
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: "Example/Typeahead",
+    component: Typeahead,
+    tags: ["autodocs"],
+    argTypes: {},
+    args: {},
+    decorators: [() => BuilderStyleRoot],
+  });
+</script>
+
+<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
+<Story
+  name="Primary"
+  args={{
+    values: [
+      { value: "chicken", label: "Chicken" },
+      { value: "egg", label: "Egg" },
+    ],
+  }}
+/>

package/dist/Typeahead/Typeahead.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Typeahead;
+type Typeahead = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Typeahead: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Typeahead from "./Typeahead.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Typeahead/Typeahead.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+
+  let {
+    values = [],
+    value = [],
+    disabled,
+    onChange = () => {},
+  }: {
+    values: {
+      value: string;
+      label: string;
+    }[];
+    value: string[];
+    disabled: boolean;
+    onChange?: (val: string[]) => void;
+  } = $props();
+
+  const uniqueId = "list" + (Math.random() * 10e15).toString(16);
+  let selectedValues = $state<string[]>(value);
+  let isFocused = $state(false);
+  let inputElement = $state<HTMLInputElement>();
+  let inputValue = $state("");
+
+  function getValueFromLabel(label: string) {
+    const foundValue = values.find((value) => value.label === label);
+    return foundValue;
+  }
+  $effect(() => {
+    const foundValue = getValueFromLabel(inputValue);
+    if (!foundValue) {
+      return;
+    }
+    untrack(() => {
+      selectedValues = Array.from(
+        new Set([...selectedValues, foundValue.value]),
+      );
+      inputValue = "";
+      onChange(selectedValues);
+    });
+  });
+  $effect(() => {
+    selectedValues = value;
+  });
+  let displayValues = $derived.by(() => {
+    return selectedValues.map(
+      (value) =>
+        values.find((thisValue) => thisValue.value === value)?.label || "",
+    );
+  });
+</script>
+
+<!-- this interaction is supplementary to the input element, so it's not an accessibility issue -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="typeahead"
+  class:typeahead--focused={isFocused}
+  class:typeahead--disabled={disabled}
+  onclick={(e) => inputElement?.focus()}
+>
+  <input
+    class="typeahead__input"
+    {disabled}
+    bind:this={inputElement}
+    bind:value={inputValue}
+    list={uniqueId}
+    onfocus={() => {
+      isFocused = true;
+    }}
+    onblur={() => {
+      isFocused = false;
+    }}
+  />
+  <ul class="typeahead__selected-items">
+    {#each displayValues as label}
+      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+      <li class="typeahead__selected-item" onclick={(e) => e.stopPropagation()}>
+        <div class="typeahead__selected-item-text">
+          {label}
+        </div>
+        <button
+          class="typeahead__selected-item-butt"
+          aria-label={`Remove ${label}`}
+          onclick={(e) => {
+            e.preventDefault();
+            const foundValue = getValueFromLabel(label);
+            if (!foundValue) {
+              return;
+            }
+            selectedValues = selectedValues.filter(
+              (thisValue) => thisValue !== foundValue.value,
+            );
+            onChange(selectedValues);
+          }}>x</button
+        >
+      </li>
+    {/each}
+  </ul>
+</div>
+<datalist id={uniqueId}>
+  {#each values as value}
+    <option value={value.label}></option>
+  {/each}
+</datalist>
+
+<style>
+  .typeahead {
+    padding: 0.25rem 0.5rem;
+    background: var(--background);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 0.2rem;
+  }
+  .typeahead--focused {
+    outline: 2px solid Highlight;
+  }
+  .typeahead--disabled {
+    background: transparent;
+    cursor: not-allowed;
+  }
+  .typeahead--disabled * {
+    pointer-events: none;
+  }
+  ul,
+  li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .typeahead input.typeahead__input {
+    border: none;
+    outline: none;
+    width: 100%;
+    padding: 0.25rem 0;
+    background: transparent;
+    color: var(--c-black);
+  }
+
+  .typeahead__selected-items {
+    display: flex;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+    max-height: 6rem;
+    overflow: auto;
+  }
+  .typeahead__selected-item {
+    background: var(--background);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 0.2rem;
+    position: relative;
+    padding: 0.25rem;
+    padding-right: 1.75rem;
+    display: inline-block;
+    font-size: 0.75rem;
+  }
+
+  .typeahead__selected-item-text {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .typeahead button.typeahead__selected-item-butt {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 0;
+    height: 100%;
+    width: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+  }
+</style>

package/dist/Typeahead/Typeahead.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    values: {
+        value: string;
+        label: string;
+    }[];
+    value: string[];
+    disabled: boolean;
+    onChange?: (val: string[]) => void;
+};
+declare const Typeahead: import("svelte").Component<$$ComponentProps, {}, "">;
+type Typeahead = ReturnType<typeof Typeahead>;
+export default Typeahead;

package/dist/UpdateChecker/UpdateChecker.stories.svelte

@@ -0,0 +1,27 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import UpdateChecker from "./UpdateChecker.svelte";
+  import BuilderStyleRoot from "../BuilderStyleRoot/BuilderStyleRoot.svelte";
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: "Example/UpdateChecker",
+    component: UpdateChecker,
+    tags: ["autodocs"],
+    argTypes: {},
+    args: {},
+    decorators: [() => BuilderStyleRoot],
+  });
+</script>
+
+<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
+<Story
+  name="Primary"
+  args={{
+    // don't pass anything here, this is just so we can preview it
+    overrideNewVersion: {
+      thisVersion: "1.2.3",
+      newVersion: "2.0.0",
+    },
+  }}
+/>

package/dist/UpdateChecker/UpdateChecker.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default UpdateChecker;
+type UpdateChecker = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const UpdateChecker: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import UpdateChecker from "./UpdateChecker.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}