@tmf_ciclica/ciclicastorybook 1.0.0

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

@@ -0,0 +1,47 @@
+import { AppliedFilters } from "./AppliedFilters"
+
+export default {
+    title: "Components/AppliedFilters",
+    component: AppliedFilters,
+}
+
+let open = true
+let activeFilters = [
+    {
+        "type": "cat",
+        "code": "us_prn",
+        "values": [
+            0,
+            2
+        ]
+    },
+    {
+        "type": "cat",
+        "code": "al_max_cat",
+        "values": [
+            0
+        ]
+    },
+    {
+        "type": "cat",
+        "code": "uni_pluri",
+        "values": [
+            1
+        ]
+    },
+    {
+        "type": "abs",
+        "code": "al_max",
+        "min": 1,
+        "max": 11
+    }
+]
+
+export const Default = {
+    args: {
+        activeFilters,
+        isOpen: open,
+        textColor: "white",
+        backgroundColor: "#605B56"
+    },
+}

package/src/components/FiltersAmbit/FiltersAmbit.jsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react"
+
+import { A } from "storybook/internal/components"
+import { AppliedFilters } from "./AppliedFilters/AppliedFilters"
+import { GeographicalFilters } from "./GeographicFilters/GeographicalFilters"
+import { TematicalFilters } from "./TematicalFilters/TematicalFilters"
+import { filter } from "d3"
+import styles from "./FiltersAmbit.module.scss"
+import { useAmbitStore } from "./useAmbitStore"
+import { useTranslation } from "react-i18next"
+
+export const FiltersAmbit = ({
+  ambitName,
+  ambitDescription,
+  defaultFilters,
+}) => {
+  const { t } = useTranslation()
+
+  const { tematicalFiltersSelected } = useAmbitStore((s) => s)
+
+  useEffect(() => {
+    if (defaultFilters && defaultFilters.length > 0) {
+      // Initialize the store with default filters
+      useAmbitStore.setState((state) => ({
+        tematicalFiltersSelected: defaultFilters,
+      }))
+    }
+  }, [defaultFilters])
+  useEffect(() => {
+    console.log("filtersSelected changed: ", tematicalFiltersSelected)
+  }, [tematicalFiltersSelected])
+
+  return (
+    <div className={styles.FiltersAmbitContainer}>
+      <div className={styles.FiltersAmbitHeader}>
+        <div className={styles.FiltersAmbitTitle}>{ambitName}</div>
+        <div className={styles.FiltersAmbitDescription}>
+          <div className={styles.FiltersAmbitDescriptionTitle}>
+            {t("Descripción")}
+          </div>
+          {ambitDescription}
+        </div>
+      </div>
+
+      <AppliedFilters
+        title={t('Filtros Aplicados')}
+        isOpen={true}
+        textColor={"#ffffff"}
+        backgroundColor={"#605B5680"}
+      />
+
+      <GeographicalFilters />
+      
+      <TematicalFilters />
+
+    </div>
+  )
+}

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

@@ -0,0 +1,28 @@
+.FiltersAmbitContainer {
+    width: 100%;
+    height: 100%;
+    padding: 28.5px 0 0 24px;
+
+    .FiltersAmbitHeader {
+        @include flex(column, start, start, $gap: 30px);
+
+        .FiltersAmbitTitle {
+            @include fontSubtitols;
+            padding: 0 0 26px 0;
+            border-bottom: 1.5px solid #605B56;
+            width: 100%;
+        }
+
+        .FiltersAmbitDescription {
+            @include flex(column, start, start, $gap: 10px);
+            padding: 0 0 26px 0;
+            // border-bottom: 1.5px solid #605B56;
+            @include fontBase;
+
+            .FiltersAmbitDescriptionTitle {
+                @include fontSubtitols;
+            }
+
+        }
+    }
+}

package/src/components/FiltersAmbit/FiltersAmbit.stories.jsx

@@ -0,0 +1,36 @@
+import { FiltersAmbit } from "./FiltersAmbit"
+// import indicators from "../../../constants/indicators"
+export default {
+  title: "Components/FiltersAmbit",
+  component: FiltersAmbit,
+}
+
+export const Default = {
+  args: {
+    ambitName: "Ambito 1",
+    ambitDescription:
+      "Enim occaecat consequat aute nulla fugiat ullamco proident.Culpa ex minim incididunt laboris magna ipsum. In duis irure enim culpa ex anim nulla deserunt ut voluptate amet. Aliquip id ea ut duis aute minim. Voluptate ut ipsum ea nisi quis do sunt et eu deserunt. Id tempor cupidatat veniam cupidatat enim consequat. Duis nulla velit amet ex cupidatat exercitation laborum sint dolore in dolore velit.",
+    defaultFilters: [
+      {
+        type: "cat",
+        code: "uni_pluri",
+        values: [1, 2, 3],
+      },
+      {
+        type: "cat",
+        code: "nom_cluster",
+        values: [2, 4, 6, 7, 8, 9, 10, 11, 12],
+      },
+      {
+        type: "cat",
+        code: "any_const_cat",
+        values: [2, 3, 4, 5],
+      },
+      {
+        type: "cat",
+        code: "us_prn",
+        values: [2, 3, 4, 5, 6, 7, 8, 9, 10],
+      },
+    ],
+  },
+}

package/src/components/FiltersAmbit/GeographicFilters/GeographicalFilters.jsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react"
+
+import { DropdownList } from "../../DropdownList/DropdownList"
+import PropTypes from "prop-types"
+// import styles from "./GeographicalFilters.module.scss"
+import { useAmbitStore } from "../useAmbitStore"
+import { useTranslation } from "react-i18next"
+
+export const GeographicalFilters = ({ title, onClick, isOpen = true, textColor = "#ffffff", backgroundColor = "#605B5680" }) => {
+    const { t } = useTranslation()
+
+    const { tematicalFiltersSelected } = useAmbitStore((s) => s)
+
+    return (
+        <DropdownList
+            isOpen={isOpen}
+            onClick={onClick}
+            title={title ? t(title) : "Geographical Filters"}
+        >
+ 
+            A 
+        </DropdownList>
+    )
+}
+GeographicalFilters.propTypes = {
+    isOpen: PropTypes.bool,
+    onClick: PropTypes.func,
+    title: PropTypes.string,
+    textColor: PropTypes.string,
+    backgroundColor: PropTypes.string,
+
+}
+

package/src/components/FiltersAmbit/GeographicFilters/GeographicalFilters.module.scss

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

package/src/components/FiltersAmbit/GeographicFilters/GeographicalFilters.stories.jsx

@@ -0,0 +1,47 @@
+import { GeographicalFilters } from "./GeographicalFilters"
+
+export default {
+    title: "Components/GeographicalFilters",
+    component: GeographicalFilters,
+}
+
+let open = true
+let activeFilters = [
+    {
+        "type": "cat",
+        "code": "us_prn",
+        "values": [
+            0,
+            2
+        ]
+    },
+    {
+        "type": "cat",
+        "code": "al_max_cat",
+        "values": [
+            0
+        ]
+    },
+    {
+        "type": "cat",
+        "code": "uni_pluri",
+        "values": [
+            1
+        ]
+    },
+    {
+        "type": "abs",
+        "code": "al_max",
+        "min": 1,
+        "max": 11
+    }
+]
+
+export const Default = {
+    // args: {
+    //     activeFilters,
+    //     isOpen: open,
+    //     textColor: "white",
+    //     backgroundColor: "#605B56"
+    // },
+}

package/src/components/FiltersAmbit/TematicalFilters/TematicalFilters.jsx

@@ -0,0 +1,83 @@
+import { useEffect } from "react"
+import Indicadores from "../../../constants/indicators"
+import { DropdownList } from "../../DropdownList/DropdownList"
+import { useTranslation } from "react-i18next"
+//import styles from "./TematicalFilters.module.scss"
+import { TematicalFiltersCategory } from "./TematicalFiltersCategory/TematicalFiltersCategory"
+import PropTypes from "prop-types"
+import { useAmbitStore } from "../useAmbitStore"
+
+//Needs DropdownList, zustand and react-slider component to be used
+export const TematicalFilters = ({
+  indicators = Indicadores,
+  isOpen = true,
+  title,
+  fontColor = "#605B56",
+  //The color of the slider and the checkbox when is checked
+  inputsColor = "#605B56",
+}) => {
+  const { tematicalFiltersSelected } = useAmbitStore((s) => s)
+  const { t } = useTranslation()
+  //This function is used to reset the indicator selected when type is changed
+  //Only use it if we cant select both types at the same time.
+  // const onChangeBothType = ({ code }) => {
+  // setFiltersSelected((actual) => {
+  //   let foundIndicator = actual.find((f) => f.code == code)
+  //   //If the indicator is found, we  delete the indicator key
+  //   if (foundIndicator) {
+  //     let newFiltersSelected = actual.filter((f) => f.code !== code)
+  //     return newFiltersSelected
+  //   } else {
+  //     return actual
+  //   }
+  // })
+  // }
+  useEffect(() => {
+    console.log("filtersSelected changed: ", tematicalFiltersSelected)
+  }, [tematicalFiltersSelected])
+  useEffect(() => {
+    fontColor && useAmbitStore.setState(() => ({ fontColor: fontColor }))
+  }, [fontColor])
+
+  useEffect(() => {
+    inputsColor && useAmbitStore.setState(() => ({ inputsColor: inputsColor }))
+  }, [inputsColor])
+
+  return (
+    <DropdownList
+      isOpen={isOpen}
+      title={title ? t(title) : "Tematical filters"}
+      color={fontColor}
+    >
+      {indicators?.map((category, key) => {
+        return (
+          <TematicalFiltersCategory
+            category={category}
+            key={`category-${key}`}
+            fontColor={fontColor}
+            // onChangeBothType={onChangeBothType}
+          />
+        )
+      })}
+    </DropdownList>
+  )
+}
+TematicalFilters.propTypes = {
+  isOpen: PropTypes.bool,
+  title: PropTypes.string,
+  indicators: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      type: PropTypes.string,
+      values: PropTypes.arrayOf(
+        PropTypes.shape({
+          codename: PropTypes.string,
+          title: PropTypes.string,
+        })
+      ),
+    })
+  ),
+  fontColor: PropTypes.string,
+  onChangeTematicalFilters: PropTypes.func,
+  inputsColor: PropTypes.string,
+}

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

@@ -0,0 +1,8 @@
+.tematicalFilters{
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  background-color: var(--color-background);
+  border-radius: 8px;
+}

package/src/components/FiltersAmbit/TematicalFilters/TematicalFilters.stories.jsx

@@ -0,0 +1,17 @@
+import { TematicalFilters } from "./TematicalFilters"
+import indicators from "../../../constants/indicators"
+export default {
+  title: "Components/TematicalFilters",
+  component: TematicalFilters,
+}
+let open = true
+export const Default = {
+  args: {
+    indicators: indicators,
+    // activeColor: "#f75321",
+    activeColor: "#F8A925",
+    fontColor: "#605B56",
+    isOpen: open,
+    
+  },
+}

package/src/components/FiltersAmbit/TematicalFilters/TematicalFiltersCategory/TematicalFiltersCategory.jsx

@@ -0,0 +1,60 @@
+import { useState } from "react"
+import { DropdownList } from "../../../DropdownList/DropdownList"
+import { TematicalFiltersSubcat } from "../TematicalFiltersSubcat/TematicalFiltersSubcat"
+import { TematicalFiltersInput } from "../TematicalFiltersInput/TematicalFiltersInput"
+import PropTypes from "prop-types"
+import { useAmbitStore } from "../../useAmbitStore"
+
+//Needs DropdownList component to be used
+//If category has subcategories, it will render them as dropdowns, else will render the indicators.
+export const TematicalFiltersCategory = ({
+  category,
+  //  onChangeBothType,
+}) => {
+  const { name, subcategories, indicators } = category || {}
+  const { activeCategory, fontColor } = useAmbitStore((s) => s)
+  return (
+    category && (
+      <DropdownList
+        onClick={() => {
+          useAmbitStore.setState((s) => ({
+            activeCategory: activeCategory === `id${name}` ? "" : `id${name}`,
+          }))
+        }}
+        title={name}
+        isOpen={activeCategory === `id${name}`}
+        titleFontStyles={{ fontSize: 18, fontWeight: "bold" }}
+        showBottomBar={false}
+        color={fontColor}
+      >
+        {subcategories
+          ? subcategories.map((subcategory, key) => (
+              <TematicalFiltersSubcat
+                subcategory={subcategory}
+                key={`subcategory-${key}`}
+                fontColor={fontColor}
+                //onChangeBothType={onChangeBothType}
+              />
+            ))
+          : indicators &&
+            indicators.map((indicator, key) => (
+              <TematicalFiltersInput
+                indicator={indicator}
+                key={`indicator-${key}`}
+                fontColor={fontColor}
+                //onChangeBothType={onChangeBothType}
+              />
+            ))}
+      </DropdownList>
+    )
+  )
+}
+
+TematicalFiltersCategory.propTypes = {
+  category: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    subcategories: PropTypes.array,
+    indicators: PropTypes.array,
+  }),
+  //onChangeBothType: PropTypes.func,
+}

package/src/components/FiltersAmbit/TematicalFilters/TematicalFiltersInput/AbsoluteSlider/AbsoluteSlider.jsx

@@ -0,0 +1,61 @@
+import ReactSlider from "react-slider"
+import styles from "./AbsoluteSlider.module.scss"
+import { useTranslation } from "react-i18next"
+import PropTypes from "prop-types"
+
+export const AbsoluteSlider = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  width = 300,
+  unit,
+  fontColor = "#605B56",
+  value = [min, max],
+}) => {
+  const { t } = useTranslation()
+  const handleChange = (newValues) => {
+    onChange?.({ min: newValues[0], max: newValues[1] })
+  }
+
+  return (
+    <div
+      className={styles.container}
+      style={{ width: `${width}px`, color: `${fontColor}` }}
+    >
+      <div className={styles.unitLabel}>
+        <span>{t(unit)}</span>
+      </div>
+      <ReactSlider
+        className={styles.slider}
+        thumbClassName={styles.thumb}
+        trackClassName={styles.track}
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={handleChange}
+        withTracks={true}
+        pearling
+        minDistance={1}
+        
+      />
+      <div className={styles.labels}>
+        <span>{value[0]}</span>
+        <span>{value[1]}</span>
+      </div>
+    </div>
+  )
+}
+AbsoluteSlider.propTypes = {
+  min: PropTypes.number,
+  max: PropTypes.number,
+  step: PropTypes.number,
+  initialMin: PropTypes.number,
+  initialMax: PropTypes.number,
+  onChange: PropTypes.func,
+  width: PropTypes.number,
+  unit: PropTypes.string,
+  fontColor: PropTypes.string,
+  value: PropTypes.arrayOf(PropTypes.number),
+}

package/src/components/FiltersAmbit/TematicalFilters/TematicalFiltersInput/AbsoluteSlider/AbsoluteSlider.module.scss

@@ -0,0 +1,45 @@
+.container {
+  padding-top: 15px;
+  font-size: 14px;
+  span {
+    font-size: 14px;
+  }
+  .unitLabel {
+    height: 40px;
+  }
+  .slider {
+    height: 6px;
+    background-color: #ddd;
+    border-radius: 3px;
+    position: relative;
+  }
+
+  .thumb {
+    height: 20px;
+    width: 20px;
+    background-color: #605b56;
+    border-radius: 50%;
+    cursor: grab;
+    top: -7px;
+    position: absolute;
+  }
+
+  .track {
+    top: 0;
+    bottom: 0;
+    background: #605b56;
+    border-radius: 3px;
+
+    // react-slider asigna automáticamente:
+    // - track-0: izquierda del primer thumb
+    // - track-1: entre thumbs
+    // - track-2: derecha del segundo thumb
+  }
+
+  .labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    margin-top: 10px;
+  }
+}

package/src/components/FiltersAmbit/TematicalFilters/TematicalFiltersInput/CategoryCheckbox/CategoryChackbox.module.scss

@@ -0,0 +1,18 @@
+.checkboxContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 14px;
+  font-weight: 400;
+  cursor: pointer;
+
+  input[type="checkbox"] {
+    appearance: none; // Oculta el estilo nativo
+    -webkit-appearance: none;
+    width: 10px;
+    height: 10px;
+    border-radius: 1px;
+    background-color: white;
+    cursor: pointer;
+  }
+}

package/src/components/FiltersAmbit/TematicalFilters/TematicalFiltersInput/CategoryCheckbox/CategoryCheckbox.jsx

@@ -0,0 +1,47 @@
+import PropTypes from "prop-types"
+import style from "./CategoryChackbox.module.scss"
+import { useTranslation } from "react-i18next"
+import { useAmbitStore } from "../../../useAmbitStore"
+export const CategoryCheckbox = ({
+  onClick,
+  containerStyles,
+  color = "#605B56",
+  indicator,
+  value,
+}) => {
+  const { t } = useTranslation()
+  const { title } = indicator || {}
+  const { fontColor, inputsColor } = useAmbitStore((s) => s)
+  return (
+    <div
+      style={{ ...containerStyles, color: color }}
+      role="checkbox"
+      className={style.checkboxContainer}
+      onClick={onClick}
+    >
+      <input
+        type="checkbox"
+        checked={typeof value === "boolean" ? value : true}
+        value={value}
+        readOnly
+        style={{
+          border: `1.5px solid ${value ? inputsColor : fontColor}`,
+          backgroundColor: value ? inputsColor : "white",
+        }}
+      />
+      <span className="checkmark">{t(title)}</span>
+    </div>
+  )
+}
+
+CategoryCheckbox.propTypes = {
+  onClick: PropTypes.func,
+  value: PropTypes.bool,
+  containerStyles: PropTypes.object,
+  color: PropTypes.string,
+  indicator: PropTypes.shape({
+    title: PropTypes.string,
+    codename: PropTypes.array,
+  }),
+  checkedColor: PropTypes.string,
+}