imbric-theme 0.6.3 → 0.6.5

package/atoms/Input/Input.js

@@ -36,6 +36,8 @@ export const Input = ({
   colorIcon,
   backgroundIcon,
   pattern,
+  onClickViewPass,
+  viewPass,
   min,
 }) => (
 
@@ -78,26 +80,69 @@ export const Input = ({
 
       </div> :
 
-      <input
-        className={getStyles('input', {
-          'is-inline': isInline,
-          'is-inline-code': isInlineCode,
-          'is-input-filter': isInputFilter,
-          'is-input-secondary': isInputSecondary,
-        })}
-        type={type}
-        id={id}
-        value={value}
-        placeholder={placeholder}
-        onChange={onChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onClick={onClick}
-        onKeyDown={onKeyDown}
-        autoComplete={autoComplete}
-        disabled={disabled}
-        min={min}
-      ></input>
+      type === 'password' ?
+
+
+
+        <div className={getStyles('box-icon-input')}>
+
+          <input
+            className={getStyles('input', {
+              'is-inline': isInline,
+              'is-inline-code': isInlineCode,
+              'is-input-filter': isInputFilter,
+              'is-input-secondary': isInputSecondary,
+            })}
+            type={type}
+            id={id}
+            value={value}
+            placeholder={placeholder}
+            onChange={onChange}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onClick={onClick}
+            onKeyDown={onKeyDown}
+            autoComplete={autoComplete}
+            disabled={disabled}
+            min={min}
+          ></input>
+
+          <Horizontal size="xs" />
+
+          <Icon
+            background={!viewPass ? "inverted" : "success"}
+            color={!viewPass ? "base" : "inverted"}
+            isClickable
+            name="userView"
+            onClick={onClickViewPass}
+            size="sm"
+          />
+
+
+        </div>
+
+
+
+        : <input
+          className={getStyles('input', {
+            'is-inline': isInline,
+            'is-inline-code': isInlineCode,
+            'is-input-filter': isInputFilter,
+            'is-input-secondary': isInputSecondary,
+          })}
+          type={type}
+          id={id}
+          value={value}
+          placeholder={placeholder}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          autoComplete={autoComplete}
+          disabled={disabled}
+          min={min}
+        ></input>
 
     }
 
@@ -128,6 +173,8 @@ Input.propTypes = {
   autoComplete: PropTypes.string,
   disabled: PropTypes.bool,
   min: PropTypes.any,
+  onClickViewPass: PropTypes.func,
+  viewPass: PropTypes.bool,
 }
 
 Input.defaultProps = {
@@ -152,7 +199,9 @@ Input.defaultProps = {
   colorIcon: 'highlight',
   backgroundIcon: 'base',
   autoComplete: 'on',
-  disabled: false
+  disabled: false,
+  onClickViewPass: () => { },
+  viewPass: false,
 }
 
 export default withStyles(styles)(Input)

package/atoms/Input/Input.module.css

@@ -62,4 +62,5 @@
 
 .box-icon-input {
   display: flex;
+  align-items: center;
 }

package/atoms/Picture/Picture.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Link from 'next/link'
 
 import styles from './Picture.module.css'
 import withStyles from '../../hocs/withStyles'
@@ -11,6 +12,7 @@ export const Picture = ({
   height,
   isRounded,
   withBorder,
+  isHref,
 }) => (
   <picture
     className={getStyles('picture', {
@@ -18,7 +20,10 @@ export const Picture = ({
       'with-border': withBorder,
     })}
   >
-    <img src={src} style={{ height, maxWidth: width }} />
+    <Link href={isHref} passHref>
+      <img src={src} style={{ height, maxWidth: width }} />
+    </Link>
+
   </picture>
 )
 
@@ -29,12 +34,14 @@ Picture.propTypes = {
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   isRounded: PropTypes.bool,
   withBorder: PropTypes.bool,
+  isHref: PropTypes.any
 }
 
 Picture.defaultProps = {
   height: 'auto',
   withBorder: false,
-  getStyles: () => {},
+  getStyles: () => { },
+  isHref: ''
 }
 
 export default withStyles(styles)(Picture)

package/index.js

@@ -59,6 +59,8 @@ export { default as DynamicSelect } from './molecules/DynamicSelect'
 export { default as DatePicker } from './molecules/DynamicSelect'
 export { default as CardDefault } from './molecules/CardDefault'
 export { default as Tabs } from './molecules/Tabs'
+export { default as DatePickerTime } from './molecules/DatePickerTime'
+
 
 
 

package/layout/Sidebar/Sidebar.js

@@ -11,7 +11,7 @@ import Icon from '../../atoms/Icon'
 import Divider from '../../atoms/Divider'
 import ItemMenu from '../../molecules/ItemMenu/ItemMenu'
 
-export const Sidebar = ({ getStyles, menuCollapseView, options }) => {
+export const Sidebar = ({ getStyles, menuCollapseView, options, isHrefLogo }) => {
 
 
   return (
@@ -30,7 +30,7 @@ export const Sidebar = ({ getStyles, menuCollapseView, options }) => {
 
                 <div className={getStyles('logotext')}>
                   {/* small and big change using menuCollapseView state */}
-                  {menuCollapseView ? <Picture src="/static/logotipoS.svg" width={19}></Picture> : <Picture src="/static/logotipo.svg" width={100}></Picture>}
+                  {menuCollapseView ? <Picture isHref={isHrefLogo} src="./static/logotipoS.svg" width={19}></Picture> : <Picture isHref={isHrefLogo} src="./static/logotipo.svg" width={100}></Picture>}
                 </div>
                 {/* <div className={getStyles('closemenu')}>
 
@@ -69,7 +69,7 @@ export const Sidebar = ({ getStyles, menuCollapseView, options }) => {
                         >
                           {item.text}
                         </ItemMenu>
-                        
+
                         : null
 
                     ))}
@@ -93,6 +93,7 @@ export const Sidebar = ({ getStyles, menuCollapseView, options }) => {
 
 Sidebar.propTypes = {
   getStyles: PropTypes.func.isRequired,
+  isHrefLogo: PropTypes.any
   // options: PropTypes.arrayOf(
   //   PropTypes.shape({
   //     text: PropTypes.string,
@@ -104,6 +105,7 @@ Sidebar.propTypes = {
 Sidebar.defaultProps = {
   getStyles: () => { },
   menuCollapseView: false,
+  isHrefLogo: ''
 }
 
 export default withStyles(styles)(Sidebar)

package/molecules/ColumnTable/ColumnTable.module.css

@@ -1,5 +1,5 @@
 .column-table {
-  padding: 12px 15px;
+  padding: 12px 12px;
   text-align: left;
   color: var(--color-font-base);
   display: table-cell;

package/molecules/DatePicker/DatePicker.js

@@ -82,6 +82,7 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRa
         (<Calendar
           date={new Date()}
           onChange={handleSelect}
+          color={'#3d91ff'}
         />)
         : isLayoutDate === 'DateRange' ?
 
@@ -124,7 +125,7 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRa
               <DateRangePicker
                 locale={locales.es}
                 dateDisplayFormat='d MMMM yyyy'
-                onChange={ item => {handleSelectRange(item); onChangeRange(item);}}
+                onChange={item => { handleSelectRange(item); onChangeRange(item); }}
                 showSelectionPreview={false}
                 moveRangeOnFirstSelection={false}
                 months={2}
@@ -203,7 +204,7 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRa
 
               <div className={getStyles('btnSave')} onClick={handleClickCloseCalendar}>
                 <Icon
-                id='iconClosedDatePicker'
+                  id='iconClosedDatePicker'
                   name="checkCircle"
                   color="inverted"
                   onClick={function noRefCheck() { }}

package/molecules/DatePickerTime/DatePickerTime.js

@@ -0,0 +1,133 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './DatePickerTime.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+import DatePicker, { CalendarContainer } from 'react-datepicker'
+// import "react-datepicker/dist/react-datepicker.css"
+
+import { registerLocale, setDefaultLocale } from "react-datepicker";
+import es from 'date-fns/locale/es'
+import moment from 'moment'
+import Input from '../../atoms/Input/Input'
+
+
+export const DatePickerTime = ({
+  getStyles,
+  showIcon,
+  selected,
+  onChange,
+  timeCaption,
+  minDate,
+  showTimeSelect,
+  filterTime,
+  dateFormat,
+  timeIntervals,
+  idPicker,
+}) => {
+
+  registerLocale('es', es)
+  setDefaultLocale('es')
+
+  // const now = moment().add(15, 'minutes').format('d MMMM yyyy, HH:mm')
+
+  // const now = new Date()
+
+  // const nowSelected = new Date()
+  // nowSelected.setMinutes(nowSelected.getMinutes() + 15)
+
+  // const [startDate, setStartDate] = useState(nowSelected)
+
+  // const filterPassedTime = (time) => {
+  //   const currentDate = new Date()
+  //   currentDate.setMinutes(currentDate.getMinutes() + 15)
+  //   const selectedDate = new Date(time)
+  //   return currentDate.getTime() < selectedDate.getTime()
+  // }
+
+
+  // const MyContainer = ({ className, children }) => {
+  //   return (
+  //     // <div style={{ padding: "0px", background: "#216ba5", color: "#fff" }}>
+  //     <CalendarContainer className={className}>
+  //       {/* <div style={{ background: "#f0f0f0" }}>
+  //           ¿Fecha de taxi?
+  //         </div> */}
+  //       <div style={{
+  //         fontFamily: 'Exo, Arial, sans-serif',
+  //         fontSize: '13px',
+  //         fontWeight: '300'
+  //       }}>{children}</div>
+  //     </CalendarContainer >
+  //     // </div>
+  //   )
+  // }
+
+  return (
+
+    <div className={getStyles('date-picker-time')}>
+      <DatePicker
+        showIcon={showIcon}
+        selected={selected}
+        onChange={onChange}
+        timeCaption={timeCaption}
+        // locale="es"
+        // showTimeSelect
+        // timeFormat="p"
+        // timeIntervals={15}
+        // dateFormat="Pp"<
+        minDate={minDate}
+        showTimeSelect={showTimeSelect}
+        filterTime={filterTime}
+        dateFormat={dateFormat}
+        timeIntervals={timeIntervals}
+        id={idPicker}
+        customInput={<Input isInputSecondary> </Input>}
+      // calendarContainer={MyContainer}
+
+      // minTime={(new Date(), 0)}
+      // maxTime={(new Date(), 30)}
+      // maxTime={setHours(setMinutes(new Date(), 30), 20)}
+      // includeTimes={[
+      //   setHours(setMinutes(new Date(), 0), 17),
+      //   setHours(setMinutes(new Date(), 30), 18),
+      //   setHours(setMinutes(new Date(), 30), 19),
+      //   setHours(setMinutes(new Date(), 30), 17),
+      // ]}
+      // dateFormat="d MMMM yyyy, HH:mm aa"
+      />
+    </div>
+  )
+
+}
+
+DatePickerTime.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  showIcon: PropTypes.bool,
+  selected: PropTypes.any,
+  onChange: PropTypes.func,
+  timeCaption: PropTypes.string,
+  minDate: PropTypes.any,
+  showTimeSelect: PropTypes.bool,
+  filterTime: PropTypes.any,
+  dateFormat: PropTypes.string,
+  timeIntervals: PropTypes.any,
+  idPicker: PropTypes.string,
+}
+
+DatePickerTime.defaultProps = {
+  getStyles: () => { },
+  showIcon: true,
+  // selected: { startDate },
+  onChange: () => { },
+  timeCaption: "Hora",
+  // minDate: { now },
+  showTimeSelect: true,
+  // filterTime: { filterPassedTime },
+  dateFormat: "dd-MM-yyyy HH:mm aa",
+  timeIntervals: 1,
+  idPicker: 'hola'
+}
+
+export default withStyles(styles)(DatePickerTime)

package/molecules/DatePickerTime/DatePickerTime.module.css

@@ -0,0 +1,3 @@
+.date-picker-time {
+  display: flex;
+}

package/molecules/DatePickerTime/DatePickerTime.stories.js

@@ -0,0 +1,18 @@
+import { DatePickerTime, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(DatePickerTime, styles)
+const ListTemplate = getListTemplate(DatePickerTime, styles)
+
+export default {
+  title: 'Molecules/DatePickerTime',
+  component: DatePickerTime,
+  args: {},
+}
+
+export const Default = Template.bind({})

package/molecules/DatePickerTime/constants.js

@@ -0,0 +1 @@
+export const options = { types: [] }

package/molecules/DatePickerTime/index.js

@@ -0,0 +1,3 @@
+export { default, DatePickerTime } from './DatePickerTime'
+export { options } from './constants'
+export { default as styles } from './DatePickerTime.module.css'

package/molecules/DynamicSelect/DynamicSelect.js

@@ -5,7 +5,7 @@ import styles from './DynamicSelect.module.css'
 import withStyles from '../../hocs/withStyles'
 
 
-export const DynamicSelect = ({ getStyles, optionsSelect, defaultValue, placeholder, isMulti, isClearable, isDisabled, isLoading, isRtl, isSearchable, isInline, onChange, onFocus, onBlur }) => {
+export const DynamicSelect = ({ getStyles, optionsSelect, defaultValue, placeholder, isMulti, isClearable, isDisabled, isLoading, isRtl, isSearchable, isInline, onChange, onFocus, onBlur, closeMenuOnSelect }) => {
 
 
   const customStyles = {
@@ -83,6 +83,7 @@ export const DynamicSelect = ({ getStyles, optionsSelect, defaultValue, placehol
         onChange={onChange}
         onFocus={onFocus}
         onBlur={onBlur}
+        closeMenuOnSelect={closeMenuOnSelect}
       />
     </div>
 
@@ -102,7 +103,8 @@ DynamicSelect.propTypes = {
   isInline: PropTypes.bool,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
-  onBlur: PropTypes.func
+  onBlur: PropTypes.func,
+  closeMenuOnSelect: PropTypes.bool
 }
 
 DynamicSelect.defaultProps = {
@@ -118,6 +120,7 @@ DynamicSelect.defaultProps = {
   onChange: () => { },
   onFocus: () => { },
   onBlur: () => { },
+  closeMenuOnSelect: true
 }
 
 export default withStyles(styles)(DynamicSelect)

package/molecules/RowTable/RowTable.js

@@ -728,7 +728,32 @@ export const RowTable = ({
                                       ?
                                       <td className={getStyles('td')} key={[itemTd.accessor]}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
                                       :
-                                      <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+
+                                      <>
+
+                                        <td
+                                          data-tip
+                                          data-for={'td' + [itemTd.accessor] + index}
+                                          onMouseEnter={handleMouseEnter}
+                                          onMouseLeave={handleMouseLeave}
+                                          className={getStyles('td')}
+                                          key={[itemTd.accessor]}
+                                        >
+                                          {item[itemTd.accessor]}
+
+
+                                          {isToolTipMounted ? (
+                                            <ReactTooltip id={'td' + [itemTd.accessor] + index} type='info'>
+                                              <span>{item[itemTd.accessor]}</span>
+                                            </ReactTooltip>
+                                          ) : null}
+
+                                        </td>
+
+                                      </>
+
+
+
 
                   ) : null
               ))}

package/molecules/RowTable/RowTable.module.css

@@ -12,13 +12,16 @@
 }
 
 .td {
-  padding: 15px;
+  padding: 6px 0px 6px 15px;
   text-align: left;
   vertical-align: middle;
   font-weight: 300;
   font-size: 12px;
   color: var(--color-font-base);
   border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* white-space: nowrap; */
 }
 
 .tdacction {
@@ -29,6 +32,13 @@
 
 .tdacctionIcons {
   text-align: right;
+  width: max-content;
+  inline-size: max-content;
+  height: max-content;
+  block-size: max-content;
+  display: block;
+  float: right;
+  min-width: 100%
 }
 
 .tr-content:hover {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",
@@ -55,6 +55,7 @@
     "moment": "2.29.3",
     "moment-timezone": "0.5.34",
     "react-date-range": "1.4.0",
+    "react-datepicker": "4.10.0",
     "react-icons": "4.3.1",
     "react-moment": "1.1.2",
     "react-router": "6.3.0",