solid-panes 4.4.2-7 → 4.5.0

package/dist/dashboard/basicPreferences.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.basicPreferencesPane = void 0;
+var _rdflib = require("rdflib");
+var _solidUi = require("solid-ui");
+/* babel-plugin-inline-import './ontologyData.ttl' */
+const ontologyData = "@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix schema: <http:/schema.org/>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix : <#>.\n\nsolid:User a rdfs:Class;\n  rdfs:label \"user\"@en, \"utilisateur\"@fr;\n  rdfs:comment \"\"\"Any person who might use a Solid-based system\"\"\";\n  rdfs:subClassOf foaf:Person, schema:Person, vcard:Individual.\n\n# Since these options are opt-in, it is a bit strange to have new users opt in\n# That they are new users - also we do not use this class for anything specific\n# yet\n# solid:NewUser a rdfs:Class;\n#  rdfs:label \"new user\"@en;\n#  rdfs:comment \"\"\"A person who might use a Solid-based system who has a low\n#  level of familiarity with technical details.\"\"\";\n#  rdfs:subClassOf solid:User.\n\nsolid:PowerUser a rdfs:Class;\n  rdfs:label \"power user\"@en;\n  rdfs:comment \"\"\"A person who might use a Solid-based system\n  who is prepared to be given a more complex interface in order\n  to be provided with more pwerful features.\"\"\";\n  rdfs:subClassOf solid:User.\n\n  solid:Developer a rdfs:Class;\n    rdfs:label \"Developer\";\n    rdfs:comment \"\"\"Any person who might use a Solid-based system,\n    who has software development skills.\"\"\";\n    rdfs:subClassOf solid:User.\n";
+/* babel-plugin-inline-import './preferencesFormText.ttl' */
+const preferencesFormText = "@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix : <#>.\n\n:this <http://purl.org/dc/elements/1.1/title> \"Basic preferences\" ;\n      a ui:Form ;\n      ui:part :categorizeUser, :privateComment, :personalInformationHeading;\n      ui:parts ( :personalInformationHeading :privateComment :categorizeUser ).\n\n:personalInformationHeading a ui:Heading;\n      ui:contents \"Personal information\".\n\n:privateComment a ui:Comment;\n      ui:contents \"This information is private.\".\n\n:categorizeUser a ui:Classifier;\n      ui:label \"Level of user\"; ui:property rdf:type ; ui:category solid:User.\n";
+const basicPreferencesPane = exports.basicPreferencesPane = {
+  icon: _solidUi.icons.iconBase + 'noun_Sliders_341315_000000.svg',
+  name: 'basicPreferences',
+  label: _subject => {
+    return null;
+  },
+  // Render the pane
+  // The subject should be the logged in user.
+  render: (subject, context) => {
+    const dom = context.dom;
+    // @ts-ignore
+    const store = context.session.store;
+    function complainIfBad(ok, mess) {
+      if (ok) return;
+      container.appendChild(_solidUi.widgets.errorMessageBlock(dom, mess, '#fee'));
+    }
+    const container = dom.createElement('div');
+    const formArea = setupUserTypesSection(container, dom);
+    function loadData(doc, turtle) {
+      doc = doc.doc(); // remove # from URI if nec
+      if (!store.holds(undefined, undefined, undefined, doc)) {
+        // If not loaded already
+        ;
+        (0, _rdflib.parse)(turtle, store, doc.uri, 'text/turtle', null); // Load form directly
+      }
+    }
+    const preferencesForm = store.sym('urn:uuid:93774ba1-d3b6-41f2-85b6-4ae27ffd2597#this');
+    loadData(preferencesForm, preferencesFormText);
+    const ontologyExtra = store.sym('urn:uuid:93774ba1-d3b6-41f2-85b6-4ae27ffd2597-ONT');
+    loadData(ontologyExtra, ontologyData);
+    async function doRender() {
+      const renderContext = await _solidUi.login.ensureLoadedPreferences({
+        dom,
+        div: container
+      });
+      if (!renderContext.preferencesFile) {
+        // Could be CORS
+        console.log('Not doing private class preferences as no access to preferences file. ' + renderContext.preferencesFileError);
+        return;
+      }
+      const appendedForm = _solidUi.widgets.appendForm(dom, formArea, {}, renderContext.me, preferencesForm, renderContext.preferencesFile, complainIfBad);
+      appendedForm.style.borderStyle = 'none';
+      const trustedApplicationsView = context.session.paneRegistry.byName('trustedApplications');
+      if (trustedApplicationsView) {
+        container.appendChild(trustedApplicationsView.render(null, context));
+      }
+
+      // @@ TODO Remove need for casting as any and bang (!) syntax
+      addDeleteSection(container, store, renderContext.me, dom);
+    }
+    doRender();
+    return container;
+  }
+};
+function setupUserTypesSection(container, dom) {
+  const formContainer = createSection(container, dom, 'User types');
+  const description = formContainer.appendChild(dom.createElement('p'));
+  description.innerText = 'Here you can self-assign user types to help the data browser know which views you would like to access.';
+  const userTypesLink = formContainer.appendChild(dom.createElement('a'));
+  userTypesLink.href = 'https://github.com/solidos/userguide/#role';
+  userTypesLink.innerText = 'Read more';
+  const formArea = formContainer.appendChild(dom.createElement('div'));
+  return formArea;
+}
+var _default = exports.default = basicPreferencesPane; // ends
+function addDeleteSection(container, store, profile, dom) {
+  const section = createSection(container, dom, 'Delete account');
+  const podServerNodes = store.each(profile, _solidUi.ns.space('storage'), null, profile.doc());
+  const podServers = podServerNodes.map(node => node.value);
+  const list = section.appendChild(dom.createElement('ul'));
+  podServers.forEach(async server => {
+    const deletionLink = await generateDeletionLink(server, dom);
+    if (deletionLink) {
+      const listItem = list.appendChild(dom.createElement('li'));
+      listItem.appendChild(deletionLink);
+    }
+  });
+}
+async function generateDeletionLink(podServer, dom) {
+  const link = dom.createElement('a');
+  link.textContent = `Delete your account at ${podServer}`;
+  const deletionUrl = await getDeletionUrlForServer(podServer);
+  if (typeof deletionUrl !== 'string') {
+    return null;
+  }
+  link.href = deletionUrl;
+  return link;
+}
+
+/**
+ * Hacky way to get the deletion link to a Pod
+ *
+ * This function infers the deletion link by assuming the URL structure of Node Solid server.
+ * In the future, Solid will hopefully provide a standardised way of discovering the deletion link:
+ * https://github.com/solidos/data-interoperability-panel/issues/18
+ *
+ * If NSS is in multi-user mode (the case on inrupt.net and solid.community), the deletion URL for
+ * vincent.dev.inrupt.net would be at dev.inrupt.net/account/delete. In single-user mode, the
+ * deletion URL would be at vincent.dev.inrupt.net/account/delete.
+ *
+ * @param server Pod server containing the user's account.
+ * @returns URL of the page that Node Solid Server would offer to delete the account, or null if
+ *          the URLs we tried give invalid responses.
+ */
+async function getDeletionUrlForServer(server) {
+  const singleUserUrl = new URL(server);
+  const multiUserUrl = new URL(server);
+  multiUserUrl.pathname = singleUserUrl.pathname = '/account/delete';
+  const hostnameParts = multiUserUrl.hostname.split('.');
+  // Remove `vincent.` from `vincent.dev.inrupt.net`, for example:
+  multiUserUrl.hostname = hostnameParts.slice(1).join('.');
+  const multiUserNssResponse = await fetch(multiUserUrl.href, {
+    method: 'HEAD'
+  });
+  if (multiUserNssResponse.ok) {
+    return multiUserUrl.href;
+  }
+  const singleUserNssResponse = await fetch(singleUserUrl.href, {
+    method: 'HEAD'
+  });
+  if (singleUserNssResponse.ok) {
+    return singleUserUrl.href;
+  }
+  return null;
+}
+function createSection(container, dom, title) {
+  const section = container.appendChild(dom.createElement('div'));
+  section.style.border = '0.3em solid #418d99';
+  section.style.borderRadius = '0.5em';
+  section.style.padding = '0.7em';
+  section.style.marginTop = '0.7em';
+  const titleElement = section.appendChild(dom.createElement('h3'));
+  titleElement.innerText = title;
+  return section;
+}

package/dist/dashboard/dashboardPane.d.ts

@@ -1,4 +1,4 @@
-import { PaneDefinition } from '../../node_modules/pane-registry';
+import { PaneDefinition } from 'pane-registry';
 export declare const dashboardPane: PaneDefinition;
 export default dashboardPane;
 //# sourceMappingURL=dashboardPane.d.ts.map

package/dist/dashboard/dashboardPane.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.dashboardPane = void 0;
+var _solidUi = require("solid-ui");
+var _solidLogic = require("solid-logic");
+var _homepage = require("./homepage");
+const dashboardPane = exports.dashboardPane = {
+  icon: _solidUi.icons.iconBase + 'noun_547570.svg',
+  name: 'dashboard',
+  label: subject => {
+    if (subject.termType === 'NamedNode' && subject.uri === subject.site().uri) {
+      return 'Dashboard';
+    }
+    return null;
+  },
+  render: (subject, context) => {
+    console.log('Dashboard Pane Render');
+    const dom = context.dom;
+    const container = dom.createElement('div');
+    const runBuildPage = () => {
+      container.innerHTML = '';
+      buildPage(container, _solidLogic.authn.currentUser() || null, context, subject);
+    };
+    _solidLogic.authSession.events.on('login', () => {
+      // console.log('On Login')
+      runBuildPage();
+    });
+    _solidLogic.authSession.events.on('sessionRestore', () => {
+      // console.log('On Session Restore')
+      runBuildPage();
+    });
+    // console.log('Initial Load')
+    runBuildPage();
+    return container;
+  }
+};
+function buildPage(container, webId, context, subject) {
+  const uri = new URL(window.location.href).searchParams.get('uri');
+  if (uri && webId) {
+    return buildDashboard(container, context);
+  }
+  if (!uri && subject) {
+    return buildHomePage(container, subject);
+  }
+  if (!uri && !subject && webId) {
+    return buildDashboard(container, context);
+  }
+  const fallbackSubject = subject || webId || _solidLogic.store.sym(window.location.href);
+  return buildHomePage(container, fallbackSubject);
+}
+function buildDashboard(container, context) {
+  // console.log('build dashboard')
+  // @@ TODO get a proper type
+  const outliner = context.getOutliner(context.dom);
+  outliner.getDashboard().then(dashboard => container.appendChild(dashboard));
+}
+function buildHomePage(container, subject) {
+  // console.log('build home page')
+  const wrapper = document.createElement('div');
+  container.appendChild(wrapper);
+  const shadow = wrapper.attachShadow({
+    mode: 'open'
+  });
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = '/common/css/bootstrap.min.css';
+  shadow.appendChild(link);
+  (0, _homepage.generateHomepage)(subject, _solidLogic.store, _solidLogic.store.fetcher).then(homepage => shadow.appendChild(homepage));
+}
+var _default = exports.default = dashboardPane;

package/dist/dashboard/homepage.d.ts

@@ -1,3 +1,3 @@
-import { Fetcher, IndexedFormula, NamedNode } from '../../node_modules/rdflib';
+import { Fetcher, IndexedFormula, NamedNode } from 'rdflib';
 export declare function generateHomepage(uri: NamedNode, store: IndexedFormula, fetcher: Fetcher): Promise<HTMLElement>;
 //# sourceMappingURL=homepage.d.ts.map

package/dist/dashboard/homepage.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateHomepage = generateHomepage;
+var _ownerProfile = require("../profileUtils/ownerProfile");
+async function generateHomepage(uri, store, fetcher) {
+  const ownersProfile = await (0, _ownerProfile.loadProfileFromURI)(uri, store, fetcher);
+  const name = (0, _ownerProfile.getName)(store, ownersProfile);
+  const wrapper = document.createElement('div');
+  wrapper.classList.add('container');
+  wrapper.appendChild(createTitle(ownersProfile.uri, name));
+  wrapper.appendChild(createDataSection(name));
+  return wrapper;
+}
+function createDataSection(name) {
+  const dataSection = document.createElement('section');
+  const title = document.createElement('h2');
+  title.innerText = 'Data';
+  dataSection.appendChild(title);
+  const listGroup = document.createElement('div');
+  listGroup.classList.add('list-group');
+  dataSection.appendChild(listGroup);
+  const publicDataLink = document.createElement('a');
+  publicDataLink.classList.add('list-group-item');
+  publicDataLink.href = window.document.location.href + 'public/';
+  publicDataLink.innerText = `View ${name}'s files`;
+  listGroup.appendChild(publicDataLink);
+  return dataSection;
+}
+function createTitle(uri, name) {
+  const profileLink = document.createElement('a');
+  profileLink.href = uri;
+  profileLink.innerText = name;
+  const profileLinkPost = document.createElement('span');
+  profileLinkPost.innerText = '\'s Profile';
+  const title = document.createElement('h1');
+  title.appendChild(profileLink);
+  title.appendChild(profileLinkPost);
+  return title;
+}

package/dist/dataContentPane.css

@@ -0,0 +1,271 @@
+.data-content-pane__literal {
+  white-space: pre-wrap;
+}
+
+div.data-content-pane {
+  border-top: solid 1px var(--color-data-pane-border-top, black);
+  border-left: solid 1px var(--color-data-pane-border-top, black);
+  border-bottom: solid 1px var(--color-data-pane-border-side, #777);
+  border-right: solid 1px var(--color-data-pane-border-side, #777);
+  padding: var(--spacing-base, 0.5rem);
+  margin-top: var(--spacing-base, 0.5rem);
+  margin-bottom: var(--spacing-base, 0.5rem);
+}
+
+div.data-content-pane table.data-content-pane__table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+div.data-content-pane table.data-content-pane__table--root {
+  table-layout: auto;
+}
+
+div.data-content-pane .data-content-pane__row--root {
+  display: flex;
+  align-items: flex-start;
+}
+
+div.data-content-pane .data-content-pane__row--root > td {
+  vertical-align: top;
+}
+
+div.data-content-pane .data-content-pane__subject-cell {
+  flex: 0 0 auto;
+  width: clamp(7rem, 12%, 10rem);
+  padding-right: 0.8rem;
+}
+
+div.data-content-pane .data-content-pane__details-cell {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+div.data-content-pane .data-content-pane__subject-cell,
+div.data-content-pane td.data-content-pane__predicate-cell,
+div.data-content-pane .data-content-pane__row--top-aligned > td:not(.data-content-pane__predicate-cell),
+div.data-content-pane .data-content-pane__subject-cell a,
+div.data-content-pane td.data-content-pane__predicate-cell a,
+div.data-content-pane .data-content-pane__row--top-aligned > td:not(.data-content-pane__predicate-cell) a {
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+div.data-content-pane table.data-content-pane__table--property {
+  table-layout: auto;
+  width: auto;
+  max-width: 100%;
+}
+
+.data-content-pane__nested-formula {
+  border-top: solid 1px var(--color-data-pane-border-top, black);
+  border-left: solid 1px var(--color-data-pane-border-top, black);
+  border-bottom: solid 1px var(--color-data-pane-border-side, #777);
+  border-right: solid 1px var(--color-data-pane-border-side, #777);
+  padding: var(--spacing-base, 0.5rem);
+  border-radius: var(--border-radius-md, 0.5rem);
+}
+
+div.data-content-pane td {
+  padding-left: var(--spacing-xxxs, 0.2rem);
+  padding-top: var(--spacing-small, 0.1rem);
+  padding-right: var(--spacing-xxxs, 0.2rem);
+  padding-bottom: 0.05rem;
+  vertical-align: top;
+}
+
+div.data-content-pane table.data-content-pane__table--property td {
+  padding-top: 0.3rem;
+  padding-bottom: 0.3rem;
+}
+
+div.data-content-pane tr {
+  margin-bottom: var(--spacing-2xs, 0.625rem);
+  padding-top: var(--spacing-small, 0.1rem);
+  padding-bottom: var(--spacing-small, 0.1rem);
+}
+
+.data-content-pane a {
+  color: var(--color-text-link, #3b5998);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.data-content-pane a:link {
+  color: var(--color-text-link, #3b5998);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.data-content-pane a:visited {
+  color: var(--color-text-link-visited, #3b5998);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.data-content-pane a:hover {
+  color: var(--color-text-link-hover, #3b5998);
+  text-decoration: underline;
+  font-weight: bold;
+}
+
+.data-content-pane a:active {
+  color: var(--color-text-link-active, #888);
+  text-decoration: none;
+}
+
+.data-content-pane.embeddedText {
+  white-space: pre-wrap;
+}
+
+div.data-content-pane td.data-content-pane__predicate-cell {
+  min-width: 8.5rem;
+  width: clamp(8.5rem, 18vw, 12rem);
+  max-width: 12rem;
+  padding-right: var(--spacing-base, 0.5rem);
+}
+
+div.data-content-pane .data-content-pane__row--top-aligned > td:not(.data-content-pane__predicate-cell) {
+  padding-left: var(--spacing-xxs, 0.3125rem);
+}
+
+div.data-content-pane td.data-content-pane__predicate-cell a {
+  color: var(--color-text-muted, #444);
+}
+
+.data-content-pane__row--even {
+  background-color: var(--color-background-row-alternate, #f0f0f0);
+}
+
+.data-content-pane__row--odd {
+  background-color: var(--color-background-row-default, white);
+}
+
+.data-content-pane__row--top-aligned {
+  vertical-align: top;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.data-content-pane__nested-table--light {
+  background-color: var(--color-background-row-default, white);
+}
+
+.data-content-pane__nested-table--dark {
+  background-color: var(--color-background-row-alternate, #f0f0f0);
+}
+
+div.data-content-pane[data-layout='mobile'] .data-content-pane__row--root {
+  display: flex;
+  align-items: flex-start;
+  padding-bottom: var(--spacing-xs, 0.75rem);
+}
+
+div.data-content-pane[data-layout='mobile'] .data-content-pane__subject-cell {
+  flex: 0 0 40%;
+  width: 40%;
+  max-width: 40%;
+  box-sizing: border-box;
+  padding-right: var(--spacing-xs, 0.75rem);
+  padding-bottom: 0;
+}
+
+div.data-content-pane[data-layout='mobile'] .data-content-pane__details-cell {
+  flex: 0 0 60%;
+  width: 60%;
+  max-width: 60%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property > tbody > tr,
+div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property > tr {
+  margin-bottom: 0;
+}
+
+div.data-content-pane[data-layout='mobile'] .data-content-pane__row--top-aligned + .data-content-pane__row--top-aligned {
+  margin-top: 0;
+}
+
+div.data-content-pane[data-layout='mobile'] .data-content-pane__row--top-aligned {
+  display: block;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property,
+div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property > tbody {
+  display: block;
+  width: 100%;
+}
+
+div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property td {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property td.data-content-pane__predicate-cell {
+  width: 100%;
+  min-width: 0;
+  padding-bottom: 0.1rem;
+}
+
+div.data-content-pane[data-layout='mobile'] table.data-content-pane__table--property td:not(.data-content-pane__predicate-cell) {
+  padding-top: 0;
+  padding-left: 0.85rem;
+}
+
+@media (max-width: 700px) {
+  div.data-content-pane .data-content-pane__row--root {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  div.data-content-pane .data-content-pane__subject-cell {
+    flex: 0 0 40%;
+    width: 40%;
+    max-width: 40%;
+    padding-right: var(--spacing-xs, 0.75rem);
+    padding-bottom: 0;
+    box-sizing: border-box;
+  }
+
+  div.data-content-pane .data-content-pane__details-cell {
+    flex: 0 0 60%;
+    width: 60%;
+    max-width: 60%;
+    box-sizing: border-box;
+  }
+
+  div.data-content-pane .data-content-pane__row--top-aligned {
+    display: block;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  div.data-content-pane .data-content-pane__row--top-aligned > td {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  div.data-content-pane .data-content-pane__row--top-aligned > td.data-content-pane__predicate-cell {
+    min-width: 0;
+    max-width: none;
+    width: 100%;
+    padding-bottom: var(--spacing-small, 0.1rem);
+  }
+
+  div.data-content-pane .data-content-pane__row--top-aligned > td:not(.data-content-pane__predicate-cell) {
+    padding-top: 0;
+    padding-left: 0.85rem;
+  }
+}

package/dist/dataContentPane.d.ts

@@ -1,5 +1,6 @@
-import { DataBrowserContext } from '../node_modules/pane-registry';
-import { BlankNode, NamedNode, Statement } from '../node_modules/rdflib';
+import type { DataBrowserContext } from 'pane-registry';
+import type { BlankNode, NamedNode, Statement } from 'rdflib';
+import './dataContentPane.css';
 type SubjectTerm = NamedNode | BlankNode;
 export declare const dataContentPane: {
     icon: string;