diff --git a/.eslintrc b/.eslintrc index ab5cd7b338..ff1c84168e 100644 --- a/.eslintrc +++ b/.eslintrc @@ -27,11 +27,17 @@ "react": { "version": "detect" }, - "import/resolver": "webpack" + "import/resolver": { + "webpack": { + "config": "./webpack.config.js" + } + } }, "overrides": [ { - "files": ["**/*.ts?(x)"], + "files": [ + "**/*.ts?(x)" + ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": 2018, @@ -41,8 +47,13 @@ }, "warnOnUnsupportedTypeScriptVersion": true }, - "plugins": ["@typescript-eslint"], - "extends": ["plugin:@typescript-eslint/recommended", "prettier"] + "plugins": [ + "@typescript-eslint" + ], + "extends": [ + "plugin:@typescript-eslint/recommended", + "prettier" + ] } ], "extends": [ @@ -59,4 +70,4 @@ "no-only-tests/no-only-tests": "error", "react/prop-types": "off" } -} +} \ No newline at end of file diff --git a/.storybook/main.ts b/.storybook/main.ts index 9a08dc34bd..5fc2f17a32 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,3 +1,5 @@ +import type { StorybookConfig } from '@storybook/react-webpack5' + const path = require('path') const uswdsIncludePaths = [ @@ -12,7 +14,7 @@ const webpackConfig = (config) => { ) config.module.rules = config.module.rules.filter( - (rule) => rule.test.toString() !== '/\\.css$/' + (rule) => rule.test && rule.test.toString() !== '/\\.css$/' ) config.module.rules.push({ test: /\.(sa|sc|c)ss$/, @@ -88,9 +90,6 @@ const webpackConfig = (config) => { } module.exports = { - core: { - builder: 'webpack5', - }, stories: ['../src/**/*.stories.@(ts|tsx)'], addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'], typescript: { @@ -104,4 +103,12 @@ module.exports = { webpackFinal: async (config) => { return webpackConfig(config) }, -} + framework: { + name: '@storybook/react-webpack5', + options: { strictMode: false }, + }, + docs: { + autodocs: 'tag', + }, + staticDirs: ['./public'], +} as StorybookConfig diff --git a/.storybook/public/uswds.svg b/.storybook/public/uswds.svg new file mode 100644 index 0000000000..27ecd4bac1 --- /dev/null +++ b/.storybook/public/uswds.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/custom.d.ts b/custom.d.ts index ee3aa38044..29eb86ce22 100644 --- a/custom.d.ts +++ b/custom.d.ts @@ -22,3 +22,9 @@ declare module '*.module.scss' { const classes: { [key: string]: string } export default classes } + +declare namespace globalThis { + interface Window { + MSStream: object + } +} diff --git a/jest.config.js b/jest.config.js index 0e9d35aeca..7e3a0e87db 100644 --- a/jest.config.js +++ b/jest.config.js @@ -5,6 +5,7 @@ module.exports = { testPathIgnorePatterns: ['/node_modules/', '/lib/'], testRegex: '(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$', moduleFileExtensions: ['ts', 'tsx', 'js', 'json'], + testEnvironment: "jsdom", moduleNameMapper: { '^react$': '/node_modules/react', '\\.svg\\?svgr$': '/__mocks__/svgrMock.js', diff --git a/package.json b/package.json index 83723b126b..37c2b3b99c 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,8 @@ "test:watch": "jest --watch", "test:coverage": "jest --coverage", "test:serverside": "yarn build && node src/serverSideTest.js", - "storybook": "start-storybook -p 9009", + "storybook": "storybook dev -p 9009", + "build-storybook": "storybook build", "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}\"", @@ -56,13 +57,12 @@ "@babel/eslint-parser": "^7.19.1", "@babel/preset-react": "^7.10.4", "@babel/preset-typescript": "^7.15.0", - "@storybook/addon-a11y": "^7.0.2", - "@storybook/addon-essentials": "^6.5.14", - "@storybook/addons": "^7.0.8", - "@storybook/builder-webpack5": "^6.5.14", - "@storybook/manager-webpack5": "^6.5.16", - "@storybook/react": "^6.5.16", - "@storybook/theming": "^7.0.8", + "@storybook/addon-a11y": "^7.1.1", + "@storybook/addon-essentials": "^7.1.1", + "@storybook/addons": "^7.1.1", + "@storybook/react": "^7.1.1", + "@storybook/react-webpack5": "^7.1.1", + "@storybook/theming": "^7.1.1", "@svgr/webpack": "^8.0.1", "@testing-library/dom": "^9.0.0", "@testing-library/jest-dom": "^5.16.5", @@ -74,8 +74,8 @@ "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "@types/react-test-renderer": "^18.0.0", - "@typescript-eslint/eslint-plugin": "^5.40.0", - "@typescript-eslint/parser": "^5.40.0", + "@typescript-eslint/eslint-plugin": "^6.2.0", + "@typescript-eslint/parser": "^6.2.0", "@uswds/uswds": "3.7.1", "all-contributors-cli": "^6.24.0", "babel-jest": "^29.4.3", @@ -95,19 +95,20 @@ "eslint-plugin-security": "^1.4.0", "focus-trap-react": "^8.8.1", "fork-ts-checker-webpack-plugin": "^9.0.0", - "happo-plugin-storybook": "^3.0.0", + "happo-plugin-storybook": "^3.3.0", "happo.io": "^8.3.1", - "jest": "^26.1.0", + "jest": "^29.6.1", + "jest-environment-jsdom": "^29.6.1", "mini-css-extract-plugin": "^2.6.1", "prettier": "^2.7.1", "react": "^17.0.1", - "react-docgen-typescript-loader": "^3.7.2", "react-dom": "^17.0.1", "react-test-renderer": "^17.0.1", "sass": "^1.26.0", "sass-loader": "^13.0.0", "sass-resources-loader": "^2.0.1", "source-map-loader": "^4.0.1", + "storybook": "^7.1.1", "style-loader": "^3.2.1", "stylelint": "^13.3.0", "stylelint-config-css-modules": "^2.2.0", @@ -116,14 +117,15 @@ "stylelint-config-sass-guidelines": "^8.0.0", "stylelint-prettier": "^1.1.1", "stylelint-scss": "^3.17.1", - "ts-jest": "^26.1.2", - "typescript": "^4.2.4", + "ts-jest": "^29.1.1", + "typescript": "^5.1.6", "webpack": "^5.52.1", "webpack-cli": "^5.0.1" }, "resolutions": { "loader-utils": "2.0.4", "parse-url": "8.1.0", + "jackspeak": "2.1.1", "json-schema": "0.4.0", "glob-parent": "5.1.2", "trim": "0.0.3", diff --git a/src/components/Footer/FooterNav/FooterNav.stories.tsx b/src/components/Footer/FooterNav/FooterNav.stories.tsx index ba4ad37186..1bd30eb812 100644 --- a/src/components/Footer/FooterNav/FooterNav.stories.tsx +++ b/src/components/Footer/FooterNav/FooterNav.stories.tsx @@ -44,29 +44,32 @@ export const MediumFooterNav = (): React.ReactElement => ( /> ) -export const BigFooterNav = (): React.ReactElement => ( -