Merge pull request #218 from inrupt/release/0.5.1

Release/0.5.1
inrupt · Apr 16, 2020 · 8f744bb · 8f744bb
2 parents 29890e6 + f0e6118
commit 8f744bb
Show file tree

Hide file tree

Showing 119 changed files with 5,026 additions and 2,617 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,40 @@
 # Solid React Components Library
 
+## 0.5.1 ( April 16, 2020 )
+
+### Added
+- The Form Model now has the ability to be displayed in read-only mode
+- Read-only (or "View") version of each component
+
+### Updated
+- Form Model components were refactored:
+  - Props passed into form components have been simplified and streamlined
+  - Internal form componentry has been improved
+  - Increased test coverage of internal form components
+  - Added View mode, and View versions of form components
+  - Added i18n support for form model components via new language prop
+- Notifications are now fetched by relative path instead of assuming they are all .ttl files
+- Code comments updated and improved throughout the codebase
+- Upgraded react-router-dom to the latest version
+- Created an ACLFactory for the access-control-list class, which initializes the ACL link dynamically from the headers instead of assuming a file location
+- ShEx validation of a list of files was updated to more efficiently fetch files, and now returns an array of valid quads instead of a list of IRIs 
+
+### Fixed
+- Provider dropdown list will no longer pop up a keyboard on mobile devices
+- Classifier component now properly uses the `ui:category` predicate instead of `ui:from`
+- Form model component default values are now properly set, instead of defaulting to null or undefined
+- Checkbox form component bug fixed where the checkbox was always initializing empty
+- Error handling improved and fixed for the form model rendering process
+- Date/Time picker component regular expression used for formatting time was updated, fixing a bug where times were not displayed
+- Date/Time picker component bug fixed where min/max values were not working
+- Fixed a bug in the File Uploader where it was generating CORS errors in some circumstances
+- Fixed an issue where the autosave spinner wasn't displaying
+
+
+
+
+
+
 ## 0.5.0 ( December 18, 2019 )
 
 ### Added

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 ## Solid React Components Library
 
-React components for building your own [Solid](https://solid.inrupt.com/") applications. Part of the [React SDK for Solid](https://github.com/inrupt-inc/solid-react-sdk).
+React components for building your own [Solid](https://solid.inrupt.com/) applications. Part of the [React SDK for Solid](https://github.com/inrupt-inc/solid-react-sdk).
 
 ## Dependencies
 

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.5.0",
+  "version": "0.5.1",
   "description": "Solid React Components",
   "scripts": {
     "start": "node scripts/start.js",
@@ -57,9 +57,9 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "@inrupt/solid-sdk-forms": "0.1.0",
+    "@inrupt/solid-sdk-forms": "0.1.1",
     "@rdfjs/data-model": "^1.1.1",
-    "@shexjs/core": "^1.0.0-alpha.4",
+    "@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",
@@ -72,10 +72,10 @@
     "lodash": "^4.17.15",
     "mime-types": "^2.1.24",
     "n3": "^1.1.1",
-    "rdflib": "^0.20.1",
+    "parse-link-header": "^1.0.1",
     "react-color": "^2.17.3",
     "react-datepicker": "^2.9.6",
-    "react-router-dom": "^4.3.1",
+    "react-router-dom": "^5.1.2",
     "react-select": "^2.2.0",
     "request-promise": "^4.2.5",
     "solid-auth-client": "^2.3.0",
@@ -93,6 +93,9 @@
     "@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/react-hooks": "^3.2.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
     "babel-jest": "^24.8.0",
@@ -103,7 +106,7 @@
     "bfj": "6.1.1",
     "case-sensitive-paths-webpack-plugin": "2.1.2",
     "chalk": "2.4.1",
-    "copy-webpack-plugin": "^4.6.0",
+    "copy-webpack-plugin": "^5.1.1",
     "css-loader": "1.0.0",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
@@ -146,15 +149,14 @@
     "react-hooks-testing-library": "^0.5.0",
     "react-json-view": "^1.19.1",
     "react-test-renderer": "^16.8.6",
-    "react-testing-library": "^6.0.0",
     "resolve": "1.10.0",
     "sass-loader": "7.1.0",
     "storybook-addon-jsx": "^7.1.0",
     "storybook-react-router": "^1.0.5",
     "storybook-readme": "^5.0.3",
     "style-loader": "0.23.0",
     "styled-components": "^4.1.3",
-    "terser-webpack-plugin": "1.1.0",
+    "terser-webpack-plugin": "^2.3.5",
     "uglify-js": "^3.6.0",
     "url-loader": "1.1.1",
     "webpack": "^4.41.2",

diff --git a/src/demo/App.js b/src/demo/App.js
@@ -9,10 +9,10 @@ import {
   ProfileUploader,
   useNotification,
   FormModel,
-  AutoSaveDefaultSpinner,
+  Spinner,
   ProfileViewer
 } from '@lib';
-import { AccessControlList } from '@classes';
+import { AccessControlList, ACLFactory } from '@classes';
 import { NotificationTypes } from '@constants';
 
 const HeaderWrapper = styled.section`
@@ -105,7 +105,7 @@ const App = () => {
       const documentURI = `${uri.origin}/public/container`;
       const { MODES } = AccessControlList;
       const permissions = [{ modes: [MODES.CONTROL], agents: [webId] }];
-      const aclInstance = new AccessControlList(webId, documentURI);
+      const aclInstance = await ACLFactory.createNewAcl(webId, documentURI);
       await aclInstance.createACL(permissions);
     }
   };
@@ -144,20 +144,22 @@ const App = () => {
   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>
+      {webId && (
+        <ProfileViewer
+          {...{
+            webId,
+            direction: 'down',
+            viewMoreText: 'See Profile',
+            onError: error => {
+              // eslint-disable-next-line no-console
+              console.log('ERROR', error.statusText);
+            },
+            onClick: false
+          }}
+        >
+          <span>Hover over me!</span>
+        </ProfileViewer>
+      )}
 
       <br />
       <button type="button" onClick={createAcl}>
@@ -167,17 +169,22 @@ const App = () => {
       <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: {
+          modelSource: 'https://jmartin.inrupt.net/public/formmodel/float.ttl#formRoot',
+          dataSource: 'https://jmartin.inrupt.net/profile/card#me',
+          options: {
             theme: {
               inputText: 'sdk-input',
               inputCheckbox: 'sdk-checkbox checkbox',
-              inputTextArea: 'sdk-textarea'
+              inputTextArea: 'sdk-textarea',
+              multiple: 'sdk-multiple-button',
+              form: 'inrupt-sdk-form',
+              childGroup: 'inrupt-form-group'
             },
-            savingComponent: AutoSaveDefaultSpinner
+            autosaveIndicator: Spinner,
+            autosave: true,
+            viewer: false,
+            language: 'en'
           },
-          viewer: false,
           onError: error => {
             // eslint-disable-next-line no-console
             console.log(error, 'error');
@@ -199,7 +206,6 @@ const App = () => {
             console.log(response);
           }
         }}
-        autoSave
         liveUpdate
       />
       <Uploader

diff --git a/src/lib/classes/access-control-factory.js b/src/lib/classes/access-control-factory.js
@@ -0,0 +1,25 @@
+import solid from 'solid-auth-client';
+import * as parse from 'parse-link-header';
+import AccessControlList from './access-control-list';
+
+/**
+ * This factory will create and return a new ACL object while also fetching the Link
+ * Header and returning the acl file location
+ */
+export default class ACLFactory {
+  static createNewAcl = async (owner, documentUri) => {
+    const aclUrl = await this.getAclUriFromHeader(documentUri);
+    const aclUrlValidated = new URL(aclUrl, documentUri).href;
+    return new AccessControlList(owner, documentUri, aclUrlValidated);
+  };
+
+  static getAclUriFromHeader = async documentUri => {
+    try {
+      const response = await solid.fetch(documentUri, { method: 'HEAD' });
+      const parsedLinks = parse(response.headers.get('Link'));
+      return parsedLinks.acl ? parsedLinks.acl.url : '';
+    } catch (error) {
+      throw error;
+    }
+  };
+}
diff --git a/src/lib/classes/access-control-list.js b/src/lib/classes/access-control-list.js
@@ -12,10 +12,10 @@ type Permissions = {
 };
 
 export default class AccessControlList {
-  constructor(owner, documentUri) {
+  constructor(owner, documentUri, aclUrl) {
     this.owner = owner;
     this.documentUri = documentUri;
-    this.aclUri = `${this.documentUri}.acl`;
+    this.aclUri = aclUrl;
     this.acl = null;
   }
 

diff --git a/src/lib/classes/access-control-list.test.js b/src/lib/classes/access-control-list.test.js
@@ -3,6 +3,7 @@ import ldflex from '../../test/__mocks__/@solid/query-ldflex';
 
 const webIdExample = 'https://example.org/#me';
 const fileExample = 'https://example.org/public/test.ttl';
+const aclExample = 'https://example.org/public/test.ttl.acl';
 
 describe('Access Control List test', () => {
   beforeAll(() => {
@@ -16,7 +17,7 @@ describe('Access Control List test', () => {
     CONTROL: 'Control'
   };
 
-  const ACLInstance = new AccessControlList(webIdExample, fileExample);
+  const ACLInstance = new AccessControlList(webIdExample, fileExample, aclExample);
 
   it('Modes are correct', async () => {
     expect(AccessControlList.MODES).toEqual(PERMISSIONS);

diff --git a/src/lib/classes/index.js b/src/lib/classes/index.js
@@ -1,5 +1,6 @@
 import { Notification } from './notification';
 import AccessControlList from './access-control-list';
+import ACLFactory from './access-control-factory';
 import AppPermission from './app-permissions';
 
-export { Notification, AccessControlList, AppPermission };
+export { Notification, AccessControlList, ACLFactory, AppPermission };