playroom - npm Package Compare versions

Comparing version 0.0.0-improve-frame-filtering-ux-20240524002129 to 0.0.0-master-20240611042415

CHANGELOG.md

 # playroom
 
-## 0.0.0-improve-frame-filtering-ux-20240524002129
+## 0.0.0-master-20240611042415
 
 ### Minor Changes
 
-- e84a9ec: Improve frame filtering UX.
+- 7df36e3: Improve frame filtering UX.
 
@@ -12,2 +12,4 @@ - Allow users to select all checkboxes in a frame filter section, rather than automatically unselecting all checkboxes when all are selected.
 
+- 384810e: Use CSS gap and grid for layout spacing in Playroom UI.
+
 ### Patch Changes
@@ -18,3 +20,3 @@
 - 92a0039: Fix Playroom UI icon centering
-- Remove `data-testid` attributes from UI elements
+- 422a259: Remove `data-testid` attributes from UI elements
 
@@ -21,0 +23,0 @@ ## 0.37.1

package.json

 {
   "name": "playroom",
-  "version": "0.0.0-improve-frame-filtering-ux-20240524002129",
+  "version": "0.0.0-master-20240611042415",
   "description": "Design with code, powered by your own component library",
@@ -55,2 +55,3 @@ "main": "utils/index.js",
     "classnames": "^2.3.2",
+    "clsx": "^2.1.1",
     "codemirror": "^5.65.10",
@@ -130,3 +131,3 @@ "command-line-args": "^5.2.1",
     "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",
@@ -137,3 +138,3 @@ "build:themed": "./bin/cli.cjs build --config cypress/projects/themed/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)'",
@@ -140,0 +141,0 @@ "build:all": "concurrently 'npm:build:*(!all)'",

README.md

@@ -211,4 +211,8 @@ <img src="images/logo.png?raw=true#gh-light-mode-only" alt="Playroom" title="Playroom" width="292" height="50" />
 
+## 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.

src/Playroom/Button/Button.css.ts

 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';
 
@@ -81,3 +82,3 @@ export const reset = style([
 export const iconContainer = style([
-  sprinkles({ position: 'relative', paddingLeft: 'medium' }),
+  sprinkles({ position: 'relative', paddingLeft: 'small' }),
   {
@@ -84,0 +85,0 @@ top: '1px',

src/Playroom/CodeEditor/CodeEditor.css.ts

 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';
@@ -299,5 +300,5 @@
   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,
@@ -304,0 +305,0 @@ paddingRight: vars.space.large,

src/Playroom/Frames/Frames.css.ts

 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,
+});
 
@@ -49,0 +28,0 @@ export const frameBorder = style([

src/Playroom/FramesPanel/FramesPanel.css.ts

 import { calc } from '@vanilla-extract/css-utils';
 import { globalStyle, style } from '@vanilla-extract/css';
-import { colorPaletteVars, sprinkles, vars } from '../sprinkles.css';
+import { colorPaletteVars, sprinkles } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
-export const title = sprinkles({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  marginBottom: 'medium',
-});
-
 export const reset = style([
@@ -17,3 +11,3 @@ sprinkles({
     border: 0,
-    padding: 'medium',
+    padding: 'small',
     appearance: 'none',
@@ -26,3 +20,3 @@ }),
     textDecoration: 'underline',
-    margin: calc(vars.space.medium).negate().toString(),
+    margin: calc(vars.space.small).negate().toString(),
     '::before': {
@@ -51,14 +45,5 @@ content: '""',
 
-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',
+});
 
@@ -88,3 +73,2 @@ const checkboxSize = '20px';
     borderRadius: 'large',
-    marginRight: 'large',
     padding: checkboxPadding,
@@ -91,0 +75,0 @@ pointerEvents: 'none',

src/Playroom/Heading/Heading.css.ts

@@ -1,2 +0,3 @@
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 import { style } from '@vanilla-extract/css';
@@ -3,0 +4,0 @@

src/Playroom/icons/ChevronIcon.css.ts

 import { style } from '@vanilla-extract/css';
-import { vars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
@@ -4,0 +4,0 @@ export const root = style({

src/Playroom/Inline/Inline.css.ts

@@ -1,57 +0,30 @@
-import { calc } from '@vanilla-extract/css-utils';
-import { createVar, style } from '@vanilla-extract/css';
-import { sprinkles, vars } from '../sprinkles.css';
+import { style, createVar, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../vars.css';
 
 const size = createVar();
+const horizontalAlignment = createVar();
 
-export const root = style([
-  sprinkles({
-    display: 'flex',
-    flexWrap: 'wrap',
-  }),
-  {
-    marginTop: calc(size).negate().toString(),
-    marginLeft: calc(size).negate().toString(),
-  },
-]);
-
-export const item = style({
-  paddingTop: size,
-  paddingLeft: size,
+export const gap = style({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  gap: size,
+  alignItems: horizontalAlignment,
 });
 
-export const xxsmall = style({
+export const spaceScale = styleVariants(vars.space, (space) => ({
   vars: {
-    [size]: vars.grid,
+    [size]: space,
   },
-});
+}));
 
-export const xsmall = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(2).toString(),
+export const horizontalAlignmentScale = styleVariants(
+  {
+    top: 'flex-start',
+    center: 'center',
+    bottom: 'flex-end',
   },
-});
-
-export const small = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(3).toString(),
-  },
-});
-
-export const medium = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(4).toString(),
-  },
-});
-
-export const large = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(5).toString(),
-  },
-});
-
-export const xlarge = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(6).toString(),
-  },
-});
+  (alignment) => ({
+    alignItems: alignment,
+  })
+);

src/Playroom/Playroom.css.ts

 import { style, globalStyle } from '@vanilla-extract/css';
-import { sprinkles, vars, colorPaletteVars } from './sprinkles.css';
+import { sprinkles, colorPaletteVars } from './sprinkles.css';
+import { vars } from './vars.css';
 import { toolbarItemSize } from './ToolbarItem/ToolbarItem.css';
@@ -4,0 +5,0 @@

src/Playroom/SettingsPanel/SettingsPanel.css.ts

@@ -1,3 +0,4 @@
-import { colorPaletteVars, sprinkles, vars } from '../sprinkles.css';
-import { globalStyle, style } from '@vanilla-extract/css';
+import { colorPaletteVars, sprinkles } from '../sprinkles.css';
+import { vars } from '../vars.css';
+import { style } from '@vanilla-extract/css';
 
@@ -10,20 +11,12 @@ export const fieldset = sprinkles({
 
-export const radioContainer = sprinkles({
-  display: 'flex',
-  paddingTop: 'medium',
-});
+export const keyboardShortcutKeys = style([
+  {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 1fr)',
+  },
+  sprinkles({
+    gap: 'xsmall',
+  }),
+]);
 
-export const keyboardShortcutRow = style({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-globalStyle(`${keyboardShortcutRow} > *:first-child`, {
-  flex: 1,
-});
-
-globalStyle(`${keyboardShortcutRow} > *:nth-child(2)`, {
-  flex: '0 0 43%',
-});
-
 export const kbd = style([
@@ -30,0 +23,0 @@ sprinkles({

src/Playroom/Snippets/SearchField/SearchField.css.ts

@@ -1,2 +0,3 @@
-import { sprinkles, vars, colorPaletteVars } from '../../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../../sprinkles.css';
+import { vars } from '../../vars.css';
 import { style } from '@vanilla-extract/css';
@@ -3,0 +4,0 @@

src/Playroom/Snippets/Snippets.css.ts

 import { style } from '@vanilla-extract/css';
 import { toolbarItemSize } from '../ToolbarItem/ToolbarItem.css';
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
@@ -19,3 +20,3 @@ export const root = sprinkles({
     alignItems: 'center',
-    paddingX: 'medium',
+    paddingX: 'small',
   }),
@@ -36,3 +37,3 @@ {
     padding: 'none',
-    margin: 'medium',
+    margin: 'small',
   }),
@@ -39,0 +40,0 @@ {

src/Playroom/sprinkles.css.ts

 import { createGlobalTheme, createThemeContract } from '@vanilla-extract/css';
 import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
 import { dark, light } from './palettes';
+import { vars } from './vars.css';
 
-const fontFamily = 'Helvetica, arial, sans-serif';
-export const vars = createGlobalTheme(':root', {
-  font: {
-    family: {
-      standard: fontFamily,
-      code: 'Source Code Pro, Firacode, Hasklig, Menlo, monospace',
-    },
-    scale: {
-      xsmall: `normal 10px ${fontFamily}`,
-      small: `normal 12px ${fontFamily}`,
-      standard: `normal 14px ${fontFamily}`,
-      large: `normal 16px/1.3em ${fontFamily}`,
-    },
-    weight: {
-      weak: '100',
-      strong: '700',
-    },
-  },
-  grid: '4px',
-  radii: {
-    small: '2px',
-    medium: '4px',
-    large: '6px',
-    full: '100%',
-  },
-  codeGutterSize: '70px',
-  touchableSize: '44px',
-  transition: {
-    slow: 'opacity 300ms ease, transform 300ms ease',
-    medium: 'opacity 200ms ease, transform 200ms ease',
-    fast: 'opacity 100ms ease, transform 100ms ease',
-  },
-  space: {
-    none: '0',
-    xxsmall: '2px',
-    xsmall: '4px',
-    medium: '6px',
-    large: '12px',
-    xlarge: '16px',
-    xxlarge: '20px',
-    xxxlarge: '28px',
-    gutter: '40px',
-  },
-});
-
 export const colorPaletteVars = createThemeContract({
@@ -102,2 +58,3 @@ code: {
     flexWrap: ['wrap'],
+    flexGrow: [0, 1],
     justifyContent: [
@@ -112,2 +69,3 @@ 'stretch',
     alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
+    gap: vars.space,
     paddingTop: vars.space,
@@ -117,6 +75,6 @@ paddingBottom: vars.space,
     paddingRight: vars.space,
-    marginTop: vars.space,
-    marginBottom: vars.space,
-    marginLeft: vars.space,
-    marginRight: vars.space,
+    marginTop: { ...vars.space, auto: 'auto' },
+    marginBottom: { ...vars.space, auto: 'auto' },
+    marginLeft: { ...vars.space, auto: 'auto' },
+    marginRight: { ...vars.space, auto: 'auto' },
     overflow: ['hidden', 'auto'],
@@ -154,1 +112,3 @@ boxShadow: colorPaletteVars.shadows,
 export const sprinkles = createSprinkles(responsiveProperties);
+
+export type Sprinkles = Parameters<typeof sprinkles>[0];

src/Playroom/Stack/Stack.css.ts

 import { style, createVar, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
@@ -7,7 +7,5 @@ const size = createVar();
 export const gap = style({
-  selectors: {
-    ['&:not(:last-child)']: {
-      paddingBottom: size,
-    },
-  },
+  display: 'flex',
+  flexDirection: 'column',
+  gap: size,
 });
@@ -14,0 +12,0 @@

src/Playroom/StatusMessage/StatusMessage.css.ts

 import { calc } from '@vanilla-extract/css-utils';
 import { style } from '@vanilla-extract/css';
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 import { toolbarItemSize } from '../ToolbarItem/ToolbarItem.css';
@@ -5,0 +6,0 @@

src/Playroom/Toolbar/Toolbar.css.ts

@@ -45,30 +45,2 @@ import { calc } from '@vanilla-extract/css-utils';
 
-export const topButtons = sprinkles({
-  transition: 'medium',
-});
-
-export const positions_isOpen = style({});
-export const positionContainer = style([
-  sprinkles({
-    position: 'absolute',
-    top: 0,
-    width: 'full',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-end',
-    justifyContent: 'flex-end',
-    transition: 'medium',
-  }),
-  {
-    bottom: toolbarItemSize,
-    selectors: {
-      [`&:not(${positions_isOpen})`]: {
-        opacity: 0,
-        pointerEvents: 'none',
-        transform: 'translateY(20px)',
-      },
-    },
-  },
-]);
-
 export const buttons = style([
@@ -75,0 +47,0 @@ sprinkles({

src/Playroom/ToolbarItem/ToolbarItem.css.ts

@@ -1,2 +0,3 @@
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 import { style, globalStyle } from '@vanilla-extract/css';
@@ -3,0 +4,0 @@

No alert changes

Improved metrics

Number of lines in readme file

218

increased by1.87%

Worsened metrics

Total package byte prevSize

2105240

decreased by-0.02%

Dependency count

56

increased by1.82%

Lines of code

7284

decreased by-0.95%

Dependency changes

• + Addedclsx@^2.1.1

• + Addedclsx@2.1.1(transitive)