@tmf_ciclica/ciclicastorybook 1.0.12 → 1.0.15

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

@@ -1,74 +0,0 @@
-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

@@ -1,27 +0,0 @@
-.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

@@ -1,68 +0,0 @@
-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

@@ -1,29 +0,0 @@
-.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

@@ -1,21 +0,0 @@
-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

@@ -1,92 +0,0 @@
-
-/*
-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

@@ -1,37 +0,0 @@
-.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

@@ -1,55 +0,0 @@
-
-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

@@ -1,69 +0,0 @@
-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

@@ -1,20 +0,0 @@
-.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

@@ -1,22 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

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

@@ -1,57 +0,0 @@
-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

@@ -1,13 +0,0 @@
-.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;
-    }
-}