Skip to content

Commit d34bafa

Browse files
ryasmiryasmi
authored
refactor: Removes CSS files from components. (#1483 - [LL-215](https://learningpool.atlassian.net/browse/LL-215))
#1483 https://learningpool.atlassian.net/browse/LL-215
1 parent 5db0c98 commit d34bafa

209 files changed

Lines changed: 4514 additions & 3724 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎clean-build-cache.sh‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
#!/usr/bin/env bash
2+
3+
echo 'Removing "cli/src/node_modules"'
4+
rm -R -f cli/src/node_modules
5+
6+
echo 'Removing "worker/src/node_modules"'
7+
rm -R -f worker/src/node_modules
8+
9+
echo 'Removing "api/src/node_modules"'
10+
rm -R -f api/src/node_modules
11+
12+
echo 'Removing "ui/src/node_modules"'
13+
rm -R -f ui/src/node_modules
14+
15+
16+
echo 'Removing "cli/dist"'
17+
rm -R -f cli/dist
18+
19+
echo 'Removing "worker/dist"'
20+
rm -R -f worker/dist
21+
22+
echo 'Removing "api/dist"'
23+
rm -R -f api/dist
24+
25+
echo 'Removing "ui/dist"'
26+
rm -R -f ui/dist
27+

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,8 @@
4545
"test": "yarn test-api && yarn test-lib && yarn test-worker && yarn test-ui && yarn test-cli",
4646
"migrate": "node cli/dist/server migrateMongo --up",
4747
"rollback": "node cli/dist/server migrateMongo --down last",
48-
"semantic-release": "ht2-release-private-circleci"
48+
"semantic-release": "ht2-release-private-circleci",
49+
"clean-cache": "sh ./clean-build-cache.sh"
4950
},
5051
"dependencies": {
5152
"@azure/service-bus": "^1.0.2",
@@ -218,6 +219,7 @@
218219
"isomorphic-style-loader": "^2.0.0",
219220
"jest": "^19.0.2",
220221
"jest-enzyme": "^4.0.1",
222+
"jest-styled-components": "^6.3.4",
221223
"mocha": "^2.3.3",
222224
"mocha-mongoose": "^1.2.0",
223225
"mocha-webpack": "^0.7.0",
@@ -252,7 +254,8 @@
252254
"husky": {
253255
"hooks": {
254256
"pre-push": "yarn lint-ci",
255-
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
257+
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
258+
"post-checkout": "yarn clean-cache"
256259
}
257260
}
258261
}

‎ui/src/components/AutoComplete/Input.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import styled from 'styled-components';
2+
3+
export default styled.input`
4+
border: none;
5+
flex-grow: 1;
6+
padding-left: 8px;
7+
8+
&:focus {
9+
outline: 0;
10+
}
11+
`;

‎ui/src/components/AutoComplete/InputWrapper.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import styled, { css } from 'styled-components';
2+
3+
const openedMixin = css`
4+
border-radius: 4px 4px 2px 2px;
5+
border-bottom: 1px solid #eee;
6+
`;
7+
8+
export default styled.div`
9+
border-radius: 2px;
10+
overflow: hidden;
11+
flex-wrap: wrap;
12+
min-height: 36px;
13+
display: flex;
14+
align-items: center;
15+
${props => props.isBorderHidden && 'border: 1px solid transparent' || 'border: 1px solid #ccc;'}
16+
${props => props.isOpen && openedMixin || ''}
17+
`;

‎ui/src/components/AutoComplete/Spinner.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import styled from 'styled-components';
2+
import { rotation } from 'ui/utils/styled/animations';
3+
4+
export default styled.div`
5+
width: 18px;
6+
height: 18px;
7+
margin: 3px;
8+
animation: ${rotation} .75s infinite linear;
9+
border-right: 2px solid #ddd;
10+
border-left: 2px solid #ddd;
11+
border-bottom: 2px solid #ddd;
12+
border-top: 2px solid #888;
13+
border-radius: 100%;
14+
margin-left: auto;
15+
`;

‎ui/src/components/AutoComplete/autocomplete.css‎

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎ui/src/components/AutoComplete/index.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
3-
import classNames from 'classnames';
4-
import withStyles from 'isomorphic-style-loader/lib/withStyles';
53
import { Map, List } from 'immutable';
64
import { noop, identity, debounce, isNull } from 'lodash';
75
import OptionList from 'ui/components/OptionList';
86
import OptionListItem from 'ui/components/OptionListItem';
97
import areEqualProps from 'ui/utils/hocs/areEqualProps';
108
import keyCodes from 'lib/constants/keyCodes';
119
import Token from './token/Token';
12-
import styles from './autocomplete.css';
10+
import Input from './Input';
11+
import InputWrapper from './InputWrapper';
12+
import Spinner from './Spinner';
1313

1414
class AutoComplete extends Component {
1515

@@ -44,7 +44,7 @@ class AutoComplete extends Component {
4444
// initial state
4545
options: new List(),
4646
isLoading: false,
47-
fetchMore: () => {},
47+
fetchMore: () => { },
4848

4949
values: new Map(),
5050
placeholder: 'Type to limit suggestions',
@@ -251,7 +251,7 @@ class AutoComplete extends Component {
251251
return null;
252252
}
253253

254-
renderStatus = () => (this.props.isLoading ? <div className={styles.isLoading} /> : null);
254+
renderStatus = () => (this.props.isLoading ? <Spinner /> : null);
255255

256256
renderSingleValue = (value) => {
257257
const { renderSingleValue } = this.props;
@@ -271,8 +271,7 @@ class AutoComplete extends Component {
271271
const placeholder = hasSingleValue ? '' : this.props.placeholder;
272272
const inputValue = this.getInputValue();
273273
return (
274-
<input
275-
className={styles.input}
274+
<Input
276275
onFocus={this.focus}
277276
onChange={this.onChangeFilter}
278277
value={inputValue}
@@ -295,30 +294,31 @@ class AutoComplete extends Component {
295294
parse={parseOption}
296295
parseTooltip={parseOptionTooltip}
297296
handleRemove={this.deleteValue.bind(this, key)} />
298-
).valueSeq();
297+
).valueSeq();
299298
}
300299
return hasSingleValue && inputValue === '' &&
301300
this.renderSingleValue(values.first());
302301
}
303302

304303
render() {
305-
const wrapperClasses = classNames({
306-
[styles.inputWrapper]: true,
307-
[styles.open]: this.state.focused,
308-
[styles.noBorder]: !this.state.focused && this.props.noBorder
309-
});
304+
const { focused, noBorder } = this.props;
310305

311306
return (
312-
<div ref={(ref) => { this.wrapper = ref; }} className={styles.wrapper}>
313-
<div onClick={this.focus} className={wrapperClasses}>
307+
<div
308+
ref={(ref) => { this.wrapper = ref; }}
309+
style={{ position: 'relative', height: '100%' }}>
310+
<InputWrapper
311+
isOpen={focused}
312+
isBorderHidden={!focused && noBorder}
313+
onClick={this.focus} >
314314
{this.renderValues()}
315315
{this.renderInput()}
316316
{this.renderStatus()}
317-
</div>
317+
</InputWrapper>
318318
{this.renderOptionsDropdown()}
319319
</div>
320320
);
321321
}
322322
}
323323

324-
export default withStyles(styles)(AutoComplete);
324+
export default AutoComplete;

‎ui/src/components/AutoComplete/token/RemoveButton.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import styled from 'styled-components';
2+
3+
export default styled.div`
4+
margin-left: 2px;
5+
justify-content: flex-end;
6+
display: flex;
7+
align-items: center;
8+
padding: 0 6px;
9+
color: #888;
10+
font-size: 10px;
11+
border-left: 1px solid #ccc;
12+
line-height: 100%;
13+
cursor: pointer;
14+
15+
&:hover {
16+
color: #777;
17+
background: #eee;
18+
}
19+
`;

‎ui/src/components/AutoComplete/token/Token.js‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import { identity, noop } from 'lodash';
44
import classNames from 'classnames';
5-
import withStyles from 'isomorphic-style-loader/lib/withStyles';
6-
import styles from './styles.css';
5+
import RemoveButton from './RemoveButton';
6+
import Value from './Value';
7+
import Wrapper from './Wrapper';
78

89
class Token extends Component {
910
static displayName = 'Token';
@@ -36,31 +37,24 @@ class Token extends Component {
3637
}
3738

3839
renderRemoveBtn = () => (
39-
<div
40-
className={styles.removeBtn}
41-
onClick={this.onRemoveBtnClick}>
40+
<RemoveButton onClick={this.onRemoveBtnClick}>
4241
<i className="ion-close-round" />
43-
</div>
42+
</RemoveButton>
4443
);
4544

4645
render() {
4746
const { fullWidth, value, parse, parseTooltip } = this.props;
48-
const wrapperClasses = classNames({
49-
[styles.wrapper]: true,
50-
[styles.wrapperFullWidth]: fullWidth
51-
});
47+
const wrapperClasses = classNames({ fullWidth });
5248
const parsedValue = parse(value);
5349
const parsedIdent = parseTooltip(value);
5450
const title = parsedIdent;
5551
return (
56-
<div title={title} className={wrapperClasses}>
57-
<div className={styles.value}>
58-
{ parsedValue }
59-
</div>
60-
{ !fullWidth ? this.renderRemoveBtn() : null}
61-
</div>
52+
<Wrapper title={title} className={wrapperClasses}>
53+
<Value>{parsedValue}</Value>
54+
{!fullWidth ? this.renderRemoveBtn() : null}
55+
</Wrapper>
6256
);
6357
}
6458
}
6559

66-
export default withStyles(styles)(Token);
60+
export default Token;

‎ui/src/components/AutoComplete/token/Value.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import styled from 'styled-components';
2+
3+
export default styled.div`
4+
font-size: 12px;
5+
padding: 2px 5px;
6+
justify-content: flex-start;
7+
word-break: break-word;
8+
`;

0 commit comments

Comments
 (0)