diff --git a/.eslintrc.js b/.eslintrc.js index 3e3c73d..c65d91e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -19,7 +19,7 @@ module.exports = { extends: [ 'plugin:@typescript-eslint/recommended', 'plugin:import/typescript', - 'prettier/@typescript-eslint', + 'prettier', ], rules: { '@typescript-eslint/no-explicit-any': 'off', diff --git a/.nvmrc b/.nvmrc index c107424..6b17d22 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -14.15.0 +14.16.1 diff --git a/package.json b/package.json index 347e986..9fc31ca 100644 --- a/package.json +++ b/package.json @@ -35,18 +35,15 @@ }, "devDependencies": { "@tsconfig/recommended": "^1.0.1", - "@types/node": "^14.14.7", - "@typescript-eslint/eslint-plugin": "^4.7.0", - "@typescript-eslint/parser": "^4.7.0", - "eslint": "^7.13.0", - "eslint-config-prettier": "^6.15.0", - "eslint-import-resolver-typescript": "^2.3.0", + "@types/node": "~14.14.43", + "@typescript-eslint/eslint-plugin": "^4.22.0", + "@typescript-eslint/parser": "^4.22.0", + "eslint": "^7.25.0", + "eslint-config-prettier": "^8.3.0", + "eslint-import-resolver-typescript": "^2.4.0", "eslint-plugin-import": "^2.22.1", - "lerna": "^3.22.1", + "lerna": "^4.0.0", "prettier": "^2.1.2", - "typescript": "~4.0.5" - }, - "resolutions": { - "webpack": "^5.0.0" + "typescript": "^4.2.4" } } diff --git a/website/.eslintrc.js b/website/.eslintrc.js index 4b64345..5081971 100644 --- a/website/.eslintrc.js +++ b/website/.eslintrc.js @@ -4,7 +4,7 @@ module.exports = { 'plugin:react/recommended', 'plugin:react-hooks/recommended', 'plugin:jsx-a11y/recommended', - 'prettier/react', + 'prettier', ], rules: { 'react/react-in-jsx-scope': 'off', diff --git a/website/babel.config.js b/website/babel.config.js index 5ca9892..71dbc75 100644 --- a/website/babel.config.js +++ b/website/babel.config.js @@ -8,7 +8,7 @@ module.exports = { 'styled-jsx': { plugins: [ [ - 'styled-jsx-plugin-postcss', + require.resolve('styled-jsx-plugin-postcss'), { path: path.resolve(__dirname, './postcss.config.js') }, ], ], diff --git a/website/components/Button.tsx b/website/components/Button.tsx index 9dd4b44..1aaaa70 100644 --- a/website/components/Button.tsx +++ b/website/components/Button.tsx @@ -1,7 +1,10 @@ import classNames from 'classnames' +import { ReactNode } from 'react' export type ButtonProps = { + children?: ReactNode color?: 'primary' + href?: string outline?: boolean [key: string]: unknown } @@ -50,10 +53,10 @@ export const Button = ({ @apply bg-background duration-150; } .button:hover:active { - @apply outline-none shadow-outline bg-gray-300 duration-0; + @apply outline-none ring bg-gray-300 duration-0; } .button:focus { - @apply outline-none shadow-outline; + @apply outline-none ring; } /* Primary color */ diff --git a/website/components/Typography.tsx b/website/components/Typography.tsx index 41da540..775ba93 100644 --- a/website/components/Typography.tsx +++ b/website/components/Typography.tsx @@ -27,7 +27,7 @@ export const Typography: React.FC = ({ children }) => ( @apply relative font-bold text-sm text-gray-600 mt-6 mb-4; } .typography :global(.anchor-link) { - @apply absolute inset-0 w-5 -ml-5 overflow-hidden whitespace-no-wrap my-auto bg-no-repeat bg-left hidden; + @apply absolute inset-0 w-5 -ml-5 overflow-hidden whitespace-nowrap my-auto bg-no-repeat bg-left hidden; background-size: 1rem 1rem; background-image: url('https://icongr.am/octicons/link.svg?color=718096'); diff --git a/website/components/docs/Breadcrumb.tsx b/website/components/docs/Breadcrumb.tsx index c7255e5..5c3dbed 100644 --- a/website/components/docs/Breadcrumb.tsx +++ b/website/components/docs/Breadcrumb.tsx @@ -33,7 +33,7 @@ export const Breadcrumb = ({ breadcrumbs }: BreadcrumbProps) => ( @apply absolute inset-0 flex items-center justify-end; } ol { - @apply flex-1 inline-flex flex-no-wrap whitespace-no-wrap; + @apply flex-1 inline-flex flex-nowrap whitespace-nowrap; } li { @apply block; diff --git a/website/components/docs/Navigation.tsx b/website/components/docs/Navigation.tsx index 18cc27a..4a92fbd 100644 --- a/website/components/docs/Navigation.tsx +++ b/website/components/docs/Navigation.tsx @@ -63,7 +63,7 @@ export const Navigation = ({ @apply bg-gray-300 duration-0; } .page-link:focus-visible { - @apply shadow-outline; + @apply ring; } .page-link.active { diff --git a/website/components/docs/layouts/Mobile.tsx b/website/components/docs/layouts/Mobile.tsx index f8cbeb3..70e043a 100644 --- a/website/components/docs/layouts/Mobile.tsx +++ b/website/components/docs/layouts/Mobile.tsx @@ -95,6 +95,7 @@ export const Mobile: React.FC = ({ allowOutsideClick: () => true, escapeDeactivates: false, initialFocus: '#docs-nav', + fallbackFocus: '#docs-nav-toggle', }} >