fix: Wrong union description with TypeScript #1621 (#1629)

Fixes #1621

examples/sections/styleguide.config.js

@@ -93,8 +93,8 @@ module.exports = {
 			env === 'development'
 				? false
 				: {
-						maxAssetSize: 1150000, // bytes
-						maxEntrypointSize: 1150000, // bytes
+						maxAssetSize: 1200000, // bytes
+						maxEntrypointSize: 1200000, // bytes
 						hints: 'error',
 				  },
 	}),

package.json

@@ -28,6 +28,7 @@
     "node": ">=10"
   },
   "dependencies": {
+    "@tippyjs/react": "4.1.0",
     "@vxna/mini-html-webpack-template": "^1.0.0",
     "acorn": "^6.4.1",
     "acorn-jsx": "^5.1.0",

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import ComplexType from './ComplexTypeRenderder';
+
+function renderComponent(name = 'color', raw = 'red | blue') {
+	return render(<ComplexType name={name} raw={raw} />);
+}
+
+describe('ComplexType', () => {
+	test('should render name', () => {
+		const { getByRole } = renderComponent();
+		expect(getByRole('button')).toHaveTextContent('color');
+	});
+
+	test('should render raw text in the tooltip', () => {
+		const { container, getByRole } = renderComponent();
+		fireEvent.focus(getByRole('button'));
+		expect(container.querySelector('[data-tippy-root]')).toHaveTextContent('red | blue');
+	});
+});

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import Styled, { JssInjectedProps } from 'rsg-components/Styled';
+import { MdInfoOutline } from 'react-icons/md';
+import Text from 'rsg-components/Text';
+import Tooltip from 'rsg-components/Tooltip';
+import * as Rsg from '../../../typings';
+
+export const styles = ({ space }: Rsg.Theme) => ({
+	complexType: {
+		alignItems: 'center',
+		display: 'inline-flex',
+	},
+	icon: {
+		marginLeft: space[0],
+	},
+});
+
+export interface ComplexTypeProps extends JssInjectedProps {
+	name: string;
+	raw: string;
+}
+
+function ComplexTypeRenderer({ classes, name, raw }: ComplexTypeProps) {
+	return (
+		<Tooltip placement="right" content={raw}>
+			<span className={classes.complexType}>
+				<Text>{name}</Text>
+				<MdInfoOutline className={classes.icon} />
+			</span>
+		</Tooltip>
+	);
+}
+
+export default Styled<ComplexTypeProps>(styles)(ComplexTypeRenderer);

src/client/rsg-components/ComplexType/index.ts

@@ -0,0 +1 @@
+export { default } from 'rsg-components/ComplexType/ComplexTypeRenderder';