Skip to content

Commit adb32f0

Browse files
yeehaa123yeehaa123
committed
feat(molecules): add molecules package
1 parent 897ce5d commit adb32f0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+1567
-2
lines changed

‎packages/atoms/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@fortawesome/fontawesome-free-brands": "^5.0.8",
2020
"@fortawesome/fontawesome-free-solid": "^5.0.8",
2121
"@fortawesome/react-fontawesome": "^0.0.18",
22+
"atoms": "^0.2.0",
2223
"ramda": "^0.25.0",
2324
"react-masonry-infinite": "^1.2.2",
2425
"voca": "^1.4.0"

‎packages/documentation/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
"private": true,
55
"dependencies": {
66
"@offcourse/atoms": "^1.0.2",
7+
"@offcourse/molecules": "^0.0.0-semantically-released",
8+
"atoms": "^0.2.0",
79
"catalog": "^3.5.3",
810
"react": "^16.4.0",
911
"react-dom": "^16.4.0",

‎packages/molecules/.babelrc

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"presets": [
3+
["env", {
4+
"modules": false
5+
}],
6+
"stage-0",
7+
"react"
8+
],
9+
"plugins": [
10+
"external-helpers"
11+
]
12+
}

‎packages/molecules/package.json

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
{
2+
"name": "@offcourse/molecules",
3+
"version": "0.0.0-semantically-released",
4+
"description": "Molecular Building Blocks for the Offcourse Project",
5+
"author": "Jan Hein Hoogstad",
6+
"license": "MIT",
7+
"repository": "offcourse/offcourse-next",
8+
"main": "dist/index.js",
9+
"module": "dist/index.es.js",
10+
"jsnext:main": "dist/index.es.js",
11+
"scripts": {
12+
"test": "echo TEST123",
13+
"test:watch": "react-scripts test --env=jsdom",
14+
"build": "rollup -c",
15+
"start": "rollup -c -w"
16+
},
17+
"dependencies": {
18+
"@offcourse/atoms": "^0.0.0-semantically-released",
19+
"atoms": "^0.2.0",
20+
"ramda": "^0.25.0",
21+
"react-copy-to-clipboard": "^5.0.1",
22+
"react-sidebar": "^2.3.2",
23+
"react-sortable-hoc": "^0.8.3",
24+
"voca": "^1.4.0"
25+
},
26+
"peerDependencies": {
27+
"prop-types": "^15.5.4",
28+
"react": "^15.0.0 || ^16.0.0",
29+
"react-dom": "^15.0.0 || ^16.0.0",
30+
"system-components": "^2.0.3"
31+
},
32+
"devDependencies": {
33+
"babel-core": "^6.26.0",
34+
"babel-eslint": "^8.2.1",
35+
"babel-plugin-external-helpers": "^6.22.0",
36+
"babel-preset-env": "^1.6.0",
37+
"babel-preset-react": "^6.24.1",
38+
"babel-preset-stage-0": "^6.24.1",
39+
"cross-env": "^5.1.4",
40+
"eslint": "^4.19.1",
41+
"eslint-config-standard": "^11.0.0",
42+
"eslint-config-standard-react": "^6.0.0",
43+
"eslint-plugin-import": "^2.11.0",
44+
"eslint-plugin-node": "^6.0.1",
45+
"eslint-plugin-promise": "^3.7.0",
46+
"eslint-plugin-react": "^7.7.0",
47+
"eslint-plugin-standard": "^3.0.1",
48+
"gh-pages": "^1.1.0",
49+
"react": "^16.2.0",
50+
"react-dom": "^16.2.0",
51+
"react-scripts": "^1.1.1",
52+
"rollup": "^0.54.0",
53+
"rollup-plugin-babel": "^3.0.3",
54+
"rollup-plugin-commonjs": "^8.2.1",
55+
"rollup-plugin-json": "^3.0.0",
56+
"rollup-plugin-node-resolve": "^3.0.2",
57+
"rollup-plugin-peer-deps-external": "^2.0.0",
58+
"rollup-plugin-postcss": "^1.1.0",
59+
"rollup-plugin-url": "^1.3.0",
60+
"semantic-release": "^15.5.0",
61+
"semantic-release-monorepo": "^6.0.3"
62+
},
63+
"files": [
64+
"dist"
65+
],
66+
"config": {
67+
"commitizen": {
68+
"path": "./node_modules/cz-conventional-changelog"
69+
}
70+
}
71+
}

‎packages/molecules/rollup.config.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import babel from "rollup-plugin-babel";
2+
import commonjs from "rollup-plugin-commonjs";
3+
import external from "rollup-plugin-peer-deps-external";
4+
import postcss from "rollup-plugin-postcss";
5+
import resolve from "rollup-plugin-node-resolve";
6+
import url from "rollup-plugin-url";
7+
import json from "rollup-plugin-json";
8+
9+
import pkg from "./package.json";
10+
11+
export default {
12+
input: "src/index.js",
13+
output: [
14+
{
15+
file: pkg.main,
16+
format: "cjs"
17+
},
18+
{
19+
file: pkg.module,
20+
format: "es"
21+
}
22+
],
23+
external: ["stream", "styled-components"],
24+
plugins: [
25+
external(),
26+
postcss({
27+
modules: true
28+
}),
29+
url(),
30+
json(),
31+
babel({
32+
exclude: ["node_modules/**", "../../node_modules/**"]
33+
}),
34+
resolve(),
35+
commonjs({
36+
namedExports: {
37+
"react-copy-to-clipboard": ["CopyToClipboard"]
38+
} // Default: undefined
39+
})
40+
]
41+
};

‎packages/molecules/src/ButtonGroup/ButtonGroup.js

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React, { Component } from "react";
2+
import PropTypes from "prop-types";
3+
import { mapIndexed } from "../helpers";
4+
import { isEmpty } from "ramda";
5+
import { Button } from "@offcourse/atoms";
6+
import ButtonGroupWrapper from "./ButtonGroupWrapper";
7+
8+
export default class ButtonGroup extends Component {
9+
static Button = Button;
10+
11+
static propTypes = {
12+
direction: PropTypes.oneOf(["horizontal", "vertical"]),
13+
size: PropTypes.oneOf(["small", "medium", "large"]),
14+
buttons: PropTypes.arrayOf(
15+
PropTypes.shape({
16+
title: PropTypes.string.isRequired,
17+
variant: PropTypes.string,
18+
href: PropTypes.string,
19+
onClick: PropTypes.func,
20+
type: PropTypes.oneOf(["button", "submit"]),
21+
disabled: PropTypes.bool
22+
})
23+
),
24+
children: PropTypes.oneOfType([
25+
PropTypes.element,
26+
PropTypes.arrayOf(PropTypes.element)
27+
])
28+
};
29+
30+
static defaultProps = {
31+
buttons: [],
32+
direction: "horizontal"
33+
};
34+
35+
renderButtons = () => {
36+
const { buttons, size } = this.props;
37+
return mapIndexed(
38+
(props, index) => (
39+
<Button size={size} {...props} key={index}>
40+
{props.title}
41+
</Button>
42+
),
43+
buttons
44+
);
45+
};
46+
47+
render() {
48+
const { buttons, pt, justifyContent, children, direction } = this.props;
49+
return (
50+
<ButtonGroupWrapper
51+
flexDirection="row"
52+
pt={pt}
53+
justifyContent={justifyContent}
54+
>
55+
{isEmpty(buttons) ? children : this.renderButtons()}
56+
</ButtonGroupWrapper>
57+
);
58+
}
59+
}

‎packages/molecules/src/ButtonGroup/ButtonGroupWrapper.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import system from "system-components";
2+
import { Group } from "@offcourse/atoms";
3+
4+
export default Group.extend`
5+
flex-wrap: wrap;
6+
> button {
7+
margin-right: ${({ theme }) => theme.space[3]};
8+
9+
&:last-child {
10+
margin-right: 0;
11+
}
12+
}
13+
}
14+
`;

‎packages/molecules/src/ButtonGroup/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./ButtonGroup";

‎packages/molecules/src/CheckItem/CheckItem.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React, { Component } from "react";
2+
import PropTypes from "prop-types";
3+
import { Checkbox, Link, Item } from "@offcourse/atoms";
4+
5+
export default class CheckItem extends Component {
6+
static propTypes = {
7+
children: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
8+
.isRequired,
9+
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
10+
checked: PropTypes.bool,
11+
onToggle: PropTypes.func.isRequired
12+
};
13+
14+
renderChildren() {
15+
const { href, children } = this.props;
16+
return href ? (
17+
<Item.Link href={href}>{children}</Item.Link>
18+
) : (
19+
<Item.Content>{children}</Item.Content>
20+
);
21+
}
22+
23+
render() {
24+
const { is, href, children, checked, id, onToggle } = this.props;
25+
return (
26+
<Item is={is} gridTemplateColumns="2rem 1fr">
27+
<Checkbox
28+
onToggle={({ checked }) => onToggle({ id, checked })}
29+
checked={checked}
30+
/>
31+
{this.renderChildren()}
32+
</Item>
33+
);
34+
}
35+
}

‎packages/molecules/src/CheckItem/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./CheckItem";

‎packages/molecules/src/CheckpointInput/CheckpointInput.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React, { Component } from "react";
2+
import PropTypes from "prop-types";
3+
import CheckpointInputWrapper from "./CheckpointInputWrapper";
4+
import { Group, Input, Icon } from "@offcourse/atoms";
5+
import { IconGroup } from "..";
6+
7+
export default class CheckpointInput extends Component {
8+
static propTypes = {};
9+
10+
render() {
11+
const {
12+
name,
13+
children,
14+
value,
15+
remove,
16+
hasErrors,
17+
onChange,
18+
onBlur
19+
} = this.props;
20+
return (
21+
<CheckpointInputWrapper border={hasErrors ? 2 : 0}>
22+
<Group alignItems="stretch" className="inputs">
23+
<Input
24+
onChange={onChange}
25+
onBlur={onBlur}
26+
pb={2}
27+
mb={0}
28+
name={`${name}.task`}
29+
value={value.task}
30+
placeholder="Task"
31+
/>
32+
<Input
33+
onChange={onChange}
34+
onBlur={onBlur}
35+
pt={0}
36+
mt={0}
37+
name={`${name}.resourceUrl`}
38+
variant="small"
39+
value={value.resourceUrl}
40+
placeholder="Resource URL"
41+
/>
42+
</Group>
43+
{children && (
44+
<Group px={6} alignItems="flex-end">
45+
{children}
46+
</Group>
47+
)}
48+
</CheckpointInputWrapper>
49+
);
50+
}
51+
}

‎packages/molecules/src/CheckpointInput/CheckpointInputWrapper.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import system from "system-components";
2+
3+
const CheckpointSectionWrapper = system(
4+
{
5+
display: "flex",
6+
bg: "grayScale.1",
7+
border: 0,
8+
mb: 3,
9+
borderColor: "negative"
10+
},
11+
props => ({
12+
fontFamily: props.theme.fonts.bold,
13+
boxSizing: "border-box"
14+
})
15+
).extend`
16+
.inputs {
17+
flex: 50;
18+
}
19+
.handles {
20+
flex: 1;
21+
}
22+
`;
23+
24+
export default CheckpointSectionWrapper;

‎packages/molecules/src/CheckpointInput/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./CheckpointInput"

‎packages/molecules/src/CheckpointItem/CheckpointItem.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React, { Component } from "react";
2+
import PropTypes from "prop-types";
3+
import { Item } from "@offcourse/atoms";
4+
import { CheckItem } from "..";
5+
6+
export default class CheckpointItem extends Component {
7+
static propTypes = {};
8+
9+
render() {
10+
const {
11+
onToggle,
12+
trackable,
13+
checkpointId,
14+
completed,
15+
task,
16+
is,
17+
resourceUrl
18+
} = this.props;
19+
return onToggle ? (
20+
<CheckItem
21+
is={is}
22+
id={checkpointId}
23+
href={resourceUrl}
24+
checked={completed}
25+
onToggle={({ checked }) => onToggle({ checkpointId, checked })}
26+
>
27+
{task}
28+
</CheckItem>
29+
) : (
30+
<Item is={is} href={resourceUrl}>
31+
{task}
32+
</Item>
33+
);
34+
}
35+
}

‎packages/molecules/src/CheckpointItem/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./CheckpointItem";

0 commit comments

Comments
 (0)