refactor(ui): replace react-router-dom with a small custom Router imp…

…lementation

packages/examples/react/storylite.tsx

@@ -16,8 +16,9 @@ renderStoryLiteApp(rootElement, stories, {
     },
   },
   iframeOptions: {
-    useDefaultStyles: false,
+    useDefaultStyles: true,
   },
+  children: <div>Extra children are rendered here</div>,
   addons: [
     // ['id-of-addon-to-exclude', false],
     [

packages/storylite/package.json

@@ -40,7 +40,6 @@
     "publint": "^0.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.15.0",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2",
     "vite": "^4.4.9"
@@ -51,7 +50,6 @@
     "@types/react-dom": "^18.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.2",
     "typescript": "^5.1.6"
   },
   "peerDependenciesMeta": {
@@ -61,9 +59,6 @@
     "react-dom": {
       "optional": false
     },
-    "react-router-dom": {
-      "optional": false
-    },
     "typescript": {
       "optional": false
     }

packages/storylite/src/app/context/StoriesDataContext.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import { useParams, useSearchParams } from 'react-router-dom'
 
 import {
   SLAddonsMap,
@@ -22,6 +21,7 @@ import {
   registerWindowMessageListener,
   sendWindowMessage,
 } from '../messaging'
+import { useParams, useSearchParamsMap } from '../router/router.state'
 import { getLocalStorageItem, setLocalStorageItem } from './kvStorage'
 
 export type StoryLiteStateContextType = {
@@ -65,7 +65,7 @@ export const useStoryLiteState = (): Required<StoryLiteStateContextType> => {
   const { config, stories, ...rest } = useStoryLiteStateContext()
   const { story, export_name } = useParams()
   const storyMeta = story ? stories.get(story)?.meta : {}
-  const [searchParams] = useSearchParams()
+  const searchParams = useSearchParamsMap()
   const isStandalone = searchParams.has('standalone')
 
   if (!config) {

packages/storylite/src/app/getToolbarAddons.tsx

@@ -19,7 +19,7 @@ import {
   SLParameters,
   SLUserDefinedAddons,
 } from '..'
-import { getStoryUrl } from './navigation/urlUtils'
+import { getStoryUrl } from './router/router.utils'
 import { isNotEmpty, isTruthy } from './utils'
 
 export function getToolbarAddonsAsParameters(addons: SLAddonsMap): SLParameters {
@@ -29,7 +29,7 @@ export function getToolbarAddonsAsParameters(addons: SLAddonsMap): SLParameters
     .filter(([, value]) => value.stateful)
     .forEach(([key, value]) => {
       parameters[key] = {
-        value: value.defaultValue,
+        value: typeof value.defaultValue === 'function' ? value.defaultValue() : value.defaultValue,
       }
     })
 
@@ -46,6 +46,7 @@ function getDefaultLeftToolbarAddons(): AddonSetup[] {
       defaultContent: <GridIcon />,
       stateful: true,
       persistent: true,
+      defaultValue: false,
       onClick: (_, [value, setValue]) => {
         setValue(!value)
       },
@@ -60,18 +61,21 @@ function getDefaultLeftToolbarAddons(): AddonSetup[] {
       defaultContent: <MonitorSmartphoneIcon />,
       stateful: true,
       persistent: true,
+      defaultValue: false,
       isVisible: ctx => isNotEmpty(ctx.iframeRef),
       onClick: (ctx, [value, setValue]) => {
         if (!ctx.iframeRef) {
           return
         }
+        const mobileWidth = '375px' // like an iPhone 12 Mini
+
         if (!value) {
-          ctx.iframeRef.style.width = '320px'
+          ctx.iframeRef.style.width = mobileWidth
           const div = document.createElement('div')
           div.className = 'sl-responsive-info'
-          div.innerText = '320px'
+          div.innerText = mobileWidth
           ctx.iframeRef.parentElement?.appendChild(div)
-          setValue('320px')
+          setValue(mobileWidth)
 
           return
         }
@@ -98,6 +102,7 @@ function getDefaultLeftToolbarAddons(): AddonSetup[] {
       defaultContent: <BoxSelectIcon />,
       stateful: true,
       persistent: true,
+      defaultValue: false,
       onClick: (_, [value, setValue]) => {
         setValue(!value)
       },
@@ -120,6 +125,7 @@ function getDefaultRightToolbarAddons(): AddonSetup[] {
       placement,
       stateful: true,
       persistent: true,
+      defaultValue: false,
       onClick: (_, [value, setValue]) => {
         setValue(!value)
       },
@@ -162,6 +168,27 @@ function getDefaultRightToolbarAddons(): AddonSetup[] {
       placement,
       stateful: true,
       persistent: true,
+      defaultValue: SLColorScheme.Auto,
+      onRender: (ctx, [value, , setValue]) => {
+        if (value !== SLColorScheme.Auto) {
+          return
+        }
+
+        const updateColorScheme = (e: MediaQueryList | MediaQueryListEvent) => {
+          setValue(e.matches ? SLColorScheme.Dark : SLColorScheme.Light)
+        }
+
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+        if (mediaQuery.matches) {
+          updateColorScheme(mediaQuery)
+        }
+
+        mediaQuery.addEventListener('change', updateColorScheme)
+
+        return () => {
+          mediaQuery.removeEventListener('change', updateColorScheme)
+        }
+      },
       onClick: (_, [value, setValue]) => {
         if (value === false || value === SLColorScheme.Light) {
           setValue(SLColorScheme.Dark)

packages/storylite/src/app/index.tsx

@@ -1,22 +1,31 @@
-import { RouterProvider } from 'react-router-dom'
+import { useEffect } from 'react'
 
 import { SLAppComponentProps, StoryModulesMap } from '../types'
 import { StoryLiteStateProvider } from './context/StoriesDataContext'
-import { createStoryLiteRouter } from './createStoryLiteRouter'
+import { createStoryLiteRouter } from './router/router.factory'
+import { RouterProvider } from './router/router.state'
 
+// const router = createStoryLiteRouter()
 const router = createStoryLiteRouter()
+// router.setFallback(() => <div>This is an error!</div>)
+router.add('/test', () => <div>testing...</div>)
 
 export type StoryLiteAppProps = {
   config?: Partial<SLAppComponentProps>
   stories: StoryModulesMap
+  children?: React.ReactNode
 }
 
 export const StoryLiteApp = (props: StoryLiteAppProps) => {
-  const { config, stories } = props
+  const { config, stories, children } = props
+
+  useEffect(() => {
+    router.refresh(window.location.hash)
+  }, [])
 
   return (
     <StoryLiteStateProvider config={config} stories={stories}>
-      <RouterProvider router={router} />
+      <RouterProvider router={router}>{children}</RouterProvider>
     </StoryLiteStateProvider>
   )
 }

packages/storylite/src/app/renderStoryLiteApp.tsx

@@ -12,7 +12,9 @@ export function renderStoryLiteApp(
 ) {
   ReactDOM.createRoot(root).render(
     <React.StrictMode>
-      <StoryLiteApp stories={stories} config={config} />
+      <StoryLiteApp stories={stories} config={config}>
+        {config?.children}
+      </StoryLiteApp>
     </React.StrictMode>,
   )
 }

packages/storylite/src/app/router/index.ts

@@ -0,0 +1,5 @@
+export * from './router.class'
+export * from './router.component'
+export * from './router.factory'
+export * from './router.state'
+export * from './router.types'