widget-layout

Reusable drag and drop UI layout for frontends

Documentation

• Widget Layout Component Interface - Complete interface documentation for the WidgetLayout federated module
• GridLayout Component - Core layout engine with drag-and-drop, responsive grid system, and template persistence
• Creating Custom Widgets - Guide for creating custom widgets that integrate with the grid layout system
• Layout Data Format - Comprehensive documentation of the layout data structures, API endpoints, and data flow
• AI Agent Guidelines - Guidelines for AI agents generating code documentation

Initial etc/hosts setup

In order to access the https://[env].foo.redhat.com in your browser, you have to add entries to your /etc/hosts file. This is a one-time setup that has to be done only once (unless you modify hosts) on each machine.

To setup the hosts file run following command:

npm run patch:hosts

If this command throws an error run it as a sudo:

sudo npm run patch:hosts

Getting started

1. npm install

2. npm run start

3. Open browser in URL listed in the terminal output

4. Currently, App.tsx will throw a type error until your app is registered and a navId has been set

Update config/dev.webpack.config.js according to your application URL. Read more.

Testing

npm run verify will run npm run lint (eslint) and npm test (Jest)

Run locally with chrome service BE

!Prerequisites! Podman, podman-compose and go (ideally gvm) installed

1. Pull chrome-services repository
2. Run make infra in chrome-services repository
3. Create .env file and copy default values as mentioned in chrome-service-backend#local-testing in chrome-services repository
4. Run go run main.go in chrome-services repository
5. Run CONFIG_PORT=8000 npm run start in widget-layout reposiroty