Merge pull request #401 from solid/timbl-forms

Timbl forms. Decided to leave Storyboard to another time.  Addresses other comments I think, including basic tests.   Thanks for all the reviews.

Author: timbl

Documentation/forms-intro.html

@@ -545,6 +545,48 @@ <h4 class="class">Options</h4>
       </tr>
     </table>
 
+    <h4 class="class" id="Autocomplete">Autocomplete</h4>
+
+    <p>The autocomplete field alllows the user to select one
+      out of a large number of existing choices, by typing enough of its
+      name to be unambiguous.
+    </p>
+
+  <p>The field stores two triples,one of the given <tt>property</tt> linking to the
+  object the user has selcted, and the other stoting the name of that object,
+  as seen in the completed feld, using the <tt>labelProperty</tt>.
+  </p>
+
+  <p>The field must specify a <tt>dataSource</tt> which gives the paramters
+    and form of the query make over the net.
+  </p>
+
+  <table class="properties">
+
+    <tr>
+      <td>labelProperty</td>
+      <td>String</td>
+      <td>The property which will be used to store the name of the selected thing as a separate triple</td>
+    </tr>
+
+    <tr>
+      <td>dataSource</td>
+
+      <td>DataSource</td>
+
+      <td>The API details or query endpint and query details to be usde to search of the itemn in
+        the databasse.</td>
+    </tr>
+    <tr>
+      <td>targetClass</td>
+      <td>rdfs:Class</td>
+      <td>Is tyhis is specified, it be used to replace any occuurences of
+         "$(targetClass)" in the query template.  this allows different instances
+         of AutocompleteField to share the same DatSource, by specifying different values for <tt>targetClass</tt>.</td>
+    </tr>
+
+  </table>
+
     <h3>Documentation fields</h3>
 
     <h4 class="class">Heading</h4>

package-lock.json

@@ -53,7 +53,7 @@
   },
   "homepage": "https://github.com/solid/solid-ui",
   "dependencies": {
-    "@babel/runtime": "^7.12.5",
+    "@babel/runtime": "^7.14.0",
     "crypto-browserify": "^3.12.0",
     "escape-html": "^1.0.3",
     "jss": "^10.5.1",
@@ -82,18 +82,22 @@
     "@storybook/addon-essentials": "^6.1.20",
     "@storybook/addon-links": "^6.1.15",
     "@storybook/html": "^6.1.20",
+    "@testing-library/dom": "^7.31.0",
     "@types/jest": "^26.0.20",
     "@types/jsdom": "^16.2.6",
     "@types/node": "^14.14.22",
     "@typescript-eslint/eslint-plugin": "^4.14.1",
     "@typescript-eslint/parser": "^4.14.1",
+    "autoprefixer": "^10.2.6",
     "babel-loader": "^8.2.2",
     "eslint": "^7.18.0",
     "eslint-plugin-jest": "^24.1.3",
     "husky": "^4.3.8",
     "jest": "^26.6.3",
     "jsdom": "^16.4.0",
     "lint-staged": "^10.5.3",
+    "nock": "^13.0.11",
+    "postcss-flexbugs-fixes": "^5.0.2",
     "raw-loader": "^4.0.2",
     "react-is": "^17.0.1",
     "solid-auth-cli": "^1.0.15",

package.json

@@ -233,7 +233,6 @@ export class AccessController {
     const updater = newAClGraph.updater || new UpdateManager(newAClGraph)
 
     // save ACL resource
-
     return new Promise((resolve, reject) => {
       // check acl for acl:Write alert and acl:Control confirm
       const hasWrite = newAClGraph.any(undefined, ns.acl('mode'), ns.acl('Write'), this.targetACLDoc)

src/acl/access-controller.ts

@@ -25,7 +25,6 @@ If you would like to know more about the solid Solid project, please see
 https://github.com/solid/solid
 */
 'use strict'
-/* eslint-disable no-console */
 /**
  * Provides a Solid client helper object (which exposes various static modules).
  * @module solidUi.js
@@ -108,7 +107,6 @@ if (typeof window !== 'undefined') {
     initHeader
   } // Simpler access by non-node scripts
 }
-console.log('widgets imported to UI:', widgets)
 
 export {
   ns,

src/index.ts

@@ -5,18 +5,24 @@
 // These must all end with semicolon so they can be appended to.
 
 const formBorderColor = '#888888' // Mid-grey
+const lowProfileLinkColor = '#3B5998' // Grey-blue, e.g., for field labels linking to ontology
+const formFieldNameBoxWidth = '8em' // The fixed amount to get form fields to line up
+// The latter we put in when switching awy from using tables.  Getting allignment between
+// fields in different groups though is hard problem.
 
 export const style = { // styleModule
+  formSelectSTyle:
+    'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.2em;',
   textInputStyle:
-    'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.2em; ',
+    'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.2em;',
   textInputStyleUneditable: // Color difference only
     'background-color: white; padding: 0.5em;  border: .05em solid white;  border-radius:0.2em; font-size: 100%; margin:0.2em; ',
   textInputSize: 20, // Default text input size in characters roughly
   buttonStyle:
       'background-color: #fff; padding: 0.7em;  border: .01em solid white;  border-radius:0.2em; font-size: 100%; margin: 0.3em;', // 'background-color: #eef;
   commentStyle: 'padding: 0.7em;  border: none; font-size: 100%; white-space: pre-wrap;',
   iconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 1em;',
-  classIconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 0; border: 0.1em solid green; padding: 0.2em; background-color: #efe;', // combine with buttonStyle
+  classIconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 0.2em; border: 0.1em solid green; padding: 0.2em; background-color: #efe;', // combine with buttonStyle
   tabBorderRadius: '0.2em',
   messageBodyStyle:
     'white-space: pre-wrap; width: 99%; font-size:100%; border: 0.07em solid #eee; border-radius:0.2em; padding: .3em 0.5em; margin: 0.1em;',
@@ -25,28 +31,38 @@ export const style = { // styleModule
 
   // Contacts
   personaBarStyle: 'width: 100%; height: 4em; background-color: #eee; vertical-align: middle;',
-  searchInputStyle: 'border: 0.1em solid #444; border-radius: 0.5em; width: 100%; font-size: 100%; padding: 0.1em 0.6em; margin 0.2em;',
+  searchInputStyle: 'border: 0.1em solid #444; border-radius: 0.2em; width: 100%; font-size: 100%; padding: 0.1em 0.6em; margin 0.2em;',
   autocompleteRowStyle: 'border: 0.2em solid straw;',
 
   // Login buttons
   signInButtonStyle: 'padding: 1em; border-radius:0.2em; margin: 2em; font-size: 100%;', // was 0.5em radius
 
   // Forms
-  heading1Style: 'font-size: 180%; font-weight: bold; color: #888888; padding: 0.5em; margin: 0.2em 0.7em;', // originally was brown; now grey
-  heading2Style: 'font-size: 130%; font-weight: bold; color: #888888; padding: 0.4em; margin: 0.2em 0.7em;', // originally was brown; now grey
-  heading3Style: 'font-size: 120%; font-weight: bold; color: #888888; padding: 0.3em; margin: 0.2em 0.7em;', // For example, in large forms or before a small form
-  heading4Style: 'font-size: 110%; font-weight: bold; color: #888888; padding: 0.2em; margin: 0.2em 0.7em;', // Lowest level used by default in small things
+  heading1Style: 'font-size: 180%; font-weight: bold; color: #888888; padding: 0.5em; margin: 0.7em 0.0m;', // originally was brown; now grey
+  heading2Style: 'font-size: 130%; font-weight: bold; color: #888888; padding: 0.4em; margin: 0.7em 0.0em;', // originally was brown; now grey
+  heading3Style: 'font-size: 120%; font-weight: bold; color: #888888; padding: 0.3em; margin: 0.7em 0.0em;', // For example, in large forms or before a small form
+  heading4Style: 'font-size: 110%; font-weight: bold; color: #888888; padding: 0.2em; margin: 0.7em 0.0em;', // Lowest level used by default in small things
 
   formBorderColor: formBorderColor, // originally was brown; now grey
   formHeadingColor: '#888888', // originally was brown; now grey
-  formHeadingStyle: 'font-size: 110%; font-weight: bold; color: #888888; padding: 0.2em;  margin: 0.2em 0.7em;', // originally was brown; now grey
+  formHeadingStyle: 'font-size: 110%; font-weight: bold; color: #888888; padding: 0.2em;  margin: 0.7em 0.0em;', // originally was brown; now grey
   formTextInput: 'font-size: 100%; margin: 0.1em; padding: 0.1em;', // originally used this
-  formGroupStyle: `padding-left: 2em; border: 0.05em solid ${formBorderColor};`,
+  formGroupStyle: [`padding-left: 0em; border: 0.0em solid ${formBorderColor}; border-radius: 0.2em;`, // weight 0
+    `padding-left: 2em; border: 0.05em solid ${formBorderColor}; border-radius: 0.2em;`,
+    `padding-left: 2em; border: 0.1em solid ${formBorderColor}; border-radius: 0.2em;`,
+    `padding-left: 2em; border: 0.2em solid ${formBorderColor}; border-radius: 0.2em;` // @@ pink
+  ],
 
+  formFieldLabelStyle: `'color: ${lowProfileLinkColor}; text-decoration: none;'`,
+  formFieldNameBoxWidth: formFieldNameBoxWidth,
+  formFieldNameBoxStyle: `padding: 0.3em; vertical-align: middle; width:${formFieldNameBoxWidth};`,
   textInputBackgroundColor: '#eef',
   textInputBackgroundColorUneditable: '#fff',
+  textInputColor: '#000',
+  textInputColorPending: '#888',
   multilineTextInputStyle: 'font-size:100%; white-space: pre-wrap; background-color: #eef;' +
   ' border: 0.07em solid gray; padding: 1em 0.5em; margin: 1em 1em;',
+
   checkboxStyle: 'colour: black; font-size: 100%; padding-left: 0.5 em; padding-right: 0.5 em;'
 
 }

src/style.js

@@ -441,17 +441,18 @@ export function faviconOrDefault (dom: HTMLDocument, x: NamedNode) {
  */
 export function deleteButtonWithCheck (
   dom: HTMLDocument,
-  container: HTMLElement,
+  _container: HTMLElement, // Used to interfere with style of this
   noun: string,
   deleteFunction: () => any
 ) {
   function setStyle () {
-    container.style.border = ''
-    container.style.margin = '0.3em'
-    container.style.borderRadius = '0'
-    container.style.padding = '0.3em white'
-    container.style.boxShadow = ''
+    buttonDiv.style.border = ''
+    buttonDiv.style.margin = '0.3em'
+    buttonDiv.style.borderRadius = '0'
+    buttonDiv.style.padding = '0.3em white'
+    buttonDiv.style.boxShadow = ''
   }
+  const buttonDiv = dom.createElement('div')
   const minusIconURI = iconBase + 'noun_2188_red.svg' // white minus in red #cc0000 circle
   const img = dom.createElement('img')
   let sureButtonElt, cancelButtonElt
@@ -460,45 +461,46 @@ export function deleteButtonWithCheck (
   img.title = 'Remove this ' + noun
   const deleteButtonElt = img
 
-  container.appendChild(deleteButtonElt)
-  container.setAttribute('class', 'hoverControl') // See tabbedtab.css (sigh global CSS)
+  buttonDiv.appendChild(deleteButtonElt)
+  buttonDiv.setAttribute('class', 'hoverControl') // See tabbedtab.css (sigh global CSS)
   setStyle()
 
   deleteButtonElt.setAttribute('class', 'hoverControlHide')
 
   deleteButtonElt.addEventListener(
     'click',
     function (_event) {
-      container.style.borderRadius = '0.5em'
-      container.style.border = 'orange 0.05em;'
-      container.style.boxShadow = '0.2em 0.5em #888888'
+      buttonDiv.style.borderRadius = '0.5em'
+      buttonDiv.style.border = 'orange 0.05em;'
+      buttonDiv.style.boxShadow = '0.2em 0.5em #888888'
+      buttonDiv.style.padding = '0.3em'
 
-      container.removeChild(deleteButtonElt) // Ask -- are you sure?
+      buttonDiv.removeChild(deleteButtonElt) // Ask -- are you sure?
       cancelButtonElt = dom.createElement('button')
       // cancelButton.textContent = 'cancel'
       cancelButtonElt.setAttribute('style', style.buttonStyle)
       const img = cancelButtonElt.appendChild(dom.createElement('img'))
       img.setAttribute('src', cancelIconURI)
       img.setAttribute('style', style.buttonStyle)
 
-      container.appendChild(cancelButtonElt).addEventListener(
+      buttonDiv.appendChild(cancelButtonElt).addEventListener(
         'click',
         function (_event) {
-          container.removeChild(sureButtonElt)
-          container.removeChild(cancelButtonElt)
+          buttonDiv.removeChild(sureButtonElt)
+          buttonDiv.removeChild(cancelButtonElt)
           setStyle()
-          container.appendChild(deleteButtonElt)
+          buttonDiv.appendChild(deleteButtonElt)
         },
         false
       )
       sureButtonElt = dom.createElement('button')
       sureButtonElt.textContent = 'Delete ' + noun
       sureButtonElt.setAttribute('style', style.buttonStyle)
-      container.appendChild(sureButtonElt).addEventListener(
+      buttonDiv.appendChild(sureButtonElt).addEventListener(
         'click',
         function (_event) {
-          container.removeChild(sureButtonElt)
-          container.removeChild(cancelButtonElt)
+          buttonDiv.removeChild(sureButtonElt)
+          buttonDiv.removeChild(cancelButtonElt)
           setStyle()
           deleteFunction()
         },
@@ -507,7 +509,7 @@ export function deleteButtonWithCheck (
     },
     false
   )
-  return deleteButtonElt
+  return buttonDiv // deleteButtonElt
 }
 
 /**

src/widgets/buttons.ts

@@ -1,19 +1,29 @@
 /**
  * Create an error message block
  * @param dom The DOM on which dom.createElement will be called
- * @param err The error message string to display
+ * @param err The error message string to display (or an error object)
  * @param backgroundColor Background color. Default: '#fee'
+ * @param err2 Is the second param is a string, you can put the original Error in here
  * @returns A div element with the err string
+ *
+ * This will return a DOM element you can put in the UI as a notice for the user
+ *  Meanwhile the stack is dumped to the console for the developer, so you actually know
+ *  where it happened!
  */
 /* eslint-disable no-console */
 
-export function errorMessageBlock (dom: HTMLDocument, err: string | Error, backgroundColor?: string): HTMLDivElement {
+export function errorMessageBlock (dom: HTMLDocument, err: string | Error, backgroundColor?: string, err2?: Error): HTMLDivElement {
   const div = dom.createElement('div')
-  if (err instanceof Error) {
-    console.error(`errorMessageBlock: Error ${err} at: ${err.stack || '??'}`, err) // @@ pick one
-    div.textContent = err.message
+
+  /* tslint:disable-next-line */ // Too complex for TS?
+  // @ts-ignore
+  const errorObject:Error = err2 || err instanceof Error ? err : null
+
+  if (errorObject) {
+    console.error(`errorMessageBlock: ${errorObject} at: ${errorObject.stack || '??'}`, errorObject) // @@ pick one
+    div.textContent = errorObject.message
   } else {
-    div.textContent = err
+    div.textContent = err as string
   }
   div.setAttribute(
     'style',