imbric-theme 0.1.2 → 0.1.3

package/molecules/DynamicSelect/DynamicSelect.js

@@ -0,0 +1,186 @@
+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,
+  value,
+  defaultValue,
+  placeholder,
+  isMulti,
+  isClearable,
+  isDisabled,
+  isLoading,
+  isRtl,
+  isSearchable,
+  isInline,
+  onChange,
+  onFocus,
+  onBlur,
+  closeMenuOnSelect,
+  maxMenuHeight,
+  instanceId,
+}) => {
+
+
+  const customStyles = {
+
+    option: (base, state) => ({
+      ...base,
+      cursor: 'pointer',
+      width: "max-content",
+      minWidth: "100%",
+      position: 'relative',
+      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',
+    }),
+
+    placeholder: (base) => ({
+      ...base,
+      color: 'var(--color-brand-white-lilac)',
+      fontWeight: 'var(--font-weight-light)',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    }),
+
+    valueContainer: (base, state) => ({
+      ...base,
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      // display: "inline-grid"
+      // maxHeight: "38px",
+    }),
+
+    container: (base) => ({
+      ...base,
+      // width: "max-content",
+      minWidth: "100%",
+    }),
+
+    menu: (base) => ({
+      ...base,
+      width: "max-content",
+      minWidth: "100%",
+    }),
+
+    // menu: styles => ({ ...styles,                 
+    //   width: '500px'
+    //  })  
+
+    // indicatorsContainer: (provided, state) => ({
+    //   ...provided,
+    //   height: '50px',
+    // }),
+
+  }
+
+  // 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}
+        value={value}
+        isMulti={isMulti}
+        isClearable={isClearable}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        isRtl={isRtl}
+        isSearchable={isSearchable}
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        closeMenuOnSelect={closeMenuOnSelect}
+        maxMenuHeight={maxMenuHeight}
+        autosize={true}
+        instanceId={instanceId}
+      />
+    </div>
+
+  )
+}
+
+DynamicSelect.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  defaultValue: PropTypes.any,
+  value: PropTypes.any,
+  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,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  closeMenuOnSelect: PropTypes.bool,
+  maxMenuHeight: PropTypes.number,
+  instanceId: PropTypes.string,
+}
+
+DynamicSelect.defaultProps = {
+  getStyles: () => { },
+  placeholder: 'seleccionar',
+  isMulti: false,
+  isClearable: true,
+  isDisabled: false,
+  isLoading: false,
+  isRtl: false,
+  isSearchable: false,
+  isInline: false,
+  onChange: () => { },
+  onFocus: () => { },
+  onBlur: () => { },
+  closeMenuOnSelect: true,
+  maxMenuHeight: 300,
+  instanceId: ''
+}
+
+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: options.optionsSelect[0],
+    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/FooterTable/FooterTable.js

@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from 'prop-types'
+
+import styles from './FooterTable.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+import DynamicSelect from '../../molecules/DynamicSelect'
+import Icon from "../../atoms/Icon/Icon";
+
+
+export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollPage, page, slice, placeholderDinamicSelect, handleResultsForPage, defaultValueSelect, positionPag, useAvancesCeil, setPositionPag }) => {
+
+
+  // const [positionPag, setPositionPag] = useState(0)
+
+  useEffect(() => {
+    if (slice.length < 1 && page !== 1) {
+      setPage(page - 1);
+    }
+
+    console.log(page)
+
+  }, [slice, page, setPage, positionPag, useAvancesCeil]);
+
+  // const nextPagScroll = (page) => {
+
+  //   console.log(page)
+  //   if (page >= 4) {
+  //     setPositionPag('-40')
+  //     console.log(positionPag)
+  //     const elem = document.getElementById('table-pag-scroll');
+  //     elem.style.marginLeft = '-40px';
+  //     console.log(elem)
+  //   }
+  // }
+
+
+  return (
+    <div className={getStyles('footer-table')}>
+
+      <div className={styles.tableFooter}>
+
+        {page >= 2 ?
+          <Icon
+            name="angleLeft"
+            onClick={() => { setPage(page - 1); setDataPage(page - 1); setScrollPage('angleLeft') }}
+          />
+          : null}
+
+
+        {page >= 4 ?
+
+          <button
+            className={`${styles.button} ${styles.inactiveButton}`}
+            onClick={() => { setPage(1); setDataPage(1); setPositionPag(0); }}
+          >
+            1
+          </button>
+
+          : null}
+
+
+        {page >= 5 ?
+
+          <button
+            disabled
+            className={`${styles.button} ${styles.disabled}`}
+          >
+            ...
+          </button>
+          : null}
+
+        <div className={getStyles('footer-table-pag-box')}>
+
+          <div id="table-pag-scroll" className={getStyles('footer-table-pag')} style={{ marginLeft: positionPag + 'px' }}>
+
+            {range.map((el, index) => (
+
+              <button
+                key={'footer' + index}
+                className={`${styles.button} ${page === el ? styles.activeButton : styles.inactiveButton
+                  }`}
+                onClick={() => { setPage(el); setDataPage(el) }}
+                onChange={item => { handleSelectRange(item); onChangeRange(item); }}
+              >
+                {el}
+              </button>
+
+            ))}
+
+          </div>
+        </div>
+
+
+        {page <= (range.length - 4) && range.length > 5 ?
+
+          <button
+            disabled
+            className={`${styles.button} ${styles.disabled}`}
+          >
+            ...
+          </button>
+
+          : null}
+
+
+        {page <= (range.length - 3) && range.length > 5 ?
+
+          <button
+            onClick={() => { setPage(range.length); setDataPage(range.length); setPositionPag('-' + (38 * (useAvancesCeil - 1))) }}
+            className={`${styles.button} ${styles.inactiveButton}`}
+          >
+            {range.length}
+          </button>
+
+          : null}
+
+        {page <= (range.length - 1) ?
+          < Icon
+            name="angleRight"
+            onClick={() => { setPage(page + 1); setDataPage(page + 1); setScrollPage('angleRight') }}
+          // onChange={item => { handleSelectRange(item); onChangeRange(item); }}
+          />
+          : null}
+
+
+      </div>
+
+      <DynamicSelect
+        isInline
+        onChange={handleResultsForPage}
+        optionsSelect={options.opResultsForPage}
+        placeholder={placeholderDinamicSelect}
+        isClearable={false}
+        defaultValue={defaultValueSelect}
+        closeMenuOnSelect={false}
+        instanceId={'idResultsForPage'}
+      />
+
+    </div>
+
+
+  )
+}
+
+FooterTable.propTypes = {
+  // children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  setDataPage: PropTypes.func,
+  setScrollPage: PropTypes.func,
+  placeholderDinamicSelect: PropTypes.string,
+  handleResultsForPage: PropTypes.func,
+  defaultValueSelect: PropTypes.any,
+  // type: PropTypes.oneOf(options.types),
+}
+
+FooterTable.defaultProps = {
+  getStyles: () => { },
+  setDataPage: () => { },
+  setScrollPage: () => { },
+  handleResultsForPage: () => { },
+  placeholderDinamicSelect: 'resultados por pagina',
+  defaultValueSelect: { value: 10, label: '10' },
+}
+
+export default withStyles(styles)(FooterTable)

package/molecules/FooterTable/FooterTable.module.css

@@ -0,0 +1,63 @@
+.footer-table {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.tableFooter {
+  /* background-color: #f1f1f1; */
+  padding: 4px 0px;
+  font-weight: 500;
+  text-align: left;
+  font-size: 16px;
+  color: #2c3e50;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.button {
+  border: none;
+  padding: 6px 0px;
+  border-radius: 10px;
+  cursor: pointer;
+  margin-right: 4px;
+  margin-left: 4px;
+  min-width: 30px;
+  max-width: 30px;
+}
+
+.activeButton {
+  color: white;
+  background: rgb(73, 125, 189, .4);
+}
+
+.inactiveButton {
+  color: #2c3e50;
+  background: #f9f9f9;
+}
+
+.inactiveButton:hover {
+  color: white;
+  background: rgb(73, 125, 189, .4);
+}
+
+.disabled {
+  color: #2c3e50;
+  background: #f9f9f9;
+  cursor: no-drop;
+}
+
+.footer-table-pag-box {
+  display: flex;
+  overflow-x: clip;
+  width: 100%;
+  max-width: 190px;
+}
+
+.footer-table-pag {
+  display: flex;
+  width: 100%;
+}

package/molecules/FooterTable/FooterTable.stories.js

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

@@ -0,0 +1,9 @@
+export const options =
+{
+    opResultsForPage: [
+        { id: 'pagOps1', value: 5, label: '5' },
+        { id: 'pagOps2', value: 10, label: '10' },
+        { id: 'pagOps3', value: 20, label: '20' },
+        { id: 'pagOps4', value: 50, label: '50' },
+    ]
+}

package/molecules/FooterTable/index.js

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