Components with optional properties aren't set up in a react-docgen/Storybook-friendly manner

[Arthri]

Storybook supports automatically generating controls from the output of react-docgen, so that users do not have to copy a component's properties again to the story.

By default, Storybook will choose a control for each arg based on its initial value. This will work well with specific arg types (e.g., boolean or string). To enable them, add the component annotation to the default export of your story file, and it will be used to infer the controls and auto-generate the matching argTypes for your component using react-docgen, a documentation generator for React components that also includes first-class support for TypeScript.
https://storybook.js.org/docs/essentials/controls

The underlying tool, react-docgen, has three explicitly supported cases for automatic inferring of default values:

Finds the default props from the react component and adds it to the documentation. Supported variants are:

• The static property named defaultProps in Class components
• Assignment of the static property defaultProps on Class or Function components
• Default values in destructuring the prop argument in Function components
  https://react-docgen.dev/docs/reference/handlers/default-props-handler

However, many components assign default values in deconstruction inside the function body, rather than in the function arguments. Consequently, Storybook is unable to pick up on the default values of these properties, and leaves them blank. Furthermore, Storybook controls are also not set up as a result.

tgui-core/lib/components/ProgressBar.tsx

Lines 62 to 73 in 79866ec

	export function ProgressBar(props: Props) {
	const {
	className,
	value,
	minValue = 0,
	maxValue = 1,
	color,
	ranges = {},
	empty,
	children,
	...rest
	} = props;

tgui-core/lib/components/Button.tsx

Lines 77 to 82 in 79866ec

	export function Button(props: Props) {
	const {
	captureKeys = true,
	children,
	circular,
	className,

tgui-core/lib/components/Chart.tsx

Lines 81 to 90 in 79866ec

	export function Chart(props: Props) {
	const {
	data = [],
	rangeX,
	rangeY,
	fillColor = 'none',
	strokeColor = '#ffffff',
	strokeWidth = 2,
	...rest
	} = props;

[ZeWaka]

Welcome to my exact problems at work

i solved this for WebComponents. you could do a similar solution but that's somewhat of a maze