imbric-theme 0.3.1 → 0.3.4

package/molecules/DatePicker/DatePicker.module.css

@@ -0,0 +1,38 @@
+.date-picker {
+  display: block;
+}
+
+.date-picker-input {
+  display: flex;
+  width: 70%;
+}
+
+.modalDatePickerRange {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgb(0 0 0 / 60%);
+  z-index: 1;
+}
+
+.btnSave {
+  cursor: pointer;
+  width: 30px;
+  background-color: var(--color-tertiary-muted);
+  height: 420px;
+  align-items: center;
+  justify-content: center;
+  display: inline-flex;
+  height: inherit;
+  max-height: 383px;
+  height: 100%;
+}
+
+.btnSave:hover {
+  opacity: .8;
+}

package/molecules/DatePicker/DatePicker.stories.js

@@ -0,0 +1,23 @@
+import { DatePicker, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(DatePicker, styles)
+const ListTemplate = getListTemplate(DatePicker, styles)
+
+export default {
+  title: 'Molecules/DatePicker',
+  component: DatePicker,
+  args: {},
+  argTypes: {
+    isLayoutDate: getOptionsArgTypes(options.typeLayoutDate),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }

package/molecules/DatePicker/constants.js

@@ -0,0 +1,3 @@
+export const options = { 
+    typeLayoutDate: ['Calendar', 'DateRange', 'DateRangePicker'] 
+}

package/molecules/DatePicker/index.js

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

package/molecules/Dropdown/Dropdown.js

@@ -13,27 +13,30 @@ export const Dropdown = ({
   value,
   isInline,
   onChange,
-}) => (
-  <div
-    id={id}
-    className={getStyles('dropdown', {
-      'is-inline': isInline,
-    })}
-  >
-    <Icon className="dropdown-icon" name="angleDown" background="highlight" />
-    <select
-      className={getStyles('dropdown-select')}
-      onChange={(event) => onChange(event?.currentTarget?.value)}
-      value={value}
+}) => {
+  return (
+    <div
+      id={id}
+      className={getStyles('dropdown', {
+        'is-inline': isInline,
+      })}
     >
-      {options.map(({ text, value }) => (
-        <option key={value} value={value}>
-          {text}
-        </option>
-      ))}
-    </select>
-  </div>
-)
+      <Icon className="dropdown-icon" name="angleDown" background="transparent" />
+      <select
+        className={getStyles('dropdown-select')}
+        onChange={(event) => onChange(event?.currentTarget?.value)}
+        value={value}
+      >
+        {options.map(({ text, value }) => (
+          <option key={value} value={value}>
+            {text}
+          </option>
+        ))}
+      </select>
+
+    </div>
+  )
+}
 
 Dropdown.propTypes = {
   onChange: PropTypes.func.isRequired,
@@ -52,8 +55,8 @@ Dropdown.propTypes = {
 Dropdown.defaultProps = {
   value: '',
   isInline: false,
-  onChange: () => {},
-  getStyles: () => {},
+  onChange: () => { },
+  getStyles: () => { },
 }
 
 export default withStyles(styles)(Dropdown)

package/molecules/Dropdown/Dropdown.module.css

@@ -16,14 +16,32 @@
 .dropdown-select {
   width: 100%;
   height: var(--input-height);
-  padding: 10px 30px 10px 20px;
-  border: var(--border-width-thin) solid var(--color-primary);
+  padding: 8px 30px 8px 20px;
+  border: var(--border-width-thin) solid var(--color-brand-white-lilac);
   background: var(--input-background);
-  border-radius: var(--input-border-radius);
+  /* border-radius: var(--input-border-radius); */
   color: var(--color-font-base);
+  font-family: var(--font-family-sans);
+  font-size: var(--input-font-base);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-relaxed);
   transition: box-shadow 0.2s ease;
+  -moz-appearance: none; /* Firefox */
+  -webkit-appearance: none; /* Safari and Chrome */
+  appearance: none;
 }
 
+
+
+
+
+
+/* padding: 12px 17px; */
+
+
+
+
+
 .dropdown-select:focus {
   box-shadow: 0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary);
   outline: none;

package/molecules/DynamicSelect/DynamicSelect.js

@@ -0,0 +1,109 @@
+import React from 'react'
+import Select from 'react-select'
+import PropTypes from 'prop-types'
+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 }) => {
+
+
+  const customStyles = {
+
+    option: (base, state) => ({
+      ...base,
+      cursor: 'pointer',
+      height: '100%',
+      backgroundColor: state.isSelected ? 'var(--color-primary)' : 'transparent',
+      "&:hover": {
+        backgroundColor: "var(--color-primary-highlight)",
+        color: 'var(--color-primary)',
+      },
+      // "&:active": {
+      //   backgroundColor: "var(--color-primary)"
+      // }
+    }),
+    control: (base, state) => ({
+      ...base,
+      cursor: 'pointer',
+      width: '100%',
+      borderRadius: 0,
+      border: 'var(--border-width-thin) solid var(--color-brand-white-lilac)',
+      // border: state.isFocused ? "var(--border-width-thin) solid var(--color-brand-white-lilac)" : "var(--border-width-thin) solid var(--color-brand-white-lilac)",
+      boxShadow: state.isFocused ? "0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary)" : "none",
+      "&:hover": {
+        borderColor: "var(--color-primary)"
+      }
+    }),
+    input: (base) => ({
+      ...base,
+      cursor: 'pointer',
+      margin: '2px',
+      paddingBottom: '2px',
+      paddingTop: '2px',
+    }),
+
+  }
+
+  // const handleChange = (value) => {
+  //   console.group('Value Changed');
+  //   console.log(value);
+  //   // console.log(`action: ${actionMeta.action}`);
+  //   console.groupEnd();
+  // };
+
+  return (
+
+    <div className={getStyles('dynamic-select', {
+      'is-inline': isInline,
+    })}>
+      <Select
+        name="basic"
+        // className="basic-single"
+        // classNamePrefix="select"
+        placeholder={placeholder}
+        styles={customStyles}
+        options={optionsSelect}
+        defaultValue={defaultValue}
+        isMulti={isMulti}
+        isClearable={isClearable}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        isRtl={isRtl}
+        isSearchable={isSearchable}
+        onChange={onChange}
+      />
+    </div>
+
+  )
+}
+
+DynamicSelect.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  defaultValue: PropTypes.string,
+  placeholder: PropTypes.string,
+  isMulti: PropTypes.bool,
+  isClearable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isRtl: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  isInline: PropTypes.bool,
+  onChange: PropTypes.func
+}
+
+DynamicSelect.defaultProps = {
+  getStyles: () => { },
+  defaultValue: '',
+  placeholder: 'seleccionar',
+  isMulti: false,
+  isClearable: true,
+  isDisabled: false,
+  isLoading: false,
+  isRtl: false,
+  isSearchable: false,
+  isInline: false,
+  onChange: () => { },
+}
+
+export default withStyles(styles)(DynamicSelect)

package/molecules/DynamicSelect/DynamicSelect.module.css

@@ -0,0 +1,10 @@
+.dynamic-select {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  cursor: pointer;
+}
+
+.is-inline {
+  max-width: max-content;
+}

package/molecules/DynamicSelect/DynamicSelect.stories.js

@@ -0,0 +1,32 @@
+import { DynamicSelect, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(DynamicSelect, styles)
+const ListTemplate = getListTemplate(DynamicSelect, styles)
+
+export default {
+  title: 'Molecules/DynamicSelect',
+  component: DynamicSelect,
+  args: {
+    optionsSelect: options.optionsSelect,
+    defaultValue: '',
+    placeholder: 'seleccionar',
+    isMulti: false,
+    isClearable: true,
+    isDisabled: false,
+    isLoading: false,
+    isRtl: false,
+    isSearchable: false,
+    isInline: false,
+  },
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})

package/molecules/DynamicSelect/constants.js

@@ -0,0 +1,7 @@
+export const options = {
+    optionsSelect: [
+        { value: 'chocolate', label: 'Chocolate' },
+        { value: 'strawberry', label: 'Strawberry' },
+        { value: 'vanilla', label: 'Vanilla' }
+    ]
+}

package/molecules/DynamicSelect/index.js

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

package/molecules/Error/Error.js

@@ -12,11 +12,11 @@ import Icon from '../../atoms/Icon'
 export const Error = ({ title, children, getStyles }) => {
   return (
     <div className={getStyles('error')}>
-      <Icon className="icon-warning" name="warning" size="md" />
+      <Icon className="icon-warning" name="warning" size="lg" />
       <Spacer.Horizontal size="sm" />
       <div>
         {title && <Heading>{title}</Heading>}
-        <Paragraph>{children}</Paragraph>
+        <Paragraph size="sm">{children}</Paragraph>
       </div>
     </div>
   )

package/molecules/Error/Error.module.css

@@ -1,9 +1,10 @@
 .error {
   display: flex;
   padding: 10px 20px;
-  border-top: 4px solid var(--color-red-500);
-  background: var(--color-red-200);
+  border-top: 2px solid var(--color-red-500);
+  background: var(--color-red-100);
   color: var(--color-red-800);
+  border-radius: var(--border-radius-sm);
 }
 
 .error :global(.icon-warning) {

package/molecules/ItemMenu/ItemMenu.js

@@ -1,16 +1,14 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
+import Link from 'next/link'
 
 import styles from './ItemMenu.module.css'
 import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
-import { Link, Route, BrowserRouter } from 'react-router-dom'
-
 import Icon from '../../atoms/Icon'
 
-
-export const ItemMenu = ({ children, getStyles, size, icon, color, background, subMenu, itemSubmenu, toHref }) => {
+export const ItemMenu = ({ children, getStyles, size, icon, color, background, subMenu, itemSubmenu, itemHref, itemActive }) => {
 
   //create initial menuCollapse state using useState hook
   const [subMenuCollapse, setSubMenuCollapse] = useState(false)
@@ -25,49 +23,50 @@ export const ItemMenu = ({ children, getStyles, size, icon, color, background, s
   if (!subMenu) {
     return (
       <>
-        <BrowserRouter>
-          <Link to={toHref}>
-            <li className={getStyles('pro-menu-item')}>
+        <Link href={itemHref} passHref>
+          <li className={getStyles('pro-menu-item', { 'active': itemActive })}>
 
-              <div className={getStyles('pro-inner-item')}>
+            <div className={getStyles('pro-inner-item')}>
 
-                <span className={getStyles('pro-icon-wrapper')}>
+              <span className={getStyles('pro-icon-wrapper')}>
 
-                  <span className={getStyles('pro-icon')}>
-                    <Icon
-                      size={size}
-                      name={icon}
-                      color={color}
-                      background={background}
-                      onClick={function noRefCheck() { }}
-                    />
-                  </span>
+                <span className={getStyles('pro-icon')}>
+
+                  <Icon
+                    size={size}
+                    name={icon}
+                    color={ itemActive ? 'primary' : color}
+                    background={background}
+                    onClick={function noRefCheck() { }}
+                  />
 
                 </span>
 
-                <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
+              </span>
 
-              </div>
+              <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
 
-            </li>
-          </Link>
-        </BrowserRouter>
+            </div>
+
+          </li>
+        </Link>
       </>
     )
   } else {
     return (
       <>
-        <li className={getStyles('pro-menu-item', 'pro-sub-menu', { 'open': subMenuCollapse })} title="Home" href="/">
+        <li className={getStyles('pro-menu-item', 'pro-sub-menu', { 'open': subMenuCollapse }, { 'activesubtxt': itemActive })} title="Home" href="/">
 
           <div className={getStyles('pro-inner-item')} onClick={subMenuIconClick}>
 
             <span className={getStyles('pro-icon-wrapper')}>
 
               <span className={getStyles('pro-icon')}>
+
                 <Icon
                   size={size}
                   name={icon}
-                  color={color}
+                  color={ itemActive ? 'primary' : color}
                   background={background}
                   onClick={function noRefCheck() { }}
                 />
@@ -75,7 +74,7 @@ export const ItemMenu = ({ children, getStyles, size, icon, color, background, s
 
             </span>
 
-            <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
+            <span className={getStyles('pro-item-content', 'title', { 'color': color })}>{children}</span>
 
             <span className={getStyles('pro-arrow-wrapper')}>
               <span className={getStyles('pro-arrow')}></span>
@@ -88,10 +87,12 @@ export const ItemMenu = ({ children, getStyles, size, icon, color, background, s
               <ul>
 
                 {itemSubmenu.map((item, index) => (
-                  <li key={index} className={getStyles('pro-menu-item')} href={item.href}>
-                    <div className={getStyles('pro-inner-item')} role="button">
-                      <span className={getStyles('pro-item-content')}>{item.text}</span></div>
-                  </li>
+                  <Link key={index} href={item.href} passHref>
+                    <li className={getStyles('pro-menu-item', { 'activesub': item.active })}>
+                      <div className={getStyles('pro-inner-item')} role="button">
+                        <span className={getStyles('pro-item-content')}>{item.text}</span></div>
+                    </li>
+                  </Link>
                 ))}
               </ul>
             </div>
@@ -109,6 +110,7 @@ ItemMenu.propTypes = {
   children: PropTypes.node.isRequired,
   getStyles: PropTypes.func.isRequired,
   subMenu: PropTypes.bool.isRequired,
+  itemActive: PropTypes.bool,
   icon: PropTypes.oneOf(options.icons),
   size: PropTypes.oneOf(options.sizes),
   color: PropTypes.oneOf(options.colors),
@@ -117,11 +119,12 @@ ItemMenu.propTypes = {
 
 ItemMenu.defaultProps = {
   subMenu: false,
-  toHref: '/',
+  itemActive: false,
   icon: 'home',
   size: 'lg',
   color: 'highlight',
   background: 'transparent',
+  itemHref: '/',
   getStyles: () => { },
 }
 

package/molecules/ItemMenu/ItemMenu.module.css

@@ -89,14 +89,23 @@
   color: var(--color-primary);
 }
 
-
 /* ////////////////////// */
 
+.pro-menu-item.active .pro-item-content {
+  color: var(--color-primary);
+}
 
-.pro-menu-item.active {
-  color: #d8d8d8;
+.pro-sub-menu .pro-menu-item.activesub .pro-item-content {
+  color: var(--color-primary);
 }
 
+.pro-menu-item.pro-sub-menu.activesubtxt .pro-inner-item .pro-item-content.title {
+  color: var(--color-primary);
+  /* font-size: 32px; */
+}
+
+/* ////////////////////// */
+
 .pro-menu-item .suffix-wrapper {
   opacity: 1;
   transition: opacity 0.2s;
@@ -190,7 +199,7 @@
 }
 
 .pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item {
-  padding: 14px 30px 14px 15px;
+  padding: 10px 30px 10px 15px;
   margin: 0;
 }
 

package/molecules/ItemMenu/ItemMenu.stories.js

@@ -16,7 +16,8 @@ export default {
     children: 'Home',
     subMenu: false,
     itemSubmenu: options.itemSubmenu,
-    toHref: '/',
+    itemActive: false,
+    itemHref: '/'
   },
   argTypes: {
     itemSubmenu: {

package/molecules/ItemMenu/constants.js

@@ -18,16 +18,19 @@ export const options = {
           text: "Taxi",
           href: "/taxi",
           view: true,
+          active: false,
       },
       {
           text: "Parking",
           href: "/parking",
           view: true,
+          active: false,
       },
       {
           text: "Sharing",
           href: "/sharing",
           view: true,
+          active: false,
       },
   ],
   }

package/molecules/RowTable/RowTable.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './RowTable.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+export const RowTable = ({ children, getStyles }) => {
+  return <div className={getStyles('row-table')}>{children}</div>
+}
+
+RowTable.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  type: PropTypes.oneOf(options.types),
+}
+
+RowTable.defaultProps = {
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(RowTable)

package/molecules/RowTable/RowTable.module.css

@@ -0,0 +1,3 @@
+.row-table {
+  display: flex;
+}

package/molecules/RowTable/RowTable.stories.js

@@ -0,0 +1,23 @@
+import { RowTable, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(RowTable, styles)
+const ListTemplate = getListTemplate(RowTable, styles)
+
+export default {
+  title: 'Molecules/RowTable',
+  component: RowTable,
+  args: {},
+  argTypes: {
+    types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+export const List = ListTemplate.bind({})
+List.args = { items: options.types.map((type) => ({ type })) }

package/molecules/RowTable/constants.js

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

package/molecules/RowTable/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.3.1",
+  "version": "0.3.4",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",
@@ -51,9 +51,18 @@
   "license": "MIT",
   "dependencies": {
     "classnames": "2.3.1",
+    "formik": "2.2.9",
+    "moment": "2.29.3",
+    "moment-timezone": "0.5.34",
+    "react-date-range": "1.4.0",
     "react-icons": "4.3.1",
+    "react-moment": "1.1.2",
     "react-router": "6.3.0",
-    "react-router-dom": "6.3.0"
+    "react-router-dom": "6.3.0",
+    "react-select": "5.3.2",
+    "sweetalert2": "11.4.14",
+    "sweetalert2-react-content": "5.0.0",
+    "yup": "0.32.11"
   },
   "devDependencies": {
     "@babel/core": "7.11.6",