From 70a9b69e768380149b2ddebdde1c3b39d605740f Mon Sep 17 00:00:00 2001 From: Clay Miller Date: Wed, 21 Jul 2021 19:00:51 -0400 Subject: [PATCH 1/2] feat: Add Storybook a11y addon (#1335) Co-authored-by: Cole Bemis --- .storybook/main.js | 1 + package-lock.json | 243 +++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 245 insertions(+) diff --git a/.storybook/main.js b/.storybook/main.js index 26dfeaf66bb..cd9ef626f06 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -4,6 +4,7 @@ module.exports = { "../src/**/*.stories.@(js|jsx|ts|tsx)" ], "addons": [ + "@storybook/addon-a11y", "@storybook/addon-links", "@storybook/addon-essentials" ] diff --git a/package-lock.json b/package-lock.json index 964270abcaf..5e3face8f27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4038,6 +4038,249 @@ "@sinonjs/commons": "^1.7.0" } }, + "@storybook/addon-a11y": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.3.4.tgz", + "integrity": "sha512-ABG1dvwDdlNVvW+P+oRtDdiyw40ddc+maSwKbwxTiw9Ibq7TrasWE9ub0r7yNoFLXEZa3pBjPrGKdh+WIYToSQ==", + "dev": true, + "requires": { + "@storybook/addons": "6.3.4", + "@storybook/api": "6.3.4", + "@storybook/channels": "6.3.4", + "@storybook/client-api": "6.3.4", + "@storybook/client-logger": "6.3.4", + "@storybook/components": "6.3.4", + "@storybook/core-events": "6.3.4", + "@storybook/theming": "6.3.4", + "axe-core": "^4.2.0", + "core-js": "^3.8.2", + "global": "^4.4.0", + "lodash": "^4.17.20", + "react-sizeme": "^3.0.1", + "regenerator-runtime": "^0.13.7", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "dependencies": { + "@storybook/addons": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.3.4.tgz", + "integrity": "sha512-rf8K8X3JrB43gq5nw5SYgfucQkFg2QgUMWdByf7dQ4MyIl5zet+2MYiSXJ9lfbhGKJZ8orc81rmMtiocW4oBjg==", + "dev": true, + "requires": { + "@storybook/api": "6.3.4", + "@storybook/channels": "6.3.4", + "@storybook/client-logger": "6.3.4", + "@storybook/core-events": "6.3.4", + "@storybook/router": "6.3.4", + "@storybook/theming": "6.3.4", + "core-js": "^3.8.2", + "global": "^4.4.0", + "regenerator-runtime": "^0.13.7" + } + }, + "@storybook/api": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.3.4.tgz", + "integrity": "sha512-12q6dvSR4AtyuZbKAy3Xt+ZHzZ4ePPRV1q20xtgYBoiFEgB9vbh4XKEeeZD0yIeTamQ2x1Hn87R79Rs1GIdKRQ==", + "dev": true, + "requires": { + "@reach/router": "^1.3.4", + "@storybook/channels": "6.3.4", + "@storybook/client-logger": "6.3.4", + "@storybook/core-events": "6.3.4", + "@storybook/csf": "0.0.1", + "@storybook/router": "6.3.4", + "@storybook/semver": "^7.3.2", + "@storybook/theming": "6.3.4", + "@types/reach__router": "^1.3.7", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.20", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7", + "store2": "^2.12.0", + "telejson": "^5.3.2", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/channel-postmessage": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.3.4.tgz", + "integrity": "sha512-UIHNrMD9ZaT249nkKXibqRjKEoqfeFJk5HKW2W17/Z/imVcKG9THBnRJ7cb+r7LqS8Yoh+Q87ycRqcPVLRJ/Xw==", + "dev": true, + "requires": { + "@storybook/channels": "6.3.4", + "@storybook/client-logger": "6.3.4", + "@storybook/core-events": "6.3.4", + "core-js": "^3.8.2", + "global": "^4.4.0", + "qs": "^6.10.0", + "telejson": "^5.3.2" + } + }, + "@storybook/channels": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.3.4.tgz", + "integrity": "sha512-zdZzBbIu9JHEe+uw8FqKsNUiFY+iqI9QdHH/pM3DTTQpBN/JM1Xwfo3CkqA8c5PkhSGqpW0YjXoPash4lawr1Q==", + "dev": true, + "requires": { + "core-js": "^3.8.2", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/client-api": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.3.4.tgz", + "integrity": "sha512-lOrfz8ic3+nHZzqIdNH2I7Q3Wp0kS/Ic0PD/3QKvI2f6iVIapIjjWW1xAuor80Dl7rMhOn8zxgXta+7G7Pn2yQ==", + "dev": true, + "requires": { + "@storybook/addons": "6.3.4", + "@storybook/channel-postmessage": "6.3.4", + "@storybook/channels": "6.3.4", + "@storybook/client-logger": "6.3.4", + "@storybook/core-events": "6.3.4", + "@storybook/csf": "0.0.1", + "@types/qs": "^6.9.5", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "global": "^4.4.0", + "lodash": "^4.17.20", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7", + "stable": "^0.1.8", + "store2": "^2.12.0", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/client-logger": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.3.4.tgz", + "integrity": "sha512-Gu4M5bBHHQznsdoj8uzYymeojwWq+CRNsUUH41BQIND/RJYSX1IYGIj0yNBP449nv2pjHcTGlN8NJDd+PcELCQ==", + "dev": true, + "requires": { + "core-js": "^3.8.2", + "global": "^4.4.0" + } + }, + "@storybook/components": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.3.4.tgz", + "integrity": "sha512-0hBKTkkQbW+daaA6nRedkviPr2bEzy1kwq0H5eaLKI1zYeXN3U5Z8fVhO137PPqH5LmLietrmTPkqiljUBk9ug==", + "dev": true, + "requires": { + "@popperjs/core": "^2.6.0", + "@storybook/client-logger": "6.3.4", + "@storybook/csf": "0.0.1", + "@storybook/theming": "6.3.4", + "@types/color-convert": "^2.0.0", + "@types/overlayscrollbars": "^1.12.0", + "@types/react-syntax-highlighter": "11.0.5", + "color-convert": "^2.0.1", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.20", + "markdown-to-jsx": "^7.1.3", + "memoizerific": "^1.11.3", + "overlayscrollbars": "^1.13.1", + "polished": "^4.0.5", + "prop-types": "^15.7.2", + "react-colorful": "^5.1.2", + "react-popper-tooltip": "^3.1.1", + "react-syntax-highlighter": "^13.5.3", + "react-textarea-autosize": "^8.3.0", + "regenerator-runtime": "^0.13.7", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/core-events": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.3.4.tgz", + "integrity": "sha512-6qI5bU5VcAoRfxkvpdRqO16eYrX5M0P2E3TakqUUDcgDo5Rfcwd1wTTcwiXslMIh7oiVGiisA+msKTlfzyKf9Q==", + "dev": true, + "requires": { + "core-js": "^3.8.2" + } + }, + "@storybook/router": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.3.4.tgz", + "integrity": "sha512-cNG2bT0BBfqJyaW6xKUnEB/XXSdMkYeI9ShwJ2gh/2Bnidm7eZ/RKUOZ4q5equMm+SxxyZgpBulqnFN+TqPbOA==", + "dev": true, + "requires": { + "@reach/router": "^1.3.4", + "@storybook/client-logger": "6.3.4", + "@types/reach__router": "^1.3.7", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.20", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "ts-dedent": "^2.0.0" + } + }, + "@storybook/semver": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz", + "integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==", + "dev": true, + "requires": { + "core-js": "^3.6.5", + "find-up": "^4.1.0" + } + }, + "@storybook/theming": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.3.4.tgz", + "integrity": "sha512-L0lJcwUi7mse+U7EBAv5NVt81mH1MtUzk9paik8hMAc68vDtR/X0Cq4+zPsgykCROOTtEGrQ/JUUrpcEqeprTQ==", + "dev": true, + "requires": { + "@emotion/core": "^10.1.1", + "@emotion/is-prop-valid": "^0.8.6", + "@emotion/styled": "^10.0.27", + "@storybook/client-logger": "6.3.4", + "core-js": "^3.8.2", + "deep-object-diff": "^1.1.0", + "emotion-theming": "^10.0.27", + "global": "^4.4.0", + "memoizerific": "^1.11.3", + "polished": "^4.0.5", + "resolve-from": "^5.0.0", + "ts-dedent": "^2.0.0" + } + }, + "axe-core": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.2.1.tgz", + "integrity": "sha512-evY7DN8qSIbsW2H/TWQ1bX3sXN1d4MNb5Vb4n7BzPuCwRHdkZ1H2eNLuSh73EoQqkGKUtju2G2HCcjCfhvZIAA==", + "dev": true + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + } + } + }, "@storybook/addon-actions": { "version": "6.2.9", "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.2.9.tgz", diff --git a/package.json b/package.json index 6d740777243..757eac126de 100644 --- a/package.json +++ b/package.json @@ -78,6 +78,7 @@ "@github/prettier-config": "0.0.4", "@rollup/plugin-commonjs": "19.0.0", "@rollup/plugin-node-resolve": "13.0.0", + "@storybook/addon-a11y": "6.3.4", "@storybook/addon-actions": "^6.2.9", "@storybook/addon-essentials": "6.2.9", "@storybook/addon-links": "^6.2.9", From 0de16db95cca56018ed5b69a48d758d106dcf7b5 Mon Sep 17 00:00:00 2001 From: Max Schoening Date: Thu, 22 Jul 2021 11:11:58 -0700 Subject: [PATCH 2/2] Fix codespace setup (#1337) Use node not root as the user to avoid permission errors Install useful extensions for prettier and eslint --- .devcontainer/devcontainer.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 77afc295214..5c767760576 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,6 +1,8 @@ { "name": "Primer Components", - "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:14", + "image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:14", + "extensions": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"], "forwardPorts": [8000], - "postCreateCommand": ["/bin/bash", "-c", "pushd docs && npm install && popd && npm install"] + "postCreateCommand": ["/bin/bash", "-c", "pushd docs && npm install && popd && npm install"], + "remoteUser": "node" }