feat(react-styles): move react styles

.circleci/config.yml

@@ -19,7 +19,7 @@ jobs:
       - save_cache:
           paths:
             - node_modules
-            - packages/react-icons/node_modules/
+            - packages/react-icons/node_modules
             - packages/patternfly-4/react-core/node_modules
             - packages/patternfly-4/react-docs/node_modules
             - packages/patternfly-4/react-charts/node_modules
@@ -42,7 +42,6 @@ jobs:
             cp -r packages/patternfly-4/react-docs/public .public/patternfly-4 &&
             cp -r .public/patternfly-4/assets .public/assets &&
             cp .public/patternfly-4/favicon* .public
-          no_output_timeout: 30m
       - run:
           name: Deploy Docs
           command: if [ -n "$CIRCLE_PULL_REQUEST" ]; then .circleci/upload_preview.sh; fi

.travis.yml

@@ -27,6 +27,7 @@ cache:
     - packages/patternfly-4/react-core/dist
     - packages/patternfly-4/react-styled-system/dist
     - packages/patternfly-4/react-styles/dist
+    - packages/patternfly-4/react-styles/css
     - packages/patternfly-4/react-table/dist
     - packages/patternfly-4/react-tokens/dist
     - packages/patternfly-4/react-inline-edit-extension/dist
@@ -60,6 +61,7 @@ jobs:
       name: (PF4) Jest Tests
       install: skip
       script:
+        - ls packages/patternfly-4/react-styles
         - yarn test:pf4
         - npx codecov -F patternfly4
     - name: (PF3 and Misc) Jest Tests

packages/patternfly-4/.eslintignore

@@ -2,3 +2,4 @@ node_modules
 dist
 public
 react-integration/demo-app-ts/build
+react-styles/css

packages/patternfly-4/react-charts/.babelrc

@@ -1,31 +1,5 @@
 {
   "presets": [
     "../.babelrc.js"
-  ],
-  "env": {
-    "production:esm": {
-      "plugins": [
-        [
-          "@patternfly/react-styles/babel",
-          {
-            "srcDir": "./src",
-            "outDir": "./dist/esm",
-            "useModules": true
-          }
-        ]
-      ]
-    },
-    "production:cjs": {
-      "plugins": [
-        [
-          "@patternfly/react-styles/babel",
-          {
-            "srcDir": "./src",
-            "outDir": "./dist/js",
-            "useModules": false
-          }
-        ]
-      ]
-    }
-  }
+  ]
 }

packages/patternfly-4/react-core/.babelrc.js

@@ -11,40 +11,11 @@ module.exports = {
     }
     return ignore;
   })(),
-  env: {
-    'production:esm': {
-      plugins: [
-        '@babel/plugin-transform-typescript',
-        'babel-plugin-typescript-to-proptypes',
-        '@babel/plugin-proposal-export-default-from',
-        '@babel/proposal-class-properties',
-        '@babel/proposal-object-rest-spread',
-        [
-          '@patternfly/react-styles/babel',
-          {
-            srcDir: './src',
-            outDir: './dist/esm',
-            useModules: true
-          }
-        ]
-      ]
-    },
-    'production:cjs': {
-      plugins: [
-        '@babel/plugin-transform-typescript',
-        'babel-plugin-typescript-to-proptypes',
-        '@babel/plugin-proposal-export-default-from',
-        '@babel/proposal-class-properties',
-        '@babel/proposal-object-rest-spread',
-        [
-          '@patternfly/react-styles/babel',
-          {
-            srcDir: './src',
-            outDir: './dist/js',
-            useModules: false
-          }
-        ]
-      ]
-    }
-  }
+  plugins: [
+    '@babel/plugin-transform-typescript',
+    'babel-plugin-typescript-to-proptypes',
+    '@babel/plugin-proposal-export-default-from',
+    '@babel/proposal-class-properties',
+    '@babel/proposal-object-rest-spread',
+  ]
 };

packages/patternfly-4/react-core/package.json

@@ -29,10 +29,10 @@
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
     "build": "yarn typecheck && yarn build:babel && yarn build:types && node ./scripts/copyTS.js && node ./build/copyStyles.js",
-    "build:babel": "concurrently 'yarn build:babel:cjs' 'yarn build:babel:esm' && yarn build:babel:umd",
-    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js --extensions '.js,.ts,.tsx' -q",
-    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm --extensions '.js,.ts,.tsx' -q",
-    "build:babel:umd": "cross-env BABEL_ENV=production:umd babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd  --extensions '.js,.ts,.tsx' -q",
+    "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'",
+    "build:babel:cjs": "babel src --out-dir dist/js --extensions '.js,.ts,.tsx' -q",
+    "build:babel:esm": "babel src --out-dir dist/esm --extensions '.js,.ts,.tsx' -q",
+    "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd -q",
     "build:types": "tsc -p tsconfig.gen-dts.json",
     "clean": "rimraf dist",
     "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose",

packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/Backdrop/backdrop.css';
+import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 import { canUseDOM } from 'exenv';
 import { KEY_CODES } from '../../helpers/constants';
 import { AboutModalContainer } from './AboutModalContainer';

packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBox.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/AboutModalBox/about-modal-box.css';
+import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
 
 export interface AboutModalBoxProps extends React.HTMLProps<HTMLDivElement> {
   /** content rendered inside the AboutModelBox.  */

packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxBrand.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/AboutModalBox/about-modal-box.css';
+import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
 
 export interface AboutModalBoxBrandProps extends React.HTMLProps<HTMLDivElement> {
   /** additional classes added to the About Modal Brand  */

packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/AboutModalBox/about-modal-box.css';
+import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
 import { Button, ButtonVariant } from '../Button';
 import { TimesIcon } from '@patternfly/react-icons';
 

packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxContent.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/AboutModalBox/about-modal-box.css';
-import titleStyles from '@patternfly/patternfly/components/Title/title.css';
-import contentStyles from '@patternfly/patternfly/components/Content/content.css';
+import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
+import titleStyles from '@patternfly/react-styles/css/components/Title/title';
+import contentStyles from '@patternfly/react-styles/css/components/Content/content';
 
 export interface AboutModalBoxContentProps extends React.HTMLProps<HTMLDivElement> {
   /** content rendered inside the AboutModalBoxContent  */

packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxHeader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/AboutModalBox/about-modal-box.css';
+import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
 import { Title } from '../Title';
 
 export interface AboutModalBoxHeaderProps extends React.HTMLProps<HTMLDivElement> {

packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxHero.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/AboutModalBox/about-modal-box.css';
+import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
 import { c_about_modal_box__hero_sm_BackgroundImage } from '@patternfly/react-tokens'
 
 export interface AboutModalBoxHeroProps extends React.HTMLProps<HTMLDivElement> {

packages/patternfly-4/react-core/src/components/Accordion/Accordion.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/Accordion/accordion.css';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
 const Accordion = ({ children, className, 'aria-label': ariaLabel, ...props }) => (
   <dl className={css(styles.accordion, className)} aria-label={ariaLabel} {...props}>

packages/patternfly-4/react-core/src/components/Accordion/AccordionContent.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/Accordion/accordion.css';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
 const AccordionContent = ({ className, children, id, isHidden, isFixed, 'aria-label': ariaLabel, ...props }) => (
   <dd

packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@patternfly/react-styles';
 import { AngleRightIcon } from '@patternfly/react-icons';
-import styles from '@patternfly/patternfly/components/Accordion/accordion.css';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
 const AccordionToggle = ({ className, id, isExpanded, children, ...props }) => (
   <dt>

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { css, getModifier } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/Alert/alert.css';
-import accessibleStyles from '@patternfly/patternfly/utilities/Accessibility/accessibility.css';
+import styles from '@patternfly/react-styles/css/components/Alert/alert';
+import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 import { AlertIcon } from './AlertIcon';
 import { capitalize } from '../../helpers/util';
 import { Omit } from '../../helpers/typeUtils';

packages/patternfly-4/react-core/src/components/Alert/AlertIcon.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/Alert/alert.css';
+import styles from '@patternfly/react-styles/css/components/Alert/alert';
 import {
   CheckCircleIcon,
   ExclamationCircleIcon,

packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.js

@@ -1,5 +1,5 @@
 import React, { Children, cloneElement } from 'react';
-import styles from '@patternfly/patternfly/components/AppLauncher/app-launcher.css';
+import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
 import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
 import ApplicationLauncherMenu from './ApplicationLauncherMenu';

packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from '@patternfly/patternfly/components/AppLauncher/app-launcher.css';
+import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
 import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
 import { ApplicationLauncherPosition } from './applicationLauncherConstants';

packages/patternfly-4/react-core/src/components/ApplicationLauncher/Toggle.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly/components/Button/button.css';
+import styles from '@patternfly/react-styles/css/components/Button/button';
 import { css } from '@patternfly/react-styles';
 import { KEY_CODES } from '../../helpers/constants';
 

packages/patternfly-4/react-core/src/components/Avatar/Avatar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styles from '@patternfly/patternfly/components/Avatar/avatar.css';
+import styles from '@patternfly/react-styles/css/components/Avatar/avatar';
 import { css } from '@patternfly/react-styles';
 
 export interface AvatarProps

packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/Backdrop/backdrop.css';
+import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 
 const propTypes = {
   /** content rendered inside the backdrop */

packages/patternfly-4/react-core/src/components/BackgroundImage/BackgroundImage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { css, StyleSheet } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/BackgroundImage/background-image.css';
+import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image';
 
 /* eslint-disable camelcase */
 import {

packages/patternfly-4/react-core/src/components/Badge/Badge.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/Badge/badge.css';
+import styles from '@patternfly/react-styles/css/components/Badge/badge';
 
 export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
   /**  Adds styling to the badge to indicate it has been read */

packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styles from '@patternfly/patternfly/components/Breadcrumb/breadcrumb.css';
+import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { css } from '@patternfly/react-styles';
 
 export interface BreadcrumbProps extends React.HTMLProps<HTMLElement> {

packages/patternfly-4/react-core/src/components/Breadcrumb/BreadcrumbHeading.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styles from '@patternfly/patternfly/components/Breadcrumb/breadcrumb.css';
+import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { css } from '@patternfly/react-styles';
 
 export interface BreadcrumbHeadingProps extends React.HTMLProps<HTMLLIElement> {

packages/patternfly-4/react-core/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AngleRightIcon } from '@patternfly/react-icons';
-import styles from '@patternfly/patternfly/components/Breadcrumb/breadcrumb.css';
+import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { css, getModifier } from '@patternfly/react-styles';
 
 export interface BreadcrumbItemProps extends React.HTMLProps<HTMLLIElement> {

packages/patternfly-4/react-core/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styles from '@patternfly/patternfly/components/Button/button.css';
+import styles from '@patternfly/react-styles/css/components/Button/button';
 import { css, getModifier } from '@patternfly/react-styles';
 
 export enum ButtonVariant {

packages/patternfly-4/react-core/src/components/Card/Card.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styles from '@patternfly/patternfly/components/Card/card.css';
+import styles from '@patternfly/react-styles/css/components/Card/card';
 import { css } from '@patternfly/react-styles';
 
 export interface CardProps extends React.HTMLProps<HTMLDivElement> {

packages/patternfly-4/react-core/src/components/Card/CardBody.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styles from '@patternfly/patternfly/components/Card/card.css';
+import styles from '@patternfly/react-styles/css/components/Card/card';
 import { css } from '@patternfly/react-styles';
 
 export interface CardBodyProps extends React.HTMLProps<HTMLDivElement> {

packages/patternfly-4/react-core/src/components/Card/CardFooter.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styles from '@patternfly/patternfly/components/Card/card.css';
+import styles from '@patternfly/react-styles/css/components/Card/card';
 import { css } from '@patternfly/react-styles';
 
 export interface CardFooterProps extends React.HTMLProps<HTMLDivElement> {

packages/patternfly-4/react-core/src/components/Card/CardHeader.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/Card/card.css';
-import titleStyles from '@patternfly/patternfly/components/Title/title.css';
+import styles from '@patternfly/react-styles/css/components/Card/card';
+import titleStyles from '@patternfly/react-styles/css/components/Title/title';
 
 export interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {
     /** Content rendered inside the Card Footer */

packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styles from '@patternfly/patternfly/components/Check/check.css';
+import styles from '@patternfly/react-styles/css/components/Check/check';
 import { css, getModifier } from '@patternfly/react-styles';
 import { Omit } from '../../helpers/typeUtils';
 

packages/patternfly-4/react-core/src/components/ChipGroup/Chip.tsx

@@ -4,7 +4,7 @@ import { ChipButton } from './ChipButton';
 import { OneOf } from '../../helpers/typeUtils';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 import { TimesCircleIcon } from '@patternfly/react-icons';
-import styles from '@patternfly/patternfly/components/Chip/chip.css';
+import styles from '@patternfly/react-styles/css/components/Chip/chip';
 import GenerateId from '../../helpers/GenerateId/GenerateId';
 
 export interface ChipProps extends React.HTMLProps<HTMLDivElement> {

packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styles from '@patternfly/patternfly/components/ChipGroup/chip-group.css';
+import styles from '@patternfly/react-styles/css/components/ChipGroup/chip-group';
 import { css } from '@patternfly/react-styles';
 import { Chip } from './Chip';
 import { fillTemplate } from '../../helpers';

packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroupToolbarItem.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly/components/ChipGroup/chip-group.css';
+import styles from '@patternfly/react-styles/css/components/ChipGroup/chip-group';
 
 export interface ChipGroupToolbarItemProps extends React.HTMLProps<HTMLUListElement> {
   /**  Category name text */  

packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from '@patternfly/patternfly/components/ClipboardCopy/clipboard-copy.css';
+import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
 import { TextInput } from '../TextInput';