From 8faf87fa0bf1549b9534baeb0f1034c1cf23c68c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Thu, 23 Jun 2022 23:09:29 +0200 Subject: [PATCH 1/7] Grid: Convert component to TypeScript --- packages/components/src/grid/README.md | 46 +++++++------ .../src/grid/{component.js => component.tsx} | 22 ++++--- .../components/src/grid/{hook.js => hook.ts} | 10 +-- .../src/grid/{index.js => index.ts} | 0 packages/components/src/grid/stories/index.js | 49 -------------- .../components/src/grid/stories/index.tsx | 66 +++++++++++++++++++ .../src/grid/test/{grid.js => grid.tsx} | 8 +-- packages/components/src/grid/types.ts | 2 +- .../src/grid/{utils.js => utils.ts} | 16 +++-- .../components/src/ui/form-group/types.ts | 2 +- 10 files changed, 126 insertions(+), 95 deletions(-) rename packages/components/src/grid/{component.js => component.tsx} (60%) rename packages/components/src/grid/{hook.js => hook.ts} (89%) rename packages/components/src/grid/{index.js => index.ts} (100%) delete mode 100644 packages/components/src/grid/stories/index.js create mode 100644 packages/components/src/grid/stories/index.tsx rename packages/components/src/grid/test/{grid.js => grid.tsx} (96%) rename packages/components/src/grid/{utils.js => utils.ts} (70%) diff --git a/packages/components/src/grid/README.md b/packages/components/src/grid/README.md index 27695353d54c2..6fefaef3bb4d1 100644 --- a/packages/components/src/grid/README.md +++ b/packages/components/src/grid/README.md @@ -27,56 +27,64 @@ function Example() { ## Props -##### align - -**Type**: `CSS['alignItems']` +##### `align`: `CSS['alignItems']` Adjusts the block alignment of children. -##### alignment +- Required: No -**Type**: `GridAlignment` +##### `alignment`: `GridAlignment` Adjusts the horizontal and vertical alignment of children. -##### columns +- Required: No -**Type**: `number`,`(number`,`null)[]` +##### `columns`: `number | number[]` Adjusts the number of columns of the `Grid`. -##### gap +- Required: No +- Default: `2` -**Type**: `number` +##### `gap`: `number` Gap between each child. -##### isInline +- Required: No +- Default: `3` -**Type**: `boolean` +##### `isInline`: `boolean` Changes the CSS display from `grid` to `inline-grid`. -##### justify +- Required: No -**Type**: `CSS['justifyContent']` +##### `justify`: `CSS['justifyContent']` Adjusts the inline alignment of children. -##### rows +- Required: No + +##### `rowGap`: `CSSProperties['gridRowGap']` + +Adjusts the `grid-row-gap`. -**Type**: `number`,`(number`,`null)[]` +- Required: No + +##### `rows`: `number | number[]` Adjusts the number of rows of the `Grid`. -##### templateColumns +- Required: No -**Type**: `CSS['gridTemplateColumns']` +##### `templateColumns`: `CSS['gridTemplateColumns']` Adjusts the CSS grid `template-columns`. -##### templateRows +- Required: No -**Type**: `CSS['gridTemplateRows']` +##### `templateRows`: `CSS['gridTemplateRows']` Adjusts the CSS grid `template-rows`. + +- Required: No diff --git a/packages/components/src/grid/component.js b/packages/components/src/grid/component.tsx similarity index 60% rename from packages/components/src/grid/component.js rename to packages/components/src/grid/component.tsx index 7641f15b8acfe..689e641774f72 100644 --- a/packages/components/src/grid/component.js +++ b/packages/components/src/grid/component.tsx @@ -1,15 +1,20 @@ +/** + * External dependencies + */ +import type { ForwardedRef } from 'react'; + /** * Internal dependencies */ -import { contextConnect } from '../ui/context'; +import { contextConnect, WordPressComponentProps } from '../ui/context'; import { View } from '../view'; import useGrid from './hook'; +import type { GridProps } from './types'; -/** - * @param {import('../ui/context').WordPressComponentProps} props - * @param {import('react').ForwardedRef} forwardedRef - */ -function Grid( props, forwardedRef ) { +function UnconnectedGrid( + props: WordPressComponentProps< GridProps, 'div' >, + forwardedRef: ForwardedRef< any > +) { const gridProps = useGrid( props ); return ; @@ -18,7 +23,6 @@ function Grid( props, forwardedRef ) { /** * `Grid` is a primitive layout component that can arrange content in a grid configuration. * - * @example * ```jsx * import { * __experimentalGrid as Grid, @@ -36,6 +40,6 @@ function Grid( props, forwardedRef ) { * } * ``` */ -const ConnectedGrid = contextConnect( Grid, 'Grid' ); +export const Grid = contextConnect( UnconnectedGrid, 'Grid' ); -export default ConnectedGrid; +export default Grid; diff --git a/packages/components/src/grid/hook.js b/packages/components/src/grid/hook.ts similarity index 89% rename from packages/components/src/grid/hook.js rename to packages/components/src/grid/hook.ts index 7e456dec14d12..be615a884fd1c 100644 --- a/packages/components/src/grid/hook.js +++ b/packages/components/src/grid/hook.ts @@ -11,16 +11,16 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ -import { useContextSystem } from '../ui/context'; +import { useContextSystem, WordPressComponentProps } from '../ui/context'; import { getAlignmentProps } from './utils'; import { useResponsiveValue } from '../ui/utils/use-responsive-value'; import CONFIG from '../utils/config-values'; import { useCx } from '../utils/hooks/use-cx'; +import type { GridProps } from './types'; -/** - * @param {import('../ui/context').WordPressComponentProps} props - */ -export default function useGrid( props ) { +export default function useGrid( + props: WordPressComponentProps< GridProps, 'div' > +) { const { align, alignment, diff --git a/packages/components/src/grid/index.js b/packages/components/src/grid/index.ts similarity index 100% rename from packages/components/src/grid/index.js rename to packages/components/src/grid/index.ts diff --git a/packages/components/src/grid/stories/index.js b/packages/components/src/grid/stories/index.js deleted file mode 100644 index 8e969a11712d3..0000000000000 --- a/packages/components/src/grid/stories/index.js +++ /dev/null @@ -1,49 +0,0 @@ -/** - * External dependencies - */ -import { number } from '@storybook/addon-knobs'; - -/** - * Internal dependencies - */ -import { View } from '../../view'; -import { Grid } from '..'; - -export default { - component: Grid, - title: 'Components (Experimental)/Grid', - parameters: { - knobs: { disable: false }, - }, -}; - -const Item = ( props ) => ( - -); - -export const _default = () => { - const props = { - columns: number( 'columns', 4 ), - gap: number( 'gap', 2 ), - }; - return ( - - One - Two - Three - Four - Five - Six - Seven - Eight - - ); -}; diff --git a/packages/components/src/grid/stories/index.tsx b/packages/components/src/grid/stories/index.tsx new file mode 100644 index 0000000000000..659e36c5007bb --- /dev/null +++ b/packages/components/src/grid/stories/index.tsx @@ -0,0 +1,66 @@ +/** + * External dependencies + */ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; + +/** + * Internal dependencies + */ +import { View } from '../../view'; +import { Grid } from '..'; + +const meta: ComponentMeta< typeof Grid > = { + component: Grid, + title: 'Components (Experimental)/Grid', + argTypes: { + as: { control: { type: 'text' } }, + align: { control: { type: 'text' } }, + children: { control: { type: null } }, + columnGap: { control: { type: 'text' } }, + columns: { control: { type: 'number' } }, + justify: { control: { type: 'text' } }, + rowGap: { control: { type: 'text' } }, + rows: { control: { type: 'number' } }, + templateColumns: { control: { type: 'text' } }, + templateRows: { control: { type: 'text' } }, + }, + parameters: { + controls: { + expanded: true, + }, + docs: { source: { state: 'open' } }, + }, +}; +export default meta; + +const Item = ( props: { children: string } ) => ( + +); + +const Template: ComponentStory< typeof Grid > = ( props ) => ( + + One + Two + Three + Four + Five + Six + Seven + Eight + +); + +export const Default: ComponentStory< typeof Grid > = Template.bind( {} ); +Default.args = { + alignment: 'bottom', + columns: 4, + gap: 2, +}; diff --git a/packages/components/src/grid/test/grid.js b/packages/components/src/grid/test/grid.tsx similarity index 96% rename from packages/components/src/grid/test/grid.js rename to packages/components/src/grid/test/grid.tsx index 8508fd419e5f7..791dfa4f52216 100644 --- a/packages/components/src/grid/test/grid.js +++ b/packages/components/src/grid/test/grid.tsx @@ -28,7 +28,7 @@ describe( 'props', () => { test( 'should render gap', () => { const { container } = render( - + @@ -44,7 +44,7 @@ describe( 'props', () => { test( 'should render custom columns', () => { const { container } = render( - + @@ -59,7 +59,7 @@ describe( 'props', () => { test( 'should render custom rows', () => { const { container } = render( - + @@ -120,7 +120,7 @@ describe( 'props', () => { test( 'should render isInline', () => { const { container } = render( - + diff --git a/packages/components/src/grid/types.ts b/packages/components/src/grid/types.ts index 9fc109f6ea5f9..b5e247f07143d 100644 --- a/packages/components/src/grid/types.ts +++ b/packages/components/src/grid/types.ts @@ -22,7 +22,7 @@ type GridColumns = ResponsiveCSSValue< number >; type GridRows = ResponsiveCSSValue< number >; -export type Props = { +export type GridProps = { /** * Adjusts the block alignment of children. */ diff --git a/packages/components/src/grid/utils.js b/packages/components/src/grid/utils.ts similarity index 70% rename from packages/components/src/grid/utils.js rename to packages/components/src/grid/utils.ts index bff93d0f41f3b..6c08d3e49ff86 100644 --- a/packages/components/src/grid/utils.js +++ b/packages/components/src/grid/utils.ts @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import type { CSSProperties } from 'react'; + const ALIGNMENTS = { bottom: { alignItems: 'flex-end', justifyContent: 'center' }, bottomLeft: { alignItems: 'flex-start', justifyContent: 'flex-end' }, @@ -12,14 +17,11 @@ const ALIGNMENTS = { topRight: { alignItems: 'flex-start', justifyContent: 'flex-end' }, }; -/* eslint-disable jsdoc/valid-types */ -/** - * @param {keyof typeof ALIGNMENTS | undefined} alignment - * @return {{ alignItems?: import('react').CSSProperties['alignItems'], justifyContent?: import('react').CSSProperties['justifyContent']}} CSS props for alignment - */ -export function getAlignmentProps( alignment ) { +export function getAlignmentProps( alignment?: keyof typeof ALIGNMENTS ): { + alignItems?: CSSProperties[ 'alignItems' ]; + justifyContent?: CSSProperties[ 'justifyContent' ]; +} { const alignmentProps = alignment ? ALIGNMENTS[ alignment ] : {}; return alignmentProps; } -/* eslint-enable jsdoc/valid-types */ diff --git a/packages/components/src/ui/form-group/types.ts b/packages/components/src/ui/form-group/types.ts index 2b03a375181a2..288acfdba7e17 100644 --- a/packages/components/src/ui/form-group/types.ts +++ b/packages/components/src/ui/form-group/types.ts @@ -7,7 +7,7 @@ import type { CSSProperties, ReactNode, ReactText } from 'react'; * Internal dependencies */ import type { Props as ControlLabelProps } from '../control-label/types'; -import type { Props as GridProps } from '../../grid/types'; +import type { GridProps } from '../../grid/types'; export type FormGroupLabelProps = ControlLabelProps & { labelHidden?: boolean; From 05d34a31bbafa14a6ee7f38ccbbad2db592c8250 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Thu, 23 Jun 2022 23:16:54 +0200 Subject: [PATCH 2/7] Update CHANGELOG.md --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a14895b2044ad..224f5b7131cfc 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -21,6 +21,7 @@ - `VStack`: Convert to TypeScript ([#41850](https://github.com/WordPress/gutenberg/pull/41587)). - `AlignmentMatrixControl`: Refactor away from `_.flattenDeep()` in utils ([#41814](https://github.com/WordPress/gutenberg/pull/41814/)). - `AutoComplete`: Revert recent `exhaustive-deps` refactor ([#41820](https://github.com/WordPress/gutenberg/pull/41820)). +- `Grid`: Convert to TypeScript ([#41923](https://github.com/WordPress/gutenberg/pull/41923)). - `Spacer`: Convert knobs to controls in Storybook ([#41851](https://github.com/WordPress/gutenberg/pull/41851)). ## 19.13.0 (2022-06-15) From 98c5a8ea47f23f7e9bb9c959c82fc727caca04ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Mon, 27 Jun 2022 22:55:42 +0200 Subject: [PATCH 3/7] Add `columnGap` to readme --- packages/components/src/grid/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/src/grid/README.md b/packages/components/src/grid/README.md index 6fefaef3bb4d1..9a0acd1eddc44 100644 --- a/packages/components/src/grid/README.md +++ b/packages/components/src/grid/README.md @@ -39,6 +39,12 @@ Adjusts the horizontal and vertical alignment of children. - Required: No +##### `columnGap`: `CSSProperties['gridColumnGap']` + +Adjusts the `grid-column-gap`. + +- Required: No + ##### `columns`: `number | number[]` Adjusts the number of columns of the `Grid`. From 4f5af9f80f0ee6456eddab6ffdfdafe248453dc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Mon, 27 Jun 2022 22:57:19 +0200 Subject: [PATCH 4/7] Sort props --- packages/components/src/grid/types.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/components/src/grid/types.ts b/packages/components/src/grid/types.ts index b5e247f07143d..d327b39732f91 100644 --- a/packages/components/src/grid/types.ts +++ b/packages/components/src/grid/types.ts @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { CSSProperties } from 'react'; +import type { CSSProperties, ReactNode } from 'react'; type ResponsiveCSSValue< T > = Array< T | undefined > | T; @@ -31,6 +31,10 @@ export type GridProps = { * Adjusts the horizontal and vertical alignment of children. */ alignment?: GridAlignment; + /** + * The children elements. + */ + children: ReactNode; /** * Adjusts the number of columns of the `Grid`. * @@ -41,16 +45,16 @@ export type GridProps = { * Adjusts the `grid-column-gap`. */ columnGap?: CSSProperties[ 'gridColumnGap' ]; - /** - * Changes the CSS display from `grid` to `inline-grid`. - */ - isInline?: boolean; /** * Gap between each child. * * @default 3 */ gap?: number; + /** + * Changes the CSS display from `grid` to `inline-grid`. + */ + isInline?: boolean; /** * Adjusts the inline alignment of children. */ @@ -71,8 +75,4 @@ export type GridProps = { * Adjusts the CSS grid `template-rows`. */ templateRows?: CSSProperties[ 'gridTemplateRows' ]; - /** - * The children elements. - */ - children: React.ReactNode; }; From c72ac3e56db50d8a982b72dd143142637908f3dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Mon, 27 Jun 2022 23:05:27 +0200 Subject: [PATCH 5/7] Update types --- packages/components/src/grid/README.md | 4 ++-- packages/components/src/grid/types.ts | 13 ++++++------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/components/src/grid/README.md b/packages/components/src/grid/README.md index 9a0acd1eddc44..85640de2868c4 100644 --- a/packages/components/src/grid/README.md +++ b/packages/components/src/grid/README.md @@ -45,7 +45,7 @@ Adjusts the `grid-column-gap`. - Required: No -##### `columns`: `number | number[]` +##### `columns`: `number` Adjusts the number of columns of the `Grid`. @@ -77,7 +77,7 @@ Adjusts the `grid-row-gap`. - Required: No -##### `rows`: `number | number[]` +##### `rows`: `number` Adjusts the number of rows of the `Grid`. diff --git a/packages/components/src/grid/types.ts b/packages/components/src/grid/types.ts index d327b39732f91..878e23f8ff531 100644 --- a/packages/components/src/grid/types.ts +++ b/packages/components/src/grid/types.ts @@ -3,7 +3,10 @@ */ import type { CSSProperties, ReactNode } from 'react'; -type ResponsiveCSSValue< T > = Array< T | undefined > | T; +/** + * Internal dependencies + */ +import type { ResponsiveCSSValue } from '../ui/utils/types'; type GridAlignment = | 'bottom' @@ -18,10 +21,6 @@ type GridAlignment = | 'topLeft' | 'topRight'; -type GridColumns = ResponsiveCSSValue< number >; - -type GridRows = ResponsiveCSSValue< number >; - export type GridProps = { /** * Adjusts the block alignment of children. @@ -40,7 +39,7 @@ export type GridProps = { * * @default 2 */ - columns?: GridColumns; + columns?: ResponsiveCSSValue< number >; /** * Adjusts the `grid-column-gap`. */ @@ -66,7 +65,7 @@ export type GridProps = { /** * Adjusts the number of rows of the `Grid`. */ - rows?: GridRows; + rows?: ResponsiveCSSValue< number >; /** * Adjusts the CSS grid `template-columns`. */ From fa54bc4e15ce37a9b13b50c576e62854fc6ed37a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Tue, 28 Jun 2022 09:44:36 +0200 Subject: [PATCH 6/7] Apply suggestions from code review Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> --- packages/components/src/grid/stories/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/components/src/grid/stories/index.tsx b/packages/components/src/grid/stories/index.tsx index 659e36c5007bb..44451c54fd6c9 100644 --- a/packages/components/src/grid/stories/index.tsx +++ b/packages/components/src/grid/stories/index.tsx @@ -17,10 +17,16 @@ const meta: ComponentMeta< typeof Grid > = { align: { control: { type: 'text' } }, children: { control: { type: null } }, columnGap: { control: { type: 'text' } }, - columns: { control: { type: 'number' } }, + columns: { + table: { type: { summary: 'number' } }, + control: { type: 'number' }, + }, justify: { control: { type: 'text' } }, rowGap: { control: { type: 'text' } }, - rows: { control: { type: 'number' } }, + rows: { + table: { type: { summary: 'number' } }, + control: { type: 'number' }, + }, templateColumns: { control: { type: 'text' } }, templateRows: { control: { type: 'text' } }, }, From 4ed173157877ce669c35eb8b93dfebb8c92aed2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Fri, 1 Jul 2022 10:36:25 +0200 Subject: [PATCH 7/7] Move changelog entry to unreleased section --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 21a33420f307f..20f82615679d5 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -4,6 +4,7 @@ ### Internal +- `Grid`: Convert to TypeScript ([#41923](https://github.com/WordPress/gutenberg/pull/41923)). - `TextHighlight`: Convert to TypeScript ([#41698](https://github.com/WordPress/gutenberg/pull/41698)). - `TreeSelect`: Refactor away from `_.repeat()` ([#42070](https://github.com/WordPress/gutenberg/pull/42070/)). @@ -37,7 +38,6 @@ - `VStack`: Convert to TypeScript ([#41850](https://github.com/WordPress/gutenberg/pull/41587)). - `AlignmentMatrixControl`: Refactor away from `_.flattenDeep()` in utils ([#41814](https://github.com/WordPress/gutenberg/pull/41814/)). - `AutoComplete`: Revert recent `exhaustive-deps` refactor ([#41820](https://github.com/WordPress/gutenberg/pull/41820)). -- `Grid`: Convert to TypeScript ([#41923](https://github.com/WordPress/gutenberg/pull/41923)). - `Spacer`: Convert knobs to controls in Storybook ([#41851](https://github.com/WordPress/gutenberg/pull/41851)). - `Heading`: Complete TypeScript migration ([#41921](https://github.com/WordPress/gutenberg/pull/41921)). - `Navigation`: Refactor away from Lodash functions ([#41865](https://github.com/WordPress/gutenberg/pull/41865/)).