imbric-theme 0.2.2 → 0.2.3

package/layout/Navbar/Navbar.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Navbar.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const Navbar = ({ getStyles, children, isPlayground }) => {
+  return (
+    <>
+    <header  className={getStyles('navbar', {
+        'is-playground': isPlayground,
+      })}>
+        <div className={getStyles('navbar__title', 'navbar__item')}>Cutco</div>
+        <div className={getStyles('navbar__item')}>About Us</div>
+        <div className={getStyles('navbar__item')}>Contact</div>
+        <div className={getStyles('navbar__item')}>Help</div>        
+    </header>
+
+      {/* {children} */}
+    </>
+  )
+}
+
+Navbar.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  isPlayground: PropTypes.bool,
+}
+
+Navbar.defaultProps = {
+  isPlayground: false,
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(Navbar)

package/layout/Navbar/Navbar.module.css

@@ -0,0 +1,27 @@
+
+/* .is-playground {
+  border: var(--border-width-thick) dashed var(--color-primary);
+} */
+
+
+.navbar {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: #000;
+    background-color: #FFFFFF;
+    box-shadow: 0px 1px 4px rgb(100 116 139 / 12%);
+    width: calc(100%);
+}
+
+.navbar__title {
+    margin-right: auto;
+    font-size: 150%;
+    padding: 9px 16px;
+}
+
+.navbar__item {
+    padding: 9px 16px;
+    cursor: pointer;
+    vertical-align: middle;
+}

package/layout/Navbar/Navbar.stories.js

@@ -0,0 +1,22 @@
+import { Navbar, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Navbar, styles)
+
+export default {
+  title: 'Layout/Navbar',
+  component: Navbar,
+  args: {
+    isPlayground: true,
+    children: `Farthings pulled strain? Half they'll greater land sordid Elessar. Glamdring um 17 13 motion? Creaked fate spawning chief lords loved loveliest ashes Elfs witness. Brook born Caradhras dining raining! Seeing-stones taking unlost working. A wizard is never late, Frodo Baggins. Nor is he early. He arrives precisely when he means to. Oakenshield despite distinct prosperous wields relight dark weighed leader reaches rid honor. Moments poison Sackville-Bagginses echoes dozens fend get. Scales exist apple Gundabad retaken bunch agreeable mantle cannot name's seasoning private.
+    Brave dry defeats? Remembered unleashed Denethor niceties legacy. Streets cares pretty Brandybucks ostler. Intact dispatch their expenses suffered flaming bacon should Fili? Jacksie begins hallway needed tracked Gondor's wonderful popularity. Seemed ears perfectly Oakenshield's pale fall animals stabs betrayed grumbling? Stuff awake Brandybuck large done. Curse you and all the halflings!
+    Dared sit torment goes Anárion forgiven west. Summon Bucklebury ship. Terms none Farthings. Tea choose Dwarvish! Leagues gracious carpet payment Brandywine senses very thousand! Don't you leave him, Samwise Gamgee. Firestorm raising Shire reaction mud morninged shines death should! It'll Halflings nab pot drove start. Carpet Lasgalen seen sleepies!
+    Seeing renown knocked battered contend World shepherd. Roof sautéed kingdom agree curtain lived preparing down material Galion appearance! Faramir one-fourteenth study talked amongst fisherman barren recoil responsible. There is one Dwarf yet in Moria who still draws breath. Boats wait exaggerate guessed Muil usurper suffice. Unspoken swears stands serpent depart Mithril. Ugly threat Dwarf possessions yours homage long-term unmade. Well-earned suffice tapestry tongue piled smoke lacerations talisman helps Dragon-Slayer crown? Blanket shan't dare appearances hours grave Muil.`,
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+}
+
+export const Default = Template.bind({})

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.css

@@ -0,0 +1,90 @@
+.is-home {
+  display: none;
+}
+
+#header {
+  position: absolute;
+  width: 220px;
+}
+
+#header .pro-sidebar {
+  height: 100vh;
+}
+
+#header .closemenu {
+  color: var(--color-primary);
+  position: absolute;
+  right: -7px;
+  z-index: 9999;
+  line-height: 20px;
+  border-radius: 50%;
+  font-weight: bold;
+  font-size: 22px;
+  top: 8px;
+  cursor: pointer;
+}
+
+#header .pro-sidebar {
+  width: 100%;
+  min-width: 100%;
+}
+
+#header .pro-sidebar.collapsed {
+  width: 80px;
+  min-width: 80px;
+}
+
+#header .pro-sidebar-inner {
+  background-color: var(--color-base-white);
+  box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.15);
+}
+
+#header .pro-sub-menu > .pro-inner-list-item {
+  position: relative;
+  background-color: var(--color-brand-hint-of-red);
+  padding-left: 44px;
+    padding-bottom: 4px;
+    padding-top: 4px;
+}
+
+#header .pro-sidebar-inner .pro-sidebar-layout::-webkit-scrollbar {
+  display: none;
+}
+
+#header .pro-sidebar-inner .pro-sidebar-layout .logotext  {
+  padding: 8px 20px;
+}
+
+#header .pro-sidebar-inner .pro-sidebar-layout ul {
+  padding: 0 5px;
+}
+
+#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item {
+  color: var(--color-font-highlight);
+  margin: 6px 0px;
+  /* font-weight: bold; */
+}
+
+#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper {
+  background-color: var(--color-brand-eastern-blue);
+  /* color: var(--color-font-highlight);
+  border-radius: 3px; */
+}
+
+#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper .pro-item-content {
+  color: var(--color-font-highlight);
+}
+
+#header .pro-sidebar-inner .pro-sidebar-layout .active {
+  background-image: linear-gradient(0deg, #fece00 0%, #ffe172 100%);
+}
+
+#header .logo {
+  padding: 20px;
+}
+
+@media only screen and (max-width: 720px) {
+  html {
+    overflow: hidden;
+  }
+}

package/layout/Sidebar/Sidebar.js

@@ -0,0 +1,312 @@
+import React, { ReactNode, useRef, useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import withStyles from '../../hocs/withStyles'
+
+import { subItems } from './constants'
+
+//import react pro sidebar components
+import {
+  ProSidebar,
+  Menu,
+  MenuItem,
+  SubMenu,
+  SidebarHeader,
+  SidebarFooter,
+  SidebarContent,
+} from "react-pro-sidebar"
+
+import styles from './Sidebar.module.css'
+//import sidebar css from react-pro-sidebar module and our custom css 
+import "react-pro-sidebar/dist/css/styles.css"
+
+import Picture from '../../atoms/Picture'
+import Icon from '../../atoms/Icon'
+import Divider from '../../atoms/Divider'
+
+export const Sidebar = ({ getStyles, options }) => {
+
+  //create initial menuCollapse state using useState hook
+  const [menuCollapse, setMenuCollapse] = useState(false)
+
+  //create a custom function that will change menucollapse state from false to true and true to false
+  const menuIconClick = () => {
+    //condition checking to change state from true to false and vice versa
+    menuCollapse ? setMenuCollapse(false) : setMenuCollapse(true);
+  };
+
+  return (
+    <>
+      <div id="header">
+        {/* collapsed props to change menu size using menucollapse state */}
+        <ProSidebar collapsed={menuCollapse}>
+          <SidebarHeader>
+            <div className="logotext">
+              {/* small and big change using menucollapse state */}
+              {/* <p>{menuCollapse ? "Logo" : "Big Logo"}</p> */}
+              {menuCollapse ? <Picture src="/static/logotipoS.svg" width={30}></Picture> : <Picture src="/static/logotipo.svg" width={120}></Picture>}
+            </div>
+            <div className="closemenu" onClick={menuIconClick}>
+              {/* changing menu collapse icon on click */}
+              {menuCollapse ? (
+
+                <Icon
+                  name="angleRight"
+                  onClick={function noRefCheck() { }}
+                />
+
+              ) : (
+                <Icon
+                  name="angleLeft"
+                  onClick={function noRefCheck() { }}
+                />
+              )}
+            </div>
+          </SidebarHeader>
+          <SidebarContent>
+            <Menu iconShape="circle">
+
+              {/* {options.forEach(itemMenu => {
+                console.log(itemMenu);  //This does ifre                       
+
+              })} */}
+
+              {options.isHome.view ?
+                <MenuItem
+                  title={'Home'}
+                  icon={(<Icon color="inverted" name="home" onClick={function noRefCheck() { }} size="md" />)}
+                  href={'/'}
+                >
+                  Home
+                </MenuItem>
+                : null
+              }
+
+              <Divider color="highlight" />
+
+              {options.isActivity.view ?
+                <SubMenu
+                  title={'Activity'}
+                  icon={(<Icon color="inverted" name="activity" onClick={function noRefCheck() { }} size="md" />)}
+                  onOpenChange={(open) => {
+
+                  }}
+
+                >
+                  {subItems.subItemsActivity.map((item) => (
+                    <MenuItem
+                      key={item.title}
+                      href={item.href}
+                      title={item.title}
+                    >
+                      {item.title}
+                    </MenuItem>
+                  ))}
+                </SubMenu>
+                : null
+              }
+
+              {options.isStaff.view ?
+                <SubMenu
+                  title={'Staff'}
+                  icon={(<Icon color="inverted" name="staff" onClick={function noRefCheck() { }} size="md" />)}
+                  onOpenChange={(open) => {
+
+                  }}
+                >
+                  {subItems.subItemsStaff.map((item) => (
+                    <MenuItem
+                      key={item.title}
+                      href={item.href}
+                      title={item.title}
+                    >
+                      {item.title}
+                    </MenuItem>
+                  ))}
+                </SubMenu>
+                : null
+              }
+
+              {options.isServices.view ?
+                <MenuItem
+                  title={'Services'}
+                  icon={(<Icon color="inverted" name="travelPrograms" onClick={function noRefCheck() { }} size="lg" />)}
+                  href={'/services'}
+                >
+                  Services
+                </MenuItem>
+                : null
+              }
+              {options.isBilling.view ?
+                <MenuItem
+                  title={'Billing'}
+                  icon={(<Icon color="inverted" name="billing" onClick={function noRefCheck() { }} size="md" />)}
+                  href={'/billing'}
+                >
+                  Billing
+                </MenuItem>
+                : null
+              }
+
+              {options.isSetting.view ?
+                <SubMenu
+                  title={'Setting'}
+                  icon={(<Icon color="inverted" name="setting" onClick={function noRefCheck() { }} size="md" />)}
+                >
+                  {subItems.subItemsSetting.map((item) => (
+                    <MenuItem
+                      key={item.title}
+                      href={item.href}
+                      title={item.title}
+                    >
+                      {item.title}
+                    </MenuItem>
+                  ))}
+                </SubMenu>
+                : null
+              }
+
+              <Divider color="highlight" />
+
+              {options.isOrderTaxi.view ?
+                <MenuItem
+                  title={'orderTaxi'}
+                  icon={(<Icon color="inverted" name="orderTaxi" onClick={function noRefCheck() { }} size="lg" />)}
+                  href={'/orderTaxi'}
+                >
+                  Order Taxi
+                </MenuItem>
+                : null
+              }
+
+              <Divider color="highlight" />
+
+              {options.isDashboards.view ?
+                <MenuItem
+                  title={'dashboards'}
+                  icon={(<Icon color="inverted" name="dashboardsUwa" onClick={function noRefCheck() { }} size="md" />)}
+                  href={'/dashboards'}
+                >
+                  Dashboards
+                </MenuItem>
+                : null
+              }
+
+              {options.isProjects.view ?
+                <MenuItem
+                  title={'projects'}
+                  icon={(<Icon color="inverted" name="projectsUwa" onClick={function noRefCheck() { }} size="md" />)}
+                  href={'/projects'}
+                >
+                  Projects
+                </MenuItem>
+                : null
+              }
+
+              {options.isPermissions.view ?
+                <SubMenu
+                  title={'Permissions'}
+                  icon={(<Icon color="inverted" name="permissions" onClick={function noRefCheck() { }} size="md" />)}
+                >
+                  {subItems.subItemsPermissions.map((item) => (
+                    <MenuItem
+                      key={item.title}
+                      href={item.href}
+                      title={item.title}
+                    >
+                      {item.title}
+                    </MenuItem>
+                  ))}
+                </SubMenu>
+                : null
+              }
+
+              {options.isAnalytics.view ?
+                <SubMenu
+                  title={'Analytics'}
+                  icon={(<Icon color="inverted" name="analytics" onClick={function noRefCheck() { }} size="md" />)}
+                >
+                  {subItems.subItemsAnalytics.map((item) => (
+                    <MenuItem
+                      key={item.title}
+                      href={item.href}
+                      title={item.title}
+                    >
+                      {item.title}
+                    </MenuItem>
+                  ))}
+                </SubMenu>
+                : null
+              }
+
+              <Divider color="highlight" />
+
+              {options.isLegal.view ?
+                <SubMenu
+                  title={'Legal'}
+                  icon={(<Icon color="inverted" name="legal" onClick={function noRefCheck() { }} size="md" />)}
+                >
+                  {subItems.subItemsLegal.map((item) => (
+                    <MenuItem
+                      key={item.title}
+                      href={item.href}
+                      title={item.title}
+                    >
+                      {item.title}
+                    </MenuItem>
+                  ))}
+                </SubMenu>
+                : null
+              }
+
+              {options.isUserGuide.view ?
+                <MenuItem
+                  title={'UserGuide'}
+                  icon={(<Icon color="inverted" name="info" onClick={function noRefCheck() { }} size="md" />)}
+                  href={'/userGuide'}
+                >
+                  User Guide
+                </MenuItem>
+                : null
+              }
+
+              <Divider color="highlight" />
+
+              {options.isMyProfile.view ?
+                <MenuItem
+                  title={'my-profile'}
+                  icon={(<Icon color="inverted" name="profile" onClick={function noRefCheck() { }} size="md" />)}
+                  href={'/my-profile'}
+                >
+                  My profile
+                </MenuItem>
+                : null
+              }
+
+            </Menu>
+          </SidebarContent>
+          <SidebarFooter>
+            <Menu iconShape="circle">
+              <MenuItem icon={(<Icon color="inverted" name="logout" onClick={function noRefCheck() { }} size="md" />)}>Logout</MenuItem>
+            </Menu>
+          </SidebarFooter>
+        </ProSidebar>
+      </div>
+    </>
+  )
+}
+
+Sidebar.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  // options: PropTypes.arrayOf(
+  //   PropTypes.shape({
+  //     text: PropTypes.string,
+  //     view: PropTypes.bool,
+  //   })
+  // ).isRequired,
+}
+
+Sidebar.defaultProps = {
+  getStyles: () => { },
+}
+
+export default withStyles(styles)(Sidebar)

package/layout/Sidebar/Sidebar.module.css

@@ -0,0 +1,7 @@
+.is-home {
+  display: none;
+}
+
+.divider {
+  height: auto;
+}

package/layout/Sidebar/Sidebar.stories.js

@@ -0,0 +1,83 @@
+import { Sidebar, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Sidebar, styles)
+
+export default {
+  title: 'Layout/Sidebar',
+  component: Sidebar,
+  args: {
+    options: {
+      isHome: {
+        text: "Home",
+        view: true
+      },
+      isActivity: {
+        text: "Activity",
+        view: true
+      },
+      isStaff: {
+        text: "Staff",
+        view: true
+      },
+      isServices: {
+        text: "Services",
+        view: true
+      },
+      isBilling: {
+        text: "Billing",
+        view: true
+      },
+      isSetting: {
+        text: "Setting",
+        view: true
+      },
+      isOrderTaxi: {
+        text: "Order Taxi",
+        view: true
+      },
+      isDashboards: {
+        text: "Dashboards",
+        view: true
+      },
+      isProjects: {
+        text: "Projects",
+        view: true
+      },
+      isPermissions: {
+        text: "Permissions",
+        view: true
+      },
+      isAnalytics: {
+        text: "Analytics",
+        view: true
+      },
+      isLegal: {
+        text: "Legal",
+        view: true
+      },
+      isUserGuide: {
+        text: "User Guide",
+        view: true
+      },
+      isMyProfile: {
+        text: "My profile",
+        view: true
+      },
+    },
+  },
+  argTypes: {
+    options: {
+      description: '**array of shaped objects:**',
+      table: {
+        type: {
+          summary: 'object',
+          detail: "{ text: 'string', view: 'bool'}",
+        },
+      },
+    },
+  },
+}
+
+export const Default = Template.bind({})

package/layout/Sidebar/constants.js

@@ -0,0 +1,85 @@
+export const subItems = {
+
+    subItemsActivity: [
+        {
+            href: '/activity/taxi',
+            title: 'Taxi',
+        },
+        {
+            href: '/activity/parking',
+            title: 'Parking',
+        },
+        {
+            href: '/activity/sharing',
+            title: 'Sharing',
+        },
+    ],
+
+    subItemsStaff: [
+        {
+            href: '/staff/taxi',
+            title: 'People Add',
+        },
+        {
+            href: '/staff/parking',
+            title: 'People View',
+        },
+        {
+            href: '/staff/sharing',
+            title: 'People Group',
+        },
+    ],
+
+    subItemsSetting: [
+        {
+            href: '/staff/taxi',
+            title: 'People Add',
+        },
+        {
+            href: '/staff/parking',
+            title: 'People View',
+        },
+        {
+            href: '/staff/sharing',
+            title: 'People Group',
+        },
+    ],
+
+    subItemsPermissions: [
+        {
+            href: '/permissions/managestaff',
+            title: 'Permissions',
+        },
+    ],
+
+    subItemsAnalytics: [
+        {
+            href: '/analytics/dashboard',
+            title: 'Dashboard',
+        },
+        {
+            href: '/analytics/taxi',
+            title: 'Taxi',
+        },
+        {
+            href: '/analytics/tollsparking',
+            title: 'Parking',
+        },
+    ],
+
+    subItemsLegal: [
+        {
+            href: 'https://www.imbric.com/privacypolicy/',
+            title: 'Privacy policy',
+        },
+        {
+            href: 'https://www.imbric.com/general-terms/',
+            title: 'General terms',
+        },
+        {
+            href: 'https://www.imbric.com/particular-terms/',
+            title: 'Particular terms',
+        },
+    ],
+
+}

package/layout/Sidebar/index.js

@@ -0,0 +1,4 @@
+export { default, Sidebar } from './Sidebar'
+export { subItems } from './constants'
+export { default as styles } from './Sidebar.module.css'
+export { default as SidebarCss } from './Sidebar.css'