playroom 0.27.7 → 0.28.0

package/.babelrc

@@ -7,6 +7,7 @@
   "plugins": [
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-nullish-coalescing-operator"
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    "@vanilla-extract/babel-plugin"
   ]
 }

package/README.md

@@ -1,4 +1,5 @@
-<img src="images/logo.png?raw=true" alt="Playroom" title="Playroom" width="292" height="50" />
+<img src="images/logo.png?raw=true#gh-light-mode-only" alt="Playroom" title="Playroom" width="292" height="50" />
+<img src="images/logo-inverted.png?raw=true#gh-dark-mode-only" alt="Playroom" title="Playroom" width="292" height="50" />
 
 [![npm](https://img.shields.io/npm/v/playroom.svg?style=for-the-badge)](https://www.npmjs.com/package/playroom) [![Build Status](https://img.shields.io/github/workflow/status/seek-oss/playroom/Validate/master.svg?style=for-the-badge)](https://github.com/seek-oss/playroom/actions?query=workflow%3AValidate+branch%3Amaster)
 
@@ -27,6 +28,8 @@ Playroom allows you to create a zero-install code-oriented design environment, b
 
 [Mesh Design System](https://www.meshdesignsystem.com/playroom/) (Themed)
 
+[Mística Design System](https://mistica-web.vercel.app/playroom) (Themed)
+
 Send us a PR if you'd like to be in this list!
 
 ## Getting Started

package/lib/getStaticTypes.js

@@ -24,7 +24,6 @@ module.exports = async (playroomConfig) => {
   } = playroomConfig;
 
   const tsConfigPath = await findUp('tsconfig.json', { cwd });
-  const basePath = path.dirname(tsConfigPath);
 
   if (!tsConfigPath) {
     return {};
@@ -40,6 +39,7 @@ module.exports = async (playroomConfig) => {
     throw error;
   }
 
+  const basePath = path.dirname(tsConfigPath);
   const { options, errors } = ts.parseJsonConfigFileContent(
     config,
     ts.sys,

package/lib/makeWebpackConfig.js

@@ -5,6 +5,8 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const FriendlyErrorsWebpackPlugin = require('@soda/friendly-errors-webpack-plugin');
 const getStaticTypes = require('./getStaticTypes');
 const makeDefaultWebpackConfig = require('./makeDefaultWebpackConfig');
+const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const playroomPath = path.resolve(__dirname, '..');
 const includePaths = [
@@ -97,34 +99,24 @@ module.exports = async (playroomConfig, options) => {
           ],
         },
         {
-          test: /\.less$/,
-          include: includePaths,
+          test: /\.vanilla\.css$/i,
+          include: playroomPath.includes('node_modules')
+            ? /node_modules\/playroom/
+            : undefined,
           use: [
-            require.resolve('style-loader'),
+            MiniCssExtractPlugin.loader,
             {
               loader: require.resolve('css-loader'),
               options: {
-                modules: {
-                  mode: 'local',
-                  localIdentName: '[name]__[local]--[contenthash:base64:5]',
-                },
-              },
-            },
-            {
-              loader: require.resolve('postcss-loader'),
-              options: {
-                postcssOptions: {
-                  plugins: [require('autoprefixer')()],
-                },
+                url: false,
               },
             },
-            require.resolve('less-loader'),
           ],
         },
         {
           test: /\.css$/,
           include: path.dirname(require.resolve('codemirror/package.json')),
-          use: [require.resolve('style-loader'), require.resolve('css-loader')],
+          use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')],
         },
       ],
     },
@@ -163,6 +155,8 @@ module.exports = async (playroomConfig, options) => {
         filename: 'preview/index.html',
         publicPath: '../',
       }),
+      new VanillaExtractPlugin(),
+      new MiniCssExtractPlugin({ ignoreOrder: true }),
       ...(options.production ? [] : [new FriendlyErrorsWebpackPlugin()]),
     ],
     devtool: !options.production && 'eval-source-map',

package/lib/start.js

@@ -37,6 +37,9 @@ module.exports = async (config, callback) => {
       // Added to prevent Webpack HMR from breaking when iframeSandbox option is used
       // See: https://github.com/webpack/webpack-dev-server/issues/1604
       allowedHosts: 'all',
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
     };
 
     const compiler = webpack(webpackConfig);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.27.7",
+  "version": "0.28.0",
   "description": "Design with code, powered by your own component library",
   "main": "utils/index.js",
   "types": "utils/index.d.ts",
@@ -77,7 +77,11 @@
     "@types/prettier": "^2.2.3",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
-    "autoprefixer": "^10.2.5",
+    "@vanilla-extract/babel-plugin": "^1.1.5",
+    "@vanilla-extract/css": "^1.7.0",
+    "@vanilla-extract/css-utils": "^0.1.2",
+    "@vanilla-extract/sprinkles": "^1.4.0",
+    "@vanilla-extract/webpack-plugin": "^2.1.8",
     "babel-loader": "^8.2.2",
     "classnames": "^2.3.1",
     "codemirror": "^5.59.4",
@@ -93,16 +97,14 @@
     "history": "^5.0.0",
     "html-webpack-plugin": "^5.3.1",
     "intersection-observer": "^0.12.0",
-    "less": "^4.1.1",
-    "less-loader": "^8.0.0",
-    "less-vars-loader": "^1.1.0",
     "localforage": "^1.9.0",
     "locate-path": "^6.0.0",
     "lodash": "^4.17.21",
     "lz-string": "^1.4.4",
+    "mini-css-extract-plugin": "^2.6.0",
     "parse-prop-types": "^0.3.0",
+    "polished": "^4.1.4",
     "portfinder": "^1.0.28",
-    "postcss-loader": "^5.2.0",
     "prettier": "^2.2.1",
     "prop-types": "^15.7.2",
     "query-string": "^6.14.1",
@@ -112,7 +114,6 @@
     "react-use": "^17.2.1",
     "read-pkg-up": "^7.0.1",
     "scope-eval": "^1.0.0",
-    "style-loader": "^3.2.1",
     "typescript": "^4.3.2",
     "url-join": "^4.0.1",
     "use-debounce": "^3.3.0",

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

@@ -0,0 +1,85 @@
+import { style, createVar } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+
+export const reset = style([
+  sprinkles({
+    boxSizing: 'border-box',
+    border: 0,
+    margin: 'none',
+    padding: 'none',
+    appearance: 'none',
+    userSelect: 'none',
+    position: 'relative',
+    cursor: 'pointer',
+    display: 'flex',
+    placeItems: 'center',
+  }),
+  {
+    background: 'transparent',
+    outline: 'none',
+    textDecoration: 'none',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    height: vars.touchableSize,
+    WebkitTapHighlightColor: 'transparent',
+  },
+]);
+
+const highlightColor = createVar();
+
+export const base = style([
+  sprinkles({
+    borderRadius: 'large',
+    paddingY: 'none',
+    paddingX: 'large',
+    font: 'standard',
+  }),
+  {
+    vars: {
+      [highlightColor]: 'currentColor',
+    },
+    color: highlightColor,
+    border: `1px solid ${colorPaletteVars.foreground.neutralSoft}`,
+    height: calc(vars.grid).multiply(9).toString(),
+    ':hover': {
+      vars: {
+        [highlightColor]: colorPaletteVars.foreground.accent,
+      },
+      borderColor: highlightColor,
+    },
+    ':active': {
+      transform: 'scale(0.98)',
+    },
+    '::after': {
+      content: '',
+      position: 'absolute',
+      transform: 'translateY(-50%)',
+      minHeight: vars.touchableSize,
+      minWidth: vars.touchableSize,
+      left: calc(vars.grid).multiply(2).negate().toString(),
+      right: calc(vars.grid).multiply(2).negate().toString(),
+      height: '100%',
+      top: '50%',
+    },
+    selectors: {
+      [`&:focus:not(:active):not(:hover):not([disabled])`]: {
+        boxShadow: colorPaletteVars.shadows.focus,
+      },
+    },
+  },
+]);
+
+export const positive = style({
+  vars: {
+    [highlightColor]: `${colorPaletteVars.foreground.positive} !important`,
+  },
+  borderColor: highlightColor,
+});
+
+export const iconContainer = style([
+  sprinkles({ position: 'relative', paddingLeft: 'medium' }),
+  {
+    top: '1px',
+  },
+]);

package/src/Playroom/Button/Button.tsx

@@ -1,8 +1,7 @@
 import React, { ElementType, AllHTMLAttributes, ReactElement } from 'react';
 import classnames from 'classnames';
 
-// @ts-ignore
-import styles from './Button.less';
+import * as styles from './Button.css';
 
 interface BaseProps {
   as?: ElementType;
@@ -32,6 +31,7 @@ export const Button = ({
     className={classnames(styles.reset, styles.base, {
       [styles.positive]: tone === 'positive',
     })}
+    disabled={tone === 'positive'}
     {...props}
   >
     {children}

package/src/Playroom/CatchErrors/CatchErrors.css.ts

@@ -0,0 +1,8 @@
+import { sprinkles } from '../sprinkles.css';
+
+export const root = sprinkles({
+  position: 'fixed',
+  inset: 0,
+  overflow: 'auto',
+  padding: 'xxlarge',
+});

package/src/Playroom/CatchErrors/CatchErrors.tsx

@@ -0,0 +1,58 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Text } from '../Text/Text';
+import { Strong } from '../Strong/Strong';
+
+import * as styles from './CatchErrors.css';
+
+interface Props {
+  code?: string;
+  children: ReactNode;
+}
+interface State {
+  invalidCode: string | null;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+export default class CatchErrors extends Component<Props, State> {
+  state: State = {
+    error: null,
+    invalidCode: null,
+    errorInfo: null,
+  };
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    const { code = null } = this.props;
+    this.setState({ invalidCode: code, error, errorInfo });
+  }
+
+  render() {
+    const { invalidCode, error, errorInfo } = this.state;
+    const { code, children } = this.props;
+
+    if (code !== invalidCode || !error) {
+      return children;
+    }
+
+    // Ensure the stack only contains user-provided components
+    const componentStack = errorInfo
+      ? errorInfo.componentStack
+          .split('\n')
+          .filter((line: string) => /RenderCode/.test(line))
+          .map((line: string) => line.replace(/ \(created by .*/g, ''))
+      : [];
+
+    // Ignore the RenderCode container component
+    const lines = componentStack.slice(0, componentStack.length - 1);
+
+    return (
+      <div className={styles.root}>
+        <Text size="large" tone="critical">
+          <Strong>{error.message}</Strong>
+          {lines.map((line, i) => (
+            <span key={i}>{line}</span>
+          ))}
+        </Text>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,223 @@
+import { style, globalStyle, keyframes } from '@vanilla-extract/css';
+import { vars, colorPaletteVars, sprinkles } from '../sprinkles.css';
+
+const minimumLineNumberWidth = '50px';
+
+export const insertionPoint = style({
+  backgroundColor: colorPaletteVars.background.selection,
+});
+
+const fadeIn = keyframes({
+  '90%': {
+    opacity: 0,
+  },
+  '100%': {
+    opacity: 1,
+  },
+});
+export const errorMarker = style([
+  sprinkles({
+    borderRadius: 'large',
+    position: 'relative',
+    textAlign: 'right',
+    opacity: 0,
+  }),
+  {
+    backgroundColor: colorPaletteVars.background.critical,
+    color: colorPaletteVars.foreground.critical,
+    minWidth: minimumLineNumberWidth,
+    marginRight: '4px',
+    paddingRight: '8px',
+    animationName: fadeIn,
+    animationDuration: '1s',
+    animationTimingFunction: 'ease',
+    animationIterationCount: 1,
+    animationFillMode: 'forwards',
+  },
+]);
+
+export const foldGutter = style({
+  width: '1em',
+  padding: '0 8px',
+});
+
+export const foldOpen = style([
+  sprinkles({ cursor: 'pointer' }),
+  {
+    '::after': {
+      content: '-',
+    },
+  },
+]);
+
+export const foldFolded = style([
+  sprinkles({ cursor: 'pointer' }),
+  {
+    '::after': {
+      content: '+',
+      color: colorPaletteVars.foreground.accent,
+    },
+  },
+]);
+
+globalStyle('.react-codemirror2', {
+  height: '100%',
+  backgroundColor: colorPaletteVars.background.surface,
+});
+
+globalStyle('.CodeMirror', {
+  height: '100%',
+  width: '100%',
+  fontFamily: vars.font.family.code,
+  position: 'relative',
+  zIndex: 0,
+});
+
+globalStyle('.CodeMirror-gutters', {
+  minWidth: vars.codeGutterSize,
+  boxSizing: 'border-box',
+  paddingLeft: '8px',
+});
+
+globalStyle('.CodeMirror pre, .CodeMirror-linenumber', {
+  fontSize: '16px',
+});
+
+globalStyle('.CodeMirror-lines', {
+  padding: '16px 0',
+});
+
+globalStyle('.CodeMirror-hints', {
+  position: 'absolute',
+  zIndex: 10,
+  overflow: 'hidden',
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  boxShadow: colorPaletteVars.shadows.small,
+  borderRadius: vars.radii.medium,
+  backgroundColor: colorPaletteVars.background.surface,
+  fontSize: '90%',
+  lineHeight: '150%',
+  fontFamily: vars.font.family.code,
+  maxHeight: '20em',
+  overflowY: 'auto',
+});
+globalStyle('[data-playroom-dark] .CodeMirror-hints', {
+  backgroundColor: colorPaletteVars.background.neutral,
+});
+
+globalStyle('.CodeMirror-hint', {
+  margin: 0,
+  padding: '4px 8px',
+  borderRadius: vars.radii.small,
+  whiteSpace: 'pre',
+  color: colorPaletteVars.code.text,
+  cursor: 'pointer',
+});
+
+globalStyle('li.CodeMirror-hint-active', {
+  backgroundColor: colorPaletteVars.background.accent,
+  color: colorPaletteVars.foreground.neutralInverted,
+});
+
+globalStyle('.CodeMirror-linenumbers', {
+  minWidth: minimumLineNumberWidth,
+});
+
+globalStyle('.CodeMirror-foldmarker', {
+  color: colorPaletteVars.foreground.accent,
+  fontFamily: 'arial',
+  cursor: 'pointer',
+  padding: `0 ${vars.grid}`,
+});
+
+globalStyle('.cm-s-neo.CodeMirror', {
+  backgroundColor: colorPaletteVars.background.surface,
+  color: colorPaletteVars.code.text,
+});
+
+globalStyle('.cm-s-neo .CodeMirror-cursor', {
+  backgroundColor: colorPaletteVars.foreground.neutral,
+  width: '2px',
+});
+
+globalStyle('.cm-s-neo .CodeMirror-gutters', {
+  backgroundColor: colorPaletteVars.background.surface,
+  border: 'none',
+});
+
+globalStyle('.cm-s-neo .CodeMirror-gutters::after', {
+  content: '""',
+  backgroundColor: colorPaletteVars.background.surface,
+  position: 'absolute',
+  right: '2px',
+  height: '100%',
+  boxShadow: `0 0 10px 5px ${colorPaletteVars.background.surface}`,
+});
+
+globalStyle('.cm-s-neo .CodeMirror-selected', {
+  background: colorPaletteVars.background.selection,
+});
+
+globalStyle('.cm-s-neo .CodeMirror-activeline-background', {
+  background: 'transparent',
+});
+
+globalStyle('.cm-s-neo .CodeMirror-guttermarker-subtle', {
+  display: 'flex',
+  justifyContent: 'center',
+  color: colorPaletteVars.foreground.neutral,
+  transition: vars.transition.fast,
+});
+
+globalStyle(
+  `.cm-s-neo .CodeMirror-guttermarker-subtle:not(:hover):not(${foldFolded})`,
+  {
+    color: colorPaletteVars.foreground.neutralSoft,
+  }
+);
+
+globalStyle('.cm-s-neo .CodeMirror-linenumber', {
+  minWidth: minimumLineNumberWidth,
+  color: colorPaletteVars.foreground.neutral,
+  transition: vars.transition.fast,
+});
+
+globalStyle(
+  '.cm-s-neo .CodeMirror-linenumber:not(:hover):not(.cm-s-neo .CodeMirror-activeline .CodeMirror-linenumber)',
+  {
+    color: colorPaletteVars.foreground.neutralSoft,
+  }
+);
+
+globalStyle('.cm-s-neo .cm-tag', {
+  color: colorPaletteVars.code.tag,
+});
+
+globalStyle(
+  [
+    '.cm-s-neo .cm-attribute',
+    '.cm-s-neo .cm-keyword',
+    '.cm-s-neo .cm-property',
+  ].join(','),
+  {
+    color: colorPaletteVars.code.attribute,
+  }
+);
+
+globalStyle('.cm-s-neo .cm-string', {
+  color: colorPaletteVars.code.string,
+});
+
+globalStyle('.cm-s-neo .cm-atom', {
+  color: colorPaletteVars.code.atom,
+});
+
+globalStyle('.cm-s-neo .cm-variable', {
+  color: colorPaletteVars.code.variable,
+});
+
+globalStyle('.cm-s-neo .cm-number', {
+  color: colorPaletteVars.code.number,
+});

package/src/Playroom/CodeEditor/CodeEditor.tsx

@@ -8,8 +8,7 @@ import { StoreContext, CursorPosition } from '../../StoreContext/StoreContext';
 import { formatCode as format } from '../../utils/formatting';
 import { compileJsx } from '../../utils/compileJsx';
 
-// @ts-ignore
-import styles from './CodeEditor.less';
+import * as styles from './CodeEditor.css';
 
 import { UnControlled as ReactCodeMirror } from 'react-codemirror2';
 import 'codemirror/mode/jsx/jsx';
@@ -79,7 +78,7 @@ const validateCode = (editorInstance: Editor, code: string) => {
 
     if (lineNumber) {
       const marker = document.createElement('div');
-      marker.classList.add(styles.errorMarker);
+      marker.setAttribute('class', styles.errorMarker);
       marker.setAttribute(
         'title',
         // Remove our wrapping Fragment from error message

package/src/Playroom/Divider/Divider.css.ts

@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+
+export const root = sprinkles({
+  position: 'relative',
+});
+
+export const divider = style([
+  sprinkles({
+    position: 'absolute',
+    width: 'full',
+  }),
+  {
+    borderTop: `1px solid ${colorPaletteVars.border.standard}`,
+  },
+]);

package/src/Playroom/Divider/Divider.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-// @ts-ignore
-import styles from './Divider.less';
+import * as styles from './Divider.css';
 
 export const Divider = () => (
   <div className={styles.root}>

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

@@ -0,0 +1,83 @@
+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 frameContainer = style([
+  sprinkles({
+    position: 'relative',
+    height: 'full',
+    textAlign: 'left',
+    display: 'flex',
+    flexDirection: 'column',
+    paddingRight: 'gutter',
+  }),
+  {},
+]);
+
+export const frame = style([
+  sprinkles({ position: 'relative', height: 'full', border: 0 }),
+  {
+    flexGrow: 1,
+  },
+]);
+
+export const frameBorder = style([
+  sprinkles({
+    position: 'absolute',
+    inset: 0,
+    boxShadow: 'small',
+    transition: 'medium',
+    pointerEvents: 'none',
+  }),
+  {
+    selectors: {
+      [`&:not(:hover)`]: {
+        opacity: 0.8,
+      },
+    },
+  },
+]);
+
+const frameNameHeight = '30px';
+export const frameName = style([
+  sprinkles({
+    display: 'flex',
+    alignItems: 'center',
+    transition: 'medium',
+  }),
+  {
+    flex: `0 0 ${frameNameHeight}`,
+    height: frameNameHeight,
+    marginBottom: '-10px',
+    selectors: {
+      [`${frameContainer}:not(:hover) &`]: {
+        opacity: 0.3,
+      },
+    },
+  },
+]);