feat: add prop size to VisualPicker component

[rgah2107]

fix: #1519

Changes proposed in this PR:

• add prop size to VisualPicker component

• I have followed (at least) the PR section of the contributing guide.

@nexxtway/react-rainbow

[commit-lint]

Features

• add prop size to VisualPicker component (00a6c9a)

Bug Fixes

• optimize code (31ec5f9)
• add examples (9221b5c)
• modify style (3a411f6)
• modify styles (85f6ff4)
• modify style according to the last comments (4a85f5a)

Contributors

@rgah2107

[LeandroTorresSicilia]

be more specific here like:
size?: 'small' | 'medium' | 'large';

[LeandroTorresSicilia]

here you can use a map like:

const sizeMap = {
    large: '210px',
    medium: '142px',
    small: '100px',
};

and then:
height: ${props => sizeMap[props.size] || 142px}
and thus avoid all conditionals

[TahimiLeonBravo]

@rgah2107 let's add 2 examples more with the new sizes on the component

[yvmunayev]

size is always defined because in defaultProps you put medium

[LeandroTorresSicilia]

@yvmunayev
I think we need do a fallback to || '142px' since the user can pass a wrong size value and the component should render nicely

[yvmunayev]

@rgah2107 check here, I'm wrong and if necessary put:

height: ${props => sizeMap[props.size] || '142px'};

[TahimiLeonBravo]

@rgah2107 we need to have the same width and the height on the different variants

for example:
if the size="small" the width and height should have 100px
if the size="large" the width and height should have 210px

we need to have the same width and the height on the different variants

[LeandroTorresSicilia]

here we need to do a fallback to a default size since the user can pass a wrong size where sizeMap[props.size] will return undefined