Add prettier to autoformat source, docs, and config (#207)

.eslintrc.cjs

@@ -31,7 +31,7 @@ module.exports = {
           customElement: true,
         },
       },
-    }
+    },
   ],
   extends: [
     'eslint:recommended',
@@ -44,61 +44,34 @@ module.exports = {
     'plugin:sonarjs/recommended',
     'plugin:tailwindcss/recommended',
     'plugin:storybook/recommended',
+    'prettier',
   ],
   rules: {
     // Eslint rules
-    '@typescript-eslint/indent': ['error', 2],
-    'array-bracket-spacing': 'error',
     'array-callback-return': 'error',
-    'arrow-spacing': 'error',
-    'block-spacing': 'error',
-    'brace-style': 'error',
-    'comma-dangle': ['error', {
-      arrays: 'always-multiline',
-      objects: 'always-multiline',
-      imports: 'always-multiline',
-      exports: 'never',
-      functions: 'never',
-    }],
-    'comma-spacing': 'error',
-    'computed-property-spacing': 'error',
     'dot-notation': 'error',
-    'eol-last': 'error',
-    eqeqeq: ['error', 'always', {
-      null: 'always',
-    }],
-    'func-call-spacing': 'error',
-    'key-spacing': 'error',
-    'keyword-spacing': 'error',
+    eqeqeq: [
+      'error',
+      'always',
+      {
+        null: 'always',
+      },
+    ],
     'no-caller': 'error',
-    'no-multi-spaces': 'error',
-    // https://github.com/sveltejs/eslint-plugin-svelte3/issues/41
-    'no-multiple-empty-lines': 'off',
-    'no-multi-spaces': 'error',
     'no-param-reassign': 'error',
     'no-return-await': 'error',
     'no-unreachable-loop': 'error',
     'no-unsafe-optional-chaining': 'error',
     'nonblock-statement-body-position': 'error',
-    'object-curly-spacing': ['error', 'always'],
-    'one-var': ['error', {
-      let: 'never',
-      const: 'never',
-    }],
-    quotes: ['error', 'single', {
-      avoidEscape: true,
-    }],
+    'one-var': [
+      'error',
+      {
+        let: 'never',
+        const: 'never',
+      },
+    ],
     'require-atomic-updates': 'error',
-    'rest-spread-spacing': 'error',
-    semi: ['error', 'always'],
-    'semi-spacing': 'error',
-    'semi-style': 'error',
-    'space-before-blocks': 'error',
-    'space-in-parens': 'error',
-    'space-infix-ops': 'error',
-    'space-unary-ops': 'error',
     'spaced-comment': 'error',
-    'template-curly-spacing': 'error',
     radix: 'error',
     'require-await': 'error',
     strict: 'error',
@@ -109,11 +82,14 @@ module.exports = {
     'prefer-const': 'error',
     'prefer-template': 'error',
     'require-await': 'error',
-    'prefer-arrow/prefer-arrow-functions': ['error', {
-      disallowPrototype: true,
-      singleReturnOnly: false,
-      classPropertiesAllowed: false,
-    }],
+    'prefer-arrow/prefer-arrow-functions': [
+      'error',
+      {
+        disallowPrototype: true,
+        singleReturnOnly: false,
+        classPropertiesAllowed: false,
+      },
+    ],
     // Unicorn rules
     'unicorn/switch-case-braces': 'off',
     'unicorn/no-unsafe-regex': 'error',
@@ -158,9 +134,13 @@ module.exports = {
     'import/no-cycle': 'error',
     'import/no-useless-path-segments': 'error',
     'import/export': 'error',
-    'import/extensions': ["error", "never", {
-      "svelte": "always"
-    }],
+    'import/extensions': [
+      'error',
+      'never',
+      {
+        svelte: 'always',
+      },
+    ],
     // Do not currently work with eslint-plugin-svelte
     'import/first': 'off',
     'import/order': 'error',
@@ -179,9 +159,9 @@ module.exports = {
         // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
         alwaysTryTypes: true,
         project: './tsconfig.json',
-      }
+      },
     },
     'svelte3/typescript': () => require('typescript'),
   },
   ignorePatterns: ['**/cypress/**', '**/node_modules/**', '*.json'],
-};
+};

.github/workflows/publish.yml

@@ -34,4 +34,4 @@ jobs:
       - name: Publish 🚀
         uses: JS-DevTools/npm-publish@v1
         with:
-          token: ${{ secrets.NPM_TOKEN }} 
+          token: ${{ secrets.NPM_TOKEN }}

.github/workflows/pullrequest.yml

@@ -9,42 +9,43 @@ jobs:
   eslint:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Install 🔧
-      run: npm ci --audit=false
-    - name: Run ESLint
-      run: npm run lint
+      - uses: actions/checkout@v2
+      - name: Install 🔧
+        run: npm ci --audit=false
+      - name: Run ESLint and Prettier
+        run: |
+          npm run lint
+          npm run format-check
 
   check:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Install 🔧
-      run: npm ci --audit=false
-    - name: Run Check
-      run: npm run check
+      - uses: actions/checkout@v2
+      - name: Install 🔧
+        run: npm ci --audit=false
+      - name: Run Check
+        run: npm run check
 
   test:
     timeout-minutes: 10
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - name: Install deps
-      run: |
-        npm ci --audit=false
-        cd playground
-        npm ci --audit=false
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npx playwright test
-    - uses: actions/upload-artifact@v3
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
-
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Install deps
+        run: |
+          npm ci --audit=false
+          cd playground
+          npm ci --audit=false
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.prettierignore

@@ -0,0 +1,3 @@
+package-lock.json
+dist
+prime

.prettierrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: ['prettier-plugin-svelte'],
+  singleQuote: true,
+  // TODO(mc, 2023-03-22): eslint-plugin-svelte does not respect single-quote for HTML
+  // https://github.com/sveltejs/prettier-plugin-svelte/issues/253
+  jsxSingleQuote: true,
+  svelteIndentScriptAndStyle: false,
+};

.storybook/main.js

@@ -21,15 +21,15 @@ export default {
   },
   async viteFinal(config) {
     return mergeConfig(config, {
-      base: '/'
+      base: '/',
     });
   },
   framework: {
     name: '@storybook/html-vite',
-    options: {}
+    options: {},
   },
   features: {
     modernInlineRender: true,
     storyStoreV7: true,
   },
-};
+};

.storybook/manager.js

@@ -1,7 +1,7 @@
-import { addons } from '@storybook/addons'
-import theme from './theme'
+import { addons } from '@storybook/addons';
+import theme from './theme';
 
 addons.setConfig({
   theme,
   enableShortcuts: false,
-})
+});

.storybook/preview.js

@@ -1,5 +1,5 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     expanded: true,
     matchers: {
@@ -9,8 +9,8 @@ export const parameters = {
   },
   docs: {
     source: {
-      state: 'open'
-    }
+      state: 'open',
+    },
   },
   inlineStories: true,
-}
+};

.storybook/theme.js

@@ -1,7 +1,7 @@
-import { create } from '@storybook/theming'
+import { create } from '@storybook/theming';
 
 export default create({
   brandImage: 'https://www.viam.com/static/logo.svg',
   fontBase: '"Space mono", sans-serif',
   appBg: '#333',
-})
+});

.vscode/extensions.json

@@ -4,6 +4,7 @@
     "csstools.postcss",
     "bradlc.vscode-tailwindcss",
     "svelte.svelte-vscode",
-    "silvenon.mdx"
+    "unifiedjs.vscode-mdx",
+    "esbenp.prettier-vscode"
   ]
 }

CONTRIBUTING.md

@@ -35,3 +35,41 @@ More detailed docs exist on [the storybook](https://www.viam.com/prime).
 Linked below are some articles that provide knowledge for how to best build reusable, generic web components.
 
 - [Custom Elements Best Practices](https://web.dev/custom-elements-best-practices/)
+
+## Development tasks
+
+To verify that static assets build correctly:
+
+```shell
+npm run build-storybook
+```
+
+To run tests locally, you must first install the `playground` development dependencies and playwright. From there, you can run tests
+
+```shell
+# set up playground
+cd playground
+npm install
+cd ..
+npx playwright install --with-deps
+
+# run tests, with optional debugging
+npm run test
+npm run test-dev
+```
+
+You can typecheck and lint using:
+
+```shell
+# check types, a11y, and other component quality
+npm run check
+
+# autoformat code and documentation
+npm run format
+
+# check formatting without writing files
+npm run format-check
+
+# lint for stylistic and correctness issues
+npm run lint
+```