Skip to content

Commit 9b7ba3d

Browse files
committed
refactor: replace PropsTable with AutoPropsTable in documentation for various components
1 parent 9e77fc9 commit 9b7ba3d

23 files changed

Lines changed: 27 additions & 412 deletions

docs/docs/components/blocks.mdx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
---
22
---
33

4-
import PropsTable from '../../src/components/props-table'
54
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
6-
import { getPropsTableData } from '../../src/components/helpers'
5+
import AutoPropsTable from '../../src/components/auto-props-table'
76
import { Blocks } from 'react-loader-spinner'
87

98
# Blocks
@@ -30,4 +29,4 @@ import { Blocks } from 'react-loader-spinner'
3029
</LiveProvider>
3130
--- ## Props
3231

33-
<PropsTable properties={[...getPropsTableData('blocks', ['colors'])]} />
32+
<AutoPropsTable component="Blocks" exclude={["gradientType", "gradientAngle", "colors"]} />
Lines changed: 1 addition & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
---
33

4-
import PropsTable from '../../src/components/props-table'
54
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
65
import { CirclesWithBar } from 'react-loader-spinner'
76

@@ -35,72 +34,4 @@ import { CirclesWithBar } from 'react-loader-spinner'
3534

3635
## Props
3736

38-
<PropsTable
39-
properties={[
40-
{
41-
name: 'wrapperStyle',
42-
type: 'object',
43-
default: 'undefined',
44-
description:
45-
'Styles to be applied to the wrapper. It should be a valid CSS object. It can be used for custom styling. It will override the default style.',
46-
},
47-
{
48-
name: 'visible',
49-
type: 'boolean',
50-
default: 'true',
51-
description: 'Whether the circles are visible',
52-
},
53-
{
54-
name: 'wrapperClass',
55-
type: 'string',
56-
default: '',
57-
description: 'CSS class name for the wrapper element',
58-
},
59-
{
60-
name: 'height',
61-
type: 'string | number',
62-
default: '100',
63-
description: 'Height of the wrapper element',
64-
},
65-
{
66-
name: 'width',
67-
type: 'string | number',
68-
default: '100',
69-
description: 'Width of the wrapper element',
70-
},
71-
{
72-
name: 'color',
73-
type: 'string',
74-
default: '#4fa94d',
75-
description:
76-
'Color of the outer circle. It will also be used for the bar color if `barColor` is not specified.',
77-
},
78-
{
79-
name: 'outerCircleColor',
80-
type: 'string',
81-
default: 'undefined',
82-
description:
83-
'Color of the outer circle. If not defined, it will be the same as color',
84-
},
85-
{
86-
name: 'innerCircleColor',
87-
type: 'string',
88-
default: 'undefined',
89-
description:
90-
'Color of the inner circle. If not defined, it will be the same as color',
91-
},
92-
{
93-
name: 'barColor',
94-
type: 'string',
95-
default: 'undefined',
96-
description:
97-
'Color of the bar. If not defined, it will be the same as color',
98-
},
99-
{
100-
name: 'ariaLabel',
101-
type: 'string',
102-
default: 'circles-with-bar-loading',
103-
description: 'Aria label for the wrapper element',
104-
},
105-
]}
106-
/>
37+
<AutoPropsTable component="CirclesWithBar" exclude={["gradientType", "gradientAngle", "colors"]} />

docs/docs/components/circles.mdx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
---
22
---
33

4-
import PropsTable from '../../src/components/props-table'
54
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
6-
import { getPropsTableData } from '../../src/components/helpers'
75
import { Circles } from 'react-loader-spinner'
86

97
# Circles
@@ -33,4 +31,4 @@ import { Circles } from 'react-loader-spinner'
3331

3432
### Props
3533

36-
<PropsTable properties={[...getPropsTableData('circles', ['colors'])]} />
34+
<AutoPropsTable component="Circles" exclude={["gradientType", "gradientAngle", "colors"]} />

docs/docs/components/color-ring.mdx

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
---
22
---
33

4-
import PropsTable from '../../src/components/props-table'
54
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
6-
import { getPropsTableData } from '../../src/components/helpers'
5+
import AutoPropsTable from '../../src/components/auto-props-table'
76
import { ColorRing } from 'react-loader-spinner'
87

98
# Color Ring
@@ -33,23 +32,7 @@ import { ColorRing } from 'react-loader-spinner'
3332

3433
## Props
3534

36-
<PropsTable
37-
properties={[
38-
...getPropsTableData('color-ring', ['colors']),
39-
{
40-
name: 'colors',
41-
type: 'array',
42-
default: `[
43-
"#e15b64",
44-
"#f47e60",
45-
"#f8b26a",
46-
"#abbd81",
47-
"#849b87"
48-
]`,
49-
description: 'Array of colors to be used in the ring',
50-
},
51-
]}
52-
/>
35+
<AutoPropsTable component="ColorRing" exclude={["gradientType", "gradientAngle"]} />
5336

5437
## More example:
5538

docs/docs/components/dna.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,4 @@ import { DNA } from 'react-loader-spinner'
3131

3232
## Props
3333

34-
<AutoPropsTable component="DNA" exclude={["gradientType", "gradientAngle", "colors"]} />
34+
<AutoPropsTable component="DNA" />

docs/docs/components/falling-lines.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
---
33

4-
import PropsTable from '../../src/components/props-table'
54
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
65
import { FallingLines } from 'react-loader-spinner'
76

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
---
22
---
33

4-
import PropsTable from '../../src/components/props-table'
54
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
6-
import { getPropsTableData } from '../../src/components/helpers'
75
import { FidgetSpinner } from 'react-loader-spinner'
6+
import AutoPropsTable from '../../src/components/auto-props-table'
87

98
# Fidget Spinner
109

@@ -31,26 +30,6 @@ import { FidgetSpinner } from 'react-loader-spinner'
3130

3231
## Props
3332

34-
<PropsTable
35-
properties={[
36-
...getPropsTableData('fidget spinner', ['colors']),
37-
{
38-
name: 'ballColors',
39-
type: 'array',
40-
default: '["#ff0000", "#00ff00", "#0000ff"]',
41-
description: 'Array of colors for the balls',
42-
},
43-
{
44-
name: 'backgroundColor',
45-
type: 'string',
46-
default: '"#F4442E"',
47-
description: 'Background color of the spinner',
48-
},
49-
]}
50-
/>
33+
<AutoPropsTable component="FidgetSpinner" exclude={["gradientType", "gradientAngle", "colors"]} />
5134

52-
## More Example
5335

54-
---
55-
56-
<FidgetSpinner />

docs/docs/components/grid.mdx

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
---
22
---
33

4-
import PropsTable from '../../src/components/props-table'
54
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
6-
import { getPropsTableData } from '../../src/components/helpers'
75
import { Grid } from 'react-loader-spinner'
6+
import AutoPropsTable from '../../src/components/auto-props-table'
87

98
# Grid
109

@@ -34,14 +33,4 @@ import { Grid } from 'react-loader-spinner'
3433

3534
### Props
3635

37-
<PropsTable
38-
properties={[
39-
...getPropsTableData('grid', ['colors']),
40-
{
41-
name: 'radius',
42-
type: 'number | string',
43-
default: '12.5',
44-
description: 'Radius of the grid',
45-
},
46-
]}
47-
/>
36+
<AutoPropsTable component="Grid" exclude={["gradientType", "gradientAngle", "colors"]} />
Lines changed: 2 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
---
33

4-
import PropsTable from '../../src/components/props-table'
54
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
65
import { MutatingDots } from 'react-loader-spinner'
6+
import AutoPropsTable from '../../src/components/auto-props-table'
77

88
# Mutating Dots
99

@@ -34,65 +34,4 @@ import { MutatingDots } from 'react-loader-spinner'
3434

3535
## Props
3636

37-
<PropsTable
38-
properties={[
39-
{
40-
name: 'height',
41-
type: 'number | string',
42-
default: '100',
43-
description: 'Height of the dots. Minimum height should be 100px',
44-
},
45-
{
46-
name: 'width',
47-
type: 'number | string',
48-
default: '100',
49-
description: 'Width of the dots. Minimum width should be 100px',
50-
},
51-
{
52-
name: 'color',
53-
type: 'string',
54-
default: '#4fa94d',
55-
description: 'Color of the dots',
56-
},
57-
{
58-
name: 'secondaryColor',
59-
type: 'string',
60-
default: '#4fa94d',
61-
description:
62-
'Secondary color for second dot. If not set, will use the color prop',
63-
},
64-
{
65-
name: 'radius',
66-
type: 'number | string',
67-
default: '12.5',
68-
description: 'Radius of the dots',
69-
},
70-
{
71-
name: 'ariaLabel',
72-
type: 'string',
73-
default: 'mutating-dots-loading',
74-
description:
75-
'Aria label of the mutating dots container. Will be used for the aria-label attribute of the container',
76-
},
77-
{
78-
name: 'wrapperStyle',
79-
type: 'object',
80-
default: '{}',
81-
description:
82-
'Styles to be applied to the wrapper. It should be a valid CSS object. It can be used for custom styling. It will override the default style.',
83-
},
84-
{
85-
name: 'wrapperClass',
86-
type: 'string',
87-
default: 'undefiend',
88-
description:
89-
'Class of the wrapper element. It can be used for custom styling. It will override the default style.',
90-
},
91-
{
92-
name: 'visible',
93-
type: 'boolean',
94-
default: 'true',
95-
description: 'Visibility of the dots',
96-
},
97-
]}
98-
/>
37+
<AutoPropsTable component="MutatingDots" exclude={["gradientType", "gradientAngle", "colors"]} />

docs/docs/components/oval.mdx

Lines changed: 2 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
---
33

4-
import PropsTable from '../../src/components/props-table'
54
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
65
import { Oval } from 'react-loader-spinner'
6+
import AutoPropsTable from '../../src/components/auto-props-table'
77

88
# Oval
99

@@ -31,74 +31,7 @@ import { Oval } from 'react-loader-spinner'
3131
---
3232

3333
## Props
34-
35-
<PropsTable
36-
properties={[
37-
{
38-
name: 'height',
39-
type: 'number|string',
40-
default: '80',
41-
description: 'Height of the oval',
42-
},
43-
{
44-
name: 'width',
45-
type: 'number|string',
46-
default: '80',
47-
description: 'Width of the oval',
48-
},
49-
{
50-
name: 'color',
51-
type: 'string',
52-
default: '#4fa94d',
53-
description: 'Color of the oval. Can be hex or rgba. Default is #4fa94d',
54-
},
55-
{
56-
name: 'secondaryColor',
57-
type: 'string',
58-
default: 'undefined',
59-
description:
60-
'Color of the secondary oval. Can be hex or rgba. Default is same as color',
61-
},
62-
{
63-
name: 'strokeWidth',
64-
type: 'number',
65-
default: '2',
66-
description: 'Width of the stroke',
67-
},
68-
{
69-
name: 'strokeWidthSecondary',
70-
type: 'number',
71-
default: '2',
72-
description:
73-
'Width of the secondary stroke. Default is same as strokeWidth',
74-
},
75-
{
76-
name: 'wrapperStyle',
77-
type: 'object',
78-
default: '{}',
79-
description: 'Style of the wrapper',
80-
},
81-
{
82-
name: 'wrapperClass',
83-
type: 'string',
84-
default: '',
85-
description: 'Class of the wrapper',
86-
},
87-
{
88-
name: 'visible',
89-
type: 'boolean',
90-
default: 'true',
91-
description: 'Whether the oval is visible',
92-
},
93-
{
94-
name: 'ariaLabel',
95-
type: 'string',
96-
default: 'oval-loading',
97-
description:
98-
'Aria label of the oval. Default is oval-loading. Will be overridden if ariaLabel is passed in props',
99-
},
100-
]}
101-
/>{' '}
34+
<AutoPropsTable component="Oval" />
10235

10336
## More examples
10437

0 commit comments

Comments
 (0)