imbric-theme 0.2.2 → 0.2.5

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'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.2.2",
+  "version": "0.2.5",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",
@@ -13,7 +13,7 @@
     "yarn": ">=1.22.17"
   },
   "scripts": {
-    "build:storybook": "build-storybook --no-dll",
+    "build:storybook": "build-storybook",
     "build:tokens": "node ./scripts/build-tokens",
     "build": "run-s build:tokens build:storybook",
     "build:docs": "yarn build:tokens && yarn build:storybook --docs --no-manager-cache",
@@ -50,7 +50,9 @@
   "author": "imbric",
   "license": "MIT",
   "dependencies": {
-    "classnames": "2.3.1"
+    "classnames": "2.3.1",
+    "react-icons": "4.3.1",
+    "react-pro-sidebar": "0.7.1"
   },
   "devDependencies": {
     "@babel/core": "7.11.6",
@@ -64,8 +66,6 @@
     "@storybook/addon-essentials": "6.4.21",
     "@storybook/addon-links": "6.4.21",
     "@storybook/addon-storyshots": "6.4.21",
-    "@storybook/builder-webpack5": "6.5.0-alpha.61",
-    "@storybook/manager-webpack5": "6.5.0-alpha.61",
     "@storybook/react": "6.4.21",
     "@svgr/webpack": "5.5.0",
     "@testing-library/react": "12.0.0",

package/public/static/logo.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="52px" viewBox="0 0 52 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>MKP</title>
+  <defs>
+    <filter id="filter">
+      <feColorMatrix type="matrix" values="0 0 0 0 0.262745 0 0 0 0 0.329412 0 0 0 0 0.866667 0 0 0 1.000000 0" />
+    </filter>
+  </defs>
+  <g fill="none" stroke="none">
+    <g filter="url(#filter)">
+      <g>
+        <rect x="0" y="4.26325641e-14" width="52" height="52" />
+        <path d="M23.2968,26.3643 L11.87,19.9731 C11.606,19.8255 11.3864,19.6106 11.2335,19.3506 C11.0806,19.0905 11,18.7947 11,18.4934 C11,18.1921 11.0806,17.8963 11.2335,17.6362 C11.3864,17.3762 11.606,17.1613 11.87,17.0137 L23.2967,10.6222 C24.026,10.2143 24.8484,10 25.6849,10 C26.5215,10 27.3439,10.2143 28.0731,10.6222 L39.4999,17.0137 C39.7638,17.1613 39.9835,17.3762 40.1364,17.6362 C40.2893,17.8963 40.3699,18.1921 40.3699,18.4934 C40.3699,18.7947 40.2893,19.0905 40.1364,19.3506 C39.9835,19.6106 39.7638,19.8255 39.4999,19.9731 L28.0731,26.3643 C27.3439,26.7722 26.5215,26.9864 25.6849,26.9864 C24.8484,26.9864 24.026,26.7722 23.2968,26.3643 Z" id="Path" fill="#2196F3" fill-rule="nonzero" transform="translate(25.684950, 18.493200) rotate(180.000000) translate(-25.684950, -18.493200)" />
+        <path d="M23.2349,37.8879 L6.87,28.7347 C6.6061,28.5871 6.3864,28.3722 6.2335,28.1122 C6.0806,27.8521 6,27.5563 6,27.255 C6,26.9537 6.0806,26.6578 6.2335,26.3978 C6.3864,26.1377 6.6061,25.9229 6.87,25.7752 L23.2349,16.6221 C23.9641,16.2143 24.7865,16 25.623,16 C26.4595,16 27.2819,16.2143 28.0111,16.6221 L44.376,25.7752 C44.6399,25.9229 44.8596,26.1377 45.0125,26.3978 C45.1654,26.6578 45.246,26.9537 45.246,27.255 C45.246,27.5563 45.1654,27.8521 45.0125,28.1122 C44.8596,28.3722 44.6399,28.5871 44.376,28.7347 L28.0111,37.8879 C27.2819,38.2957 26.4595,38.5099 25.623,38.5099 C24.7865,38.5099 23.9641,38.2957 23.2349,37.8879 Z" id="Path" fill="#2196F3" fill-rule="nonzero" opacity="0.7" transform="translate(25.623000, 27.254950) rotate(180.000000) translate(-25.623000, -27.254950)" />
+        <path d="M23.6157447,51.02171 L0.86859567,38.2985735 C0.605087772,38.1511153 0.385747448,37.9366669 0.233097764,37.6769927 C0.0804480806,37.4174184 0,37.1220028 0,36.8211961 C0,36.5203894 0.0804480806,36.2250736 0.233097764,35.9653994 C0.385747448,35.7058251 0.605087772,35.4912769 0.86859567,35.3439185 L23.6158446,22.6210616 C24.3438508,22.2138793 25.1649044,22 26.0000349,22 C26.8351655,22 27.6562191,22.2138793 28.3842253,22.6210616 L51.1314243,35.3439185 C51.3948923,35.4912769 51.6142326,35.7058251 51.7668823,35.9653994 C51.919532,36.2250736 52,36.5203894 52,36.8211961 C52,37.1220028 51.919532,37.4174184 51.7668823,37.6769927 C51.6142326,37.9366669 51.3948923,38.1511153 51.1314243,38.2985735 L28.3842253,51.02171 C27.6562191,51.4288424 26.8351655,51.6427915 26.0000349,51.6427915 C25.1649044,51.6427915 24.3438508,51.4288424 23.6157447,51.02171 Z" id="Path" fill="#2196F3" fill-rule="nonzero" opacity="0.4" transform="translate(26.000000, 36.821396) rotate(180.000000) translate(-26.000000, -36.821396)" />
+      </g>
+    </g>
+  </g>
+</svg>

package/public/static/logotipo.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="24px" viewBox="0 0 100 24" enable-background="new 0 0 100 24" xml:space="preserve">  <image id="image0" width="100" height="24" x="0" y="0"
+    href="data:image/png;base64,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
+OjAwHfuD4AAAAABJRU5ErkJggg==" />
+</svg>

package/public/static/logotipoS.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="23px" height="30px" viewBox="0 0 23 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Glyph@3x</title>
+    <defs>
+        <linearGradient x1="0%" y1="49.9999577%" x2="100.000156%" y2="49.9999577%" id="linearGradient-1">
+            <stop stop-color="#ED495E" offset="0%"></stop>
+            <stop stop-color="#39B54A" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50.0005174%" y1="0.000272104363%" x2="50.0004898%" y2="100.000124%" id="linearGradient-2">
+            <stop stop-color="#39B54A" offset="0%"></stop>
+            <stop stop-color="#00A3FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(-124.000000, -79.000000)">
+            <g id="Group-7" transform="translate(124.000000, 79.000000)">
+                <g id="Group-3" transform="translate(0.000000, 7.478261)" fill="url(#linearGradient-1)">
+                    <path d="M8.14890423,0.0165987074 C3.64845652,0.0165987074 0,3.66505523 0,8.16610928 L0,8.16610928 L0,22.4347826 L4.74882197,22.4347826 L4.74882197,8.16610928 C4.74882197,6.08793596 6.43938895,4.39676263 8.51756228,4.39676263 L8.51756228,4.39676263 L22.4175018,4.39676263 L22.4175018,0.0165987074 L8.14890423,0.0165987074 Z" id="Fill-1"></path>
+                </g>
+                <g id="Group-6" transform="translate(17.652174, 0.000000)" fill="url(#linearGradient-2)">
+                    <path d="M0.00888198758,5.41666667 L4.76530021,5.41666667 L4.76530021,0.0170454545 L0.00888198758,0.0170454545 L0.00888198758,5.41666667 Z M0.00888198758,29.9242424 L4.76530021,29.9242424 L4.76530021,13.9958333 L0.00888198758,13.9958333 L0.00888198758,29.9242424 Z" id="Fill-4"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>