playroom 0.28.0 → 0.28.1

package/.github/workflows/preview-site.yml

@@ -13,12 +13,12 @@ jobs:
       CI: true
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@master
+        uses: actions/checkout@v3
 
-      - name: Setup Node.js 12.x
-        uses: actions/setup-node@master
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: 12.x
+          node-version-file: 'package.json'
 
       - name: Install Dependencies
         run: yarn --frozen-lockfile

package/.github/workflows/release.yml

@@ -13,16 +13,16 @@ jobs:
       CI: true
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@master
+        uses: actions/checkout@v3
         with:
           # This makes Actions fetch all Git history for semantic-release
           fetch-depth: 0
           token: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Setup Node.js 12.x
-        uses: actions/setup-node@master
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: 12.x
+          node-version-file: 'package.json'
 
       - name: Install Dependencies
         run: yarn --frozen-lockfile
@@ -31,4 +31,4 @@ jobs:
         run: yarn semantic-release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.SEEK_OSS_CI_NPM_TOKEN }}

package/.github/workflows/snapshot.yml

@@ -0,0 +1,31 @@
+name: Snapshot
+
+on: workflow_dispatch
+
+jobs:
+  release:
+    name: Publish snapshot version
+    runs-on: ubuntu-latest
+    env:
+      CI: true
+    steps:
+      - name: Check out repo
+        uses: actions/checkout@v3
+        with:
+          # This makes Actions fetch all Git history for semantic-release
+          fetch-depth: 0
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: 'package.json'
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Publish
+        uses: seek-oss/changesets-snapshot@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.SEEK_OSS_CI_NPM_TOKEN }}

package/.github/workflows/validate.yml

@@ -10,12 +10,12 @@ jobs:
       CI: true
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@master
+        uses: actions/checkout@v3
 
-      - name: Setup Node.js 12.x
-        uses: actions/setup-node@master
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: 12.x
+          node-version-file: 'package.json'
 
       - name: Install Dependencies
         run: yarn --frozen-lockfile

package/README.md

@@ -30,6 +30,8 @@ Playroom allows you to create a zero-install code-oriented design environment, b
 
 [Mística Design System](https://mistica-web.vercel.app/playroom) (Themed)
 
+[Shopify Polaris](https://polaris.shopify.com/sandbox?code=N4Igxg9gJgpiBcIA8BhAhgJygHQHYAJ8BnGSXKTATwDEIIAXGDAQTHoEsJciBeYAbWBlGuevHwByACLsiAW1lEJAXwC6yvIQAOGdnKq0GTVhy58hXEWMkBRAB5aIGevgBKMR85UbcAPk34qJhQAHQAEjBosBj4aGyc3HyC%2BMIwouISACoMaAA2%2BADKeTBK%2BGrK%2BBz0uTA82CBFNUT1-gSEgQAKEI4AbkwB7bHxfXwAZnkkPoOEcRw9aPROfAPTSABCAK70iwRQsmC5EEQbGDD4Wrlo7H4r0-gAauwwAO6Fxc1td0gA9JvbXK07lNplwUIcSHwABQASnwPF8%2BGAymBhEBqxMCQAMrIXOxGHJeAILKI0tYJABxDBHIhvJoqAA0iNS6UkADkYC5GiUVOp8N80YQfl1ekw0T90FhwpFomKJaECqRTDdPoFMjA7PQUJYrrhRbd8ABNCAbFJoAgbEjEd74U6eeg0xbEGBna6jJz6JWxABGxpclGNMTAFsWciYREAmAT6pzRGletAkKD4LgpXSMXRoYgbMAAC1iNKI1ogfRiHFDjK9lBS2bNutyjKc%2BAr%2BqI9DQo1GIRWPzVGq1oh1era4uCIQV8QBASCkrHnqqNTqIGyrfyXJpa1OaAA1lAIM9cC0u%2B4iAGwDBsS39adjydT6y0KHzERrgBzDaXDAZAs1CSMi4nPKfu83j6niMAEkk%2BqEMAkHtF%2BJQZAA8lgYY-jBMxyMaLISAAqgUUgACQAAwhIRhGoSqdwnLkGS2k49rfNGKH0jByjMRR7TQexgxwUQGTuPQJzcORdyDPemFkgAtLhBEAEwAKzEaRwkiYQVE0R4dFEN8pwCRgQlsSprH6uol5pNEACS%2BJQqBciwvCiIwWQLaIjxjJiRsoiMlRFQ8PgNkANwwTpgn4JCaGBEeJ5njiISWWB4WqRguR8N5CVDKeRBPl67C5HilCYmgXowMlwAAAaPC8tIlPgboxPhwA8copUoip%2BACq1SAFK2YCbu1rWBF1cSbrF%2BI1TluS%2BA17zKD8g09SNYF9R1c3DXFciTe5ogzd8K0LetaWzd1vXhT8kU3tFLZ7UthDQoF7HIvq-KTt8cqjoqCSyiOM4JJUeLzvUUiRMMCwwImtHOM0ICZl6UAbKD7VIOe9BLYjMVrb4HRoP6WxED8SNXfqqOXejS55FVa6Vig1a4LWeNo-iCPfEjYovV970TkOr3fcmc61PUrJGAeKpID2mratcg53Jk2ZnDxNoaRDsSnLE8w5YVNRJrguSVuwoz4NjMQtk4Lo0jzMuFNm3S65Q%2BoXGaSYxNm7DPjLGCdsL3yi32rYSxgLNc%2BzyrDlgvggPSID0DLoZEAg-AgIcYDFPAaQgKo4fPOwUCRzH8D8OoQA)
+
 Send us a PR if you'd like to be in this list!
 
 ## Getting Started

package/cypress/integration/smoke.js

@@ -1,4 +1,8 @@
-import { getFirstFrame, loadPlayroom } from '../support/utils';
+import {
+  assertPreviewContains,
+  getFirstFrame,
+  loadPlayroom,
+} from '../support/utils';
 
 describe('Smoke', () => {
   it('frames are interactive', () => {
@@ -9,8 +13,8 @@ describe('Smoke', () => {
   it('preview mode loads correctly', () => {
     cy.visit(
       'http://localhost:9000/preview#?code=N4Igxg9gJgpiBcIA8AxCEB8r1YEIEMAnAei2LUyXJxAF8g'
-    )
-      .get('body')
-      .then((el) => expect(el.get(0).innerText).to.eq('Foo\nFoo\nBar'));
+    );
+
+    assertPreviewContains('Foo\nFoo\nBar');
   });
 });

package/cypress/support/utils.js

@@ -114,9 +114,14 @@ export const assertFramesMatch = (matches) =>
     });
 
 export const assertPreviewContains = (text) =>
-  cy.get('body').then((el) => {
-    expect(el.get(0).innerText).to.eq(text);
-  });
+  cy
+    .then(() => {
+      cy.get('[data-testid="splashscreen"]').should('not.be.visible');
+    })
+    .get('body')
+    .then((el) => {
+      expect(el.get(0).innerText).to.eq(text);
+    });
 
 export const loadPlayroom = () =>
   cy

package/lib/makeWebpackConfig.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
@@ -18,6 +19,22 @@ module.exports = async (playroomConfig, options) => {
   const relativeResolve = (requirePath) =>
     require.resolve(requirePath, { paths: [playroomConfig.cwd] });
 
+  let isLegacyReact = true;
+
+  try {
+    // eslint-disable-next-line no-sync
+    const pkgContents = fs.readFileSync(
+      relativeResolve('react-dom/package.json'),
+      {
+        encoding: 'utf-8',
+      }
+    );
+    const { version } = JSON.parse(pkgContents);
+    isLegacyReact = !(version.startsWith('18') || version.startsWith('0.0.0'));
+  } catch (e) {
+    throw new Error('Unable to read `react-dom` package json');
+  }
+
   const staticTypes = await getStaticTypes(playroomConfig);
 
   const ourConfig = {
@@ -158,6 +175,16 @@ module.exports = async (playroomConfig, options) => {
       new VanillaExtractPlugin(),
       new MiniCssExtractPlugin({ ignoreOrder: true }),
       ...(options.production ? [] : [new FriendlyErrorsWebpackPlugin()]),
+      // If using a version of React earlier than 18, ignore the
+      // react-dom/client import. This hack can be removed when
+      // support for older versions of React is removed.
+      ...(isLegacyReact
+        ? [
+            new webpack.IgnorePlugin({
+              resourceRegExp: /react-dom\/client$/,
+            }),
+          ]
+        : []),
     ],
     devtool: !options.production && 'eval-source-map',
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "description": "Design with code, powered by your own component library",
   "main": "utils/index.js",
   "types": "utils/index.d.ts",
@@ -75,8 +75,8 @@
     "@types/lodash": "^4.14.168",
     "@types/lz-string": "^1.3.34",
     "@types/prettier": "^2.2.3",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
     "@vanilla-extract/babel-plugin": "^1.1.5",
     "@vanilla-extract/css": "^1.7.0",
     "@vanilla-extract/css-utils": "^0.1.2",
@@ -108,10 +108,9 @@
     "prettier": "^2.2.1",
     "prop-types": "^15.7.2",
     "query-string": "^6.14.1",
-    "re-resizable": "^6.9.0",
-    "react-codemirror2": "^7.2.1",
+    "re-resizable": "^6.9.6",
     "react-docgen-typescript": "^2.1.0",
-    "react-use": "^17.2.1",
+    "react-use": "^17.4.0",
     "read-pkg-up": "^7.0.1",
     "scope-eval": "^1.0.0",
     "typescript": "^4.3.2",
@@ -135,15 +134,19 @@
     "husky": "^4.3.8",
     "jest": "^26.6.3",
     "lint-staged": "^10.5.4",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.1",
+    "react-dom": "^18.0.1",
     "semantic-release": "^17.4.2",
     "serve": "^11.3.2",
     "start-server-and-test": "^1.12.0",
     "surge": "^0.22.1"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17.0",
-    "react-dom": "^16.8 || ^17.0"
+    "react": "^16.8 || ^17 || ^18",
+    "react-dom": "^16.8 || ^17 || ^18"
+  },
+  "volta": {
+    "node": "12.22.12",
+    "yarn": "1.22.19"
   }
 }

package/src/Playroom/CodeEditor/CodeEditor.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useContext, useEffect, useCallback } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
-import { Editor } from 'codemirror';
+import CodeMirror, { Editor } from 'codemirror';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/neo.css';
 
@@ -10,7 +10,7 @@ import { compileJsx } from '../../utils/compileJsx';
 
 import * as styles from './CodeEditor.css';
 
-import { UnControlled as ReactCodeMirror } from 'react-codemirror2';
+import { UnControlled as ReactCodeMirror } from './CodeMirror2';
 import 'codemirror/mode/jsx/jsx';
 import 'codemirror/addon/edit/closetag';
 import 'codemirror/addon/edit/closebrackets';
@@ -21,36 +21,27 @@ import 'codemirror/addon/fold/foldcode';
 import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/fold/brace-fold';
 
-const completeAfter = (cm: Editor, predicate: () => boolean) => {
-  const CodeMirror = cm.constructor;
+const completeAfter = (cm: Editor, predicate?: () => boolean) => {
   if (!predicate || predicate()) {
     setTimeout(() => {
       if (!cm.state.completionActive) {
-        // @ts-ignore
         cm.showHint({ completeSingle: false });
       }
     }, 100);
   }
 
-  // @ts-ignore
   return CodeMirror.Pass;
 };
 
-const completeIfAfterLt = (cm: Editor) => {
-  const CodeMirror = cm.constructor;
-
-  return completeAfter(cm, () => {
+const completeIfAfterLt = (cm: Editor) =>
+  completeAfter(cm, () => {
     const cur = cm.getCursor();
-    // @ts-ignore
     // eslint-disable-next-line new-cap
     return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) === '<';
   });
-};
 
-const completeIfInTag = (cm: Editor) => {
-  const CodeMirror = cm.constructor;
-
-  return completeAfter(cm, () => {
+const completeIfInTag = (cm: Editor) =>
+  completeAfter(cm, () => {
     const tok = cm.getTokenAt(cm.getCursor());
     if (
       tok.type === 'string' &&
@@ -59,11 +50,9 @@ const completeIfInTag = (cm: Editor) => {
     ) {
       return false;
     }
-    // @ts-ignore
     const inner = CodeMirror.innerMode(cm.getMode(), tok.state).state;
     return inner.tagName;
   });
-};
 
 const validateCode = (editorInstance: Editor, code: string) => {
   editorInstance.clearGutter('errorGutter');
@@ -228,7 +217,6 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
   }, [highlightLineNumber]);
 
   return (
-    // @ts-ignore
     <ReactCodeMirror
       editorDidMount={(editorInstance) => {
         editorInstanceRef.current = editorInstance;
@@ -259,6 +247,7 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
         autoCloseBrackets: true,
         theme: 'neo',
         gutters: ['errorGutter', 'CodeMirror-linenumbers', styles.foldGutter],
+        // @ts-expect-error
         hintOptions: { schemaInfo: hints },
         viewportMargin: 50,
         lineNumbers: true,
@@ -275,7 +264,6 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
         extraKeys: {
           Tab: (cm) => {
             if (cm.somethingSelected()) {
-              // @ts-ignore
               cm.indentSelection('add');
             } else {
               const indent = cm.getOption('indentUnit') as number;