inrupt · james-martin-jd · Jun 5, 2019 · May 15, 2019 · May 16, 2019 · May 17, 2019
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Solid React Components Library
 
+## 0.4.1 ( June 5, 2019 )
+
+### Updated
+
+* ShexFormBuilder
+    * LiveUpdate added to ShexForm, so any changes to the form data outside of the current application will immediately be displayed in the form in real time
+    * Conflict Resolution added. If two users are editing the same field at the same time, incoming changes will be displayed to the second editor, to inform them that another change has occurred
+    * Form now autosaves. Triggered by the onBlur event, any changes to a field will be immediately and automatically saved, rather than relying on a button to save everything at once. This is an optional form state, and can be turned on or off
+    * New error messages added to handle new error events, such as conflicts
+    * Refactors to the ShexForm components to account for new functionality
+
 ## 0.4.0 ( May 22, 2019 )
 
 ### Added

diff --git a/README.md b/README.md
@@ -204,10 +204,12 @@ In the future, labels will be generated more dynamically.
 | shexUri            | string   | null                                                      | Required. The URL to the ShEx shape to use to render the form.
 | rootShape          | string   | null                                                      | Optional. The shape in the shexUri file to begin parsing. If a START shape is defined in the shape, this is not necessary.
 | theme              | Object   | null                                                      | Optional. An object (defined below) allowing custom overrides to the look and feel of the form.
-| language           | string   | null                                                      | Optional. The language identifier to translate text. For example, 'en' or 'es'.
+| languageTheme      | Object   | null                                                      | Optional. An object (defined below) allowing customization of the text of the form. Can be used in combination with i18n in the parent app.
 | successCallback    | Function | Function that writes a success message to console         | Optional. Overrides the existing success callback and allows custom success functions.
 | errorCallback      | Function | Function that writes the error message to console         | Optional. Overrides the existing error callback function.
 | messageValidation  | Object   | null                                                      | An Object containing an array of error strings. The error strings will be used in most non-validation situations.
+| autoSaveMode       | Boolean  | false                                                     | Optional. Determines of the form will autosave or have a save/cancel button. Default is save/cancel button.
+
 
 Theme object:
 
@@ -218,5 +220,17 @@ Theme object:
 | deleteButton       | string   | solid-button-shex                     | Custom class name for the delete button.
 | form               | string   | solid-shex-form                       | Custom class name for the form.
 
+LanguageTheme object:
+
+| Key                   | Type      | Default                           | Description                           
+| --------------------- | ----------|---------------------------------- | -------------------------------------------------------
+| language              | string    | 'en'                              | String representing the language code to use for the translations
+| saveBtn               | string    | 'Save'                            | String representing the save button text
+| resetBtn              | string    | 'Reset'                           | String representing the reset button text
+| addButtonText         | string    | '+ Add new'                       | String representing the add new item button text
+| deleteButton          | string    | 'Delete'                          | String representing the delete button text
+| dropdownDefaultText   | string    | '- Select -'                      | String representing the default text for a dropdown menu
+
+
 ##### Shapes
 A set of example shapes can be found [here](https://shexshapes.inrupt.net/public/), which show various ShEx shapes. 
diff --git a/package.json b/package.json
@@ -1,8 +1,11 @@
 {
   "name": "@inrupt/solid-react-components",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Solid React Components",
   "main": "build/index.js",
+  "prettier": {
+    "singleQuote": true
+  },
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",

diff --git a/src/demo/components/HandleShexForm/handle-shex-form.component.js b/src/demo/components/HandleShexForm/handle-shex-form.component.js
@@ -1,6 +1,6 @@
-import React, {useState} from 'react';
-import styled from "styled-components";
-import {ShexFormBuilder} from "@components";
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { ShexFormBuilder } from '@components';
 
 const Form = styled.form``;
 
@@ -39,23 +39,24 @@ const HandleShexForm = ({ webId }:Props) => {
     }
     // By default addButton and deleteButton will be Add new and Delete
     const languageTheme = {
-        language: 'en',
-        saveBtn: "Save",
-        resetBtn: "Reset",
-        addButtonText: "+ Add new ",
-        deleteButton: "Delete",
-        dropdownDefaultText: "- Select -"
+      language: 'en',
+      saveBtn: 'Save',
+      resetBtn: 'Reset',
+      addButtonText: '+ Add new ',
+      deleteButton: 'Delete',
+      dropdownDefaultText: '- Select -',
+      warningResolution: 'Field value has been updated to:'
     };
 
     return(
         <div>
             <h2>Shex Form</h2>
             <Form onSubmit={onSubmit}>
-                <Input placeholder={'Document Url'} name='documentUri' onChange={onChangeInput}/>
-                <Input placeholder={'ShexC Url'} name='shexUri' onChange={onChangeInput}/>
-                <Button type='submit'>Load Form</Button>
+                <Input placeholder={'Document Url'} name="documentUri" onChange={onChangeInput}/>
+                <Input placeholder={'ShexC Url'} name="shexUri" onChange={onChangeInput}/>
+                <Button type="submit">Load Form</Button>
             </Form>
-            <ShexFormBuilder {...{ ...podData, languageTheme}} />
+            <ShexFormBuilder {...{ ...podData, languageTheme, autoSaveMode : true }} />
         </div>
     );
 };

diff --git a/src/lib/components/ShexForm/children/AddButton/add-button.component.js b/src/lib/components/ShexForm/children/AddButton/add-button.component.js
@@ -1,30 +1,28 @@
 import React from "react";
-import { shexFormLabel } from "@utils";
-import { ThemeShex, Language } from "@context";
+import { shexUtil } from "@utils";
+import { ShexConfig } from "@context";
 
 export const AddButton = ({
-  addNewShexField,
   expression,
   defaultExpression,
   allowNewFields,
   text = "+ Add new"
 }) => {
   return (allowNewFields && (
-    <ThemeShex.Consumer>
-      {theme => (
-        <Language.Consumer>
-          {({ language, addButtonText }) => (
-            <button
-              onClick={() => addNewShexField(defaultExpression, expression)}
-              type="button"
-              className={theme && theme.addButtonStyle}
-            >
-              {addButtonText || text}{" "}
-              {shexFormLabel(defaultExpression, language)}
-            </button>
-          )}
-        </Language.Consumer>
+    <ShexConfig.Consumer>
+      {({
+        theme,
+        languageTheme: { language, addButtonText },
+        config: { addNewShexField }
+      }) => (
+        <button
+          onClick={() => addNewShexField(defaultExpression, expression)}
+          type="button"
+          className={theme && theme.addButtonStyle}
+        >
+          {addButtonText || text} {shexUtil.formLabel(defaultExpression, language)}
+        </button>
       )}
-    </ThemeShex.Consumer>
+    </ShexConfig.Consumer>
   ): null);
 };
diff --git a/src/lib/components/ShexForm/children/AddButton/add-button.component.test.js b/src/lib/components/ShexForm/children/AddButton/add-button.component.test.js
@@ -1,60 +1,64 @@
-import React from 'react';
-import { Language } from '@context';
-import { cleanup, render } from 'react-testing-library';
-import { AddButton } from './add-button.component';
-import 'jest-dom/extend-expect';
+import React from "react";
+import { ShexConfig } from "@context";
+import { cleanup, render } from "react-testing-library";
+import { AddButton } from "./add-button.component";
+import "jest-dom/extend-expect";
 
 afterAll(cleanup);
 
-const languageTheme = {
-  language: 'en',
-  addButtonText: '+ Add new '
+const config = {
+  languageTheme: {
+    language: "en",
+    addButtonText: "+ Add new "
+  },
+  theme: {},
+  config: {}
 };
 
 const defaultExpression = {
   annotations: []
 };
 
-const setup = (props, languageTheme) => {
+const setup = (props, config) => {
   return (
-    <Language.Provider value={languageTheme}>
+    <ShexConfig.Provider value={config}>
       <AddButton {...props} />
-    </Language.Provider>
+    </ShexConfig.Provider>
   );
 };
 
-describe('Shex ShapeForm Component', () => {
+describe("Shex ShapeForm Component", () => {
   const component = setup(
     { allowNewFields: true, defaultExpression },
-    languageTheme
+    config
   );
   const { container, rerender } = render(component);
 
-  it('should renders without crashing', () => {
+  it("should renders without crashing", () => {
     expect(container).toBeTruthy();
   });
 
-  it('should renders language version', () => {
+  it("should renders language version", () => {
     const languageTheme = {
-      language: 'es',
-      addButtonText: '+ Agregar '
+      language: "es",
+      addButtonText: "+ Agregar "
     };
     const component = setup(
       { allowNewFields: true, defaultExpression },
-      languageTheme
+      {...config, languageTheme}
     );
 
     rerender(component);
-    expect(container).toHaveTextContent('+ Agregar');
+    expect(container).toHaveTextContent("+ Agregar");
   });
 
-  it('should not renders if allowNewField is false', () => {
+  it("should not renders if allowNewField is false", () => {
     const component = setup(
       { allowNewFields: false, defaultExpression },
-      languageTheme
+      config
     );
     rerender(component);
 
-    expect(container).toHaveTextContent('');
+    expect(container).toHaveTextContent("");
   });
 });
diff --git a/src/lib/components/ShexForm/children/DeleteButton/delete-button.component.js b/src/lib/components/ShexForm/children/DeleteButton/delete-button.component.js
@@ -1,7 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { ThemeShex } from "@context";
-import { Language } from "@context";
+import { ShexConfig } from "@context";
 
 const DeleteButtonWrapper = styled.button`
   position: ${({ floating }) => (floating ? "absolute" : "relative")};
@@ -14,33 +13,28 @@ const DeleteButtonWrapper = styled.button`
 `;
 
 export const DeleteButton = ({
-  onDelete,
   fieldData,
   predicate,
   parent,
   text = "Remove"
 }) => {
   return (
-    <ThemeShex.Consumer>
-      {theme => (
-        <Language.Consumer>
-          {({ deleteButton }) => (
-            <DeleteButtonWrapper
-              className={theme && theme.deleteButton}
-              type="button"
-              onClick={() =>
-                onDelete(
-                  predicate ? { ...fieldData, predicate } : fieldData,
-                  parent
-                )
-              }
-              floating={parent}
-            >
-              {deleteButton || text}
-            </DeleteButtonWrapper>
-          )}
-        </Language.Consumer>
+    <ShexConfig.Consumer>
+      {({ theme, languageTheme: { deleteButton }, config: { onDelete } }) => (
+        <DeleteButtonWrapper
+          className={theme && theme.deleteButton}
+          type="button"
+          onClick={() =>
+            onDelete(
+              predicate ? { ...fieldData, predicate } : fieldData,
+              parent
+            )
+          }
+          floating={parent}
+        >
+          {deleteButton || text}
+        </DeleteButtonWrapper>
       )}
-    </ThemeShex.Consumer>
+    </ShexConfig.Consumer>
   );
 };