Skip to content

Commit 4961b0a

Browse files
julesforrestjulesforrest
committed
initial commit
1 parent d7d298e commit 4961b0a

11 files changed

+10102
-207
lines changed

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,4 @@ typings/
6161
.cache/
6262
public
6363
yarn-error.log
64+
dist

‎.eslintrc.js

-3
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@ module.exports = {
88
Atomics: "readonly",
99
SharedArrayBuffer: "readonly"
1010
},
11-
rules: {
12-
"react/jsx-filename-extension": "off"
13-
},
1411
parserOptions: {
1512
ecmaFeatures: {
1613
jsx: true

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -59,3 +59,5 @@ typings/
5959

6060
# next.js build output
6161
.next
62+
63+
dist

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,4 @@ typings/
6161
.cache/
6262
public
6363
yarn-error.log
64+
dist

‎.storybook/addons.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import "@storybook/addon-actions/register";
2+
import "@storybook/addon-links/register";

‎.storybook/config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { configure } from "@storybook/react";
2+
3+
// automatically import all files ending in *.stories.js
4+
const req = require.context("../stories", true, /\.stories\.jsx$/);
5+
function loadStories() {
6+
req.keys().forEach(filename => req(filename));
7+
}
8+
9+
configure(loadStories, module);

‎package.json

+21-1
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,18 @@
33
"version": "0.0.0",
44
"description": "Swipable shelf",
55
"main": "dist/index.js",
6+
"source": "src/index.jsx",
7+
"module": "dist/index.mjs",
8+
"unpkg": "dist/index.umd.js",
69
"scripts": {
710
"test": "yarn test:eslint && yarn test:prettier",
811
"test:eslint": "eslint '**/*.js'",
912
"test:prettier": "prettier \"**/*.{js,jsx,css,scss,json,md,mdx,html}\" --list-different",
10-
"format": "prettier \"**/*.{js,jsx,css,scss,json,md,mdx,html}\" --write"
13+
"format": "prettier \"**/*.{js,jsx,css,scss,json,md,mdx,html}\" --write",
14+
"storybook": "start-storybook -p 6006",
15+
"build-storybook": "build-storybook",
16+
"prepublishOnly": "microbundle --jsx React.createElement --globals prop-types=PropTypes,react=React",
17+
"release": "np"
1118
},
1219
"repository": {
1320
"type": "git",
@@ -25,16 +32,29 @@
2532
"homepage": "https://github.com/julesforrest/react-shelf#readme",
2633
"dependencies": {},
2734
"devDependencies": {
35+
"@babel/core": "^7.4.0",
36+
"@storybook/addon-actions": "^5.0.5",
37+
"@storybook/addon-links": "^5.0.5",
38+
"@storybook/addons": "^5.0.5",
39+
"@storybook/react": "^5.0.5",
40+
"babel-loader": "^8.0.5",
2841
"eslint": "^5.15.3",
2942
"eslint-config-airbnb": "^17.1.0",
3043
"eslint-config-prettier": "^4.1.0",
3144
"eslint-plugin-import": "^2.16.0",
3245
"eslint-plugin-jsx-a11y": "^6.2.1",
3346
"eslint-plugin-react": "^7.12.4",
3447
"husky": "^1.3.1",
48+
"microbundle": "^0.11.0",
49+
"np": "^4.0.2",
3550
"prettier": "1.16.4",
3651
"pretty-quick": "^1.10.0"
3752
},
53+
"peerDependencies": {
54+
"prop-types": "^15.0.0",
55+
"react": "^16.3.0",
56+
"react-dom": "^16.0.0"
57+
},
3858
"husky": {
3959
"hooks": {
4060
"pre-commit": "pretty-quick --staged"

‎src/index.jsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
4+
const scrollbarHeight = "16px";
5+
6+
const Shelf = ({ children }) => {
7+
return (
8+
<div
9+
style={{
10+
overflowY: "hidden"
11+
}}
12+
>
13+
<div
14+
style={{
15+
overflowX: "auto",
16+
"-webkit-overflow-scrolling": "touch",
17+
position: "relative",
18+
whiteSpace: "nowrap",
19+
marginBottom: `-${scrollbarHeight}`
20+
}}
21+
>
22+
<div
23+
style={{
24+
display: "inline-block",
25+
paddingBottom: scrollbarHeight
26+
}}
27+
>
28+
<div style={{ display: "flex" }}>{children}</div>
29+
</div>
30+
</div>
31+
</div>
32+
);
33+
};
34+
35+
Shelf.propTypes = {
36+
children: PropTypes.node.isRequired
37+
};
38+
39+
export default Shelf;

‎stories/index.css

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
body {
2+
margin: 0;
3+
font-family: sans-serif;
4+
}
5+
6+
.example-card {
7+
border-radius: 4px;
8+
box-shadow: rgba(67, 90, 111, 0.416) 0px 0px 1px,
9+
rgba(67, 90, 111, 0.3) 0px 5px 8px -4px;
10+
padding: 16px;
11+
background-color: white;
12+
width: 78vw;
13+
white-space: initial;
14+
max-width: 300px;
15+
position: relative;
16+
display: flex;
17+
flex-direction: column;
18+
margin: 0 8px 16px 8px;
19+
}
20+
21+
.example-card:first-child {
22+
margin: 0 8px 16px 16px;
23+
}
24+
.example-card:last-child {
25+
margin: 0 16px 16px 8px;
26+
}
27+
28+
.example-image {
29+
height: 150px;
30+
object-fit: cover;
31+
width: 100%;
32+
margin-bottom: 16px;
33+
}
34+
35+
.example-headline {
36+
margin: 16px 0 0 0;
37+
}
38+
39+
.example-paragraph {
40+
margin-bottom: 24px;
41+
line-height: 1.4;
42+
}
43+
44+
.example-date {
45+
font-size: 12px;
46+
color: #ccc;
47+
text-transform: uppercase;
48+
letter-spacing: 1px;
49+
margin-top: auto;
50+
}

‎stories/index.stories.jsx

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import React from "react";
3+
import PropTypes from "prop-types";
4+
import { storiesOf } from "@storybook/react";
5+
import { action } from "@storybook/addon-actions";
6+
import { linkTo } from "@storybook/addon-links";
7+
8+
import { Button, Welcome } from "@storybook/react/demo";
9+
import Shelf from "../src/index";
10+
import "./index.css";
11+
12+
storiesOf("Welcome", module).add("to Storybook", () => (
13+
<Welcome showApp={linkTo("Button")} />
14+
));
15+
16+
const Card = ({ image, headline, paragraph, date }) => {
17+
return (
18+
<div className="example-card">
19+
<img src={image} alt="Test" className="example-image" />
20+
<h2 className="example-headline">{headline}</h2>
21+
<p className="example-paragraph">{paragraph}</p>
22+
<date className="example-date">{date}</date>
23+
</div>
24+
);
25+
};
26+
27+
Card.propTypes = {
28+
image: PropTypes.string.isRequired,
29+
headline: PropTypes.string.isRequired,
30+
paragraph: PropTypes.string.isRequired,
31+
date: PropTypes.string.isRequired
32+
};
33+
34+
storiesOf("Shelf", module)
35+
.add("with text", () => (
36+
<Shelf>
37+
<Card
38+
image="https://images.unsplash.com/photo-1539139329395-ceb575183d8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1a756f17d86ed8d60f9c32269fcbfa6b&auto=format&fit=crop&w=800&q=60"
39+
headline="This is a headline"
40+
paragraph="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
41+
date="SEPTEMBER 9, 2017"
42+
/>
43+
<Card
44+
image="https://images.unsplash.com/photo-1534832796130-37cfe118e925?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=83fca2459a46db84a04e807aadd0c38c&auto=format&fit=crop&w=800&q=60"
45+
headline="Test"
46+
paragraph="test"
47+
date="date"
48+
/>
49+
<Card
50+
image="https://images.unsplash.com/photo-1539139329395-ceb575183d8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1a756f17d86ed8d60f9c32269fcbfa6b&auto=format&fit=crop&w=800&q=60"
51+
headline="Test"
52+
paragraph="test"
53+
date="date"
54+
/>
55+
<Card
56+
image="https://images.unsplash.com/photo-1539139329395-ceb575183d8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1a756f17d86ed8d60f9c32269fcbfa6b&auto=format&fit=crop&w=800&q=60"
57+
headline="Test"
58+
paragraph="test"
59+
date="date"
60+
/>
61+
<Card
62+
image="https://images.unsplash.com/photo-1539139329395-ceb575183d8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1a756f17d86ed8d60f9c32269fcbfa6b&auto=format&fit=crop&w=800&q=60"
63+
headline="Test"
64+
paragraph="test"
65+
date="date"
66+
/>
67+
</Shelf>
68+
))
69+
.add("with some emoji", () => (
70+
<Button onClick={action("clicked")}>
71+
<span role="img" aria-label="so cool">
72+
😀 😎 👍 💯
73+
</span>
74+
</Button>
75+
));

0 commit comments

Comments
 (0)