Handle default percentage and editor max height

seek-oss · Sep 11, 2024 · 8e50103 · 8e50103
1 parent 3469dc9
commit 8e50103
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -77,6 +77,7 @@
     "@types/react-dom": "^18.0.9",
     "@vanilla-extract/css": "^1.9.2",
     "@vanilla-extract/css-utils": "^0.1.3",
+    "@vanilla-extract/dynamic": "^2.1.2",
     "@vanilla-extract/sprinkles": "^1.5.1",
     "@vanilla-extract/webpack-plugin": "^2.3.6",
     "babel-loader": "^9.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/Playroom/Playroom.css.ts b/src/Playroom/Playroom.css.ts
@@ -1,7 +1,16 @@
-import { style, globalStyle } from '@vanilla-extract/css';
+import {
+  style,
+  globalStyle,
+  styleVariants,
+  createVar,
+} from '@vanilla-extract/css';
 import { sprinkles, colorPaletteVars } from './sprinkles.css';
 import { vars } from './vars.css';
 import { toolbarItemSize } from './ToolbarItem/ToolbarItem.css';
+import { toolbarItemCount, toolbarOpenSize } from './toolbarConstants';
+
+export const MIN_HEIGHT = toolbarItemSize * toolbarItemCount;
+export const MIN_WIDTH = toolbarOpenSize + toolbarItemSize + 80;
 
 globalStyle('html', {
   width: '100%',
@@ -28,6 +37,18 @@ export const previewContainer = sprinkles({
   inset: 0,
 });
 
+export const editorSizePercentage = createVar();
+
+export const previewContainerPosition = styleVariants({
+  right: {
+    right: `max(${editorSizePercentage}, ${MIN_WIDTH}px)`,
+  },
+  bottom: {
+    bottom: `max(${editorSizePercentage}, ${MIN_HEIGHT}px)`,
+  },
+  undocked: {},
+});
+
 export const resizeableContainer = style([
   sprinkles({
     bottom: 0,

diff --git a/src/Playroom/Playroom.tsx b/src/Playroom/Playroom.tsx
@@ -7,22 +7,21 @@ import Frames from './Frames/Frames';
 import { WindowPortal } from './WindowPortal';
 import type { Snippets } from '../../utils';
 import componentsToHints from '../utils/componentsToHints';
-import Toolbar, { toolbarItemCount } from './Toolbar/Toolbar';
+import Toolbar from './Toolbar/Toolbar';
 import ChevronIcon from './icons/ChevronIcon';
 import { StatusMessage } from './StatusMessage/StatusMessage';
 import {
   StoreContext,
   type EditorPosition,
 } from '../StoreContext/StoreContext';
 
-const MIN_HEIGHT = toolbarItemSize * toolbarItemCount;
-const MIN_WIDTH = toolbarOpenSize + toolbarItemSize + 80;
-
 import { CodeEditor } from './CodeEditor/CodeEditor';
 
 import * as styles from './Playroom.css';
-import { toolbarOpenSize } from './Toolbar/Toolbar.css';
-import { toolbarItemSize } from './ToolbarItem/ToolbarItem.css';
+import { Box } from './Box/Box';
+
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { editorSizePercentage } from './Playroom.css';
 
 const resizableConfig = (position: EditorPosition = 'bottom') => ({
   top: position === 'bottom',
@@ -158,8 +157,8 @@ export default ({ components, themes, widths, snippets }: PlayroomProps) => {
         })}
         defaultSize={sizeStyles}
         size={sizeStyles}
-        minWidth={isVerticalEditor ? MIN_WIDTH : undefined}
-        minHeight={MIN_HEIGHT}
+        minWidth={isVerticalEditor ? styles.MIN_WIDTH : undefined}
+        minHeight={styles.MIN_HEIGHT}
         onResize={(_event, _direction, { offsetWidth, offsetHeight }) => {
           updateEditorSize({ isVerticalEditor, offsetWidth, offsetHeight });
         }}
@@ -176,17 +175,20 @@ export default ({ components, themes, widths, snippets }: PlayroomProps) => {
           <title>{displayedTitle}</title>
         </Helmet>
       )}
-      <div
-        className={styles.previewContainer}
-        style={
+      <Box
+        id="preview"
+        className={[
+          styles.previewContainer,
           editorHidden
             ? undefined
-            : {
-                right: { right: editorWidthPercentage },
-                bottom: { bottom: editorHeightPercentage },
-                undocked: undefined,
-              }[editorPosition]
-        }
+            : styles.previewContainerPosition[editorPosition],
+        ]}
+        style={assignInlineVars({
+          [editorSizePercentage]:
+            editorPosition === 'right'
+              ? editorWidthPercentage
+              : editorHeightPercentage,
+        })}
       >
         <Frames
           code={previewRenderCode || code}
@@ -215,7 +217,7 @@ export default ({ components, themes, widths, snippets }: PlayroomProps) => {
             />
           </button>
         </div>
-      </div>
+      </Box>
       {editorContainer}
     </div>
   );

diff --git a/src/Playroom/Toolbar/Toolbar.css.ts b/src/Playroom/Toolbar/Toolbar.css.ts
@@ -2,8 +2,8 @@ import { calc } from '@vanilla-extract/css-utils';
 import { style } from '@vanilla-extract/css';
 import { sprinkles, colorPaletteVars } from '../sprinkles.css';
 import { toolbarItemSize } from '../ToolbarItem/ToolbarItem.css';
+import { toolbarOpenSize } from '../toolbarConstants';
 
-export const toolbarOpenSize = 320;
 const toolbarBorderThickness = '1px';
 
 export const isOpen = style({});

diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx
@@ -25,7 +25,6 @@ interface Props {
   snippets: PlayroomProps['snippets'];
 }
 
-export const toolbarItemCount = 5;
 const ANIMATION_TIMEOUT = 300;
 
 export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {

diff --git a/src/Playroom/toolbarConstants.ts b/src/Playroom/toolbarConstants.ts
@@ -0,0 +1,5 @@
+// Isolating these constants from React files so they can be used in Vanilla Extract styles
+
+export const toolbarItemCount = 5;
+export const toolbarItemSize = 60;
+export const toolbarOpenSize = 320;
diff --git a/src/StoreContext/StoreContext.tsx b/src/StoreContext/StoreContext.tsx
@@ -25,6 +25,7 @@ const store = localforage.createInstance({
   version: 1,
 });
 
+const defaultEditorSizePercentage = '40%';
 const defaultPosition = 'bottom';
 
 export type EditorPosition = 'bottom' | 'right' | 'undocked';
@@ -415,8 +416,8 @@ const initialState: State = {
   cursorPosition: { line: 0, ch: 0 },
   editorHidden: false,
   editorPosition: defaultPosition,
-  editorHeightPercentage: '40%',
-  editorWidthPercentage: '40%',
+  editorHeightPercentage: defaultEditorSizePercentage,
+  editorWidthPercentage: defaultEditorSizePercentage,
   ready: false,
   colorScheme: 'light',
 };
@@ -497,8 +498,10 @@ export const StoreProvider = ({
       ]) => {
         const code = codeFromQuery || storedCode || exampleCode;
         const editorPosition = storedPosition;
-        const editorHeightPercentage = storedHeight;
-        const editorWidthPercentage = storedWidth;
+        const editorHeightPercentage =
+          storedHeight || defaultEditorSizePercentage;
+        const editorWidthPercentage =
+          storedWidth || defaultEditorSizePercentage;
         const visibleWidths =
           widthsFromQuery ||
           storedVisibleWidths ||