imbric-theme 0.3.3 → 0.3.6

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,118 @@
+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',
+    }),
+
+    placeholder: (base) => ({
+      ...base,
+      color: 'var(--color-brand-white-lilac)',
+      fontWeight: 'var(--font-weight-light)',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    }),
+
+  }
+
+  // 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/FooterTable/FooterTable.js

@@ -0,0 +1,47 @@
+import React, { useEffect } from "react";
+import PropTypes from 'prop-types'
+
+import styles from './FooterTable.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+export const FooterTable = ({ getStyles, range, setPage, page, slice }) => {
+  useEffect(() => {
+    if (slice.length < 1 && page !== 1) {
+      setPage(page - 1);
+    }
+  }, [slice, page, setPage]);
+
+  return (
+    <div className={getStyles('footer-table')}>
+
+      <div className={styles.tableFooter}>
+        {range.map((el, index) => (
+          <button
+            key={index}
+            className={`${styles.button} ${page === el ? styles.activeButton : styles.inactiveButton
+              }`}
+            onClick={() => setPage(el)}
+          >
+            {el}
+          </button>
+        ))}
+      </div>
+
+    </div>
+
+
+  )
+}
+
+FooterTable.propTypes = {
+  // children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  // type: PropTypes.oneOf(options.types),
+}
+
+FooterTable.defaultProps = {
+  getStyles: () => { },
+}
+
+export default withStyles(styles)(FooterTable)

package/molecules/FooterTable/FooterTable.module.css

@@ -0,0 +1,37 @@
+.footer-table {
+  display: flex;
+}
+
+.tableFooter {
+  background-color: #f1f1f1;
+  padding: 8px 0px;
+  width: 100%;
+  font-weight: 500;
+  text-align: left;
+  font-size: 16px;
+  color: #2c3e50;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button {
+  border: none;
+  padding: 7px 14px;
+  border-radius: 10px;
+  cursor: pointer;
+  margin-right: 4px;
+  margin-left: 4px;
+}
+
+.activeButton {
+  color: white;
+  background: #185adb;
+}
+
+.inactiveButton {
+  color: #2c3e50;
+  background: #f9f9f9;
+}

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 @@
+export const options = { types: [] }

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'

package/molecules/RowTable/RowTable.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './RowTable.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+import Moment from 'react-moment'
+
+export const RowTable = ({ getStyles, slice, columnsData }) => {
+  return (
+    <div className={getStyles('tbl-content')}>
+      <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
+        <tbody>
+          {slice.map((item, index) => (
+
+            <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' ?
+
+                        <td className={getStyles('td')} key={[itemTd.accessor]}>
+                          <Moment format="DD/MM/YYYY hh:mm:ss">
+                            {item[itemTd.accessor]}
+                          </Moment>
+                        </td>
+
+                        : itemTd.typeFilter === 'number' ?
+
+                          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>
+
+                          : 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>
+
+                  ) : null
+              ))}
+            </tr>
+
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+RowTable.propTypes = {
+  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,22 @@
+.table {
+  width: 100%;
+  table-layout: fixed;
+
+}
+
+.tbl-content {
+  height: max-content;
+  overflow-x: auto;
+  margin-top: 0px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.td {
+  padding: 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);
+}

package/molecules/RowTable/RowTable.stories.js

@@ -0,0 +1,26 @@
+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: {
+    slice: options.bookings,
+    columnsData: options.columns,
+  },
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }