feat: Introduce preview mode (#148)

.github/workflows/preview-site.yml

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

cypress/integration/toolbar.js

@@ -1,6 +1,9 @@
 import {
   assertFramesMatch,
   selectWidthPreferenceByIndex,
+  assertPreviewContains,
+  typeCode,
+  gotoPreview,
   visit
 } from '../support/utils';
 
@@ -14,6 +17,14 @@ describe('Toolbar', () => {
     assertFramesMatch([frames[widthIndexToSelect]]);
   });
 
+  it('preview', () => {
+    typeCode('<Foo><Foo><Bar/>');
+
+    gotoPreview();
+
+    assertPreviewContains('Foo\nFoo\nBar');
+  });
+
   it('copy to clipboard', () => {
     const copySpy = cy.spy();
 

cypress/support/index.js

@@ -9,9 +9,9 @@ beforeEach(() => {
       indexedDB.deleteDatabase(storageKey);
     })
     .reload()
-    .then(() => {
+    .then(() =>
       getFirstFrame().then(
         $iframe => new Cypress.Promise(resolve => $iframe.on('load', resolve))
-      );
-    });
+      )
+    );
 });

cypress/support/utils.js

@@ -32,12 +32,21 @@ export const formatCode = () =>
 
 export const selectWidthPreferenceByIndex = index =>
   cy
-    .get('[data-testid="toggleWidths"]')
+    .get('[data-testid="toggleFrames"]')
     .then(el => el.get(0).click())
     .get('[data-testid="widthsPreferences"] label')
     .eq(index)
     .then(el => el.get(0).click());
 
+export const togglePreviewPanel = () =>
+  cy.get('[data-testid="togglePreview"]').then(el => el.get(0).click());
+
+export const gotoPreview = () => {
+  togglePreviewPanel()
+    .get('[data-testid="view-prototype"]')
+    .then(el => cy.visit(el.get(0).href));
+};
+
 export const toggleSnippets = () =>
   cy.get('[data-testid="toggleSnippets"]').click();
 
@@ -95,3 +104,8 @@ export const assertFramesMatch = matches =>
       const frameNames = frames.map((_, el) => el.innerText).toArray();
       return expect(frameNames).to.deep.equal(matches);
     });
+
+export const assertPreviewContains = text =>
+  cy.get('body').then(el => {
+    expect(el.get(0).innerText).to.eq(text);
+  });

examples/braid-design-system/playroom.config.js

@@ -6,24 +6,25 @@ const braidDir = path.dirname(
 
 module.exports = {
   title: 'BRAID',
-  outputPath: './dist/playroom',
+  outputPath: './dist',
   components: 'braid-design-system',
   themes: 'braid-design-system/lib/themes',
   frameComponent: './playroom/FrameComponent.js',
   widths: [320, 500, 768, 1024],
+  snippets: './playroom/snippets.js',
   exampleCode: `
     <ChecklistCard>
-      <Checkbox id="1" label="This is a checkbox" message={false} onChange={() => {}}>
+      <Checkbox id="1" label="This is a checkbox" checked={false} message={false} onChange={() => {}}>
         <Text>
           This text is visible when the checkbox is checked.
         </Text>
       </Checkbox>
-      <Checkbox checked id="2" label="This is a checkbox" message={false} onChange={() => {}}>
+      <Checkbox id="2" label="This is a checkbox" checked message={false} onChange={() => {}}>
         <Text>
           This text is visible when the checkbox is checked.
         </Text>
       </Checkbox>
-      <Checkbox id="3" label="This is a checkbox" message={false} onChange={() => {}}>
+      <Checkbox id="3" label="This is a checkbox" checked={false} message={false} onChange={() => {}}>
         <Text>
           This text is visible when the checkbox is checked.
         </Text>

examples/braid-design-system/playroom/snippets.js

@@ -0,0 +1,25 @@
+import dedent from 'dedent';
+
+export default [
+  {
+    group: 'Text',
+    name: 'Default',
+    code: dedent`
+      <Text>Text</Text>
+    `
+  },
+  {
+    group: 'Checkbox',
+    name: 'Unchecked',
+    code: dedent`
+      <Checkbox id="1" label="This is a checkbox" checked={false} message={false} onChange={() => {}} />
+    `
+  },
+  {
+    group: 'Checkbox',
+    name: 'Checked',
+    code: dedent`
+      <Checkbox id="1" label="This is a checkbox" checked message={false} onChange={() => {}} />
+    `
+  }
+];

lib/makeWebpackConfig.js

@@ -29,7 +29,8 @@ module.exports = async (playroomConfig, options) => {
     mode: options.production ? 'production' : 'development',
     entry: {
       index: [...devServerEntries, require.resolve('../src/index.js')],
-      frame: [...devServerEntries, require.resolve('../src/frame.js')]
+      frame: [...devServerEntries, require.resolve('../src/frame.js')],
+      preview: [...devServerEntries, require.resolve('../src/preview.js')]
     },
     output: {
       filename: '[name].[hash].js',
@@ -153,6 +154,12 @@ module.exports = async (playroomConfig, options) => {
         chunks: ['frame'],
         filename: 'frame.html'
       }),
+      new HtmlWebpackPlugin({
+        title: 'Playroom Preview',
+        chunksSortMode: 'none',
+        chunks: ['preview'],
+        filename: 'preview/index.html'
+      }),
       ...(options.production
         ? []
         : [

package.json

@@ -10,6 +10,7 @@
   "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",
@@ -20,7 +21,7 @@
     "semantic-release": "semantic-release",
     "test": "jest src",
     "post-commit-status": "node scripts/postCommitStatus.js",
-    "deploy-preview": "surge -p ./cypress/projects/basic/dist"
+    "deploy-preview": "surge -p ./examples/braid-design-system/dist"
   },
   "husky": {
     "hooks": {

src/Playroom/Button/Button.less

@@ -0,0 +1,65 @@
+@import (reference) '../variables.less';
+
+.reset {
+  box-sizing: border-box;
+  background: transparent;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  appearance: none;
+  text-decoration: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  user-select: none;
+  position: relative;
+  height: @interaction-height;
+  -webkit-tap-highlight-color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.base {
+  border-radius: @radius-large;
+  padding: 0 (@grid * 3);
+  color: currentColor;
+  border: 1px solid @gray-3;
+  font: @text-standard;
+  height: @grid * 9;
+
+  &:after {
+    content: '';
+    position: absolute;
+    transform: translateY(-50%);
+    min-height: @interaction-height;
+    min-width: @interaction-height;
+    left: -@grid * 2;
+    right: -@grid * 2;
+    height: 100%;
+    top: 50%;
+  }
+
+  &:hover:not(.positive) {
+    color: @highlight;
+  }
+
+  &:focus:not(:active):not(:hover):not(.positive) {
+    box-shadow: @focus-outline;
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.positive {
+  color: @positive;
+}
+
+.iconContainer {
+  position: relative;
+  top: 1px;
+  padding-left: 5px;
+}

src/Playroom/Button/Button.tsx

@@ -0,0 +1,40 @@
+import React, { ElementType, AllHTMLAttributes, ReactElement } from 'react';
+import classnames from 'classnames';
+
+// @ts-ignore
+import styles from './Button.less';
+
+interface BaseProps {
+  as?: ElementType;
+  tone?: 'positive';
+  icon?: ReactElement;
+  'data-testid'?: string;
+}
+
+interface ButtonProps
+  extends Omit<AllHTMLAttributes<HTMLButtonElement>, 'as'>,
+    BaseProps {}
+
+interface LinkProps
+  extends Omit<AllHTMLAttributes<HTMLAnchorElement>, 'as'>,
+    BaseProps {}
+
+type Props = ButtonProps | LinkProps;
+
+export const Button = ({
+  as: ButtonComponent = 'button',
+  children,
+  icon,
+  tone,
+  ...props
+}: Props) => (
+  <ButtonComponent
+    className={classnames(styles.reset, styles.base, {
+      [styles.positive]: tone === 'positive'
+    })}
+    {...props}
+  >
+    {children}
+    {icon ? <span className={styles.iconContainer}>{icon}</span> : null}
+  </ButtonComponent>
+);

src/Playroom/CatchErrors/CatchErrors.js

@@ -1,5 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Text } from '../Text/Text';
+import { Strong } from '../Strong/Strong';
+
 import styles from './CatchErrors.less';
 
 export default class CatchErrors extends Component {
@@ -38,10 +41,12 @@ export default class CatchErrors extends Component {
 
     return (
       <div className={styles.root}>
-        <strong className={styles.strong}>{error.message}</strong>
-        {lines.map((line, i) => (
-          <div key={i}>{line}</div>
-        ))}
+        <Text size="large" tone="critical">
+          <Strong>{error.message}</Strong>
+          {lines.map((line, i) => (
+            <span key={i}>{line}</span>
+          ))}
+        </Text>
       </div>
     );
   }

src/Playroom/CatchErrors/CatchErrors.less

@@ -1,8 +1,6 @@
 @import (reference) '../variables.less';
 
 .root {
-  font: @text-large;
-  color: red;
   position: fixed;
   top: 0;
   bottom: 0;
@@ -11,7 +9,3 @@
   overflow: auto;
   padding: 20px;
 }
-
-.strong {
-  font-weight: @bold;
-}

src/Playroom/CodeEditor/CodeEditor.tsx

@@ -133,6 +133,10 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
             cursor: editorInstanceRef.current.getCursor()
           });
 
+          dispatch({
+            type: 'updateCode',
+            payload: { code: formattedCode, cursor: formattedCursor }
+          });
           editorInstanceRef.current.setValue(formattedCode);
           editorInstanceRef.current.setCursor(formattedCursor);
         }

src/Playroom/Divider/Divider.less

@@ -0,0 +1,11 @@
+@import (reference) '../variables.less';
+
+.root {
+  position: relative;
+}
+
+.divider {
+  position: absolute;
+  width: 100%;
+  border-top: 1px solid @gray-2;
+}

src/Playroom/Divider/Divider.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+// @ts-ignore
+import styles from './Divider.less';
+
+export const Divider = () => (
+  <div className={styles.root}>
+    <div className={styles.divider} />
+  </div>
+);

src/Playroom/Preview/Preview.less → src/Playroom/Frames/Frames.less

@@ -43,20 +43,16 @@
 
 .frameName {
   flex: 0 0 @frame-name-height;
-  font: @text-standard;
-  color: @preview-foregound;
-  line-height: @frame-name-height;
+  height: @frame-name-height;
   transition: @transition-medium;
+  display: flex;
+  align-items: center;
 
   .frameContainer:not(:hover) & {
     opacity: @preview-inactive-label-opacity;
   }
 }
 
-.strong {
-  font-weight: @bold;
-}
-
 .frame {
   height: 100%;
   border: 0;