@tmf_ciclica/ciclicastorybook 1.0.0

package/src/index.scss

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

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

package/src/locales/es.json

@@ -0,0 +1,15 @@
+{
+    "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

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

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

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

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

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

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

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

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

package/src/store/index.js

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

package/src/store/mapSlice/index.js

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

package/src/store/mapSlice/mapSlice.js

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

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

package/src/store/rightBarSlice/rightBarSlice.js

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

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

package/src/store/routerSlice/routerSlice.js

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

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

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

package/src/store/userSlice/userSlice.js

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

@@ -0,0 +1,36 @@
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import path from "path"
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "@/_variables.scss" as *;`,
+      },
+    },
+  },
+  build: {
+    lib: {
+      entry: 'src/index.js',
+      name: 'Ciclica Front',
+      fileName: (format) => `ciclica-front.${format}.js`,
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        }
+      }
+    },
+    cssCodeSplit: false 
+  }
+})