fix(docs): fix styles not being applied (#15)

* fix(docs): fix styles not being applied

* fix(build): build css after building js

Author: wise-king-sullyman

packages/module/buildCSS.js

@@ -0,0 +1,20 @@
+const fs = require('fs');
+const path = require('path')
+
+const consoleStylesPath = require.resolve('@patternfly/react-styles').replace('dist', 'css').replace('js', 'components').replace('index.js', 'Consoles')
+
+const files = fs.readdirSync(consoleStylesPath)
+
+const consoleCSSFiles = files.filter(fileName => fileName.match(/\.css$/))
+
+const outputDirPath = path.resolve('./dist/css')
+
+if (!fs.existsSync(outputDirPath)) {
+  fs.mkdirSync(outputDirPath)
+}
+
+consoleCSSFiles.forEach(fileName => {
+  const src = path.join(consoleStylesPath, fileName)
+  const dest = path.join(outputDirPath, fileName)
+  fs.copyFileSync(src, dest)
+})

packages/module/package.json

@@ -5,7 +5,8 @@
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "scripts": {
-    "build": "yarn build:esm && yarn build:cjs",
+    "build": "yarn build:esm && yarn build:cjs && yarn build:css",
+    "build:css": "node ./buildCSS.js",
     "build:esm": "tsc --build --verbose ./tsconfig.json",
     "build:cjs": "tsc --build --verbose ./tsconfig.cjs.json",
     "clean": "rimraf dist",
@@ -34,6 +35,7 @@
   "dependencies": {
     "@novnc/novnc": "^1.3.0",
     "@patternfly/react-core": "^4.273.3",
+    "@patternfly/react-styles": "^4.92.3",
     "@spice-project/spice-html5": "^0.2.1",
     "@types/file-saver": "^2.0.1",
     "file-saver": "^1.3.8",

packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md

@@ -14,6 +14,11 @@ React console lives in its own package at [`@patternfly/react-console`](https://
 import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
 import { SerialConsoleCustom } from './SerialConsoleCustom.jsx';
 import { debounce } from '@patternfly/react-core';
+import '@patternfly/react-console/dist/css/AccessConsoles.css';
+import '@patternfly/react-console/dist/css/DesktopViewer.css';
+import '@patternfly/react-console/dist/css/SerialConsole.css';
+import '@patternfly/react-console/dist/css/VncConsole.css';
+import '@patternfly/react-console/dist/css/xterm.css';
 
 ## Examples
 

packages/module/patternfly-docs/generated/extensions/react-console/react.js

@@ -3,6 +3,11 @@ import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfl
 import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
 import { SerialConsoleCustom } from '../../../content/extensions/react-console/examples/./SerialConsoleCustom.jsx';
 import { debounce } from '@patternfly/react-core';
+import '@patternfly/react-console/dist/css/AccessConsoles.css';
+import '@patternfly/react-console/dist/css/DesktopViewer.css';
+import '@patternfly/react-console/dist/css/SerialConsole.css';
+import '@patternfly/react-console/dist/css/VncConsole.css';
+import '@patternfly/react-console/dist/css/xterm.css';
 const pageData = {
   "id": "React console",
   "section": "extensions",

packages/module/patternfly-docs/patternfly-docs.css.js

@@ -6,3 +6,5 @@ import '@patternfly/patternfly/patternfly-addons.css';
 import '@patternfly/documentation-framework/global.css';
 
 // Add your extension CSS below
+
+import '@patternfly/react-styles/css/components/Consoles/SerialConsole.css';

yarn.lock

@@ -1742,6 +1742,11 @@
   resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.91.6.tgz#2cd4f0d5dca7774fe6a64505b8a3e7bd2abd66c6"
   integrity sha512-3wCYkvGRgbx6u5JrCaUNcpDvyTOrgvXU/Mh2hs8s/njBUDpyuyRb+gkFoE3l3Ro3Lk0DnRLYpIjCSjl38Bd0iA==
 
+"@patternfly/react-styles@^4.92.3":
+  version "4.92.3"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.92.3.tgz#046acee6e38c996cf41c288819eca17c3634a782"
+  integrity sha512-jC8F71trFWVYM7YVTP/3MBLwLZDCY3tgHeAmSKdcw6R607LK4rtCzfw5lt2IHNmAjQ0ggqDlJGWsJAfGMe4iPA==
+
 "@patternfly/react-styles@^4.92.5":
   version "4.92.5"
   resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.92.5.tgz#a4b91c02e3a8e6b107785a3c06542436f4b81f73"