@tmf_ciclica/ciclicastorybook 1.0.0

package/src/components/AmbitSelector/AmbitItem/AmbitItem.jsx

@@ -0,0 +1,74 @@
+import React from "react"
+import style from "./AmbitItem.module.scss"
+import deleteIcon from "../../../assets/img/deleteIcon.svg"
+import copyIcon from "../../../assets/img/copyIcon.svg"
+import filtersIcon from "../../../assets/img/filtersIcon.svg"
+import processingIcon from "../../../assets/img/processingIcon.svg"
+import eyeActiveIcon from "../../../assets/img/eyeActiveIcon.svg"
+import eyeNotActiveIcon from "../../../assets/img/eyeNotActiveIcon.svg"
+import PropTypes from "prop-types"
+export const AmbitItem = ({
+  ambit,
+  onClickCopy,
+  onClickDelete,
+  onClickFilters,
+  onClickAmbit,
+  isBeingProcessed,
+  isActive,
+  activeColor,
+  fontColor,
+  moreInfo,
+}) => {
+  const { name, date, id } = ambit
+  return (
+    <div
+      className={style.ambitItem}
+      style={{ borderBottom: `1px solid ${fontColor}` }}
+    >
+      <div className={style.ambitNameDate} onClick={() => onClickAmbit(id)}>
+        <div className={style.ambitName}>
+          {
+            <img
+              
+              src={isActive ? eyeActiveIcon : eyeNotActiveIcon}
+            />
+          }
+          <span style={{ color: isActive ? activeColor : fontColor }}>
+            {name}
+          </span>
+        </div>
+        <div className={style.ambitDate}>
+          {new Date(date).toLocaleDateString()}
+        </div>
+      </div>
+      <div className={style.ambitButtons}>
+        {isBeingProcessed && <img src={filtersIcon} />}
+        <button onClick={() => onClickFilters(id)}>
+          <img src={filtersIcon} />
+        </button>
+        <button onClick={() => onClickCopy(id)}>
+          <img src={copyIcon} />
+        </button>
+        <button onClick={() => onClickDelete(id)}>
+          <img src={deleteIcon} />
+        </button>
+      </div>
+    </div>
+  )
+}
+AmbitItem.propTypes = {
+  ambit: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    date: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+  }).isRequired,
+  onClickCopy: PropTypes.func.isRequired,
+  onClickDelete: PropTypes.func.isRequired,
+  onClickFilters: PropTypes.func.isRequired,
+  onClickAmbit: PropTypes.func.isRequired,
+  isBeingProcessed: PropTypes.bool,
+  isActive: PropTypes.bool,
+  activeColor: PropTypes.string,
+  fontColor: PropTypes.string,
+  moreInfo: PropTypes.object, // Optional, can be used for additional info
+}

package/src/components/AmbitSelector/AmbitItem/AmbitItem.module.scss

@@ -0,0 +1,27 @@
+.ambitItem {
+  @include flex($direction: row, $align: center, $justify: space-between);
+  padding-top: 10px;
+  padding-bottom: 10px;
+  gap: 10px;
+  width: 100%;
+  padding-bottom: 30px;
+  padding-top: 30px;
+
+  .ambitNameDate {
+    flex: 1;
+    @include flex($align: center);
+    cursor: pointer;
+    .ambitName {
+      @include flex($justify: flex-start, $align: center);
+      flex: 1;
+    }
+    .ambitDate {
+      flex: 0.5;
+    }
+  }
+  .ambitButtons {
+    flex: 0.3;
+    @include flex($direction: row, $align: center, $justify: flex-end);
+    gap: 8px;
+  }
+}

package/src/components/AmbitSelector/AmbitSelector.jsx

@@ -0,0 +1,68 @@
+import style from "./AmbitSelector.module.scss"
+import { AmbitItem } from "./AmbitItem/AmbitItem"
+import PropTypes from "prop-types"
+import { useTranslation } from "react-i18next"
+import CloseICon from "../../assets/img/closeIcon.svg"
+export const AmbitSelector = ({
+  ambitList,
+  activeAmbitId,
+  fontColor = "#605B56",
+  activeColor,
+  nameLabel,
+  dateLabel,
+  onClickCopy = (id) => console.log(`Copy ambit: ${id}`),
+  onCLickDelete = (id) => console.log(`Delete ambit: ${id}`),
+  onClickFilters = (id) => console.log(`Filters clicked: ${id}`),
+  onClickAmbit = (id) => console.log(`OnCLickAmbit: ${id}`),
+}) => {
+  const { t } = useTranslation()
+  return (
+    <div className={style.ambitSelector} style={{ color: fontColor }}>
+      <div
+        className={style.header}
+        style={{ borderBottom: `1px solid ${fontColor}` }}
+      >
+        <div className={style.nameDateContainer}>
+          <div className={style.ambitName}>
+            <span>{t(nameLabel)}</span>
+          </div>
+          <div className={style.ambitDate}>
+            <span>{t(dateLabel)}</span>
+          </div>
+        </div>
+        <div className={style.buttonsContainer} />
+      </div>
+      {ambitList &&
+        ambitList.length > 0 &&
+        ambitList.map((ambit) => (
+          <AmbitItem
+            key={`ambitKey${ambit.id}`}
+            isActive={activeAmbitId == ambit.id}
+            ambit={ambit}
+            fontColor={fontColor}
+            activeColor={activeColor}
+            onClickCopy={onClickCopy}
+            onClickDelete={onCLickDelete}
+            onClickFilters={onClickFilters}
+            onClickAmbit={onClickAmbit}
+          />
+        ))}
+    </div>
+  )
+}
+AmbitSelector.propTypes = {
+  ambitList: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      date: PropTypes.string.isRequired,
+      id: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  activeAmbitId: PropTypes.string,
+  fontColor: PropTypes.string,
+  activeColor: PropTypes.string,
+  onClickCopy: PropTypes.func.isRequired,
+  onCLickDelete: PropTypes.func.isRequired,
+  onClickFilters: PropTypes.func.isRequired,
+  onClickAmbit: PropTypes.func.isRequired,
+}

package/src/components/AmbitSelector/AmbitSelector.module.scss

@@ -0,0 +1,29 @@
+.ambitSelector {
+  @include flex($direction: column, $align: flex-start, $justify: center);
+  width: 100%;
+  padding-right: 25px;
+  padding-left: 25px;
+  .header {
+    width: 100%;
+    @include flex($direction: row, $align: center, $justify: space-between);
+    padding-bottom: 26px;
+    .nameDateContainer {
+      @include flex($direction: row, $align: center, $justify: flex-start);
+      width: 100%;
+      flex: 1;
+      @include flex($align: center);
+
+      .ambitName {
+        @include flex($justify: flex-start, $align: center);
+        flex: 1;
+      }
+      .ambitDate {
+        flex: 0.5;
+      }
+    }
+    .buttonsContainer {
+      flex: 0.3;
+      @include flex($direction: row, $align: center, $justify: flex-end);
+    }
+  }
+}

package/src/components/AmbitSelector/AmbitSelector.stories.jsx

@@ -0,0 +1,21 @@
+import { useState } from "react"
+import { AmbitSelector } from "./AmbitSelector"
+
+export default {
+  title: "Components/AmbitSelector",
+  component: AmbitSelector,
+}
+export const Default = {
+  args: {
+    ambitList: [
+      { name: "Ambit 1", date: "2023-01-01", id: "ambit1" },
+      { name: "Ambit 2", date: "2023-02-01", id: "ambit2" },
+      { name: "Ambit 3", date: "2023-03-01", id: "ambit3" },
+    ],
+    activeAmbitId: "ambit1",
+    activeColor: "#B32F5D",
+    fontColor: "#605B56",
+    nameLabel: "Name",
+    dateLabel: "Date",
+  },
+}

package/src/components/ButtonsList/ButtonsList.jsx

@@ -0,0 +1,92 @@
+
+/*
+Componente para un listado de botones con su función on click. El listado puede ser vertical y horizontal, pueden ser botones con o sin nombre y con o sin tooltip. Ejemplos: los botones flotantes en los mapas (indicadores, filtros) o el menú inferior "Mapa/Gráficos"
+Recibe:
+buttons-> array de objetos -> {
+  icon: src de la img del botón,
+  activeIcon: src de la img del botón activo (si necesaria),
+  isActive: isActive,
+  name: nombre del botón para ponerlo al lado, para el tooltip y/o para el alt de la img
+  onClick: función onclick
+},
+orientation: 'horizontal' o 'vertical',
+showName: boolean si se muestra o no el nombre,
+namePosition: posición del nombre al lado del nombre ('right', 'left'),
+useTooltip: boolean si hay o no tooltip,
+tooltipPosition: ('right', 'left', 'bottom', 'top')
+*/
+import PropTypes from 'prop-types';
+import styles from './ButtonsList.module.scss';
+import { useTranslation } from 'react-i18next';
+import { Tooltip } from '../Tooltip/Tooltip';
+
+export const ButtonsList = ({
+  buttons = [],
+  orientation = 'horizontal',
+  showName = true,
+  namePosition = 'right',
+  useTooltip = false,
+  tooltipPosition = 'top',
+}) => {
+    const {t} = useTranslation()
+    return (
+      <div
+        className={`${styles.buttonsContainer} ${
+          orientation === 'vertical' && styles.vertical}
+          ${orientation === 'horizontal' && styles.horizontal}`}
+      >
+        {buttons.map((btn, index) => {
+          const {
+            icon,
+            activeIcon,
+            isActive,
+            name,
+            onClick,
+          } = btn;
+
+          const buttonContent = (
+            <>
+              {(showName && namePosition === 'left') && (
+                <span className={styles.buttonName}>{t(name)}</span>
+              )}
+              <img src={isActive ? activeIcon : icon} alt={t(name)}/>
+              {(showName && namePosition === 'right') && (
+                <span className={styles.buttonName}>{t(name)}</span>
+              )}
+            </>
+          );
+
+          return (
+            <div className='tooltip-parent' key={index}>
+              <button
+                onClick={onClick}
+                className={`${styles.button}
+                ${isActive&&styles.active}`}
+              >
+                {buttonContent}
+              </button>
+              {useTooltip && <Tooltip text={name} position={tooltipPosition} /> }
+            </div>
+          );
+        })}
+      </div>
+    );
+};
+
+ButtonsList.propTypes = {
+  buttons: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.node.isRequired,
+      activeIcon: PropTypes.node,
+      isActive: PropTypes.bool,
+      name: PropTypes.string, // key de i18n
+      onClick: PropTypes.func,
+    })
+  ).isRequired,
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  showName: PropTypes.bool,
+  namePosition: PropTypes.oneOf(['left', 'right']),
+  useTooltip: PropTypes.bool,
+  tooltipPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+};
+

package/src/components/ButtonsList/ButtonsList.module.scss

@@ -0,0 +1,37 @@
+.buttonsContainer {
+    display: flex;
+    gap: 8px;
+  
+    &.vertical {
+      flex-direction: column;
+    }
+  
+    &.horizontal {
+      flex-direction: row;
+    }
+  }
+  
+  .button {
+    background: transparent;
+    border: none;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 4px;
+    position: relative;
+  
+    &:hover {
+      opacity: 0.8;
+    }
+  
+    &.active {
+      font-weight: bold;
+    }
+  
+    .buttonName {
+      margin: 0 4px;
+    }
+  }
+  
+  
+  

package/src/components/ButtonsList/ButtonsList.stories.jsx

@@ -0,0 +1,55 @@
+
+import { ButtonsList } from './ButtonsList';
+import Icon from '../../assets/img/pause.svg'
+import IconActive from '../../assets/img/play.svg'
+
+export default {
+  title: 'Components/ButtonsList',
+  component: ButtonsList
+};
+
+const mockButtons = [
+  {
+    icon: Icon,
+    activeIcon: IconActive,
+    isActive: true,
+    name: 'home',
+    onClick: () => alert('Home clicked'),
+  },
+  {
+    icon: Icon,
+    activeIcon: IconActive,
+    isActive: false,
+    name: 'settings',
+    onClick: () => alert('Settings clicked'),
+  },
+];
+
+export const HorizontalWithNames = () => (
+  <ButtonsList
+    buttons={mockButtons}
+    orientation="horizontal"
+    showName={true}
+    namePosition="right"
+    useTooltip={false}
+  />
+);
+
+export const VerticalWithTooltips = () => (
+  <ButtonsList
+    buttons={mockButtons}
+    orientation="vertical"
+    showName={false}
+    useTooltip={true}
+    tooltipPosition="right"
+  />
+);
+export const HorizontalWithNamesLeft = () => (
+  <ButtonsList
+    buttons={mockButtons}
+    orientation="horizontal"
+    showName={true}
+    namePosition="left"
+    useTooltip={false}
+  />
+);

package/src/components/DropdownList/DropdownList.jsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react"
+import { motion } from "framer-motion"
+import style from "./DropdownList.module.scss"
+import { useTranslation } from "react-i18next"
+import PropTypes from "prop-types"
+
+//DropdownList component to use in various contexts, such as filters or indicators.
+//IsOpen should be the state of the dropdown and should be toggled in the onClickFunction.
+//This is for able to have only one dropdown open at a time, if needed.
+//The content of the dropdown is passed as children.
+//Theres an example of use in the dropdownListExample component with his own .stories.
+export const DropdownList = ({
+  isOpen: open,
+  onClick,
+  children,
+  color,
+  activeColor = "#F8A925",
+  title = "Title",
+  //Change the height only if the title is more than one line or you change title fontSize, otherwise should be 53px
+  height = 53,
+  //Adjust height if you change fontSize
+  titleFontStyles,
+  showBottomBar = true,
+  titleMarginChildren = 25,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <motion.div
+      className={style.indicatorsCategory}
+      initial={{ height: `${height}px` }}
+      animate={{ height: open ? "auto" : `${height}px` }}
+      transition={{ duration: 0.4 }}
+      style={{
+        backgroundColor: "white",
+        borderBottom:
+          open && showBottomBar ? `1px solid ${activeColor}` : "0px",
+        marginBottom: open ? "20px" : "0px",
+      }}
+    >
+      <h2
+        style={{
+          ...titleFontStyles,
+          marginBottom: titleMarginChildren ? titleMarginChildren : "auto",
+        }}
+        className={`${style.title}`}
+        onClick={onClick}
+      >
+        <span style={{ color: open ? activeColor : color }}>
+          {open ? "-" : "+"}
+        </span>
+        <span style={{ marginLeft: 12, color: open ? activeColor : color }}>
+          {t(title)}
+        </span>
+      </h2>
+      {<div className={style.content}>{children}</div>}
+    </motion.div>
+  )
+}
+DropdownList.propTypes = {
+  isOpen: PropTypes.bool,
+  onClick: PropTypes.func,
+  children: PropTypes.node,
+  color: PropTypes.string,
+  activeColor: PropTypes.string,
+  title: PropTypes.string,
+  height: PropTypes.number,
+  showBottomBar: PropTypes.bool,
+  titleFontStyles: PropTypes.object,
+}

package/src/components/DropdownList/DropdownList.module.scss

@@ -0,0 +1,20 @@
+.indicatorsCategory {
+  overflow: hidden;
+
+  .title {
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    margin-bottom: 25px;
+  }
+  .list {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: start;
+    flex-direction: column;
+    align-items: start;
+    width: 100%;
+    gap: 20px;
+    padding-bottom: 20px;
+  }
+}

package/src/components/DropdownList/DropdownList.stories.jsx

@@ -0,0 +1,22 @@
+import { useState } from "react"
+import { DropdownList } from "./DropdownList"
+
+export default {
+  title: "Components/DropdownList",
+  component: DropdownList,
+}
+let open = false
+export const Default = {
+  args: {
+    children: (
+      <div>
+        <h3>Test</h3>
+      </div>
+    ),
+    isOpen: open,
+    //setIsOpen: () => {open = !open  },
+    color: "#605B56",
+    activeColor: "#F8A925",
+    showBottomBar: true,
+  },
+}

package/src/components/DropdownList/DropdownListExample/DropDownListExample.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from "react"
+import { DropdownList } from "../DropdownList"
+
+export const DropDownListExample = () => {
+  const [activeDropdown, setActiveDropdown] = useState(0)
+  const categoriesList = [
+    { title: "Example0", id: 0 },
+    { title: "Example1", id: 1 },
+    { title: "Example2", id: 2 },
+  ]
+
+  return (
+    <div>
+      {categoriesList?.map(({ id, title }) => {
+        return (
+          <DropdownList
+            id={id}
+            title={title}
+            isOpen={activeDropdown == id}
+            onClick={() => {
+              setActiveDropdown((actual) => (actual == id ? undefined : id))
+            }}
+            color="#605B56"
+            activeColor="#F8A925"
+          >
+            <h3>{title} </h3>
+            <p>This is a test content inside the dropdown list.</p>
+          </DropdownList>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/DropdownList/DropdownListExample/DropdownListExample.stories.jsx

@@ -0,0 +1,11 @@
+import { useState } from "react"
+import { DropDownListExample } from "./DropDownListExample"
+
+export default {
+  title: "Components/DropDownListExample",
+  component: DropDownListExample,
+}
+let open = false
+export const Default = {
+  args: {},
+}

package/src/components/EditAmbit/EditAmbit.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const EditAmbit = () => {
+  return (
+    <div>EditAmbit</div>
+  )
+}

package/src/components/FiltersAmbit/AppliedFilters/AppliedFilters.jsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react"
+
+import CloseIcon from '../../../assets/img/closeIcon.svg';
+import { DropdownList } from "../../DropdownList/DropdownList"
+import PropTypes from "prop-types"
+import { div } from "framer-motion/client"
+import styles from "./AppliedFilters.module.scss"
+import { useAmbitStore } from "../useAmbitStore"
+import { useTranslation } from "react-i18next"
+
+export const AppliedFilters = ({ title, onClick, isOpen = true, textColor = "#ffffff", backgroundColor = "#605B5680" }) => {
+    const { t } = useTranslation()
+    const { tematicalFiltersSelected } = useAmbitStore((s) => s)
+
+    const deleteFilter = (codename) => {
+        // Takes the filter code to remove and updates the store accordingly
+        useAmbitStore.setState(state => ({
+            tematicalFiltersSelected: state.tematicalFiltersSelected.filter(
+                f => f.code !== codename
+            )
+        }));
+    }
+
+    return (
+        <DropdownList
+            isOpen={isOpen}
+            onClick={onClick}
+            title={title ? t(title) : "Applied Filters"}
+        >
+            <div className={styles.AppliedFiltersContainer}>
+                {tematicalFiltersSelected?.map((filter, key) => {
+                    return (
+
+                        <div key={key} className={styles.AppliedFilterContent} style={{ color: textColor, background: backgroundColor }}>
+                            {filter.code}
+
+                            <img src={CloseIcon} alt="CloseIcon" onClick={() => deleteFilter(filter.code)} style={{ cursor: 'pointer' }} />
+                        </div>
+                    )
+                })}
+            </div>
+        </DropdownList>
+    )
+}
+AppliedFilters.propTypes = {
+    isOpen: PropTypes.bool,
+    onClick: PropTypes.func,
+    title: PropTypes.string,
+    textColor: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    indicators: PropTypes.arrayOf(
+        PropTypes.shape({
+            title: PropTypes.string.isRequired,
+            Codename: PropTypes.string.isRequired,
+        })
+    ),
+}

package/src/components/FiltersAmbit/AppliedFilters/AppliedFilters.module.scss

@@ -0,0 +1,13 @@
+.AppliedFiltersContainer {
+    @include flex(row, start, start, $gap: 10px);
+
+    .AppliedFilterContent {
+        @include flex($gap: 10px);
+        @include fontBase;
+        height: 35px;
+        width: fit-content;
+        padding: 0px 20px;
+        border-radius: 100px;
+        // background-color: red;
+    }
+}