Skip to content

Commit 93c8a20

Browse files
patrick91patrick91
authored
Merge pull request #95 from pythonitalia/feature/design-system
Initial implementation of the design system and storybook
2 parents 7518b74 + 500239f commit 93c8a20

15 files changed

Lines changed: 637 additions & 15 deletions

File tree

‎frontend/.storybook/config.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1-
import { configure } from "@storybook/react";
1+
import { configure, addDecorator as add } from '@storybook/react';
22

3-
import 'modern-normalize';
3+
import 'reset-css';
4+
5+
import { wrapper } from './wrapper';
46

57
function loadStories() {
6-
require("../src/stories/index.tsx");
7-
require("../src/stories/navbar/index.tsx");
8-
require("../src/stories/logo/index.tsx");
8+
require('../src/stories/index.tsx');
9+
require('../src/stories/navbar/index.tsx');
10+
require('../src/stories/logo/index.tsx');
11+
require('../src/stories/box/index.tsx');
12+
require('../src/stories/typography/index.tsx');
913
}
1014

15+
add(wrapper());
16+
1117
configure(loadStories, module);

‎frontend/.storybook/preview-head.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Rubik:500,700" rel="stylesheet">

‎frontend/.storybook/wrapper.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import { ThemeProvider } from 'emotion-theming';
3+
4+
import { theme } from '../src/theme';
5+
6+
export function wrapper() {
7+
return story => {
8+
return (
9+
<ThemeProvider theme={theme}>
10+
<div>{story()}</div>
11+
</ThemeProvider>
12+
);
13+
};
14+
}

‎frontend/package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,14 @@
44
"private": true,
55
"dependencies": {
66
"emotion": "^9.0.2",
7-
"modern-normalize": "^0.4.0",
7+
"emotion-theming": "^9.0.0",
88
"react": "^16.2.0",
99
"react-dom": "^16.2.0",
1010
"react-emotion": "^9.0.2",
11-
"react-scripts-ts": "2.13.0"
11+
"react-scripts-ts": "2.13.0",
12+
"recompose": "^0.26.0",
13+
"reset-css": "^3.0.0",
14+
"styled-system": "^2.1.1"
1215
},
1316
"scripts": {
1417
"start": "react-scripts-ts start",

‎frontend/public/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<meta name="theme-color" content="#000000">
77

88
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
9+
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Rubik:500,700" rel="stylesheet">
10+
911
<!--
1012
Notice the use of %PUBLIC_URL% in the tags above.
1113
It will be replaced with the URL of the `public` folder during the build.

‎frontend/src/components/box/index.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
3+
import {
4+
space,
5+
width,
6+
fontSize,
7+
color,
8+
boxShadow,
9+
SpaceProps,
10+
WidthProps,
11+
FontSizeProps,
12+
ColorProps,
13+
BoxShadowProps
14+
} from 'styled-system';
15+
16+
import styled from '../../styled';
17+
18+
type BoxProps = SpaceProps &
19+
WidthProps &
20+
FontSizeProps &
21+
ColorProps &
22+
BoxShadowProps;
23+
24+
export const Box: React.SFC<BoxProps> = styled('div')`
25+
${space}
26+
${width}
27+
${fontSize}
28+
${color}
29+
${boxShadow}
30+
`;

‎frontend/src/components/typography/index.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
import { withTheme } from 'emotion-theming';
3+
import withProps from 'recompose/withProps';
4+
5+
import { Theme } from '../../theme';
6+
7+
import {
8+
space,
9+
fontSize,
10+
color,
11+
lineHeight,
12+
fontFamily,
13+
FontFamilyProps,
14+
LineHeightProps,
15+
SpaceProps,
16+
FontSizeProps,
17+
ColorProps,
18+
BoxShadowProps
19+
} from 'styled-system';
20+
21+
import styled from '../../styled';
22+
23+
type TypographyProps = SpaceProps &
24+
FontSizeProps &
25+
LineHeightProps &
26+
ColorProps &
27+
FontFamilyProps &
28+
BoxShadowProps;
29+
30+
const BaseTypography = styled<TypographyProps, 'h1'>('h1')`
31+
${space}
32+
${fontFamily}
33+
${fontSize}
34+
${lineHeight}
35+
${color}
36+
`;
37+
38+
interface TitleProps {
39+
level: 1 | 2 | 3;
40+
children: React.ReactNode;
41+
}
42+
43+
// TODO spacing etc
44+
const BaseTitle = ({
45+
theme,
46+
level,
47+
children
48+
}: TitleProps & { theme: Theme }) => {
49+
// ugly, but works :)
50+
const tagName: keyof JSX.IntrinsicElements = `h${level}` as keyof JSX.IntrinsicElements;
51+
const name = `title${level}`;
52+
53+
const X = BaseTypography.withComponent(tagName);
54+
55+
return (
56+
<X fontSize={name} lineHeight={name} fontFamily="title">
57+
{children}
58+
</X>
59+
);
60+
};
61+
62+
export const Title = withTheme<TitleProps, Theme>(BaseTitle);
63+
64+
const BaseParagraph = withProps({
65+
fontFamily: 'base',
66+
fontSize: 'body',
67+
lineHeight: 'body',
68+
mb: 3
69+
})(BaseTypography.withComponent('p'));
70+
71+
export const Paragraph = withTheme<{}, Theme>(BaseParagraph);

‎frontend/src/index.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@ import * as React from 'react';
22
import * as ReactDOM from 'react-dom';
33
import App from './App';
44

5-
import 'modern-normalize';
5+
import { ThemeProvider } from 'emotion-theming';
66

7-
ReactDOM.render(<App />, document.getElementById('root') as HTMLElement);
7+
import { theme } from './theme';
8+
9+
import 'reset-css';
10+
11+
ReactDOM.render(
12+
<ThemeProvider theme={theme}>
13+
<App />
14+
</ThemeProvider>,
15+
document.getElementById('root') as HTMLElement
16+
);

‎frontend/src/stories/box/index.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
4+
import { Box } from '../../components/box';
5+
6+
storiesOf('Box', module)
7+
.add('plain', () => <Box>Hello world</Box>)
8+
.add('font size', () => <Box fontSize={4}>Hello world</Box>)
9+
.add('complex', () => (
10+
<Box m={2} p={1} boxShadow={1}>
11+
Hello world
12+
</Box>
13+
))
14+
.add('padding', () => (
15+
// padding: 32px (theme.space[3])
16+
<Box p={3}>Hello world</Box>
17+
))
18+
.add('color', () => (
19+
// color
20+
<Box color="tomato">Hello world </Box>
21+
))
22+
.add('background color', () => (
23+
// background color
24+
<Box bg="tomato">Hello world</Box>
25+
));

‎frontend/src/stories/typography/index.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
4+
import { Title, Paragraph } from '../../components/typography';
5+
6+
storiesOf('Typography', module)
7+
.add('titles', () => (
8+
<div>
9+
<Title level={1}>Title 1</Title>
10+
<Title level={2}>Title 2</Title>
11+
<Title level={3}>Title 3</Title>
12+
</div>
13+
))
14+
.add('paragraphs', () => (
15+
<div>
16+
<Paragraph>
17+
Legio eligo sed medius, negotium oblivio sed neque neque culpa lacrima
18+
dulcis lorem, sit quis, sit infantia gratia virtus quis in trivia trivia
19+
benevolentia legis ergo dolor lacuna virtus insula sit canvallis caelum
20+
quis impera fabula lacuna lorem medius ora.
21+
</Paragraph>
22+
<Paragraph>
23+
Legio eligo sed medius, negotium oblivio sed neque neque culpa lacrima
24+
dulcis lorem, sit quis, sit infantia gratia virtus quis in trivia trivia
25+
benevolentia legis ergo dolor lacuna virtus insula sit canvallis caelum
26+
quis impera fabula lacuna lorem medius ora.
27+
</Paragraph>
28+
</div>
29+
));

0 commit comments

Comments
 (0)