feat(rollup): create unified react-core dist

.eslintignore

@@ -12,6 +12,7 @@ coverage
 **/Generated
 **/build
 css
+packages/react-docs/static
 
 # package managers
 yarn-error.log

packages/react-core/package.json

@@ -29,12 +29,13 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
-    "build": "yarn build:babel && yarn build:types && node ./scripts/copyStyles.js",
+    "build": "yarn build:babel && yarn build:umd && yarn build:types && node ./scripts/copyStyles.js",
     "build:babel": "concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"",
     "build:babel:cjs": "babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env",
     "build:babel:esm": "babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm",
     "build:babel:umd": "babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
     "build:types": "tsc -p tsconfig.gen-dts.json",
+    "build:umd": "rollup -c && rollup -c --environment IS_PRODUCTION",
     "clean": "rimraf dist",
     "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose",
     "gen:tests": "yo tsx-docgen"
@@ -67,6 +68,12 @@
     "generator-tsx-docgen": "^0.1.0",
     "glob": "^7.1.2",
     "rimraf": "^2.6.2",
+    "rollup": "^2.2.0",
+    "@rollup/plugin-node-resolve": "^7.1.1",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-replace": "^2.3.1",
+    "rollup-plugin-scss": "^2.1.0",
+    "rollup-plugin-terser": "^5.3.0",
     "typescript": "^3.8.3",
     "yo": "^3.1.1"
   },

packages/react-core/rollup.config.js

@@ -0,0 +1,31 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import scss from 'rollup-plugin-scss';
+import replace from '@rollup/plugin-replace';
+import { terser } from 'rollup-plugin-terser';
+
+const isProduction = process.env.IS_PRODUCTION;
+
+module.exports = {
+  input: 'dist/esm/index.js',
+  output: {
+    file: `dist/umd/react-core${isProduction ? '.min' : ''}.js`,
+    format: 'umd',
+    name: 'PatternFlyReact',
+    globals: {
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      'prop-types': 'PropTypes'
+    }
+  },
+  external: ['react', 'react-dom', 'prop-types'],
+  plugins: [
+    replace({
+      'process.env.NODE_ENV': `'${isProduction ? 'production' : 'development'}'`
+    }),
+    resolve(),
+    commonjs(),
+    scss(),
+    isProduction && terser()
+  ]
+};

packages/react-core/src/components/Alert/Alert.tsx

@@ -5,6 +5,7 @@ import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibili
 import { AlertIcon } from './AlertIcon';
 import { capitalize } from '../../helpers/util';
 import { InjectedOuiaProps, withOuiaContext } from '../withOuia';
+import { AlertContext } from './AlertContext';
 
 export enum AlertVariant {
   success = 'success',
@@ -35,13 +36,6 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   isLiveRegion?: boolean;
 }
 
-interface AlertContext {
-  title: React.ReactNode;
-  variantLabel?: string;
-}
-
-export const AlertContext = React.createContext<AlertContext>(null);
-
 const Alert: React.FunctionComponent<AlertProps & InjectedOuiaProps> = ({
   variant = AlertVariant.info,
   isInline = false,

packages/react-core/src/components/Alert/AlertActionCloseButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button, ButtonVariant, ButtonProps } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
-import { AlertContext } from '..';
+import { AlertContext } from './AlertContext';
 
 interface AlertActionCloseButtonProps extends ButtonProps {
   /** Additional classes added to the AlertActionCloseButton */

packages/react-core/src/components/Alert/AlertContext.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+interface AlertContext {
+  title: React.ReactNode;
+  variantLabel?: string;
+}
+
+export const AlertContext = React.createContext<AlertContext>(null);

packages/react-core/src/components/Alert/index.ts

@@ -1,3 +1,4 @@
 export * from './Alert';
+export * from './AlertContext';
 export * from './AlertActionCloseButton';
 export * from './AlertActionLink';

packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -8,6 +8,7 @@ import { DropdownWithContext } from '../Dropdown/DropdownWithContext';
 import { ApplicationLauncherGroup } from './ApplicationLauncherGroup';
 import { ApplicationLauncherSeparator } from './ApplicationLauncherSeparator';
 import { ApplicationLauncherItem } from './ApplicationLauncherItem';
+import { ApplicationLauncherContext } from './ApplicationLauncherContext';
 
 export interface ApplicationLauncherProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional element css classes */
@@ -57,11 +58,6 @@ export interface ApplicationLauncherProps extends React.HTMLProps<HTMLDivElement
   toggleId?: string;
 }
 
-export const ApplicationLauncherContext = React.createContext({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onFavorite: (itemId: string, isFavorite: boolean) => {}
-});
-
 export class ApplicationLauncher extends React.Component<ApplicationLauncherProps> {
   static defaultProps: ApplicationLauncherProps = {
     className: '',

packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherContent.tsx

@@ -5,7 +5,7 @@ import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibili
 import { ApplicationLauncherIcon } from './ApplicationLauncherIcon';
 import { ApplicationLauncherText } from './ApplicationLauncherText';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { ApplicationLauncherItemContext } from './ApplicationLauncherItem';
+import { ApplicationLauncherItemContext } from './ApplicationLauncherItemContext';
 
 export interface ApplicationLauncherContentProps {
   /** Main content to be rendered */

packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherContext.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+export const ApplicationLauncherContext = React.createContext({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onFavorite: (itemId: string, isFavorite: boolean) => {}
+});

packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx

@@ -3,11 +3,10 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
 import { DropdownItem, DropdownItemProps } from '../Dropdown';
 import { ApplicationLauncherContent } from './ApplicationLauncherContent';
-import { ApplicationLauncherContext } from './ApplicationLauncher';
+import { ApplicationLauncherContext } from './ApplicationLauncherContext';
+import { ApplicationLauncherItemContext } from './ApplicationLauncherItemContext';
 import StarIcon from '@patternfly/react-icons/dist/js/icons/star-icon';
 
-export const ApplicationLauncherItemContext = React.createContext({ isExternal: false, icon: null });
-
 export interface ApplicationLauncherItemProps {
   /** Icon rendered before the text */
   icon?: React.ReactNode;

packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItemContext.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export const ApplicationLauncherItemContext = React.createContext({ isExternal: false, icon: null });

packages/react-core/src/components/ApplicationLauncher/index.ts

@@ -1,5 +1,7 @@
 export * from './ApplicationLauncher';
+export * from './ApplicationLauncherContext';
 export * from './ApplicationLauncherItem';
+export * from './ApplicationLauncherItemContext';
 export * from './ApplicationLauncherContent';
 export * from './ApplicationLauncherIcon';
 export * from './ApplicationLauncherText';

packages/react-core/src/demos/CardView/examples/CardView.md

@@ -750,7 +750,7 @@ class CardViewBasic extends React.Component {
                           isChecked={selectedItems.includes(product.id)}
                           defaultChecked={this.state.itemsCheckedByDefault}
                           aria-label="card checkbox example"
-                          id="check-1"
+                          id={`check-${product.id}`}
                         />
                       </CardActions>
                     </CardHead>

packages/react-docs/gatsby-config.js

@@ -11,6 +11,7 @@ module.exports = {
       resolve: `gatsby-theme-patternfly-org`,
       options: {
         context: 'react', // For global items that need sideNav
+        showGdprBanner: false, // GDPR banner
         hiddenPages: ['withOuia', 'Training'], // By title
         sideNav: {
           react: [

packages/react-docs/static/like-button.js

@@ -0,0 +1,30 @@
+'use strict';
+
+const e = React.createElement;
+
+class LikeButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { liked: false };
+  }
+
+  render() {
+    if (this.state.liked) {
+      return e(PatternFlyReact.Alert, {
+        title: ' Great success',
+        children: 'You liked this',
+        variant: 'success'
+      });
+    }
+
+    return e(
+      PatternFlyReact.Button,
+      { onClick: () => this.setState({ liked: true }) },
+      'Like'
+    );
+  }
+}
+
+
+const domContainer = document.querySelector('#react-root');
+ReactDOM.render(e(LikeButton), domContainer);

packages/react-docs/static/umd.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en-us">
+<head>
+  <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@2/patternfly.css" crossorigin />
+  <meta charset="utf-8"/>
+</head>
+<body>
+  <h1 class="pf-c-title pf-m-2xl">PatternFly-React UMD Build</h1>
+  <p>
+    UMD build allow for you to quickly get started using <a href="">@patternfly/react-core.</a>
+    If you care about how this is accomplished, it's highly recommended to read&nbsp;
+    <a href="https://reactjs.org/docs/add-react-to-a-website.html#add-react-in-one-minute">React's getting started with UMD guide</a> before returning here since.
+    This guide uses React's guide as a base.
+  </p>
+  <h2 class="pf-c-title pf-m-2xl">1. Write HTML</h2>
+  <p>
+    Create a container to inject React components into.
+    <pre>
+      &lt;div id="react-root">Inject in here&lt;/div>
+    </pre>
+  </p>
+  <h2 class="pf-c-title pf-m-2xl">2. Include JS</h2>
+  <p>
+    PatternFly React depends on React and PropTypes. Add these to the bottom of the &lt;body> tag on your page:
+    <pre>
+      &lt;script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin>&lt;/script>
+      &lt;script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin>&lt;/script>
+      &lt;script src="https://unpkg.com/prop-types@15.6/prop-types.js" crossorigin>&lt;/script>
+      &lt;script src="https://unpkg.com/@patternfly/react-core@3/dist/umd/react-core.umd.js">&lt;/script>
+      &lt;script src="like-button.js">&lt;/script>
+    </pre>
+
+    @patternfly/react-core exposes a "PatternFlyReact" object for use in your like-button.js. Populate your like-button.js with something like:
+    <pre>
+      'use strict';
+
+      const e = React.createElement;
+
+      class LikeButton extends React.Component {
+        constructor(props) {
+          super(props);
+          this.state = { liked: false };
+        }
+
+        render() {
+          if (this.state.liked) {
+            return e(PatternFlyReact.Alert, {
+              title: ' Great success',
+              children: 'You liked this',
+              variant: 'success'
+            });
+          }
+
+          return e(
+            PatternFlyReact.Button,
+            { onClick: () => this.setState({ liked: true }) },
+            'Like'
+          );
+        }
+      }
+
+
+      const domContainer = document.querySelector('#react-root');
+      ReactDOM.render(e(LikeButton), domContainer);
+    </pre>
+  </p>
+  <h2 class="pf-c-title pf-m-2xl">3. (Optional) Include styles</h2>
+  <p>
+    You have to include <b>ALL</b> our PatternFly styles. There's two ways to do this:
+    <pre>
+      &lt;link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@2/patternfly.css" crossorigin />
+    </pre>
+    OR
+    <pre>
+      &lt;link rel="stylesheet" href="https://unpkg.com/@patternfly/react-core@3/dist/styles/base.css" crossorigin />
+      &lt;link rel="stylesheet" href="https://unpkg.com/@patternfly/react-core@3/dist/react-core.umd.css" crossorigin />
+    </pre>
+  </p>
+  <h2 class="pf-c-title pf-m-2xl">4. Don't do this in production</h2>
+  <p>
+    This implementation is very bloated.
+    ALL of React, ReactDOM, PropTypes (which you don't need in production...), and PatternFly (including CSS and fonts) are included which takes 912KB <i>after</i> being gzipped.
+    Even when minified, they take 520Kb <i>after</i> being gzipped.
+    Also, you probably want to be able to use JSX.
+    To enable using JSX, treeshaking, and other modern JS tools PatternFly recommendeds consumption using <a href="https://github.com/patternfly/patternfly-react-seed">Webpack.</a>
+    It's as simple as cloning <a href="https://github.com/patternfly/patternfly-react-seed">our seed repo</a> and running 2 commands!
+  </p>
+  <p>
+    This page serves as an example of how to do this. Checkout the like button below!
+  </p>
+  <div id="react-root">Inject like button here</div>
+  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
+  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
+  <script src="https://unpkg.com/prop-types@15.6/prop-types.js" crossorigin></script>
+  <script src="https://unpkg.com/@patternfly/react-core@3/dist/umd/react-core.umd.js"></script>
+  <script src="like-button.js"></script>
+</body>
+</html>