@abcnews/components-builder 0.0.1

package/README.md

@@ -0,0 +1,134 @@
+# components-builder
+
+A set of common styles and components for creating builders - tools to configure and preview visualisations with a GUI interface.
+
+**These components are not thoroughly tested as a library, and are provided as-is. Please contribute pull requests to fix issues**
+
+## Global Styles (BuilderStyleRoot)
+
+This project uses global styles in the same way as bootstrap or tailwind. These styles mainly focus on form elements and things you'll likely to hit in a builder.
+
+Wrap your application inside of the BuilderStyleRoot component to make use of these styles. Note that all the components in this repository also depend on these styles.
+
+## UpdateChecker
+
+The update checker extracts the current version number from the URL, and recursively checks for new versions, major, minor, and patch. If a new version is found it will show a modal prompting the user to update.
+
+Please ensure all your application state is kept in the URL, otherwise it may be lost on upgrade.
+
+## ScreenshotTool (fallback images)
+
+The screenshot tool allows users to paste an entire article, then extracts all the markers and sends them to a third-party service to screenshot.
+
+For this to work you must set up a standalone page that can display the visualisation that the external service to screenshot, similar to how you would develop an iframe version of the visualisation.
+
+Note that the screenshot tool is not fast. We haven't been able to speed up the server side enough to make this a great experience.
+
+## Typeahead
+
+The typeahead component uses a native HTML input element, in conjunction with the datalist element, to provide native searching and keyboard accessibility. The component implements its own multi-select functionality as that isn't available natively.
+
+```svelte
+<Typeahead
+  {disabled}
+  values={[{value: 'bne', label: 'Brisbane'},{value: 'syd', label: 'Sydney'}]}
+  value={['bne']}
+  onChange={newValue => console.log(newValue)}
+```
+
+## ContextMenu
+
+The context menu component uses a native dialog element and provides a number of classes for you to style the contents of your menu. Check the storybook for more examples of these.
+
+You can specify coordinates for the menu to appear, and you can usually find these on the click event when you click an element.
+
+The context menu is designed for you to manually handle the isOpen state in your application.
+
+```svelte
+<ContextMenu>
+  <div class="section" style="white-space:pre-wrap;">
+    <strong>Brisbane</strong>
+    <small>BNE</small>
+  </div>
+  <hr />
+  <div class="section">Some notes about this seat</div>
+  <hr />
+
+  <label class="item">
+    <div class="section">
+      <input type="checkbox" /> An option
+    </div>
+  </label>
+
+  <hr />
+
+  <ul class="menu">
+    <li><button class="item">Item 1</button></li>
+    <li><button class="item">Item 2</button></li>
+  </ul>
+
+  <hr />
+
+  <ul class="menu menu--double">
+    <li><button class="item">Item 1</button></li>
+    <li><button class="item">Item 2</button></li>
+  </ul>
+</ContextMenu>
+```
+
+## Modal
+
+The modal component is useful for building more complex tools inside a builder.
+
+You can provide your own footer elements to make either an okay/cancel alert, or next/next/done wizard style dialogue.
+
+This uses the native dialogue element, so focus will always be inside the modal. Take care not to show more than one at a time.
+
+```svelte
+{#snippet children()}
+  Hello this is the modal content
+{/snippet}
+{#snippet footerChildren()}
+  <button onclick={() => (isOpen = false)}>Ok!</button>
+{/snippet}
+
+<Modal title="Example modal" {children} {footerChildren} />
+```
+
+## Developing
+
+Once you've nstalled dependencies with `npm install`, start a development storybook:
+
+```bash
+npm run storybook
+```
+
+Everything inside `src/lib` is part of the library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build the library:
+
+```bash
+npm run package
+```
+
+To create a production version of the showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy the app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for the target environment.
+
+## Publishing
+
+Go into the `package.json` and give the package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish the library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/BuilderStyleRoot/BuilderStyleRoot.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+	let { children } = $props();
+</script>
+
+<div class="builder-style-root">
+	{@render children?.()}
+</div>
+
+<style>
+	.builder-style-root {
+		font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+		line-height: 1.5;
+		font-weight: 400;
+
+		--text: #222;
+		--text-light: #888;
+		--background: #fff;
+		--border: rgba(122, 123, 135, 0.5);
+		--background-alt: #f2f4f5;
+
+		color: var(--text);
+		background-color: var(--background);
+
+		font-synthesis: none;
+		text-rendering: optimizeLegibility;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		-webkit-text-size-adjust: 100%;
+
+		color-scheme: dark light;
+		:global(*) {
+			box-sizing: border-box;
+		}
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.builder-style-root {
+			--text: #ccc;
+			--text-light: #888;
+			--background: #1a1a1a;
+			--background-alt: #2c2c2f;
+			--border: rgba(122, 123, 135, 0.5);
+		}
+	}
+
+	/* // builder-style-root */
+	.builder-style-root :global {
+		fieldset {
+			margin-bottom: 1rem;
+			padding: var(--padding);
+			border: 1px solid var(--border);
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			gap: 0.5rem;
+		}
+
+		.fieldset {
+			padding: 0 var(--padding);
+			border: 1px solid transparent;
+		}
+		.fieldset,
+		fieldset {
+			--padding: 0.75rem;
+			margin-bottom: 1rem;
+			border-radius: 0.2rem;
+		}
+		fieldset.builder__spacious,
+		.fieldset.builder__spacious {
+			--padding: 1rem;
+			legend {
+				font-weight: bold;
+			}
+		}
+
+		.builder__inline {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.5rem;
+		}
+
+		.buttons {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 2px;
+		}
+
+		label {
+			margin-bottom: 0.5rem;
+			position: relative;
+		}
+		label span {
+			display: block;
+			margin-bottom: 0.3rem;
+		}
+
+		select,
+		button,
+		input,
+		textarea {
+			padding: 0.25rem 0.5rem;
+			background: var(--background);
+			border: 1px solid var(--border);
+			color: var(--text);
+			border-radius: 0.2rem;
+		}
+		select:not([multiple]),
+		button:not(:disabled) {
+			cursor: pointer;
+			&:hover,
+			&:focus-visible {
+				border-color: var(--text);
+				background: Highlight;
+				color: HighlightText;
+			}
+		}
+		button:disabled {
+			color: var(--text-light);
+		}
+
+		select,
+		input[type='text'],
+		input[type='password'],
+		textarea {
+			width: 100%;
+		}
+
+		.btn-icon {
+			padding: 0;
+			display: inline-flex;
+			height: 1.5rem;
+			width: 1.5rem;
+			justify-content: center;
+			align-items: center;
+		}
+
+		.builder__submit-row {
+			text-align: right;
+			border-top: 1px solid var(--border);
+			padding: 0.5rem 0;
+		}
+		hr {
+			width: 100%;
+			border: none;
+			border-bottom: 1px solid var(--border);
+		}
+
+		table.builder__table {
+			border-collapse: separate;
+			border: solid var(--border) 1px;
+			border-radius: 0.2rem;
+			border-spacing: 0;
+
+			td,
+			th {
+				border-left: solid var(--border) 1px;
+				border-top: solid var(--border) 1px;
+				padding: 0.25rem 0.5rem;
+			}
+
+			th {
+				background-color: var(--background-alt);
+			}
+
+			th {
+				border-top: none;
+			}
+
+			td:first-child,
+			th:first-child {
+				border-left: none;
+			}
+		}
+	}
+</style>

package/dist/BuilderStyleRoot/BuilderStyleRoot.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const BuilderStyleRoot: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type BuilderStyleRoot = ReturnType<typeof BuilderStyleRoot>;
+export default BuilderStyleRoot;

package/dist/ContextMenu/ContextMenu.stories.svelte

@@ -0,0 +1,66 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import ContextMenu from "./ContextMenu.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/ContextMenu",
+    component: ContextMenu,
+    tags: ["autodocs"],
+    argTypes: {},
+    args: {},
+    decorators: [() => BuilderStyleRoot],
+  });
+</script>
+
+{#snippet children()}
+  <div class="section" style="white-space:pre-wrap;">
+    <strong>Brisbane</strong>
+    <small style="opacity:0.5">BNE</small>
+  </div>
+  <hr />
+  <div class="section">Some notes about this seat</div>
+  <hr />
+
+  <label class="item">
+    <div class="section">
+      <input type="checkbox" /> An option
+    </div>
+  </label>
+
+  <label class="item">
+    <div class="section">
+      <input type="checkbox" /> Another option
+    </div>
+  </label>
+
+  <hr />
+
+  <ul class="menu">
+    <li><button class="item">Item 1</button></li>
+    <li><button class="item">Item 2</button></li>
+    <li><button class="item">Item 3</button></li>
+  </ul>
+
+  <hr />
+
+  <ul class="menu menu--double">
+    <li><button class="item">Item 1</button></li>
+    <li><button class="item">Item 2</button></li>
+    <li><button class="item">Item 3</button></li>
+    <li><button class="item">Item 4</button></li>
+    <li><button class="item">Item 5</button></li>
+    <li><button class="item">Item 6</button></li>
+  </ul>
+{/snippet}
+
+<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
+<Story
+  name="Primary"
+  args={{
+    position: [0, 0],
+    children: children,
+    onClose: () => console.log("closed"),
+  }}
+/>

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

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

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  let { position = [0, 0], children, onClose = () => {} } = $props();
+  let dialogEl = $state<HTMLDialogElement | undefined>();
+  let rect = $state<DOMRect>();
+  onMount(() => {
+    if (!dialogEl) {
+      // the dialog will always exist, but Typescript doesn't know that.
+      return;
+    }
+    dialogEl?.showModal();
+    rect = dialogEl.getBoundingClientRect();
+    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="dialog"
+  bind:this={dialogEl}
+  style:left={rect
+    ? (rect.width + position[0] > window.innerWidth
+        ? window.innerWidth - rect.width
+        : position[0]) + "px"
+    : ""}
+  style:top={rect
+    ? (rect.height + position[1] > window.innerHeight
+        ? window.innerHeight - rect.height - 10
+        : position[1]) + "px"
+    : ""}
+  onclick={onCloseTypescriptProxy}
+  onclose={onCloseTypescriptProxy}
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div onclick={(e) => e.stopPropagation()}>{@render children?.()}</div>
+</dialog>
+
+<style>
+  .dialog {
+    left: 0;
+    top: 0;
+    margin: 0;
+    padding: 0;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.5rem;
+    animation: fadein 0.2s;
+    &::backdrop {
+      animation: fadein 0.2s;
+      background: rgba(0, 0, 0, 0.05);
+    }
+    :global {
+      .menu {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      .menu--double {
+        display: grid;
+        grid-template-columns: 50% 50%;
+        gap: 0.25rem;
+        & li {
+          white-space: nowrap;
+        }
+      }
+      .section {
+        padding: 0.75rem;
+      }
+
+      .item,
+      button.item {
+        display: block;
+        width: 100%;
+        border: none;
+        background: none;
+        text-align: left;
+        cursor: pointer;
+        margin: 0 !important;
+        font-size: 1rem;
+        &:focus-visible,
+        &:hover {
+          background: Highlight;
+          color: HighlightText;
+        }
+      }
+      hr {
+        border: none;
+        margin: 0;
+        padding: 0;
+        border-bottom: 1px solid var(--border);
+      }
+    }
+  }
+
+  @keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+</style>

package/dist/ContextMenu/ContextMenu.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const ContextMenu: import("svelte").Component<{
+    position?: any[];
+    children: any;
+    onClose?: Function;
+}, {}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/GoogleDocScrollyteller/GoogleDocScrollyteller.stories.svelte

@@ -0,0 +1,24 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import GoogleDocScrollyteller from "./GoogleDocScrollyteller.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/GoogleDocScrollyteller",
+    component: GoogleDocScrollyteller,
+    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={{
+    name: "myscrollyteller",
+    markerName: "mark",
+  }}
+/>

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

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