Preview: Allow hooks to be passed in component or similar property #28910
Conversation
Ensure that hooks can be passed in component or similar properties in React/TypeScript. This resolves the problem where hooks were not properly recognized or used when passed in this way.
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
LGTM
2 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings
ndelangen
changed the title
|
@Danielmart02Can you tell me how does this fix the problem described in the linked issue? If we need to add an extra story for the testing the react renderer, we'd have to do it here: |
| * This story demonstrates the usage of the `useExampleHook` by | ||
| * displaying the returned message from the hook. | ||
| */ | ||
| export const Default: Story = { |
There was a problem hiding this comment.
If there is no message returned from the hook, how would the Story look like? Or should there always be a message? Also would be nice to see some unit tests, even if the functionality seems pretty straightforwrd
There was a problem hiding this comment.
I suggest adding some unit tests, in addition look into @ndelangen 's comment, also make sure that all CI / CD tests are passing for your PR to be merged
Closes #23216
Closes#23216 : Feature Request]: Allow hooks to be passed in component or similar property - React/Typescript
What I did
This PR introduces the useExampleHook.stories.tsx and useExampleHook.ts files to address the issue of passing hooks as component properties within a Storybook project using React and TypeScript. These changes enable developers to integrate hooks as arguments or within components, ensuring proper type-checking and seamless JSDoc documentation.
Created useExampleHook.stories.tsx: Developed a Storybook story to demonstrate the usage of a React hook within a component, ensuring compatibility with TypeScript and integration with JSDoc for enhanced documentation.
Created useExampleHook.ts: Implemented a custom React hook (useExampleHook) with JSDoc commentary to facilitate its usage and documentation in Storybook stories.
This PR does not modify Storybook's core functionality but offers a practical workaround for developers facing similar issues when using hooks with TypeScript in their projects.
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>Greptile Summary
This pull request introduces a solution for documenting and testing React hooks in Storybook with TypeScript support.
sandbox/react-vite-default-ts/src/stories/useExampleHook.stories.tsxto demonstrate how to create a story for a custom hooksandbox/react-vite-default-ts/src/stories/useExampleHook.tsimplementing a simple custom hook with JSDoc commentscomponentor similar property - React/Typescript #23216 by providing a workaround for passing hooks as component properties in Storybook