Fix Wrong union description with TypeScript #1621 #1629

mitsuruog · 2020-07-12T13:56:30Z

Resolved:

Wrong union description with TypeScript Wrong union description with TypeScript #1621

Main changes:

Create a new component named ComplexType and Tooltip to show the complex type
Introduce tippyjs-react in the project
~~Add styleMock in the test assets to mock CSS import~~

Hover Actions:

Keyboard Actions:
(use Tab key)

package.json

mitsuruog · 2020-07-14T12:27:55Z

I can't pass the CI steps of npm run build:sections due to the next error.

asset size limit: The following asset(s) exceed the recommended size limit (1.05 MiB).

@sapegin
Can I remove the performance settings here?
https://github.com/styleguidist/react-styleguidist/blob/master/examples/sections/styleguide.config.js#L92-L99

sapegin

Thanks for the pull request! This is a very useful feature. I've left a few general comments on the implementation but this is a very good start!

About the size checker: how much bigger it is now? It is here to avoid an accidental increase of the bundle size.

src/client/rsg-components/ComplexType/ComplexTypeRenderer.tsx

src/client/rsg-components/ComplexType/ComplexType.spec.tsx

mitsuruog · 2020-07-14T14:17:04Z

Actually the bundle size is increased 1.1MB => 1.5MB. In my opinion, this increase is unacceptable.
However, it is almost close to the limit as it is now, and it may have the same problem again in the near future.

sapegin · 2020-07-14T14:20:11Z

That's the idea: the limit should be very close to the actual size so any increase is visible. Let's check again with custom styles, I believe they'll be much smaller.

mitsuruog · 2020-07-23T14:03:30Z

@sapegin Hi, I have updated my PR but I am still facing the CI step problem.
Actually the bundle size is increased 1.1MB => 1.11MB not so bad.

sapegin · 2020-07-23T14:14:35Z

Have you tried to update the limit?

mitsuruog · 2020-07-23T14:18:55Z

not yet. I can update it, but what do you think the next limit should be?

codecov · 2020-07-23T14:49:14Z

Codecov Report

Merging #1629 into master will increase coverage by 0.16%.
The diff coverage is 100.00%.

Impacted Files	Coverage Δ
...sg-components/ComplexType/ComplexTypeRenderder.tsx	`100.00% <100.00%> (ø)`
src/client/rsg-components/Props/renderType.tsx	`96.96% <100.00%> (+7.78%)`	⬆️
.../client/rsg-components/Tooltip/TooltipRenderer.tsx	`100.00% <100.00%> (ø)`

sapegin · 2020-07-23T14:50:38Z

As I've already explained: as close as possible, so 1.15 should be fine.

mitsuruog · 2020-07-24T02:16:35Z

hmmm... I have no idea how to increase the coverage any further.

sapegin · 2020-07-24T06:41:30Z

I believe covering this line is the way:

return <Type>unknown</Type>;

mitsuruog · 2020-07-24T07:58:58Z

Do you know what input to give to reach this case?

mitsuruog · 2020-07-27T14:37:00Z

src/client/rsg-components/Props/renderType.tsx

 function renderAdvancedType(type: TypeDescriptor): React.ReactNode {
-	if (!type) {


@sapegin
I think the line above is usually unreachable code for now.

Because:

The type passed to this function is based on prop.flowType or prop.tsType.

This function does not enter the branch unless prop.flowType or prop.tsType is defined.

Therefore, what I can do is:

Remove unreachable codes to increase coverage.

Test only this function by itself to get the coverage

Allow for this reduction in coverage.

what do you think?

I'd like to keep this line and test it on its own, as there may be some changes in the future that might unintentionally go into this branch. in my opinion tho.

I think removing makes more sense — according to code and types it should be defined. And it would be great to fix type as any on the call site.

And it would be great to fix type as any on the call site.

good point. haha.
but It may be difficult in places where the type definitions are a bit mixed up.
I'll try it out for a bit, but if it's difficult, I think I'll ask for a review as it is.

Thanks! Don't spend too much time on it though ;-)

mitsuruog · 2020-07-27T15:46:36Z

src/typings/dependencies/react-docgen.ts

@@ -58,7 +58,6 @@ declare module 'react-docgen' {
 			| 'objectOf'
 			| 'shape'
 			| 'exact'
-			| 'union'


duplicated definition for TypeUnionDescriptor

mitsuruog · 2020-07-27T15:48:53Z

@sapegin please review me again when you have time!

sapegin

Very good, we're getting there! Just a few minor things left. 🦄

sapegin · 2020-07-30T05:58:00Z

src/client/rsg-components/Tooltip/Tooltip.spec.tsx

+		expect(container).toContainElement(getByTestId('child'));
+	});
+
+	test('should the child component be wrapped by "role=button" element', () => {


Testing that this element is clickable and actually doing something (opening a tooltip) would be more useful, this test doesn't add value to other tests.

it's fine to remove it as it's been tested in other cases.

sapegin · 2020-07-30T05:59:52Z

src/client/rsg-components/Tooltip/Tooltip.spec.tsx

+		await waitFor(() =>
+			expect(container.querySelector('[data-state="visible"]')).toBeInTheDocument()
+		);
+		expect(container.querySelector('[data-state]')).toHaveAttribute('data-state', 'visible');


This line is the same assertion as the previous, so you can drop it.

sapegin · 2020-07-30T06:02:29Z

src/client/rsg-components/ComplexType/ComplexTypeRenderder.tsx

+export const styles = ({ space }: Rsg.Theme) => ({
+	complexType: {
+		alignItems: 'center',
+		cursor: 'pointer',


Shouldn't this be in the Tooltip component?

I moved it to the tooltip, but the cursor didn't change as I expected, so I added a style here.
However, I think this cursor should change depending on the component it's wrapped around, so I would like to remove it for now.

sapegin · 2020-07-30T06:03:27Z

src/client/rsg-components/ComplexType/ComplexTypeRenderder.tsx

+		alignItems: 'center',
+		cursor: 'pointer',
+		display: 'inline-flex',
+		'& span': {


What's this span? Looks like this selector is very fragile and relies on the implementation of another component.

Good point. this span is actually the icon. but I should have used a more safe way to avoid breaking.

mitsuruog · 2020-07-30T14:55:05Z

@sapegin please review me again.

mitsuruog · 2020-08-24T14:02:43Z

@sapegin review me, please.

sapegin · 2020-08-24T15:10:44Z

Thanks, merging! Sorry for the delay ;-/

styleguidist-bot · 2020-09-02T09:48:00Z

🎉 This PR is included in version 11.0.9 🎉

The release is available on:

Your semantic-release bot 📦🚀

mitsuruog commented Jul 12, 2020

View reviewed changes

package.json Outdated Show resolved Hide resolved

sapegin requested changes Jul 14, 2020

View reviewed changes

src/client/rsg-components/ComplexType/ComplexTypeRenderer.tsx Outdated Show resolved Hide resolved

src/client/rsg-components/ComplexType/ComplexTypeRenderer.tsx Outdated Show resolved Hide resolved

src/client/rsg-components/ComplexType/ComplexType.spec.tsx Outdated Show resolved Hide resolved

mitsuruog force-pushed the fix-1621 branch from 742c059 to 1e6a574 Compare July 23, 2020 13:50

mitsuruog commented Jul 27, 2020

View reviewed changes

sapegin requested changes Jul 30, 2020

View reviewed changes

mitsuruog added 7 commits August 24, 2020 22:14

Fix Wrong union description with TypeScript styleguidist#1621

fef57c8

Update the bundle size limit

84b4e75

Add test

8ffe7a2

Remove unreachable statement

8105d50

Fix type as any

64d69c7

Tweak styles

70d5afe

Drop some duplicated assertions

444f622

mitsuruog force-pushed the fix-1621 branch from cd9f72c to 444f622 Compare August 24, 2020 13:14

sapegin merged commit a9783d6 into styleguidist:master Aug 24, 2020

styleguidist-bot added the released label Sep 2, 2020

This was referenced Mar 14, 2021

[Snyk] Security upgrade react-styleguidist from 9.0.8 to 11.0.9 rollup-umd/react-styleguidist#78

Open

[Snyk] Security upgrade react-styleguidist from 6.5.3 to 11.0.9 rollup-umd/react-styleguidist#79

Open

Bhanditz mentioned this pull request Nov 5, 2022

[Snyk] Fix for 1 vulnerabilities Bhanditz/react-styleguidist#166

Open

kopax mentioned this pull request Nov 5, 2022

[Snyk] Fix for 1 vulnerabilities rollup-umd/react-styleguidist#132

Open

Bhanditz mentioned this pull request Nov 5, 2022

[Snyk] Security upgrade react-styleguidist from 6.0.33 to 11.0.9 Bhanditz/react-styleguidist#167

Open

This was referenced Dec 25, 2022

[Snyk] Security upgrade react-styleguidist from 6.0.33 to 11.0.9 Bhanditz/react-styleguidist#174

Open

[Snyk] Fix for 1 vulnerabilities Bhanditz/react-styleguidist#176

Open

kopax mentioned this pull request Dec 26, 2022

[Snyk] Fix for 1 vulnerabilities rollup-umd/react-styleguidist#142

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix Wrong union description with TypeScript #1621 #1629

Fix Wrong union description with TypeScript #1621 #1629

mitsuruog commented Jul 12, 2020 •

edited

mitsuruog commented Jul 14, 2020

sapegin left a comment

mitsuruog commented Jul 14, 2020

sapegin commented Jul 14, 2020

mitsuruog commented Jul 23, 2020

sapegin commented Jul 23, 2020

mitsuruog commented Jul 23, 2020

codecov bot commented Jul 23, 2020 •

edited

sapegin commented Jul 23, 2020

mitsuruog commented Jul 24, 2020

sapegin commented Jul 24, 2020

mitsuruog commented Jul 24, 2020

mitsuruog Jul 27, 2020 •

edited

sapegin Jul 27, 2020

mitsuruog Jul 27, 2020

sapegin Jul 27, 2020

mitsuruog Jul 27, 2020

mitsuruog commented Jul 27, 2020

sapegin left a comment

sapegin Jul 30, 2020

mitsuruog Jul 30, 2020

sapegin Jul 30, 2020

sapegin Jul 30, 2020

mitsuruog Jul 30, 2020

sapegin Jul 30, 2020

mitsuruog Jul 30, 2020

mitsuruog commented Jul 30, 2020

mitsuruog commented Aug 24, 2020

sapegin commented Aug 24, 2020

styleguidist-bot commented Sep 2, 2020

		function renderAdvancedType(type: TypeDescriptor): React.ReactNode {
		if (!type) {

Navigation Menu

Fix Wrong union description with TypeScript #1621 #1629

Fix Wrong union description with TypeScript #1621 #1629

Conversation

mitsuruog commented Jul 12, 2020 • edited

mitsuruog commented Jul 14, 2020

sapegin left a comment

Choose a reason for hiding this comment

mitsuruog commented Jul 14, 2020

sapegin commented Jul 14, 2020

mitsuruog commented Jul 23, 2020

sapegin commented Jul 23, 2020

mitsuruog commented Jul 23, 2020

codecov bot commented Jul 23, 2020 • edited

Codecov Report

sapegin commented Jul 23, 2020

mitsuruog commented Jul 24, 2020

sapegin commented Jul 24, 2020

mitsuruog commented Jul 24, 2020

mitsuruog Jul 27, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mitsuruog commented Jul 27, 2020

sapegin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mitsuruog commented Jul 30, 2020

mitsuruog commented Aug 24, 2020

sapegin commented Aug 24, 2020

styleguidist-bot commented Sep 2, 2020

mitsuruog commented Jul 12, 2020 •

edited

codecov bot commented Jul 23, 2020 •

edited

mitsuruog Jul 27, 2020 •

edited