Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(navigation): initial commit

Browse Source
This commit is contained in:
Sérgio Ramos 2018-01-17 19:10:39 +00:00
parent 03766d7fd8
commit c75bb9328d
105 changed files with 11631 additions and 2823 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
commitlint.config.js
View File

@ -4,7 +4,7 @@ module.exports = {
'scope-enum': [
2,
'always',
['ui-toolkit', 'icons', 'my-joy-beta', 'boilerplate', 'create-instance']
['ui-toolkit', 'icons', 'my-joy-beta', 'navigation']
]
}
};

18
package.json
View File

@ -19,13 +19,9 @@
"test-ci": "lerna run test-ci",
"test": "lerna run test",
"clean": "lerna clean --yes",
"dev": "redrun -p dev:*",
"dev:ui": "lerna run dev --scope joyent-ui-toolkit --stream",
"dev:i": "lerna run dev --scope joyent-icons --stream",
"dev:mjb": "lerna run dev --scope my-joy-beta --stream",
"dev": "lerna run dev --parallel --stream",
"commitmsg": "commitlint -e",
"precommit": "cross-env CI=1 redrun -s lint-staged format-staged",
"postinstall": "lerna run prepublish",
"commit": "commit"
},
"devDependencies": {
@ -67,12 +63,14 @@
"staged-git-files": "0.0.4",
"yargs": "^10.0.3"
},
"workspaces": ["packages/*"],
"resolutions": {
"graphql": "0.12.3",
"styled-components": "2.4.0",
"hoist-non-react-statics": "2.3.1",
"react": "16.2.0",
"react-dom": "16.2.0",
"styled-components": "2.3.0"
}
"breeze-nexttick": "0.2.1",
"zen-observable": "0.7.1"
},
"workspaces": [
"packages/*"
]
}

6
packages/icons/package.json
View File

@ -1,6 +1,6 @@
{
"name": "joyent-icons",
"version": "2.1.0",
"version": "3.0.0",
"license": "MPL-2.0",
"repository": "github:yldio/joyent-portal",
"main": "dist/umd/index.js",
@ -14,12 +14,12 @@
"compile:es": "babel src --out-dir dist/es",
"compile:umd": "UMD=1 babel src --out-dir dist/umd",
"compile": "redrun -p compile:*",
"dev":
"NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
"dev": "NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
"prepublish": "NODE_ENV=production npm run compile"
},
"dependencies": {
"remcalc": "^1.0.9",
"rnd-id": "^2.0.0",
"styled-components": "^2.3.0"
},
"devDependencies": {

6
packages/icons/src/actions.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import remcalc from 'remcalc';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -10,11 +9,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -45,6 +43,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/affinity.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -49,6 +47,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/arrow.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -32,6 +30,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/bin.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -32,6 +30,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

33
packages/icons/src/checkcircle.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import remcalc from 'remcalc';
import Colors from './colors';
import Rotate from './rotate';
export const Tick = props => (
@ -19,9 +18,7 @@ export const Tick = props => (
</svg>
);
export const Completed = props => (
<Colors white text greenDark>
{({ white, text, greenDark }) => (
export const Completed = ({ colors = {}, ...props }) => (
<svg
width="18"
height="18"
@ -30,23 +27,19 @@ export const Completed = props => (
{...props}
>
<path
fill={greenDark}
fill={colors.greenDark}
fill-rule="evenodd"
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
/>
<path
fill-rule="evenodd"
fill={white}
fill={colors.white}
d="M12.017 5l-3.896 5.336-1.487-2.109L5 9.379l3.091 4.389 5.541-7.589L12.017 5z"
/>
</svg>
)}
</Colors>
);
export const PartCompleted = props => (
<Colors white text greenDark>
{({ white, text, greenDark }) => (
export const PartCompleted = ({ colors = {}, ...props }) => (
<svg
width="18"
height="18"
@ -56,27 +49,23 @@ export const PartCompleted = props => (
{...props}
>
<path
fill={white}
fill={colors.white}
fillRule="evenodd"
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
/>
<path
fill={greenDark}
fill={colors.greenDark}
d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"
/>
<path
fill={text}
fill={colors.text}
fillRule="evenodd"
d="M12.316 5l-4.062 5.477-1.55-2.165L5 9.495 8.223 14 14 6.21 12.316 5z"
/>
</svg>
)}
</Colors>
);
export const Incomplete = props => (
<Colors white text>
{({ white, text }) => (
export const Incomplete = ({ colors = {}, ...props }) => (
<svg
width="18"
height="18"
@ -86,17 +75,15 @@ export const Incomplete = props => (
{...props}
>
<path
fill={white}
fill={colors.white}
fillRule="evenodd"
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
/>
<path
fill={text}
fill={colors.text}
d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"
/>
</svg>
)}
</Colors>
);
export default ({

6
packages/icons/src/clipboard.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -49,6 +47,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/close.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -32,6 +30,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/cns.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -68,6 +66,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

25
packages/icons/src/colors.js
View File

@ -1,25 +0,0 @@
import { withTheme } from 'styled-components';
export const colors = {
white: '#FFF',
text: '#464646',
greenDark: '#008138',
green: '#009858',
orange: '#e38200',
primary: '#3b46cc'
};
export default withTheme(
({ theme = {}, children, direction = 'down', style = {}, ...rest }) =>
children(
Object.keys(rest)
.filter(name => Boolean(rest[name]))
.reduce(
(sum, name) => ({
...sum,
[name]: theme[name] || colors[name] || rest[name]
}),
rest
)
)
);

6
packages/icons/src/copy.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -32,6 +30,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/cpu.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -31,6 +29,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/data-center.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -32,6 +30,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/delete.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -48,6 +46,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/duplicate.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -48,6 +46,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/edit.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -52,6 +50,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/fabric.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -33,6 +31,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/firewall.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -64,6 +62,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/general.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -31,6 +29,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

13
packages/icons/src/health.js
View File

@ -1,16 +1,14 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
export default ({
healthy = true,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors green orange>
{({ green, orange }) => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -22,7 +20,12 @@ export default ({
{...rest}
>
<g fill-rule="evenodd">
<circle fill={healthy ? green : orange} cx="9" cy="9" r="9" />
<circle
fill={healthy ? colors.green : colors.orange}
cx="9"
cy="9"
r="9"
/>
<path
fill="#FFF"
d="M9.477 6.603l-.522.443-.444-.443a2.056 2.056 0 1 0-2.908 2.909l3.352 3.352 3.412-3.352c.803-.804.863-2.106.06-2.91a2.105 2.105 0 0 0-2.95 0z"
@ -31,6 +34,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/id.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -70,6 +68,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

17
packages/icons/src/import.js
View File

@ -1,14 +1,11 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
const ids = [rndId(), rndId(), rndId()];
export default ({ direction = 'down', style = {}, ...rest }) => (
<Colors white text>
{({ white, text }) => (
export default ({ direction = 'down', style = {}, colors = {}, ...rest }) => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -22,23 +19,23 @@ export default ({ direction = 'down', style = {}, ...rest }) => (
>
<g transform="translate(-2061 2768)">
<clipPath id={`${ids[0]}`} clipRule="evenodd">
<path fill={white} d="M2061-2768h24v24h-24v-24z" />
<path fill={colors.white} d="M2061-2768h24v24h-24v-24z" />
</clipPath>
<g clipPath={`url(#${ids[0]})`}>
<path fill={white} d="M2061-2768h24v24h-24v-24z" />
<path fill={colors.white} d="M2061-2768h24v24h-24v-24z" />
<use
xlinkHref={`#${ids[1]}`}
fill={text}
fill={colors.text}
transform="translate(2061 -2754)"
/>
<use
xlinkHref={`#${ids[2]}`}
fill={text}
fill={colors.text}
transform="translate(2072 -2768)"
/>
<use
xlinkHref={`#${ids[3]}`}
fill={text}
fill={colors.text}
transform="translate(2067.29 -2755)"
/>
</g>
@ -59,6 +56,4 @@ export default ({ direction = 'down', style = {}, ...rest }) => (
</svg>
)}
</Rotate>
)}
</Colors>
);

1
packages/icons/src/index.js
View File

@ -36,6 +36,7 @@ export { default as Public } from './public';
export { default as Randomize } from './randomize';
export { default as Reset } from './reset';
export { default as Restart } from './restart';
export { default as Services } from './services';
export { default as Start } from './start';
export { default as Stop } from './stop';
export { default as Storage } from './storage';

6
packages/icons/src/instance-count.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -119,6 +117,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/instance-type.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -92,6 +90,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/instances.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -32,6 +30,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/loading.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -13,11 +12,10 @@ export default ({
secondary = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white primary text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -75,6 +73,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/login.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -60,6 +58,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/memory.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -31,6 +29,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/metadata.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -72,6 +70,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/minus.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -32,6 +30,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/name.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -33,6 +31,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/network.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -47,6 +45,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/package.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -47,6 +45,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/plus.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -32,6 +30,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/private.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -31,6 +29,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/public.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -32,6 +30,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/randomize.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -33,6 +31,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/reset.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -48,6 +46,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

34
packages/icons/src/services.js Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import Rotate from './rotate';
import calcFill from './fill';
export default ({
fill = null,
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="15"
height="15"
viewBox="0 0 15 15"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g data-name="Layer 2">
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M6 5V4h5v1zm5 2V6H6v1zm0 2V8H6v1zm2-7H4v9h9V2m1-2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H2V1a1 1 0 0 1 1-1zm0 14H1V2H0v12a1 1 0 0 0 1 1h13z"
data-name="Layer 1"
/>
</g>
</svg>
)}
</Rotate>
);

6
packages/icons/src/start.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -64,6 +62,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/stop.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -60,6 +58,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/storage.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -31,6 +29,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

6
packages/icons/src/tags.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,11 +11,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -62,6 +60,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

18
packages/icons/src/triton.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -11,10 +10,9 @@ const TritonBeta = ({
fill = null,
light = false,
disabled = false,
colors = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<svg
width="105"
height="30"
@ -54,13 +52,15 @@ const TritonBeta = ({
/>
</defs>
</svg>
)}
</Colors>
);
const Triton = ({ fill = null, light = false, disabled = false, ...rest }) => (
<Colors white text grey>
{colors => (
const Triton = ({
fill = null,
light = false,
disabled = false,
colors = {},
...rest
}) => (
<svg
width="105"
height="19"
@ -74,8 +74,6 @@ const Triton = ({ fill = null, light = false, disabled = false, ...rest }) => (
d="M81 9.502C81 4.256 76.747.004 71.5.004V0C66.253.002 62 4.256 62 9.502S66.253 19 71.5 19 81 14.748 81 9.502zM16.227 1H.773A.773.773 0 0 0 0 1.772v3.094c0 .426.346.772.773.772h4.61c.421 0 .765.336.773.756v10.834c0 .426.346.772.773.772h3.093a.773.773 0 0 0 .773-.772V6.394c0-.426.346-.772.773-.772h4.68a.773.773 0 0 0 .752-.76v-3.09A.773.773 0 0 0 16.227 1zM33 1.772v3.094c0 .426-.35.772-.783.772h-6.723a.778.778 0 0 0-.784.773v10.817c0 .426-.35.772-.783.772h-3.14a.788.788 0 0 1-.726-.472.763.763 0 0 1-.061-.3V5.634C20.002 3.074 22.107 1 24.702 1h7.515c.432 0 .783.346.783.772zM40.167 1h-3.334c-.46 0-.833.346-.833.772v15.456c0 .426.373.772.833.772h3.334c.46 0 .833-.346.833-.772V1.772c0-.426-.373-.772-.833-.772zm3.605 0h15.456c.426 0 .772.346.772.772V4.85a.772.772 0 0 1-.772.772h-4.662a.772.772 0 0 0-.772.772v10.833a.772.772 0 0 1-.772.773H49.93a.775.775 0 0 1-.784-.773V6.394a.772.772 0 0 0-.772-.756h-4.6A.772.772 0 0 1 43 4.866V1.772c0-.426.346-.772.772-.772zM84 1.772A.77.77 0 0 1 84.77 1h11.61c2.55 0 4.618 2.074 4.62 4.634v11.594a.77.77 0 0 1-.769.772H97.15a.77.77 0 0 1-.77-.772V6.394a.77.77 0 0 0-.765-.772H89.39a.77.77 0 0 0-.77.772v10.834a.77.77 0 0 1-.769.772h-3.08a.77.77 0 0 1-.77-.772V1.772zM71.5 5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm31.112-3.854H103v.84h.314v-.753l.551.767.253-.014.551-.764v.764H105V1h-.446l-.551.767L103.49 1H102v.146h.388V2h.228l-.004-.854z"
/>
</svg>
)}
</Colors>
);
export default ({ beta = false, direction = 'down', style = {}, ...rest }) => (

6
packages/icons/src/user.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,11 +8,10 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
@ -31,6 +29,4 @@ export default ({
</svg>
)}
</Rotate>
)}
</Colors>
);

20
packages/my-joy-beta/package.json
View File

@ -6,14 +6,11 @@
"repository": "github:yldio/joyent-portal",
"main": "build/",
"scripts": {
"dev":
"REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
"dev": "REACT_APP_GQL_PORT=4000 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-ci":
"eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"lint":
"eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"lint-ci": "eslint . --ext .js --ext .md",
"lint": "eslint . --fix --ext .js --ext .md",
"test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
"test-ci": "npm run test",
"prepublish": "echo 0"
@ -28,7 +25,7 @@
"date-fns": "^1.29.0",
"declarative-redux-form": "^2.0.8",
"joyent-manifest-editor": "^1.4.0",
"joyent-ui-toolkit": "^4.0.1",
"joyent-ui-toolkit": "^4.4.1",
"lodash.find": "^4.6.0",
"lodash.get": "^4.4.2",
"lodash.isstring": "^4.0.1",
@ -40,7 +37,7 @@
"param-case": "^2.1.1",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-apollo": "^1.4.16",
"react-apollo": "^2.0.4",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-redux-values": "^1.0.2",
@ -50,7 +47,7 @@
"redux-actions": "^2.2.1",
"redux-form": "^7.2.0",
"remcalc": "^1.0.9",
"styled-components": "^2.3.0",
"styled-components": "^2.4.0",
"styled-components-spacing": "^2.1.3",
"styled-flex-component": "^2.1.0",
"title-case": "^2.1.1"
@ -62,9 +59,6 @@
"jest-styled-components": "^4.9.0",
"joyent-react-scripts": "^6.5.1",
"react-test-renderer": "^16.2.0",
"redrun": "^5.10.0",
"serve": "^6.4.1",
"stylelint": "^8.4.0",
"stylelint-config-joyent-portal": "^2.0.1"
"redrun": "^5.10.0"
}
}

3
packages/my-joy-beta/public/index.html
View File

@ -7,13 +7,14 @@
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>My Joyent &beta;</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="header"></div>
<div id="root"></div>
<script type="text/javascript" src="//localhost:3000/static/js/bundle.js"></script>
</body>
</html>

5
packages/my-joy-beta/src/app.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { Provider as ReduxProvider } from 'react-redux';
import { ApolloProvider } from 'react-apollo';
import { theme, RootContainer } from 'joyent-ui-toolkit';
@ -54,11 +55,13 @@ const fullTheme = {
};
export default () => (
<ApolloProvider client={client} store={store}>
<ApolloProvider client={client}>
<ThemeProvider theme={fullTheme}>
<ReduxProvider store={store}>
<RootContainer>
<Router />
</RootContainer>
</ReduxProvider>
</ThemeProvider>
</ApolloProvider>
);

4
packages/my-joy-beta/src/components/instances/key-value.js
View File

@ -8,7 +8,7 @@ import styled from 'styled-components';
import remcalc from 'remcalc';
import titleCase from 'title-case';
import Flex, { FlexItem } from 'styled-flex-component';
import Editor from 'joyent-ui-toolkit/dist/es/editor';
// import Editor from 'joyent-ui-toolkit/dist/es/editor';
import {
Message,
@ -50,7 +50,7 @@ class ValueTextareaField extends PureComponent {
const { input = {}, submitting } = this.props;
return input.value === 'user-script' ? (
<Field name="value" component={Editor} />
<Field name="value" component="textarea" />
) : (
<Textarea resize="vertical" disabled={submitting} fluid />
);

57
packages/my-joy-beta/src/components/navigation/header.js
View File

@ -1,57 +0,0 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import {
Header,
HeaderBrand,
TritonIcon,
DataCenterIcon,
UserIcon,
HeaderNav,
HeaderAnchor,
HeaderItem,
QueryBreakpoints
} from 'joyent-ui-toolkit';
const Logo = styled(TritonIcon)`
padding-top: ${remcalc(11)};
`;
const { Medium } = QueryBreakpoints;
export default () => (
<Header fluid>
<HeaderBrand beta>
<HeaderAnchor to="/">
<Logo beta light alt="Triton" />
</HeaderAnchor>
</HeaderBrand>
<Medium>
<HeaderNav>
<li>
<HeaderAnchor to="/">Compute</HeaderAnchor>
</li>
</HeaderNav>
</Medium>
<Medium>
<HeaderItem>
<HeaderAnchor href="https://my.joyent.com">
Return to existing portal
</HeaderAnchor>
</HeaderItem>
</Medium>
<HeaderItem>
<HeaderAnchor>
<DataCenterIcon light />eu-east-1
</HeaderAnchor>
</HeaderItem>
<Medium>
<HeaderItem>
<HeaderAnchor>
<UserIcon light />Nicola
</HeaderAnchor>
</HeaderItem>
</Medium>
</Header>
);

1
packages/my-joy-beta/src/components/navigation/index.js
View File

@ -1,2 +1 @@
export { default as Header } from './header';
export { default as Menu } from './menu';

5
packages/my-joy-beta/src/containers/create-instance/firewall.js
View File

@ -59,7 +59,8 @@ const Firewall = ({
tagRules={tagRules}
enabled={enabled}
/>
) : null}
) : null
}
</ReduxForm>
) : null}
{proceeded && !expanded ? (
@ -116,7 +117,7 @@ export default compose(
}
}),
props: ({ ownProps, data }) => {
const { enabled, showInactive } = ownProps;
const { showInactive } = ownProps;
const {
firewall_rules_create_machine = [],

6
packages/my-joy-beta/src/router.js
View File

@ -5,8 +5,8 @@ import get from 'lodash.get';
import { PageContainer } from 'joyent-ui-toolkit';
import { Breadcrumb, Menu } from '@containers/navigation';
import { Header } from '@components/navigation';
import Footer from '@components/navigation/footer';
import CreateInstance from '@containers/create-instance';
import {
List as Instances,
@ -19,14 +19,10 @@ import {
Snapshots as InstanceSnapshots,
Resize as InstanceResize
} from '@containers/instances';
import CreateInstance from '@containers/create-instance';
export default () => (
<BrowserRouter>
<PageContainer>
{/* Header */}
<Route path="*" component={Header} />
{/* Breadcrumb */}
<Switch>
<Route

1
packages/my-joy-beta/src/state/reducers/index.js
View File

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

3
packages/my-joy-beta/src/state/reducers/ui.js
View File

@ -1,3 +0,0 @@
import { handleActions } from 'redux-actions';
export default handleActions({}, {});

7
packages/my-joy-beta/src/state/state.js
View File

@ -1,7 +0,0 @@
export default {
ui: {
sections: {
instances: ['summary', 'tags', 'metadata', 'snapshots']
}
}
};

69
packages/my-joy-beta/src/state/store.js
View File

@ -1,66 +1,45 @@
import { reduxBatch } from '@manaflair/redux-batch';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { createStore, combineReducers, compose } from 'redux';
import { reducer as formReducer } from 'redux-form';
import { ApolloClient, createNetworkInterface } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { reducer as valuesReducer } from 'react-redux-values';
import { ui } from './reducers';
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_PROTOCOL = process.env.REACT_APP_GQL_PROTOCOL || 'https';
const GQL_HOSTNAME =
process.env.REACT_APP_GQL_HOSTNAME || GLOBAL.location.hostname;
const {
REACT_APP_GQL_PORT = 443,
REACT_APP_GQL_PROTOCOL = 'https',
REACT_APP_GQL_HOSTNAME = window.location.hostname
} = process.env;
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}/graphql`
cache: new InMemoryCache(),
link: new HttpLink({
uri: `${REACT_APP_GQL_PROTOCOL}://${REACT_APP_GQL_HOSTNAME}:${REACT_APP_GQL_PORT}/graphql`
})
});
const initialState = {
ui: {
sections: {
instances: ['summary', 'tags', 'metadata', 'snapshots']
}
}
};
export const store = createStore(
combineReducers({
values: valuesReducer,
apollo: client.reducer(),
form: formReducer,
ui
ui: (state = {}) => state
}),
state, // Initial state
initialState,
compose(
reduxBatch,
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__()
typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined'
? window.__REDUX_DEVTOOLS_EXTENSION__()
: f => f
)
);

3
packages/navigation/.babelrc Normal file
View File

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

2
packages/navigation/.eslintignore Normal file
View File

@ -0,0 +1,2 @@
build
dist

13
packages/navigation/.eslintrc Normal file
View File

@ -0,0 +1,13 @@
{
"extends": "joyent-portal",
"rules": {
"no-console": 0,
"new-cap": 0,
"camelcase": 1,
// temp
"no-undef": 1,
"no-debugger": 1,
"no-negated-condition": 0,
"jsx-a11y/href-no-hash": 0
}
}

62
packages/navigation/.gitignore vendored Normal file
View File

@ -0,0 +1,62 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Typescript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.js
.DS_Store
build

3
packages/navigation/.npmignore Normal file
View File

@ -0,0 +1,3 @@
*
!build/**
!lib/**

0
packages/navigation/.yarnclean Normal file
View File

373
packages/navigation/LICENSE Normal file
View File

@ -0,0 +1,373 @@
Mozilla Public License Version 2.0
==================================
1. Definitions
--------------
1.1. "Contributor"
means each individual or legal entity that creates, contributes to
the creation of, or owns Covered Software.
1.2. "Contributor Version"
means the combination of the Contributions of others (if any) used
by a Contributor and that particular Contributor's Contribution.
1.3. "Contribution"
means Covered Software of a particular Contributor.
1.4. "Covered Software"
means Source Code Form to which the initial Contributor has attached
the notice in Exhibit A, the Executable Form of such Source Code
Form, and Modifications of such Source Code Form, in each case
including portions thereof.
1.5. "Incompatible With Secondary Licenses"
means
(a) that the initial Contributor has attached the notice described
in Exhibit B to the Covered Software; or
(b) that the Covered Software was made available under the terms of
version 1.1 or earlier of the License, but not also under the
terms of a Secondary License.
1.6. "Executable Form"
means any form of the work other than Source Code Form.
1.7. "Larger Work"
means a work that combines Covered Software with other material, in
a separate file or files, that is not Covered Software.
1.8. "License"
means this document.
1.9. "Licensable"
means having the right to grant, to the maximum extent possible,
whether at the time of the initial grant or subsequently, any and
all of the rights conveyed by this License.
1.10. "Modifications"
means any of the following:
(a) any file in Source Code Form that results from an addition to,
deletion from, or modification of the contents of Covered
Software; or
(b) any new file in Source Code Form that contains any Covered
Software.
1.11. "Patent Claims" of a Contributor
means any patent claim(s), including without limitation, method,
process, and apparatus claims, in any patent Licensable by such
Contributor that would be infringed, but for the grant of the
License, by the making, using, selling, offering for sale, having
made, import, or transfer of either its Contributions or its
Contributor Version.
1.12. "Secondary License"
means either the GNU General Public License, Version 2.0, the GNU
Lesser General Public License, Version 2.1, the GNU Affero General
Public License, Version 3.0, or any later versions of those
licenses.
1.13. "Source Code Form"
means the form of the work preferred for making modifications.
1.14. "You" (or "Your")
means an individual or a legal entity exercising rights under this
License. For legal entities, "You" includes any entity that
controls, is controlled by, or is under common control with You. For
purposes of this definition, "control" means (a) the power, direct
or indirect, to cause the direction or management of such entity,
whether by contract or otherwise, or (b) ownership of more than
fifty percent (50%) of the outstanding shares or beneficial
ownership of such entity.
2. License Grants and Conditions
--------------------------------
2.1. Grants
Each Contributor hereby grants You a world-wide, royalty-free,
non-exclusive license:
(a) under intellectual property rights (other than patent or trademark)
Licensable by such Contributor to use, reproduce, make available,
modify, display, perform, distribute, and otherwise exploit its
Contributions, either on an unmodified basis, with Modifications, or
as part of a Larger Work; and
(b) under Patent Claims of such Contributor to make, use, sell, offer
for sale, have made, import, and otherwise transfer either its
Contributions or its Contributor Version.
2.2. Effective Date
The licenses granted in Section 2.1 with respect to any Contribution
become effective for each Contribution on the date the Contributor first
distributes such Contribution.
2.3. Limitations on Grant Scope
The licenses granted in this Section 2 are the only rights granted under
this License. No additional rights or licenses will be implied from the
distribution or licensing of Covered Software under this License.
Notwithstanding Section 2.1(b) above, no patent license is granted by a
Contributor:
(a) for any code that a Contributor has removed from Covered Software;
or
(b) for infringements caused by: (i) Your and any other third party's
modifications of Covered Software, or (ii) the combination of its
Contributions with other software (except as part of its Contributor
Version); or
(c) under Patent Claims infringed by Covered Software in the absence of
its Contributions.
This License does not grant any rights in the trademarks, service marks,
or logos of any Contributor (except as may be necessary to comply with
the notice requirements in Section 3.4).
2.4. Subsequent Licenses
No Contributor makes additional grants as a result of Your choice to
distribute the Covered Software under a subsequent version of this
License (see Section 10.2) or under the terms of a Secondary License (if
permitted under the terms of Section 3.3).
2.5. Representation
Each Contributor represents that the Contributor believes its
Contributions are its original creation(s) or it has sufficient rights
to grant the rights to its Contributions conveyed by this License.
2.6. Fair Use
This License is not intended to limit any rights You have under
applicable copyright doctrines of fair use, fair dealing, or other
equivalents.
2.7. Conditions
Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
in Section 2.1.
3. Responsibilities
-------------------
3.1. Distribution of Source Form
All distribution of Covered Software in Source Code Form, including any
Modifications that You create or to which You contribute, must be under
the terms of this License. You must inform recipients that the Source
Code Form of the Covered Software is governed by the terms of this
License, and how they can obtain a copy of this License. You may not
attempt to alter or restrict the recipients' rights in the Source Code
Form.
3.2. Distribution of Executable Form
If You distribute Covered Software in Executable Form then:
(a) such Covered Software must also be made available in Source Code
Form, as described in Section 3.1, and You must inform recipients of
the Executable Form how they can obtain a copy of such Source Code
Form by reasonable means in a timely manner, at a charge no more
than the cost of distribution to the recipient; and
(b) You may distribute such Executable Form under the terms of this
License, or sublicense it under different terms, provided that the
license for the Executable Form does not attempt to limit or alter
the recipients' rights in the Source Code Form under this License.
3.3. Distribution of a Larger Work
You may create and distribute a Larger Work under terms of Your choice,
provided that You also comply with the requirements of this License for
the Covered Software. If the Larger Work is a combination of Covered
Software with a work governed by one or more Secondary Licenses, and the
Covered Software is not Incompatible With Secondary Licenses, this
License permits You to additionally distribute such Covered Software
under the terms of such Secondary License(s), so that the recipient of
the Larger Work may, at their option, further distribute the Covered
Software under the terms of either this License or such Secondary
License(s).
3.4. Notices
You may not remove or alter the substance of any license notices
(including copyright notices, patent notices, disclaimers of warranty,
or limitations of liability) contained within the Source Code Form of
the Covered Software, except that You may alter any license notices to
the extent required to remedy known factual inaccuracies.
3.5. Application of Additional Terms
You may choose to offer, and to charge a fee for, warranty, support,
indemnity or liability obligations to one or more recipients of Covered
Software. However, You may do so only on Your own behalf, and not on
behalf of any Contributor. You must make it absolutely clear that any
such warranty, support, indemnity, or liability obligation is offered by
You alone, and You hereby agree to indemnify every Contributor for any
liability incurred by such Contributor as a result of warranty, support,
indemnity or liability terms You offer. You may include additional
disclaimers of warranty and limitations of liability specific to any
jurisdiction.
4. Inability to Comply Due to Statute or Regulation
---------------------------------------------------
If it is impossible for You to comply with any of the terms of this
License with respect to some or all of the Covered Software due to
statute, judicial order, or regulation then You must: (a) comply with
the terms of this License to the maximum extent possible; and (b)
describe the limitations and the code they affect. Such description must
be placed in a text file included with all distributions of the Covered
Software under this License. Except to the extent prohibited by statute
or regulation, such description must be sufficiently detailed for a
recipient of ordinary skill to be able to understand it.
5. Termination
--------------
5.1. The rights granted under this License will terminate automatically
if You fail to comply with any of its terms. However, if You become
compliant, then the rights granted under this License from a particular
Contributor are reinstated (a) provisionally, unless and until such
Contributor explicitly and finally terminates Your grants, and (b) on an
ongoing basis, if such Contributor fails to notify You of the
non-compliance by some reasonable means prior to 60 days after You have
come back into compliance. Moreover, Your grants from a particular
Contributor are reinstated on an ongoing basis if such Contributor
notifies You of the non-compliance by some reasonable means, this is the
first time You have received notice of non-compliance with this License
from such Contributor, and You become compliant prior to 30 days after
Your receipt of the notice.
5.2. If You initiate litigation against any entity by asserting a patent
infringement claim (excluding declaratory judgment actions,
counter-claims, and cross-claims) alleging that a Contributor Version
directly or indirectly infringes any patent, then the rights granted to
You by any and all Contributors for the Covered Software under Section
2.1 of this License shall terminate.
5.3. In the event of termination under Sections 5.1 or 5.2 above, all
end user license agreements (excluding distributors and resellers) which
have been validly granted by You or Your distributors under this License
prior to termination shall survive termination.
************************************************************************
* *
* 6. Disclaimer of Warranty *
* ------------------------- *
* *
* Covered Software is provided under this License on an "as is" *
* basis, without warranty of any kind, either expressed, implied, or *
* statutory, including, without limitation, warranties that the *
* Covered Software is free of defects, merchantable, fit for a *
* particular purpose or non-infringing. The entire risk as to the *
* quality and performance of the Covered Software is with You. *
* Should any Covered Software prove defective in any respect, You *
* (not any Contributor) assume the cost of any necessary servicing, *
* repair, or correction. This disclaimer of warranty constitutes an *
* essential part of this License. No use of any Covered Software is *
* authorized under this License except under this disclaimer. *
* *
************************************************************************
************************************************************************
* *
* 7. Limitation of Liability *
* -------------------------- *
* *
* Under no circumstances and under no legal theory, whether tort *
* (including negligence), contract, or otherwise, shall any *
* Contributor, or anyone who distributes Covered Software as *
* permitted above, be liable to You for any direct, indirect, *
* special, incidental, or consequential damages of any character *
* including, without limitation, damages for lost profits, loss of *
* goodwill, work stoppage, computer failure or malfunction, or any *
* and all other commercial damages or losses, even if such party *
* shall have been informed of the possibility of such damages. This *
* limitation of liability shall not apply to liability for death or *
* personal injury resulting from such party's negligence to the *
* extent applicable law prohibits such limitation. Some *
* jurisdictions do not allow the exclusion or limitation of *
* incidental or consequential damages, so this exclusion and *
* limitation may not apply to You. *
* *
************************************************************************
8. Litigation
-------------
Any litigation relating to this License may be brought only in the
courts of a jurisdiction where the defendant maintains its principal
place of business and such litigation shall be governed by laws of that
jurisdiction, without reference to its conflict-of-law provisions.
Nothing in this Section shall prevent a party's ability to bring
cross-claims or counter-claims.
9. Miscellaneous
----------------
This License represents the complete agreement concerning the subject
matter hereof. If any provision of this License is held to be
unenforceable, such provision shall be reformed only to the extent
necessary to make it enforceable. Any law or regulation which provides
that the language of a contract shall be construed against the drafter
shall not be used to construe this License against a Contributor.
10. Versions of the License
---------------------------
10.1. New Versions
Mozilla Foundation is the license steward. Except as provided in Section
10.3, no one other than the license steward has the right to modify or
publish new versions of this License. Each version will be given a
distinguishing version number.
10.2. Effect of New Versions
You may distribute the Covered Software under the terms of the version
of the License under which You originally received the Covered Software,
or under the terms of any subsequent version published by the license
steward.
10.3. Modified Versions
If you create software not governed by this License, and you want to
create a new license for such software, you may create and use a
modified version of this License if you rename the license and remove
any references to the name of the license steward (except to note that
such modified license differs from this License).
10.4. Distributing Source Code Form that is Incompatible With Secondary
Licenses
If You choose to distribute Source Code Form that is Incompatible With
Secondary Licenses under the terms of this version of the License, the
notice described in Exhibit B of this License must be attached.
Exhibit A - Source Code Form License Notice
-------------------------------------------
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
If it is not possible or desirable to put the notice in a particular
file, then You may include the notice in a location (such as a LICENSE
file in a relevant directory) where a recipient would be likely to look
for such a notice.
You may add additional accurate notices of copyright ownership.
Exhibit B - "Incompatible With Secondary Licenses" Notice
---------------------------------------------------------
This Source Code Form is "Incompatible With Secondary Licenses", as
defined by the Mozilla Public License, v. 2.0.

1
packages/navigation/README.md Normal file
View File

@ -0,0 +1 @@
# minio-proto-ui

44
packages/navigation/package.json Normal file
View File

@ -0,0 +1,44 @@
{
"name": "joyent-navigation",
"version": "1.0.0",
"license": "MPL-2.0",
"main": "src",
"scripts": {
"dev": "PREACT=1 NODE_ENV=development joyent-react-scripts start",
"build": "PREACT=1 NODE_ENV=production joyent-react-scripts build",
"test": "NODE_ENV=test joyent-react-scripts test",
"test-ci": "npm run test",
"fmt": "prettier --write --single-quote *.md src/**/*.js src/**/*.gql",
"lint-ci": "eslint . --ext .js --ext .md",
"lint": "eslint . --fix --ext .js --ext .md"
},
"dependencies": {
"apollo-cache-inmemory": "^1.1.5",
"apollo-client": "^2.2.0",
"apollo-link": "^1.0.7",
"apollo-link-http": "^1.3.2",
"apollo-link-state": "^0.3.1",
"emotion": "^8.0.12",
"emotion-theming": "^8.0.12",
"graphql-tag": "^2.6.1",
"joyent-icons": "^3.0.0",
"joyent-ui-toolkit": "^4.4.2",
"lodash.chunk": "^4.2.0",
"outy": "^0.1.2",
"param-case": "^2.1.1",
"pascal-case": "^2.0.1",
"preact": "^8.2.7",
"preact-compat": "^3.17.0",
"preact-emotion": "^8.0.12",
"preact-emotion-flexboxgrid": "^1.0.1",
"react-apollo": "^2.0.4",
"remcalc": "^1.0.9"
},
"devDependencies": {
"babel-eslint": "^8.2.1",
"babel-preset-joyent-portal": "^6.0.1",
"eslint": "^4.15.0",
"eslint-config-joyent-portal": "^3.2.0",
"joyent-react-scripts": "^6.5.1"
}
}

24
packages/navigation/public/index.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:400,500,600');
html, body {
margin: 0;
font-display: optional;
font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
font-weight: 400;
background-color: #F7F7F7;
}
</style>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="header"></div>
</body>
</html>

37
packages/navigation/src/app.js Normal file
View File

@ -0,0 +1,37 @@
import React from 'react';
import { ApolloProvider } from 'react-apollo';
import { ThemeProvider } from 'emotion-theming';
import theme from 'joyent-ui-toolkit/dist/es/theme';
import { client } from './state';
import Header from './header';
const fullTheme = {
...theme,
flexboxgrid: {
gridSize: 12, // rem
gutterWidth: 1.25, // rem
outerMargin: 1.875, // rem
mediaQuery: 'only screen',
container: {
sm: 46, // rem
md: 56, // rem
lg: 59 // rem
},
breakpoints: {
xs: 0, // em
sm: 48, // em
md: 64, // em
lg: 75 // em
}
}
};
export default () => (
<ApolloProvider client={client}>
<ThemeProvider theme={fullTheme}>
<Header />
</ThemeProvider>
</ApolloProvider>
);

14
packages/navigation/src/components/avatar.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
import emotion from 'preact-emotion';
import remcalc from 'remcalc';
const Img = emotion('img')`
width: ${remcalc(24)};
`;
export default props => (
<Img
{...props}
src="data:image/png;base64,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"
/>
);

19
packages/navigation/src/components/datacenter.js Normal file
View File

@ -0,0 +1,19 @@
import emotion from 'preact-emotion';
import remcalc from 'remcalc';
import { Category } from './service';
export const Place = emotion(Category)`
margin-bottom: ${remcalc(10)};
`;
export const Region = emotion('h6')`
margin: ${remcalc(6)} 0;
font-size: ${remcalc(13)};
line-height: ${remcalc(18)};
font-weight: ${props => props.theme.font.weight.normal};
color: #494949;
`;
export { Name as default } from './service';

165
packages/navigation/src/components/header.js Normal file
View File

@ -0,0 +1,165 @@
import { findDOMNode } from 'react-dom';
import React, { PureComponent } from 'react';
import emotion from 'preact-emotion';
import remcalc from 'remcalc';
import outy from 'outy';
import { breakpoints } from 'joyent-ui-toolkit/dist/es/breakpoints/screens';
export const Item = emotion('div')`
order: 0;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
padding: ${remcalc(12)} ${remcalc(18)};
cursor: pointer;
height: ${remcalc(24)};
&:hover {
background-color: rgba(0, 0, 0, 0.25);
}
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
align-items: center;
${props =>
props.active &&
`
height: ${remcalc(27)};
border-bottom: ${remcalc(3)} solid #E38200;
background-color: rgba(0, 0, 0, 0.25);
`};
`;
export const FlexibleSpace = emotion(Item)`
flex-grow: 1;
&:hover {
background-color: transparent;
}
`;
export const Content = emotion('div')`
flex: 1 1 auto;
align-self: center;
display: flex;
font-size: ${remcalc(15)};
line-height: ${remcalc(24)};
font-weight: ${props => props.theme.font.weight.semibold};
color: ${props => props.theme.white};
@media (max-width: ${remcalc(breakpoints.small.upper)}) {
display: none;
}
`;
export const SubContent = emotion('span')`
font-size: ${remcalc(15)};
line-height: ${remcalc(24)};
font-weight: ${props => props.theme.font.weight.normal};
color: rgba(255, 255, 255, 0.5);
`;
export const Icon = emotion('div')`
display: flex;
flex: 0 0 auto;
align-self: auto;
justify-content: center;
align-items: center;
${props =>
!props.marginless &&
`
margin-left: ${remcalc(6)};
`};
`;
export const Divider = emotion('div')`
order: 0;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
background-color: black;
flex: 0 1 ${remcalc(1)};
height: ${remcalc(36)};
`;
export const Row = emotion('div')`
display: flex;
align-items: center;
width: 100%;
height: ${remcalc(48)};
position: absolute;
top: 0;
left: 0;
z-index: 3;
`;
const Header = emotion('header')`
background-color: #1e313b;
width: 100%;
height: ${remcalc(48)};
`;
export default class extends PureComponent {
_refs = {};
_ref = name => c => {
Object.assign(this._refs, { [name]: findDOMNode(c) });
};
_removeOutsideTap = () => {
return this.outsideTap && this.outsideTap.remove();
};
_setOusideTap = () => {
if (!this.props.onOutsideClick) {
return;
}
const elements = Object.values(this._refs);
this._removeOutsideTap();
if (!elements.length) {
return;
}
this.outsideTap = outy(
elements,
['click', 'touchend'],
this.props.onOutsideClick
);
};
componentDidMount = () => {
this._setOusideTap();
};
componentDidUpdate = () => {
this._setOusideTap();
};
componentWillUnmount = () => {
this._removeOutsideTap();
};
render() {
const { children, ...props } = this.props;
return (
<Header {...props} innerRef={this._ref('overlay')}>
{children}
</Header>
);
}
}

15
packages/navigation/src/components/icons.js Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import { withTheme } from 'emotion-theming';
import BaseDataCenter from 'joyent-icons/dist/es/data-center';
import BaseTriton from 'joyent-icons/dist/es/triton';
import BaseServices from 'joyent-icons/dist/es/services';
const Colors = Component =>
withTheme(({ theme = {}, ...rest }) => (
<Component {...rest} colors={theme} />
));
export const DataCenter = Colors(BaseDataCenter);
export const Services = Colors(BaseServices);
export const Triton = Colors(BaseTriton);

33
packages/navigation/src/components/index.js Normal file
View File

@ -0,0 +1,33 @@
export { default as Avatar } from './avatar';
export {
default as Datacenter,
Region as DatacenterRegion,
Place as DatacenterPlace
} from './datacenter';
export {
default as Header,
Row as HeaderRow,
Item as HeaderItem,
Content as HeaderItemContent,
Icon as HeaderItemIcon,
FlexibleSpace as HeaderFlexibleSpaceItem,
Divider as HeaderDividerItem,
SubContent as HeaderItemSubContent
} from './header';
export {
DataCenter as DataCenterIcon,
Services as ServicesIcon,
Triton as TritonIcon
} from './icons';
export {
default as Service,
Name as ServiceName,
Description as ServiceDescription,
Category as ServiceCategory
} from './service';
export { default as Overlay } from './overlay';

15
packages/navigation/src/components/overlay.js Normal file
View File

@ -0,0 +1,15 @@
import emotion from 'preact-emotion';
import remcalc from 'remcalc';
export default emotion('div')`
border-bottom: ${remcalc(1)} solid #d8d8d8;
width: 100%;
position: absolute;
z-index: 1;
top: ${remcalc(48)};
left: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
`;

35
packages/navigation/src/components/service.js Normal file
View File

@ -0,0 +1,35 @@
import emotion from 'preact-emotion';
import remcalc from 'remcalc';
export const Category = emotion('h4')`
font-size: ${remcalc(15)};
line-height: ${remcalc(24)};
font-weight: ${props => props.theme.font.weight.semibold};
padding-bottom: ${remcalc(6)};
color: #979797;
border-bottom: ${remcalc(1)} solid #f7f7f7;
margin: 0 0 ${remcalc(22)} 0;
`;
export const Name = emotion(Category)`
font-size: ${remcalc(15)};
line-height: ${remcalc(24)};
font-weight: ${props => props.theme.font.weight.semibold};
color: #494949;
border-bottom: none;
padding-bottom: 0;
margin: 0;
`;
export const Description = emotion('h6')`
font-size: ${remcalc(13)};
line-height: ${remcalc(18)};
font-weight: ${props => props.theme.font.weight.normal};
color: #979797;
margin: 0;
`;
export default emotion('a')`
display: block;
margin-bottom: ${remcalc(22)};
`;

107
packages/navigation/src/containers/datacenter.js Normal file
View File

@ -0,0 +1,107 @@
import React from 'react';
import emotion from 'preact-emotion';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
import remcalc from 'remcalc';
import { Grid, Row, Col } from 'preact-emotion-flexboxgrid';
import {
DatacenterPlace,
DatacenterRegion,
Datacenter,
Overlay
} from '../components';
const Container = emotion('div')`
background-color: #ffffff;
`;
const TitleContainer = emotion('div')`
background-color: ${props => props.theme.background};
`;
const RegionContainer = emotion('div')`
padding-top: ${remcalc(18)};
padding-bottom: ${remcalc(24)};
`;
const getDatacenters = gql`
{
regions @client {
name
slug
}
places @client {
name
slug
region
}
datacenters @client {
name
slug
place
}
}
`;
const Datacenters = ({ regions = [] }) => (
<Overlay>
{regions.map(({ name, slug, places }) => (
<div key={slug}>
<TitleContainer>
<Grid>
<Row>
<Col>
<DatacenterRegion>{name}</DatacenterRegion>
</Col>
</Row>
</Grid>
</TitleContainer>
<Container>
<Grid>
<RegionContainer>
<Row>
{places.map(({ name, slug, datacenters }) => (
<Col key={slug} xs={12} md={6} lg={3}>
<DatacenterPlace>{name}</DatacenterPlace>
{datacenters.map(({ name, slug }) => (
<Datacenter key={slug}>{name}</Datacenter>
))}
</Col>
))}
</Row>
</RegionContainer>
</Grid>
</Container>
</div>
))}
</Overlay>
);
export default compose(
graphql(getDatacenters, {
props: ({ data }) => {
const {
regions = [],
places = [],
datacenters = [],
loading = false,
error = null
} = data;
const _regions = regions.map(({ slug, ...region }) => ({
...region,
places: places
.filter(({ region }) => region === slug)
.map(({ slug, ...place }) => ({
...place,
datacenters: datacenters.filter(({ place }) => place === slug),
slug
})),
slug
}));
return { regions: _regions, loading, error };
}
})
)(Datacenters);

2
packages/navigation/src/containers/index.js Normal file
View File

@ -0,0 +1,2 @@
export { default as Services } from './services';
export { default as Datacenter } from './datacenter';

81
packages/navigation/src/containers/services.js Normal file
View File

@ -0,0 +1,81 @@
import React from 'react';
import emotion from 'preact-emotion';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
import chunk from 'lodash.chunk';
import remcalc from 'remcalc';
import { Grid, Row, Col } from 'preact-emotion-flexboxgrid';
import {
ServiceCategory,
ServiceName,
ServiceDescription,
Service,
Overlay
} from '../components';
const Container = emotion('div')`
padding-top: ${remcalc(30)};
background-color: #ffffff;
`;
const getHeader = gql`
{
categories @client {
name
slug
}
services @client {
name
description
category
slug
}
}
`;
const Services = ({ categories = [] }) => (
<Overlay>
<Container>
<Grid>
{chunk(categories, 4).map(chunk => (
<Row>
{chunk.map(({ name, services }) => (
<Col xs={12} md={6} lg={3}>
<ServiceCategory>{name}</ServiceCategory>
{services.map(({ name, description }) => (
<Service>
<ServiceName>{name}</ServiceName>
<ServiceDescription>{description}</ServiceDescription>
</Service>
))}
</Col>
))}
</Row>
))}
</Grid>
</Container>
</Overlay>
);
export default compose(
graphql(getHeader, {
props: ({ data }) => {
const {
categories = [],
services = [],
loading = false,
error = null
} = data;
const _categories = categories.map(({ slug, ...category }) => ({
...category,
services: services.filter(({ category }) => category === slug),
slug
}));
return { categories: _categories, loading, error };
}
})
)(Services);

118
packages/navigation/src/header.js Normal file
View File

@ -0,0 +1,118 @@
import React from 'react';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
import pascalCase from 'pascal-case';
import { DataCenterIcon, TritonIcon, ServicesIcon } from './components';
import * as Overlays from './containers';
import {
Avatar,
Header,
HeaderRow,
HeaderItem,
HeaderItemContent,
HeaderItemSubContent,
HeaderItemIcon,
HeaderFlexibleSpaceItem,
HeaderDividerItem
} from './components';
const updateHeaderMutation = gql`
mutation updateHeader($isOpen: Boolean!, $activePanel: String!) {
updateHeader(isOpen: $isOpen, activePanel: $activePanel) @client
}
`;
const getHeader = gql`
{
isOpen @client
activePanel @client
}
`;
const Panel = ({ name = '', expanded = false, children, ...rest }) => {
if (!expanded) {
return null;
}
const overlay = Overlays[pascalCase(name)];
if (!overlay) {
return null;
}
return React.createElement(overlay, rest, children);
};
const Navigation = ({ toggleSectionOpen, isOpen, activePanel }) => (
<Header onOutsideClick={() => toggleSectionOpen()}>
<HeaderRow>
<HeaderItem>
<TritonIcon light />
</HeaderItem>
<HeaderDividerItem />
<HeaderItem
onClick={() => toggleSectionOpen('services')}
active={isOpen && activePanel === 'services'}
>
<HeaderItemContent>Services</HeaderItemContent>
<HeaderItemIcon>
<ServicesIcon light />
</HeaderItemIcon>
</HeaderItem>
<HeaderDividerItem />
<HeaderFlexibleSpaceItem />
<HeaderDividerItem />
<HeaderItem
onClick={() => toggleSectionOpen('datacenter')}
active={isOpen && activePanel === 'datacenter'}
>
<HeaderItemContent>
<HeaderItemSubContent>Data Center:</HeaderItemSubContent> us-east-1
</HeaderItemContent>
<HeaderItemIcon>
<DataCenterIcon light />
</HeaderItemIcon>
</HeaderItem>
<HeaderDividerItem />
<HeaderItem>
<HeaderItemContent>
<HeaderItemSubContent>Account:</HeaderItemSubContent> George
</HeaderItemContent>
<HeaderItemIcon>
<Avatar />
</HeaderItemIcon>
</HeaderItem>
</HeaderRow>
<Panel expanded={isOpen} name={activePanel} />
</Header>
);
export default compose(
graphql(getHeader, {
props: ({ data }) => {
const {
isOpen = false,
activePanel = '',
loading = false,
error = null
} = data;
return { isOpen, activePanel, loading, error };
}
}),
graphql(updateHeaderMutation, {
props: ({ mutate, ownProps }) => ({
toggleSectionOpen: (name = '') => {
const { isOpen, activePanel } = ownProps;
return mutate({
variables: {
isOpen: !(isOpen && name === activePanel),
activePanel: name
}
});
}
})
})
)(Navigation);

6
packages/navigation/src/index.js Normal file
View File

@ -0,0 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
ReactDOM.render(<App />, document.getElementById('header'));

29
packages/navigation/src/state/client.js Normal file
View File

@ -0,0 +1,29 @@
import ApolloClient from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { ApolloLink } from 'apollo-link';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { withClientState } from 'apollo-link-state';
import defaultState from './local';
const {
REACT_APP_GQL_PORT = 443,
REACT_APP_GQL_PROTOCOL = 'https',
REACT_APP_GQL_HOSTNAME = window.location.hostname
} = process.env;
const URI = `${REACT_APP_GQL_PROTOCOL}://${REACT_APP_GQL_HOSTNAME}:${REACT_APP_GQL_PORT}/graphql`;
const cache = new InMemoryCache();
const remote = new HttpLink({ uri: URI });
const local = withClientState({
cache,
...defaultState
});
export default new ApolloClient({
addTypename: true,
link: ApolloLink.from([local, remote]),
cache
});

2
packages/navigation/src/state/index.js Normal file
View File

@ -0,0 +1,2 @@
export { default as client } from './client';
export { default as local } from './local';

208
packages/navigation/src/state/local.js Normal file
View File

@ -0,0 +1,208 @@
import paramCase from 'param-case';
const dataSlugFromObjects = (arr = []) =>
arr.map(({ name, ...obj }) => ({
...obj,
name,
slug: paramCase(name)
}));
export default {
resolvers: {
Mutation: {
updateHeader: (_, { isOpen, activePanel }, { cache }) => {
cache.writeData({ data: { isOpen, activePanel } });
}
}
},
defaults: {
isOpen: false,
activePanel: '',
regions: dataSlugFromObjects([
{
name: 'Americas',
__typename: 'Region'
},
{
name: 'Europe',
__typename: 'Region'
},
{
name: 'Asia',
__typename: 'Region'
}
]),
places: dataSlugFromObjects([
{
name: 'Ashburn, Virginia, USA',
region: 'americas',
__typename: 'Place'
},
{
name: 'Las Vegas, Nevada, USA',
region: 'americas',
__typename: 'Place'
},
{
name: 'Emeryville, California, USA',
region: 'americas',
__typename: 'Place'
},
{
name: 'Amsterdam, Netherlands',
region: 'europe',
__typename: 'Place'
},
{
name: 'Singapore',
region: 'asia',
__typename: 'Place'
},
{
name: 'Seoul, South Korea',
region: 'asia',
__typename: 'Place'
}
]),
datacenters: dataSlugFromObjects([
{
name: 'us-east-1',
place: 'ashburn-virginia-usa',
__typename: 'Datacenter'
},
{
name: 'us-east-2',
place: 'ashburn-virginia-usa',
__typename: 'Datacenter'
},
{
name: 'us-east-3',
place: 'ashburn-virginia-usa',
__typename: 'Datacenter'
},
{
name: 'us-west-1',
place: 'emeryville-california-usa',
__typename: 'Datacenter'
},
{
name: 'us-sw-1',
place: 'las-vegas-nevada-usa',
__typename: 'Datacenter'
},
{
name: 'eu-ams-1',
place: 'amsterdam-netherlands',
__typename: 'Datacenter'
}
]),
categories: dataSlugFromObjects([
{
name: 'Compute',
__typename: 'Category'
},
{
name: 'Network',
__typename: 'Category'
},
{
name: 'Storage',
__typename: 'Category'
},
{
name: 'Access',
__typename: 'Category'
},
{
name: 'Help & Support',
__typename: 'Category'
}
]),
services: dataSlugFromObjects([
{
name: 'VMs & Containers',
description: 'Run VMs and bare metal containers',
category: 'compute',
__typename: 'Service'
},
{
name: 'Converged Analytics',
description: 'Map reduce and ETL on your objects',
category: 'compute',
__typename: 'Service'
},
{
name: 'VLANs',
description: 'Wire your appliction your way',
category: 'network',
__typename: 'Service'
},
{
name: 'Subnets',
description: 'A network for everything',
category: 'network',
__typename: 'Service'
},
{
name: 'Firewall Rules',
description: 'Control the bits coming and going',
category: 'network',
__typename: 'Service'
},
{
name: 'Service Status',
description: 'Write here about Service Status',
category: 'help-support',
__typename: 'Service'
},
{
name: 'Contact Support',
description: 'Chat to us via phone or email',
category: 'help-support',
__typename: 'Service'
},
{
name: 'Support Plans',
description: 'Write here about Support Plans',
category: 'help-support',
__typename: 'Service'
},
{
name: 'Getting Started',
description: 'Write here about Getting Started',
category: 'help-support',
__typename: 'Service'
},
{
name: 'Triton Object Storage',
description: 'Modern cloud object storage',
category: 'storage',
__typename: 'Service'
},
{
name: 'S3 Compatibility Bridge',
description: 'Modern storage, legacy compatibility',
category: 'storage',
__typename: 'Service'
},
{
name: 'Triton Volumes',
description: 'Network filesystems for your apps',
category: 'storage',
__typename: 'Service'
},
{
name: 'Role Based Access Control',
description: 'Manage users within your account',
category: 'access',
__typename: 'Service'
},
{
name: 'Firewall Rules',
description: 'Inspect all the bytes',
category: 'access',
__typename: 'Service'
}
])
}
};

8254
packages/navigation/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff

9
packages/ui-toolkit/package.json
View File

@ -1,6 +1,6 @@
{
"name": "joyent-ui-toolkit",
"version": "4.0.1",
"version": "4.4.2",
"license": "MPL-2.0",
"repository": "github:yldio/joyent-portal",
"main": "dist/umd/index.js",
@ -22,7 +22,7 @@
"dependencies": {
"camel-case": "^3.0.0",
"joy-react-broadcast": "^0.6.9",
"joyent-icons": "^2.1.0",
"joyent-icons": "^3.0.0",
"lodash.isboolean": "^3.0.3",
"lodash.isundefined": "^3.0.1",
"normalized-styled-components": "^1.0.17",
@ -55,14 +55,11 @@
"react-styleguidist": "^6.0.33",
"react-test-renderer": "^16.2.0",
"redrun": "^5.10.0",
"redux": "^3.7.2",
"stylelint": "^8.4.0",
"stylelint-config-joyent-portal": "^2.0.1",
"webpack": "^3.10.0"
},
"peerDependencies": {
"joyent-manifest-editor": "^1.4.0",
"codemirror": "^5.32.0",
"joyent-manifest-editor": "^1.4.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}

5
packages/ui-toolkit/src/base/global.js
View File

@ -11,8 +11,9 @@ export default ({ theme }) => css`
html, body {
font-display: optional;
font-family: ${theme.font
.family}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
font-family: ${
theme.font.family
}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
font-weight: ${theme.font.weight.normal};
}

72
packages/ui-toolkit/src/breakpoints/index.js
View File

@ -1,69 +1,3 @@
import React from 'react';
import { css } from 'styled-components';
import MediaQuery from 'react-responsive';
import remcalc from 'remcalc';
import pascalCase from 'pascal-case';
export const breakpoints = {
small: {
upper: 767
},
medium: {
upper: 1023,
lower: 768
},
large: {
upper: 1199,
lower: 1024
},
xlarge: {
lower: 1200
}
};
const screens = {
// >= 768px
smallOnly: `only screen and (max-width: ${remcalc(breakpoints.small.upper)})`,
small: `only screen and (min-width: ${remcalc(breakpoints.small.upper)})`,
// >= 1024px
mediumOnly: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})
and (max-width: ${remcalc(breakpoints.medium.upper)})`,
mediumDown: `only screen and (max-width: ${remcalc(
breakpoints.medium.upper
)})`,
medium: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})`,
// >= 1200px
largeOnly: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})
and (max-width: ${remcalc(breakpoints.large.upper)})`,
largeDown: `only screen and (max-width: ${remcalc(breakpoints.large.upper)})`,
large: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})`,
xlarge: `only screen and (min-width: ${remcalc(breakpoints.xlarge.lower)})
and (max-width: ${remcalc(breakpoints.xlarge.upper)})`,
xlargeUp: `only screen and (min-width: ${remcalc(breakpoints.xlarge.lower)})`
};
const breakpoint = label => (...args) => css`
@media ${screens[label]} {
${css(...args)};
}
`;
const toQuery = label => ({ children, ...rest }) => (
<MediaQuery query={screens[label]}>{children}</MediaQuery>
);
export const styled = Object.keys(screens).reduce(
(sum, label) => ({
...sum,
[label]: breakpoint(label)
}),
{}
);
export const query = Object.keys(screens).reduce(
(sum, label) => ({
...sum,
[pascalCase(label)]: toQuery(label)
}),
{}
);
export { default as query } from './query';
export { default as screens, breakpoints } from './screens';
export { default as styled } from './styled';

17
packages/ui-toolkit/src/breakpoints/query.js Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import MediaQuery from 'react-responsive';
import pascalCase from 'pascal-case';
import screens from './screens';
const toQuery = label => ({ children, ...rest }) => (
<MediaQuery query={screens[label]}>{children}</MediaQuery>
);
export default Object.keys(screens).reduce(
(sum, label) => ({
...sum,
[pascalCase(label)]: toQuery(label)
}),
{}
);

39
packages/ui-toolkit/src/breakpoints/screens.js Normal file
View File

@ -0,0 +1,39 @@
import remcalc from 'remcalc';
export const breakpoints = {
small: {
upper: 767
},
medium: {
upper: 1023,
lower: 768
},
large: {
upper: 1199,
lower: 1024
},
xlarge: {
lower: 1200
}
};
export default {
// >= 768px
smallOnly: `only screen and (max-width: ${remcalc(breakpoints.small.upper)})`,
small: `only screen and (min-width: ${remcalc(breakpoints.small.upper)})`,
// >= 1024px
mediumOnly: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})
and (max-width: ${remcalc(breakpoints.medium.upper)})`,
mediumDown: `only screen and (max-width: ${remcalc(
breakpoints.medium.upper
)})`,
medium: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})`,
// >= 1200px
largeOnly: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})
and (max-width: ${remcalc(breakpoints.large.upper)})`,
largeDown: `only screen and (max-width: ${remcalc(breakpoints.large.upper)})`,
large: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})`,
xlarge: `only screen and (min-width: ${remcalc(breakpoints.xlarge.lower)})
and (max-width: ${remcalc(breakpoints.xlarge.upper)})`,
xlargeUp: `only screen and (min-width: ${remcalc(breakpoints.xlarge.lower)})`
};

17
packages/ui-toolkit/src/breakpoints/styled.js Normal file
View File

@ -0,0 +1,17 @@
import { css } from 'styled-components';
import screens from './screens';
const breakpoint = label => (...args) => css`
@media ${screens[label]} {
${css(...args)};
}
`;
export default Object.keys(screens).reduce(
(sum, label) => ({
...sum,
[label]: breakpoint(label)
}),
{}
);

13
packages/ui-toolkit/src/form/base/input.js
View File

@ -5,15 +5,19 @@ import remcalc from 'remcalc';
import is, { isNot } from 'styled-is';
import PropTypes from 'prop-types';
const colorWithDisabled = props => (props.disabled ? props.theme.disabled : props.theme.text);
const colorWithDisabled = props =>
props.disabled ? props.theme.disabled : props.theme.text;
const colorWithDefaultValue = props =>
props.value === props.defaultValue ? props.theme.disabled : colorWithDisabled(props);
props.value === props.defaultValue
? props.theme.disabled
: colorWithDisabled(props);
const color = props =>
props.defaultValue ? colorWithDefaultValue(props) : colorWithDisabled(props);
const height = props => (props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48));
const height = props =>
props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48);
const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
@ -230,7 +234,8 @@ BaseInput.propTypes = {
export default BaseInput;
export const Stylable = Component => {
const stylable = typeof Component === 'string' ? styled[Component] : styled(Component);
const stylable =
typeof Component === 'string' ? styled[Component] : styled(Component);
return stylable`
${style}

13
packages/ui-toolkit/src/form/base/toggle.js
View File

@ -138,12 +138,10 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
[type]: true
};
const render = (
{
const render = ({
id, // ignore id from value
...oldValue
} = {}
) => {
} = {}) => {
const newValue = {
...oldValue,
id: rndId()
@ -163,7 +161,12 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
const toggle = (
<InnerContainer {...types} type={type} {...rest}>
<StyledInput {...rest} id={newValue.id} type={type} checked={checked} />
<StyledInput
{...rest}
id={newValue.id}
type={type}
checked={checked}
/>
<Label
{...types}
htmlFor={newValue.id}

8
packages/ui-toolkit/src/form/toggle.js
View File

@ -84,8 +84,8 @@ const InputLabel = styled.label`
left: 0;
border-radius: 2em;
background: ${props => props.theme.white};
transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease,
margin 0.3s ease, box-shadow 0.3s ease;
transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
padding 0.3s ease, margin 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey};
}
@ -154,6 +154,8 @@ const BaseToggle = BaseInput(({ children, ...rest }) => {
/**
* @example ./usage-toggle.md
*/
const Toggle = ({ children, ...rest }) => <BaseToggle {...rest}>{children}</BaseToggle>;
const Toggle = ({ children, ...rest }) => (
<BaseToggle {...rest}>{children}</BaseToggle>
);
export default Toggle;

37
packages/ui-toolkit/src/header/brand.js
View File

@ -1,37 +0,0 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import is from 'styled-is';
import { H2 } from '../text/headings';
const Brand = H2.extend`
text-transform: uppercase;
color: ${props => props.theme.white};
font-size: ${remcalc(29)};
margin: 0 auto;
${is('center')`
display: flex;
align-items: center;
justify-content: center;
`};
`;
const Box = styled.div`
align-self: stretch;
order: 0;
width: ${remcalc(150)};
display: flex;
&:hover,
&.active {
background: rgba(255, 255, 255, 0.15);
}
`;
export default ({ children, ...rest }) => (
<Box {...rest}>
<Brand {...rest}>{children}</Brand>
</Box>
);

49
packages/ui-toolkit/src/header/index.js
View File

@ -1,49 +0,0 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import is from 'styled-is';
import Baseline from '../baseline';
import { ViewContainer } from '../layout';
const Container = ViewContainer.extend`
display: flex;
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
`;
const Header = styled.div`
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
background-color: ${props => props.theme.brandBackground};
max-height: ${remcalc(53)};
min-height: ${remcalc(53)};
line-height: ${remcalc(25)};
${is('fixed')`
position: fixed;
left: 0;
right: 0;
`};
${is('bottom', 'fixed')`
bottom: 0;
`};
`;
/**
* @example ./usage.md
*/
export default Baseline(({ children, fluid, ...rest }) => (
<Header {...rest}>
<Container fluid={fluid}>{children}</Container>
</Header>
));
export { default as HeaderItem, Anchor as HeaderAnchor } from './item';
export { default as HeaderBrand } from './brand';
export { default as HeaderNav } from './nav';

60
packages/ui-toolkit/src/header/item.js
View File

@ -1,60 +0,0 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import BaseAnchor from '../anchor';
import P from '../text/p';
const Text = P.extend`
text-align: center;
color: ${props => props.theme.white};
-webkit-text-fill-color: currentcolor;
margin: 0;
`;
const Box = styled.section`
flex: 0 1 auto;
align-self: auto;
order: 0;
display: flex;
align-items: center;
padding: 0 ${remcalc(18)};
svg {
margin-right: ${remcalc(6)};
}
&:not(:last-of-type) {
border-right: ${remcalc(1)} solid rgba(255, 255, 255, 0.15);
}
&:first-of-type {
margin-left: auto;
}
&:hover,
&.active {
background: rgba(255, 255, 255, 0.15);
}
`;
export const Anchor = styled(BaseAnchor)`
padding: ${remcalc(15)} 0;
line-height: ${remcalc(24)};
font-size: ${remcalc(15)};
color: ${props => props.theme.white};
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
transition: all 200ms ease;
max-height: ${remcalc(53)};
min-height: ${remcalc(53)};
box-sizing: border-box;
`;
export default ({ children, ...rest }) => (
<Box {...rest}>
<Text>{children}</Text>
</Box>
);

10
packages/ui-toolkit/src/header/nav.js
View File

@ -1,10 +0,0 @@
import styled from 'styled-components';
export default styled.ul`
padding: 0;
margin: 0;
display: flex;
list-style: none;
color: ${props => props.theme.white};
-webkit-text-fill-color: currentcolor;
`;

Some files were not shown because too many files have changed in this diff Show More