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 - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

3

dist/auto-view/auto-view.js

@@ -13,2 +13,3 @@ "use strict";

const React = require("react");
const ui_schema_1 = require("../models/ui-schema");
const utils_1 = require("../utils");

@@ -37,3 +38,3 @@ class AutoView extends React.Component {

if (matches.length > 0) {
const override = uiSchema && uiSchema.getByPointerAndRepo(components.name, schemaPointer);
const override = uiSchema && ui_schema_1.getComponent(uiSchema, components.name, schemaPointer);
const componentRecord = override &&

@@ -40,0 +41,0 @@ matches.find(record => record.name === override.name) ||

@@ -6,13 +6,13 @@ "use strict";

if (!uiSchema) {
return ui_schema_1.defaultUIHints;
return ui_schema_1.getDefaultHints();
}
const uiHints = uiSchema.getUIHints(pointer);
const uiHints = ui_schema_1.getUIHints(uiSchema, pointer);
if (!uiHints) {
return ui_schema_1.defaultUIHints;
return ui_schema_1.getDefaultHints();
}
return Object.assign({}, ui_schema_1.defaultUIHints, uiHints);
return Object.assign({}, ui_schema_1.getDefaultHints(), uiHints);
}
exports.getUIHints = getUIHints;
function getComponentOptions(uiSchema, repo = '', pointer = '') {
const compOptions = uiSchema.getByPointerAndRepo(repo, pointer);
const compOptions = ui_schema_1.getComponent(uiSchema, repo, pointer);
return compOptions && compOptions.options;

@@ -19,0 +19,0 @@ }

@@ -21,21 +21,13 @@ import { JSONPointer, RepoName } from '../repository/components-repo';

}
export declare class UISchema implements IUISchema {
private repoOverrides;
private uiHintsOverrides;
constructor(repoOverrides?: RepoPointersCollection, uiHintsOverrides?: UIHintsOverrides);
addOverride(name: RepoName, schemaPointer: JSONPointer, override: ComponentOptions): UISchema;
removeOverride(name: RepoName, schemaPointer: string): UISchema;
addUIHints(pointer: JSONPointer, uiHints: UIHints): UISchema;
removeUIHints(pointer: JSONPointer): UISchema;
getByPointerAndRepo(name: RepoName, schemaPointer?: JSONPointer): ComponentOptions | undefined;
getUIHints(pointer: JSONPointer): UIHints | undefined;
export interface UISchema {
hints: UIHintsOverrides;
components: RepoPointersCollection;
}
export declare const defaultUIHints: UIHints;
export interface IUISchema {
addUIHints: (pointer: JSONPointer, uiHints: UIHints) => UISchema;
getUIHints: (pointer: JSONPointer) => UIHints | undefined;
removeUIHints: (pointer: JSONPointer) => UISchema;
addOverride: (name: RepoName, schemaPointer: JSONPointer, override: ComponentOptions) => UISchema;
removeOverride: (name: RepoName, schemaPointer: JSONPointer) => UISchema;
getByPointerAndRepo: (repoName: RepoName, schemaPointer?: JSONPointer) => ComponentOptions | undefined;
}
export declare function createUISchema(components?: RepoPointersCollection, hints?: UIHintsOverrides): UISchema;
export declare function getDefaultHints(): UIHints;
export declare function getUIHints(uiSchema: UISchema, pointer: JSONPointer): UIHints | undefined;
export declare function setUIHints(pointer: JSONPointer, hints: UIHints, uiSchema: UISchema): UISchema;
export declare function unsetUIHints(pointer: JSONPointer, uiSchema: UISchema): UISchema;
export declare function getComponent(uiSchema: UISchema, name: RepoName, pointer: JSONPointer): ComponentOptions | undefined;
export declare function setComponent(name: RepoName, pointer: JSONPointer, componentOptions: ComponentOptions, uiSchema: UISchema): UISchema;
export declare function unsetComponent(name: RepoName, pointer: JSONPointer, uiSchema: UISchema): UISchema;
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
class UISchema {
constructor(repoOverrides = {}, uiHintsOverrides = {}) {
this.repoOverrides = repoOverrides;
this.uiHintsOverrides = uiHintsOverrides;
}
addOverride(name, schemaPointer, override) {
this.repoOverrides[name] = this.repoOverrides[name] || {};
this.repoOverrides[name][schemaPointer] = override;
return this;
}
removeOverride(name, schemaPointer) {
const repoOverride = this.repoOverrides[name];
if (repoOverride) {
delete repoOverride[schemaPointer];
}
return this;
}
addUIHints(pointer, uiHints) {
this.uiHintsOverrides[pointer] = uiHints;
return this;
}
removeUIHints(pointer) {
delete this.uiHintsOverrides[pointer];
return this;
}
getByPointerAndRepo(name, schemaPointer = '') {
if (!this.repoOverrides[name]) {
return;
}
return this.repoOverrides[name][schemaPointer];
}
getUIHints(pointer) {
return this.uiHintsOverrides[pointer];
}
const immer_1 = require("immer");
function createUISchema(components = {}, hints = {}) {
return { hints, components };
}
exports.UISchema = UISchema;
exports.defaultUIHints = {
order: []
};
exports.createUISchema = createUISchema;
function getDefaultHints() {
return { order: [] };
}
exports.getDefaultHints = getDefaultHints;
function getUIHints(uiSchema, pointer) {
return uiSchema.hints[pointer];
}
exports.getUIHints = getUIHints;
function setUIHints(pointer, hints, uiSchema) {
return immer_1.default(uiSchema, schema => schema.hints[pointer] = hints);
}
exports.setUIHints = setUIHints;
function unsetUIHints(pointer, uiSchema) {
return immer_1.default(uiSchema, schema => delete schema.hints[pointer]);
}
exports.unsetUIHints = unsetUIHints;
function getComponent(uiSchema, name, pointer) {
return uiSchema.components[name] && uiSchema.components[name][pointer];
}
exports.getComponent = getComponent;
function setComponent(name, pointer, componentOptions, uiSchema) {
return immer_1.default(uiSchema, schema => {
schema.components[name] = schema.components[name] || {};
schema.components[name][pointer] = componentOptions;
});
}
exports.setComponent = setComponent;
function unsetComponent(name, pointer, uiSchema) {
return immer_1.default(uiSchema, schema => delete schema.components[name][pointer]);
}
exports.unsetComponent = unsetComponent;
//# sourceMappingURL=ui-schema.js.map
{
"name": "auto-views-with-ui-schema",
"version": "0.1.1",
"version": "0.2.0",
"description": "",

@@ -28,2 +28,3 @@ "main": "./dist/index.js",

"fast-json-patch": "^2.0.6",
"immer": "0.3.0",
"json-pointer": "^0.6.0",

@@ -30,0 +31,0 @@ "prop-types": "^15.6.0"

@@ -15,4 +15,36 @@ # AutoViews

To address specific `JSONSchema` node `UISchema` uses [JSONPointer](https://tools.ietf.org/html/rfc6901) as key and [ComponentOptions](https://github.com/wixplosives/auto-views-with-ui-schema/blob/master/src/models/ui-schema.ts#L1) as value to tell which component and it's setting to use, or what `UIHints` have to be applied.
To address specific `JSONSchema` node `UISchema` uses [JSONPointer](https://tools.ietf.org/html/rfc6901) as key and [ComponentOptions](src/models/ui-schema.ts#L1) as value to tell which component and it's setting to use, or what `UIHints` have to be applied.
## Autoview Component
`AutoView` is component that will automatically render `data` which is validated with given `JSONSchema` with components registered in `ComponentsRepo` and pathed through `RepositoryProvider`.
To choose what specific component to be used and what `UIHints` have to be considered `AutoView` uses `UISchema` object and utilities.
### Events
Components in `ComponentsRepo` may have `AutoViewProps` props interface which has optional ` onChange?: AutoEventHandler` and `onClick?: AutoEventHandler`.
`AutoEventHandler` is object with next type:
```ts
type AutoEventHandler = (
e: React.SyntheticEvent<HTMLElement>,
autoEvent: AutoEvent
) => void;
```
where `AutoEvent` is something very special:
```ts
interface AutoEvent {
schemaPointer: string;
pointer: string;
patch?: Operation[];
}
```
This events may have [JSONPatch](https://tools.ietf.org/html/rfc6902) operations on given data, which should be handled by application that uses `AutoView`.
This library provides handy [event handlers creators](src/events.ts) for each `JSONPatch` operation.
## ComponentsRepo

@@ -59,8 +91,8 @@ `ComponentsRepo` is class which accepts string `name` as constructor parameter.

`UISchema` is JSON which contains information about how to render `JSONSchema`.
`UISchema` is an object that 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`.
There is a corresponding type `UISchema`.
Here we create a new `UISchema` and assign our `editComponents` repository to the `UISchema`.
Example is valid for [geo schema](https://github.com/wixplosives/auto-views-with-ui-schema/blob/master/test/json-schema/geo.ts)
Example is valid for [geo schema](test/json-schema/geo.ts)

@@ -71,3 +103,3 @@ ```ts

const uiSchema = new UISchema({
const uiSchema = createUISchema({
editComponents: { // key is repository `name`.

@@ -95,3 +127,3 @@ '/properties/longitude', {name: 'coordinateInput'},

```tsx
const overrides = new UISchema({
const overrides = createUISchema({
viewComponents: {

@@ -112,3 +144,3 @@ '': {name: 'uppercasable', options: {uppercase: true}}

### 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`.
`UISchema` contains not only rules for one or multiple `ComponentsRepo` but also keeps list of `UIHints` which are specific rules for data type. Thus, components which are implementing certain type of data may consider that `UIHints`.

@@ -136,3 +168,3 @@ Same as for `ComponentsRepo` overrides, `UIHints` uses `JSONPointer`s.

</fieldset>
)
);
const repo = new ComponentsRepo('editComponents');

@@ -142,4 +174,5 @@ repo.register('string', {name: 'input', component: TextInput}

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

@@ -158,6 +191,53 @@ // ...

TBD:
### Manipulating UISchema values
## Autoview Component
## Events
There are functions to change `UISchema` type values in an immutable way:
Adding/changing `UIHints`:
```ts
const emptyUISchema = createUISchema();
const uiSchemaWithHints = setUIHints(
'/path/in/data',
{order: ['second', 'third', 'first']},
emptyUISchema
);
```
Retrieving `UIHints`:
```ts
const hints = getUIHints('/path/in/data', uiSchemaWithHints);
```
Removing `UIHints`:
```ts
const uiSchemaWithoutHints = unsetUIHints('/path/in/data', uiSchemaWithHints);
```
Adding/changing component options:
```ts
const emptyUISchema = createUISchema();
const uiSchemaWithComponent = setComponent(
'repositoryName',
'/path/in/data',
{name: 'uppercasable', options: {uppercase: true}},
original
);
```
Retrieving component options;
```ts
const componentOptions = getComponent(
'repositoryName',
'/path/in/data',
uiSchemaWithComponent
);
```
Removing component:
```ts
const uiSchemaWithoutComponent = unsetComponent(
'repositoryName',
'/path/in/data',
uiSchemaWithComponent
);
```

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

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