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

fix(ui-toolkit): orrect components in UI Toolkit

This commit is contained in:
Sara Vieira 2018-02-20 18:16:32 +00:00 committed by Sérgio Ramos
parent f8675e4d8d
commit 42d066be87
19 changed files with 233 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/ui-toolkit/.eslintrc
View File

@ -3,6 +3,7 @@
"rules": {
"no-console": 1,
"new-cap": 0,
"jsx-a11y/href-no-hash": 0
"jsx-a11y/href-no-hash": 0,
"no-negated-condition": 0
}
}

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

@ -45,6 +45,7 @@
"unitcalc": "^1.2.3"
},
"devDependencies": {
"apr-for-each": "^3.0.3",
"babel-cli": "^6.26.0",
"babel-preset-joyent-portal": "^7.0.1",
"classnames": "^2.2.5",

94
packages/ui-toolkit/src/button/Readme.md
View File

@ -4,12 +4,20 @@ Primary button to be used once per page. Only use to indicate main action per pa
Min. width: 120px
```jsx
// Name: Active
const React = require('react');
const { default: Button } = require('./');
<span>
<Button>Inspire the lazy</Button>
</span>;
</span>
// Tab: Disabled
const React = require('react');
const { default: Button } = require('./');
<span>
<Button disabled>Inspire the brave</Button>
</span>
```
#### Secondary Button
@ -18,43 +26,20 @@ Secondary buttons can be used freely to indicate other actions on patterns.
Min. width: 120px
```jsx
// Name: Active
const React = require('react');
const { default: Button } = require('./');
<span>
<Button secondary>Inspire the brave</Button>
</span>;
```
#### Disabled Button
Disabled buttons can be used freely to indicate that no action is permitted in this button.
Min. width: 120px
```jsx
// Tab: Disabled
const React = require('react');
const { default: Button } = require('./');
<span>
<Button secondary disabled>
Inspire the brave
</Button>
</span>;
```
#### Small Button
Small buttons are supporters of the secondary button. They can be used within cluttered or complex patterns to free up space.
```jsx
const React = require('react');
const { default: Button } = require('./');
<span>
<Button secondary small>
Inspire the brave
</Button>
</span>;
<Button secondary disabled>Inspire the brave</Button>
</span>
```
#### Loading Button
@ -75,14 +60,22 @@ const { default: Button } = require('./');
Quick action buttons can be embedded in components to give additional functionality. They can be used in either primary or secondary color palettes, depending on importance.
```jsx
// Name: Active
const React = require('react');
const { default: Button } = require('./');
const { Actions } = require('../icons');
<span>
<Button secondary icon rect>
<Button secondary icon actions>
<Actions />
</Button>
<Button secondary icon rect disabled>
</span>
// Tab: Disabled
const React = require('react');
const { default: Button } = require('./');
const { Actions } = require('../icons');
<span>
<Button secondary icon actions disabled>
<Actions />
</Button>
</span>;
@ -99,47 +92,6 @@ const Anchor = require('../text').Anchor;
<Anchor href="https://joyent.com">Inspire the lazy</Anchor>;
```
#### Reversed
Reversed anchors is used on dark backgrounds, where a default anchor would not
provide enough contrast.
```jsx
const React = require('react');
const Anchor = require('../text').Anchor;
<span
style={{
'background-color': '#3B46CC',
height: 80,
width: 250,
display: 'flex',
'align-items': 'center',
'justify-content': 'center'
}}
>
<Anchor href="https://joyent.com" reversed>
Inspire the lazy secondary
</Anchor>
</span>;
```
#### In-paragraph anchor
In-paragraph anchor is a link that sits inside a text components. The default
state does not have an underline. The underline appears on hover and click.
```jsx
const React = require('react');
const Anchor = require('../text').Anchor;
<p>
Body text. Crack that whip. Give the past a slip. Step on a crack. Break your
momma's back. When a problem comes along.You must whip it.
<Anchor href="#">Learn More</Anchor>
</p>;
```
#### Disabled
Disabled anchors cannot be actioned and the cursor is disabled.

10
packages/ui-toolkit/src/button/index.js
View File

@ -219,10 +219,20 @@ const Button = styled(BaseButton)`
border-radius: 0;
`};
${is('actions') `
border-radius: 0;
width: ${remcalc(48)};
min-width: ${remcalc(0)};
min-height: ${remcalc(0)};
height: ${remcalc(48)};
`};
${is('small')`
padding: ${remcalc(9)} ${remcalc(18)};
font-size: ${remcalc(13)};
min-width: ${remcalc(0)};
min-height: ${remcalc(0)};
height: auto;
`};
${is('icon')`

19
packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
View File

@ -114,6 +114,11 @@ exports[`Form Checkbox 1`] = `
margin-bottom: 0.75rem;
}
.c4 label {
font-weight: normal;
font-size: 0.9375rem;
}
.c0 {
list-style-type: none;
display: -webkit-box;
@ -245,6 +250,7 @@ exports[`Form FormMeta 1`] = `
color: rgb(210,67,58);
-webkit-text-fill-color: currentcolor;
font-size: 0.8125rem;
margin-top: 0.375rem;
float: none;
width: 18.75rem;
}
@ -261,6 +267,7 @@ exports[`Form FormMeta 1`] = `
color: rgb(227,130,0);
-webkit-text-fill-color: currentcolor;
font-size: 0.8125rem;
margin-top: 0.375rem;
float: none;
width: 18.75rem;
}
@ -277,6 +284,7 @@ exports[`Form FormMeta 1`] = `
color: rgb(0,152,88);
-webkit-text-fill-color: currentcolor;
font-size: 0.8125rem;
margin-top: 0.375rem;
float: none;
width: 18.75rem;
}
@ -306,7 +314,7 @@ exports[`Form Input 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
padding: 0.8125rem 1.125rem;
padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@ -502,6 +510,11 @@ exports[`Form Radio 1`] = `
margin-bottom: 0.75rem;
}
.c4 label {
font-weight: normal;
font-size: 0.9375rem;
}
.c5 {
font-size: 0.9375rem;
line-height: 1.125rem;
@ -601,7 +614,7 @@ exports[`Form Select 1`] = `
width: 18.75rem;
height: 3rem;
min-height: 3rem;
padding: 0.8125rem 1.125rem;
padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
@ -705,7 +718,7 @@ exports[`Form Textarea 1`] = `
width: 18.75rem;
height: 6rem;
min-height: 6rem;
padding: 0.8125rem 1.125rem;
padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);

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

@ -28,7 +28,7 @@ const style = css`
height: ${height};
min-height: ${height};
padding: ${paddingTop} ${remcalc(18)};
padding: ${paddingTop} ${remcalc(12)};
border-radius: ${props => props.theme.borderRadius};
background-color: ${props => props.theme.white};

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

@ -46,7 +46,6 @@ const Label = styled.label`
box-sizing: border-box;
top: 0;
right: 0;
cursor: pointer;
background-color: rgb(255, 255, 255);
@ -127,6 +126,12 @@ const InnerContainer = styled.div`
const Container = styled.div`
margin-left: ${remcalc(12)};
label {
font-weight: normal;
font-size: ${remcalc(15)};
}
${isNot('noMargin')`
margin-bottom: ${remcalc(12)};
`};

9
packages/ui-toolkit/src/form/meta.js
View File

@ -27,7 +27,13 @@ const StyledLabel = Label.extend`
-webkit-text-fill-color: currentcolor;
`};
${is('top')`
margin-top: ${remcalc(0)};
margin-bottom: ${remcalc(6)};
`};
font-size: ${remcalc(13)};
margin-top: ${remcalc(6)};
float: none;
width: ${remcalc(300)};
@ -64,8 +70,7 @@ const Meta = props => {
error={hasError}
warning={hasWarning}
success={hasSuccess}
right={isRight}
>
right={isRight}>
{msg}
</StyledLabel>
);

60
packages/ui-toolkit/src/form/usage-input.md
View File

@ -1,6 +1,7 @@
#### Input > Email
#### Text Entry
```jsx
// Name: Active
const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
@ -8,13 +9,11 @@ const { default: Input } = require('./input');
<FormGroup>
<Label>Username</Label>
<Input placeholder="Example: JarJarBinks" type="email" />
</FormGroup>;
```
<Input placeholder="Example: JarJarBinks" type="text" />
</FormGroup>
#### Input > Disabled
```jsx
// Tab: Disabled
const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
@ -22,13 +21,10 @@ const { default: Input } = require('./input');
<FormGroup>
<Label disabled>Username</Label>
<Input disabled placeholder="Example: JarJarBinks" type="email" />
</FormGroup>;
```
<Input disabled placeholder="Example: JarJarBinks" type="text" />
</FormGroup>
#### Input > Error
```jsx
// Tab: Error
const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
@ -36,40 +32,8 @@ const { default: FormMeta } = require('./meta');
const { default: Input } = require('./input');
<FormGroup>
<Label>Email Address</Label>
<Input placeholder="Enter email" type="email" />
<FormMeta error>Unexpected children error!</FormMeta>
</FormGroup>;
```
#### Input > Warning
```jsx
const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: FormMeta } = require('./meta');
const { default: Input } = require('./input');
<FormGroup>
<Label>Email Address</Label>
<Input placeholder="Enter email" type="email" />
<FormMeta warning>Unexpected children warning!</FormMeta>
</FormGroup>;
```
#### Input > Success
```jsx
const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: FormMeta } = require('./meta');
const { default: Input } = require('./input');
<FormGroup>
<Label>Email Address</Label>
<Input placeholder="Enter email" type="email" />
<FormMeta success>Unexpected children success!</FormMeta>
</FormGroup>;
<Label>Username</Label>
<Input value="anton/s" error type="text" />
<FormMeta error>Something’s wrong</FormMeta>
</FormGroup>
```

68
packages/ui-toolkit/src/form/usage-select.md
View File

@ -1,9 +1,15 @@
#### Select
This is the standard dropdown menu to be used in forms and for multiple choice selections.
```jsx
// Name: Active
const React = require('react');
const { default: Select } = require('./select');
const { default: Label } = require('./label');
const { default: FormGroup } = require('./group');
<FormGroup>
<Label>Your location</Label>
<Select>
<option selected disabled>
Select a datacenter
@ -14,11 +20,8 @@ const { default: FormGroup } = require('./group');
<option>Tokyo, Japan</option>
</Select>
</FormGroup>;
```
#### Select > Disabled
```jsx
// Tab: Disabled
const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
@ -35,68 +38,27 @@ const { default: Select } = require('./select');
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
</FormGroup>;
```
</FormGroup>
#### Select > Warning
```jsx
// Tab: Error
const React = require('react');
const { default: FormMeta } = require('./meta');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: Flex } = require('styled-flex-component');
const { default: Select } = require('./select');
<FormGroup>
<Label>Your location</Label>
<Flex alignCenter justifyBetween>
<Label>Your location</Label>
<FormMeta top error>Unexpected children error!</FormMeta>
</Flex>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta warning>Unexpected children warning!</FormMeta>
</FormGroup>;
```
#### Select > Error
```jsx
const React = require('react');
const { default: FormMeta } = require('./meta');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: Select } = require('./select');
<FormGroup>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta error>Unexpected children error!</FormMeta>
</FormGroup>;
```
#### Select > Success
```jsx
const React = require('react');
const { default: FormMeta } = require('./meta');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: Select } = require('./select');
<FormGroup>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta success>Unexpected children success!</FormMeta>
</FormGroup>;
</FormGroup>
```

22
packages/ui-toolkit/src/popover/Readme.md
View File

@ -4,17 +4,15 @@ const { default: Popover, Container, Target, Item, Divider } = require('./');
const { Row, Col } = require('joyent-react-styled-flexboxgrid');
<Row center="xs" between="xs" style={{ marginTop: 80 }}>
<Col xs={2}>
<Container>
<Target>Hello</Target>
<Popover placement="right">
<Item>Scale</Item>
<Item>Restart</Item>
<Item>Stop</Item>
<Divider />
<Item>Delete</Item>
</Popover>
</Container>
</Col>
<Container>
<Target>Hello</Target>
<Popover placement="right">
<Item>Scale</Item>
<Item>Restart</Item>
<Item>Stop</Item>
<Divider />
<Item>Delete</Item>
</Popover>
</Container>
</Row>;
```

2
packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap
View File

@ -32,6 +32,8 @@ Array [
.c1 {
display: block;
-webkit-text-align: left;
text-align: left;
cursor: pointer;
}

1
packages/ui-toolkit/src/popover/item.js
View File

@ -7,6 +7,7 @@ import Baseline from '../baseline';
const BaseItem = styled.span`
display: block;
text-align: left;
&:not(:last-child) {
margin-bottom: ${remcalc(12)};

114
packages/ui-toolkit/src/styleguide/playground.js
View File

@ -1,6 +1,7 @@
import React, { Component } from 'react';
import styled from 'styled-components';
import is from 'styled-is';
import ForEach from 'apr-for-each';
import remcalc from 'remcalc';
const Wrapper = styled.section`
@ -63,6 +64,8 @@ const Tab = styled.div`
${is('active')`
height: auto;
opacity: 1;
transition-delay: 150ms;
transition: opacity 150ms ease-in;
`};
.CodeMirror-wrap {
@ -72,9 +75,60 @@ const Tab = styled.div`
`;
class Playground extends Component {
state = {
tab: 'component'
};
constructor(props) {
super(props);
this.state = {
tab: 'component',
states: []
};
}
componentDidMount() {
const code = this.props.preview.props.code;
const regex = /\/\/ Tab: \w+/g;
let m;
while ((m = regex.exec(code)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
m.forEach((match, groupIndex) => {
// MAKE THIS SYNCRONOUS
window.setTimeout(() =>
this.setState({
states: [...this.state.states, match.split(':')[1].trim()]
})
);
});
}
}
// async componentDidMount() {
// const code = this.props.preview.props.code;
// const matches = (/Tab:\s*?(.*)/gi).exec(code)
// if (!matches) {
// return;
// }
// matches.unshift();
// await ForEach(
// matches,
// match =>
// new Promise(resolve =>
// this.setState(
// {
// states: [...this.state.states, match.trim()]
// },
// resolve
// )
// )
// );
// }
changeTab = tab => {
this.setState({
@ -82,33 +136,61 @@ class Playground extends Component {
});
};
showPreview = (preview, code) => ({
...preview,
props: {
...preview.props,
code
}
});
render() {
const { name, preview, tabBody } = this.props;
const { tab, states } = this.state;
const propCode = this.props.preview.props.code;
const regex = /\/\/ Tab: \w+/g;
const nameRegex = /\/\/ Name: /g;
return (
<Wrapper>
<Tabs>
<TabHeader active={this.state.tab === 'component'}>
<TabHeader active={tab === 'component'}>
<Button
active={this.state.tab === 'component'}
onClick={() => this.changeTab('component')}
>
Example
active={tab === 'component'}
onClick={() => this.changeTab('component')}>
{(propCode.split(nameRegex)[1] || 'Component').split(/\s/g)[0]}
</Button>
</TabHeader>
<TabHeader active={this.state.tab === 'code'}>
{states.length
? states.map(state => (
<TabHeader active={tab === state}>
<Button
active={tab === state}
onClick={() => this.changeTab(state)}>
{state}
</Button>
</TabHeader>
))
: null}
<TabHeader active={tab === 'code'}>
<Button
active={this.state.tab === 'code'}
onClick={() => this.changeTab('code')}
>
active={tab === 'code'}
onClick={() => this.changeTab('code')}>
Code
</Button>
</TabHeader>
</Tabs>
<Tab active={this.state.tab === 'component'} data-preview={name}>
{preview}
<Tab active={tab === 'component'} data-preview={name}>
{this.showPreview(preview, propCode.split(regex)[0])}
</Tab>
<Tab active={this.state.tab === 'code'}>{tabBody}</Tab>
{states.length
? states.map((state, i) => (
<Tab active={tab === state} data-preview={name}>
{this.showPreview(preview, propCode.split(regex)[i + 1])}
</Tab>
))
: null}
<Tab active={tab === 'code'}>{tabBody}</Tab>
</Wrapper>
);
}

2
packages/ui-toolkit/src/styleguide/section.js
View File

@ -16,7 +16,7 @@ const Header = styled.header`
const Main = styled.div`
padding: ${remcalc(50)} ${remcalc(120)};
h4 {
h4[class*='rsg--heading'] {
margin: 0;
line-height: ${remcalc(26)};
font-size: ${remcalc(21)};

1
packages/ui-toolkit/src/styleguide/tabs.js
View File

@ -55,7 +55,6 @@ export function TabButtonRenderer({
return (
<button type="button" name={name} className={classNames} onClick={onClick}>
{children}
sup
</button>
);
}

52
packages/ui-toolkit/src/table/usage.md
View File

@ -2,14 +2,13 @@
```jsx
const React = require('react');
const remcalc = require('remcalc');
const { FormGroup, Checkbox } = require('../form');
const { default: Table, Thead, Tr, Th, Tbody } = require('./');
<Table>
<Thead>
<Tr>
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
<Th xs="32" padding="0" paddingLeft="12" middle left>
<FormGroup style={{ display: 'flex', alignItems: 'center' }}>
<Checkbox noMargin />
</FormGroup>
@ -34,14 +33,13 @@ const { default: Table, Thead, Tr, Th, Tbody } = require('./');
```jsx
const React = require('react');
const remcalc = require('remcalc');
const { FormGroup, Checkbox } = require('../form');
const { default: Table, Tfoot, Tr, Th } = require('./');
<Table>
<Tfoot>
<Tr>
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
<Th xs="32" padding="0" paddingLeft="12" middle left>
<FormGroup style={{ display: 'flex', alignItems: 'center' }}>
<Checkbox noMargin />
</FormGroup>
@ -65,7 +63,6 @@ const { default: Table, Tfoot, Tr, Th } = require('./');
```jsx
const React = require('react');
const remcalc = require('remcalc');
const { FormGroup, Checkbox } = require('../form');
const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
const { Dot, Actions } = require('../icons');
@ -73,7 +70,7 @@ const { Dot, Actions } = require('../icons');
<Table>
<Thead>
<Tr>
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
<Th xs="32" padding="0" paddingLeft="12" middle left>
<FormGroup>
<Checkbox noMargin />
</FormGroup>
@ -92,8 +89,8 @@ const { Dot, Actions } = require('../icons');
</Thead>
<Tbody>
<Tr>
<Td padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup paddingTop={remcalc(4)}>
<Td padding="0" paddingLeft="12" middle left>
<FormGroup paddingTop={(4)}>
<Checkbox noMargin checked />
</FormGroup>
</Td>
@ -103,9 +100,9 @@ const { Dot, Actions } = require('../icons');
<Td middle left>
<span>
<Dot
width={remcalc(11)}
height={remcalc(11)}
borderRadius={remcalc(11)}
width={(11)}
height={(11)}
borderRadius={(11)}
color="primary"
/>{' '}
Provisioning
@ -119,8 +116,8 @@ const { Dot, Actions } = require('../icons');
</Td>
</Tr>
<Tr>
<Td padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup paddingTop={remcalc(4)}>
<Td padding="0" paddingLeft="12" middle left>
<FormGroup paddingTop={(4)}>
<Checkbox noMargin />
</FormGroup>
</Td>
@ -130,9 +127,9 @@ const { Dot, Actions } = require('../icons');
<Td middle left>
<span>
<Dot
width={remcalc(11)}
height={remcalc(11)}
borderRadius={remcalc(11)}
width={(11)}
height={(11)}
borderRadius={(11)}
color="green"
/>{' '}
Running
@ -153,7 +150,6 @@ const { Dot, Actions } = require('../icons');
```jsx
const React = require('react');
const remcalc = require('remcalc');
const { FormGroup, Radio } = require('../form');
const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
const { Dot } = require('../icons');
@ -161,7 +157,7 @@ const { Dot } = require('../icons');
<Table>
<Thead>
<Tr>
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left />
<Th xs="32" padding="0" paddingLeft="12" middle left />
<Th sortOrder="asc" showSort left middle selected actionable>
<span>Name </span>
</Th>
@ -175,8 +171,8 @@ const { Dot } = require('../icons');
</Thead>
<Tbody>
<Tr>
<Td padding="0" paddingLeft={remcalc(12)} middle left selected>
<FormGroup paddingTop={remcalc(4)}>
<Td padding="0" paddingLeft="12" middle left selected>
<FormGroup paddingTop={(4)}>
<Radio noMargin checked />
</FormGroup>
</Td>
@ -186,9 +182,9 @@ const { Dot } = require('../icons');
<Td middle left selected>
<span>
<Dot
width={remcalc(11)}
height={remcalc(11)}
borderRadius={remcalc(11)}
width={(11)}
height={(11)}
borderRadius={(11)}
color="primary"
/>{' '}
Provisioning
@ -199,8 +195,8 @@ const { Dot } = require('../icons');
</Td>
</Tr>
<Tr>
<Td padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup paddingTop={remcalc(4)}>
<Td padding="0" paddingLeft="12" middle left>
<FormGroup paddingTop={(4)}>
<Radio noMargin />
</FormGroup>
</Td>
@ -210,9 +206,9 @@ const { Dot } = require('../icons');
<Td middle left>
<span>
<Dot
width={remcalc(11)}
height={remcalc(11)}
borderRadius={remcalc(11)}
width={(11)}
height={(11)}
borderRadius={(11)}
color="green"
/>{' '}
Running

4
packages/ui-toolkit/styleguide.config.js
View File

@ -9,7 +9,9 @@ const dnHandler = require('react-docgen-displayname-handler');
const path = require('path');
module.exports = {
highlightTheme: 'base16-light',
editorConfig: {
theme: 'base16-light'
},
webpackConfig: Object.assign(webpackConfig, {
resolve: Object.assign(webpackConfig.resolve, {
alias: Object.assign(webpackConfig.resolve.alias, {

2
yarn.lock
View File

@ -562,7 +562,7 @@ apr-filter@^3.0.2:
apr-engine-sum "^3.0.3"
apr-map "^3.0.3"
apr-for-each@^3.0.2, apr-for-each@^3.0.3:
apr-for-each@^3.0.3:
version "3.0.3"
resolved "https://registry.yarnpkg.com/apr-for-each/-/apr-for-each-3.0.3.tgz#2efa6834bcac3ac8a7ecda4642edd318b7708580"
dependencies: