chore(ci): Perform linting and formatting in CI (trussworks#2474)

.github/dependabot.yml

@@ -38,6 +38,3 @@ updates:
         versions:
           - '>=7.0.0'
       - dependency-name: 'uswds'
-      - dependency-name: 'husky'
-        versions:
-          - '>=5.0.0'

.github/workflows/build-and-test.yml

@@ -19,10 +19,10 @@ jobs:
 
     steps:
       - name: Check out repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
           cache: 'yarn'
@@ -41,12 +41,12 @@ jobs:
 
     steps:
       - name: Check out repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version-file: '.node-version'
           cache: 'yarn'
 
       # The yarn cache is not node_modules
@@ -56,6 +56,9 @@ jobs:
       - name: Lint code
         run: yarn lint
 
+      - name: Check format
+        run: yarn format:check
+
       - name: Happo
         run: yarn happo-ci
         env:

.github/workflows/deploy-storybook.yml

@@ -15,12 +15,12 @@ jobs:
       url: ${{ steps.build-publish.outputs.page_url }}
     steps:
       - name: Check out repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Set up node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version-file: '.node-version'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/package-release.yml

@@ -16,12 +16,12 @@ jobs:
       
     steps: 
       - name: Checkout out repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version-file: '.node-version'
           cache: 'yarn'
 
       # The yarn cache is not node_modules

.github/workflows/publish-next.yml

@@ -11,12 +11,12 @@ jobs:
     name: Publish next to Github Packages
     steps:
       - name: Check out repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Set up node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version-file: '.node-version'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -36,10 +36,10 @@ jobs:
 
       # Setup .npmrc file to publish to GitHub Packages
       - name: Set up node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           registry-url: 'https://npm.pkg.github.com'
-          node-version: '16.x'
+          node-version-file: '.node-version'
 
       # Publish to GitHub Packages
       - run: yarn publish --no-git-tag-version --prerelease --preid alpha-$(date +%Y%m%d%H%M%S) --tag next

docs/contributing.md

@@ -74,10 +74,20 @@ More guidance for preferred React practices can be found in the [adding new comp
 
 ### Linting, formatting, & automated tests
 
-Because this project exports a library that will be used by other projects, it is important that updates follow a set of standard practices. When you commit your changes, several hooks will run to check and format staged files. In order to be eligible for merging, all branches must pass the following automation.
-
-- [Prettier](https://prettier.io/), [TypeScript compilation](https://www.typescriptlang.org/), [eslint](https://eslint.org/) and [stylelint](https://stylelint.io/) are run on _staged files_ as a pre-commit hook/
+Because this project exports a library that will be used by other projects, it is important that updates follow a set of standard practices. When you PR your changes, several hooks will run to check and format changed files. In order to be eligible for merging, all branches must pass the following automation.
+
+- Code format and linting are enforced with automations.
+  - We use the following tools: 
+    - [Prettier](https://prettier.io/)
+    - [TypeScript compilation](https://www.typescriptlang.org/)
+    - [eslint](https://eslint.org/)
+    - [stylelint](https://stylelint.io/)
+  - GitHub Actions are used to check each PR for format and linting compliance
   - For an optimal developer experience, it's recommended that you configure your editor to run linting & formatting inline.
+  - It is also possible to invoke the tools manually
+    - To check code format compliance, run `yarn format:check`
+    - To auto-fix code format, run `yarn format:fix`
+    - To check typescript complication, eslint, and stylelint, run `yarn lint`
 - [dangerjs](https://github.com/danger/danger-js) is used to enforce several pull request standards, including:
   - Changes to package source code should include changes to tests.
   - New `src/components` files should include changes to storybook.

package.json

@@ -29,6 +29,8 @@
     "build": "tsc -p tsconfig.build.json && webpack --progress",
     "build:watch": "tsc -p tsconfig.build.json && webpack --watch",
     "lint": "tsc && eslint --ext js,jsx,ts,tsx src && stylelint \"src/**/*.{css,scss}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css,scss,json,md}\"",
+    "format:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,json,md}\"",
     "release": "standard-version -t ''",
     "prepare": "yarn build",
     "prepublishOnly": "yarn test && yarn lint",
@@ -96,9 +98,7 @@
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "happo-plugin-storybook": "^3.0.0",
     "happo.io": "^8.3.1",
-    "husky": "^8.0.3",
     "jest": "^26.1.0",
-    "lint-staged": "^13.0.3",
     "mini-css-extract-plugin": "^2.6.1",
     "prettier": "^2.7.1",
     "react": "^17.0.1",
@@ -131,22 +131,6 @@
     "trim": "0.0.3",
     "trim-newlines": "3.0.1"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsc && lint-staged",
-      "pre-push": "yarn danger local -b main --failOnErrors"
-    }
-  },
-  "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx,json,md}": [
-      "prettier --write",
-      "eslint"
-    ],
-    "src/**/*.{css,scss}": [
-      "prettier --write",
-      "stylelint"
-    ]
-  },
   "standard-version": {
     "skip": {
       "tag": true

src/components/Footer/SocialLinks/SocialLinks.tsx

@@ -54,6 +54,8 @@ export const SocialLink = ({
   }
 
   return (
-    <a className="usa-social-link" {...props} title={name}>{icon}</a>
+    <a className="usa-social-link" {...props} title={name}>
+      {icon}
+    </a>
   )
 }

src/components/Pagination/Pagination.test.tsx

@@ -235,17 +235,12 @@ describe('Pagination component', () => {
     expect(screen.getAllByText('…')).toHaveLength(1)
   })
 
-  it('doesn\'t render last page when unbounded', () => {
-    const randomPage = Math.random()*1000
-    render(
-      <Pagination
-        currentPage={randomPage}
-        pathname={testPathname}
-      />
-    )
-    expect(screen.getByLabelText(`Page ${randomPage+1}`)).toHaveAttribute(
+  it("doesn't render last page when unbounded", () => {
+    const randomPage = Math.random() * 1000
+    render(<Pagination currentPage={randomPage} pathname={testPathname} />)
+    expect(screen.getByLabelText(`Page ${randomPage + 1}`)).toHaveAttribute(
       'href',
-      `${testPathname}?page=${randomPage+1}`
+      `${testPathname}?page=${randomPage + 1}`
     )
   })
 

src/components/Pagination/Pagination.tsx

@@ -92,13 +92,16 @@ export const Pagination = ({
   const showOverflow = totalPages ? totalPages > maxSlots : true // If more pages than slots, use overflow indicator(s)
 
   const middleSlot = Math.round(maxSlots / 2) // 4 if maxSlots is 7
-  const isBeforeMiddleSlot = !!(totalPages && totalPages - currentPage >= middleSlot)
+  const isBeforeMiddleSlot = !!(
+    totalPages && totalPages - currentPage >= middleSlot
+  )
   const showPrevOverflow = showOverflow && currentPage > middleSlot
   const showNextOverflow = isBeforeMiddleSlot || !totalPages
   // Assemble array of page numbers to be shown
-  const currentPageRange: Array<number | 'overflow'> = showOverflow || !totalPages
-    ? [currentPage]
-    : Array.from({ length: totalPages }).map((_, i) => i + 1)
+  const currentPageRange: Array<number | 'overflow'> =
+    showOverflow || !totalPages
+      ? [currentPage]
+      : Array.from({ length: totalPages }).map((_, i) => i + 1)
 
   if (showOverflow) {
     // Determine range of pages to show based on current page & number of slots
@@ -151,7 +154,8 @@ export const Pagination = ({
     if (showPrevOverflow) currentPageRange.unshift('overflow')
     if (currentPage !== 1) currentPageRange.unshift(1)
     if (showNextOverflow) currentPageRange.push('overflow')
-    if (totalPages && currentPage !== totalPages) currentPageRange.push(totalPages)
+    if (totalPages && currentPage !== totalPages)
+      currentPageRange.push(totalPages)
   }
 
   const prevPage = !isOnFirstPage && currentPage - 1

src/components/Search/Search/Search.test.tsx

@@ -42,10 +42,7 @@ describe('Search component', () => {
     const { queryByTestId } = render(
       <Search onSubmit={mockSubmit} defaultValue={defaultValue}></Search>
     )
-    expect(queryByTestId('textInput')).toHaveAttribute(
-      'value',
-      defaultValue
-    )
+    expect(queryByTestId('textInput')).toHaveAttribute('value', defaultValue)
   })
 
   it('renders a label', () => {
@@ -72,13 +69,19 @@ describe('Search component', () => {
   it('adds small class when size prop is small', () => {
     const mockSubmit = jest.fn()
     const { container } = render(<Search onSubmit={mockSubmit} size="small" />)
-    expect(container.querySelector('div.usa-search--small button')).toBeInTheDocument()
+    expect(
+      container.querySelector('div.usa-search--small button')
+    ).toBeInTheDocument()
   })
 
   it('adds big class when size prop is big', () => {
     const mockSubmit = jest.fn()
     const { container } = render(<Search onSubmit={mockSubmit} size="big" />)
-    expect(container.querySelector('div.usa-search--big button')).toBeInTheDocument()
-    expect(container.querySelector('div.usa-search--big input')).toBeInTheDocument()
+    expect(
+      container.querySelector('div.usa-search--big button')
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector('div.usa-search--big input')
+    ).toBeInTheDocument()
   })
 })

src/components/Search/Search/Search.tsx

@@ -34,11 +34,7 @@ export const Search = ({
   inputProps,
   ...formProps
 }: SearchInputProps & OptionalFormProps): React.ReactElement => {
-
-  const classes = classnames(
-    'usa-search',
-    className
-  )
+  const classes = classnames('usa-search', className)
 
   return (
     <Form
@@ -47,7 +43,7 @@ export const Search = ({
       role="search"
       search={true}
       {...formProps}>
-      <SearchField 
+      <SearchField
         {...inputProps}
         isBig={size == 'big'}
         inputId={inputId}

src/components/Search/SearchButton/SearchButton.test.tsx

@@ -8,24 +8,18 @@ const sampleLocalization = {
 
 describe('SearchButton component', () => {
   it('renders without errors', () => {
-    const { queryByRole } = render(
-      <SearchButton />
-    )
+    const { queryByRole } = render(<SearchButton />)
     expect(queryByRole('button')).toHaveTextContent('Search')
   })
 
   it('does not render button text when small', () => {
-    const { queryByRole } = render(
-      <SearchButton size="small" />
-    )
+    const { queryByRole } = render(<SearchButton size="small" />)
 
     expect(queryByRole('button')).not.toHaveTextContent('Search')
   })
 
   it('internationalization', () => {
-    const { queryByText } = render(
-      <SearchButton i18n={sampleLocalization} />
-    )
+    const { queryByText } = render(<SearchButton i18n={sampleLocalization} />)
 
     expect(queryByText('Buscar')).toBeInTheDocument()
   })

src/components/Search/SearchButton/SearchButton.tsx

@@ -18,7 +18,7 @@ type SearchButtonProps = {
 export const SearchButton = ({
   size,
   className,
-  i18n
+  i18n,
 }: SearchButtonProps): React.ReactElement => {
   const buttonText = i18n?.buttonText || 'Search'
   const isSmall = size === 'small'
@@ -33,12 +33,16 @@ export const SearchButton = ({
   )
   return (
     <div className={classes}>
-        <Button type="submit">
-            {!isSmall && (
-                <span className="usa-search__submit-text">{buttonText}</span>
-            )}
-            <Icon.Search className="usa-search__submit-icon" name={buttonText} size={3}/>
-        </Button>
+      <Button type="submit">
+        {!isSmall && (
+          <span className="usa-search__submit-text">{buttonText}</span>
+        )}
+        <Icon.Search
+          className="usa-search__submit-icon"
+          name={buttonText}
+          size={3}
+        />
+      </Button>
     </div>
   )
 }