imbric-theme 0.3.3 → 0.3.6

package/atoms/Label/Label.module.css

@@ -0,0 +1,38 @@
+.label {
+  display: flex;
+  text-align: left;
+  width: 100%;
+  /* color: var(--color-brand-eastern-blue); */
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-mini);
+  font-weight: var(--font-weight-light);
+  line-height: var(--line-height-tight);
+}
+
+.is-hint {
+  font-size: 11px;
+}
+
+.color-label {
+  color: var(--color-brand-eastern-blue);
+}
+
+.color-base {
+  color: var(--color-font-base);
+}
+
+.color-inverted {
+  color: var(--color-font-inverted);
+}
+
+.color-muted {
+  color: var(--color-brand-mandy);
+}
+
+.color-primary {
+  color: var(--color-primary);
+}
+
+.color-tertiary {
+  color: var(--color-tertiary);
+}

package/atoms/Label/Label.stories.js

@@ -0,0 +1,26 @@
+import { Label, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Label, styles)
+const ListTemplate = getListTemplate(Label, styles)
+
+export default {
+  title: 'Atoms/Label',
+  component: Label,
+  args: {
+    isHint: false
+  },
+  argTypes: {
+    color: getOptionsArgTypes(options.colors),
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Colors = ListTemplate.bind({})
+Colors.args = { items: options.colors.map((color) => ({ color })) }

package/atoms/Label/constants.js

@@ -0,0 +1 @@
+export const options = { colors: ['label', 'base', 'muted', 'inverted', 'primary', 'tertiary'], }

package/atoms/Label/index.js

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

package/atoms/LinkItem/LinkItem.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+
+import styles from './LinkItem.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+import Paragraph from '../Paragraph'
+
+export const LinkItem = ({ children, size, color, getStyles, isHref }) => {
+  return (
+    <Link href={isHref} passHref>
+      <a className={getStyles('link', ['color'])}>
+        <Paragraph size={size} color={color} weight="semibold" isInline>
+          {children}
+        </Paragraph>
+      </a>
+    </Link>
+  )
+}
+
+LinkItem.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  color: PropTypes.oneOf(options.colors),
+  size: PropTypes.oneOf(options.sizes),
+}
+
+LinkItem.defaultProps = {
+  getStyles: () => { },
+  color: 'primary',
+  size: 'md',
+  isHref: '/',
+}
+
+export default withStyles(styles)(LinkItem)

package/atoms/{Link/Link.module.css → LinkItem/LinkItem.module.css}

@@ -1,7 +1,7 @@
 .link {
   display: inline;
   max-width: max-content;
-  border-bottom: 1px solid currentColor;
+  /* border-bottom: 1px solid currentColor; */
   cursor: pointer;
 }
 
@@ -12,3 +12,8 @@
 .color-tertiary {
   color: var(--color-tertiary);
 }
+
+.link p {
+  font-weight: var(--font-weight-normal);
+  text-decoration: underline;
+}

package/atoms/{Link/Link.stories.js → LinkItem/LinkItem.stories.js}

@@ -1,4 +1,4 @@
-import { Link, styles, options } from '.'
+import { LinkItem, styles, options } from '.'
 
 import {
   getTemplate,
@@ -6,12 +6,12 @@ import {
   getOptionsArgTypes,
 } from '../../helpers/storybook'
 
-const Template = getTemplate(Link, styles)
-const ListTemplate = getListTemplate(Link, styles)
+const Template = getTemplate(LinkItem, styles)
+const ListTemplate = getListTemplate(LinkItem, styles)
 
 export default {
-  title: 'Atoms/Link',
-  component: Link,
+  title: 'Atoms/LinkItem',
+  component: LinkItem,
   args: {
     children: 'Mouths Muil',
   },

package/atoms/LinkItem/index.js

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

package/atoms/Paragraph/Paragraph.module.css

@@ -1,5 +1,9 @@
 .paragraph {
   width: 100%;
+  margin-block-start: 0em;
+  margin-block-end: 0em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
 }
 
 .color-base {

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,45 @@
+import { useState, useEffect } from "react";
+
+const calculateRange = (data, rowsPerPage) => {
+  const range = []
+  if (!data) {
+    var num = Math.ceil(1);
+  } else {
+    num = Math.ceil(data.length / 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);
+  }
+};
+
+const useTable = (data, page, rowsPerPage) => {
+  const [tableRange, setTableRange] = useState([]);
+  const [slice, setSlice] = useState([]);
+
+  useEffect(() => {
+    const range = calculateRange(data, rowsPerPage);
+    setTableRange([...range]);
+
+    const slice = sliceData(data, page, rowsPerPage);
+    setSlice([...slice]);
+  }, [data, setTableRange, page, setSlice, rowsPerPage]);
+
+  return { slice, range: tableRange };
+};
+
+export default useTable;

package/index.js

@@ -1,3 +1,6 @@
+// Pages
+export { default as Login } from './pages/Login'
+
 // Layout
 export { default as CenteredContent } from './layout/CenteredContent'
 export { default as Container } from './layout/Container'
@@ -6,23 +9,29 @@ 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 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'
 
+
 // Molecules
 export { default as Accordion } from './molecules/Accordion'
 export { default as AddButton } from './molecules/AddButton'
@@ -33,4 +42,16 @@ 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 ItemMenu } from './molecules/ItemMenu'
+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 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,172 @@
+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 { Horizontal, Vertical } from '../../layout/Spacer/components'
+import LoadingError from '../../molecules/LoadingError'
+// import ColumnTable from '../../molecules/ColumnTable'
+// import RowTable from '../../molecules/RowTable'
+// import FooterTable from '../../molecules/FooterTable'
+// import useTable from '../../hook/useTable'
+// import useStateDate from '../../hook/useStateDate';
+
+
+export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns, isLayoutDate, isViewRange, isViewAddColumn, isViewDownloadDoc, handleAddColumn, handleSelectRange, handleDownloadExcel }) => {
+
+  const [tableData, setTableData] = useState(optionsData);
+  const [columnsData, setColumnsData] = useState(opColumns);
+  const [addColumsData, setAddColumsData] = useState(opAddColumns);
+
+  // const handleSelectRange = (item) => {
+  //   setState([item.selection])
+  // }
+
+  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);
+    }
+  };
+
+  // const handleAddColumn = (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([])
+
+  // }
+
+  return (
+
+    
+      <div className={getStyles('opFunction')}>
+
+        {isViewRange ? (
+          <div className={getStyles('opFunctionBox1')}>
+            <DatePicker
+              isLayoutDate={isLayoutDate}
+              onChangeRange={handleSelectRange}
+            />
+          </div>
+        ) : null}
+
+        <div className={getStyles('opFunctionBox2')}>
+
+          {isViewAddColumn ? (
+            <div className={getStyles('opFunctionBox3')}>
+              <Label>Mostrar u ocultar columnas</Label>
+              <DynamicSelect
+                isMulti
+                isInline
+                onChange={handleAddColumn}
+                optionsSelect={addColumsData}
+                placeholder='Seleccionar columnas'
+              />
+            </div>
+          ) : null}
+          <Horizontal size="md" />
+          {isViewDownloadDoc ? (
+            <div className={getStyles('opFunctionBox3')}>
+              <Icon
+                key="fileDownload"
+                background="inverted"
+                name="fileDownload"
+                onClick={handleDownloadExcel}
+              />
+            </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,
+  isViewAddColumn: PropTypes.bool,
+  isViewDownloadDoc: PropTypes.bool,
+  onChangeInput: PropTypes.func,
+  handleAddColumn: PropTypes.func,
+  isError: PropTypes.string,
+  isLayoutDate: PropTypes.string,
+  handleSelectRange: PropTypes.func,
+  handleDownloadExcel: PropTypes.func,
+}
+
+DynamicTable.defaultProps = {
+  getStyles: () => { },
+  handleAddColumn: () => { },
+  isViewRange: true,
+  isViewAddColumn: true,
+  isViewDownloadDoc: true,
+  isLayoutDate: 'DateRangePicker',
+  handleSelectRange: () => { },
+  handleDownloadExcel: () => { },
+}
+
+export default withStyles(styles)(DynamicTable)

package/layout/DynamicTable/DynamicTable.module.css

@@ -0,0 +1,63 @@
+.opFunction {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+/* .opFunctionBox1 {
+  display: inline-flex;
+} */
+
+.opFunctionBox2 {
+  display: inline-flex;
+  align-items: flex-end;
+}
+
+.dynamic-table {
+  box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 7%), 0px 2px 2px 0px rgb(0 0 0 / 7%), 0px 1px 5px 0px rgb(0 0 0 / 6%);
+}
+
+.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);
+}
+
+.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);
+}
+
+/* for custom scrollbar for webkit browser*/
+
+/* ::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+
+::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+} */

package/layout/DynamicTable/DynamicTable.stories.js

@@ -0,0 +1,77 @@
+import { DynamicTable, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+import ColumnTable from '../../molecules/ColumnTable'
+import Heading from '../../atoms/Heading';
+import { Vertical } from '../Spacer/components';
+import RowTable from '../../molecules/RowTable';
+import FooterTable from '../../molecules/FooterTable';
+
+
+const Template = getTemplate(DynamicTable, styles)
+const ListTemplate = getListTemplate(DynamicTable, styles)
+
+
+
+export default {
+  title: 'Layout/DynamicTable',
+  component: DynamicTable,
+  args: {
+    optionsData: options.bookings,
+    opColumns: options.columns,
+    opAddColumns: options.opAddColumns,
+    isViewRange: true,
+    isViewAddColumn: true,
+    isViewDownloadDoc: true,
+  },
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+
+
+export const TableTotal = () =>
+  <div>
+
+    {/* Title - Optional */}
+    <Heading color='black' size='lg' weight='normal'>
+      Servicios de traslados
+    </Heading>
+
+    <Vertical size='sm' />
+
+    {/* Dynamic Table */}
+    <Default></Default>
+
+    <Vertical size='sm' />
+
+    {/* Column Table */}
+    <ColumnTable columnsData={options.columns}> </ColumnTable>
+
+    <Vertical size='sm' />
+
+    {/* Row Table */}
+    <RowTable slice={options.bookings} columnsData={options.columns}></RowTable>
+
+    {/* Footer Table */}
+    <FooterTable range={[]} slice={options.bookings} setPage={4} page={1} />
+
+  </div>
+
+
+// TableTotal.args = { isInline: true }
+
+
+{/* <Canvas>
+	<Story name="Basic">
+	</Story>
+</Canvas> */}
+
+
+