refactor: reorganize code files structure

commitlint.config.js

@@ -29,7 +29,7 @@ module.exports = {
         'test',
       ],
     ],
-    'scope-empty': [2, 'never'],
+    // 'scope-empty': [2, 'never'],
     'scope-enum': [
       2,
       'always',

packages/storylite/package.json

@@ -30,7 +30,9 @@
   },
   "dependencies": {
     "@r1stack/core": "^0.4.4",
-    "lucide-react": "^0.272.0"
+    "immer": "^10.0.2",
+    "lucide-react": "^0.272.0",
+    "zustand": "^4.4.1"
   },
   "devDependencies": {
     "@r1stack/coding-style": "^0.4.4",

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

@@ -8,21 +8,25 @@ import {
   StoryMeta,
   StoryModulesMap,
 } from '../..'
-import { defaultConfig } from '../defaultConfig'
 import {
   getDefaultToolbarAddons,
   getToolbarAddonsAsParameters,
   resolveToolbarAddons,
-} from '../getToolbarAddons'
+} from '../../components/toolbar/getToolbarAddons'
 import {
   CrossDocumentMessage,
   CrossDocumentMessageSource,
   CrossDocumentMessageType,
   registerWindowMessageListener,
   sendWindowMessage,
-} from '../messaging'
-import { useParams, useSearchParamsMap } from '../router/router.state'
-import { getLocalStorageItem, setLocalStorageItem } from './kvStorage'
+} from '../../services/messenger'
+import { useParams, useSearchParamsMap } from '../../services/router/router.state'
+import { getLocalStorageItem, setLocalStorageItem } from '../../services/storage/localStorage'
+
+export const defaultConfig: SLAppComponentProps = {
+  title: <> ⚡️ StoryLite</>,
+  defaultStory: 'index',
+}
 
 export type StoryLiteStateContextType = {
   config?: SLAppComponentProps

packages/storylite/src/app/index.tsx

@@ -1,9 +1,9 @@
 import { useEffect } from 'react'
 
+import { createStoryLiteRouter } from '../services/router/router.factory'
+import { RouterProvider } from '../services/router/router.state'
 import { SLAppComponentProps, StoryModulesMap } from '../types'
 import { StoryLiteStateProvider } from './context/StoriesDataContext'
-import { createStoryLiteRouter } from './router/router.factory'
-import { RouterProvider } from './router/router.state'
 
 // const router = createStoryLiteRouter()
 const router = createStoryLiteRouter()

packages/storylite/src/components/Story.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { cn } from '@r1stack/core'
 
 import { useStoryLiteStories } from '@/app/context/StoriesDataContext'
-import { useSearchParamsMap } from '@/app/router/router.state'
+import { useSearchParamsMap } from '@/services/router/router.state'
 import { StoryComponent, StoryMeta, StoryModule } from '@/types'
 
 export function Story({ story, exportName }: { story: string; exportName?: string }): JSX.Element {

packages/storylite/src/components/canvas/CanvasIframe.tsx

@@ -2,7 +2,7 @@ import { HTMLProps } from 'react'
 import { cn } from '@r1stack/core'
 
 import { useStoryLiteConfig, useStoryLiteIframe } from '@/app/context/StoriesDataContext'
-import { getStoryUrl } from '@/app/router/router.utils'
+import { getStoryUrl } from '@/services/router/router.utils'
 
 const allowList = [
   'autoplay',

packages/storylite/src/components/canvas/CanvasIframeBody.tsx

@@ -1,7 +1,7 @@
 import { HTMLProps } from 'react'
 import { cn } from '@r1stack/core'
 
-import { useSearchParamsMap } from '@/app/router/router.state'
+import { useSearchParamsMap } from '@/services/router/router.state'
 
 import { Story } from '../Story'
 

packages/storylite/src/components/layouts/IframeLayout.tsx

@@ -1,8 +1,8 @@
 import { cn } from '@r1stack/core'
 
 import { useStoryLiteConfig, useStoryLiteParameters } from '@/app/context/StoriesDataContext'
-import { useDetectTheme } from '@/app/hooks/useDetectTheme'
 import { parametersToDataProps } from '@/app/parameters/parametersToDataProps'
+import { useDetectTheme } from '@/hooks/useDetectTheme'
 
 export default function CanvasIframeLayout({ children, ...props }: any) {
   const { standalone } = props

packages/storylite/src/components/layouts/TopFrameLayout.tsx

@@ -1,6 +1,6 @@
 import { useStoryLiteParameters } from '@/app/context/StoriesDataContext'
-import { useDetectTheme } from '@/app/hooks/useDetectTheme'
 import { parametersToDataProps } from '@/app/parameters/parametersToDataProps'
+import { useDetectTheme } from '@/hooks/useDetectTheme'
 
 import { Sidebar } from '../sidebar/Sidebar'
 import { SidebarTitle } from '../sidebar/SidebarTitle'

packages/storylite/src/components/sidebar/Sidebar.tsx

@@ -3,9 +3,9 @@ import React, { useState } from 'react'
 import { BookmarkIcon, MinusSquareIcon, PlusSquareIcon } from 'lucide-react'
 
 import { useStoryLiteStories } from '@/app/context/StoriesDataContext'
-import { Link } from '@/app/router'
-import { useParams } from '@/app/router/router.state'
-import { getStoryUrl } from '@/app/router/router.utils'
+import { Link } from '@/services/router'
+import { useParams } from '@/services/router/router.state'
+import { getStoryUrl } from '@/services/router/router.utils'
 import { StoryMeta, StoryModule, StoryModulesMapValue } from '@/types'
 
 type SidebarProps = {

packages/storylite/src/components/sidebar/SidebarTitle.tsx

@@ -1,5 +1,5 @@
 import { useStoryLiteConfig } from '@/app/context/StoriesDataContext'
-import { Link } from '@/app/router/router.component'
+import { Link } from '@/services/router/router.component'
 
 export function SidebarTitle() {
   const config = useStoryLiteConfig()

packages/storylite/src/app/getToolbarAddons.tsx → packages/storylite/src/components/toolbar/getToolbarAddons.tsx

@@ -19,9 +19,9 @@ import {
   SLCoreAddon,
   SLParameters,
   SLUserDefinedAddons,
-} from '..'
-import { getStoryUrl } from './router/router.utils'
-import { isNotEmpty, isTruthy } from './utils'
+} from '../..'
+import { getStoryUrl } from '../../services/router/router.utils'
+import { isNotEmpty, isTruthy } from '../../utility'
 
 export function getToolbarAddonsAsParameters(addons: SLAddonsMap): SLParameters {
   const parameters: SLParameters = {}

packages/storylite/src/app/hooks/useDetectTheme.ts → packages/storylite/src/hooks/useDetectTheme.ts

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
 
 import { SLColorScheme } from '@/types'
 
-import { useStoryLiteConfig, useStoryLiteParameters } from '../context/StoriesDataContext'
+import { useStoryLiteConfig, useStoryLiteParameters } from '../app/context/StoriesDataContext'
 
 export function useDetectTheme(): string {
   const userConfig = useStoryLiteConfig()

packages/storylite/src/index.ts

@@ -1,5 +1,5 @@
 export * from './app'
 export * from './app/context/StoriesDataContext'
 export * from './app/renderStoryLiteApp'
-export * from './app/router'
+export * from './services/router'
 export * from './types'

packages/storylite/src/services/messenger/index.ts

@@ -0,0 +1,2 @@
+export * from './windowMessaging'
+export * from './windowMessaging.types'

packages/storylite/src/app/messaging/windowMessaging.ts → packages/storylite/src/services/messenger/windowMessaging.ts

@@ -1,4 +1,8 @@
-import { CrossDocumentMessage, CrossDocumentMessageSource, WindowMessageOrigin } from './types'
+import {
+  CrossDocumentMessage,
+  CrossDocumentMessageSource,
+  WindowMessageOrigin,
+} from './windowMessaging.types'
 
 export const sendWindowMessageToRoot = (message: CrossDocumentMessage) => {
   sendWindowMessage(message, CrossDocumentMessageSource.Iframe, window.parent)

packages/storylite/src/app/router/router.factory.tsx → packages/storylite/src/services/router/router.factory.tsx

@@ -1,6 +1,6 @@
+// import all pages manually (we are not in the Vite context here; cannot use import.meta.glob)
 import TopFrameLayout from '../../components/layouts/TopFrameLayout'
 import * as Error404 from '../../pages/404'
-// import all pages manually (we are not in the Vite context here; cannot use import.meta.glob)
 import * as IndexPage from '../../pages/index'
 import * as SandboxDashboardPage from '../../pages/preview/dashboard'
 import * as SandboxStoryIndex from '../../pages/preview/stories/[story]'