@iotready/nextjs-components-library 1.0.0-preview1

package/components/accounts/AccountMenu.d.ts

@@ -0,0 +1,9 @@
+import { UserType } from '../../types/user';
+import { Theme } from "@emotion/react";
+export default function UserMenuAccount({ userInfo, handleClick, handleSignOut, accountRoute, theme }: {
+    userInfo: UserType;
+    handleClick: () => Promise<void>;
+    handleSignOut: () => Promise<void>;
+    accountRoute?: string;
+    theme: Theme;
+}): import("react/jsx-runtime").JSX.Element;

package/components/accounts/AccountMenu.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Typography, IconButton, Menu, MenuItem, Tooltip, Avatar, ListItem, ListItemIcon } from '@mui/material';
+import { Logout, Person } from "@mui/icons-material";
+import { useRouter } from 'next/navigation';
+import { ThemeProvider } from '@mui/material/styles';
+export default function UserMenuAccount({ userInfo, handleClick, handleSignOut, accountRoute = '/account', theme }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const router = useRouter();
+    const handleAccountClick = (event) => {
+        event.preventDefault();
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Box, { children: [_jsxs(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, anchorOrigin: {
+                        vertical: 'top',
+                        horizontal: 'right',
+                    }, transformOrigin: {
+                        vertical: 'bottom',
+                        horizontal: 'left',
+                    }, slotProps: {
+                        paper: {
+                            elevation: 0,
+                            sx: {
+                                overflow: 'visible',
+                                filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                                '& .MuiAvatar-root': {
+                                    width: 32,
+                                    height: 32
+                                }
+                            },
+                        }
+                    }, children: [_jsxs(ListItem, { sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(ListItemIcon, { sx: { minWidth: 46 }, children: _jsx(Avatar, {}) }), _jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle2", children: userInfo.name?.replace('/', ' ') }), _jsx(Typography, { variant: "subtitle2", sx: { fontWeight: 'normal' }, children: userInfo.email })] })] }), _jsxs(MenuItem, { onClick: () => { router.push(accountRoute); handleClick(); handleClose(); }, sx: { py: 1 }, children: [_jsx(ListItemIcon, { sx: { mr: 1 }, children: _jsx(Person, { fontSize: "small" }) }), " Manage account"] }), _jsxs(MenuItem, { onClick: async () => await handleSignOut(), sx: { py: 1 }, children: [_jsx(ListItemIcon, { sx: { mr: 1 }, children: _jsx(Logout, { fontSize: "small" }) }), " Sign Out"] })] }), _jsx(Tooltip, { title: "Open menu", children: _jsx(IconButton, { onClick: handleAccountClick, children: _jsx(Avatar, { sx: { bgcolor: 'secondary.main', color: 'secondary.contrastText' }, alt: userInfo.name || userInfo.email, src: userInfo.picture, children: userInfo.picture ? '' : userInfo.name?.charAt(0).toUpperCase() || userInfo.email?.charAt(0).toUpperCase() }) }) })] }) }));
+}

package/components/accounts/AccountProfile.d.ts

@@ -0,0 +1,15 @@
+import { UserType } from '../../types/user';
+import { Theme } from "@emotion/react";
+declare const AccountProfile: ({ userAccount, handleSignOut, handleUpdateUser, handleUpdatePassword, handleDeleteUser, container, containerProps, theme, afterUpdateCallback, confirmMui }: {
+    userAccount: UserType;
+    handleSignOut: () => Promise<void>;
+    handleUpdateUser: (id: string, user: Partial<UserType>) => Promise<void>;
+    handleUpdatePassword: (id: string, password: string) => Promise<void>;
+    handleDeleteUser: (id: string) => Promise<void>;
+    container?: "Card" | "Box";
+    containerProps: any;
+    theme: Theme;
+    afterUpdateCallback: (user: Partial<UserType>) => void;
+    confirmMui?: (options?: any) => Promise<void>;
+}) => import("react/jsx-runtime").JSX.Element;
+export default AccountProfile;

package/components/accounts/AccountProfile.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Alert, Box, Button, Card, CardContent, IconButton, InputAdornment, TextField, Typography } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import { VisibilityOff, Visibility, Delete } from '@mui/icons-material';
+import Grid from '@mui/material/Grid2';
+import { ThemeProvider } from '@mui/material/styles';
+const AccountProfile = ({ userAccount, handleSignOut, handleUpdateUser, handleUpdatePassword, handleDeleteUser, container = 'Box', containerProps = {}, theme, afterUpdateCallback = () => { }, confirmMui }) => {
+    const [userInfo, setUserInfo] = useState(userAccount);
+    const [loadingUdateButton, setLoadingUpdateButton] = useState(false);
+    const [loadingSaveButton, setLoadingSaveButton] = useState(false);
+    const [loadingDeleteButton, setLoadingDeleteButton] = useState(false);
+    // const [loadingUnlinkButton, setLoadingUnlinkButton] = useState(false);
+    const [showEditPassword, setShowEditPassword] = useState(false);
+    const [showNewPassword, setShowNewPassword] = useState(false);
+    const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState('');
+    const handleChange = (event) => {
+        const newUser = {
+            ...userInfo,
+            [event.target.name]: event.target.value,
+        };
+        const name = `${newUser.firstname} ${newUser.lastname}`;
+        setUserInfo({
+            ...newUser,
+            name
+        });
+    };
+    const handleClickShowPassword = () => setShowNewPassword((show) => !show);
+    const handleMouseDownPassword = (event) => {
+        event.preventDefault();
+    };
+    const handleClickShowConfirmPassword = () => setShowConfirmPassword((show) => !show);
+    const handleMouseDownConfirmPassword = (event) => {
+        event.preventDefault();
+    };
+    const savePassword = async () => {
+        if (password === "") {
+            setError('Password is required');
+            return;
+        }
+        if (confirmPassword === "") {
+            setError('Confirm password is required');
+            return;
+        }
+        if (password !== confirmPassword) {
+            setError('Password and Confirmation password must be the same');
+            return;
+        }
+        const passwordRegex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~ ]).{8,}$/;
+        if (!passwordRegex.test(password)) {
+            setError(`Password must be longer than 8 characters and must contain 1 uppercase letter (A-Z), 1 lowercase letter (a-z), 1 digit (0-9) e 1 special symbol (!"#$%&'()*+,-./:;<=>?@[\]^_{|}~ ).`);
+            return;
+        }
+        setLoadingSaveButton(true);
+        if (userInfo) {
+            try {
+                await handleUpdatePassword(userInfo.id, password);
+                setError("");
+                setShowEditPassword(false);
+                alert('Password updated');
+            }
+            catch (err) {
+                console.log(err);
+            }
+        }
+        setError('');
+        setLoadingSaveButton(false);
+    };
+    const handleUpdate = async () => {
+        setLoadingUpdateButton(true);
+        if (userInfo) {
+            try {
+                await handleUpdateUser(userInfo.id, { name: userInfo.name, firstname: userInfo.firstname, lastname: userInfo.lastname });
+                if (afterUpdateCallback) {
+                    afterUpdateCallback(userInfo);
+                }
+                alert('User updated');
+            }
+            catch (err) {
+                console.log(err);
+            }
+        }
+        setLoadingUpdateButton(false);
+    };
+    const handleDelete = async () => {
+        if (userInfo) {
+            try {
+                if (confirmMui) {
+                    await confirmMui({ description: "Are you sure you want to delete the account?", confirmationText: "Yes, remove", confirmationButtonProps: { variant: 'contained', color: 'error' } });
+                }
+                else {
+                    confirm("Are you sure you want to delete the account?");
+                }
+                setLoadingDeleteButton(true);
+                await handleDeleteUser(userInfo.id);
+                await handleSignOut();
+            }
+            catch (err) {
+                if (err && err.message) {
+                    console.log(err);
+                }
+            }
+            finally {
+                setLoadingDeleteButton(false);
+            }
+        }
+    };
+    /*const handleUnlinkSocial = async (target: string) => {
+    setLoadingUnlinkButton(true);
+    if (userObject) {
+      try {
+        await confirm({ description: "Are you sure to unlink the connected identity?" });
+        const userResponse = await fetch(`/api/users/unlink`, {
+          method: 'PUT',
+          body: JSON.stringify({ target, userId: userObject.id }),
+        });
+        const responseData = await userResponse.json();
+        if (responseData.ok) {
+          enqueueSnackbar('Identity unlinked successfully', {
+            variant: 'success',
+          });
+          login(userObject)
+        }
+        setLoadingUnlinkButton(false);
+      } catch (err: any) {
+        if (err && err.message) {
+          enqueueSnackbar(err.message, {
+            variant: 'error',
+          });
+        }
+        setLoadingUnlinkButton(false);
+      }
+    }
+  }*/
+    const renderAccountProfile = (_jsxs(Box, { component: "div", children: [!userInfo.name ?
+                _jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: "Please complete the informations below" })
+                : '', _jsx(Grid, { container: true, spacing: 2, children: _jsxs(Grid, { size: { xs: 12, md: 9, lg: 6 }, children: [_jsxs(Box, { component: "div", children: [_jsx(Typography, { variant: "h6", children: "Profile name" }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(TextField, { fullWidth: true, label: "First name", name: "firstname", value: userInfo.firstname, onChange: handleChange, error: !userInfo.firstname || userInfo.firstname === "" ? true : false, helperText: !userInfo.firstname || userInfo.firstname === "" ? "Enter your first name" : '', size: "small" }) }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(TextField, { fullWidth: true, label: "Last name", name: "lastname", value: userInfo.lastname, onChange: handleChange, error: !userInfo.lastname || userInfo.lastname === "" ? true : false, helperText: !userInfo.lastname || userInfo.lastname === "" ? "Enter your last name" : '', size: "small" }) }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(LoadingButton, { variant: "contained", color: "primary", loading: loadingUdateButton, onClick: () => handleUpdate(), disabled: !userInfo.firstname || userInfo.firstname === "" || !userInfo.lastname || userInfo.lastname === "", children: "Update" }) })] }), _jsxs(Box, { component: "div", sx: { mt: 4 }, children: [_jsx(Typography, { variant: "h6", children: "Security" }), !showEditPassword ? _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(Button, { variant: 'outlined', onClick: () => setShowEditPassword(!showEditPassword), children: "Set or edit your password" }) }) : '', showEditPassword ?
+                                    _jsxs(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: [_jsx(TextField, { required: true, fullWidth: true, name: "password", label: "New Password", type: showNewPassword ? 'text' : 'password', id: "password", size: 'small', autoComplete: "current-password", onChange: (e) => setPassword(e.target.value), value: password, slotProps: {
+                                                    input: {
+                                                        endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { "aria-label": "toggle password visibility", onClick: handleClickShowPassword, onMouseDown: handleMouseDownPassword, edge: "end", children: showNewPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) }) }),
+                                                    }
+                                                } }), _jsx(TextField, { sx: { mt: 2 }, required: true, fullWidth: true, label: "Confirm Password", type: showConfirmPassword ? 'text' : 'password', id: "confirm-password", size: 'small', autoComplete: "confirm-password", onChange: (e) => setConfirmPassword(e.target.value), value: confirmPassword, slotProps: {
+                                                    input: {
+                                                        endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { "aria-label": "toggle password visibility", onClick: handleClickShowConfirmPassword, onMouseDown: handleMouseDownConfirmPassword, edge: "end", children: showConfirmPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) }) }),
+                                                    }
+                                                } }), error !== '' ? _jsx(Box, { component: 'div', sx: { mt: 1 }, children: _jsx(Typography, { variant: 'subtitle2', color: 'error', children: error }) }) : '', _jsxs(Box, { component: "div", sx: { mt: 3 }, children: [_jsx(Button, { variant: "contained", color: "inherit", onClick: () => setShowEditPassword(false), sx: { mr: 2 }, children: "Cancel" }), _jsx(LoadingButton, { loading: loadingSaveButton, type: "submit", variant: "contained", color: "primary", onClick: () => savePassword(), children: "Save" })] })] }) : ''] }), _jsxs(Box, { component: "div", sx: { mt: 4 }, children: [_jsx(Typography, { variant: 'h6', children: "Delete account" }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(Alert, { severity: "error", sx: { mt: 2 }, action: _jsxs(LoadingButton, { variant: "contained", color: "error", loading: loadingDeleteButton, onClick: () => handleDelete(), size: 'small', children: [_jsx(Delete, { fontSize: "small", sx: { mr: 1 } }), " Delete"] }), children: "This action cannot be undone" }) })] })] }, 3) })] }));
+    return _jsx(ThemeProvider, { theme: theme, children: container === "Card" ? (_jsx(Card, { ...containerProps, children: _jsx(CardContent, { children: renderAccountProfile }) })) : (_jsx(Box, { ...containerProps, children: renderAccountProfile })) });
+};
+export default AccountProfile;

package/components/accounts/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AccountProfile } from "./AccountProfile";
+export { default as AccountMenu } from "./AccountMenu";

package/components/accounts/index.js

@@ -0,0 +1,2 @@
+export { default as AccountProfile } from "./AccountProfile";
+export { default as AccountMenu } from "./AccountMenu";

package/components/charts/TrendChart.d.ts

@@ -0,0 +1,17 @@
+import 'chartjs-adapter-moment';
+import 'moment/locale/it';
+import { Theme } from "@emotion/react";
+type Measure = {
+    name: string;
+    polltime: number;
+    unit: string;
+};
+declare const TrendChart: ({ deviceId, measures, enableExportData, enableDatePicker, handleGetInfluxData, handleGetFirstTimestamp, theme, ...props }: {
+    deviceId: string;
+    measures: Array<Measure>;
+    enableenableExportData: boolean;
+    enableDatePicker: boolean;
+    handleGetInfluxData: (measure: string, timeStart: number, timeEnd: number, deviceId: string, timeGroup: string, raw: boolean) => Promise<any>;
+    theme: Theme;
+} & any) => import("react/jsx-runtime").JSX.Element;
+export default TrendChart;