From 33b76ba99b7e0dbb4a105b6c12d88f13ce4c601d Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 28 Apr 2022 20:57:31 +0900 Subject: [PATCH] Components: Fix error in CONTRIBUTING guide --- packages/components/CONTRIBUTING.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md index 67ef3763c3a79..7a19305df5856 100644 --- a/packages/components/CONTRIBUTING.md +++ b/packages/components/CONTRIBUTING.md @@ -495,7 +495,16 @@ Given a component folder (e.g. `packages/components/src/unit-control`): 6. Create a new `types.ts` file. 7. Slowly work your way through fixing the TypeScript errors in the folder: 1. Try to avoid introducing any runtime changes, if possible. The aim of this refactor is to simply rewrite the component to TypeScript. - 2. Add a named export for the unconnected, un-forwarded component. This ensures that the docgen can properly extract the types data. The naming should be so that the connected/forwarded component has the plain component name (`MyComponent`), and the raw component is prefixed (`UnconnectedMyComponent` or `UnforwardedMyComponent`). This makes the component's `displayName` look nicer in React devtools and in the autogenerated Storybook code snippets. + 2. Make sure you have a **named** export for the component, not just the default export ([example](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/divider/component.tsx)). This ensures that the docgen can properly extract the types data. The naming should be so that the connected/forwarded component has the plain component name (`MyComponent`), and the raw component is prefixed (`UnconnectedMyComponent` or `UnforwardedMyComponent`). This makes the component's `displayName` look nicer in React devtools and in the autogenerated Storybook code snippets. + + ```jsx + function UnconnectedMyComponent() { /* ... */ } + + // 👇 Without this named export, the docgen will not work! + export const MyComponent = contextConnect( UnconnectedMyComponent, 'MyComponent' ); + export default MyComponent; + ``` + 3. Extract props to `types.ts`, and use them to type components. The README can be of help when determining a prop’s type. 4. Use existing HTML types when possible? (e.g. `required` for an input field?) 5. Use the `CSSProperties` type where it makes sense.