@abcnews/components-builder 0.0.1

package/dist/GoogleDocScrollyteller/GoogleDocScrollyteller.svelte

@@ -0,0 +1,211 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  /**
+   * @file
+   * Svelte port of google-doc-scrollyteller
+   */
+  import { loadData } from "./utils";
+  import { stringify } from "@abcnews/alternating-case-to-object";
+
+  let {
+    name = "myscrollyteller",
+    markerName = "mark",
+    ScrollytellerRoot,
+  }: {
+    name: string;
+    markerName: string;
+    ScrollytellerRoot: Component;
+  } = $props();
+
+  const localStorageKey = `ABC_NEWS_BUILDER_GDOC_PREVIEW`;
+
+  let doc = $state(
+    new URLSearchParams(window.location.search.slice(1)).get("doc"),
+  );
+  let scrollytellerDefinition = $state();
+  let title = $state("");
+  let panelData = $state({});
+  let textboxValue = $state(
+    (() => {
+      try {
+        // migrate keys
+        const legacyKey = "last-successfully-loaded-google-doc-url";
+        const oldVar = localStorage[legacyKey];
+        if (oldVar) {
+          localStorage[localStorageKey] = oldVar;
+          delete localStorage[legacyKey];
+        }
+
+        // try to load our localStorage value, or fall back to the React version of the var
+        return localStorage[localStorageKey];
+      } catch (e) {
+        return "";
+      }
+    })(),
+  );
+  let error = $state("");
+
+  // Valid url looks like:
+  // https://docs.google.com/document/d/e/2PACX-1vQHeIm0sZTn4y_wQYTCV733ekALS_j1IDSJ63qsgny4gHSIjy-aOYEnHi6EFc4OvOdjF_8CdLm95bFl/pub
+  const isValid = (url) =>
+    url.match(/\/pub$/) && url.includes("docs.google.com");
+
+  $effect(() => {
+    if (!doc) {
+      return;
+    }
+
+    if (!isValid(doc)) {
+      doc = "";
+    }
+
+    loadData({
+      name,
+      url: doc,
+      markerName,
+    })
+      .then((data) => {
+        title = data.title;
+        scrollytellerDefinition = data?.scrollytellerDefinition;
+      })
+      .catch((e) => {
+        error = e.message;
+        doc = "";
+      });
+  });
+</script>
+
+<svelte:head>
+  {#if scrollytellerDefinition}
+    <title>{title} - Preview Google doc</title>
+  {/if}
+
+  <link
+    rel="icon"
+    type="image/png"
+    href={`data:image/svg+xml,${`
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-richtext" viewBox="0 0 16 16">
+      <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z"/>
+      <path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5m0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5m1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208M6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5"/>
+    </svg>`.replace(/\n/, " ")}`}
+  />
+</svelte:head>
+
+{#if doc}
+  <!-- A tall div reserves space so when we press "back" we return ot the same spot in the scrolly -->
+  <div style:min-height={"10000vh"} class="scrolly-root">
+    {#if scrollytellerDefinition}
+      <ScrollytellerRoot
+        panels={scrollytellerDefinition.panels}
+        onMarker={(d) => {
+          // if we send d.originalData we can re-stringify it to open this graphic directly in the builder.
+          panelData = d;
+        }}
+      />
+      <div class="floaty">
+        <button
+          onclick={() => {
+            window.location.search = "";
+          }}>Load another doc</button
+        >
+        <button
+          onclick={() => {
+            const url = `${window.location.pathname.split("/").slice(0, -2).join("/")}/builder/#${stringify(panelData.originalData || {})}`;
+            // @ts-ignore
+            window.location = url;
+          }}>Open in builder</button
+        >
+      </div>
+    {/if}
+  </div>
+{/if}
+
+{#if error || !doc}
+  <form method="GET">
+    <fieldset class="builder__spacious">
+      <legend>Google Doc preview</legend>
+      <p>
+        Enter a <em>published</em> Google Doc url to preview the scrollyteller.
+      </p>
+      <p>
+        <small>
+          You can publish &amp; find the URL in Google Docs through File → Share
+          → Publish&nbsp;to&nbspweb
+        </small>
+      </p>
+      {#if error}
+        <p class="error">
+          Error: {error}
+        </p>
+      {/if}
+      <label>
+        URL
+        <input name="doc" type="text" bind:value={textboxValue} />
+      </label>
+      <div class="builder__submit-row">
+        <button
+          onclick={(e) => {
+            if (!isValid(textboxValue)) {
+              e.preventDefault();
+              $error =
+                "This document doesn't look valid. Please ensure you published the doc & provided the public url.";
+              return;
+            }
+            try {
+              localStorage[localStorageKey] = textboxValue;
+            } catch (e) {}
+          }}
+        >
+          Load scrollyteller
+        </button>
+      </div>
+    </fieldset>
+  </form>
+{/if}
+
+<style>
+  :global(body) {
+    font-family: ABCSans, sans-serif;
+  }
+  form {
+    position: absolute;
+    left: 50%;
+    top: 30%;
+    max-width: 32rem;
+    translate: -50% -50%;
+  }
+  fieldset {
+    display: flex;
+    gap: 0.5rem;
+    flex-direction: column;
+  }
+  label {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin-top: 0.75rem;
+  }
+  p {
+    margin: 0;
+  }
+
+  .error {
+    border: 1px solid rgb(255, 153, 0);
+    background: rgba(255, 128, 0, 0.05);
+    border-radius: 4px;
+    padding: 0.5rem;
+  }
+
+  .floaty {
+    position: fixed;
+    top: 0.5rem;
+    right: 0.5rem;
+    z-index: 10;
+  }
+
+  .scrolly-root {
+    background: white;
+    color: black;
+    border-radius: 0.2rem;
+  }
+</style>

package/dist/GoogleDocScrollyteller/GoogleDocScrollyteller.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from "svelte";
+type $$ComponentProps = {
+    name: string;
+    markerName: string;
+    ScrollytellerRoot: Component;
+};
+declare const GoogleDocScrollyteller: Component<$$ComponentProps, {}, "">;
+type GoogleDocScrollyteller = ReturnType<typeof GoogleDocScrollyteller>;
+export default GoogleDocScrollyteller;

package/dist/GoogleDocScrollyteller/utils.d.ts

@@ -0,0 +1,23 @@
+/**
+ *
+ * @param options
+ * @param {string} options.name - Name in the scrollyteller opener tag. E.g. `#scrollytellerNAMEelectionmap1` would be "electionmap"
+ * @param {string} options.className - Deprecated class to apply to every panel. This can be done at the top level scrollyteller nowadays.
+ * @param {string} options.markerName - What does a #mark look like?
+ * @param {function} [preprocessCoreEl] -
+ * @param {function} [postprocessScrollytellerDefinition] -
+ * @returns
+ */
+export declare function loadData({ name, className, markerName, url, preprocessCoreEl, postprocessScrollytellerDefinition }: {
+    name: any;
+    className?: string | undefined;
+    markerName?: string | undefined;
+    url: any;
+    preprocessCoreEl?: ((el: any) => any) | undefined;
+    postprocessScrollytellerDefinition?: ((a: any) => any) | undefined;
+}): Promise<{
+    title: string | null | undefined;
+    coreText: string;
+    coreHTML: string;
+    scrollytellerDefinition: import("@abcnews/svelte-scrollyteller/dist/types").ScrollytellerDefinition;
+} | undefined>;

package/dist/GoogleDocScrollyteller/utils.js

@@ -0,0 +1,94 @@
+import { loadScrollyteller } from '@abcnews/svelte-scrollyteller';
+function mountTextToMountEl(mountText) {
+    const mountEl = document.createElement('div');
+    mountEl.setAttribute('data-mount', '');
+    mountEl.setAttribute('data-component', 'Anchor');
+    mountEl.setAttribute('id', mountText.slice(1));
+    return mountEl;
+}
+/**
+ *
+ * @param options
+ * @param {string} options.name - Name in the scrollyteller opener tag. E.g. `#scrollytellerNAMEelectionmap1` would be "electionmap"
+ * @param {string} options.className - Deprecated class to apply to every panel. This can be done at the top level scrollyteller nowadays.
+ * @param {string} options.markerName - What does a #mark look like?
+ * @param {function} [preprocessCoreEl] -
+ * @param {function} [postprocessScrollytellerDefinition] -
+ * @returns
+ */
+export async function loadData({ name, className = 'u-full', markerName = 'mark', url, preprocessCoreEl = el => el, postprocessScrollytellerDefinition = a => a }) {
+    if (!url) {
+        return;
+    }
+    const pubURL = url.replace(/\/[^/]+?$/, '/pub');
+    const html = await fetch(pubURL).then(response => response.text());
+    const dom = new DOMParser().parseFromString(html, 'text/html');
+    const body = dom.querySelector('#contents > div');
+    const title = dom.querySelector('title')?.textContent;
+    if (!body) {
+        throw new Error('Body not found');
+    }
+    Array.from(body.querySelectorAll('*')).forEach(el => {
+        el.removeAttribute('class');
+        el.removeAttribute('id');
+    });
+    const coreEls = Array.from(body.children).map(preprocessCoreEl);
+    const coreText = coreEls.reduce((memo, el) => {
+        const text = String(el.textContent).trim();
+        memo = `${memo}\n${text ? `\n${text}` : ''}`;
+        return memo;
+    }, '');
+    const coreHTML = coreEls.reduce((memo, el) => {
+        const text = String(el.textContent).trim();
+        const html = el.outerHTML;
+        memo = `${memo}${text ? `${html}` : ''}`;
+        return memo;
+    }, '');
+    const { scrollytellingEls } = coreEls.reduce((memo, el) => {
+        if (memo.hasEnded) {
+            return memo;
+        }
+        const text = String(el.textContent).trim();
+        if (text.indexOf('#remove') === 0) {
+            memo.isRemoving = true;
+        }
+        else if (text.indexOf('#endremove') === 0) {
+            memo.isRemoving = false;
+        }
+        else if (text.indexOf('#') === 0) {
+            if (text.indexOf(`#scrollyteller${name ? `NAME${name}` : ''}`) === 0 && !memo.hasBegun) {
+                memo.hasBegun = true;
+            }
+            else if (text.indexOf('#endscrollyteller') === 0) {
+                memo.hasEnded = true;
+            }
+            memo.scrollytellingEls.push(mountTextToMountEl(text));
+        }
+        else if (!memo.hasBegun || memo.isRemoving || text === '') {
+            // skip
+        }
+        else {
+            memo.scrollytellingEls.push(el);
+        }
+        return memo;
+    }, {
+        hasBegun: false,
+        hasEnded: false,
+        isRemoving: false,
+        scrollytellingEls: []
+    });
+    const container = document.createElement('div');
+    scrollytellingEls.forEach(scrollytellingEl => container.appendChild(scrollytellingEl));
+    document.body.appendChild(container);
+    let scrollytellerDefinition = loadScrollyteller(name, className, markerName);
+    document.body.removeChild(container);
+    if (postprocessScrollytellerDefinition) {
+        scrollytellerDefinition = postprocessScrollytellerDefinition(scrollytellerDefinition);
+    }
+    return {
+        title,
+        coreText,
+        coreHTML,
+        scrollytellerDefinition
+    };
+}

package/dist/Modal/Modal.stories.svelte

@@ -0,0 +1,32 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Modal from './Modal.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/Modal',
+		component: Modal,
+		tags: ['autodocs'],
+		argTypes: {},
+		args: {},
+		decorators: [() => BuilderStyleRoot]
+	});
+</script>
+
+{#snippet children()}
+	Hello this is a modal
+{/snippet}
+{#snippet footerChildren()}
+	<button>Ok!</button>
+{/snippet}
+
+<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
+<Story
+	name="Primary"
+	args={{
+		children,
+		footerChildren,
+		title: 'Example modal'
+	}}
+/>

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

@@ -0,0 +1,27 @@
+export default Modal;
+type Modal = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Modal: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Modal from './Modal.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/Modal/Modal.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { X } from 'svelte-bootstrap-icons';
+
+	let { children, footerChildren, title = '', onClose = () => {} } = $props();
+	let dialogEl = $state<HTMLDialogElement | undefined>();
+	let rect = $state<DOMRect>();
+	$effect(() => {
+		if (dialogEl) {
+			rect = dialogEl.getBoundingClientRect();
+		}
+	});
+	onMount(() => {
+		dialogEl?.showModal();
+		return () => {
+			dialogEl?.close();
+		};
+	});
+
+	/* Proxy required otherwise Typescript complains */
+	function onCloseTypescriptProxy() {
+		onClose();
+	}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<dialog
+	class="modal"
+	bind:this={dialogEl}
+	onclick={onCloseTypescriptProxy}
+	onclose={onCloseTypescriptProxy}
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div onclick={(e) => e.stopPropagation()}>
+		{#if title}
+			<div class="modal-title">
+				<h1>
+					{title}
+				</h1>
+				<button class="modal-close" onclick={onCloseTypescriptProxy}>
+					<X />
+				</button>
+			</div>
+		{/if}
+
+		<div class="modal-content">
+			{@render children?.()}
+		</div>
+		{#if footerChildren}
+			<div class="modal-footer">
+				{@render footerChildren?.()}
+			</div>
+		{/if}
+	</div>
+</dialog>
+
+<style>
+	.modal {
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		margin: 0;
+		padding: 0;
+		background: var(--background);
+		color: var(--text);
+		border: 1px solid var(--border);
+		border-radius: 0.5rem;
+		animation: fadein 0.2s;
+		&::backdrop {
+			animation: fadein 0.2s;
+			background: rgba(0, 0, 0, 0.8);
+		}
+	}
+
+	.modal-title {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.5rem 0.5rem 0.5rem 1rem;
+		gap: 1rem;
+		border-bottom: 1px solid var(--border);
+	}
+	.modal-title h1 {
+		font-size: 1rem;
+		margin: 0;
+		padding: 0;
+		flex: 1;
+	}
+	button.modal-close {
+		width: 2rem;
+		border: none;
+		height: 2rem;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.modal-content {
+		padding: 0.5rem 1rem;
+		max-height: 50vh;
+		overflow: auto;
+	}
+	.modal-footer {
+		text-align: right;
+		border-top: 1px solid var(--border);
+		padding: 0.5rem 1rem;
+	}
+	@keyframes fadein {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+</style>

package/dist/Modal/Modal.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const Modal: import("svelte").Component<{
+    children: any;
+    footerChildren: any;
+    title?: string;
+    onClose?: Function;
+}, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/ScreenshotTool/ScreenshotTool.stories.svelte

@@ -0,0 +1,26 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import ScreenshotTool from "./ScreenshotTool.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/ScreenshotTool",
+    component: ScreenshotTool,
+    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={{
+    // Prefixes to look for in the pasted document
+    prefixes: { Marker: "#mark" },
+    // Do something with the markers before screenshotting (e.g. turn off animations)
+    parseMarker: (markerString) => "markNewMarkerString",
+  }}
+/>

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

@@ -0,0 +1,27 @@
+export default ScreenshotTool;
+type ScreenshotTool = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ScreenshotTool: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import ScreenshotTool from "./ScreenshotTool.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;
+}