Skip to content

chore(Console): Add skeleton of @patternfly-react/console package #311

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 23, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,11 @@
"build:scripts": "babel src --out-dir dist/js --ignore .test.js,__mocks__",
"build:less": "mkdir -p dist/less && cp -r less/* dist/less",
"build:sass": "mkdir -p dist/sass && cp -r sass/patternfly-react/* dist/sass && node-sass --output-style compressed --include-path sass --include-path $npm_package_sassIncludes_patternfly --include-path $npm_package_sassIncludes_bootstrap --include-path $npm_package_sassIncludes_fontAwesome -o dist/css sass/patternfly-react.scss",
"build:console": "yarn build:console:scripts && yarn build:console:less && yarn build:console:sass",
"build:console:scripts": "babel packages/console/src --out-dir packages/console/dist/cjs --ignore .test.js,__mocks__",
"build:console:less": "mkdir -p packages/console/dist/less && cp -r packages/console/less/* packages/console/dist/less",
"build:console:sass": "mkdir -p packages/console/dist/sass && cp -r packages/console/sass/* packages/console/dist/sass && node-sass --output-style compressed --include-path sass --include-path $npm_package_sassIncludes_patternfly --include-path $npm_package_sassIncludes_bootstrap --include-path $npm_package_sassIncludes_fontAwesome -o packages/console/dist/css packages/console/sass/console.scss",
"publish:console": "cd packages/console && yarn publish",
"lint": "yarn lint:js && yarn lint:styles",
"lint:fix": "yarn lint:js --fix && yarn lint:styles --fix",
"lint:js": "eslint --rulesdir lint-rules/ --max-warnings 0 src storybook",
Expand Down
45 changes: 45 additions & 0 deletions packages/console/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
# @patternfly-react/console
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

still need some notes here? i think we should mention the scripts added above and also mention this is an interim solution until we are on the lerna path...


This package provides VncConsole and SerialConsole React components to be used alongside patternfly-react.

**_The below commands are temporary and will be replaced once this repo starts using Lerna._**

### Installing

```
yarn add @patternfly-react/console
```

or

```
npm install @patternfly-react/console --save
```

### Usage

```javascript
import { VncConsole, SerialConsole } from '@patternfly-react/console
```

### Building

```
yarn build
```

Note the build scripts for this are located in the root package.json under `build:console:*`.

### Testing

Testing is done at the root of this repo. To only run the console tests:

```
yarn test packages/console
```

### Publishing

```
yarn publish
```
15 changes: 15 additions & 0 deletions packages/console/less/console.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/**
+ Styling shared by both VncConsole and SerialConsole.
+*/
@import 'serial-console';
@import 'vnc-console';

.console-actions-pf {
float: right;
position: relative;
top: -2em;
}

.console-actions-buttons-pf {
margin-left: 5px;
}
48 changes: 48 additions & 0 deletions packages/console/less/serial-console.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/**
SerialConsole styles
*/

.console-pf > .terminal {
color: @color-pf-white;
text-align: left;
outline: medium none;
background-color: @color-pf-black;
border: 1px solid @color-pf-black;
padding: 10px;
}

.console-pf {
font-family: @font-family-monospace;
font-size: 15px;
margin-top: 0;
margin-bottom: 0;
text-align: center;
line-height: normal;
}

.console-pf .terminal .terminal-cursor {
border: 1px solid @color-pf-white;
}

.console-pf .terminal:focus .terminal-cursor {
border: none;
animation: blink 1s step-end infinite;
}

@keyframes blink {
from {
color: @color-pf-black;
background: @color-pf-white;
}

50% {
color: @color-pf-white;
background: @color-pf-black;
}
}

.console-terminal-pf {
width: 100%;
padding-right: 0px;
padding-left: 0px;
}
8 changes: 8 additions & 0 deletions packages/console/less/vnc-console.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.vnc-console {
.vnc-console-connecting {
background-color: @color-pf-green;
}
.vnc-console-disconnected {
background-color: @color-pf-red;
}
}
43 changes: 43 additions & 0 deletions packages/console/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{
"name": "@patternfly-react/console",
"version": "0.0.0",
"description": "This library provides a set of Console React components for use with the PatternFly reference implementation.",
"main": "dist/cjs/index.js",
"sideEffects": false,
"files": [
"./dist"
],
"repository": {
"type": "git",
"url": "https://github.com/patternfly/patternfly-react.git"
},
"keywords": [
"react",
"patternfly"
],
"author": "Red Hat",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/patternfly/patternfly-react/issues"
},
"homepage": "https://github.com/patternfly/patternfly-react/blob/master/src/console/README.md",
"publishConfig": {
"access": "public"
},
"scripts": {
"build": "node ../../scripts/runScript.js build:console",
"prepublish": "yarn build"
},
"dependencies": {
"@novnc/novnc": "^1.0.0",
"patternfly": "^3.45.0",
"patternfly-react": "^1.19.1",
"xterm": "^3.3.0"
},
"devDependencies": {},
"peerDependencies": {
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-dom": "^16.3.2"
}
}
49 changes: 49 additions & 0 deletions packages/console/sass/_serial-console.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/**
SerialConsole styles
*/

.console-pf > .terminal {
color: $color-pf-white;
text-align: left;
outline: medium none;
background-color: $color-pf-black;
border: 1px solid $color-pf-black;
padding: 10px;
}

.console-pf {
font-family: $font-family-monospace;
font-size: 15px;
margin-top: 0;
margin-bottom: 0;
text-align: center;
line-height: normal;
}

.console-pf .terminal .terminal-cursor {
border: 1px solid $color-pf-white;
}

.console-pf .terminal:focus .terminal-cursor {
border: none;
animation: blink 1s step-end infinite;
}

@keyframes blink {
from {
color: $color-pf-black;
background: $color-pf-white;
}

50% {
color: $color-pf-white;
background: $color-pf-black;
}
}

.console-terminal-pf {
width: 100%;
height: 40%;
padding-right: 0;
padding-left: 0;
}
9 changes: 9 additions & 0 deletions packages/console/sass/_vnc-console.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.vnc-console {
.vnc-console-connecting {
background-color: $color-pf-green;
}

.vnc-console-disconnected {
background-color: $color-pf-red;
}
}
28 changes: 28 additions & 0 deletions packages/console/sass/console.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/**
Styling shared by both VncConsole and SerialConsole.
*/
// Bootstrap Core variables and mixins
@import 'bootstrap/variables';
@import 'bootstrap/mixins';

// Patternfly Core variables and mixins
@import 'patternfly/variables';
@import 'patternfly/bootstrap-mixin-overrides';
@import 'patternfly/mixins';

// Console StyleSheets
@import "serial-console";
@import "vnc-console";

/**
Styling shared by both VncConsole and SerialConsole.
*/
.console-actions-pf {
float: right;
position: relative;
top: -2em;
}

.console-actions-buttons-pf {
margin-left: 5px;
}
11 changes: 11 additions & 0 deletions packages/console/src/SerialConsole/SerialConsole.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';

const propTypes = {};
const defaultProps = {};

const SerialConsole = () => <div>Serial Console</div>;

SerialConsole.propTypes = propTypes;
SerialConsole.defaultProps = defaultProps;

export default SerialConsole;
19 changes: 19 additions & 0 deletions packages/console/src/SerialConsole/SerialConsole.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { inlineTemplate } from '../../../../storybook/decorators/storyTemplates';
import SerialConsole from './SerialConsole';

const stories = storiesOf('@patternfly-react/console', module);

stories.add(
'SerialConsole',
withInfo()(() => {
const story = <SerialConsole />;
return inlineTemplate({
story,
title: 'SerialConsole'
});
})
);
9 changes: 9 additions & 0 deletions packages/console/src/SerialConsole/SerialConsole.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { shallow } from 'enzyme';
import SerialConsole from './SerialConsole';

test('placeholder render test', () => {
const view = shallow(<SerialConsole />);
expect(view).toMatchSnapshot();
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`placeholder render test 1`] = `
<div>
Serial Console
</div>
`;
1 change: 1 addition & 0 deletions packages/console/src/SerialConsole/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as SerialConsole } from './SerialConsole';
11 changes: 11 additions & 0 deletions packages/console/src/VncConsole/VncConsole.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';

const propTypes = {};
const defaultProps = {};

const VncConsole = () => <div>VncConsole</div>;

VncConsole.propTypes = propTypes;
VncConsole.defaultProps = defaultProps;

export default VncConsole;
19 changes: 19 additions & 0 deletions packages/console/src/VncConsole/VncConsole.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { inlineTemplate } from '../../../../storybook/decorators/storyTemplates';
import VncConsole from './VncConsole';

const stories = storiesOf('@patternfly-react/console', module);

stories.add(
'VncConsole',
withInfo()(() => {
const story = <VncConsole />;
return inlineTemplate({
story,
title: 'VncConsole'
});
})
);
9 changes: 9 additions & 0 deletions packages/console/src/VncConsole/VncConsole.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { shallow } from 'enzyme';
import VncConsole from './VncConsole';

test('placeholder render test', () => {
const view = shallow(<VncConsole />);
expect(view).toMatchSnapshot();
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`placeholder render test 1`] = `
<div>
VncConsole
</div>
`;
1 change: 1 addition & 0 deletions packages/console/src/VncConsole/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as VncConsole } from './VncConsole';
2 changes: 2 additions & 0 deletions packages/console/src/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './SerialConsole';
export * from './VncConsole';
Loading