From 940b1eea7292de5ac1da351dd8574f832aa3d937 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 8 Apr 2020 15:26:42 +0200 Subject: [PATCH 01/11] Primitives: Add types --- packages/primitives/package.json | 1 + packages/primitives/src/svg/index.js | 67 ++++++++++++++++++++++++++++ packages/primitives/tsconfig.json | 11 +++++ 3 files changed, 79 insertions(+) create mode 100644 packages/primitives/tsconfig.json diff --git a/packages/primitives/package.json b/packages/primitives/package.json index 89feb4127e47f..7c21406159fa6 100644 --- a/packages/primitives/package.json +++ b/packages/primitives/package.json @@ -22,6 +22,7 @@ "module": "build-module/index.js", "react-native": "src/index", "sideEffects": false, + "types": "build-types", "dependencies": { "@babel/runtime": "^7.9.2", "@wordpress/element": "file:../element", diff --git a/packages/primitives/src/svg/index.js b/packages/primitives/src/svg/index.js index 470ee1af88b86..b4f41231fe6b5 100644 --- a/packages/primitives/src/svg/index.js +++ b/packages/primitives/src/svg/index.js @@ -8,18 +8,85 @@ import classnames from 'classnames'; */ import { createElement } from '@wordpress/element'; +// Disable reason: JSDoc linter doesn't seem to parse the union (`&`) correctly. +/* eslint-disable jsdoc/valid-types */ +/** @typedef {{className: string} & {isPressed: boolean} & import('react').ComponentPropsWithoutRef<'svg'>} SVGProps */ +/* eslint-enable jsdoc/valid-types */ + +/** + * @param {import('react').ComponentPropsWithoutRef<'circle'>} props + * + * @return {JSX.Element} Circle component + */ export const Circle = ( props ) => createElement( 'circle', props ); + +/** + * @param {import('react').ComponentPropsWithoutRef<'g'>} props + * + * @return {JSX.Element} G component + */ export const G = ( props ) => createElement( 'g', props ); + +/** + * @param {import('react').ComponentPropsWithoutRef<'path'>} props + * + * @return {JSX.Element} Path component + */ export const Path = ( props ) => createElement( 'path', props ); + +/** + * @param {import('react').ComponentPropsWithoutRef<'polygon'>} props + * + * @return {JSX.Element} Polygon component + */ export const Polygon = ( props ) => createElement( 'polygon', props ); + +/** + * @param {import('react').ComponentPropsWithoutRef<'rect'>} props + * + * @return {JSX.Element} Rect component + */ export const Rect = ( props ) => createElement( 'rect', props ); + +/** + * @param {import('react').ComponentPropsWithoutRef<'defs'>} props + * + * @return {JSX.Element} Defs component + */ export const Defs = ( props ) => createElement( 'defs', props ); + +/** + * @param {import('react').ComponentPropsWithoutRef<'radialGradient'>} props + * + * @return {JSX.Element} RadialGradient component + */ export const RadialGradient = ( props ) => createElement( 'radialGradient', props ); + +/** + * @param {import('react').ComponentPropsWithoutRef<'linearGradient'>} props + * + * @return {JSX.Element} LinearGradient component + */ export const LinearGradient = ( props ) => createElement( 'linearGradient', props ); + +/** + * @param {import('react').ComponentPropsWithoutRef<'stop'>} props + * + * @return {JSX.Element} Stop component + */ export const Stop = ( props ) => createElement( 'stop', props ); +/** + * + * @param {SVGProps} props + * @param {string} props.className Class name + * @param {boolean} props.isPressed Is the SVG currently pressed? + * @param {import('react').ComponentPropsWithoutRef<'svg'>} props.props Other props will be passed thru to svg element + * + * @return {JSX.Element} Stop component + */ export const SVG = ( { className, isPressed, ...props } ) => { const appliedProps = { ...props, diff --git a/packages/primitives/tsconfig.json b/packages/primitives/tsconfig.json new file mode 100644 index 0000000000000..5e8e64ac9cd59 --- /dev/null +++ b/packages/primitives/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "rootDir": "src", + "declarationDir": "build-types", + + "noImplicitAny": false, + "strictNullChecks": false + }, + "include": [ "src/**/*" ] +} From 617608d3f21531584ae3487fad187e9cb27467eb Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 8 Apr 2020 15:29:56 +0200 Subject: [PATCH 02/11] Add to root tsconfig --- tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/tsconfig.json b/tsconfig.json index cabb422ec5e5e..a180d9150813b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,6 +12,7 @@ { "path": "packages/i18n" }, { "path": "packages/is-shallow-equal" }, { "path": "packages/prettier-config" }, + { "path": "packages/primitives" }, { "path": "packages/priority-queue" }, { "path": "packages/project-management-automation" }, { "path": "packages/token-list" }, From 9fdd71e8f8b721cc83efe82e8a619a677ddea6a1 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 8 Apr 2020 16:37:50 +0200 Subject: [PATCH 03/11] Small type fix --- packages/primitives/src/svg/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/primitives/src/svg/index.js b/packages/primitives/src/svg/index.js index b4f41231fe6b5..6a310be39fb12 100644 --- a/packages/primitives/src/svg/index.js +++ b/packages/primitives/src/svg/index.js @@ -80,7 +80,7 @@ export const Stop = ( props ) => createElement( 'stop', props ); /** * - * @param {SVGProps} props + * @param {Object} props * @param {string} props.className Class name * @param {boolean} props.isPressed Is the SVG currently pressed? * @param {import('react').ComponentPropsWithoutRef<'svg'>} props.props Other props will be passed thru to svg element From 20c1bf8aa1e92c12ca2eacf75f75665f1d48edd4 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 8 Apr 2020 16:44:30 +0200 Subject: [PATCH 04/11] Try without disabling strictNullChecks --- packages/primitives/tsconfig.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/primitives/tsconfig.json b/packages/primitives/tsconfig.json index 5e8e64ac9cd59..bc0105e8f6971 100644 --- a/packages/primitives/tsconfig.json +++ b/packages/primitives/tsconfig.json @@ -5,7 +5,6 @@ "declarationDir": "build-types", "noImplicitAny": false, - "strictNullChecks": false }, "include": [ "src/**/*" ] } From 91c64bf9de9a711f4f518363f97637e10e2e15c7 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 8 Apr 2020 18:03:39 +0200 Subject: [PATCH 05/11] Fix SVG prop types --- packages/primitives/src/svg/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/primitives/src/svg/index.js b/packages/primitives/src/svg/index.js index 6a310be39fb12..13d4465807953 100644 --- a/packages/primitives/src/svg/index.js +++ b/packages/primitives/src/svg/index.js @@ -93,8 +93,8 @@ export const SVG = ( { className, isPressed, ...props } ) => { className: classnames( className, { 'is-pressed': isPressed } ) || undefined, role: 'img', - 'aria-hidden': 'true', - focusable: 'false', + 'aria-hidden': true, + focusable: false, }; // Disable reason: We need to have a way to render HTML tag for web. From 6fd2513d2727979a04bcb07d2b6031fadd455a13 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 8 Apr 2020 18:03:51 +0200 Subject: [PATCH 06/11] Add project reference --- packages/primitives/tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/primitives/tsconfig.json b/packages/primitives/tsconfig.json index bc0105e8f6971..e58a9321ca8c6 100644 --- a/packages/primitives/tsconfig.json +++ b/packages/primitives/tsconfig.json @@ -6,5 +6,6 @@ "noImplicitAny": false, }, - "include": [ "src/**/*" ] + "include": [ "src/**/*" ], + "references": [ { "path": "../element" } ] } From 713e6312ddb07aa40c4ee01a5d8a8e4488ec91e1 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 8 Apr 2020 18:07:56 +0200 Subject: [PATCH 07/11] Fix SVG type --- packages/primitives/src/svg/index.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/primitives/src/svg/index.js b/packages/primitives/src/svg/index.js index 13d4465807953..07b7350c117c5 100644 --- a/packages/primitives/src/svg/index.js +++ b/packages/primitives/src/svg/index.js @@ -10,7 +10,7 @@ import { createElement } from '@wordpress/element'; // Disable reason: JSDoc linter doesn't seem to parse the union (`&`) correctly. /* eslint-disable jsdoc/valid-types */ -/** @typedef {{className: string} & {isPressed: boolean} & import('react').ComponentPropsWithoutRef<'svg'>} SVGProps */ +/** @typedef {{isPressed: boolean} & import('react').ComponentPropsWithoutRef<'svg'>} SVGProps */ /* eslint-enable jsdoc/valid-types */ /** @@ -80,10 +80,8 @@ export const Stop = ( props ) => createElement( 'stop', props ); /** * - * @param {Object} props - * @param {string} props.className Class name - * @param {boolean} props.isPressed Is the SVG currently pressed? - * @param {import('react').ComponentPropsWithoutRef<'svg'>} props.props Other props will be passed thru to svg element + * @param {SVGProps} props isPressed indicates whether the SVG should appear as pressed. + * Other props will be passed through to svg component. * * @return {JSX.Element} Stop component */ From b5a666870d7fd0c0c5917f101624ade58c61b9a5 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 8 Apr 2020 18:40:37 +0200 Subject: [PATCH 08/11] Install @types/classnames --- package-lock.json | 6 ++++++ package.json | 1 + 2 files changed, 7 insertions(+) diff --git a/package-lock.json b/package-lock.json index ad0c7ad9bbec3..243abb8e3407a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9837,6 +9837,12 @@ "@types/responselike": "*" } }, + "@types/classnames": { + "version": "2.2.10", + "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.10.tgz", + "integrity": "sha512-1UzDldn9GfYYEsWWnn/P4wkTlkZDH7lDb0wBMGbtIQc9zXEQq7FlKBdZUn6OBqD8sKZZ2RQO2mAjGpXiDGoRmQ==", + "dev": true + }, "@types/color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", diff --git a/package.json b/package.json index c58b999948fa3..1b389b5c5407d 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ "@storybook/addon-viewport": "5.3.2", "@storybook/react": "5.3.2", "@testing-library/react": "10.0.2", + "@types/classnames": "2.2.10", "@types/lodash": "4.14.149", "@types/prettier": "1.19.0", "@types/qs": "6.9.1", From 1de5d3a41754cb95bfdf5dc3bc0e664c19e7f9e6 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 8 Apr 2020 18:41:03 +0200 Subject: [PATCH 09/11] Set noImplicitAny to false --- packages/primitives/tsconfig.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/primitives/tsconfig.json b/packages/primitives/tsconfig.json index e58a9321ca8c6..085d6fa752ab0 100644 --- a/packages/primitives/tsconfig.json +++ b/packages/primitives/tsconfig.json @@ -2,9 +2,7 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "rootDir": "src", - "declarationDir": "build-types", - - "noImplicitAny": false, + "declarationDir": "build-types" }, "include": [ "src/**/*" ], "references": [ { "path": "../element" } ] From 753978099e30cb141216f5146f0791f460fbb049 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Fri, 10 Apr 2020 15:18:04 +0200 Subject: [PATCH 10/11] Update snapshots --- .../test/__snapshots__/control.js.snap | 4 +- .../test/__snapshots__/index.js.snap | 4 +- .../test/__snapshots__/index.js.snap | 24 +- .../test/__snapshots__/index.js.snap | 4 +- .../test/__snapshots__/index.js.snap | 4 +- .../enable-custom-fields.js.snap | 8 +- storybook/test/__snapshots__/index.js.snap | 1916 ++++++++--------- 7 files changed, 982 insertions(+), 982 deletions(-) diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index 0c9032a1c70c9..58b41fe54e38a 100644 --- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap +++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap @@ -53,9 +53,9 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` type="button" />