Skip to content

Commit f065d88

Browse files
odeadglazodeadglaz
committed
Full example init. stories refactor
1 parent 892b7bb commit f065d88

File tree

9 files changed

+156
-74
lines changed

9 files changed

+156
-74
lines changed

‎dist/index.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-linear-gradient-picker",
3-
"version": "1.0.4",
3+
"version": "1.0.5",
44
"description": "React linear gradient picker",
55
"main": "dist/index.js",
66
"scripts": {

‎src/components/AnglePicker/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
.ap .aph {
2323
width: 6px;
2424
height: 6px;
25-
background-color: #686ac9;
25+
background-color: #3cad77;
2626
display: inline-block;
2727
border-radius: 50%;
2828
position: absolute;

‎stories/AnglePicker/index.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, { useState } from 'react';
2+
import AnglePicker from '../../src/components/AnglePicker';
3+
4+
const AnglePickerStory = () => {
5+
const [localAngle, setLocalAngle] = useState(0);
6+
7+
const background = `linear-gradient(
8+
${localAngle}deg,
9+
rgb(238, 241, 11) 0%, rgb(208, 2, 27) 51.1%,
10+
rgb(126, 32, 207) 100%)`;
11+
return (
12+
<div className="aps">
13+
<AnglePicker angle={localAngle} onChange={setLocalAngle}/>
14+
<h4>Background preview for {localAngle} Angle</h4>
15+
<div className="preview" style={{ background }}/>
16+
</div>
17+
);
18+
};
19+
20+
export default AnglePickerStory;

‎stories/FullExample/index.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.gpw {
2+
padding: 20px;
3+
}
4+
5+
.gpw .trigger {
6+
padding: 5px;
7+
background: rgb(255, 255, 255);
8+
border-radius: 1px;
9+
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px;
10+
display: inline-block;
11+
cursor: pointer;
12+
}
13+
14+
.gpw .trigger .inner {
15+
width: 36px;
16+
height: 14px;
17+
border-radius: 2px;
18+
}
19+
20+
.gpw .popover {
21+
z-index: 2;
22+
position: absolute;
23+
}
24+
25+
.gpw .overlay {
26+
position: fixed;
27+
top: 0;
28+
right: 0;
29+
bottom: 0;
30+
left: 0;
31+
}

‎stories/FullExample/index.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React, { useState } from 'react'
2+
import { SketchPicker } from 'react-color'
3+
import './index.css';
4+
5+
const FullExample = () => {
6+
const [displayPicker, setDisplayPicker] = useState(false);
7+
const [color, setColor] = useState({ r: '241', g: '112', b: '19', a: '1', });
8+
9+
const togglePicker = () => setDisplayPicker(!displayPicker);
10+
const handleColorChange = (color) => setColor(color.rgb);
11+
12+
const { r, g, b, a } = color;
13+
const background = `rgba(${r}, ${g}, ${b}, ${a})`;
14+
15+
return (
16+
<div className="gpw">
17+
<div className="trigger" onClick={togglePicker}>
18+
<div className="inner" style={{ background }}/>
19+
</div>
20+
{ displayPicker && (
21+
<div className="popover">
22+
<div className="overlay" onClick={() => setDisplayPicker(false)}/>
23+
<SketchPicker color={color} onChange={handleColorChange} />
24+
</div>
25+
) }
26+
</div>
27+
)
28+
};
29+
30+
export default FullExample

stories/UseCase.js renamed to stories/GradientPicker/UseCase.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
22
import PropTypes from 'prop-types';
3-
import { getGradientPreview } from '../src/lib';
4-
import { GradientPicker } from '../src';
3+
import { getGradientPreview } from '../../src/lib';
4+
import { GradientPicker } from '../../src';
55

66
const UseCase = ({ palette, ColorPicker, link, title }) => {
77
const [localPalette, setLocalPalette] = useState(palette);

‎stories/GradientPicker/index.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { SketchPicker } from 'react-color';
4+
import { Panel as ColorPicker } from 'rc-color-picker';
5+
import UseCase from './UseCase';
6+
7+
import 'rc-color-picker/assets/index.css';
8+
9+
const addOpacityToHex = (color, opacity = 1) => {
10+
if (opacity === 1 || color.length > 9) {
11+
return color;
12+
}
13+
14+
return color + Math.floor(opacity * 255).toString(16);
15+
};
16+
17+
const WrapperPropTypes = {
18+
onSelect: PropTypes.func
19+
};
20+
21+
const WrappedSketchPicker = ({ onSelect, ...rest }) => (
22+
<SketchPicker {...rest}
23+
color={addOpacityToHex(rest.color, rest.opacity)}
24+
onChange={c => {
25+
onSelect(c.hex, c.rgb.a);
26+
}}/>
27+
);
28+
29+
WrappedSketchPicker.propTypes = WrapperPropTypes;
30+
31+
const WrappedColorPicker = ({ onSelect, ...rest }) => (
32+
<ColorPicker {...rest} onChange={c => {
33+
onSelect(c.color, c.alpha / 100);
34+
}}/>
35+
);
36+
37+
const SketchPickerStory = () => (
38+
<UseCase palette={[
39+
{ offset: '0.00', color: '#eef10b' },
40+
{ offset: '0.49', color: '#d78025' },
41+
{ offset: '1.00', color: '#7e20cf' }
42+
]} link={'https://github.com/react-component/color-picker'} title={'rc-color-picker'} ColorPicker={WrappedSketchPicker}/>
43+
);
44+
45+
const ColorPickerStory = () => (
46+
<UseCase palette={[
47+
{ offset: '0.00', color: '#7e20cf' },
48+
{ offset: '0.42', color: '#d0021b' },
49+
{ offset: '1.00', color: '#00ccff' }
50+
]} link={'https://github.com/casesandberg/react-color'} title={'react-color'} ColorPicker={WrappedColorPicker}/>
51+
);
52+
53+
const DefaultPickerStory = () => (
54+
<UseCase title="Default Picker" palette={[{ offset: '0', color: '#FF0000' }, { offset: '0.3', color: '#00FF00' }, { offset: '1', color: '#0000FF' }]}/>
55+
);
56+
57+
export {
58+
SketchPickerStory,
59+
ColorPickerStory,
60+
DefaultPickerStory
61+
};

‎stories/index.stories.js‎

Lines changed: 9 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,17 @@
1-
import React, { useState } from 'react';
2-
import PropTypes from 'prop-types';
1+
import React from 'react';
32
import { storiesOf } from '@storybook/react';
4-
import { SketchPicker } from 'react-color';
5-
import { Panel as ColorPicker } from 'rc-color-picker';
6-
import { AnglePicker } from '../src';
7-
import UseCase from './UseCase';
3+
import { SketchPickerStory, ColorPickerStory, DefaultPickerStory } from './GradientPicker';
4+
import FullExample from './FullExample';
5+
import AnglePickerStory from './AnglePicker';
86
import './Story.css';
9-
import 'rc-color-picker/assets/index.css';
10-
11-
const addOpacityToHex = (color, opacity = 1) => {
12-
if (opacity === 1 || color.length > 9) {
13-
return color;
14-
}
15-
16-
return color + Math.floor(opacity * 255).toString(16);
17-
};
18-
19-
const WrapperPropTypes = {
20-
onSelect: PropTypes.func
21-
};
22-
23-
const WrappedSketchPicker = ({ onSelect, ...rest }) => (
24-
<SketchPicker {...rest}
25-
color={addOpacityToHex(rest.color, rest.opacity)}
26-
onChange={c => {
27-
onSelect(c.hex, c.rgb.a);
28-
}}/>
29-
);
30-
31-
WrappedSketchPicker.propTypes = WrapperPropTypes;
32-
33-
const WrappedColorPicker = ({ onSelect, ...rest }) => (
34-
<ColorPicker {...rest} onChange={c => {
35-
onSelect(c.color, c.alpha / 100);
36-
}}/>
37-
);
38-
39-
WrappedColorPicker.propTypes = WrapperPropTypes;
407

418
storiesOf('Gradient Picker', module)
42-
.add('React Color Picker', () => (
43-
<UseCase palette={[
44-
{ offset: '0.00', color: '#eef10b' },
45-
{ offset: '0.49', color: '#d78025' },
46-
{ offset: '1.00', color: '#7e20cf' }
47-
]} link={'https://github.com/react-component/color-picker'} title={'rc-color-picker'} ColorPicker={WrappedSketchPicker}/>
48-
))
49-
.add('React Color', () => (
50-
<UseCase palette={[
51-
{ offset: '0.00', color: '#7e20cf' },
52-
{ offset: '0.42', color: '#d0021b' },
53-
{ offset: '1.00', color: '#00ccff' }
54-
]} link={'https://github.com/casesandberg/react-color'} title={'react-color'} ColorPicker={WrappedColorPicker}/>
55-
))
56-
.add('Default Color Picker', () => (
57-
<UseCase title="Default Picker" palette={[{ offset: '0', color: '#FF0000' }, { offset: '0.3', color: '#00FF00' }, { offset: '1', color: '#0000FF' }]}/>
58-
));
9+
.add('React Color Picker', SketchPickerStory)
10+
.add('React Color', ColorPickerStory)
11+
.add('Full Example', FullExample)
12+
.add('Default Color Picker', DefaultPickerStory);
5913

6014
storiesOf('Angle Picker', module)
61-
.add('Default', () => {
62-
const [localAngle, setLocalAngle] = useState(0);
63-
64-
const background = `linear-gradient(
65-
${localAngle}deg,
66-
rgb(238, 241, 11) 0%, rgb(208, 2, 27) 51.1%,
67-
rgb(126, 32, 207) 100%)`;
68-
return (
69-
<div className="aps">
70-
<AnglePicker angle={localAngle} onChange={setLocalAngle}/>
71-
<h4>Background preview for {localAngle} Angle</h4>
72-
<div className="preview" style={{ background }}/>
73-
</div>
74-
);
75-
});
15+
.add('Default', AnglePickerStory);
7616

7717

0 commit comments

Comments
 (0)