fix: PatternFly compliance cleanup and component architecture improvements

.github/workflows/build-lint-test.yml

@@ -9,7 +9,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - run: |
-          if [[ ! -z "${GH_PR_NUM}" ]]; then 
+          if [[ ! -z "${GH_PR_NUM}" ]]; then
             echo "Checking out PR"
             git fetch origin pull/$GH_PR_NUM/head:tmp
             git checkout tmp
@@ -22,14 +22,16 @@ jobs:
         run: corepack enable
       - uses: actions/cache@v4
         id: yarn-cache
-        name: Cache npm deps
+        name: Load Yarn cache
         with:
           path: |
-           node_modules
-           **/node_modules
-          key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }}
-      - run: yarn install --immutable
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
+            .yarn/cache
+          key: ${{ runner.os }}-yarn-cache-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-cache-
+      - name: Install dependencies
+        shell: bash
+        run: yarn install --immutable --network-timeout 100000
       - uses: actions/cache@v4
         id: dist
         name: Cache dist
@@ -48,7 +50,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - run: |
-          if [[ ! -z "${GH_PR_NUM}" ]]; then 
+          if [[ ! -z "${GH_PR_NUM}" ]]; then
             echo "Checking out PR"
             git fetch origin pull/$GH_PR_NUM/head:tmp
             git checkout tmp
@@ -61,23 +63,22 @@ jobs:
         run: corepack enable
       - uses: actions/cache@v4
         id: yarn-cache
-        name: Cache npm deps
+        name: Load Yarn cache
         with:
           path: |
-           node_modules
-           **/node_modules
-          key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }}
-      - run: yarn install --immutable
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
+            .yarn/cache
+          key: ${{ runner.os }}-yarn-cache-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-cache-
+      - name: Install dependencies
+        shell: bash
+        run: yarn install --immutable --network-timeout 100000
       - uses: actions/cache@v4
         id: lint-cache
         name: Load lint cache
         with:
           path: '.eslintcache'
           key: ${{ runner.os }}-lint-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }}
-      - name: Enable Corepack
-        shell: bash
-        run: corepack enable
       - name: ESLint
         run: yarn lint:js
       - name: MDLint
@@ -91,7 +92,7 @@ jobs:
       - uses: actions/checkout@v4
       # Yes, we really want to checkout the PR
       - run: |
-          if [[ ! -z "${GH_PR_NUM}" ]]; then 
+          if [[ ! -z "${GH_PR_NUM}" ]]; then
             echo "Checking out PR"
             git fetch origin pull/$GH_PR_NUM/head:tmp
             git checkout tmp
@@ -104,23 +105,22 @@ jobs:
         run: corepack enable
       - uses: actions/cache@v4
         id: yarn-cache
-        name: Cache npm deps
+        name: Load Yarn cache
         with:
           path: |
-           node_modules
-           **/node_modules
-           ~/.cache/Cypress
-           ~/.cache/puppeteer
-          key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }}
-      - run: yarn install --immutable
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
+            .yarn/cache
+          key: ${{ runner.os }}-yarn-cache-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-cache-
+      - name: Install dependencies
+        shell: bash
+        run: yarn install --immutable --network-timeout 100000
       - uses: actions/cache@v4
         id: dist
         name: Cache dist
         with:
           path: |
             packages/*/dist
-            packages/react-styles/css
           key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }}
       - name: Build dist
         run: yarn build
@@ -136,7 +136,7 @@ jobs:
       - uses: actions/checkout@v4
       # Yes, we really want to checkout the PR
       - run: |
-          if [[ ! -z "${GH_PR_NUM}" ]]; then 
+          if [[ ! -z "${GH_PR_NUM}" ]]; then
             echo "Checking out PR"
             git fetch origin pull/$GH_PR_NUM/head:tmp
             git checkout tmp
@@ -149,23 +149,23 @@ jobs:
         run: corepack enable
       - uses: actions/cache@v4
         id: yarn-cache
-        name: Cache npm deps
+        name: Load Yarn cache
         with:
           path: |
-           node_modules
-           **/node_modules
-           ~/.cache/Cypress
-           ~/.cache/puppeteer
-          key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }}
-      - run: yarn install --immutable
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
+            .yarn/cache
+            ~/.cache/puppeteer
+          key: ${{ runner.os }}-yarn-cache-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-cache-
+      - name: Install dependencies
+        shell: bash
+        run: yarn install --immutable --network-timeout 100000
       - uses: actions/cache@v4
         id: dist
         name: Cache dist
         with:
           path: |
             packages/*/dist
-            packages/react-styles/css
           key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }}
       - name: Build dist
         run: yarn build

.github/workflows/pr-preview.yml

@@ -1,5 +1,3 @@
-
-### WARNING -- this file was generated by generate-workflows
 name: pr-preview
 on: pull_request_target
 jobs:
@@ -23,36 +21,39 @@ jobs:
           git rev-parse origin/main..HEAD
           git log origin/main..HEAD --format="%b"
 
-      # Yes, we really want to checkout the PR
-      # Injected by generate-workflows.js
       - uses: actions/setup-node@v4
         with:
           node-version: '20'
+      - name: Enable Corepack
+        shell: bash
+        run: corepack enable
       - uses: actions/cache@v4
-        id: npm-cache
-        name: Load npm deps from cache
+        id: yarn-cache
+        name: Load Yarn cache
         with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-npm-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
-      - run: npm install --frozen-lockfile --legacy-peer-deps
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
-      - run: npm run build
+          path: |
+            .yarn/cache
+          key: ${{ runner.os }}-yarn-cache-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-cache-
+      - name: Install dependencies
+        shell: bash
+        run: yarn install --immutable --network-timeout 100000
+      - run: yarn build
         name: Build component groups
       - uses: actions/cache@v4
         id: docs-cache
         name: Load webpack cache
         with:
           path: '.cache'
           key: ${{ runner.os }}-v4-${{ hashFiles('yarn.lock') }}
-      - run: npm run build:docs
+      - run: yarn build:docs
         name: Build docs
-      - run: node .github/upload-preview.js packages/module/public
-        name: Upload docs
-        if: always()
-      - run: npx puppeteer browsers install chrome
-        name: Install Chrome for Puppeteer
-      - run: npm run serve:docs & npm run test:a11y
-        name: a11y tests
-      - run: node .github/upload-preview.js packages/module/coverage
-        name: Upload a11y report
-        if: always()
+      - name: Deploy preview to surge
+        if: env.SURGE_LOGIN != '' && env.SURGE_TOKEN != ''
+        run: |
+          npx surge packages/module/public --domain pr-${{ github.event.number }}-widgetized-dashboard.surge.sh
+      - name: Install Chrome for Puppeteer
+        run: npx puppeteer browsers install chrome
+      - name: a11y tests
+        run: yarn serve:docs & yarn test:a11y

.github/workflows/release.yml

@@ -22,23 +22,22 @@ jobs:
         run: corepack enable
       - uses: actions/cache@v4
         id: yarn-cache
-        name: Cache npm deps
+        name: Load Yarn cache
         with:
           path: |
-           node_modules
-           **/node_modules
-           ~/.cache/Cypress
-           ~/.cache/puppeteer
-          key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }}
-      - run: yarn install --immutable
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
+            .yarn/cache
+          key: ${{ runner.os }}-yarn-cache-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-cache-
+      - name: Install dependencies
+        shell: bash
+        run: yarn install --immutable --network-timeout 100000
       - uses: actions/cache@v4
         id: dist
         name: Cache dist
         with:
           path: |
             packages/*/dist
-            packages/react-styles/css
           key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }}
       - name: Build dist
         run: yarn build

README.md

@@ -29,12 +29,23 @@ This library requires React 18+ and React DOM 18+ as peer dependencies. Make sur
 yarn add react@^18 react-dom@^18
 ```
 
+## Styles
+
+Import the required stylesheet in your application entry point:
+
+```ts
+import '@patternfly/widgetized-dashboard/dist/esm/styles.css';
+```
+
+This stylesheet is required for the dashboard layout, drag-and-drop, and widget tile styling. You will also need PatternFly's base styles — see the [PatternFly getting started guide](https://www.patternfly.org/get-started/develop/) for details.
+
 ## Quick Start
 
 ```tsx
 import React from 'react';
 import { WidgetLayout, WidgetMapping, ExtendedTemplateConfig } from '@patternfly/widgetized-dashboard';
-import { CubeIcon } from '@patternfly/react-icons';
+import '@patternfly/widgetized-dashboard/dist/esm/styles.css';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 // Define your widgets
 const widgetMapping: WidgetMapping = {
@@ -86,7 +97,7 @@ function App() {
 
 - [Basic Example](./packages/module/patternfly-docs/content/examples/BasicExample.tsx) - Complete dashboard with drawer
 - [Locked Layout Example](./packages/module/patternfly-docs/content/examples/LockedLayoutExample.tsx) - Dashboard with locked widgets
-- [Without Drawer Example](./packages/module/patternfly-docs/content/examples/WithoutDrawerExample.tsx) - Grid layout without widget drawer
+- [Custom Toolbar Example](./packages/module/patternfly-docs/content/examples/CustomToolbarExample.tsx) - Dashboard with custom toolbar controls
 
 ## Key Components
 

babel.config.js

@@ -2,7 +2,6 @@ module.exports = {
   presets: [
     ['@babel/preset-env', { targets: { node: 'current' } }],
     ['@babel/preset-react', { runtime: 'automatic' }],
-    '@babel/preset-flow',
     '@babel/preset-typescript'
   ]
 };

jest.config.js

@@ -10,6 +10,9 @@ module.exports = {
   transform: {
     '^.+\\.[jt]sx?$': 'babel-jest'
   },
+  transformIgnorePatterns: [
+    'node_modules/(?!@patternfly)'
+  ],
   moduleNameMapper: {
     '\\.(css|less)$': '<rootDir>/styleMock.js'
   },