imbric-theme 0.3.1 → 0.3.4

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,123 @@
+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, children, sortable, accessor, handleSorting, isFilter, columnUppercase, idInput, typeInput, nameInput, placeholder, value, onChange }) => {
+
+  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 (
+    <th
+      onClick={sortable ? () => handleSortingChange(accessor) : null}
+      className={getStyles('column-table', {
+        'column-uppercase': columnUppercase,
+      })}>
+
+
+      <Paragraph
+        size="xs"
+        isInline
+      >
+        {children}
+      </Paragraph>
+
+      <Horizontal size="xs" />
+
+      {cl === 'default' ?
+        (<Icon
+          className=""
+          name="angleUpDown"
+          size="xs"
+        />
+        ) : cl === '' ? null
+
+          : cl === 'angleDown'
+            ? (<Icon
+              className=""
+              name="angleDown"
+              size="xs"
+            />
+            )
+            : (<Icon
+              className=""
+              name="angleUp"
+              size="xs"
+            />
+            )
+      }
+
+
+      <Vertical size="xs" />
+
+      {isFilter ? (
+
+        <Input
+          isInputFilter
+          id={idInput}
+          value={''}
+          type={typeInput}
+          name={nameInput}
+          onChange={onChange}
+          placeholder={placeholder}
+        />) : null
+      }
+
+    </th>
+  )
+}
+
+ColumnTable.propTypes = {
+  sortable: PropTypes.bool.isRequired,
+  accessor: PropTypes.string.isRequired,
+  handleSorting: PropTypes.func.isRequired,
+  children: PropTypes.string.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  isFilter: PropTypes.bool,
+  columnUppercase: PropTypes.bool,
+  idInput: PropTypes.string,
+  typeInput: PropTypes.oneOf(options.typeInput),
+  nameInput: PropTypes.string,
+  placeholder: PropTypes.string,
+}
+
+ColumnTable.defaultProps = {
+  getStyles: () => { },
+  children: 'NameTh',
+  sortable: true,
+  accessor: 'prueba',
+  handleSorting: () => { },
+  columnUppercase: false,
+  isFilter: true,
+  idInput: 'prueba',
+  typeInput: 'text',
+  nameInput: 'prueba',
+  placeholder: 'placeholder'
+}
+
+export default withStyles(styles)(ColumnTable)

package/molecules/ColumnTable/ColumnTable.module.css

@@ -0,0 +1,9 @@
+.column-table {
+  padding: 12px 15px;
+  text-align: left;
+  color: var(--color-font-base);
+}
+
+.column-uppercase {
+  text-transform: uppercase;
+}

package/molecules/ColumnTable/ColumnTable.stories.js

@@ -0,0 +1,29 @@
+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: {
+    children: 'NameTh',
+    sortable: true,
+    accessor: 'prueba',
+    columnUppercase: false,
+    isFilter: true
+  },
+  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 @@
+export const options = { typeInput: ['text', 'password', 'date', 'number'], }

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,223 @@
+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 '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 }) => {
+
+  const [isShowCalendar, setShowCalendar] = useState(false);
+
+  const [state, setState] = useState([
+    {
+      startDate: addDays(new Date(), -59),
+      endDate: new Date(),
+      key: 'selection',
+    }
+
+  ]);
+
+  moment.locale('es')
+  const format = "DD/MMMM/YYYY";
+
+  const handleSelect = (date) => {
+    console.log(date); // native Date object
+    console.log(state)
+    console.log(date)
+  }
+
+  const handleClickOpenCalendar = () => {
+    setShowCalendar(true)
+  }
+
+  const handleClickCloseCalendar = () => {
+    setShowCalendar(false)
+  };
+
+
+  return (
+    <div className={getStyles('date-picker')}>
+
+      {isLayoutDate === 'Calendar' ?
+
+        (<Calendar
+          date={new Date()}
+          onChange={handleSelect}
+        />)
+        : isLayoutDate === 'DateRange' ?
+
+          (<DateRange
+            editableDateInputs={true}
+            onChange={item => setState([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 => setState([item.selection])}
+                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 => setState([item.selection])}
+                ranges={state}
+              /> */}
+            </div>
+
+      }
+    </div>
+  )
+}
+
+DatePicker.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  isLayoutDate: PropTypes.oneOf(options.typeLayoutDate),
+}
+
+DatePicker.defaultProps = {
+  getStyles: () => { },
+  isLayoutDate: 'Calendar'
+}
+
+export default withStyles(styles)(DatePicker)