Merge pull request #20 from patternfly/no-global-css

No global css
patternfly · Jul 21, 2021 · 2d98acc · 2d98acc
2 parents a6370dd + 5330841
commit 2d98acc
Show file tree

Hide file tree

Showing 32 changed files with 237 additions and 196 deletions.
diff --git a/README.md b/README.md
@@ -24,6 +24,9 @@ yarn install
 # Start the development server
 yarn start
 
-# Run a production build (outputs to "packages/module/dist" dir)
+# Build the main module (outputs to "packages/module/dist" dir)
 yarn build
+
+# Quick build of the main module for local dev
+yarn build:quick
 ```
diff --git a/eslint-plugin-console/package.json b/eslint-plugin-console/package.json
@@ -26,7 +26,7 @@
     "eslint-plugin-react": "7.17.0",
     "eslint-plugin-react-hooks": "2.3.0",
     "eslint-plugin-sort-class-members": "1.6.0",
-    "merge": "1.2.1",
+    "merge": "2.1.1",
     "prettier": "1.19.1"
   }
 }
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
   ],
   "scripts": {
     "build": "yarn workspace @patternfly/quickstarts build",
+    "build:quick": "yarn workspace @patternfly/quickstarts quick",
     "start": "yarn workspace @patternfly/quickstarts-dev start",
     "watch": "yarn build && concurrently --kill-others \"yarn workspace @patternfly/quickstarts watch\" \"yarn start\"",
     "dev:build": "yarn workspace @patternfly/quickstarts-dev build",

diff --git a/packages/dev/package.json b/packages/dev/package.json
@@ -9,17 +9,17 @@
     "serve": "serve public"
   },
   "dependencies": {
-    "@patternfly/quickstarts": "1.0.2",
+    "@patternfly/quickstarts": "1.1.0-rc.1",
     "@patternfly/react-core": "^4.101.3",
     "asciidoctor": "^2.2.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-router-dom": "^5.2.0",
     "i18next": "^19.8.3",
     "i18next-browser-languagedetector": "^6.0.1",
     "i18next-parser": "^3.3.0",
     "i18next-pseudo": "^2.2.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-i18next": "^11.7.3",
+    "react-router-dom": "^5.2.0",
     "showdown": "1.8.6"
   },
   "devDependencies": {
@@ -34,7 +34,6 @@
     "css-loader": "^5.0.0",
     "file-loader": "^6.1.1",
     "html-webpack-plugin": "^5.0.0-beta.6",
-    "js-yaml-loader": "^1.2.2",
     "jsonpath": "^1.1.0",
     "local-web-server": "^2.6.1",
     "mini-css-extract-plugin": "^1.0.0",
@@ -49,6 +48,7 @@
     "webpack": "^5.1.3",
     "webpack-cli": "^4.0.0",
     "webpack-dev-server": "^3.11.2",
-    "yaml": "^1.10.2"
+    "yaml": "^1.10.2",
+    "yaml-loader": "^0.6.0"
   }
 }
diff --git a/packages/dev/src/App.css b/packages/dev/src/App.css
@@ -33,3 +33,7 @@
     transform: rotate(360deg);
   }
 }
+
+.catalog-sub {
+  margin: 0 0 11.5px;
+}
diff --git a/packages/dev/src/CustomCatalog.tsx b/packages/dev/src/CustomCatalog.tsx
@@ -89,7 +89,9 @@ export const CustomCatalog: React.FC = () => {
       <QuickStartCatalogSection>
         <TextContent>
           <Text component="h2">Quick starts</Text>
-          <Text component="p">Step-by-step instructions and tasks</Text>
+          <Text component="p" className="catalog-sub">
+            Step-by-step instructions and tasks
+          </Text>
         </TextContent>
         <Gallery className="co-quick-start-catalog__gallery" hasGutter>
           {allQuickStarts

diff --git a/packages/dev/src/Home.tsx b/packages/dev/src/Home.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, PageSection, Stack, StackItem } from '@patternfly/react-core';
+import { Button, PageSection, Stack, StackItem, Title } from '@patternfly/react-core';
 import { QuickStartContext } from '@patternfly/quickstarts';
 import i18n from './i18n/i18n';
 
@@ -16,8 +16,8 @@ export const Home: React.FunctionComponent = () => {
   return (
     <>
       <PageSection>
-        <h1>Quick starts demo app</h1>
-        <p>To view all quick starts, click the left "Quick Starts" nav item</p>
+        <Title headingLevel="h1">Quick starts demo app</Title>
+        <p>To view all quick starts, click the left "Quick starts" nav item</p>
       </PageSection>
       <PageSection>
         <Stack hasGutter>

diff --git a/packages/dev/src/index.tsx b/packages/dev/src/index.tsx
@@ -1,14 +1,8 @@
-/*
-Projects would typically either load the base.css stylesheet (in combination with PF react components)
-or load the whole patternfly stylesheet (and maybe null load react-styles imported stylesheets from PF react components)
-*/
-
-// import '@patternfly/patternfly/patternfly.css';
-// import '@patternfly/patternfly/utilities/Accessibility/accessibility.css';
 import '@patternfly/react-core/dist/styles/base.css';
 
-import '@patternfly/quickstarts/dist/quickstarts.min.css';
-import '@patternfly/quickstarts/dist/quickstarts-bootstrap.min.css';
+import '@patternfly/quickstarts/dist/quickstarts.css';
+import '@patternfly/quickstarts/dist/quickstarts-bootstrap.css';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';

diff --git a/packages/dev/src/quickstarts-data/mocks/yamls/install-associate-pipeline-quickstart.yaml b/packages/dev/src/quickstarts-data/mocks/yamls/install-associate-pipeline-quickstart.yaml
@@ -8,10 +8,7 @@ spec:
   durationMinutes: 10
   icon: data:image/png;base64,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
   description: Import an application from Git, add a pipeline to it, and run the Pipeline.
-  introduction: 'This quick start guides you through creating an application and associating
-    it with a CI/CD pipeline.
-
-'
+  introduction: This quick start guides you through creating an application and associating it with a CI/CD pipeline.
   tasks:
   - title: Importing an application and associate it with a pipeline
     description: |-

diff --git a/packages/dev/src/quickstarts-data/mocks/yamls/serverless-application-quickstart.yaml b/packages/dev/src/quickstarts-data/mocks/yamls/serverless-application-quickstart.yaml
@@ -8,8 +8,7 @@ spec:
   icon: data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2UwMzQwMDt9LmNscy0ye2ZpbGw6I2NlMmUwMDt9LmNscy0ze2ZpbGw6bm9uZTt9LmNscy00e2ZpbGw6I2ZmZjt9LmNscy01e2ZpbGw6I2RjZGNkYzt9LmNscy02e2ZpbGw6I2FhYTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlJlZF9IYXQtT3BlbnNoaWZ0NC1DYXRhbG9nX0ljb25zLVNlcnZlcmxlc3M8L3RpdGxlPjxjaXJjbGUgY2xhc3M9ImNscy0xIiBjeD0iNTAiIGN5PSI1MCIgcj0iNTAiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik04NS4zNiwxNC42NEE1MCw1MCwwLDAsMSwxNC42NCw4NS4zNloiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik00MC41Nyw0Ny40MmEzLjg5LDMuODksMCwxLDAsMy44OCwzLjg4QTMuODksMy44OSwwLDAsMCw0MC41Nyw0Ny40MloiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0yMS40Miw0Ny40MkEzLjg5LDMuODksMCwxLDAsMjUuMyw1MS4zLDMuODksMy44OSwwLDAsMCwyMS40Miw0Ny40MloiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik01MC4wOSw0OC44NmgtLjE4YTQuMTEsNC4xMSwwLDAsMS0zLjI2LTEuNjMsNy42OSw3LjY5LDAsMCwwLTEyLjE2LDAsNC4xMyw0LjEzLDAsMCwxLTMuMjYsMS42M0gzMWE0LjA5LDQuMDksMCwwLDEtMy4yNS0xLjYzQTcuNjksNy42OSwwLDAsMCwxNCw1MS45M2gwVjY0LjZhMi43OSwyLjc5LDAsMCwwLDIuNzksMi43OWgxNS44TDUxLjM0LDQ4LjY2QTQsNCwwLDAsMSw1MC4wOSw0OC44NloiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik03OC4wNSw0NC4yNWE3LjY1LDcuNjUsMCwwLDAtNS44NSwzQTQuMSw0LjEsMCwwLDEsNjksNDguODZoLS4xOWE0LjEzLDQuMTMsMCwwLDEtMy4yNi0xLjYzLDcuNjksNy42OSwwLDAsMC0xMi4xNiwwLDQuMTYsNC4xNiwwLDAsMS0yLDEuNDNMMzIuNjEsNjcuMzlIODMuMTlBMi43OSwyLjc5LDAsMCwwLDg2LDY0LjZWNTIuMDdBNy43Nyw3Ljc3LDAsMCwwLDc4LjA1LDQ0LjI1WiIvPjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0iTTIxLjEsNjNoMTBhMS44MywxLjgzLDAsMSwwLDAtMy42NmgtMTBhMS44MywxLjgzLDAsMCwwLDAsMy42NloiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjQwLjU3IiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjQwLjU3IiBjeT0iMjguMjMiIHI9IjEuMzUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjU5LjcyIiBjeT0iMjguMjMiIHI9IjEuMzUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjIxLjQyIiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjUwIiBjeT0iNDMuNDUiIHI9IjIuOTMiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjY4Ljg5IiBjeT0iNDMuNDUiIHI9IjIuOTMiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjMxLjA5IiBjeT0iNDMuNDUiIHI9IjIuOTMiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNiIgY3g9Ijc3Ljk0IiBjeT0iNTQuMzEiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNiIgY3g9IjY4LjkxIiBjeT0iNTQuMzEiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9Ijc3Ljk0IiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjU5LjcyIiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjUwIiBjeT0iMzMuMSIgcj0iMy4wMSIvPjxjaXJjbGUgY2xhc3M9ImNscy00IiBjeD0iMzEuMDkiIGN5PSIzMy4xIiByPSIzLjAxIi8+PGNpcmNsZSBjbGFzcz0iY2xzLTQiIGN4PSI2OC44OSIgY3k9IjMzLjEiIHI9IjMuMDEiLz48L3N2Zz4=
   durationMinutes: 15
   description: Learn how to create a Serverless application.
-  introduction: This quick start guides you through creating and using a serverless
-    application.
+  introduction: This quick start guides you through creating and using a serverless application.
   tasks:
     - title: Creating a serverless application
       description: |-

diff --git a/packages/dev/src/quickstarts-data/mocks/yamls/spring-with-s2i.yaml b/packages/dev/src/quickstarts-data/mocks/yamls/spring-with-s2i.yaml
@@ -87,17 +87,17 @@ spec:
 
         1. In the **Git Repo URL** field, add 
           
-          ```
+            ```
             https://github.com/snowdrop/rest-http-example
-          ``` 
+            ``` 
 
         1. Click **Show advanced Git options** to expose additional form fields.
 
         1. Add 
 
-          ```
-          2.3.4-2-redhat
-          ``` 
+            ```
+            2.3.4-2-redhat
+            ``` 
         to the **Git reference** field.
 
         1. At the end of the form, click **Create**. 

diff --git a/packages/dev/webpack.config.js b/packages/dev/webpack.config.js
@@ -77,7 +77,8 @@ module.exports = (_env, argv) => {
         },
         {
           test: /\.ya?ml$/,
-          use: 'js-yaml-loader',
+          type: 'json',
+          use: 'yaml-loader',
         },
       ],
     },

diff --git a/packages/module/README.md b/packages/module/README.md
@@ -13,7 +13,7 @@ yarn add @patternfly/quickstarts
 
 If your project doesn't already have these installed, you'll need:
 ```bash
-yarn add @patternfly/react-core showdown@1.8.6
+yarn add @patternfly/react-core showdown
 ```
 
 ### Stylesheets
@@ -31,16 +31,15 @@ import '@patternfly/quickstarts/dist/quickstarts-bootstrap.min.css';
 
 ## Usage
 
-In your main app file wrap your application with the QuickStartContext and the QuickStartDrawer:
+In your main app file wrap your application with the QuickStartContextProvider and the QuickStartDrawer:
 
 ```js
 import {
   QuickStartDrawer,
   QuickStartContext,
+  QuickStartContextProvider,
   QuickStartCatalogPage,
-  useValuesForQuickStartContext,
   useLocalStorage,
-  QuickStartContextValues
 } from '@patternfly/quickstarts';
 // for how these quick start yaml files should look see below
 import quickstartOne from '.yamls/quickstart-one.yaml';
@@ -52,35 +51,32 @@ const App = () => {
   // Otherwise you can use React.useState here or another means (backend) to store the active quick start ID and state
   const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
   const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});
-  const valuesForQuickstartContext = useValuesForQuickStartContext({
+  const valuesForQuickstartContext = {
+    // array of quick starts
     allQuickStarts,
+    // the next 4 items tie the quick start state to the main app
     activeQuickStartID,
     setActiveQuickStartID,
     allQuickStartStates,
     setAllQuickStartStates
-  });
+  };
 
   return (
-    <QuickStartContext.Provider value={valuesForQuickstartContext}>
+    <QuickStartContextProvider value={valuesForQuickstartContext}>
       <QuickStartDrawer>
-        <div>
-          <h1>My app</h1>
-          <button onClick={() => valuesForQuickstartContext.setActiveQuickStart('a quickstart id')}>
-            Open a quickstart
-          </button>
-          <QuickStartCatalogPage />
-        </div>
         <SomeNestedComponent />
+        <QuickStartCatalogPage />
       </QuickStartDrawer>
-    </QuickStartContext.Provider>
+    </QuickStartContextProvider>
   );
 };
 
 const SomeNestedComponent = () => {
-  const qsContext = React.useContext<QuickStartContextValues> QuickStartContext;
+  const qsContext = React.useContext<QuickStartContextValues>(QuickStartContext);
+  // the quick start ID is defined in the quick start object's metadata.name field
   return (
-    <button onClick={() => qsContext.setActiveQuickStart('a quickstart id')}>
-      Open a quickstart from a nested component
+    <button onClick={() => qsContext.setActiveQuickStart('a_quickstart_id')}>
+      Toggle quick start
     </button>
   );
 };

diff --git a/packages/module/package.json b/packages/module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "1.0.2",
+  "version": "1.1.0-rc.1",
   "description": "PatternFly quick starts",
   "files": [
     "dist"
@@ -21,7 +21,8 @@
     "clean": "rm -rf dist",
     "prebuild": "yarn clean",
     "build": "rollup -c && yarn post-css",
-    "watch": "rollup -cw",
+    "watch": "rollup -w --config rollup-quick.config.js",
+    "quick": "rollup --config rollup-quick.config.js",
     "test": "LANG=en_US.UTF-8 jest",
     "format": "prettier --check --write ./src/**/*.{tsx,ts}",
     "type-check": "tsc --noEmit",
@@ -34,25 +35,24 @@
     "clean-css": "yarn clean-css:quickstarts && yarn clean-css:bootstrap"
   },
   "peerDependencies": {
-    "@patternfly/patternfly": ">=4.90.5",
-    "@patternfly/react-catalog-view-extension": ">=4.10.13",
-    "@patternfly/react-core": ">=4.101.3",
-    "@patternfly/react-icons": ">=4.9.5",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
+    "@patternfly/react-core": ">=4.101.3",
     "showdown": ">=1.8.6"
   },
   "dependencies": {
-    "@patternfly/patternfly": "4.108.2",
-    "@patternfly/react-catalog-view-extension": "4.11.42",
-    "@patternfly/react-core": "4.128.2",
     "bootstrap-sass": "^3.3.7",
     "classnames": "^2.2.6",
     "dompurify": "^2.2.6",
     "history": "^5.0.0",
     "showdown": "1.8.6"
   },
   "devDependencies": {
+    "@patternfly/patternfly": "4.122.2",
+    "@patternfly/react-catalog-view-extension": "4.12.15",
+    "@patternfly/react-core": "4.135.15",
+    "@patternfly/react-icons": "4.11.4",
+    "@patternfly/react-tokens": "4.12.5",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.1.0",
@@ -68,7 +68,6 @@
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
-    "sass": "^1.35.2",
     "node-sass": "^6.0.1",
     "prettier": "^2.1.2",
     "purgecss": "^4.0.0",
@@ -80,11 +79,12 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.37.0",
     "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-node-externals": "^2.2.0",
     "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-visualizer": "^5.5.0",
-    "rollup-plugin-copy": "^3.4.0",
+    "sass": "^1.35.2",
     "tslib": "^2.0.3"
   }
 }
diff --git a/packages/module/rollup-quick.config.js b/packages/module/rollup-quick.config.js
@@ -0,0 +1,3 @@
+import { esBuild, cssBootstrap } from './rollup.config';
+
+export default [esBuild, cssBootstrap];
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { esBuild, cssBootstrap } from './rollup.config';

		export default [esBuild, cssBootstrap];