inrupt · james-martin-jd · Dec 18, 2019 · Aug 14, 2019 · Sep 5, 2019 · Sep 6, 2019
diff --git a/.eslintrc b/.eslintrc
@@ -16,7 +16,8 @@
     "import/no-cycle": [0],
     "quotes": [1, "single"],
     "react/no-array-index-key": [1],
-    "react/jsx-one-expression-per-line": [0]
+    "react/jsx-one-expression-per-line": [0],
+    "jsx-a11y/label-has-for": [0]
   },
   "settings": {
     "import/resolver": { "babel-module": {} }

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,36 @@
 # Solid React Components Library
 
+## 0.5.0 ( December 18, 2019 )
+
+### Added
+
+- FormModel component:
+  - New component that renders a form from a Form Model
+  - New components added to support the form model. The following list of components are all compatible with the Form Model:
+    - Textbox
+    - TextArea
+    - Date / DateTime / Time fields, using [react-datepicker](https://reactdatepicker.com/)
+    - Dropdown
+    - Checkbox (Boolean, not tri-state)
+    - ColorPicker, using [react-color](https://casesandberg.github.io/react-color/)
+    - Header (an `<h2>` tag rendered inside of the form)
+    - Comment (a `<p>` tag rendered inside of the form)
+    - Decimal / Float / Integer fields
+    - Email field
+    - Phone field
+    - Multiple, a custom Form Model field that indicates the child element is repeatable
+    - Group, an ordered set of fields that can be treated as a single sub-form
+
+### Updated
+
+- Notification class was updated to validate notifications when being read from an inbox. This way only compatible notifications are retrieved and the data is more predictable for display purposes
+- Updated ACL class predicate from `acl:defaultForNew`, which is deprecated, to `acl:default`
+- Renamed the rdf predicate prefix from `a` to `rdf` to align with standard convention
+
+### Deprecated
+
+- The ShExFormBuilder component is now deprecated in favor of the new FormModel component. The component remains in the library for now, but the documentation has been removed
+
 ## 0.4.4 ( August 14, 2019 )
 
 ### Added

diff --git a/README.md b/README.md
diff --git a/config/webpack.config.demo.js b/config/webpack.config.demo.js
@@ -221,6 +221,7 @@ module.exports = {
       '@hooks': path.resolve(__dirname, '../src/lib/hooks'),
       '@context': path.resolve(__dirname, '../src/lib/context'),
       '@classes': path.resolve(__dirname, '../src/lib/classes'),
+      '@lib': path.resolve(__dirname, '../src/lib'),
       '@constants': path.resolve(__dirname, '../src/lib/constants')
     },
     plugins: [

diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
@@ -226,6 +226,7 @@ module.exports = {
                       '@hooks': path.resolve(paths.appLibSrc, './hooks'),
                       '@context': path.resolve(paths.appLibSrc, './context'),
                       '@classes': path.resolve(__dirname, '../src/lib/classes'),
+                      '@lib': path.resolve(__dirname, '../src/lib'),
                       '@constants': path.resolve(__dirname, '../src/lib/constants')
                     }
                   }

diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
@@ -224,6 +224,7 @@ module.exports = {
       '@hooks': path.resolve(__dirname, '../src/lib/hooks'),
       '@context': path.resolve(__dirname, '../src/lib/context'),
       '@classes': path.resolve(__dirname, '../src/lib/classes'),
+      '@lib': path.resolve(__dirname, '../src/lib'),
       '@constants': path.resolve(__dirname, '../src/lib/constants')
     },
     plugins: [

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@inrupt/solid-react-components",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "Solid React Components",
   "scripts": {
     "start": "node scripts/start.js",
@@ -23,7 +23,7 @@
     "type": "git",
     "url": "git+https://github.com/Inrupt-inc/solid-react-components"
   },
-  "homepage": "https://solid.inrupt.com/docs",
+  "homepage": "https://solidproject.org",
   "contributors": [
     {
       "name": "Justin Bingham",
@@ -35,35 +35,49 @@
     },
     {
       "name": "Pablo Rodriguez",
-      "email": "pablo.rodriguez@janeirodigital.com"
+      "email": ""
     },
     {
       "name": "Jairo Campos",
-      "email": "jairo.campos@janeirodigital.com"
+      "email": ""
     },
     {
       "name": "Arne Hassel",
       "email": "arneh@inrupt.com"
+    },
+    {
+      "name": "Angel Araya",
+      "email": "angel.araya@janeirodigital.com"
+    },
+    {
+      "name": "Eliamar Agüero",
+      "email": "eliamar.aguero@janeirodigital.com"
     }
   ],
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.1.2",
+    "@inrupt/solid-sdk-forms": "0.1.0",
     "@rdfjs/data-model": "^1.1.1",
     "@shexjs/core": "^1.0.0-alpha.4",
+    "@shexjs/loader": "^1.0.0-alpha.5",
     "@shexjs/parser": "^1.0.0-alpha.4",
-    "@solid/react": "^1.6.0",
+    "@solid/query-ldflex": "^2.6.0",
+    "@solid/react": "^1.8.0",
+    "date-fns": "^2.8.0",
     "file-type": "^10.7.1",
     "html-webpack-include-assets-plugin": "^1.0.6",
     "jsonld": "^1.6.2",
     "ldflex": "^2.4.0",
     "lodash": "^4.17.15",
     "mime-types": "^2.1.24",
-    "moment": "^2.24.0",
     "n3": "^1.1.1",
     "rdflib": "^0.20.1",
+    "react-color": "^2.17.3",
+    "react-datepicker": "^2.9.6",
     "react-router-dom": "^4.3.1",
     "react-select": "^2.2.0",
+    "request-promise": "^4.2.5",
     "solid-auth-client": "^2.3.0",
     "unique": "0.0.1",
     "unique-string": "^1.0.0"
@@ -143,7 +157,7 @@
     "terser-webpack-plugin": "1.1.0",
     "uglify-js": "^3.6.0",
     "url-loader": "1.1.1",
-    "webpack": "4.19.1",
+    "webpack": "^4.41.2",
     "webpack-dev-server": "3.1.14",
     "webpack-manifest-plugin": "2.0.4",
     "workbox-webpack-plugin": "3.6.3"
@@ -200,6 +214,7 @@
       "@contex": "<rootDir>/src/lib/context",
       "@testSetup": "<rootDir>/src/test/setup",
       "@classes": "<rootDir>/src/lib/classes",
+      "@lib": "<rootDir>/src/lib",
       "@constants": "<rootDir>/src/lib/constants",
       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
     },

diff --git a/src/demo/App.js b/src/demo/App.js
@@ -1,10 +1,19 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { useWebId } from '@solid/react';
 import styled from 'styled-components';
+// import { FormModel as FormModelClass } from '@inrupt/solid-sdk-forms';
 import SolidImg from '../assets/solid_logo.png';
-import { ProviderLogin, Uploader, ProfileUploader, useNotification } from '../lib';
+import {
+  ProviderLogin,
+  Uploader,
+  ProfileUploader,
+  useNotification,
+  FormModel,
+  AutoSaveDefaultSpinner,
+  ProfileViewer
+} from '@lib';
 import { AccessControlList } from '@classes';
-import HandleShexForm from './components';
+import { NotificationTypes } from '@constants';
 
 const HeaderWrapper = styled.section`
   margin-top: 60px;
@@ -23,17 +32,6 @@ const Headline = styled.h1`
   font-weight: 300;
 `;
 
-const ShexFormComponent = styled.div`
-    border-top: 1px solid black;
-
-    input {
-      margin: 20px 0;
-      padding: 10px;
-      width: 100%
-      box-sizing: border-box;
-   }
-`;
-
 const NotificationSection = styled.div`
   button {
     &:disabled {
@@ -59,21 +57,46 @@ const Header = () => {
 };
 
 const App = () => {
-  const [userInbox, setUserInbox] = useState(null);
+  const [userWebID, setUserWebID] = useState('');
+
   const webId = useWebId();
-  const { fetchNotification, notification, createNotification, discoverInbox } = useNotification(
+  const { notification, createNotification, discoverInbox, fetchNotification } = useNotification(
     webId
   );
 
-  const onChange = useCallback((event: Event) => {
+  const onWebIDChange = useCallback((event: Event) => {
     const { target } = event;
-    setUserInbox(target.value);
+    setUserWebID(target.value);
   });
 
   const init = async () => {
-    const result = await discoverInbox(webId);
+    /*
+     * This code snippet will fetch notifications of a given inbox, running the full ShEx validation and everything
+     * Comment out if you want to speed up App.js rendering
+     */
+    /*
+    const inboxes = [{ path: 'https://jmartin.inrupt.net/public/games/tictactoe/inbox/', inboxName: 'Global Inbox', shape: 'default' }];
+    await fetchNotification(inboxes);
+    console.log(notification);
+    */
+    /*
+     * This code snippet will run a form model conversion on a given shex shape.
+     * Comment this out if you want to increase App.js performance. To enable, uncomment this
+     * section and also the import statement for FormModelClass
+     */
+    /*
+    const formModel = new FormModelClass(
+      'https://solidsdk.inrupt.net/public/FormLanguage/examples/ShEx/decimal.shex',
+      'https://jmartin.inrupt.net/profile/card#me'
+    );
+    const schema = await formModel.parseSchema(
+      'https://solidsdk.inrupt.net/public/FormLanguage/examples/ShEx/decimal.shex'
+    );
+    const formModelOutput = await formModel.parseShEx(schema);
 
-    fetchNotification([{ path: result, inboxName: 'Global App' }]);
+    // eslint-disable-next-line no-console
+    console.log(formModelOutput, 'model new');
+     */
   };
 
   const createAcl = async () => {
@@ -87,18 +110,98 @@ const App = () => {
     }
   };
 
+  const sendSampleNotification = async () => {
+    try {
+      // Discover the inbox url from the resource, using ldp:inbox predicate
+      const inboxUrl = await discoverInbox(userWebID);
+      // The actor in this case is the current application, so we can use the current URL
+      // Removing actor temporarily until we figure out how to link applications
+      // const actor = window.location.href;
+
+      if (!inboxUrl) {
+        throw new Error('Inbox not found');
+      }
+
+      createNotification(
+        {
+          title: 'Notification Example',
+          summary: 'This is a basic solid notification example.',
+          actor: 'https://solidsdk.inrupt.net/profile/card#me'
+        },
+        inboxUrl,
+        NotificationTypes.ANNOUNCE
+      );
+    } catch (ex) {
+      // eslint-disable-next-line no-console
+      console.log(ex);
+    }
+  };
+
   useEffect(() => {
     if (webId) init();
   }, [notification.notify, webId]);
 
   return (
     <DemoWrapper>
       <Header />
+      <ProfileViewer
+        {...{
+          webId: 'https://jmartin.inrupt.net/profile/card#me',
+          direction: 'down',
+          viewMoreText: 'See Profile',
+          onError: error => {
+            // eslint-disable-next-line no-console
+            console.log('ERROR', error.statusText);
+          },
+          onClick: false
+        }}
+      >
+        <span>James</span>
+      </ProfileViewer>
+
+      <br />
       <button type="button" onClick={createAcl}>
         Create ACL
       </button>
       <p>{JSON.stringify(notification && notification.notifications)}</p>
       <ProviderLogin callbackUri={`${window.location.origin}/`} />
+      <FormModel
+        {...{
+          modelPath: 'https://khoward.dev.inrupt.net/public/FormModel/datetime.ttl#formRoot',
+          podPath: 'https://jmartin.inrupt.net/profile/card#me',
+          settings: {
+            theme: {
+              inputText: 'sdk-input',
+              inputCheckbox: 'sdk-checkbox checkbox',
+              inputTextArea: 'sdk-textarea'
+            },
+            savingComponent: AutoSaveDefaultSpinner
+          },
+          viewer: false,
+          onError: error => {
+            // eslint-disable-next-line no-console
+            console.log(error, 'error');
+          },
+          onSuccess: success => {
+            // eslint-disable-next-line no-console
+            console.log(success);
+          },
+          onSave: response => {
+            // eslint-disable-next-line no-console
+            console.log(response);
+          },
+          onAddNewField: response => {
+            // eslint-disable-next-line no-console
+            console.log(response);
+          },
+          onDelete: response => {
+            // eslint-disable-next-line no-console
+            console.log(response);
+          }
+        }}
+        autoSave
+        liveUpdate
+      />
       <Uploader
         {...{
           fileBase: 'Your POD folder here',
@@ -116,34 +219,16 @@ const App = () => {
           render: props => <ProfileUploader {...{ ...props }} />
         }}
       />
-      {webId && (
-        <ShexFormComponent>
-          <HandleShexForm {...{ webId }} />
-        </ShexFormComponent>
-      )}
       <NotificationSection>
-        <h3>Create notification example using your inbox</h3>
+        <h3>Create notification example using a WebID or Resource path</h3>
         <input
           type="text"
-          placeholder="Inbox Path"
-          name="userInbox"
-          defaultValue=""
-          onChange={onChange}
-          value={userInbox}
+          placeholder="WebID or Resource"
+          name="userWebID"
+          onChange={onWebIDChange}
+          value={userWebID}
         />
-        <button
-          type="button"
-          disabled={!userInbox}
-          onClick={() =>
-            createNotification(
-              {
-                title: 'Notification Example',
-                summary: 'This is a basic solid notification example.'
-              },
-              userInbox
-            )
-          }
-        >
+        <button type="button" disabled={!userWebID} onClick={sendSampleNotification}>
           Create notification
         </button>
       </NotificationSection>