mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
working showcase
This commit is contained in:
parent
1a0ddf25b1
commit
16cd49043d
24
ui/docs/containers/app/index.js
Normal file
24
ui/docs/containers/app/index.js
Normal file
@ -0,0 +1,24 @@
|
||||
const React = require('react');
|
||||
const ReactRouter = require('react-router');
|
||||
|
||||
const Navigation = require('./navigation.js');
|
||||
const Home = require('../home');
|
||||
const Item = require('../item/');
|
||||
|
||||
const {
|
||||
Base
|
||||
} = require('../../../src');;
|
||||
|
||||
const {
|
||||
Match
|
||||
} = ReactRouter;
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<Base>
|
||||
<Navigation />
|
||||
<Match exactly pattern='/' component={Home} />
|
||||
<Match pattern='/:parent?/:name' component={Item} />
|
||||
</Base>
|
||||
);
|
||||
};
|
52
ui/docs/containers/app/navigation.js
Normal file
52
ui/docs/containers/app/navigation.js
Normal file
@ -0,0 +1,52 @@
|
||||
const classNames = require('classnames');
|
||||
const paramCase = require('param-case');
|
||||
const React = require('react');
|
||||
const ReactRouter = require('react-router');
|
||||
|
||||
const Docs = require('../../../src/docs');
|
||||
const styles = require('./style.css');
|
||||
|
||||
const {
|
||||
Link
|
||||
} = ReactRouter;
|
||||
|
||||
const getList = (items, parent) => {
|
||||
let isNested = false;
|
||||
|
||||
const lis = Object.keys(items).map((name) => {
|
||||
const item = items[name];
|
||||
const param = paramCase(name);
|
||||
const href = parent ? `${parent}/${param}` : `/${param}`;
|
||||
|
||||
isNested = (typeof item !== 'string');
|
||||
|
||||
return (
|
||||
<li className={styles.item} key={href}>
|
||||
<Link to={href}>{name}</Link>
|
||||
{isNested ? getList(item, href) : null}
|
||||
</li>
|
||||
);
|
||||
});
|
||||
|
||||
const cn = classNames(
|
||||
isNested ? styles['is-nested'] : ''
|
||||
);
|
||||
|
||||
return (
|
||||
<ul className={cn}>
|
||||
{lis}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.navigation}>
|
||||
<nav role='navigation'>
|
||||
{getList(Docs)}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
108
ui/docs/containers/app/style.css
Normal file
108
ui/docs/containers/app/style.css
Normal file
@ -0,0 +1,108 @@
|
||||
/* based on:
|
||||
*
|
||||
* salesforce-ux/design-system v2.1.3
|
||||
* BSD License Clause 2
|
||||
* github.com/salesforce-ux/design-system
|
||||
*/
|
||||
|
||||
|
||||
.navigation {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
|
||||
/* Arrow Icon */
|
||||
& .icon_svg {
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
display: inline-block;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/* Hide closed menu items */
|
||||
& .is-closed ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
& a {
|
||||
display: block;
|
||||
padding: .75rem 2rem;
|
||||
line-height: 1.28571428571429;
|
||||
color: #16325c;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(244, 246, 249, .5);
|
||||
}
|
||||
}
|
||||
|
||||
/* Active Link */
|
||||
& .is-active > a {
|
||||
background-color: #eef1f6;
|
||||
color: #0070d2;
|
||||
}
|
||||
|
||||
/* Open Menu Items */
|
||||
& .is-open {
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
/* Section Selected */
|
||||
& .is-selected {
|
||||
background-color: #f4f6f9;
|
||||
|
||||
& a:hover {
|
||||
background-color: #eceff5;
|
||||
}
|
||||
|
||||
& .icon__svg {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Nested List */
|
||||
& .is-nested {
|
||||
margin-left: 0;
|
||||
|
||||
& a {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
padding-left: 3.5rem;
|
||||
}
|
||||
|
||||
& .is-nested a {
|
||||
padding-left: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 48em) {
|
||||
position: fixed;
|
||||
top: 6rem;
|
||||
bottom: 0;
|
||||
border-right: 1px solid #f4f6f9;
|
||||
padding-top: 0;
|
||||
width: 15rem;
|
||||
|
||||
& nav {
|
||||
position: absolute;
|
||||
width: 15rem;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&.navigation--has-search nav {
|
||||
top: calc(2.5rem + 2px);
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.site-navigation--internal {
|
||||
top: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
& .item {
|
||||
margin: 0 .5rem
|
||||
}
|
||||
}
|
5
ui/docs/containers/home.js
Normal file
5
ui/docs/containers/home.js
Normal file
@ -0,0 +1,5 @@
|
||||
const React = require('react');
|
||||
|
||||
module.exports = () => {
|
||||
return (<div></div>);
|
||||
};
|
28
ui/docs/containers/item/index.js
Normal file
28
ui/docs/containers/item/index.js
Normal file
@ -0,0 +1,28 @@
|
||||
const get = require('lodash.get');
|
||||
const InnerHTML = require('dangerously-set-inner-html');
|
||||
const React = require('react');
|
||||
const styles = require('./style.css');
|
||||
const titleCase = require('title-case');
|
||||
|
||||
const Docs = require('../../../src/docs');
|
||||
|
||||
module.exports = ({
|
||||
params
|
||||
}) => {
|
||||
const path = (params.parent !== 'undefined')
|
||||
? `${titleCase(params.parent)}.${titleCase(params.name)}`
|
||||
: `${titleCase(params.name)}`;
|
||||
|
||||
const body = get(Docs, path);
|
||||
const item = body ? (
|
||||
<InnerHTML html={body} />
|
||||
) : (
|
||||
<h1>{path} Not Found</h1>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={styles.item}>
|
||||
{item}
|
||||
</div>
|
||||
);
|
||||
};
|
7
ui/docs/containers/item/style.css
Normal file
7
ui/docs/containers/item/style.css
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
.item {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
margin-left: 15rem;
|
||||
}
|
@ -1,16 +1,23 @@
|
||||
const React = require('react');
|
||||
const ReactHotLoader = require('react-hot-loader');
|
||||
const Button = require('../src/components/column/readme.md');
|
||||
const InnerHTML = require('dangerously-set-inner-html');
|
||||
const ReactRouter = require('react-router');
|
||||
|
||||
const App = require('./containers/app/');
|
||||
|
||||
const {
|
||||
AppContainer
|
||||
} = ReactHotLoader;
|
||||
|
||||
const {
|
||||
BrowserRouter
|
||||
} = ReactRouter;
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<AppContainer>
|
||||
<InnerHTML html={Button} />
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</AppContainer>
|
||||
);
|
||||
};
|
||||
|
@ -29,7 +29,7 @@
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"babel-register": "^6.16.3",
|
||||
"css-loader": "^0.25.0",
|
||||
"dangerously-set-inner-html": "^1.0.0",
|
||||
"dangerously-set-inner-html": "2.0.0",
|
||||
"enzyme": "^2.5.1",
|
||||
"eslint": "^3.8.1",
|
||||
"eslint-config-semistandard": "^7.0.0",
|
||||
@ -40,7 +40,9 @@
|
||||
"eslint-plugin-standard": "^2.0.1",
|
||||
"extract-text-webpack-plugin": "^2.0.0-beta.4",
|
||||
"json-loader": "^0.5.4",
|
||||
"lodash.get": "^4.4.2",
|
||||
"nyc": "^8.3.1",
|
||||
"param-case": "^2.1.0",
|
||||
"postcss-cssnext": "^2.8.0",
|
||||
"postcss-loader": "^1.0.0",
|
||||
"postcss-mixins": "^5.4.0",
|
||||
@ -52,6 +54,7 @@
|
||||
"react-hot-loader": "^3.0.0-beta.6",
|
||||
"react-router": "^4.0.0-alpha.4",
|
||||
"style-loader": "^0.13.1",
|
||||
"title-case": "^2.1.0",
|
||||
"webpack": "^2.1.0-beta.25",
|
||||
"webpack-dev-server": "^1.16.2",
|
||||
"webpack-shell-plugin": "^0.4.3"
|
||||
|
@ -41,7 +41,7 @@ nmodule.exports = ReactDOM.renderToString(
|
||||
const React = require('react');
|
||||
const Container = require('ui/container');
|
||||
const Row = require('ui/row');
|
||||
const Column = require('ui/index');
|
||||
const Column = require('ui/column');
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
|
@ -1,4 +1,4 @@
|
||||
# `<Grid>`
|
||||
# `<Container>`
|
||||
|
||||
## demo
|
||||
|
||||
@ -9,7 +9,9 @@ const Container = require('./index.js');
|
||||
const Button = require('../button');
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Grid><Button>Hello World</Button></Grid>
|
||||
<Container>
|
||||
<Button>Hello World</Button>
|
||||
</Container>
|
||||
);
|
||||
```
|
||||
|
||||
|
@ -1,8 +1,8 @@
|
||||
module.exports = {
|
||||
'Getting Started': require('./getting-started.md'),
|
||||
Layout: require('./layout.md'),
|
||||
Guidelines: {
|
||||
Overview: require('./guidelines/overview.md')
|
||||
Overview: require('./guidelines/overview.md'),
|
||||
Layout: require('./guidelines/layout.md')
|
||||
},
|
||||
Components: {
|
||||
Base: require('./components/base/readme.md'),
|
||||
|
40
ui/yarn.lock
40
ui/yarn.lock
@ -1856,12 +1856,13 @@ d@^0.1.1, d@~0.1.1:
|
||||
dependencies:
|
||||
es5-ext "~0.10.2"
|
||||
|
||||
dangerously-set-inner-html@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/dangerously-set-inner-html/-/dangerously-set-inner-html-1.0.0.tgz#87c4a8ef1c41452e4b671dca77947512afab3806"
|
||||
dangerously-set-inner-html@2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/dangerously-set-inner-html/-/dangerously-set-inner-html-2.0.0.tgz#da73f26330c9ef0b6b12ca443091904406ddb73a"
|
||||
dependencies:
|
||||
lodash.flatten "^4.4.0"
|
||||
parse5 "^2.2.3"
|
||||
uuid "^2.0.3"
|
||||
|
||||
dashdash@^1.12.0:
|
||||
version "1.14.0"
|
||||
@ -3459,6 +3460,10 @@ lodash.foreach@^4.3.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
|
||||
|
||||
lodash.get:
|
||||
version "4.4.2"
|
||||
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
|
||||
|
||||
lodash.indexof@^4.0.5:
|
||||
version "4.0.5"
|
||||
resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
|
||||
@ -3539,6 +3544,10 @@ loud-rejection@^1.0.0, loud-rejection@^1.2.0:
|
||||
currently-unhandled "^0.4.1"
|
||||
signal-exit "^3.0.0"
|
||||
|
||||
lower-case@^1.1.1:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.3.tgz#c92393d976793eee5ba4edb583cf8eae35bd9bfb"
|
||||
|
||||
lowercase-keys@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
|
||||
@ -3720,6 +3729,12 @@ negotiator@0.6.1:
|
||||
version "0.6.1"
|
||||
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
|
||||
|
||||
no-case@^2.2.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.0.tgz#ca2825ccb76b18e6f79d573dcfbf1eace33dd164"
|
||||
dependencies:
|
||||
lower-case "^1.1.1"
|
||||
|
||||
node-fetch@^1.0.1:
|
||||
version "1.6.3"
|
||||
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
|
||||
@ -4027,6 +4042,12 @@ pako@~0.2.0:
|
||||
version "0.2.9"
|
||||
resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
|
||||
|
||||
param-case:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.0.tgz#2619f90fd6c829ed0b958f1c84ed03a745a6d70a"
|
||||
dependencies:
|
||||
no-case "^2.2.0"
|
||||
|
||||
parse-asn1@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.0.0.tgz#35060f6d5015d37628c770f4e091a0b5a278bc23"
|
||||
@ -5613,6 +5634,13 @@ timers-browserify@^1.0.1:
|
||||
dependencies:
|
||||
process "~0.11.0"
|
||||
|
||||
title-case:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.0.tgz#c68ccb4232079ded64f94b91b4941ade91391979"
|
||||
dependencies:
|
||||
no-case "^2.2.0"
|
||||
upper-case "^1.0.3"
|
||||
|
||||
to-fast-properties@^1.0.1:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
|
||||
@ -5734,6 +5762,10 @@ update-notifier@^1.0.0:
|
||||
semver-diff "^2.0.0"
|
||||
xdg-basedir "^2.0.0"
|
||||
|
||||
upper-case@^1.0.3:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
|
||||
|
||||
url-parse-lax@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
|
||||
@ -5785,7 +5817,7 @@ utils-merge@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
|
||||
|
||||
uuid@^2.0.1, uuid@^2.0.2:
|
||||
uuid@^2.0.1, uuid@^2.0.2, uuid@^2.0.3:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user