Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

auto-views-with-ui-schema

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

auto-views-with-ui-schema

`AutoViews` is a set of utilities and abstractions which provides functionality to automatically build UI on top of `JSONSchema`.

  • 0.1.1
  • npm
  • Socket score

Version published
Weekly downloads
5
decreased by-50%
Maintainers
1
Weekly downloads
 
Created
Source

AutoViews

AutoViews is a set of utilities and abstractions which provides functionality to automatically build UI on top of JSONSchema.

To build UI automatically AutoViews uses some abstractions:

  • AutoView — React component, which gets JSONSchema, data, optional UISchema as prop and ComponentsRepo as components property in context and renders accordingly
  • ComponentsRepo — class that keeps all components, grouped by data types (string, object and others, even custom data types) and optionally with theirs predicate's, which are boolean returning functions that defines ability of this component to render this JSONSchema node.
  • UISchema — is JSON that describes specific rules to render that specific JSONSchema node:
    • what component and its settings to use,
    • which ComponentsRepo should be chosen to get component,
    • what UIHints to apply

Each component which is depends on state or other variables could decide which UISchema to use for render or return custom render result.

To address specific JSONSchema node UISchema uses JSONPointer as key and ComponentOptions as value to tell which component and it's setting to use, or what UIHints have to be applied.

ComponentsRepo

ComponentsRepo is class which accepts string name as constructor parameter. Once you did instance, you can assign components to data types:

const repo = new ComponentsRepo('editComponents');
repo.register('number', {name: 'input', component: NumberInput}

You can have as many components assigned to certain data type as you want. If you need more then one, you may want to add predicate function during registering:

const hasMinMax = node => node.hasOwnProperty('minimum') && node.hasOwnProperty('maximum');
repo.register('number', {name: 'slider', component: Slider, predicate: hasMinMax});

repo.getMatched({type: 'number', minimum: 0, maximum: 10})

Will return array of available components in registration order

[
    {name: 'number', component: NumberInput},
    {name: 'slider', predicate: hasMinMax, component: SliderInput}
]

By default AutoView will pick last component in getMatched array. Unless there is other component specified in UISchema.

ComponentsRepo instance should be provided to the AutoView context.

<RepositoryProvider components={repo}>
    <AutoView {...props}/>
</RepositoryProvider>

UISchema

UISchema is JSON which contains information about how to render JSONSchema.

There is the corresponded class UISchema. Here we create new UISchema and assign our editComponents repository for the UISchema.

Example is valid for geo schema

repo.register('string', {name: 'input', component: TextInput}
repo.register('string', {name: 'coordinateInput', component: CoordinateInput}

const uiSchema = new UISchema({
    editComponents: { // key is repository `name`.
        '/properties/longitude', {name: 'coordinateInput'},
        '/properties/latitude', {name: 'coordinateInput'},
    }
});
// ...
<RepositoryProvider components={repo}>
    <AutoView
        {...props}
        uiSchema={uiSchema}
    />
</RepositoryProvider>

So with the appropriate JSONSchema and data properties the AutoView component will render assigned components from the UIHints at the given JSONPointer's

Options

Component may take some options. When choosing specific component to render certain data type in UISchema you may also set it's options.

const overrides = new UISchema({
    viewComponents: {
        '': {name: 'uppercasable', options: {uppercase: true}}
    }
});

const {select} = clientRenderer.render(
    <RepositoryProvider components={repo}>
        <AutoView schema={schema} data="foo" uiSchema={overrides}/>
    </RepositoryProvider>
);

In this case component that is registered in viewComponents components repository by string type with name uppercasable should get options and accordingly to value of option name uppercase make data: string = 'foo' prop — uppercased in render result.

UIHints

UISchema not only contain rules for one or multiple ComponentsRepo, but also keeps list of UIHints which are specific rules for data type, so components which are implementing certain type of data may consider that UIHints.

Same as for ComponentsRepo overrides, UIHints uses JSONPointers.

At the following example we have special UIHints for root JSONSchema which says what order should it have.

Each component that assigned to type object in repo may consider order hint and render result accordingly. This repo contains AutoFields component which is consider order and will consider other object related UIHints.

const schema: CoreSchemaMetaSchema = {
    type: 'object',
    properties: {
        first: {type: 'string'},
        second: {type: 'string'},
        third: {type: 'string'}
    }
};

const ObjectFields = props => (
    <fieldset>
        <AutoFields {...props} />
    </fieldset>
)
const repo = new ComponentsRepo('editComponents');
repo.register('string', {name: 'input', component: TextInput}
repo.register('object', {name: 'fields', component: ObjectFields}

const uiSchema = new UISchema();
uiSchema.addUIHints('', {order: ['second', 'third', 'first']});

// ...
<RepositoryProvider components={repo}>
    <AutoView
        schema={schema}
        uiSchema={uiSchema}
        data={{first: '', second: '', third: ''}}
    />
</RepositoryProvider>

So this example will render data fields with input in order which is defined in UIHints.

TBD:

Autoview Component

Events

FAQs

Package last updated on 05 Jan 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc