profile-pane 1.2.1-d33b9fcd → 1.2.1-e1285559

package/README.md

@@ -1,8 +1,6 @@
 # profile-pane
 SolidOS pane that displays a personal profile page
 
-This is a re-write that is going to replace the current profile pane
-
 ![CI](https://github.com/solid/profile-pane/workflows/CI/badge.svg)
 
 ## Contribute
@@ -29,10 +27,6 @@ If this is the case, simply run "npm audit fix" and upgrade the repository. It s
 
 Unit tests use `jest` and are placed next to the tested file as `*.spec.ts` files.
 
-#### Integration tests
-
-Integration tests verify the rendering of the whole pane (with mocked HTTP requests) and are placed under `./src/integration-tests`.
-
 ### Dev Server
 
 Start a webpack dev server:
@@ -41,8 +35,7 @@ Start a webpack dev server:
 npm start
 ```
 
-Visit `http://localhost:8080/` to render the pane. Adjust `const webIdToShow` in `./dev/index.ts` to show a
- different profile.
+Visit `http://localhost:8080/` to render the pane. Adjust `const webIdToShow` in `./dev/index.ts` to show a different profile.
  
 ### Build
 
@@ -52,16 +45,3 @@ npm run build
 
 The build is done by `tsc`, webpack is only used as dev server and not for production build.
 
-### Check before committing
-
-```
-npm run check
-```
-
-This does lint, build and test.
-
-### Notes
-
-If suddenly many tests fail, it may be that the installation has ended up with 
-two different instances of solid-logic.  Run `npm list solid-logic` and make sure there is only one. 
-Otherwise `rm -rf node_modules package-lock.json && npm install` should fix it.

package/lib/0SAVED-CVCard.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit-html';
+import { ProfilePresentation } from './presenter';
+import { CVPresentation } from './CVPresenter';
+export declare const CVCard: (profileBasics: ProfilePresentation, cvData: CVPresentation) => TemplateResult;

package/lib/0SAVED-CVCard.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CVCard = void 0;
+var _litHtml = require("lit-html");
+var _baseStyles = require("./baseStyles");
+var _styleMap = require("lit-html/directives/style-map.js");
+const styles = {
+  image: (0, _styleMap.styleMap)((0, _baseStyles.fullWidth)()),
+  intro: (0, _styleMap.styleMap)({
+    ...(0, _baseStyles.textGray)(),
+    ...(0, _baseStyles.textCenter)()
+  }),
+  card: (0, _styleMap.styleMap)((0, _baseStyles.card)()),
+  info: (0, _styleMap.styleMap)({
+    ...(0, _baseStyles.paddingSmall)(),
+    ...(0, _baseStyles.textLeft)()
+  })
+};
+const CVCard = (profileBasics, cvData) => {
+  const {
+    rolesByType,
+    skills,
+    languages
+  } = cvData;
+  const nameStyle = (0, _styleMap.styleMap)({
+    ...(0, _baseStyles.heading)(),
+    // "text-decoration": "underline",
+    color: profileBasics.highlightColor // was "text-decoration-color"
+  });
+  if (renderRoles(rolesByType['FutureRole']) || renderRoles(rolesByType['CurrentRole']) || renderRoles(rolesByType['PastRole']) || renderSkills(skills) || renderLanguages(languages)) {
+    return (0, _litHtml.html)`
+  <div data-testid="curriculum-vitae" style="${styles.card}">
+    <div style=${styles.info}>
+      <h3 style=${nameStyle}>Bio</h3>
+      <div style=${styles.info}>${renderRoles(rolesByType['FutureRole'])}</div>
+      <hr />
+      <div style=${styles.info}>${renderRoles(rolesByType['CurrentRole'])}</div>
+      <hr />
+      <div style=${styles.info}>${renderRoles(rolesByType['PastRole'])}</div>
+      <hr />
+      <h3 style=${nameStyle}>Skills</h3>
+      <div style=${styles.info}>${renderSkills(skills)}</div>
+      <h3 style=${nameStyle}>Languages</h3>
+      <div style=${styles.info}>${renderLanguages(languages)}</div>
+    </div>
+    </div>
+  `;
+  }
+  return (0, _litHtml.html)``;
+};
+exports.CVCard = CVCard;
+function renderRole(role) {
+  return role ? (0, _litHtml.html)`<div style="margin-top: 0.3em; margin-bottom: 0.3em;">
+        <b>${role.orgName}</b>
+        <span>${strToUpperCase(role.roleText)}</span>
+        <span>${role.dates}</span>   
+      </div> ` : (0, _litHtml.html)``;
+}
+function renderRoles(roles) {
+  if (roles[0] > '') return (0, _litHtml.html)`${renderRole(roles[0])}${roles.length > 1 ? renderRoles(roles.slice(1)) : (0, _litHtml.html)``}`;
+}
+function renderSkill(skill) {
+  return skill ? (0, _litHtml.html)`<div style="margin: 0.5em;">
+        <p style="text-align: center;">${skill}</p>
+      </div> ` : (0, _litHtml.html)``;
+}
+function renderSkills(skills) {
+  if (skills[0] > '') return (0, _litHtml.html)`${renderSkill(strToUpperCase(skills[0]))} ${skills.length > 1 ? renderSkills(skills.slice(1)) : (0, _litHtml.html)``}`;
+}
+function renderLan(language) {
+  return language ? (0, _litHtml.html)`<div style="margin: 0.5em;">
+        <p style="text-align: center;">${language}</p>
+      </div> ` : (0, _litHtml.html)``;
+}
+function renderLanguages(languages) {
+  if (languages[0] > '') return (0, _litHtml.html)`${renderLan(languages[0])}${languages.length > 1 ? renderLanguages(languages.slice(1)) : (0, _litHtml.html)``}`;
+}
+function strToUpperCase(str) {
+  if (str && str[0] > '') {
+    const strCase = str.split(' ');
+    for (let i = 0; i < strCase.length; i++) {
+      strCase[i] = strCase[i].charAt(0).toUpperCase() + strCase[i].substring(1);
+    }
+    return strCase.join(' ');
+  }
+  return '';
+}

package/lib/CVCard.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit-html';
+import { ProfilePresentation } from './presenter';
+import { CVPresentation } from './CVPresenter';
+export declare const CVCard: (profileBasics: ProfilePresentation, cvData: CVPresentation) => TemplateResult;

package/lib/CVCard.js

@@ -1,113 +1,99 @@
-import { html } from 'lit-html';
-import * as styles from './styles/CVCard.module.css';
-export const CVCard = (cvData) => {
-    const { rolesByType, skills, languages } = cvData;
-    const futureRolesArr = rolesByType['FutureRole'] || [];
-    const currentRolesArr = rolesByType['CurrentRole'] || [];
-    const pastRolesArr = rolesByType['PastRole'] || [];
-    const skillsArr = skills || [];
-    const languagesArr = languages || [];
-    const hasFutureRole = Array.isArray(futureRolesArr) && futureRolesArr.length > 0;
-    const hasCurrentRole = Array.isArray(currentRolesArr) && currentRolesArr.length > 0;
-    const hasPastRole = Array.isArray(pastRolesArr) && pastRolesArr.length > 0;
-    const hasSkills = Array.isArray(skillsArr) && skillsArr.length > 0;
-    const hasLanguages = Array.isArray(languagesArr) && languagesArr.length > 0;
-    if (!(hasFutureRole || hasCurrentRole || hasPastRole || hasSkills || hasLanguages))
-        return html ``;
-    return html `
-    <section class="${styles.cvCard}" aria-label="Curriculum Vitae" data-testid="curriculum-vitae">
-      ${hasFutureRole ? html `
-        <section class="${styles.cvSection}" aria-labelledby="cv-future-heading">
-          <h3 id="cv-future-heading">Future Roles</h3>
-          <ul>
-            ${renderRoles(futureRolesArr, true)}
-          </ul>
-        </section>
-      ` : ''}
-      ${hasCurrentRole ? html `
-        <section class="${styles.cvSection}" aria-labelledby="cv-current-heading">
-          <h3 id="cv-current-heading">Current Roles</h3>
-          <ul>
-            ${renderRoles(currentRolesArr, true)}
-          </ul>
-        </section>
-      ` : ''}
-      ${hasPastRole ? html `
-        <section class="${styles.cvSection}" aria-labelledby="cv-past-heading">
-          <h3 id="cv-past-heading">Past Roles</h3>
-          <ul>
-            ${renderRoles(pastRolesArr, true)}
-          </ul>
-        </section>
-      ` : ''}
-      ${hasSkills ? html `
-        <section class="${styles.cvSection}" aria-labelledby="cv-skills-heading">
-          <h3 id="cv-skills-heading">Skills</h3>
-          <ul>
-            ${renderSkills(skillsArr, true)}
-          </ul>
-        </section>
-      ` : ''}
-      ${hasLanguages ? html `
-        <section aria-labelledby="cv-languages-heading">
-          <h3 id="cv-languages-heading">Languages</h3>
-          <ul>
-            ${renderLanguages(languagesArr, true)}
-          </ul>
-        </section>
-      ` : ''}
-    </section>
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CVCard = void 0;
+var _litHtml = require("lit-html");
+var _baseStyles = require("./baseStyles");
+var _styleMap = require("lit-html/directives/style-map.js");
+const styles = {
+  image: (0, _styleMap.styleMap)((0, _baseStyles.fullWidth)()),
+  intro: (0, _styleMap.styleMap)({
+    ...(0, _baseStyles.textGray)(),
+    ...(0, _baseStyles.textCenter)()
+  }),
+  card: (0, _styleMap.styleMap)((0, _baseStyles.card)()),
+  info: (0, _styleMap.styleMap)({
+    ...(0, _baseStyles.paddingSmall)(),
+    ...(0, _baseStyles.textLeft)()
+  }),
+  tools: (0, _styleMap.styleMap)({
+    ...(0, _baseStyles.paddingSmall)(),
+    ...(0, _baseStyles.textRight)()
+  })
+};
+const CVCard = (profileBasics, cvData) => {
+  const {
+    rolesByType,
+    skills,
+    languages
+  } = cvData;
+  const nameStyle = (0, _styleMap.styleMap)({
+    ...(0, _baseStyles.heading)(),
+    // "text-decoration": "underline",
+    color: profileBasics.highlightColor // was "text-decoration-color"
+  });
+  if (renderRoles(rolesByType['FutureRole']) || renderRoles(rolesByType['CurrentRole']) || renderRoles(rolesByType['PastRole']) || renderSkills(skills) || renderLanguages(languages)) {
+    return (0, _litHtml.html)`
+  <div>
+    <div data-testid="curriculum-vitae" style="${styles.card}">
+      <div style=${styles.info}>
+        <h3 style=${nameStyle}>Bio</h3>
+        <div style=${styles.info}>${renderRoles(rolesByType['FutureRole'])}</div>
+        <hr />
+        <div style=${styles.info}>${renderRoles(rolesByType['CurrentRole'])}</div>
+        <hr />
+        <div style=${styles.info}>${renderRoles(rolesByType['PastRole'])}</div>
+        <hr />
+        <h3 style=${nameStyle}>Skills</h3>
+        <div style=${styles.info}>${renderSkills(skills)}</div>
+        <h3 style=${nameStyle}>Languages</h3>
+        <div style=${styles.info}>${renderLanguages(languages)}</div>
+            
+      </div>
+      </div>
+    </div>
   `;
+  }
+  return (0, _litHtml.html)``;
 };
-function renderRole(role, asList = false) {
-    if (!role)
-        return html ``;
-    return asList
-        ? html `<li class="${styles.cvRole}">
-        <span class="${styles.cvOrg}">${role.orgName}</span>
+exports.CVCard = CVCard;
+function renderRole(role) {
+  return role ? (0, _litHtml.html)`<div style="margin-top: 0.3em; margin-bottom: 0.3em;">
+        <b>${role.orgName}</b>
         <span>${strToUpperCase(role.roleText)}</span>
-        <span>${role.dates}</span>
-      </li>`
-        : html ``;
+        <span>${role.dates}</span>   
+      </div> ` : (0, _litHtml.html)``;
 }
-function renderRoles(roles, asList = false) {
-    if (!roles || !roles.length || !roles[0])
-        return html ``;
-    return html `${renderRole(roles[0], asList)}${roles.length > 1 ? renderRoles(roles.slice(1), asList) : html ``}`;
+function renderRoles(roles) {
+  if (roles[0] > '') return (0, _litHtml.html)`${renderRole(roles[0])}${roles.length > 1 ? renderRoles(roles.slice(1)) : (0, _litHtml.html)``}`;
 }
-function renderSkill(skill, asList = false) {
-    if (!skill)
-        return html ``;
-    return asList
-        ? html `<li class="${styles.cvSkill}">${strToUpperCase(skill)}</li>`
-        : html ``;
+function renderSkill(skill) {
+  return skill ? (0, _litHtml.html)`<div style="margin: 0.5em;">
+        <p style="text-align: center;">${skill}</p>
+      </div> ` : (0, _litHtml.html)``;
 }
-function renderSkills(skills, asList = false) {
-    if (!skills || !skills.length || !skills[0])
-        return html ``;
-    return html `${renderSkill(skills[0], asList)}${skills.length > 1 ? renderSkills(skills.slice(1), asList) : html ``}`;
+function renderSkills(skills) {
+  if (skills[0] > '') return (0, _litHtml.html)`${renderSkill(strToUpperCase(skills[0]))} ${skills.length > 1 ? renderSkills(skills.slice(1)) : (0, _litHtml.html)``}`;
 }
-function renderLan(language, asList = false) {
-    if (!language)
-        return html ``;
-    return asList
-        ? html `<li class="${styles.cvLanguage}">${language}</li>`
-        : html ``;
+function renderLan(language) {
+  return language ? (0, _litHtml.html)`<div style="margin: 0.5em;">
+        <p style="text-align: center;">${language}</p>
+      </div> ` : (0, _litHtml.html)``;
 }
-function renderLanguages(languages, asList = false) {
-    if (!languages || !languages.length || !languages[0])
-        return html ``;
-    return html `${renderLan(languages[0], asList)}${languages.length > 1 ? renderLanguages(languages.slice(1), asList) : html ``}`;
+function renderLanguages(languages) {
+  if (languages[0] > '') return (0, _litHtml.html)`${renderLan(languages[0])}${languages.length > 1 ? renderLanguages(languages.slice(1)) : (0, _litHtml.html)``}`;
 }
 function strToUpperCase(str) {
-    if (str && str[0] > '') {
-        const strCase = str.split(' ');
-        for (let i = 0; i < strCase.length; i++) {
-            strCase[i] = strCase[i].charAt(0).toUpperCase() +
-                strCase[i].substring(1);
-        }
-        return strCase.join(' ');
+  if (str && str[0] > '') {
+    const strCase = str.split(' ');
+    for (let i = 0; i < strCase.length; i++) {
+      strCase[i] = strCase[i].charAt(0).toUpperCase() + strCase[i].substring(1);
     }
-    return '';
+    return strCase.join(' ');
+  }
+  return '';
 }
-//# sourceMappingURL=CVCard.js.map
+
+// ends

package/lib/CVPresenter.d.ts

@@ -0,0 +1,24 @@
+import { LiveStore, NamedNode, Literal, Node, Store } from 'rdflib';
+export interface Role {
+    startDate?: Literal;
+    endDate: Literal;
+    dates: string;
+    orgName: string;
+    roleText: string;
+    orgHomePage?: string;
+}
+export interface CVPresentation {
+    rolesByType: RolesByType;
+    skills: string[];
+    languages: string[];
+}
+export interface RolesByType {
+    PastRole: Role[];
+    CurrentRole: Role[];
+    FutureRole: Role[];
+}
+export declare const typesOfRole: string[];
+export declare function skillAsText(store: Store, sk: Node): string;
+export declare function languageAsText(store: Store, lan: Node): string;
+export declare function datesAsText(startDate?: Literal, endDate?: Literal): string;
+export declare function presentCV(subject: NamedNode, store: LiveStore): CVPresentation;

package/lib/CVPresenter.js

@@ -1,87 +1,100 @@
-import { Namespace } from 'rdflib';
-import { ns, utils } from 'solid-ui';
-const ORG = Namespace('http://www.w3.org/ns/org#');
-export const typesOfRole = ['PastRole', 'CurrentRole', 'FutureRole'];
-export function skillAsText(store, sk) {
-    if (sk.termType === 'Literal')
-        return sk.value; // Not normal but allow this
-    const publicId = store.anyJS(sk, ns.solid('publicId'));
-    if (publicId) {
-        const name = store.anyJS(publicId, ns.schema('name'));
-        if (name)
-            return name; // @@ check language and get name in diff language if necessary
-    }
-    const manual = store.anyJS(sk, ns.vcard('role'));
-    if (manual && manual[0] > '')
-        return manual;
-    return '¿¿¿ skill ???';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.datesAsText = datesAsText;
+exports.languageAsText = languageAsText;
+exports.presentCV = presentCV;
+exports.skillAsText = skillAsText;
+exports.typesOfRole = void 0;
+var _rdflib = require("rdflib");
+var _solidUi = require("solid-ui");
+const ORG = (0, _rdflib.Namespace)('http://www.w3.org/ns/org#');
+const typesOfRole = exports.typesOfRole = ['PastRole', 'CurrentRole', 'FutureRole'];
+function skillAsText(store, sk) {
+  if (sk.termType === 'Literal') return sk.value; // Not normal but allow this
+  const publicId = store.anyJS(sk, _solidUi.ns.solid('publicId'));
+  if (publicId) {
+    const name = store.anyJS(publicId, _solidUi.ns.schema('name'));
+    if (name) return name; // @@ check language and get name in diff language if necessary
+  }
+  const manual = store.anyJS(sk, _solidUi.ns.vcard('role'));
+  if (manual && manual[0] > '') return manual;
+  return '¿¿¿ skill ???';
 }
-export function languageAsText(store, lan) {
-    if (lan.termType === 'Literal')
-        return lan.value; // Not normal but allow this
-    const publicId = store.anyJS(lan, ns.solid('publicId'));
-    if (publicId)
-        return utils.label(publicId, true); // @@ check language and get name in diff language if necessary
-    return '-';
+function languageAsText(store, lan) {
+  if (lan.termType === 'Literal') return lan.value; // Not normal but allow this
+  const publicId = store.anyJS(lan, _solidUi.ns.solid('publicId'));
+  if (publicId) return _solidUi.utils.label(publicId, true); // @@ check language and get name in diff language if necessary
+  return '-';
 }
-export function datesAsText(startDate, endDate) {
-    return startDate ? '(' + startDate.value.slice(0, 10) + ' to ' +
-        (endDate ? endDate.value.slice(0, 10) : '') + ')'
-        : '';
+function datesAsText(startDate, endDate) {
+  return startDate ? '(' + startDate.value.slice(0, 10) + ' to ' + (endDate ? endDate.value.slice(0, 10) : '') + ')' : '';
 }
 function getRolesByType(store, subject) {
-    const memberships = store.each(null, ORG('member'), subject, null);
-    const rolesByType = { PastRole: [], CurrentRole: [], FutureRole: [] };
-    for (const membership of memberships) {
-        let orgHomePage, orgNameGiven, publicIdName, roleName, publicId;
-        // Things should have start dates but we will be very lenient in this view
-        const startDate = store.any(membership, ns.schema('startDate'));
-        const endDate = store.any(membership, ns.schema('endDate'));
-        const dates = datesAsText(startDate, endDate);
-        const organization = store.any(membership, ORG('organization'));
-        if (organization) {
-            orgNameGiven = store.anyJS(organization, ns.schema('name'));
-            orgHomePage = store.any(organization, ns.schema('uri'));
-            publicId = store.any(organization, ns.solid('publicId'));
-        }
-        if (publicId) {
-            publicIdName = store.anyJS(publicId, ns.schema('name'));
-        }
-        const orgName = publicIdName || orgNameGiven;
-        const escoRole = store.any(membership, ORG('role'));
-        if (escoRole) {
-            roleName = store.anyJS(escoRole, ns.schema('name'));
-        }
-        const roleText0 = store.anyJS(membership, ns.vcard('role'));
-        const roleText = (roleText0 && roleName) ? roleName + ' - ' + roleText0
-            : roleText0 || roleName;
-        const item = {
-            startDate: startDate, endDate, orgName, roleText, dates, orgHomePage
-        };
-        for (const t of typesOfRole) {
-            if (store.holds(membership, ns.rdf('type'), ns.solid(t))) {
-                rolesByType[t].push(item);
-            }
-        }
+  const memberships = store.each(null, ORG('member'), subject, null);
+  const rolesByType = {
+    PastRole: [],
+    CurrentRole: [],
+    FutureRole: []
+  };
+  for (const membership of memberships) {
+    let orgHomePage, orgNameGiven, publicIdName, roleName, publicId;
+    // Things should have start dates but we will be very lenient in this view
+    const startDate = store.any(membership, _solidUi.ns.schema('startDate'));
+    const endDate = store.any(membership, _solidUi.ns.schema('endDate'));
+    const dates = datesAsText(startDate, endDate);
+    const organization = store.any(membership, ORG('organization'));
+    if (organization) {
+      orgNameGiven = store.anyJS(organization, _solidUi.ns.schema('name'));
+      orgHomePage = store.any(organization, _solidUi.ns.schema('uri'));
+      publicId = store.any(organization, _solidUi.ns.solid('publicId'));
     }
-    return rolesByType;
-}
-export function presentCV(subject, store) {
-    const rolesByType = getRolesByType(store, subject);
-    // Most recent thing most relevant -> sort by end date
+    if (publicId) {
+      publicIdName = store.anyJS(publicId, _solidUi.ns.schema('name'));
+    }
+    const orgName = publicIdName || orgNameGiven;
+    const escoRole = store.any(membership, ORG('role'));
+    if (escoRole) {
+      roleName = store.anyJS(escoRole, _solidUi.ns.schema('name'));
+    }
+    const roleText0 = store.anyJS(membership, _solidUi.ns.vcard('role'));
+    const roleText = roleText0 && roleName ? roleName + ' - ' + roleText0 : roleText0 || roleName;
+    const item = {
+      startDate: startDate,
+      endDate,
+      orgName,
+      roleText,
+      dates,
+      orgHomePage
+    };
     for (const t of typesOfRole) {
-        rolesByType[t].sort(function (x, y) {
-            if (x.endDate && y.endDate) {
-                return x.endDate > y.endDate ? -1 : 1;
-            }
-            return x.startDate > y.startDate ? -1 : 1;
-        });
+      if (store.holds(membership, _solidUi.ns.rdf('type'), _solidUi.ns.solid(t))) {
+        rolesByType[t].push(item);
+      }
     }
-    const skills = store.each(subject, ns.schema('skills')).map(sk => skillAsText(store, sk));
-    const languagesInStore = store.anyJS(subject, ns.schema('knowsLanguage'));
-    let languages = [];
-    if (languagesInStore)
-        languages = languagesInStore.map(lan => languageAsText(store, lan));
-    return { rolesByType, skills, languages };
+  }
+  return rolesByType;
 }
-//# sourceMappingURL=CVPresenter.js.map
+function presentCV(subject, store) {
+  const rolesByType = getRolesByType(store, subject);
+  // Most recent thing most relevant -> sort by end date
+  for (const t of typesOfRole) {
+    rolesByType[t].sort(function (x, y) {
+      if (x.endDate && y.endDate) {
+        return x.endDate > y.endDate ? -1 : 1;
+      }
+      return x.startDate > y.startDate ? -1 : 1;
+    });
+  }
+  const skills = store.each(subject, _solidUi.ns.schema('skills')).map(sk => skillAsText(store, sk));
+  const languagesInStore = store.anyJS(subject, _solidUi.ns.schema('knowsLanguage'));
+  let languages = [];
+  if (languagesInStore) languages = languagesInStore.map(lan => languageAsText(store, lan));
+  return {
+    rolesByType,
+    skills,
+    languages
+  };
+}

package/lib/ChatWithMe.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit-html';
+import { DataBrowserContext } from 'pane-registry';
+import { NamedNode } from 'rdflib';
+export declare const ChatWithMe: (subject: NamedNode, context: DataBrowserContext) => TemplateResult;