feat(boilerplate): create next-like boilerplate for quick prototypes

also, some cleanup

fixes #773
This commit is contained in:
Sérgio Ramos 2017-10-18 03:29:47 +01:00
parent c1327083d3
commit 6cf84c583c
160 changed files with 7300 additions and 1873 deletions

5
.gitignore vendored
View File

@ -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*

View File

@ -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'
]
] ]
} }
}; };

View File

@ -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",

View File

@ -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
}
}

View File

@ -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"]

View File

@ -1,21 +0,0 @@
# joyent-boilerplate
[![Docker Repository on Quay](https://quay.io/repository/yldio/joyent-boilerplate/status)](https://quay.io/repository/yldio/joyent-boilerplate)
[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg)](https://opensource.org/licenses/MPL-2.0)
[![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-green.svg)](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

View File

@ -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"
}
}

View File

@ -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>

View File

@ -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

View File

@ -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>
`;

View File

@ -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 cant 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>
`;

View File

@ -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;

View File

@ -1,2 +0,0 @@
export { default as Header } from './header';
export { default as NotFound } from './not-found';

View File

@ -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 cant 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;

View File

@ -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>
`;

View File

@ -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();
});

View File

@ -1,6 +0,0 @@
import React from 'react';
import { ViewContainer } from 'joyent-ui-toolkit';
const Home = () => <ViewContainer>Welcome</ViewContainer>;
export default Home;

View File

@ -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>
`;

View File

@ -1,2 +0,0 @@
export { default as Header } from './header';
export { default as withNotFound } from './not-found-hoc';

View File

@ -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;

View File

@ -1,3 +0,0 @@
const state = {};
export default state;

View File

@ -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
)
);

View File

@ -1,3 +0,0 @@
export { default as Router } from './router';
export { default as Store } from './store';
export { default as Theme } from './theme';

View File

@ -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);

View File

@ -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

View File

@ -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",

View File

@ -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 &beta;</title> <title>My Joyent &beta;</title>
</head> </head>
<body> <body>

View File

@ -16,12 +16,12 @@ export default ({
onCancel = () => {} onCancel = () => {}
}) => { }) => {
const _error = error && const _error = error &&
!submitting && ( !submitting && (
<Message error> <Message error>
<MessageTitle>Ooops!</MessageTitle> <MessageTitle>Ooops!</MessageTitle>
<MessageDescription>{error}</MessageDescription> <MessageDescription>{error}</MessageDescription>
</Message> </Message>
); );
return ( return (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>

View File

@ -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>
)); ));

View File

@ -1,9 +0,0 @@
{
"presets": "joyent-portal",
"plugins": [
"styled-components",
["inline-react-svg", {
"ignorePattern": "libre-franklin"
}]
]
}

View File

@ -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

View File

@ -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"
}

View File

@ -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();
});

View File

@ -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();
});

View File

@ -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;

View File

@ -1,3 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <withNotFound /> without throwing 1`] = `<withNotFound />`;

View File

@ -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();
});

View File

@ -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();
});

View File

@ -1,7 +0,0 @@
import React from 'react';
import { Header as HeaderComponent } from '@components/navigation';
export const Header = () => <HeaderComponent />;
export default Header;

View File

@ -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 cant 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;

View File

@ -1,11 +0,0 @@
query Portal {
portal {
user {
firstName
}
datacenter {
id
region
}
}
}

View File

@ -1 +0,0 @@
module.exports = 'test-file-mock';

View File

@ -1,4 +0,0 @@
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
export default ({ children }) => <MemoryRouter>{children}</MemoryRouter>;

View File

@ -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>
);

View File

@ -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>
);

View File

@ -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"
}] }]

View File

@ -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'
}
]
}
}

View File

@ -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",

View File

@ -22,16 +22,18 @@ const style = css`
pointer-events: none; pointer-events: none;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
`}; `};
`; `;
const StyledAnchor = A.extend` const StyledAnchor = A.extend`
/* trick prettier */
${style}; ${style};
`; `;
const StyledLink = styled(BaseLink)` const StyledLink = styled(BaseLink)`
/* trick prettier */
${style}; ${style};
`; `;

View File

@ -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;

View File

@ -1,3 +0,0 @@
import calc from 'reduce-css-calc';
export default str => calc(`calc(${str})`);

View File

@ -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 {

View File

@ -4,58 +4,32 @@ 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()))
document.documentElement.className += ' fonts-loaded'; .then(() => {
}); document.documentElement.className += ' fonts-loaded';
})
.catch(err => {
console.error(err);
});
} }
render() { render() {

View File

@ -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';

View File

@ -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);

View File

@ -0,0 +1,3 @@
{
"presets": "joyent-portal"
}

View File

@ -0,0 +1,6 @@
{
"extends": "joyent-portal",
"rules": {
"no-console": 0
}
}

View File

@ -1,3 +1,3 @@
{ {
"extends": ["stylelint-config-joyent-portal"] "extends": ["stylelint-config-joyent-portal"]
} }

View File

@ -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"
} }
} }
} }

View File

View 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"
}
}

View 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
View 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
View 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>
);

View File

@ -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'));

View 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>&#8291;</FormLabel>
<Select fluid>
<option value="actions" selected disabled>
&#8801;
</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>&#8291;</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>
];

View File

@ -0,0 +1 @@
export { default as Index } from './pages/index';

File diff suppressed because it is too large Load Diff

View File

@ -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"
}] }]

View File

View 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",

View File

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View 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"
}

View File

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -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;

View File

@ -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