playroom 0.31.0 → 0.32.0

package/.babelrc

@@ -2,6 +2,6 @@
   "presets": [
     "@babel/preset-typescript",
     "@babel/preset-env",
-    "@babel/preset-react"
+    ["@babel/preset-react", { "runtime": "automatic" }]
   ]
 }

package/.github/workflows/release.yml

@@ -17,9 +17,10 @@ jobs:
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
+          token: ${{ secrets.SEEK_OSS_CI_GITHUB_TOKEN }}
 
       - name: Set up pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
 
       - name: Set up Node.js
         uses: actions/setup-node@v3

package/.prettierignore

@@ -1,3 +1,4 @@
 cypress/plugins/
 cypress/fixtures/
 dist
+pnpm-lock.yaml

package/@types/babel__standalone.d.ts

@@ -3,7 +3,7 @@ interface TransformResponse {
 }
 
 declare module '@babel/standalone' {
-  import { TransformOptions } from '@babel/core';
+  import type { TransformOptions } from '@babel/core';
 
   function transform(
     code: string,

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # playroom
 
+## 0.32.0
+
+### Minor Changes
+
+- 720d542: Drop support for React 16. Consumers are encouraged to upgrade to React 17+, which is a drop-in replacement.
+- 720d542: Support TypeScript 5.0+
+
 ## 0.31.0
 
 ### Minor Changes

package/README.md

@@ -1,7 +1,7 @@
 <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)
+[![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/actions/workflow/status/seek-oss/playroom/validate.yml?branch=master&style=for-the-badge)](https://github.com/seek-oss/playroom/actions?query=workflow%3AValidate+branch%3Amaster)
 
 ---
 
@@ -32,6 +32,8 @@ Playroom allows you to create a zero-install code-oriented design environment, b
 
 [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)
 
+[Agriculture Design System](https://design-system.agriculture.gov.au/playroom/#?code=N4Igxg9gJgpiBcIA8AhCAPABFAhgJwGsA%2BAHQDtNMkAJGHWPTAIxzAIHM8IBXMqAXhIgm0AJ4BBADYAXIZkkR2EfsCQAZRREwB6IgF9MACzpQAlmXaCQAUXQAHCHmmYAyjDwA3U2Bhzd5SiQAWRxzADkcDwDKTFNpGABbAGcVAG1geRwmGEl4TCFqCATfEAAaIzwYADM8oW05PQBdPWjKJJhIPnxRAEl45LSMySyc2pAXU3YKcyFymD5rSUT56TykcQ8caXwezp0iTCaWin3yJG00dFIyJAAFHHYYAGEIMni3zBwUoQTQsiFroFblx2oCYkhDABGIj3R5GEzmdjnKFgwJ2VExDSVBKxOxJbg4qAQBSMJJxT7FaTlTrtMDxaTcRj0Ux2UxJMCIzA5OIAOkwtxySzeMCSAEduDBPrITjFPngwNwuUtTFV5lByps8KZuEkuWRTDiyK85srVXxMPqmIY%2BQBFbhs8WS1iZDn6nBK3mtGIAeXlpkwmu1urIWwgjswdnmW1MTB1XOcvymbOwybs%2BAZWpWmASr3iSXKIfZMAzXsoWrMCskcYSOr5PWFj1JPiWWrFEql8km3GGmH6DkYORgKrVfIAaiLpDHuwTSwHidxpGmqdhiY4uYq8AvNziaTBxVtypIY%2B4tAArHXSLTDV2md2XpyOcqmKCzwNx%2B-3z7CzBk5w4SkWmykh8uI8x0BQWzYPaKb-nyTx4F8nyduw3bujgs44N%2BOBHvuOLXuYt58gAqs4RIkpguHlJwkTPu6MCKlA0Himy5Q5ksSSTr4MoxPhboriSfIAGI6j4LrVqY5R2IY%2BDFgh2bEhOpiSh%2Ba70eUVQEbGSSzrxt6dtkXA8l65zosZpncZQLg6pGfBsu0mCqtw7C3s4eCGK8Cq6omIZKkOZpQJ8OHcLBmBBI4TD%2BvRbI5gFMDoLOnSbJIR66l4HjuHJg7DnwfJhN2ww4ulkgOZpcZHgZEB8iEHRRrqSxaO0CSlAlry0vSjI-uS-7Fri%2BKFTk1JFDFWj9tIk6frhuX5f%2B%2BknrOZDTdSjL4rqd6MqyurFuU00JJAeCRowCgiE4yaUrWmBSKYuGBVdwUJLOSTQNhIrZs9%2BL0DgfK3NJ7TJXGv4Uj15UnpgC4WtNEaONsmCOCGlR1v8Fkes4Sx0jqT6sN2yY9R486LpBMCPMufZrrDMlciCCPxHgjE4sWs6-OxwW4A53WrWAX7xL1BIRlqCTJuYrPcByWl8lZSQ2WYST2Y9uDsQzxZxsxqXdnYC5bJKiXYSlVXhf6nQoZKqMMptROvdL7oaZaOo6cLJtfYKKwiuGfZxox-pFZ8dtrjte0HUZ3EmWC5zAhAoJnNosLPLmKzXKgGDYPgxDREggkQBA1PMKwHBcLwAhCCIUASDIALGSGHhyreAC0wzZJIVhVOn1Ol0j6jmAQahstKsqyu5WoAF65ths6UEeZAECkwCpCPMQZIYlQ1PkIAAMSzJkddjIUxQNM1SOynPC9jKvZTr6MS8ACruMkX4BZ0ZiTq1O8z5QB-VEfa%2B12fQjAqYmxgKIkMjz-yfnvWeFQ35L2PoeEYuQl7iEwJUbWACFAWE7OPXscQlggJ7jEZos5-CB20OXYO2g04Z3cHHC4GBrggD0EAA)
+
 Send us a PR if you'd like to be in this list!
 
 ## Getting Started

package/cypress/e2e/smoke.cy.js

@@ -17,4 +17,12 @@ describe('Smoke', () => {
 
     assertPreviewContains('Foo\nFoo\nBar');
   });
+
+  it('preview mode works with TypeScript components', () => {
+    cy.visit(
+      'http://localhost:9002/preview#?code=N4Igxg9gJgpiBcIA8AxCEB8r1YEIEMAnAei2LUyXJxAF8g'
+    );
+
+    assertPreviewContains('Foo\nFoo\nBar');
+  });
 });

package/cypress/e2e/snippets.cy.js

@@ -27,7 +27,7 @@ describe('Snippets', () => {
     assertCodePaneLineCount(8);
 
     // Browse snippetlist
-    assertSnippetCount(4);
+    assertSnippetCount(5);
     mouseOverSnippet(0);
     assertFirstFrameContains('Initial code\nFoo\nFoo');
     mouseOverSnippet(1);
@@ -78,7 +78,7 @@ describe('Snippets', () => {
     assertCodePaneLineCount(8);
 
     // Browse snippetlist
-    assertSnippetCount(4);
+    assertSnippetCount(5);
     filterSnippets('{downarrow}');
     assertFirstFrameContains('Initial code\nFoo\nFoo');
     filterSnippets('{downarrow}');

package/cypress/e2e/toolbar.cy.js

@@ -47,7 +47,7 @@ describe('Toolbar', () => {
         });
       })
       .get('[data-testid="copyToClipboard"]')
-      .click()
-      .then(() => expect(copySpy).to.have.been.called);
+      .click();
+    cy.then(() => expect(copySpy).to.have.been.called);
   });
 });

package/cypress/projects/basic/components.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 const withPropTypes = (component) => {

package/cypress/projects/basic/snippets.js

@@ -19,4 +19,9 @@ export default [
     name: 'Blue',
     code: '<Bar color="blue">Blue Bar</Bar>',
   },
+  {
+    group: 'Scope',
+    name: 'hello world',
+    code: '<Foo>{hello()} {world()}</Foo>',
+  },
 ];

package/cypress/projects/themed/components.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 const withPropTypes = (component) => {

package/cypress/projects/typescript/components/Bar.tsx

@@ -0,0 +1,13 @@
+import type React from 'react';
+import { parent } from './styles';
+
+type Props = {
+  color: 'red' | 'blue' | 'black';
+  children: React.ReactNode;
+};
+
+export const Bar: React.FC<Props> = ({ color = 'black', children }) => (
+  <div style={{ color }}>
+    Bar{children ? <div style={parent}>{children}</div> : null}
+  </div>
+);

package/cypress/projects/typescript/components/Foo.tsx

@@ -0,0 +1,13 @@
+import type React from 'react';
+import { parent } from './styles';
+
+type Props = {
+  color: 'red' | 'blue' | 'black';
+  children: React.ReactNode;
+};
+
+export const Foo: React.FC<Props> = ({ color = 'black', children }) => (
+  <div style={{ color }}>
+    Foo{children ? <div style={parent}>{children}</div> : null}
+  </div>
+);

package/cypress/projects/typescript/components/styles.ts

@@ -0,0 +1,4 @@
+export const parent = {
+  border: '4px solid currentColor',
+  padding: '10px 10px 10px 15px',
+};

package/cypress/projects/typescript/components.ts

@@ -0,0 +1,2 @@
+export { Foo } from './components/Foo';
+export { Bar } from './components/Bar';

package/cypress/projects/typescript/playroom.config.js

@@ -0,0 +1,33 @@
+module.exports = {
+  components: './components.ts',
+  snippets: './snippets.ts',
+  outputPath: './dist',
+  openBrowser: false,
+  storageKey: 'playroom-example-typescript',
+  webpackConfig: () => ({
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: require.resolve('babel-loader'),
+              options: {
+                babelrc: false,
+                presets: [
+                  require.resolve('@babel/preset-env'),
+                  [
+                    require.resolve('@babel/preset-react'),
+                    { runtime: 'automatic' },
+                  ],
+                  require.resolve('@babel/preset-typescript'),
+                ],
+              },
+            },
+          ],
+        },
+      ],
+    },
+  }),
+};

package/cypress/projects/typescript/snippets.ts

@@ -0,0 +1,22 @@
+export default [
+  {
+    group: 'Foo',
+    name: 'Default',
+    code: '<Foo>Foo</Foo>',
+  },
+  {
+    group: 'Foo',
+    name: 'Red',
+    code: '<Foo color="red">Red Foo</Foo>',
+  },
+  {
+    group: 'Bar',
+    name: 'Default',
+    code: '<Bar>Bar</Bar>',
+  },
+  {
+    group: 'Bar',
+    name: 'Blue',
+    code: '<Bar color="blue">Blue Bar</Bar>',
+  },
+];

package/cypress/projects/typescript/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "module": "es2022",
+    "allowImportingTsExtensions": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "es2022"],
+    "target": "es2022"
+  }
+}

package/cypress/support/utils.js

@@ -58,12 +58,11 @@ export const gotoPreview = () => {
 export const toggleSnippets = () =>
   cy.get('[data-testid="toggleSnippets"]').click();
 
-export const filterSnippets = (search) =>
-  // eslint-disable-next-line cypress/no-unnecessary-waiting
-  cy
-    .get('[data-testid="filterSnippets"]')
-    .type(search, { force: true })
-    .wait(200);
+export const filterSnippets = (search) => {
+  cy.get('[data-testid="filterSnippets"]').type(search, { force: true });
+  // eslint-disable-next-line @finsit/cypress/no-unnecessary-waiting
+  cy.wait(200);
+};
 
 export const assertSnippetsListIsVisible = () =>
   cy.get('[data-testid="snippets"]').should('be.visible');
@@ -82,7 +81,7 @@ export const assertSnippetCount = (count) =>
 
 export const assertFirstFrameContains = (text) => {
   getFirstFrame().then(($el) =>
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    // eslint-disable-next-line @finsit/cypress/no-unnecessary-waiting
     cy
       .wrap($el.contents().find('body'))
       .wait(WAIT_FOR_FRAME_TO_RENDER)
@@ -120,14 +119,13 @@ export const selectLines = (numLines, direction = 'down') => {
 export const assertCodePaneContains = (text) => {
   getCodeEditor().within(() => {
     const lines = [];
-    cy.get('.CodeMirror-line')
-      .each(($el) => lines.push($el.text()))
-      .then(() => {
-        const code = lines.join('\n');
-        // removes code mirrors invisible last line character placeholder
-        // which is inserted to preserve prettiers new line at end of string.
-        expect(code.replace(/[\u200b]$/, '')).to.eq(text);
-      });
+    cy.get('.CodeMirror-line').each(($el) => lines.push($el.text()));
+    cy.then(() => {
+      const code = lines.join('\n');
+      // removes code mirrors invisible last line character placeholder
+      // which is inserted to preserve prettiers new line at end of string.
+      expect(code.replace(/[\u200b]$/, '')).to.eq(text);
+    });
   });
 };
 

package/cypress/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": false,
+    "types": ["cypress"]
+  },
+  "include": ["**/*"], // override the include from the root tsconfig
+  "exclude": [] // override the exclude from the root tsconfig
+}

package/lib/defaultModules/FrameComponent.js

@@ -1,3 +1 @@
-import React, { Fragment } from 'react';
-
-export default ({ children }) => <Fragment>{children}</Fragment>;
+export default ({ children }) => <>{children}</>;

package/lib/makeDefaultWebpackConfig.js

@@ -11,7 +11,10 @@ module.exports = (playroomConfig) => ({
             options: {
               presets: [
                 require.resolve('@babel/preset-env'),
-                require.resolve('@babel/preset-react'),
+                [
+                  require.resolve('@babel/preset-react'),
+                  { runtime: 'automatic' },
+                ],
               ],
             },
           },

package/lib/makeWebpackConfig.js

@@ -90,7 +90,10 @@ module.exports = async (playroomConfig, options) => {
                     require.resolve('@babel/preset-env'),
                     { shippedProposals: true },
                   ],
-                  require.resolve('@babel/preset-react'),
+                  [
+                    require.resolve('@babel/preset-react'),
+                    { runtime: 'automatic' },
+                  ],
                   require.resolve('@babel/preset-typescript'),
                 ],
               },
@@ -109,7 +112,10 @@ module.exports = async (playroomConfig, options) => {
                     require.resolve('@babel/preset-env'),
                     { shippedProposals: true },
                   ],
-                  require.resolve('@babel/preset-react'),
+                  [
+                    require.resolve('@babel/preset-react'),
+                    { runtime: 'automatic' },
+                  ],
                 ],
               },
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "Design with code, powered by your own component library",
   "main": "utils/index.js",
   "types": "utils/index.d.ts",
@@ -75,7 +75,7 @@
     "react-use": "^17.4.0",
     "read-pkg-up": "^7.0.1",
     "scope-eval": "^1.0.0",
-    "typescript": "^4.5.4",
+    "typescript": ">=5.0.0",
     "use-debounce": "^9.0.2",
     "webpack": "^5.75.0",
     "webpack-dev-server": "^4.11.1",
@@ -88,8 +88,8 @@
     "@types/jest": "^29.2.4",
     "concurrently": "^7.6.0",
     "cypress": "^12.0.2",
-    "eslint": "^8.29.0",
-    "eslint-config-seek": "^10.1.2",
+    "eslint": "^8.44.0",
+    "eslint-config-seek": "^11.3.1",
     "husky": "^8.0.2",
     "jest": "^29.3.1",
     "lint-staged": "^13.1.0",
@@ -100,16 +100,16 @@
     "surge": "^0.23.1"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17 || ^18",
-    "react-dom": "^16.8 || ^17 || ^18"
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
   },
   "packageManager": "pnpm@7.18.1",
   "volta": {
     "node": "16.13.0"
   },
   "scripts": {
-    "cypress": "start-server-and-test build-and-serve:all '9000|9001' 'cypress run'",
-    "cypress:dev": "start-server-and-test start:all '9000|9001' 'cypress open --browser chrome --e2e'",
+    "cypress": "start-server-and-test build-and-serve:all '9000|9001|9002' 'cypress run'",
+    "cypress:dev": "start-server-and-test start:all '9000|9001|9002' 'cypress open --browser chrome --e2e'",
     "cypress:verify": "cypress verify",
     "start:basic": "./bin/cli.js start --config cypress/projects/basic/playroom.config.js",
     "build:basic": "./bin/cli.js build --config cypress/projects/basic/playroom.config.js",
@@ -117,11 +117,18 @@
     "start:themed": "./bin/cli.js start --config cypress/projects/themed/playroom.config.js",
     "build:themed": "./bin/cli.js build --config cypress/projects/themed/playroom.config.js",
     "serve:themed": "PORT=9001 serve --config ../serve.json --no-request-logging cypress/projects/themed/dist",
-    "start:all": "concurrently 'npm:start:basic' 'npm:start:themed'",
-    "build:all": "concurrently 'npm:build:basic' 'npm:build:themed'",
-    "serve:all": "concurrently 'npm:serve:basic' 'npm:serve:themed'",
+    "start:typescript": "./bin/cli.js start --config cypress/projects/typescript/playroom.config.js",
+    "build:typescript": "./bin/cli.js build --config cypress/projects/typescript/playroom.config.js",
+    "serve:typescript": "PORT=9002 serve --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": "eslint . && prettier --list-different '**/*.{js,md,ts,tsx}' && tsc --noEmit",
+    "lint": "concurrently 'npm:lint:*'",
+    "lint:eslint": "eslint --cache .",
+    "lint:prettier": "prettier --list-different '**/*.{js,md,ts,tsx}'",
+    "lint:tsc": "tsc --noEmit",
+    "lint:cypress": "tsc --project cypress/tsconfig.json",
     "format": "prettier --write '**/*.{js,md,ts,tsx}'",
     "version": "changeset version",
     "release": "changeset publish",

package/src/Playroom/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React, { ElementType, AllHTMLAttributes, ReactElement } from 'react';
+import type { ElementType, AllHTMLAttributes, ReactElement } from 'react';
 import classnames from 'classnames';
 
 import * as styles from './Button.css';

package/src/Playroom/CatchErrors/CatchErrors.tsx

@@ -1,4 +1,4 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Component, type ErrorInfo, type ReactNode } from 'react';
 import { Text } from '../Text/Text';
 import { Strong } from '../Strong/Strong';
 

package/src/Playroom/CodeEditor/CodeEditor.tsx

@@ -1,10 +1,14 @@
-import React, { useRef, useContext, useEffect, useCallback } from 'react';
+import { useRef, useContext, useEffect, useCallback } from 'react';
+// @ts-expect-error no types
 import { useDebouncedCallback } from 'use-debounce';
-import { Editor } from 'codemirror';
+import type { Editor } from 'codemirror';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/neo.css';
 
-import { StoreContext, CursorPosition } from '../../StoreContext/StoreContext';
+import {
+  StoreContext,
+  type CursorPosition,
+} from '../../StoreContext/StoreContext';
 import { formatCode as format, isMac } from '../../utils/formatting';
 import {
   closeFragmentTag,

package/src/Playroom/CodeEditor/keymaps/complete.ts

@@ -1,4 +1,4 @@
-import CodeMirror, { Editor } from 'codemirror';
+import CodeMirror, { type Editor } from 'codemirror';
 
 export const completeAfter = (cm: Editor, predicate?: () => boolean) => {
   if (!predicate || predicate()) {

package/src/Playroom/CodeEditor/keymaps/cursors.ts

@@ -1,8 +1,8 @@
-import CodeMirror, { Editor, Pos } from 'codemirror';
+import CodeMirror, { type Editor, Pos } from 'codemirror';
 
 import 'codemirror/addon/search/searchcursor';
 
-import { Direction, Selection } from './types';
+import type { Direction, Selection } from './types';
 
 function wordAt(cm: Editor, pos: CodeMirror.Position) {
   let start = pos.ch;

package/src/Playroom/CodeEditor/keymaps/lines.ts

@@ -1,6 +1,5 @@
-import CodeMirror from 'codemirror';
-import { Editor, Pos } from 'codemirror';
-import { Direction, Selection } from './types';
+import CodeMirror, { type Editor, Pos } from 'codemirror';
+import type { Direction, Selection } from './types';
 type RangeMethod = Extract<keyof CodeMirror.Range, 'from' | 'to'>;
 
 const directionToMethod: Record<Direction, RangeMethod> = {

package/src/Playroom/CodeEditor/keymaps/types.ts

@@ -1,4 +1,4 @@
-import { Editor } from 'codemirror';
+import type { Editor } from 'codemirror';
 
 export type Direction = 'up' | 'down';
 

package/src/Playroom/CodeEditor/keymaps/wrap.ts

@@ -1,5 +1,6 @@
-import CodeMirror, { Editor, Pos } from 'codemirror';
-import { Selection } from './types';
+import type CodeMirror from 'codemirror';
+import { type Editor, Pos } from 'codemirror';
+import type { Selection } from './types';
 
 interface TagRange {
   from: CodeMirror.Position;

package/src/Playroom/Divider/Divider.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import * as styles from './Divider.css';
 
 export const Divider = () => (

package/src/Playroom/Frame.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type React from 'react';
+import type { ReactNode } from 'react';
 import { useParams } from '../utils/params';
 import CatchErrors from './CatchErrors/CatchErrors';
 // @ts-expect-error

package/src/Playroom/Frames/Frames.tsx

@@ -1,8 +1,8 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import flatMap from 'lodash/flatMap';
 import Iframe from './Iframe';
 import { compileJsx } from '../../utils/compileJsx';
-import { PlayroomProps } from '../Playroom';
+import type { PlayroomProps } from '../Playroom';
 import { Strong } from '../Strong/Strong';
 import { Text } from '../Text/Text';
 import playroomConfig from '../../config';

package/src/Playroom/Frames/Iframe.tsx

@@ -1,9 +1,9 @@
-import React, {
+import {
   useState,
   useEffect,
   useRef,
-  AllHTMLAttributes,
-  MutableRefObject,
+  type AllHTMLAttributes,
+  type MutableRefObject,
 } from 'react';
 import { useIntersection } from 'react-use';
 

package/src/Playroom/FramesPanel/CheckmarkSvg.tsx

@@ -1,4 +1,4 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 export default (props: SVGProps<SVGSVGElement>) => (
   <svg

package/src/Playroom/FramesPanel/FramesPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, ReactNode } from 'react';
+import { useContext, type ReactNode } from 'react';
 import Checkmark from './CheckmarkSvg';
 import { Heading } from '../Heading/Heading';
 import { ToolbarPanel } from '../ToolbarPanel/ToolbarPanel';

package/src/Playroom/Heading/Heading.tsx

@@ -1,4 +1,4 @@
-import React, { ElementType, ReactNode } from 'react';
+import React, { type ElementType, type ReactNode } from 'react';
 import classnames from 'classnames';
 
 import * as styles from './Heading.css';

package/src/Playroom/Inline/Inline.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, Children } from 'react';
+import { type ReactElement, Children } from 'react';
 import classnames from 'classnames';
 
 import * as styles from './Inline.css';

package/src/Playroom/Logo/Logo.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface Props {
   size?: number | string;
 }

package/src/Playroom/Playroom.tsx

@@ -1,15 +1,19 @@
-import React, { useContext, ComponentType, Fragment } from 'react';
+import { useContext, type ComponentType, Fragment } from 'react';
 import classnames from 'classnames';
+// @ts-expect-error no types
 import { useDebouncedCallback } from 'use-debounce';
 import { Resizable } from 're-resizable';
 import Frames from './Frames/Frames';
 import { WindowPortal } from './WindowPortal';
-import { Snippets } from '../../utils';
+import type { Snippets } from '../../utils';
 import componentsToHints from '../utils/componentsToHints';
 import Toolbar, { toolbarItemCount } from './Toolbar/Toolbar';
 import ChevronIcon from './icons/ChevronIcon';
 import { StatusMessage } from './StatusMessage/StatusMessage';
-import { StoreContext, EditorPosition } from '../StoreContext/StoreContext';
+import {
+  StoreContext,
+  type EditorPosition,
+} from '../StoreContext/StoreContext';
 
 const MIN_HEIGHT = toolbarItemSize * toolbarItemCount;
 const MIN_WIDTH = toolbarOpenSize + toolbarItemSize + 80;

package/src/Playroom/Preview.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType, ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import lzString from 'lz-string';
 
 import { useParams } from '../utils/params';

package/src/Playroom/PreviewPanel/CopyButton.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import copy from 'copy-to-clipboard';
 
 import TickIcon from '../icons/TickIcon';

package/src/Playroom/PreviewPanel/PreviewPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import usePreviewUrl from '../../utils/usePreviewUrl';
 import { ThemeSelector } from './ThemeSelector';

package/src/Playroom/PreviewPanel/ThemeSelector.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import classnames from 'classnames';
 
 import ChevronIcon from '../icons/ChevronIcon';

package/src/Playroom/SettingsPanel/SettingsPanel.tsx

@@ -1,9 +1,9 @@
-import React, { useContext, ReactChild } from 'react';
+import React, { useContext, type ReactChild } from 'react';
 import { Heading } from '../Heading/Heading';
 import { ToolbarPanel } from '../ToolbarPanel/ToolbarPanel';
 import {
-  ColorScheme,
-  EditorPosition,
+  type ColorScheme,
+  type EditorPosition,
   StoreContext,
 } from '../../StoreContext/StoreContext';
 import { Stack } from '../Stack/Stack';

package/src/Playroom/Snippets/SearchField/SearchField.tsx

@@ -1,4 +1,4 @@
-import React, { AllHTMLAttributes } from 'react';
+import type { AllHTMLAttributes } from 'react';
 
 import * as styles from './SearchField.css';
 

package/src/Playroom/Snippets/Snippets.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import classnames from 'classnames';
 import fuzzy from 'fuzzy';
+// @ts-expect-error no types
 import { useDebouncedCallback } from 'use-debounce';
-import { PlayroomProps } from '../Playroom';
-import { Snippet } from '../../../utils';
+import type { PlayroomProps } from '../Playroom';
+import type { Snippet } from '../../../utils';
 import SearchField from './SearchField/SearchField';
 import { Strong } from '../Strong/Strong';
 import { Text } from '../Text/Text';

package/src/Playroom/SplashScreen/SplashScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { Logo } from '../Logo/Logo';
 

package/src/Playroom/Stack/Stack.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, Children } from 'react';
+import { type ReactElement, Children } from 'react';
 import classnames from 'classnames';
 
 import { Divider } from '../Divider/Divider';

package/src/Playroom/StatusMessage/StatusMessage.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useContext,
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-} from 'react';
+import { useContext, useState, useEffect, useRef, useCallback } from 'react';
 import classnames from 'classnames';
 import { StoreContext } from '../../StoreContext/StoreContext';
 import { Text } from '../Text/Text';

package/src/Playroom/Strong/Strong.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import * as styles from './Strong.css';
 

package/src/Playroom/Text/Text.tsx

@@ -1,4 +1,4 @@
-import React, { ElementType, ReactNode } from 'react';
+import React, { type ElementType, type ReactNode } from 'react';
 import classnames from 'classnames';
 
 import * as styles from './Text.css';

package/src/Playroom/Toolbar/Toolbar.tsx

@@ -1,7 +1,7 @@
-import React, { useContext, useState, useCallback } from 'react';
+import { useContext, useState, useCallback } from 'react';
 import { useTimeoutFn } from 'react-use';
 import classnames from 'classnames';
-import { PlayroomProps } from '../Playroom';
+import type { PlayroomProps } from '../Playroom';
 import { StoreContext } from '../../StoreContext/StoreContext';
 import FramesPanel from '../FramesPanel/FramesPanel';
 import PreviewPanel from '../PreviewPanel/PreviewPanel';

package/src/Playroom/ToolbarItem/ToolbarItem.tsx

@@ -1,4 +1,4 @@
-import React, { ReactChild } from 'react';
+import type { ReactChild } from 'react';
 import classnames from 'classnames';
 import TickIcon from '../icons/TickIcon';
 

package/src/Playroom/ToolbarPanel/ToolbarPanel.tsx

@@ -1,4 +1,4 @@
-import React, { ElementType, ReactNode } from 'react';
+import React, { type ElementType, type ReactNode } from 'react';
 
 import * as styles from './ToolbarPanel.css';
 

package/src/Playroom/WindowPortal/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useRef, useState } from 'react';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import playroomConfig from '../../config';

package/src/Playroom/icons/AddIcon.tsx

@@ -1,4 +1,4 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 export default (props: SVGProps<SVGSVGElement>) => (
   <svg

package/src/Playroom/icons/ChevronIcon.tsx

@@ -1,4 +1,4 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 import classnames from 'classnames';
 
 import * as styles from './ChevronIcon.css';

package/src/Playroom/icons/ColorModeDarkIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

package/src/Playroom/icons/ColorModeLightIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

package/src/Playroom/icons/ColorModeSystemIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

package/src/Playroom/icons/DismissIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface Props {
   size?: number | string;
 }

package/src/Playroom/icons/EditorBottomIcon.tsx

@@ -1,4 +1,4 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 export default (props: SVGProps<SVGSVGElement>) => (
   <svg

package/src/Playroom/icons/EditorRightIcon.tsx

@@ -1,4 +1,4 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 export default (props: SVGProps<SVGSVGElement>) => (
   <svg

package/src/Playroom/icons/EditorUndockedIcon.tsx

@@ -1,4 +1,4 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 export default (props: SVGProps<SVGSVGElement>) => (
   <svg

package/src/Playroom/icons/FramesIcon.tsx

@@ -1,4 +1,4 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 export default (props: SVGProps<SVGSVGElement>) => (
   <svg

package/src/Playroom/icons/PlayIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface PlayIconProps {
   size?: number;
 }

package/src/Playroom/icons/SettingsIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

package/src/Playroom/icons/ShareIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface Props {
   size?: number;
 }

package/src/Playroom/icons/ThemesIcon.tsx

@@ -1,4 +1,4 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 export default (props: SVGProps<SVGSVGElement>) => (
   <svg

package/src/Playroom/icons/TickIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface TickIconProps {
   size?: number;
 }

package/src/Playroom/icons/WidthsIcon.tsx

@@ -1,4 +1,4 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
 export default (props: SVGProps<SVGSVGElement>) => (
   <svg

package/src/StoreContext/StoreContext.tsx

@@ -1,20 +1,21 @@
-import React, {
+import {
   useEffect,
   createContext,
   useReducer,
-  ReactNode,
-  Dispatch,
+  type ReactNode,
+  type Dispatch,
 } from 'react';
 import copy from 'copy-to-clipboard';
 import localforage from 'localforage';
 import lzString from 'lz-string';
 import dedent from 'dedent';
+// @ts-expect-error no types
 import { useDebouncedCallback } from 'use-debounce';
 
-import { Snippet, compressParams } from '../../utils';
+import { type Snippet, compressParams } from '../../utils';
 import { formatForInsertion, formatAndInsert } from '../utils/formatting';
 import { getParamsFromQuery, updateUrlCode } from '../utils/params';
-import { PlayroomProps } from '../Playroom/Playroom';
+import type { PlayroomProps } from '../Playroom/Playroom';
 import { isValidLocation } from '../utils/cursor';
 import playroomConfig from '../config';
 

package/src/frame.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { renderElement } from './render';
 import Frame from './Playroom/Frame';
 

package/src/index.d.ts

@@ -13,6 +13,7 @@ interface PlayroomConfig {
   baseUrl?: string;
   paramType: 'hash' | 'search';
   iframeSandbox?: string;
+  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   reactDocgenTypescriptConfig?: import('react-docgen-typescript').ParserOptions;
 }
 

package/src/index.js

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { renderElement } from './render';
 import Playroom from './Playroom/Playroom';
 import { StoreProvider } from './StoreContext/StoreContext';

package/src/preview.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { renderElement } from './render';
 import Preview from './Playroom/Preview';
 

package/src/utils/componentsToHints.ts

@@ -1,7 +1,7 @@
 import omit from 'lodash/omit';
 // @ts-expect-error
 import parsePropTypes from 'parse-prop-types';
-import { PlayroomProps } from '../Playroom/Playroom';
+import type { PlayroomProps } from '../Playroom/Playroom';
 
 const staticTypes = __PLAYROOM_GLOBAL__STATIC_TYPES__;
 

package/src/utils/cursor.ts

@@ -1,4 +1,4 @@
-import { CursorPosition } from '../StoreContext/StoreContext';
+import type { CursorPosition } from '../StoreContext/StoreContext';
 import { validateCode } from './compileJsx';
 
 const breakoutString = '<b>"b"</b>';

package/src/utils/formatting.ts

@@ -1,6 +1,6 @@
 import prettier from 'prettier/standalone';
 import babel from 'prettier/parser-babel';
-import { CursorPosition } from '../StoreContext/StoreContext';
+import type { CursorPosition } from '../StoreContext/StoreContext';
 import { insertAtCursor } from './cursor';
 
 export interface CodeWithCursor {

package/src/utils/params.ts

@@ -1,6 +1,6 @@
 import { createBrowserHistory } from 'history';
 import { useState, useEffect } from 'react';
-import queryString, { ParsedQuery } from 'query-string';
+import queryString, { type ParsedQuery } from 'query-string';
 
 import playroomConfig from '../config';
 

package/tsconfig.json

@@ -2,14 +2,19 @@
   "compilerOptions": {
     "noEmit": true,
     "skipLibCheck": true,
-    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "module": "es2022",
     "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
     "resolveJsonModule": true,
     "noUnusedLocals": true,
     "strict": true,
-    "jsx": "preserve",
-    "lib": ["dom", "es2019"],
-    "target": "es5"
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "es2022"],
+    "target": "es2022"
   },
-  "include": ["lib", "src", "@types"]
+  "include": ["src", "@types"],
+  "exclude": ["cypress", "node_modules"]
 }

package/cypress/.eslintrc

@@ -1,12 +0,0 @@
-{
-  "plugins": [
-    "cypress"
-  ],
-  "extends": [
-    "seek",
-    "plugin:cypress/recommended"
-  ],
-  "env": {
-    "cypress/globals": true
-  }
-}