Skip to content

Commit

Permalink
Extract StorybookArgs type to separate file and use it in other stori…
Browse files Browse the repository at this point in the history
…es too

followup from recharts#3759 (comment)
  • Loading branch information
PavelVanecek committed Sep 16, 2023
1 parent 0a0dbd9 commit a5876e5
Show file tree
Hide file tree
Showing 14 changed files with 219 additions and 119 deletions.
113 changes: 113 additions & 0 deletions storybook/StorybookArgs.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import { Args } from '@storybook/react';

/*
* This is the type as defined here: https://storybook.js.org/docs/react/api/arg-types#argtypes
* The actual library exports only `interface Args { [name: string]: any; }`.
* The "any" does not allow your editor to show autocomplete or documentation.
*
* This has been reported before: https://github.com/storybookjs/storybook/issues/11916
* If the official types get updated then we can remove this whole file
* and import directly Args from '@storybook/react'
*/

export type StorybookArg = {
description?: string;
/**
* This property is not defined in the Storybook Args
* - but our internal recharts `getStoryArgsFromArgsTypesObject` function reads it.
*/
defaultValue?: unknown;
control?: ControlType | { type: ControlType };
options?: string[];
/**
* Specifies the semantic type of the argType.
* When an argType is inferred, the information from the various tools is summarized in this property,
* which is then used to infer other properties, like control and table.type.
*
* If you only need to specify the documented type, you should use `table.type`, instead.
*/
type?: SBType | SBType['name'];
table?: {
defaultValue?: { summary: string; detail?: string } | unknown;
/**
* The documented type of the argType.
* summary is typically used for the type itself,
* while detail is used for additional information.
*
* If you need to specify the actual, semantic type, you should use `type`, instead.
*/
type?: {
summary?: string;
detail?: string;
};
category?: 'Content' | 'Styles' | 'Position' | 'Internal' | string;
};
};

/**
* ArgTypes specify the behavior of args.
* By specifying the type of an arg, you constrain the values that it can accept
* and provide information about args that are not explicitly set (i.e., description).
* You can also use argTypes to “annotate” args with information used by addons that make use of those args.
* For instance, to instruct the controls addon to render a color picker, you could specify the 'color' control type.
*
* See: https://storybook.js.org/docs/react/api/arg-types
*/
export interface StorybookArgs extends Args {
[name: string]: StorybookArg;
}

/**
* See https://storybook.js.org/docs/react/api/arg-types#controltype
*/
type ControlType =
| 'object'
| 'boolean'
| 'check'
| 'inline-check'
| 'radio'
| 'inline-radio'
| 'select'
| 'multi-select'
| 'number'
| 'range'
| 'file'
| 'color'
| 'date'
| 'text';

interface SBBaseType {
required?: boolean;
raw?: string;
}

type SBScalarType = SBBaseType & {
name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
};

type SBArrayType = SBBaseType & {
name: 'array';
value: SBType;
};
type SBObjectType = SBBaseType & {
name: 'object';
value: Record<string, SBType>;
};
type SBEnumType = SBBaseType & {
name: 'enum';
value: (string | number)[];
};
type SBIntersectionType = SBBaseType & {
name: 'intersection';
value: SBType[];
};
type SBUnionType = SBBaseType & {
name: 'union';
value: SBType[];
};
type SBOtherType = SBBaseType & {
name: 'other';
value: string;
};

type SBType = SBScalarType | SBEnumType | SBArrayType | SBObjectType | SBIntersectionType | SBUnionType | SBOtherType;
17 changes: 2 additions & 15 deletions storybook/stories/API/component/Tooltip.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,9 @@ import React from 'react';
import { ResponsiveContainer, Tooltip, LineChart, Line } from '../../../../src';
import { pageData } from '../../data';
import { getStoryArgsFromArgsTypesObject } from '../props/utils';
import { StorybookArgs } from '../../../StorybookArgs';

type MyArgType = {
[argName: string]: {
description: string;
defaultValue?: unknown;
table: {
type: {
summary: string;
detail?: string;
};
category: 'Content' | 'Styles' | 'Position' | 'Internal';
};
};
};

const TooltipProps: MyArgType = {
const TooltipProps: StorybookArgs = {
separator: {
description: 'The separator between name and value.',
defaultValue: ' : ',
Expand Down
16 changes: 8 additions & 8 deletions storybook/stories/API/props/AnimationProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
* This file both exports the documentation of shared props separately, to be reused in places where only single props
* are documented, as well as grouped in case a whole group is needed.
*/
import { Args } from '@storybook/react';
import { StorybookArg, StorybookArgs } from '../../../StorybookArgs';

export const animateNewValues = { table: { category: 'Animation' } };
export const animationBegin = {
export const animateNewValues: StorybookArg = { table: { category: 'Animation' } };
export const animationBegin: StorybookArg = {
description: 'Specifies when the animation should begin, the unit of this option is ms.',
type: { name: 'number' },
defaultValue: 0,
Expand All @@ -14,18 +14,18 @@ export const animationBegin = {
category: 'Animation',
},
};
export const animationDuration = {
export const animationDuration: StorybookArg = {
table: {
category: 'Animation',
},
};
export const animationEasing = {
export const animationEasing: StorybookArg = {
table: {
category: 'Animation',
},
};
export const animationId = { table: { category: 'Animation' } };
export const isAnimationActive = {
export const animationId: StorybookArg = { table: { category: 'Animation' } };
export const isAnimationActive: StorybookArg = {
description: 'If set false, animation of component will be disabled.',
table: {
type: { summary: 'boolean' },
Expand All @@ -40,7 +40,7 @@ export const isAnimationActive = {
* is used. If the group is to be extended, then only single props should be imported by each component that does not
* use all of them.
* */
export const AnimationProps: Args = {
export const AnimationProps: StorybookArgs = {
animateNewValues,
animationBegin,
animationEasing,
Expand Down
36 changes: 19 additions & 17 deletions storybook/stories/API/props/CartesianComponentShared.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Args } from '@storybook/react';
import { StorybookArg, StorybookArgs } from '../../../StorybookArgs';

export const dataKey = {
export const dataKey: StorybookArg = {
description: `The key or getter of a group of data.
It could be an accessor function such as (row)=>value`,
table: {
Expand All @@ -9,15 +9,15 @@ export const dataKey = {
},
};

export const nameKey = {
export const nameKey: StorybookArg = {
description: "The key of each sector's name.",
table: {
type: { summary: 'String' },
category: 'General',
},
};

export const activeShape = {
export const activeShape: StorybookArg = {
description: '',
table: {
type: {
Expand All @@ -27,7 +27,7 @@ export const activeShape = {
},
};

export const trapezoids = {
export const trapezoids: StorybookArg = {
description: 'The coordinates of all trapezoids in the chart, usually calculated internally',
table: {
type: {
Expand All @@ -37,20 +37,20 @@ export const trapezoids = {
},
};

export const xAxisId = {
export const xAxisId: StorybookArg = {
description: 'The id of x-axis which is corresponding to the data.',
table: { type: { summary: 'string | number' }, category: 'General' },
};
export const yAxisId = {
export const yAxisId: StorybookArg = {
description: 'The id of y-axis which is corresponding to the data.',
table: { type: { summary: 'string | number' }, category: 'General' },
};
export const zAxisId = {
export const zAxisId: StorybookArg = {
description: 'The id of z-axis which is corresponding to the data.',
table: { type: { summary: 'string | number' }, category: 'General' },
};

export const General: Args = {
export const General: StorybookArgs = {
dataKey,
id: {
description: `The unique id of this component, which will be used to generate unique clip path id internally.
Expand All @@ -59,22 +59,24 @@ export const General: Args = {
table: { category: 'General' },
},
name: {
type: { name: 'string | number' },
description: `The name of data. This option will be used in tooltip and legend to represent a line.
If no value was set to this option, the value of dataKey will be used alternatively.`,
table: { category: 'General' },
If no value was set to this option, the value of dataKey will be used alternatively.`,
table: {
type: { summary: 'string | number' },
category: 'General',
},
},
unit: {
type: { name: 'string | number' },
table: {
type: { summary: 'string | number' },
category: 'General',
},
},
xAxisId,
yAxisId,
};

export const points = {
export const points: StorybookArg = {
description:
'The coordinates of points in the line, usually calculated internally. In most cases this should not be used.',
table: {
Expand All @@ -86,8 +88,8 @@ export const points = {
},
};

export const data = { table: { category: 'Internal' } };
export const layout = {
export const data: StorybookArg = { table: { category: 'Internal' } };
export const layout: StorybookArg = {
description: 'The layout of line, usually inherited from parent.',
table: {
type: {
Expand All @@ -96,7 +98,7 @@ export const layout = {
category: 'Internal',
},
};
export const Internal = {
export const Internal: StorybookArgs = {
points,
data,
layout,
Expand Down

0 comments on commit a5876e5

Please sign in to comment.