chore(Felt): switch React and docs dependencies to @rh-felt packages

.yarnrc.yml

@@ -4,4 +4,7 @@ enableScripts: false
 
 nodeLinker: node-modules
 
-npmMinimalAgeGate: "1w"
+npmMinimalAgeGate: "1w"
+
+npmPreapprovedPackages:
+  - "@rh-felt/*"

packages/react-charts/package.json

@@ -43,7 +43,7 @@
     "@rh-felt/react-styles": "workspace:^",
     "@rh-felt/react-tokens": "workspace:^",
     "hoist-non-react-statics": "^3.3.2",
-    "lodash": "^4.17.23",
+    "lodash": "^4.18.1",
     "tslib": "^2.8.1"
   },
   "devDependencies": {

packages/react-charts/src/victory/components/ChartLegend/examples/ChartLegend.md

@@ -45,7 +45,7 @@ import {
 } from '@rh-felt/react-charts/victory';
 import { getResizeObserver } from '@rh-felt/react-core';
 import chart_color_black_500 from '@rh-felt/react-tokens/dist/esm/chart_color_black_500';
-import '@patternfly/patternfly/patternfly-charts.css';
+import '@rh-felt/styles/patternfly-charts.css';
 
 ## Introduction
 Note: PatternFly React charts live in its own package at [@rh-felt/react-charts](https://www.npmjs.com/package/@rh-felt/react-charts)!

packages/react-charts/src/victory/components/Patterns/examples/patterns.md

@@ -49,7 +49,7 @@ import chart_color_blue_300 from '@rh-felt/react-tokens/dist/esm/chart_color_blu
 import chart_color_green_300 from '@rh-felt/react-tokens/dist/esm/chart_color_green_300';
 import chart_color_teal_300 from '@rh-felt/react-tokens/dist/esm/chart_color_teal_300';
 import chart_color_yellow_300 from '@rh-felt/react-tokens/dist/esm/chart_color_yellow_300';
-import '@patternfly/patternfly/patternfly-charts.css';
+import '@rh-felt/styles/patternfly-charts.css';
 
 ## Introduction
 Note: PatternFly React charts live in its own package at [@rh-felt/react-charts](https://www.npmjs.com/package/@rh-felt/react-charts)!

packages/react-charts/src/victory/components/ResizeObserver/examples/resizeObserver.md

@@ -36,7 +36,7 @@ import {
 import { getResizeObserver } from '@rh-felt/react-core';
 import chart_color_blue_300 from '@rh-felt/react-tokens/dist/esm/chart_color_blue_300';
 import chart_color_orange_300 from '@rh-felt/react-tokens/dist/esm/chart_color_orange_300';
-import '@patternfly/patternfly/patternfly-charts.css';
+import '@rh-felt/styles/patternfly-charts.css';
 
 ## Introduction
 Note: PatternFly React charts live in its own package at [@rh-felt/react-charts](https://www.npmjs.com/package/@rh-felt/react-charts)!

packages/react-core/package.json

@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "@adobe/css-tools": "^4.5.0",
-    "@patternfly/patternfly": "6.7.0-prerelease.3",
+    "@rh-felt/styles": "0.0.1-prerelease.3",
     "case-anything": "^3.1.2",
     "fs-extra": "^11.3.3"
   },

packages/react-core/scripts/copyStyles.mjs

@@ -6,7 +6,7 @@ import { parse as parseCSS, stringify as stringifyCSS } from '@adobe/css-tools';
 
 const require = createRequire(import.meta.url);
 const stylesDir = resolve(import.meta.dirname, '../dist/styles');
-const pfDir = dirname(require.resolve('@patternfly/patternfly/patternfly.css'));
+const pfDir = dirname(require.resolve('@rh-felt/styles/patternfly.css'));
 
 const unusedSelectorRegEx = /(\.fas?|\.sr-only)/;
 const unusedKeyFramesRegEx = /fa-/;

packages/react-docs/package.json

@@ -23,16 +23,14 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.7.0-prerelease.3",
-    "@patternfly/react-charts": "8.7.0-prerelease.4",
-    "@patternfly/react-code-editor": "6.7.0-prerelease.6",
-    "@patternfly/react-core": "6.7.0-prerelease.6",
-    "@patternfly/react-drag-drop": "6.7.0-prerelease.6",
-    "@patternfly/react-icons": "6.7.0-prerelease.3",
-    "@patternfly/react-styles": "6.7.0-prerelease.3",
-    "@patternfly/react-table": "6.7.0-prerelease.7",
-    "@patternfly/react-templates": "6.7.0-prerelease.6",
-    "@patternfly/react-tokens": "6.7.0-prerelease.3",
+    "@patternfly/patternfly": "npm:@rh-felt/styles@0.0.1-prerelease.3",
+    "@patternfly/react-code-editor": "npm:@rh-felt/react-code-editor@0.0.1-prerelease.3",
+    "@patternfly/react-core": "npm:@rh-felt/react-core@0.0.1-prerelease.3",
+    "@patternfly/react-icons": "npm:@rh-felt/react-icons@0.0.1-prerelease.2",
+    "@patternfly/react-styles": "npm:@rh-felt/react-styles@0.0.1-prerelease.3",
+    "@patternfly/react-table": "npm:@rh-felt/react-table@0.0.1-prerelease.3",
+    "@patternfly/react-tokens": "npm:@rh-felt/react-tokens@0.0.1-prerelease.2",
+    "@rh-felt/styles": "0.0.1-prerelease.3",
     "echarts": "^5.6.0 || ^6.0.0",
     "victory": "^37.3.6"
   },

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

@@ -7,10 +7,10 @@ import '@rh-felt/react-styles/src/css/components/Popper/Popper.css';
 import '@patternfly/documentation-framework/global.css';
 
 // Patternfly
-import '@patternfly/patternfly/patternfly.css';
+import '@rh-felt/styles/patternfly.css';
 
 // Utilities
-import '@patternfly/patternfly/patternfly-addons.css';
+import '@rh-felt/styles/patternfly-addons.css';
 
 // Charts
-import '@patternfly/patternfly/patternfly-charts.css';
+import '@rh-felt/styles/patternfly-charts.css';

packages/react-icons/package.json

@@ -39,7 +39,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@patternfly/patternfly": "6.7.0-prerelease.3",
+    "@rh-felt/styles": "0.0.1-prerelease.3",
     "@rhds/icons": "^2.3.1",
     "fs-extra": "^11.3.3"
   },

packages/react-icons/scripts/icons/patternflyIcons.mjs

@@ -1,4 +1,4 @@
-import { pfIcons } from '@patternfly/patternfly/icons/pficons.mjs';
+import { pfIcons } from '@rh-felt/styles/icons/pficons.mjs';
 
 const renaming = {
   save: 'save-alt',

packages/react-integration/demo-app-ts/package.json

@@ -9,10 +9,11 @@
   },
   "dependencies": {
     "@rh-felt/react-core": "workspace:^",
+    "@rh-felt/styles": "0.0.1-prerelease.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^7.12.0",
-    "react-router-dom": "^7.12.0"
+    "react-router": "^7.18.4",
+    "react-router-dom": "^7.18.4"
   },
   "devDependencies": {
     "@vitejs/plugin-react-swc": "^3.11.0",

packages/react-integration/demo-app-ts/src/App.tsx

@@ -52,9 +52,9 @@ class App extends Component<{}, AppState> {
     const htmlElement = document.getElementsByTagName('html')[0];
     if (htmlElement) {
       if (isDarkTheme) {
-        htmlElement.classList.add('pf-theme-dark');
+        htmlElement.classList.add('pf-v6-theme-dark');
       } else {
-        htmlElement.classList.remove('pf-theme-dark');
+        htmlElement.classList.remove('pf-v6-theme-dark');
       }
     }
   };
@@ -99,7 +99,7 @@ class App extends Component<{}, AppState> {
               id="light-theme"
               aria-label="Light theme"
               label={`Light theme`}
-              name="light-theme"
+              name="theme"
               isChecked={!isDarkTheme}
               onChange={(_event: React.FormEvent<HTMLInputElement>, checked: boolean) =>
                 checked && this.onThemeSelect(false)
@@ -111,7 +111,7 @@ class App extends Component<{}, AppState> {
               id="dark-theme"
               label="Dark theme"
               aria-label="Dark theme"
-              name="dark-theme"
+              name="theme"
               isChecked={isDarkTheme}
               onChange={(_event: React.FormEvent<HTMLInputElement>, checked: boolean) =>
                 checked && this.onThemeSelect(true)

packages/react-integration/demo-app-ts/src/Demos.ts

@@ -249,7 +249,7 @@ export const Demos: DemoInterface[] = [
   },
   {
     id: 'modal-deprecated-demo',
-    name: 'Modal Demo',
+    name: 'Modal Deprecated Demo',
     componentType: Examples.ModalDeprecatedDemo
   },
   {

packages/react-integration/demo-app-ts/src/components/demos/ChipDemo/ChipDemo.tsx

@@ -5,7 +5,6 @@ export const ChipDemo: React.FunctionComponent = () => (
     <Chip tooltipPosition="bottom" id="longName-chip">
       Chip with a really, really, REALLY long text
     </Chip>
-    ;
   </>
 );
 ChipDemo.displayName = 'ChipDemo';

packages/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx

@@ -21,7 +21,7 @@ export class ClipboardCopyDemo extends Component {
             isBlock
             additionalActions={
               <ClipboardCopyAction>
-                <Button variant="plain" aria-label="Run in web terminal" icon={<RhUiPlayFillIcon />} />
+                <Button variant="plain" hasNoPadding aria-label="Run in web terminal" icon={<RhUiPlayFillIcon />} />
               </ClipboardCopyAction>
             }
           >

packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerResizeDemo.tsx

@@ -78,7 +78,7 @@ export class DrawerResizeDemo extends Component<DrawerProps, DrawerResizeDemoSta
         <Button id="toggleButton" onClick={this.onClick}>
           Toggle Drawer
         </Button>
-        <Drawer isExpanded={isExpanded} onExpand={this.onExpand} position="bottom">
+        <Drawer isExpanded={isExpanded} onExpand={this.onExpand} position="bottom" style={{ height: '300px' }}>
           <DrawerSection>drawer-section</DrawerSection>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody>{drawerContent}</DrawerContentBody>

packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDrilldownDemo.tsx

@@ -48,7 +48,7 @@ export class MenuDrilldownDemo extends Component {
   };
   setHeight = (menuId: string, height: number) => {
     if (
-      !this.state.menuHeights[menuId] ||
+      this.state.menuHeights[menuId] === undefined ||
       (menuId !== 'drilldown-rootMenu' && this.state.menuHeights[menuId] !== height)
     ) {
       this.setState({

packages/react-integration/demo-app-ts/src/components/demos/NavDemo/NavDemo.tsx

@@ -65,7 +65,7 @@ export class NavDemo extends Component {
         <Title headingLevel="h2" size="2xl">
           Default Nav
         </Title>
-        <div className="example" style={{ backgroundColor: '#212427', border: '1px solid rgb(114, 118, 123)' }}>
+        <div className="example">
           <Nav onSelect={this.onDefaultSelect} id="nav-primary-default">
             <NavList>
               <NavItem id="default-link1" to="#default-link1" itemId={0} isActive={defaultActiveItem === 0}>
@@ -130,7 +130,7 @@ export class NavDemo extends Component {
         <Title headingLevel="h2" size="2xl">
           Expandable Nav
         </Title>
-        <div className="example" style={{ backgroundColor: '#212427', border: '1px solid rgb(114, 118, 123)' }}>
+        <div className="example">
           <Nav onSelect={this.onExpandableSelect} id="nav-primary-expandable">
             <NavList>
               <NavExpandable
@@ -253,7 +253,7 @@ export class NavDemo extends Component {
         <Title headingLevel="h2" size="2xl">
           Horizontal Nav
         </Title>
-        <div style={{ backgroundColor: '#292e34', padding: '1rem' }}>
+        <div>
           <Nav onSelect={this.onHorizontalSelect} id="nav-primary-horizontal" variant="horizontal">
             <NavList>
               <NavItem id="horizontal-link1" preventDefault itemId={0} isActive={horizontalActiveItem === 0}>
@@ -279,7 +279,7 @@ export class NavDemo extends Component {
         <Title headingLevel="h2" size="2xl">
           Horizontal Nav
         </Title>
-        <div style={{ backgroundColor: '#292e34', padding: '1rem' }}>
+        <div>
           <Nav onSelect={this.onHorizontalSelect} id="subnav-horizontal" variant="horizontal-subnav">
             <NavList>
               <NavItem id="horizontal-link1" preventDefault itemId={0} isActive={horizontalActiveItem === 0}>
@@ -329,9 +329,6 @@ export class NavDemo extends Component {
         <div
           id="flyout-nav"
           style={{
-            backgroundColor: '#212427',
-            border: '1px solid rgb(114, 118, 123)',
-            padding: '1rem',
             width: '300px'
           }}
         >

packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSelectableDemo.tsx

@@ -4,7 +4,7 @@ import { Table, TableHeader, TableBody, TableProps } from '@rh-felt/react-table/
 import spacing from '@rh-felt/react-styles/css/utilities/Spacing/spacing';
 
 import { Checkbox, Divider, Radio } from '@rh-felt/react-core';
-import '@patternfly/patternfly/utilities/Spacing/spacing.css';
+import '@rh-felt/styles/utilities/Spacing/spacing.css';
 
 interface TableState {
   columns: (ICell | string)[];

packages/react-styles/package.json

@@ -26,7 +26,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.7.0-prerelease.3",
+    "@rh-felt/styles": "0.0.1-prerelease.3",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.3"
   },

packages/react-styles/scripts/copyStyles.mjs

@@ -3,6 +3,6 @@ import path from 'node:path';
 import url from 'node:url';
 
 const toDir = path.resolve(import.meta.dirname, '../css');
-const fromDir = path.dirname(url.fileURLToPath(import.meta.resolve('@patternfly/patternfly/package.json')));
+const fromDir = path.dirname(url.fileURLToPath(import.meta.resolve('@rh-felt/styles/package.json')));
 
 copySync(path.join(fromDir, 'assets/images'), path.join(toDir, 'assets/images'));

packages/react-styles/scripts/generateClassMaps.mjs

@@ -55,7 +55,7 @@ function getClassMaps(cssString) {
  * @returns {any} Map of file names to classMaps
  */
 export function generateClassMaps() {
-  const pfStylesDir = path.dirname(url.fileURLToPath(import.meta.resolve('@patternfly/patternfly/patternfly.css')));
+  const pfStylesDir = path.dirname(url.fileURLToPath(import.meta.resolve('@rh-felt/styles/patternfly.css')));
 
   const patternflyCSSFiles = glob.sync('**/*.css', {
     cwd: pfStylesDir,

packages/react-styles/scripts/writeClassMaps.mjs

@@ -40,7 +40,7 @@ export default _default;
  * @param {any} classMaps Map of file names to classMaps
  */
 function writeClassMaps(classMaps) {
-  const pfStylesDir = path.dirname(url.fileURLToPath(import.meta.resolve('@patternfly/patternfly/patternfly.css')));
+  const pfStylesDir = path.dirname(url.fileURLToPath(import.meta.resolve('@rh-felt/styles/patternfly.css')));
 
   Object.entries(classMaps).forEach(([file, classMap]) => {
     const outPath = file.includes(pfStylesDir) ? path.relative(pfStylesDir, file) : path.relative('src/css', file);

packages/react-tokens/package.json

@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@adobe/css-tools": "^4.5.0",
-    "@patternfly/patternfly": "6.7.0-prerelease.3",
+    "@rh-felt/styles": "0.0.1-prerelease.3",
     "fs-extra": "^11.3.3"
   }
 }

packages/react-tokens/scripts/generateTokens.mjs

@@ -5,7 +5,7 @@ import { parse, stringify } from '@adobe/css-tools';
 import { readFileSync } from 'node:fs';
 
 const require = createRequire(import.meta.url);
-const pfStylesDir = dirname(require.resolve('@patternfly/patternfly/patternfly.css'));
+const pfStylesDir = dirname(require.resolve('@rh-felt/styles/patternfly.css'));
 const version = 'v6';
 
 // Helpers
@@ -73,7 +73,7 @@ const getLocalVarsMap = (cssFiles) => {
 };
 
 /**
- * Generates tokens from CSS in node_modules/@patternfly/patternfly/**
+ * Generates tokens from CSS in node_modules/@rh-felt/styles/**
  *
  * @returns {object} of form {
  *   c_about_modal_box: {
@@ -104,14 +104,11 @@ export function generateTokens() {
     .sort((a, b) => (a.split(sep).length < b.split(sep).length ? 1 : -1));
 
   // various lookup tables to resolve variables
-  const scssVariables = readFileSync(
-    require.resolve('@patternfly/patternfly/sass-utilities/scss-variables.scss'),
-    'utf8'
-  );
+  const scssVariables = readFileSync(require.resolve('@rh-felt/styles/sass-utilities/scss-variables.scss'), 'utf8');
   const scssVarsMap = getRegexMatches(scssVariables, /(\$.*):\s*([^;^!]+)/g);
 
   const cssGlobalVariablesAst = parse(
-    readFileSync(require.resolve('@patternfly/patternfly/base/patternfly-variables.css'), 'utf8')
+    readFileSync(require.resolve('@rh-felt/styles/base/patternfly-variables.css'), 'utf8')
   );
   cssGlobalVariablesAst.stylesheet.rules = cssGlobalVariablesAst.stylesheet.rules.filter(
     (node) => !node.selectors || !node.selectors.some((item) => item.includes(`.pf-${version}-theme-dark`))

scripts/promote.sh

@@ -1,10 +1,9 @@
 #!/bin/bash
  # Make sure you update the version number when changing this script.
-version=2.0
+version=2.1
 promote=false
 
 packages=(
-  @patternfly/patternfly
   @rh-felt/react-charts
   @rh-felt/react-code-editor
   @rh-felt/react-core
@@ -14,6 +13,7 @@ packages=(
   @rh-felt/react-table
   @rh-felt/react-templates
   @rh-felt/react-tokens
+  @rh-felt/styles
 )
 
 packagesExtensions=(