auto-views-with-ui-schema - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

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) ||

dist/auto-view/utils.js

@@ -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 @@ }

dist/models/ui-schema.d.ts

@@ -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;

dist/models/ui-schema.js

 "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

package.json

 {
   "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"

README.md

@@ -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
+);
+```

No alert changes

Improved metrics

Number of lines in readme file

236

51.28%

Worsened metrics

Total package byte prevSize

74966

-19.89%

Dependency count

9

12.5%

Number of package files

42

-12.5%

Lines of code

684

-23.4%

Dependency changes

• + Added

  immer@0.3.0

• + Added

  immer@0.3.0
  (transitive)