style: Automated formatting and linting [PR #4 - Linting and Formatting]

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2024: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: ['standard-with-typescript', 'eslint:recommended', 'plugin:react/recommended', 'prettier'],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    extraFileExtensions: ['.md', '.css'],
+  },
+  plugins: ['react', 'react-hooks'],
+  ignorePatterns: ['.eslintrc.js'],
+  rules: {
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/strict-boolean-expressions': 'off',
+    '@typescript-eslint/consistent-type-definitions': 'off',
+    '@typescript-eslint/no-use-before-define': ['error', { allowNamedExports: true }],
+    'react/react-in-jsx-scope': 'off',
+    'import/no-duplicates': 'off'
+  },
+  globals: {
+    React: true,
+    expect: true,
+  },
+}

.github/dependabot.yml

@@ -4,12 +4,12 @@ version: 2
 updates:
   - commit-message:
       prefix: 'chore'
-    directory: "/"
+    directory: '/'
     labels: ['dependabot']
     open-pull-requests-limit: 5
-    package-ecosystem: "npm"
+    package-ecosystem: 'npm'
     schedule:
-      interval: "weekly"
-      day: "monday"
-      time: "15:00"
-    target-branch: 'chore/dependabot'
+      interval: 'weekly'
+      day: 'monday'
+      time: '15:00'
+    target-branch: 'chore/dependabot'

.github/workflows/dependabot-automerge.yml

@@ -1,8 +1,8 @@
-name: "Dependabot Automerge"
+name: 'Dependabot Automerge'
 
 on: workflow_dispatch
 
 jobs:
   automerge-dependabot:
-    name: "Automerge Dependabot PR"
-    uses: mParticle/mparticle-workflows/.github/workflows/dependabot-automerge.yml@stable
+    name: 'Automerge Dependabot PR'
+    uses: mParticle/mparticle-workflows/.github/workflows/dependabot-automerge.yml@stable

.github/workflows/dependabot-branch-rebase.yml

@@ -1,4 +1,4 @@
-name: "Dependabot Branch Rebase"
+name: 'Dependabot Branch Rebase'
 
 on:
   push:
@@ -8,6 +8,6 @@ on:
 
 jobs:
   rebase-branch:
-    name: "Rebase Development onto Dependabot Branch"
+    name: 'Rebase Development onto Dependabot Branch'
     uses: mParticle/mparticle-workflows/.github/workflows/dependabot-rebase-main.yml@stable
-    secrets: inherit
+    secrets: inherit

.github/workflows/release.yml

@@ -1,58 +1,58 @@
 name: Release Aquarium
 
 on:
-    workflow_dispatch:
+  workflow_dispatch:
 
 jobs:
-    # release is done from main branch.
-    confirm-public-repo-main-branch:
-        name: 'Confirm release is run from public/main branch'
-        uses: mParticle/mparticle-workflows/.github/workflows/sdk-release-repo-branch-check.yml@main
-
-    release:
-        name: Perform Release
-        runs-on: ubuntu-latest
-        needs: confirm-public-repo-main-branch
-        
-        env:
-            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-            GIT_AUTHOR_NAME: mparticle-automation
-            GIT_AUTHOR_EMAIL: [email protected]
-            GIT_COMMITTER_NAME: mparticle-automation
-            GIT_COMMITTER_EMAIL: [email protected]
-            NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-        steps:
-            - name: Checkout public main branch
-              uses: actions/checkout@v4
-              with:
-                  fetch-depth: 0
-                  ref: main
-
-            - name: Import GPG Key
-              uses: crazy-max/ghaction-import-gpg@v4
-              with:
-                  gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
-                  passphrase: ${{ secrets.GPG_PASSPHRASE }}
-                  git_user_signingkey: true
-                  git_commit_gpgsign: true
-
-            - name: Setup Node.js
-              uses: actions/setup-node@v4
-
-            - name: Install dependencies
-              run: npm ci
-
-            - name: Build dist
-              run: npm run build-dist              
-
-            - name: Release
-              run: |
-                  npx semantic-release
-
-            - name: Archive npm failure logs
-              uses: actions/upload-artifact@v3
-              if: failure()
-              with:
-                  name: npm-logs
-                  path: ~/.npm/_logs 
+  # release is done from main branch.
+  confirm-public-repo-main-branch:
+    name: 'Confirm release is run from public/main branch'
+    uses: mParticle/mparticle-workflows/.github/workflows/sdk-release-repo-branch-check.yml@main
+
+  release:
+    name: Perform Release
+    runs-on: ubuntu-latest
+    needs: confirm-public-repo-main-branch
+
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      GIT_AUTHOR_NAME: mparticle-automation
+      GIT_AUTHOR_EMAIL: [email protected]
+      GIT_COMMITTER_NAME: mparticle-automation
+      GIT_COMMITTER_EMAIL: [email protected]
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+    steps:
+      - name: Checkout public main branch
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: main
+
+      - name: Import GPG Key
+        uses: crazy-max/ghaction-import-gpg@v4
+        with:
+          gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
+          passphrase: ${{ secrets.GPG_PASSPHRASE }}
+          git_user_signingkey: true
+          git_commit_gpgsign: true
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build dist
+        run: npm run build-dist
+
+      - name: Release
+        run: |
+          npx semantic-release
+
+      - name: Archive npm failure logs
+        uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: npm-logs
+          path: ~/.npm/_logs

.github/workflows/reusable-workflows.yml

@@ -17,4 +17,4 @@ jobs:
     name: Security Lint Checks
     uses: mparticle/mparticle-workflows/.github/workflows/security-checks.yml@stable
     with:
-      base_branch: "main"
+      base_branch: 'main'

.github/workflows/storybook-tests.yml

@@ -17,4 +17,4 @@ jobs:
         run: npx playwright install
 
       - name: Run Storybook Tests
-        run: npm run test-storybook:ci
+        run: npm run test-storybook:ci

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "printWidth": 120
+}

.storybook/main.ts

@@ -1,30 +1,23 @@
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-import type { StorybookConfig } from "@storybook/react-vite";
+import type { StorybookConfig } from '@storybook/react-vite'
 import react from '@vitejs/plugin-react'
-import { PluginOption } from "vite";
+import { PluginOption } from 'vite'
 
 type StorybookVitePlugins = { plugins: PluginOption[][] }
 
 const config: StorybookConfig & StorybookVitePlugins = {
-  framework: "@storybook/react-vite",
+  framework: '@storybook/react-vite',
 
-  stories: [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(ts|tsx)",
-  ],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
 
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
 
   docs: {
     autodocs: true,
-    defaultName: "Documentation",
+    defaultName: 'Documentation',
   },
 
   plugins: [react()],
-};
+}
 
-export default config;
+export default config

.storybook/preview.ts

@@ -1,10 +1,10 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from '@storybook/react'
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
 
-    layout: "centered",
+    layout: 'centered',
 
     controls: {
       matchers: {
@@ -13,6 +13,6 @@ const preview: Preview = {
       },
     },
   },
-};
+}
 
-export default preview;
+export default preview

CONTRIBUTING.md

@@ -4,10 +4,11 @@ Thanks for contributing! Please read this document to follow our conventions for
 
 ## Setting Up
 
--   Fork the repository and then clone down your fork
--   Commit your code per the conventions below, and PR into the repository's `main` branch
--   Your PR title will be checked automatically against the below convention (view the commit history to see examples of a proper commit/PR title). If it fails, you must update your title.
--   Our engineers will work with you to get your code change implemented once a PR is up
+- Fork the repository and then clone down your fork
+- Run `npm run prepare` to setup Husky pre-commit hooks
+- Commit your code per the conventions below, and PR into the repository's `main` branch
+- Your PR title will be checked automatically against the below convention (view the commit history to see examples of a proper commit/PR title). If it fails, you must update your title.
+- Our engineers will work with you to get your code change implemented once a PR is up
 
 ## PR Title and Commit Convention
 
@@ -25,16 +26,22 @@ The standard format for commit messages is as follows:
 
 The following lists the different `types` allowed in the commit message:
 
--   feat: A new feature (automatic minor release)
--   fix: A bug fix (automatic patch release)
--   docs: Documentation only changes
--   style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
--   refactor: A code change that neither fixes a bug nor adds a feature
--   perf: A code change that improves performance
--   test: Adding missing or correcting existing tests
--   chore: Changes that don't modify src or test files, such as automatic documentation generation, or building latest assets
--   ci: Changes to CI configuration files/scripts
--   revert: Revert commit
--   build: Changes that affect the build system or other dependencies
+- feat: A new feature (automatic minor release)
+- fix: A bug fix (automatic patch release)
+- docs: Documentation only changes
+- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+- refactor: A code change that neither fixes a bug nor adds a feature
+- perf: A code change that improves performance
+- test: Adding missing or correcting existing tests
+- chore: Changes that don't modify src or test files, such as automatic documentation generation, or building latest assets
+- ci: Changes to CI configuration files/scripts
+- revert: Revert commit
+- build: Changes that affect the build system or other dependencies
 
 In the footer, if there is a breaking change, start your footer with `BREAKING CHANGE:` followed by a description.
+
+## Editor configuration
+
+- **Prettier**: For configuring your editor to play nicely with Prettier, take a look at the [Editors doc page](https://prettier.io/docs/en/editors).
+  - Also, if you're using VSCode you might want to set prettier as the default formatter and also turn on "Format on Save" option.
+- **ESLint**: Check [Integrations doc page](https://eslint.org/docs/latest/use/integrations)

README.md

@@ -1,7 +1,7 @@
 <img src="https://static.mparticle.com/sdk/mp_logo_black.svg" width="280"><br>
 
-
 # mParticle Aquarium
+
 mParticle Component Library
 
 ## Contributing

design/tokens.json

@@ -9,4 +9,4 @@
       }
     }
   }
-}
+}

jest.config.ts

@@ -1,14 +1,14 @@
-import type { Config } from "jest";
+import type { Config } from 'jest'
 
-export { baseConfig };
+type StorybookTestConfig = { testRunnerOptions: { play: boolean } }
 
-type StorybookTestConfig = { testRunnerOptions: { play: boolean } };
+export { baseConfig }
 
 const baseConfig: Config & StorybookTestConfig = {
-  testEnvironment: "jsdom",
+  testEnvironment: 'jsdom',
 
-  testRunner: "storybook-test-runner",
+  testRunner: 'storybook-test-runner',
   testRunnerOptions: {
     play: true,
   },
-};
+}