feat(boilerplate): create next-like boilerplate for quick prototypes
also, some cleanup fixes #773
This commit is contained in:
Sérgio Ramos
parent
c1327083d3
commit
6cf84c583c
5
.gitignore
vendored
5
.gitignore
vendored
@ -156,10 +156,15 @@ tap-xunit
|
||||
|
||||
_todo
|
||||
packages/*/dist
|
||||
prototypes/*/dist
|
||||
packages/*/buid
|
||||
prototypes/*/buid
|
||||
packages/*/.next
|
||||
prototypes/*/.next
|
||||
packages/ui-toolkit/styleguide/
|
||||
packages/ui-toolkit/.snapguidist/
|
||||
packages/*/package-lock.json
|
||||
prototypes/*/package-lock.json
|
||||
|
||||
_env*
|
||||
keys*
|
||||
|
||||
@ -4,7 +4,13 @@ module.exports = {
|
||||
'scope-enum': [
|
||||
2,
|
||||
'always',
|
||||
['ui-toolkit', 'my-joyent', 'my-joy-beta', 'boilerplate', 'cloudapi-gql']
|
||||
[
|
||||
'ui-toolkit',
|
||||
'my-joy-beta',
|
||||
'cloudapi-gql',
|
||||
'boilerplate',
|
||||
'create-instance'
|
||||
]
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
@ -70,7 +70,10 @@
|
||||
"stylelint-gh-status-reporter": "^1.0.7",
|
||||
"yargs": "^8.0.2"
|
||||
},
|
||||
"workspaces": ["packages/*"],
|
||||
"workspaces": [
|
||||
"packages/*",
|
||||
"prototypes/*"
|
||||
],
|
||||
"resolutions": {
|
||||
"lodash": "4.17.4",
|
||||
"lodash.keys": "4.2.0",
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
{
|
||||
"extends": "joyent-portal",
|
||||
"rules": {
|
||||
"no-console": 0,
|
||||
"new-cap": 0,
|
||||
// temp
|
||||
"no-undef": 1,
|
||||
"no-debugger": 1,
|
||||
"no-negated-condition": 0
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
FROM quay.io/yldio/alpine-node-containerpilot:latest
|
||||
|
||||
RUN apk add --update nginx
|
||||
|
||||
ENV CONTAINERPILOT /etc/containerpilot.json5
|
||||
|
||||
RUN npm install -g npm@^4
|
||||
RUN npm config set loglevel info \
|
||||
&& yarn add lerna@^2.0.0
|
||||
|
||||
RUN ./node_modules/.bin/lerna clean --yes --scope joyent-boilerplate --include-filtered-dependencies \
|
||||
&& ./node_modules/.bin/lerna bootstrap --scope joyent-boilerplate --include-filtered-dependencies
|
||||
|
||||
COPY packages/boilerplate/etc/containerpilot.json5 ${CONTAINERPILOT}
|
||||
COPY packages/boilerplate/etc/nginx.conf.tmpl /etc/nginx/nginx.conf.tmpl
|
||||
|
||||
WORKDIR /opt/app/packages/boilerplate
|
||||
|
||||
CMD ["/bin/containerpilot"]
|
||||
@ -1,21 +0,0 @@
|
||||
# joyent-boilerplate
|
||||
|
||||
[](https://quay.io/repository/yldio/joyent-boilerplate)
|
||||
[](https://opensource.org/licenses/MPL-2.0)
|
||||
[](https://github.com/RichardLitt/standard-readme)
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Usage](#usage)
|
||||
- [License](#license)
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
npm run start
|
||||
open http://0.0.0.0:3069
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MPL-2.0
|
||||
@ -1,60 +0,0 @@
|
||||
{
|
||||
"name": "joyent-boilerplate",
|
||||
"version": "1.0.0",
|
||||
"license": "MPL-2.0",
|
||||
"repository": "github:yldio/joyent-portal",
|
||||
"main": "build/",
|
||||
"scripts": {
|
||||
"dev":
|
||||
"REACT_APP_GQL_PORT=3000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
|
||||
"start": "PORT=3069 joyent-react-scripts start",
|
||||
"build": "NODE_ENV=production joyent-react-scripts build",
|
||||
"lint:css": "stylelint './src/**/*.js'",
|
||||
"lint:js": "eslint . --fix",
|
||||
"lint": "redrun -s lint:*",
|
||||
"test": "NODE_ENV=test ./test/run --env=jsdom",
|
||||
"test-ci": "echo 0 `# NODE_ENV=test ./test/run --env=jsdom --coverage`",
|
||||
"prepublish": "echo 0"
|
||||
},
|
||||
"dependencies": {
|
||||
"apollo": "^0.2.2",
|
||||
"graphql-tag": "^2.4.2",
|
||||
"jest-cli": "^21.0.1",
|
||||
"joyent-ui-toolkit": "^2.0.0",
|
||||
"normalized-styled-components": "^1.0.17",
|
||||
"prop-types": "^15.6.0",
|
||||
"react": "^16.0.0",
|
||||
"react-apollo": "^1.4.16",
|
||||
"react-dom": "^16.0.0",
|
||||
"react-redux": "^5.0.6",
|
||||
"react-router": "^4.2.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-styled-flexboxgrid": "^2.0.3",
|
||||
"redux": "^3.7.2",
|
||||
"redux-form": "^7.1.1",
|
||||
"remcalc": "^1.0.9",
|
||||
"styled-components": "^2.2.1",
|
||||
"styled-is": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||
"babel-plugin-styled-components": "^1.2.1",
|
||||
"babel-preset-joyent-portal": "^3.1.0",
|
||||
"eslint": "^4.8.0",
|
||||
"eslint-config-joyent-portal": "3.1.0",
|
||||
"jest": "^21.2.1",
|
||||
"jest-alias-preprocessor": "^1.1.1",
|
||||
"jest-cli": "^21.2.1",
|
||||
"jest-diff": "^21.2.1",
|
||||
"jest-junit": "^3.1.0",
|
||||
"jest-matcher-utils": "^21.2.1",
|
||||
"jest-snapshot": "^21.2.1",
|
||||
"jest-styled-components": "^4.7.0",
|
||||
"jest-transform-graphql": "^2.1.0",
|
||||
"joyent-react-scripts": "^2.2.1",
|
||||
"react-test-renderer": "^16.0.0",
|
||||
"redrun": "^5.9.18",
|
||||
"stylelint": "^8.2.0",
|
||||
"stylelint-config-joyent-portal": "^2.0.1"
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<title>Joyent Boilerplate</title>
|
||||
<style>
|
||||
html, body, #root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#root {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,15 +0,0 @@
|
||||
import React from 'react';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
import { theme, RootContainer } from 'joyent-ui-toolkit';
|
||||
import { ApolloProvider } from 'react-apollo';
|
||||
|
||||
import { client, store } from '@state/store';
|
||||
import Router from '@root/router';
|
||||
|
||||
export default () => (
|
||||
<RootContainer>
|
||||
<ApolloProvider client={client} store={store}>
|
||||
<ThemeProvider theme={theme}>{Router}</ThemeProvider>
|
||||
</ApolloProvider>
|
||||
</RootContainer>
|
||||
);
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
@ -1,140 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <Header /> without throwing 1`] = `
|
||||
.c2 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
color: ;
|
||||
font-size: 1.8125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
-webkit-align-self: stretch;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch;
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
padding: 0.9375rem 0;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: space-between;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: stretch;
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
background-color: ;
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
padding: 0 1.125rem;
|
||||
line-height: 1.5625rem;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
.c1 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
color: ;
|
||||
font-size: 1.8125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
-webkit-align-self: stretch;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch;
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
padding: 0.9375rem 0;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
.c0 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
color: ;
|
||||
font-size: 1.8125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<h2
|
||||
className="c0"
|
||||
>
|
||||
.c0 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<a
|
||||
href="/"
|
||||
onClick={[Function]}
|
||||
>
|
||||
.c0 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<img
|
||||
className="c0"
|
||||
src="test-file-mock"
|
||||
/>
|
||||
</a>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,345 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <NotFound /> without throwing 1`] = `
|
||||
.c6 {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0.9375rem 1.125rem;
|
||||
position: relative;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
letter-spacing: normal;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
color: ;
|
||||
background-image: none;
|
||||
background-color: ;
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
||||
.c6:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: ;
|
||||
border-color: ;
|
||||
}
|
||||
|
||||
.c6:hover {
|
||||
background-color: ;
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
||||
.c6:active,
|
||||
.c6:active:hover,
|
||||
.c6:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: ;
|
||||
border-color: ;
|
||||
}
|
||||
|
||||
.c6[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
font-size: 2rem;
|
||||
margin: 0.625rem 0;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 2.25rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-top: 1.1875rem;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
-webkit-flex-flow: column;
|
||||
-ms-flex-flow: column;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-top: 3.75rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
font-weight: normal;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
margin-bottom: 1.875rem;
|
||||
max-width: 30.625rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48em) {
|
||||
.c0 {
|
||||
width: 46rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:64em) {
|
||||
.c0 {
|
||||
width: 61rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:75em) {
|
||||
.c0 {
|
||||
width: 76rem;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
.c5 {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0.9375rem 1.125rem;
|
||||
position: relative;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
letter-spacing: normal;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
color: ;
|
||||
background-image: none;
|
||||
background-color: ;
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
||||
.c5:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: ;
|
||||
border-color: ;
|
||||
}
|
||||
|
||||
.c5:hover {
|
||||
background-color: ;
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
||||
.c5:active,
|
||||
.c5:active:hover,
|
||||
.c5:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: ;
|
||||
border-color: ;
|
||||
}
|
||||
|
||||
.c5[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
font-size: 2rem;
|
||||
margin: 0.625rem 0;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 2.25rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-top: 3.75rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
font-weight: normal;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
margin-bottom: 1.875rem;
|
||||
max-width: 30.625rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
.c1 {
|
||||
font-size: 2rem;
|
||||
margin: 0.625rem 0;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 2.25rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
font-weight: normal;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
<h1
|
||||
className="c0 c1"
|
||||
>
|
||||
I have no memory of this place
|
||||
</h1>
|
||||
.c1 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-bottom: 1.875rem;
|
||||
max-width: 30.625rem;
|
||||
}
|
||||
|
||||
<p
|
||||
className="c0 c1"
|
||||
>
|
||||
HTTP 404: We can’t find what you are looking for. Next time, always follow your nose.
|
||||
</p>
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0.9375rem 1.125rem;
|
||||
position: relative;
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
letter-spacing: normal;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
color: ;
|
||||
background-image: none;
|
||||
background-color: ;
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
||||
.c0:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: ;
|
||||
border-color: ;
|
||||
}
|
||||
|
||||
.c0:hover {
|
||||
background-color: ;
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
||||
.c0:active,
|
||||
.c0:active:hover,
|
||||
.c0:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: ;
|
||||
border-color: ;
|
||||
}
|
||||
|
||||
.c0[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
<a
|
||||
className="c0"
|
||||
href="/"
|
||||
onClick={[Function]}
|
||||
primary={true}
|
||||
>
|
||||
Back home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,24 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Img } from 'normalized-styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import Logo from '@assets/triton_logo.png';
|
||||
import { Header, HeaderBrand } from 'joyent-ui-toolkit';
|
||||
|
||||
const StyledLogo = Img.extend`
|
||||
width: ${remcalc(87)};
|
||||
height: ${remcalc(25)};
|
||||
`;
|
||||
|
||||
const NavHeader = () => (
|
||||
<Header>
|
||||
<HeaderBrand>
|
||||
<Link to="/">
|
||||
<StyledLogo src={Logo} />
|
||||
</Link>
|
||||
</HeaderBrand>
|
||||
</Header>
|
||||
);
|
||||
|
||||
export default NavHeader;
|
||||
@ -1,2 +0,0 @@
|
||||
export { default as Header } from './header';
|
||||
export { default as NotFound } from './not-found';
|
||||
@ -1,44 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import { H1, P, Button, ViewContainer } from 'joyent-ui-toolkit';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
/* trick prettier */
|
||||
margin-top: ${remcalc(60)};
|
||||
`;
|
||||
|
||||
const StyledTitle = styled(H1)`
|
||||
font-weight: normal;
|
||||
font-size: ${remcalc(32)};
|
||||
`;
|
||||
|
||||
const StyledP = styled(P)`
|
||||
margin-bottom: ${remcalc(30)};
|
||||
max-width: ${remcalc(490)};
|
||||
`;
|
||||
|
||||
const NotFound = ({
|
||||
title = 'I have no memory of this place',
|
||||
message = 'HTTP 404: We can’t find what you are looking for. Next time, always follow your nose.',
|
||||
link = 'Back home',
|
||||
to = '/'
|
||||
}) => (
|
||||
<ViewContainer>
|
||||
<StyledContainer>
|
||||
<StyledTitle>{title}</StyledTitle>
|
||||
<StyledP>{message}</StyledP>
|
||||
<Button to={to}>{link}</Button>
|
||||
</StyledContainer>
|
||||
</ViewContainer>
|
||||
);
|
||||
|
||||
NotFound.propTypes = {
|
||||
title: PropTypes.string,
|
||||
message: PropTypes.string,
|
||||
link: PropTypes.string,
|
||||
to: PropTypes.string
|
||||
};
|
||||
|
||||
export default NotFound;
|
||||
@ -1,40 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <Home /> without throwing 1`] = `
|
||||
.c0 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-top: 1.1875rem;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
-webkit-flex-flow: column;
|
||||
-ms-flex-flow: column;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48em) {
|
||||
.c0 {
|
||||
width: 46rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:64em) {
|
||||
.c0 {
|
||||
width: 61rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:75em) {
|
||||
.c0 {
|
||||
width: 76rem;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
Welcome
|
||||
</div>
|
||||
`;
|
||||
@ -1,14 +0,0 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import Home from '../';
|
||||
|
||||
it('renders <Home /> without throwing', () => {
|
||||
const tree = renderer.create(<Home />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
@ -1,6 +0,0 @@
|
||||
import React from 'react';
|
||||
import { ViewContainer } from 'joyent-ui-toolkit';
|
||||
|
||||
const Home = () => <ViewContainer>Welcome</ViewContainer>;
|
||||
|
||||
export default Home;
|
||||
@ -1,140 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <Header /> without throwing 1`] = `
|
||||
.c2 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
color: ;
|
||||
font-size: 1.8125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
-webkit-align-self: stretch;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch;
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
padding: 0.9375rem 0;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: space-between;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: stretch;
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
background-color: ;
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
padding: 0 1.125rem;
|
||||
line-height: 1.5625rem;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
.c1 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
color: ;
|
||||
font-size: 1.8125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
-webkit-align-self: stretch;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch;
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
padding: 0.9375rem 0;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
.c0 {
|
||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
color: ;
|
||||
font-size: 1.8125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<h2
|
||||
className="c0"
|
||||
>
|
||||
.c0 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<a
|
||||
href="/"
|
||||
onClick={[Function]}
|
||||
>
|
||||
.c0 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<img
|
||||
className="c0"
|
||||
src="test-file-mock"
|
||||
/>
|
||||
</a>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,2 +0,0 @@
|
||||
export { default as Header } from './header';
|
||||
export { default as withNotFound } from './not-found-hoc';
|
||||
@ -1,28 +0,0 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter, Route, Switch } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Header } from '@containers/navigation';
|
||||
import Home from '@containers/home';
|
||||
import { NotFound } from '@components/navigation';
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
`;
|
||||
|
||||
const Router = (
|
||||
<BrowserRouter>
|
||||
<Container>
|
||||
<Route path="/" component={Header} />
|
||||
<Switch>
|
||||
<Route path="/" exact component={Home} />
|
||||
<Route path="/*" component={NotFound} />
|
||||
</Switch>
|
||||
</Container>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
export default Router;
|
||||
@ -1,3 +0,0 @@
|
||||
const state = {};
|
||||
|
||||
export default state;
|
||||
@ -1,58 +0,0 @@
|
||||
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
|
||||
import { reducer as formReducer } from 'redux-form';
|
||||
import { ApolloClient, createNetworkInterface } from 'react-apollo';
|
||||
import state from './state';
|
||||
|
||||
const GLOBAL =
|
||||
typeof window === 'object'
|
||||
? window
|
||||
: {
|
||||
location: {
|
||||
hostname: '0.0.0.0'
|
||||
}
|
||||
};
|
||||
|
||||
const GQL_PORT = process.env.REACT_APP_GQL_PORT || 443;
|
||||
const GQL_HOSTNAME =
|
||||
process.env.REACT_APP_GQL_HOSTNAME || GLOBAL.location.hostname;
|
||||
const GQL_PROTOCOL = process.env.REACT_APP_GQL_PROTOCOL || 'https';
|
||||
|
||||
export const client = new ApolloClient({
|
||||
dataIdFromObject: o => {
|
||||
const id = o.id
|
||||
? o.id
|
||||
: o.slug
|
||||
? o.slug
|
||||
: o.uuid
|
||||
? o.uuid
|
||||
: o.timestamp
|
||||
? o.timestamp
|
||||
: o.name && o.instance
|
||||
? `${o.name}-${o.instance}`
|
||||
: o.name
|
||||
? o.name
|
||||
: o.time && o.value
|
||||
? `${o.time}-${o.value}`
|
||||
: 'apollo-cache-key-not-defined';
|
||||
return `${o.__typename}:${id}`;
|
||||
},
|
||||
networkInterface: createNetworkInterface({
|
||||
uri: `${GQL_PROTOCOL}://${GQL_HOSTNAME}:${GQL_PORT}/api/graphql`
|
||||
})
|
||||
});
|
||||
|
||||
export const store = createStore(
|
||||
combineReducers({
|
||||
apollo: client.reducer(),
|
||||
form: formReducer
|
||||
}),
|
||||
state, // Initial state
|
||||
compose(
|
||||
applyMiddleware(client.middleware()),
|
||||
// If you are using the devToolsExtension, you can add it here also
|
||||
// eslint-disable-next-line no-negated-condition
|
||||
typeof GLOBAL.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined'
|
||||
? GLOBAL.__REDUX_DEVTOOLS_EXTENSION__()
|
||||
: f => f
|
||||
)
|
||||
);
|
||||
@ -1,3 +0,0 @@
|
||||
export { default as Router } from './router';
|
||||
export { default as Store } from './store';
|
||||
export { default as Theme } from './theme';
|
||||
@ -1,66 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
// Do this as the first thing so that any code reading it knows the right env.
|
||||
process.env.BABEL_ENV = 'test';
|
||||
process.env.NODE_ENV = 'test';
|
||||
process.env.PUBLIC_URL = '';
|
||||
|
||||
// Makes the script crash on unhandled rejections instead of silently
|
||||
// ignoring them. In the future, promise rejections that are not handled will
|
||||
// terminate the Node.js process with a non-zero exit code.
|
||||
process.on('unhandledRejection', err => {
|
||||
throw err;
|
||||
});
|
||||
|
||||
// Ensure environment variables are read.
|
||||
require('react-scripts/config/env');
|
||||
|
||||
const jest = require('jest');
|
||||
const argv = process.argv.slice(2);
|
||||
|
||||
// This is not necessary after eject because we embed config into package.json.
|
||||
const createJestConfig = require('react-scripts/scripts/utils/createJestConfig');
|
||||
const path = require('path');
|
||||
const paths = require('react-scripts/config/paths');
|
||||
|
||||
const config = createJestConfig(
|
||||
relativePath =>
|
||||
path.resolve(
|
||||
__dirname,
|
||||
'../../../node_modules/react-scripts',
|
||||
relativePath
|
||||
),
|
||||
path.resolve(__dirname, '../../../'),
|
||||
false
|
||||
);
|
||||
|
||||
// patch
|
||||
config.testEnvironment = 'node';
|
||||
config.transform = Object.assign(
|
||||
{},
|
||||
{
|
||||
'\\.(gql|graphql)$': 'jest-transform-graphql'
|
||||
},
|
||||
config.transform
|
||||
);
|
||||
config.testMatch = [
|
||||
'<rootDir>/packages/joyent-boilerplate/src/**/**/__tests__/**/*.js',
|
||||
'<rootDir>/packages/joyent-boilerplate/src/**/**/**/?(*.)(spec|test).js'
|
||||
];
|
||||
config.moduleNameMapper = Object.assign({}, config.moduleNameMapper, {
|
||||
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
|
||||
'<rootDir>/packages/joyent-boilerplate/test/file-mock.js',
|
||||
'^@root/(.*)$': '<rootDir>/packages/joyent-boilerplate/src/$1',
|
||||
'^@mocks/(.*)$': '<rootDir>/packages/joyent-boilerplate/test/mocks$1',
|
||||
'^@components/(.*)$':
|
||||
'<rootDir>/packages/joyent-boilerplate/src/components/$1',
|
||||
'^@containers/(.*)$':
|
||||
'<rootDir>/packages/joyent-boilerplate/src/containers/$1',
|
||||
'^@graphql/(.*)$': '<rootDir>/packages/joyent-boilerplate/src/graphql/$1',
|
||||
'^@assets/(.*)$': '<rootDir>/packages/joyent-boilerplate/src/assets/$1',
|
||||
'^@state/(.*)$': '<rootDir>/packages/joyent-boilerplate/src/state/$1'
|
||||
});
|
||||
|
||||
argv.push('--config', JSON.stringify(config));
|
||||
|
||||
jest.run(argv);
|
||||
@ -1,9 +0,0 @@
|
||||
src/components/base/*.css
|
||||
node_modules
|
||||
coverage
|
||||
.nyc_output
|
||||
docs/static
|
||||
!docs/static/index.html
|
||||
docs/node_modules
|
||||
dist
|
||||
package-lock.json
|
||||
@ -2,6 +2,7 @@
|
||||
"name": "my-joy-beta",
|
||||
"version": "1.0.0",
|
||||
"license": "MPL-2.0",
|
||||
"private": true,
|
||||
"repository": "github:yldio/joyent-portal",
|
||||
"main": "build/",
|
||||
"scripts": {
|
||||
@ -45,8 +46,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||
"babel-plugin-styled-components": "^1.2.1",
|
||||
"babel-preset-joyent-portal": "^3.1.0",
|
||||
"babel-preset-joyent-portal": "^3.3.3",
|
||||
"eslint": "^4.8.0",
|
||||
"eslint-config-joyent-portal": "3.1.0",
|
||||
"jest": "^21.2.1",
|
||||
|
||||
@ -8,17 +8,6 @@
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
|
||||
<style>
|
||||
html, body, #root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#root {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>My Joyent β</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -16,12 +16,12 @@ export default ({
|
||||
onCancel = () => {}
|
||||
}) => {
|
||||
const _error = error &&
|
||||
!submitting && (
|
||||
<Message error>
|
||||
<MessageTitle>Ooops!</MessageTitle>
|
||||
<MessageDescription>{error}</MessageDescription>
|
||||
</Message>
|
||||
);
|
||||
!submitting && (
|
||||
<Message error>
|
||||
<MessageTitle>Ooops!</MessageTitle>
|
||||
<MessageDescription>{error}</MessageDescription>
|
||||
</Message>
|
||||
);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
|
||||
@ -2,19 +2,12 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import forceArray from 'force-array';
|
||||
|
||||
import {
|
||||
SectionList,
|
||||
SectionListItem,
|
||||
SectionListNavLink,
|
||||
ViewContainer
|
||||
} from 'joyent-ui-toolkit';
|
||||
import { SectionList, SectionListItem, ViewContainer } from 'joyent-ui-toolkit';
|
||||
|
||||
const getMenuItems = (links = []) =>
|
||||
links.map(({ pathname, name }) => (
|
||||
<SectionListItem key={pathname}>
|
||||
<SectionListNavLink activeClassName="active" to={pathname}>
|
||||
{name}
|
||||
</SectionListNavLink>
|
||||
<SectionListItem key={pathname} activeClassName="active" to={pathname}>
|
||||
{name}
|
||||
</SectionListItem>
|
||||
));
|
||||
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"presets": "joyent-portal",
|
||||
"plugins": [
|
||||
"styled-components",
|
||||
["inline-react-svg", {
|
||||
"ignorePattern": "libre-franklin"
|
||||
}]
|
||||
]
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
src/components/base/*.css
|
||||
node_modules
|
||||
coverage
|
||||
.nyc_output
|
||||
docs/static
|
||||
!docs/static/index.html
|
||||
docs/node_modules
|
||||
dist
|
||||
package-lock.json
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
@ -1,30 +0,0 @@
|
||||
{
|
||||
"short_name": "Joyent",
|
||||
"name": "My Joyent",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "256x256",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "384x384",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#1E313B",
|
||||
"background_color": "#FAFAFA"
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { Router } from '@mocks/';
|
||||
import { Header } from '../';
|
||||
|
||||
it('renders <Header /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<Header />
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
@ -1,21 +0,0 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
import { Router } from '@mocks/';
|
||||
|
||||
import { NotFound } from '../';
|
||||
|
||||
it('renders <NotFound /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<NotFound />
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
@ -1,40 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardFooter,
|
||||
CardMeta
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
const PackageStyled = styled(Card)`
|
||||
margin-right: ${remcalc(18)};
|
||||
margin-bottom: ${remcalc(18)};
|
||||
`;
|
||||
|
||||
const Package = ({
|
||||
pack: { price, memory, vcpus, disk, group, ssd },
|
||||
selected,
|
||||
onClick
|
||||
}) => (
|
||||
<PackageStyled transparent selected={selected} onClick={onClick}>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardTitle selected={selected}>${price} per hour</CardTitle>
|
||||
<CardSubTitle selected={selected}>{memory} GB RAM</CardSubTitle>
|
||||
<CardSubTitle selected={selected}>{vcpus} vCPUs</CardSubTitle>
|
||||
<CardSubTitle selected={selected}>
|
||||
{disk} TB disk
|
||||
</CardSubTitle>
|
||||
<CardSubTitle selected={selected}>{ssd ? 'SSD' : 'Magnetic'}</CardSubTitle>
|
||||
<CardFooter selected={selected}>{group}</CardFooter>
|
||||
</CardMeta>
|
||||
</CardView>
|
||||
</PackageStyled>
|
||||
);
|
||||
|
||||
export default Package;
|
||||
@ -1,3 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <withNotFound /> without throwing 1`] = `<withNotFound />`;
|
||||
@ -1,21 +0,0 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { Router } from '@mocks/';
|
||||
import { Header } from '../';
|
||||
|
||||
it('renders <Header /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<Header />
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
@ -1,14 +0,0 @@
|
||||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { withNotFound } from '../';
|
||||
|
||||
it('renders <withNotFound /> without throwing', () => {
|
||||
const tree = renderer.create(<withNotFound />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
@ -1,7 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Header as HeaderComponent } from '@components/navigation';
|
||||
|
||||
export const Header = () => <HeaderComponent />;
|
||||
|
||||
export default Header;
|
||||
@ -1,20 +0,0 @@
|
||||
import React from 'react';
|
||||
import { NotFound } from '@components/navigation';
|
||||
|
||||
const pathsExample = {
|
||||
title: 'I have no memory of this place',
|
||||
message:
|
||||
'HTTP 404: We can’t find what you are looking for. Next time, always follow your nose.',
|
||||
link: 'Back home',
|
||||
to: '/'
|
||||
};
|
||||
const NotFoundHOC = (paths = pathsExample) => (
|
||||
<NotFound
|
||||
title={paths.title}
|
||||
message="Sorry, but our princess is in another castle."
|
||||
to={paths.to}
|
||||
link={paths.link}
|
||||
/>
|
||||
);
|
||||
|
||||
export default NotFoundHOC;
|
||||
@ -1,11 +0,0 @@
|
||||
query Portal {
|
||||
portal {
|
||||
user {
|
||||
firstName
|
||||
}
|
||||
datacenter {
|
||||
id
|
||||
region
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
module.exports = 'test-file-mock';
|
||||
@ -1,4 +0,0 @@
|
||||
import React from 'react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
|
||||
export default ({ children }) => <MemoryRouter>{children}</MemoryRouter>;
|
||||
@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
import { client, store } from '@state/store';
|
||||
import { ApolloProvider } from 'react-apollo';
|
||||
|
||||
export default ({ children }) => (
|
||||
<ApolloProvider client={client} store={store}>
|
||||
{children}
|
||||
</ApolloProvider>
|
||||
);
|
||||
@ -1,7 +0,0 @@
|
||||
import React from 'react';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
import { theme } from 'joyent-ui-toolkit';
|
||||
|
||||
export default ({ children }) => (
|
||||
<ThemeProvider theme={theme}>{children}</ThemeProvider>
|
||||
);
|
||||
@ -1,7 +1,6 @@
|
||||
{
|
||||
"presets": ["joyent-portal"],
|
||||
"plugins": [
|
||||
"styled-components",
|
||||
["inline-react-svg", {
|
||||
"ignorePattern": "libre-franklin"
|
||||
}]
|
||||
|
||||
@ -1,102 +0,0 @@
|
||||
{
|
||||
consul: 'localhost:8500',
|
||||
jobs: [
|
||||
{
|
||||
name: 'ui-toolkit',
|
||||
port: {{.PORT}},
|
||||
exec: '../../node_modules/.bin/serve --single styleguide --port {{.PORT}}',
|
||||
health: {
|
||||
exec: '/usr/bin/curl -o /dev/null --fail -s http://localhost:{{.PORT}}',
|
||||
interval: 2,
|
||||
ttl: 5
|
||||
},
|
||||
tags: [
|
||||
'traefik.backend=ui-toolkit',
|
||||
'traefik.frontend.rule=PathPrefix:/',
|
||||
'traefik.frontend.entryPoints=http'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'consul-agent',
|
||||
exec: ['/usr/local/bin/consul', 'agent',
|
||||
'-data-dir=/data',
|
||||
'-config-dir=/config',
|
||||
'-log-level=err',
|
||||
'-rejoin',
|
||||
'-retry-join', '{{ .CONSUL | default "consul" }}',
|
||||
'-retry-max', '10',
|
||||
'-retry-interval', '10s'],
|
||||
restarts: 'unlimited'
|
||||
},
|
||||
{
|
||||
name: 'sensor_memory_usage',
|
||||
exec: '/bin/sensors memory',
|
||||
timeout: '5s',
|
||||
when: {
|
||||
interval: '5s'
|
||||
},
|
||||
restarts: 'unlimited'
|
||||
},
|
||||
{
|
||||
name: 'sensor_cpu_load',
|
||||
exec: '/bin/sensors cpu',
|
||||
timeout: '5s',
|
||||
when: {
|
||||
interval: '5s'
|
||||
},
|
||||
restarts: 'unlimited'
|
||||
},
|
||||
{
|
||||
name: 'sensor_disk_capacity',
|
||||
exec: '/bin/sensors diskcapacity',
|
||||
timeout: '5s',
|
||||
when: {
|
||||
interval: '60s'
|
||||
},
|
||||
restarts: 'unlimited'
|
||||
},
|
||||
{
|
||||
name: 'sensor_disk_usage',
|
||||
exec: '/bin/sensors diskusage',
|
||||
timeout: '5s',
|
||||
when: {
|
||||
interval: '60s'
|
||||
},
|
||||
restarts: 'unlimited'
|
||||
}
|
||||
],
|
||||
telemetry: {
|
||||
port: 9090,
|
||||
tags: ['op'],
|
||||
metrics: [
|
||||
{
|
||||
namespace: 'ui_toolkit',
|
||||
subsystem: 'memory',
|
||||
name: 'percent',
|
||||
help: 'Percentage of memory used',
|
||||
type: 'gauge'
|
||||
},
|
||||
{
|
||||
namespace: 'ui_toolkit',
|
||||
subsystem: 'cpu',
|
||||
name: 'load',
|
||||
help: 'CPU load',
|
||||
type: 'gauge'
|
||||
},
|
||||
{
|
||||
namespace: 'ui_toolkit',
|
||||
subsystem: 'disk',
|
||||
name: 'capacity',
|
||||
help: 'Disk capacity',
|
||||
type: 'gauge'
|
||||
},
|
||||
{
|
||||
namespace: 'ui_toolkit',
|
||||
subsystem: 'disk',
|
||||
name: 'usage',
|
||||
help: 'Disk usage',
|
||||
type: 'gauge'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -22,33 +22,21 @@
|
||||
"compile:es":
|
||||
"NODE_ENV=development babel src --out-dir dist/es --source-maps inline",
|
||||
"compile:umd":
|
||||
"cross-env NODE_ENV=test babel src --out-dir dist/umd --source-maps inline",
|
||||
"NODE_ENV=test babel src --out-dir dist/umd --source-maps inline",
|
||||
"compile-watch:umd":
|
||||
"cross-env NODE_ENV=test babel src --out-dir dist/umd --source-maps inline --watch",
|
||||
"NODE_ENV=test babel src --out-dir dist/umd --source-maps inline --watch",
|
||||
"compile": "redrun -p compile:*",
|
||||
"watch": "redrun copy-fonts && redrun -p compile-watch:*",
|
||||
"styleguide:build": "cross-env NODE_ENV=production styleguidist build",
|
||||
"styleguide": "cross-env NODE_ENV=development styleguidist server",
|
||||
"styleguide:build": "NODE_ENV=production styleguidist build",
|
||||
"styleguide": "NODE_ENV=development styleguidist server",
|
||||
"prepublish": "redrun -s copy-fonts compile"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-generator": "^6.26.0",
|
||||
"babel-helpers": "^6.24.1",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||
"babel-plugin-styled-components": "^1.2.1",
|
||||
"babel-preset-joyent-portal": "^3.2.0",
|
||||
"babel-template": "^6.26.0",
|
||||
"camel-case": "^3.0.0",
|
||||
"cross-env": "^5.0.5",
|
||||
"disable-scroll": "^0.3.0",
|
||||
"file-loader": "^1.1.5",
|
||||
"fontfaceobserver": "^2.0.13",
|
||||
"joy-react-broadcast": "^0.6.9",
|
||||
"joyent-manifest-editor": "^1.4.0",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"lodash.isequalwith": "^4.4.0",
|
||||
"lodash.isstring": "^4.0.1",
|
||||
"moment": "^2.19.1",
|
||||
"normalized-styled-components": "^1.0.17",
|
||||
@ -56,27 +44,22 @@
|
||||
"prop-types": "^15.6.0",
|
||||
"react-bundle": "^1.0.4",
|
||||
"react-input-range": "^1.2.1",
|
||||
"react-responsive": "^2.0.0",
|
||||
"react-responsive": "^3.0.0",
|
||||
"react-styled-flexboxgrid": "^2.1.0",
|
||||
"redrun": "^5.9.18",
|
||||
"reduce-css-calc": "^2.1.1",
|
||||
"remcalc": "^1.0.9",
|
||||
"rnd-id": "^1.1.1",
|
||||
"styled-components": "^2.2.1",
|
||||
"styled-is": "^1.1.0",
|
||||
"svg-inline-loader": "^0.8.0",
|
||||
"unitcalc": "^1.1.1",
|
||||
"url-loader": "^0.6.2"
|
||||
"unitcalc": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-plugin-add-module-exports": "^0.2.1",
|
||||
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
|
||||
"babel-plugin-transform-es3-property-literals": "^6.22.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||
"babel-preset-joyent-portal": "^3.3.3",
|
||||
"chart.js": "^2.7.0",
|
||||
"css-loader": "^0.28.7",
|
||||
"csso": "^3.3.0",
|
||||
"eslint": "^4.9.0",
|
||||
"eslint-config-joyent-portal": "3.1.0",
|
||||
"file-loader": "^1.1.5",
|
||||
@ -86,10 +69,8 @@
|
||||
"jest-image-snapshot": "^1.0.1",
|
||||
"jest-matcher-utils": "^21.2.1",
|
||||
"jest-snapshot": "^21.2.1",
|
||||
"jest-styled-components": "^4.7.0",
|
||||
"jsesc": "^2.5.1",
|
||||
"jest-styled-components": "^4.7.1",
|
||||
"navalia": "^1.2.0",
|
||||
"npm-run-all": "^4.1.1",
|
||||
"react": "^16.0.0",
|
||||
"react-docgen": "^2.19.0",
|
||||
"react-docgen-displayname-handler": "^1.0.1",
|
||||
@ -107,11 +88,10 @@
|
||||
"stylelint": "^8.2.0",
|
||||
"stylelint-config-joyent-portal": "^2.0.1",
|
||||
"svg-inline-loader": "^0.8.0",
|
||||
"svgo": "^0.7.2",
|
||||
"tinycolor2": "^1.4.1",
|
||||
"title-case": "^2.1.1",
|
||||
"url-loader": "^0.6.2",
|
||||
"webpack": "^3.7.1"
|
||||
"webpack": "^3.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"chart.js": "^2.7.0",
|
||||
|
||||
@ -22,16 +22,18 @@ const style = css`
|
||||
pointer-events: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
`};
|
||||
`;
|
||||
|
||||
const StyledAnchor = A.extend`
|
||||
/* trick prettier */
|
||||
${style};
|
||||
`;
|
||||
|
||||
const StyledLink = styled(BaseLink)`
|
||||
/* trick prettier */
|
||||
${style};
|
||||
`;
|
||||
|
||||
|
||||
@ -26,6 +26,11 @@ export default ({ theme }) => css`
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body > #root {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.CodeMirror,
|
||||
.ReactCodeMirror {
|
||||
height: 100% !important;
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
import calc from 'reduce-css-calc';
|
||||
|
||||
export default str => calc(`calc(${str})`);
|
||||
@ -2,7 +2,6 @@ export { default as Anchor } from './anchor';
|
||||
export { default as Base, global } from './base';
|
||||
export { default as Baseline } from './baseline';
|
||||
export { default as Button } from './button';
|
||||
export { default as calc } from './calc';
|
||||
export { default as Label } from './label';
|
||||
export { PageContainer, RootContainer, ViewContainer } from './layout';
|
||||
export { default as paperEffect } from './paper-effect';
|
||||
@ -93,10 +92,7 @@ export {
|
||||
|
||||
export {
|
||||
default as SectionList,
|
||||
Item as SectionListItem,
|
||||
Anchor as SectionListAnchor,
|
||||
Link as SectionListLink,
|
||||
NavLink as SectionListNavLink
|
||||
Item as SectionListItem
|
||||
} from './section-list';
|
||||
|
||||
export {
|
||||
|
||||
@ -4,58 +4,32 @@ import FontFaceObserver from 'fontfaceobserver';
|
||||
|
||||
import { fontFaces } from '../typography/fonts';
|
||||
import { loadedFontFamily } from '../typography';
|
||||
import global from '../base/global';
|
||||
|
||||
const families = Object.keys(
|
||||
Object.values(fontFaces)
|
||||
.map(({ family }) => family)
|
||||
.reduce((sum, name) => Object.assign(sum, { [name]: 1 }), {})
|
||||
const observers = Object.values(fontFaces).map(
|
||||
({ family, style, weight }) =>
|
||||
new FontFaceObserver(family, {
|
||||
weight,
|
||||
style
|
||||
})
|
||||
);
|
||||
|
||||
const observers = families.map(name => new FontFaceObserver(name));
|
||||
|
||||
class RootContainer extends Component {
|
||||
componentWillMount() {
|
||||
const { theme } = this.props;
|
||||
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
injectGlobal`
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1.15;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: ${theme.background};
|
||||
|
||||
${loadedFontFamily};
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.CodeMirror,
|
||||
.ReactCodeMirror {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
border: solid 1px ${theme.grey};
|
||||
}
|
||||
${global({ theme })};
|
||||
`;
|
||||
|
||||
Promise.all(observers.map(obs => obs.load())).then(() => {
|
||||
document.documentElement.className += ' fonts-loaded';
|
||||
});
|
||||
Promise.all(observers.map(obs => obs.load()))
|
||||
.then(() => {
|
||||
document.documentElement.className += ' fonts-loaded';
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@ -19,4 +19,4 @@ const SectionList = ({ children, ...rest }) => (
|
||||
|
||||
export default Baseline(SectionList);
|
||||
|
||||
export { default as Item, Anchor, Link, NavLink } from './item';
|
||||
export { default as Item } from './item';
|
||||
|
||||
@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
|
||||
import { A } from 'normalized-styled-components';
|
||||
import { NavLink as RRNavLink, Link as RRLink } from 'react-router-dom';
|
||||
import remcalc from 'remcalc';
|
||||
import is from 'styled-is';
|
||||
|
||||
import Baseline from '../baseline';
|
||||
import typography from '../typography';
|
||||
@ -16,10 +17,6 @@ const Li = styled.li`
|
||||
margin-right: ${remcalc(23)};
|
||||
`;
|
||||
|
||||
const Item = ({ children, ...rest }) => <Li {...rest}>{children}</Li>;
|
||||
|
||||
export default Baseline(Item);
|
||||
|
||||
const style = css`
|
||||
${typography.normal};
|
||||
|
||||
@ -31,6 +28,11 @@ const style = css`
|
||||
color: ${props => props.theme.primary};
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
${is('active')`
|
||||
color: ${props => props.theme.primary};
|
||||
cursor: default;
|
||||
`};
|
||||
`;
|
||||
|
||||
export const Anchor = Baseline(A.extend`
|
||||
@ -43,7 +45,18 @@ export const NavLink = Baseline(styled(RRNavLink)`
|
||||
${style};
|
||||
`);
|
||||
|
||||
export const Link = Baseline(styled(RRLink)`
|
||||
/* trick prettier */
|
||||
${style};
|
||||
`);
|
||||
/**
|
||||
* @example ./usage.md
|
||||
*/
|
||||
const Item = props => {
|
||||
const { children, href = '', to = '' } = props;
|
||||
|
||||
const Views = [() => to && NavLink, () => href && Anchor];
|
||||
|
||||
const View = Views.reduce((sel, view) => (sel ? sel : view()), null);
|
||||
const _children = View ? <View {...props}>{children}</View> : children;
|
||||
|
||||
return <Li>{_children}</Li>;
|
||||
};
|
||||
|
||||
export default Baseline(Item);
|
||||
|
||||
3
prototypes/cra-boilerplate/.babelrc
Normal file
3
prototypes/cra-boilerplate/.babelrc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"presets": "joyent-portal"
|
||||
}
|
||||
6
prototypes/cra-boilerplate/.eslintrc
Normal file
6
prototypes/cra-boilerplate/.eslintrc
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"extends": "joyent-portal",
|
||||
"rules": {
|
||||
"no-console": 0
|
||||
}
|
||||
}
|
||||
@ -9,7 +9,7 @@
|
||||
"jsx": true,
|
||||
"node": true,
|
||||
"webpack": {
|
||||
"configPath": "./node_modules/react-scripts/config/webpack.config.dev.js"
|
||||
"configPath": "../../node_modules/joyent-react-scripts/src/webpack.config.dev.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
0
prototypes/cra-boilerplate/.yarnclean
Normal file
0
prototypes/cra-boilerplate/.yarnclean
Normal file
34
prototypes/cra-boilerplate/package.json
Normal file
34
prototypes/cra-boilerplate/package.json
Normal file
@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "cra-boilerplate",
|
||||
"version": "1.0.0",
|
||||
"license": "MPL-2.0",
|
||||
"private": true,
|
||||
"repository": "github:yldio/joyent-portal",
|
||||
"main": "build/",
|
||||
"scripts": {
|
||||
"dev": "NODE_ENV=development joyent-react-scripts start",
|
||||
"build": "NODE_ENV=production joyent-react-scripts build",
|
||||
"fmt": "prettier --write --single-quote *.js src/*.js src/**/*.js",
|
||||
"lint": "eslint . --fix && stylelint './src/**/*.js'",
|
||||
"prepublish": "echo 0"
|
||||
},
|
||||
"dependencies": {
|
||||
"joyent-ui-toolkit": "^2.0.0",
|
||||
"pascal-case": "^2.0.1",
|
||||
"path-to-regexp": "^2.0.0",
|
||||
"qs": "^6.5.1",
|
||||
"react": "^16.0.0",
|
||||
"react-dom": "^16.0.0",
|
||||
"react-scripts": "1.0.14",
|
||||
"styled-components": "^2.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-preset-joyent-portal": "^3.3.3",
|
||||
"eslint": "^4.8.0",
|
||||
"eslint-config-joyent-portal": "3.1.0",
|
||||
"joyent-react-scripts": "^2.2.1",
|
||||
"prettier": "^1.7.4",
|
||||
"stylelint": "^8.2.0",
|
||||
"stylelint-config-joyent-portal": "^2.0.1"
|
||||
}
|
||||
}
|
||||
15
prototypes/cra-boilerplate/public/index.html
Normal file
15
prototypes/cra-boilerplate/public/index.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link href='https://fonts.googleapis.com/css?family=Monoton|Pacifico|Roboto+Mono' rel='stylesheet'
|
||||
type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
62
prototypes/cra-boilerplate/src/404.js
vendored
Normal file
62
prototypes/cra-boilerplate/src/404.js
vendored
Normal file
@ -0,0 +1,62 @@
|
||||
import React from 'react';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
import { theme, H1, H2, H3 } from 'joyent-ui-toolkit';
|
||||
|
||||
const neon = keyframes`
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
|
||||
}
|
||||
`;
|
||||
|
||||
const Title = styled(H1)`
|
||||
color: ${theme.white};
|
||||
font-family: 'Monoton';
|
||||
animation: ${neon} 1.5s ease-in-out infinite alternate;
|
||||
font-size: 7em;
|
||||
margin: 20px 0 40px 0;
|
||||
|
||||
&:hover {
|
||||
animation: none;
|
||||
color: ${theme.red};
|
||||
}
|
||||
`;
|
||||
|
||||
const Container = styled.main`
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(30, 30, 30);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: ${theme.white};
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const Code = styled.code`
|
||||
font-family: 'Roboto Mono';
|
||||
`;
|
||||
|
||||
const NotFound = ({ name, route }) => (
|
||||
<Container>
|
||||
<Title>Not Found</Title>
|
||||
<H2>
|
||||
URL: <Code> {window.location.href}</Code>
|
||||
</H2>
|
||||
<H2>
|
||||
Expected page: <Code>pages/{name}</Code>
|
||||
</H2>
|
||||
<H3>
|
||||
Expected export in <Code>src/routes.js</Code>: <br />
|
||||
<br />
|
||||
<br />
|
||||
<Code>{`export { default as ${route} } from './pages/${name}';`}</Code>
|
||||
</H3>
|
||||
</Container>
|
||||
);
|
||||
|
||||
export default NotFound;
|
||||
55
prototypes/cra-boilerplate/src/app.js
vendored
Normal file
55
prototypes/cra-boilerplate/src/app.js
vendored
Normal file
@ -0,0 +1,55 @@
|
||||
import React, { Component } from 'react';
|
||||
import createHistory from 'history/createBrowserHistory';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
import pathToRegexp from 'path-to-regexp';
|
||||
import pascalCase from 'pascal-case';
|
||||
import qs from 'qs';
|
||||
import NotFound from './404';
|
||||
import { theme, RootContainer } from 'joyent-ui-toolkit';
|
||||
import * as Routes from './routes';
|
||||
|
||||
const history = createHistory();
|
||||
const path = pathToRegexp('/:page?', [], { end: false });
|
||||
const query = search => qs.parse(search.replace(/^\?/, ''));
|
||||
const name = pathname => path.exec(pathname)[1] || 'index';
|
||||
|
||||
const toState = location => ({
|
||||
name: name(location.pathname),
|
||||
location: {
|
||||
query: query(location.search),
|
||||
hash: location.hash,
|
||||
pathname: location.pathname
|
||||
}
|
||||
});
|
||||
|
||||
class Router extends Component {
|
||||
state = toState(history.location);
|
||||
|
||||
componentWillMount = () => {
|
||||
this.unlisten = history.listen(this._onLocationChange);
|
||||
};
|
||||
|
||||
componentWillUnmount = () => this.unlisten();
|
||||
|
||||
_onLocationChange = location => this.setState(location);
|
||||
|
||||
render = () => {
|
||||
const { name } = this.state;
|
||||
const route = pascalCase(name);
|
||||
const View = Routes[route];
|
||||
|
||||
return View ? (
|
||||
<View location={this.state.location} />
|
||||
) : (
|
||||
<NotFound name={name} route={route} />
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default () => (
|
||||
<ThemeProvider theme={theme}>
|
||||
<RootContainer>
|
||||
<Router />
|
||||
</RootContainer>
|
||||
</ThemeProvider>
|
||||
);
|
||||
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import App from './app';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
150
prototypes/cra-boilerplate/src/pages/index.js
vendored
Normal file
150
prototypes/cra-boilerplate/src/pages/index.js
vendored
Normal file
@ -0,0 +1,150 @@
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'react-styled-flexboxgrid';
|
||||
|
||||
import {
|
||||
ViewContainer,
|
||||
Title,
|
||||
Message,
|
||||
MessageDescription,
|
||||
MessageTitle,
|
||||
Header,
|
||||
HeaderBrand,
|
||||
TritonIcon,
|
||||
BreadcrumbItem,
|
||||
Breadcrumb,
|
||||
SectionList,
|
||||
SectionListItem,
|
||||
FormGroup,
|
||||
Input,
|
||||
Select,
|
||||
Checkbox,
|
||||
FormLabel,
|
||||
QueryBreakpoints,
|
||||
Button,
|
||||
Card,
|
||||
CardMeta,
|
||||
CardAction,
|
||||
CardTitle,
|
||||
CardLabel,
|
||||
CardView
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
const { SmallOnly, Medium } = QueryBreakpoints;
|
||||
|
||||
export default () => [
|
||||
<Header>
|
||||
<ViewContainer>
|
||||
<HeaderBrand>
|
||||
<a href="/">
|
||||
<TritonIcon alt="Triton" />
|
||||
</a>
|
||||
</HeaderBrand>
|
||||
</ViewContainer>
|
||||
</Header>,
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem>Hello</BreadcrumbItem>
|
||||
<BreadcrumbItem>World</BreadcrumbItem>
|
||||
</Breadcrumb>,
|
||||
<ViewContainer plain>
|
||||
<SectionList>
|
||||
<SectionListItem href="/" active>
|
||||
hello
|
||||
</SectionListItem>
|
||||
<SectionListItem href="/world">world</SectionListItem>
|
||||
</SectionList>
|
||||
</ViewContainer>,
|
||||
<ViewContainer main>
|
||||
<Title>Hello World</Title>
|
||||
<Message success>
|
||||
<MessageTitle>Hello!</MessageTitle>
|
||||
<MessageDescription>Welcome to this world</MessageDescription>
|
||||
</Message>
|
||||
<Row between="xs">
|
||||
<Col xs={8} sm={8} lg={6}>
|
||||
<Row>
|
||||
<Col xs={7} sm={7} md={6} lg={6}>
|
||||
<FormGroup name="filter">
|
||||
<FormLabel>Filter things</FormLabel>
|
||||
<Input placeholder="Search for things" fluid />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col xs={5} sm={3} lg={3}>
|
||||
<FormGroup name="sort">
|
||||
<FormLabel>Sort</FormLabel>
|
||||
<Select fluid>
|
||||
<option value="name">Name</option>
|
||||
<option value="state">State</option>
|
||||
<option value="created">Created</option>
|
||||
<option value="updated">Updated</option>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={4} sm={4} lg={6}>
|
||||
<Row end="xs">
|
||||
<Col xs={6} sm={4} md={3} lg={2}>
|
||||
<FormGroup>
|
||||
<FormLabel>⁣</FormLabel>
|
||||
<Select fluid>
|
||||
<option value="actions" selected disabled>
|
||||
≡
|
||||
</option>
|
||||
<option value="delete">Delete</option>
|
||||
<option value="start">Start</option>
|
||||
</Select>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col xs={6} sm={6} md={5} lg={2}>
|
||||
<FormGroup>
|
||||
<FormLabel>⁣</FormLabel>
|
||||
<Button href="/create-instance" small icon fluid>
|
||||
<SmallOnly>+</SmallOnly>
|
||||
<Medium>Create</Medium>
|
||||
</Button>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
<Card collapsed flat topMargin bottomless gapless>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardAction>
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
</FormGroup>
|
||||
</CardAction>
|
||||
<CardTitle>item title</CardTitle>
|
||||
<CardLabel>item label</CardLabel>
|
||||
</CardMeta>
|
||||
</CardView>
|
||||
</Card>
|
||||
<Card collapsed flat bottomless gapless>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardAction>
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
</FormGroup>
|
||||
</CardAction>
|
||||
<CardTitle>item title</CardTitle>
|
||||
<CardLabel>item label</CardLabel>
|
||||
</CardMeta>
|
||||
</CardView>
|
||||
</Card>
|
||||
<Card collapsed gapless>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardAction>
|
||||
<FormGroup>
|
||||
<Checkbox />
|
||||
</FormGroup>
|
||||
</CardAction>
|
||||
<CardTitle>item title</CardTitle>
|
||||
<CardLabel>item label</CardLabel>
|
||||
</CardMeta>
|
||||
</CardView>
|
||||
</Card>
|
||||
</ViewContainer>
|
||||
];
|
||||
1
prototypes/cra-boilerplate/src/routes.js
vendored
Normal file
1
prototypes/cra-boilerplate/src/routes.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
export { default as Index } from './pages/index';
|
||||
6669
prototypes/cra-boilerplate/yarn.lock
Normal file
6669
prototypes/cra-boilerplate/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,6 @@
|
||||
{
|
||||
"presets": "joyent-portal",
|
||||
"plugins": [
|
||||
"styled-components",
|
||||
["inline-react-svg", {
|
||||
"ignorePattern": "libre-franklin"
|
||||
}]
|
||||
0
prototypes/create-instance/.yarnclean
Normal file
0
prototypes/create-instance/.yarnclean
Normal file
@ -1,7 +1,8 @@
|
||||
{
|
||||
"name": "my-joyent",
|
||||
"name": "joyent-create-instance",
|
||||
"version": "1.0.0",
|
||||
"license": "MPL-2.0",
|
||||
"private": true,
|
||||
"repository": "github:yldio/joyent-portal",
|
||||
"main": "build/",
|
||||
"scripts": {
|
||||
@ -13,7 +14,8 @@
|
||||
"lint:js": "eslint . --fix",
|
||||
"lint": "redrun -s lint:*",
|
||||
"test": "NODE_ENV=test ./test/run --env=jsdom",
|
||||
"test-ci": "echo 0 `# NODE_ENV=test ./test/run --env=jsdom --coverage`"
|
||||
"test-ci": "echo 0 `# NODE_ENV=test ./test/run --env=jsdom --coverage`",
|
||||
"prepublish": "echo 0"
|
||||
},
|
||||
"dependencies": {
|
||||
"apollo": "^0.2.2",
|
||||
@ -42,8 +44,7 @@
|
||||
"apr-main": "^1.0.7",
|
||||
"babel-minify-webpack-plugin": "^0.2.0",
|
||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||
"babel-plugin-styled-components": "^1.2.1",
|
||||
"babel-preset-joyent-portal": "^3.1.0",
|
||||
"babel-preset-joyent-portal": "^3.3.3",
|
||||
"commitizen": "^2.9.6",
|
||||
"cross-env": "^5.0.5",
|
||||
"eslint": "^4.8.0",
|
||||
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
30
prototypes/create-instance/public/manifest.json
Normal file
30
prototypes/create-instance/public/manifest.json
Normal file
@ -0,0 +1,30 @@
|
||||
{
|
||||
"short_name": "Joyent",
|
||||
"name": "My Joyent",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "256x256",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "384x384",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#1E313B",
|
||||
"background_color": "#FAFAFA"
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
@ -18,9 +18,7 @@ const Title = styled(CardTitle)`
|
||||
margin-bottom: ${remcalc(8)};
|
||||
`;
|
||||
|
||||
const SubTitle = styled(Title)`
|
||||
font-weight: normal;
|
||||
`;
|
||||
const SubTitle = styled(Title)`font-weight: normal;`;
|
||||
|
||||
const CardStyled = styled(Card)`
|
||||
flex-direction: column;
|
||||
@ -85,11 +85,8 @@ class Filters extends Component {
|
||||
this.props.diskTypeChange(val);
|
||||
|
||||
// if the object is empty or all values are false we want to reset
|
||||
if (
|
||||
Object.keys(val).length === 0 ||
|
||||
Object.keys(val).every(i => !val[i])
|
||||
) {
|
||||
this.handleResetClick()
|
||||
if (Object.keys(val).length === 0 || Object.keys(val).every(i => !val[i])) {
|
||||
this.handleResetClick();
|
||||
}
|
||||
};
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user