Merge branch 'main' into disable-dryrun

Author: wise-king-sullyman

.github/workflows/pr-preview.yml

@@ -0,0 +1,58 @@
+
+### WARNING -- this file was generated by generate-workflows
+name: pr-preview
+on: pull_request_target
+jobs:
+  build-upload:
+    runs-on: ubuntu-latest
+    env:
+      SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}
+      SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
+      GH_PR_TOKEN: ${{ secrets.GH_PR_TOKEN }}
+      GH_PR_NUM:   ${{ github.event.number }}
+    steps:
+      - uses: actions/checkout@v4
+      # Yes, we really want to checkout the PR
+      - run: |
+          git fetch origin pull/$GH_PR_NUM/head:tmp
+          git checkout tmp
+
+      - run: |
+          git rev-parse origin/main
+          git rev-parse HEAD
+          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'
+      - uses: actions/cache@v4
+        id: npm-cache
+        name: Load npm deps from 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
+        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
+        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()

README.md

@@ -1,17 +1,13 @@
 # Widgetized Dashboard
 
-A generic, reusable PatternFly component library providing a customizable widget-based dashboard with drag-and-drop functionality. This library was created by lifting and adapting code from the [RedHatInsights/widget-layout](https://github.com/RedHatInsights/widget-layout) repository, removing console-specific dependencies to make it suitable for any PatternFly application.
+A generic, reusable PatternFly component library providing a customizable widget-based dashboard with drag-and-drop functionality.
 
-## Features
+## Prerequisites
 
-- **Drag-and-Drop Grid Layout**: Powered by `react-grid-layout` with responsive breakpoints
-- **Widget Drawer**: Easy widget selection and management
-- **Lock/Unlock Widgets**: Prevent accidental changes to widget positions and sizes
-- **Resize Widgets**: Adjust widget dimensions with corner handles
-- **Responsive Design**: Automatic layout adjustments for xl, lg, md, and sm breakpoints
-- **Customizable**: Fully configurable widgets with custom icons, titles, and content
-- **TypeScript Support**: Full type definitions included
-- **No External Dependencies**: Self-contained state management (no Jotai, Redux, or other state libraries required)
+- Node.js 18 or higher
+- Yarn 4.10.3 or higher (recommended) or npm
+- React 18 (peer dependency)
+- React DOM 18 (peer dependency)
 
 ## Installation
 
@@ -27,10 +23,10 @@ npm install @patternfly/widgetized-dashboard
 
 ### Peer Dependencies
 
-Make sure you have the required peer dependencies installed:
+This library requires React 18+ and React DOM 18+ as peer dependencies. Make sure these are installed in your project:
 
 ```bash
-yarn add react react-dom react-router-dom @patternfly/react-core @patternfly/react-icons
+yarn add react@^18 react-dom@^18
 ```
 
 ## Quick Start
@@ -85,7 +81,12 @@ function App() {
 ## Documentation
 
 - [Getting Started Guide](./packages/module/patternfly-docs/content/examples/basic.md)
-- [API Reference](./packages/module/patternfly-docs/content/design-guidelines/design-guidelines.md)
+
+## Examples
+
+- [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
 
 ## Key Components
 
@@ -105,40 +106,81 @@ The widget selection drawer (can be used standalone with GridLayout).
 
 Individual widget tile wrapper with actions menu (used internally by GridLayout).
 
-## Differences from widget-layout
+## Development
 
-This library is based on [RedHatInsights/widget-layout](https://github.com/RedHatInsights/widget-layout) but has been adapted to be a generic, reusable PatternFly component:
+### Setup
 
-### Removed
-- ❌ Scalprum federated module loading
-- ❌ Chrome Services API calls for template persistence
-- ❌ Console-specific authentication (useCurrentUser)
-- ❌ Console-specific analytics (useChrome)
-- ❌ Jotai state management atoms
-- ❌ Console-specific icons and branding
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/patternfly/widgetized-dashboard.git
+   cd widgetized-dashboard
+   ```
 
-### Added
-- ✅ Generic widget rendering via `renderWidget` prop
-- ✅ Prop-based template management (bring your own state management)
-- ✅ Optional analytics callback
-- ✅ Standalone component usage (no external state required)
-- ✅ Full TypeScript support
-- ✅ Simplified API without console dependencies
+2. Install dependencies:
+   ```bash
+   yarn install
+   ```
 
-## Browser Support
+3. Start the development server:
+   ```bash
+   yarn start
+   ```
+   This will build the library and start the documentation site at http://localhost:8003
 
-Modern browsers (Chrome, Firefox, Safari, Edge) with ES6 support.
+### Building for Production
 
-## License
+```bash
+yarn build
+```
 
-MIT
+### Testing and Linting
+
+- Run unit tests: `yarn test`
+- Run linter: `yarn lint`
+- Lint JavaScript: `yarn lint:js`
+- Lint Markdown: `yarn lint:md`
+
+### Accessibility Testing
+
+1. Build the docs: `yarn build:docs`
+2. Serve the docs: `yarn serve:docs`
+3. In a new terminal window, run: `yarn test:a11y`
+4. View the generated report: `yarn serve:a11y`
 
 ## Contributing
 
+We welcome contributions! Please follow the guidelines below when contributing to this project.
+
+### Component Guidelines
+
+- Follow PatternFly naming conventions
+- Include TypeScript definitions for all components and props
+- Write unit tests using React Testing Library
+- Add documentation examples in `packages/module/patternfly-docs/content/examples/`
+- Follow the existing code style and linting rules
+- Ensure all tests pass before submitting a pull request
+
+### Pull Request Process
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Make your changes with appropriate tests
+4. Run `yarn lint` and `yarn test` to ensure code quality
+5. Commit your changes (`git commit -m 'Add some amazing feature'`)
+6. Push to the branch (`git push origin feature/amazing-feature`)
+7. Open a pull request
+
 ### AI-assisted development guidelines
 
 Please reference [PatternFly's AI-assisted development guidelines](https://github.com/patternfly/.github/blob/main/CONTRIBUTING.md) if you'd like to contribute code generated using AI.
 
-## Credits
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
+
+## Repository
+
+- **Issues**: [GitHub Issues](https://github.com/patternfly/widgetized-dashboard/issues)
+- **Source**: [GitHub Repository](https://github.com/patternfly/widgetized-dashboard)
+
 
-This library is based on the [RedHatInsights/widget-layout](https://github.com/RedHatInsights/widget-layout) repository, adapted to be a generic PatternFly component.

jest.config.js

@@ -13,5 +13,6 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css|less)$': '<rootDir>/styleMock.js'
   },
-  testEnvironment: 'jsdom'
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
 };

jest.setup.js

@@ -0,0 +1,16 @@
+// Mock ResizeObserver for tests
+global.ResizeObserver = class ResizeObserver {
+  constructor(callback) {
+    this.callback = callback;
+  }
+  observe() {
+    // Mock observe method
+  }
+  unobserve() {
+    // Mock unobserve method
+  }
+  disconnect() {
+    // Mock disconnect method
+  }
+};
+

packages/module/patternfly-docs/content/examples/basic.md

@@ -25,7 +25,7 @@ The WidgetLayout component provides a complete drag-and-drop dashboard experienc
 
 ### Interactive example
 
-```js file="./BasicExample.tsx"
+```js file="./BasicExample.tsx" isFullscreen
 
 ```
 

packages/module/release.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  branches: [{ name: 'main', channel: 'prerelease' }],
+  branches: [{ name: 'main', channel: 'prerelease', prerelease: 'prerelease' }, 'do-not-delete'],
   analyzeCommits: {
     preset: 'angular'
   },
@@ -9,6 +9,6 @@ module.exports = {
     '@semantic-release/github',
     '@semantic-release/npm'
   ],
-  tagFormat: 'v${version}',
+  tagFormat: 'prerelease-v${version}',
   dryRun: false
 };

packages/module/src/WidgetLayout/GridLayout.tsx

@@ -257,24 +257,25 @@ const GridLayout = ({
         onLayoutChange={onLayoutChange}
       >
         {activeLayout
-          .map(({ widgetType, title, ...rest }, index) => {
+          .map((layoutItem, index) => {
+            const { widgetType } = layoutItem;
             const widget = widgetMapping[widgetType];
             if (!widget) {
               return null;
             }
             const config = widgetMapping[widgetType]?.config;
             return (
-              <div key={rest.i} data-grid={rest} tabIndex={index} className={`widget-columns-${rest.w} widget-rows-${rest.h}`}>
+              <div key={layoutItem.i} data-grid={layoutItem} tabIndex={index} className={`widget-columns-${layoutItem.w} widget-rows-${layoutItem.h}`}>
                 <GridTile
                   isDragging={isDragging}
                   setIsDragging={setIsDragging}
                   widgetType={widgetType}
-                  widgetConfig={{ ...rest, colWidth: layoutWidth / columns[layoutVariant], config }}
+                  widgetConfig={{ ...layoutItem, colWidth: layoutWidth / columns[layoutVariant], config }}
                   setWidgetAttribute={setWidgetAttribute}
                   removeWidget={removeWidget}
                   analytics={analytics}
                 >
-                  {widget.renderWidget(rest.i)}
+                  {widget.renderWidget(layoutItem.i)}
                 </GridTile>
               </div>
             );