From 2111002f8bf7912b6618e70de8cc9137a91b89f4 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 24 Mar 2025 11:16:49 -0700
Subject: [PATCH] updates docs, svelte 5

---
 src/components/PymChild/PymChild.mdx          | 36 +++++++++++++++++++
 .../PymChild/PymChild.stories.svelte          | 24 +++----------
 src/components/PymChild/PymChild.svelte       | 11 +++---
 src/components/PymChild/state.svelte.ts       |  5 +++
 src/components/PymChild/stores.js             |  3 --
 .../PymChild/stories/docs/component.md        | 28 ---------------
 6 files changed, 50 insertions(+), 57 deletions(-)
 create mode 100644 src/components/PymChild/PymChild.mdx
 create mode 100644 src/components/PymChild/state.svelte.ts
 delete mode 100644 src/components/PymChild/stores.js
 delete mode 100644 src/components/PymChild/stories/docs/component.md

diff --git a/src/components/PymChild/PymChild.mdx b/src/components/PymChild/PymChild.mdx
new file mode 100644
index 00000000..927d6bd3
--- /dev/null
+++ b/src/components/PymChild/PymChild.mdx
@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/blocks';
+
+import * as PymChildStories from './PymChild.stories.svelte';
+
+<Meta of={PymChildStories} />
+
+# PymChild
+
+The `PymChild` component creates a [Pym.js](https://blog.apps.npr.org/pym.js/) child instance for embeddables.
+
+```svelte
+<script>
+  import { PymChild } from '@reuters-graphics/graphics-components';
+</script>
+
+<PymChild polling={500} />
+```
+
+You can access the Pym.js child via `pymChildState` in other components to send custom height updates to parent frames:
+
+```svelte
+<script>
+  import {
+    PymChild,
+    pymChildState,
+  } from '@reuters-graphics/graphics-components';
+
+  const updateHeight = () => {
+    if (pymChildState.pymChild) pymChildState.pymChild.sendHeight();
+  };
+</script>
+
+<PymChild />
+
+<button onclick={updateHeight}>Update height</button>
+```
diff --git a/src/components/PymChild/PymChild.stories.svelte b/src/components/PymChild/PymChild.stories.svelte
index 5119f692..36c1f1f3 100644
--- a/src/components/PymChild/PymChild.stories.svelte
+++ b/src/components/PymChild/PymChild.stories.svelte
@@ -1,27 +1,11 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import PymChild from './PymChild.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Utilities/PymChild',
     component: PymChild,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <PymChild {...args} />
-    <div>Nothing to see here. 😎</div>
-  {/snippet}
-</Template>
-
-<Story name="Default" />
+<Story name="Demo" tags={['!autodocs', '!dev']} />
diff --git a/src/components/PymChild/PymChild.svelte b/src/components/PymChild/PymChild.svelte
index c60f870c..f7cb9831 100644
--- a/src/components/PymChild/PymChild.svelte
+++ b/src/components/PymChild/PymChild.svelte
@@ -1,8 +1,9 @@
 <!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-pymchild--docs) -->
 <script lang="ts">
-  import { onMount } from 'svelte';
   import pym from 'pym.js';
-  import { pymChildStore } from './stores.js';
+  import { pymChildState } from './state.svelte.js';
+  import { onMount } from 'svelte';
+
   interface Props {
     /** Pym.js polling interval */
     polling?: number;
@@ -10,10 +11,8 @@
 
   let { polling = 500 }: Props = $props();
 
-  let pymChild;
-
   onMount(() => {
-    pymChild = new pym.Child({ polling });
-    pymChildStore.set(pymChild);
+    let pymChild = new pym.Child({ polling });
+    pymChildState.pymChild = pymChild;
   });
 </script>
diff --git a/src/components/PymChild/state.svelte.ts b/src/components/PymChild/state.svelte.ts
new file mode 100644
index 00000000..3dfee824
--- /dev/null
+++ b/src/components/PymChild/state.svelte.ts
@@ -0,0 +1,5 @@
+import pym from 'pym.js';
+
+type PymChildState = { pymChild: pym.Child | null };
+
+export const pymChildState: PymChildState = $state({ pymChild: null });
diff --git a/src/components/PymChild/stores.js b/src/components/PymChild/stores.js
deleted file mode 100644
index 690e8453..00000000
--- a/src/components/PymChild/stores.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const pymChildStore = writable(null);
diff --git a/src/components/PymChild/stories/docs/component.md b/src/components/PymChild/stories/docs/component.md
deleted file mode 100644
index ac261b84..00000000
--- a/src/components/PymChild/stories/docs/component.md
+++ /dev/null
@@ -1,28 +0,0 @@
-A Pym.js child instance for embeddables.
-
-```svelte
-<script>
-  import { PymChild } from '@reuters-graphics/graphics-components';
-</script>
-
-<PymChild polling="{500}" />
-```
-
-You can access the Pym.js child through its store in other components to send custom height updates to parent frames:
-
-```svelte
-<script>
-  import {
-    PymChild,
-    pymChildStore,
-  } from '@reuters-graphics/graphics-components';
-
-  const updateHeight = () => {
-    if ($pymChildStore) $pymChildStore.sendHeight();
-  };
-</script>
-
-<PymChild />
-
-<button on:click="{updateHeight}">Update height</button>
-```