Skip to content

Commit 44a0166

Browse files
author
spoeck
committed
split stories in separate files
1 parent cff1c88 commit 44a0166

File tree

9 files changed

+546
-402
lines changed

9 files changed

+546
-402
lines changed

‎src/stories/Configurator.stories.tsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { makeStyles, Theme } from '@material-ui/core';
2+
import { boolean, number, select } from '@storybook/addon-knobs';
3+
import { storiesOf } from '@storybook/react';
4+
import * as React from 'react';
5+
import { Planet } from '../components';
6+
import { withTheme } from './index.stories';
7+
import { generateSatellites } from './storybook_utils.tsx/generateSatellites';
8+
9+
storiesOf('Planet', module).add('-> configure', () => {
10+
const classes = useStyles();
11+
12+
const open = boolean('open', true);
13+
const autoClose = boolean('autoClose', true);
14+
const orbitRadius = number('orbit Radius', 120, { range: true, min: 80, max: 300, step: 10 });
15+
const satelliteCount = number('satellite count', 3, {});
16+
const weirdSatellites = boolean('weird Satellites', false);
17+
const satelliteOrientation = select(
18+
'satellite Orientation',
19+
{
20+
unset: undefined,
21+
DEFAULT: 'DEFAULT',
22+
INSIDE: 'INSIDE',
23+
OUTSIDE: 'OUTSIDE',
24+
READABLE: 'READABLE',
25+
},
26+
undefined
27+
);
28+
const dragableSatellites = boolean('dragable Satellites', false);
29+
const dragRadiusSatellites = number('dragRadius Satellites', 12, { range: true, min: 0, max: 100, step: 1 });
30+
const dragablePlanet = boolean('dragable Planet', false);
31+
const dragRadiusPlanet = number('dragRadius Planet', 12, { range: true, min: 0, max: 100, step: 1 });
32+
const hideOrbit = boolean('hide Orbit', false);
33+
const bounce = boolean('bounce', false);
34+
const bounceOnOpen = boolean('bounce on open', false);
35+
const bounceOnClose = boolean('bounce on close', false);
36+
const bounceRadius = number('bounce Radius', 3, { range: true, min: 1, max: 40, step: 1 });
37+
const bounceDirection = select(
38+
'bounce Direction',
39+
{
40+
unset: undefined,
41+
TOP: 'TOP',
42+
BOTTOM: 'BOTTOM',
43+
LEFT: 'LEFT',
44+
RIGHT: 'RIGHT',
45+
},
46+
undefined
47+
);
48+
49+
const rotation = number('rotation', 0, { range: true, min: 0, max: 360, step: 5 });
50+
const mass = number('mass', 1, {});
51+
const tension = number('tension', 500, {});
52+
const friction = number('friction', 17, {});
53+
54+
return withTheme(
55+
<div className={classes.root}>
56+
<Planet
57+
orbitRadius={orbitRadius}
58+
centerContent={<div className={classes.planet} />}
59+
open={open}
60+
autoClose={autoClose}
61+
dragableSatellites={dragableSatellites}
62+
dragRadiusSatellites={dragRadiusSatellites}
63+
dragablePlanet={dragablePlanet}
64+
dragRadiusPlanet={dragRadiusPlanet}
65+
hideOrbit={hideOrbit}
66+
rotation={rotation}
67+
mass={mass}
68+
tension={tension}
69+
friction={friction}
70+
bounce={bounce}
71+
bounceOnOpen={bounceOnOpen}
72+
bounceOnClose={bounceOnClose}
73+
bounceRadius={bounceRadius}
74+
bounceDirection={bounceDirection}
75+
satelliteOrientation={satelliteOrientation}
76+
>
77+
{generateSatellites(satelliteCount, weirdSatellites, !!satelliteOrientation)}
78+
</Planet>
79+
</div>
80+
);
81+
});
82+
83+
const useStyles = makeStyles((theme: Theme) => ({
84+
root: {
85+
display: 'flex',
86+
flex: 1,
87+
width: '100%',
88+
backgroundColor: 'white',
89+
justifyContent: 'center',
90+
alignItems: 'center',
91+
minHeight: 600,
92+
},
93+
94+
planet: {
95+
height: 100,
96+
width: 100,
97+
borderRadius: '50%',
98+
backgroundColor: theme.palette.primary.main,
99+
'&:hover': {
100+
borderWidth: 10,
101+
boxShadow: '0px 0px 15px 10px ' + theme.palette.secondary.light,
102+
cursor: 'pointer',
103+
},
104+
},
105+
}));

‎src/stories/CustomOrbit.stories.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { makeStyles, Theme } from '@material-ui/core';
2+
import { storiesOf } from '@storybook/react';
3+
import * as React from 'react';
4+
import { Planet } from '../components';
5+
import { withTheme } from './index.stories';
6+
import { generateSatellites } from './storybook_utils.tsx/generateSatellites';
7+
8+
storiesOf('Planet', module).add('custom orbit', () => {
9+
const classes = useStyles();
10+
11+
return withTheme(
12+
<div className={classes.root}>
13+
<Planet
14+
orbitStyle={(defaultStyle) => ({
15+
...defaultStyle,
16+
borderWidth: 4,
17+
borderStyle: 'dashed',
18+
borderColor: '#6f03fc',
19+
})}
20+
centerContent={<div className={classes.planetSmall} />}
21+
open
22+
orbitRadius={200}
23+
autoClose
24+
>
25+
{generateSatellites(3)}
26+
</Planet>
27+
</div>
28+
);
29+
});
30+
31+
const useStyles = makeStyles((theme: Theme) => ({
32+
root: {
33+
display: 'flex',
34+
flex: 1,
35+
width: '100%',
36+
backgroundColor: 'white',
37+
justifyContent: 'center',
38+
alignItems: 'center',
39+
minHeight: 600,
40+
},
41+
42+
planetSmall: {
43+
height: 10,
44+
width: 10,
45+
backgroundColor: theme.palette.primary.main,
46+
borderRadius: '50%',
47+
'&:hover': {
48+
borderWidth: 10,
49+
boxShadow: '0px 0px 15px 10px ' + theme.palette.secondary.light,
50+
cursor: 'pointer',
51+
},
52+
},
53+
}));

‎src/stories/Half.stories.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { makeStyles, Theme } from '@material-ui/core';
2+
import { storiesOf } from '@storybook/react';
3+
import * as React from 'react';
4+
import { Planet } from '../components';
5+
import { withTheme } from './index.stories';
6+
import { generateSatellites } from './storybook_utils.tsx/generateSatellites';
7+
8+
storiesOf('Planet', module).add('half', () => {
9+
const classes = useStyles();
10+
11+
return withTheme(
12+
<div className={classes.root}>
13+
<Planet centerContent={<div className={classes.planet} />} hideOrbit open autoClose rotation={90}>
14+
{generateSatellites(3)}
15+
<div />
16+
<div />
17+
<div />
18+
</Planet>
19+
</div>
20+
);
21+
});
22+
23+
const useStyles = makeStyles((theme: Theme) => ({
24+
root: {
25+
display: 'flex',
26+
flex: 1,
27+
width: '100%',
28+
backgroundColor: 'white',
29+
justifyContent: 'center',
30+
alignItems: 'center',
31+
minHeight: 600,
32+
},
33+
34+
planet: {
35+
height: 100,
36+
width: 100,
37+
borderRadius: '50%',
38+
backgroundColor: theme.palette.primary.main,
39+
'&:hover': {
40+
borderWidth: 10,
41+
boxShadow: '0px 0px 15px 10px ' + theme.palette.secondary.light,
42+
cursor: 'pointer',
43+
},
44+
},
45+
}));

‎src/stories/Menu.stories.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { IconButton, makeStyles, Paper, Theme } from '@material-ui/core';
2+
import DeleteIcon from '@material-ui/icons/Delete';
3+
import EditIcon from '@material-ui/icons/Edit';
4+
import InfoIcon from '@material-ui/icons/InfoOutlined';
5+
import MenuIcon from '@material-ui/icons/Menu';
6+
import { boolean } from '@storybook/addon-knobs';
7+
import { storiesOf } from '@storybook/react';
8+
import * as React from 'react';
9+
import { Planet } from '../components';
10+
import { withTheme } from './index.stories';
11+
12+
storiesOf('Planet', module).add('menu', () => {
13+
const classes = useStyles();
14+
15+
const bounce = boolean('bounce', false);
16+
const bounceOnClose = boolean('bounce on close', false);
17+
18+
return withTheme(
19+
<div className={classes.root}>
20+
<Planet
21+
centerContent={
22+
<PaperButton color="#4da37c" iconColor="LIGHT">
23+
<MenuIcon />
24+
</PaperButton>
25+
}
26+
hideOrbit
27+
autoClose
28+
orbitRadius={60}
29+
bounce={bounce}
30+
bounceOnClose={bounceOnClose}
31+
>
32+
<PaperButton color="white" iconColor="DARK">
33+
<InfoIcon />
34+
</PaperButton>
35+
<PaperButton color="white" iconColor="DARK">
36+
<EditIcon />
37+
</PaperButton>
38+
<PaperButton color="white" iconColor="DARK">
39+
<DeleteIcon />
40+
</PaperButton>
41+
</Planet>
42+
</div>
43+
);
44+
});
45+
46+
function PaperButton(props: { color: string; children: React.ReactNode; iconColor: 'LIGHT' | 'DARK' }) {
47+
return (
48+
<Paper style={{ backgroundColor: props.color, borderRadius: '50%' }}>
49+
<IconButton style={{ color: props.iconColor === 'LIGHT' ? 'white' : '#424242' }}>
50+
{props.children}
51+
</IconButton>
52+
</Paper>
53+
);
54+
}
55+
56+
const useStyles = makeStyles((theme: Theme) => ({
57+
root: {
58+
display: 'flex',
59+
flex: 1,
60+
width: '100%',
61+
backgroundColor: 'white',
62+
justifyContent: 'center',
63+
alignItems: 'center',
64+
minHeight: 600,
65+
},
66+
}));

0 commit comments

Comments
 (0)