DBL Components

DBL Components is a React component framework built on top of Bootstrap 5. It powers JSON-driven interfaces by converting declarative configuration objects into fully interactive layouts.

Install

``bash
yarn install
`

Build

`bash
yarn build
`

Test

`bash
yarn test
`

Usage as dependency

`ts
import JsonRender from "dbl-components/ts/json-render";

const renderer = new JsonRender({ name: "demo" }, () => ({}));
const tree = renderer.buildContent({
name: "root",
component: "View",
content: [{
name: "headline",
component: "TitleView",
content: "Hello!",
}],
});
`

Minimal CLI example

Even though the project does not ship with a CLI wrapper, the underlying logic can be scripted directly:

`ts
import JsonRender from "dbl-components/ts/json-render";

async function main() {
const renderer = new JsonRender({ name: "demo" }, () => ({}));
const layout = renderer.buildContent({
name: "form",
component: "Form",
content: [
{
name: "autocomplete",
component: "AutocompleteField",
options: [
{ label: "Option A", value: "a" },
{ label: "Option B", value: "b" },
],
},
],
});
console.log(layout);
}

main();
`

Examples

$3

`tsx
import AutocompleteField from "dbl-components/ts/forms/fields/autocomplete-field";

export default function Example() {
return (
name="user"
label="Select a user"
options={[
{ label: "Alice", value: "alice" },
{ label: "Bob", value: "bob" },
]}
/>
);
}
`

TODO

- [ ] Order container breakpoints and align them with the Sass $container-max-widths map.
- [ ] Create a panel component that supports swipe gestures, toggles icon-only mode on mobile, and animates fully hidden and expanded states.
- [ ] Update the navigation component so the toggle accepts the event name used to collapse the text when only icons should remain visible.
- [ ] Create a new table component that receives column definitions as content.
- [ ] Allow the table component to manage visible columns through an array of names.
- [ ] Allow passing React components through the component field in JSON views.
- [ ] Make ReactRouterSchema behave like View, or merge both so either can be used interchangeably.
- [ ] Allow specifying multiple mount points for child routes, either by passing an array of component names or by mapping specific route names to container components.
- [ ] Extract the recursive algorithm in View` into standalone functions so that other modules, such as reference resolvers, can reuse it.
- [ ] Extract helper functions into a separate library for backend projects.
- [ ] Add dropdown and collapsible submenu support to the navigation components.