playroom 0.37.1 → 0.38.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # playroom
 
+## 0.38.1
+
+### Patch Changes
+
+- a62002d: Apply `title` from url on page load
+
+  Previously the document `title` would only update when the frames panel is open.
+  The title is now correctly reflected from the url on page load.
+
+- cf0fa9e: start: Disable webpack error overlay
+
+  Prevent the default webpack dev server error overlay from blocking the preview frames in `start` mode.
+  Playroom handles its own errors, and this would block the preview frames and need to be dismissed manually.
+
+## 0.38.0
+
+### Minor Changes
+
+- 7df36e3: Improve frame filtering UX.
+
+  - Allow users to select all checkboxes in a frame filter section, rather than automatically unselecting all checkboxes when all are selected.
+  - Rename the "Show all" button to "Clear" to reinforce the filtering pattern.
+
+- 384810e: Use CSS gap and grid for layout spacing in Playroom UI.
+
+### Patch Changes
+
+- a0724d2: Fixes a bug in the side panel exit animation that was causing the contents to vanish abruptly
+- 934a017: Exclude irrelevant files from published package
+- 92a0039: Fix Playroom UI icon centering
+- 422a259: Remove `data-testid` attributes from UI elements
+
 ## 0.37.1
 
 ### Patch Changes

package/README.md

@@ -208,6 +208,10 @@ Playroom supports loading [ESM](https://nodejs.org/api/esm.html#introduction) co
 
 If you are interested in integrating Playroom into Storybook, check out [storybook-addon-playroom](https://github.com/rbardini/storybook-addon-playroom).
 
+## Browser Support
+
+Playroom is built to work on the latest stable versions of all major browsers. Some features may not work as expected in older browsers.
+
 ## License
 
 MIT.

package/lib/start.js

@@ -30,6 +30,9 @@ module.exports = async (config, callback) => {
       devMiddleware: {
         stats: false,
       },
+      client: {
+        overlay: false,
+      },
       compress: true,
       static: {
         watch: { ignored: /node_modules/ },

package/package.json

@@ -1,12 +1,20 @@
 {
   "name": "playroom",
-  "version": "0.37.1",
+  "version": "0.38.1",
   "description": "Design with code, powered by your own component library",
   "main": "utils/index.js",
   "types": "utils/index.d.ts",
   "bin": {
     "playroom": "bin/cli.cjs"
   },
+  "files": [
+    "CHANGELOG.md",
+    ".babelrc",
+    "images",
+    "lib",
+    "src",
+    "utils"
+  ],
   "lint-staged": {
     "**/*.{js,ts,tsx}": [
       "eslint"
@@ -44,6 +52,7 @@
     "@vanilla-extract/webpack-plugin": "^2.3.6",
     "babel-loader": "^9.1.0",
     "classnames": "^2.3.2",
+    "clsx": "^2.1.1",
     "codemirror": "^5.65.10",
     "command-line-args": "^5.2.1",
     "command-line-usage": "^6.1.3",
@@ -69,6 +78,7 @@
     "re-resizable": "^6.9.9",
     "react-docgen-typescript": "^2.2.2",
     "react-helmet": "^6.1.0",
+    "react-transition-group": "^4.4.5",
     "react-use": "^17.4.0",
     "read-pkg-up": "^7.0.1",
     "scope-eval": "^1.0.0",
@@ -83,11 +93,13 @@
     "@actions/core": "^1.10.0",
     "@changesets/cli": "^2.25.2",
     "@octokit/rest": "^19.0.5",
+    "@testing-library/cypress": "^10.0.1",
     "@types/jest": "^29.2.4",
     "@types/react-helmet": "^6.1.6",
+    "@types/react-transition-group": "^4.4.10",
     "concurrently": "^7.6.0",
     "cypress": "^13.6.6",
-    "eslint": "^8.44.0",
+    "eslint": "^8.56.0",
     "eslint-config-seek": "^11.3.1",
     "husky": "^8.0.2",
     "jest": "^29.3.1",
@@ -115,19 +127,19 @@
     "cypress:verify": "cypress verify",
     "start:basic": "./bin/cli.cjs start --config cypress/projects/basic/playroom.config.js",
     "build:basic": "./bin/cli.cjs build --config cypress/projects/basic/playroom.config.js",
-    "serve:basic": "PORT=9000 serve --no-request-logging cypress/projects/basic/dist",
+    "serve:basic": "PORT=9000 serve --config ../serve.json --no-request-logging cypress/projects/basic/dist",
     "start:themed": "./bin/cli.cjs start --config cypress/projects/themed/playroom.config.js",
     "build:themed": "./bin/cli.cjs build --config cypress/projects/themed/playroom.config.js",
     "serve:themed": "PORT=9001 serve --config ../serve.json --no-request-logging cypress/projects/themed/dist",
     "start:typescript": "./bin/cli.cjs start --config cypress/projects/typescript/playroom.config.js",
     "build:typescript": "./bin/cli.cjs build --config cypress/projects/typescript/playroom.config.js",
-    "serve:typescript": "PORT=9002 serve --no-request-logging cypress/projects/typescript/dist",
+    "serve:typescript": "PORT=9002 serve --config ../serve.json --no-request-logging cypress/projects/typescript/dist",
     "start:all": "concurrently 'npm:start:*(!all)'",
     "build:all": "concurrently 'npm:build:*(!all)'",
     "serve:all": "concurrently 'npm:serve:*(!all)'",
     "build-and-serve:all": "pnpm build:all && pnpm serve:all",
     "lint": "concurrently 'npm:lint:*'",
-    "lint:eslint": "eslint --cache .",
+    "lint:eslint": "NODE_OPTIONS=--max_old_space_size=8192 eslint --cache .",
     "lint:prettier": "prettier --list-different '**/*.{js,md,ts,tsx}'",
     "lint:tsc": "tsc --noEmit",
     "lint:cypress": "tsc --project cypress/tsconfig.json",

package/src/Playroom/Box/Box.tsx

@@ -0,0 +1,33 @@
+import clsx, { type ClassValue } from 'clsx';
+import type { AllHTMLAttributes, ElementType } from 'react';
+import { sprinkles, type Sprinkles } from '../sprinkles.css';
+
+interface BoxProps
+  extends Omit<
+      AllHTMLAttributes<HTMLElement>,
+      'width' | 'height' | 'className' | 'data'
+    >,
+    Sprinkles {
+  className?: ClassValue;
+  component?: ElementType;
+}
+
+export const Box = ({
+  component = 'div',
+  className,
+  ...restProps
+}: BoxProps) => {
+  const atomProps: Record<string, unknown> = {};
+
+  for (const key in restProps) {
+    if (sprinkles.properties.has(key as keyof Sprinkles)) {
+      atomProps[key] = restProps[key as keyof typeof restProps];
+      delete restProps[key as keyof typeof restProps];
+    }
+  }
+
+  const classes = clsx(className, sprinkles({ ...atomProps }));
+  const Component = component;
+
+  return <Component className={classes} {...restProps} />;
+};

package/src/Playroom/Button/Button.css.ts

@@ -1,6 +1,7 @@
 import { style, createVar } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
 export const reset = style([
   sprinkles({
@@ -78,7 +79,7 @@ export const positive = style({
 });
 
 export const iconContainer = style([
-  sprinkles({ position: 'relative', paddingLeft: 'medium' }),
+  sprinkles({ position: 'relative', paddingLeft: 'small' }),
   {
     top: '1px',
   },

package/src/Playroom/Button/Button.tsx

@@ -7,7 +7,6 @@ interface BaseProps {
   as?: ElementType;
   tone?: 'positive';
   icon?: ReactElement;
-  'data-testid'?: string;
 }
 
 interface ButtonProps

package/src/Playroom/CodeEditor/CodeEditor.css.ts

@@ -1,5 +1,6 @@
 import { style, globalStyle, keyframes, createVar } from '@vanilla-extract/css';
-import { vars, colorPaletteVars, sprinkles } from '../sprinkles.css';
+import { colorPaletteVars, sprinkles } from '../sprinkles.css';
+import { vars } from '../vars.css';
 import { toolbarItemSize } from '../ToolbarItem/ToolbarItem.css';
 
 const minimumLineNumberWidth = '50px';
@@ -296,9 +297,9 @@ globalStyle('.CodeMirror-dialog button', {
   appearance: 'none',
   font: vars.font.scale.standard,
   fontFamily: vars.font.family.standard,
-  marginLeft: vars.space.medium,
-  paddingTop: vars.space.medium,
-  paddingBottom: vars.space.medium,
+  marginLeft: vars.space.small,
+  paddingTop: vars.space.small,
+  paddingBottom: vars.space.small,
   paddingLeft: vars.space.large,
   paddingRight: vars.space.large,
   alignSelf: 'center',

package/src/Playroom/Frames/Frames.css.ts

@@ -1,50 +1,29 @@
 import { style } from '@vanilla-extract/css';
 import { sprinkles } from '../sprinkles.css';
 
-export const root = style([
-  sprinkles({
-    height: 'full',
-    width: 'full',
-    whiteSpace: 'nowrap',
-    display: 'flex',
-    boxSizing: 'border-box',
-    paddingY: 'gutter',
-    paddingLeft: 'gutter',
-    textAlign: 'center',
-  }),
-  {
-    overflowX: 'auto',
-    overflowY: 'hidden',
-    // // Simulate centering when fewer frames than viewport width.
-    '::before': {
-      content: '""',
-      flex: 1,
-    },
-    '::after': {
-      content: '""',
-      flex: 1,
-    },
-  },
-]);
+export const root = sprinkles({
+  height: 'full',
+  boxSizing: 'border-box',
+  display: 'flex',
+  padding: 'gutter',
+  textAlign: 'center',
+  overflow: 'auto',
+});
 
-export const frameContainer = style([
-  sprinkles({
-    position: 'relative',
-    height: 'full',
-    textAlign: 'left',
-    display: 'flex',
-    flexDirection: 'column',
-    paddingRight: 'gutter',
-  }),
-  {},
-]);
+export const frameContainer = sprinkles({
+  position: 'relative',
+  height: 'full',
+  textAlign: 'left',
+  display: 'flex',
+  flexDirection: 'column',
+});
 
-export const frame = style([
-  sprinkles({ position: 'relative', height: 'full', border: 0 }),
-  {
-    flexGrow: 1,
-  },
-]);
+export const frame = sprinkles({
+  position: 'relative',
+  height: 'full',
+  border: 0,
+  flexGrow: 1,
+});
 
 export const frameBorder = style([
   sprinkles({

package/src/Playroom/Frames/Frames.tsx

@@ -9,6 +9,7 @@ import playroomConfig from '../../config';
 import frameSrc from './frameSrc';
 
 import * as styles from './Frames.css';
+import { Box } from '../Box/Box';
 
 interface FramesProps {
   code: string;
@@ -34,36 +35,38 @@ export default function Frames({ code, themes, widths }: FramesProps) {
 
   return (
     <div ref={scrollingPanelRef} className={styles.root}>
-      {frames.map((frame) => (
-        <div
-          key={`${frame.theme}_${frame.width}`}
-          className={styles.frameContainer}
-        >
-          <div className={styles.frame}>
-            <div className={styles.frameBorder} />
-            <Iframe
-              intersectionRootRef={scrollingPanelRef}
-              src={frameSrc(
-                { themeName: frame.theme, code: renderCode.current },
-                playroomConfig
+      <Box display="flex" gap="gutter" marginX="auto">
+        {frames.map((frame) => (
+          <div
+            key={`${frame.theme}_${frame.width}`}
+            className={styles.frameContainer}
+          >
+            <div className={styles.frame}>
+              <div className={styles.frameBorder} />
+              <Iframe
+                intersectionRootRef={scrollingPanelRef}
+                src={frameSrc(
+                  { themeName: frame.theme, code: renderCode.current },
+                  playroomConfig
+                )}
+                className={styles.frame}
+                style={{ width: frame.width }}
+                data-testid="previewFrame"
+              />
+            </div>
+            <div className={styles.frameName} data-testid="frameName">
+              {frame.theme === '__PLAYROOM__NO_THEME__' ? (
+                <Text weight="strong">{frame.widthName}</Text>
+              ) : (
+                <Text>
+                  <Strong>{frame.theme}</Strong>
+                  {` \u2013 ${frame.widthName}`}
+                </Text>
               )}
-              className={styles.frame}
-              style={{ width: frame.width }}
-              data-testid="previewFrame"
-            />
+            </div>
           </div>
-          <div className={styles.frameName} data-testid="frameName">
-            {frame.theme === '__PLAYROOM__NO_THEME__' ? (
-              <Text weight="strong">{frame.widthName}</Text>
-            ) : (
-              <Text>
-                <Strong>{frame.theme}</Strong>
-                {` \u2013 ${frame.widthName}`}
-              </Text>
-            )}
-          </div>
-        </div>
-      ))}
+        ))}
+      </Box>
     </div>
   );
 }

package/src/Playroom/FramesPanel/FramesPanel.css.ts

@@ -1,20 +1,14 @@
 import { calc } from '@vanilla-extract/css-utils';
 import { globalStyle, style } from '@vanilla-extract/css';
-import { colorPaletteVars, sprinkles, vars } from '../sprinkles.css';
-
-export const title = sprinkles({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  marginBottom: 'medium',
-});
+import { colorPaletteVars, sprinkles } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
 export const reset = style([
   sprinkles({
     position: 'relative',
     font: 'small',
     border: 0,
-    padding: 'medium',
+    padding: 'small',
     appearance: 'none',
   }),
   {
@@ -22,7 +16,7 @@ export const reset = style([
     backgroundColor: 'transparent',
     outline: 'none',
     textDecoration: 'underline',
-    margin: calc(vars.space.medium).negate().toString(),
+    margin: calc(vars.space.small).negate().toString(),
     '::before': {
       content: '""',
       position: 'absolute',
@@ -46,18 +40,9 @@ export const reset = style([
   },
 ]);
 
-export const label = style([
-  sprinkles({
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    userSelect: 'none',
-  }),
-  {
-    height: calc(vars.grid).multiply(9).toString(),
-  },
-]);
+export const label = sprinkles({
+  cursor: 'pointer',
+});
 
 const checkboxSize = '20px';
 export const checkbox = style([
@@ -67,7 +52,6 @@ export const checkbox = style([
     left: 0,
     right: 0,
     opacity: 0,
-    pointerEvents: 'none',
   }),
   {
     height: checkboxSize,
@@ -83,8 +67,8 @@ export const fakeCheckbox = style([
     justifyContent: 'center',
     position: 'relative',
     borderRadius: 'large',
-    marginRight: 'large',
     padding: checkboxPadding,
+    pointerEvents: 'none',
   }),
   {
     flexGrow: 0,