playroom 1.0.2 → 1.0.3-react-18-ref-fix-20251211235722

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # playroom
 
+## 1.0.3-react-18-ref-fix-20251211235722
+
+### Patch Changes
+
+- [#461](https://github.com/seek-oss/playroom/pull/461) [`67c2517`](https://github.com/seek-oss/playroom/commit/67c25170b7673844642df04cb496b13dcbba76c6) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Design polish, refinements and fixes to internal system components.
+
+- [`49461ea`](https://github.com/seek-oss/playroom/commit/49461ea8763d5d56c73158598b96f252bd53227d) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Ensure `ref` and `inert` usage is React 18 compatible
+
+- [#461](https://github.com/seek-oss/playroom/pull/461) [`67c2517`](https://github.com/seek-oss/playroom/commit/67c25170b7673844642df04cb496b13dcbba76c6) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Introduce scroll afforance for frames area
+
+  Add subtle gradient to edges of frames container to indicate scrollability when the number of frames exceeds the window width
+
+- [#461](https://github.com/seek-oss/playroom/pull/461) [`67c2517`](https://github.com/seek-oss/playroom/commit/67c25170b7673844642df04cb496b13dcbba76c6) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Allow selection of frame error
+
+  Enables a user to select and copy the text from a frame error message.
+
+- [#462](https://github.com/seek-oss/playroom/pull/462) [`65f7793`](https://github.com/seek-oss/playroom/commit/65f779344e6cc38fcfc64a2fa56f304476a75dda) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Only hide share actions from header without code
+
+  The header actions in the top right are now available on page load.
+  This enables the selection of frames and/or themes before any code is added to the editor.
+
+  The share and preview actions are still hidden and revealed when code is entered into the editor.
+
 ## 1.0.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "1.0.2",
+  "version": "1.0.3-react-18-ref-fix-20251211235722",
   "description": "Design with code, powered by your own component library",
   "bin": {
     "playroom": "bin/cli.cjs"

package/src/components/Button/Button.css.ts

@@ -88,7 +88,7 @@ export const height = {
       height: sizeVar,
     },
   ]),
-  content: sprinkles({ paddingY: 'small' }),
+  content: sprinkles({ paddingY: 'medium' }),
 };
 
 export const tone = {

package/src/components/ButtonIcon/ButtonIcon.css.ts

@@ -31,8 +31,8 @@ export const button = style([
   {
     background: 'transparent',
     outline: 'none',
-    height: sizeVar,
-    width: sizeVar,
+    height: `${sizeVar} !important`,
+    width: `${sizeVar} !important`,
   },
 ]);
 
@@ -50,6 +50,7 @@ export const content = style([
     transition: 'fast',
     height: 'full',
     width: 'full',
+    pointerEvents: 'none',
   }),
   {
     padding: paddingVar,
@@ -65,6 +66,11 @@ export const content = style([
       [`${button}:focus-visible &`]: {
         outline: `2px solid ${colorPaletteVars.outline.focus}`,
       },
+      [`${button}[aria-disabled="true"] &`]: {
+        vars: {
+          [foreground]: colorPaletteVars.foreground.secondary,
+        },
+      },
     },
   },
 ]);
@@ -101,7 +107,10 @@ export const variant = styleVariants({
       outline: `1px solid ${colorPaletteVars.border.standard}`,
       outlineOffset: -1,
       selectors: {
-        [comma('&:hover', '[data-popup-open] > &')]: {
+        [comma(
+          `${button}:not([aria-disabled="true"]):hover > &`,
+          `${button}:not([aria-disabled="true"])[data-popup-open] > &`
+        )]: {
           backgroundColor: colorPaletteVars.background.selection,
         },
       },
@@ -114,7 +123,10 @@ export const variant = styleVariants({
       },
       backgroundColor: colorPaletteVars.background.secondaryAccent,
       selectors: {
-        [comma('&:hover', '[data-popup-open] > &')]: {
+        [comma(
+          `${button}:not([aria-disabled="true"]):hover > &`,
+          `${button}:not([aria-disabled="true"])[data-popup-open] > &`
+        )]: {
           backgroundColor: colorPaletteVars.background.secondaryAccentLight,
         },
       },
@@ -123,7 +135,10 @@ export const variant = styleVariants({
   transparent: [
     {
       selectors: {
-        [comma('&:hover', '[data-popup-open] > &')]: {
+        [comma(
+          `${button}:not([aria-disabled="true"]):hover > &`,
+          `${button}:not([aria-disabled="true"])[data-popup-open] > &`
+        )]: {
           backgroundColor: colorPaletteVars.background.selection,
         },
       },

package/src/components/ButtonIcon/ButtonIcon.tsx

@@ -13,6 +13,7 @@ type ButtonIconBaseProps = {
   tone?: keyof typeof styles.tone;
   variant?: keyof typeof styles.variant;
   bleed?: boolean;
+  disabledReason?: string;
 };
 export type ButtonIconProps = TooltipTrigger & ButtonIconBaseProps;
 export const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(
@@ -24,16 +25,21 @@ export const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(
       tone = 'neutral',
       variant = 'standard',
       bleed,
+      disabled,
+      disabledReason,
+      type = 'button',
       ...restProps
     },
     ref
   ) => (
     <Tooltip
-      label={label}
+      label={disabled && disabledReason ? disabledReason : label}
       trigger={
         <button
           {...restProps}
+          type={type}
           ref={ref}
+          aria-disabled={disabled}
           aria-label={label}
           className={clsx({
             [styles.button]: true,

package/src/components/EditorActions/EditorActions.tsx

@@ -4,7 +4,12 @@ import {
   Ellipsis,
   type LucideIcon,
 } from 'lucide-react';
-import { useContext, useRef, type ButtonHTMLAttributes } from 'react';
+import {
+  forwardRef,
+  useContext,
+  useRef,
+  type ButtonHTMLAttributes,
+} from 'react';
 
 import { useEditor } from '../../contexts/EditorContext';
 import { StoreContext } from '../../contexts/StoreContext';
@@ -38,7 +43,10 @@ interface EditorActionButtonProps
   hideTooltip?: boolean;
 }
 
-const EditorActionButton = (props: EditorActionButtonProps) => {
+const EditorActionButton = forwardRef<
+  HTMLButtonElement,
+  EditorActionButtonProps
+>((props, ref) => {
   const {
     onClick,
     name,
@@ -77,6 +85,7 @@ const EditorActionButton = (props: EditorActionButtonProps) => {
       trigger={
         <button
           {...restProps}
+          ref={ref}
           onClick={handleClick}
           aria-disabled={disabled}
           className={styles.button}
@@ -88,7 +97,7 @@ const EditorActionButton = (props: EditorActionButtonProps) => {
       }
     />
   );
-};
+});
 
 const menuSideOffset = 2;
 const overflowCommands = editorCommandList.filter(

package/src/components/Frame/FrameError.css.ts

@@ -26,6 +26,7 @@ export const message = style([
     boxShadow: `0 2px 10px -2px ${light.foreground.critical}`,
     wordBreak: 'break-word',
     whiteSpace: 'pre-line',
+    userSelect: 'all',
     selectors: {
       [`&:not(${show})`]: {
         transform: `translateY(${calc(gutter).negate()})`,

package/src/components/Frames/Frames.css.ts

@@ -3,9 +3,10 @@ import { createVar, style } from '@vanilla-extract/css';
 import { comma } from '../../css/delimiters';
 
 import { colorPaletteVars, sprinkles } from '../../css/sprinkles.css';
+import { vars } from '../../css/vars.css';
 
 const transitionTiming = '150ms ease';
-
+const horizontalPadding = 'xlarge';
 export const root = style([
   sprinkles({
     height: 'full',
@@ -14,9 +15,8 @@ export const root = style([
     display: 'flex',
     gap: 'xxlarge',
     paddingY: 'xxlarge',
-    paddingX: 'xlarge',
+    paddingX: horizontalPadding,
     textAlign: 'center',
-    overflow: 'auto',
     userSelect: 'none',
   }),
   {
@@ -39,6 +39,12 @@ export const frameContainer = style([
   {
     flexShrink: 0,
     width: frameWidth,
+    selectors: {
+      // Workaround for scrolling flex container not accounting for padding
+      [`&:last-child`]: {
+        paddingRight: vars.space[horizontalPadding],
+      },
+    },
   },
 ]);
 

package/src/components/Frames/Frames.tsx

@@ -24,6 +24,7 @@ import {
   // screenshotMessageSender,
 } from '../Frame/frameMessenger';
 // import { Menu, MenuItem } from '../Menu/Menu';
+import { ScrollContainer } from '../ScrollContainer/ScrollContainer';
 import { Strong } from '../Strong/Strong';
 import { Text } from '../Text/Text';
 import { SharedTooltipContext } from '../Tooltip/Tooltip';
@@ -197,16 +198,22 @@ export default function Frames({ code }: FramesProps) {
     renderCode.current = compileJsx(code);
   } catch {}
   return (
-    <div ref={scrollingPanelRef} className={styles.root}>
-      {frames.map((frame) => (
-        <Frame
-          key={`${frame.theme}_${frame.width}`}
-          frame={frame}
-          code={renderCode.current}
-          title={title}
-          scrollingPanelRef={scrollingPanelRef}
-        />
-      ))}
-    </div>
+    <ScrollContainer
+      ref={scrollingPanelRef}
+      direction="horizontal"
+      fadeSize="small"
+    >
+      <div className={styles.root}>
+        {frames.map((frame) => (
+          <Frame
+            key={`${frame.theme}_${frame.width}`}
+            frame={frame}
+            code={renderCode.current}
+            title={title}
+            scrollingPanelRef={scrollingPanelRef}
+          />
+        ))}
+      </div>
+    </ScrollContainer>
   );
 }

package/src/components/Header/Header.css.ts

@@ -30,7 +30,6 @@ export const menuContainer = style({
 
 export const actionsGap = 'xsmall';
 
-export const actionsReady = style({});
 export const actionsContainer = style([
   sprinkles({
     display: 'flex',
@@ -46,8 +45,20 @@ export const actionsContainer = style([
         display: 'none',
       },
     },
+  },
+]);
+
+export const shareActionsReady = style({});
+export const shareActions = style([
+  sprinkles({
+    display: 'flex',
+    alignItems: 'center',
+    gap: actionsGap,
+    transition: 'fast',
+  }),
+  {
     selectors: {
-      [`&:not(${actionsReady})`]: {
+      [`&:not(${shareActionsReady})`]: {
         opacity: 0,
         transform: `translateX(${vars.space[actionsGap]})`,
         pointerEvents: 'none',

package/src/components/Header/Header.tsx

@@ -398,62 +398,65 @@ export const Header = () => {
       </div>
       <Title />
       <SharedTooltipContext>
-        <div
-          className={clsx({
-            [styles.actionsContainer]: true,
-            [styles.actionsReady]: hasCode,
-          })}
-        >
-          <div className={styles.segmentedGroup}>
-            <button
-              type="button"
-              className={styles.segmentedTextButton}
-              onClick={() => setShareOpen(true)}
-            >
-              <Text>Share</Text>
-            </button>
-            <Tooltip
-              label={copying ? 'Copied!' : 'Copy link'}
-              trigger={
-                <button
-                  type="button"
-                  aria-label="Copy link"
-                  className={styles.segmentedIconButton}
-                  onClick={() => onCopyClick(window.location.href)}
-                >
-                  {copying ? (
-                    <span className={styles.copyLinkSuccess}>
-                      <Check size={14} />
-                    </span>
-                  ) : (
-                    <Link size={14} />
-                  )}
-                </button>
-              }
-            />
+        <div className={styles.actionsContainer}>
+          <div
+            className={clsx({
+              [styles.shareActions]: true,
+              [styles.shareActionsReady]: hasCode,
+            })}
+            inert={!hasCode ? true : undefined}
+          >
+            <div className={styles.segmentedGroup}>
+              <button
+                type="button"
+                className={styles.segmentedTextButton}
+                onClick={() => setShareOpen(true)}
+              >
+                <Text>Share</Text>
+              </button>
+              <Tooltip
+                label={copying ? 'Copied!' : 'Copy link'}
+                trigger={
+                  <button
+                    type="button"
+                    aria-label="Copy link"
+                    className={styles.segmentedIconButton}
+                    onClick={() => onCopyClick(window.location.href)}
+                  >
+                    {copying ? (
+                      <span className={styles.copyLinkSuccess}>
+                        <Check size={14} />
+                      </span>
+                    ) : (
+                      <Link size={14} />
+                    )}
+                  </button>
+                }
+              />
+            </div>
+
+            {themesEnabled && selectedThemes.length !== 1 ? (
+              <Menu
+                width="content"
+                align="end"
+                trigger={<ButtonIcon label="Launch Preview" icon={<Play />} />}
+              >
+                <MenuGroup label="Choose preview theme">
+                  {availableThemes.map((theme) => (
+                    <MenuItemThemedPreviewLink key={theme} theme={theme} />
+                  ))}
+                </MenuGroup>
+              </Menu>
+            ) : (
+              <ButtonIconLink
+                label="Launch Preview"
+                icon={<Play />}
+                href={previewUrl}
+                target="_blank"
+              />
+            )}
           </div>
 
-          {themesEnabled && selectedThemes.length !== 1 ? (
-            <Menu
-              width="content"
-              align="end"
-              trigger={<ButtonIcon label="Launch Preview" icon={<Play />} />}
-            >
-              <MenuGroup label="Choose preview theme">
-                {availableThemes.map((theme) => (
-                  <MenuItemThemedPreviewLink key={theme} theme={theme} />
-                ))}
-              </MenuGroup>
-            </Menu>
-          ) : (
-            <ButtonIconLink
-              label="Launch Preview"
-              icon={<Play />}
-              href={previewUrl}
-              target="_blank"
-            />
-          )}
-
           <Menu
             width="small"
             align="end"

package/src/components/Playroom/Playroom.tsx

@@ -81,6 +81,17 @@ export default () => {
     lastHidden.current = editorHidden;
   }, [editorHidden]);
 
+  // Remove in favour of direct DOM attribute when we drop React 18 support
+  useEffect(() => {
+    if (editorRef.current) {
+      if (!editorVisible) {
+        editorRef.current.setAttribute('inert', '');
+      } else {
+        editorRef.current.removeAttribute('inert');
+      }
+    }
+  }, [editorVisible]);
+
   return (
     <Box
       component="main"
@@ -124,13 +135,12 @@ export default () => {
       <Box
         position="relative"
         className={styles.editor}
-        inert={!editorVisible}
         opacity={!editorVisible ? 0 : undefined}
         pointerEvents={!editorVisible ? 'none' : undefined}
         ref={editorRef}
       >
         <ResizeHandle
-          ref={editorRef}
+          targetRef={editorRef}
           position={resizeHandlePosition[editorOrientation]}
           onResize={(newValue) => {
             dispatch({

package/src/components/Playroom/ResizeHandle.tsx

@@ -25,14 +25,14 @@ const resolvePosition = (
 
 export const ResizeHandle = ({
   position,
-  ref,
+  targetRef,
   onResize,
   onResizeStart,
   onResizeEnd,
 }: {
   position: 'top' | 'right' | 'left';
   flip?: boolean;
-  ref: RefObject<HTMLElement | null>;
+  targetRef: RefObject<HTMLElement | null>;
   onResize: (newValue: number) => void;
   onResizeStart?: (startValue: number) => void;
   onResizeEnd?: (endValue: number) => void;
@@ -48,7 +48,7 @@ export const ResizeHandle = ({
     event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>
   ) => {
     const startPosition = resolvePosition(event.nativeEvent, pagePos);
-    const startSize = ref.current?.[elementSize] ?? 0;
+    const startSize = targetRef.current?.[elementSize] ?? 0;
 
     setResizing(true);
     onResizeStart?.(startSize);
@@ -61,7 +61,7 @@ export const ResizeHandle = ({
     };
 
     const stopHandler = () => {
-      const endSize = ref.current?.[elementSize] ?? 0;
+      const endSize = targetRef.current?.[elementSize] ?? 0;
       setResizing(false);
       onResizeEnd?.(endSize);
       document.body.classList.remove(styles.resizeCursor[direction]);

package/src/components/Stack/Stack.css.ts

@@ -18,9 +18,9 @@ export const spaceScale = styleVariants(vars.space, (space) => ({
 
 export const horizontalAlignmentScale = styleVariants(
   {
-    top: 'flex-start',
+    left: 'flex-start',
     center: 'center',
-    bottom: 'flex-end',
+    right: 'flex-end',
   },
   (alignment) => ({
     alignItems: alignment,

package/src/css/vars.css.ts

@@ -4,7 +4,7 @@ const fontFamily = '"Plus Jakarta Sans", sans-serif';
 export const fontSizeDefinitions = {
   xsmall: [10, 14],
   small: [12, 16],
-  standard: [14, 20],
+  standard: [14, 24],
   large: [16, 22],
 };
 

package/src/entries/frame.tsx

@@ -19,6 +19,5 @@ renderElement(
         />
       </>
     )}
-  </UrlParams>,
-  document.body
+  </UrlParams>
 );

package/src/entries/index.tsx

@@ -19,6 +19,5 @@ renderElement(
     <EditorProvider>
       <Playroom />
     </EditorProvider>
-  </StoreProvider>,
-  document.body
+  </StoreProvider>
 );

package/src/entries/preview.tsx

@@ -20,6 +20,5 @@ renderElement(
     {({ code, themeName, title }) => (
       <Preview title={title} code={code} themeName={themeName} />
     )}
-  </UrlParams>,
-  document.body
+  </UrlParams>
 );

package/src/render.ts

@@ -1,7 +1,10 @@
 import type { ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-export const renderElement = async (node: ReactNode, outlet: HTMLElement) => {
+const outlet = document.createElement('div');
+document.body.appendChild(outlet);
+
+export const renderElement = async (node: ReactNode) => {
   const root = createRoot(outlet);
   root.render(node);
 };