Skip to content

Commit edcc476

Browse files
jossmacjossmac
authored
V1 build system & style framework (jossmac#211)
* rollup * move to commonProps + innerProps pattern * implement dynamic styling * add formatCount prop
1 parent 8718c85 commit edcc476

Some content is hidden

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

50 files changed

+3196
-2307
lines changed

‎.babelrc

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
{
2-
"ignore": ["node-modules/**"],
3-
"presets": [ "es2015", "stage-0", "react"],
2+
"plugins": ["transform-class-properties", "transform-object-rest-spread"],
3+
"presets": ["env", "react"],
4+
"ignore": ["node_modules"],
5+
"env": {
6+
"test": {
7+
"plugins": ["istanbul"]
8+
}
9+
}
410
}

‎.editorconfig

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# This file is for unifying the coding style for different editors and IDEs
2+
# editorconfig.org
3+
root = true
4+
5+
[*]
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true
10+
indent_style = space
11+
indent_size = 2
12+
13+
[*.md]
14+
trim_trailing_whitespace = false

‎.eslintignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
lib/*
2+
dist/*
3+
coverage/*
4+
node_modules/*

‎.eslintrc

-7
This file was deleted.

‎.eslintrc.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
module.exports = {
2+
parser: 'babel-eslint',
3+
env: {
4+
browser: true,
5+
es6: true,
6+
node: true,
7+
},
8+
plugins: ['react'],
9+
rules: {
10+
'no-unused-vars': [
11+
'error',
12+
{
13+
args: 'after-used',
14+
argsIgnorePattern: '^event$',
15+
ignoreRestSiblings: true,
16+
vars: 'all',
17+
varsIgnorePattern: '^glam$',
18+
},
19+
],
20+
curly: [2, 'multi-line'],
21+
'jsx-quotes': 1,
22+
'no-shadow': 1,
23+
'no-trailing-spaces': 1,
24+
'no-underscore-dangle': 1,
25+
'no-unused-expressions': 1,
26+
'object-curly-spacing': [1, 'always'],
27+
quotes: [2, 'single', 'avoid-escape'],
28+
'react/jsx-boolean-value': 1,
29+
'react/jsx-no-undef': 1,
30+
'react/jsx-uses-react': 1,
31+
'react/jsx-uses-vars': 1,
32+
'react/jsx-wrap-multilines': 1,
33+
'react/no-did-mount-set-state': 1,
34+
'react/no-did-update-set-state': 1,
35+
'react/no-unknown-property': 1,
36+
'react/react-in-jsx-scope': 1,
37+
'react/self-closing-comp': 1,
38+
'react/sort-prop-types': 1,
39+
semi: 2,
40+
strict: 0,
41+
},
42+
};

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
# Build
2+
lib
3+
dist
4+
examples/dist
5+
16
# Webstorm
27
.idea/
38

‎.npmignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# examples
2+
examples

‎examples/App.js

+175
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
// @flow
2+
// @jsx glam
3+
4+
import './index.css';
5+
import glam from 'glam';
6+
import React, { Component } from 'react';
7+
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';
8+
9+
import { Home, NoMatch } from './pages';
10+
11+
const borderColor = 'hsl(0, 0%, 88%)';
12+
const navWidth = 180;
13+
const appWidth = 640;
14+
const appGutter = 20;
15+
const contentGutter = 30;
16+
const pagePadding = 260;
17+
const smallDevice = '@media (max-width: 769px)';
18+
const largeDevice = '@media (min-width: 770px)';
19+
20+
const AppContainer = props => (
21+
<div
22+
css={{
23+
boxSizing: 'border-box',
24+
marginLeft: 'auto',
25+
marginRight: 'auto',
26+
maxWidth: appWidth + navWidth / 2,
27+
minHeight: '100vh',
28+
padding: `0 ${appGutter}px ${pagePadding}px`,
29+
30+
[smallDevice]: {
31+
maxWidth: appWidth,
32+
},
33+
}}
34+
{...props}
35+
/>
36+
);
37+
const PageContent = props => (
38+
<div
39+
css={{
40+
paddingBottom: contentGutter,
41+
paddingTop: contentGutter,
42+
paddingRight: navWidth / 2,
43+
44+
[smallDevice]: {
45+
paddingTop: contentGutter * 2,
46+
},
47+
}}
48+
{...props}
49+
/>
50+
);
51+
const AppContent = props => (
52+
<div
53+
css={{
54+
flex: '1 1 auto',
55+
marginLeft: 'auto',
56+
marginRight: 'auto',
57+
58+
[largeDevice]: {
59+
paddingLeft: navWidth + contentGutter,
60+
61+
':before': {
62+
borderRight: `1px solid ${borderColor}`,
63+
content: ' ',
64+
marginLeft: -(navWidth + contentGutter),
65+
height: '100%',
66+
position: 'fixed',
67+
width: navWidth,
68+
},
69+
},
70+
}}
71+
{...props}
72+
/>
73+
);
74+
const Nav = props => (
75+
<div
76+
css={{
77+
[smallDevice]: {
78+
backgroundColor: 'rgba(255, 255, 255, 0.96)',
79+
boxShadow: 'inset 0 -1px 0 rgba(0, 0, 0, 0.1)',
80+
display: 'flex ',
81+
fontSize: 13,
82+
fontWeight: 'bold',
83+
marginLeft: -appGutter,
84+
marginRight: -appGutter,
85+
overflowX: 'auto',
86+
position: 'fixed',
87+
top: 0,
88+
width: '100%',
89+
WebkitOverflowScrolling: 'touch',
90+
},
91+
92+
[largeDevice]: {
93+
display: 'block',
94+
float: 'left',
95+
paddingTop: contentGutter,
96+
position: 'fixed',
97+
width: navWidth,
98+
zIndex: 1,
99+
},
100+
}}
101+
{...props}
102+
/>
103+
);
104+
const NavItem = ({ selected, ...props }) => (
105+
<Link
106+
css={{
107+
color: selected ? 'hsl(0, 0%, 0%)' : 'hsl(0, 0%, 40%)',
108+
display: 'inline-block',
109+
padding: `15px ${appGutter}px`,
110+
position: 'relative',
111+
textDecoration: 'none',
112+
whiteSpace: 'nowrap',
113+
114+
':hover, :active': {
115+
color: selected ? 'hsl(0, 0%, 10%)' : '#2684FF',
116+
},
117+
118+
[smallDevice]: {
119+
boxShadow: selected ? 'inset 0 -1px 0 black' : null,
120+
},
121+
122+
[largeDevice]: {
123+
backgroundColor: selected ? 'white' : 'transparent',
124+
borderColor: selected ? borderColor : 'transparent',
125+
borderStyle: 'solid',
126+
borderWidth: '1px 0',
127+
display: 'block',
128+
padding: '10px 20px 10px 0',
129+
right: -1,
130+
131+
':before': {
132+
content: ' ',
133+
// background: 'linear-gradient(90deg, fade(#e9e9e9, 0%) 94%, #e9e9e9)',
134+
},
135+
},
136+
}}
137+
{...props}
138+
/>
139+
);
140+
const links = [{ label: 'Home', value: '/' }];
141+
142+
export default class App extends Component<*> {
143+
render() {
144+
return (
145+
<BrowserRouter>
146+
<Route>
147+
<AppContainer>
148+
<Route
149+
render={({ location }) => (
150+
<Nav>
151+
{links.map(l => {
152+
const selected = location.pathname === l.value;
153+
return (
154+
<NavItem key={l.value} selected={selected} to={l.value}>
155+
{l.label}
156+
</NavItem>
157+
);
158+
})}
159+
</Nav>
160+
)}
161+
/>
162+
<AppContent>
163+
<PageContent>
164+
<Switch>
165+
<Route exact path="/" component={Home} />
166+
<Route component={NoMatch} />
167+
</Switch>
168+
</PageContent>
169+
</AppContent>
170+
</AppContainer>
171+
</Route>
172+
</BrowserRouter>
173+
);
174+
}
175+
}

‎examples/_redirects

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* /index.html 200

‎examples/components.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
// @flow
2+
// @jsx glam
3+
4+
import glam from 'glam';
5+
import React from 'react';
6+
7+
const fontFamilyFixed =
8+
'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace';
9+
10+
export const Example = (props: {}) => (
11+
<div css={{ paddingRight: '100px' }} {...props} />
12+
);
13+
14+
export const Code = (props: {}) => (
15+
<code
16+
css={{
17+
backgroundColor: '#eee',
18+
fontFamily: fontFamilyFixed,
19+
fontSize: '85%',
20+
padding: '2px 4px',
21+
borderRadius: 4,
22+
}}
23+
{...props}
24+
/>
25+
);
26+
27+
const linkCSS = {
28+
color: '#2684ff',
29+
textDecoration: 'none',
30+
borderBottom: '2px solid #deebff',
31+
};
32+
export const Link = (props: {}) => (
33+
<a
34+
css={{
35+
...linkCSS,
36+
':visited': linkCSS,
37+
':hover': {
38+
borderBottomColor: '#2684ff',
39+
},
40+
}}
41+
{...props}
42+
/>
43+
);
44+
45+
export const Hr = () => (
46+
<div
47+
css={{
48+
backgroundColor: 'hsl(0, 0%, 90%)',
49+
height: 2,
50+
marginBottom: '2em',
51+
marginTop: '2em',
52+
}}
53+
/>
54+
);
55+
56+
export const Note = ({ Tag = 'div', ...props }: { Tag?: string }) => (
57+
<Tag
58+
css={{
59+
color: 'hsl(0, 0%, 40%)',
60+
display: 'inline-block',
61+
fontSize: 12,
62+
fontStyle: 'italic',
63+
marginTop: '0.5em',
64+
}}
65+
{...props}
66+
/>
67+
);
68+
69+
export const H1 = (props: any) => <h1 css={{ marginTop: 0 }} {...props} />;

‎examples/data.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
function unsplash(id) {
2+
return `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=${width}&q=${quality}&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D`;
3+
}
4+
5+
const quality = 80;
6+
const width = 1440;
7+
8+
export const images = [
9+
{
10+
src: unsplash('1437422061949-f6efbde0a471'),
11+
description: 'Blue mountains',
12+
},
13+
// {
14+
// src: unsplash('1508604140312-8dc6638aec97'),
15+
// description: 'Little wharf',
16+
// },
17+
{
18+
src: unsplash('1421789665209-c9b2a435e3dc'),
19+
description: 'Baby forest',
20+
},
21+
{
22+
src: unsplash('1431794062232-2a99a5431c6c'),
23+
description: 'Cliff waterfall',
24+
},
25+
{
26+
src: unsplash('1470813740244-df37b8c1edcb'),
27+
description: 'Milky way above canyon',
28+
},
29+
];

‎examples/favicon.ico

1.15 KB
Binary file not shown.

‎examples/index.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
body {
2+
-moz-font-feature-settings: 'liga' on;
3+
-moz-osx-font-smoothing: grayscale;
4+
-webkit-font-smoothing: antialiased;
5+
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
6+
sans-serif;
7+
font-style: normal;
8+
font-weight: 400;
9+
margin: 0;
10+
padding: 0;
11+
text-rendering: optimizeLegibility;
12+
}

0 commit comments

Comments
 (0)