diff --git a/.babelrc.js b/.babelrc.js index 4e9ca959f..358791d8b 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -1,4 +1,4 @@ -const pathAliases = require('./pathAliases'); +const path = require('path'); module.exports = { env: { @@ -29,7 +29,9 @@ module.exports = { 'module-resolver', { root: ['./'], - alias: pathAliases, + alias: { + '@/': path.resolve('./'), + }, }, ], 'macros', diff --git a/.circleci/config.yml b/.circleci/config.yml index 320d78b7e..49304a5d3 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -6,7 +6,8 @@ orbs: executors: default: docker: - - image: cypress/browsers:node18.12.0-chrome107 # keep in sync with .nvmrc and any other executors + # keep in sync with .nvmrc and any other executors + - image: cypress/browsers:node-18.20.3-chrome-125.0.6422.141-1-ff-126.0.1-edge-125.0.2535.85-1 environment: CC_TEST_REPORTER_ID: 0f2bc6ef737019bfc8eda369cd06b66c54606b144b4d81cec010fb494d2559af diff --git a/.eslintrc.js b/.eslintrc.js index 18513d01d..55b6d5fca 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -75,12 +75,14 @@ module.exports = { format: ['PascalCase', 'UPPER_CASE'], prefix: [ 'is', + 'are', 'was', 'should', 'has', 'can', 'did', 'will', + 'ARE_', 'IS_', 'WAS_', 'SHOULD_', @@ -97,6 +99,33 @@ module.exports = { '@typescript-eslint/unbound-method': 'off', // gives false negatives in arrow funcs }, }, + { + files: ['./**/*.test.ts', './**/*.test.tsx'], + parser: '@typescript-eslint/parser', + parserOptions: { + project: true, + }, + extends: ['plugin:@typescript-eslint/strict', 'plugin:@typescript-eslint/stylistic'], + rules: { + '@typescript-eslint/no-non-null-assertion': 'off', + '@typescript-eslint/ban-ts-comment': 'off', + }, + }, + { + files: [ + 'test-utils/**/*.js', + 'test-utils/**/*.ts', + 'test-utils/**/*.tsx', + 'pages/**/*.tsx', + 'pages/**/*.js', + '**/*.stories.tsx', + '**/*.stories.js', + './cypress.config.ts', + ], + rules: { + 'import/no-default-export': 'off', + }, + }, { files: ['cypress/**/*.js'], rules: { @@ -118,11 +147,11 @@ module.exports = { }, }, { - files: ['components/nav.js', 'components/Footer/Footer.js'], + files: ['./components/nav.js', './components/Footer/Footer.js'], rules: { 'jsx-a11y/anchor-is-valid': 'off' }, }, { - files: ['components/UpdateProfileForm/**/*.js'], + files: ['./components/UpdateProfileForm/**/*.js'], rules: { 'react/sort-comp': 'off' }, }, ], @@ -131,7 +160,14 @@ module.exports = { 'import/extensions': [ 'error', 'never', - { css: 'always', jpg: 'always', json: 'always', png: 'always', svg: 'always' }, + { + css: 'always', + jpg: 'always', + json: 'always', + png: 'always', + svg: 'always', + stories: 'always', + }, ], 'import/no-unresolved': 'off', 'import/no-extraneous-dependencies': ['error', { devDependencies: true }], @@ -140,6 +176,7 @@ module.exports = { { groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'] }, ], 'import/prefer-default-export': 'off', + 'import/no-default-export': 'error', // OC eslint Plugin Rules '@operation_code/custom-rules/proptype-definition-above-fn': 'error', @@ -225,7 +262,7 @@ module.exports = { paths: [ { name: 'react-select', - message: 'Please use `components/Form/Select/ThemedReactSelect` instead.', + message: 'Please use `@/components/Form/Select/ThemedReactSelect` instead.', }, { name: 'prop-types', @@ -235,7 +272,7 @@ module.exports = { { name: 'formik', importNames: ['Form'], - message: `Please use our Form component to have good defaults defined.\n "import Form from 'components/Form/Form';"`, + message: `Please use our Form component to have good defaults defined.\n "import { Form } from '@/components/Form/Form';"`, }, { name: 'react', diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index b3aaa38a1..39aa5a3bb 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -13,27 +13,23 @@ jobs: steps: - name: Begin CI... - uses: actions/checkout@v3 + uses: actions/checkout@v4 with: fetch-depth: 0 - - name: Read .nvmrc - run: echo ::set-output name=NVMRC::$(cat .nvmrc) - id: nvm - - name: Use Node - uses: actions/setup-node@v1 + uses: actions/setup-node@v4 with: always-auth: true registry-url: https://registry.npmjs.org - node-version: '${{ steps.nvm.outputs.NVMRC }}' + node-version-file: '.nvmrc' - name: Get yarn cache directory path id: yarn-cache-dir-path run: echo "::set-output name=dir::$(yarn cache dir)" - name: Use cached node_modules - uses: actions/cache@v2 + uses: actions/cache@v3 id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) with: path: ${{ steps.yarn-cache-dir-path.outputs.dir }} @@ -45,9 +41,12 @@ jobs: run: yarn install --frozen-lockfile --non-interactive - name: Publish to Chromatic - uses: chromaui/action@v1 + uses: chromaui/action@latest with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} - autoAcceptChanges: main + autoAcceptChanges: "main" token: ${{ secrets.GITHUB_TOKEN }} buildScriptName: storybook:build + onlyChanged: true + exitZeroOnChanges: true + exitOnceUploaded: true diff --git a/.nvmrc b/.nvmrc index 3c032078a..561a1e9a8 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -18 +18.20.3 diff --git a/.storybook/backgrounds.js b/.storybook/backgrounds.js index 153e36314..53d5eeaad 100644 --- a/.storybook/backgrounds.js +++ b/.storybook/backgrounds.js @@ -1,5 +1,5 @@ -import { brandColorsObject } from 'common/styles/styleExports'; -import { capitalizeFirstLetter } from 'common/utils/string-utils'; +import { brandColorsObject } from '@/common/styles/styleExports'; +import { capitalizeFirstLetter } from '@/common/utils/string-utils'; const backgroundsPaletteArray = Object.keys(brandColorsObject).map(name => ({ name: capitalizeFirstLetter(name), diff --git a/.storybook/main.ts b/.storybook/main.ts index 8bf423187..cb993bdc6 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,5 +1,6 @@ const svgoConfig = require('../common/config/svgo'); import type { StorybookConfig } from '@storybook/nextjs'; +import path from 'path'; const config: StorybookConfig = { stories: [ @@ -16,6 +17,10 @@ const config: StorybookConfig = { }, ], webpackFinal: async config => { + if (config.resolve?.alias) { + config.resolve.alias['@'] = path.resolve(__dirname, '../'); + } + // Find the Storybook Webpack rule relevant to SVG files. // @ts-expect-error => 'config.module' is possibly 'undefined'.ts(18048) const imageRule = config.module.rules.find(rule => { diff --git a/.storybook/preview.js b/.storybook/preview.js index d3e5f9115..24d8e27db 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,5 +1,5 @@ import backgroundsPalleteArray from './backgrounds'; -import 'common/styles/globals.css'; +import '@/common/styles/globals.css'; import * as viewports from '@storybook/addon-viewport'; export const decorators = [ diff --git a/common/constants/api.js b/common/constants/api.js index cceba2745..154b5758c 100644 --- a/common/constants/api.js +++ b/common/constants/api.js @@ -1,5 +1,5 @@ -import { get, post, patch, put, ResourcesAPI } from 'common/utils/api-utils'; -import { formatUserData } from 'common/utils/formatters'; +import { get, post, patch, put, ResourcesAPI } from '@/common/utils/api-utils'; +import { formatUserData } from '@/common/utils/formatters'; /* GET REQUESTS */ export const getUserPromise = ({ token }) => get('auth/user/', { token }); diff --git a/common/constants/dropdown-states-values.js b/common/constants/dropdown-states-values.js deleted file mode 100644 index 67b5bce7e..000000000 --- a/common/constants/dropdown-states-values.js +++ /dev/null @@ -1,61 +0,0 @@ -export default [ - { value: 'AL', label: 'Alabama' }, - { value: 'AK', label: 'Alaska' }, - { value: 'AS', label: 'American Samoa' }, - { value: 'AZ', label: 'Arizona' }, - { value: 'AR', label: 'Arkansas' }, - { value: 'CA', label: 'California' }, - { value: 'CO', label: 'Colorado' }, - { value: 'CT', label: 'Connecticut' }, - { value: 'DE', label: 'Delaware' }, - { value: 'DC', label: 'District Of Columbia' }, - { value: 'FM', label: 'Federated States Of Micronesia' }, - { value: 'FL', label: 'Florida' }, - { value: 'GA', label: 'Georgia' }, - { value: 'GU', label: 'Guam' }, - { value: 'HI', label: 'Hawaii' }, - { value: 'ID', label: 'Idaho' }, - { value: 'IL', label: 'Illinois' }, - { value: 'IN', label: 'Indiana' }, - { value: 'IA', label: 'Iowa' }, - { value: 'KS', label: 'Kansas' }, - { value: 'KY', label: 'Kentucky' }, - { value: 'LA', label: 'Louisiana' }, - { value: 'ME', label: 'Maine' }, - { value: 'MH', label: 'Marshall Islands' }, - { value: 'MD', label: 'Maryland' }, - { value: 'MA', label: 'Massachusetts' }, - { value: 'MI', label: 'Michigan' }, - { value: 'MN', label: 'Minnesota' }, - { value: 'MS', label: 'Mississippi' }, - { value: 'MO', label: 'Missouri' }, - { value: 'MT', label: 'Montana' }, - { value: 'NE', label: 'Nebraska' }, - { value: 'NV', label: 'Nevada' }, - { value: 'NH', label: 'New Hampshire' }, - { value: 'NJ', label: 'New Jersey' }, - { value: 'NM', label: 'New Mexico' }, - { value: 'NY', label: 'New York' }, - { value: 'NC', label: 'North Carolina' }, - { value: 'ND', label: 'North Dakota' }, - { value: 'MP', label: 'Northern Mariana Islands' }, - { value: 'OH', label: 'Ohio' }, - { value: 'OK', label: 'Oklahoma' }, - { value: 'OR', label: 'Oregon' }, - { value: 'PW', label: 'Palau' }, - { value: 'PA', label: 'Pennsylvania' }, - { value: 'PR', label: 'Puerto Rico' }, - { value: 'RI', label: 'Rhode Island' }, - { value: 'SC', label: 'South Carolina' }, - { value: 'SD', label: 'South Dakota' }, - { value: 'TN', label: 'Tennessee' }, - { value: 'TX', label: 'Texas' }, - { value: 'UT', label: 'Utah' }, - { value: 'VT', label: 'Vermont' }, - { value: 'VI', label: 'Virgin Islands' }, - { value: 'VA', label: 'Virginia' }, - { value: 'WA', label: 'Washington' }, - { value: 'WV', label: 'West Virginia' }, - { value: 'WI', label: 'Wisconsin' }, - { value: 'WY', label: 'Wyoming' }, -]; diff --git a/common/constants/partners.js b/common/constants/partners.js index 9499db609..d70c481a0 100644 --- a/common/constants/partners.js +++ b/common/constants/partners.js @@ -1,5 +1,5 @@ -import { s3 } from 'common/constants/urls'; import sortBy from 'lodash/sortBy'; +import { s3 } from '@/common/constants/urls'; export const PARTNER_TYPES = { PAID: 'PAID', @@ -105,4 +105,4 @@ const partners = [ }, ]; -export default sortBy(partners, 'name'); +export const sortedPartners = sortBy(partners, 'name'); diff --git a/common/constants/successStories.js b/common/constants/successStories.js index 2f680ff5f..a68db9a43 100644 --- a/common/constants/successStories.js +++ b/common/constants/successStories.js @@ -1,6 +1,6 @@ -import { s3 } from 'common/constants/urls'; +import { s3 } from '@/common/constants/urls'; -const successStories = [ +export const successStories = [ { title: 'Ali Cipolla-Taylor, Talent Acquisition at Microsoft', quote: @@ -20,5 +20,3 @@ const successStories = [ imageSource: `${s3}headshots/jose.jpg`, }, ]; - -export default successStories; diff --git a/common/styles/breakpoints.js b/common/styles/breakpoints.js deleted file mode 100644 index e473ec3ef..000000000 --- a/common/styles/breakpoints.js +++ /dev/null @@ -1,6 +0,0 @@ -import { breakpointsObject } from 'common/styles/styleExports'; -import { getBreakpoints } from 'common/utils/style-utils'; - -const breakpoints = getBreakpoints(Object.values(breakpointsObject)); - -export default breakpoints; diff --git a/common/styles/styleExports.ts b/common/styles/styleExports.ts index a87861c46..5b2c30a6f 100644 --- a/common/styles/styleExports.ts +++ b/common/styles/styleExports.ts @@ -1,11 +1,9 @@ -import { isHexColor } from 'common/utils/style-utils'; import * as themeMap from './themeMap'; +import { isHexColor } from '@/common/utils/style-utils'; const themeMapValues = Object.entries(themeMap); -type StyleObjectType = { - [key: string]: string; -}; +type StyleObjectType = Record; export const breakpointsObject: StyleObjectType = themeMapValues.reduce((object, [key, value]) => { const isBreakpoint = key.includes('ViewportWidth'); @@ -17,16 +15,13 @@ export const breakpointsObject: StyleObjectType = themeMapValues.reduce((object, return object; }, {} as StyleObjectType); -export const brandColorsObject: StyleObjectType = themeMapValues.reduce( - (object, [key, value]) => { - if (isHexColor(value)) { - object[key] = value; // eslint-disable-line no-param-reassign - } +export const brandColorsObject: StyleObjectType = themeMapValues.reduce((object, [key, value]) => { + if (isHexColor(value)) { + object[key] = value; // eslint-disable-line no-param-reassign + } - return object; - }, - {} as StyleObjectType, -); + return object; +}, {} as StyleObjectType); export const fontsObject: StyleObjectType = themeMapValues.reduce((object, [key, value]) => { if (key.includes('Font')) { diff --git a/common/utils/__tests__/api-utils.test.js b/common/utils/__tests__/api-utils.test.js index 5f61340ef..5b58a10e9 100644 --- a/common/utils/__tests__/api-utils.test.js +++ b/common/utils/__tests__/api-utils.test.js @@ -1,5 +1,5 @@ -import { getServerErrorMessage } from 'common/utils/api-utils'; -import { networkErrorMessages } from 'common/constants/messages'; +import { getServerErrorMessage } from '@/common/utils/api-utils'; +import { networkErrorMessages } from '@/common/constants/messages'; describe('API Utilities', () => { describe('getServerErrorMessage', () => { diff --git a/common/utils/api-utils.js b/common/utils/api-utils.js index 400bb61f3..0129a1015 100644 --- a/common/utils/api-utils.js +++ b/common/utils/api-utils.js @@ -1,9 +1,9 @@ import axios from 'axios'; import lodashGet from 'lodash/get'; -import { networkErrorMessages } from 'common/constants/messages'; -import { apiUrl, resourcesAPIURL } from 'common/config/environment'; -import { setAuthorizationHeader } from 'common/utils/cookie-utils'; import qs from 'qs'; +import { networkErrorMessages } from '@/common/constants/messages'; +import { apiUrl, resourcesAPIURL } from '@/common/config/environment'; +import { setAuthorizationHeader } from '@/common/utils/cookie-utils'; const baseAxiosConfig = { baseURL: apiUrl, diff --git a/common/utils/formatters.js b/common/utils/formatters.js index 9269ab6a7..aa2f1f2d4 100644 --- a/common/utils/formatters.js +++ b/common/utils/formatters.js @@ -1,4 +1,4 @@ -import { isFilledArray } from 'common/utils/array-utils'; +import { isFilledArray } from '@/common/utils/array-utils'; // TODO: Remove eslint disable when more items are exported /* eslint-disable import/prefer-default-export */ diff --git a/common/utils/thirdParty/gtag.js b/common/utils/thirdParty/gtag.js index 9aa04cb69..465adf171 100644 --- a/common/utils/thirdParty/gtag.js +++ b/common/utils/thirdParty/gtag.js @@ -1,5 +1,5 @@ import snakeCase from 'lodash/snakeCase'; -import { clientTokens } from 'common/config/environment'; +import { clientTokens } from '@/common/config/environment'; // TODO: Leverage prod-build-time-only env vars instead NODE_ENV for prod check const isProduction = process.env.NODE_ENV === 'production'; diff --git a/components/Accordion/Accordion.tsx b/components/Accordion/Accordion.tsx index 2ad492176..e2b098a80 100644 --- a/components/Accordion/Accordion.tsx +++ b/components/Accordion/Accordion.tsx @@ -1,15 +1,15 @@ import { useState } from 'react'; import classNames from 'classnames'; import Chevron from 'public/static/images/icons/FontAwesome/angle-right-solid.svg'; -import { ACCORDION_CONTENT, ACCORDION_TOGGLE_BUTTON } from 'common/constants/testIDs'; -import ScreenReaderOnly, { toggleMessages } from '../ScreenReaderOnly/ScreenReaderOnly'; -import Card from '../Cards/Card/Card'; +import { ScreenReaderOnly, toggleMessages } from '../ScreenReaderOnly/ScreenReaderOnly'; +import { Card } from '../Cards/Card/Card'; import styles from './Accordion.module.css'; +import { ACCORDION_CONTENT, ACCORDION_TOGGLE_BUTTON } from '@/common/constants/testIDs'; const ChevronRight = () => ; const ChevronDown = () => ; -type ContentPropType = { +interface ContentPropType { /** * Labels or thumbnails representing sections of content. */ @@ -18,9 +18,9 @@ type ContentPropType = { * Section of content associated with header. */ bodyChildren: React.ReactNode | React.ReactNode[]; -}; +} -export type AccordionPropsType = { +export interface AccordionPropsType { /** * Accessibility ID to use for joining elements together with ARIA attributes */ @@ -38,13 +38,13 @@ export type AccordionPropsType = { * @default - false */ hasAnimationOnHover?: boolean; -}; +} /** * @description A component whose main content is invisible until revealed by the user * @see http://web-accessibility.carnegiemuseums.org/code/accordions/ */ -function Accordion({ +export function Accordion({ accessibilityId, className, content, @@ -101,5 +101,3 @@ function Accordion({ ); } - -export default Accordion; diff --git a/components/Accordion/__stories__/Accordion.stories.tsx b/components/Accordion/__stories__/Accordion.stories.tsx index 7d0dab6ac..0980adf75 100644 --- a/components/Accordion/__stories__/Accordion.stories.tsx +++ b/components/Accordion/__stories__/Accordion.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import Accordion from '../Accordion'; +import { Accordion } from '../Accordion'; type AccordionStoryType = StoryObj; diff --git a/components/Accordion/__tests__/Accordion.test.tsx b/components/Accordion/__tests__/Accordion.test.tsx index e5c37cbbe..e1d64113c 100644 --- a/components/Accordion/__tests__/Accordion.test.tsx +++ b/components/Accordion/__tests__/Accordion.test.tsx @@ -1,12 +1,12 @@ import { fireEvent, render } from '@testing-library/react'; import { composeStory } from '@storybook/react'; +import { toggleMessages } from '../../ScreenReaderOnly/ScreenReaderOnly'; +import meta, { Default } from '../__stories__/Accordion.stories'; import { ACCORDION_CONTENT, ACCORDION_TOGGLE_BUTTON, SCREEN_READER_ONLY, -} from 'common/constants/testIDs'; -import { toggleMessages } from '../../ScreenReaderOnly/ScreenReaderOnly'; -import meta, { Default } from '../__stories__/Accordion.stories'; +} from '@/common/constants/testIDs'; const AccordionStory = composeStory(Default, meta); @@ -29,11 +29,11 @@ describe('Accordion Accessibility', () => { const component = render(); const Button = component.queryByTestId(SCREEN_READER_ONLY); - //@ts-expect-error + // @ts-expect-error expect(Button.textContent).toBe(toggleMessages.open); - //@ts-expect-error + // @ts-expect-error fireEvent.click(Button); - //@ts-expect-error + // @ts-expect-error expect(Button.textContent).toBe(toggleMessages.close); }); }); diff --git a/components/Alert/Alert.tsx b/components/Alert/Alert.tsx index e058c1195..b4cba001f 100644 --- a/components/Alert/Alert.tsx +++ b/components/Alert/Alert.tsx @@ -1,17 +1,17 @@ import classNames from 'classnames'; -import { ALERT, ALERT_CLOSE_BUTTON } from 'common/constants/testIDs'; -import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly'; import styles from './Alert.module.css'; +import { ALERT, ALERT_CLOSE_BUTTON } from '@/common/constants/testIDs'; +import { ScreenReaderOnly } from '@/components/ScreenReaderOnly/ScreenReaderOnly'; -export type AlertPropsType = { +export interface AlertPropsType { type: 'error' | 'success' | 'warning'; children: React.ReactNode; className?: string; 'data-testid'?: string; onClose?: () => void; -}; +} -function Alert({ +export function Alert({ children, className, 'data-testid': testID = ALERT, @@ -44,5 +44,3 @@ function Alert({ ); } - -export default Alert; diff --git a/components/Alert/__stories__/Alert.stories.tsx b/components/Alert/__stories__/Alert.stories.tsx index 247f9a79c..d39f1a4e2 100644 --- a/components/Alert/__stories__/Alert.stories.tsx +++ b/components/Alert/__stories__/Alert.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import Alert from '../Alert'; +import { Alert } from '../Alert'; type AlertStoryType = StoryObj; diff --git a/components/Alert/__tests__/Alert.test.tsx b/components/Alert/__tests__/Alert.test.tsx index 2c17f9f83..836d3c192 100644 --- a/components/Alert/__tests__/Alert.test.tsx +++ b/components/Alert/__tests__/Alert.test.tsx @@ -1,8 +1,8 @@ import { fireEvent, render } from '@testing-library/react'; import { composeStory } from '@storybook/react'; -import createSnapshotTest from 'test-utils/createSnapshotTest'; -import { ALERT_CLOSE_BUTTON } from 'common/constants/testIDs'; import meta, { ErrorAlert, SuccessAlert, WarningAlert } from '../__stories__/Alert.stories'; +import createSnapshotTest from '@/test-utils/createSnapshotTest'; +import { ALERT_CLOSE_BUTTON } from '@/common/constants/testIDs'; const ErrorAlertStory = composeStory(ErrorAlert, meta); const SuccessAlertStory = composeStory(SuccessAlert, meta); diff --git a/components/Badge/Badge.tsx b/components/Badge/Badge.tsx index 6a377dc96..12df170a7 100644 --- a/components/Badge/Badge.tsx +++ b/components/Badge/Badge.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; -export type BadgePropsType = { +export interface BadgePropsType { /** * SVG icon to be used as the badge. */ @@ -15,12 +15,12 @@ export type BadgePropsType = { className?: string; /** * Sets whether the label is rendered above, or below, the badge.. - * @default - true + * @default - true */ isImageFirst?: boolean; -}; +} -function Badge({ className = undefined, icon, isImageFirst = true, label }: BadgePropsType) { +export function Badge({ className = undefined, icon, isImageFirst = true, label }: BadgePropsType) { return (
); } - -export default Badge; diff --git a/components/Badge/__stories__/Badge.stories.tsx b/components/Badge/__stories__/Badge.stories.tsx index 7cec89c36..8ed486a83 100644 --- a/components/Badge/__stories__/Badge.stories.tsx +++ b/components/Badge/__stories__/Badge.stories.tsx @@ -1,8 +1,8 @@ -import { Meta, StoryObj } from '@storybook/react' -import GithubIcon from 'public/static/images/icons/github_logo.svg'; -import TwitterIcon from 'public/static/images/icons/twitter_logo.svg'; -import PinterestIcon from 'public/static/images/icons/pinterest_logo.svg'; -import Badge from '../Badge'; +import { Meta, StoryObj } from '@storybook/react'; +import { Badge } from '../Badge'; +import GithubIcon from '@/public/static/images/icons/github_logo.svg'; +import TwitterIcon from '@/public/static/images/icons/twitter_logo.svg'; +import PinterestIcon from '@/public/static/images/icons/pinterest_logo.svg'; const icons = { github: , @@ -10,35 +10,35 @@ const icons = { pinterest: , }; -type BadgeStoryType = StoryObj +type BadgeStoryType = StoryObj; export const GitHubBadge: BadgeStoryType = { render: args => , args: { icon: icons.github, - label: 'GitHub Badge' - } -} + label: 'GitHub Badge', + }, +}; export const TwitterBadge: BadgeStoryType = { render: args => , args: { icon: icons.twitter, - label: 'Twitter Badge' - } -} + label: 'Twitter Badge', + }, +}; export const PinterestBadge: BadgeStoryType = { render: args => , args: { icon: icons.pinterest, - label: 'Pinterest Badge' - } -} + label: 'Pinterest Badge', + }, +}; -const meta: Meta ={ +const meta: Meta = { title: 'Badge', - component: Badge -} + component: Badge, +}; -export default meta +export default meta; diff --git a/components/Badge/__tests__/Badge.test.tsx b/components/Badge/__tests__/Badge.test.tsx index da8372c1c..fc5487f69 100644 --- a/components/Badge/__tests__/Badge.test.tsx +++ b/components/Badge/__tests__/Badge.test.tsx @@ -1,8 +1,7 @@ import { render } from '@testing-library/react'; -import createSnapshotTest from 'test-utils/createSnapshotTest'; -import Icon from 'static/images/icons/github_logo.svg'; - -import Badge from '../Badge'; +import { Badge } from '../Badge'; +import createSnapshotTest from '@/test-utils/createSnapshotTest'; +import Icon from '@/public/static/images/icons/github_logo.svg'; const badgeIcon = ; diff --git a/components/Branding/ColorSection/ColorSection.tsx b/components/Branding/ColorSection/ColorSection.tsx index 0b150782e..74242c76e 100644 --- a/components/Branding/ColorSection/ColorSection.tsx +++ b/components/Branding/ColorSection/ColorSection.tsx @@ -1,8 +1,8 @@ -import { brandColorsObject } from 'common/styles/styleExports'; -import Swatch from 'components/Branding/Swatch/Swatch'; -import Content from 'components/Content/Content'; +import { brandColorsObject } from '@/common/styles/styleExports'; +import { Swatch } from '@/components/Branding/Swatch/Swatch'; +import { Content } from '@/components/Content/Content'; -function ColorSection() { +export function ColorSection() { const primaryColor = { name: 'Primary', hexCode: brandColorsObject.primary }; const secondaryColor = { name: 'Secondary', hexCode: brandColorsObject.secondary }; @@ -41,5 +41,3 @@ function ColorSection() { ); } - -export default ColorSection; diff --git a/components/Branding/ColorSection/__tests__/ColorSection.test.tsx b/components/Branding/ColorSection/__tests__/ColorSection.test.tsx index d01c6a83e..7e37b837d 100644 --- a/components/Branding/ColorSection/__tests__/ColorSection.test.tsx +++ b/components/Branding/ColorSection/__tests__/ColorSection.test.tsx @@ -1,6 +1,5 @@ -import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest'; - -import ColorSection from '../ColorSection'; +import { ColorSection } from '../ColorSection'; +import createShallowSnapshotTest from '@/test-utils/createShallowSnapshotTest'; describe('ColorSection', () => { it('should render with required props', () => { diff --git a/components/Branding/FontSection/FontSection.tsx b/components/Branding/FontSection/FontSection.tsx index 7cc9b794e..b872f25ac 100644 --- a/components/Branding/FontSection/FontSection.tsx +++ b/components/Branding/FontSection/FontSection.tsx @@ -1,7 +1,7 @@ -import Content from 'components/Content/Content'; -import { fontsObject } from 'common/styles/styleExports'; +import { Content } from '@/components/Content/Content'; +import { fontsObject } from '@/common/styles/styleExports'; -function FontSection() { +export function FontSection() { // Every letter of the alphabet in one string const demoText = 'Sphinx of black quartz, judge my vow!'; @@ -36,5 +36,3 @@ function FontSection() { /> ); } - -export default FontSection; diff --git a/components/Branding/FontSection/__tests__/FontSection.test.tsx b/components/Branding/FontSection/__tests__/FontSection.test.tsx index eea0622fe..1292a93ca 100644 --- a/components/Branding/FontSection/__tests__/FontSection.test.tsx +++ b/components/Branding/FontSection/__tests__/FontSection.test.tsx @@ -1,6 +1,5 @@ -import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest'; - -import FontSection from '../FontSection'; +import { FontSection } from '../FontSection'; +import createShallowSnapshotTest from '@/test-utils/createShallowSnapshotTest'; describe('FontSection', () => { it('should render with required props', () => { diff --git a/components/Branding/LogoSection/LogoSection.tsx b/components/Branding/LogoSection/LogoSection.tsx index d7d516e69..b9cf26fc2 100644 --- a/components/Branding/LogoSection/LogoSection.tsx +++ b/components/Branding/LogoSection/LogoSection.tsx @@ -1,11 +1,11 @@ import classNames from 'classnames'; -import Badge from 'components/Badge/Badge'; -import Content from 'components/Content/Content'; -import { s3 } from 'common/constants/urls'; -import Image from 'next/image'; +import Image from 'next/legacy/image'; import styles from './LogoSection.module.css'; +import { Badge } from '@/components/Badge/Badge'; +import { Content } from '@/components/Content/Content'; +import { s3 } from '@/common/constants/urls'; -function LogoSection() { +export function LogoSection() { return ( ); } -export default LogoSection; diff --git a/components/Branding/LogoSection/__tests__/LogoSection.test.tsx b/components/Branding/LogoSection/__tests__/LogoSection.test.tsx index a7e4dedee..b37c66bd3 100644 --- a/components/Branding/LogoSection/__tests__/LogoSection.test.tsx +++ b/components/Branding/LogoSection/__tests__/LogoSection.test.tsx @@ -1,6 +1,5 @@ -import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest'; - -import LogoSection from '../LogoSection'; +import { LogoSection } from '../LogoSection'; +import createShallowSnapshotTest from '@/test-utils/createShallowSnapshotTest'; describe('LogoSection', () => { it('should render with required props', () => { diff --git a/components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.tsx.snap b/components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.tsx.snap index 6dfeb9662..9465e138e 100644 --- a/components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.tsx.snap +++ b/components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.tsx.snap @@ -29,7 +29,7 @@ exports[`LogoSection > should render with required props 1`] = `
  • should render with required props 1`] = `
  • should render with required props 1`] = `
  • should render with required props 1`] = `
  • should render with required props 1`] = `
  • should render with required props 1`] = `
  • should render with required props 1`] = `
  • should render with required props 1`] = `
  • should render with required props 1`] = `
  • should render with required props 1`] = `
  • should render with required props 1`] = `
  • should render with required props 1`] = `
  • should render with required props 1`] = `
  • should render with required props 1`] = `
  • should render with required props 1`] = `
  • should render with required props 1`] = `
  • should render with required props 1`] = `
  • {`A block of the color ${colorName}`} @@ -25,5 +25,3 @@ function Swatch({ colorName, hexCode }: Swatch) {
    • ); } - -export default Swatch; diff --git a/components/Branding/Swatch/__tests__/Swatch.test.tsx b/components/Branding/Swatch/__tests__/Swatch.test.tsx index 17d92e2e8..01679c2c3 100644 --- a/components/Branding/Swatch/__tests__/Swatch.test.tsx +++ b/components/Branding/Swatch/__tests__/Swatch.test.tsx @@ -1,6 +1,5 @@ -import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest'; - -import Swatch from '../Swatch'; +import { Swatch } from '../Swatch'; +import createShallowSnapshotTest from '@/test-utils/createShallowSnapshotTest'; describe('Swatch', () => { it('should render with required props', () => { diff --git a/components/Buttons/Button/Button.tsx b/components/Buttons/Button/Button.tsx index 6441f73e1..afb5ee09a 100644 --- a/components/Buttons/Button/Button.tsx +++ b/components/Buttons/Button/Button.tsx @@ -1,12 +1,11 @@ -import React from 'react'; import noop from 'lodash/noop'; import classNames from 'classnames'; -import { BUTTON } from 'common/constants/testIDs'; -import { gtag } from 'common/utils/thirdParty/gtag'; -import { getDataAttributes, getAriaAttributes } from 'common/utils/prop-utils'; import styles from './Button.module.css'; +import { BUTTON } from '@/common/constants/testIDs'; +import { gtag } from '@/common/utils/thirdParty/gtag'; +import { getDataAttributes, getAriaAttributes } from '@/common/utils/prop-utils'; -type GoogleAnalyticsEventPropType = { +interface GoogleAnalyticsEventPropType { /** * A description of the behaviour. E.g. 'Clicked Delete', 'Added a component', 'Deleted account' */ @@ -34,7 +33,7 @@ type GoogleAnalyticsEventPropType = { * 'beacon', 'xhr', or 'image'. */ transport?: 'beacon' | 'xhr' | 'image'; -}; +} type ButtonProps = { /** @@ -51,7 +50,7 @@ type ButtonProps = { theme?: 'primary' | 'secondary'; } & React.ButtonHTMLAttributes; -export default function Button({ +export function Button({ analyticsObject = { action: 'Button Selected', category: 'Interactions', @@ -87,7 +86,8 @@ export default function Button({ onClick(e); }} tabIndex={tabIndex} - type={type} + // eslint-disable-next-line react/button-has-type + type={type} // `type` prop has a default value, so ^ is a false-negative {...customDataAttributes} {...ariaAttributes} > diff --git a/components/Buttons/Button/__stories__/Button.stories.tsx b/components/Buttons/Button/__stories__/Button.stories.tsx index 8db7e6da1..684ab9037 100644 --- a/components/Buttons/Button/__stories__/Button.stories.tsx +++ b/components/Buttons/Button/__stories__/Button.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import Button from '../Button'; +import { Button } from '../Button'; type ButtonStoryType = StoryObj; @@ -20,4 +20,4 @@ export const Default: ButtonStoryType = { args: { children: 'Button', }, -}; \ No newline at end of file +}; diff --git a/components/Buttons/Button/__tests__/Button.test.tsx b/components/Buttons/Button/__tests__/Button.test.tsx index 74c6cc189..872c922cc 100644 --- a/components/Buttons/Button/__tests__/Button.test.tsx +++ b/components/Buttons/Button/__tests__/Button.test.tsx @@ -1,9 +1,8 @@ import { fireEvent, render } from '@testing-library/react'; -import { BUTTON } from 'common/constants/testIDs'; -import { gtag } from 'common/utils/thirdParty/gtag'; -import createSnapshotTest from 'test-utils/createSnapshotTest'; - -import Button from '../Button'; +import { Button } from '../Button'; +import { BUTTON } from '@/common/constants/testIDs'; +import { gtag } from '@/common/utils/thirdParty/gtag'; +import createSnapshotTest from '@/test-utils/createSnapshotTest'; describe('Button', () => { const requiredProps = { diff --git a/components/Buttons/CloseButton/CloseButton.tsx b/components/Buttons/CloseButton/CloseButton.tsx index edd98f524..9786c3f08 100644 --- a/components/Buttons/CloseButton/CloseButton.tsx +++ b/components/Buttons/CloseButton/CloseButton.tsx @@ -1,8 +1,8 @@ import classNames from 'classnames'; -import { CLOSE_BUTTON } from 'common/constants/testIDs'; -import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly'; -import PlusIcon from 'static/images/icons/plus.svg'; import styles from './CloseButton.module.css'; +import { CLOSE_BUTTON } from '@/common/constants/testIDs'; +import { ScreenReaderOnly } from '@/components/ScreenReaderOnly/ScreenReaderOnly'; +import PlusIcon from '@/public/static/images/icons/plus.svg'; export type CloseButtonProps = { /** @@ -11,11 +11,7 @@ export type CloseButtonProps = { theme?: 'primary' | 'secondary' | 'white'; } & React.ButtonHTMLAttributes; -export default function CloseButton({ - disabled = false, - onClick, - theme = 'primary', -}: CloseButtonProps) { +export function CloseButton({ disabled = false, onClick, theme = 'primary' }: CloseButtonProps) { return ( + +
    + Operation Code Logo +
    + +