@tmf_ciclica/ciclicastorybook 1.0.10 → 1.0.14

package/src/index.scss

@@ -1,87 +0,0 @@
-body,
-*,
-*::before,
-*::after {
-  margin: 0;
-  box-sizing: border-box;
-  font-family: $mainFont;
-  padding: 0px;
-}
-html,
-body {
-  height: 100%;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Elimina estilos de lista */
-ul,
-ol {
-  list-style: none;
-}
-
-/* Elimina decoración de enlaces */
-a,
-.link {
-  text-decoration: none;
-  cursor: pointer;
-  color: inherit;
-}
-button {
-  cursor: pointer;
-}
-/* Botones y formularios sin estilos base del navegador */
-button,
-input,
-textarea,
-select {
-  font: inherit;
-  background: none;
-  border: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-  color: inherit;
-}
-
-/* Imágenes responsivas */
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-
-p,
-div {
-  @include fontBase();
-}
-
-h1 {
-  @include fontTitols();
-}
-h2 {
-  @include fontSubtitols();
-}
-h3 {
-  @include fontBaseSemi();
-}
-.tooltip-parent {
-  position: relative;
-  width: fit-content;
-
-  .tooltip {
-    display: none;
-  }
-
-  &:hover {
-    .tooltip {
-      display:flex;
-      align-items: center;
-
-    }
-  }
-}

package/src/locales/ca.json

@@ -1,8 +0,0 @@
-{
-    "login": "Accés",
-    "TopNavMenu": {
-        "opt1": "Test1",
-        "opt2": "Test2",
-        "opt3": "Test3"
-    }
-}

package/src/locales/es.json

@@ -1,15 +0,0 @@
-{
-    "login": "Acceso",
-    "indicators": "Indicadores",
-    "TopNavMenu": {
-        "opt1": "Test1",
-        "opt2": "Test2",
-        "opt3": "Test3"
-    }, 
-  	"indicators": {
-    	"indicators": "Indicadores",
-    	"arq": "Arquitectónicos",
-    	"arq_princ": "Indicadores principales"
-  	},
-    "sampleText": "Texto test"
-}

package/src/main.jsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
-
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

package/src/sections/HeaderSection/HeaderSection.jsx

@@ -1,51 +0,0 @@
-/*
-Esta sección muestra una barra superior como Header de la aplicación. Permite mostrar elementos en los dos extremos de esta barra.
-Los args que recibe son propiedades css y listados de componentes. 
-Propiedades css= backgroundColor y height
-Listados de componentes:
-leftComponents[]=>componentes que van en el extremo izquierdo de la barra, uno al lado del otro, ordenados de izquierda a derecha
-rightComponents[]=>componentes que van en el extremo derecho de la barra, uno al lado del otro, ordenados de derecha a izquierda
-centerComponents[]
-los componentes se pasan como elementos jsx (ej: <Logo src={x} />)
-*/
-import PropTypes from 'prop-types';
-//styles
-import styles from './HeaderSection.module.scss';
-
-export const HeaderSection = ({ cssProps, leftComponents = [], centerComponents = [], rightComponents = [] }) => {
-  return (
-    <div className={styles.header} style={cssProps}>
-      <div className={styles.leftComponents} style={{ height: cssProps.height }}>
-        {leftComponents.map((component, index) => (
-          <div style={{ height: cssProps.height }} key={index}>{component}</div>
-        ))}
-      </div>
-
-      <div className={styles.centerComponents} style={{ height: cssProps.height }}>
-        {centerComponents.map((component, index) => (
-          <div style={{ height: cssProps.height }} key={index}>{component}</div>
-        ))}
-      </div>
-
-
-
-      <div className={styles.rightComponents} style={{ height: cssProps.height }}>
-        {rightComponents.map((component, index) => (
-          <div style={{ height: cssProps.height }} key={index}>{component}</div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-HeaderSection.propTypes = {
-  cssProps: PropTypes.shape({
-    backgroundColor: PropTypes.string.isRequired,
-    height: PropTypes.string.isRequired,
-    borderColor: PropTypes.string,
-    textColor: PropTypes.string
-  }),
-  leftComponents: PropTypes.arrayOf(PropTypes.node),
-  centerComponents: PropTypes.arrayOf(PropTypes.node),
-  rightComponents: PropTypes.arrayOf(PropTypes.node),
-};

package/src/sections/HeaderSection/HeaderSection.module.scss

@@ -1,33 +0,0 @@
-.header {
-  width: 100%;
-  height: $headerHeight;
-  display: flex;
-  align-items: center;
-  position: relative;
-  padding: 0 16px;
-  background-color: #fff;
-  border-bottom: 1px solid black;
-
-  .leftComponents,
-  .centerComponents,
-  .rightComponents {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-  }
-
-  .leftComponents {
-    left: 16px;
-  }
-
-  .centerComponents {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .rightComponents {
-    right: 16px;
-  }
-}

package/src/sections/HeaderSection/HeaderSection.stories.jsx

@@ -1,61 +0,0 @@
-// components
-import { HeaderSection } from "./HeaderSection";
-import { LangSelector } from "../../components/LangSelector/LangSelector";
-import { LogoApp } from "../../components/LogoApp/LogoApp";
-import Options from '../../constants/topNavMenuOptions'
-import { TopNavMenu } from "../../components/TopNavMenu/TopNavMenu";
-import { UserMenuTrigger } from "../../components/UserMenuTrigger/UserMenuTrigger";
-import arrow from '../../assets/img/arrowDown.svg'
-//img
-import sampleImg from "../../assets/img/sample2.png"
-import world from '../../assets/img/world.svg'
-export default {
-  component: HeaderSection,
-  title: "Sections/HeaderSection",
-  tags: ["header"],
-  args: {},
-};
-
-export const Default = {
-  args: {
-    cssProps: {
-      backgroundColor: "#605B56",
-      height: "60px",
-    },
-    leftComponents: [<LogoApp key="logo" alt="alt" />], // Agrega "key" a cada componente dentro de un array
-    rightComponents: [<UserMenuTrigger key="menu" />],
-  },
-};
-const langs = [
-  { code: 'ca', title: 'Català', titleSelected: 'Ca' },
-  { code: 'es', title: 'Español', titleSelected: 'Es' }
-]
-
-export const WithLangSelector = {
-  args: {
-    cssProps: {
-      backgroundColor: "#605B56",
-    },
-    leftComponents: [<LogoApp key="logo" src={sampleImg} alt="My Logo" />],
-    rightComponents: [
-      <UserMenuTrigger key="menu2" />,
-      <LangSelector key="logo2" langs={langs} arrow={arrow} imgPrev={world} />,
-    ],
-  },
-};
-
-export const WithNavbar = {
-  args: {
-    cssProps: {
-      backgroundColor: "#605B56",
-      borderColor: '#777777',
-      textColor: '#F8A925'
-    },
-    leftComponents: [<LogoApp key="logo" src={sampleImg} alt="My Logo" />],
-    centerComponents: [<TopNavMenu key="topMenu" options={Options} />],
-    rightComponents: [
-      <UserMenuTrigger key="menu2" />,
-      <LangSelector key="logo2" langs={langs} arrow={arrow} imgPrev={world} />,
-    ],
-  },
-};

package/src/sections/RightSidebar/RightSidebar.jsx

@@ -1,35 +0,0 @@
-import { useDispatch, useSelector } from 'react-redux';
-
-import PropTypes from 'prop-types';
-import { setShowRightBar } from '../../store/rightBarSlice';
-import styles from './RightSidebar.module.scss';
-
-export const RightSidebar = ({ width = '300px', children }) => {
-  const showRightBar = useSelector((state) => state.rightBarState.showRightBar);
-  const dispatch = useDispatch();
-
-  const handleClose = () => {
-    dispatch(setShowRightBar(false));
-  };
-
-  return (
-    <div
-      className={`${styles.sidebar} ${showRightBar ? styles.open : ''}`}
-      style={{ width: showRightBar ? width : 0 }}
-    >
-      {showRightBar && (
-        <div className={styles.content}>
-          <button className={styles.closeButton} onClick={handleClose}>
-            &times;
-          </button>
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
-
-RightSidebar.propTypes = {
-  width: PropTypes.string,
-  children: PropTypes.node,
-};

package/src/sections/RightSidebar/RightSidebar.module.scss

@@ -1,39 +0,0 @@
-.sidebar {
-  position: fixed;
-  top: 0;
-  right: 0;
-  height: 100%;
-  background-color: #ffffff;
-  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
-  overflow-x: hidden;
-  overflow-y: auto;
-  transition: width 0.3s ease;
-  z-index: 1000;
-  width: 0;
-}
-
-.open {
-  border-left: 1px solid #ddd;
-}
-
-.content {
-  position: relative;
-  padding: 20px;
-  height: 100%;
-}
-
-.closeButton {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  font-size: 24px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: #333;
-  transition: color 0.2s ease;
-
-  &:hover {
-    color: #000;
-  }
-}

package/src/sections/RightSidebar/RightSidebar.stories.jsx

@@ -1,21 +0,0 @@
-import {RightSidebar} from './RightSidebar';
-
-
-export default {
-  title: 'Sections/RightSidebar',
-  component: RightSidebar,
-};
-
-
-
-const Template = (args) => (
-  
-    <RightSidebar {...args} />
-  
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  width: '300px',
-  children: <div>Contenido del sidebar</div>,
-};

package/src/sections/index.jsx

@@ -1,2 +0,0 @@
-export { HeaderSection } from './HeaderSection/HeaderSection'
-export { RightSidebar } from './RightSidebar/RightSidebar'

package/src/store/index.js

@@ -1 +0,0 @@
-export * from './store'

package/src/store/mapSlice/index.js

@@ -1 +0,0 @@
-export * from './mapSlice.js'

package/src/store/mapSlice/mapSlice.js

@@ -1,30 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit"
-
-export const mapSlice = createSlice({
-    name: 'mapSlice',
-    initialState: {
-        showTexts: true,
-        sliderSelectedYear: 2025,
-        activeIndicatorKey: 0,
-        activeIndicatorType: 'cat',
-        activeIndicatorUnit: null
-    },
-    reducers: {
-        setShowTexts: (state, action) => {
-            state.showTexts = action.payload
-        },
-        setYear: (state, action) => {
-            state.sliderSelectedYear = action.payload
-        },
-        setActiveIndicatorKey: (state, action) => {
-            state.activeIndicatorKey = action.payload
-        },
-        setActiveIndicatorType: (state, action) => {
-            state.activeIndicatorType = action.payload
-        },
-        setActiveIndicatorUnit: (state, action) => {
-            state.activeIndicatorUnit = action.payload
-        }
-    }
-})
-export const { setShowTexts, setYear, setActiveIndicatorKey, setActiveIndicatorType, setActiveIndicatorUnit } = mapSlice.actions

package/src/store/rightBarSlice/index.js

@@ -1 +0,0 @@
-export * from './rightBarSlice'

package/src/store/rightBarSlice/rightBarSlice.js

@@ -1,28 +0,0 @@
-
-import { createSlice } from '@reduxjs/toolkit';
-
-export const rightBarSlice = createSlice({
-  name: 'rightBar',
-  initialState: {
-    showRightBar: true,
-    children: '',
-    width:'500px'
-  },
-  reducers: {
-    toggleRightBar: (state) => {
-      state.showRightBar = !state.showRightBar;
-    },
-    setShowRightBar: (state, action) => {
-      state.showRightBar = action.payload;
-    },
-    setRightBarChildren: (state, action) => {
-        state.children = action.payload
-    },
-    setRightBarWidth: (state, action) => {
-        state.width = action.payload
-    }
-  },
-});
-
-export const { toggleRightBar, setShowRightBar, setRightBarChildren, setRightBarWidth } = rightBarSlice.actions;
-

package/src/store/routerSlice/index.js

@@ -1 +0,0 @@
-export * from './routerSlice.js'

package/src/store/routerSlice/routerSlice.js

@@ -1,14 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit"
-
-export const routerSlice = createSlice({
-    name: 'routerSlice',
-    initialState: {
-        currentRoute: false,
-    },
-    reducers: {
-        setCurrentRoute: (state, action) => {
-            state.showLogIn = action.payload
-        }, 
-    }
-})
-export const { setCurrentRoute } = routerSlice.actions 

package/src/store/store.js

@@ -1,14 +0,0 @@
-import { combineReducers, configureStore } from "@reduxjs/toolkit"
-
-import { mapSlice } from "./mapSlice"
-import { routerSlice } from "./routerSlice"
-import { userSlice } from "./userSlice"
-import { rightBarSlice } from "./rightBarSlice"
-
-export const rootReducer = combineReducers({
-    userState: userSlice.reducer,
-    mapState: mapSlice.reducer,
-    routerState: routerSlice.reducer,
-    rightBarState: rightBarSlice.reducer
-})
-export const store = configureStore({ reducer: rootReducer })

package/src/store/userSlice/index.js

@@ -1 +0,0 @@
-export * from './userSlice'

package/src/store/userSlice/userSlice.js

@@ -1,22 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit"
-
-export const userSlice = createSlice({
-    name: 'userSlice',
-    initialState: {
-        user: {
-            isLoggedIn: false,
-            username: '',
-        },
-        showLogIn: false,
-        showUserMenu: false,
-    },
-    reducers: {
-        setShowLogIn: (state, action) => {
-            state.showLogIn = action.payload
-        },
-        setShowUserMenu: (state, action) => {
-            state.showUserMenu = action.payload
-        }
-    }
-})
-export const { setShowLogIn, setShowUserMenu } = userSlice.actions 

package/vite.config.js

@@ -1,49 +0,0 @@
-import { defineConfig } from "vite"
-import react from "@vitejs/plugin-react"
-import path from "path"
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    extensions: ['.js', '.jsx', '.json'],
-    alias: {
-      "@": path.resolve(__dirname, "src"),
-    },
-  },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `@use "@/_variables.scss" as *;`,
-      },
-    },
-  },
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, 'src/index.jsx'),
-      name: 'CiclicaStorybook',
-      fileName: (format) => `index.${format}.js`,
-      formats: ['es', 'cjs'],
-    },
-    rollupOptions: {
-      external: [
-        'react', 
-        'react',
-        'react-dom',
-        '@mui/material',
-        '@emotion/react',
-        '@emotion/styled',
-        '@reduxjs/toolkit',
-        'react-redux',
-        'react-router-dom',
-        'i18next',
-        'react-i18next',
-        'mapbox-gl',
-        'maplibre-gl',
-        'd3',
-        'framer-motion',
-        'zustand'
-      ],
-    },
-    cssCodeSplit: false 
-  }
-})