imbric-theme 0.3.2 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/layout/Sidebar/Sidebar.js +6 -3
  2. package/layout/Sidebar/Sidebar.module.css +0 -10
  3. package/layout/Sidebar/Sidebar.stories.js +1 -1
  4. package/layout/Sidebar/constants.js +228 -205
  5. package/molecules/ItemMenu/ItemMenu.js +35 -24
  6. package/molecules/ItemMenu/ItemMenu.module.css +13 -4
  7. package/molecules/ItemMenu/ItemMenu.stories.js +2 -0
  8. package/molecules/ItemMenu/constants.js +3 -0
  9. package/package.json +4 -2
package/layout/Sidebar/Sidebar.js CHANGED
@@ -2,7 +2,7 @@ import React, { ReactNode, useRef, useState, useEffect } from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import withStyles from '../../hocs/withStyles'
4
4
 
5
- import { options } from './constants'
5
+ // import { options } from './constants'
6
6
 
7
7
  import styles from './Sidebar.module.css'
8
8
 
@@ -11,7 +11,7 @@ import Icon from '../../atoms/Icon'
11
11
  import Divider from '../../atoms/Divider'
12
12
  import ItemMenu from '../../molecules/ItemMenu/ItemMenu'
13
13
 
14
- export const Sidebar = ({ getStyles, menuCollapseView }) => {
14
+ export const Sidebar = ({ getStyles, menuCollapseView, options }) => {
15
15
 
16
16
 
17
17
  return (
@@ -57,16 +57,19 @@ export const Sidebar = ({ getStyles, menuCollapseView }) => {
57
57
 
58
58
  <ul>
59
59
 
60
- {options.itemsMenu.map((item, index) => (
60
+ {options.map((item, index) => (
61
61
  item.view ?
62
62
  <ItemMenu
63
63
  key={index}
64
64
  icon={item.icon}
65
65
  subMenu={item.viewSubMenu}
66
66
  itemSubmenu={item.submenu}
67
+ itemHref={item.href}
68
+ itemActive={item.active}
67
69
  >
68
70
  {item.text}
69
71
  </ItemMenu>
72
+
70
73
  : null
71
74
 
72
75
  ))}
package/layout/Sidebar/Sidebar.module.css CHANGED
@@ -177,16 +177,6 @@
177
177
  color: #adadad;
178
178
  }
179
179
 
180
- .pro-menu a:before {
181
- content: '';
182
- position: absolute;
183
- top: 0;
184
- right: 0;
185
- bottom: 0;
186
- left: 0;
187
- background-color: transparent;
188
- }
189
-
190
180
  .pro-menu a:hover {
191
181
  color: #d8d8d8;
192
182
  }
package/layout/Sidebar/Sidebar.stories.js CHANGED
@@ -9,7 +9,7 @@ export default {
9
9
  title: 'Layout/Sidebar',
10
10
  component: Sidebar,
11
11
  args: {
12
- options: options.itemsMenu,
12
+ options: options,
13
13
  menuCollapseView: false,
14
14
  },
15
15
  argTypes: {
package/layout/Sidebar/constants.js CHANGED
@@ -1,205 +1,228 @@
1
- export const options = {
2
- itemsMenu: [
3
- {
4
- text: "Home",
5
- icon: "home",
6
- href: "/home",
7
- view: true,
8
- viewSubMenu: false,
9
- },
10
- {
11
- text: "Activity",
12
- icon: "activity",
13
- href: "/home",
14
- view: true,
15
- viewSubMenu: true,
16
- submenu: [
17
- {
18
- text: "Taxi",
19
- href: "/taxi",
20
- view: true,
21
- },
22
- {
23
- text: "Parking",
24
- href: "/parking",
25
- view: true,
26
- },
27
- {
28
- text: "Sharing",
29
- href: "/sharing",
30
- view: true,
31
- },
32
- {
33
- text: "Public transport",
34
- href: "/publictransport ",
35
- view: true,
36
- },
37
- {
38
- text: "Kilometer sheet",
39
- href: "/kilometersheet",
40
- view: true,
41
- }
42
- ],
43
- },
44
- {
45
- text: "Staff",
46
- icon: "staff",
47
- href: "/home",
48
- view: true,
49
- viewSubMenu: true,
50
- submenu: [
51
- {
52
- text: "People Add",
53
- href: "/staff/taxi",
54
- view: true,
55
- },
56
- {
57
- text: "People View",
58
- href: "/staff/taxi",
59
- view: true,
60
- },
61
- {
62
- text: "People Group",
63
- href: "/staff/taxi",
64
- view: true,
65
- },
66
-
67
- ],
68
- },
69
- {
70
- text: "Services",
71
- icon: "travelPrograms",
72
- href: "/home",
73
- view: true,
74
- viewSubMenu: false,
75
- },
76
- {
77
- text: "Billing",
78
- icon: "billing",
79
- href: "/home",
80
- view: true,
81
- viewSubMenu: false,
82
- },
83
- {
84
- text: "Setting",
85
- icon: "setting",
86
- href: "/home",
87
- view: true,
88
- viewSubMenu: true,
89
- submenu: [
90
- {
91
- text: "Company",
92
- href: "/company/edit",
93
- view: true,
94
- },
95
- {
96
- text: "Wallet",
97
- href: "/company/wallet",
98
- view: true,
99
- },
100
-
101
- ],
102
-
103
- },
104
- {
105
- text: "Order Taxi",
106
- icon: "orderTaxi",
107
- href: "/home",
108
- view: true,
109
- viewSubMenu: false,
110
- },
111
- {
112
- text: "Dashboards",
113
- icon: "dashboardsUwa",
114
- href: "/home",
115
- view: true,
116
- viewSubMenu: false,
117
- },
118
- {
119
- text: "Projects",
120
- icon: "projectsUwa",
121
- href: "/home",
122
- view: true,
123
- viewSubMenu: false,
124
- },
125
- {
126
- text: "Permissions",
127
- icon: "permissions",
128
- href: "/home",
129
- view: true,
130
- viewSubMenu: true,
131
- submenu: [
132
- {
133
- text: "Permissions",
134
- href: "/permissions/managestaff",
135
- view: true,
136
- },
137
-
138
- ],
139
- },
140
- {
141
- text: "Analytics",
142
- icon: "analytics",
143
- href: "/home",
144
- view: true,
145
- viewSubMenu: true,
146
- submenu: [
147
- {
148
- text: "Dashboard",
149
- href: "/analytics/dashboard",
150
- view: true,
151
- },
152
- {
153
- text: "Taxi",
154
- href: "/analytics/taxi",
155
- view: true,
156
- },
157
- {
158
- text: "Parking",
159
- href: "/analytics/tollsparking",
160
- view: true,
161
- },
162
- ],
163
- },
164
- {
165
- text: "Legal",
166
- icon: "legal",
167
- href: "/home",
168
- view: true,
169
- viewSubMenu: true,
170
- submenu: [
171
- {
172
- text: "Privacy policy",
173
- href: "/legal/dashboard",
174
- view: true,
175
- },
176
- {
177
- text: "General terms",
178
- href: "/legal/taxi",
179
- view: true,
180
- },
181
- {
182
- text: "Particular terms",
183
- href: "/legal/tollsparking",
184
- view: true,
185
- },
186
- ],
187
-
188
- },
189
- {
190
- text: "User Guide",
191
- icon: "info",
192
- href: "/home",
193
- view: true,
194
- viewSubMenu: false,
195
- },
196
- {
197
- text: "My profile",
198
- icon: "profile",
199
- href: "/home",
200
- view: true,
201
- viewSubMenu: false,
202
- },
203
- ],
204
-
205
- }
1
+ export const options = [
2
+ {
3
+ active: false,
4
+ href: '/',
5
+ icon: 'home',
6
+ text: 'Home',
7
+ view: true,
8
+ viewSubMenu: false,
9
+ },
10
+ {
11
+ active: false,
12
+ href: '/activity/activity-taxi',
13
+ icon: 'activity',
14
+ submenu: [
15
+ {
16
+ active: false,
17
+ href: '/activity/activity-taxi',
18
+ text: 'Taxi',
19
+ view: true,
20
+ },
21
+ {
22
+ active: false,
23
+ href: '/activity/activity-parking',
24
+ text: 'Parking',
25
+ view: true,
26
+ },
27
+ {
28
+ active: false,
29
+ href: '/activity/activity-sharing',
30
+ text: 'Sharing',
31
+ view: true,
32
+ },
33
+ {
34
+ active: false,
35
+ href: '/activity/activity-public-transport',
36
+ text: 'Public transport',
37
+ view: true,
38
+ },
39
+ {
40
+ active: false,
41
+ href: '/activity/activity-kilometer-sheet',
42
+ text: 'Kilometer sheet',
43
+ view: true,
44
+ },
45
+ ],
46
+ text: 'Activity',
47
+ view: true,
48
+ viewSubMenu: true,
49
+ },
50
+ {
51
+ active: false,
52
+ href: '/staff/staff-add',
53
+ icon: 'staff',
54
+ submenu: [
55
+ {
56
+ active: false,
57
+ href: '/staff/staff-add',
58
+ text: 'Staff Add',
59
+ view: true,
60
+ },
61
+ {
62
+ active: false,
63
+ href: '/staff/staff-view',
64
+ text: 'Staff View',
65
+ view: true,
66
+ },
67
+ {
68
+ active: false,
69
+ href: '/staff/staff-group',
70
+ text: 'Staff Group',
71
+ view: true,
72
+ },
73
+ ],
74
+ text: 'Staff',
75
+ view: true,
76
+ viewSubMenu: true,
77
+ },
78
+ {
79
+ active: false,
80
+ href: '/services',
81
+ icon: 'travelPrograms',
82
+ text: 'Services',
83
+ view: true,
84
+ viewSubMenu: false,
85
+ },
86
+ {
87
+ active: false,
88
+ href: '/billing',
89
+ icon: 'billing',
90
+ text: 'Billing',
91
+ view: true,
92
+ viewSubMenu: false,
93
+ },
94
+ {
95
+ active: false,
96
+ href: '/setting/setting-company',
97
+ icon: 'setting',
98
+ submenu: [
99
+ {
100
+ active: false,
101
+ href: '/setting/setting-company',
102
+ text: 'Company',
103
+ view: true,
104
+ },
105
+ {
106
+ active: false,
107
+ href: '/setting/setting-wallet',
108
+ text: 'Wallet',
109
+ view: true,
110
+ },
111
+ ],
112
+ text: 'Setting',
113
+ view: true,
114
+ viewSubMenu: true,
115
+ },
116
+ {
117
+ active: false,
118
+ href: '/order-taxi',
119
+ icon: 'orderTaxi',
120
+ text: 'Order Taxi',
121
+ view: true,
122
+ viewSubMenu: false,
123
+ },
124
+ {
125
+ active: false,
126
+ href: '/dashboards',
127
+ icon: 'dashboardsUwa',
128
+ text: 'Dashboards',
129
+ view: true,
130
+ viewSubMenu: false,
131
+ },
132
+ {
133
+ active: false,
134
+ href: '/projects',
135
+ icon: 'projectsUwa',
136
+ text: 'Projects',
137
+ view: true,
138
+ viewSubMenu: false,
139
+ },
140
+ {
141
+ active: false,
142
+ href: '/permissions/permissions-manage-staff',
143
+ icon: 'permissions',
144
+ submenu: [
145
+ {
146
+ active: false,
147
+ href: '/permissions/permissions-manage-staff',
148
+ text: 'Permissions',
149
+ view: true,
150
+ },
151
+ ],
152
+ text: 'Permissions',
153
+ view: true,
154
+ viewSubMenu: true,
155
+ },
156
+ {
157
+ active: false,
158
+ href: '#',
159
+ icon: 'analytics',
160
+ submenu: [
161
+ {
162
+ active: false,
163
+ href: '/analytics/analytics-dashboard',
164
+ text: 'Dashboard',
165
+ view: true,
166
+ },
167
+ {
168
+ active: false,
169
+ href: '/analytics/analytics-taxi',
170
+ text: 'Taxi',
171
+ view: true,
172
+ },
173
+ {
174
+ active: false,
175
+ href: '/analytics/analytics-tollsparking',
176
+ text: 'Parking',
177
+ view: true,
178
+ },
179
+ ],
180
+ text: 'Analytics',
181
+ view: true,
182
+ viewSubMenu: true,
183
+ },
184
+ {
185
+ active: false,
186
+ href: '#',
187
+ icon: 'legal',
188
+ submenu: [
189
+ {
190
+ active: false,
191
+ href: '/legal/dashboard',
192
+ text: 'Privacy policy',
193
+ view: true,
194
+ },
195
+ {
196
+ active: false,
197
+ href: '/legal/taxi',
198
+ text: 'General terms',
199
+ view: true,
200
+ },
201
+ {
202
+ active: false,
203
+ href: '/legal/tollsparking',
204
+ text: 'Particular terms',
205
+ view: true,
206
+ },
207
+ ],
208
+ text: 'Legal',
209
+ view: true,
210
+ viewSubMenu: true,
211
+ },
212
+ {
213
+ active: false,
214
+ href: '/home',
215
+ icon: 'info',
216
+ text: 'User Guide',
217
+ view: true,
218
+ viewSubMenu: false,
219
+ },
220
+ {
221
+ active: false,
222
+ href: '/home',
223
+ icon: 'profile',
224
+ text: 'My profile',
225
+ view: true,
226
+ viewSubMenu: false,
227
+ },
228
+ ]
package/molecules/ItemMenu/ItemMenu.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { useState } from 'react'
2
2
  import PropTypes from 'prop-types'
3
+ import Link from 'next/link'
3
4
 
4
5
  import styles from './ItemMenu.module.css'
5
6
  import { options } from './constants'
@@ -7,7 +8,7 @@ import withStyles from '../../hocs/withStyles'
7
8
 
8
9
  import Icon from '../../atoms/Icon'
9
10
 
10
- export const ItemMenu = ({ children, getStyles, size, icon, color, background, subMenu, itemSubmenu }) => {
11
+ export const ItemMenu = ({ children, getStyles, size, icon, color, background, subMenu, itemSubmenu, itemHref, itemActive }) => {
11
12
 
12
13
  //create initial menuCollapse state using useState hook
13
14
  const [subMenuCollapse, setSubMenuCollapse] = useState(false)
@@ -22,45 +23,50 @@ export const ItemMenu = ({ children, getStyles, size, icon, color, background, s
22
23
  if (!subMenu) {
23
24
  return (
24
25
  <>
25
- <li className={getStyles('pro-menu-item')}>
26
+ <Link href={itemHref} passHref>
27
+ <li className={getStyles('pro-menu-item', { 'active': itemActive })}>
26
28
 
27
- <div className={getStyles('pro-inner-item')}>
29
+ <div className={getStyles('pro-inner-item')}>
28
30
 
29
- <span className={getStyles('pro-icon-wrapper')}>
31
+ <span className={getStyles('pro-icon-wrapper')}>
30
32
 
31
- <span className={getStyles('pro-icon')}>
32
- <Icon
33
- size={size}
34
- name={icon}
35
- color={color}
36
- background={background}
37
- onClick={function noRefCheck() { }}
38
- />
39
- </span>
33
+ <span className={getStyles('pro-icon')}>
40
34
 
41
- </span>
35
+ <Icon
36
+ size={size}
37
+ name={icon}
38
+ color={ itemActive ? 'primary' : color}
39
+ background={background}
40
+ onClick={function noRefCheck() { }}
41
+ />
42
42
 
43
- <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
43
+ </span>
44
44
 
45
- </div>
45
+ </span>
46
46
 
47
- </li>
47
+ <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
48
+
49
+ </div>
50
+
51
+ </li>
52
+ </Link>
48
53
  </>
49
54
  )
50
55
  } else {
51
56
  return (
52
57
  <>
53
- <li className={getStyles('pro-menu-item', 'pro-sub-menu', { 'open': subMenuCollapse })} title="Home" href="/">
58
+ <li className={getStyles('pro-menu-item', 'pro-sub-menu', { 'open': subMenuCollapse }, { 'activesubtxt': itemActive })} title="Home" href="/">
54
59
 
55
60
  <div className={getStyles('pro-inner-item')} onClick={subMenuIconClick}>
56
61
 
57
62
  <span className={getStyles('pro-icon-wrapper')}>
58
63
 
59
64
  <span className={getStyles('pro-icon')}>
65
+
60
66
  <Icon
61
67
  size={size}
62
68
  name={icon}
63
- color={color}
69
+ color={ itemActive ? 'primary' : color}
64
70
  background={background}
65
71
  onClick={function noRefCheck() { }}
66
72
  />
@@ -68,7 +74,7 @@ export const ItemMenu = ({ children, getStyles, size, icon, color, background, s
68
74
 
69
75
  </span>
70
76
 
71
- <span className={getStyles('pro-item-content', { 'color': color })}>{children}</span>
77
+ <span className={getStyles('pro-item-content', 'title', { 'color': color })}>{children}</span>
72
78
 
73
79
  <span className={getStyles('pro-arrow-wrapper')}>
74
80
  <span className={getStyles('pro-arrow')}></span>
@@ -81,10 +87,12 @@ export const ItemMenu = ({ children, getStyles, size, icon, color, background, s
81
87
  <ul>
82
88
 
83
89
  {itemSubmenu.map((item, index) => (
84
- <li key={index} className={getStyles('pro-menu-item')} href={item.href}>
85
- <div className={getStyles('pro-inner-item')} role="button">
86
- <span className={getStyles('pro-item-content')}>{item.text}</span></div>
87
- </li>
90
+ <Link key={index} href={item.href} passHref>
91
+ <li className={getStyles('pro-menu-item', { 'activesub': item.active })}>
92
+ <div className={getStyles('pro-inner-item')} role="button">
93
+ <span className={getStyles('pro-item-content')}>{item.text}</span></div>
94
+ </li>
95
+ </Link>
88
96
  ))}
89
97
  </ul>
90
98
  </div>
@@ -102,6 +110,7 @@ ItemMenu.propTypes = {
102
110
  children: PropTypes.node.isRequired,
103
111
  getStyles: PropTypes.func.isRequired,
104
112
  subMenu: PropTypes.bool.isRequired,
113
+ itemActive: PropTypes.bool,
105
114
  icon: PropTypes.oneOf(options.icons),
106
115
  size: PropTypes.oneOf(options.sizes),
107
116
  color: PropTypes.oneOf(options.colors),
@@ -110,10 +119,12 @@ ItemMenu.propTypes = {
110
119
 
111
120
  ItemMenu.defaultProps = {
112
121
  subMenu: false,
122
+ itemActive: false,
113
123
  icon: 'home',
114
124
  size: 'lg',
115
125
  color: 'highlight',
116
126
  background: 'transparent',
127
+ itemHref: '/',
117
128
  getStyles: () => { },
118
129
  }
119
130
 
package/molecules/ItemMenu/ItemMenu.module.css CHANGED
@@ -89,14 +89,23 @@
89
89
  color: var(--color-primary);
90
90
  }
91
91
 
92
-
93
92
  /* ////////////////////// */
94
93
 
94
+ .pro-menu-item.active .pro-item-content {
95
+ color: var(--color-primary);
96
+ }
95
97
 
96
- .pro-menu-item.active {
97
- color: #d8d8d8;
98
+ .pro-sub-menu .pro-menu-item.activesub .pro-item-content {
99
+ color: var(--color-primary);
98
100
  }
99
101
 
102
+ .pro-menu-item.pro-sub-menu.activesubtxt .pro-inner-item .pro-item-content.title {
103
+ color: var(--color-primary);
104
+ /* font-size: 32px; */
105
+ }
106
+
107
+ /* ////////////////////// */
108
+
100
109
  .pro-menu-item .suffix-wrapper {
101
110
  opacity: 1;
102
111
  transition: opacity 0.2s;
@@ -190,7 +199,7 @@
190
199
  }
191
200
 
192
201
  .pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item {
193
- padding: 14px 30px 14px 15px;
202
+ padding: 10px 30px 10px 15px;
194
203
  margin: 0;
195
204
  }
196
205
 
package/molecules/ItemMenu/ItemMenu.stories.js CHANGED
@@ -16,6 +16,8 @@ export default {
16
16
  children: 'Home',
17
17
  subMenu: false,
18
18
  itemSubmenu: options.itemSubmenu,
19
+ itemActive: false,
20
+ itemHref: '/'
19
21
  },
20
22
  argTypes: {
21
23
  itemSubmenu: {
package/molecules/ItemMenu/constants.js CHANGED
@@ -18,16 +18,19 @@ export const options = {
18
18
  text: "Taxi",
19
19
  href: "/taxi",
20
20
  view: true,
21
+ active: false,
21
22
  },
22
23
  {
23
24
  text: "Parking",
24
25
  href: "/parking",
25
26
  view: true,
27
+ active: false,
26
28
  },
27
29
  {
28
30
  text: "Sharing",
29
31
  href: "/sharing",
30
32
  view: true,
33
+ active: false,
31
34
  },
32
35
  ],
33
36
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "imbric-theme",
3
- "version": "0.3.2",
3
+ "version": "0.3.3",
4
4
  "description": "Components library IMBRIC",
5
5
  "private": false,
6
6
  "main": "index.js",
@@ -51,9 +51,11 @@
51
51
  "license": "MIT",
52
52
  "dependencies": {
53
53
  "classnames": "2.3.1",
54
+ "formik": "2.2.9",
54
55
  "react-icons": "4.3.1",
55
56
  "react-router": "6.3.0",
56
- "react-router-dom": "6.3.0"
57
+ "react-router-dom": "6.3.0",
58
+ "yup": "0.32.11"
57
59
  },
58
60
  "devDependencies": {
59
61
  "@babel/core": "7.11.6",