umwd-components 0.1.124 → 0.1.126

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.
@@ -21,46 +21,46 @@ var material = require('@mui/material');
21
21
  var ContactForm = require('./ContactForm.js');
22
22
  var PersonaliaSection = require('./PersonaliaSection.js');
23
23
 
24
- function blockRenderer(block) {
24
+ function blockRenderer(block, index) {
25
25
  switch (block.__component) {
26
26
  case "layout.hero-section":
27
27
  return /*#__PURE__*/React.createElement(HeroSection.HeroSection, {
28
- key: block.id,
28
+ key: index,
29
29
  data: block
30
30
  });
31
31
  case "layout.features-section":
32
32
  return /*#__PURE__*/React.createElement(FeaturesSection.FeatureSection, {
33
- key: block.id,
33
+ key: index,
34
34
  data: block
35
35
  });
36
36
  case "layout.contact-section":
37
37
  return /*#__PURE__*/React.createElement(ContactForm.default, {
38
- key: block.id,
38
+ key: index,
39
39
  data: block
40
40
  });
41
41
  case "layout.text-image-section":
42
42
  return /*#__PURE__*/React.createElement(TextImageSection.default, {
43
- key: block.id,
43
+ key: index,
44
44
  data: block
45
45
  });
46
46
  case "layout.icon-section":
47
47
  return /*#__PURE__*/React.createElement(IconSection.IconSection, {
48
- key: block.id,
48
+ key: index,
49
49
  data: block
50
50
  });
51
51
  case "layout.fleet-section":
52
52
  return /*#__PURE__*/React.createElement(FleetSection.FleetSection, {
53
- key: block.id,
53
+ key: index,
54
54
  data: block
55
55
  });
56
56
  case "layout.columns-section":
57
57
  return /*#__PURE__*/React.createElement(ColumnsSection.ColumnsSection, {
58
- key: block.id,
58
+ key: index,
59
59
  data: block
60
60
  });
61
61
  case "layout.personalia-section":
62
62
  return /*#__PURE__*/React.createElement(PersonaliaSection.PersonaliaSection, {
63
- key: block.id,
63
+ key: index,
64
64
  data: block
65
65
  });
66
66
  default:
@@ -25,7 +25,9 @@ const ScrollLink = _ref => {
25
25
  e.preventDefault();
26
26
  //remove everything before the hash
27
27
  const targetId = e.currentTarget.href.replace(/.*\#/, "");
28
+ console.log("targetId", targetId);
28
29
  const elem = document.getElementById(targetId);
30
+ console.log("elem", elem);
29
31
  window.scrollTo({
30
32
  top: elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect().top,
31
33
  behavior: "smooth"
@@ -20,7 +20,6 @@ var ScrollLink = require('./ScrollLink.js');
20
20
  /* TODO: combine these, and use conf/setting to manipulate how to display */
21
21
 
22
22
  function ScrollNavbar(_ref) {
23
- var _tabs$;
24
23
  let {
25
24
  data
26
25
  } = _ref;
@@ -33,19 +32,13 @@ function ScrollNavbar(_ref) {
33
32
  minHeight
34
33
  } = data;
35
34
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
36
- const [currentTab, setCurrentTab] = React.useState(tabs ? (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.name : "");
35
+ const [currentTab, setCurrentTab] = React.useState(0);
37
36
  const handleOpenMobileMenu = () => {
38
37
  setMobileNavOpen(true);
39
38
  };
40
39
  const handleCloseMobileMenu = () => {
41
40
  setMobileNavOpen(false);
42
41
  };
43
-
44
- /* const router = useRouter(); */
45
-
46
- const handleChange = (event, newValue) => {
47
- setCurrentTab(newValue);
48
- };
49
42
  const theme = material.useTheme();
50
43
  return /*#__PURE__*/React.createElement(material.AppBar, {
51
44
  position: "sticky",
@@ -107,10 +100,7 @@ function ScrollNavbar(_ref) {
107
100
  return /*#__PURE__*/React.createElement(ScrollLink.default, {
108
101
  key: page.name,
109
102
  href: "#".concat(page.slug)
110
- }, /*#__PURE__*/React.createElement(material.Button
111
- /* onClick={() => {
112
- router.push(page.url);
113
- }} */, {
103
+ }, /*#__PURE__*/React.createElement(material.Button, {
114
104
  sx: {
115
105
  my: 2,
116
106
  color: "primary.contrastText",
@@ -127,25 +117,25 @@ function ScrollNavbar(_ref) {
127
117
  }
128
118
  }, /*#__PURE__*/React.createElement(material.Tabs, {
129
119
  value: currentTab,
130
- onChange: (event, newValue) => handleChange(event, newValue),
131
120
  "aria-label": "wrapped label tabs example",
132
121
  textColor: "secondary",
133
122
  indicatorColor: "secondary",
134
123
  variant: "fullWidth"
135
- }, tabs.length > 0 && tabs.map(tab => {
136
- return /*#__PURE__*/React.createElement(ScrollLink.default, {
124
+ }, tabs.length > 0 && tabs.map((tab, index) => {
125
+ return /*#__PURE__*/React.createElement(material.Box, {
137
126
  key: tab.name,
138
- href: "#".concat(tab.slug)
127
+ onClick: e => setCurrentTab(index)
128
+ }, /*#__PURE__*/React.createElement(ScrollLink.default, {
129
+ key: tab.name,
130
+ href: "#".concat(tab.slug),
131
+ style: {
132
+ display: "block",
133
+ height: "100%"
134
+ }
139
135
  }, /*#__PURE__*/React.createElement(material.Tab, {
140
- value: tab.name,
136
+ value: index,
141
137
  label: tab.name
142
- /* onClick={() => {
143
- router.push(tab.url);
144
- }} */,
145
- sx: {
146
- p: 1
147
- }
148
- }));
138
+ })));
149
139
  }))), /*#__PURE__*/React.createElement(Link, {
150
140
  href: "/",
151
141
  style: {
@@ -278,8 +268,9 @@ function ScrollNavbar(_ref) {
278
268
  color: "primary.contrastText"
279
269
  }
280
270
  }))))), pages && pages.length > 0 && /*#__PURE__*/React.createElement(material.List, null, pages.map(page => {
281
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollLink.default, {
282
- key: page.name,
271
+ return /*#__PURE__*/React.createElement(React.Fragment, {
272
+ key: page.name
273
+ }, /*#__PURE__*/React.createElement(ScrollLink.default, {
283
274
  href: "#".concat(page.slug)
284
275
  }, /*#__PURE__*/React.createElement(material.ListItem
285
276
  /* onClick={() => {
@@ -17,46 +17,46 @@ import { Box } from '@mui/material';
17
17
  import ContactForm from './ContactForm.js';
18
18
  import { PersonaliaSection } from './PersonaliaSection.js';
19
19
 
20
- function blockRenderer(block) {
20
+ function blockRenderer(block, index) {
21
21
  switch (block.__component) {
22
22
  case "layout.hero-section":
23
23
  return /*#__PURE__*/React__default.createElement(HeroSection, {
24
- key: block.id,
24
+ key: index,
25
25
  data: block
26
26
  });
27
27
  case "layout.features-section":
28
28
  return /*#__PURE__*/React__default.createElement(FeatureSection, {
29
- key: block.id,
29
+ key: index,
30
30
  data: block
31
31
  });
32
32
  case "layout.contact-section":
33
33
  return /*#__PURE__*/React__default.createElement(ContactForm, {
34
- key: block.id,
34
+ key: index,
35
35
  data: block
36
36
  });
37
37
  case "layout.text-image-section":
38
38
  return /*#__PURE__*/React__default.createElement(TextImageSection, {
39
- key: block.id,
39
+ key: index,
40
40
  data: block
41
41
  });
42
42
  case "layout.icon-section":
43
43
  return /*#__PURE__*/React__default.createElement(IconSection, {
44
- key: block.id,
44
+ key: index,
45
45
  data: block
46
46
  });
47
47
  case "layout.fleet-section":
48
48
  return /*#__PURE__*/React__default.createElement(FleetSection, {
49
- key: block.id,
49
+ key: index,
50
50
  data: block
51
51
  });
52
52
  case "layout.columns-section":
53
53
  return /*#__PURE__*/React__default.createElement(ColumnsSection, {
54
- key: block.id,
54
+ key: index,
55
55
  data: block
56
56
  });
57
57
  case "layout.personalia-section":
58
58
  return /*#__PURE__*/React__default.createElement(PersonaliaSection, {
59
- key: block.id,
59
+ key: index,
60
60
  data: block
61
61
  });
62
62
  default:
@@ -21,7 +21,9 @@ const ScrollLink = _ref => {
21
21
  e.preventDefault();
22
22
  //remove everything before the hash
23
23
  const targetId = e.currentTarget.href.replace(/.*\#/, "");
24
+ console.log("targetId", targetId);
24
25
  const elem = document.getElementById(targetId);
26
+ console.log("elem", elem);
25
27
  window.scrollTo({
26
28
  top: elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect().top,
27
29
  behavior: "smooth"
@@ -5,7 +5,7 @@
5
5
  * @license MIT
6
6
  */
7
7
 
8
- import React__default, { useState } from 'react';
8
+ import React__default, { useState, Fragment } from 'react';
9
9
  import Link from 'next/link';
10
10
  import Image from 'next/image';
11
11
  import { useTheme, AppBar, Container, Toolbar, Box, Typography, Button, Tabs, Tab, Dialog, List, ListItem, ListItemText, Divider } from '@mui/material';
@@ -16,7 +16,6 @@ import ScrollLink from './ScrollLink.js';
16
16
  /* TODO: combine these, and use conf/setting to manipulate how to display */
17
17
 
18
18
  function ScrollNavbar(_ref) {
19
- var _tabs$;
20
19
  let {
21
20
  data
22
21
  } = _ref;
@@ -29,19 +28,13 @@ function ScrollNavbar(_ref) {
29
28
  minHeight
30
29
  } = data;
31
30
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
32
- const [currentTab, setCurrentTab] = useState(tabs ? (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.name : "");
31
+ const [currentTab, setCurrentTab] = useState(0);
33
32
  const handleOpenMobileMenu = () => {
34
33
  setMobileNavOpen(true);
35
34
  };
36
35
  const handleCloseMobileMenu = () => {
37
36
  setMobileNavOpen(false);
38
37
  };
39
-
40
- /* const router = useRouter(); */
41
-
42
- const handleChange = (event, newValue) => {
43
- setCurrentTab(newValue);
44
- };
45
38
  const theme = useTheme();
46
39
  return /*#__PURE__*/React__default.createElement(AppBar, {
47
40
  position: "sticky",
@@ -103,10 +96,7 @@ function ScrollNavbar(_ref) {
103
96
  return /*#__PURE__*/React__default.createElement(ScrollLink, {
104
97
  key: page.name,
105
98
  href: "#".concat(page.slug)
106
- }, /*#__PURE__*/React__default.createElement(Button
107
- /* onClick={() => {
108
- router.push(page.url);
109
- }} */, {
99
+ }, /*#__PURE__*/React__default.createElement(Button, {
110
100
  sx: {
111
101
  my: 2,
112
102
  color: "primary.contrastText",
@@ -123,25 +113,25 @@ function ScrollNavbar(_ref) {
123
113
  }
124
114
  }, /*#__PURE__*/React__default.createElement(Tabs, {
125
115
  value: currentTab,
126
- onChange: (event, newValue) => handleChange(event, newValue),
127
116
  "aria-label": "wrapped label tabs example",
128
117
  textColor: "secondary",
129
118
  indicatorColor: "secondary",
130
119
  variant: "fullWidth"
131
- }, tabs.length > 0 && tabs.map(tab => {
132
- return /*#__PURE__*/React__default.createElement(ScrollLink, {
120
+ }, tabs.length > 0 && tabs.map((tab, index) => {
121
+ return /*#__PURE__*/React__default.createElement(Box, {
133
122
  key: tab.name,
134
- href: "#".concat(tab.slug)
123
+ onClick: e => setCurrentTab(index)
124
+ }, /*#__PURE__*/React__default.createElement(ScrollLink, {
125
+ key: tab.name,
126
+ href: "#".concat(tab.slug),
127
+ style: {
128
+ display: "block",
129
+ height: "100%"
130
+ }
135
131
  }, /*#__PURE__*/React__default.createElement(Tab, {
136
- value: tab.name,
132
+ value: index,
137
133
  label: tab.name
138
- /* onClick={() => {
139
- router.push(tab.url);
140
- }} */,
141
- sx: {
142
- p: 1
143
- }
144
- }));
134
+ })));
145
135
  }))), /*#__PURE__*/React__default.createElement(Link, {
146
136
  href: "/",
147
137
  style: {
@@ -274,8 +264,9 @@ function ScrollNavbar(_ref) {
274
264
  color: "primary.contrastText"
275
265
  }
276
266
  }))))), pages && pages.length > 0 && /*#__PURE__*/React__default.createElement(List, null, pages.map(page => {
277
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ScrollLink, {
278
- key: page.name,
267
+ return /*#__PURE__*/React__default.createElement(Fragment, {
268
+ key: page.name
269
+ }, /*#__PURE__*/React__default.createElement(ScrollLink, {
279
270
  href: "#".concat(page.slug)
280
271
  }, /*#__PURE__*/React__default.createElement(ListItem
281
272
  /* onClick={() => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.124",
3
+ "version": "0.1.126",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/app/page.js CHANGED
@@ -11,7 +11,7 @@ export default async function Home() {
11
11
  {/* TODO, create and extract BGcomponent */}
12
12
  {/* <Box sx={{}}> */}
13
13
 
14
- {pages &&
14
+ {/* {pages &&
15
15
  pages.data.length > 0 &&
16
16
  pages.data.map((page) => {
17
17
  console.dir(page, { depth: 10 });
@@ -56,20 +56,20 @@ export default async function Home() {
56
56
 
57
57
  return (
58
58
  <Fragment key={page.id}>
59
- {/* <Image
60
- alt="Background"
61
- style={{
62
- position: "fixed",
63
- inset: 0,
64
- objectFit: "cover",
65
- width: "100%",
66
- height: "100%",
67
- zIndex: -1,
68
- }}
69
- height={darkBG.height || 1080}
70
- src={darkBG.src}
71
- width={darkBG.width || 1920}
72
- /> */}
59
+ //<Image
60
+ // alt="Background"
61
+ // style={{
62
+ // position: "fixed",
63
+ // inset: 0,
64
+ // objectFit: "cover",
65
+ // width: "100%",
66
+ // height: "100%",
67
+ // zIndex: -1,
68
+ // }}
69
+ // height={darkBG.height || 1080}
70
+ // src={darkBG.src}
71
+ // width={darkBG.width || 1920}
72
+ ///>
73
73
  {page.title !== "HOME" && (
74
74
  <Container maxWidth="lg">
75
75
  <Typography
@@ -93,7 +93,7 @@ export default async function Home() {
93
93
  />
94
94
  </Fragment>
95
95
  );
96
- })}
96
+ })} */}
97
97
  </main>
98
98
  );
99
99
  }
@@ -12,24 +12,24 @@ import { Box } from "@mui/material";
12
12
  import ContactForm from "./ContactForm.tsx";
13
13
  import { PersonaliaSection } from "./PersonaliaSection.tsx";
14
14
 
15
- function blockRenderer(block) {
15
+ function blockRenderer(block, index) {
16
16
  switch (block.__component) {
17
17
  case "layout.hero-section":
18
- return <HeroSection key={block.id} data={block} />;
18
+ return <HeroSection key={index} data={block} />;
19
19
  case "layout.features-section":
20
- return <FeatureSection key={block.id} data={block} />;
20
+ return <FeatureSection key={index} data={block} />;
21
21
  case "layout.contact-section":
22
- return <ContactForm key={block.id} data={block} />;
22
+ return <ContactForm key={index} data={block} />;
23
23
  case "layout.text-image-section":
24
- return <TextImageSection key={block.id} data={block} />;
24
+ return <TextImageSection key={index} data={block} />;
25
25
  case "layout.icon-section":
26
- return <IconSection key={block.id} data={block} />;
26
+ return <IconSection key={index} data={block} />;
27
27
  case "layout.fleet-section":
28
- return <FleetSection key={block.id} data={block} />;
28
+ return <FleetSection key={index} data={block} />;
29
29
  case "layout.columns-section":
30
- return <ColumnsSection key={block.id} data={block} />;
30
+ return <ColumnsSection key={index} data={block} />;
31
31
  case "layout.personalia-section":
32
- return <PersonaliaSection key={block.id} data={block} />;
32
+ return <PersonaliaSection key={index} data={block} />;
33
33
 
34
34
  default:
35
35
  return null;
@@ -15,7 +15,9 @@ const ScrollLink = ({ children, ...props }: ScrollLinkProps) => {
15
15
  e.preventDefault();
16
16
  //remove everything before the hash
17
17
  const targetId = e.currentTarget.href.replace(/.*\#/, "");
18
+ console.log("targetId", targetId);
18
19
  const elem = document.getElementById(targetId);
20
+ console.log("elem", elem);
19
21
  window.scrollTo({
20
22
  top: elem?.getBoundingClientRect().top,
21
23
  behavior: "smooth",
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
 
3
- import React, { useState } from "react";
3
+ import React, { Fragment, useState } from "react";
4
4
  import Link from "next/link";
5
5
  import Image from "next/image";
6
6
  import {
@@ -21,7 +21,6 @@ import {
21
21
  } from "@mui/material";
22
22
  import CloseIcon from "@mui/icons-material/Close";
23
23
  import MoreVertIcon from "@mui/icons-material/MoreVert";
24
- /* import { useRouter } from "next/router"; */
25
24
  import ScrollLink from "./ScrollLink.tsx";
26
25
 
27
26
  interface ImageProps {
@@ -61,7 +60,7 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
61
60
  const { site_title, logo, pages, tabs, maxWidth, minHeight } = data;
62
61
 
63
62
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
64
- const [currentTab, setCurrentTab] = useState(tabs ? tabs[0]?.name : "");
63
+ const [currentTab, setCurrentTab] = useState(0);
65
64
 
66
65
  const handleOpenMobileMenu = () => {
67
66
  setMobileNavOpen(true);
@@ -71,12 +70,6 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
71
70
  setMobileNavOpen(false);
72
71
  };
73
72
 
74
- /* const router = useRouter(); */
75
-
76
- const handleChange = (event: React.SyntheticEvent, newValue: string) => {
77
- setCurrentTab(newValue);
78
- };
79
-
80
73
  const theme = useTheme();
81
74
 
82
75
  return (
@@ -95,7 +88,6 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
95
88
  }}
96
89
  >
97
90
  {/* logo and site title for big screens */}
98
- {/* <Link href="/" style={{ textDecoration: "none", color: "unset" }}> */}
99
91
  <ScrollLink href={`#home`}>
100
92
  <Box
101
93
  sx={{
@@ -128,7 +120,6 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
128
120
  )}
129
121
  </Box>
130
122
  </ScrollLink>
131
- {/* </Link> */}
132
123
 
133
124
  <Box sx={{ display: "block", width: "30px" }}></Box>
134
125
 
@@ -145,9 +136,6 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
145
136
  return (
146
137
  <ScrollLink key={page.name} href={`#${page.slug}`}>
147
138
  <Button
148
- /* onClick={() => {
149
- router.push(page.url);
150
- }} */
151
139
  sx={{
152
140
  my: 2,
153
141
  color: "primary.contrastText",
@@ -172,25 +160,23 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
172
160
  >
173
161
  <Tabs
174
162
  value={currentTab}
175
- onChange={(event, newValue) => handleChange(event, newValue)}
176
163
  aria-label="wrapped label tabs example"
177
164
  textColor="secondary"
178
165
  indicatorColor="secondary"
179
166
  variant="fullWidth"
180
167
  >
181
168
  {tabs.length > 0 &&
182
- tabs.map((tab: TabInfo) => {
169
+ tabs.map((tab: TabInfo, index: number) => {
183
170
  return (
184
- <ScrollLink key={tab.name} href={`#${tab.slug}`}>
185
- <Tab
186
- value={tab.name}
187
- label={tab.name}
188
- /* onClick={() => {
189
- router.push(tab.url);
190
- }} */
191
- sx={{ p: 1 }}
192
- />
193
- </ScrollLink>
171
+ <Box key={tab.name} onClick={(e) => setCurrentTab(index)}>
172
+ <ScrollLink
173
+ key={tab.name}
174
+ href={`#${tab.slug}`}
175
+ style={{ display: "block", height: "100%" }}
176
+ >
177
+ <Tab value={index} label={tab.name} />
178
+ </ScrollLink>
179
+ </Box>
194
180
  );
195
181
  })}
196
182
  </Tabs>
@@ -316,8 +302,8 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
316
302
  <List>
317
303
  {pages.map((page: Page) => {
318
304
  return (
319
- <>
320
- <ScrollLink key={page.name} href={`#${page.slug}`}>
305
+ <Fragment key={page.name}>
306
+ <ScrollLink href={`#${page.slug}`}>
321
307
  <ListItem
322
308
  /* onClick={() => {
323
309
  router.push(page.url);
@@ -328,7 +314,7 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
328
314
  </ListItem>
329
315
  </ScrollLink>
330
316
  <Divider />
331
- </>
317
+ </Fragment>
332
318
  );
333
319
  })}
334
320
  </List>
@@ -37,7 +37,11 @@ export function Footer({ data }: Readonly<FooterProps>) {
37
37
  <div className="flex items-center space-x-4">
38
38
  {socialLink.map((link) => {
39
39
  return (
40
- <Link className="text-white hover:text-gray-300" href={link.url}>
40
+ <Link
41
+ className="text-white hover:text-gray-300"
42
+ href={link.url}
43
+ key={link.id}
44
+ >
41
45
  {selectSocialIcon(link.url)}
42
46
  <span className="sr-only">Visit us at {link.text}</span>
43
47
  </Link>
@@ -1,6 +1,5 @@
1
1
  import ScrollNavbar from "../components/ScrollNavbar.tsx";
2
2
  import React from "react";
3
- import thumbnail from "../../public/placeholders/thumbnail_100X100.png";
4
3
  import logoText from "../../public/logo_text.png";
5
4
 
6
5
  export default {
@@ -9,8 +8,6 @@ export default {
9
8
  };
10
9
 
11
10
  const Template = ({ ...args }) => {
12
- console.log(thumbnail);
13
-
14
11
  return <ScrollNavbar {...args} />;
15
12
  };
16
13
 
@@ -10,6 +10,7 @@ const Template = ({ numberOfChildren, ...args }) => (
10
10
  <Stack {...args}>
11
11
  {[...Array(numberOfChildren).keys()].map((n) => (
12
12
  <div
13
+ key={n}
13
14
  style={{
14
15
  width: "50px",
15
16
  height: "50px",