imbric-theme 0.1.0

package/layout/Navbar/Navbar.js

@@ -0,0 +1,247 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import styles from './Navbar.module.css'
+import withStyles from '../../hocs/withStyles'
+import { useRouter } from "next/router";
+import ReactTooltip from 'react-tooltip'
+
+import Heading from '../../atoms/Heading/Heading'
+import Tabs from '../../molecules/Tabs/Tabs'
+import Icon from '../../atoms/Icon'
+
+export const Navbar = ({
+  getStyles,
+  viewTabsNav,
+  viewOptionsNav,
+  isViewLegal,
+  isViewInfo,
+  isViewProfile,
+  isViewLogout,
+  children,
+  linkLogout,
+  linkLegal,
+  linkInfo,
+  linkProfile,
+  txtTootipLegal,
+  txtTootipInfo,
+  txtTootipProfile,
+  languageSwitchLink,
+
+}) => {
+
+  const router = useRouter();
+
+  // STATE TOOLTIP
+  const [isToolTipMounted, setIsToolTipMounted] = useState(false)
+
+  // TOOLTIP
+  const handleMouseEnter = () => {
+    setIsToolTipMounted(true)
+  }
+  const handleMouseLeave = () => {
+    setIsToolTipMounted(false)
+  }
+
+
+  const handleClick = (e, path) => {
+
+    console.log("I clicked on the About Page" + path);
+
+    router.push({
+      pathname: path,
+    })
+
+
+  };
+
+
+
+
+  return (
+    <>
+      <header className={getStyles('navbar')}>
+
+        <Heading
+          color="base"
+          size="xs"
+          weight="light"
+        >
+          {children}
+        </Heading>
+
+        <Tabs
+          options={[
+            {
+              href: '/taxi',
+              text: 'Taxi',
+              view: true
+            },
+            {
+              href: '/parking',
+              text: 'Parking',
+              view: true
+            },
+            {
+              href: '/sharing',
+              text: 'Sharing',
+              view: true
+            },
+            {
+              href: '/sharing',
+              text: 'T. Publico',
+              view: true
+            },
+            {
+              href: '/sharing',
+              text: 'Hoja de Km',
+              view: true
+            }
+          ]}
+          viewTabs={viewTabsNav}
+        />
+
+
+        {viewOptionsNav ? (
+          <div className={getStyles('navbar__actions')}>
+
+            {isViewLegal ? (
+              <>
+                <span
+                  data-tip
+                  data-for='legal'
+                  onMouseEnter={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                >
+                  <Icon
+                    size='lg'
+                    name='legal'
+                    color='highlight'
+                    background='transparent'
+                    onClick={linkLegal}
+                    id='idIconLegalNavbar'
+                  />
+
+                </span>
+
+                {isToolTipMounted ? (
+                  <ReactTooltip id='legal' type='error'>
+                    <span>{txtTootipLegal}</span>
+                  </ReactTooltip>
+                ) : null}
+              </>
+            ) : null}
+
+            {isViewInfo ? (
+              <>
+                <span
+                  data-tip
+                  data-for='info'
+                  onMouseEnter={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                >
+                  <Icon
+                    size='lg'
+                    name='info'
+                    color='highlight'
+                    background='transparent'
+                    onClick={linkInfo}
+                    id='idIconInfoNavbar'
+                  />
+
+                </span>
+
+                {isToolTipMounted ? (
+                  <ReactTooltip id='info' type='error'>
+                    <span>{txtTootipInfo}</span>
+                  </ReactTooltip>
+                ) : null}
+              </>
+            ) : null}
+
+            {isViewProfile ? (
+              <>
+                <span
+                  data-tip
+                  data-for='profile'
+                  onMouseEnter={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                >
+                  <Icon
+                    size='lg'
+                    name='profile'
+                    color='highlight'
+                    background='transparent'
+                    onClick={linkProfile}
+                    id='idIconProfileNavbar'
+                  />
+
+                </span>
+
+                {isToolTipMounted ? (
+                  <ReactTooltip id='profile' type='error'>
+                    <span>{txtTootipProfile}</span>
+                  </ReactTooltip>
+                ) : null}
+              </>
+            ) : null}
+
+            {languageSwitchLink}
+
+            {isViewLogout ? (
+              <Icon
+                size='lg'
+                name='logout'
+                color='highlight'
+                background='transparent'
+                onClick={linkLogout}
+                id='idIconLogoutNavbar'
+              />
+            ) : null}
+
+
+          </div>
+
+        ) : null}
+
+        {/* {viewOptionsNav ? (
+            <div onClick={linkLogout} className={getStyles('navbar__item')}>
+              Logout
+            </div>
+          ) : null} */}
+
+
+      </header>
+
+
+    </>
+  )
+}
+
+Navbar.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  children: PropTypes.any.isRequired,
+  viewTabsNav: PropTypes.bool,
+  viewOptionsNav: PropTypes.bool,
+  linkLogout: PropTypes.func,
+  linkLegal: PropTypes.func,
+  linkInfo: PropTypes.func,
+  linkProfile: PropTypes.func,
+  handleChange: PropTypes.func,
+  languageSwitchLink: PropTypes.any.isRequired,
+  isViewLegal: PropTypes.bool,
+  isViewInfo: PropTypes.bool,
+  isViewProfile: PropTypes.bool,
+  isViewLogout: PropTypes.bool,
+}
+
+Navbar.defaultProps = {
+  viewTabsNav: false,
+  viewOptionsNav: true,
+  getStyles: () => { },
+  isViewLegal: true,
+  isViewInfo: true,
+  isViewProfile: true,
+  isViewLogout: true,
+}
+
+export default withStyles(styles)(Navbar)

package/layout/Navbar/Navbar.module.css

@@ -0,0 +1,35 @@
+/* .is-playground {
+  border: var(--border-width-thick) dashed var(--color-primary);
+} */
+
+
+.navbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    color: #000;
+    box-shadow: 0px 1px 4px rgb(100 116 139 / 12%);
+    width: calc(100%);
+    padding-left: 18px;
+    padding-right: 14px;
+    min-height: 51px;
+    background-color: #f2fcfc;
+}
+
+.navbar__title {
+    margin-right: auto;
+    font-size: 150%;
+    padding: 0.67em 1.5em;
+}
+
+.navbar__item {
+    padding: 0.67em 1.5em;
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+.navbar__actions {
+    display: flex;
+    align-items: center;
+}

package/layout/Navbar/Navbar.stories.js

@@ -0,0 +1,20 @@
+import { Navbar, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Navbar, styles)
+
+export default {
+  title: 'Layout/Navbar',
+  component: Navbar,
+  args: {
+    viewTabsNav: false,
+    viewOptionsNav: true,
+    children: 'Taksee',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+}
+
+export const Default = Template.bind({})

package/layout/Navbar/constants.js

@@ -0,0 +1,35 @@
+export const options = [
+	{
+		active: false,
+		href: '#',
+		icon: 'legal',
+		text: 'Legal',
+		view: true,
+		viewSubMenu: true,
+	},
+	{
+		active: false,
+		href: '/home',
+		icon: 'info',
+		text: 'User Guide',
+		view: true,
+		viewSubMenu: false,
+	},
+	{
+		active: false,
+		href: '/home',
+		icon: 'profile',
+		text: 'My profile',
+		view: true,
+		viewSubMenu: false,
+	},
+	// {
+	// 	active: false,
+	// 	href: '/home',
+	// 	icon: 'logout',
+	// 	text: 'Salir',
+	// 	view: true,
+	// 	viewSubMenu: false,
+	// },
+
+]

package/layout/Navbar/index.js

@@ -0,0 +1,2 @@
+export { default, Navbar } from './Navbar'
+export { default as styles } from './Navbar.module.css'

package/layout/Sidebar/Sidebar.js

@@ -0,0 +1,115 @@
+import React, { ReactNode, useRef, useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import withStyles from '../../hocs/withStyles'
+import { useRouter } from 'next/router'
+
+// import { options } from './constants'
+
+import styles from './Sidebar.module.css'
+
+import Picture from '../../atoms/Picture'
+import ItemMenu from '../../molecules/ItemMenu/ItemMenu'
+
+export const Sidebar = ({ getStyles, menuCollapseView, options, isHrefLogo, isSrcLogoS, isSrcLogo }) => {
+
+  const router = useRouter()
+
+  return (
+    <>
+      <div className={getStyles('header', {
+        'collapsed': menuCollapseView,
+      })}>
+
+        <div className={getStyles('pro-sidebar')}>
+
+          <div className={getStyles('pro-sidebar-inner')}>
+
+            <div className={getStyles('pro-sidebar-layout')}>
+
+              <div className={getStyles('pro-sidebar-header')}>
+
+                <div className={getStyles('logotext')}>
+                  {/* small and big change using menuCollapseView state */}
+                  {menuCollapseView ? <Picture isHref={isHrefLogo} src={router.basePath + isSrcLogoS} width={19}></Picture> : <Picture isHref={isHrefLogo} src={router.basePath + isSrcLogo} width={'max-content'}></Picture>}
+                </div>
+                {/* <div className={getStyles('closemenu')}>
+
+                  {menuCollapseView ? (
+
+                    <Icon
+                      name="angleRight"
+                      onClick={menuIconClick}
+                    />
+
+                  ) : (
+                    <Icon
+                      name="angleLeft"
+                      onClick={menuIconClick}
+                    />
+                  )}
+                </div> */}
+
+              </div>
+
+              <div className={getStyles('pro-sidebar-content')}>
+
+                <nav className={getStyles('pro-menu', 'inner-submenu-arrows')}>
+
+                  <ul>
+
+                    {options.map((item, index) => (
+                      item.view ?
+                        <ItemMenu
+                          key={'sidebarItem' + index}
+                          icon={item.icon}
+                          subMenu={item.viewSubMenu}
+                          itemSubmenu={item.submenu}
+                          itemHref={item.href}
+                          itemActive={item.active}
+                        >
+                          {item.text}
+                        </ItemMenu>
+
+                        : null
+
+                    ))}
+
+                  </ul>
+
+                </nav>
+
+              </div>
+
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+    </>
+  )
+}
+
+Sidebar.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  isHrefLogo: PropTypes.any,
+  isSrcLogoS: PropTypes.string,
+  isSrcLogo: PropTypes.string
+  // options: PropTypes.arrayOf(
+  //   PropTypes.shape({
+  //     text: PropTypes.string,
+  //     view: PropTypes.bool,
+  //   })
+  // ).isRequired,
+}
+
+Sidebar.defaultProps = {
+  getStyles: () => { },
+  menuCollapseView: false,
+  isHrefLogo: '',
+  isSrcLogoS: '',
+  isSrcLogo: ''
+}
+
+export default withStyles(styles)(Sidebar)