How to use the solid-ui.widgets function in solid-ui

: kb.fetcher.webOperation('DELETE', subject.uri)
        promise.then(response => {
          var str = 'Deleted: ' + subject
          console.log(str)
        }, err => {
          var str = 'Unable to delete ' + subject + ': ' + err
          console.log(str)
          alert(str)
        })
      })
      deleteButton.style = 'height: 2em;'
      deleteButton.class = '' // Remove hover hide
      deleteCell.appendChild(deleteButton)

      const refreshCell = controlRow.appendChild(dom.createElement('td'))
      const refreshButton = UI.widgets.button(dom, UI.icons.iconBase + 'noun_479395.svg', 'refresh')
      refreshCell.appendChild(refreshButton)
      refreshButton.addEventListener('click', event => {
        kb.fetcher.refresh(subject, function (ok, errm, res) {
          let str
          if (ok) {
            str = 'Refreshed OK: ' + subject
          } else {
            str = 'Error refreshing: ' + subject + ': ' + errm
          }
          console.log(str)
          alert(str)
        })
      })
    }

    var plist = kb.statementsMatching(subject)

UI.store.fetcher.nowOrWhenFetched(local.doc(), undefined, function (ok, message) {
          cardMain.innerHTML = ''
          if (!ok) return complainIfBad(ok, "Can't load card: " + local + ': ' + message)
          // console.log("Loaded card " + local + '\n')
          cardMain.appendChild(cardPane(dom, local, 'contact'))
          cardMain.appendChild(dom.createElement('br'))

          cardMain.appendChild(UI.widgets.linkIcon(dom, local)) // hoverHide

          // Add in a delete button to delete from AB
          var deleteButton = UI.widgets.deleteButtonWithCheck(dom, cardMain, 'contact', function () {
            let container = person.dir() // ASSUMPTION THAT CARD IS IN ITS OWN DIRECTORY
            // function warn (message) { return UI.widgets.errorMessageBlock(dom, message, 'straw') }
            alert('Conatiner to delete is ' + container)
            let pname = kb.any(person, ns.vcard('fn'))

            if (confirm('Delete contact ' + pname + ' completely?? ' + container)) {
              console.log('Deleting a contact ' + pname)
              deleteThing(person)
              //  - delete the references to it in group files and save them background
              //   - delete the reference in people.ttl and save it back
              deleteRecursive(kb, container).then(res => {
                refreshNames() // Doesn't work
                cardMain.innerHTML = 'Contact Data Deleted.'

var showFiltered = function (mode) {
      var filtered = mode === 0 ? objects : getFiltered()
      // eslint-enable
      UI.widgets.selectorPanelRefresh(
        objectList,
        dom,
        kb,
        objectType,
        predicate,
        true,
        filtered,
        options,
        showObject,
        linkClicked
      )
      if (filtered.length === 1) {
        currentObject = filtered[0]
        showObject(currentObject, null, true) // @@ (Sure?) if only one select it.
      } else {
        deselectObject()

//              Render the forms

        var forms = UI.widgets.formsFor(subject)

        // complain('Form for editing this form:');
        for (var i = 0; i < forms.length; i++) {
          var form = forms[i]
          var heading = dom.createElement('h4')
          box.appendChild(heading)
          if (form.uri) {
            var formStore = $rdf.Util.uri.document(form)
            if (formStore.uri !== form.uri) {
              // The form is a hash-type URI
              var e = box.appendChild(
                UI.widgets.editFormButton(
                  dom,
                  box,
                  form,
                  formStore,
                  complainIfBad
                )
              )
              e.setAttribute('style', 'float: right;')
            }
          }
          var anchor = dom.createElement('a')
          anchor.setAttribute('href', form.uri)
          heading.appendChild(anchor)
          anchor.textContent = UI.utils.label(form, true)

          /*  Keep tis as a reminder to let a New one have its URI given by user

UI.aclControl.preventBrowserDropEvents(dom)

    const explictDropIcon = false
    var target
    if (explictDropIcon) {
      let iconStyleFound = creationDiv.firstChild.style.cssText
      target = creationDiv.insertBefore(dom.createElement('img'), creationDiv.firstChild)
      target.style.cssText = iconStyleFound
      target.setAttribute('src', UI.icons.iconBase + 'noun_748003.svg')
      target.setAttribute('style', 'width: 2em; height: 2em') // Safari says target.style is read-only
    } else {
      target = creationDiv.firstChild // Overload drop target semantics onto the plus sign
    }

    UI.widgets.makeDropTarget(target, null, droppedFileHandler)

    return div
  }
}

{},
          subject,
          form1,
          detailsDoc,
          complainIfBad
        )
        UI.widgets.appendForm(
          document,
          table,
          {},
          subject,
          form2,
          detailsDoc,
          complainIfBad
        )
        UI.widgets.appendForm(
          document,
          table,
          {},
          subject,
          form3,
          detailsDoc,
          complainIfBad
        )
        naviCenter.appendChild(doneButton) // could also check data shape
      }
      // @@@  link config to results

      var insertables = []
      insertables.push(
        $rdf.st(
          subject,

var kb = context.session.store
    var ns = UI.ns
    var div = dom.createElement('div')
    div.setAttribute('class', 'bss-slides')

    var t = kb.findTypeURIs(subject)
    var predicate
    if (t[ns.ldp('BasicContainer').uri] || t[ns.ldp('Container').uri]) {
      predicate = ns.ldp('contains')
    }
    var images = kb.each(subject, predicate) // @@ random order?
    // @@ Ideally: sort by embedded time of image
    images.sort() // Sort for now by URI
    for (let i = 0; i < images.length; i++) {
      if (!UI.widgets.isImage(images[i])) continue
      var figure = div.appendChild(dom.createElement('figure'))
      var img = figure.appendChild(dom.createElement('img'))
      img.setAttribute('src', images[i].uri)
      img.setAttribute('width', '100%')
      figure.appendChild(dom.createElement('figcaption'))
    }
    var options = { dom: dom }

    setTimeout(function () {
      makeBSS('.bss-slides', options)
    }, 1000) // Must run after the code which called this

    return div
  }
}

}

        peopleMainTable.innerHTML = '' // clear
        peopleHeader.textContent = (cards.length > 5 ? '' + cards.length + ' contacts' : 'contact')

        for (var j = 0; j < cards.length; j++) {
          var personRow = peopleMainTable.appendChild(dom.createElement('tr'))
          var personLeft = personRow.appendChild(dom.createElement('td'))
          // var personRight = personRow.appendChild(dom.createElement('td'))
          personLeft.setAttribute('style', dataCellStyle)
          var person = cards[j]
          personRow.subject = person
          var name = nameFor(person)
          personLeft.textContent = name
          personRow.subject = person
          UI.widgets.makeDraggable(personRow, person)

          var setPersonListener = function toggle (personLeft, person) {
            /*  No delete button on person in list: ambiguous: group or total? Do in card itself
            UI.widgets.deleteButtonWithCheck(dom, personRight, 'contact', function () {
              deleteThing(person) /// Just remove from group
              refreshNames()
              cardMain.innerHTML = ''
            })
            */
            personRow.addEventListener('click', function (event) {
              event.preventDefault()
              selectPerson(person)
            })
          }
          setPersonListener(personRow, person)
        }

var renderCatgorySelectors = function () {
            div.insertBefore(
              UI.widgets.makeSelectForNestedCategory(
                dom,
                kb,
                subject,
                UI.ns.qu('Classified'),
                store,
                complainIfBad
              ),
              table.nextSibling
            )
          }