ts-interactive-data

4.0.0-rc.1 • Public • Published

ts-interactive-data

Composable UIs for interactive data.

ci

Table of Contents

Discaimer ⚠

This library is in early development and the API is not stable yet. Things may not yet work as expected.

Live Demo

thought2.github.io/purescript-interactive-data

Features

  • Framework agnostic
    _Can be embedded in any React app
  • Configurable
    UIs for each data type can be customized
  • Extensible
    UIs for any custom data type can be written
  • Data validation
    Data is validated on the fly and errors are displayed

Use cases

Any part of a web app that need to handle user input of nested structured data. E.g:

  • settings panel
  • back office tools
  • user input forms

Supported types

The following types are supported out of the box:

  • String
  • Number
  • Record
  • Tagged unions

Getting Started

Installation

npm install ts-interactive-data

Minimal Example

App.tsx:

import * as ID from "ts-interactive-data";
import * as React from "react";

// 1. Compose a "Data UI" for a specific type
const sampleDataUi = ID.record_({
  user: ID.record_({
    firstName: ID.string({
      multiline: false,
      maxLength: 100,
    }),
    lastName: ID.string({}),
    size: ID.number({
      min: 0,
      max: 100,
    }),
    info: ID.variant_("age", {
      age: ID.number({}),
      name: ID.string({}),
    }),
  }),
  settings: ID.record_({
    accountId: ID.string({}),
    description: ID.string({}),
  }),
});

// 2. Turn "Data UI" into an App interface
const sampleApp = ID.toApp(sampleDataUi, {
  name: "Sample",
  fullscreen: true,
});

// 3. With the `useApp` hook you can integrate the UI into any React app
export const App = () => {
  const { jsx, data } = ID.useApp(sampleApp);

  React.useEffect(() => {
    console.log("Data of new state:");
    console.log(data);
  }, [data]);

  return <div>{jsx}</div>;
};

We also need to create a simple html file and an index.tsx to run the web app.

index.tsx:

import * as React from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";

const container = document.getElementById("app");

if (!container) {
  throw new Error("No container");
}

const root = createRoot(container);
root.render(<App />);

index.html:

<html>
  <head>
    <title>ts-interactive-data Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="./index.tsx" type="module"></script>
    <div id="app"></div>
  </body>
</html>

Run

parcel static/index.html

Readme

Keywords

none

Package Sidebar

Install

npm i ts-interactive-data

Weekly Downloads

0

Version

4.0.0-rc.1

License

MIT

Unpacked Size

11.9 MB

Total Files

15

Last publish

Collaborators

  • fp-glue