dbl-components

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

yarn install

Build

yarn build

Test

yarn test

Usage as dependency

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:

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

AutocompleteField

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

export default function Example() {
  return (
    <AutocompleteField
      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.