imbric-theme 0.1.2 → 0.1.4

package/atoms/Toggle/Toggle.module.css

@@ -0,0 +1,41 @@
+.toggle {
+  display: flex;
+}
+
+.toggle-item {
+  opacity: 0;
+  width: 3em;
+  height: 1.4em;
+  position: absolute;
+  z-index: 1;
+  cursor: pointer;
+}
+.toggle-item + .checkbox-custom-label {
+  display: flex;
+  width: 4em;
+  height: 2em;
+  background: #aaa;
+  border-radius: 50px;
+  position: relative;
+  transition: all .3s ease;
+  cursor: pointer;
+  box-shadow: inset 0 0 5px #222;
+}
+.toggle-item + .checkbox-custom-label:after {
+  content: '';
+  position: absolute;
+  width: 1.5em;
+  height: 1.5em;
+  background: #fff;
+  border-radius: 50%;
+  top: .25em;
+  left: .25em;
+  transition: all .2s ease;
+}
+.toggle-item:checked + .checkbox-custom-label {
+  background: var(--color-tertiary);
+  box-shadow: inset 0 0 5px rgb(95, 95, 95);
+}
+.toggle-item:checked + .checkbox-custom-label:after {
+  left: 2.3em;
+}

package/atoms/Toggle/Toggle.stories.js

@@ -0,0 +1,21 @@
+import { Toggle, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Toggle, styles)
+const ListTemplate = getListTemplate(Toggle, styles)
+
+export default {
+  title: 'Atoms/Toggle',
+  component: Toggle,
+  args: {},
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})

package/atoms/Toggle/constants.js

@@ -0,0 +1 @@
+export const options = { types: [] }

package/atoms/Toggle/index.js

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

package/helpers/storybook.js

@@ -20,8 +20,8 @@ export const getListTemplate = (Component, styles) => ({ items, ...args }) =>
     )
   })
 
-export const getOptionsArgTypes = (options) => ({
-  description: '**options:**',
+export const getOptionsArgTypes = (options, description = '**Options:**') => ({
+  description: description,
   table: {
     type: { summary: options.map((option) => `'${option}'`).join('|') },
   },

package/hook/useAddColumn.js

@@ -0,0 +1,40 @@
+const useAddColumn = (event) => {
+
+    let listKeyColumnOrder = []
+
+    event.forEach(element => {
+      listKeyColumnOrder[element.value] = true
+    });
+
+    for (const itemAddColumns of addColumsData) {
+      if (listKeyColumnOrder[itemAddColumns.value]) {
+        itemAddColumns.activeView = true
+      } else {
+        itemAddColumns.activeView = false
+      }
+    }
+
+
+    for (const itemEvent of addColumsData) {
+
+      for (const itemColumns of columnsData) {
+
+        if (itemColumns.accessor === itemEvent.value) {
+
+          if (itemEvent.activeView) {
+            itemColumns.activeView = true
+          } else {
+            itemColumns.activeView = false
+          }
+
+
+        }
+      }
+
+    }
+
+    setColumnsData([])
+
+  }
+
+  export default useAddColumn

package/hook/useStateDate.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react'
+import {
+    addDays,
+  } from "date-fns";
+
+const useStateDate = () => {
+
+    const [state, setState] = useState([
+        {
+          startDate: addDays(new Date(), -59),
+          endDate: new Date(),
+          key: 'selection',
+        }
+      ]);
+
+
+      useEffect(() => {
+
+      }, [state]);
+
+
+  return { state, setState }
+}
+
+export default useStateDate

package/hook/useTable.js

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react'
+
+const calculateRange = (dataTotalQueryCount, data, rowsPerPage) => {
+	const range = []
+	if (!data) {
+		var num = Math.ceil(1)
+	} else {
+		// num = Math.ceil(data.length / rowsPerPage)
+		num = Math.ceil(dataTotalQueryCount / rowsPerPage)
+	}
+
+	// const num = Math.ceil(data.length / rowsPerPage);
+
+	// let i = 1;
+	for (let i = 1; i <= num; i++) {
+		range.push(i)
+	}
+	return range
+}
+
+// const sliceData = (data, page, rowsPerPage) => {
+// 	if (!data) {
+// 		return (data = [])
+// 	} else {
+// 		// return data.slice((page - 1) * rowsPerPage, page * rowsPerPage)
+// 		return data
+// 	}
+// }
+
+const sliceData = (data) => {
+	if (!data) {
+		return (data = [])
+	} else {
+		// return data.slice((page - 1) * rowsPerPage, page * rowsPerPage)
+		return data
+	}
+}
+
+const useTable = (dataTotalQueryCount, data, page, rowsPerPage) => {
+	const [tableRange, setTableRange] = useState([])
+	const [slice, setSlice] = useState([])
+
+	useEffect(() => {
+		const range = calculateRange(dataTotalQueryCount, data, rowsPerPage)
+		setTableRange([...range])
+
+		const slice = sliceData(data, page, rowsPerPage)
+		setSlice([...slice])
+	}, [dataTotalQueryCount, data, setTableRange, page, setSlice, rowsPerPage])
+
+	return { slice, range: tableRange }
+}
+
+export default useTable

package/index.js

@@ -1,31 +1,71 @@
+// Pages
+export { default as Login } from './pages/Login'
+
 // Layout
 export { default as CenteredContent } from './layout/CenteredContent'
 export { default as Container } from './layout/Container'
 export { default as FullHeightContent } from './layout/FullHeightContent'
+export { default as FlexColumnContent } from './layout/FlexColumnContent'
 export { default as Spacer } from './layout/Spacer'
+export { default as Sidebar } from './layout/Sidebar'
+export { default as Navbar } from './layout/Navbar'
+export { default as DynamicTable } from './layout/DynamicTable'
+
 
 // Atoms
+export { default as AlertModal } from './atoms/AlertModal'
 export { default as Avatar } from './atoms/Avatar'
 export { default as Button } from './atoms/Button'
 export { default as Card } from './atoms/Card'
 export { default as Check } from './atoms/Check'
+export { default as Checkbox } from './atoms/Checkbox'
 export { default as Divider } from './atoms/Divider'
 export { default as Heading } from './atoms/Heading'
 export { default as Icon } from './atoms/Icon'
 export { default as Input } from './atoms/Input'
-export { default as Link } from './atoms/Link'
+export { default as Label } from './atoms/Label'
+export { default as LinkItem } from './atoms/LinkItem'
+export { default as Loading } from './atoms/Loading'
 export { default as Modal } from './atoms/Modal'
 export { default as Paragraph } from './atoms/Paragraph'
 export { default as Picture } from './atoms/Picture'
 export { default as Textarea } from './atoms/Textarea'
+export { default as Tab } from './atoms/Tab'
+export { default as Toggle } from './atoms/Toggle'
+
+
 
 // Molecules
 export { default as Accordion } from './molecules/Accordion'
 export { default as AddButton } from './molecules/AddButton'
 export { default as ButtonIcon } from './molecules/ButtonIcon'
+export { default as CardServiceDetail } from './molecules/CardServiceDetail'
+export { default as CardServices } from './molecules/CardServices'
+export { default as CardServicesFinalized } from './molecules/CardServicesFinalized'
+export { default as CardProductTypesBooking } from './molecules/CardProductTypesBooking'
 export { default as Dropdown } from './molecules/Dropdown'
 export { default as LoadingError } from './molecules/LoadingError'
 export { default as Score } from './molecules/Score'
 export { default as Task } from './molecules/Task'
 export { default as TaskCounter } from './molecules/TaskCounter'
 export { default as IconLabel } from './molecules/IconLabel'
+export { default as ItemMenu } from './molecules/ItemMenu'
+export { default as InputAutocomplete } from './molecules/InputAutocomplete'
+export { default as CheckList } from './molecules/CheckList'
+export { default as ColumnTable } from './molecules/ColumnTable'
+export { default as RowTable } from './molecules/RowTable'
+export { default as FooterTable } from './molecules/FooterTable'
+export { default as DynamicSelect } from './molecules/DynamicSelect'
+export { default as DatePicker } from './molecules/DynamicSelect'
+export { default as CardDefault } from './molecules/CardDefault'
+export { default as Tabs } from './molecules/Tabs'
+export { default as DatePickerTime } from './molecules/DatePickerTime'
+
+
+
+
+export { default as useTable } from './hook/useTable'
+export { default as useStateDate } from './hook/useStateDate'
+
+
+

package/jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
     '^.+\\.jsx?$': 'babel-jest',
   },
   collectCoverageFrom: [
-    '{atoms,molecules,layout}/**/!(index).js',
+    '{atoms,molecules,layout,pages}/**/!(index).js',
     '{hocs,helpers}/*.js',
   ],
   coverageThreshold: {

package/layout/DynamicTable/DynamicTable.js

@@ -0,0 +1,372 @@
+import React from 'react'
+import { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import styles from './DynamicTable.module.css'
+import withStyles from '../../hocs/withStyles'
+import DynamicSelect from '../../molecules/DynamicSelect'
+import DatePicker from '../../molecules/DatePicker'
+import Label from '../../atoms/Label'
+import Icon from '../../atoms/Icon'
+import Button from '../../atoms/Button'
+import { Horizontal, Vertical } from '../../layout/Spacer/components'
+import ReactTooltip from 'react-tooltip'
+import Heading from '../../atoms/Heading/Heading'
+
+
+export const DynamicTable = ({
+  getStyles,
+  optionsData,
+  opColumns,
+  opAddColumns,
+  opFilterTable,
+  isLayoutDate,
+  isViewRange,
+  isViewTitleTable,
+  isViewAddColumn,
+  isViewFilterTable,
+  isViewBtn,
+  isViewLeftBtn,
+  isViewLeftBtnSecondary,
+  isViewLeftBtnTertiary,
+  isViewDownloadDoc,
+  typeBtn,
+  typeBtnSecondary,
+  typeBtnTertiary,
+  titleBtn,
+  titleBtnSecondary,
+  titleBtnTertiary,
+  handleBtn,
+  handleBtnSecondary,
+  handleBtnTertiary,
+  handleAddColumn,
+  handleFilterTable,
+  handleSelectRange,
+  handleDownloadExcel,
+  handleDefaultValue,
+  handleDefaultValueFilter,
+  labelDinamicSelect,
+  placeholderDinamicSelect,
+  isLoadingDinamicSelect,
+  labelDinamicSelectFilter,
+  placeholderDinamicSelectFilter,
+  isLoadingDinamicSelectFilter,
+  labelSinceDateRange,
+  labelTillDateRange,
+  txtTootipFileDownload,
+  titleHeadingTable,
+}) => {
+
+  const [tableData, setTableData] = useState(optionsData);
+  const [columnsData, setColumnsData] = useState(opColumns);
+  const [addColumsData, setAddColumsData] = useState(opAddColumns);
+  const [filterTableData, setFilterTableData] = useState(opFilterTable);
+
+
+  // STATE TOOLTIP
+  const [isToolTipMounted, setIsToolTipMounted] = useState(false)
+
+  // TOOLTIP
+  const handleMouseEnter = () => {
+    setIsToolTipMounted(true)
+  }
+  const handleMouseLeave = () => {
+    setIsToolTipMounted(false)
+  }
+
+  useEffect(() => {
+    setColumnsData(opColumns);
+  })
+
+  const handleSorting = (sortField, sortOrder) => {
+    if (sortField) {
+      const sorted = [...tableData].sort((a, b) => {
+        if (a[sortField] === null) return 1;
+        if (b[sortField] === null) return -1;
+        if (a[sortField] === null && b[sortField] === null) return 0;
+        return (
+          a[sortField].toString().localeCompare(b[sortField].toString(), "en", {
+            numeric: true,
+          }) * (sortOrder === "asc" ? 1 : -1)
+        );
+      });
+      setTableData(sorted);
+    }
+  };
+
+  return (
+
+
+    <div className={getStyles('opFunction')}>
+
+
+      <div className={getStyles('opFunctionBoxTotal2')}>
+
+        {isViewTitleTable ? (
+          <div className={getStyles('opFunctionBox1')}>
+            <Heading
+              size="sm"
+            >
+              {titleHeadingTable}
+            </Heading>
+          </div>
+        ) : null}
+
+        {isViewLeftBtn ? (
+
+          <>
+
+            <div className={getStyles('opFunctionBox3')}>
+
+              <Button
+                type={typeBtn}
+                isInline={true}
+                onClick={handleBtn}
+              >
+                {titleBtn}
+              </Button>
+
+            </div>
+          </>
+        ) : null}
+
+
+
+        {isViewLeftBtnSecondary ? (
+
+          <>
+
+            <div className={getStyles('opFunctionBox3')}>
+
+              <Button
+                type={typeBtnSecondary}
+                isInline={true}
+                onClick={handleBtnSecondary}
+              >
+                {titleBtnSecondary}
+              </Button>
+
+            </div>
+          </>
+        ) : null}
+
+        {isViewLeftBtnTertiary ? (
+
+          <>
+
+            <div className={getStyles('opFunctionBox3')}>
+
+              <Button
+                type={typeBtnTertiary}
+                isInline={true}
+                onClick={handleBtnTertiary}
+              >
+                {titleBtnTertiary}
+              </Button>
+
+            </div>
+          </>
+        ) : null}
+
+
+
+        {isViewRange ? (
+          <div className={getStyles('opFunctionBox1')}>
+            <DatePicker
+              isLayoutDate={isLayoutDate}
+              onChangeRange={handleSelectRange}
+              sinceDateRange={labelSinceDateRange}
+              tillDateRange={labelTillDateRange}
+            />
+          </div>
+        ) : null}
+      </div>
+      <div className={getStyles('opFunctionBox2')}>
+
+
+        {isViewFilterTable ? (
+          <div className={getStyles('opFunctionBox3')}>
+            <Label>{labelDinamicSelectFilter}</Label>
+
+            {isLoadingDinamicSelectFilter ?
+              <DynamicSelect
+                isInline
+                onChange={handleFilterTable}
+                optionsSelect={filterTableData}
+                placeholder={placeholderDinamicSelectFilter}
+                defaultValue={handleDefaultValueFilter}
+                closeMenuOnSelect={false}
+                isClearable={false}
+                instanceId={'idFilterTableAll'}
+              // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
+              /> : null
+            }
+
+          </div>
+        ) : null}
+
+
+
+        {isViewAddColumn ? (
+          <div className={getStyles('opFunctionBox3')}>
+            <Label>{labelDinamicSelect}</Label>
+
+            {isLoadingDinamicSelect ?
+              <DynamicSelect
+                isMulti
+                isInline
+                onChange={handleAddColumn}
+                optionsSelect={addColumsData}
+                placeholder={placeholderDinamicSelect}
+                defaultValue={handleDefaultValue}
+                closeMenuOnSelect={false}
+                instanceId={'idAddColumsTable'}
+              // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
+              /> : null
+            }
+
+          </div>
+        ) : null}
+
+
+        {isViewBtn ? (
+
+          <>
+
+            <div className={getStyles('opFunctionBox3')}>
+
+              <Button
+                type={typeBtn}
+                isInline={true}
+                onClick={handleBtn}
+              >
+                {titleBtn}
+              </Button>
+
+            </div>
+          </>
+        ) : null}
+
+
+        {isViewDownloadDoc ? (
+          <div id='boxFileDownload' className={getStyles('opFunctionBox3')}>
+
+
+            <span
+              data-tip
+              data-for='fileDownload'
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <Icon
+                key="fileDownload"
+                background="inverted"
+                name="fileDownload"
+                onClick={handleDownloadExcel}
+              />
+
+            </span>
+
+            {isToolTipMounted ? (
+              <ReactTooltip id='fileDownload' type='error'>
+                <span>{txtTootipFileDownload}</span>
+              </ReactTooltip>
+            ) : null}
+
+
+          </div>
+        ) : null}
+
+      </div>
+
+    </div>
+
+    // <ColumnTable
+    //   handleSorting={handleSorting}
+    //   onChangeInput={onChangeInput}
+    //   columnsData={columnsData}
+    // >
+    //   {item.title}
+    // </ColumnTable>
+
+    // <RowTable slice={slice} columnsData={columnsData}></RowTable>
+
+    // <FooterTable range={range} slice={slice} setPage={setPage} page={page} /> 
+
+
+  )
+}
+
+DynamicTable.propTypes = {
+  // children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  isViewRange: PropTypes.bool,
+  isViewTitleTable: PropTypes.bool,
+  isViewAddColumn: PropTypes.bool,
+  isViewFilterTable: PropTypes.bool,
+  isViewDownloadDoc: PropTypes.bool,
+  isViewBtn: PropTypes.bool,
+  isViewLeftBtn: PropTypes.bool,
+  onChangeInput: PropTypes.func,
+  handleAddColumn: PropTypes.func,
+  handleFilterTable: PropTypes.func,
+  isError: PropTypes.string,
+  isLayoutDate: PropTypes.string,
+  handleSelectRange: PropTypes.func,
+  handleDownloadExcel: PropTypes.func,
+  labelDinamicSelect: PropTypes.string,
+  placeholderDinamicSelect: PropTypes.string,
+  labelDinamicSelectFilter: PropTypes.string,
+  placeholderDinamicSelectFilter: PropTypes.string,
+  labelSinceDateRange: PropTypes.string,
+  labelTillDateRange: PropTypes.string,
+  typeBtn: PropTypes.string,
+  titleBtn: PropTypes.string,
+  handleBtn: PropTypes.func,
+  isViewLeftBtnSecondary: PropTypes.bool,
+  isViewLeftBtnTertiary: PropTypes.bool,
+  typeBtnSecondary: PropTypes.string,
+  typeBtnTertiary: PropTypes.string,
+  titleBtnSecondary: PropTypes.string,
+  titleBtnTertiary: PropTypes.string,
+  handleBtnSecondary: PropTypes.func,
+  handleBtnTertiary: PropTypes.func,
+  txtTootipFileDownload: PropTypes.string,
+  titleHeadingTable: PropTypes.string,
+}
+
+DynamicTable.defaultProps = {
+  getStyles: () => { },
+  handleAddColumn: () => { },
+  handleFilterTable: () => { },
+  isViewRange: true,
+  isViewTitleTable: false,
+  isViewAddColumn: true,
+  isViewFilterTable: false,
+  isViewDownloadDoc: true,
+  isViewBtn: false,
+  isViewLeftBtn: false,
+  isLayoutDate: 'Calendar',
+  handleSelectRange: () => { },
+  handleDownloadExcel: () => { },
+  labelDinamicSelect: 'Mostrar u ocultar columnas',
+  placeholderDinamicSelect: 'Seleccionar columnas',
+  labelDinamicSelectFilter: '',
+  placeholderDinamicSelectFilter: '',
+  labelSinceDateRange: 'Desde',
+  labelTillDateRange: 'Hasta',
+  typeBtn: 'primary',
+  titleBtn: '',
+  handleBtn: () => { },
+  isViewLeftBtnSecondary: false,
+  isViewLeftBtnTertiary: false,
+  typeBtnSecondary: 'primary',
+  typeBtnTertiary: 'primary',
+  titleBtnSecondary: '',
+  titleBtnTertiary: '',
+  handleBtnSecondary: () => { },
+  handleBtnTertiary: () => { },
+  txtTootipFileDownload: '',
+  titleHeadingTable: 'Total: 200',
+}
+
+export default withStyles(styles)(DynamicTable)