ublo-lib 1.7.7 → 1.7.9

package/es/common/components/carousel.js

@@ -116,7 +116,7 @@ const Carousel = ({
   const [dragging, setDragging] = React.useState(0);
   const editing = cmsMode === "editing";
   const draggingAllowed = !editing && allowDragOnDesktop;
-  const targets = editing ? "section" : "section:not([data-hidden])";
+  const targets = "section[data-class]";
   const showNextArrow = current < count - 1;
   const showPrevArrow = current !== 0;
   const next = React.useCallback(e => {

package/es/esf/components/levels/detail.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+import css from "./detail.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Detail = ({
+  detail
+}) => {
+  return _jsxs("div", {
+    className: css.container,
+    children: [_jsxs("div", {
+      className: css.header,
+      children: [_jsx("div", {
+        className: css.bar,
+        children: _jsx("div", {
+          className: css.name,
+          children: detail.nom
+        })
+      }), _jsx("div", {
+        className: css.univers,
+        children: detail.univers
+      })]
+    }), _jsxs("div", {
+      className: css.content,
+      children: [_jsx("div", {
+        dangerouslySetInnerHTML: {
+          __html: detail.description
+        }
+      }), detail.video && _jsx("iframe", {
+        src: `https://www.youtube-nocookie.com/embed/${detail.video}?rel=0`,
+        frameBorder: 0,
+        allowFullScreen: true,
+        title: "video"
+      })]
+    })]
+  });
+};
+export default Detail;

package/es/esf/components/levels/detail.module.css

@@ -0,0 +1,154 @@
+.container {
+  width: 100%;
+  max-width: 800px;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+}
+.header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1px solid var(--msem-color-mediumlight);
+  padding: 15px 0;
+  gap: 5px;
+}
+.imageOuter {
+  margin-top: -85px;
+  border-radius: 8px;
+  border: 2px solid var(--msem-color-mediumlight);
+  background-color: var(--msem-color-lightest);
+  width: 150px;
+  flex: 0 0 115px;
+}
+.imageOuter > img {
+  border-radius: 8px;
+  width: 150px;
+  height: 115px;
+}
+.bar {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+.prev,
+.next {
+  display: flex;
+  flex: 1 1 100%;
+  font-size: 12px;
+  align-items: center;
+  cursor: pointer;
+  color: var(--msem-color-dark);
+}
+.prev:hover,
+.next:hover {
+  color: var(--msem-color-primary);
+}
+.prev {
+  justify-content: flex-start;
+  margin-right: auto;
+}
+.next {
+  justify-content: flex-end;
+  margin-left: auto;
+}
+.name {
+  font-weight: 700;
+  font-size: 30px;
+  color: var(--msem-color-darkest);
+  white-space: nowrap;
+}
+.univers {
+  color: var(--msem-color-primary);
+  font-size: 12px;
+  text-transform: uppercase;
+  font-weight: bold;
+  letter-spacing: 2px;
+}
+.content {
+  width: 100%;
+  overflow-y: scroll;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  font-size: 14px;
+}
+
+.content > iframe {
+  width: 100%;
+  aspect-ratio: 16/9;
+}
+.content :global(.level_catchphrase) {
+  font-weight: bold;
+  padding-bottom: 10px;
+}
+.content p {
+  margin: 5px 0;
+}
+.content i {
+  font-size: 11px;
+}
+.content b {
+  display: inline-block;
+  padding-top: 10px;
+}
+.content em {
+  display: inline-block;
+  padding-top: 10px;
+  font-style: normal;
+  font-weight: bold;
+}
+.content li > em {
+  display: inline;
+  font-style: italic;
+  font-weight: normal;
+}
+.content ul {
+  padding: 0;
+}
+.content li {
+  background: url(level-bullet.svg) no-repeat 0 2px;
+  list-style-type: none;
+  line-height: 1.4;
+  padding: 0 0 10px 25px;
+  margin: 0;
+}
+
+@media (max-width: 400px) {
+  .overlay {
+    padding: 0;
+  }
+  .imageOuter {
+    margin-top: 0;
+  }
+  .dialog {
+    padding: 0;
+    border-radius: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-height: 100%;
+  }
+  .close {
+    top: 10px;
+    right: 10px;
+    border-radius: 0;
+  }
+  .content {
+    width: auto;
+    padding: 0 20px;
+  }
+  .prev > span,
+  .next > span {
+    display: none;
+  }
+  .prev,
+  .next {
+    flex: 0 0 24px;
+  }
+}

package/es/esf/components/levels/index.js

@@ -0,0 +1,2 @@
+import Levels from "./levels";
+export default Levels;

package/es/esf/components/levels/level-bullet.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.8 2.2A7.45 7.45 0 0 0 7.5 0c-2 0-3.89.78-5.3 2.2A7.45 7.45 0 0 0 0 7.5c0 2 .78 3.89 2.2 5.3A7.45 7.45 0 0 0 7.5 15c2 0 3.89-.78 5.3-2.2A7.45 7.45 0 0 0 15 7.5c0-2-.78-3.89-2.2-5.3ZM7.5 14.12A6.63 6.63 0 1 1 7.51.86a6.63 6.63 0 0 1-.01 13.26Z" fill="#00C553"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.08 5.1a.44.44 0 0 0-.62 0L6.58 8.96 4.54 6.93a.44.44 0 0 0-.62.62l2.35 2.36a.44.44 0 0 0 .62 0l4.2-4.2a.44.44 0 0 0 0-.62Z" fill="#00C553"/>
+</svg>

package/es/esf/components/{levels.js → levels/levels.js}

@@ -1,28 +1,84 @@
 import * as React from "react";
-import { useState, useEffect } from "react";
 import classnames from "classnames";
+import Detail from "./detail";
 import { useUbloContext } from "ublo/with-ublo";
 import { fetchMenus, fetchZones } from "ublo/fetcher";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const LEVELS = {
+  pioupiou: "ALPPIO",
+  blanchot: "ALPBLA",
+  sifflote: "ALPSIF",
+  garolou: "ALPGAR",
+  ourson: "ALPOUR",
+  flocon: "ALPFLO",
+  "1-star": "ALPET1",
+  "2-star": "ALPET2",
+  "3-star": "ALPET3",
+  "bronze-star": "ALPETB",
+  "silver-star": "ALPETA",
+  "gold-star": "ALPETO",
+  "1-ski": "ALPCL1",
+  "1-degree": "ALPCL2",
+  "2-degree": "ALPCL3",
+  "3-degree": "ALPCL4",
+  "goomie-rider": "SNOGOO",
+  "rookie-rider": "SNOROO",
+  "izzy-rider": "SNOIZZ",
+  "snowboard-discovery": "SNODEC",
+  "1-snowboard": "SNOSN1",
+  "2-snowboard": "SNOEN2",
+  "3-snowboard": "SNOEN3",
+  "snowboard-expert": "SNOEXP",
+  "ptit-freestyler": "SNOEN2",
+  "freestyler-inter": "SNOEN3",
+  freestyler: "FREE",
+  "freestyler-expert": "FREEXP",
+  "freestyler-pro": "FREPRO",
+  "ourson-nordic": "NOROUR",
+  "flocon-nordic": "NORFLO",
+  "1-star-nordic": "NORET1",
+  "2-star-nordic": "NORET2",
+  "3-star-nordic": "NORET3",
+  "bronze-star-nordic": "NORETB",
+  "gold-star-nordic": "NORETO",
+  "1-ski-nordic": "NORDEB",
+  "1-degree-nordic": "NORCL1",
+  "2-degree-nordic": "NORCL2",
+  "3-degree-nordic": "NORCL3",
+  "biathlon-level": "BIAAR"
+};
+
 const LevelDetail = ({
-  selectedLevel,
-  contents
+  code
 }) => {
-  const zoneId = `detail-${selectedLevel}`;
-  const content = contents[zoneId];
-  return _jsx("div", {
-    className: "evaluate-level__detail",
-    dangerouslySetInnerHTML: {
-      __html: content
+  const {
+    lang
+  } = useUbloContext();
+  const [detail, setDetail] = React.useState();
+  const levelLang = lang === "fr" ? lang : "en";
+  React.useEffect(() => {
+    if (code) {
+      const getDetail = async () => {
+        const endpoint = `https://services.msem.tech/api/esf-wiki/${levelLang}/niveau/${code}`;
+        const result = await fetch(endpoint);
+        const json = await result.json();
+        setDetail(json);
+      };
+      getDetail();
     }
+  }, [code, levelLang]);
+  if (!detail) return null;
+  return _jsx(Detail, {
+    detail: detail
   });
 };
 const Level = ({
   level,
   contents,
   setSelectedLevel,
-  selectedLevel
+  selectedLevel,
+  levelRef
 }) => {
   const {
     name,
@@ -30,14 +86,30 @@ const Level = ({
   } = level;
   const zoneId = `photo-${name}`;
   const content = contents[zoneId];
-  const clicked = name => e => setSelectedLevel(name);
+  const clicked = name => e => {
+    if (levelRef.current) {
+      levelRef.current.scrollIntoView({
+        behaviour: "smooth",
+        block: "center",
+        inline: "center"
+      });
+    }
+    setSelectedLevel(name);
+  };
   const selected = name === selectedLevel;
   const levelClasses = classnames("evaluate-level__level", {
     "evaluate-level__level--selected": selected
   });
+  const hasContent = (name in LEVELS);
+  const styles = hasContent ? undefined : {
+    pointerEvents: "none",
+    touchAction: "none"
+  };
+  const onClick = hasContent ? clicked(name) : undefined;
   return _jsxs("div", {
     className: levelClasses,
-    onClick: clicked(name),
+    style: styles,
+    onClick: onClick,
     children: [_jsx("h3", {
       className: "evaluate-level__level-title",
       children: title
@@ -55,7 +127,8 @@ const Levels = ({
   selectedActivity,
   selectedAge,
   setSelectedLevel,
-  selectedLevel
+  selectedLevel,
+  levelRef
 }) => {
   return _jsxs("div", {
     className: "evaluate-level__levels",
@@ -65,13 +138,15 @@ const Levels = ({
         children: selectedAge.title
       })]
     }), _jsx("div", {
+      ref: levelRef,
       className: "evaluate-level__levels-outer",
       children: levels.map(level => {
         return _jsx(Level, {
           level: level,
           contents: contents,
           setSelectedLevel: setSelectedLevel,
-          selectedLevel: selectedLevel
+          selectedLevel: selectedLevel,
+          levelRef: levelRef
         }, level.name);
       })
     })]
@@ -156,12 +231,13 @@ const EvaluateLevel = ({
     ubloApi,
     site
   } = config;
-  const [activities, setActivities] = useState([]);
-  const [levels, setLevels] = useState([]);
-  const [contents, setContents] = useState({});
-  const [selectedActivity, setSelectedActivity] = useState({});
-  const [selectedAge, setSelectedAge] = useState({});
-  const [selectedLevel, setSelectedLevel] = useState();
+  const levelRef = React.useRef(null);
+  const [activities, setActivities] = React.useState([]);
+  const [levels, setLevels] = React.useState([]);
+  const [contents, setContents] = React.useState({});
+  const [selectedActivity, setSelectedActivity] = React.useState({});
+  const [selectedAge, setSelectedAge] = React.useState({});
+  const [selectedLevel, setSelectedLevel] = React.useState();
   const activityChanged = activity => {
     const {
       name
@@ -177,7 +253,7 @@ const EvaluateLevel = ({
     setLevels([]);
     setSelectedLevel();
   };
-  useEffect(() => {
+  React.useEffect(() => {
     const activitiesLoaded = activities.length > 0;
     if (menu !== undefined && activitiesLoaded) {
       const isFreestyle = menu.split("/").length - 1 === 2;
@@ -200,13 +276,13 @@ const EvaluateLevel = ({
       }
     }
   }, [activities, menu]);
-  useEffect(() => {
+  React.useEffect(() => {
     const getActivities = async () => {
       setActivities(await fetchMenus(ubloApi, site, lang, "/levels", 2));
     };
     getActivities();
   }, [lang, site, ubloApi]);
-  useEffect(() => {
+  React.useEffect(() => {
     const {
       menu
     } = selectedAge;
@@ -219,6 +295,7 @@ const EvaluateLevel = ({
       getLevels();
     }
   }, [lang, selectedAge, site, ubloApi]);
+  const selectedLevelCode = LEVELS[selectedLevel];
   return _jsxs("div", {
     className: "evaluate-level",
     children: [!menu && _jsx(Activities, {
@@ -233,10 +310,10 @@ const EvaluateLevel = ({
       selectedActivity: selectedActivity,
       selectedAge: selectedAge,
       setSelectedLevel: setSelectedLevel,
-      selectedLevel: selectedLevel
-    }), selectedLevel && _jsx(LevelDetail, {
       selectedLevel: selectedLevel,
-      contents: contents
+      levelRef: levelRef
+    }), selectedLevel && _jsx(LevelDetail, {
+      code: selectedLevelCode
     })]
   });
 };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "ublo-lib",
-  "version": "1.7.7",
+  "version": "1.7.9",
   "peerDependencies": {
     "dt-design-system": "^2.1.0",
-    "next": "^12.0.0",
+    "next": "^12.0.0 || ^13.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ublo": "^2.0.0 || ^3.0.0"
@@ -45,9 +45,9 @@
   "scripts": {
     "clean": "rm -rf es",
     "build": "babel src -x '.js,.ts,.tsx' -d es && tsc",
-    "postbuild": "cpx 'src/**/*.{json,css}' es",
+    "postbuild": "cpx 'src/**/*.{json,css,svg}' es",
     "prepublishOnly": "yarn clean && yarn build",
-    "watch": "yarn clean && babel ./src -x '.js,.ts,.tsx' -d es -w & cpx './src/**/*.{json,css}' es -w",
+    "watch": "yarn clean && babel ./src -x '.js,.ts,.tsx' -d es -w & cpx './src/**/*.{json,css,svg}' es -w",
     "lint": "eslint 'src/**/*.{js, ts, tsx}'"
   },
   "packageManager": "yarn@1.22.18",