Update preview.tsx

storybookjs · Jul 11, 2023 · ab7fd6d · ab7fd6d
1 parent 5d48c34
commit ab7fd6d
Showing 1 changed file with 77 additions and 55 deletions.
diff --git a/code/ui/.storybook/preview.tsx b/code/ui/.storybook/preview.tsx
@@ -15,44 +15,71 @@ import { Symbols } from '@storybook/components';
 import type { PreviewWeb } from '@storybook/preview-api';
 import type { ReactRenderer } from '@storybook/react';
 import type { Channel } from '@storybook/channels';
+
 import { DocsContext } from '@storybook/blocks';
+
 import { DocsPageWrapper } from '../blocks/src/components';
 
 const { document } = global;
 
-const ThemeContainer = styled.div({
-  display: 'flex',
-});
-
-const ThemeBlock = styled.div(({ theme }) => ({
-  flex: 1,
-  padding: '1rem',
-  background: theme.background.content,
-  color: theme.color.defaultText,
-}));
+const ThemeBlock = styled.div<{ side: 'left' | 'right' }>(
+  {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: '50vw',
+    width: '50vw',
+    height: '100vh',
+    bottom: 0,
+    overflow: 'auto',
+    padding: 10,
+  },
+  ({ theme }) => ({
+    background: theme.background.content,
+    color: theme.color.defaultText,
+  }),
+  ({ side }) =>
+    side === 'left'
+      ? {
+          left: 0,
+          right: '50vw',
+        }
+      : {
+          right: 0,
+          left: '50vw',
+        }
+);
 
-const ThemeStack = styled.div(({ theme }) => ({
-  flex: 1,
-  padding: '1rem',
-  background: theme.background.content,
-  color: theme.color.defaultText,
-}));
+const ThemeStack = styled.div(
+  {
+    position: 'relative',
+    minHeight: 'calc(50vh - 15px)',
+  },
+  ({ theme }) => ({
+    background: theme.background.content,
+    color: theme.color.defaultText,
+  })
+);
 
-const PlayFnNotice = styled.div(({ theme }) => ({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%',
-  borderBottom: '1px solid #ccc',
-  padding: '3px 8px',
-  fontSize: '10px',
-  fontWeight: 'bold',
-  '> *': {
-    display: 'block',
+const PlayFnNotice = styled.div(
+  {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    borderBottom: '1px solid #ccc',
+    padding: '3px 8px',
+    fontSize: '10px',
+    fontWeight: 'bold',
+    '> *': {
+      display: 'block',
+    },
   },
-  background: '#fffbd9',
-  color: theme.color.defaultText,
-}));
+  ({ theme }) => ({
+    background: '#fffbd9',
+    color: theme.color.defaultText,
+  })
+);
 
 const ThemedSetRoot = () => {
   const theme = useTheme();
@@ -150,21 +177,21 @@ export const decorators = [
     switch (theme) {
       case 'side-by-side': {
         return (
-          <ThemeContainer>
+          <Fragment>
             <ThemeProvider theme={convert(themes.light)}>
               <Global styles={createReset} />
             </ThemeProvider>
             <ThemeProvider theme={convert(themes.light)}>
-              <ThemeBlock data-side="left">
+              <ThemeBlock side="left" data-side="left">
                 <StoryFn />
               </ThemeBlock>
             </ThemeProvider>
             <ThemeProvider theme={convert(themes.dark)}>
-              <ThemeBlock data-side="right">
+              <ThemeBlock side="right" data-side="right">
                 <StoryFn />
               </ThemeBlock>
             </ThemeProvider>
-          </ThemeContainer>
+          </Fragment>
         );
       }
       case 'stacked': {
@@ -189,26 +216,22 @@ export const decorators = [
       case 'default':
       default: {
         return (
-          <ThemeContainer>
-            <ThemeProvider theme={convert(themes[theme])}>
-              <Global styles={createReset} />
-              <ThemedSetRoot />
-              {!parameters.theme && isChromatic() && playFunction && (
-                <>
-                  <PlayFnNotice>
-                    <span>
-                      Detected play function in Chromatic. Rendering only light theme to avoid
-                      multiple play functions in the same story.
-                    </span>
-                  </PlayFnNotice>
-                  <div style={{ marginBottom: 20 }} />
-                </>
-              )}
-              <ThemeBlock>
-                <StoryFn />
-              </ThemeBlock>
-            </ThemeProvider>
-          </ThemeContainer>
+          <ThemeProvider theme={convert(themes[theme])}>
+            <Global styles={createReset} />
+            <ThemedSetRoot />
+            {!parameters.theme && isChromatic() && playFunction && (
+              <>
+                <PlayFnNotice>
+                  <span>
+                    Detected play function in Chromatic. Rendering only light theme to avoid
+                    multiple play functions in the same story.
+                  </span>
+                </PlayFnNotice>
+                <div style={{ marginBottom: 20 }} />
+              </>
+            )}
+            <StoryFn />
+          </ThemeProvider>
         );
       }
     }
@@ -283,7 +306,6 @@ export const parameters = {
       'slategray',
     ],
   },
-  layout: 'fullscreen',
 };
 
 export const globalTypes = {