@sikka/hawa 0.0.52 → 0.0.54

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 (34) hide show
  1. package/es/index.es.js +1 -1
  2. package/lib/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/elements/DragDropImages.js +34 -28
  5. package/src/elements/HawaAccordian.js +0 -16
  6. package/src/elements/HawaColorPicker.js +3 -4
  7. package/src/elements/HawaPhoneInput.js +2 -6
  8. package/src/elements/HawaPopMenu.js +82 -38
  9. package/src/elements/HawaRange.js +28 -12
  10. package/src/elements/HawaSearchBar.js +5 -7
  11. package/src/elements/HawaTypography.js +1 -2
  12. package/src/elements/PinInput.js +14 -22
  13. package/src/elements/RadioBox.js +27 -27
  14. package/src/elements/SelectedField.js +43 -43
  15. package/src/elements/TabPanel.js +13 -16
  16. package/src/layout/HawaAppLayout.js +238 -238
  17. package/src/layout/HawaAppLayout2.js +239 -239
  18. package/src/layout/index.js +1 -1
  19. package/storybook-static/{1.1afe453d.iframe.bundle.js → 1.c5cb37d9.iframe.bundle.js} +0 -0
  20. package/storybook-static/{2.e7f8eecc.iframe.bundle.js → 2.c8f6dc2b.iframe.bundle.js} +0 -0
  21. package/storybook-static/{6.b22bfe7f.iframe.bundle.js → 6.98a925e3.iframe.bundle.js} +3 -3
  22. package/storybook-static/{6.b22bfe7f.iframe.bundle.js.LICENSE.txt → 6.98a925e3.iframe.bundle.js.LICENSE.txt} +0 -0
  23. package/storybook-static/6.98a925e3.iframe.bundle.js.map +1 -0
  24. package/storybook-static/iframe.html +1 -1
  25. package/storybook-static/main.e8596a39.iframe.bundle.js +1 -0
  26. package/storybook-static/project.json +1 -1
  27. package/storybook-static/{runtime~main.0e8a2888.iframe.bundle.js → runtime~main.e7e3ab5b.iframe.bundle.js} +1 -1
  28. package/storybook-static/vendors~main.f32ea22a.iframe.bundle.js +76 -0
  29. package/storybook-static/{vendors~main.db6a4c38.iframe.bundle.js.LICENSE.txt → vendors~main.f32ea22a.iframe.bundle.js.LICENSE.txt} +0 -10
  30. package/storybook-static/vendors~main.f32ea22a.iframe.bundle.js.map +1 -0
  31. package/storybook-static/6.b22bfe7f.iframe.bundle.js.map +0 -1
  32. package/storybook-static/main.c2f37ee9.iframe.bundle.js +0 -1
  33. package/storybook-static/vendors~main.db6a4c38.iframe.bundle.js +0 -76
  34. package/storybook-static/vendors~main.db6a4c38.iframe.bundle.js.map +0 -1
package/src/layout/HawaAppLayout2.js CHANGED
@@ -1,254 +1,254 @@
1
- import React, { useEffect } from "react";
2
- import { styled, useTheme } from "@mui/material/styles";
3
- import Box from "@mui/material/Box";
4
- import MuiDrawer from "@mui/material/Drawer";
5
- import MuiAppBar from "@mui/material/AppBar";
6
- import Toolbar from "@mui/material/Toolbar";
7
- import List from "@mui/material/List";
8
- import Typography from "@mui/material/Typography";
9
- // import Divider from "@mui/material/Divider";
10
- import IconButton from "@mui/material/IconButton";
11
- import MenuIcon from "@mui/icons-material/Menu";
12
- import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
13
- import ChevronRightIcon from "@mui/icons-material/ChevronRight";
14
- import ListItemButton from "@mui/material/ListItemButton";
15
- import ListItemText from "@mui/material/ListItemText";
16
- import Avatar from "@mui/material/Avatar";
17
- import { HawaPopMenu } from "../elements/HawaPopMenu";
1
+ // import React, { useEffect } from "react";
2
+ // import { styled, useTheme } from "@mui/material/styles";
3
+ // import Box from "@mui/material/Box";
4
+ // import MuiDrawer from "@mui/material/Drawer";
5
+ // import MuiAppBar from "@mui/material/AppBar";
6
+ // import Toolbar from "@mui/material/Toolbar";
7
+ // import List from "@mui/material/List";
8
+ // import Typography from "@mui/material/Typography";
9
+ // // import Divider from "@mui/material/Divider";
10
+ // import IconButton from "@mui/material/IconButton";
11
+ // import MenuIcon from "@mui/icons-material/Menu";
12
+ // import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
13
+ // import ChevronRightIcon from "@mui/icons-material/ChevronRight";
14
+ // import ListItemButton from "@mui/material/ListItemButton";
15
+ // import ListItemText from "@mui/material/ListItemText";
16
+ // import Avatar from "@mui/material/Avatar";
17
+ // import { HawaPopMenu } from "../elements/HawaPopMenu";
18
18
 
19
- const drawerWidth = 200;
19
+ // const drawerWidth = 200;
20
20
 
21
- const openedMixin = (theme) => ({
22
- width: drawerWidth,
23
- transition: theme.transitions.create("width", {
24
- easing: theme.transitions.easing.sharp,
25
- duration: theme.transitions.duration.enteringScreen
26
- }),
27
- overflowX: "hidden"
28
- });
21
+ // const openedMixin = (theme) => ({
22
+ // width: drawerWidth,
23
+ // transition: theme.transitions.create("width", {
24
+ // easing: theme.transitions.easing.sharp,
25
+ // duration: theme.transitions.duration.enteringScreen
26
+ // }),
27
+ // overflowX: "hidden"
28
+ // });
29
29
 
30
- const closedMixin = (theme) => ({
31
- transition: theme.transitions.create("width", {
32
- easing: theme.transitions.easing.sharp,
33
- duration: theme.transitions.duration.leavingScreen
34
- }),
35
- overflowX: "hidden",
36
- width: `calc(${theme.spacing(0)} + 1px)`,
37
- [theme.breakpoints.up("sm")]: {
38
- width: `calc(${theme.spacing(8)} + 1px)`
39
- }
40
- });
30
+ // const closedMixin = (theme) => ({
31
+ // transition: theme.transitions.create("width", {
32
+ // easing: theme.transitions.easing.sharp,
33
+ // duration: theme.transitions.duration.leavingScreen
34
+ // }),
35
+ // overflowX: "hidden",
36
+ // width: `calc(${theme.spacing(0)} + 1px)`,
37
+ // [theme.breakpoints.up("sm")]: {
38
+ // width: `calc(${theme.spacing(8)} + 1px)`
39
+ // }
40
+ // });
41
41
 
42
- const DrawerHeader = styled("div")(({ theme, direction }) => ({
43
- display: "flex",
44
- alignItems: "center",
45
- justifyContent: direction === "rtl" ? "flex-start" : "flex-end",
46
- padding: theme.spacing(0, 1),
47
- // necessary for content to be below app bar
48
- ...theme.mixins.toolbar
49
- }));
42
+ // const DrawerHeader = styled("div")(({ theme, direction }) => ({
43
+ // display: "flex",
44
+ // alignItems: "center",
45
+ // justifyContent: direction === "rtl" ? "flex-start" : "flex-end",
46
+ // padding: theme.spacing(0, 1),
47
+ // // necessary for content to be below app bar
48
+ // ...theme.mixins.toolbar
49
+ // }));
50
50
 
51
- const AppBar = styled(MuiAppBar, {
52
- shouldForwardProp: (prop) => prop !== "open"
53
- })(({ theme, open, direction }) => ({
54
- zIndex: theme.zIndex.drawer + 1,
55
- transition: theme.transitions.create(["width", "margin"], {
56
- easing: theme.transitions.easing.sharp,
57
- duration: theme.transitions.duration.leavingScreen
58
- }),
51
+ // const AppBar = styled(MuiAppBar, {
52
+ // shouldForwardProp: (prop) => prop !== "open"
53
+ // })(({ theme, open, direction }) => ({
54
+ // zIndex: theme.zIndex.drawer + 1,
55
+ // transition: theme.transitions.create(["width", "margin"], {
56
+ // easing: theme.transitions.easing.sharp,
57
+ // duration: theme.transitions.duration.leavingScreen
58
+ // }),
59
59
 
60
- ...(open && {
61
- marginLeft: direction === "rtl" ? 0 : drawerWidth,
62
- marginRight: direction === "rtl" ? drawerWidth : 0,
63
- width: `calc(100% - ${drawerWidth}px)`,
64
- transition: theme.transitions.create(["width", "margin"], {
65
- easing: theme.transitions.easing.sharp,
66
- duration: theme.transitions.duration.enteringScreen
67
- })
68
- })
69
- }));
60
+ // ...(open && {
61
+ // marginLeft: direction === "rtl" ? 0 : drawerWidth,
62
+ // marginRight: direction === "rtl" ? drawerWidth : 0,
63
+ // width: `calc(100% - ${drawerWidth}px)`,
64
+ // transition: theme.transitions.create(["width", "margin"], {
65
+ // easing: theme.transitions.easing.sharp,
66
+ // duration: theme.transitions.duration.enteringScreen
67
+ // })
68
+ // })
69
+ // }));
70
70
 
71
- const Drawer = styled(MuiDrawer, {
72
- shouldForwardProp: (prop) => prop !== "open"
73
- })(({ theme, open }) => ({
74
- width: drawerWidth,
75
- flexShrink: 0,
76
- whiteSpace: "nowrap",
77
- boxSizing: "border-box",
78
- ...(open && {
79
- ...openedMixin(theme),
80
- "& .MuiDrawer-paper": openedMixin(theme)
81
- }),
82
- ...(!open && {
83
- ...closedMixin(theme),
84
- "& .MuiDrawer-paper": closedMixin(theme)
85
- })
86
- }));
71
+ // const Drawer = styled(MuiDrawer, {
72
+ // shouldForwardProp: (prop) => prop !== "open"
73
+ // })(({ theme, open }) => ({
74
+ // width: drawerWidth,
75
+ // flexShrink: 0,
76
+ // whiteSpace: "nowrap",
77
+ // boxSizing: "border-box",
78
+ // ...(open && {
79
+ // ...openedMixin(theme),
80
+ // "& .MuiDrawer-paper": openedMixin(theme)
81
+ // }),
82
+ // ...(!open && {
83
+ // ...closedMixin(theme),
84
+ // "& .MuiDrawer-paper": closedMixin(theme)
85
+ // })
86
+ // }));
87
87
 
88
- export function HawaAppLayout(props) {
89
- const theme = useTheme();
90
- const [open, setOpen] = React.useState(true);
91
- const isArabic = props.lang === "ar";
92
- const [anchorElNav, setAnchorElNav] = React.useState(null);
93
- const [anchorElUser, setAnchorElUser] = React.useState(null);
88
+ // export function HawaAppLayout(props) {
89
+ // const theme = useTheme();
90
+ // const [open, setOpen] = React.useState(true);
91
+ // const isArabic = props.lang === "ar";
92
+ // const [anchorElNav, setAnchorElNav] = React.useState(null);
93
+ // const [anchorElUser, setAnchorElUser] = React.useState(null);
94
94
 
95
- const handleOpenNavMenu = (event) => setAnchorElNav(event.currentTarget);
96
- const handleOpenUserMenu = (event) => setAnchorElUser(event.currentTarget);
97
- const handleCloseNavMenu = () => setAnchorElNav(null);
98
- const handleCloseUserMenu = () => setAnchorElUser(null);
99
- const handleDrawerOpen = () => setOpen(true);
100
- const handleDrawerClose = () => setOpen(false);
95
+ // const handleOpenNavMenu = (event) => setAnchorElNav(event.currentTarget);
96
+ // const handleOpenUserMenu = (event) => setAnchorElUser(event.currentTarget);
97
+ // const handleCloseNavMenu = () => setAnchorElNav(null);
98
+ // const handleCloseUserMenu = () => setAnchorElUser(null);
99
+ // const handleDrawerOpen = () => setOpen(true);
100
+ // const handleDrawerClose = () => setOpen(false);
101
101
 
102
- useEffect(() => {
103
- setOpen(!open);
104
- }, []);
105
- return (
106
- <Box sx={{ display: "flex", direction: isArabic ? "rtl" : "ltr" }}>
107
- <AppBar
108
- variant="appbar"
109
- position="fixed"
110
- open={open}
111
- direction={isArabic ? "rtl" : "ltr"}
112
- >
113
- <Toolbar
114
- variant="appbar"
115
- sx={{ paddingLeft: { xs: 3 }, paddingRight: { xs: 3 } }}
116
- >
117
- <IconButton
118
- color="inherit"
119
- aria-label="open drawer"
120
- onClick={handleDrawerOpen}
121
- edge="start"
122
- s
123
- sx={{
124
- marginRight: 5,
125
- ...(open && { display: "none" })
126
- }}
127
- >
128
- <MenuIcon />
129
- </IconButton>
102
+ // useEffect(() => {
103
+ // setOpen(!open);
104
+ // }, []);
105
+ // return (
106
+ // <Box sx={{ display: "flex", direction: isArabic ? "rtl" : "ltr" }}>
107
+ // <AppBar
108
+ // variant="appbar"
109
+ // position="fixed"
110
+ // open={open}
111
+ // direction={isArabic ? "rtl" : "ltr"}
112
+ // >
113
+ // <Toolbar
114
+ // variant="appbar"
115
+ // sx={{ paddingLeft: { xs: 3 }, paddingRight: { xs: 3 } }}
116
+ // >
117
+ // <IconButton
118
+ // color="inherit"
119
+ // aria-label="open drawer"
120
+ // onClick={handleDrawerOpen}
121
+ // edge="start"
122
+ // s
123
+ // sx={{
124
+ // marginRight: 5,
125
+ // ...(open && { display: "none" })
126
+ // }}
127
+ // >
128
+ // <MenuIcon />
129
+ // </IconButton>
130
130
 
131
- <div
132
- style={{
133
- display: "flex",
134
- flexDirection: "row",
135
- justifyContent: "space-between",
136
- alignItems: "center",
137
- width: "100%",
138
- margin: 0
139
- }}
140
- >
141
- <Typography
142
- variant="h6"
143
- noWrap
144
- component="div"
145
- sx={{
146
- display: {
147
- xs: open ? "none" : "flex",
148
- sm: "flex"
149
- }
150
- }}
151
- >
152
- {props.pageTitle}
153
- </Typography>
131
+ // <div
132
+ // style={{
133
+ // display: "flex",
134
+ // flexDirection: "row",
135
+ // justifyContent: "space-between",
136
+ // alignItems: "center",
137
+ // width: "100%",
138
+ // margin: 0
139
+ // }}
140
+ // >
141
+ // <Typography
142
+ // variant="h6"
143
+ // noWrap
144
+ // component="div"
145
+ // sx={{
146
+ // display: {
147
+ // xs: open ? "none" : "flex",
148
+ // sm: "flex"
149
+ // }
150
+ // }}
151
+ // >
152
+ // {props.pageTitle}
153
+ // </Typography>
154
154
 
155
- <Box style={{ position: "absolute", right: 10 }}>
156
- <IconButton
157
- onClick={handleOpenUserMenu}
158
- // sx={{ p: 0 }}
159
- size="small"
160
- >
161
- <Avatar style={{ width: 30, height: 30 }} fontSize="inherit" />
162
- </IconButton>
163
- {/* <Tooltip title="Open settings">
164
- </Tooltip> */}
165
- <HawaPopMenu
166
- menuItems={props.accountMenu}
167
- anchor={anchorElUser}
168
- handleClose={handleCloseUserMenu}
169
- />
170
- </Box>
171
- </div>
172
- </Toolbar>
173
- </AppBar>
155
+ // <Box style={{ position: "absolute", right: 10 }}>
156
+ // <IconButton
157
+ // onClick={handleOpenUserMenu}
158
+ // // sx={{ p: 0 }}
159
+ // size="small"
160
+ // >
161
+ // <Avatar style={{ width: 30, height: 30 }} fontSize="inherit" />
162
+ // </IconButton>
163
+ // {/* <Tooltip title="Open settings">
164
+ // </Tooltip> */}
165
+ // <HawaPopMenu
166
+ // menuItems={props.accountMenu}
167
+ // anchor={anchorElUser}
168
+ // handleClose={handleCloseUserMenu}
169
+ // />
170
+ // </Box>
171
+ // </div>
172
+ // </Toolbar>
173
+ // </AppBar>
174
174
 
175
- <Drawer
176
- // anchor="left"
175
+ // <Drawer
176
+ // // anchor="left"
177
177
 
178
- variant="permanent"
179
- open={open}
180
- // sx={{ display: { xs: open ? "flex" : "none", md: "flex" } }}
181
- >
182
- <DrawerHeader direction={isArabic ? "rtl" : "ltr"}>
183
- {props.logo}
184
- <IconButton onClick={handleDrawerClose}>
185
- {theme.direction === "rtl" ? (
186
- <ChevronRightIcon />
187
- ) : (
188
- <ChevronLeftIcon />
189
- )}
190
- </IconButton>
191
- </DrawerHeader>
192
- {/* <Divider /> */}
193
- <List
194
- // sx={{
195
- // display: {
196
- // xs: open ? "flex" : "none",
197
- // sm: open ? "flex" : "none",
198
- // md: "flex"
199
- // },
200
- // flexDirection: "column",
201
- // padding: 0
202
- // }}
203
- >
204
- {props.pages.map((p, jk) => {
205
- return (
206
- // <Tooltip
207
- // title={p.text}
208
- // key={jk}
209
- // placement={"right"}
210
- // arrow={true}
211
- // PopperProps={{ style: { opacity: open ? 0 : 1 } }}
212
- // >
178
+ // variant="permanent"
179
+ // open={open}
180
+ // // sx={{ display: { xs: open ? "flex" : "none", md: "flex" } }}
181
+ // >
182
+ // <DrawerHeader direction={isArabic ? "rtl" : "ltr"}>
183
+ // {props.logo}
184
+ // <IconButton onClick={handleDrawerClose}>
185
+ // {theme.direction === "rtl" ? (
186
+ // <ChevronRightIcon />
187
+ // ) : (
188
+ // <ChevronLeftIcon />
189
+ // )}
190
+ // </IconButton>
191
+ // </DrawerHeader>
192
+ // {/* <Divider /> */}
193
+ // <List
194
+ // // sx={{
195
+ // // display: {
196
+ // // xs: open ? "flex" : "none",
197
+ // // sm: open ? "flex" : "none",
198
+ // // md: "flex"
199
+ // // },
200
+ // // flexDirection: "column",
201
+ // // padding: 0
202
+ // // }}
203
+ // >
204
+ // {props.pages.map((p, jk) => {
205
+ // return (
206
+ // // <Tooltip
207
+ // // title={p.text}
208
+ // // key={jk}
209
+ // // placement={"right"}
210
+ // // arrow={true}
211
+ // // PopperProps={{ style: { opacity: open ? 0 : 1 } }}
212
+ // // >
213
213
 
214
- // </Tooltip>
215
- <ListItemButton
216
- variant={
217
- props.pageName?.toLowerCase() === p.slug?.toLowerCase() &&
218
- "clicked"
219
- }
220
- onClick={p.action}
221
- key={p.text}
222
- sx={{
223
- minHeight: 48,
224
- justifyContent: open ? "initial" : "center",
225
- px: 2.5
226
- }}
227
- >
228
- <p.icon />
229
- <div style={{ width: 20 }} />
230
- <ListItemText primary={p.text} sx={{ opacity: open ? 1 : 0 }} />
231
- </ListItemButton>
232
- );
233
- })}
234
- </List>
235
- </Drawer>
236
- <Box
237
- onClick={open && (() => setOpen(false))}
238
- sx={{
239
- flexGrow: 1,
240
- p: 3,
241
- position: "absolute",
242
- left: {
243
- xs: open ? 4 : 4,
244
- sm: open ? drawerWidth + 4 : 70
245
- },
246
- right: { xs: 4 }
247
- }}
248
- >
249
- <DrawerHeader />
250
- <div style={{ marginTop: -10 }}>{props.children}</div>
251
- </Box>
252
- </Box>
253
- );
254
- }
214
+ // // </Tooltip>
215
+ // <ListItemButton
216
+ // variant={
217
+ // props.pageName?.toLowerCase() === p.slug?.toLowerCase() &&
218
+ // "clicked"
219
+ // }
220
+ // onClick={p.action}
221
+ // key={p.text}
222
+ // sx={{
223
+ // minHeight: 48,
224
+ // justifyContent: open ? "initial" : "center",
225
+ // px: 2.5
226
+ // }}
227
+ // >
228
+ // <p.icon />
229
+ // <div style={{ width: 20 }} />
230
+ // <ListItemText primary={p.text} sx={{ opacity: open ? 1 : 0 }} />
231
+ // </ListItemButton>
232
+ // );
233
+ // })}
234
+ // </List>
235
+ // </Drawer>
236
+ // <Box
237
+ // onClick={open && (() => setOpen(false))}
238
+ // sx={{
239
+ // flexGrow: 1,
240
+ // p: 3,
241
+ // position: "absolute",
242
+ // left: {
243
+ // xs: open ? 4 : 4,
244
+ // sm: open ? drawerWidth + 4 : 70
245
+ // },
246
+ // right: { xs: 4 }
247
+ // }}
248
+ // >
249
+ // <DrawerHeader />
250
+ // <div style={{ marginTop: -10 }}>{props.children}</div>
251
+ // </Box>
252
+ // </Box>
253
+ // );
254
+ // }
package/src/layout/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export * from "./Box";
2
- export * from "./HawaAppLayout";
2
+ // export * from "./HawaAppLayout";
3
3
  export * from "./HawaDialog";
4
4
  export * from "./HawaPageControls";
5
5
  export * from "./HawaBottomAppBar";