From c692b4e25e15788406439cf8ca2bf1cde3fa77bb Mon Sep 17 00:00:00 2001 From: Hiroshi Urabe Date: Tue, 23 Aug 2022 18:52:45 +0900 Subject: [PATCH] Card: migrate to TypeScript (#42941) * rename to ts * Replace component with tsx. * move MediaProps to types.ts * fix imports * component props to DRY * convert to ts. * fix type. * remove generics * fix types * named export * remove args * fix CONTRIBUTING.md * fix import order * Update packages/components/src/card/card/hook.ts Co-authored-by: Marco Ciampini * convert to typescript * remove `@example` . * add wrapper * fix path * rename snapshot * add CHANGELOG.md Co-authored-by: Marco Ciampini --- packages/components/CHANGELOG.md | 2 + packages/components/CONTRIBUTING.md | 20 +- .../card-body/{component.js => component.tsx} | 22 +- .../src/card/card-body/{hook.js => hook.ts} | 10 +- .../src/card/card-body/{index.js => index.ts} | 0 .../{component.js => component.tsx} | 26 ++- .../card/card-divider/{hook.js => hook.ts} | 10 +- .../card/card-divider/{index.js => index.ts} | 0 .../{component.js => component.tsx} | 22 +- .../src/card/card-footer/{hook.js => hook.ts} | 10 +- .../card/card-footer/{index.js => index.ts} | 0 .../{component.js => component.tsx} | 22 +- .../src/card/card-header/{hook.js => hook.ts} | 10 +- .../card/card-header/{index.js => index.ts} | 0 .../{component.js => component.tsx} | 21 +- .../src/card/card-media/{hook.js => hook.ts} | 10 +- .../card/card-media/{index.js => index.ts} | 0 .../card/card/{component.js => component.tsx} | 22 +- .../src/card/card/{hook.js => hook.ts} | 22 +- .../src/card/card/{index.js => index.ts} | 0 .../src/card/{context.js => context.ts} | 0 .../src/card/{index.js => index.ts} | 0 packages/components/src/card/stories/index.js | 209 ------------------ .../components/src/card/stories/index.tsx | 75 +++++++ .../src/card/{styles.js => styles.ts} | 0 .../{index.js.snap => index.tsx.snap} | 0 .../src/card/test/{index.js => index.tsx} | 6 +- packages/components/src/card/types.ts | 9 +- 28 files changed, 215 insertions(+), 313 deletions(-) rename packages/components/src/card/card-body/{component.js => component.tsx} (60%) rename packages/components/src/card/card-body/{hook.js => hook.ts} (78%) rename packages/components/src/card/card-body/{index.js => index.ts} (100%) rename packages/components/src/card/card-divider/{component.js => component.tsx} (51%) rename packages/components/src/card/card-divider/{hook.js => hook.ts} (72%) rename packages/components/src/card/card-divider/{index.js => index.ts} (100%) rename packages/components/src/card/card-footer/{component.js => component.tsx} (51%) rename packages/components/src/card/card-footer/{hook.js => hook.ts} (79%) rename packages/components/src/card/card-footer/{index.js => index.ts} (100%) rename packages/components/src/card/card-header/{component.js => component.tsx} (51%) rename packages/components/src/card/card-header/{hook.js => hook.ts} (79%) rename packages/components/src/card/card-header/{index.js => index.ts} (100%) rename packages/components/src/card/card-media/{component.js => component.tsx} (56%) rename packages/components/src/card/card-media/{hook.js => hook.ts} (72%) rename packages/components/src/card/card-media/{index.js => index.ts} (100%) rename packages/components/src/card/card/{component.js => component.tsx} (83%) rename packages/components/src/card/card/{hook.js => hook.ts} (72%) rename packages/components/src/card/card/{index.js => index.ts} (100%) rename packages/components/src/card/{context.js => context.ts} (100%) rename packages/components/src/card/{index.js => index.ts} (100%) delete mode 100644 packages/components/src/card/stories/index.js create mode 100644 packages/components/src/card/stories/index.tsx rename packages/components/src/card/{styles.js => styles.ts} (100%) rename packages/components/src/card/test/__snapshots__/{index.js.snap => index.tsx.snap} (100%) rename packages/components/src/card/test/{index.js => index.tsx} (98%) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d7fa897ccdb538..f1b7f378e166b1 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -47,6 +47,7 @@ - `Modal`: use `KeyboardEvent.code` instead of deprecated `KeyboardEvent.keyCode`. improve unit tests ([#43429](https://github.com/WordPress/gutenberg/pull/43429/)). - `FocalPointPicker`: use `KeyboardEvent.code`, partially refactor tests to modern RTL and `user-event` ([#43441](https://github.com/WordPress/gutenberg/pull/43441/)). - `CustomGradientPicker`: use `KeyboardEvent.code` instead of `KeyboardEvent.keyCode` ([#43437](https://github.com/WordPress/gutenberg/pull/43437/)). +- `Card`: Convert to TypeScript ([#42941](https://github.com/WordPress/gutenberg/pull/42941)). - `NavigableContainer`: Refactor away from `_.omit()` ([#43474](https://github.com/WordPress/gutenberg/pull/43474/)). - `Notice`: Refactor away from `_.omit()` ([#43474](https://github.com/WordPress/gutenberg/pull/43474/)). - `Snackbar`: Refactor away from `_.omit()` ([#43474](https://github.com/WordPress/gutenberg/pull/43474/)). @@ -54,6 +55,7 @@ - `BottomSheet`: Refactor away from `_.omit()` ([#43474](https://github.com/WordPress/gutenberg/pull/43474/)). ### Experimental + - `FormTokenField`: add `__experimentalAutoSelectFirstMatch` prop to auto select the first matching suggestion on typing ([#42527](https://github.com/WordPress/gutenberg/pull/42527/)). ## 19.17.0 (2022-08-10) diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md index 0b866036905938..ca8f948b7ee853 100644 --- a/packages/components/CONTRIBUTING.md +++ b/packages/components/CONTRIBUTING.md @@ -156,8 +156,8 @@ function Example( A couple of good examples of how hooks are used for composition are: -- the `Card` component, which builds on top of the `Surface` component by [calling the `useSurface` hook inside its own hook](/packages/components/src/card/card/hook.js); -- the `HStack` component, which builds on top of the `Flex` component and [calls the `useFlex` hook inside its own hook](/packages/components/src/h-stack/hook.js). +- the `Card` component, which builds on top of the `Surface` component by [calling the `useSurface` hook inside its own hook](/packages/components/src/card/card/hook.ts); +- the `HStack` component, which builds on top of the `Flex` component and [calls the `useFlex` hook inside its own hook](/packages/components/src/h-stack/hook.tsx).