imbric-theme 0.3.3 → 0.3.6

package/molecules/CheckList/constants.js

@@ -0,0 +1,23 @@
+export const options = { 
+    data: [
+        {
+            id: 'idEmail',
+            active: false,
+            icon: 'home',
+            title: 'Email',
+            subTitle: 'recibir un código en mi email ',
+            value: 'Email',
+            name: 'platform',
+        },
+        {
+            id: 'idGoogle2FA',
+            active: false,
+            icon: 'home',
+            title: 'Google Auth',
+            subTitle: 'obtener un código en la app de autenticador de Google',
+            value: 'Google Auth',
+            name: 'platform',
+        },
+    ]
+
+ }

package/molecules/CheckList/index.js

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

package/molecules/ColumnTable/ColumnTable.js

@@ -0,0 +1,126 @@
+import React from 'react'
+import { useState } from "react";
+import PropTypes from 'prop-types'
+import styles from './ColumnTable.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+import Paragraph from '../../atoms/Paragraph'
+import Input from '../../atoms/Input'
+import Icon from '../../atoms/Icon'
+import { Horizontal, Vertical } from '../../layout/Spacer/components'
+
+
+export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChangeInput, columnsData }) => {
+
+  const [sortable, setSortable] = useState(true);
+  const [accessor, setAccessor] = useState("");
+  const [sortField, setSortField] = useState("");
+  const [order, setOrder] = useState("asc");
+
+  const handleSortingChange = (accessor) => {
+    const sortOrder =
+      accessor === sortField && order === "asc" ? "desc" : "asc";
+    setSortField(accessor);
+    setOrder(sortOrder);
+    handleSorting(accessor, sortOrder);
+  };
+
+  const cl = sortable
+    ? sortField && sortField === accessor && order === "asc"
+      ? "angleUp"
+      : sortField && sortField === accessor && order === "desc"
+        ? "angleDown"
+        : "default"
+    : "";
+
+
+  return (
+
+    <div className={getStyles('tbl-header')}>
+      <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
+        <thead>
+          <tr>
+
+            {columnsData.map((item) => (
+              item.activeView ?
+                // setSortable(item.sortable)
+                // setAccessor()
+                (<th
+                  key={item.idInput}
+                  className={getStyles('column-table', {
+                    'column-uppercase': columnUppercase,
+                  })}>
+
+                  <span onClick={item.sortable ? () => handleSortingChange(item.accessor) : null}>
+                    <Paragraph
+                      size="xs"
+                      isInline
+                    >
+                      {item.title}
+                    </Paragraph>
+
+                    <Horizontal size="xs" />
+
+                    {cl === "default" ?
+                      <Icon
+                        name="angleUpDown"
+                        size="xs"
+                      />
+                      : cl === "" ? null
+
+                        : cl === "angleDown"
+                          ? <Icon
+                            name="angleDown"
+                            size="xs"
+                          />
+
+                          : <Icon
+                            name="angleUp"
+                            size="xs"
+                          />
+
+                    }
+                  </span>
+
+
+                  <Vertical size="xs" />
+
+                  {item.viewIsFilter ? (
+
+                    <Input
+                      isInputFilter
+                      id={item.idInput}
+                      type={item.typeFilter}
+                      name={item.nameInput}
+                      onChange={onChangeInput}
+                      placeholder={item.placeholder}
+                    />) : null
+                  }
+
+                </th>
+                ) : null
+            ))}
+
+          </tr>
+        </thead>
+      </table>
+    </div>
+
+  )
+}
+
+ColumnTable.propTypes = {
+  handleSorting: PropTypes.func.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  columnUppercase: PropTypes.bool,
+  onChangeInput: PropTypes.func,
+}
+
+ColumnTable.defaultProps = {
+  getStyles: () => { },
+  handleSorting: () => { },
+  columnUppercase: false,
+  onChangeInput: () => { },
+}
+
+export default withStyles(styles)(ColumnTable)

package/molecules/ColumnTable/ColumnTable.module.css

@@ -0,0 +1,22 @@
+.column-table {
+  padding: 12px 15px;
+  text-align: left;
+  color: var(--color-font-base);
+}
+
+.column-uppercase {
+  text-transform: uppercase;
+}
+
+.table {
+  width: 100%;
+  table-layout: fixed;
+
+}
+
+.tbl-header {
+  /* background-color: rgba(255, 255, 255, 0.3); */
+  /* background-color: -webkit-linear-gradient(left, #25c481, #25b7c4);
+  background-color: linear-gradient(to right, #25c481, #25b7c4); */
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}

package/molecules/ColumnTable/ColumnTable.stories.js

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

package/molecules/ColumnTable/constants.js

@@ -0,0 +1,111 @@
+export const options = { 
+    typeInput: ['text', 'password', 'date', 'number'], 
+
+    columns: [
+        {
+            activeView: true,
+            sortable: true,
+            accessor: 'timeBookingStartRealTimestamp',
+            subAccessor: '',
+            title: 'Fecha',
+            viewIsFilter: true,
+            typeFilter: 'date',
+            subTypeFilter: false,
+            idInput: 'fecha',
+            nameInput: 'Fecha',
+            placeholder: 'Fecha'
+        },
+        {
+            activeView: true,
+            sortable: true,
+            accessor: 'passengerName',
+            subAccessor: '',
+            title: 'Pasajero',
+            viewIsFilter: true,
+            typeFilter: 'text',
+            subTypeFilter: false,
+            idInput: 'pasajero',
+            nameInput: 'Pasajero',
+            placeholder: 'Pasajero'
+        },
+        {
+            activeView: true,
+            sortable: true,
+            accessor: 'origin',
+            subAccessor: 'addressField',
+            title: 'Recogida',
+            viewIsFilter: true,
+            typeFilter: 'text',
+            subTypeFilter: false,
+            idInput: 'recogida',
+            nameInput: 'Recogida',
+            placeholder: 'Recogida'
+        },
+        {
+            activeView: true,
+            sortable: true,
+            accessor: 'destination',
+            subAccessor: 'addressField',
+            title: 'Destino',
+            viewIsFilter: true,
+            typeFilter: 'text',
+            subTypeFilter: false,
+            idInput: 'destino',
+            nameInput: 'Destino',
+            placeholder: 'Destino'
+        },
+        {
+            activeView: true,
+            sortable: true,
+            accessor: 'priceCustomer',
+            subAccessor: '',
+            title: 'Precio',
+            viewIsFilter: true,
+            typeFilter: 'text',
+            subTypeFilter: true,
+            idInput: 'precio',
+            nameInput: 'Precio',
+            placeholder: 'Precio'
+        },
+        {
+            activeView: false,
+            sortable: true,
+            accessor: 'id',
+            subAccessor: '',
+            title: 'ID',
+            viewIsFilter: true,
+            typeFilter: 'number',
+            subTypeFilter: false,
+            idInput: 'id',
+            nameInput: 'id',
+            placeholder: 'id'
+        },
+        {
+            activeView: false,
+            sortable: true,
+            accessor: 'idService',
+            subAccessor: '',
+            title: 'ID Reserva',
+            viewIsFilter: true,
+            typeFilter: 'number',
+            subTypeFilter: false,
+            idInput: 'IDReserva',
+            nameInput: 'ID Reserva',
+            placeholder: 'ID Reserva'
+        },
+        {
+            activeView: false,
+            sortable: true,
+            accessor: 'idSupplier',
+            subAccessor: '',
+            title: 'ID Proveedor',
+            viewIsFilter: true,
+            typeFilter: 'number',
+            subTypeFilter: false,
+            idInput: 'IDProveedor',
+            nameInput: 'ID Proveedor',
+            placeholder: 'ID Proveedor'
+        },
+    ],
+
+}

package/molecules/ColumnTable/index.js

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

package/molecules/DatePicker/DatePicker.js

@@ -0,0 +1,236 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useState } from 'react';
+import styles from './DatePicker.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+import { Calendar, DateRangePicker, DateRange, DefinedRange, defaultStaticRanges, defaultInputRanges } from 'react-date-range';
+import Input from '../../atoms/Input';
+import * as locales from 'react-date-range/dist/locale';
+import moment from 'moment'
+import Label from '../../atoms/Label';
+import { Horizontal, Vertical } from '../../layout/Spacer/components'
+import Icon from '../../atoms/Icon';
+import useStateDate from '../../hook/useStateDate';
+// import 'react-date-range/dist/styles.css'; // main css file
+// import 'react-date-range/dist/theme/default.css'; // theme css file
+
+import {
+  addDays,
+  endOfDay,
+  startOfDay,
+  startOfYear,
+  startOfMonth,
+  endOfMonth,
+  endOfYear,
+  addMonths,
+  addYears,
+  startOfWeek,
+  endOfWeek,
+  isSameDay,
+  differenceInCalendarDays
+} from "date-fns";
+
+
+
+export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange }) => {
+
+  const [isShowCalendar, setShowCalendar] = useState(false);
+
+
+  const { state, setState } = useStateDate();
+
+
+  // const [state, setState] = useState([
+  //   {
+  //     startDate: addDays(new Date(), -59),
+  //     endDate: new Date(),
+  //     key: 'selection',
+  //   }
+
+  // ]);
+
+  moment.locale('es')
+  const format = "DD/MMMM/YYYY";
+
+
+  const handleSelectRange = (item) => {
+    setState([item.selection])
+  }
+
+  const handleSelect = (date) => {
+    console.log(date); // native Date object
+    console.log(state)
+  }
+
+  const handleClickOpenCalendar = () => {
+    setShowCalendar(true)
+    // console.log(state)
+  }
+
+  const handleClickCloseCalendar = () => {
+    setShowCalendar(false)
+    console.log(state)
+  };
+
+
+  return (
+    <div className={getStyles('date-picker')}>
+
+      {isLayoutDate === 'Calendar' ?
+
+        (<Calendar
+          date={new Date()}
+          onChange={handleSelect}
+        />)
+        : isLayoutDate === 'DateRange' ?
+
+          (<DateRange
+            editableDateInputs={true}
+            onChange={item => useStateDate([item.selection])}
+            moveRangeOnFirstSelection={false}
+            ranges={state}
+          />)
+          :
+
+          !isShowCalendar ?
+            <div className={getStyles('date-picker-input')}>
+              <div>
+                <Label>Desde</Label>
+                <Input
+                  isInline
+                  id="startDate"
+                  onClick={handleClickOpenCalendar}
+                  placeholder="Et harum quidem"
+                  value={moment(state[0].startDate).format(format).toString()}
+                />
+                <Vertical size="xs" />
+              </div>
+
+              <div>
+                <Label>Hasta</Label>
+                <Input
+                  isInline
+                  id="endDate"
+                  onClick={handleClickOpenCalendar}
+                  placeholder="Et harum quidem"
+                  value={moment(state[0].endDate).format(format).toString()}
+                />
+              </div>
+            </div>
+            :
+            <div className={getStyles('modalDatePickerRange')}>
+
+              <DateRangePicker
+                locale={locales.es}
+                dateDisplayFormat='d MMMM yyyy'
+                onChange={ item => {handleSelectRange(item); onChangeRange(item);}}
+                showSelectionPreview={false}
+                moveRangeOnFirstSelection={false}
+                months={2}
+                ranges={state}
+                direction="horizontal"
+                inputRanges={[
+                  {
+                    ...defaultInputRanges[0],
+                    label: 'Dias hasta hoy'
+                  },
+                  {
+                    ...defaultInputRanges[1],
+                    label: 'Dias desde hoy'
+                  }
+                ]}
+                staticRanges={[
+                  // ...defaultStaticRanges,
+                  {
+                    label: "Mes pasado",
+                    range: () => ({
+                      startDate: startOfMonth(addMonths(new Date(), -1)),
+                      endDate: endOfMonth(addMonths(new Date(), -1))
+                    }),
+                    isSelected(range) {
+                      const definedRange = this.range();
+                      return (
+                        isSameDay(range.startDate, definedRange.startDate) &&
+                        isSameDay(range.endDate, definedRange.endDate)
+                      );
+                    }
+                  },
+                  {
+                    label: "Mes actual",
+                    range: () => ({
+                      startDate: startOfMonth(new Date()),
+                      endDate: endOfDay(new Date())
+                    }),
+                    isSelected(range) {
+                      const definedRange = this.range();
+                      return (
+                        isSameDay(range.startDate, definedRange.startDate) &&
+                        isSameDay(range.endDate, definedRange.endDate)
+                      );
+                    }
+                  },
+                  {
+                    label: "Año pasado",
+                    range: () => ({
+                      startDate: startOfYear(addYears(new Date(), -1)),
+                      endDate: endOfYear(addYears(new Date(), -1))
+                    }),
+                    isSelected(range) {
+                      const definedRange = this.range();
+                      return (
+                        isSameDay(range.startDate, definedRange.startDate) &&
+                        isSameDay(range.endDate, definedRange.endDate)
+                      );
+                    }
+                  },
+                  {
+                    label: "Año actual",
+                    range: () => ({
+                      startDate: startOfYear(new Date()),
+                      endDate: endOfDay(new Date())
+                    }),
+                    isSelected(range) {
+                      const definedRange = this.range();
+                      return (
+                        isSameDay(range.startDate, definedRange.startDate) &&
+                        isSameDay(range.endDate, definedRange.endDate)
+                      );
+                    }
+                  }
+                ]}
+              />
+
+              <div className={getStyles('btnSave')} onClick={handleClickCloseCalendar}>
+                <Icon
+                  name="checkCircle"
+                  color="inverted"
+                  onClick={function noRefCheck() { }}
+                />
+              </div>
+
+              {/* <DefinedRange
+                locale={locales.es}
+                onChange={item => useStateDate([item.selection])}
+                ranges={state}
+              /> */}
+            </div>
+
+      }
+    </div>
+  )
+}
+
+DatePicker.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  isLayoutDate: PropTypes.oneOf(options.typeLayoutDate),
+  onChangeRange: PropTypes.func
+}
+
+DatePicker.defaultProps = {
+  getStyles: () => { },
+  isLayoutDate: 'Calendar',
+  onChangeRange: () => { },
+}
+
+export default withStyles(styles)(DatePicker)

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)