Skip to content

Commit a1e8fab

Browse files
yeehaa123yeehaa123
committed
fix(documentation,organisms,app): remove submodules,fix docs, add app
1 parent 0aec30d commit a1e8fab

File tree

14 files changed

+343
-1
lines changed

14 files changed

+343
-1
lines changed

‎packages/app

-1
This file was deleted.

‎packages/app/.gitignore

+12
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

+3
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

+38
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

+28
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

+115
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

+146
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.

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

41.4 KB
Binary file not shown.

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

85.2 KB
Binary file not shown.

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

41.2 KB
Binary file not shown.

‎packages/app/themes/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as offcourse } from './default'

0 commit comments

Comments
 (0)