@lcimb/ts-jsonforms-client v0.0.1-alpha.0

React components for TypeScript To JsonForms

This is a proof of concept for using TypeScript interfaces to generate forms using ts-json-schema-generator and jsonforms.

The above mentioned packages are great, and I am convinced that tying them together will create something awesome.

This is experimental and subject to change.

Example Usage

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import {
  JsonFormsComponent,
  JsonFormsComponentProps,
} from "@lcimb/ts-jsonforms-client";
import ratingControlTester from "./rating-control/ratingControlTester";
import RatingControlWithJsonForms from "./rating-control/RatingControl";
import { JsonFormsRendererRegistryEntry } from "@jsonforms/core";

const routes: (JsonFormsComponentProps & {
  path: string;
  title: string;
  renderers?: JsonFormsRendererRegistryEntry[];
})[] = [
  {
    path: "/test1",
    baseUrl: "/api/test1",
    title: "Test 1",
    schemaUrl: "/api/test1",
    renderers: [
      { renderer: RatingControlWithJsonForms, tester: ratingControlTester },
    ],
  },
  {
    path: "/test2",
    baseUrl: "/api/test2",
    title: "Test 2",
    schemaUrl: "/api/test2",
  },
  {
    path: "/test3",
    baseUrl: "/api/test3",
    title: "Test 3",
    schemaUrl: "/api/test3",
  },
];

/**
 * Links to components
 */
const Index = () => {
  return routes.map((route) => (
    <div key={route.path}>
      <Link to={route.path}>{route.title}</Link>
    </div>
  ));
};

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route index={true} path="/" element={<Index />} />
        {routes.map((route) => (
          <Route
            key={route.path}
            path={route.path}
            element={
              <JsonFormsComponent
                baseUrl={route.baseUrl}
                schemaUrl={route.schemaUrl}
                renderers={route.renderers}
              />
            }
          />
        ))}
      </Routes>
    </BrowserRouter>
  );
};

export default App;