Skip to content
This repository was archived by the owner on Apr 28, 2020. It is now read-only.

Commit 4319568

Browse files
vojtechszocsvojtechszocs
committed
Restructure styles, improve code and docs
1 parent 7df844b commit 4319568

File tree

145 files changed

+996
-657
lines changed

Some content is hidden

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

145 files changed

+996
-657
lines changed

‎README.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
[![Build Status](https://travis-ci.org/kubevirt/web-ui-components.svg?branch=master)](https://travis-ci.org/kubevirt/web-ui-components)
22
[![Coverage Status](https://coveralls.io/repos/github/kubevirt/web-ui-components/badge.svg)](https://coveralls.io/github/kubevirt/web-ui-components)
3+
[![npm version](https://img.shields.io/npm/v/kubevirt-web-ui-components.svg?style=flat)](https://npmjs.org/package/kubevirt-web-ui-components)
4+
[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
35

4-
# web-ui-components
5-
Set of reusable components identified during [kubevirt/web-ui](https://github.com/kubevirt/web-ui) development.
6+
# KubeVirt UI components
7+
8+
Set of reusable React components identified during [kubevirt/web-ui](https://github.com/kubevirt/web-ui) development.
9+
10+
## Documentation
11+
12+
- [Setting up development environment](docs/DevEnvSetup.md)
13+
- [Developer guideline](docs/DevGuide.md)
14+
- [Building & publishing](docs/BuildAndPublish.md)
15+
- [Travis CI](docs/Travis.md)

‎config/eslint.browser.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,5 +52,12 @@ module.exports = {
5252
ignoreClassFields: true,
5353
},
5454
],
55+
'import/order': [
56+
'error',
57+
{
58+
'newlines-between': 'always-and-inside-groups',
59+
groups: [['builtin', 'external'], ['internal', 'parent', 'sibling', 'index']],
60+
},
61+
],
5562
},
5663
};

‎config/stylelint.config.js

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,39 @@
11
// https://stylelint.io/user-guide/configuration/
22

3+
// This project uses the BEM (Block Element Modifier) convention for CSS classes:
4+
// http://getbem.com/naming/
5+
//
6+
// Note that the "kubevirt" prefix is enforced to avoid potential conflicts with
7+
// the consuming application.
8+
//
9+
// For example, a "FancyForm" component could use the following class names:
10+
// - kubevirt-fancy-form
11+
// - kubevirt-fancy-form__submit-button
12+
// - kubevirt-fancy-form__submit-button--disabled
13+
14+
const fragment = '[a-z-]+';
15+
const prefix = 'kubevirt-';
16+
317
module.exports = {
418
extends: 'stylelint-config-standard',
5-
plugins: ['stylelint-scss'],
19+
plugins: ['stylelint-scss', 'stylelint-selector-bem-pattern'],
20+
rules: {
21+
'plugin/selector-bem-pattern': {
22+
implicitComponents: 'sass/components/**/*.scss',
23+
componentName: new RegExp(`^${fragment}$`),
24+
componentSelectors: {
25+
// validate CSS selector sequences that occur before combinators,
26+
// for example: ".foo .bar > .baz" => validate ".foo"
27+
initial: componentName => {
28+
const word = `${fragment}(?:--${fragment})*`;
29+
const element = `(?:__${word})?`;
30+
const modifier = `(?:--${word})?`;
31+
return new RegExp(`^\\.${prefix}${componentName}${element}${modifier}$`);
32+
},
33+
// validate CSS selector sequences that occur after combinators,
34+
// for example: ".foo .bar > .baz" => validate ".bar" and ".baz"
35+
combined: () => new RegExp(`^\\.${fragment}(?:\\.${fragment})*$`),
36+
},
37+
},
38+
},
639
};

‎docs/BuildAndPublish.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Building & publishing
2+
3+
To build the project, run `yarn build`. This will regenerate the `dist` directory containing
4+
project's distributable assets.
5+
6+
To publish the project to [npm registry](https://www.npmjs.com) and make it available for use
7+
in consuming applications, run `yarn publish`.

‎docs/DevEnvSetup.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Setting up development environment
2+
3+
## Prerequisites
4+
5+
Install the latest [Node.js](https://nodejs.org) Long Term Support (LTS) version.
6+
An easy way to do that is through [Node Version Manager](https://github.com/creationix/nvm),
7+
which allows you to install and switch between multiple Node.js versions:
8+
9+
```sh
10+
nvm install 'lts/*' # install the latest LTS version
11+
nvm alias default 'lts/*' # default version to use for new shells
12+
nvm use default # switch to the default version
13+
node -v # print the current Node.js version
14+
```
15+
16+
Install [Yarn](https://yarnpkg.com) package manager for Node.js (latest stable version).
17+
If you'd like to install Yarn manually, download `yarn-<VERSION>.tar.gz` tarball from their
18+
[releases](https://github.com/yarnpkg/yarn/releases), extract it and add `$YARN_HOME/bin`
19+
directory to your `PATH`.
20+
21+
## Project setup
22+
23+
Install or update project's dependencies with Yarn:
24+
25+
```sh
26+
yarn install
27+
```
28+
29+
### Cosmos
30+
31+
Start [Cosmos](https://github.com/react-cosmos/react-cosmos) server used for testing React
32+
components an in isolated environment which simulates the consuming application:
33+
34+
```sh
35+
yarn cosmos
36+
```
37+
38+
Cosmos will watch the `src` directory for changes and rebuild its playground UI accordingly.
39+
40+
### Jest
41+
42+
Start [Jest](https://jestjs.io) in watch mode for executing tests:
43+
44+
```sh
45+
yarn test:watch
46+
```
47+
48+
Jest will watch all files ending with `.test.js` and rerun the corresponding tests.

‎docs/DevGuide.md

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
# Developer guideline
2+
3+
## Component file structure
4+
5+
```
6+
src/components/
7+
├── <GroupName>
8+
│ ├── index.js
9+
│ ├── <Component>.js
10+
│ ├── <AnotherComponent>.js
11+
│ ├── fixtures
12+
│ │ ├── <Component>.fixture.js
13+
│ │ └── <AnotherComponent>.fixture.js
14+
│ └── tests
15+
│ ├── <Component>.test.js
16+
│ └── <AnotherComponent>.test.js
17+
├── <AnotherGroupName>
18+
│ └── ..
19+
..
20+
```
21+
22+
Every component group should have an `index.js` file exporting specific components which
23+
are meant to be shipped as part of the project's npm package.
24+
25+
For every specific component, there should be a corresponding test and a Cosmos fixture.
26+
27+
## Stylesheet file structure
28+
29+
```
30+
sass/
31+
├── components/
32+
│ ├── <GroupName>
33+
│ │ ├── <style-block>.scss
34+
│ │ └── <another-style-block>.scss
35+
│ └── <AnotherGroupName>
36+
│ └── ..
37+
└── patternfly-tweaks/
38+
└── ..
39+
```
40+
41+
Styles are grouped based on React component groups, e.g. any `Form` component related styles
42+
should be placed under `sass/components/Form` directory. Styles in the `patternfly-tweaks`
43+
directory should be treated as temporary until being backported to the corresponding PF-React
44+
npm package.
45+
46+
This project uses the [BEM (Block Element Modifier)](http://getbem.com/naming/) convention
47+
for CSS classes. Refer to [stylelint configuration](../config/stylelint.config.js) for details
48+
on project-specific BEM format.
49+
50+
For each React component group, there may be multiple logical BEM-style selectors. Taking
51+
`src/components/Form/FormFactory` as an example, this component's render output includes
52+
PF-React's `FormGroup` with CSS class `kubevirt-form-group` added to it. In other words,
53+
different logical parts of the given component may use different CSS classes.
54+
55+
## Cosmos
56+
57+
Use the Cosmos application to test and experiment with React components. In Cosmos UI,
58+
every component is rendered inside an `iframe` which simulates the consuming application.
59+
60+
Remember to add [fixtures](https://github.com/react-cosmos/react-cosmos#fixtures) to ensure
61+
that components are properly exposed to Cosmos. Keep in mind that Cosmos is effectively the
62+
visual component interface between developers and designers:
63+
64+
- it allows developers to test KubeVirt related UI bits
65+
- it allows designers to review the current implementation
66+
- it shields both groups from having to work with the consuming application
67+
68+
Think of each fixture as a distinct visual test case for the given component, with `props`
69+
(and possibly other contextual information) used to exemplify the tested scenario. This is
70+
similar to testing a regular function from different angles, including known edge cases.
71+
72+
## Jest
73+
74+
Jest is used to run all tests. To detect test failures early, start Jest in watch mode and
75+
keep it open as you develop code.
76+
77+
At the very least, every React component should have an accompanying
78+
[snapshot test](https://jestjs.io/docs/en/snapshot-testing) to guard against regressions
79+
in its render output.
80+
81+
Avoid big `it` blocks. Prefer small, focused test cases which are easy to read and refactor.
82+
83+
## Validations
84+
85+
This project uses a simple validation mechanism driven by `tools/runValidations.js` script.
86+
New validations can be added to `tools/validations` directory as CommonJS modules exporting
87+
a function, for example:
88+
89+
```js
90+
module.exports = () => {
91+
return true; // validation success
92+
};
93+
```
94+
95+
## How to
96+
97+
### Lint, validate and test the project in one go?
98+
99+
```sh
100+
yarn test
101+
```
102+
103+
### Run specific tests?
104+
105+
```sh
106+
./node_modules/.bin/jest -c config/jest.config.js -t 'TestNameRegexp'
107+
```
108+
109+
### Update snapshots for specific tests?
110+
111+
```sh
112+
./node_modules/.bin/jest -c config/jest.config.js -t 'TestNameRegexp' -u
113+
```

‎docs/Travis.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Travis CI
2+
3+
This project hooks into the [Travis job lifecycle](https://docs.travis-ci.com/user/job-lifecycle)
4+
through following scripts:
5+
6+
- `before_script`: runs `tools/travis/beforeScript.js`
7+
- `after_success`: runs `tools/travis/afterSuccess.js`
8+
9+
Refer to [Travis configuration](../.travis.yml) for details.

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@
3838
"react-router-dom": "4.x"
3939
},
4040
"dependencies": {
41-
"@patternfly/react-console": "1.9.1",
41+
"@patternfly/react-console": "1.9.x",
42+
"classnames": "2.2.x",
4243
"js-yaml": "3.x",
4344
"lodash": "4.x",
4445
"react-dnd": "2.6.x",
@@ -96,6 +97,7 @@
9697
"stylelint": "9.x",
9798
"stylelint-config-standard": "18.x",
9899
"stylelint-scss": "3.x",
100+
"stylelint-selector-bem-pattern": "2.x",
99101
"webpack": "4.x"
100102
},
101103
"engines": {

‎sass/_components.scss

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
1-
@import './components/HelloWorld';
2-
@import './components/ButtonWithIcon';
3-
@import './components/CreateVmWizard';
4-
@import './components/Dropdown';
5-
@import './components/EditableDraggableTable';
6-
@import './components/FormFactory';
7-
@import './components/NewVmWizard';
8-
@import './components/ResultTab';
9-
@import './components/NetworksTab';
10-
@import './components/StorageTab';
11-
@import './components/VmStatus';
12-
@import './components/VmConsoles';
13-
@import './components/TemplateSource';
14-
@import './components/CreateDiskRow';
1+
/*
2+
KubeVirt UI component styles. Refer to stylelint configuration for details
3+
on project-specific BEM (Block Element Modifier) format for CSS classes.
4+
*/
5+
6+
@import './components/CreateDiskRow/create-disk-row';
7+
@import './components/Form/dropdown';
8+
@import './components/Form/dropdown-group';
9+
@import './components/Form/form-group';
10+
@import './components/Form/list-form-factory';
11+
@import './components/Table/editable-table';
12+
@import './components/Table/editable-table-actions';
13+
@import './components/TemplateSource/template-source';
14+
@import './components/VmStatus/vm-status';
15+
@import './components/Wizard/wizard';
16+
@import './components/Wizard/create-vm-wizard';
17+
18+
/*
19+
TODO: these styles should be backported to the corresponding PF-React package
20+
*/
21+
@import './patternfly-tweaks/vnc-console';

‎sass/_dependencies.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
/*
2+
KubeVirt UI style dependencies. Intended for use by Cosmos application
3+
when testing React components an in isolated environment which simulates
4+
the consuming application.
5+
*/
6+
17
$font-path: '~patternfly/dist/fonts/';
28
$icon-font-path: '~patternfly/dist/fonts/';
39
$img-path: '~patternfly/dist/img/';

‎sass/components/CreateDiskRow/create-disk-row.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.kubevirt-create-disk-row__action-buttons {
2+
width: 27px;
3+
}

‎sass/components/Form/dropdown-group.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.kubevirt-dropdown-group .dropdown-menu {
2+
width: 100%;
3+
}

‎sass/components/_Dropdown.scss renamed to ‎sass/components/Form/dropdown.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,3 @@
77
right: 5px;
88
top: 5px;
99
}
10-
11-
.kubevirt-dropdownGroup .dropdown-menu {
12-
width: 100%;
13-
}

‎sass/components/Form/form-group.scss

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.kubevirt-form-group .dropdown > .dropdown-menu {
2+
width: 100%;
3+
display: none;
4+
z-index: 1001;
5+
}
6+
7+
.kubevirt-form-group .dropdown.open > .dropdown-menu {
8+
display: block;
9+
}
10+
11+
.kubevirt-form-group--no-bottom {
12+
margin-bottom: 2px;
13+
}
14+
15+
.kubevirt-form-group--help {
16+
margin-bottom: 0;
17+
}
18+
19+
.kubevirt-form-group--no-help {
20+
margin-bottom: 23px;
21+
}
22+
23+
.kubevirt-form-group__field-help .popover {
24+
max-width: 400px;
25+
}

‎sass/components/Form/list-form-factory.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.kubevirt-list-form-factory__column--last {
2+
padding-right: 50px;
3+
}
4+
5+
.kubevirt-list-form-factory__actions {
6+
position: absolute;
7+
right: 0;
8+
}

‎sass/components/Table/editable-table-actions.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.kubevirt-editable-table-actions {
2+
padding-bottom: 9px;
3+
}

‎sass/components/Table/editable-table.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.kubevirt-editable-table__row-actions {
2+
padding: 3px;
3+
}
4+
5+
.kubevirt-editable-table__cell {
6+
min-height: 24px;
7+
}
8+
9+
.kubevirt-editable-table__cell-error {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
.kubevirt-editable-table__cell-error--bootable {
15+
margin-top: 2em;
16+
}

‎sass/components/TemplateSource/template-source.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.kubevirt-template-source__overlay {
2+
display: inline-block;
3+
}

‎sass/components/VmStatus/vm-status.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.kubevirt-vm-status__icon {
2+
margin-right: 5px;
3+
}

0 commit comments

Comments
 (0)