imbric-theme 0.1.1 → 0.1.3

package/molecules/InputAutocomplete/InputAutocomplete.js

@@ -0,0 +1,221 @@
+import React from 'react'
+import { useState } from "react";
+import PropTypes from 'prop-types'
+
+import styles from './InputAutocomplete.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+import { useRouter } from 'next/router'
+
+import { BarLoader, ClipLoader } from 'react-spinners'
+import Input from '../../atoms/Input'
+import Picture from '../../atoms/Picture'
+import Icon from '../../atoms/Icon'
+import { Horizontal } from '../../layout/Spacer/components';
+
+
+export const InputAutocomplete = ({
+  placeholderOnInput,
+  idOnInput,
+  suggestedAddresses,
+  handleOnInputChange,
+  handleOnFocus,
+  handleOnBlur,
+  handleOnSelect,
+  viewAutocomplete,
+  viewBarLoader,
+  viewIconList,
+  viewInputSecondary,
+  styleWidthInput,
+  value,
+  isViewIcon,
+  idIcon,
+  nameIcon,
+  sizeIcon,
+  colorIcon,
+  backgroundIcon,
+  getStyles
+}) => {
+
+  // let [loading, setLoading] = useState(false);
+  // let [color, setColor] = useState("#ffffff");
+
+  const override = {
+    display: "block",
+    margin: "0 auto",
+    borderColor: "red",
+    width: "94%",
+  };
+
+  // const options = [
+  //   { label: "Option 1", value: 1 },
+  //   { label: "Option 2", value: 2 },
+  //   { label: "Option 3", value: 3 }
+  // ];
+
+  // const Input = (props) => {
+  //   const { autoComplete = props.autoComplete } = props.selectProps;
+  //   return <components.Input {...props} autoComplete={autoComplete} />;
+  // };
+
+
+  // const handleOnInputChange = (string, results) => {
+  //   console.log(string, results)
+
+  // }
+
+  // const loadOptions  = (string, results) => {
+  //   // inputValue: string,
+  //   // callback: (options: ColourOption[]) => void
+  // }
+
+  // const handleOnInputChange = (string, results) => {
+  //   console.log(string, results)
+
+  // }
+
+  const router = useRouter()
+
+
+  return <div className={getStyles('input-autocomplete')}>
+
+    {isViewIcon ?
+
+      <div className={getStyles('box-icon-input')}>
+
+        <Icon
+          id={idIcon}
+          name={nameIcon}
+          size={sizeIcon}
+          color={colorIcon}
+          background={backgroundIcon}
+        />
+
+        <Horizontal size="xs" />
+
+        <Input
+          autoComplete={'off'}
+          id={idOnInput}
+          type='text'
+          name={idOnInput}
+          onChange={handleOnInputChange}
+          onFocus={handleOnFocus}
+          onBlur={handleOnBlur}
+          placeholder={placeholderOnInput}
+          isInputSecondary={viewInputSecondary}
+          value={value}
+        />
+
+      </div>
+
+      :
+
+      <Input
+        autoComplete={'off'}
+        id={idOnInput}
+        type='text'
+        name={idOnInput}
+        onChange={handleOnInputChange}
+        onFocus={handleOnFocus}
+        onBlur={handleOnBlur}
+        placeholder={placeholderOnInput}
+        isInputSecondary={viewInputSecondary}
+        value={value}
+      />}
+
+    {!viewBarLoader && suggestedAddresses.length !== 0 && viewAutocomplete ? (
+      <div className={getStyles('input-autocomplete-box-results')}>
+        <ul className={getStyles('input-autocomplete-ul')}>
+          {suggestedAddresses.map((itemAddresses, index) => (
+            <li id={'idLiItem' + index} key={index} className={getStyles('input-autocomplete-li')} onClick={handleOnSelect}>
+              {viewIconList ?
+                <div className={getStyles('input-autocomplete-li-icon')}>
+                  <Picture
+                    src={itemAddresses.iconURL ? itemAddresses.iconURL : router.basePath + "/static/google-maps.png"}
+                    width={15}
+                    height={15}
+                  />
+                </div>
+                :
+                null
+
+              }
+              {itemAddresses.name ? itemAddresses.name : itemAddresses.addressField}
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
+      :
+      viewAutocomplete ? (
+        <div className={getStyles('input-autocomplete-box-results')}>
+          <ul className={getStyles('input-autocomplete-ul')}>
+
+            <li className={getStyles('input-autocomplete-li')} onClick={handleOnSelect}>
+              <div className={getStyles('input-autocomplete-li-icon')}>
+                <Icon
+                  name="clock"
+                  size="xs"
+                />
+              </div>
+              No hay resultados
+            </li>
+
+          </ul>
+        </div>
+      )
+        : null
+    }
+
+
+    <BarLoader color="#36d7b7" loading={viewBarLoader} cssOverride={override} size={150} />
+
+
+  </div>
+}
+
+InputAutocomplete.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  placeholderOnInput: PropTypes.string,
+  idOnInput: PropTypes.string,
+  suggestedAddresses: PropTypes.array,
+  handleOnInputChange: PropTypes.func,
+  handleOnFocus: PropTypes.func,
+  handleOnBlur: PropTypes.func,
+  handleOnSelect: PropTypes.func,
+  viewAutocomplete: PropTypes.bool,
+  viewBarLoader: PropTypes.bool,
+  viewIconList: PropTypes.bool,
+  viewInputSecondary: PropTypes.bool,
+  styleWidthInput: PropTypes.string,
+  isViewIcon: PropTypes.bool,
+  idIcon: PropTypes.string,
+  nameIcon: PropTypes.string,
+  sizeIcon: PropTypes.string,
+  colorIcon: PropTypes.string,
+  backgroundIcon: PropTypes.string,
+}
+
+InputAutocomplete.defaultProps = {
+  getStyles: () => { },
+  placeholderOnInput: '',
+  idOnInput: '',
+  suggestedAddresses: [],
+  handleOnInputChange: () => { },
+  handleOnFocus: () => { },
+  handleOnBlur: () => { },
+  handleOnSelect: () => { },
+  viewAutocomplete: false,
+  viewBarLoader: false,
+  viewIconList: true,
+  viewInputSecondary: false,
+  styleWidthInput: '260',
+  isViewIcon: false,
+  idIcon: 'Ejemplo',
+  nameIcon: 'user',
+  sizeIcon: 'md',
+  colorIcon: 'highlight',
+  backgroundIcon: 'base',
+}
+
+export default withStyles(styles)(InputAutocomplete)

package/molecules/InputAutocomplete/InputAutocomplete.module.css

@@ -0,0 +1,55 @@
+.input-autocomplete {
+  width: 100%;
+}
+
+.input-autocomplete-box-results {
+  padding: 7px 0px;
+  border-radius: var(--border-radius-xs);
+  border: var(--border-width-thin) solid var(--color-brand-white-lilac);
+  background-color: var(--color-base-white);
+  max-height: 230px;
+  overflow-y: auto;
+  box-shadow: 0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary);
+  outline: none;
+  position: absolute;
+  z-index: 11111;
+  margin-top: 2px;
+  max-width: 520px;
+  min-width: 260px;
+}
+
+.input-autocomplete-ul {
+  display: block;
+  list-style-type: none;
+  margin-block-start: 0em;
+  margin-block-end: 0em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 0px;
+}
+
+.input-autocomplete-li {
+  color: var(--color-font-base);
+  padding: 7px 9px;
+  font-size: var(--font-size-mini);
+  font-weight: var(--font-weight-light);
+  text-align: left;
+  border-bottom: var(--border-width-thin) solid var(--color-brand-white-lilac);
+  display: flex;
+}
+
+.input-autocomplete-li:hover {
+  background: rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+}
+
+.input-autocomplete-li-icon {
+  width: 15px;
+  min-width: 15px;
+  max-width: 15px;
+  margin-right: 6px;
+}
+
+.box-icon-input {
+  display: flex;
+}

package/molecules/InputAutocomplete/InputAutocomplete.stories.js

@@ -0,0 +1,23 @@
+import { InputAutocomplete, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(InputAutocomplete, styles)
+const ListTemplate = getListTemplate(InputAutocomplete, styles)
+
+export default {
+  title: 'Molecules/InputAutocomplete',
+  component: InputAutocomplete,
+  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/InputAutocomplete/constants.js

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

package/molecules/InputAutocomplete/index.js

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

package/molecules/ItemMenu/ItemMenu.js

@@ -0,0 +1,134 @@
+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 Icon from '../../atoms/Icon'
+
+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)
+
+  //create a custom function that will change menucollapse state from false to true and true to false
+  const subMenuIconClick = () => {
+    //condition checking to change state from true to false and vice versa
+    subMenuCollapse ? setSubMenuCollapse(false) : setSubMenuCollapse(true);
+  };
+
+
+  if (!subMenu) {
+    return (
+      <>
+        <Link href={itemHref} passHref>
+          <li className={getStyles('pro-menu-item', { 'active': itemActive })}>
+
+            <div className={getStyles('pro-inner-item')}>
+
+              <span className={getStyles('pro-icon-wrapper')}>
+
+                <span className={getStyles('pro-icon')}>
+
+                  <Icon
+                    size={size}
+                    name={icon}
+                    color={itemActive ? 'primary' : color}
+                    background={background}
+                    onClick={function noRefCheck() { }}
+                  />
+
+                </span>
+
+              </span>
+
+              <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
+
+            </div>
+
+          </li>
+        </Link>
+      </>
+    )
+  } else {
+    return (
+      <>
+        <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={itemActive ? 'primary' : color}
+                  background={background}
+                  onClick={function noRefCheck() { }}
+                />
+              </span>
+
+            </span>
+
+            <span className={getStyles('pro-item-content', 'title', { 'color': color })}>{children}</span>
+
+            <span className={getStyles('pro-arrow-wrapper')}>
+              <span className={getStyles('pro-arrow')}></span>
+            </span>
+
+          </div>
+
+          <div className={getStyles('react-slidedown', 'pro-inner-list-item', { 'closed': !subMenuCollapse })}>
+            <div>
+              <ul>
+
+                {itemSubmenu.map((item, index) => (
+                  item.view ?
+                    <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>
+                    : null
+                ))}
+              </ul>
+            </div>
+          </div>
+
+        </li>
+      </>
+    )
+  }
+
+
+}
+
+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),
+  background: PropTypes.oneOf(options.backgrounds),
+}
+
+ItemMenu.defaultProps = {
+  subMenu: false,
+  itemActive: false,
+  icon: 'home',
+  size: 'lg',
+  color: 'highlight',
+  background: 'transparent',
+  itemHref: '/',
+  getStyles: () => { },
+}
+
+
+export default withStyles(styles)(ItemMenu)