Skip to content

Commit 9e77fc9

Browse files
mhnpdmhnpd
committed
feat: Add prop metadata JSON files for various loaders
- Created JSON files for ProgressBar, Puff, Radio, RevolvingDot, Rings, RotatingLines, RotatingSquare, RotatingTriangles, TailSpin, ThreeCircles, ThreeDots, Triangle, Vortex, and Watch components. - Each file includes properties such as color, size, gradient options, accessibility labels, and visibility controls. - Updated package.json and package-lock.json to include react-docgen-typescript for generating prop documentation. - Added a script to automate the generation of prop metadata from TypeScript components. - Enhanced type definitions for loader props to include common sizing and accessibility controls.
1 parent e61e56c commit 9e77fc9

59 files changed

Lines changed: 2575 additions & 585 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/docs/components/audio.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 { Audio } from 'react-loader-spinner'
87

98
# Audio
@@ -33,4 +32,4 @@ import { Audio } from 'react-loader-spinner'
3332

3433
### Props
3534

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

‎docs/docs/components/ball-triangle.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 { BallTriangle } from 'react-loader-spinner'
87

98
# Ball Triangle
@@ -34,4 +33,4 @@ import { BallTriangle } from 'react-loader-spinner'
3433

3534
### Props
3635

37-
<PropsTable properties={[...getPropsTableData('ball-triangle', 'colors')]} />
36+
<AutoPropsTable component="BallTriangle" exclude={["gradientType", "gradientAngle", "colors"]} />

‎docs/docs/components/bars.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 { Bars } from 'react-loader-spinner'
87

98
# Bars
@@ -33,4 +32,4 @@ import { Bars } from 'react-loader-spinner'
3332

3433
## Props
3534

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

‎docs/docs/components/comment.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 { Comment } from 'react-loader-spinner'
87

98
# Comment
@@ -34,20 +33,4 @@ import { Comment } from 'react-loader-spinner'
3433

3534
## Props
3635

37-
<PropsTable
38-
properties={[
39-
...getPropsTableData('comment', ['colors']),
40-
{
41-
name: 'color',
42-
type: 'string',
43-
default: '#fff',
44-
description: 'The color of the comment dots',
45-
},
46-
{
47-
name: 'backgroundColor',
48-
type: 'string',
49-
default: '#ff6d00',
50-
description: 'The background color of the comment box',
51-
},
52-
]}
53-
/>
36+
<AutoPropsTable component="Comment" exclude={["gradientType", "gradientAngle", "colors"]} />

‎docs/docs/components/discuss.mdx‎

Lines changed: 2 additions & 13 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 { Discuss } from 'react-loader-spinner'
87

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

3534
## Props
3635

37-
<PropsTable
38-
properties={[
39-
...getPropsTableData('discuss', ['colors']),
40-
{
41-
name: 'colors',
42-
type: 'array',
43-
default: `['#ff727d', '#ff727d']`,
44-
description: 'The colors of the the rings',
45-
},
46-
]}
47-
/>
36+
<AutoPropsTable component="Discuss" exclude={["gradientType", "gradientAngle", "colors"]} />

‎docs/docs/components/dna.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 { DNA } from 'react-loader-spinner'
87

98
# DNA
@@ -32,4 +31,4 @@ import { DNA } from 'react-loader-spinner'
3231

3332
## Props
3433

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

‎docs/docs/components/hearts.mdx‎

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

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

88
# Hearts
@@ -32,53 +32,4 @@ import { Hearts } from 'react-loader-spinner'
3232

3333
## Props
3434

35-
<PropsTable
36-
properties={[
37-
{
38-
name: 'height',
39-
type: 'number | string',
40-
default: '80',
41-
description: 'Height of the component',
42-
},
43-
{
44-
name: 'width',
45-
type: 'number | string',
46-
default: '80',
47-
description: 'Width of the component',
48-
},
49-
{
50-
name: 'color',
51-
type: 'string',
52-
default: '#4fa94d',
53-
description:
54-
'Color of the hearts. Multiple colors for multiple hearts is not supported.',
55-
},
56-
{
57-
name: 'ariaLabel',
58-
type: 'string',
59-
default: 'hearts-loading',
60-
description:
61-
'Aria label of the component. This is used for accessibility.',
62-
},
63-
{
64-
name: 'wrapperStyle',
65-
type: 'object',
66-
default: '{}',
67-
description:
68-
'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.',
69-
},
70-
{
71-
name: 'wrapperClass',
72-
type: 'string',
73-
default: '',
74-
description:
75-
'Class of the wrapper element. It can be used for custom styling.',
76-
},
77-
{
78-
name: 'visible',
79-
type: 'boolean',
80-
default: 'true',
81-
description: 'Visibility of the component',
82-
},
83-
]}
84-
/>
35+
<AutoPropsTable component="Hearts" exclude={["gradientType", "gradientAngle", "colors"]} />

‎docs/docs/components/hourglass.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 { Hourglass } from 'react-loader-spinner'
87

98
# Hourglass
@@ -33,4 +32,4 @@ import { Hourglass } from 'react-loader-spinner'
3332

3433
## Props
3534

36-
<PropsTable properties={[...getPropsTableData('hourglass', ['color'])]} />
35+
<AutoPropsTable component="Hourglass" exclude={["gradientType", "gradientAngle", "colors"]} />

‎docs/docs/components/infinity-spin.mdx‎

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

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

88
# Infinity Spin
@@ -27,20 +27,4 @@ import { InfinitySpin } from 'react-loader-spinner'
2727

2828
## Props
2929

30-
<PropsTable
31-
properties={[
32-
{
33-
name: 'width',
34-
type: 'number',
35-
default: '100',
36-
description: 'Width of the spin',
37-
},
38-
{
39-
name: 'color',
40-
type: 'string',
41-
default: '#4fa94d',
42-
description:
43-
'Color of the path. Default is #4fa94d. You can use hex, rgb, rgba, hsl, hsla, named colors.',
44-
},
45-
]}
46-
/>
30+
<AutoPropsTable component="InfinitySpin" exclude={["gradientType", "gradientAngle", "colors"]} />

‎docs/docs/components/line-wave.mdx‎

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

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

88
# LineWave
@@ -35,75 +35,7 @@ import { LineWave } from 'react-loader-spinner'
3535

3636
## Props
3737

38-
<PropsTable
39-
properties={[
40-
{
41-
name: 'height',
42-
type: 'number | string',
43-
default: '100',
44-
description: 'Height of the line wave.',
45-
},
46-
{
47-
name: 'width',
48-
type: 'number | string',
49-
default: '100',
50-
description: 'Width of the line wave.',
51-
},
52-
{
53-
name: 'color',
54-
type: 'string',
55-
default: '#4fa94d',
56-
description: 'Color of the line wave.',
57-
},
58-
{
59-
name: 'ariaLabel',
60-
type: 'string',
61-
default: 'line-wave',
62-
description: 'ARIA label for the line wave.',
63-
},
64-
{
65-
name: 'wrapperStyle',
66-
type: 'object',
67-
default: '{}',
68-
description:
69-
'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.',
70-
},
71-
{
72-
name: 'wrapperClass',
73-
type: 'string',
74-
default: 'undefined',
75-
description:
76-
'Class name for the wrapper element. It can be used for custom styling.',
77-
},
78-
{
79-
name: 'visible',
80-
type: 'boolean',
81-
default: 'true',
82-
description: 'Whether the line wave is visible.',
83-
},
84-
{
85-
name: 'firstLineColor',
86-
type: 'string',
87-
default: 'undefined',
88-
description:
89-
'Color of the first line. If not provided, the color will be the same as the color.',
90-
},
91-
{
92-
name: 'middleLineColor',
93-
type: 'string',
94-
default: 'undefined',
95-
description:
96-
'Color of the middle line. If not provided, the color will be the same as the color.',
97-
},
98-
{
99-
name: 'lastLineColor',
100-
type: 'string',
101-
default: 'undefined',
102-
description:
103-
'Color of the last line. If not provided, the color will be the same as the color.',
104-
},
105-
]}
106-
/>{' '}
38+
<AutoPropsTable component="LineWave" exclude={["gradientType", "gradientAngle", "colors"]} />
10739

10840
## More Examples:
10941

0 commit comments

Comments
 (0)