Skip to content

Commit 7be7ff3

Browse files
yeehaa123yeehaa123
committed
fix(documentation,organisms,app): remove submodules,fix docs, add app
1 parent 7a60b2c commit 7be7ff3

14 files changed

Lines changed: 343 additions & 1 deletion

File tree

‎packages/app‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/app/.gitignore‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/coverage
2+
/styleguide
3+
/demo/dist
4+
/es
5+
/lib
6+
/node_modules
7+
/.next
8+
/umd
9+
npm-debug.log*
10+
yarn.lock
11+
package-lock.json
12+

‎packages/app/next.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const withProgressBar = require("next-progressbar");
2+
3+
module.exports = withProgressBar({});

‎packages/app/package.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "offcourse-app",
3+
"version": "0.0.1",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "next",
8+
"build": "next build",
9+
"start": "next start"
10+
},
11+
"author": "",
12+
"license": "ISC",
13+
"babel": {
14+
"presets": [
15+
"next/babel"
16+
],
17+
"plugins": [
18+
[
19+
"babel-plugin-styled-components",
20+
{
21+
"ssr": true,
22+
"displayName": true,
23+
"preprocess": false
24+
}
25+
]
26+
]
27+
},
28+
"dependencies": {
29+
"@offcourse/atoms": "^1.1.0",
30+
"@offcourse/organisms": "^1.0.0",
31+
"babel-plugin-styled-components": "^1.1.5",
32+
"next": "6.0.2",
33+
"next-progressbar": "0.0.2",
34+
"react": "^16.3.2",
35+
"react-dom": "^16.3.2",
36+
"system-components": "^2.0.3"
37+
}
38+
}

‎packages/app/pages/_document.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Document, { Head, Main, NextScript } from "next/document";
2+
import { ServerStyleSheet } from "styled-components";
3+
4+
export default class MyDocument extends Document {
5+
static getInitialProps({ renderPage }) {
6+
const sheet = new ServerStyleSheet();
7+
const page = renderPage(App => props =>
8+
sheet.collectStyles(<App {...props} />)
9+
);
10+
const styleTags = sheet.getStyleElement();
11+
return { ...page, styleTags };
12+
}
13+
14+
render() {
15+
return (
16+
<html>
17+
<Head>
18+
<title>My page</title>
19+
{this.props.styleTags}
20+
</Head>
21+
<body>
22+
<Main />
23+
<NextScript />
24+
</body>
25+
</html>
26+
);
27+
}
28+
}

‎packages/app/pages/index.js‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import Head from "next/head";
2+
import { ThemeProvider, injectGlobal } from "styled-components";
3+
import { offcourse as theme } from "../themes";
4+
import { Card, Heading, Group, Button, Masonry, Text } from "@offcourse/atoms";
5+
import { AppShell } from "@offcourse/organisms";
6+
7+
injectGlobal([theme.globals]);
8+
const text = `
9+
Lorem ipsum dolor amet small batch heirloom thundercats sartorial irony crucifix. Butcher locavore cloud bread humblebrag meh celiac hexagon biodiesel sustainable kale chips messenger bag. Ramps forage next level leggings, retro kale chips disrupt photo booth shaman farm-to-table cornhole neutra bicycle rights cred woke. Vexillologist cornhole vape, subway tile microdosing sartorial jianbing authentic biodiesel. Portland pop-up shabby chic gastropub mlkshk bushwick shoreditch before they sold out craft beer coloring book.
10+
`;
11+
const text1 = `
12+
Butcher locavore cloud bread humblebrag meh celiac hexagon biodiesel sustainable kale chips messenger bag.
13+
`;
14+
const text2 = `
15+
Ramps forage next level leggings, retro kale chips disrupt photo booth shaman farm-to-table cornhole neutra bicycle rights cred woke. Vexillologist cornhole vape, subway tile microdosing sartorial jianbing authentic biodiesel."
16+
`;
17+
const text3 = `
18+
Portland pop-up shabby chic gastropub mlkshk bushwick shoreditch before they sold out craft beer coloring book.
19+
`;
20+
const text4 = text;
21+
22+
const randInt = (min, max) => {
23+
return Math.floor(Math.random() * (max - min + 1)) + min;
24+
};
25+
26+
const createFragment = () => {
27+
return text.slice(randInt(0, 160), randInt(300, 600)).trim();
28+
};
29+
30+
const fragments = [text2, text4, text1, text3];
31+
32+
class Content extends React.Component {
33+
state = { items: fragments };
34+
35+
render() {
36+
const sizes = [
37+
{ columns: 1, gutter: 16 },
38+
{ mq: "650px", columns: 2, gutter: 16 },
39+
{ mq: "975px", columns: 3, gutter: 16 },
40+
{ mq: "1300px", columns: 4, gutter: 16 },
41+
{ mq: "1625px", columns: 5, gutter: 16 },
42+
{ mq: "1950px", columns: 6, gutter: 16 }
43+
];
44+
45+
const { items } = this.state;
46+
47+
return (
48+
<div style={{ padding: "16px" }}>
49+
<Masonry sizes={sizes}>
50+
{({ forcePack }) =>
51+
items.map((fragment, index) => (
52+
<Card key={index}>
53+
<Heading size="small" section="title">
54+
{`Masonry Example ${index + 1}`}
55+
</Heading>
56+
<Group section="body">
57+
<Text size="small">{fragment}</Text>
58+
</Group>
59+
<Button
60+
size="large"
61+
variant="warning"
62+
onClick={() => {
63+
const newItems = [...items];
64+
newItems.push(createFragment());
65+
this.setState({ items: newItems });
66+
forcePack();
67+
}}
68+
>
69+
Add Item
70+
</Button>
71+
</Card>
72+
))
73+
}
74+
</Masonry>
75+
</div>
76+
);
77+
}
78+
}
79+
class App extends React.Component {
80+
state = {
81+
isOpen: false
82+
};
83+
84+
render() {
85+
const toggle = () => this.setState({ isOpen: !this.state.isOpen });
86+
const links = [
87+
{
88+
href: "https://condescending-wing-149611.netlify.com/",
89+
title: "Contribute",
90+
level: 3
91+
}
92+
];
93+
94+
return (
95+
<ThemeProvider theme={theme}>
96+
<AppShell
97+
position="absolute"
98+
onLogoClick={toggle}
99+
toggleSidebar={toggle}
100+
isSidebarOpen={this.state.isOpen}
101+
links={links}
102+
>
103+
<Head>
104+
<meta
105+
name="viewport"
106+
content="width=device-width, initial-scale=1"
107+
/>
108+
</Head>
109+
<Content />
110+
</AppShell>
111+
</ThemeProvider>
112+
);
113+
}
114+
}
115+
export default App;

‎packages/app/themes/default.js‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
/**
2+
* @name Offcourse Theme
3+
* @description default styles for the Offcourse project
4+
*/
5+
6+
const baseColors = {
7+
black: "#000000",
8+
white: "#FFFFFF",
9+
darkGray: "#3d3d3d",
10+
mediumGray: "#c0c4c1",
11+
lightGray: "#f4f6f4",
12+
yellow: "#E5CF39",
13+
blue: "#75C7B3",
14+
green: "#A5CC45",
15+
red: "#E34D2F"
16+
};
17+
18+
const grayScale = [
19+
baseColors.white,
20+
baseColors.lightGray,
21+
baseColors.mediumGray,
22+
baseColors.darkGray,
23+
baseColors.black
24+
];
25+
26+
const namedGrayScale = grayScale.map((value, index) => {
27+
let name;
28+
if (index === 0) {
29+
name = "white";
30+
} else if (index === grayScale.length - 1) {
31+
name = "black";
32+
} else {
33+
name = `gray[${index}]`;
34+
}
35+
return { name, value };
36+
});
37+
38+
const colors = {
39+
grayScale,
40+
primary: baseColors.blue,
41+
disabled: grayScale[2],
42+
positive: baseColors.green,
43+
warning: baseColors.yellow,
44+
info: baseColors.blue,
45+
negative: baseColors.red,
46+
white: baseColors.white,
47+
black: baseColors.black
48+
};
49+
50+
const fonts = {
51+
base: "Nitti Grotesk",
52+
bold: "Nitti Grotesk Bold",
53+
accent: "Nitti Bold"
54+
};
55+
56+
const breakpoints = ["30rem", "48rem", "64rem"];
57+
58+
const baseUnit = "16px";
59+
60+
const fontSizes = ["0.75rem", "1rem", "1.375rem", "1.75rem"];
61+
62+
const lineHeights = ["1rem", "1.25rem", "1.375rem", "1.75rem", "1.875rem"];
63+
64+
const space = [
65+
0,
66+
"0.0625rem",
67+
"0.125rem",
68+
"0.25rem",
69+
"0.5rem",
70+
"0.75rem",
71+
"1rem",
72+
"1.5rem",
73+
"2rem"
74+
];
75+
76+
const borders = [0, "0.0625rem solid", "0.125rem solid"];
77+
78+
const units = {
79+
sixteenth: "0.0625rem",
80+
eight: "0.125rem",
81+
quarter: "0.25rem",
82+
half: "0.5rem",
83+
threeQuarter: "0.75rem",
84+
base: baseUnit,
85+
baseFont: baseUnit,
86+
baseLine: "1.25rem",
87+
logoHeight: "1.875rem",
88+
subTitleFont: "1.375rem",
89+
titleFont: "1.75rem",
90+
titleHeight: "1.875rem"
91+
};
92+
93+
const globals = `
94+
body {
95+
margin: 0;
96+
padding: 0;
97+
top: 0;
98+
left: 0;
99+
right: 0;
100+
background: ${grayScale[1]};
101+
overflow-x: hidden;
102+
}
103+
104+
@font-face {
105+
font-family: 'Nitti Grotesk';
106+
src: url('https://app.offcourse.io/fonts/NGN.woff') format('woff');
107+
}
108+
109+
@font-face {
110+
font-family: 'Nitti Grotesk Bold';
111+
src: url('https://app.offcourse.io/fonts/NGB.woff') format('woff');
112+
}
113+
114+
@font-face {
115+
font-family: 'Nitti Bold';
116+
src: url('https://app.offcourse.io/fonts/NB.woff') format('woff');
117+
}
118+
119+
* {
120+
-webkit-font-smoothing: antialiased;
121+
-moz-osx-font-smoothing: grayscale;
122+
}
123+
124+
body {
125+
font-family: Nitti Grotesk;
126+
font-size: 16px;
127+
line-height: 20px;
128+
}
129+
`;
130+
131+
const theme = {
132+
mode: "default",
133+
breakpoints,
134+
fontSizes,
135+
lineHeights,
136+
space,
137+
colors,
138+
borders,
139+
units,
140+
fonts,
141+
grayScale,
142+
globals,
143+
namedGrayScale
144+
};
145+
146+
export default theme;

‎packages/app/themes/fonts/NB.eot‎

85.9 KB
Binary file not shown.

‎packages/app/themes/fonts/NB.woff‎

41.5 KB
Binary file not shown.

‎packages/app/themes/fonts/NGB.woff‎

42.5 KB
Binary file not shown.

0 commit comments

Comments
 (0)