@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/elements/TabPanel.js CHANGED
@@ -1,33 +1,30 @@
1
1
  import React from "react";
2
- import { makeStyles } from "@mui/material/styles";
3
2
 
4
- const useStyles = makeStyles((theme) => ({
5
- panelsContainer: {
6
- height: "100%",
7
- width: "100%"
8
- },
9
- panel: {
10
- backgroundColor: "var(--lightGrey)",
11
- height: "100%",
12
- width: "100%",
13
- padding: 10
14
- }
15
- }));
3
+ // const useStyles = makeStyles((theme) => ({
4
+ // panelsContainer: {
5
+ // height: "100%",
6
+ // width: "100%"
7
+ // },
8
+ // panel: {
9
+ // backgroundColor: "var(--lightGrey)",
10
+ // height: "100%",
11
+ // width: "100%",
12
+ // padding: 10
13
+ // }
14
+ // }));
16
15
 
17
16
  export const TabPanel = (props) => {
18
- const classes = useStyles();
19
17
  const { children, value, index, ...other } = props;
20
18
  return (
21
19
  <div
22
20
  role="tabpanel"
23
- className={classes.panelsContainer}
24
21
  hidden={value !== index}
25
22
  id={`vertical-tabpanel-${index}`}
26
23
  aria-labelledby={`vertical-tab-${index}`}
27
24
  {...other}
28
25
  >
29
26
  {value === index && (
30
- <div className={classes.panel}>
27
+ <div>
31
28
  <span>{children}</span>
32
29
  </div>
33
30
  )}
package/src/layout/HawaAppLayout.js CHANGED
@@ -1,245 +1,245 @@
1
- import * as React from "react";
2
- import { styled, useTheme } from "@mui/material/styles";
3
- import Box from "@mui/material/Box";
4
- import Drawer from "@mui/material/Drawer";
5
- import CssBaseline from "@mui/material/CssBaseline";
6
- import MuiAppBar from "@mui/material/AppBar";
7
- import Toolbar from "@mui/material/Toolbar";
8
- import List from "@mui/material/List";
9
- import Typography from "@mui/material/Typography";
10
- import Divider from "@mui/material/Divider";
11
- import IconButton from "@mui/material/IconButton";
12
- import MenuIcon from "@mui/icons-material/Menu";
13
- import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
14
- import ChevronRightIcon from "@mui/icons-material/ChevronRight";
15
- import ListItem from "@mui/material/ListItem";
16
- import ListItemIcon from "@mui/material/ListItemIcon";
17
- import ListItemText from "@mui/material/ListItemText";
18
- import InboxIcon from "@mui/icons-material/MoveToInbox";
19
- import MailIcon from "@mui/icons-material/Mail";
1
+ // import * as React from "react";
2
+ // import { styled, useTheme } from "@mui/material/styles";
3
+ // import Box from "@mui/material/Box";
4
+ // import Drawer from "@mui/material/Drawer";
5
+ // import CssBaseline from "@mui/material/CssBaseline";
6
+ // import MuiAppBar from "@mui/material/AppBar";
7
+ // import Toolbar from "@mui/material/Toolbar";
8
+ // import List from "@mui/material/List";
9
+ // import Typography from "@mui/material/Typography";
10
+ // import Divider from "@mui/material/Divider";
11
+ // import IconButton from "@mui/material/IconButton";
12
+ // import MenuIcon from "@mui/icons-material/Menu";
13
+ // import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
14
+ // import ChevronRightIcon from "@mui/icons-material/ChevronRight";
15
+ // import ListItem from "@mui/material/ListItem";
16
+ // import ListItemIcon from "@mui/material/ListItemIcon";
17
+ // import ListItemText from "@mui/material/ListItemText";
18
+ // import InboxIcon from "@mui/icons-material/MoveToInbox";
19
+ // import MailIcon from "@mui/icons-material/Mail";
20
20
 
21
- const drawerWidth = 240;
21
+ // const drawerWidth = 240;
22
22
 
23
- const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })(
24
- ({ theme, open, direction }) => ({
25
- flexGrow: 1,
26
- padding: theme.spacing(3),
27
- transition: theme.transitions.create("margin", {
28
- easing: theme.transitions.easing.sharp,
29
- duration: theme.transitions.duration.leavingScreen
30
- }),
31
- marginLeft: direction === "rtl" ? 0 : `-${drawerWidth}px`,
32
- marginRight: direction === "rtl" ? `-${drawerWidth}px` : 0,
33
- ...(open && {
34
- transition: theme.transitions.create("margin", {
35
- easing: theme.transitions.easing.easeOut,
36
- duration: theme.transitions.duration.enteringScreen
37
- }),
38
- marginLeft: direction === "ltr" && 0,
39
- marginRight: direction === "rtl" && 0
40
- })
41
- })
42
- );
23
+ // const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })(
24
+ // ({ theme, open, direction }) => ({
25
+ // flexGrow: 1,
26
+ // padding: theme.spacing(3),
27
+ // transition: theme.transitions.create("margin", {
28
+ // easing: theme.transitions.easing.sharp,
29
+ // duration: theme.transitions.duration.leavingScreen
30
+ // }),
31
+ // marginLeft: direction === "rtl" ? 0 : `-${drawerWidth}px`,
32
+ // marginRight: direction === "rtl" ? `-${drawerWidth}px` : 0,
33
+ // ...(open && {
34
+ // transition: theme.transitions.create("margin", {
35
+ // easing: theme.transitions.easing.easeOut,
36
+ // duration: theme.transitions.duration.enteringScreen
37
+ // }),
38
+ // marginLeft: direction === "ltr" && 0,
39
+ // marginRight: direction === "rtl" && 0
40
+ // })
41
+ // })
42
+ // );
43
43
 
44
- const AppBar = styled(MuiAppBar, {
45
- shouldForwardProp: (prop) => prop !== "open"
46
- })(({ theme, open, direction }) => ({
47
- transition: theme.transitions.create(["margin", "width"], {
48
- easing: theme.transitions.easing.sharp,
49
- duration: theme.transitions.duration.leavingScreen
50
- }),
51
- ...(open && {
52
- width: `calc(100% - ${drawerWidth}px)`,
53
- marginLeft: direction === "rtl" ? 0 : `${drawerWidth}px`,
54
- marginRight: direction === "rtl" ? `${drawerWidth}px` : 0,
55
- // marginLeft: `${drawerWidth}px`,
56
- transition: theme.transitions.create(["margin", "width"], {
57
- easing: theme.transitions.easing.easeOut,
58
- duration: theme.transitions.duration.enteringScreen
59
- })
60
- })
61
- }));
44
+ // const AppBar = styled(MuiAppBar, {
45
+ // shouldForwardProp: (prop) => prop !== "open"
46
+ // })(({ theme, open, direction }) => ({
47
+ // transition: theme.transitions.create(["margin", "width"], {
48
+ // easing: theme.transitions.easing.sharp,
49
+ // duration: theme.transitions.duration.leavingScreen
50
+ // }),
51
+ // ...(open && {
52
+ // width: `calc(100% - ${drawerWidth}px)`,
53
+ // marginLeft: direction === "rtl" ? 0 : `${drawerWidth}px`,
54
+ // marginRight: direction === "rtl" ? `${drawerWidth}px` : 0,
55
+ // // marginLeft: `${drawerWidth}px`,
56
+ // transition: theme.transitions.create(["margin", "width"], {
57
+ // easing: theme.transitions.easing.easeOut,
58
+ // duration: theme.transitions.duration.enteringScreen
59
+ // })
60
+ // })
61
+ // }));
62
62
 
63
- const DrawerHeader = styled("div")(({ theme }) => ({
64
- display: "flex",
65
- alignItems: "center",
66
- padding: theme.spacing(0, 1),
67
- // necessary for content to be below app bar
68
- ...theme.mixins.toolbar,
69
- justifyContent: "flex-end"
70
- }));
63
+ // const DrawerHeader = styled("div")(({ theme }) => ({
64
+ // display: "flex",
65
+ // alignItems: "center",
66
+ // padding: theme.spacing(0, 1),
67
+ // // necessary for content to be below app bar
68
+ // ...theme.mixins.toolbar,
69
+ // justifyContent: "flex-end"
70
+ // }));
71
71
 
72
- export const HawaAppLayout = (props) => {
73
- const theme = useTheme();
74
- const [open, setOpen] = React.useState(false);
75
- const isArabic = props.lang === "ar";
76
- const handleDrawerOpen = () => {
77
- setOpen(true);
78
- };
72
+ // export const HawaAppLayout = (props) => {
73
+ // const theme = useTheme();
74
+ // const [open, setOpen] = React.useState(false);
75
+ // const isArabic = props.lang === "ar";
76
+ // const handleDrawerOpen = () => {
77
+ // setOpen(true);
78
+ // };
79
79
 
80
- const handleDrawerClose = () => {
81
- setOpen(false);
82
- };
80
+ // const handleDrawerClose = () => {
81
+ // setOpen(false);
82
+ // };
83
83
 
84
- return (
85
- <Box sx={{ display: "flex" }}>
86
- <CssBaseline />
87
- <AppBar
88
- position="fixed"
89
- open={open}
90
- direction={isArabic ? "rtl" : "ltr"}
91
- style={{
92
- alignItems: isArabic ? "flex-end" : "flex-start",
93
- justifyContent: "center"
94
- }}
95
- >
96
- <Toolbar>
97
- {isArabic ? (
98
- <>
99
- <Typography variant="h6" noWrap component="div">
100
- Persistent drawer
101
- </Typography>
102
- <IconButton
103
- color="inherit"
104
- aria-label="open drawer"
105
- onClick={handleDrawerOpen}
106
- edge={isArabic ? "end" : "start"}
107
- sx={{ mr: 2, ...(open && { display: "none" }) }}
108
- >
109
- <MenuIcon />
110
- </IconButton>
111
- </>
112
- ) : (
113
- <>
114
- <IconButton
115
- color="inherit"
116
- aria-label="open drawer"
117
- onClick={handleDrawerOpen}
118
- edge={isArabic ? "end" : "start"}
119
- sx={{
120
- marginRight: isArabic ? 0 : 2,
121
- marginLeft: isArabic ? 2 : 0,
122
- ...(open && { display: "none" })
123
- }}
124
- >
125
- <MenuIcon />
126
- </IconButton>
127
- <Typography variant="h6" noWrap component="div">
128
- Persistent drawer
129
- </Typography>
130
- </>
131
- )}
132
- </Toolbar>
133
- </AppBar>
134
- {!isArabic ? (
135
- <>
136
- <Drawer
137
- sx={{
138
- width: drawerWidth,
139
- flexShrink: 0,
140
- "& .MuiDrawer-paper": {
141
- width: drawerWidth,
142
- boxSizing: "border-box"
143
- }
144
- }}
145
- variant="persistent"
146
- anchor={isArabic ? "right" : "left"}
147
- open={open}
148
- >
149
- <DrawerHeader>
150
- <IconButton onClick={handleDrawerClose}>
151
- {theme.direction === "ltr" ? (
152
- <ChevronLeftIcon />
153
- ) : (
154
- <ChevronRightIcon />
155
- )}
156
- </IconButton>
157
- </DrawerHeader>
158
- <Divider />
159
- <List>
160
- {["Inbox", "Starred", "Send email", "Drafts"].map(
161
- (text, index) => (
162
- <ListItem button key={text}>
163
- <ListItemIcon>
164
- {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
165
- </ListItemIcon>
166
- <ListItemText primary={text} />
167
- </ListItem>
168
- )
169
- )}
170
- </List>
171
- <Divider />
172
- <List>
173
- {["All mail", "Trash", "Spam"].map((text, index) => (
174
- <ListItem button key={text}>
175
- <ListItemIcon>
176
- {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
177
- </ListItemIcon>
178
- <ListItemText primary={text} />
179
- </ListItem>
180
- ))}
181
- </List>
182
- </Drawer>
183
- <Main open={open} direction={isArabic ? "rtl" : "ltr"}>
184
- <DrawerHeader />
185
- {props.children}
186
- </Main>
187
- </>
188
- ) : (
189
- <>
190
- <Main open={open} direction={isArabic ? "rtl" : "ltr"}>
191
- <DrawerHeader />
192
- {props.children}
193
- </Main>
194
- <Drawer
195
- sx={{
196
- width: drawerWidth,
197
- flexShrink: 0,
198
- "& .MuiDrawer-paper": {
199
- width: drawerWidth,
200
- boxSizing: "border-box"
201
- }
202
- }}
203
- variant="persistent"
204
- anchor={isArabic ? "right" : "left"}
205
- open={open}
206
- >
207
- <DrawerHeader>
208
- <IconButton onClick={handleDrawerClose}>
209
- {theme.direction === "ltr" ? (
210
- <ChevronLeftIcon />
211
- ) : (
212
- <ChevronRightIcon />
213
- )}
214
- </IconButton>
215
- </DrawerHeader>
216
- <Divider />
217
- <List>
218
- {["Inbox", "Starred", "Send email", "Drafts"].map(
219
- (text, index) => (
220
- <ListItem button key={text}>
221
- <ListItemIcon>
222
- {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
223
- </ListItemIcon>
224
- <ListItemText primary={text} />
225
- </ListItem>
226
- )
227
- )}
228
- </List>
229
- <Divider />
230
- <List>
231
- {["All mail", "Trash", "Spam"].map((text, index) => (
232
- <ListItem button key={text}>
233
- <ListItemIcon>
234
- {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
235
- </ListItemIcon>
236
- <ListItemText primary={text} />
237
- </ListItem>
238
- ))}
239
- </List>
240
- </Drawer>
241
- </>
242
- )}
243
- </Box>
244
- );
245
- };
84
+ // return (
85
+ // <Box sx={{ display: "flex" }}>
86
+ // <CssBaseline />
87
+ // <AppBar
88
+ // position="fixed"
89
+ // open={open}
90
+ // direction={isArabic ? "rtl" : "ltr"}
91
+ // style={{
92
+ // alignItems: isArabic ? "flex-end" : "flex-start",
93
+ // justifyContent: "center"
94
+ // }}
95
+ // >
96
+ // <Toolbar>
97
+ // {isArabic ? (
98
+ // <>
99
+ // <Typography variant="h6" noWrap component="div">
100
+ // Persistent drawer
101
+ // </Typography>
102
+ // <IconButton
103
+ // color="inherit"
104
+ // aria-label="open drawer"
105
+ // onClick={handleDrawerOpen}
106
+ // edge={isArabic ? "end" : "start"}
107
+ // sx={{ mr: 2, ...(open && { display: "none" }) }}
108
+ // >
109
+ // <MenuIcon />
110
+ // </IconButton>
111
+ // </>
112
+ // ) : (
113
+ // <>
114
+ // <IconButton
115
+ // color="inherit"
116
+ // aria-label="open drawer"
117
+ // onClick={handleDrawerOpen}
118
+ // edge={isArabic ? "end" : "start"}
119
+ // sx={{
120
+ // marginRight: isArabic ? 0 : 2,
121
+ // marginLeft: isArabic ? 2 : 0,
122
+ // ...(open && { display: "none" })
123
+ // }}
124
+ // >
125
+ // <MenuIcon />
126
+ // </IconButton>
127
+ // <Typography variant="h6" noWrap component="div">
128
+ // Persistent drawer
129
+ // </Typography>
130
+ // </>
131
+ // )}
132
+ // </Toolbar>
133
+ // </AppBar>
134
+ // {!isArabic ? (
135
+ // <>
136
+ // <Drawer
137
+ // sx={{
138
+ // width: drawerWidth,
139
+ // flexShrink: 0,
140
+ // "& .MuiDrawer-paper": {
141
+ // width: drawerWidth,
142
+ // boxSizing: "border-box"
143
+ // }
144
+ // }}
145
+ // variant="persistent"
146
+ // anchor={isArabic ? "right" : "left"}
147
+ // open={open}
148
+ // >
149
+ // <DrawerHeader>
150
+ // <IconButton onClick={handleDrawerClose}>
151
+ // {theme.direction === "ltr" ? (
152
+ // <ChevronLeftIcon />
153
+ // ) : (
154
+ // <ChevronRightIcon />
155
+ // )}
156
+ // </IconButton>
157
+ // </DrawerHeader>
158
+ // <Divider />
159
+ // <List>
160
+ // {["Inbox", "Starred", "Send email", "Drafts"].map(
161
+ // (text, index) => (
162
+ // <ListItem button key={text}>
163
+ // <ListItemIcon>
164
+ // {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
165
+ // </ListItemIcon>
166
+ // <ListItemText primary={text} />
167
+ // </ListItem>
168
+ // )
169
+ // )}
170
+ // </List>
171
+ // <Divider />
172
+ // <List>
173
+ // {["All mail", "Trash", "Spam"].map((text, index) => (
174
+ // <ListItem button key={text}>
175
+ // <ListItemIcon>
176
+ // {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
177
+ // </ListItemIcon>
178
+ // <ListItemText primary={text} />
179
+ // </ListItem>
180
+ // ))}
181
+ // </List>
182
+ // </Drawer>
183
+ // <Main open={open} direction={isArabic ? "rtl" : "ltr"}>
184
+ // <DrawerHeader />
185
+ // {props.children}
186
+ // </Main>
187
+ // </>
188
+ // ) : (
189
+ // <>
190
+ // <Main open={open} direction={isArabic ? "rtl" : "ltr"}>
191
+ // <DrawerHeader />
192
+ // {props.children}
193
+ // </Main>
194
+ // <Drawer
195
+ // sx={{
196
+ // width: drawerWidth,
197
+ // flexShrink: 0,
198
+ // "& .MuiDrawer-paper": {
199
+ // width: drawerWidth,
200
+ // boxSizing: "border-box"
201
+ // }
202
+ // }}
203
+ // variant="persistent"
204
+ // anchor={isArabic ? "right" : "left"}
205
+ // open={open}
206
+ // >
207
+ // <DrawerHeader>
208
+ // <IconButton onClick={handleDrawerClose}>
209
+ // {theme.direction === "ltr" ? (
210
+ // <ChevronLeftIcon />
211
+ // ) : (
212
+ // <ChevronRightIcon />
213
+ // )}
214
+ // </IconButton>
215
+ // </DrawerHeader>
216
+ // <Divider />
217
+ // <List>
218
+ // {["Inbox", "Starred", "Send email", "Drafts"].map(
219
+ // (text, index) => (
220
+ // <ListItem button key={text}>
221
+ // <ListItemIcon>
222
+ // {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
223
+ // </ListItemIcon>
224
+ // <ListItemText primary={text} />
225
+ // </ListItem>
226
+ // )
227
+ // )}
228
+ // </List>
229
+ // <Divider />
230
+ // <List>
231
+ // {["All mail", "Trash", "Spam"].map((text, index) => (
232
+ // <ListItem button key={text}>
233
+ // <ListItemIcon>
234
+ // {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
235
+ // </ListItemIcon>
236
+ // <ListItemText primary={text} />
237
+ // </ListItem>
238
+ // ))}
239
+ // </List>
240
+ // </Drawer>
241
+ // </>
242
+ // )}
243
+ // </Box>
244
+ // );
245
+ // };