refactor(ui): improve UX and redefine all classes and styles to make …

…the iframe more isolated
itsjavi · Aug 25, 2023 · 3b6303d · 3b6303d
1 parent 9867907
commit 3b6303d
Show file tree

Hide file tree

Showing 65 changed files with 669 additions and 1,082 deletions.
diff --git a/packages/examples/react/README.md b/packages/examples/react/README.md
@@ -6,7 +6,8 @@ Basic setup of StoryLite with React:
 
 - public/\*
 - stories/\*
-- app.tsx
+- storylite.tsx
+- src/styles/storylite-overrides.css
 - index.html
 - package.json
 - tsconfig.json

diff --git a/packages/examples/react/index.html b/packages/examples/react/index.html
@@ -4,13 +4,6 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script>
-      // Render blocking JS to fix theme flickering:
-      const colorScheme = window.localStorage.getItem('color-scheme')
-      if (colorScheme) {
-        document.documentElement.dataset.colorScheme = JSON.parse(colorScheme)
-      }
-    </script>
     <title>StoryLite - Design System (React)</title>
   </head>
   <body>

diff --git a/packages/examples/react/src/styles/components.css b/packages/examples/react/src/styles/components.css
@@ -0,0 +1,7 @@
+/*
+* Styles for the example components and stories:
+*/
+.story-1 {
+  color: green;
+  font-size: 28px;
+}
diff --git a/packages/examples/react/src/styles/storylite-overrides.css b/packages/examples/react/src/styles/storylite-overrides.css
@@ -0,0 +1,57 @@
+/*
+* Custom StoryLite iframe styles
+*/
+
+.storylite-iframe {
+  font-family: 'Courier New', Courier, monospace;
+  background: transparent;
+}
+[data-sl-darkmode='true']:where(.storylite-iframe--standalone) {
+  color: var(--storylite-font-color);
+  background-color: var(--storylite-bg-color);
+}
+
+/*
+* DARK-THEME
+*/
+[data-sl-darkmode='true']:where(.storylite-iframe) {
+  /* General */
+  --storylite-font-color: #dfdfd7;
+  --storylite-bg-color: #252529;
+
+  --storylite-border-color: #29292c;
+
+  /* Muted */
+  --storylite-font-color-muted: #999999;
+  --storylite-border-color-muted: #484848;
+
+  /* Panels */
+  --storylite-font-color-panel: #dfdfd7;
+  --storylite-bg-color-panel: #161618;
+
+  /* Toolbars */
+  --storylite-font-color-toolbar: #999999;
+  --storylite-bg-color-toolbar: #1e1e20;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-sl-darkmode='auto']:where(.storylite-iframe) {
+    /* General */
+    --storylite-font-color: #dfdfd7;
+    --storylite-bg-color: #252529;
+
+    --storylite-border-color: #29292c;
+
+    /* Muted */
+    --storylite-font-color-muted: #999999;
+    --storylite-border-color-muted: #484848;
+
+    /* Panels */
+    --storylite-font-color-panel: #dfdfd7;
+    --storylite-bg-color-panel: #161618;
+
+    /* Toolbars */
+    --storylite-font-color-toolbar: #999999;
+    --storylite-bg-color-toolbar: #1e1e20;
+  }
+}
diff --git a/packages/examples/react/stories/index.stories.tsx b/packages/examples/react/stories/index.stories.tsx
@@ -6,8 +6,6 @@ export default {
   priority: 100,
 } satisfies StoryMeta
 
-export const Main: StoryComponent = () => (
-  <div style={{ color: 'green', fontSize: '28px' }}>React Demo Index Page</div>
-)
+export const Main: StoryComponent = () => <div className="story-1">React Demo Index Page</div>
 
 // Main.storyTitle = 'Main Component'
diff --git a/packages/examples/react/storylite.tsx b/packages/examples/react/storylite.tsx
@@ -1,19 +1,21 @@
 import '@storylite/storylite/styles.css'
+import './src/styles/components.css'
+import './src/styles/storylite-overrides.css'
 
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-
-import { StoryLiteApp } from '@storylite/storylite'
+import { renderStoryLiteApp } from '@storylite/storylite'
 import stories from '@storylite/vite-plugin:stories'
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <StoryLiteApp
-      stories={stories}
-      config={{
-        title: ' ⚡️ StoryLite React',
-        defaultStory: 'index',
-      }}
-    />
-  </React.StrictMode>,
-)
+const rootElement = document.getElementById('root') as HTMLElement
+
+renderStoryLiteApp(rootElement, stories, {
+  title: ' ⚡️ StoryLite React',
+  defaultStory: 'index',
+  iframeProps: {
+    style: {
+      padding: '10px',
+    },
+  },
+  iframeOptions: {
+    useDefaultStyles: false,
+  },
+})
diff --git a/packages/storylite/src/app/context/StoriesDataContext.tsx b/packages/storylite/src/app/context/StoriesDataContext.tsx
@@ -158,9 +158,9 @@ export const StoryLiteStateProvider = ({
     setParams(newParams, persist)
   }
 
-  const windowMessageHandler = (message: CrossDocumentMessage) => {
+  const iframeWindowMessageHandler = (message: CrossDocumentMessage) => {
+    // here is where the iframe processes messages from the root
     if (message.type === CrossDocumentMessageType.UpdateParameters) {
-      console.log('consuming message on iframe:', message.payload)
       setParams(message.payload, false)
     }
   }
@@ -183,8 +183,7 @@ export const StoryLiteStateProvider = ({
 
   useEffect(() => {
     if (iframeRef?.contentWindow) {
-      console.log('tell iframe to update params')
-      // communicate changes in parameters to the iframe
+      // send a message to the iframe window, and tell it to update the parameters in its context
       sendWindowMessage(
         {
           type: CrossDocumentMessageType.UpdateParameters,
@@ -197,7 +196,7 @@ export const StoryLiteStateProvider = ({
   }, [iframeRef, iframeState, params])
 
   // If we receive a message from the root, it means we are in an iframe
-  registerWindowMessageListener(windowMessageHandler, CrossDocumentMessageSource.Root, window)
+  registerWindowMessageListener(iframeWindowMessageHandler, CrossDocumentMessageSource.Root, window)
 
   return (
     <StoryLiteStateContext.Provider

diff --git a/packages/storylite/src/app/messaging/windowMessaging.ts b/packages/storylite/src/app/messaging/windowMessaging.ts
@@ -27,9 +27,8 @@ export const registerWindowMessageListener = (
 
   const handleReceivedMessage = (event: MessageEvent) => {
     const eventSource = event.data?.source
-    // Verify that the message comes from the expected iframe
+    // Verify that the message comes from the expected emitter
     if (eventSource === scope) {
-      console.log('[app] Message received:', event.data)
       callback(event.data)
     }
   }

diff --git a/packages/storylite/src/components/Story.tsx b/packages/storylite/src/components/Story.tsx
@@ -1,10 +1,9 @@
 import React from 'react'
 import { useSearchParams } from 'react-router-dom'
+import { cn } from '@r1stack/core'
 
 import { useStoryLiteStories } from '@/app/context/StoriesDataContext'
-import { ElementIds, StoryComponent, StoryMeta, StoryModule } from '@/types'
-
-import Toolbar from './Toolbar'
+import { StoryComponent, StoryMeta, StoryModule } from '@/types'
 
 export function Story({ story, exportName }: { story: string; exportName?: string }): JSX.Element {
   const stories = useStoryLiteStories()
@@ -61,9 +60,9 @@ function createStorySandboxWrapper(
   const StoryWrapper = () => {
     const stories = components.map(([, Comp], i) => {
       return (
-        <section key={i} className={'Section'}>
+        <div key={i} className={'storylite-story-section'}>
           <Comp />
-        </section>
+        </div>
       )
     })
 
@@ -78,9 +77,6 @@ function createStorySandboxWrapper(
 }
 
 export function StorySandbox({
-  story,
-  exportName,
-  metadata,
   children,
 }: {
   story: string
@@ -90,15 +86,10 @@ export function StorySandbox({
 }) {
   const [searchParams] = useSearchParams()
   const isStandalone = searchParams.has('standalone')
-  const showToolbar = !isStandalone
-  const toolbarStyles = showToolbar ? {} : { display: 'none' }
 
   return (
-    <div className={`${'Story'} ${isStandalone ? 'StandaloneStory' : ``}`}>
-      <header className={'Header'} style={toolbarStyles}>
-        <Toolbar story={story} exportName={exportName} storyMeta={metadata} />
-      </header>
-      <div id={ElementIds.StoryCanvas} className={'Canvas'}>
+    <div className={cn('storylite-story', [isStandalone, 'storylite-story--standalone'])}>
+      <div className={'storylite-story-canvas'}>
         {children === undefined && <p>Loading story...</p>}
         {children !== undefined && children}
       </div>

diff --git a/packages/storylite/src/components/addons/DarkModeAddon.tsx b/packages/storylite/src/components/addons/DarkModeAddon.tsx
diff --git a/packages/storylite/src/components/addons/GridAddon.tsx b/packages/storylite/src/components/addons/GridAddon.tsx
diff --git a/packages/storylite/src/components/addons/MeasureAddon.tsx b/packages/storylite/src/components/addons/MeasureAddon.tsx