From afaec920fd1db84fcc84f8dda2494703d68de9b0 Mon Sep 17 00:00:00 2001
From: Javi Aguilar <122741+itsjavi@users.noreply.github.com>
Date: Fri, 25 Aug 2023 02:16:00 +0200
Subject: [PATCH] refactor(ui): implement an event-driven bidirectional
 communication system between for the iframe

---
 package.json                                  |   4 +-
 packages/storylite/package.json               |   6 +-
 packages/storylite/src/app/index.test.tsx     |   3 -
 .../storylite/src/components/StoryFrame.tsx   |  15 --
 .../src/components/canvas/CanvasIframe.tsx    |  90 ++++++++++++
 .../components/canvas/CanvasIframeBody.tsx    |  57 ++++++++
 .../canvas/useCanvasIframe.test.tsx           | 131 +++++++++++++++++
 .../src/components/canvas/useCanvasIframe.ts  |  94 +++++++++++++
 packages/storylite/src/pages/index.tsx        |   6 +-
 .../storylite/src/pages/sandbox/dashboard.tsx |   5 +-
 .../sandbox/stories/$story/$export_name.tsx   |  10 +-
 .../pages/sandbox/stories/$story/index.tsx    |   6 +-
 .../src/pages/stories/$story/$export_name.tsx |   5 +-
 packages/storylite/src/types/config.ts        |   1 +
 packages/vite-plugin/package.json             |   4 +-
 packages/vite-plugin/src/index.ts             |   2 +-
 pnpm-lock.yaml                                | 132 +++++++++---------
 17 files changed, 464 insertions(+), 107 deletions(-)
 delete mode 100644 packages/storylite/src/app/index.test.tsx
 delete mode 100644 packages/storylite/src/components/StoryFrame.tsx
 create mode 100644 packages/storylite/src/components/canvas/CanvasIframe.tsx
 create mode 100644 packages/storylite/src/components/canvas/CanvasIframeBody.tsx
 create mode 100644 packages/storylite/src/components/canvas/useCanvasIframe.test.tsx
 create mode 100644 packages/storylite/src/components/canvas/useCanvasIframe.ts

diff --git a/package.json b/package.json
index 0fd5aaa..d1fb067 100644
--- a/package.json
+++ b/package.json
@@ -50,13 +50,13 @@
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@r1stack/coding-style": "^0.4.1",
+    "@r1stack/coding-style": "^0.4.3",
     "@swc/core": "^1.3.78",
     "@swc/jest": "^0.2.29",
     "@testing-library/jest-dom": "^6.1.2",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.4",
-    "@types/node": "^20.5.4",
+    "@types/node": "^20.5.6",
     "changelogen": "^0.5.5",
     "eslint": "^8.47.0",
     "husky": "^8.0.3",
diff --git a/packages/storylite/package.json b/packages/storylite/package.json
index 2615e90..f0416f7 100644
--- a/packages/storylite/package.json
+++ b/packages/storylite/package.json
@@ -29,12 +29,12 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@r1stack/core": "^0.4.1",
+    "@r1stack/core": "^0.4.3",
     "lucide-react": "^0.268.0"
   },
   "devDependencies": {
-    "@r1stack/coding-style": "^0.4.1",
-    "@types/node": "^20.5.4",
+    "@r1stack/coding-style": "^0.4.3",
+    "@types/node": "^20.5.6",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "publint": "^0.2.2",
diff --git a/packages/storylite/src/app/index.test.tsx b/packages/storylite/src/app/index.test.tsx
deleted file mode 100644
index b20bb8f..0000000
--- a/packages/storylite/src/app/index.test.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-it('passes', () => {
-  expect(true).toBe(true)
-})
diff --git a/packages/storylite/src/components/StoryFrame.tsx b/packages/storylite/src/components/StoryFrame.tsx
deleted file mode 100644
index e459722..0000000
--- a/packages/storylite/src/components/StoryFrame.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ElementIds } from '@/types'
-
-type StoryFrameProps = {
-  story?: string
-  exportName?: string
-}
-
-export default function StoryFrame({ story, exportName }: StoryFrameProps) {
-  const iframeSrc =
-    story === undefined ? '/#/sandbox/dashboard' : `/#/sandbox/stories/${story}/${exportName || ''}`
-
-  return (
-    <iframe title="StoryFrame" id={ElementIds.Iframe} className={'StoryFrame'} src={iframeSrc} />
-  )
-}
diff --git a/packages/storylite/src/components/canvas/CanvasIframe.tsx b/packages/storylite/src/components/canvas/CanvasIframe.tsx
new file mode 100644
index 0000000..2439c49
--- /dev/null
+++ b/packages/storylite/src/components/canvas/CanvasIframe.tsx
@@ -0,0 +1,90 @@
+import { HTMLProps } from 'react'
+import { cn } from '@r1stack/core'
+
+import { ElementIds } from '@/types'
+
+import { useStoryLiteConfig } from '../../app/context/StoriesDataContext'
+import { useCanvasIframe } from './useCanvasIframe'
+
+const allowList = [
+  'autoplay',
+  'camera',
+  'encrypted-media',
+  'fullscreen',
+  'geolocation',
+  'microphone',
+  'midi',
+  'payment',
+  'picture-in-picture',
+  'clipboard-write',
+  'accelerometer',
+  'gyroscope',
+  'magnetometer',
+  'xr-spatial-tracking',
+  'usb',
+]
+
+// const sandboxAllowList = [
+//   'allow-same-origin',
+//   // 'allow-forms',
+//   // 'allow-fullscreen',
+//   // 'allow-modals',
+//   // 'allow-orientation-lock',
+//   // 'allow-pointer-lock',
+//   // 'allow-popups',
+//   // 'allow-popups-to-escape-sandbox',
+//   // 'allow-presentation',
+//   // 'allow-scripts',
+//   // 'allow-top-navigation',
+//   // 'allow-top-navigation-by-user-activation',
+// ]
+
+export type CanvasIframeProps = {
+  story?: string
+  exportName?: string
+} & Omit<HTMLProps<HTMLIFrameElement>, 'src'>
+
+const handleReceivedMessage = (message: any) => {
+  // eslint-disable-next-line no-console
+  console.log('[top] Message received:', message)
+}
+
+export function CanvasIframe(props: CanvasIframeProps) {
+  const userConfig = useStoryLiteConfig()
+  const userProps = userConfig?.iframeProps || {}
+  const { className: userClassName, ...userRest } = userProps
+  const { story, exportName, className, ...rest } = props
+
+  const iframeSrc =
+    story === undefined ? '/#/sandbox/dashboard' : `/#/sandbox/stories/${story}/${exportName || ''}`
+
+  const { ref, isReady, sendMessage } = useCanvasIframe(handleReceivedMessage)
+
+  const handleToolbarAction = () => {
+    if (isReady) {
+      sendMessage({
+        type: 'chat',
+        payload: {
+          message: 'Hello from top window',
+        },
+      })
+    }
+  }
+
+  return (
+    <>
+      <button onClick={handleToolbarAction}>Send message to iframe</button>
+      <iframe
+        ref={ref}
+        id={ElementIds.Iframe}
+        src={iframeSrc}
+        title="StoryLite-iframe"
+        className={cn('StoryFrame', className, userClassName)}
+        allow={allowList.map(permission => `${permission} *`).join('; ')}
+        allowFullScreen={true}
+        {...rest}
+        {...userRest}
+      />
+    </>
+  )
+}
diff --git a/packages/storylite/src/components/canvas/CanvasIframeBody.tsx b/packages/storylite/src/components/canvas/CanvasIframeBody.tsx
new file mode 100644
index 0000000..100cddf
--- /dev/null
+++ b/packages/storylite/src/components/canvas/CanvasIframeBody.tsx
@@ -0,0 +1,57 @@
+import { HTMLProps, useEffect } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { cn } from '@r1stack/core'
+
+import { Story } from '../Story'
+import { CrossDocumentMessageSource, sendMessageToRoot } from './useCanvasIframe'
+
+export type CanvasIframeBodyProps = {
+  story?: string
+  exportName?: string
+} & HTMLProps<HTMLDivElement>
+
+export function CanvasIframeBody(props: CanvasIframeBodyProps) {
+  const { story, exportName, ...rest } = props
+
+  const [searchParams] = useSearchParams()
+  const isStandalone = searchParams.has('standalone')
+
+  useEffect(() => {
+    const onMessage = (message: any) => {
+      // eslint-disable-next-line no-console
+      console.log('[iframe] Message received:', message)
+      // do something, .e.g.: use global state manager
+    }
+    const handleReceivedMessage = (event: MessageEvent) => {
+      const eventSource = event.data?.source
+
+      // Verify that the message comes from the expected sender
+      if (eventSource === CrossDocumentMessageSource.Root) {
+        onMessage(event.data)
+      }
+    }
+    window.addEventListener('message', handleReceivedMessage)
+
+    return () => {
+      window.removeEventListener('message', handleReceivedMessage)
+    }
+  }, [])
+
+  return (
+    <div className={cn('SandboxLayout', [isStandalone, 'StandaloneSandboxLayout'])} {...rest}>
+      <button
+        onClick={() => {
+          sendMessageToRoot({
+            type: 'chat',
+            payload: {
+              message: 'Hello from iframe',
+            },
+          })
+        }}
+      >
+        Send message to main window
+      </button>
+      <Story story={story ?? 'index'} exportName={exportName ?? 'default'} />
+    </div>
+  )
+}
diff --git a/packages/storylite/src/components/canvas/useCanvasIframe.test.tsx b/packages/storylite/src/components/canvas/useCanvasIframe.test.tsx
new file mode 100644
index 0000000..f526184
--- /dev/null
+++ b/packages/storylite/src/components/canvas/useCanvasIframe.test.tsx
@@ -0,0 +1,131 @@
+import React from 'react'
+
+import { act, render, renderHook, waitFor } from '@testing-library/react'
+
+import {
+  CrossDocumentMessage,
+  CrossDocumentMessageSource,
+  useCanvasIframe,
+} from './useCanvasIframe'
+
+// Mock postMessage for testing
+window.postMessage = jest.fn()
+const iframeMock = {
+  contentWindow: {
+    postMessage: jest.fn(),
+  },
+  addEventListener: jest.fn().mockImplementation((event, cb) => {
+    if (event === 'load') {
+      cb()
+    }
+  }),
+  removeEventListener: jest.fn(),
+}
+
+describe('useCanvasIframe', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  const mockUseRef = () => {
+    jest.spyOn(React, 'useRef').mockReturnValue({ current: iframeMock })
+  }
+
+  const renderIframe = (args: Parameters<typeof useCanvasIframe> = []) => {
+    const { result } = renderHook(() => useCanvasIframe(...args))
+    render(
+      <div>
+        <iframe
+          data-testid="test-iframe"
+          title="test"
+          onLoad={() => {
+            result.current.isReady = true
+            // result.current.ref.current = iframeElementMock as unknown as HTMLIFrameElement
+          }}
+        />
+      </div>,
+    )
+
+    return result.current
+  }
+
+  const renderMockedIframe = async (args: Parameters<typeof useCanvasIframe> = []) => {
+    mockUseRef()
+    const result = renderIframe(args)
+    await waitFor(() => {
+      expect(result.isReady).toBe(true)
+    })
+
+    return result
+  }
+
+  test('should set up iframe listeners correctly', async () => {
+    const result = await renderMockedIframe()
+
+    expect(result.isReady).toBe(true)
+  })
+
+  test('should send message to iframe', async () => {
+    const result = await renderMockedIframe()
+
+    const message: CrossDocumentMessage = {
+      type: 'test',
+      payload: {
+        test: 'Hello',
+      },
+    }
+    act(() => {
+      result.sendMessage(message)
+    })
+
+    expect(iframeMock.contentWindow.postMessage).toHaveBeenCalledWith(
+      { ...message, source: CrossDocumentMessageSource.Root },
+      '/',
+    )
+  })
+
+  test('should call onMessage callback when message received', async () => {
+    const onMessage = jest.fn()
+    await renderMockedIframe([onMessage])
+
+    const message: CrossDocumentMessage = {
+      type: 'test',
+      payload: {
+        test: 'Hello',
+      },
+      source: CrossDocumentMessageSource.Iframe,
+    }
+    const event = new MessageEvent('message', {
+      source: iframeMock.contentWindow as unknown as Window,
+      data: message,
+    })
+
+    act(() => {
+      window.dispatchEvent(event)
+    })
+
+    expect(onMessage).toHaveBeenCalledWith(message)
+  })
+
+  test('should not call onMessage callback if source is not the iframe', async () => {
+    const onMessage = jest.fn()
+    await renderMockedIframe([onMessage])
+
+    const event = new MessageEvent('message', {
+      source: null,
+      data: {
+        source: 'other' as any,
+        type: 'test',
+        payload: {
+          test: 'Hello',
+        },
+      } satisfies CrossDocumentMessage,
+    })
+
+    act(() => {
+      window.dispatchEvent(event)
+    })
+
+    expect(onMessage).not.toHaveBeenCalled()
+  })
+})
diff --git a/packages/storylite/src/components/canvas/useCanvasIframe.ts b/packages/storylite/src/components/canvas/useCanvasIframe.ts
new file mode 100644
index 0000000..a3b2294
--- /dev/null
+++ b/packages/storylite/src/components/canvas/useCanvasIframe.ts
@@ -0,0 +1,94 @@
+import { useEffect, useRef, useState } from 'react'
+
+enum WindowMessageOrigin {
+  Same = '/',
+  Any = '*',
+}
+
+export enum CrossDocumentMessageSource {
+  Root = 'storylite_root',
+  Iframe = 'storylite_iframe',
+}
+
+export type CrossDocumentMessage = {
+  source?: CrossDocumentMessageSource
+  type: string
+  payload: {
+    [key: string]: any
+  }
+}
+
+export type CanvasIframeState = {
+  ref: React.MutableRefObject<HTMLIFrameElement | null>
+  isReady: boolean
+  window?: Window | null
+  document?: Document
+  sendMessage: (message: CrossDocumentMessage) => void
+}
+
+export const sendMessageToRoot = (message: CrossDocumentMessage) => {
+  window.parent.postMessage(
+    { ...message, source: CrossDocumentMessageSource.Iframe },
+    WindowMessageOrigin.Same,
+  )
+}
+
+export const useCanvasIframe = (
+  onIncomingMessage?: (message: CrossDocumentMessage) => void,
+): CanvasIframeState => {
+  const ref = useRef<HTMLIFrameElement | null>(null)
+  const [loadingState, setLoadingState] = useState<'loading' | 'ready'>('loading')
+
+  useEffect(() => {
+    const handleIframeLoad = () => {
+      setLoadingState('ready')
+    }
+
+    const handleReceivedMessage = (event: MessageEvent) => {
+      if (!onIncomingMessage) {
+        return
+      }
+      const eventSource = event.data?.source
+
+      // Verify that the message comes from the expected iframe
+      if (eventSource === CrossDocumentMessageSource.Iframe) {
+        onIncomingMessage(event.data)
+      }
+    }
+
+    if (ref.current) {
+      ref.current.addEventListener('load', handleIframeLoad)
+      window.addEventListener('message', handleReceivedMessage)
+    }
+
+    return () => {
+      if (ref.current) {
+        ref.current.removeEventListener('load', handleIframeLoad)
+        window.removeEventListener('message', handleReceivedMessage)
+      }
+    }
+  }, [onIncomingMessage])
+
+  const sendMessage = (message: CrossDocumentMessage) => {
+    if (!ref.current) {
+      throw new Error('useCanvasIframe: ref.current is null')
+    }
+
+    if (!ref.current.contentWindow) {
+      throw new Error('useCanvasIframe: ref.current.contentWindow is null')
+    }
+
+    ref.current.contentWindow.postMessage(
+      { ...message, source: CrossDocumentMessageSource.Root },
+      WindowMessageOrigin.Same,
+    )
+  }
+
+  return {
+    ref,
+    isReady: loadingState === 'ready' && ref.current !== null,
+    window: ref.current?.contentWindow,
+    document: ref.current?.contentWindow?.document,
+    sendMessage,
+  }
+}
diff --git a/packages/storylite/src/pages/index.tsx b/packages/storylite/src/pages/index.tsx
index d6e19ce..4a6f457 100644
--- a/packages/storylite/src/pages/index.tsx
+++ b/packages/storylite/src/pages/index.tsx
@@ -1,10 +1,8 @@
-import React from 'react'
-
-import StoryFrame from '@/components/StoryFrame'
+import { CanvasIframe } from '@/components/canvas/CanvasIframe'
 import MainLayout from '@/layouts/MainLayout'
 
 export default function HomePage() {
-  return <StoryFrame />
+  return <CanvasIframe />
 }
 
 export const Layout = MainLayout
diff --git a/packages/storylite/src/pages/sandbox/dashboard.tsx b/packages/storylite/src/pages/sandbox/dashboard.tsx
index 05e0c85..83d2869 100644
--- a/packages/storylite/src/pages/sandbox/dashboard.tsx
+++ b/packages/storylite/src/pages/sandbox/dashboard.tsx
@@ -1,12 +1,13 @@
 import { useStoryLiteConfig } from '@/app/context/StoriesDataContext'
-import { Story } from '@/components/Story'
+import { CanvasIframeBody } from '@/components/canvas/CanvasIframeBody'
 
 import SandboxLayout from '../../layouts/SandboxLayout'
 
 export default function StoryPage() {
   const config = useStoryLiteConfig()
 
-  return <Story story={config.defaultStory || 'index'} exportName={'Main'} />
+  return <CanvasIframeBody story={config.defaultStory ?? 'index'} exportName="Main" />
+  // <Story story={config.defaultStory || 'index'} exportName={'Main'} />
 }
 
 export const Layout = SandboxLayout
diff --git a/packages/storylite/src/pages/sandbox/stories/$story/$export_name.tsx b/packages/storylite/src/pages/sandbox/stories/$story/$export_name.tsx
index 136124e..772ac40 100644
--- a/packages/storylite/src/pages/sandbox/stories/$story/$export_name.tsx
+++ b/packages/storylite/src/pages/sandbox/stories/$story/$export_name.tsx
@@ -1,6 +1,6 @@
 import { useParams } from 'react-router-dom'
 
-import { Story } from '@/components/Story'
+import { CanvasIframeBody } from '@/components/canvas/CanvasIframeBody'
 
 import SandboxLayout from '../../../../layouts/SandboxLayout'
 
@@ -8,10 +8,14 @@ export default function StoryPage() {
   const { story, export_name } = useParams()
 
   if (!story) {
-    return <div>Error: story or export_name is empty</div>
+    return <div>Error: story route segment is empty</div>
   }
 
-  return <Story story={story} exportName={export_name} />
+  if (!export_name) {
+    return <div>Error: export_name route segment is empty</div>
+  }
+
+  return <CanvasIframeBody story={story} exportName={export_name} />
 }
 
 export const Layout = SandboxLayout
diff --git a/packages/storylite/src/pages/sandbox/stories/$story/index.tsx b/packages/storylite/src/pages/sandbox/stories/$story/index.tsx
index 426224b..b9d72fe 100644
--- a/packages/storylite/src/pages/sandbox/stories/$story/index.tsx
+++ b/packages/storylite/src/pages/sandbox/stories/$story/index.tsx
@@ -1,6 +1,6 @@
 import { useParams } from 'react-router-dom'
 
-import { Story } from '@/components/Story'
+import { CanvasIframeBody } from '@/components/canvas/CanvasIframeBody'
 
 import SandboxLayout from '../../../../layouts/SandboxLayout'
 
@@ -8,10 +8,10 @@ export default function StoryPage() {
   const { story } = useParams()
 
   if (!story) {
-    return <div>Error: story is empty</div>
+    return <div>Error: story route segment is empty</div>
   }
 
-  return <Story story={story} />
+  return <CanvasIframeBody story={story} />
 }
 
 export const Layout = SandboxLayout
diff --git a/packages/storylite/src/pages/stories/$story/$export_name.tsx b/packages/storylite/src/pages/stories/$story/$export_name.tsx
index f97dc5d..2224d99 100644
--- a/packages/storylite/src/pages/stories/$story/$export_name.tsx
+++ b/packages/storylite/src/pages/stories/$story/$export_name.tsx
@@ -1,13 +1,12 @@
-import React from 'react'
 import { useParams } from 'react-router-dom'
 
-import StoryFrame from '@/components/StoryFrame'
+import { CanvasIframe } from '@/components/canvas/CanvasIframe'
 import MainLayout from '@/layouts/MainLayout'
 
 export default function StoryPage() {
   const { story, export_name } = useParams()
 
-  return <StoryFrame story={story} exportName={export_name} />
+  return <CanvasIframe story={story} exportName={export_name} />
 }
 
 export const Layout = MainLayout
diff --git a/packages/storylite/src/types/config.ts b/packages/storylite/src/types/config.ts
index 7697032..4a6bdd4 100644
--- a/packages/storylite/src/types/config.ts
+++ b/packages/storylite/src/types/config.ts
@@ -12,6 +12,7 @@ export type SLAppComponentProps = {
   title: SLNode
   icon?: SLNode
   defaultStory: string
+  iframeProps?: Omit<Record<string, any>, 'src'>
   // stylesheets: string[]
   // addons: StoryAddonList
 }
diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json
index 9693e05..1f481ea 100644
--- a/packages/vite-plugin/package.json
+++ b/packages/vite-plugin/package.json
@@ -44,8 +44,8 @@
     "vite": "^4.4.9"
   },
   "devDependencies": {
-    "@r1stack/coding-style": "^0.4.1",
-    "@types/node": "^20.5.4",
+    "@r1stack/coding-style": "^0.4.3",
+    "@types/node": "^20.5.6",
     "publint": "^0.2.2",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2"
diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index e4addfe..d5c1727 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -48,7 +48,7 @@ const storylitePlugin = (userConfig?: StoryLitePluginConfig): Plugin => {
           
           const storyMap = createStoryMap(import.meta.glob('/${config.stories}', {eager: true}));
           
-          console.log('Stories: ', Array.from(storyMap.keys()));
+          // console.log('Stories: ', Array.from(storyMap.keys()));
           
           export default storyMap
         `
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e50b6ab..29d0379 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,8 @@ importers:
         specifier: ^17.7.0
         version: 17.7.0
       '@r1stack/coding-style':
-        specifier: ^0.4.1
-        version: 0.4.1(@swc/core@1.3.78)(@swc/jest@0.2.29)(eslint@8.47.0)(jest@29.6.4)(prettier@3.0.2)(typescript@5.2.2)
+        specifier: ^0.4.3
+        version: 0.4.3(@swc/core@1.3.78)(@swc/jest@0.2.29)(eslint@8.47.0)(jest@29.6.4)(prettier@3.0.2)(typescript@5.2.2)
       '@swc/core':
         specifier: ^1.3.78
         version: 1.3.78
@@ -33,8 +33,8 @@ importers:
         specifier: ^29.5.4
         version: 29.5.4
       '@types/node':
-        specifier: ^20.5.4
-        version: 20.5.4
+        specifier: ^20.5.6
+        version: 20.5.6
       changelogen:
         specifier: ^0.5.5
         version: 0.5.5
@@ -46,7 +46,7 @@ importers:
         version: 8.0.3
       jest:
         specifier: ^29.6.4
-        version: 29.6.4(@types/node@20.5.4)(ts-node@10.9.1)
+        version: 29.6.4(@types/node@20.5.6)(ts-node@10.9.1)
       jest-environment-jsdom:
         specifier: ^29.6.4
         version: 29.6.4
@@ -97,7 +97,7 @@ importers:
         version: 5.2.2
       vite:
         specifier: ^4.4.9
-        version: 4.4.9(@types/node@20.5.4)
+        version: 4.4.9(@types/node@20.5.6)
 
   packages/examples/solid: {}
 
@@ -108,18 +108,18 @@ importers:
   packages/storylite:
     dependencies:
       '@r1stack/core':
-        specifier: ^0.4.1
-        version: 0.4.1
+        specifier: ^0.4.3
+        version: 0.4.3
       lucide-react:
         specifier: ^0.268.0
         version: 0.268.0(react@18.2.0)
     devDependencies:
       '@r1stack/coding-style':
-        specifier: ^0.4.1
-        version: 0.4.1(@swc/core@1.3.78)(@swc/jest@0.2.29)(eslint@8.47.0)(jest@29.6.4)(prettier@3.0.2)(typescript@5.2.2)
+        specifier: ^0.4.3
+        version: 0.4.3(@swc/core@1.3.78)(@swc/jest@0.2.29)(eslint@8.47.0)(jest@29.6.4)(prettier@3.0.2)(typescript@5.2.2)
       '@types/node':
-        specifier: ^20.5.4
-        version: 20.5.4
+        specifier: ^20.5.6
+        version: 20.5.6
       '@types/react':
         specifier: ^18.2.21
         version: 18.2.21
@@ -146,20 +146,20 @@ importers:
         version: 5.2.2
       vite:
         specifier: ^4.4.9
-        version: 4.4.9(@types/node@20.5.4)
+        version: 4.4.9(@types/node@20.5.6)
 
   packages/vite-plugin:
     dependencies:
       vite:
         specifier: ^4.4.9
-        version: 4.4.9(@types/node@20.5.4)
+        version: 4.4.9(@types/node@20.5.6)
     devDependencies:
       '@r1stack/coding-style':
-        specifier: ^0.4.1
-        version: 0.4.1(@swc/core@1.3.78)(@swc/jest@0.2.29)(eslint@8.47.0)(jest@29.6.4)(prettier@3.0.2)(typescript@5.2.2)
+        specifier: ^0.4.3
+        version: 0.4.3(@swc/core@1.3.78)(@swc/jest@0.2.29)(eslint@8.47.0)(jest@29.6.4)(prettier@3.0.2)(typescript@5.2.2)
       '@types/node':
-        specifier: ^20.5.4
-        version: 20.5.4
+        specifier: ^20.5.6
+        version: 20.5.6
       publint:
         specifier: ^0.2.2
         version: 0.2.2
@@ -619,7 +619,7 @@ packages:
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
       resolve-from: 5.0.0
-      ts-node: 10.9.1(@swc/core@1.3.78)(@types/node@20.5.4)(typescript@5.2.2)
+      ts-node: 10.9.1(@swc/core@1.3.78)(@types/node@20.5.6)(typescript@5.2.2)
       typescript: 5.2.2
     transitivePeerDependencies:
       - '@swc/core'
@@ -974,7 +974,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       chalk: 4.1.2
       jest-message-util: 29.6.3
       jest-util: 29.6.3
@@ -995,14 +995,14 @@ packages:
       '@jest/test-result': 29.6.4
       '@jest/transform': 29.6.4
       '@jest/types': 29.6.3
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       ci-info: 3.8.0
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 29.6.3
-      jest-config: 29.6.4(@types/node@20.5.4)(ts-node@10.9.1)
+      jest-config: 29.6.4(@types/node@20.5.6)(ts-node@10.9.1)
       jest-haste-map: 29.6.4
       jest-message-util: 29.6.3
       jest-regex-util: 29.6.3
@@ -1037,7 +1037,7 @@ packages:
     dependencies:
       '@jest/fake-timers': 29.6.4
       '@jest/types': 29.6.3
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       jest-mock: 29.6.3
     dev: true
 
@@ -1064,7 +1064,7 @@ packages:
     dependencies:
       '@jest/types': 29.6.3
       '@sinonjs/fake-timers': 10.3.0
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       jest-message-util: 29.6.3
       jest-mock: 29.6.3
       jest-util: 29.6.3
@@ -1097,7 +1097,7 @@ packages:
       '@jest/transform': 29.6.4
       '@jest/types': 29.6.3
       '@jridgewell/trace-mapping': 0.3.19
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       chalk: 4.1.2
       collect-v8-coverage: 1.0.2
       exit: 0.1.2
@@ -1184,7 +1184,7 @@ packages:
     dependencies:
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-reports': 3.0.1
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       '@types/yargs': 16.0.5
       chalk: 4.1.2
     dev: true
@@ -1196,7 +1196,7 @@ packages:
       '@jest/schemas': 29.6.3
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-reports': 3.0.1
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       '@types/yargs': 17.0.24
       chalk: 4.1.2
     dev: true
@@ -1284,8 +1284,8 @@ packages:
       tslib: 2.6.2
     dev: true
 
-  /@r1stack/coding-style@0.4.1(@swc/core@1.3.78)(@swc/jest@0.2.29)(eslint@8.47.0)(jest@29.6.4)(prettier@3.0.2)(typescript@5.2.2):
-    resolution: {integrity: sha512-Bv2Mpryu9bWEvedxI0paLB+03l1UG6ACZBixF+L5z5L4pPGdR1Dk4CzerCn4AxIx5RjczBbo5OwQ7jA7iNH7Fg==}
+  /@r1stack/coding-style@0.4.3(@swc/core@1.3.78)(@swc/jest@0.2.29)(eslint@8.47.0)(jest@29.6.4)(prettier@3.0.2)(typescript@5.2.2):
+    resolution: {integrity: sha512-ZaPZcW+j3pbNHX86FB/A7el3uqPQlxVREeraLNTBX2wvmkZdPu0V7GzAnrjrXkeOih+lJVy2f4seF57WO0h2cQ==}
     peerDependencies:
       '@swc/core': ^1.3.74
       '@swc/jest': ^0.2.28
@@ -1329,7 +1329,7 @@ packages:
       eslint-plugin-testing-library: 6.0.1(eslint@8.47.0)(typescript@5.2.2)
       eslint-plugin-tsdoc: 0.2.17
       eslint-plugin-unicorn: 48.0.1(eslint@8.47.0)
-      jest: 29.6.4(@types/node@20.5.4)(ts-node@10.9.1)
+      jest: 29.6.4(@types/node@20.5.6)(ts-node@10.9.1)
       jest-environment-jsdom: 29.6.4
       prettier: 3.0.2
       prettier-plugin-packagejson: 2.4.5(prettier@3.0.2)
@@ -1345,8 +1345,8 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@r1stack/core@0.4.1:
-    resolution: {integrity: sha512-G0hv+tT8t3xKto145kSsKZs64/Du2O8Xgmkv/Ndyn//H58fDMqfdZ2FfQHkLWqSROgxxifhM8wzjvPjlwYfk4g==}
+  /@r1stack/core@0.4.3:
+    resolution: {integrity: sha512-iG68KbkXparvjL1JpF1HexasivijultE0K72fkMBiNkptIEP1t/odU7WWP2n4rshjDmMD4DTTk/+ydnghEYfYQ==}
     dependencies:
       zod: 3.22.2
     dev: false
@@ -1534,7 +1534,7 @@ packages:
       chalk: 3.0.0
       css.escape: 1.5.1
       dom-accessibility-api: 0.5.16
-      jest: 29.6.4(@types/node@20.5.4)(ts-node@10.9.1)
+      jest: 29.6.4(@types/node@20.5.6)(ts-node@10.9.1)
       lodash: 4.17.21
       redent: 3.0.0
     dev: true
@@ -1610,7 +1610,7 @@ packages:
   /@types/graceful-fs@4.1.6:
     resolution: {integrity: sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==}
     dependencies:
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
     dev: true
 
   /@types/istanbul-lib-coverage@2.0.4:
@@ -1639,7 +1639,7 @@ packages:
   /@types/jsdom@20.0.1:
     resolution: {integrity: sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==}
     dependencies:
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       '@types/tough-cookie': 4.0.2
       parse5: 7.1.2
     dev: true
@@ -1660,8 +1660,8 @@ packages:
     resolution: {integrity: sha512-bUBrPjEry2QUTsnuEjzjbS7voGWCc30W0qzgMf90GPeDGFRakvrz47ju+oqDAKCXLUCe39u57/ORMl/O/04/9g==}
     dev: true
 
-  /@types/node@20.5.4:
-    resolution: {integrity: sha512-Y9vbIAoM31djQZrPYjpTLo0XlaSwOIsrlfE3LpulZeRblttsLQRFRlBAppW0LOxyT3ALj2M5vU1ucQQayQH3jA==}
+  /@types/node@20.5.6:
+    resolution: {integrity: sha512-Gi5wRGPbbyOTX+4Y2iULQ27oUPrefaB0PxGQJnfyWN3kvEDGM3mIB5M/gQLmitZf7A9FmLeaqxD3L1CXpm3VKQ==}
 
   /@types/normalize-package-data@2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
@@ -1916,7 +1916,7 @@ packages:
       vite: ^4
     dependencies:
       '@swc/core': 1.3.78
-      vite: 4.4.9(@types/node@20.5.4)
+      vite: 4.4.9(@types/node@20.5.6)
     transitivePeerDependencies:
       - '@swc/helpers'
     dev: true
@@ -2634,7 +2634,7 @@ packages:
     dependencies:
       '@types/node': 20.4.7
       cosmiconfig: 8.2.0
-      ts-node: 10.9.1(@swc/core@1.3.78)(@types/node@20.5.4)(typescript@5.2.2)
+      ts-node: 10.9.1(@swc/core@1.3.78)(@types/node@20.5.6)(typescript@5.2.2)
       typescript: 5.2.2
     dev: true
 
@@ -3265,7 +3265,7 @@ packages:
       '@typescript-eslint/eslint-plugin': 6.4.1(@typescript-eslint/parser@6.4.1)(eslint@8.47.0)(typescript@5.2.2)
       '@typescript-eslint/utils': 5.62.0(eslint@8.47.0)(typescript@5.2.2)
       eslint: 8.47.0
-      jest: 29.6.4(@types/node@20.5.4)(ts-node@10.9.1)
+      jest: 29.6.4(@types/node@20.5.6)(ts-node@10.9.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -4468,7 +4468,7 @@ packages:
       '@jest/expect': 29.6.4
       '@jest/test-result': 29.6.4
       '@jest/types': 29.6.3
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       chalk: 4.1.2
       co: 4.6.0
       dedent: 1.5.1
@@ -4489,7 +4489,7 @@ packages:
       - supports-color
     dev: true
 
-  /jest-cli@29.6.4(@types/node@20.5.4)(ts-node@10.9.1):
+  /jest-cli@29.6.4(@types/node@20.5.6)(ts-node@10.9.1):
     resolution: {integrity: sha512-+uMCQ7oizMmh8ZwRfZzKIEszFY9ksjjEQnTEMTaL7fYiL3Kw4XhqT9bYh+A4DQKUb67hZn2KbtEnDuHvcgK4pQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -4506,7 +4506,7 @@ packages:
       exit: 0.1.2
       graceful-fs: 4.2.11
       import-local: 3.1.0
-      jest-config: 29.6.4(@types/node@20.5.4)(ts-node@10.9.1)
+      jest-config: 29.6.4(@types/node@20.5.6)(ts-node@10.9.1)
       jest-util: 29.6.3
       jest-validate: 29.6.3
       prompts: 2.4.2
@@ -4518,7 +4518,7 @@ packages:
       - ts-node
     dev: true
 
-  /jest-config@29.6.4(@types/node@20.5.4)(ts-node@10.9.1):
+  /jest-config@29.6.4(@types/node@20.5.6)(ts-node@10.9.1):
     resolution: {integrity: sha512-JWohr3i9m2cVpBumQFv2akMEnFEPVOh+9L2xIBJhJ0zOaci2ZXuKJj0tgMKQCBZAKA09H049IR4HVS/43Qb19A==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
@@ -4533,7 +4533,7 @@ packages:
       '@babel/core': 7.22.11
       '@jest/test-sequencer': 29.6.4
       '@jest/types': 29.6.3
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       babel-jest: 29.6.4(@babel/core@7.22.11)
       chalk: 4.1.2
       ci-info: 3.8.0
@@ -4553,7 +4553,7 @@ packages:
       pretty-format: 29.6.3
       slash: 3.0.0
       strip-json-comments: 3.1.1
-      ts-node: 10.9.1(@swc/core@1.3.78)(@types/node@20.5.4)(typescript@5.2.2)
+      ts-node: 10.9.1(@swc/core@1.3.78)(@types/node@20.5.6)(typescript@5.2.2)
     transitivePeerDependencies:
       - babel-plugin-macros
       - supports-color
@@ -4600,7 +4600,7 @@ packages:
       '@jest/fake-timers': 29.6.4
       '@jest/types': 29.6.3
       '@types/jsdom': 20.0.1
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       jest-mock: 29.6.3
       jest-util: 29.6.3
       jsdom: 20.0.3
@@ -4617,7 +4617,7 @@ packages:
       '@jest/environment': 29.6.4
       '@jest/fake-timers': 29.6.4
       '@jest/types': 29.6.3
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       jest-mock: 29.6.3
       jest-util: 29.6.3
     dev: true
@@ -4633,7 +4633,7 @@ packages:
     dependencies:
       '@jest/types': 29.6.3
       '@types/graceful-fs': 4.1.6
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       anymatch: 3.1.3
       fb-watchman: 2.0.2
       graceful-fs: 4.2.11
@@ -4684,7 +4684,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       jest-util: 29.6.3
     dev: true
 
@@ -4739,7 +4739,7 @@ packages:
       '@jest/test-result': 29.6.4
       '@jest/transform': 29.6.4
       '@jest/types': 29.6.3
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       chalk: 4.1.2
       emittery: 0.13.1
       graceful-fs: 4.2.11
@@ -4770,7 +4770,7 @@ packages:
       '@jest/test-result': 29.6.4
       '@jest/transform': 29.6.4
       '@jest/types': 29.6.3
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       chalk: 4.1.2
       cjs-module-lexer: 1.2.3
       collect-v8-coverage: 1.0.2
@@ -4822,7 +4822,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       chalk: 4.1.2
       ci-info: 3.8.0
       graceful-fs: 4.2.11
@@ -4847,7 +4847,7 @@ packages:
     dependencies:
       '@jest/test-result': 29.6.4
       '@jest/types': 29.6.3
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.13.1
@@ -4859,13 +4859,13 @@ packages:
     resolution: {integrity: sha512-6dpvFV4WjcWbDVGgHTWo/aupl8/LbBx2NSKfiwqf79xC/yeJjKHT1+StcKy/2KTmW16hE68ccKVOtXf+WZGz7Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       jest-util: 29.6.3
       merge-stream: 2.0.0
       supports-color: 8.1.1
     dev: true
 
-  /jest@29.6.4(@types/node@20.5.4)(ts-node@10.9.1):
+  /jest@29.6.4(@types/node@20.5.6)(ts-node@10.9.1):
     resolution: {integrity: sha512-tEFhVQFF/bzoYV1YuGyzLPZ6vlPrdfvDmmAxudA1dLEuiztqg2Rkx20vkKY32xiDROcD2KXlgZ7Cu8RPeEHRKw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -4878,7 +4878,7 @@ packages:
       '@jest/core': 29.6.4(ts-node@10.9.1)
       '@jest/types': 29.6.3
       import-local: 3.1.0
-      jest-cli: 29.6.4(@types/node@20.5.4)(ts-node@10.9.1)
+      jest-cli: 29.6.4(@types/node@20.5.6)(ts-node@10.9.1)
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -5367,7 +5367,7 @@ packages:
       acorn: 8.10.0
       pathe: 1.1.1
       pkg-types: 1.0.3
-      ufo: 1.2.0
+      ufo: 1.3.0
     dev: true
 
   /mri@1.2.0:
@@ -5557,7 +5557,7 @@ packages:
     dependencies:
       destr: 2.0.1
       node-fetch-native: 1.4.0
-      ufo: 1.2.0
+      ufo: 1.3.0
     dev: true
 
   /ohash@1.1.3:
@@ -5751,7 +5751,7 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.1.0
-      ts-node: 10.9.1(@swc/core@1.3.78)(@types/node@20.5.4)(typescript@5.2.2)
+      ts-node: 10.9.1(@swc/core@1.3.78)(@types/node@20.5.6)(typescript@5.2.2)
       yaml: 2.3.1
     dev: true
 
@@ -6624,7 +6624,7 @@ packages:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: true
 
-  /ts-node@10.9.1(@swc/core@1.3.78)(@types/node@20.5.4)(typescript@5.2.2):
+  /ts-node@10.9.1(@swc/core@1.3.78)(@types/node@20.5.6)(typescript@5.2.2):
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
     peerDependencies:
@@ -6644,7 +6644,7 @@ packages:
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       acorn: 8.10.0
       acorn-walk: 8.2.0
       arg: 4.1.3
@@ -6866,8 +6866,8 @@ packages:
     hasBin: true
     dev: true
 
-  /ufo@1.2.0:
-    resolution: {integrity: sha512-RsPyTbqORDNDxqAdQPQBpgqhWle1VcTSou/FraClYlHf6TZnQcGslpLcAphNR+sQW4q5lLWLbOsRlh9j24baQg==}
+  /ufo@1.3.0:
+    resolution: {integrity: sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==}
     dev: true
 
   /unbox-primitive@1.0.2:
@@ -6942,7 +6942,7 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vite@4.4.9(@types/node@20.5.4):
+  /vite@4.4.9(@types/node@20.5.6):
     resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -6970,7 +6970,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 20.5.4
+      '@types/node': 20.5.6
       esbuild: 0.18.20
       postcss: 8.4.28
       rollup: 3.28.1