@tmf_ciclica/ciclicastorybook 1.0.12 → 1.0.14

package/src/components/IndicatorsList/IndicatorsList.stories.jsx

@@ -1,263 +0,0 @@
-import { IndicatorsList } from "./IndicatorsList"
-import Indicadores from "../../constants/indicators"
-export default {
-  title: "Components/IndicatorsList",
-  component: IndicatorsList,
-}
-
-export const Default = {
-  args: {
-    indicators: Indicadores,
-    // activeColor: "#f75321",
-    activeColor: "#F8A925",
-    defaultColor: "#605B56",
-    multiple: false,
-    onChange: (indicator) => {
-      console.log("onChange indicators: ", indicator)
-    },
-    defaultValue: {
-      ikey: 0, //ikey asociada al indicador
-      name: "indicators.us_prn.title", //título del indicador referenciado al archivo locales (traducción)
-      code: ["us_prn"], //código del indicador en el archivo json de las tiles
-      type: "cat", //tipo del indicador. Puede ser-> 'cat' (categorizado), 'abs' (valor absoluto), 'both' (indicador con las dos opciones), 'twoUnits' (indicator abs con 2 unidades distintas)
-      category: "Arq", //ERESE: Categoria a la que pertenece el indicador. Puede ser -> 'Arq' (Arquitectónica), 'Ene' (Energética), 'Eco' (Económica), 'Ide' (Identificación).
-      category_ods: "ODS_00", //ODS:
-      category_aue: "AUE_00", //AUE:
-      values: [
-        //por cada uno de los posibles valores o categorías creamos un objeto con el color asociado, el código o códigos (array) del archivo tiles y su título (referencia a locales)
-        {
-          fillColor: "#FEB740",
-          codename: ["Residencial", "VincViv"],
-          title: "indicators.us_prn.Residencial",
-        },
-        {
-          fillColor: "#033364",
-          codename: ["Público"],
-          title: "indicators.us_prn.Public",
-        },
-        {
-          fillColor: "#5190cb",
-          codename: ["EnseñanzaCultural"],
-          title: "indicators.us_prn.EnsenyamentCultural",
-        },
-        {
-          fillColor: "#18ae9a",
-          codename: ["Deportivo", "Piscinas"],
-          title: "indicators.us_prn.Esportiu",
-        },
-        {
-          fillColor: "#850d15",
-          codename: ["Comercial"],
-          title: "indicators.us_prn.Comercial",
-        },
-        {
-          fillColor: "#ee2e39",
-          codename: ["HoteleroRestauración"],
-          title: "indicators.us_prn.HotelerRestauracio",
-        },
-        {
-          fillColor: "#ed602e",
-          codename: ["Oficinas"],
-          title: "indicators.us_prn.Oficines",
-        },
-        {
-          fillColor: "#843059",
-          codename: ["Almacenaje"],
-          title: "indicators.us_prn.Emmagatzematge",
-        },
-        {
-          fillColor: "#CB719D",
-          codename: ["Industrial", "IndustrialResto"],
-          title: "indicators.us_prn.Industrial",
-        },
-        {
-          fillColor: "#7f7f7f",
-          codename: ["Aparcamiento"],
-          title: "indicators.us_prn.Aparcament",
-        },
-        {
-          fillColor: "#dadae3",
-          codename: [
-            "OtrosCal",
-            "OtrosNoCal",
-            "Común",
-            "Sin datos",
-            "",
-            "None",
-            "null",
-            "undefined",
-            " ",
-            "NoCodificado",
-          ],
-          title: "indicators.us_prn.None",
-        },
-      ],
-      time: false,
-    },
-  },
-}
-
-export const Multiple = {
-  args: {
-    indicators: Indicadores,
-    // activeColor: "#f75321",
-    activeColor: "#F8A925",
-    defaultColor: "#605B56",
-    multiple: true,
-    onChange: (indicator) => {
-      console.log("onChange indicators: ", indicator)
-    },
-    defaultValue: [
-      {
-        ikey: 6,
-        name: "indicators.cal.title",
-        code: ["demanda_cal_m2"],
-        type: "abs",
-        category: "Ene",
-        category_ods: "ODS_07",
-        category_aue: "AUE_04",
-        maxColor: "#EE2C3C",
-        midColor: "#FDB740",
-        minColor: "#00544A",
-        minValue: 1,
-        maxValue: 120,
-        minValueIndicador: "indicators.cal.minValueIndicador",
-        maxValueIndicador: "indicators.cal.maxValueIndicador",
-        unit: "indicators.cal.unit",
-        time: true,
-        values: [
-          {
-            fillColor: "#00544A",
-            codename: ["Menos de 20 kWh/m2"],
-            title: "indicators.demanda_cal_m2.<20",
-          },
-          {
-            fillColor: "#386A48",
-            codename: ["Entre 20 y 40 kWh/m2"],
-            title: "indicators.demanda_cal_m2.20-40",
-          },
-          {
-            fillColor: "#708046",
-            codename: ["Entre 40 y 60 kWh/m2"],
-            title: "indicators.demanda_cal_m2.40-60",
-          },
-          {
-            fillColor: "#A99643",
-            codename: ["Entre 60 y 80 kWh/m2"],
-            title: "indicators.demanda_cal_m2.60-80",
-          },
-          {
-            fillColor: "#E1AC41",
-            codename: ["Entre 80 y 100 kWh/m2"],
-            title: "indicators.demanda_cal_m2.80-100",
-          },
-          {
-            fillColor: "#FBA840",
-            codename: ["Entre 100 y 120 kWh/m2"],
-            title: "indicators.demanda_cal_m2.100-120",
-          },
-          {
-            fillColor: "#F8893F",
-            codename: ["Entre 120 y 140 kWh/m2"],
-            title: "indicators.demanda_cal_m2.120-140",
-          },
-          {
-            fillColor: "#F56A3E",
-            codename: ["Entre 140 y 160 kWh/m2"],
-            title: "indicators.demanda_cal_m2.140-160",
-          },
-          {
-            fillColor: "#F14B3D",
-            codename: ["Entre 160 y 180 kWh/m2"],
-            title: "indicators.demanda_cal_m2.160-180",
-          },
-          {
-            fillColor: "#EE2C3C",
-            codename: ["Más de 180 kWh/m2"],
-            title: "indicators.demanda_cal_m2.>180",
-          },
-        ],
-      },
-
-      {
-        ikey: 0, //ikey asociada al indicador
-        name: "indicators.us_prn.title", //título del indicador referenciado al archivo locales (traducción)
-        code: ["us_prn"], //código del indicador en el archivo json de las tiles
-        type: "cat", //tipo del indicador. Puede ser-> 'cat' (categorizado), 'abs' (valor absoluto), 'both' (indicador con las dos opciones), 'twoUnits' (indicator abs con 2 unidades distintas)
-        category: "Arq", //ERESE: Categoria a la que pertenece el indicador. Puede ser -> 'Arq' (Arquitectónica), 'Ene' (Energética), 'Eco' (Económica), 'Ide' (Identificación).
-        category_ods: "ODS_00", //ODS:
-        category_aue: "AUE_00", //AUE:
-        values: [
-          //por cada uno de los posibles valores o categorías creamos un objeto con el color asociado, el código o códigos (array) del archivo tiles y su título (referencia a locales)
-          {
-            fillColor: "#FEB740",
-            codename: ["Residencial", "VincViv"],
-            title: "indicators.us_prn.Residencial",
-          },
-          {
-            fillColor: "#033364",
-            codename: ["Público"],
-            title: "indicators.us_prn.Public",
-          },
-          {
-            fillColor: "#5190cb",
-            codename: ["EnseñanzaCultural"],
-            title: "indicators.us_prn.EnsenyamentCultural",
-          },
-          {
-            fillColor: "#18ae9a",
-            codename: ["Deportivo", "Piscinas"],
-            title: "indicators.us_prn.Esportiu",
-          },
-          {
-            fillColor: "#850d15",
-            codename: ["Comercial"],
-            title: "indicators.us_prn.Comercial",
-          },
-          {
-            fillColor: "#ee2e39",
-            codename: ["HoteleroRestauración"],
-            title: "indicators.us_prn.HotelerRestauracio",
-          },
-          {
-            fillColor: "#ed602e",
-            codename: ["Oficinas"],
-            title: "indicators.us_prn.Oficines",
-          },
-          {
-            fillColor: "#843059",
-            codename: ["Almacenaje"],
-            title: "indicators.us_prn.Emmagatzematge",
-          },
-          {
-            fillColor: "#CB719D",
-            codename: ["Industrial", "IndustrialResto"],
-            title: "indicators.us_prn.Industrial",
-          },
-          {
-            fillColor: "#7f7f7f",
-            codename: ["Aparcamiento"],
-            title: "indicators.us_prn.Aparcament",
-          },
-          {
-            fillColor: "#dadae3",
-            codename: [
-              "OtrosCal",
-              "OtrosNoCal",
-              "Común",
-              "Sin datos",
-              "",
-              "None",
-              "null",
-              "undefined",
-              " ",
-              "NoCodificado",
-            ],
-            title: "indicators.us_prn.None",
-          },
-        ],
-        time: false,
-      },
-    ],
-  },
-}

package/src/components/LangSelector/LangSelector.jsx

@@ -1,70 +0,0 @@
-/*
-Menú de selección de idioma. Cambia el idioma de la aplicación usando la propiedad i18n
-Recibe: 
-Langs-> array de los idiomas, con code (código de i18n), title (título para el menú), titleSelected (título para cuando está seleccionado, si varía del title)
-arrow-> imagen de la flecha de despliegue del menú
-imgPrev-> imagen previa al texto de idioma seleccionado (opcional)
-Su css utiliza variables de la aplicación que habrá que incluirlas en el archivo variables.scss:
-$langColor
-$langBckColor
-$langSelectedColor;
-$langHoverColor
-$langHoverBckColor
-
-*/
-import PropTypes from "prop-types"
-import { useState } from "react"
-import { useTranslation } from "react-i18next"
-//styles
-import style from "./LangSelector.module.scss"
-export const LangSelector = ({ langs, arrow, imgPrev }) => {
-  const [showMenu, setshowMenu] = useState(false)
-  const { i18n } = useTranslation()
-
-  const currentLang = langs.find((l) => l.code == i18n.language)
-  const handleClick = (code) => {
-    i18n.changeLanguage(code)
-    setshowMenu(false)
-  }
-  return (
-    <div className={style.langSelector}>
-      <div
-        className={style.currentLang}
-        onClick={() => {
-          setshowMenu(!showMenu)
-        }}
-      >
-        {imgPrev && <img className={style.prevImg} src={imgPrev} />}
-        {currentLang.titleSelected || currentLang.title}
-        <img src={arrow} className={style.arrow} />
-      </div>
-      {showMenu && (
-        <div className={style.langMenu}>
-          {langs.map((l) => (
-            <button
-              key={l.code}
-              className={currentLang.code == l.code ? style.active : ""}
-              onClick={() => handleClick(l.code)}
-            >
-              {l.title}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-LangSelector.propTypes = {
-  langs: PropTypes.arrayOf(
-    PropTypes.shape({
-      code: PropTypes.string,
-      title: PropTypes.string,
-      titleSelected: PropTypes.string,
-    })
-  ),
-  color: PropTypes.string,
-  bckColor: PropTypes.string,
-  hoverColor: PropTypes.string,
-  arrow: PropTypes.object,
-  imgPrev: PropTypes.object,
-}

package/src/components/LangSelector/LangSelector.module.scss

@@ -1,41 +0,0 @@
-.langSelector {
-    position: relative;
-    width: fit-content;
-}
-.currentLang {
-    color: $langSelectedColor;
-    cursor: pointer;
-    @include flex();
-    gap: 5px;
-    text-transform: capitalize;
-    .arrow {
-        width: 10px;
-    }
-    .prevImg {
-        width: 20px;
-    }
-}
-.langMenu {
-    position: absolute;
-    width: 80px;
-    background: $langBckColor !important;
-    border-radius: 8px;
-    button {
-        cursor: pointer;
-        background: $langBckColor !important;
-        color: $langColor;
-        width: 100%;
-        padding: 4px 8px;
-        text-align: left;
-        &:first-child {
-            border-radius: 8px 8px 0px 0px;
-        }
-        &:last-child {
-            border-radius: 0px 0px 8px 8px;
-        }
-        &:hover {
-            color: $langHoverColor;
-            background-color: $langHoverBckColor !important;
-        }
-    }
-}

package/src/components/LangSelector/LangSelector.stories.jsx

@@ -1,27 +0,0 @@
-import { LangSelector } from "./LangSelector"
-import arrow from "../../assets/img/arrowDown.svg"
-import world from "../../assets/img/world.svg"
-export default {
-  title: "Components/LangSelector",
-  component: LangSelector,
-}
-const Template = (args) => <LangSelector {...args} />
-
-export const CatEsWithPrev = Template.bind({})
-CatEsWithPrev.args = {
-  langs: [
-    { code: "ca", title: "Català" },
-    { code: "es", title: "Español" },
-  ],
-  arrow: arrow,
-  imgPrev: world,
-}
-export const NoImg = Template.bind({})
-NoImg.args = {
-  langs: [
-    { code: "eu", title: "Euskera" },
-    { code: "es", title: "Español" },
-    { code: "en", title: "English" },
-  ],
-  arrow: arrow,
-}

package/src/components/Legend/Legend.jsx

@@ -1,132 +0,0 @@
-/*
-Legend of the map
-*/
-import PropTypes from "prop-types"
-import { useTranslation } from "react-i18next"
-//styles
-import styles from "./Legend.module.scss"
-
-export const Legend = ({
-  //JSON with the styles of the container (optional)
-  containerStyles,
-  //Title on top of the legend
-  title,
-  //Array to display the info behind the title should have: [{title, value}, ...]
-  infoList,
-  //Array to display the items of the legend: [{title, color}, ...]
-  //color should be a string with hexadecimal value
-  legendList,
-  //If not passed it will read t("mainUser")
-  legendListTitle,
-  //Should be an object with {maxColor, minColor, maxValue, minValue}
-  //If this has is not null or undefined, the legendList values wont be displayed.
-  //It will display only the absolute value indicator.
-  absoluteValue,
-  //Function to be called when the button is clicked (optional).
-  //If this is null or undefined the button wont be displayed.
-  onClickMoreInfo,
-  //If not passed it will read t("moreInformation")
-  buttonTitle,
-  onClickClose,
-}) => {
-  
-  const { t } = useTranslation()
-
-  return (
-    <div
-      style={containerStyles ? { ...containerStyles } : {}}
-      className={`${styles.legendContainer}`}
-    >
-      <button className={styles.closeButton} onClick={onClickClose}></button>
-      {title && (
-        <div className={styles.titleContainer}>
-          <h2>{title}</h2>
-        </div>
-      )}
-
-      {infoList && infoList.length > 0 && (
-        <div className={styles.infoContainer}>
-          <ul>
-            {infoList.map(({ title: titleElement, value: valueElement }) => (
-              <li key={title}>
-                <h3 className={styles.title}>{`${titleElement}:`}</h3>
-                <span className={styles.value}>&nbsp; {valueElement}</span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-      <h3 className={styles.titleLegendList}>
-        {legendListTitle ? t(legendListTitle) : t("mainUse")}
-      </h3>
-      <div className={styles.legendListContainer}>
-        {absoluteValue ? (
-          <div className={styles.absoluteValueContainer}>
-            <div
-              className={styles.absoluteValueColor}
-              style={{
-                background: `linear-gradient(to bottom, ${absoluteValue.maxColor} 0%, ${absoluteValue.minColor} 100%)`,
-              }}
-            />
-            <div className={styles.absoluteValueText}>
-              <span>{absoluteValue.maxValue} {t(absoluteValue.unit)}</span>
-              <span>{absoluteValue.minValue} {t(absoluteValue.unit)}</span>
-            </div>
-          </div>
-        ) : (
-          legendList &&
-          legendList.length > 0 && (
-            <div className={styles.gridContainer}>
-              {legendList.map(
-                ({ title: titleElement, color: colorElement }) => (
-                  <div className={styles.elementLegendContainer} key={title}>
-                    <div
-                      className={styles.colorDot}
-                      style={{ backgroundColor: colorElement }}
-                    />
-                    <div className={styles.titleLegendElement}>
-                      {t(titleElement)}{" "}
-                    </div>
-                  </div>
-                )
-              )}
-            </div>
-          )
-        )}
-      </div>
-
-      {onClickMoreInfo && (
-        <button className={styles.moreInfoContainer} onClick={onClickMoreInfo}>
-          {buttonTitle ? buttonTitle : t("moreInformation")}
-        </button>
-      )}
-    </div>
-  )
-}
-
-Legend.propTypes = {
-  title: PropTypes.string,
-  containerStyles: PropTypes.object,
-  infoList: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    })
-  ),
-  legendList: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      color: PropTypes.string,
-    })
-  ),
-  legendListTitle: PropTypes.string,
-  absoluteValue: PropTypes.shape({
-    maxColor: PropTypes.string,
-    minColor: PropTypes.string,
-    maxValue: PropTypes.number,
-    minValue: PropTypes.number,
-  }),
-  onClickMoreInfo: PropTypes.func,
-  buttonTitle: PropTypes.string,
-  onClickClose: PropTypes.func,
-}

package/src/components/Legend/Legend.module.scss

@@ -1,121 +0,0 @@
-
-.legendContainer {
-  width: 402px;
-  background-color: #fdfdfd;
-  color: #605b56;
-  border: solid 1.5px #605b56;
-  border-radius: 10px;
-  @include flex($direction: column, $align: flexStart);
-  padding: 20px;
-  position: relative;
-
-  .closeButton {
-    position: absolute;
-    right: 20px;
-    top: 20px;
-    width: 24px;
-    height: 24px;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    padding: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .closeButton::before,
-  .closeButton::after {
-    content: "";
-    position: absolute;
-    width: 16px;
-    height: 2px;
-    background-color: #333;
-  }
-
-  .closeButton::before {
-    transform: rotate(45deg);
-  }
-
-  .closeButton::after {
-    transform: rotate(-45deg);
-  }
-
-  .closeButton:hover::before,
-  .closeButton:hover::after {
-    // background-color: #e00;
-  }
-  .titleContainer {
-    border-bottom: solid 1.5px #605b56;
-    h2 {
-      padding-bottom: 16px;
-    }
-  }
-
-  .infoContainer {
-    padding-top: 20px;
-    ul {
-      li {
-        @include flex($justify: start, $align: center);
-      }
-    }
-  }
-  .titleLegendList {
-    font-size: 20px;
-    padding-bottom: 20px;
-    margin-bottom: 20px;
-    margin-top: 30px;
-    border-bottom: solid 1.5px #605b56;
-  }
-  .legendListContainer {
-    .gridContainer {
-      display: grid;
-      grid-template-columns: auto; /* Dos columnas del mismo tamaño */
-      column-gap: 20px; /* Espacio horizontal entre columnas */
-      row-gap: 15px; /* Espacio vertical entre filas */
-      .elementLegendContainer {
-        //@include flex($direction: row, $justify: start, $align: center);
-        display: grid;
-        grid-template-columns: 23px auto;
-        align-items: center;
-        gap: 5px;
-        .colorDot {
-          width: 22px;
-          height: 22px;
-          border-radius: 50%;
-          margin-right: 10px;
-        }
-      }
-    }
-    .absoluteValueContainer {
-      position: relative;
-      .absoluteValueColor {
-        height: 130px;
-        width: 22px;
-        border-radius: 20px;
-      }
-      .absoluteValueText {
-        @include flex(
-          $direction: column,
-          $justify: space-between,
-          $align: flex-start
-        );
-        position: absolute;
-        left: 30px;
-        top: 0px;
-        height: 100%;
-      }
-    }
-  }
-  .moreInfoContainer {
-    margin-top: 30px;
-    padding-top: 8.5px;
-    padding-bottom: 8.5px;
-    padding-left: 20px;
-    padding-right: 20px;
-    @include flex();
-    border: 1.5px solid #605b56;
-    border-radius: 25px;
-    @include fontBaseSemi();
-  }
-}