@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/Framer/Framer.stories.svelte

@@ -1,26 +1,19 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import Framer from "./Framer.svelte";
-import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Utilities/Framer",
-  component: Framer,
-  ...withComponentDocs(componentDocs)
-};
-</script>
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Framer from './Framer.svelte';
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    title: 'Components/Utilities/Framer',
+    component: Framer,
+  });
 </script>
 
-<Template let:args>
-  <Framer {...args} />
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     embeds: [
       'https://graphics.reuters.com/USA-CONGRESS/FUNDRAISING/zjvqkawjlvx/embeds/en/embed/?zzz',
+      'https://www.reuters.com/graphics/UKRAINE-CRISIS/MAP/klvymdzdrvg/embeds/en/map/',
     ],
-  }}"
+  }}
 />

package/dist/components/Framer/Framer.stories.svelte.d.ts

@@ -1,23 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    parameters: {
-        docs: any;
+import Framer from './Framer.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;
     };
-    title: string;
-    component: typeof Framer;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type FramerProps = typeof __propDef.props;
-export type FramerEvents = typeof __propDef.events;
-export type FramerSlots = typeof __propDef.slots;
-export default class Framer extends SvelteComponent<FramerProps, FramerEvents, FramerSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Framer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Framer = InstanceType<typeof Framer>;
+export default Framer;

package/dist/components/Framer/Framer.svelte

@@ -1,20 +1,30 @@
-<script>
-  import Fa from 'svelte-fa/src/fa.svelte';
+<script lang="ts">
+  import Fa from 'svelte-fa';
   import { faDesktop, faLink } from '@fortawesome/free-solid-svg-icons';
-  import { onMount, afterUpdate } from 'svelte';
   import pym from 'pym.js';
   import urljoin from 'proper-url-join';
   import Resizer from './Resizer/index.svelte';
-  import { width } from './stores.js';
-  import getUniqNames from './uniqNames.js';
+  import { width } from './stores';
+  import getUniqNames from './uniqNames';
   import Typeahead from './Typeahead/index.svelte';
-
-  export let embeds;
-  export let breakpoints = [330, 510, 660, 930, 1200];
-  export let minFrameWidth = 320;
-  export let maxFrameWidth = 1200;
-
-  const getDefaultEmbed = () => {
+  import ReutersGraphicsLogo from '../ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
+
+  interface Props {
+    embeds: string[];
+    breakpoints?: number[];
+    minFrameWidth?: number;
+    maxFrameWidth?: number;
+  }
+
+  let {
+    embeds = [],
+    breakpoints = [330, 510, 660, 930, 1200],
+    minFrameWidth = 320,
+    maxFrameWidth = 1200,
+  }: Props = $props();
+
+  const getDefaultEmbed = (embeds: Props['embeds']) => {
+    if (embeds.length === 0) return '';
     if (typeof window === 'undefined') return embeds[0];
     const lastActiveEmbed = window.localStorage.getItem('framer-active-embed');
     if (!lastActiveEmbed) return embeds[0];
@@ -22,12 +32,16 @@
     return embeds[0];
   };
 
-  let activeEmbed = getDefaultEmbed();
-  let activeEmbedIndex = embeds.indexOf(activeEmbed);
+  let activeEmbed = $state(getDefaultEmbed(embeds));
+  let activeEmbedIndex = $derived(embeds.indexOf(activeEmbed));
 
-  $: embedTitles = getUniqNames(embeds);
+  let embedTitles = $derived.by(() => {
+    if (embeds.length === 0) return '';
+    return getUniqNames(embeds);
+  });
 
-  const reframe = (embed) => {
+  const reframe = (embed: string) => {
+    if (!embed) return;
     // Bit of hack for handling adding query strings dynamically to embeds.
     // cf. also the value prop on the Typeahead component...
     const activeEmbed =
@@ -42,79 +56,93 @@
     );
   };
 
-  onMount(() => {
-    reframe(activeEmbed);
-  });
-
-  afterUpdate(() => {
+  $effect(() => {
     reframe(activeEmbed);
   });
 </script>
 
 <div class="container">
   <header>
-    <img
-      src="https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-dark.svg"
-      alt=""
-    />
+    <ReutersGraphicsLogo width="120px" />
   </header>
 
-  <div id="typeahead-container">
-    <div class="embed-link">
-      <a
-        rel="external"
-        target="_blank"
-        href="{activeEmbed}"
-        title="{activeEmbed}"
-      >
-        Live link <Fa icon="{faLink}" />
-      </a>
+  {#if embeds.length === 0}
+    <div class="no-embeds">
+      <p>No embeds to show.</p>
     </div>
-    <Typeahead
-      label="Select an embed"
-      value="{embedTitles[embeds.indexOf(activeEmbed)] ||
-        embedTitles[activeEmbedIndex] ||
-        embedTitles[0]}"
-      extract="{(d) => embedTitles[d.index]}"
-      data="{embeds.map((embed, index) => ({ index, embed }))}"
-      placeholder="{'Search'}"
-      showDropdownOnFocus="{true}"
-      on:select="{({ detail }) => {
-        if (typeof window !== 'undefined') {
-          window.localStorage.setItem(
-            'framer-active-embed',
-            detail.original.embed
-          );
-        }
-        activeEmbed = detail.original.embed;
-        activeEmbedIndex = detail.original.index;
-      }}"
-    />
-  </div>
-
-  <div id="preview-label" style="width:{$width}px;">
-    <p>Preview</p>
-  </div>
-  <div id="frame-parent" style="width:{$width}px;"></div>
+  {:else}
+    <div id="typeahead-container">
+      <div class="embed-link">
+        <a
+          rel="external"
+          target="_blank"
+          href={activeEmbed}
+          title={activeEmbed}
+        >
+          Live link <Fa icon={faLink} />
+        </a>
+      </div>
+      <Typeahead
+        label="Select an embed"
+        value={embedTitles[embeds.indexOf(activeEmbed)] ||
+          embedTitles[activeEmbedIndex] ||
+          embedTitles[0]}
+        extract={(d) => embedTitles[d.index]}
+        data={embeds.map((embed, index) => ({ index, embed }))}
+        showDropdownOnFocus={true}
+        onselect={(detail) => {
+          if (typeof window !== 'undefined') {
+            window.localStorage.setItem(
+              'framer-active-embed',
+              detail.original.embed
+            );
+          }
+          activeEmbed = detail.original.embed;
+          // activeEmbedIndex = detail.original.index;
+        }}
+      />
+    </div>
+
+    <div id="preview-label" style="width:{$width}px;">
+      <p>Preview</p>
+    </div>
+    <div id="frame-parent" style="width:{$width}px;"></div>
+  {/if}
 </div>
 
 <div id="home-link">
   <a rel="external" href="./../">
-    <Fa icon="{faDesktop}" />
+    <Fa icon={faDesktop} />
   </a>
 </div>
 
-<Resizer {breakpoints} {minFrameWidth} {maxFrameWidth} />
-
-<style>header {
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
-  font-size: 50px;
+{#if embeds.length > 0}
+  <Resizer {breakpoints} {minFrameWidth} {maxFrameWidth} />
+{/if}
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+header {
   text-align: center;
-  text-transform: uppercase;
-  font-weight: 700;
   margin: 20px 0;
 }
 
+.no-embeds {
+  background-color: #efefef;
+  border-radius: 4px;
+  padding: 5px 10px;
+}
+.no-embeds p {
+  text-align: center;
+  margin: 0;
+  font-family: var(--theme-font-family-note);
+}
+
 div#typeahead-container {
   max-width: 660px;
   margin: 0 auto 15px;

package/dist/components/Framer/Framer.svelte.d.ts

@@ -1,31 +1,9 @@
-/** @typedef {typeof __propDef.props}  FramerProps */
-/** @typedef {typeof __propDef.events}  FramerEvents */
-/** @typedef {typeof __propDef.slots}  FramerSlots */
-export default class Framer extends SvelteComponent<{
-    embeds: any;
-    breakpoints?: number[] | undefined;
-    maxFrameWidth?: number | undefined;
-    minFrameWidth?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+interface Props {
+    embeds: string[];
+    breakpoints?: number[];
+    minFrameWidth?: number;
+    maxFrameWidth?: number;
 }
-export type FramerProps = typeof __propDef.props;
-export type FramerEvents = typeof __propDef.events;
-export type FramerSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        embeds: any;
-        breakpoints?: number[] | undefined;
-        maxFrameWidth?: number | undefined;
-        minFrameWidth?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+declare const Framer: import("svelte").Component<Props, {}, "">;
+type Framer = ReturnType<typeof Framer>;
+export default Framer;

package/dist/components/Framer/Resizer/index.svelte

@@ -1,37 +1,50 @@
-<script>
+<script lang="ts">
   import { faDesktop, faMobileAlt } from '@fortawesome/free-solid-svg-icons';
-  import Fa from 'svelte-fa/src/fa.svelte';
-  import { width } from './../stores.js';
+  import Fa from 'svelte-fa';
+  import { width } from '../stores.js';
 
-  export let breakpoints = [330, 510, 660, 930, 1200];
-  export let maxFrameWidth = 1200;
-  export let minFrameWidth = 320;
+  interface Props {
+    breakpoints?: number[];
+    maxFrameWidth?: number;
+    minFrameWidth?: number;
+  }
 
-  let container;
+  let {
+    breakpoints = [330, 510, 660, 930, 1200],
+    maxFrameWidth = 1200,
+    minFrameWidth = 320,
+  }: Props = $props();
+
+  let container: HTMLElement | undefined = $state();
 
   const sliderWidth = 90;
-  let windowInnerWidth = 1200;
-  $: minWidth = minFrameWidth;
-  $: maxWidth = Math.min(windowInnerWidth - 70, maxFrameWidth);
-  $: pixelRange = maxWidth - minWidth;
-  $: if ($width > maxWidth) width.set(maxWidth);
-  $: offset = ($width - minWidth) / pixelRange;
+  let windowInnerWidth = $state(1200);
+  let minWidth = $derived(minFrameWidth);
+  let maxWidth = $derived(Math.min(windowInnerWidth - 70, maxFrameWidth));
+  let pixelRange = $derived(maxWidth - minWidth);
+
+  $effect(() => {
+    if ($width > maxWidth) width.set(maxWidth);
+  });
+
+  // svelte-ignore state_referenced_locally
+  let offset = $state(($width - minWidth) / pixelRange);
 
-  let sliding = false;
-  let isFocused = false;
+  let sliding = $state(false);
+  let isFocused = $state(false);
 
-  const roundToNearestFive = (d) => Math.ceil(d / 5) * 5;
+  const roundToNearestFive = (d: number) => Math.ceil(d / 5) * 5;
   const getPx = () => Math.round(pixelRange * offset + minWidth);
 
-  let pixelLabel = null;
+  let pixelLabel: null | number = $state(null);
 
-  const move = (e) => {
+  const move = (e: MouseEvent) => {
     if (!sliding || !container) return;
     const { left } = container.getBoundingClientRect();
     offset = Math.min(Math.max(0, e.pageX - left), sliderWidth) / sliderWidth;
     pixelLabel = roundToNearestFive(getPx());
   };
-  const handleKeyDown = (e) => {
+  const handleKeyDown = (e: KeyboardEvent) => {
     if (!isFocused) return;
     const { keyCode } = e;
     const pixelWidth = sliderWidth / pixelRange;
@@ -44,7 +57,7 @@
     }
     width.set(getPx());
   };
-  const start = (e) => {
+  const start = (e: MouseEvent) => {
     sliding = true;
     move(e);
   };
@@ -80,48 +93,48 @@
 </script>
 
 <svelte:window
-  on:mousemove="{move}"
-  on:mouseup="{end}"
-  on:keydown="{handleKeyDown}"
-  bind:innerWidth="{windowInnerWidth}"
+  onmousemove={move}
+  onmouseup={end}
+  onkeydown={handleKeyDown}
+  bind:innerWidth={windowInnerWidth}
 />
 
 <div id="resizer">
   <div class="slider">
-    <div class="label" style="{`opacity: ${sliding || isFocused ? 1 : 0};`}">
+    <div class="label" style={`opacity: ${sliding || isFocused ? 1 : 0};`}>
       {pixelLabel || $width}px
     </div>
     <button
       class="icon left"
-      disabled="{$width === minWidth}"
-      on:click="{decrement}"
-      on:focus="{onFocus}"
-      on:mouseover="{onFocus}"
-      on:mouseleave="{onBlur}"
+      disabled={$width === minWidth}
+      onclick={decrement}
+      onfocus={onFocus}
+      onmouseover={onFocus}
+      onmouseleave={onBlur}
     >
-      <Fa icon="{faMobileAlt}" fw />
+      <Fa icon={faMobileAlt} fw />
     </button>
-    <div class="slider-container" bind:this="{container}">
+    <div class="slider-container" bind:this={container}>
       <div class="track"></div>
       <div
         class="handle"
         tabindex="0"
         role="button"
         style="left: calc({offset * 100}% - 5px);"
-        on:mousedown="{start}"
-        on:focus="{onFocus}"
-        on:blur="{onBlur}"
+        onmousedown={start}
+        onfocus={onFocus}
+        onblur={onBlur}
       ></div>
     </div>
     <button
       class="icon right"
-      disabled="{$width === maxWidth}"
-      on:click="{increment}"
-      on:focus="{onFocus}"
-      on:mouseover="{onFocus}"
-      on:mouseleave="{onBlur}"
+      disabled={$width === maxWidth}
+      onclick={increment}
+      onfocus={onFocus}
+      onmouseover={onFocus}
+      onmouseleave={onBlur}
     >
-      <Fa icon="{faDesktop}" fw />
+      <Fa icon={faDesktop} fw />
     </button>
   </div>
 </div>

package/dist/components/Framer/Resizer/index.svelte.d.ts

@@ -1,29 +1,8 @@
-/** @typedef {typeof __propDef.props}  IndexProps */
-/** @typedef {typeof __propDef.events}  IndexEvents */
-/** @typedef {typeof __propDef.slots}  IndexSlots */
-export default class Index extends SvelteComponent<{
-    breakpoints?: number[] | undefined;
-    maxFrameWidth?: number | undefined;
-    minFrameWidth?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+interface Props {
+    breakpoints?: number[];
+    maxFrameWidth?: number;
+    minFrameWidth?: number;
 }
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        breakpoints?: number[] | undefined;
-        maxFrameWidth?: number | undefined;
-        minFrameWidth?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+declare const Index: import("svelte").Component<Props, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/Framer/Typeahead/Search.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    value: string;
+    autofocus?: boolean;
+    debounce?: number;
+    label?: string | Snippet;
+    hideLabel?: boolean;
+    id?: string;
+    ref: HTMLElement;
+    removeFormAriaAttributes?: boolean;
+    ontype?: (value: string) => void;
+    onclear?: () => void;
+  }
+
+  let {
+    value = $bindable(''),
+    autofocus = false,
+    debounce = 0,
+    label = 'Label',
+    hideLabel = false,
+    id = 'search' + Math.random().toString(36),
+    ref = $bindable(),
+    removeFormAriaAttributes = false,
+    ontype = (_value: string) => {},
+    onclear = () => {},
+    ...restProps
+  }: Props & HTMLInputAttributes = $props();
+
+  import { onMount } from 'svelte';
+
+  let prevValue = value;
+  let timeout: ReturnType<typeof setTimeout>;
+  let calling = false;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function debounceFn(fn: () => any) {
+    if (calling) return;
+    calling = true;
+    timeout = setTimeout(() => {
+      fn();
+      calling = false;
+    }, debounce);
+  }
+
+  onMount(() => {
+    if (autofocus) window.requestAnimationFrame(() => ref?.focus());
+    return () => clearTimeout(timeout);
+  });
+
+  $effect(() => {
+    if (value.length > 0 && value !== prevValue) {
+      if (debounce > 0) {
+        debounceFn(() => ontype(value));
+      } else {
+        ontype(value);
+      }
+    }
+
+    if (value.length === 0 && prevValue.length > 0) onclear();
+
+    prevValue = value;
+  });
+</script>
+
+<form
+  data-svelte-search
+  role={removeFormAriaAttributes ? null : 'search'}
+  aria-labelledby={removeFormAriaAttributes ? null : id}
+  action=""
+  onsubmit={(e) => {
+    e.preventDefault();
+  }}
+>
+  <label
+    id="{id}-label"
+    for={id}
+    style={hideLabel ?
+      'position: absolute;height: 1px;width: 1px;overflow: hidden;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);white-space: nowrap;'
+    : undefined}
+  >
+    {#if typeof label === 'string'}
+      {label}
+    {:else}
+      {@render label()}
+    {/if}
+  </label>
+  <input
+    bind:this={ref}
+    bind:value
+    {id}
+    name="search"
+    type="search"
+    placeholder="Search..."
+    autocomplete="off"
+    spellcheck="false"
+    {...restProps}
+  />
+</form>

package/dist/components/Framer/Typeahead/Search.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+interface Props {
+    value: string;
+    autofocus?: boolean;
+    debounce?: number;
+    label?: string | Snippet;
+    hideLabel?: boolean;
+    id?: string;
+    ref: HTMLElement;
+    removeFormAriaAttributes?: boolean;
+    ontype?: (value: string) => void;
+    onclear?: () => void;
+}
+type $$ComponentProps = Props & HTMLInputAttributes;
+declare const Search: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
+type Search = ReturnType<typeof Search>;
+export default Search;

package/dist/components/Framer/Typeahead/fuzzy.d.ts

@@ -1,10 +1,23 @@
-export default fuzzy;
-declare namespace fuzzy {
-    function simpleFilter(pattern: any, array: any): any;
-    function test(pattern: any, str: any): boolean;
-    function match(pattern: any, str: any, opts: any): {
-        rendered: string;
-        score: number;
-    } | null;
-    function filter(pattern: any, arr: any, opts: any): any;
+interface MatchOptions {
+    pre?: string;
+    post?: string;
+    caseSensitive?: boolean;
+    extract?: (arg: any) => string;
+}
+interface MatchResult {
+    rendered: string;
+    score: number;
 }
+interface FilterResult<T> {
+    string: string;
+    score: number;
+    index: number;
+    original: T;
+}
+declare const fuzzy: {
+    simpleFilter(pattern: string, array: string[]): string[];
+    test(pattern: string, str: string): boolean;
+    match(pattern: string, str: string, opts?: MatchOptions): MatchResult | null;
+    filter<T>(pattern: string, arr: T[], opts?: MatchOptions): FilterResult<T>[];
+};
+export default fuzzy;