feat: Add paramType config to use standard search queries (#161)

Co-authored-by: Michael Taranto <michaeltaranto@users.noreply.github.com>

.github/workflows/preview-site.yml

@@ -24,7 +24,7 @@ jobs:
         run: yarn --frozen-lockfile
 
       - name: Build
-        run: yarn example:braid:build
+        run: yarn preview:build
 
       - name: Deploy to surge
         run: yarn deploy-preview -d playroom--${GITHUB_SHA}.surge.sh

README.md

@@ -59,6 +59,7 @@ module.exports = {
   widths: [320, 375, 768, 1024],
   port: 9000,
   openBrowser: true,
+  paramType: 'search', // default is 'hash'
   exampleCode: `
     <Button>
       Hello World!

cypress/integration/editor.js

@@ -4,9 +4,14 @@ import {
   assertFirstFrameContains,
   assertCodePaneContains,
   assertCodePaneLineCount,
+  loadPlayroom,
 } from '../support/utils';
 
 describe('Editor', () => {
+  beforeEach(() => {
+    loadPlayroom();
+  });
+
   it('renders to frame', () => {
     typeCode('<Foo />');
     assertFirstFrameContains('Foo');

cypress/integration/smoke.js

@@ -1,6 +1,10 @@
-import { getFirstFrame } from '../support/utils';
+import { getFirstFrame, loadPlayroom } from '../support/utils';
 
 describe('Smoke', () => {
+  beforeEach(() => {
+    loadPlayroom();
+  });
+
   it('frames are interactive', () => {
     getFirstFrame().click('center');
   });

cypress/integration/snippets.js

@@ -10,10 +10,14 @@ import {
   assertSnippetCount,
   assertSnippetsListIsVisible,
   mouseOverSnippet,
+  loadPlayroom,
 } from '../support/utils';
 
 describe('Snippets', () => {
-  beforeEach(() => typeCode('<div>Initial <span>code'));
+  beforeEach(() => {
+    loadPlayroom();
+    typeCode('<div>Initial <span>code');
+  });
 
   it('driven with mouse', () => {
     // Open and format for insertion point

cypress/integration/toolbar.js

@@ -5,9 +5,14 @@ import {
   typeCode,
   gotoPreview,
   visit,
+  loadPlayroom,
 } from '../support/utils';
 
 describe('Toolbar', () => {
+  beforeEach(() => {
+    loadPlayroom();
+  });
+
   it('filter widths', () => {
     const frames = ['320px', '375px', '768px', '1024px'];
     const widthIndexToSelect = 1;

cypress/integration/urlHandling.js

@@ -6,29 +6,64 @@ import {
 } from '../support/utils';
 
 describe('URL handling', () => {
-  it('code (base64 encoding)', () => {
-    visit(
-      'http://localhost:9000/#?code=PEZvbz48Rm9vPjxCYXIvPjwvRm9vPjwvRm9vPg'
-    );
+  describe('where paramType is hash', () => {
+    it('code (base64 encoding)', () => {
+      visit(
+        'http://localhost:9000/#?code=PEZvbz48Rm9vPjxCYXIvPjwvRm9vPjwvRm9vPg'
+      );
 
-    assertFirstFrameContains('Foo\nFoo\nBar');
-    assertCodePaneContains('<Foo><Foo><Bar/></Foo></Foo>');
-  });
+      assertFirstFrameContains('Foo\nFoo\nBar');
+      assertCodePaneContains('<Foo><Foo><Bar/></Foo></Foo>');
+    });
+
+    it('code (LZ-based compression)', () => {
+      visit(
+        'http://localhost:9000/#?code=N4Igxg9gJgpiBcIA8AxCEB8r1YEIEMAnAei2LUyXJxAF8g'
+      );
 
-  it('code (LZ-based compression)', () => {
-    visit(
-      'http://localhost:9000/#?code=N4Igxg9gJgpiBcIA8AxCEB8r1YEIEMAnAei2LUyXJxAF8g'
-    );
+      assertFirstFrameContains('Foo\nFoo\nBar');
+      assertCodePaneContains('<Foo><Foo><Bar/></Foo></Foo>');
+    });
 
-    assertFirstFrameContains('Foo\nFoo\nBar');
-    assertCodePaneContains('<Foo><Foo><Bar/></Foo></Foo>');
+    it('widths', () => {
+      visit(
+        'http://localhost:9000/#?code=N4Ig7glgJgLgFgZxALgNoGYDsBWANJgNgA4BdAXyA'
+      );
+
+      assertFramesMatch(['375px', '768px']);
+    });
   });
 
-  it('widths', () => {
-    visit(
-      'http://localhost:9000/#?code=N4Ig7glgJgLgFgZxALgNoGYDsBWANJgNgA4BdAXyA'
-    );
+  describe('where paramType is search', () => {
+    it('code (base64 encoding)', () => {
+      visit(
+        'http://localhost:9001/index.html?code=PEZvbz48Rm9vPjxCYXIvPjwvRm9vPjwvRm9vPg'
+      );
+
+      assertFirstFrameContains('Foo\nFoo\nBar');
+      assertCodePaneContains('<Foo><Foo><Bar/></Foo></Foo>');
+    });
+
+    it('code (LZ-based compression)', () => {
+      visit(
+        'http://localhost:9001/index.html?code=N4Igxg9gJgpiBcIA8AxCEB8r1YEIEMAnAei2LUyXJxAF8g'
+      );
+
+      assertFirstFrameContains('Foo\nFoo\nBar');
+      assertCodePaneContains('<Foo><Foo><Bar/></Foo></Foo>');
+    });
+
+    it('widths', () => {
+      visit(
+        'http://localhost:9001/index.html?code=N4Ig7glgJgLgFgZxALgNoGYDsBWANJgNgA4BdAXyA'
+      );
 
-    assertFramesMatch(['375px', '768px']);
+      assertFramesMatch([
+        'themeOne – 375px',
+        'themeTwo – 375px',
+        'themeOne – 768px',
+        'themeTwo – 768px',
+      ]);
+    });
   });
 });

cypress/projects/basic/playroom.config.js

@@ -3,4 +3,5 @@ module.exports = {
   snippets: './snippets',
   outputPath: './dist',
   openBrowser: false,
+  storageKey: 'playroom-example-basic',
 };

cypress/projects/themed/components.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const withPropTypes = (component) => {
+  component.propTypes = {
+    color: PropTypes.oneOf(['red', 'blue']),
+    children: PropTypes.node,
+  };
+
+  return component;
+};
+const parent = {
+  border: '1px solid currentColor',
+  padding: '10px 10px 10px 15px',
+};
+
+export const Foo = withPropTypes(({ color = 'black', children }) => (
+  <div style={{ color }}>
+    Foo{children ? <div style={parent}>{children}</div> : null}
+  </div>
+));
+
+export const Bar = withPropTypes(({ color = 'black', children }) => (
+  <div style={{ color }}>
+    Bar{children ? <div style={parent}>{children}</div> : null}
+  </div>
+));

cypress/projects/themed/playroom.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  components: './components',
+  snippets: './snippets',
+  themes: './themes',
+  outputPath: './dist',
+  openBrowser: false,
+  paramType: 'search',
+  port: 9001,
+  storageKey: 'playroom-example-themed',
+};

cypress/projects/themed/serve.json

@@ -0,0 +1,3 @@
+{
+  "cleanUrls": false
+}

cypress/projects/themed/snippets.js

@@ -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>',
+  },
+];

cypress/projects/themed/themes.js

@@ -0,0 +1,2 @@
+export const themeOne = { name: 'one' };
+export const themeTwo = { name: 'two' };

cypress/support/index.js

@@ -1,18 +1 @@
 require('./commands');
-const { getFirstFrame } = require('./utils');
-
-beforeEach(() => {
-  cy.visit('http://localhost:9000')
-    .window()
-    .then((win) => {
-      const { storageKey } = win.__playroomConfig__;
-      indexedDB.deleteDatabase(storageKey);
-    })
-    .reload()
-    .then(() =>
-      getFirstFrame().then(
-        ($iframe) =>
-          new Cypress.Promise((resolve) => $iframe.on('load', resolve))
-      )
-    );
-});

cypress/support/utils.js

@@ -110,3 +110,19 @@ export const assertPreviewContains = (text) =>
   cy.get('body').then((el) => {
     expect(el.get(0).innerText).to.eq(text);
   });
+
+export const loadPlayroom = () =>
+  cy
+    .visit('http://localhost:9000')
+    .window()
+    .then((win) => {
+      const { storageKey } = win.__playroomConfig__;
+      indexedDB.deleteDatabase(storageKey);
+    })
+    .reload()
+    .then(() =>
+      getFirstFrame().then(
+        ($iframe) =>
+          new Cypress.Promise((resolve) => $iframe.on('load', resolve))
+      )
+    );

lib/provideDefaultConfig.js

@@ -17,5 +17,6 @@ module.exports = ({ storageKey, ...restConfig }) => ({
   openBrowser: true,
   storageKey: storageKey || generateStorageKey(),
   baseUrl: '',
+  paramType: 'hash',
   ...restConfig,
 });

package.json

@@ -8,13 +8,19 @@
     "playroom": "bin/cli.js"
   },
   "scripts": {
-    "cypress": "start-server-and-test example:build-and-serve http://localhost:9000 'cypress run'",
-    "cypress:dev": "start-server-and-test example:start http://localhost:9000 'cypress open'",
-    "example:braid:build": "cd examples/braid-design-system && yarn && yarn build",
-    "example:start": "./bin/cli.js start --config cypress/projects/basic/playroom.config.js",
-    "example:build": "./bin/cli.js build --config cypress/projects/basic/playroom.config.js",
-    "example:serve": "PORT=9000 serve cypress/projects/basic/dist",
-    "example:build-and-serve": "yarn example:build && yarn example:serve",
+    "cypress": "start-server-and-test examples:build-and-serve '9000|9001' 'cypress run'",
+    "cypress:dev": "start-server-and-test examples:start '9000|9001' 'cypress open'",
+    "example:start:basic": "./bin/cli.js start --config cypress/projects/basic/playroom.config.js",
+    "example:build:basic": "./bin/cli.js build --config cypress/projects/basic/playroom.config.js",
+    "example:serve:basic": "PORT=9000 serve cypress/projects/basic/dist",
+    "example:start:themed": "./bin/cli.js start --config cypress/projects/themed/playroom.config.js",
+    "example:build:themed": "./bin/cli.js build --config cypress/projects/themed/playroom.config.js",
+    "example:serve:themed": "PORT=9001 serve --config ../serve.json cypress/projects/themed/dist",
+    "examples:start": "concurrently 'npm:example:start:*'",
+    "examples:build": "concurrently 'npm:example:build:*'",
+    "examples:serve": "concurrently 'npm:example:serve:*'",
+    "examples:build-and-serve": "yarn examples:build && yarn examples:serve",
+    "preview:build": "cd examples/braid-design-system && yarn && yarn build",
     "commit": "git-cz",
     "lint": "eslint . && prettier --list-different '**/*.{js,md,less,ts,tsx}' && tsc --noEmit",
     "format": "prettier --write '**/*.{js,md,less,ts,tsx}'",
@@ -69,6 +75,7 @@
     "@types/classnames": "^2.2.9",
     "@types/codemirror": "^0.0.84",
     "@types/dedent": "^0.7.0",
+    "@types/history": "^4.7.6",
     "@types/lodash": "^4.14.149",
     "@types/lz-string": "^1.3.33",
     "@types/prettier": "^2.0.0",
@@ -89,6 +96,7 @@
     "find-up": "^4.1.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "fuzzy": "^0.1.3",
+    "history": "^4.10.1",
     "html-webpack-plugin": "^4.0.0-beta.5",
     "intersection-observer": "^0.7.0",
     "less": "^3.10.3",
@@ -124,6 +132,7 @@
     "@types/jest": "^25.2.1",
     "commitizen": "^4.0.4",
     "commitlint-config-seek": "^1.0.0",
+    "concurrently": "^5.2.0",
     "cypress": "^3.8.3",
     "cz-conventional-changelog": "^3.1.0",
     "eslint": "^6.8.0",