fix: Update to prettier v2 (#155)

README.md

@@ -65,7 +65,7 @@ module.exports = {
   baseUrl: '/playroom/',
   webpackConfig: () => ({
     // Custom webpack config goes here...
-  })
+  }),
 };
 ```
 

bin/cli.js

@@ -11,29 +11,29 @@ const showUsage = () => {
       {
         header: 'playroom',
         content:
-          'Code-oriented component design tool.\n\nUsage: playroom <command> [options...]'
+          'Code-oriented component design tool.\n\nUsage: playroom <command> [options...]',
       },
       {
         header: 'Commands',
         content: [
           { name: 'start', summary: 'Start a local playroom.' },
           {
             name: 'build',
-            summary: 'Build a playroom for production.'
+            summary: 'Build a playroom for production.',
           },
-          { name: 'help', summary: 'Show this usage guide.' }
-        ]
+          { name: 'help', summary: 'Show this usage guide.' },
+        ],
       },
       {
         header: 'Options',
         optionList: [
           {
             name: 'config',
             typeLabel: '{underline path}',
-            description: 'Path to a config file.'
-          }
-        ]
-      }
+            description: 'Path to a config file.',
+          },
+        ],
+      },
     ])
   );
 };
@@ -43,7 +43,7 @@ const showUsage = () => {
   const args = commandLineArgs([
     { name: 'command', defaultOption: true, defaultValue: 'start' },
     { name: 'config' },
-    { name: 'help', type: Boolean }
+    { name: 'help', type: Boolean },
   ]);
 
   if (args.command === 'help' || args.help) {
@@ -66,11 +66,11 @@ const showUsage = () => {
 
   const playroom = lib({
     cwd: path.dirname(configPath),
-    ...config
+    ...config,
   });
 
   if (playroom.hasOwnProperty(args.command)) {
-    playroom[args.command](err => {
+    playroom[args.command]((err) => {
       if (err) {
         console.error(err);
         process.exit(1);

cypress/integration/editor.js

@@ -3,7 +3,7 @@ import {
   typeCode,
   assertFirstFrameContains,
   assertCodePaneContains,
-  assertCodePaneLineCount
+  assertCodePaneLineCount,
 } from '../support/utils';
 
 describe('Editor', () => {

cypress/integration/snippets.js

@@ -9,7 +9,7 @@ import {
   toggleSnippets,
   assertSnippetCount,
   assertSnippetsListIsVisible,
-  mouseOverSnippet
+  mouseOverSnippet,
 } from '../support/utils';
 
 describe('Snippets', () => {

cypress/integration/toolbar.js

@@ -4,7 +4,7 @@ import {
   assertPreviewContains,
   typeCode,
   gotoPreview,
-  visit
+  visit,
 } from '../support/utils';
 
 describe('Toolbar', () => {
@@ -33,8 +33,8 @@ describe('Toolbar', () => {
     );
 
     cy.document()
-      .then(doc => {
-        cy.stub(doc, 'execCommand', args => {
+      .then((doc) => {
+        cy.stub(doc, 'execCommand', (args) => {
           if (args === 'copy') {
             copySpy();
             return true;

cypress/integration/urlHandling.js

@@ -2,7 +2,7 @@ import {
   assertFirstFrameContains,
   assertCodePaneContains,
   assertFramesMatch,
-  visit
+  visit,
 } from '../support/utils';
 
 describe('URL handling', () => {

cypress/projects/basic/components.js

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

cypress/projects/basic/playroom.config.js

@@ -2,5 +2,5 @@ module.exports = {
   components: './components',
   snippets: './snippets',
   outputPath: './dist',
-  openBrowser: false
+  openBrowser: false,
 };

cypress/projects/basic/snippets.js

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

cypress/support/commands.js

@@ -2,7 +2,7 @@ Cypress.Commands.add(
   'getFromPreviewFrame',
   { prevSubject: 'element' },
   ($iframe, selector) =>
-    new Promise(resolve => {
+    new Promise((resolve) => {
       $iframe.on('load', () => {
         resolve($iframe.contents().find(selector));
       });

cypress/support/index.js

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

cypress/support/utils.js

@@ -8,17 +8,18 @@ export const getPreviewFrameNames = () => cy.get('[data-testid="frameName"]');
 
 export const getFirstFrame = () => getPreviewFrames().first();
 
-export const visit = url =>
+export const visit = (url) =>
   cy
     .visit(url)
     .reload()
     .then(() => {
       getFirstFrame().then(
-        $iframe => new Cypress.Promise(resolve => $iframe.on('load', resolve))
+        ($iframe) =>
+          new Cypress.Promise((resolve) => $iframe.on('load', resolve))
       );
     });
 
-export const typeCode = code =>
+export const typeCode = (code) =>
   getCodeEditor()
     .focused()
     .type(code, { force: true, delay: 200 })
@@ -30,27 +31,27 @@ export const formatCode = () =>
     .type(`${navigator.platform.match('Mac') ? '{cmd}' : '{ctrl}'}s`)
     .wait(WAIT_FOR_FRAME_TO_RENDER);
 
-export const selectWidthPreferenceByIndex = index =>
+export const selectWidthPreferenceByIndex = (index) =>
   cy
     .get('[data-testid="toggleFrames"]')
-    .then(el => el.get(0).click())
+    .then((el) => el.get(0).click())
     .get('[data-testid="widthsPreferences"] label')
     .eq(index)
-    .then(el => el.get(0).click());
+    .then((el) => el.get(0).click());
 
 export const togglePreviewPanel = () =>
-  cy.get('[data-testid="togglePreview"]').then(el => el.get(0).click());
+  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));
+    .then((el) => cy.visit(el.get(0).href));
 };
 
 export const toggleSnippets = () =>
   cy.get('[data-testid="toggleSnippets"]').click();
 
-export const filterSnippets = search =>
+export const filterSnippets = (search) =>
   cy
     .get('[data-testid="filterSnippets"]')
     .type(search, { force: true })
@@ -61,51 +62,51 @@ export const assertSnippetsListIsVisible = () =>
 
 const getSnippets = () => cy.get('[data-testid="snippet-list"] li');
 
-export const selectSnippetByIndex = index => getSnippets().eq(index);
+export const selectSnippetByIndex = (index) => getSnippets().eq(index);
 
-export const mouseOverSnippet = index =>
+export const mouseOverSnippet = (index) =>
   selectSnippetByIndex(index)
     .trigger('mousemove', { force: true }) // force stops cypress scrolling the panel out of the editor
     .wait(WAIT_FOR_FRAME_TO_RENDER);
 
-export const assertSnippetCount = count =>
+export const assertSnippetCount = (count) =>
   getSnippets().should('have.length', count);
 
-export const assertFirstFrameContains = text => {
-  getFirstFrame().then($el =>
+export const assertFirstFrameContains = (text) => {
+  getFirstFrame().then(($el) =>
     cy
       .wrap($el.contents().find('body'))
       .wait(WAIT_FOR_FRAME_TO_RENDER)
-      .then(el => {
+      .then((el) => {
         expect(el.get(0).innerText).to.eq(text);
       })
   );
 };
 
-export const assertCodePaneContains = text => {
-  getCodeEditor().then($el => {
+export const assertCodePaneContains = (text) => {
+  getCodeEditor().then(($el) => {
     const code = $el.get(0).innerText;
     // 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);
   });
 };
 
-export const assertCodePaneLineCount = lines => {
+export const assertCodePaneLineCount = (lines) => {
   getCodeEditor().within(() =>
     cy.get('.CodeMirror-line').should('have.length', lines)
   );
 };
 
-export const assertFramesMatch = matches =>
+export const assertFramesMatch = (matches) =>
   getPreviewFrameNames()
     .should('have.length', matches.length)
-    .then(frames => {
+    .then((frames) => {
       const frameNames = frames.map((_, el) => el.innerText).toArray();
       return expect(frameNames).to.deep.equal(matches);
     });
 
-export const assertPreviewContains = text =>
-  cy.get('body').then(el => {
+export const assertPreviewContains = (text) =>
+  cy.get('body').then((el) => {
     expect(el.get(0).innerText).to.eq(text);
   });

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

@@ -41,9 +41,9 @@ module.exports = {
           use: {
             loader: 'babel-loader',
             options: {
-              presets: ['@babel/preset-env', '@babel/preset-react']
-            }
-          }
+              presets: ['@babel/preset-env', '@babel/preset-react'],
+            },
+          },
         },
         {
           test: /(?!\.css)\.js$/,
@@ -52,40 +52,40 @@ module.exports = {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env', '@babel/preset-react'],
-              plugins: ['@babel/plugin-proposal-class-properties']
-            }
-          }
+              plugins: ['@babel/plugin-proposal-class-properties'],
+            },
+          },
         },
         {
           test: /\.css\.js$/,
           include: braidDir,
           use: [
             {
-              loader: 'style-loader'
+              loader: 'style-loader',
             },
             {
               loader: 'css-loader',
               options: {
                 modules: {
                   mode: 'local',
-                  localIdentName: '[name]__[local]___[hash:base64:7]'
+                  localIdentName: '[name]__[local]___[hash:base64:7]',
                 },
-                importLoaders: 2
-              }
+                importLoaders: 2,
+              },
             },
             {
-              loader: 'css-in-js-loader'
+              loader: 'css-in-js-loader',
             },
             {
               loader: 'babel-loader',
               options: {
                 presets: ['@babel/preset-env', '@babel/preset-react'],
-                plugins: ['@babel/plugin-proposal-class-properties']
-              }
-            }
-          ]
-        }
-      ]
-    }
-  })
+                plugins: ['@babel/plugin-proposal-class-properties'],
+              },
+            },
+          ],
+        },
+      ],
+    },
+  }),
 };