Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

playroom

Package Overview
Dependencies
Maintainers
0
Versions
135
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

playroom - npm Package Compare versions

Comparing version 0.0.0-fix-favicon-build-20240124035056 to 0.0.0-frame-src-hash-20240825054000

src/Playroom/Box/Box.tsx
src/Playroom/CodeEditor/keymaps/comment.ts
src/Playroom/vars.css.ts

105

CHANGELOG.md
# playroom
## 0.0.0-fix-favicon-build-20240124035056
## 0.0.0-frame-src-hash-20240825054000
### Minor Changes
- 2fc85a2: Always use URL hash for in the default `frameSrc` implementation
## 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
- 139fb1f: Fix `playroom build` by making favicon path relative to webpack config
- 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
- 94c75f8: Add "Find", "Find and replace", and "Jump to line" functionality.
Keybindings for these new commands are:
- `Cmd + F` / `Ctrl + F` - Find
- `Cmd + Option + F` / `Ctrl + Alt + F` - Find and replace
- `Cmd + G` / `Ctrl + G` - Jump to line
### Patch Changes
- 71f694a: Fix issue with "Toggle comment" command commenting certain code outside JSX tags with incorrect syntax.
## 0.36.0
### Minor Changes
- c3f0373: Drop support for Node versions <18.12.0
- 90edcc8: Add keybinding for copying Playroom link to clipboard with <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>C</kbd> (or, on Windows, <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>).
- c99cc30: Add keybinding to toggle comment syntax for the current selection.
Pressing <kbd>Cmd</kbd> + <kbd>/</kbd> (or, on Windows, <kbd>Ctrl</kbd> + <kbd>/</kbd>) will toggle comment syntax for the currently selected text.
If no text is selected, the line the cursor is on will toggle comment syntax.
### Patch Changes
- dd95719: Add 'Insert snippet' shortcut to 'Keyboard Shortcuts' list in settings panel for better discoverability.
- cad1ded: Remove dependency on `current-git-branch` package
- 0215bb4: Replace `query-string` dependency with `URLSearchParams`
- 6ad5895: Update shortcut format for Windows users for consistency with standard styling.
- cb3c427: In the Settings Panel, sort keyboard shortcuts order by most frequently and widely used. Related shortcuts are grouped together.
- b1766c2: Move Title setting from Settings Panel to Frame Panel to group current playroom settings together and improve discoverability.
Now, all settings that affect the current playroom tab live in the Frame Panel.
Settings affecting all playroom tabs live in the Settings Panel.
- 41e8cfa: Fix an issue where new Playroom tabs without a set title would load a recently used title.
- 134c5a4: Upgrade `webpack-dev-server` to v5
- c3f0373: Update dependencies
- f88a4e6: Fix async import of playroom config on Windows
## 0.35.0
### Minor Changes
- ad60e01: Add support for specifying default subsets of themes and screen widths via the config.
#### Example usage
```js
// playroom.config.js
module.exports = {
...,
defaultVisibleWidths: [
// subset of widths to display on first load
],
defaultVisibleThemes: [
// subset of themes to display on first load
],
}
```
- f45dd04: Add ability to customise tab titles via a "Title" section in the settings panel.
### Patch Changes
- f491105: Fix bug in "Wrap selection in tag" command that caused the start cursor to occasionally be placed in the wrong postion.
## 0.34.2
### Patch Changes
- 88bd204: Fix `playroom build` by making favicon path relative to webpack config
## 0.34.1

@@ -10,0 +111,0 @@

3

lib/makeWebpackConfig.js

@@ -77,5 +77,2 @@ const fs = require('fs');

module: {
// This option fixes https://github.com/prettier/prettier/issues/4959
// Once this issue is fixed, we can remove this line:
exprContextCritical: false,
rules: [

@@ -82,0 +79,0 @@ {

15

lib/provideDefaultConfig.js
const readPackage = require('read-pkg-up');
const currentGitBranch = require('current-git-branch');
const { execSync } = require('child_process');
/**
* @returns {string | null} The current git branch name, or null if no branch is found
*/
const getGitBranch = () => {
try {
return execSync('git branch --show-current').toString().trim();
} catch (e) {
return null;
}
};
const generateStorageKey = () => {
const pkg = readPackage.sync();
const packageName = (pkg && pkg.packageJson && pkg.packageJson.name) || null;
const branchName = currentGitBranch();
const branchName = getGitBranch();

@@ -9,0 +20,0 @@ const packageLabel = packageName ? `package:${packageName}` : null;

49

package.json
{
"name": "playroom",
"version": "0.0.0-fix-favicon-build-20240124035056",
"version": "0.0.0-frame-src-hash-20240825054000",
"description": "Design with code, powered by your own component library",

@@ -10,2 +10,10 @@ "main": "utils/index.js",

},
"files": [
"CHANGELOG.md",
".babelrc",
"images",
"lib",
"src",
"utils"
],
"lint-staged": {

@@ -38,5 +46,3 @@ "**/*.{js,ts,tsx}": [

"@types/codemirror": "^5.60.5",
"@types/dedent": "^0.7.0",
"@types/lodash": "^4.14.191",
"@types/lz-string": "^1.3.34",
"@types/prettier": "^2.7.1",

@@ -48,5 +54,6 @@ "@types/react": "^18.0.26",

"@vanilla-extract/sprinkles": "^1.5.1",
"@vanilla-extract/webpack-plugin": "2.1.12",
"@vanilla-extract/webpack-plugin": "^2.3.6",
"babel-loader": "^9.1.0",
"classnames": "^2.3.2",
"clsx": "^2.1.1",
"codemirror": "^5.65.10",

@@ -57,4 +64,3 @@ "command-line-args": "^5.2.1",

"css-loader": "^6.7.2",
"current-git-branch": "^1.1.0",
"dedent": "^0.7.0",
"dedent": "^1.5.1",
"fast-glob": "^3.2.12",

@@ -68,3 +74,3 @@ "find-up": "^5.0.0",

"lodash": "^4.17.21",
"lz-string": "^1.4.4",
"lz-string": "^1.5.0",
"memoize-one": "^6.0.0",

@@ -77,5 +83,6 @@ "mini-css-extract-plugin": "^2.7.2",

"prop-types": "^15.8.1",
"query-string": "^7.1.3",
"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",

@@ -86,5 +93,5 @@ "read-pkg-up": "^7.0.1",

"typescript": ">=5.0.0",
"use-debounce": "^9.0.4",
"use-debounce": "^10.0.0",
"webpack": "^5.75.0",
"webpack-dev-server": "^4.11.1",
"webpack-dev-server": "^5.0.2",
"webpack-merge": "^5.8.0"

@@ -96,10 +103,13 @@ },

"@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": "^12.0.2",
"eslint": "^8.44.0",
"cypress": "^13.6.6",
"eslint": "^8.56.0",
"eslint-config-seek": "^11.3.1",
"husky": "^8.0.2",
"jest": "^29.3.1",
"lint-staged": "^13.1.0",
"lint-staged": "^15.2.2",
"react": "^18.0.1",

@@ -115,5 +125,8 @@ "react-dom": "^18.0.1",

},
"packageManager": "pnpm@7.18.1",
"engines": {
"node": ">=18.12.0"
},
"packageManager": "pnpm@8.15.3",
"volta": {
"node": "16.13.0"
"node": "18.19.1"
},

@@ -126,3 +139,3 @@ "scripts": {

"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",

@@ -133,3 +146,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,3 +153,3 @@ "build:all": "concurrently 'npm:build:*(!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}'",

@@ -143,0 +156,0 @@ "lint:tsc": "tsc --noEmit",

10

README.md

@@ -83,2 +83,8 @@ <img src="images/logo.png?raw=true#gh-light-mode-only" alt="Playroom" title="Playroom" width="292" height="50" />

iframeSandbox: 'allow-scripts',
defaultVisibleWidths: [
// subset of widths to display on first load
],
defaultVisibleThemes: [
// subset of themes to display on first load
],
};

@@ -206,4 +212,8 @@ ```

## 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.

2

src/index.d.ts

@@ -18,2 +18,4 @@ interface PlayroomConfig {

reactDocgenTypescriptConfig?: import('react-docgen-typescript').ParserOptions;
defaultVisibleThemes?: string[];
defaultVisibleWidths?: number[];
}

@@ -20,0 +22,0 @@

5

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',

103

src/Playroom/CodeEditor/CodeEditor.css.ts

@@ -1,3 +0,5 @@

import { style, globalStyle, keyframes } from '@vanilla-extract/css';
import { vars, colorPaletteVars, sprinkles } from '../sprinkles.css';
import { style, globalStyle, keyframes, createVar } from '@vanilla-extract/css';
import { colorPaletteVars, sprinkles } from '../sprinkles.css';
import { vars } from '../vars.css';
import { toolbarItemSize } from '../ToolbarItem/ToolbarItem.css';

@@ -227,1 +229,98 @@ const minimumLineNumberWidth = '50px';

});
globalStyle('.CodeMirror-dialog', {
paddingLeft: vars.space.xlarge,
paddingRight: vars.space.xlarge,
minHeight: toolbarItemSize,
borderBottom: `1px solid ${colorPaletteVars.border.standard}`,
display: 'flex',
alignItems: 'center',
});
const searchOffset = createVar();
globalStyle('.CodeMirror-scroll', {
transform: `translateY(${searchOffset})`,
transition: vars.transition.fast,
});
globalStyle('.dialog-opened .CodeMirror-scroll', {
vars: {
[searchOffset]: `${toolbarItemSize}px`,
},
});
globalStyle('.dialog-opened .CodeMirror-lines', {
paddingBottom: searchOffset,
});
globalStyle('.CodeMirror-dialog input', {
font: vars.font.scale.large,
fontFamily: vars.font.family.code,
height: vars.touchableSize,
flexGrow: 1,
});
globalStyle('.CodeMirror-search-hint', {
display: 'none',
});
globalStyle('.CodeMirror-search-label', {
display: 'flex',
alignItems: 'center',
minHeight: vars.touchableSize,
font: vars.font.scale.large,
fontFamily: vars.font.family.code,
});
globalStyle('.CodeMirror-search-field', {
paddingLeft: vars.space.xlarge,
});
globalStyle('label.CodeMirror-search-label', {
flexGrow: 1,
});
globalStyle('.dialog-opened.cm-s-neo .CodeMirror-selected', {
background: colorPaletteVars.background.search,
});
globalStyle('.cm-overlay.cm-searching', {
paddingTop: 2,
paddingBottom: 2,
background: colorPaletteVars.background.selection,
});
globalStyle('.CodeMirror-dialog button:first-of-type', {
marginLeft: vars.space.xlarge,
});
globalStyle('.CodeMirror-dialog button', {
appearance: 'none',
font: vars.font.scale.standard,
fontFamily: vars.font.family.standard,
marginLeft: vars.space.small,
paddingTop: vars.space.small,
paddingBottom: vars.space.small,
paddingLeft: vars.space.large,
paddingRight: vars.space.large,
alignSelf: 'center',
display: 'block',
background: 'none',
borderRadius: vars.radii.large,
cursor: 'pointer',
border: '1px solid currentColor',
});
globalStyle('.CodeMirror-dialog button:focus', {
color: colorPaletteVars.foreground.accent,
boxShadow: colorPaletteVars.shadows.focus,
outline: 'none',
});
globalStyle('.CodeMirror-dialog button:focus:hover', {
background: colorPaletteVars.background.selection,
});
globalStyle('.CodeMirror-dialog button:hover', {
background: colorPaletteVars.background.transparent,
});

5

src/Playroom/CodeEditor/keymaps/wrap.ts

@@ -39,6 +39,9 @@ import type CodeMirror from 'codemirror';

const startCursorCharacterPosition =
from.ch + 1 + (isMultiLineSelection ? existingIndent : 0);
const newStartCursor = new Pos(
from.line + linesAdded,
from.ch + existingIndent + 1
startCursorCharacterPosition
);
const newEndCursor = isMultiLineSelection

@@ -45,0 +48,0 @@ ? new Pos(to.line + linesAdded + 2, from.ch + existingIndent + 2)

63

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([

10

src/Playroom/Frames/frameSrc.js
// eslint-disable-next-line import/no-unresolved
const frameConfig = require('__PLAYROOM_ALIAS__FRAME_COMPONENT__');
const defaultFrameSrc = ({ code, themeName }, { baseUrl, paramType }) =>
`${baseUrl}frame.html${
paramType === 'hash' ? '#' : ''
}?themeName=${encodeURIComponent(themeName)}&code=${encodeURIComponent(
code
)}`;
const defaultFrameSrc = ({ code, themeName }, { baseUrl }) =>
`${baseUrl}frame.html#?themeName=${encodeURIComponent(
themeName
)}&code=${encodeURIComponent(code)}`;
module.exports = frameConfig.frameSrc ? frameConfig.frameSrc : defaultFrameSrc;

51

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',
});

@@ -73,3 +58,2 @@ const checkboxSize = '20px';

opacity: 0,
pointerEvents: 'none',
}),

@@ -90,4 +74,4 @@ {

borderRadius: 'large',
marginRight: 'large',
padding: checkboxPadding,
pointerEvents: 'none',
}),

@@ -152,1 +136,20 @@ {

});
export const textField = style([
sprinkles({
font: 'large',
width: 'full',
paddingX: 'large',
boxSizing: 'border-box',
borderRadius: 'medium',
}),
{
color: colorPaletteVars.foreground.neutral,
height: vars.touchableSize,
background: colorPaletteVars.background.surface,
'::placeholder': {
color: colorPaletteVars.foreground.neutralSoft,
},
border: `1px solid ${colorPaletteVars.border.standard}`,
},
]);

3

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 @@

2

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({

69

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,
})
);

8

src/Playroom/palettes.ts

@@ -52,3 +52,4 @@ import { transparentize, mix, darken } from 'polished';

body: originalPalette.gray1,
selection: originalPalette.blue0,
selection: transparentize(0.85, originalPalette.blue1),
search: darken(0.15, originalPalette.blue0),
},

@@ -147,3 +148,3 @@ border: {

background: {
transparent: 'rgba(0, 0, 0, .15)',
transparent: 'rgba(255, 255, 255, .07)',
accent: seekPalette.blue[500],

@@ -155,3 +156,4 @@ positive: mix(0.6, seekPalette.grey[900], seekPalette.mint[500]),

body: darken(0.03, seekPalette.grey[900]),
selection: transparentize(0.85, seekPalette.blue[600]),
selection: transparentize(0.75, seekPalette.blue[600]),
search: transparentize(0.25, seekPalette.blue[600]),
},

@@ -158,0 +160,0 @@ border: {

3

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 @@

37

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([

@@ -57,8 +50,2 @@ sprinkles({

export const labelText = sprinkles({
display: 'block',
position: 'relative',
zIndex: 1,
});
export const label = style([

@@ -65,0 +52,0 @@ sprinkles({

3

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 @@

7

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 @@ {

58

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',
gutter: '40px',
},
});
export const colorPaletteVars = createThemeContract({

@@ -77,2 +34,3 @@ code: {

selection: null,
search: null,
},

@@ -101,2 +59,3 @@ border: {

flexWrap: ['wrap'],
flexGrow: [0, 1],
justifyContent: [

@@ -111,2 +70,3 @@ 'stretch',

alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
gap: vars.space,
paddingTop: vars.space,

@@ -116,6 +76,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'],

@@ -153,1 +113,3 @@ boxShadow: colorPaletteVars.shadows,

export const sprinkles = createSprinkles(responsiveProperties);
export type Sprinkles = Parameters<typeof sprinkles>[0];

49

src/Playroom/Stack/Stack.css.ts

@@ -1,4 +0,3 @@

import { calc } from '@vanilla-extract/css-utils';
import { style, createVar } from '@vanilla-extract/css';
import { vars } from '../sprinkles.css';
import { style, createVar, styleVariants } from '@vanilla-extract/css';
import { vars } from '../vars.css';

@@ -8,43 +7,11 @@ const size = createVar();

export const gap = style({
selectors: {
['&:not(:last-child)']: {
paddingBottom: size,
},
},
display: 'flex',
flexDirection: 'column',
gap: size,
});
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 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(6).toString(),
},
});
export const xlarge = style({
vars: {
[size]: calc(vars.grid).multiply(12).toString(),
},
});
}));

3

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 @@

76

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([

@@ -94,5 +66,3 @@ sprinkles({

position: 'relative',
display: 'flex',
overflow: 'auto',
transition: 'slow',
pointerEvents: 'auto',

@@ -104,15 +74,39 @@ }),

borderLeft: `${toolbarBorderThickness} solid ${colorPaletteVars.border.standard}`,
selectors: {
[`${root}:not(${isOpen}) &`]: {
transform: `translateX(${calc(`${toolbarOpenSize}px`).multiply(0.3)})`,
opacity: 0,
pointerEvents: 'none',
},
},
},
]);
export const preference = sprinkles({
position: 'absolute',
inset: 0,
});
export const transitionStyles = {
enter: style({
opacity: 0,
transform: `translateX(30%)`,
}),
enterActive: style([
sprinkles({
transition: 'slow',
}),
{
opacity: 1,
transform: `translateX(0)`,
},
]),
enterDone: style({
opacity: 1,
transform: `translateX(0)`,
}),
exit: style({
opacity: 1,
}),
exitActive: style([
sprinkles({
transition: 'slow',
}),
{
opacity: 0,
transform: `translateX(30%)`,
},
]),
exitDone: style({
opacity: 0,
transform: `translateX(30%)`,
}),
};

3

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 @@

17

src/utils/params.ts
import { createBrowserHistory } from 'history';
import { useState, useEffect } from 'react';
import queryString, { type ParsedQuery } from 'query-string';

@@ -14,6 +13,4 @@ import playroomConfig from '../config';

const newQuery = queryString.stringify({
...existingQuery,
code,
});
const newQuery = new URLSearchParams(existingQuery);
newQuery.set('code', code);

@@ -28,9 +25,5 @@ const params =

try {
return queryString.parse(
playroomConfig.paramType === 'hash'
? location.hash.replace(/^#/, '')
: location.search
);
return new URLSearchParams(location.hash.slice(1));
} catch (err) {
return {};
return new URLSearchParams();
}

@@ -40,3 +33,3 @@ }

export function useParams<ReturnType>(
selector: (rawParams: ParsedQuery) => ReturnType
selector: (rawParams: URLSearchParams) => ReturnType
): ReturnType {

@@ -43,0 +36,0 @@ const [params, setParams] = useState(getParamsFromQuery);

3

src/utils/usePreviewUrl.ts

@@ -12,3 +12,3 @@ import { useContext } from 'react';

export default (theme: string) => {
const [{ code }] = useContext(StoreContext);
const [{ code, title }] = useContext(StoreContext);

@@ -22,3 +22,4 @@ const isThemed = theme !== '__PLAYROOM__NO_THEME__';

paramType: playroomConfig.paramType,
title,
});
};

3

utils/index.d.ts

@@ -16,2 +16,3 @@ interface Snippet {

theme?: string;
title?: string;
}

@@ -26,2 +27,3 @@ export const compressParams: (options: CompressParamsOptions) => string;

paramType?: ParamType;
title?: string;
}

@@ -36,4 +38,5 @@

paramType?: ParamType;
title?: string;
}
export const createPreviewUrl: (options: CreatePreviewUrlOptions) => string;

28

utils/index.js
const lzString = require('lz-string');
const compressParams = ({ code, themes, widths, theme }) => {
const compressParams = ({ code, themes, widths, theme, title }) => {
const data = JSON.stringify({

@@ -9,2 +9,3 @@ ...(code ? { code } : {}),

...(theme ? { theme } : {}),
...(title ? { title } : {}),
});

@@ -15,7 +16,14 @@

const createUrl = ({ baseUrl, code, themes, widths, paramType = 'hash' }) => {
const createUrl = ({
baseUrl,
code,
themes,
widths,
title,
paramType = 'hash',
}) => {
let path = '';
if (code || themes || widths) {
const compressedData = compressParams({ code, themes, widths });
if (code || themes || widths || title) {
const compressedData = compressParams({ code, themes, widths, title });

@@ -34,7 +42,13 @@ path = `${paramType === 'hash' ? '#' : ''}?code=${compressedData}`;

const createPreviewUrl = ({ baseUrl, code, theme, paramType = 'hash' }) => {
const createPreviewUrl = ({
baseUrl,
code,
theme,
title,
paramType = 'hash',
}) => {
let path = '';
if (code || theme) {
const compressedData = compressParams({ code, theme });
if (code || theme || title) {
const compressedData = compressParams({ code, theme, title });

@@ -41,0 +55,0 @@ path = `/preview/${paramType === 'hash' ? '#' : ''}?code=${compressedData}`;

.changeset/config.json
.changeset/README.md
.editorconfig
.eslintignore
.eslintrc
.github/CODEOWNERS
.github/workflows/preview-site.yml
.github/workflows/release.yml
.github/workflows/snapshot.yml
.github/workflows/validate.yml
.husky/pre-commit
.nvmrc
.prettierignore
.prettierrc
cypress.config.mjs
cypress/e2e/editor.cy.js
cypress/e2e/keymaps.cy.js
cypress/e2e/scope.cy.js
cypress/e2e/smoke.cy.js
cypress/e2e/snippets.cy.js
cypress/e2e/toolbar.cy.js
cypress/e2e/urlHandling.cy.js
cypress/projects/basic/components.js
cypress/projects/basic/playroom.config.js
cypress/projects/basic/snippets.js
cypress/projects/basic/useScope.js
cypress/projects/themed/components.js
cypress/projects/themed/playroom.config.js
cypress/projects/themed/serve.json
cypress/projects/themed/snippets.js
cypress/projects/themed/themes.js
cypress/projects/typescript/components.ts
cypress/projects/typescript/components/Bar.tsx
cypress/projects/typescript/components/Foo.tsx
cypress/projects/typescript/components/styles.ts
cypress/projects/typescript/playroom.config.js
cypress/projects/typescript/snippets.ts
cypress/projects/typescript/tsconfig.json
cypress/support/commands.js
cypress/support/e2e.js
cypress/support/utils.js
cypress/tsconfig.json
scripts/postCommitStatus.js
src/Playroom/Divider/Divider.css.ts
src/Playroom/Divider/Divider.tsx
tsconfig.json
bin/cli.cjs

Sorry, the diff of this file is not supported yet

src/Playroom/Button/Button.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/CatchErrors/CatchErrors.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/CodeEditor/CodeEditor.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/Frame.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/Frames/Frames.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/FramesPanel/FramesPanel.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/Inline/Inline.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/Preview.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/PreviewPanel/CopyButton.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/PreviewPanel/PreviewPanel.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/SettingsPanel/SettingsPanel.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/Snippets/SearchField/SearchField.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/Snippets/Snippets.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/Stack/Stack.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/Toolbar/Toolbar.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/ToolbarItem/ToolbarItem.tsx

Sorry, the diff of this file is not supported yet

src/Playroom/ToolbarPanel/ToolbarPanel.tsx

Sorry, the diff of this file is not supported yet

src/StoreContext/StoreContext.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc