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

dmiller9911 · jeff-phillips-18 · commit 4a69ebd806f7 · 2018-04-23T10:01:36.000-04:00
Added a skelton for the console package under `packages/console`. This package will include the upcoming VncConsole and SerialConsole.
diff --git a/package.json b/package.json
@@ -116,6 +116,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",
diff --git a/packages/console/README.md b/packages/console/README.md
@@ -0,0 +1,45 @@
+# @patternfly-react/console
+
+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
+```
diff --git a/packages/console/less/console.less b/packages/console/less/console.less
@@ -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;
+}
diff --git a/packages/console/less/serial-console.less b/packages/console/less/serial-console.less
@@ -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;
+}
diff --git a/packages/console/less/vnc-console.less b/packages/console/less/vnc-console.less
@@ -0,0 +1,8 @@
+.vnc-console {
+  .vnc-console-connecting {
+    background-color: @color-pf-green;
+  }
+  .vnc-console-disconnected {
+    background-color: @color-pf-red;
+  }
+}
diff --git a/packages/console/package.json b/packages/console/package.json
@@ -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"
+  }
+}
diff --git a/packages/console/sass/_serial-console.scss b/packages/console/sass/_serial-console.scss
@@ -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;
+}
diff --git a/packages/console/sass/_vnc-console.scss b/packages/console/sass/_vnc-console.scss
@@ -0,0 +1,9 @@
+.vnc-console {
+  .vnc-console-connecting {
+    background-color: $color-pf-green;
+  }
+
+  .vnc-console-disconnected {
+    background-color: $color-pf-red;
+  }
+}
diff --git a/packages/console/sass/console.scss b/packages/console/sass/console.scss
@@ -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;
+}
diff --git a/packages/console/src/SerialConsole/SerialConsole.js b/packages/console/src/SerialConsole/SerialConsole.js
@@ -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;
diff --git a/packages/console/src/SerialConsole/SerialConsole.stories.js b/packages/console/src/SerialConsole/SerialConsole.stories.js
@@ -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'
+    });
+  })
+);
diff --git a/packages/console/src/SerialConsole/SerialConsole.test.js b/packages/console/src/SerialConsole/SerialConsole.test.js
@@ -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();
+});
diff --git a/packages/console/src/SerialConsole/__snapshots__/SerialConsole.test.js.snap b/packages/console/src/SerialConsole/__snapshots__/SerialConsole.test.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`placeholder render test 1`] = `
+<div>
+  Serial Console
+</div>
+`;
diff --git a/packages/console/src/SerialConsole/index.js b/packages/console/src/SerialConsole/index.js
@@ -0,0 +1 @@
+export { default as SerialConsole } from './SerialConsole';
diff --git a/packages/console/src/VncConsole/VncConsole.js b/packages/console/src/VncConsole/VncConsole.js
@@ -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;
diff --git a/packages/console/src/VncConsole/VncConsole.stories.js b/packages/console/src/VncConsole/VncConsole.stories.js
@@ -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'
+    });
+  })
+);
diff --git a/packages/console/src/VncConsole/VncConsole.test.js b/packages/console/src/VncConsole/VncConsole.test.js
@@ -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();
+});
diff --git a/packages/console/src/VncConsole/__snapshots__/VncConsole.test.js.snap b/packages/console/src/VncConsole/__snapshots__/VncConsole.test.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`placeholder render test 1`] = `
+<div>
+  VncConsole
+</div>
+`;
diff --git a/packages/console/src/VncConsole/index.js b/packages/console/src/VncConsole/index.js
@@ -0,0 +1 @@
+export { default as VncConsole } from './VncConsole';
diff --git a/packages/console/src/index.js b/packages/console/src/index.js
@@ -0,0 +1,2 @@
+export * from './SerialConsole';
+export * from './VncConsole';
diff --git a/packages/console/yarn.lock b/packages/console/yarn.lock
diff --git a/scripts/runScript.js b/scripts/runScript.js
diff --git a/storybook/config.js b/storybook/config.js
