inrupt · ajacksified · Jun 2, 2020 · Apr 16, 2020 · Apr 29, 2020 · Apr 29, 2020
diff --git a/.gitignore b/.gitignore
@@ -13,14 +13,14 @@
 
 # misc
 .DS_Store
-.idea
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
 # editors
 .idea
+*.iml
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v12.7.0
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,20 +57,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.1.2",
+    "@inrupt/lit-generated-vocab-common": "^0.3.9",
+    "@inrupt/lit-generated-vocab-inrupt-common": "^0.3.9",
+    "@inrupt/lit-generated-vocab-solid-common": "^0.3.9",
     "@inrupt/solid-sdk-forms": "0.1.1",
     "@rdfjs/data-model": "^1.1.1",
     "@shexjs/core": "^1.0.0-alpha.9",
     "@shexjs/loader": "^1.0.0-alpha.5",
     "@shexjs/parser": "^1.0.0-alpha.4",
     "@solid/query-ldflex": "^2.6.0",
     "@solid/react": "^1.10.0",
-    "date-fns": "^2.8.0",
+    "date-fns": "^2.14.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",
+    "mime-types": "^2.1.27",
     "n3": "^1.1.1",
     "parse-link-header": "^1.0.1",
     "react-color": "^2.17.3",
@@ -93,8 +96,8 @@
     "@storybook/addons": "^5.0.5",
     "@storybook/react": "^5.0.11",
     "@svgr/webpack": "2.4.1",
-    "@testing-library/jest-dom": "^5.1.1",
-    "@testing-library/react": "^10.0.1",
+    "@testing-library/jest-dom": "^5.9.0",
+    "@testing-library/react": "^10.0.5",
     "@testing-library/react-hooks": "^3.2.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
@@ -114,8 +117,8 @@
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^4.3.0",
     "eslint-config-react-app": "^3.0.5",
-    "eslint-import-resolver-babel-module": "^5.1.0",
-    "eslint-import-resolver-webpack": "^0.11.1",
+    "eslint-import-resolver-babel-module": "^5.1.2",
+    "eslint-import-resolver-webpack": "^0.12.1",
     "eslint-loader": "2.1.1",
     "eslint-plugin-flowtype": "2.50.1",
     "eslint-plugin-import": "^2.14.0",
@@ -160,7 +163,7 @@
     "uglify-js": "^3.6.0",
     "url-loader": "1.1.1",
     "webpack": "^4.41.2",
-    "webpack-dev-server": "3.1.14",
+    "webpack-dev-server": "^3.11.0",
     "webpack-manifest-plugin": "2.0.4",
     "workbox-webpack-plugin": "3.6.3"
   },

diff --git a/src/demo/App.js b/src/demo/App.js
@@ -2,6 +2,7 @@ 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 { AS } from '@inrupt/lit-generated-vocab-common';
 import SolidImg from '../assets/solid_logo.png';
 import {
   ProviderLogin,
@@ -13,7 +14,6 @@ import {
   ProfileViewer
 } from '@lib';
 import { AccessControlList, ACLFactory } from '@classes';
-import { NotificationTypes } from '@constants';
 
 const HeaderWrapper = styled.section`
   margin-top: 60px;
@@ -129,7 +129,7 @@ const App = () => {
           actor: 'https://solidsdk.inrupt.net/profile/card#me'
         },
         inboxUrl,
-        NotificationTypes.ANNOUNCE
+        AS.Announce.iriAsString
       );
     } catch (ex) {
       // eslint-disable-next-line no-console

diff --git a/src/lib/classes/access-control-list.js b/src/lib/classes/access-control-list.js
@@ -3,8 +3,10 @@ import solid from 'solid-auth-client';
 import * as N3 from 'n3';
 import { isEqual } from 'lodash';
 import ldflex from '@solid/query-ldflex';
+import { FOAF, RDF, VCARD } from '@inrupt/lit-generated-vocab-common';
+import { ACL } from '@inrupt/lit-generated-vocab-solid-common';
 import { SolidError } from '@utils';
-import { PERMISSIONS, ACL_PREFIXES } from '@constants';
+import { PERMISSIONS } from '@constants';
 
 type Permissions = {
   agents: null | String | Array,
@@ -45,30 +47,29 @@ export default class AccessControlList {
    * @param {Array<String> | null} agents Array of webId or null if for everyone
    */
   createQuadList = (modes: Array<String>, agents: Array<String> | null) => {
-    const { acl, foaf, rdf } = ACL_PREFIXES;
     const subject = `${this.aclUri}#${modes.join('')}`;
     const { documentUri } = this;
     const originalPredicates = [
-      this.createQuad(subject, `${rdf}type`, namedNode(`${acl}Authorization`)),
-      this.createQuad(subject, `${acl}accessTo`, namedNode(documentUri)),
-      this.createQuad(subject, `${acl}default`, namedNode(documentUri))
+      this.createQuad(subject, RDF.type.iriAsString, ACL.Authorization),
+      this.createQuad(subject, ACL.accessTo.iriAsString, namedNode(documentUri)),
+      this.createQuad(subject, ACL.default_.iriAsString, namedNode(documentUri))
     ];
     let predicates = [];
     if (agents) {
       const agentsArray = Array.isArray(agents) ? agents : [agents];
       const agentsQuads = agentsArray.map(agent =>
-        this.createQuad(subject, `${acl}agent`, namedNode(agent))
+        this.createQuad(subject, ACL.agent.iriAsString, namedNode(agent))
       );
       predicates = [...originalPredicates, ...agentsQuads];
     } else {
-      const publicQuad = this.createQuad(subject, `${acl}agentClass`, namedNode(`${foaf}Agent`));
+      const publicQuad = this.createQuad(subject, ACL.agentClass.iriAsString, FOAF.Agent);
       predicates = [...originalPredicates, publicQuad];
     }
 
     const quadList = modes.reduce(
       (array, mode) => [
         ...array,
-        this.createQuad(subject, `${acl}mode`, namedNode(`${acl}${mode}`))
+        this.createQuad(subject, ACL.mode.iriAsString, namedNode(`${ACL.NAMESPACE}${mode}`))
       ],
       predicates
     );
@@ -83,7 +84,16 @@ export default class AccessControlList {
    */
   createPermissionsTurtle = (permissions: Array<Permissions>) => {
     const { DataFactory } = N3;
-    const prefixes = { ...ACL_PREFIXES, '': `${this.aclUri}#`, me: this.owner };
+
+    const prefixes = {
+      ...ACL.PREFIX_AND_NAMESPACE,
+      ...FOAF.PREFIX_AND_NAMESPACE,
+      ...RDF.PREFIX_AND_NAMESPACE,
+      ...VCARD.PREFIX_AND_NAMESPACE,
+      '': `${this.aclUri}#`,
+      me: this.owner
+    };
+
     const { namedNode, quad } = DataFactory;
     const writer = new N3.Writer({ prefixes });
     const quadPermissions = permissions.map(({ modes, agents }) =>
@@ -185,10 +195,10 @@ export default class AccessControlList {
     for await (const subject of document.subjects) {
       let agents = [];
       let modes = [];
-      for await (const agent of subject['acl:agent']) {
+      for await (const agent of subject[ACL.agent]) {
         agents = [...agents, agent.value];
       }
-      for await (const mode of subject['acl:mode']) {
+      for await (const mode of subject[ACL.mode]) {
         const modeName = mode.value ? mode.value.split('#')[1] : '';
         modes = [...modes, modeName];
       }
@@ -243,9 +253,8 @@ export default class AccessControlList {
    */
   createMode = async ({ modes, agents }) => {
     try {
-      const { acl, foaf } = ACL_PREFIXES;
       const subject = `${this.aclUri}#${modes.join('')}`;
-      await ldflex[subject].type.add(namedNode(`${acl}Authorization`));
+      await ldflex[subject].type.add(ACL.Authorization);
       const path = namedNode(this.documentUri);
       await ldflex[subject]['acl:accessTo'].add(path);
       await ldflex[subject]['acl:default'].add(path);
@@ -255,11 +264,11 @@ export default class AccessControlList {
           await ldflex[subject]['acl:agent'].add(namedNode(agent));
         }
       } else {
-        await ldflex[subject]['acl:agentClass'].add(namedNode(`${foaf}Agent`));
+        await ldflex[subject]['acl:agentClass'].add(FOAF.Agent);
       }
 
       for await (const mode of modes) {
-        await ldflex[subject]['acl:mode'].add(namedNode(`${acl}${mode}`));
+        await ldflex[subject]['acl:mode'].add(namedNode(`${ACL.NAMESPACE}${mode}`));
       }
       return { modes, agents };
     } catch (e) {

diff --git a/src/lib/classes/notification.js b/src/lib/classes/notification.js
@@ -1,11 +1,11 @@
 import solid from 'solid-auth-client';
 import * as N3 from 'n3';
 import data from '@solid/query-ldflex';
+import { AS } from '@inrupt/lit-generated-vocab-common';
 import { solidResponse, SolidError, shexUtil, getBasicPod } from '@utils';
 import defaultShape from '../shapes/notification.json';
 import AccessControlList from './access-control-list';
 import ACLFactory from './access-control-factory';
-import { NotificationTypes } from '@constants';
 import { ensureSlash } from '../utils/solidFetch';
 
 const PREFIXES = {
@@ -239,7 +239,7 @@ export class Notification {
       const licenseType = 'http://schema.org/license';
 
       // If a type has not been set, default to Announce type
-      const notificationType = type || NotificationTypes.ANNOUNCE;
+      const notificationType = type || AS.Announce.iriAsString;
 
       // If a license has not been set, default to the CC license
       const licenseLink = license || 'https://creativecommons.org/licenses/by-sa/4.0/';
@@ -461,7 +461,7 @@ export class Notification {
          * Validate the list of notification IRIs and return a list of valid ones
          */
         const coreNotificationShape =
-          'https://shexshapes.inrupt.net/public/notifications/app-notification.shex';
+          'https://shexshapes.inrupt.net/public/notifications/core-notification.shex';
         const validNotifications = await shexUtil.validateList(
           notificationPaths,
           coreNotificationShape

diff --git a/src/lib/components/FormModel/children/Form/UI/CheckBox/check-box.component.js b/src/lib/components/FormModel/children/Form/UI/CheckBox/check-box.component.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useContext } from 'react';
+import { UI } from '@inrupt/lit-generated-vocab-common';
 import { ThemeContext } from '@context';
-import { UI } from '@constants';
 import { InputGroup } from '../Input/input.styles';
 
 type Props = {
@@ -17,7 +17,7 @@ export const CheckBox = (props: Props) => {
 
   useEffect(() => {
     try {
-      const podValue = data[UI.VALUE];
+      const podValue = data[UI.value];
       if (!podValue || podValue === 'false') {
         setChecked(false);
       } else {
@@ -26,9 +26,9 @@ export const CheckBox = (props: Props) => {
     } catch (e) {
       setChecked(false);
     }
-  }, [data[UI.VALUE]]);
+  }, [data[UI.value]]);
 
-  const { [UI.LABEL]: label } = data;
+  const { [UI.label]: label } = data;
 
   const onChange = event => {
     const updatedPart = { ...data, value: String(event.target.checked) };

diff --git a/src/lib/components/FormModel/children/Form/UI/CheckBox/check-box.test.js b/src/lib/components/FormModel/children/Form/UI/CheckBox/check-box.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import { getByText, getByLabelText } from '@testing-library/dom';
+import { UI } from '@inrupt/lit-generated-vocab-common';
 import { CheckBox } from './check-box.component';
-import { UI } from '@constants';
 import 'jest-dom/extend-expect';
 
 afterAll(cleanup);
@@ -15,25 +15,25 @@ test('Renders without crashing', () => {
 
 test('Renders the label', () => {
   const data = {
-    [UI.LABEL]: 'check'
+    [UI.label]: 'check'
   };
   const { container } = render(<CheckBox data={data} />);
   expect(getByText(container, 'check')).toBeTruthy();
 });
 
 test('Renders a checked box', () => {
   const data = {
-    [UI.LABEL]: 'checklabel',
-    [UI.VALUE]: 'true'
+    [UI.label]: 'checklabel',
+    [UI.value]: 'true'
   };
   const { container } = render(<CheckBox id="testid" data={data} />);
   expect(getByLabelText(container, 'checklabel').checked).toBeTruthy();
 });
 
 test('Renders an unchecked box', () => {
   const data = {
-    [UI.LABEL]: 'checklabel',
-    [UI.VALUE]: 'false'
+    [UI.label]: 'checklabel',
+    [UI.value]: 'false'
   };
   const { container } = render(<CheckBox id="testid" data={data} />);
   expect(getByLabelText(container, 'checklabel').checked).toBeFalsy();

diff --git a/src/lib/components/FormModel/children/Form/UI/Classifier/classifier.component.js b/src/lib/components/FormModel/children/Form/UI/Classifier/classifier.component.js
@@ -1,19 +1,19 @@
 import React, { useState, useEffect, useCallback, useContext } from 'react';
 import { n3Helper } from '@inrupt/solid-sdk-forms';
 import unique from 'unique';
-import { SelectWrapper } from './classifier.style';
+import { UI } from '@inrupt/lit-generated-vocab-common';
 import { ThemeContext } from '@context';
-import { UI } from '@constants';
+import { SelectWrapper } from './classifier.style';
 
 export const Classifier = props => {
   const { id, data, updateData } = props;
   const { theme } = useContext(ThemeContext);
 
   const {
-    [UI.LABEL]: label,
-    [UI.VALUE]: initialValue,
-    [UI.CATEGORY]: category,
-    [UI.VALUES]: values
+    [UI.label]: label,
+    [UI.value]: initialValue,
+    [UI.category]: category,
+    [UI.values]: values
   } = data;
 
   const [options, setOptions] = useState([]);

diff --git a/src/lib/components/FormModel/children/Form/UI/ColorPicker/color-picker.component.js b/src/lib/components/FormModel/children/Form/UI/ColorPicker/color-picker.component.js
@@ -1,7 +1,6 @@
 import React, { useEffect, useContext, useState } from 'react';
 import { ChromePicker } from 'react-color';
-
-import { UI } from '@constants';
+import { UI } from '@inrupt/lit-generated-vocab-common';
 import { ThemeContext } from '@context';
 
 import { PickerGroup, ColorSwatch, Cover, Popover } from './color-picker.styles';
@@ -16,7 +15,7 @@ const ColorPicker = (props: Props) => {
   const { id, data, updateData } = props;
   const { theme } = useContext(ThemeContext);
 
-  const { [UI.LABEL]: label, [UI.VALUE]: initialValue } = data;
+  const { [UI.label]: label, [UI.value]: initialValue } = data;
 
   const [pickerVisible, setPickerVisible] = useState(false);
   const [color, setColor] = useState(initialValue);

diff --git a/src/lib/components/FormModel/children/Form/UI/ColorPicker/color-picker.test.js b/src/lib/components/FormModel/children/Form/UI/ColorPicker/color-picker.test.js
@@ -2,8 +2,8 @@ import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import { getByText } from '@testing-library/dom';
 import ColorPicker from './color-picker.component';
-import { UI } from '@constants';
 import 'jest-dom/extend-expect';
+import { UI } from '@inrupt/lit-generated-vocab-common';
 
 afterAll(cleanup);
 
@@ -15,16 +15,16 @@ test('Renders without crashing', () => {
 
 test('Renders the label', () => {
   const data = {
-    [UI.LABEL]: 'choose color'
+    [UI.label]: 'choose color'
   };
   const { container } = render(<ColorPicker data={data} />);
   expect(getByText(container, 'choose color')).toBeTruthy();
 });
 
 test('Renders the color in text', () => {
   const data = {
-    [UI.LABEL]: 'choose color',
-    [UI.VALUE]: '#aabbcc'
+    [UI.label]: 'choose color',
+    [UI.value]: '#aabbcc'
   };
   const { container } = render(<ColorPicker data={data} />);
   expect(getByText(container, '#aabbcc')).toBeTruthy();

diff --git a/src/lib/components/FormModel/children/Form/UI/Comment/comment.component.js b/src/lib/components/FormModel/children/Form/UI/Comment/comment.component.js
@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
-
-import { UI } from '@constants';
+import { UI } from '@inrupt/lit-generated-vocab-common';
 import { ThemeContext } from '@context';
 
 type Props = {
@@ -9,7 +8,7 @@ type Props = {
 
 export const Comment = (props: Props) => {
   const { data } = props;
-  const { [UI.CONTENTS]: comment } = data;
+  const { [UI.contents]: comment } = data;
 
   const { theme } = useContext(ThemeContext);