imbric-theme 0.1.0

package/molecules/CheckList/CheckList.js

@@ -0,0 +1,135 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Icon from '../../atoms/Icon'
+import Paragraph from '../../atoms/Paragraph'
+
+import styles from './CheckList.module.css'
+import withStyles from '../../hocs/withStyles'
+
+
+// export const handleChange = e => {
+//   const { name, value } = e.target;
+
+//   this.setState({
+//     [name]: value
+//   });
+// }
+
+// const handleChange = ({ onChange }) => () => {
+//   // onChange()
+
+//   const { name, value } = e.target;
+
+//   this.setState({
+//     [name]: value
+//   });
+
+// }
+
+// export const handleClick = ({ onClick }) => (event) => {
+//   onClick(event)
+// }
+
+// const handleChange = ({ onChange }) => () => {
+//   onChange()
+// }
+
+
+export const CheckList = ({ getStyles, options, onChange }) => {
+
+  // this.state = {};
+
+  return (
+
+    <div className={getStyles('check-list')}>
+
+      <ul id="platform"  className={getStyles('boxul')}>
+        {options.data.map((item, index) => (
+          <li key={index} className={getStyles('boxlist')}>
+
+            <label className={getStyles('rad-label')}>
+
+              <input
+                className={getStyles('rad-input')}
+                id={item.id}
+                value={item.value}
+                name={item.name}
+                type="radio"
+                onChange={onChange}
+              />
+
+              <div className={getStyles('rad-design')} ></div>
+
+              <div className={getStyles('rad-text')}>
+                <Paragraph
+                  className={getStyles('title-list')}
+                  color="primary"
+                  isInline
+                  size="sm"
+                >
+                  {item.title}
+                </Paragraph>
+
+                <Paragraph
+                  className={getStyles('subtitle-list')}
+                  color="muted"
+                  isInline
+                  size="xs"
+                >
+                  {item.subTitle}
+                </Paragraph>
+              </div>
+
+            </label>
+
+
+          </li>
+        ))}
+      </ul>
+
+      {/* <div className="radio-buttons">
+        Windows
+        <input
+          id="windows"
+          value="windows"
+          name="platform"
+          type="radio"
+          onChange={handleChange}
+        />
+        Mac
+        <input
+          id="mac"
+          value="mac"
+          name="platform"
+          type="radio"
+          onChange={handleChange}
+        />
+        Linux
+        <input
+          id="linux"
+          value="linux"
+          name="platform"
+          type="radio"
+          onChange={handleChange}
+        />
+      </div> */}
+
+    </div>
+
+  )
+}
+
+CheckList.propTypes = {
+  // children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  // type: PropTypes.oneOf(options.types),
+}
+
+CheckList.defaultProps = {
+  getStyles: () => { },
+  onChange: () => {},
+}
+
+export default withStyles(styles)(CheckList)

package/molecules/CheckList/CheckList.module.css

@@ -0,0 +1,94 @@
+
+.boxul {
+  display: block;
+  list-style-type: disc;
+  margin-block-start: 0em;
+  margin-block-end: 0em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 0px;
+}
+
+
+.check-list {
+  display: flex;
+}
+
+.boxlist {
+  list-style-type: none;
+}
+
+.title-list {
+  padding-left: 0px;
+}
+
+.subtitle-list {
+  display: flex;
+}
+
+.rad-label {
+  display: flex;
+  align-items: center;
+
+  border-radius: 100px;
+  padding: 12px 16px;
+  margin: 6px 0;
+
+  cursor: pointer;
+  transition: .3s;
+}
+
+.rad-label:hover,
+.rad-label:focus-within {
+  background: hsla(0, 0%, 80%, .14);
+}
+
+.rad-input {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  z-index: -1;
+}
+
+.rad-design {
+  width: 22px;
+  height: 22px;
+  border-radius: 100px;
+
+  background: linear-gradient(to right bottom, hsl(154, 97%, 62%), hsl(225, 97%, 62%));
+  position: relative;
+}
+
+.rad-design::before {
+  content: '';
+
+  display: inline-block;
+  width: inherit;
+  height: inherit;
+  border-radius: inherit;
+
+  background: hsl(0, 0%, 90%);
+  transform: scale(1.1);
+  transition: .3s;
+}
+
+.rad-input:checked+.rad-design::before {
+  transform: scale(0);
+}
+
+.rad-text {
+  /* color: hsl(0, 0%, 60%); */
+  margin-left: 14px;
+  /* letter-spacing: 3px;
+  text-transform: uppercase;
+  font-size: 18px;
+  font-weight: 900; */
+  transition: .3s;
+}
+
+.rad-input:checked~.rad-text {
+  color: hsl(0, 0%, 40%);
+}

package/molecules/CheckList/CheckList.stories.js

@@ -0,0 +1,25 @@
+import { CheckList, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(CheckList, styles)
+const ListTemplate = getListTemplate(CheckList, styles)
+
+export default {
+  title: 'Molecules/CheckList',
+  component: CheckList,
+  args: {
+    options: options,
+  },
+  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/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,154 @@
+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 DynamicSelect from '../../molecules/DynamicSelect'
+import { Horizontal, Vertical } from '../../layout/Spacer/components'
+
+
+export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChangeInput, onChangeSelect, columnsData, opSelect }) => {
+
+  // const [sortable, setSortable] = useState(true)
+  // const [accessor, setAccessor] = useState("")
+
+  const [sortField, setSortField] = useState("")
+  const [order, setOrder] = useState("asc")
+
+  // const [optionsSelect, setOptionsSelect] = useState(opSelect);
+
+
+  const handleSortingChange = (accessor) => {
+    const sortOrder =
+      accessor === sortField && order === "asc" ? "desc" : "asc"
+
+    setSortField(accessor)
+    setOrder(sortOrder)
+    handleSorting(accessor, sortOrder)
+  };
+
+
+  return (
+
+    // <div className={getStyles('tbl-header')}>
+    //   <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
+    <thead>
+      <tr>
+
+        {columnsData.map(({ accessor, sortable, ...props }) => {
+
+          const cl = sortable
+            ? sortField && sortField === accessor && order === "asc"
+              ? "up"
+              : sortField && sortField === accessor && order === "desc"
+                ? "down"
+                : "default"
+            : "";
+
+          return (
+            props.activeView ?
+              // setSortable(props.sortable)
+              // setAccessor()
+              (<th
+                key={props.idInput}
+                className={getStyles('column-table',
+                  { 'column-uppercase': columnUppercase },
+                  { 'thacction': accessor === 'iconUrl' },
+                  { 'thcheckbox': props.isCheckbox }
+                )}>
+
+                <span className={getStyles('tbl-txtTh')} onClick={sortable ? () => handleSortingChange(accessor) : null}>
+                  <Paragraph
+                    size="xs"
+                    isInline
+                  >
+                    {props.title}
+                  </Paragraph>
+
+                  <Horizontal size="xs" />
+
+                  {sortable ?
+
+                    cl === "default" ?
+                      <Icon
+                        name="angleUpDown"
+                        size="xs"
+                      />
+                      : cl === "" ? null
+
+                        : cl === "up"
+                          ? <Icon
+                            name="angleDown"
+                            size="xs"
+                          />
+
+                          : <Icon
+                            name="angleUp"
+                            size="xs"
+                          />
+                    : null
+                  }
+                </span>
+
+
+                <Vertical size="xs" />
+
+                {props.viewIsFilter ? (
+
+                  props.typeFilter === 'select' ?
+                    <DynamicSelect
+                      isInline
+                      onChange={onChangeSelect}
+                      optionsSelect={opSelect}
+                      placeholder={props.placeholder}
+                      maxMenuHeight={110}
+                    />
+                    :
+                    <Input
+                      isInputFilter
+                      id={props.idInput}
+                      type={props.typeFilter}
+                      name={props.nameInput}
+                      onChange={onChangeInput}
+                      placeholder={props.placeholder}
+                    />
+                )
+
+                  : null
+                }
+
+              </th>
+              ) : null
+          )
+
+        })}
+
+      </tr>
+    </thead>
+    // </table>
+    // </div>
+
+  )
+}
+
+ColumnTable.propTypes = {
+  handleSorting: PropTypes.func.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  columnUppercase: PropTypes.bool,
+  onChangeInput: PropTypes.func,
+  onChangeSelect: PropTypes.func,
+}
+
+ColumnTable.defaultProps = {
+  getStyles: () => { },
+  handleSorting: () => { },
+  columnUppercase: false,
+  onChangeInput: () => { },
+  onChangeSelect: () => { },
+}
+
+export default withStyles(styles)(ColumnTable)

package/molecules/ColumnTable/ColumnTable.module.css

@@ -0,0 +1,51 @@
+.column-table {
+  padding: 12px 12px;
+  text-align: left;
+  color: var(--color-font-base);
+  display: table-cell;
+  vertical-align: top;
+  /* overflow: hidden;
+  text-overflow: ellipsis; */
+  border-bottom-color: rgba(0, 0, 0, 0.12);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-top-color: rgba(0, 0, 0, 0.12);
+  border-top-width: 1px;
+  border-top-style: solid;
+}
+
+.column-uppercase {
+  text-transform: uppercase;
+}
+
+.tbl-txtTh {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.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);
+}
+
+.thacction {
+  max-width: 80px;
+  min-width: 80px;
+  width: 80px;
+}
+
+.thcheckbox {
+  max-width: 80px;
+  min-width: 80px;
+  width: 80px;
+}

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,117 @@
+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'
+        },
+    ],
+
+    opSelect: [
+        { value: 'chocolate', label: 'Chocolate' },
+        { value: 'strawberry', label: 'Strawberry' },
+        { value: 'vanilla', label: 'Vanilla' }
+    ]
+
+}

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'