imbric-theme 0.3.6 → 0.4.0

package/atoms/LinkItem/LinkItem.js

@@ -10,7 +10,7 @@ import Paragraph from '../Paragraph'
 export const LinkItem = ({ children, size, color, getStyles, isHref }) => {
   return (
     <Link href={isHref} passHref>
-      <a className={getStyles('link', ['color'])}>
+      <a target="_blank" className={getStyles('link', ['color'])}>
         <Paragraph size={size} color={color} weight="semibold" isInline>
           {children}
         </Paragraph>

package/atoms/Modal/Modal.js

@@ -8,7 +8,9 @@ import Icon from '../Icon'
 import Container from '../../layout/Container'
 import isEmpty from '../../utils/isEmpty'
 
+
 import useMedia from '../../hook/useMedia'
+import Heading from '../Heading'
 
 // Sync with ./Modal.module.css#L13-L17
 const FADE_OUT_ANIMATION_TIME = 400
@@ -33,6 +35,7 @@ export const Modal = ({
   getStyles,
   type,
   isPlayground,
+  titleModal,
 }) => {
   const isDesktop = useMedia(['(min-width: 992px)'], [true])
   const [onFadeOut, setOnFadeOut] = useState(false)
@@ -54,7 +57,7 @@ export const Modal = ({
         <div className={getStyles('heading')}>
           {!!onClose && (
             <Icon
-              color={isDesktop && type === 'secondary' ? 'primary' : 'inverted'}
+              color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
               name={isDesktop ? 'cross' : 'angleLeft'}
               background={isDesktop ? 'transparent' : 'muted'}
               onClick={handleClose}
@@ -71,8 +74,11 @@ export const Modal = ({
               })}
             />
           )}
+					<Heading color='black' size='lg' weight='light'>
+						{titleModal}
+					</Heading>
         </div>
-        <Container>{children}</Container>
+        <Container><div className={getStyles('container')}>{children}</div></Container>
       </div>
     </div>
   )
@@ -88,11 +94,13 @@ Modal.propTypes = {
   }),
   type: PropTypes.oneOf(options.types),
   isPlayground: PropTypes.bool,
+  titleModal: PropTypes.string,
 }
 
 Modal.defaultProps = {
   getStyles: () => {},
   type: 'primary',
+  titleModal: 'Ejemplo titulo'
 }
 
 export default withStyles(styles)(Modal)

package/atoms/Modal/Modal.module.css

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--modal-backdrop-color);
+  background: rgb(0 0 0 / 50%);
   inset: 0;
 }
 
@@ -24,7 +24,7 @@
   padding: 16px 32px;
 }
 
-:not(.is-playground) > .modal {
+:not(.is-playground)>.modal {
   animation: fadeInModal 0.4s ease-in forwards;
   opacity: 0;
 }
@@ -45,7 +45,7 @@
 }
 
 .type-primary {
-  background-color: var(--color-primary);
+  background-color: var(--color-primary-inverted);
 }
 
 .type-secondary {
@@ -54,14 +54,22 @@
 
 @media (min-width: 992px) {
   .modal {
-    max-width: var(--modal-desktop-max-width);
-    height: var(--modal-desktop-height);
+    max-width: 465px;
+    height: auto;
     border-radius: var(--border-radius-sm);
+    /* max-height: 100%;
+    overflow: auto; */
   }
 
   .heading {
     flex-direction: row-reverse;
   }
+
+  .container {
+    max-height: 600px;
+    overflow: auto;
+    min-width: 100%;
+  }
 }
 
 @keyframes fadeInModal {
@@ -82,4 +90,4 @@
   to {
     opacity: 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 = {
@@ -164,9 +170,13 @@ DynamicTable.defaultProps = {
   isViewRange: true,
   isViewAddColumn: true,
   isViewDownloadDoc: true,
-  isLayoutDate: 'DateRangePicker',
+  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/ColumnTable/ColumnTable.js

@@ -61,24 +61,26 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
 
                     <Horizontal size="xs" />
 
-                    {cl === "default" ?
-                      <Icon
-                        name="angleUpDown"
-                        size="xs"
-                      />
-                      : cl === "" ? null
-
-                        : cl === "angleDown"
-                          ? <Icon
-                            name="angleDown"
-                            size="xs"
-                          />
+                    {item.sortable ?
 
-                          : <Icon
-                            name="angleUp"
+                        cl === "default" ?
+                          <Icon
+                            name="angleUpDown"
                             size="xs"
                           />
-
+                          : cl === "" ? null
+
+                            : cl === "angleDown"
+                              ? <Icon
+                                name="angleDown"
+                                size="xs"
+                              />
+
+                              : <Icon
+                                name="angleUp"
+                                size="xs"
+                              />
+                        : null
                     }
                   </span>
 

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/molecules/DynamicSelect/DynamicSelect.js

@@ -89,7 +89,7 @@ export const DynamicSelect = ({ getStyles, optionsSelect, defaultValue, placehol
 
 DynamicSelect.propTypes = {
   getStyles: PropTypes.func.isRequired,
-  defaultValue: PropTypes.string,
+  defaultValue: PropTypes.object,
   placeholder: PropTypes.string,
   isMulti: PropTypes.bool,
   isClearable: PropTypes.bool,
@@ -103,7 +103,6 @@ DynamicSelect.propTypes = {
 
 DynamicSelect.defaultProps = {
   getStyles: () => { },
-  defaultValue: '',
   placeholder: 'seleccionar',
   isMulti: false,
   isClearable: true,

package/molecules/DynamicSelect/DynamicSelect.stories.js

@@ -14,7 +14,7 @@ export default {
   component: DynamicSelect,
   args: {
     optionsSelect: options.optionsSelect,
-    defaultValue: '',
+    defaultValue: options.optionsSelect[0],
     placeholder: 'seleccionar',
     isMulti: false,
     isClearable: true,

package/molecules/RowTable/RowTable.js

@@ -6,8 +6,20 @@ import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
 import Moment from 'react-moment'
+import Icon from '../../atoms/Icon'
+import { Horizontal, Vertical } from '../../layout/Spacer/components'
+
+export const RowTable = ({ getStyles, slice, columnsData, onClickActionEdit, onClickActionSendEmail, onClickActionDelete }) => {
+
+
+
+
+  // const handleEditStaff = (e, item) => {
+  //   console.log(item)
+  //   console.log(e)
+  // }
+
 
-export const RowTable = ({ getStyles, slice, columnsData }) => {
   return (
     <div className={getStyles('tbl-content')}>
       <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
@@ -17,33 +29,59 @@ export const RowTable = ({ getStyles, slice, columnsData }) => {
             <tr key={index}>
               {columnsData.map((itemTd) => (
                 itemTd.activeView ?
-
                   (
-                    itemTd.subAccessor !== '' ?
 
-                      <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td> :
 
-                      itemTd.typeFilter === 'date' ?
+                    itemTd.subAccessor === 'action' ?
+
+                      <td className={getStyles('td')} key={[itemTd.accessor]}>
+
+                        <Icon
+                          background="base"
+                          name="settings"
+                          onClick={(e) => { onClickActionEdit(e, item) }}
+                        />
+                        <Horizontal size="xs" />
+                        <Icon
+                          background="base"
+                          name="arrowUp"
+                          // onClick={(e) => onClickEdit(e, item)}
+                          onClick={e => { onClickActionSendEmail(e, item) }}
+                        />
+                        <Horizontal size="xs" />
+                        <Icon
+                          background="base"
+                          name="trash"
+                          // onClick={(e) => onClickEdit(e, item)}
+                          onClick={e => { onClickActionDelete(e, item) }}
+                        />
+                      </td> :
+
+                      itemTd.subAccessor !== '' ?
+
+                        <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td> :
+
+                        itemTd.typeFilter === 'date' ?
 
-                        <td className={getStyles('td')} key={[itemTd.accessor]}>
-                          <Moment format="DD/MM/YYYY hh:mm:ss">
-                            {item[itemTd.accessor]}
-                          </Moment>
-                        </td>
+                          <td className={getStyles('td')} key={[itemTd.accessor]}>
+                            <Moment format="DD/MM/YYYY hh:mm:ss">
+                              {item[itemTd.accessor]}
+                            </Moment>
+                          </td>
 
-                        : itemTd.typeFilter === 'number' ?
+                          : itemTd.typeFilter === 'number' ?
 
-                          itemTd.subTypeFilter ?
+                            itemTd.subTypeFilter ?
 
-                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} €</td>
-                            :
-                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} €</td>
+                              :
+                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
 
-                          : itemTd.subTypeFilter ?
+                            : itemTd.subTypeFilter ?
 
-                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toString().replace(/\./g, ',').slice(0, 5)} €</td>
-                            :
-                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toString().replace(/\./g, ',').slice(0, 5)} €</td>
+                              :
+                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
 
                   ) : null
               ))}
@@ -59,10 +97,14 @@ export const RowTable = ({ getStyles, slice, columnsData }) => {
 RowTable.propTypes = {
   getStyles: PropTypes.func.isRequired,
   type: PropTypes.oneOf(options.types),
+  onClickActionEdit: PropTypes.func,
+  onClickActionSendEmail: PropTypes.func,
+  onClickActionDelete: PropTypes.func
 }
 
 RowTable.defaultProps = {
   getStyles: () => { },
+  onClickActionEdit: () => { },
 }
 
 export default withStyles(styles)(RowTable)

package/molecules/RowTable/constants.js

@@ -300,6 +300,19 @@ export const options = {
             nameInput: 'ID Proveedor',
             placeholder: 'ID Proveedor'
         },
+        {
+            accessor: 'action',
+            subAccessor: 'action',
+            activeView: true,
+            idInput: 'action',
+            nameInput: 'Acciones',
+            placeholder: 'Acciones',
+            sortable: false,
+            subTypeFilter: false,
+            title: '',
+            typeFilter: 'text',
+            viewIsFilter: false,
+        },
     ],
 
  }

package/package.json

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