imbric-theme 0.3.9 → 0.4.0

package/layout/DynamicTable/DynamicTable.js

@@ -16,7 +16,7 @@ import LoadingError from '../../molecules/LoadingError'
 // import useStateDate from '../../hook/useStateDate';
 
 
-export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns, isLayoutDate, isViewRange, isViewAddColumn, isViewDownloadDoc, handleAddColumn, handleSelectRange, handleDownloadExcel }) => {
+export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns, isLayoutDate, isViewRange, isViewAddColumn, isViewDownloadDoc, handleAddColumn, handleSelectRange, handleDownloadExcel, labelDinamicSelect, placeholderDinamicSelect, labelSinceDateRange, labelTillDateRange }) => {
 
   const [tableData, setTableData] = useState(optionsData);
   const [columnsData, setColumnsData] = useState(opColumns);
@@ -94,6 +94,8 @@ export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns,
             <DatePicker
               isLayoutDate={isLayoutDate}
               onChangeRange={handleSelectRange}
+              sinceDateRange={labelSinceDateRange}
+              tillDateRange={labelTillDateRange}
             />
           </div>
         ) : null}
@@ -102,13 +104,13 @@ export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns,
 
           {isViewAddColumn ? (
             <div className={getStyles('opFunctionBox3')}>
-              <Label>Mostrar u ocultar columnas</Label>
+              <Label>{labelDinamicSelect}</Label>
               <DynamicSelect
                 isMulti
                 isInline
                 onChange={handleAddColumn}
                 optionsSelect={addColumsData}
-                placeholder='Seleccionar columnas'
+                placeholder={placeholderDinamicSelect}
               />
             </div>
           ) : null}
@@ -156,6 +158,10 @@ DynamicTable.propTypes = {
   isLayoutDate: PropTypes.string,
   handleSelectRange: PropTypes.func,
   handleDownloadExcel: PropTypes.func,
+  labelDinamicSelect: PropTypes.string,
+  placeholderDinamicSelect: PropTypes.string,
+  labelSinceDateRange: PropTypes.string,
+  labelTillDateRange: PropTypes.string,
 }
 
 DynamicTable.defaultProps = {
@@ -167,6 +173,10 @@ DynamicTable.defaultProps = {
   isLayoutDate: 'Calendar',
   handleSelectRange: () => { },
   handleDownloadExcel: () => { },
+  labelDinamicSelect: 'Mostrar u ocultar columnas',
+  placeholderDinamicSelect: 'Seleccionar columnas',
+  labelSinceDateRange: 'Desde',
+  labelTillDateRange: 'Hasta',
 }
 
 export default withStyles(styles)(DynamicTable)

package/layout/DynamicTable/DynamicTable.stories.js

@@ -27,6 +27,8 @@ export default {
     isViewRange: true,
     isViewAddColumn: true,
     isViewDownloadDoc: true,
+    labelDinamicSelect: 'Mostrar u ocultar columnas',
+    placeholderDinamicSelect: 'Seleccionar columnas',
   },
   argTypes: {
     // types: getOptionsArgTypes(options.types),

package/layout/Navbar/Navbar.js

@@ -2,11 +2,32 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Navbar.module.css'
 import withStyles from '../../hocs/withStyles'
+import { useRouter } from "next/router";
+import Link from 'next/link'
+import DynamicSelect from '../../molecules/DynamicSelect'
 
 import Heading from '../../atoms/Heading/Heading'
 import Tabs from '../../molecules/Tabs/Tabs'
+import Icon from '../../atoms/Icon'
+import { options } from './constants'
+
+export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkLogout, defaultValueLanguage, optionsSelectLanguage, handleChangeLanguage }) => {
+
+
+  const router = useRouter();
+
+  const handleClick = (e, path) => {
+
+    console.log("I clicked on the About Page" + path);
+
+    router.push({
+      pathname: path,
+    })
+
+
+  };
+
 
-export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkLogout }) => {
   return (
     <>
       <header className={getStyles('navbar')}>
@@ -52,16 +73,61 @@ export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkL
         />
 
 
-        {/* <div className={getStyles('navbar__title', 'navbar__item')}>Taksee</div> */}
-        {/* <div className={getStyles('navbar__item')}>Legal</div>
-        <div className={getStyles('navbar__item')}>User Guide</div> */}
-
         {viewOptionsNav ? (
-          <div onClick={linkLogout} className={getStyles('navbar__item', { 'is-playground': viewTabsNav })}>
-            Logout
+          <div className={getStyles('navbar__actions')}>
+            {/* <div className={getStyles('navbar__item')}>Legal</div>
+          <div className={getStyles('navbar__item')}>User Guide</div> */}
+
+            {options.map((item, index) => (
+              <Icon
+                key={index}
+                size='lg'
+                name={item.icon}
+                color='highlight'
+                background='transparent'
+                onClick={(e) => handleClick(e, item.href)}
+              />
+            ))}
+
+            <DynamicSelect
+              isClearable={false}
+              // defaultValue={{
+              //   label: 'ES',
+              //   value: 'es'
+              // }}
+              defaultValue={defaultValueLanguage}
+              onChange={handleChangeLanguage}
+              optionsSelect={optionsSelectLanguage}
+              // optionsSelect={[
+              //   {
+              //     label: 'ES',
+              //     value: 'es'
+              //   },
+              //   {
+              //     label: 'EN',
+              //     value: 'en'
+              //   }
+              // ]}
+            />
+
+            <Icon
+              size='lg'
+              name='logout'
+              color='highlight'
+              background='transparent'
+              onClick={linkLogout}
+            />
+
           </div>
+
         ) : null}
 
+        {/* {viewOptionsNav ? (
+            <div onClick={linkLogout} className={getStyles('navbar__item')}>
+              Logout
+            </div>
+          ) : null} */}
+
 
       </header>
 
@@ -76,6 +142,7 @@ Navbar.propTypes = {
   viewTabsNav: PropTypes.bool,
   viewOptionsNav: PropTypes.bool,
   linkLogout: PropTypes.func,
+  handleChange: PropTypes.func,
 }
 
 Navbar.defaultProps = {

package/layout/Navbar/Navbar.module.css

@@ -27,4 +27,9 @@
     padding: 0.67em 1.5em;
     cursor: pointer;
     vertical-align: middle;
+}
+
+.navbar__actions {
+    display: flex;
+    align-items: center;
 }

package/layout/Navbar/constants.js

@@ -0,0 +1,35 @@
+export const options = [
+	{
+		active: false,
+		href: '#',
+		icon: 'legal',
+		text: 'Legal',
+		view: true,
+		viewSubMenu: true,
+	},
+	{
+		active: false,
+		href: '/home',
+		icon: 'info',
+		text: 'User Guide',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/home',
+		icon: 'profile',
+		text: 'My profile',
+		view: true,
+		viewSubMenu: false,
+	},
+	// {
+	// 	active: false,
+	// 	href: '/home',
+	// 	icon: 'logout',
+	// 	text: 'Salir',
+	// 	view: true,
+	// 	viewSubMenu: false,
+	// },
+
+]

package/molecules/DatePicker/DatePicker.js

@@ -33,7 +33,7 @@ import {
 
 
 
-export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange }) => {
+export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRange, tillDateRange }) => {
 
   const [isShowCalendar, setShowCalendar] = useState(false);
 
@@ -96,7 +96,7 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange }) => {
           !isShowCalendar ?
             <div className={getStyles('date-picker-input')}>
               <div>
-                <Label>Desde</Label>
+                <Label>{sinceDateRange}</Label>
                 <Input
                   isInline
                   id="startDate"
@@ -108,7 +108,7 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange }) => {
               </div>
 
               <div>
-                <Label>Hasta</Label>
+                <Label>{tillDateRange}</Label>
                 <Input
                   isInline
                   id="endDate"
@@ -224,13 +224,17 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange }) => {
 DatePicker.propTypes = {
   getStyles: PropTypes.func.isRequired,
   isLayoutDate: PropTypes.oneOf(options.typeLayoutDate),
-  onChangeRange: PropTypes.func
+  onChangeRange: PropTypes.func,
+  sinceDateRange: PropTypes.string,
+  tillDateRange: PropTypes.string,
 }
 
 DatePicker.defaultProps = {
   getStyles: () => { },
   isLayoutDate: 'Calendar',
   onChangeRange: () => { },
+  sinceDateRange: 'Desde',
+  tillDateRange: 'Hasta',
 }
 
 export default withStyles(styles)(DatePicker)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",