react/

1// Flat Colours
2$c-blue: #3498DB;
3$c-green: #2ECC71;
4$c-purple: #9B59B6;
5$c-yellow: #F1C40F;
6$c-orange: #F39C12;
7$c-red: #E74C3C;
8
9// Flat Colours
10$c-light-grey: #ECF0F1;
11$c-grey: #BDC3C7;
12
13// Basics
14$c-black: #000;
15$c-white: #FFF;
16
17// Setting the states
18$c-primary: <%= cPrimary %>;
19$c-secondary: <%= cSecondary %>;
20
21$c-link: <%= cLink %>;
22$c-info: <%= cInfo %>;
23$c-success: <%= cSuccess %>;
24$c-error: <%= cError %>;
25$c-warning: <%= cWarning %>;
26$c-light: <%= cLight %>;
27$c-dark: <%= cDark %>;
28
29.bg-primary {
30    background-color: $c-primary;
31    &.-hover {
32		@include backgroundColor($c-primary);
33	}
34}
35
36.c-primary {
37    color: $c-primary;
38	&.-hover {
39		@include color($c-primary);
40	}
41}
42
43.bg-secondary {
44    background-color: $c-secondary;
45    &.-hover {
46		@include backgroundColor($c-secondary);
47	}
48}
49
50.c-secondary {
51    color: $c-secondary;
52	&.-hover {
53		@include color($c-secondary);
54	}
55}
56
57// Black and whites
58
59.bg-black {
60	background-color: $c-black;
61}
62
63.c-black {
64	color: $c-black;
65}
66
67.bg-white {
68	background-color: $c-white;
69}
70
71.c-white {
72	color: $c-white;
73}
74
75// Other
76
77.bg-link {
78    background-color: $c-link;
79}
80
81.c-link {
82    color: $c-link;
83}
84
85.bg-info {
86    background-color: $c-info;
87}
88
89.c-info {
90    color: $c-info;
91}
92
93.bg-success {
94    background-color: $c-success;
95}
96
97.c-success {
98    color: $c-success;
99}
100
101.bg-error {
102    background-color: $c-error;
103}
104
105.c-error {
106    color: $c-error;
107}
108
109.bg-warning {
110    background-color: $c-warning;
111}
112
113.c-warning {
114    color: $c-warning;
115}
116
117.bg-light {
118    background-color: $c-light;
119}
120
121.c-light {
122    color: $c-light;
123}
124
125.bg-dark {
126    background-color: $c-dark;
127}
128
129.c-dark {
130    color: $c-dark;
131}
132
133// Base colours -- may remove
134
135.bg-blue {
136	background-color: $c-blue;
137	&.-hover {
138		@include backgroundColor($c-blue);
139	}
140}
141
142.c-blue {
143	color: $c-blue;
144	&.-hover {
145		@include color($c-blue);
146	}
147}
148
149.bg-green {
150	background-color: $c-green;
151	&.-hover {
152		@include backgroundColor($c-green);
153	}
154}
155
156.c-green {
157	color: $c-green;
158	&.-hover {
159		@include color($c-green);
160	}
161}
162
163.bg-purple {
164	background-color: $c-purple;
165	&.-hover {
166		@include backgroundColor($c-purple);
167	}
168}
169
170.c-purple {
171	color: $c-purple;
172	&.-hover {
173		@include color($c-purple);
174	}
175
176}
177
178.bg-yellow {
179	background-color: $c-yellow;
180	&.-hover {
181		@include backgroundColor($c-yellow);
182	}
183}
184
185.c-yellow {
186	color: $c-yellow;
187	&.-hover {
188		@include color($c-yellow);
189	}
190}
191
192.bg-orange {
193	background-color: $c-orange;
194	&.-hover {
195		@include backgroundColor($c-orange);
196	}
197}
198
199.c-orange {
200	color: $c-orange;
201	&.-hover {
202		@include color($c-orange);
203	}
204}
205
206.bg-red {
207	background-color: $c-red;
208	&.-hover {
209		@include backgroundColor($c-red);
210	}
211}
212
213.c-red {
214	color: $c-red;
215	&.-hover {
216		@include color($c-red);
217	}
218}
219
220.bg-light-grey {
221	background-color: $c-light-grey;
222	&.-hover {
223		@include backgroundColor($c-light-grey);
224	}
225}
226
227.c-light-grey {
228	color: $c-light-grey;
229	&.-hover {
230		@include color($c-light-grey);
231	}
232}
233
234.bg-grey {
235	background-color: $c-grey;
236	&.-hover {
237		@include backgroundColor($c-grey);
238	}
239}
240
241.c-grey {
242	color: $c-grey;
243	&.-hover {
244		@include color($c-grey);
245	}
246}

1// Flat Colours
2$c-blue: #3498DB;
3$c-green: #2ECC71;
4$c-purple: #9B59B6;
5$c-yellow: #F1C40F;
6$c-orange: #F39C12;
7$c-red: #E74C3C;
8
9// Flat Colours
10$c-light-grey: #ECF0F1;
11$c-grey: #BDC3C7;
12
13// Basics
14$c-black: #000;
15$c-white: #FFF;
16
17// Setting the states
18$c-primary: <%= cPrimary %>;
19$c-secondary: <%= cSecondary %>;
20
21$c-link: <%= cLink %>;
22$c-info: <%= cInfo %>;
23$c-success: <%= cSuccess %>;
24$c-error: <%= cError %>;
25$c-warning: <%= cWarning %>;
26$c-light: <%= cLight %>;
27$c-dark: <%= cDark %>;
28
29.bg-primary {
30    background-color: $c-primary;
31    &.-hover {
32		@include backgroundColor($c-primary);
33	}
34}
35
36.c-primary {
37    color: $c-primary;
38	&.-hover {
39		@include color($c-primary);
40	}
41}
42
43.bg-secondary {
44    background-color: $c-secondary;
45    &.-hover {
46		@include backgroundColor($c-secondary);
47	}
48}
49
50.c-secondary {
51    color: $c-secondary;
52	&.-hover {
53		@include color($c-secondary);
54	}
55}
56
57// Black and whites
58
59.bg-black {
60	background-color: $c-black;
61}
62
63.c-black {
64	color: $c-black;
65}
66
67.bg-white {
68	background-color: $c-white;
69}
70
71.c-white {
72	color: $c-white;
73}
74
75// Other
76
77.bg-link {
78    background-color: $c-link;
79}
80
81.c-link {
82    color: $c-link;
83}
84
85.bg-info {
86    background-color: $c-info;
87}
88
89.c-info {
90    color: $c-info;
91}
92
93.bg-success {
94    background-color: $c-success;
95}
96
97.c-success {
98    color: $c-success;
99}
100
101.bg-error {
102    background-color: $c-error;
103}
104
105.c-error {
106    color: $c-error;
107}
108
109.bg-warning {
110    background-color: $c-warning;
111}
112
113.c-warning {
114    color: $c-warning;
115}
116
117.bg-light {
118    background-color: $c-light;
119}
120
121.c-light {
122    color: $c-light;
123}
124
125.bg-dark {
126    background-color: $c-dark;
127}
128
129.c-dark {
130    color: $c-dark;
131}
132
133// Base colours -- may remove
134
135.bg-blue {
136	background-color: $c-blue;
137	&.-hover {
138		@include backgroundColor($c-blue);
139	}
140}
141
142.c-blue {
143	color: $c-blue;
144	&.-hover {
145		@include color($c-blue);
146	}
147}
148
149.bg-green {
150	background-color: $c-green;
151	&.-hover {
152		@include backgroundColor($c-green);
153	}
154}
155
156.c-green {
157	color: $c-green;
158	&.-hover {
159		@include color($c-green);
160	}
161}
162
163.bg-purple {
164	background-color: $c-purple;
165	&.-hover {
166		@include backgroundColor($c-purple);
167	}
168}
169
170.c-purple {
171	color: $c-purple;
172	&.-hover {
173		@include color($c-purple);
174	}
175
176}
177
178.bg-yellow {
179	background-color: $c-yellow;
180	&.-hover {
181		@include backgroundColor($c-yellow);
182	}
183}
184
185.c-yellow {
186	color: $c-yellow;
187	&.-hover {
188		@include color($c-yellow);
189	}
190}
191
192.bg-orange {
193	background-color: $c-orange;
194	&.-hover {
195		@include backgroundColor($c-orange);
196	}
197}
198
199.c-orange {
200	color: $c-orange;
201	&.-hover {
202		@include color($c-orange);
203	}
204}
205
206.bg-red {
207	background-color: $c-red;
208	&.-hover {
209		@include backgroundColor($c-red);
210	}
211}
212
213.c-red {
214	color: $c-red;
215	&.-hover {
216		@include color($c-red);
217	}
218}
219
220.bg-light-grey {
221	background-color: $c-light-grey;
222	&.-hover {
223		@include backgroundColor($c-light-grey);
224	}
225}
226
227.c-light-grey {
228	color: $c-light-grey;
229	&.-hover {
230		@include color($c-light-grey);
231	}
232}
233
234.bg-grey {
235	background-color: $c-grey;
236	&.-hover {
237		@include backgroundColor($c-grey);
238	}
239}
240
241.c-grey {
242	color: $c-grey;
243	&.-hover {
244		@include color($c-grey);
245	}
246}

1{
2    "baseUrl": ""
3}

1import {connect} from 'react-redux';
2import <%= name %> from './<%= name %>View';
3
4/* action creators */
5<%_ reducers.forEach(function(d, i){ _%>
6import <%= d %> from 'src/reducers/<%= d %>';
7<%_ }); _%>
8
9import {
10    <%_ actions.forEach(function(d, i){ _%>
11    <%= d %>,
12    <%_ }); _%>
13} from 'src/actions';
14
15function mapStateToProps(state) {
16	return {
17        <%_ reducers.forEach(function(d, i){ _%>
18            <%= d.toLowerCase() %>: state.<%= d %>,
19        <%_ }); _%>
20	};
21}
22
23// add imported action creators below to the {}
24export default connect(mapStateToProps, {
25    <%_ actions.forEach(function(d, i){ _%>
26    <%= d %>,
27    <%_ }); _%>
28})(<%= name %>);

1#!/usr/bin/env node
2
3const fs = require('fs-extra');
4const ejs = require('ejs');
5const dir = __dirname;
6const path = process.cwd();
7const camelCase = require('lodash.camelcase');
8const kebabCase = require('lodash.kebabcase');
9const capitalize = require('lodash.capitalize');
10const storageDir = process.env.KRATOS_PATH;
11const execa = require('execa');
12const appDir = path;
13const cwd = process.cwd();
14let filesErr = [];
15
16/**
17 * Check component exists in project
18 * If not - copy it in.
19 * @param {*} data
20 */
21const exists = (data) => {
22    const mapComponents = (data) => {
23        data
24            .components
25            .map((d, i) => {
26                // 1. Does imported component exist
27                const doesExist = fs.pathExistsSync(`${appDir}/src/${d}`);
28                if (!doesExist) {
29                    // 2. Is there a version in storage
30                    if (fs.pathExistsSync(`${storageDir}/react/${d}`)) {
31                        execa.shellSync(`kratos install react ${d}`, {stdio: 'inherit'});
32                    } else {
33                        // app/components/<%= name %>/<%= name %>View.js Force override to everything
34                        // that exists
35                        execa.sync('hygen', ['react', 'component-promptless', `--name=${d}`, `--message="Generated by Lift"`, `--path=src`]);
36                    }
37                }
38            });
39    };
40
41    const mapReducers = (data) => {
42        data
43            .reducers
44            .map((d, i) => {
45                const doesExist = fs.pathExistsSync(`${appDir}/src/reducers/${d}.js`);
46                if (!doesExist) {
47                    // to do
48                }
49            });
50    };
51
52    try {
53        if (typeof data.components !== 'undefined') {
54            mapComponents(data);
55        }
56        if (typeof data.reducers !== 'undefined') {
57            mapReducers(data);
58        }
59    } catch (err) {
60        console.log(err.message);
61    }
62};
63
64const build = (filename, data) => {
65    const files = [
66        {
67            name: 'view',
68            out: `index.js`
69        }, {
70            name: 'readme',
71            out: `README.md`
72        }, {
73            name: 'styles',
74            out: 'styles.scss'
75        }, {
76            name: 'story',
77            out: `${filename}.storybook.js`
78        }, {
79            name: 'mocha',
80            out: `${filename}.mocha.js`
81        }
82    ];
83
84    files.map((file, i) => {
85        ejs
86            .renderFile(`${dir}/${file.name}.ejs`, data, {}, function (err, str) {
87                // str => Rendered HTML string
88                if (err) {
89                    filesErr.push(filename);
90                    throw err;
91                }
92
93                fs.outputFileSync(`${appDir}/src/components/${filename}/${file.out}`, str);
94            });
95    });
96
97    exists(data);
98};
99
100const buildRouter = (routes) => {
101    const router = routes.map(d => ({name: d, slug: kebabCase(d)}));
102
103    const data = {
104        routes: router
105    }
106
107    ejs.renderFile(`${dir}/router.ejs`, data, {}, function (err, str) {
108        // str => Rendered HTML string
109        if (err) {
110            console.log(err);
111            throw err;
112        }
113
114        fs.outputFileSync(`${appDir}/src/router/index.js`, str);
115    });
116}
117
118const buildColors = (colors) => {
119    ejs
120        .renderFile(`${dir}/colors.ejs`, colors, {}, function (err, str) {
121            // str => Rendered HTML string
122            if (err) {
123                console.log(err);
124                throw err;
125            }
126
127            fs.outputFileSync(`${appDir}/src/styles/base/_colours.scss`, str);
128        });
129
130    console.log('\t- _colours.scss file generated');
131}
132
133const buildTypography = (fonts) => {
134    const weights = [
135        {
136            name: 'thin',
137            weight: 100
138        }, {
139            name: 'extra-light',
140            weight: 200
141        }, {
142            name: 'light',
143            weight: 300
144        }, {
145            name: 'regular',
146            weight: 400
147        }, {
148            name: 'medium',
149            weight: 500
150        }, {
151            name: 'semi-bold',
152            weight: 600
153        }, {
154            name: 'bold',
155            weight: 700
156        }, {
157            name: 'extra-bold',
158            weight: 800
159        }, {
160            name: 'black',
161            weight: 900
162        }
163    ];
164
165    let fPrimaryWeights = [];
166    let fSecondaryWeights = [];
167
168    weights.map(d => {
169        const fPrimaryWeight = kebabCase(`${fonts.fPrimary}-${d.name}`);
170        const fSecondaryWeight = kebabCase(`${fonts.fSecondary}-${d.name}`);
171
172        if (fs.existsSync(cwd + '/src/styles/fonts/' + fPrimaryWeight + '.ttf')) {
173            fPrimaryWeights.push({
174                localName: `${capitalize(camelCase(fonts.fPrimary))} ${capitalize(camelCase(d.name))}`,
175                localNameDashed: `${capitalize(camelCase(fonts.fPrimary))}-${capitalize(camelCase(d.name))}`,
176                fontFamily: fPrimaryWeight,
177                weight: d.weight,
178                mixinName: d.name
179            });
180        }
181
182        if (fs.existsSync(cwd + '/src/styles/fonts/' + fSecondaryWeight + '.ttf')) {
183            fSecondaryWeights.push({
184                localName: `${capitalize(camelCase(fonts.fSecondary))} ${capitalize(camelCase(d.name))}`,
185                localNameDashed: `${capitalize(camelCase(fonts.fSecondary))}-${capitalize(camelCase(d.name))}`,
186                fontFamily: fSecondaryWeight,
187                weight: d.weight,
188                mixinName: d.name
189            });
190        }
191    });
192
193    ejs.renderFile(`${dir}/typography.ejs`, {
194        fPrimary: `${kebabCase(fonts.fPrimary)}-regular`,
195        fSecondary: `${kebabCase(fonts.fSecondary)}-regular`,
196        fPrimaryWeights,
197        fSecondaryWeights
198    }, {}, function (err, str) {
199        // str => Rendered HTML string
200        if (err) {
201            console.log(err);
202            throw err;
203        }
204
205        fs.outputFileSync(`${appDir}/src/styles/utils/__typography.scss`, str);
206    });
207    console.log('\t- __typography.scss file generated');
208}
209
210const buildIndexHtml = (data) => {
211    ejs
212        .renderFile(`${dir}/indexHtml.ejs`, data, {}, function (err, str) {
213            // str => Rendered HTML string
214            if (err) {
215                console.log(err);
216                throw err;
217            }
218            fs.outputFileSync(`${appDir}/public/index.html`, str);
219        });
220}
221const buildConfig = (data) => {
222    ejs
223        .renderFile(`${dir}/config.ejs`, data, {}, function (err, str) {
224            // str => Rendered HTML string
225            if (err) {
226                console.log(err);
227                throw err;
228            }
229            fs.outputFileSync(`${appDir}/src/app.json`, str);
230            console.log('\t- App config file generated');
231        });
232};
233
234// somelib.js
235module.exports = function (data) {
236    console.log('Bridging React');
237    try {
238        // map the correct types across
239        let storybook = [];
240        if (data.files && data.files.length) {
241            data
242                .files
243                .map((file, i) => {
244                    console.log('\t - Scaffolding:', file.name);
245                    storybook.push(file.name);
246                    build(file.name, file);
247                });
248        }
249
250        if (data.routes && data.routes.length) {
251            buildRouter(data.routes);
252        }
253
254        if (data.colors) {
255            buildColors(data.colors);
256        }
257
258        if (data.fonts) {
259            buildTypography(data.fonts);
260        }
261
262        if (data.projectName) {
263            buildIndexHtml(data);
264        }
265        if (data.bucketName) {
266            buildConfig(data);
267        }
268    } catch (err) {
269        console.error(err);
270    }
271};

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no, user-scalable=no">
6    <meta name="HandheldFriendly" content="true" />
7    <meta name="theme-color" content="#000000">
8    <!--
9      manifest.json provides metadata used when your web app is added to the
10      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11    -->
12    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
14    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
15    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
16    <meta name="mobile-web-app-capable" content="yes">
17    <meta name="theme-color" content="#000">
18    <meta name="application-name">
19    <link rel="apple-touch-icon" sizes="57x57" href="%PUBLIC_URL%/apple-touch-icon-57x57.png">
20    <link rel="apple-touch-icon" sizes="60x60" href="%PUBLIC_URL%/apple-touch-icon-60x60.png">
21    <link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/apple-touch-icon-72x72.png">
22    <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/apple-touch-icon-76x76.png">
23    <link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/apple-touch-icon-114x114.png">
24    <link rel="apple-touch-icon" sizes="120x120" href="%PUBLIC_URL%/apple-touch-icon-120x120.png">
25    <link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/apple-touch-icon-144x144.png">
26    <link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/apple-touch-icon-152x152.png">
27    <link rel="apple-touch-icon" sizes="167x167" href="%PUBLIC_URL%/apple-touch-icon-167x167.png">
28    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon-180x180.png">
29    <link rel="apple-touch-icon" sizes="1024x1024" href="%PUBLIC_URL%/apple-touch-icon-1024x1024.png">
30    <meta name="apple-mobile-web-app-capable" content="yes">
31    <meta name="apple-mobile-web-app-status-bar-style" content="#000">
32    <meta name="apple-mobile-web-app-title">
33    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="%PUBLIC_URL%/apple-touch-startup-image-320x460.png">
34    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="%PUBLIC_URL%/apple-touch-startup-image-640x920.png">
35    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="%PUBLIC_URL%/apple-touch-startup-image-640x1096.png">
36    <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="%PUBLIC_URL%/apple-touch-startup-image-750x1294.png">
37    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="%PUBLIC_URL%/apple-touch-startup-image-1182x2208.png">
38    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="%PUBLIC_URL%/apple-touch-startup-image-1242x2148.png">
39    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="%PUBLIC_URL%/apple-touch-startup-image-748x1024.png">
40    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="%PUBLIC_URL%/apple-touch-startup-image-768x1004.png">
41    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="%PUBLIC_URL%/apple-touch-startup-image-1496x2048.png">
42    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="%PUBLIC_URL%/apple-touch-startup-image-1536x2008.png">
43    <link rel="icon" type="image/png" sizes="228x228" href="%PUBLIC_URL%/coast-228x228.png">
44    <meta name="msapplication-TileColor" content="#000">
45    <meta name="msapplication-TileImage" content="/mstile-144x144.png">
46    <meta name="msapplication-config" content="/browserconfig.xml">
47    <link rel="yandex-tableau-widget" href="%PUBLIC_URL%/yandex-browser-manifest.json">
48    <!--
49      Notice the use of %PUBLIC_URL% in the tags above.
50      It will be replaced with the URL of the `public` folder during the build.
51      Only files inside the `public` folder can be referenced from the HTML.
52       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
53      work correctly both with client-side routing and a non-root public URL.
54      Learn how to configure a non-root public URL by running `npm run build`.
55    -->
56    <title><%= projectName %></title>
57    <meta property="og:title" content="<%= projectName %>"/>
58
59    <meta name="description" content="<%= projectDescription %>">
60    <meta property="og:description" content="<%= projectDescription %>" />
61    <meta name="keywords" content="<%= projectKeywords %>" />
62
63    <meta property="og:url" content="<%= projectUrl %>" />
64
65    <meta property="og:image" content="<%= projectOpengraph %>" />
66
67    <meta property="og:image:width" content="1200" />
68    <meta property="og:image:height" content="630" />
69
70    <meta property="og:site_name" content="<%= projectName %>"/>
71    <meta property="og:type" content="website" />
72
73    <meta name="twitter:card" content="summary_large_image" />
74    <meta name="twitter:image" content="<%= projectOpengraph %>" />
75  </head>
76  <body>
77    <noscript>
78      You need to enable JavaScript to run this app.
79    </noscript>
80    <div id="root"></div>
81    <!--
82      This HTML file is a template.
83      If you open it directly in the browser, you will see an empty page.
84       You can add webfonts, meta tags, or analytics to this file.
85      The build step will place the bundled scripts into the <body> tag.
86       To begin the development, run `npm start` or `yarn start`.
87      To create a production bundle, use `npm run build` or `yarn build`.
88    -->
89  </body>
90</html>

1yarn add fs-extra execa ejs lodash.kebabcase lodash.camelcase --dev
2yarn add react-helmet lodash.capitalize

1/**
2 * <%= name %> tests 
3 * @author Dennis O'Keeffe
4 */
5import { expect } from 'chai';
6import chalk from 'chalk';
7import <%= name %> from './index.js';
8import copy from './copy.json';
9
10const wrapper = Enzyme.shallow(<<%= name %> copy={copy}/>);
11
12describe(chalk.yellow('<%= name %> functionality'), () => {
13    <%_ if (typeof tests !== 'undefined') tests.forEach(function(d, i){ _%>
14	describe(chalk.magenta('<%= d.description %>'), () => {
15		it('needs unit tests implemented');
16	});
17    <%_ }); _%>
18	<%_ if (typeof layout !== 'undefined') { _%><%- include('./mochaTree.ejs', {layout: layout}) %><%_ } _%>
19});

1<%_ layout.forEach(function(d, i){ _%>
2describe(chalk.magenta('<%= d.name %><%_ if (d.className) { _%>.<%= d.className.join(".") %><%_ } %> Enzyme tests'), () => {
3    <%_ if (d.className) { _%>
4	it('<%= name %> child element <%= d.name %> to have className <%= d.className.join(".") %>', () => {
5        expect(wrapper.find('<%= d.name %>.<%= d.className.join(".") %>').exists()).to.equal(true);
6    });
7    <%_ } else { _%> 
8    it('<%= name %> child element <%= d.name %> to exist', () => {
9        expect(wrapper.find('<%= d.name %>').exists()).to.equal(true);
10    });
11    <%_ } _%> 
12});
13<% if (d.layout) { %><%- include('./mochaTree.ejs', {layout: d.layout}) %><% } %>
14<%_ }); _%>

1# <%= name %> 
2
3## Storybook
4
5To add this component to storybook, go to stories/index.js and add the following:
6
7```javascript
8import <%= name %> from '../src/components/<%= name %>/<%= name %>.storybook.js';
9<%= name %>();
10```

1import React from 'react';
2import {Router, Route, browserHistory} from 'react-router';
3import Loadable from 'react-loadable';
4import {Circle} from 'better-react-spinkit';
5import Config from 'src/app.json';
6
7/* user imports */
8<%_ if (typeof routes !== 'undefined') routes.forEach(function(d, i){ _%>
9<%_ if (i > 0) { _%>
10import <%= d.name %> from 'components/Page<%= d.name %>';
11<%_ } _%>
12<%_ }); _%>
13
14const PageHome = Loadable({
15    loader: () => import ('components/Page<%= routes[0].name %>'),
16    loading: () => (<div
17            style={{
18            height: '100vh',
19            width: '100vw',
20            display: 'flex',
21            alignItems: 'center',
22            justifyContent: 'center'
23        }}><Circle className="loading-spinner" size={40} color={'#000'}/></div>),
24    delay: 5000
25});
26
27export const router = () => (
28    <Router history={browserHistory}>
29        <%_ if (typeof routes !== 'undefined') routes.forEach(function(d, i){ _%>
30        <%_ if (i > 0) { _%>
31        <Route path={Config.baseUrl + '/<%= d.slug %>'} component={<%= d.name %>}/>
32        <%_ } _%>
33        <%_ }); _%>
34        <Route path='*' exact={true} component={PageHome}/>
35    </Router>
36);

1import React from 'react';
2
3// Basic addons
4import { storiesOf } from '@storybook/react';
5import { action } from '@storybook/addon-actions';
6import { linkTo } from '@storybook/addon-links';
7
8// README addons
9import { withReadme, withDocs } from 'storybook-readme';
10import <%= name %>Readme from './README.md';
11import <%= name %>Docs from './INDEX_DOCS.md';
12
13// Knob addons
14import {
15    withKnobs,
16    text,
17    boolean,
18    number,
19    select,
20    object
21} from '@storybook/addon-knobs/react';
22
23// Backgrounds
24import backgrounds from '@storybook/addon-backgrounds';
25import <%= name %> from './index.js';
26import copy from './copy.json';
27
28const story = () =>
29    storiesOf('Components/<%= name %>')
30        .addDecorator(withReadme(<%= name %>Readme))
31        .addDecorator(withKnobs)
32        .addDecorator(
33            backgrounds([
34                { name: 'white', value: '#ffffff', default: true },
35                { name: 'twitter', value: '#00aced' },
36                { name: 'facebook', value: '#3b5998' }
37            ])
38        )
39        .add('Default', () => {
40            return (
41                    <<%= name %> 
42                        <%_ if (typeof proptypes !== 'undefined') proptypes.forEach(function(d, i){ _%>
43                            <%= Object.keys(d)[0] %>={
44                                <%_ if (d[Object.keys(d)[0]] === 'string') { _%>text('<%= Object.keys(d)[0] %>', '<%= Object.keys(d)[0] %>')
45                                <%_ } else if (d[Object.keys(d)[0]] === 'number') { _%>number('<%= Object.keys(d)[0] %>', 0)
46                                <%_  } else if (d[Object.keys(d)[0]] === 'boolean') { _%>text('<%= Object.keys(d)[0] %>', false)
47                                <%_  } else if (d[Object.keys(d)[0]] === 'object') { _%>object('<%= Object.keys(d)[0] %>', <%= Object.keys(d)[0] %>, '<%= Object.keys(d)[0] %>')
48                                <%_  } else { _%>'Prop type unsupported on generator'<%_ } _%>
49                            }
50                        <%_ }); _%>
51                    />
52            );
53        })
54        .add('Docs', withDocs(<%= name %>Docs, () => {
55            return (
56                    <<%= name %> 
57                        <%_ if (typeof proptypes !== 'undefined') proptypes.forEach(function(d, i){ _%>
58                            <%= Object.keys(d)[0] %>={
59                                <%_ if (d[Object.keys(d)[0]] === 'string') { _%>text('<%= Object.keys(d)[0] %>', '<%= Object.keys(d)[0] %>')
60                                <%_ } else if (d[Object.keys(d)[0]] === 'number') { _%>number('<%= Object.keys(d)[0] %>', 0)
61                                <%_  } else if (d[Object.keys(d)[0]] === 'boolean') { _%>text('<%= Object.keys(d)[0] %>', false)
62                                <%_  } else if (d[Object.keys(d)[0]] === 'object') { _%>object('<%= Object.keys(d)[0] %>', <%= Object.keys(d)[0] %>, '<%= Object.keys(d)[0] %>')
63                                <%_  } else { _%>'Prop type unsupported on generator'<%_ } _%>
64                            }
65                        <%_ }); _%>
66                    />
67            );
68        }));
69
70export default story;

1.<%= styleClass %> {
2    min-height: 100vh;
3
4    display: flex;
5    flex-direction: column;
6    flex-grow: 1;
7
8    <%_ if (typeof childStyleClasses !== 'undefined') childStyleClasses.forEach(function(d, i){ _%>
9    .<%= d %> {
10        <%_ if (d.includes('button') || d.includes('link')) { _%>
11        transition: all 180ms ease-out;
12
13        &:hover,
14        &:active {
15
16        }
17        <%_ } _%>
18    }
19    <%_ }); _%>
20}

1<%_ layout.forEach(function(d, i){ _%>
2<% if (d.layout) { %>
3<<%= d.name %> <% if (d.className) { %>className='<%= d.className.join(" ") %>'<% } %>
4    <% if (typeof d.attributes !== 'undefined') d.attributes.forEach(function(attr){ %>
5        <%= attr.key %>="<%= attr.value %>"
6    <%_ }); _%>
7><%- include('./tree.ejs', {layout: d.layout}) %></<%= d.name %>>
8<% } else if ( d.hasOwnProperty('value') ) { %>
9<<%= d.name %> <% if (d.className) { %>className='<%= d.className.join(" ") %>'<% } %>><%= d.value %></<%= d.name %>
10    <% if (typeof d.attributes !== 'undefined') d.attributes.forEach(function(attr){ %>
11        <%= attr.key %>="<%= attr.value %>"
12    <%_ }); _%>
13>
14<% } else { %><<%= d.name %> <% if (d.className) { %>className='<%= d.className.join(" ") %>'<% } %> <% if (d.passProps) { %>{...this.props}<% } %> <% if (d.id) { %>copy={this.props.copy["<%= d.id %>"]}<% } %>
15    <% if (typeof d.attributes !== 'undefined') d.attributes.forEach(function(attr){ %>
16        <%= attr.key %>="<%= attr.value %>"
17    <%_ }); _%>
18 /><% } %><%_ }); _%>

1// Typography
2
3// EXAMPLE FONT MIXIN
4// @mixin f-futura-pt-reg {
5// 	font : {
6// 		family: 'futura-pt', sans-serif;
7// 		weight: 900;
8// 		style: normal;
9// 	}
10// }
11
12// Setting default font size for rem
13
14/* open sans - light */
15@font-face {
16    font-family: 'open-sans-light';
17    font-style: normal;
18    font-weight: 300;
19    src: local('OpenSans Light'), local('OpenSans-Light'),
20        url('./fonts/open-sans-light.ttf') format('truetype'); /* Safari, Android, iOS */
21}
22
23/* open sans - regular */
24@font-face {
25    font-family: 'open-sans-regular';
26    font-style: normal;
27    font-weight: 400;
28    src: local('OpenSans Regular'), local('OpenSans-Regular'),
29        url('./fonts/open-sans-regular.ttf') format('truetype'); /* Safari, Android, iOS */
30}
31
32/* open sans - bold */
33@font-face {
34    font-family: 'open-sans-bold';
35    font-style: normal;
36    font-weight: 700;
37    src: local('OpenSans Bold'), local('OpenSans-Bold'),
38        url('./fonts/open-sans-bold.ttf') format('truetype'); /* Safari, Android, iOS */
39}
40
41/* open sans - semi-bold */
42@font-face {
43    font-family: 'open-sans-semi-bold';
44    font-style: normal;
45    font-weight: 600;
46    src: local('OpenSans semi-bold'), local('OpenSans-semi-bold'),
47        url('./fonts/open-sans-semi-bold.ttf') format('truetype'); /* Safari, Android, iOS */
48}
49
50<%_ if (typeof fPrimaryWeights !== 'undefined') fPrimaryWeights.forEach(function(d, i){ _%>
51/* open sans - semi-bold */
52@font-face {
53    font-family: '<%= d.fontFamily %>';
54    font-style: normal;
55    font-weight: <%= d.weight %>;
56    src: local('<%= d.localName %>'), local('<%= d.localNameDashed %>'),
57        url('./fonts/<%= d.fontFamily %>.ttf') format('truetype'); /* Safari, Android, iOS */
58}
59<%_ }); _%>
60
61<%_ if (typeof fSecondaryWeights !== 'undefined') fSecondaryWeights.forEach(function(d, i){ _%>
62/* open sans - semi-bold */
63@font-face {
64    font-family: '<%= d.fontFamily %>';
65    font-style: normal;
66    font-weight: <%= d.weight %>;
67    src: local('<%= d.localName %>'), local('<%= d.localNameDashed %>'),
68        url('./fonts/<%= d.fontFamily %>.ttf') format('truetype'); /* Safari, Android, iOS */
69}
70<%_ }); _%>
71
72// Font mixins
73@mixin f-open-sans-light {
74    font: {
75        family: 'open-sans-light', sans-serif;
76    }
77}
78
79@mixin f-open-sans-regular {
80    font: {
81        family: 'open-sans-regular', sans-serif;
82    }
83}
84
85@mixin f-open-sans-bold {
86    font: {
87        family: 'open-sans-bold', sans-serif;
88    }
89}
90
91@mixin f-open-sans-semi-bold {
92    font: {
93        family: 'open-sans-semi-bold', sans-serif;
94    }
95}
96
97// Backup Primary fonts
98@mixin f-primary {
99    font: {
100        family: 'open-sans-regular', sans-serif;
101    }
102}
103
104@mixin f-primary-light {
105    font: {
106        family: 'open-sans-light', sans-serif;
107    }
108}
109
110@mixin f-primary-regular {
111    font: {
112        family: 'open-sans-regular', sans-serif;
113    }
114}
115
116
117@mixin f-primary-medium {
118    font: {
119        family: 'open-sans-semi-bold', sans-serif;
120    }
121}
122
123@mixin f-primary-bold {
124    font: {
125        family: 'open-sans-bold', sans-serif;
126    }
127}
128
129@mixin f-primary-semi-bold {
130    font: {
131        family: 'open-sans-semi-bold', sans-serif;
132    }
133}
134
135// Backup Secondary fonts
136@mixin f-secondary {
137    font: {
138        family: 'open-sans-regular', sans-serif;
139    }
140}
141
142@mixin f-secondary-light {
143    font: {
144        family: 'open-sans-light', sans-serif;
145    }
146}
147
148@mixin f-secondary-regular {
149    font: {
150        family: 'open-sans-regular', sans-serif;
151    }
152}
153
154
155@mixin f-secondary-medium {
156    font: {
157        family: 'open-sans-semi-bold', sans-serif;
158    }
159}
160
161@mixin f-secondary-bold {
162    font: {
163        family: 'open-sans-bold', sans-serif;
164    }
165}
166
167@mixin f-secondary-semi-bold {
168    font: {
169        family: 'open-sans-semi-bold', sans-serif;
170    }
171}
172
173// Primary fonts
174@mixin f-primary {
175    font: {
176        family: '<%= fPrimary %>', 'open-sans-regular', sans-serif;
177    }
178}
179
180<%_ if (typeof fPrimaryWeights !== 'undefined') fPrimaryWeights.forEach(function(d, i){ _%>
181@mixin f-primary-<%= d.mixinName %> {
182    font: {
183        family: '<%= d.fontFamily %>', 'open-sans-regular', sans-serif;
184    }
185}
186<%_ }); _%>
187
188
189// Secondary fonts
190@mixin f-secondary {
191    font: {
192        family: '<%= fSecondary %>', 'open-sans-regular', sans-serif;
193    }
194}
195
196<%_ if (typeof fSecondaryWeights !== 'undefined') fSecondaryWeights.forEach(function(d, i){ _%>
197@mixin f-secondary-<%= d.mixinName %> {
198    font: {
199        family: '<%= d.fontFamily %>', 'open-sans-regular', sans-serif;
200    }
201}
202<%_ }); _%>
203
204// General typography
205html {
206    font-size: 62.5%;
207
208    -webkit-font-smoothing: antialiased;
209    -moz-osx-font-smoothing: grayscale;
210}
211
212body {
213    -webkit-font-smoothing: antialiased;
214    -moz-osx-font-smoothing: grayscale;
215}
216
217a {
218    color: inherit;
219    text-decoration: none;
220}
221
222// Set default typography other html elements
223label,
224button,
225a,
226td {
227    @include f-primary-regular;
228}
229
230h1,
231h2,
232h3,
233h4,
234h5,
235h6,
236p {
237    margin: 0;
238
239    font-weight: normal;
240}
241
242h1 {
243    // margin-bottom: 10px;
244
245    @include f-primary-semi-bold;
246    font-size: 3rem;
247    // line-height: 21.2rem;
248}
249
250h2 {
251    // margin-bottom: 10px;
252
253    @include f-primary-semi-bold;
254    font-size: 2rem;
255    line-height: 40px;
256}
257
258h3 {
259    // margin-bottom: 10px;
260
261    @include f-primary-semi-bold;
262    font-size: 1.7rem;
263    line-height: 20px;
264}
265
266p,
267li {
268    // margin-bottom: 10px;
269
270    @include f-primary-regular;
271    font-size: 1.5rem;
272    line-height: 1.4;
273}
274
275code {
276    font-family: 'Consolas';
277    font-size: 1.3rem;
278    white-space: pre-wrap !important;
279}
280
281// Util classes
282@mixin display-four {
283    font-size: 11.2rem;
284    line-height: 13.4rem;
285    @include f-primary-bold;
286}
287
288@mixin display-three {
289    font-size: 5.6rem;
290    line-height: 6.7rem;
291    @include f-primary-bold;
292}
293
294@mixin display-two {
295    font-size: 4.5rem;
296    line-height: 5.4rem;
297    @include f-primary-bold;
298}
299
300@mixin display-one {
301    font-size: 3.4rem;
302    line-height: 4.1rem;
303    @include f-primary-bold;
304}
305
306@mixin headline {
307    font-size: 2.4rem;
308    line-height: 2.8rem;
309    @include f-primary-bold;
310}
311
312@mixin title {
313    font-size: 2rem;
314    line-height: 2.4rem;
315    @include f-primary-bold;
316}
317
318@mixin subheading {
319    font-size: 1.6rem;
320    line-height: 1.9rem;
321    font-weight: 400;
322    @include f-primary-regular;
323}
324
325@mixin body-two {
326    font-size: 1.4rem;
327    line-height: 1.7rem;
328    @include f-primary-regular;
329}
330
331@mixin body-one {
332    font-size: 1.4rem;
333    line-height: 1.7rem;
334    font-weight: 400;
335    @include f-primary-regular;
336}
337
338@mixin caption {
339    font-size: 1.2rem;
340    line-height: 1.4rem;
341    font-weight: 400;
342    @include f-primary-regular;
343}
344
345@mixin cta {
346    font-size: 1.4rem;
347    @include f-primary-semi-bold;
348    text-transform: uppercase;
349}
350
351@mixin caption {
352    font-size: 1.2rem;
353    line-height: 1.4rem;
354    font-weight: 400;
355}
356
357@mixin cta {
358    font-size: 1.4rem;
359    font-weight: 500;
360    text-transform: uppercase;
361}
362
363.f-primary {
364    &.display-four {
365        @include display-four;
366    }
367
368    &.display-three {
369        @include display-three;
370    }
371
372    &.display-two {
373        @include display-two;
374    }
375
376    &.display-one {
377        @include display-one;
378    }
379
380    &.headline {
381        @include headline;
382    }
383
384    &.title {
385        @include title;
386    }
387
388    &.subheading {
389        @include subheading;
390    }
391
392    &.body-two {
393        @include body-two;
394    }
395
396    &.body-one {
397        @include body-one;
398    }
399
400    &.caption {
401        @include caption;
402    }
403
404    &.cta {
405        @include cta;
406    }
407
408    &.center {
409        text-align: center;
410    }
411    
412    &.left {
413        text-align: left;
414    }
415    
416    &.right {
417        text-align: right;
418    }
419
420    &.light {
421        @include f-primary-light;
422    }
423
424    &.medium {
425        @include f-primary-medium;
426    }
427
428    &.semi-bold {
429        @include f-primary-semi-bold;
430    }
431
432    &.bold {
433        @include f-primary-bold;
434    }
435}
436
437.f-secondary {
438    &.display-four {
439        @include display-four;
440    }
441
442    &.display-three {
443        @include display-three;
444    }
445
446    &.display-two {
447        @include display-two;
448    }
449
450    &.display-one {
451        @include display-one;
452    }
453
454    &.headline {
455        @include headline;
456    }
457
458    &.title {
459        @include title;
460    }
461
462    &.subheading {
463        @include subheading;
464    }
465
466    &.body-two {
467        @include body-two;
468    }
469
470    &.body-one {
471        @include body-one;
472    }
473
474    &.caption {
475        @include caption;
476    }
477
478    &.cta {
479        @include cta;
480    }
481
482    &.center {
483        text-align: center;
484    }
485    
486    &.left {
487        text-align: left;
488    }
489    
490    &.right {
491        text-align: right;
492    }
493
494    &.light {
495        @include f-secondary-light;
496    }
497
498    &.medium {
499        @include f-secondary-medium;
500    }
501
502    &.semi-bold {
503        @include f-secondary-semi-bold;
504    }
505
506    &.bold {
507        @include f-secondary-bold;
508    }
509}
510
511.link {
512    @include caption;
513    @include f-secondary;
514
515    text-decoration: underline;
516
517    &.opaque {
518        &:hover,
519        &:active {
520            opacity: 0.6;
521        }
522    }
523}

1import React, { Component } from 'react';
2import {Helmet} from 'react-helmet';
3
4/* user imports */
5<%_ if (typeof components !== 'undefined') components.forEach(function(d, i){ _%>
6import <%= d %> from 'components/<%= d %>';
7<%_ }); _%>
8<% if (typeof redux !== 'undefined' && redux === true) { %>import DecoratorRedux from 'components/DecoratorRedux';<% } %>
9
10/**
11 * Render the <%= name %> component
12 *
13 * @class <%= name %>
14 * @extends {Component}
15 */
16class <%= name %> extends Component {
17	/**
18     * Render <%= name %> component
19     * @memberof <%= name %>
20     * @var {function} render Render <%= name %> component
21	 * @returns {Object} component
22     */
23	render() {
24		<%_ if (typeof proptypes !== 'undefined') { _%>
25		const {
26		<%_ proptypes.forEach(function(d, i){ _%>
27			<%= Object.keys(d)[0] %>,
28		<%_ }); _%>
29		} = this.props;
30		<%_ } _%>
31		
32		return (
33			<%_ if (typeof layout !== 'undefined') { _%><%- include('./tree.ejs', {layout: layout}) %><%_ } else { _%>
34			<div className="<%= styleClass %>">
35				<Helmet>
36					<title><%= name %></title>
37					<link rel="canonical" href="https://mysite.com/<%= name %>" />
38					<meta name="description" content="<%= name %>" />
39				</Helmet>
40				<p className="text-copy"><%= name %></p>
41			</div>
42			<%_ } _%>
43		);
44	}
45}
46
47<% if (typeof redux !== 'undefined' && redux === true) { %>
48export default DecoratorRedux(<%= name %>);
49<% } else { %>
50export default <%= name %>;
51<% } %>