@tmf_ciclica/ciclicastorybook 1.0.10 → 1.0.14

package/src/components/TimeSlider/TimeSlider.jsx

@@ -1,147 +0,0 @@
-/*
-TimeSlider es un selector de año que permite la animación del cambio de año mediante un botón play/pause.
-Se coloca en la parte superior derecha de la pantalla, su posición exacta depende de si el sidebar derecho está abierto o no.
-El cambio de año se guarda en el slice de map, en la propiedad sliderSelectedYear mediante la acción setYear.
-Recibe:
-onResults (heredado de hdr): nos dice si el slider se ve sobre el mapa o sobre la pantalla de resultados y se le aplican unos estilos u otros.
-defaultYear: año seleccionado por defecto al montar el componente
-firstYear: primer año del slider
-lastYear: último año del slider
-z-index: propiedad css z-index del slider
-rightBarOpen: está o no abierto el sidebar de la derecha
-*/
-
-import PropTypes from 'prop-types';
-import { useEffect, useRef, useState } from 'react'
-import { useDispatch } from 'react-redux';
-//store
-import { setYear } from '../../store/mapSlice';
-//assets
-import Play from '../../assets/img/play.svg';
-import Pause from '../../assets/img/pause.svg';
-//elementos ui
-import Slider from '@mui/material/Slider';
-import { Box, createTheme } from '@mui/material';
-import { ThemeProvider } from '@emotion/react';
-// Style
-import style from './TimeSlider.module.scss'
-export const TimeSlider = ({ onResults = false, defaultYear = 2025, firstYear = 2025, lastYear = 2050, zIndex = 10, rightBarOpen = false }) => {
-  
-  const [localYear, setLocalYear] = useState(defaultYear)
-  const dispatch = useDispatch()
-  const handleChange = (event, newValue) => {
-    setLocalYear(newValue)
-    dispatch(setYear(newValue - 2000))
-  };
-  const [isRunning, setIsRunning] = useState(false);
-  
-  const handlePlay = () => {
-    setIsRunning(true)
-  }
-  const handleStop = () => {
-    setIsRunning(false)
-  }
-  const useInterval = (callback, delay) => {
-    const savedCallback = useRef();
-
-    // Remember the latest function.
-    useEffect(() => {
-      savedCallback.current = callback;
-    }, [callback]);
-
-    // Set up the interval.
-    useEffect(() => {
-      function tick() {
-        savedCallback.current();
-      }
-      if (delay !== null) {
-        let id = setInterval(tick, delay);
-        return () => clearInterval(id);
-      }
-    }, [delay]);
-  }
-  useInterval(() => {
-    // Your custom logic here
-    if (isRunning) {
-      if (localYear != 2050) {
-        setLocalYear(localYear + 1);
-        dispatch(setYear((localYear - 2000) + 1))
-      } else {
-        setLocalYear(2025);
-        dispatch(setYear(25))
-      }
-    }
-
-  }, 1000);
-
-  const theme = createTheme({
-    palette: {
-      primary: {
-        main: '#605b56'
-      }
-    },
-    components: {
-      MuiSlider: {
-        styleOverrides: {
-          mark: {
-            height: 10,
-            backgroundColor: '#605b56'
-          },
-          valueLabel: {
-            backgroundColor: 'transparent',
-            color: '#605b56',
-            padding: 0,
-            top: 3
-          }
-        }
-      }
-    }
-  });
-  const marcas = [
-    { label: '', value: 2025 },
-    { label: '', value: 2032 },
-    { label: '', value: 2041 },
-    { label: '', value: 2050 }
-  ]
-  return (
-    <ThemeProvider theme={theme}>
-      <Box 
-        sx={{ width: 400 }}
-        className={`${onResults ? style.sliderResults : style.slider} ${rightBarOpen ? style.sliderOpen : ''}`}
-        style={{zIndex: zIndex}}
-      >
-        {firstYear}
-        <Slider
-          aria-label="TimeSlider"
-          value={localYear}
-          valueLabelDisplay="on"
-          step={1}
-          marks={marcas}
-          min={firstYear}
-          max={lastYear}
-          onChange={handleChange}
-          color="primary"
-          size="small"
-        />
-        {lastYear}
-        {!isRunning && 
-        <button className={style.playButton} onClick={handlePlay}>
-          <img src={Play} alt="Play" />
-        </button>}
-        {isRunning && 
-        <button className={style.playButton} onClick={handleStop}>
-          <img src={Pause} alt="Pause" />
-        </button>}
-      </Box>
-    </ThemeProvider>
-  )
-}
-
-TimeSlider.propTypes = {
-  defaultYear: PropTypes.number,
-  onResults: PropTypes.bool,
-  firstYear: PropTypes.number,
-  lastYear: PropTypes.number,
-  zIndex: PropTypes.number,
-  rightBarOpen: PropTypes.bool
-}

package/src/components/TimeSlider/TimeSlider.module.scss

@@ -1,63 +0,0 @@
-.slider {
-    position: absolute;
-    padding: 5px 20px;
-    right: 150px;
-    border: 1px solid;
-    border-radius: 10px;
-    display: flex;
-    gap: 20px;
-    color: #605b56;
-    justify-content: center;
-    align-items: center;
-    background-color: white;
-    top: 188px;
-    transition: all 0.5s ease-out;
-
-    .playButton {
-        background-color: transparent !important;
-
-        &.hover {
-            background-color: transparent !important;
-        }
-
-        img {
-            height: 30px;
-            width: 30px;
-
-        }
-    }
-}
-
-.sliderOpen {
-    right: 490px;
-}
-
-.sliderResults {
-    position: absolute;
-    top: 75px;
-    right: 430px;
-    padding: 5px 20px;
-    border: 1px solid;
-    border-radius: 10px;
-    display: flex;
-    gap: 20px;
-    color: #605b56;
-    justify-content: center;
-    align-items: center;
-    background-color: white;
-    transition: all 0.5s ease-out;
-
-    .playButton {
-        background-color: transparent !important;
-
-        &.hover {
-            background-color: transparent !important;
-        }
-
-        img {
-            height: 30px;
-            width: 30px;
-
-        }
-    }
-}

package/src/components/TimeSlider/TimeSlider.stories.jsx

@@ -1,9 +0,0 @@
-import { TimeSlider } from './TimeSlider'
-
-export default {
-  title: "Components/TimeSlider",
-  component: TimeSlider,
-};
-const Template = () => <TimeSlider  />;
-
-export const Default = Template.bind({});

package/src/components/Tooltip/Tooltip.jsx

@@ -1,40 +0,0 @@
-/*
-Componente genérico para añadir tooltips.
-Recibe:
--text: textp del tooltip (código i18n),
--position: top, bottom, left, right
--styleCustom: estilo propio si necesario
-IMPORTANTE
-para su uso, el elemento que necesita tooltip y el componente Tooltip tienen que estar dentro de un componente padre con la clase css: "tooltip-parent" y el siguien código css tiene que incluirse en el archivo de estilos de la aplicación:
-.tooltip-parent {
-  position: relative;
-  width: fit-content;
-
-  .tooltip {
-    display: none;
-  }
-
-  &:hover {
-    .tooltip {
-      display:flex;
-      align-items: center;
-
-    }
-  }
-}
-*/
-
-import { useTranslation } from "react-i18next"
-import PropTypes from "prop-types";
-import styles from "./Tooltip.module.scss"
-
-export const Tooltip = ({ text, position, styleCustom = null }) => {
-  const { t } = useTranslation()
-
-  return <div className={`tooltip ${styles[position]}`} style={styleCustom}>{t(text)}</div>
-}
-Tooltip.propTypes = {
-  text: PropTypes.string.isRequired,
-  position: PropTypes.oneOf(["top", "bottom", "left", "right"]).isRequired,
-  styleCustom: PropTypes.object,
-};

package/src/components/Tooltip/Tooltip.module.scss

@@ -1,141 +0,0 @@
-@use "../../variables.scss" as *;
-.left {
-  position: absolute;
-  //display: inline-block;
-  width: auto;
-  bottom: 50%;
-  right: calc(100% + 10px);
-  transform: translateY(50%);
-  font-size: 16px;
-  background-color: #fff;
-  border-radius: 4px;
-  padding: 10px;
-  margin: 0;
-  white-space: nowrap;
-  color: #000;
-
-  &::after {
-    content: "";
-    z-index: -1;
-    left: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    border-width: 0.5em;
-    border-style: solid;
-    border-color: #fff;
-    position: absolute;
-    border-top-color: transparent;
-    border-bottom-color: transparent;
-    // border-left-color:transparent;
-    border-right-color: transparent;
-    transform-origin: center right;
-  }
-}
-
-.top {
-  position: absolute;
-  //display: inline-block;
-  width: auto;
-  bottom: calc(100% + 10px);
-  right: 50%;
-  transform: translateX(50%);
-  font-size: 16px;
-  background-color: #fff;
-  border-radius: 4px;
-  padding: 10px;
-  margin: 0;
-  white-space: nowrap;
-  color: #000;
-  z-index: 10;
-  color: #000;
-
-  &::after {
-    content: "";
-    z-index: -1;
-    right: 50%;
-    top: 100%;
-    transform: translateX(50%);
-    border-width: 0.5em;
-    border-style: solid;
-    border-color: #fff;
-    position: absolute;
-    border-bottom-color: transparent;
-    border-left-color: transparent;
-    border-right-color: transparent;
-    color: #000;
-
-    transform-origin: center right;
-  }
-}
-
-.bottom {
-  position: absolute;
-  //display: inline-block;
-  width: auto;
-  top: calc(100% + 10px);
-  right: 50%;
-  height: fit-content;
-  transform: translateX(50%);
-  font-size: 16px;
-  background-color: #fff;
-  border-radius: 4px;
-  padding: 10px;
-  margin: 0;
-  color: #000;
-  z-index: 10;
-  color: #000;
-
-  &::after {
-    content: "";
-    z-index: -1;
-    right: 50%;
-    bottom: 100%; /* Cambia `top: 100%` por `bottom: 100%` */
-    transform: translateX(50%);
-    border-width: 0.5em;
-    border-style: solid;
-    border-color: transparent; /* Deja todos los bordes transparentes por defecto */
-    border-bottom-color: #fff; /* Colorea solo el borde inferior */
-    position: absolute;
-
-    /* Opcional: mantiene el centro de transformación para futuras transformaciones */
-    transform-origin: center right;
-  }
-}
-
-.right {
-  position: absolute;
-  //display: inline-block;
-  width: auto;
-  //max-width: 200px;
-  bottom: 50%;
-  left: calc(100% + 10px);
-  transform: translateY(50%);
-  font-size: 16px;
-  background-color: #fff;
-  border-radius: 4px;
-  padding: 20px;
-  margin: 0;
-  white-space: nowrap;
-  height: fit-content;
-  color: #000;
-  z-index: 10;
-  &::after {
-    content: "";
-    z-index: -1;
-    right: 100%;
-    top: 50%;
-    color: #000;
-
-    transform: translateY(-50%);
-    border-width: 0.5em;
-    border-style: solid;
-    border-color: #fff;
-    position: absolute;
-    border-top-color: transparent;
-    border-bottom-color: transparent;
-    border-left-color: transparent;
-    transform-origin: center right;
-  }
-}
-
-

package/src/components/Tooltip/Tooltip.stories.jsx

@@ -1,51 +0,0 @@
-import { Tooltip } from "./Tooltip";
-
-export default {
-  title: "Components/Tooltip",
-  component: Tooltip,
-  argTypes: {
-    text: { control: "text" },
-    position: {
-      control: {
-        type: "select",
-        options: ["top", "bottom", "left", "right"],
-      },
-    },
-    styleCustom: { control: "object" },
-  },
-};
-
-const Template = (args) => (
-  
-    <div className="tooltip-parent" style={{background: "black", color: "white", marginTop: "150px", marginLeft:"100px"}}>
-      <Tooltip {...args} />
-      <button style={{ padding: "8px 16px" }}>Elemento con tooltip</button>
-    </div>
-  
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  text: "sampleText", // clave i18n
-  position: "top",
-  styleCustom: null,
-};
-export const Right = Template.bind({});
-Right.args = {
-  text: "sampleText", // clave i18n
-  position: "right",
-  styleCustom: null,
-};
-export const Left = Template.bind({});
-Left.args = {
-  text: "sampleText", // clave i18n
-  position: "left",
-  styleCustom: null,
-};
-export const Bottom = Template.bind({});
-Bottom.args = {
-  text: "sampleText", // clave i18n
-  position: "bottom",
-  styleCustom: null,
-};
-

package/src/components/TopNavMenu/TopNavMenu.jsx

@@ -1,62 +0,0 @@
-/*
-Esta sección muestra un menu que te permite navegar por diferentes rutas de la aplicacion.
-Los args que recibe son propiedades css y listado de constantes. 
-Propiedades css= borderColor y TextColor
-Listados de constantes = options
- Es un array de los siguientes objetos:
-    {
-        name: 'TopNavMenu.opt1',  -> Nombre que aparecera en el menu haciendo referencia a locales
-        url: "/" -> ruta a la que ira al hacerle click
-    }
-*/
-
-import { NavLink } from 'react-router-dom';
-import PropTypes from 'prop-types'
-// Styles
-import styles from './TopNavMenu.module.scss'
-import { useTranslation } from 'react-i18next';
-
-export const TopNavMenu = ({ options = [], cssProps = {} }) => {
-    const { t } = useTranslation()
-
-    const textColor = cssProps.textColor || 'inherit';
-    const borderColor = cssProps.borderColor || 'transparent';
-
-
-    return (
-        <div className={styles.TopNavMenuContainer}>
-
-            {
-                options.map((option, id) => (
-                    <NavLink to={option.url}
-                        className={({ isActive }) => `${styles.topNavOptions} ${isActive ? styles.active : ''}`}
-                        key={id}
-                        style={{
-                            color: textColor,
-                        }}
-                    >
-                        {t(option.name)}
-
-                    </NavLink>
-                ))
-            }
-
-        </div>
-    )
-
-}
-
-
-
-TopNavMenu.propTypes = {
-    options: PropTypes.arrayOf(
-        PropTypes.object
-    ),
-    cssProps: PropTypes.shape({
-        borderColor: PropTypes.string.isRequired,
-        textColor: PropTypes.string.isRequired,
-        // height: PropTypes.string.isRequired,
-    }),
-    // activeColor: PropTypes.string,
-    // defaultColor: PropTypes.string
-}

package/src/components/TopNavMenu/TopNavMenu.module.scss

@@ -1,21 +0,0 @@
-@use '../../variables.scss' as *;
-
-.TopNavMenuContainer {
-    @include flex(row, start, start, $gap: 80px);
-    width: fit-content;
-
-
-
-
-    .topNavOptions {
-        @include flex();
-        cursor: pointer;
-        height: calc($headerHeight - 10px);
-        padding: 0px 10px;
-
-    }
-
-    .active {
-        box-shadow: 0 5px 0 0 #F8A925;
-    }
-}

package/src/components/TopNavMenu/TopNavMenu.stories.jsx

@@ -1,20 +0,0 @@
-import Options from '../../constants/topNavMenuOptions'
-import { TopNavMenu } from './TopNavMenu'
-
-export default {
-    title: "Components/TopNavMenu",
-    component: TopNavMenu,
-};
-// const Template = () => <TopNavMenu />;
-
-// export const Default = Template.bind({});
-
-export const Default = {
-    args: {
-        options: Options,
-        cssProps: {
-            borderColor: '#777777',
-            textColor: '#F8A925'
-        } 
-    }
-}

package/src/components/UserMenuTrigger/UserMenuTrigger.jsx

@@ -1,47 +0,0 @@
-/*
-Este componente es el texto que usamos para mostrar el menú de login (si el usuario no está logeado) o el nombre del usuario (si está logeado).
-Recibe: cssClass y loginLocale
-log: bool, define si el usuario está o no logeado. Se puede coger del store desde este mismo componente o enviarlo como propiedad. Si se coge del store, la ruta predefinida es =>state.userState.user.isLoggedIn
-- cssClass => clase css si se le quiere añadir
-- loginLocale => ruta del archivo locale para el texto 'Login', por defecto 'login'
-*/
-import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
-import { useTranslation } from "react-i18next";
-//store
-import { setShowLogIn, setShowUserMenu } from '../../store/userSlice';
-//styles
-import styles from './UserMenuTrigger.module.scss'
-
-export const UserMenuTrigger = ({cssClass, loginLocale= 'login'}) => {
-  const dispatch = useDispatch();
-  //traemos isLoggedIn y username directamente del store
-  const isLoggedIn = useSelector((state) => state.userState.user.isLoggedIn);
-  const username = useSelector((state) => state.userState.user.username);
-  
-  const { t } = useTranslation(); 
-
-  const handleClick = () => {
-    if (!isLoggedIn) {
-      dispatch(setShowUserMenu(true));
-    } else {
-      dispatch(setShowLogIn(true))
-    }
-  };
-
-  return (
-    <div className={`${styles.UserMenuTrigger} link ${cssClass}`} onClick={handleClick}>
-      {isLoggedIn ? username : t(loginLocale)}
-    </div>
-  );
-};
-
-UserMenuTrigger.propTypes = {
-  onClickLoggedIn: PropTypes.func.isRequired,
-  onClickLoggedOut: PropTypes.func.isRequired,
-  log: PropTypes.bool,
-  name: PropTypes.string,
-  cssClass: PropTypes.string,
-  loginLocale: PropTypes.string
-};
-

package/src/components/UserMenuTrigger/UserMenuTrigger.module.scss

@@ -1,5 +0,0 @@
-
-.UserMenuTrigger {
-  height: 100%;
-  @include flex($justify: space-between, $align: center);
-}

package/src/components/UserMenuTrigger/UserMenuTrigger.stories.jsx

@@ -1,33 +0,0 @@
-import { Provider } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
-import { UserMenuTrigger } from './UserMenuTrigger';
-
-export default {
-  title: 'Components/UserMenuTrigger',
-  component: UserMenuTrigger,
-  args: {
-
-  }
-};
-
-const Template = (args) => <UserMenuTrigger {...args} />;
-
-export const LoggedOut = Template.bind({});
-
-
-export const LoggedIn = Template.bind({});
-
-LoggedIn.decorators = [
-  (Story) => {
-    const loggedInStore = configureStore({
-      reducer: {
-        userState: (state = {user:{ isLoggedIn: true, username: 'JohnDoe' }}) => state,
-      },
-    });
-    return (
-      <Provider store={loggedInStore}>
-        <Story />
-      </Provider>
-    );
-  },
-];

package/src/components/index.jsx

@@ -1,17 +0,0 @@
-export { AmbitSelector } from './AmbitSelector/AmbitSelector.jsx'
-export { ButtonsList } from './ButtonsList/ButtonsList.jsx'
-export { DropdownList } from './DropdownList/DropdownList.jsx'
-export { EditAmbit } from './EditAmbit/EditAmbit.jsx'
-export { FiltersAmbit } from './FiltersAmbit/FiltersAmbit.jsx'
-export { Graphic } from './Graphic/Graphic.jsx'
-export { IndicatorsList } from './IndicatorsList/IndicatorsList.jsx'
-export { LangSelector } from './LangSelector/LangSelector.jsx'
-export { Legend } from './Legend/Legend.jsx'
-export { LogoApp } from './LogoApp/LogoApp.jsx'
-export { MapboxMap } from './MapboxMap/MapboxMap.jsx'
-export { MaplibreMap } from './MaplibreMap/MaplibreMap.jsx'
-export { SectionBar } from './SectionBar/SectionBar.jsx'
-export { TimeSlider } from './TimeSlider/TimeSlider.jsx'
-export { Tooltip } from './Tooltip/Tooltip.jsx'
-export { TopNavMenu } from './TopNavMenu/TopNavMenu.jsx'
-export { UserMenuTrigger } from './UserMenuTrigger/UserMenuTrigger.jsx'