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
|
_todo
|
||||||
packages/*/dist
|
packages/*/dist
|
||||||
|
prototypes/*/dist
|
||||||
packages/*/buid
|
packages/*/buid
|
||||||
|
prototypes/*/buid
|
||||||
|
packages/*/.next
|
||||||
|
prototypes/*/.next
|
||||||
packages/ui-toolkit/styleguide/
|
packages/ui-toolkit/styleguide/
|
||||||
packages/ui-toolkit/.snapguidist/
|
packages/ui-toolkit/.snapguidist/
|
||||||
packages/*/package-lock.json
|
packages/*/package-lock.json
|
||||||
|
prototypes/*/package-lock.json
|
||||||
|
|
||||||
_env*
|
_env*
|
||||||
keys*
|
keys*
|
||||||
|
|||||||
@ -4,7 +4,13 @@ module.exports = {
|
|||||||
'scope-enum': [
|
'scope-enum': [
|
||||||
2,
|
2,
|
||||||
'always',
|
'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",
|
"stylelint-gh-status-reporter": "^1.0.7",
|
||||||
"yargs": "^8.0.2"
|
"yargs": "^8.0.2"
|
||||||
},
|
},
|
||||||
"workspaces": ["packages/*"],
|
"workspaces": [
|
||||||
|
"packages/*",
|
||||||
|
"prototypes/*"
|
||||||
|
],
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
"lodash": "4.17.4",
|
"lodash": "4.17.4",
|
||||||
"lodash.keys": "4.2.0",
|
"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",
|
"name": "my-joy-beta",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"license": "MPL-2.0",
|
"license": "MPL-2.0",
|
||||||
|
"private": true,
|
||||||
"repository": "github:yldio/joyent-portal",
|
"repository": "github:yldio/joyent-portal",
|
||||||
"main": "build/",
|
"main": "build/",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@ -45,8 +46,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||||
"babel-plugin-styled-components": "^1.2.1",
|
"babel-preset-joyent-portal": "^3.3.3",
|
||||||
"babel-preset-joyent-portal": "^3.1.0",
|
|
||||||
"eslint": "^4.8.0",
|
"eslint": "^4.8.0",
|
||||||
"eslint-config-joyent-portal": "3.1.0",
|
"eslint-config-joyent-portal": "3.1.0",
|
||||||
"jest": "^21.2.1",
|
"jest": "^21.2.1",
|
||||||
|
|||||||
@ -8,17 +8,6 @@
|
|||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
<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>
|
<title>My Joyent β</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -2,19 +2,12 @@ import React from 'react';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import forceArray from 'force-array';
|
import forceArray from 'force-array';
|
||||||
|
|
||||||
import {
|
import { SectionList, SectionListItem, ViewContainer } from 'joyent-ui-toolkit';
|
||||||
SectionList,
|
|
||||||
SectionListItem,
|
|
||||||
SectionListNavLink,
|
|
||||||
ViewContainer
|
|
||||||
} from 'joyent-ui-toolkit';
|
|
||||||
|
|
||||||
const getMenuItems = (links = []) =>
|
const getMenuItems = (links = []) =>
|
||||||
links.map(({ pathname, name }) => (
|
links.map(({ pathname, name }) => (
|
||||||
<SectionListItem key={pathname}>
|
<SectionListItem key={pathname} activeClassName="active" to={pathname}>
|
||||||
<SectionListNavLink activeClassName="active" to={pathname}>
|
|
||||||
{name}
|
{name}
|
||||||
</SectionListNavLink>
|
|
||||||
</SectionListItem>
|
</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"],
|
"presets": ["joyent-portal"],
|
||||||
"plugins": [
|
"plugins": [
|
||||||
"styled-components",
|
|
||||||
["inline-react-svg", {
|
["inline-react-svg", {
|
||||||
"ignorePattern": "libre-franklin"
|
"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":
|
"compile:es":
|
||||||
"NODE_ENV=development babel src --out-dir dist/es --source-maps inline",
|
"NODE_ENV=development babel src --out-dir dist/es --source-maps inline",
|
||||||
"compile:umd":
|
"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":
|
"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:*",
|
"compile": "redrun -p compile:*",
|
||||||
"watch": "redrun copy-fonts && redrun -p compile-watch:*",
|
"watch": "redrun copy-fonts && redrun -p compile-watch:*",
|
||||||
"styleguide:build": "cross-env NODE_ENV=production styleguidist build",
|
"styleguide:build": "NODE_ENV=production styleguidist build",
|
||||||
"styleguide": "cross-env NODE_ENV=development styleguidist server",
|
"styleguide": "NODE_ENV=development styleguidist server",
|
||||||
"prepublish": "redrun -s copy-fonts compile"
|
"prepublish": "redrun -s copy-fonts compile"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"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",
|
"camel-case": "^3.0.0",
|
||||||
"cross-env": "^5.0.5",
|
|
||||||
"disable-scroll": "^0.3.0",
|
"disable-scroll": "^0.3.0",
|
||||||
"file-loader": "^1.1.5",
|
|
||||||
"fontfaceobserver": "^2.0.13",
|
"fontfaceobserver": "^2.0.13",
|
||||||
"joy-react-broadcast": "^0.6.9",
|
"joy-react-broadcast": "^0.6.9",
|
||||||
"joyent-manifest-editor": "^1.4.0",
|
"joyent-manifest-editor": "^1.4.0",
|
||||||
"lodash.isequal": "^4.5.0",
|
|
||||||
"lodash.isequalwith": "^4.4.0",
|
|
||||||
"lodash.isstring": "^4.0.1",
|
"lodash.isstring": "^4.0.1",
|
||||||
"moment": "^2.19.1",
|
"moment": "^2.19.1",
|
||||||
"normalized-styled-components": "^1.0.17",
|
"normalized-styled-components": "^1.0.17",
|
||||||
@ -56,27 +44,22 @@
|
|||||||
"prop-types": "^15.6.0",
|
"prop-types": "^15.6.0",
|
||||||
"react-bundle": "^1.0.4",
|
"react-bundle": "^1.0.4",
|
||||||
"react-input-range": "^1.2.1",
|
"react-input-range": "^1.2.1",
|
||||||
"react-responsive": "^2.0.0",
|
"react-responsive": "^3.0.0",
|
||||||
"react-styled-flexboxgrid": "^2.1.0",
|
"react-styled-flexboxgrid": "^2.1.0",
|
||||||
"redrun": "^5.9.18",
|
"redrun": "^5.9.18",
|
||||||
"reduce-css-calc": "^2.1.1",
|
|
||||||
"remcalc": "^1.0.9",
|
"remcalc": "^1.0.9",
|
||||||
"rnd-id": "^1.1.1",
|
"rnd-id": "^1.1.1",
|
||||||
"styled-components": "^2.2.1",
|
"styled-components": "^2.2.1",
|
||||||
"styled-is": "^1.1.0",
|
"styled-is": "^1.1.0",
|
||||||
"svg-inline-loader": "^0.8.0",
|
"unitcalc": "^1.1.1"
|
||||||
"unitcalc": "^1.1.1",
|
|
||||||
"url-loader": "^0.6.2"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-plugin-add-module-exports": "^0.2.1",
|
"babel-cli": "^6.26.0",
|
||||||
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
|
"babel-loader": "^7.1.2",
|
||||||
"babel-plugin-transform-es3-property-literals": "^6.22.0",
|
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||||
"babel-preset-es2015": "^6.24.1",
|
"babel-preset-joyent-portal": "^3.3.3",
|
||||||
"babel-preset-stage-0": "^6.24.1",
|
|
||||||
"chart.js": "^2.7.0",
|
"chart.js": "^2.7.0",
|
||||||
"css-loader": "^0.28.7",
|
"css-loader": "^0.28.7",
|
||||||
"csso": "^3.3.0",
|
|
||||||
"eslint": "^4.9.0",
|
"eslint": "^4.9.0",
|
||||||
"eslint-config-joyent-portal": "3.1.0",
|
"eslint-config-joyent-portal": "3.1.0",
|
||||||
"file-loader": "^1.1.5",
|
"file-loader": "^1.1.5",
|
||||||
@ -86,10 +69,8 @@
|
|||||||
"jest-image-snapshot": "^1.0.1",
|
"jest-image-snapshot": "^1.0.1",
|
||||||
"jest-matcher-utils": "^21.2.1",
|
"jest-matcher-utils": "^21.2.1",
|
||||||
"jest-snapshot": "^21.2.1",
|
"jest-snapshot": "^21.2.1",
|
||||||
"jest-styled-components": "^4.7.0",
|
"jest-styled-components": "^4.7.1",
|
||||||
"jsesc": "^2.5.1",
|
|
||||||
"navalia": "^1.2.0",
|
"navalia": "^1.2.0",
|
||||||
"npm-run-all": "^4.1.1",
|
|
||||||
"react": "^16.0.0",
|
"react": "^16.0.0",
|
||||||
"react-docgen": "^2.19.0",
|
"react-docgen": "^2.19.0",
|
||||||
"react-docgen-displayname-handler": "^1.0.1",
|
"react-docgen-displayname-handler": "^1.0.1",
|
||||||
@ -107,11 +88,10 @@
|
|||||||
"stylelint": "^8.2.0",
|
"stylelint": "^8.2.0",
|
||||||
"stylelint-config-joyent-portal": "^2.0.1",
|
"stylelint-config-joyent-portal": "^2.0.1",
|
||||||
"svg-inline-loader": "^0.8.0",
|
"svg-inline-loader": "^0.8.0",
|
||||||
"svgo": "^0.7.2",
|
|
||||||
"tinycolor2": "^1.4.1",
|
"tinycolor2": "^1.4.1",
|
||||||
"title-case": "^2.1.1",
|
"title-case": "^2.1.1",
|
||||||
"url-loader": "^0.6.2",
|
"url-loader": "^0.6.2",
|
||||||
"webpack": "^3.7.1"
|
"webpack": "^3.8.1"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"chart.js": "^2.7.0",
|
"chart.js": "^2.7.0",
|
||||||
|
|||||||
@ -28,10 +28,12 @@ const style = css`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledAnchor = A.extend`
|
const StyledAnchor = A.extend`
|
||||||
|
/* trick prettier */
|
||||||
${style};
|
${style};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledLink = styled(BaseLink)`
|
const StyledLink = styled(BaseLink)`
|
||||||
|
/* trick prettier */
|
||||||
${style};
|
${style};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@ -26,6 +26,11 @@ export default ({ theme }) => css`
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body > #root {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
}
|
||||||
|
|
||||||
.CodeMirror,
|
.CodeMirror,
|
||||||
.ReactCodeMirror {
|
.ReactCodeMirror {
|
||||||
height: 100% !important;
|
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 Base, global } from './base';
|
||||||
export { default as Baseline } from './baseline';
|
export { default as Baseline } from './baseline';
|
||||||
export { default as Button } from './button';
|
export { default as Button } from './button';
|
||||||
export { default as calc } from './calc';
|
|
||||||
export { default as Label } from './label';
|
export { default as Label } from './label';
|
||||||
export { PageContainer, RootContainer, ViewContainer } from './layout';
|
export { PageContainer, RootContainer, ViewContainer } from './layout';
|
||||||
export { default as paperEffect } from './paper-effect';
|
export { default as paperEffect } from './paper-effect';
|
||||||
@ -93,10 +92,7 @@ export {
|
|||||||
|
|
||||||
export {
|
export {
|
||||||
default as SectionList,
|
default as SectionList,
|
||||||
Item as SectionListItem,
|
Item as SectionListItem
|
||||||
Anchor as SectionListAnchor,
|
|
||||||
Link as SectionListLink,
|
|
||||||
NavLink as SectionListNavLink
|
|
||||||
} from './section-list';
|
} from './section-list';
|
||||||
|
|
||||||
export {
|
export {
|
||||||
|
|||||||
@ -4,57 +4,31 @@ import FontFaceObserver from 'fontfaceobserver';
|
|||||||
|
|
||||||
import { fontFaces } from '../typography/fonts';
|
import { fontFaces } from '../typography/fonts';
|
||||||
import { loadedFontFamily } from '../typography';
|
import { loadedFontFamily } from '../typography';
|
||||||
|
import global from '../base/global';
|
||||||
|
|
||||||
const families = Object.keys(
|
const observers = Object.values(fontFaces).map(
|
||||||
Object.values(fontFaces)
|
({ family, style, weight }) =>
|
||||||
.map(({ family }) => family)
|
new FontFaceObserver(family, {
|
||||||
.reduce((sum, name) => Object.assign(sum, { [name]: 1 }), {})
|
weight,
|
||||||
|
style
|
||||||
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
const observers = families.map(name => new FontFaceObserver(name));
|
|
||||||
|
|
||||||
class RootContainer extends Component {
|
class RootContainer extends Component {
|
||||||
componentWillMount() {
|
componentWillMount() {
|
||||||
const { theme } = this.props;
|
const { theme } = this.props;
|
||||||
|
|
||||||
// eslint-disable-next-line no-unused-expressions
|
// eslint-disable-next-line no-unused-expressions
|
||||||
injectGlobal`
|
injectGlobal`
|
||||||
[hidden] {
|
${global({ theme })};
|
||||||
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};
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
Promise.all(observers.map(obs => obs.load())).then(() => {
|
Promise.all(observers.map(obs => obs.load()))
|
||||||
|
.then(() => {
|
||||||
document.documentElement.className += ' fonts-loaded';
|
document.documentElement.className += ' fonts-loaded';
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.error(err);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -19,4 +19,4 @@ const SectionList = ({ children, ...rest }) => (
|
|||||||
|
|
||||||
export default Baseline(SectionList);
|
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 { A } from 'normalized-styled-components';
|
||||||
import { NavLink as RRNavLink, Link as RRLink } from 'react-router-dom';
|
import { NavLink as RRNavLink, Link as RRLink } from 'react-router-dom';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
|
import is from 'styled-is';
|
||||||
|
|
||||||
import Baseline from '../baseline';
|
import Baseline from '../baseline';
|
||||||
import typography from '../typography';
|
import typography from '../typography';
|
||||||
@ -16,10 +17,6 @@ const Li = styled.li`
|
|||||||
margin-right: ${remcalc(23)};
|
margin-right: ${remcalc(23)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Item = ({ children, ...rest }) => <Li {...rest}>{children}</Li>;
|
|
||||||
|
|
||||||
export default Baseline(Item);
|
|
||||||
|
|
||||||
const style = css`
|
const style = css`
|
||||||
${typography.normal};
|
${typography.normal};
|
||||||
|
|
||||||
@ -31,6 +28,11 @@ const style = css`
|
|||||||
color: ${props => props.theme.primary};
|
color: ${props => props.theme.primary};
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
${is('active')`
|
||||||
|
color: ${props => props.theme.primary};
|
||||||
|
cursor: default;
|
||||||
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const Anchor = Baseline(A.extend`
|
export const Anchor = Baseline(A.extend`
|
||||||
@ -43,7 +45,18 @@ export const NavLink = Baseline(styled(RRNavLink)`
|
|||||||
${style};
|
${style};
|
||||||
`);
|
`);
|
||||||
|
|
||||||
export const Link = Baseline(styled(RRLink)`
|
/**
|
||||||
/* trick prettier */
|
* @example ./usage.md
|
||||||
${style};
|
*/
|
||||||
`);
|
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,
|
"jsx": true,
|
||||||
"node": true,
|
"node": true,
|
||||||
"webpack": {
|
"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 React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
|
|
||||||
import App from './app';
|
import App from './app';
|
||||||
|
|
||||||
ReactDOM.render(<App />, document.getElementById('root'));
|
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",
|
"presets": "joyent-portal",
|
||||||
"plugins": [
|
"plugins": [
|
||||||
"styled-components",
|
|
||||||
["inline-react-svg", {
|
["inline-react-svg", {
|
||||||
"ignorePattern": "libre-franklin"
|
"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",
|
"version": "1.0.0",
|
||||||
"license": "MPL-2.0",
|
"license": "MPL-2.0",
|
||||||
|
"private": true,
|
||||||
"repository": "github:yldio/joyent-portal",
|
"repository": "github:yldio/joyent-portal",
|
||||||
"main": "build/",
|
"main": "build/",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@ -13,7 +14,8 @@
|
|||||||
"lint:js": "eslint . --fix",
|
"lint:js": "eslint . --fix",
|
||||||
"lint": "redrun -s lint:*",
|
"lint": "redrun -s lint:*",
|
||||||
"test": "NODE_ENV=test ./test/run --env=jsdom",
|
"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": {
|
"dependencies": {
|
||||||
"apollo": "^0.2.2",
|
"apollo": "^0.2.2",
|
||||||
@ -42,8 +44,7 @@
|
|||||||
"apr-main": "^1.0.7",
|
"apr-main": "^1.0.7",
|
||||||
"babel-minify-webpack-plugin": "^0.2.0",
|
"babel-minify-webpack-plugin": "^0.2.0",
|
||||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||||
"babel-plugin-styled-components": "^1.2.1",
|
"babel-preset-joyent-portal": "^3.3.3",
|
||||||
"babel-preset-joyent-portal": "^3.1.0",
|
|
||||||
"commitizen": "^2.9.6",
|
"commitizen": "^2.9.6",
|
||||||
"cross-env": "^5.0.5",
|
"cross-env": "^5.0.5",
|
||||||
"eslint": "^4.8.0",
|
"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)};
|
margin-bottom: ${remcalc(8)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SubTitle = styled(Title)`
|
const SubTitle = styled(Title)`font-weight: normal;`;
|
||||||
font-weight: normal;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const CardStyled = styled(Card)`
|
const CardStyled = styled(Card)`
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -85,11 +85,8 @@ class Filters extends Component {
|
|||||||
this.props.diskTypeChange(val);
|
this.props.diskTypeChange(val);
|
||||||
|
|
||||||
// if the object is empty or all values are false we want to reset
|
// if the object is empty or all values are false we want to reset
|
||||||
if (
|
if (Object.keys(val).length === 0 || Object.keys(val).every(i => !val[i])) {
|
||||||
Object.keys(val).length === 0 ||
|
this.handleResetClick();
|
||||||
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