@tmf_ciclica/ciclicastorybook 1.0.10 → 1.0.14

package/src/components/Legend/Legend.stories.jsx

@@ -1,53 +0,0 @@
-import { Provider } from "react-redux"
-import { configureStore } from "@reduxjs/toolkit"
-import { Legend } from "./Legend"
-
-export default {
-  title: "Components/Legend",
-  component: Legend,
-  args: {
-    title: "Legend Title",
-    containerStyles: {},
-  },
-}
-
-export const DefaultLegend = {
-  args: {
-    title: "Sant Esteve de Palautordera",
-    infoList: [
-      { title: "Number of residential properties", value: 1.156 },
-      { title: "Number of single-family dwellings", value: 1.156 },
-      { title: "Number of multi-family dwellings", value: 246 },
-    ],
-    legendList: [
-      { title: "Residential", color: "#FFB741" },
-      { title: "Offices", color: "#E9622C" },
-      { title: "Administration", color: "#043666" },
-      { title: "Transport", color: "#822C58" },
-    ],
-    legendListTitle: "Main Use",
-    buttonTitle: "More Info",
-    onClickMoreInfo: () => alert("More Info Clicked"),
-    onClickClose: () => alert("Close clicked"),
-  },
-}
-export const AbsoluteValue = {
-  args: {
-    title: "Sant Esteve de Palautordera",
-    infoList: [
-      { title: "Number of residential properties", value: 1.156 },
-      { title: "Number of single-family dwellings", value: 1.156 },
-      { title: "Number of multi-family dwellings", value: 246 },
-    ],
-    absoluteValue: {
-      "maxColor": "#043666",
-      "minColor": "red",
-      "minValue": "0 Viviendas",
-      "maxValue": "100 Viviendas"
-    },
-    legendListTitle: "Main Use",
-    buttonTitle: "More Info",
-    onClickMoreInfo: () => alert("More Info Clicked"),
-    onClickClose: () => alert("Close clicked"),
-  },
-}

package/src/components/LogoApp/LogoApp.jsx

@@ -1,33 +0,0 @@
-/*
-Componente para el logo de la aplicación. Recibe:
-- Src de la imagen
-- Texto alt (obligatorio)
-- href en el caso de que funcione como link
-*/
-import { useTranslation } from "react-i18next"
-import PropTypes from "prop-types";
-
-//styles
-import styles from "./LogoApp.module.scss"
-
-export const LogoApp = ({ src, alt, href }) => {
-  const { t } = useTranslation()
-  const imgElement = <img src={src} alt={t(alt)} />;
-
-  return href ? (
-    <div className={styles.logo}>
-      <a href={href}>
-        {imgElement}
-      </a>
-    </div>
-  ) : (
-    <div className={styles.logo}>{imgElement}</div>
-  );
-};
-
-LogoApp.propTypes = {
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-  href: PropTypes.string,
-  className: PropTypes.string,
-};

package/src/components/LogoApp/LogoApp.module.scss

@@ -1,7 +0,0 @@
-.logo {
-    padding: 10px;
-    height: 100%;
-    img {
-        height: 100%;
-    }
-}

package/src/components/LogoApp/LogoApp.stories.jsx

@@ -1,27 +0,0 @@
-import { LogoApp } from "./LogoApp";
-import sampleImage from "../../assets/img/sample-image.png";
-
-export default {
-  title: "Components/LogoApp",
-  component: LogoApp,
-};
-
-const Template = (args) => <LogoApp {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  alt: "Sample Image",
-};
-
-export const WithCustomImage = Template.bind({});
-WithCustomImage.args = {
-  src: sampleImage,
-  alt: "Custom Image",
-};
-
-export const WithLink = Template.bind({});
-WithLink.args = {
-  src: sampleImage,
-  alt: "Linked Image",
-  href: "https://example.com",
-};

package/src/components/MapboxMap/MapboxMap.jsx

@@ -1,160 +0,0 @@
-/*
-Mapa de mapbox-gl utilizando react-map-gl
-yarn add react-map-gl mapbox-gl @types/mapbox-gl
-Necesita un token de mapbox que tendremos en guardado en el .env
-Recibe:
-·initialView-> {latitud, longitud, zoom} vista inicial del mapa
-·maxZoom
-·minZoom
-·mapStyle->estilo del mapa. IMPORTANTE que las capas tipo symbol sean las últimas en el array de layers y tener identificada la primera de ellas
-·firstSymbolLayer->id de la primera capa tipo symbol del mapa
-·className
-·layers->array de layers (ver PropTypes al final del componente)
-·sources-> array de sources (ver PropTypes al final del componente)
-·interactiveLayers->ids de las layers que deben responder al click
-·onClick-> función onclick en el mapa (dependerá de la propiedad "interactiveLayers")
-·popUp->si ha de haber un popup de los features, aquí pasamos todo lo necesario (propTypes)
-*/
-
-import { useEffect, useRef, useState } from 'react';
-import mapboxgl from 'mapbox-gl';
-import 'mapbox-gl/dist/mapbox-gl.css';
-import { useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
-import 
-  Map, {
-    Layer,
-    NavigationControl,
-    Popup,
-    Source
-  }
- from 'react-map-gl/mapbox'
- 
- //styles
- import styles from './MapboxMap.module.scss'
-
-// Token de Mapbox
-//mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN || 'pk.eyJ1IjoiY2ljbGljYSIsImEiOiJja3llODhxZ2UwYzF1Mm5xcHVhMzI3anhqIn0.-r56FLAzEH57eVsB2ZeVcA'
-mapboxgl.accessToken = 'pk.eyJ1IjoiY2ljbGljYSIsImEiOiJja3llODhxZ2UwYzF1Mm5xcHVhMzI3anhqIn0.-r56FLAzEH57eVsB2ZeVcA'
-export const MapboxMap = ({
-  initialView = { latitude: 39.4699, longitude: -0.3763, zoom: 12 },
-  maxZoom = 17,
-  minZoom = 8, 
-  mapStyle,
-  firstSymbolLayer,
-  cssProps = '',
-  onClick = '',
-  interactiveLayers = [], 
-  popUp = false,
-  sources = [],
-  layers = []
-}) => {
-  const mapRef = useRef()
-  const [showPopup, setShowPopup] = useState(null)
-  const showTexts = useSelector((state) => state.mapState.showTexts)
-  useEffect(() => {
-    if (mapRef.current) {
-      const map = mapRef.current.getMap()
-      const layers = map.getStyle().layers
-      layers.map((layer) => {
-        if (layer.type == "symbol" && layer.id != "professionals") {
-          if (showTexts) {
-            map.setLayoutProperty(layer.id, "visibility", "visible")
-          } else {
-            map.setLayoutProperty(layer.id, "visibility", "none")
-          }
-        }
-      })
-    }
-  }, [showTexts])
-  return (
-    <div className={`${styles.mapContainer}`} style={cssProps}>
-      <Map
-        initialViewState={initialView}
-        ref={mapRef}
-        hash={false}
-        maxZoom={maxZoom}
-        minZoom={minZoom}
-        mapStyle={mapStyle}
-        onClick= {onClick}
-        interactiveLayerIds={interactiveLayers}
-      >
-        {/* Mapeamos las sources y layers para añadirlas al mapa */}
-        {sources.length && sources.map((source, i) => {
-          return (
-          <Source 
-            key={i}
-            {...source}
-          >
-            {layers.length && layers.map((layer, i)=> {
-              if(layer.sourceId == source.id) return (
-              <Layer 
-                key={i}
-                {...layer.layer}
-                beforeId={firstSymbolLayer}
-              />
-              )
-            })}
-          </Source>
-          )
-        })}
-        <NavigationControl position="bottom-right" visualizePitch />
-        {
-          (popUp && showPopup) && 
-          <Popup
-            longitude={popUp.longitude}
-            latitude={popUp.latitude}
-            anchor={popUp.anchor}
-            onClose={() => setShowPopup(null)}
-          >
-            {popUp.content}
-          </Popup>
-        }
-      </Map>
-    </div>
-  );
-};
-
-MapboxMap.propTypes = {
-  initialView: PropTypes.shape({
-    latitude: PropTypes.number.isRequired,
-    longitude: PropTypes.number.isRequired,
-    zoom: PropTypes.number.isRequired,
-  }),
-  mapStyle: PropTypes.object,
-  firstSymbolLayer: PropTypes.string,
-  cssProps: PropTypes.object,
-  style: PropTypes.object,
-  maxZoom: PropTypes.number,
-  minZoom: PropTypes.number,
-  onClick: PropTypes.func,
-  interactiveLayers: PropTypes.array,
-  popUp: PropTypes.shape({
-    latitude: PropTypes.number,
-    longitude: PropTypes.number,
-    anchor: PropTypes.string,
-    content: PropTypes.element
-  }),
-  textsUrl: PropTypes.string,
-  sources: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      type: PropTypes.string,
-      url: PropTypes.string, //si es type: vector
-      data: PropTypes.object //si es type: geojson
-    })
-  ),
-  layers: PropTypes.arrayOf(
-    PropTypes.shape({
-      sourceId: PropTypes.string,
-      layer: PropTypes.shape({
-        id: PropTypes.string,
-        type: PropTypes.string,
-        sourceLayer: PropTypes.string,
-        minZoom: PropTypes.number,
-        maxZoom: PropTypes.number,
-        paint: PropTypes.object 
-      })
-    })
-  )
-};

package/src/components/MapboxMap/MapboxMap.module.scss

@@ -1,4 +0,0 @@
-.mapContainer {
-    width: 100vw;
-    height: 100vh;
-}

package/src/components/MapboxMap/MapboxMap.stories.jsx

@@ -1,57 +0,0 @@
-//components
-
-import { MapboxMap } from "./MapboxMap";
-
-import lightStyle from "../../assets/mapStyles/mapStyle.js"
-import { textLayers } from '../../constants/mapTexts';
-
-export default {
-    title: 'Components/MapboxMap',
-    component: MapboxMap
-}
-
-
-export const Default = {
-    args: {
-        initialView: {
-            latitude: parseFloat('39.4699'),
-            longitude: parseFloat('-0.3763'),
-            zoom: 10
-        },
-        mapStyle: lightStyle,
-        textLayers: textLayers
-    }
-}
-export const MunisLayer = {
-    args: {
-        initialView: {
-            latitude: parseFloat('43.2630'),
-            longitude: parseFloat('-2.9350'),
-            zoom: 10
-        },
-        mapStyle: lightStyle,
-        sources: [
-            {
-                id: 'municipis',
-                type: 'vector',
-                url: 'https://tiles.urbanzeb.com/VT_HDR/data/municipios.json'
-            }
-        ],
-        layers: [
-            {
-                sourceId: 'municipis',
-                layer: {
-                    id:'municipis-pv',
-                    type: 'fill',
-                    'source-layer': 'PB_Munis_4326',
-                    minZoom: 0,
-                    maxZoom: 22,
-                    paint: {
-                        'fill-color': '#000000',
-                        'fill-opacity': 0.5
-                    }
-                }
-            }
-        ]
-    }
-}

package/src/components/MaplibreMap/MaplibreMap.jsx

@@ -1,166 +0,0 @@
-/*
-Mapa de mapbox-gl utilizando react-map-gl
-yarn add react-map-gl mapbox-gl @types/mapbox-gl
-Necesita un token de mapbox que tendremos en guardado en el .env
-Recibe:
-·initialView-> {latitud, longitud, zoom} vista inicial del mapa
-·maxZoom
-·minZoom
-·mapStyle->estilo del mapa. IMPORTANTE que las capas tipo symbol sean las últimas en el array de layers y tener identificada la primera de ellas
-·firstSymbolLayer->id de la primera capa tipo symbol del mapa
-·className
-·layers->array de layers (ver PropTypes al final del componente)
-·sources-> array de sources (ver PropTypes al final del componente)
-·interactiveLayers->ids de las layers que deben responder al click
-·onClick-> función onclick en el mapa (dependerá de la propiedad "interactiveLayers")
-·popUp->si ha de haber un popup de los features, aquí pasamos todo lo necesario (propTypes)
-*/
-
-import { useEffect, useRef, useState } from 'react';
-import MapLibreGL from "maplibre-gl"
-import { useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
-import { Protocol } from "pmtiles"
-import 
-  Map, {
-    Layer,
-    NavigationControl,
-    Popup,
-    Source
-  }
- from 'react-map-gl/maplibre'
- 
- //styles
- import styles from './MaplibreMap.module.scss'
-
-
-export const MaplibreMap = ({
-  initialView = { latitude: 39.4699, longitude: -0.3763, zoom: 12 },
-  maxZoom = 17,
-  minZoom = 8, 
-  mapStyle,
-  firstSymbolLayer,
-  cssProps = {},
-  onClick = '',
-  interactiveLayers = [], 
-  popUp = false,
-  sources = [],
-  layers = []
-}) => {
-  const mapRef = useRef()
-  const [showPopup, setShowPopup] = useState(null)
-  const showTexts = useSelector((state) => state.mapState.showTexts)
-  //mostramos/ocultamos las capas de texto
-  useEffect(() => {
-    if (mapRef.current) {
-      const map = mapRef.current.getMap()
-      const layers = map.getStyle().layers
-      layers.map((layer) => {
-        if (layer.type == "symbol" && layer.id != "professionals") {
-          if (showTexts) {
-            map.setLayoutProperty(layer.id, "visibility", "visible")
-          } else {
-            map.setLayoutProperty(layer.id, "visibility", "none")
-          }
-        }
-      })
-    }
-  }, [showTexts])
-  //preparamos el mapa para cargar capas de pmtiles
-  useEffect(() => {
-    let protocol = new Protocol()
-    MapLibreGL.addProtocol("pmtiles", protocol.tile)
-    return () => {
-      MapLibreGL.removeProtocol("pmtiles")
-    }
-  }, [])
-  return (
-    <div className={`${styles.mapContainer}`} style={cssProps && cssProps}>
-      <Map
-        initialViewState={initialView}
-        ref={mapRef}
-        hash={false}
-        maxZoom={maxZoom}
-        minZoom={minZoom}
-        mapStyle={mapStyle}
-        onClick= {onClick}
-        interactiveLayerIds={interactiveLayers}
-      >
-        {/* Mapeamos las sources y layers para añadirlas al mapa */}
-        {sources.length && sources.map((source, i) => {
-          return (
-          <Source 
-            key={i}
-            {...source}
-          >
-            {layers.length && layers.map((layer, i)=> {
-              if(layer.sourceId == source.id) return (
-              <Layer 
-                key={i}
-                {...layer.layer}
-                beforeId={firstSymbolLayer}
-              />
-              )
-            })}
-          </Source>
-          )
-        })}
-        <NavigationControl position="bottom-right" visualizePitch />
-        {
-          (popUp && showPopup) && 
-          <Popup
-            longitude={popUp.longitude}
-            latitude={popUp.latitude}
-            anchor={popUp.anchor}
-            onClose={() => setShowPopup(null)}
-          >
-            {popUp.content}
-          </Popup>
-        }
-      </Map>
-    </div>
-  );
-};
-
-MaplibreMap.propTypes = {
-  initialView: PropTypes.shape({
-    latitude: PropTypes.number.isRequired,
-    longitude: PropTypes.number.isRequired,
-    zoom: PropTypes.number.isRequired,
-  }),
-  mapStyle: PropTypes.string,
-  firstSymbolLayer: PropTypes.string,
-  cssProps: PropTypes.object,
-  style: PropTypes.object,
-  maxZoom: PropTypes.number,
-  minZoom: PropTypes.number,
-  onClick: PropTypes.func,
-  interactiveLayers: PropTypes.array,
-  popUp: PropTypes.shape({
-    latitude: PropTypes.number,
-    longitude: PropTypes.number,
-    anchor: PropTypes.string,
-    content: PropTypes.element
-  }),
-  sources: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      type: PropTypes.string,
-      url: PropTypes.string, //si es type: vector
-      data: PropTypes.object //si es type: geojson
-    })
-  ),
-  layers: PropTypes.arrayOf(
-    PropTypes.shape({
-      sourceId: PropTypes.string,
-      layer: PropTypes.shape({
-        id: PropTypes.string,
-        type: PropTypes.string,
-        sourceLayer: PropTypes.string,
-        minZoom: PropTypes.number,
-        maxZoom: PropTypes.number,
-        paint: PropTypes.object 
-      })
-    })
-  )
-};

package/src/components/MaplibreMap/MaplibreMap.module.scss

@@ -1,5 +0,0 @@
-@import url("https://unpkg.com/maplibre-gl@^5.3.0/dist/maplibre-gl.css");
-.mapContainer {
-    width: 100vw;
-    height: calc(100vh - $headerHeight);
-}

package/src/components/MaplibreMap/MaplibreMap.stories.jsx

@@ -1,55 +0,0 @@
-//components
-
-import { MaplibreMap } from "./MaplibreMap";
-
-
-
-export default {
-    title: 'Components/MaplibreMap',
-    component: MaplibreMap
-}
-
-
-export const Default = {
-    args: {
-        initialView: {
-            latitude: parseFloat('39.4699'),
-            longitude: parseFloat('-0.3763'),
-            zoom: 10
-        },
-        mapStyle: "https://api.maptiler.com/maps/0196d855-d6c7-7d69-8a1a-333bda2c6b76/style.json?key=yYOspPMp7YyceIM85690",
-        firstSymbolLayer: 'Ocean labels'
-    }
-}
-export const MunisLayer = {
-    args: {
-        initialView: {
-            latitude: parseFloat('43.2630'),
-            longitude: parseFloat('-2.9350'),
-            zoom: 10
-        },
-        sources: [
-            {
-                id: 'municipis',
-                type: 'vector',
-                url: 'https://tiles.urbanzeb.com/VT_HDR/data/municipios.json'
-            }
-        ],
-        layers: [
-            {
-                sourceId: 'municipis',
-                layer: {
-                    id:'municipis-pv',
-                    type: 'fill',
-                    'source-layer': 'PB_Munis_4326',
-                    minZoom: 0,
-                    maxZoom: 22,
-                    paint: {
-                        'fill-color': '#000000',
-                        'fill-opacity': 0.5
-                    }
-                }
-            }
-        ]
-    }
-}

package/src/components/SectionBar/SectionBar.jsx

@@ -1,41 +0,0 @@
-/*
-Barra de sección que muestra el icono y el título de la sección en la parte izquierda y en su derecha recibe los botones o elementos que sean necesarios
-Recibe:
-lefticon-> icono de la sección
-title-> título de la sección o funcionalidad
-subtitle-> subtítulo (opcional) a continuación del título (por ej: Escenario personalizado: El nombre custom del escenario)
-rightContent -> contenido a la derecha de la barra
-mainColor -> color del título (si no se manda, el título se pinta en negro)
-*/
-import PropTypes from 'prop-types';
-import styles from "./SectionBar.module.scss";
-import { useTranslation } from 'react-i18next'; 
-
-export const  SectionBar= ({ leftIcon, title, subtitle, rightContent, mainColor }) => {
-  const { t } = useTranslation()
-  return (
-    <div className={styles.sectionBar}>
-      <div className={styles.leftContent}>
-        {leftIcon && (
-          <img src={leftIcon} alt="Icono" className={styles.icon} />
-        )}
-        <div className={styles.textContainer}>
-          <div className={styles.title} style={mainColor ?{color: mainColor}:{}}>{t(title)}</div>
-          {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
-        </div>
-      </div>
-      <div className={styles.rightContent}>
-        {rightContent}
-      </div>
-    </div>
-  );
-}
-
-export default SectionBar;
-SectionBar.propTypes = {
-    leftIcon: PropTypes.node.isRequired,
-    title: PropTypes.string.isRequired,
-    subtitle: PropTypes.string,
-    rightContent: PropTypes.node.isRequired,
-    mainColor: PropTypes.string
-};

package/src/components/SectionBar/SectionBar.module.scss

@@ -1,40 +0,0 @@
-.sectionBar {
-    height: 60px;
-    width: 100%;
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 16px;
-    border-bottom: 1px solid black;
-  }
-  
-  .leftContent {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-  
-  .textContainer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-  }
-  
-  .title {
-    font-size: 16px;
-    font-weight: 600;
-    color: #000;
-  }
-  
-  .subtitle {
-    font-size: 16px;
-    color: #000;
-  }
-  
-  .rightContent {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }

package/src/components/SectionBar/SectionBar.stories.jsx

@@ -1,35 +0,0 @@
-import SectionBar from "./SectionBar";
-import Icon from "../../assets/img/pause.svg"
-
-export default {
-  title: "Components/SectionBar",
-  component: SectionBar,
-};
-
-export const Default = () => (
-  <SectionBar
-    leftIcon={Icon}
-    title="login"
-    subtitle="Actualizado recientemente"
-    mainColor='#004152'
-    rightContent={
-      <>
-        <button style={{ marginRight: 8 }}>Editar</button>
-        <button>Eliminar</button>
-      </>
-    }
-  />
-);
-export const WithoutMainColor = () => (
-  <SectionBar
-    leftIcon={Icon}
-    title="indicators"
-    subtitle="Mi Escenario"
-    rightContent={
-      <>
-        <button style={{ marginRight: 8 }}>Editar</button>
-        <button>Eliminar</button>
-      </>
-    }
-  />
-);