ublo-lib 1.0.0

package/es/esf/components/instructor-suggestions/index.js

@@ -0,0 +1,181 @@
+import * as React from "react";
+import { useEffect, useState } from "react";
+import classnames from "classnames";
+import { fetchRandomInstructors } from "./fetcher";
+import { PersonIcon, ArrowDownIcon, CloseIcon, flags } from "./icons";
+import Loader from "./loader";
+import messages from "./messages";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+const InstructorSuggestions = ({
+  school,
+  lang,
+  tags,
+  size,
+  buildHref,
+  env
+}) => {
+  const [instructors, setInstructors] = useState();
+  const [instructor, setInstructor] = useState();
+  const texts = messages(lang);
+
+  const selectInstructor = instructor => () => {
+    setInstructor(instructor);
+  };
+
+  useEffect(() => {
+    const fetchInstructors = async () => {
+      if (school && lang && tags) {
+        const instructors = await fetchRandomInstructors(school, lang, tags, size, env);
+        setInstructors(instructors);
+      }
+    };
+
+    fetchInstructors();
+  }, [school, lang, tags, size, env]);
+
+  const renderDetails = () => {
+    const {
+      firstname,
+      lastname,
+      languages,
+      activities,
+      introduction,
+      description,
+      uri
+    } = instructor;
+    return _jsxs(_Fragment, {
+      children: [_jsx("div", {
+        className: "instructor-suggestions__details-close",
+        onClick: selectInstructor(),
+        children: _jsx(CloseIcon, {
+          className: "instructor-suggestions__details-close-icon"
+        })
+      }), _jsxs("div", {
+        className: "instructor-suggestions__details-data",
+        children: [_jsxs("div", {
+          className: "instructor-suggestions__details-name",
+          children: [_jsx("span", {
+            className: "instructor-suggestions__details-firstname",
+            children: firstname
+          }), " ", _jsx("span", {
+            className: "instructor-suggestions__details-lastname",
+            children: lastname
+          })]
+        }), _jsx("div", {
+          className: "instructor-suggestions__details-langs",
+          children: languages && languages.map(({
+            code,
+            label
+          }) => {
+            const Flag = flags[code];
+            return Flag ? _jsx(Flag, {
+              className: "instructor-suggestions__details-lang",
+              title: label
+            }, code) : _jsx("div", {
+              className: "instructor-suggestions__details-langtext",
+              children: label
+            }, code);
+          })
+        }), activities && _jsxs("div", {
+          className: "instructor-suggestions__details-skills",
+          children: ["Mes sp\xE9cialit\xE9s sont :", " ", activities.map(({
+            code,
+            label
+          }, index) => {
+            const length = activities.length;
+            return _jsxs("div", {
+              className: "instructor-suggestions__details-skill",
+              children: [_jsx("span", {
+                className: "instructor-suggestions__details-skillspan",
+                children: label
+              }), index < length - 2 ? ", " : index < length - 1 ? texts["instructor-suggestions-and"] : ""]
+            }, code);
+          })]
+        })]
+      }), _jsxs("div", {
+        className: "instructor-suggestions__details-description",
+        children: [_jsx("div", {
+          className: "instructor-suggestions__details-mojo",
+          dangerouslySetInnerHTML: {
+            __html: introduction
+          }
+        }), description && description.trim() !== "" && _jsxs(_Fragment, {
+          children: [_jsx("div", {
+            className: "instructor-suggestions__details-description-title",
+            children: texts["instructor-suggestions-about"]
+          }), _jsx("div", {
+            className: "instructor-suggestions__details-text",
+            dangerouslySetInnerHTML: {
+              __html: description
+            }
+          })]
+        })]
+      }), buildHref && _jsx("div", {
+        className: "instructor-suggestions__details-bottom",
+        children: _jsx("a", {
+          className: "instructor-suggestions__details-see-more",
+          href: buildHref(uri),
+          children: texts["instructor-suggestions-see-full-version"]
+        })
+      })]
+    });
+  };
+
+  const renderInstructors = () => {
+    return instructors.map(instructor => {
+      const {
+        uri,
+        photo,
+        firstname,
+        lastname
+      } = instructor;
+      return _jsx("div", {
+        className: "instructor-suggestions__instructor",
+        onClick: selectInstructor(instructor),
+        children: _jsxs("div", {
+          className: "instructor-suggestions__instructor-inner",
+          children: [_jsx("div", {
+            className: "instructor-suggestions__instructor-image-container",
+            children: photo ? _jsx("img", {
+              src: photo,
+              className: "instructor-suggestions__instructor-image",
+              alt: `${firstname}-${lastname}`
+            }) : _jsx(PersonIcon, {
+              className: "instructor-suggestions__instructor-imageplaceholder"
+            })
+          }), _jsx("div", {
+            className: "instructor-suggestions__instructor-firstname",
+            children: firstname
+          }), _jsx("div", {
+            className: "instructor-suggestions__instructor-lastname",
+            children: lastname
+          }), _jsx("div", {
+            className: "instructor-suggestions__instructor-arrow-container",
+            children: _jsx(ArrowDownIcon, {
+              className: "instructor-suggestions__instructor-arrow"
+            })
+          })]
+        })
+      }, uri);
+    });
+  };
+
+  const detailsClasses = classnames("instructor-suggestions__details", {
+    "instructor-suggestions__details__open": instructor
+  });
+  return _jsxs("div", {
+    className: "instructor-suggestions",
+    children: [_jsx("div", {
+      className: "instructor-suggestions__instructors",
+      children: instructors ? renderInstructors() : _jsx(Loader, {})
+    }), _jsx("div", {
+      className: detailsClasses,
+      children: instructor ? renderDetails() : ""
+    })]
+  });
+};
+
+export default InstructorSuggestions;

package/es/esf/components/instructor-suggestions/loader.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Loader = () => {
+  return _jsx("div", {
+    className: "instructor-suggestions-loader"
+  });
+};
+
+export default Loader;

package/es/esf/components/instructor-suggestions/messages.js

@@ -0,0 +1,16 @@
+const messages = {
+  fr: {
+    "instructor-suggestions-about": "À propos",
+    "instructor-suggestions-and": " et ",
+    "instructor-suggestions-see-full-version": "Voir la version complète"
+  },
+  en: {
+    "instructor-suggestions-about": "About",
+    "instructor-suggestions-and": " and ",
+    "instructor-suggestions-see-full-version": "See full version"
+  }
+};
+export default (lang => {
+  const l = messages[lang] === undefined ? "en" : lang;
+  return messages[l];
+});

package/es/esf/components/instructors-book/container.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import Link from "./link";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Container = ({
+  trombi,
+  children,
+  ...props
+}) => {
+  return trombi ? _jsxs("div", { ...props,
+    children: [" ", children]
+  }) : _jsx(Link, { ...props,
+    children: children
+  });
+};
+
+export default Container;

package/es/esf/components/instructors-book/details.js

@@ -0,0 +1,120 @@
+import * as React from "react";
+import Link from "./link";
+import { flags, BackIcon, PersonIcon } from "./icons";
+import getMessage from "./messages";
+import { formatNames } from "./utils";
+import Loader from "./loader";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+const Details = ({
+  instructor,
+  lang,
+  backToList
+}) => {
+  const texts = getMessage(lang);
+
+  const renderInstructor = () => {
+    const {
+      firstname,
+      lastname,
+      photo,
+      languages,
+      activities,
+      introduction,
+      description,
+      uri
+    } = instructor;
+    return _jsxs(_Fragment, {
+      children: [_jsx("div", {
+        className: "instructors-book-details__background-frieze"
+      }, "background"), _jsxs("div", {
+        className: "instructors-book-details__inner",
+        children: [_jsxs("div", {
+          className: "instructors-book-details__data",
+          children: [_jsx(Link, { ...backToList(uri),
+            className: "instructors-book-details__back",
+            "data-tooltip": texts["instructors-book-back-to-list"],
+            children: _jsx(BackIcon, {
+              className: "instructors-book-details__back-icon"
+            })
+          }), _jsxs("div", {
+            className: "instructors-book-details__name",
+            children: [_jsxs("span", {
+              className: "instructors-book-details__firstname",
+              children: [formatNames(firstname), " "]
+            }), _jsx("span", {
+              className: "instructors-book-details__lastname",
+              children: lastname
+            })]
+          }), _jsx("div", {
+            className: "instructors-book-details__picture-container",
+            children: photo ? _jsx("img", {
+              src: photo,
+              className: "instructors-book-details__picture",
+              alt: `${firstname}-${lastname}`
+            }) : _jsx(PersonIcon, {
+              className: "instructors-book-details__pictureplaceholder"
+            })
+          }), _jsx("div", {
+            className: "instructors-book-details__langs",
+            children: languages && languages.map(({
+              code,
+              label
+            }) => {
+              const Flag = flags[code];
+              return Flag ? _jsx(Flag, {
+                className: "instructors-book-details__lang",
+                title: label
+              }, code) : _jsx("div", {
+                className: "instructors-book-details__langtext",
+                children: label
+              }, code);
+            })
+          }), activities && _jsxs("div", {
+            className: "instructors-book-details__skills",
+            children: [texts["instructors-book-activities"], activities.map(({
+              code,
+              label
+            }, index) => {
+              const length = activities.length;
+              return _jsxs("div", {
+                className: "instructors-book-details__skill",
+                children: [_jsx("span", {
+                  className: "instructors-book-details__skillspan",
+                  children: label
+                }), index < length - 2 ? ", " : index < length - 1 ? texts["instructors-book-and"] : ""]
+              }, code);
+            })]
+          })]
+        }), _jsxs("div", {
+          className: "instructors-book-details__description",
+          children: [_jsx("div", {
+            className: "instructors-book-details__mojo",
+            dangerouslySetInnerHTML: {
+              __html: introduction
+            }
+          }), description && description.trim() !== "" && _jsxs(_Fragment, {
+            children: [_jsx("div", {
+              className: "instructors-book-details__description-title",
+              children: texts["instructors-book-about"]
+            }), _jsx("div", {
+              className: "instructors-book-details__text",
+              dangerouslySetInnerHTML: {
+                __html: description
+              }
+            })]
+          })]
+        })]
+      }, "details")]
+    });
+  };
+
+  return instructor ? _jsx("div", {
+    className: "instructors-book-details",
+    children: renderInstructor()
+  }) : _jsx(Loader, {});
+};
+
+export default Details;

package/es/esf/components/instructors-book/icons.js

@@ -0,0 +1,266 @@
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const SvgIcon = ({
+  title,
+  ...props
+}) => _jsxs("svg", {
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [title && _jsx("title", {
+    children: title
+  }), props.children]
+});
+
+export const PersonIcon = props => _jsx(SvgIcon, { ...props,
+  children: _jsx("path", {
+    d: "M12 4c2.7614 0 5 2.23858 5 5 0 2.7614-2.2386 5-5 5-2.76142 0-5-2.2386-5-5 0-2.76142 2.23858-5 5-5m0 12.5c5.525 0 10 2.2375 10 5V24H2v-2.5c0-2.7625 4.475-5 10-5z"
+  })
+});
+export const OverlayIcon = props => _jsx(SvgIcon, { ...props,
+  children: _jsx("path", {
+    d: "M15.5 14h-.8l-.3-.3c1-1.1 1.6-2.6 1.6-4.2a6.5 6.5 0 10-2.3 5l.3.2v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"
+  })
+});
+export const BackIcon = props => _jsx(SvgIcon, { ...props,
+  children: _jsx("path", {
+    d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
+  })
+});
+
+const ArFlag = props => _jsxs(SvgIcon, { ...props,
+  children: [_jsx("path", {
+    d: "M0 3h24v6H0V3z",
+    fill: "#000"
+  }), _jsx("path", {
+    d: "M0 9h24v6H0V9z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M0 15h24v6H0v-6z",
+    fill: "#00732F"
+  })]
+});
+
+const CnFlag = props => _jsxs(SvgIcon, { ...props,
+  children: [_jsx("path", {
+    d: "M0 3h24v18H0V3z",
+    fill: "#DE2910"
+  }), _jsx("path", {
+    d: "M2.91 9.69L4.5 4.8l1.59 4.89-4.16-3.03h5.14L2.91 9.7zM9.9 4.88l-1.66.38 1.12-1.29-.15 1.7-.88-1.46 1.58.67zM11.6 7.01l-1.7-.3 1.55-.74-.8 1.51-.25-1.7 1.2 1.23zM11.35 10.01l-1.42-.96L11.64 9l-1.35 1.06.48-1.65.58 1.61zM9.24 11.97l-.95-1.43 1.6.6-1.65.46 1.08-1.34-.08 1.71z",
+    fill: "#FFDE00"
+  })]
+});
+
+const DeFlag = props => _jsxs(SvgIcon, { ...props,
+  children: [_jsx("path", {
+    d: "M0 15h24v6H0v-6z",
+    fill: "#FFCE00"
+  }), _jsx("path", {
+    d: "M0 3h24v6H0V3z",
+    fill: "#000"
+  }), _jsx("path", {
+    d: "M0 9h24v6H0V9z",
+    fill: "#D00"
+  })]
+});
+
+const DkFlag = props => _jsxs(SvgIcon, { ...props,
+  children: [_jsx("path", {
+    d: "M0 3h24v18H0V3z",
+    fill: "#C60C30"
+  }), _jsx("path", {
+    d: "M7.7 3h2.6v18H7.7V3z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M0 10.7h24v2.6H0v-2.6z",
+    fill: "#fff"
+  })]
+});
+
+const EsFlag = props => _jsxs(SvgIcon, { ...props,
+  children: [_jsx("path", {
+    d: "M0 3h24v18H0V3z",
+    fill: "#C60B1E"
+  }), _jsx("path", {
+    d: "M0 7.5h24v9H0v-9z",
+    fill: "#FFC400"
+  })]
+});
+
+const FrFlag = props => _jsxs(SvgIcon, { ...props,
+  children: [_jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 3h24v18H0V3z",
+    fill: "#fff"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 3h8v18H0V3z",
+    fill: "#00267F"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 3h8v18h-8V3z",
+    fill: "#F31830"
+  })]
+});
+
+const EnFlag = props => _jsxs(SvgIcon, { ...props,
+  children: [_jsx("path", {
+    d: "M-6 3h36v18H-6V3z",
+    fill: "#006"
+  }), _jsx("path", {
+    d: "M-6 3v2l32 16h4v-2L-2 3h-4zm36 0v2L-2 21h-4v-2L26 3h4z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M9 3v18h6V3H9zM-6 9v6h36V9H-6z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M-6 10.2v3.6h36v-3.6H-6zM10.2 3v18h3.6V3h-3.6zM-7 21l11-6h3l-11 6h-3zm1-18.5L7 9H4.5L-6 4V2.5zM16.5 9l12-6H31L19 9h-2.5zM30 21.5L17 15h3l10 5v1.5z",
+    fill: "#C00"
+  })]
+});
+
+const IlFlag = props => _jsxs(SvgIcon, { ...props,
+  children: [_jsx("path", {
+    d: "M25 21H-1V3H25v18z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M25 7H-1V4.8H25V7zm0 12.4H-1V17H25v2.4zM7.8 9.7l3.9 6.8 4-6.7h-8z",
+    fill: "#00C"
+  }), _jsx("path", {
+    d: "M11 14.2l.8 1.3.7-1.3H11z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M7.9 14.3l3.9-6.8 4 6.8h-8z",
+    fill: "#00C"
+  }), _jsx("path", {
+    d: "M11 9.8l.8-1.3.7 1.2H11zm-1.5 2.8l-.8 1.2h1.5l-.7-1.2zm-.8-2.4h1.5l-.7 1.3-.8-1.3zm5.4 2.4l.7 1.2h-1.5l.8-1.2zm.7-2.4h-1.5l.7 1.3.8-1.3zm-4 0l-1 1.8 1 1.8h1.8l1.2-1.8-1-1.8h-2z",
+    fill: "#fff"
+  })]
+});
+
+const ItFlag = props => _jsxs(SvgIcon, { ...props,
+  children: [_jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 3h24v18H0V3z",
+    fill: "#fff"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 3h8v18H0V3z",
+    fill: "#009246"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 3h8v18h-8V3z",
+    fill: "#CE2B37"
+  })]
+});
+
+const JpFlag = props => _jsxs(SvgIcon, { ...props,
+  children: [_jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M-1.5 3h27v18h-27V3z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M12 17.6a5.6 5.6 0 100-11.2 5.6 5.6 0 000 11.2z",
+    fill: "#D30000"
+  })]
+});
+
+const NlFlag = props => _jsxs(SvgIcon, { ...props,
+  children: [_jsx("path", {
+    d: "M24 3H0v18h24V3z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M24 15H0v6h24v-6z",
+    fill: "#21468B"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 3h24v6H0V3z",
+    fill: "#AE1C28"
+  })]
+});
+
+const PlFlag = props => _jsxs(SvgIcon, { ...props,
+  children: [_jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 21H0V3h24v18z",
+    fill: "#fff"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 21H0v-9h24v9z",
+    fill: "#DC143C"
+  })]
+});
+
+const PtFlag = props => _jsxs(SvgIcon, { ...props,
+  children: [_jsx("path", {
+    d: "M9.6 3H24v18H9.6V3z",
+    fill: "red"
+  }), _jsx("path", {
+    d: "M0 3h9.6v18H0V3z",
+    fill: "#060"
+  })]
+});
+
+const RuFlag = props => _jsxs(SvgIcon, { ...props,
+  children: [_jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 3h24v18H0V3z",
+    fill: "#fff"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 9h24v12H0V9z",
+    fill: "#0039A6"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 15h24v6H0v-6z",
+    fill: "#D52B1E"
+  })]
+});
+
+const SeFlag = props => _jsxs(SvgIcon, { ...props,
+  children: [_jsx("path", {
+    d: "M-2.4 3h9v7.2h-9V3zm0 10.8h9V21h-9v-7.2z",
+    fill: "#006AA7"
+  }), _jsx("path", {
+    d: "M-2.4 10.2h9v3.6h-9v-3.6zM6.6 3h3.6v18H6.6V3z",
+    fill: "#FECC00"
+  }), _jsx("path", {
+    d: "M10 10.2h16.3v3.6H10v-3.6z",
+    fill: "#FECC00"
+  }), _jsx("path", {
+    d: "M10.2 13.8h16.2V21H10.2v-7.2zm0-10.8h16.2v7.2H10.2V3z",
+    fill: "#006AA7"
+  })]
+});
+
+export const flags = {
+  ar: ArFlag,
+  cn: CnFlag,
+  de: DeFlag,
+  dk: DkFlag,
+  en: EnFlag,
+  es: EsFlag,
+  fr: FrFlag,
+  il: IlFlag,
+  it: ItFlag,
+  jp: JpFlag,
+  nl: NlFlag,
+  pl: PlFlag,
+  pt: PtFlag,
+  ru: RuFlag,
+  se: SeFlag
+};

package/es/esf/components/instructors-book/index.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+import List from "./list";
+import Details from "./details";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const InstructorsBook = props => {
+  return _jsx("div", {
+    className: "instructors-book",
+    children: props.instructor ? _jsx(Details, { ...props
+    }) : props.instructors ? _jsx(List, { ...props
+    }) : "No data"
+  });
+};
+
+export default InstructorsBook;

package/es/esf/components/instructors-book/link.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Link = ({
+  Link,
+  linkProps,
+  children,
+  ...props
+}) => {
+  return Link !== undefined ? _jsx(Link, { ...linkProps,
+    children: children
+  }) : _jsx("a", { ...props,
+    children: children
+  });
+};
+
+export default Link;

package/es/esf/components/instructors-book/list-utils.js

@@ -0,0 +1,21 @@
+const strStartWith = (str1, str2) => str1.toLowerCase().trim().startsWith(str2.toLowerCase().trim());
+
+const strEquals = (str1, str2) => str1.toLowerCase().trim() === str2.toLowerCase().trim();
+
+const match = (searchingArray, entries) => {
+  return searchingArray.reduce((acc, str, index) => {
+    const matched = index === searchingArray.length - 1 ? strStartWith : strEquals;
+    return acc && entries.some(entry => matched(entry, str));
+  }, true);
+};
+
+export const filter = (project, search = "") => {
+  const searchingArray = search.split(" ");
+  const filtered = project.all.filter(uri => {
+    const instructor = project.byUri[uri];
+    const firstnameWords = instructor.firstname.split(" ");
+    const lastnameWords = instructor.lastname.split(" ");
+    return match(searchingArray, [...firstnameWords, ...lastnameWords]);
+  });
+  return filtered.reduce((acc, uri) => [...acc, project.byUri[uri]], []);
+};