Skip to content

Commit e233d34

Browse files
dinospereiraSoaresMG
dinospereira
authored and
SoaresMG
committed
feat(carousel): add storybook
1 parent 1a671cc commit e233d34

10 files changed

Lines changed: 6983 additions & 142 deletions

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
node_modules/
22
*.log
33
coverage/
4-
4+
storybook-static/
55
packages/*/es/
66
packages/*/lib/
77
packages/*/coverage/

‎.storybook/main.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = {
2+
"stories": [
3+
"../stories/**/*.stories.mdx",
4+
"../stories/**/*.stories.@(js|jsx|ts|tsx)"
5+
],
6+
"addons": [
7+
"@storybook/addon-links",
8+
"@storybook/addon-essentials"
9+
]
10+
}

‎.storybook/preview.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const parameters = {
2+
actions: { argTypesRegex: "^on[A-Z].*" },
3+
controls: {
4+
matchers: {
5+
color: /(background|color)$/i,
6+
date: /Date$/,
7+
},
8+
},
9+
}

‎package.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,9 @@
3131
"clean": "rimraf lib && rimraf es",
3232
"build": "npm run clean && npm run build:cjs && npm run build:es",
3333
"build:cjs": "babel src --out-dir lib --env-name cjs --copy-files",
34-
"build:es": "babel src --out-dir es --env-name es --copy-files"
34+
"build:es": "babel src --out-dir es --env-name es --copy-files",
35+
"storybook": "start-storybook -p 6006",
36+
"build-storybook": "build-storybook"
3537
},
3638
"husky": {
3739
"hooks": {
@@ -58,15 +60,21 @@
5860
},
5961
"devDependencies": {
6062
"@babel/cli": "^7.8.4",
63+
"@babel/core": "^7.15.0",
6164
"@babel/plugin-proposal-object-rest-spread": "^7.9.5",
6265
"@babel/preset-env": "^7.9.5",
6366
"@babel/preset-react": "^7.9.4",
6467
"@commitlint/config-conventional": "^9.0.1",
6568
"@semantic-release/changelog": "^5.0.1",
6669
"@semantic-release/git": "^9.0.0",
70+
"@storybook/addon-actions": "^6.3.7",
71+
"@storybook/addon-essentials": "^6.3.7",
72+
"@storybook/addon-links": "^6.3.7",
73+
"@storybook/react": "^6.3.7",
6774
"@testing-library/jest-dom": "^5.8.0",
6875
"@testing-library/react": "^10.0.4",
6976
"babel-eslint": "^10.1.0",
77+
"babel-loader": "^8.2.2",
7078
"babel-plugin-add-module-exports": "^1.0.2",
7179
"babel-plugin-module-resolver": "^4.0.0",
7280
"commitlint": "^8.0.0",

‎stories/Carousel.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.area {
2+
max-width: 100%;
3+
}
4+
5+
.area-small {
6+
max-width: 50%;
7+
}
8+
9+
.item {
10+
display: grid;
11+
align-items: center;
12+
justify-items: center;
13+
text-decoration: none;
14+
color: white;
15+
}
16+
17+
.item p {
18+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
19+
font-size: 200px;
20+
font-weight: bold;
21+
line-height: 0;
22+
}
23+
24+
.item > * {
25+
grid-area: 1 / 1 / 2 / 2;
26+
}
27+
28+
.first {
29+
background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
30+
}
31+
32+
.second {
33+
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
34+
}
35+
36+
.third {
37+
background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
38+
}
39+
40+
.fourth {
41+
background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
42+
}
43+
44+
.fifth {
45+
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
46+
}
47+
48+
.sixth {
49+
background-image: linear-gradient(120deg, #667eea 0%, #764ba2 100%);
50+
}
51+
52+
.seventh {
53+
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
54+
}

‎stories/ScrollSliderCarousel.stories.jsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import '../styles.css';
2+
import './Carousel.css';
3+
import { Arrow, Bullets, Carousel, ScrollSlider } from '../src';
4+
import React from 'react';
5+
6+
export default {
7+
component: Carousel,
8+
title: 'Carousel/ScrollSlider',
9+
};
10+
11+
const children = [
12+
<a href="#" key={1} className="item first">
13+
<svg viewBox="0 0 7 4"></svg>
14+
<p>1</p>
15+
</a>,
16+
<a href="#" key={2} className="item second">
17+
<svg viewBox="0 0 7 4"></svg>
18+
<p>2</p>
19+
</a>,
20+
<a href="#" key={3} className="item third">
21+
<svg viewBox="0 0 7 4"></svg>
22+
<p>3</p>
23+
</a>,
24+
<a href="#" key={4} className="item fourth">
25+
<svg viewBox="0 0 7 4"></svg>
26+
<p>4</p>
27+
</a>,
28+
<a href="#" key={5} className="item fifth">
29+
<svg viewBox="0 0 7 4"></svg>
30+
<p>5</p>
31+
</a>,
32+
<a href="#" key={6} className="item sixth">
33+
<svg viewBox="0 0 7 4"></svg>
34+
<p>6</p>
35+
</a>,
36+
<a href="#" key={7} className="item seventh">
37+
<svg viewBox="0 0 7 2"></svg>
38+
<p>7</p>
39+
</a>,
40+
];
41+
42+
const Template = (args) => (
43+
<div className="area">
44+
<Carousel
45+
isInfinite={args.isInfinite}
46+
isRTL={args.isRTL}
47+
itemsToShow={args.itemsToShow}
48+
itemsToScroll={args.itemsToScroll}
49+
>
50+
<ScrollSlider
51+
animationDuration={args.animationDuration}
52+
animationTimingFunction={args.animationTimingFunction}
53+
>
54+
{children}
55+
</ScrollSlider>
56+
<Bullets />
57+
<Arrow flow={'prev'}>
58+
{({ onClick }) => <button onClick={onClick}>Previous</button>}
59+
</Arrow>
60+
61+
<Arrow flow={'next'}>
62+
{({ onClick }) => <button onClick={onClick}>Next</button>}
63+
</Arrow>
64+
</Carousel>
65+
</div>
66+
);
67+
68+
export const ScrollCarousel = Template.bind({});
69+
ScrollCarousel.args = {
70+
isInfinite: false,
71+
isRTL: false,
72+
itemsToShow: 1.25,
73+
itemsToScroll: 1,
74+
animationDuration: 0.3,
75+
animationTimingFunction: function quad(timeFraction) {
76+
return Math.pow(timeFraction, 2);
77+
},
78+
};

‎stories/SnapSliderCarousel.stories.jsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import '../styles.css';
2+
import './Carousel.css';
3+
import { Arrow, Bullets, Carousel, SnapSlider } from '../src';
4+
import React from 'react';
5+
6+
export default {
7+
component: Carousel,
8+
title: 'Carousel/SnapSlider',
9+
};
10+
11+
const children = [
12+
<a href="#" key={1} className="item first">
13+
<svg viewBox="0 0 7 4"></svg>
14+
<p>1</p>
15+
</a>,
16+
<a href="#" key={2} className="item second">
17+
<svg viewBox="0 0 7 4"></svg>
18+
<p>2</p>
19+
</a>,
20+
<a href="#" key={3} className="item third">
21+
<svg viewBox="0 0 7 4"></svg>
22+
<p>3</p>
23+
</a>,
24+
<a href="#" key={4} className="item fourth">
25+
<svg viewBox="0 0 7 4"></svg>
26+
<p>4</p>
27+
</a>,
28+
<a href="#" key={5} className="item fifth">
29+
<svg viewBox="0 0 7 4"></svg>
30+
<p>5</p>
31+
</a>,
32+
<a href="#" key={6} className="item sixth">
33+
<svg viewBox="0 0 7 4"></svg>
34+
<p>6</p>
35+
</a>,
36+
<a href="#" key={7} className="item seventh">
37+
<svg viewBox="0 0 7 2"></svg>
38+
<p>7</p>
39+
</a>,
40+
];
41+
42+
const Template = (args) => (
43+
<div className="area">
44+
<Carousel
45+
isInfinite={args.isInfinite}
46+
isRTL={args.isRTL}
47+
itemsToShow={args.itemsToShow}
48+
itemsToScroll={args.itemsToScroll}
49+
>
50+
<SnapSlider
51+
align={args.align}
52+
animationDuration={args.animationDuration}
53+
animationTimingFunction={args.animationTimingFunction}
54+
>
55+
{children}
56+
</SnapSlider>
57+
<Bullets />
58+
<Arrow flow={'prev'}>
59+
{({ onClick }) => <button onClick={onClick}>Previous</button>}
60+
</Arrow>
61+
62+
<Arrow flow={'next'}>
63+
{({ onClick }) => <button onClick={onClick}>Next</button>}
64+
</Arrow>
65+
</Carousel>
66+
</div>
67+
);
68+
69+
export const SnapCarousel = Template.bind({});
70+
SnapCarousel.args = {
71+
align: 'center',
72+
isInfinite: false,
73+
isRTL: false,
74+
itemsToShow: 1.25,
75+
itemsToScroll: 1,
76+
animationDuration: 0.3,
77+
animationTimingFunction: function quad(timeFraction) {
78+
return Math.pow(timeFraction, 2);
79+
},
80+
};

‎stories/SwipeSliderCarousel.stories.jsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import '../styles.css';
2+
import './Carousel.css';
3+
import { Arrow, Bullets, Carousel, SwipeSlider } from '../src';
4+
import React from 'react';
5+
6+
export default {
7+
component: Carousel,
8+
title: 'Carousel/SwipeSlider',
9+
};
10+
11+
const children = [
12+
<a href="#" key={1} className="item first">
13+
<svg viewBox="0 0 7 4"></svg>
14+
<p>1</p>
15+
</a>,
16+
<a href="#" key={2} className="item second">
17+
<svg viewBox="0 0 7 4"></svg>
18+
<p>2</p>
19+
</a>,
20+
<a href="#" key={3} className="item third">
21+
<svg viewBox="0 0 7 4"></svg>
22+
<p>3</p>
23+
</a>,
24+
<a href="#" key={4} className="item fourth">
25+
<svg viewBox="0 0 7 4"></svg>
26+
<p>4</p>
27+
</a>,
28+
<a href="#" key={5} className="item fifth">
29+
<svg viewBox="0 0 7 4"></svg>
30+
<p>5</p>
31+
</a>,
32+
<a href="#" key={6} className="item sixth">
33+
<svg viewBox="0 0 7 4"></svg>
34+
<p>6</p>
35+
</a>,
36+
<a href="#" key={7} className="item seventh">
37+
<svg viewBox="0 0 7 2"></svg>
38+
<p>7</p>
39+
</a>,
40+
];
41+
42+
const Template = (args) => (
43+
<div className="area">
44+
<Carousel
45+
isInfinite={args.isInfinite}
46+
isRTL={args.isRTL}
47+
itemsToShow={args.itemsToShow}
48+
itemsToScroll={args.itemsToScroll}
49+
>
50+
<SwipeSlider
51+
disableSwipe={args.disableSwipe}
52+
hasKeysNavigation={args.hasKeysNavigation}
53+
>
54+
{children}
55+
</SwipeSlider>
56+
<Bullets />
57+
<Arrow flow={'prev'}>
58+
{({ onClick }) => <button onClick={onClick}>Previous</button>}
59+
</Arrow>
60+
61+
<Arrow flow={'next'}>
62+
{({ onClick }) => <button onClick={onClick}>Next</button>}
63+
</Arrow>
64+
</Carousel>
65+
</div>
66+
);
67+
68+
export const SwipeCarousel = Template.bind({});
69+
SwipeCarousel.args = {
70+
isInfinite: false,
71+
isRTL: false,
72+
itemsToShow: 1.25,
73+
itemsToScroll: 1,
74+
disableSwipe: false,
75+
hasKeysNavigation: true,
76+
};

0 commit comments

Comments
 (0)