playroom 0.37.0 → 0.38.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # playroom
 
+## 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
+
+- 2b6d5c5: Update lz-string to 1.5.0, and removed unnecessary @types/lz-string
+
 ## 0.37.0
 
 ### Minor 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/package.json

@@ -1,12 +1,20 @@
 {
   "name": "playroom",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "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"
@@ -35,7 +43,6 @@
     "@types/base64-url": "^2.2.0",
     "@types/codemirror": "^5.60.5",
     "@types/lodash": "^4.14.191",
-    "@types/lz-string": "^1.3.34",
     "@types/prettier": "^2.7.1",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
@@ -45,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",
@@ -59,7 +67,7 @@
     "intersection-observer": "^0.12.2",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
-    "lz-string": "^1.4.4",
+    "lz-string": "^1.5.0",
     "memoize-one": "^6.0.0",
     "mini-css-extract-plugin": "^2.7.2",
     "parse-prop-types": "^0.3.0",
@@ -70,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",
@@ -84,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",
@@ -116,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,

package/src/Playroom/FramesPanel/FramesPanel.tsx

@@ -5,9 +5,11 @@ import { ToolbarPanel } from '../ToolbarPanel/ToolbarPanel';
 import { StoreContext } from '../../StoreContext/StoreContext';
 import { Stack } from '../Stack/Stack';
 import { Text } from '../Text/Text';
+import { Helmet } from 'react-helmet';
+import { Inline } from '../Inline/Inline';
+import { Box } from '../Box/Box';
 
 import * as styles from './FramesPanel.css';
-import { Helmet } from 'react-helmet';
 
 const getTitle = (title: string | undefined) => {
   if (title) {
@@ -45,48 +47,47 @@ interface FrameHeadingProps {
   children: ReactNode;
 }
 const FrameHeading = ({ showReset, onReset, children }: FrameHeadingProps) => (
-  <div className={styles.title}>
-    <Heading level="3">{children}</Heading>
-    {showReset && <ResetButton onClick={onReset}>Show all</ResetButton>}
-  </div>
+  <Inline space="none" alignY="center">
+    <Box flexGrow={1}>
+      <Heading level="3">{children}</Heading>
+    </Box>
+    {showReset && <ResetButton onClick={onReset}>Clear</ResetButton>}
+  </Inline>
 );
 
 interface FrameOptionProps<Option> {
   option: Option;
   selected: boolean;
   visible: Option[];
-  available: Option[];
   onChange: (options?: Option[]) => void;
 }
 function FrameOption<Option>({
   option,
   selected,
   visible,
-  available,
   onChange,
 }: FrameOptionProps<Option>) {
   return (
     <label className={styles.label}>
-      <input
-        type="checkbox"
-        checked={selected}
-        className={styles.checkbox}
-        onChange={(ev) => {
-          if (ev.target.checked) {
-            const newVisiblePreference = [...visible, option];
-            const isOriginalList =
-              JSON.stringify(newVisiblePreference.sort()) ===
-              JSON.stringify([...available].sort());
-            onChange(isOriginalList ? undefined : newVisiblePreference);
-          } else {
-            onChange(visible.filter((p) => p !== option));
-          }
-        }}
-      />
-      <div className={styles.fakeCheckbox}>
-        <Checkmark />
-      </div>
-      <Text truncate>{String(option)}</Text>
+      <Inline space="large" alignY="center">
+        <input
+          type="checkbox"
+          checked={selected}
+          className={styles.checkbox}
+          onChange={(event) => {
+            if (event.target.checked) {
+              const newVisiblePreference = [...visible, option];
+              onChange(newVisiblePreference);
+            } else {
+              onChange(visible.filter((p) => p !== option));
+            }
+          }}
+        />
+        <div className={styles.fakeCheckbox}>
+          <Checkmark />
+        </div>
+        <Text truncate>{String(option)}</Text>
+      </Inline>
     </label>
   );
 }
@@ -112,10 +113,10 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
           <title>{displayedTitle}</title>
         </Helmet>
       )}
-      <ToolbarPanel data-testid="frame-panel">
+      <ToolbarPanel>
         <Stack space="xxxlarge">
           <label>
-            <Stack space="medium">
+            <Stack space="small">
               <Heading level="3">Title</Heading>
               <input
                 type="text"
@@ -133,21 +134,19 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
             </Stack>
           </label>
 
-          <div data-testid="widthsPreferences">
+          <Stack space="xlarge">
             <FrameHeading
               showReset={hasFilteredWidths}
               onReset={() => dispatch({ type: 'resetVisibleWidths' })}
             >
               Widths
             </FrameHeading>
-
             {availableWidths.map((option) => (
               <FrameOption
                 key={option}
                 option={option}
                 selected={hasFilteredWidths && visibleWidths.includes(option)}
                 visible={visibleWidths}
-                available={availableWidths}
                 onChange={(newWidths) => {
                   if (newWidths) {
                     dispatch({
@@ -160,24 +159,22 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
                 }}
               />
             ))}
-          </div>
+          </Stack>
 
           {hasThemes ? (
-            <div data-testid="themePreferences">
+            <Stack space="xlarge">
               <FrameHeading
                 showReset={hasFilteredThemes}
                 onReset={() => dispatch({ type: 'resetVisibleThemes' })}
               >
                 Themes
               </FrameHeading>
-
               {availableThemes.map((option) => (
                 <FrameOption
                   key={option}
                   option={option}
                   selected={hasFilteredThemes && visibleThemes.includes(option)}
                   visible={visibleThemes}
-                  available={availableThemes}
                   onChange={(newThemes) => {
                     if (newThemes) {
                       dispatch({
@@ -190,7 +187,7 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
                   }}
                 />
               ))}
-            </div>
+            </Stack>
           ) : null}
         </Stack>
       </ToolbarPanel>

package/src/Playroom/Heading/Heading.css.ts

@@ -1,4 +1,5 @@
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 import { style } from '@vanilla-extract/css';
 
 export const base = style([