@popmenu/common-ui 0.93.0 → 0.95.0

package/build/index.js

@@ -178,6 +178,24 @@ function SvgCheckCircle(props) {
   }))));
 }
 
+var _path$26;
+
+function _extends$4G() { _extends$4G = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4G.apply(this, arguments); }
+
+function SvgX(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4G({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$26 || (_path$26 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M12 4l-8 8m0-8l8 8",
+    stroke: "currentColor"
+  })));
+}
+
 var _g$2y, _defs$1C;
 
 function _extends$4F() { _extends$4F = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4F.apply(this, arguments); }
@@ -832,7 +850,7 @@ var SemanticColors;
     SemanticColors["SECONDARY_DARK"] = "secondary.dark";
     SemanticColors["SECONDARY_LIGHT"] = "secondary.light";
 })(SemanticColors || (SemanticColors = {}));
-var useStyles$1 = core.makeStyles(function (theme) { return ({
+var useStyles$5 = core.makeStyles(function (theme) { return ({
     dividerRoot: {
         gap: theme.spacing(2),
     },
@@ -870,7 +888,7 @@ var useStyles$1 = core.makeStyles(function (theme) { return ({
 }); });
 var Divider = function (props) {
     var className = props.className, text = props.text, textTransform = props.textTransform, TypographyProps = props.TypographyProps;
-    var classes = useStyles$1(props);
+    var classes = useStyles$5(props);
     var casingOffset = textTransform === 'lowercase' ? '.25rem' : 'unset';
     return (React__default['default'].createElement(core.Box, { className: classNames([classes.dividerRoot, className]), display: "flex", alignItems: "center" },
         React__default['default'].createElement(core.Box, { className: classes.dividerLine, display: "flex", flexGrow: 1, height: "1px", marginTop: casingOffset }),
@@ -910,7 +928,7 @@ Link.defaultProps = {
 };
 Link.displayName = 'Link';
 
-var useStyles = core.makeStyles(function (_a) {
+var useStyles$4 = core.makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -924,7 +942,7 @@ var useStyles = core.makeStyles(function (_a) {
 });
 var Paper = React.forwardRef(function (props, ref) {
     var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
-    var classes = useStyles(props);
+    var classes = useStyles$4(props);
     return React__default['default'].createElement(core.Paper, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
 });
 Paper.displayName = 'Paper';
@@ -1110,6 +1128,275 @@ var NumberField = function (props) {
                 React__default['default'].createElement(Icon, { icon: SvgMinusCircle }))) }, restInputProps) }, restProps)));
 };
 
+var useStyles$3 = core.makeStyles(function () { return ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gridGap: 16,
+    },
+}); });
+var FollowerAuthenticationContent = function (props) {
+    var classes = useStyles$3();
+    return React__default['default'].createElement(core.DialogContent, { classes: classes }, props.children);
+};
+
+var FollowerAuthenticationDialogContext = React.createContext(null);
+var FollowerAuthenticationDialogContextProvider = FollowerAuthenticationDialogContext.Provider;
+var useFollowerAuthenticationDialogContext = function () {
+    var context = React.useContext(FollowerAuthenticationDialogContext);
+    if (!context) {
+        throw new Error('useFollowerAuthenticationDialogContext must be called within FollowerAuthenticationDialogContextProvider');
+    }
+    return context;
+};
+
+var FollowerAuthenticationGraphic = function () {
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, graphics = _a.graphics;
+    var graphic = graphics[state.value];
+    if (!graphic)
+        return null;
+    return (React__default['default'].createElement(core.Box, null,
+        React__default['default'].createElement("img", { src: graphic, alt: messages[state.value + "GraphicAlt"] })));
+};
+
+var useStyles$2 = core.makeStyles(function () { return ({
+    form: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100%',
+        gridGap: 16,
+    },
+}); });
+var FollowerAuthenticationForm = function () {
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, locationOptions = _a.locationOptions, dispatch = _a.dispatch, loading = _a.loading;
+    var classes = useStyles$2();
+    var handleSubmit = function (e) {
+        e.preventDefault();
+        var form = e.target;
+        var formData = new FormData(form);
+        var values = Object.fromEntries(formData.entries());
+        dispatch({ type: 'submit-form', context: { values: values } });
+    };
+    var formProps = {
+        id: 'follower-authentication-form',
+        className: classes.form,
+        onSubmit: handleSubmit,
+    };
+    switch (state.value) {
+        case 'initial':
+            return (React__default['default'].createElement("form", __assign({}, formProps),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.initialInputLabel, key: "identifier-input", id: "identifier-input", name: "identifier" }),
+                React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.initialCtaButtonLabel)));
+        case 'signUp':
+            return (React__default['default'].createElement("form", __assign({}, formProps),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.signUpPhoneInputLabel, key: "phone-input", id: "phone-input", name: "phone" }),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.signUpNameInputLabel, key: "name-input", id: "name-input", name: "name" }),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.signUpEmailInputLabel, key: "email-input", id: "email-input", name: "email" }),
+                React__default['default'].createElement(core.TextField, { disabled: loading, select: true, label: messages.signUpLocationInputLabel, key: "location-input", id: "location-input", name: "location" }, locationOptions.map(function (locationOption) { return (React__default['default'].createElement(core.MenuItem, { key: locationOption.value, value: locationOption.value }, locationOption.label)); })),
+                React__default['default'].createElement(core.Typography, { style: { alignSelf: 'start' } }, messages.signUpBirthdaySectionLabel),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.signUpMonthInputLabel, key: "birthday-month-input", id: "birthday-month-input", name: "birthdayMonth" }),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.signUpDayInputLabel, key: "birthday-date-input", id: "birthday-date-input", name: "birthdayDate" }),
+                React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.signUp)));
+        case 'emailFound':
+            return (React__default['default'].createElement("form", __assign({}, formProps),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.defaultFormValues.email }),
+                React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.emailFoundCtaButtonLabel)));
+        case 'emailAuthCode':
+            return (React__default['default'].createElement("form", __assign({}, formProps),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.emailAuthCodeInputLabel, key: "code-input", id: "code-input", name: "code" }),
+                React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
+        case 'emailPasswordSignIn':
+            return (React__default['default'].createElement("form", __assign({}, formProps),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.defaultFormValues.email, InputLabelProps: { shrink: true } }),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.passwordInputLabel, key: "password-input", id: "password-input", name: "password", inputProps: { type: 'password' } }),
+                React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
+        case 'phoneFound':
+            return (React__default['default'].createElement("form", __assign({}, formProps),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.defaultFormValues.phone }),
+                React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.phoneFoundCtaButtonLabel)));
+        case 'phoneAuthCode':
+            return (React__default['default'].createElement("form", __assign({}, formProps),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.phoneAuthCodeInputLabel, key: "code-input", id: "code-input", name: "code" }),
+                React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
+        case 'phonePasswordSignIn':
+            return (React__default['default'].createElement("form", __assign({}, formProps),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.defaultFormValues.phone, InputLabelProps: { shrink: true } }),
+                React__default['default'].createElement(core.TextField, { disabled: loading, label: messages.passwordInputLabel, key: "password-input", id: "password-input", name: "password", inputProps: { type: 'password' } }),
+                React__default['default'].createElement(core.Button, { disabled: loading, type: "submit" }, messages.signIn)));
+        case 'welcome':
+            return null;
+        default:
+            return null;
+    }
+};
+
+var useStyles$1 = core.makeStyles(function () { return ({
+    main: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gridGap: 16,
+    },
+}); });
+var FollowerAuthenticationAltActions = function () {
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, dispatch = _a.dispatch, messages = _a.messages, logos = _a.logos;
+    var classes = useStyles$1();
+    switch (state.value) {
+        case 'initial':
+            return (React__default['default'].createElement(core.Box, { className: classes.main },
+                React__default['default'].createElement(core.Divider, null),
+                React__default['default'].createElement(core.Button, { variant: "outlined", startIcon: logos.facebook, onClick: function () {
+                        dispatch({ type: 'click-facebook-continue' });
+                    } }, messages.continueWithFacebookButtonLabel),
+                React__default['default'].createElement(core.Button, { variant: "outlined", startIcon: logos.google, onClick: function () {
+                        dispatch({ type: 'click-google-continue' });
+                    } }, messages.continueWithGoogleButtonLabel)));
+        case 'signUp':
+            return null;
+        case 'emailFound':
+            return (React__default['default'].createElement(core.Box, { className: classes.main },
+                React__default['default'].createElement(core.Divider, null),
+                React__default['default'].createElement(core.Button, { variant: "outlined", onClick: function () {
+                        dispatch({ type: 'click-password-continue' });
+                    } }, messages.signInWithPassword)));
+        case 'emailAuthCode':
+            return null;
+        case 'emailPasswordSignIn':
+            return (React__default['default'].createElement(core.Box, { className: classes.main },
+                React__default['default'].createElement(core.Divider, null),
+                React__default['default'].createElement(core.Button, { variant: "outlined", onClick: function () {
+                        var form = document.querySelector('#follower-authentication-form');
+                        var formData = new FormData(form);
+                        var values = Object.fromEntries(formData.entries());
+                        dispatch({ type: 'click-get-code', context: { values: values } });
+                    } }, messages.emailFoundCtaButtonLabel)));
+        case 'phoneFound':
+            return null;
+        case 'phoneAuthCode':
+            return null;
+        case 'phonePasswordSignIn':
+            return (React__default['default'].createElement(core.Box, { className: classes.main },
+                React__default['default'].createElement(core.Divider, null),
+                React__default['default'].createElement(core.Button, { variant: "outlined", onClick: function () {
+                        var form = document.querySelector('#follower-authentication-form');
+                        var formData = new FormData(form);
+                        var values = Object.fromEntries(formData.entries());
+                        dispatch({ type: 'click-get-code', context: { values: values } });
+                    } }, messages.phoneFoundCtaButtonLabel)));
+        case 'welcome':
+            return (React__default['default'].createElement(core.Button, { onClick: function () {
+                    dispatch({ type: 'click-done' });
+                } }, messages.done));
+        default:
+            return null;
+    }
+};
+
+var FollowerAuthenticationBody = function () {
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(FollowerAuthenticationForm, null),
+        React__default['default'].createElement(FollowerAuthenticationAltActions, null)));
+};
+
+var FollowerAuthenticationFooter = function () {
+    var _a = useFollowerAuthenticationDialogContext(), messages = _a.messages, logos = _a.logos;
+    console.log(logos.popmenu);
+    return (React__default['default'].createElement(core.Box, { display: "flex", gridGap: 8 },
+        React__default['default'].createElement(core.Typography, { variant: "body2" }, messages.poweredBy),
+        logos.popmenu));
+};
+
+var FollowerAuthenticationTitle = function () {
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages;
+    var title = messages[state.value + "Title"];
+    return (React__default['default'].createElement(core.Box, null,
+        React__default['default'].createElement(core.Typography, { variant: "h1", align: "center" }, title)));
+};
+
+var FollowerAuthenticationInfo = function () {
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages;
+    var info = messages[state.value + "Info"];
+    if (!info)
+        return null;
+    return (React__default['default'].createElement(core.Box, null,
+        React__default['default'].createElement(core.Typography, { align: "center" }, info)));
+};
+
+var useStyles = core.makeStyles(function () { return ({
+    root: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+    },
+}); });
+var FollowerAuthenticationCloseButton = function () {
+    var _a = useFollowerAuthenticationDialogContext(), messages = _a.messages, dispatch = _a.dispatch;
+    var classes = useStyles();
+    var handleClose = function () {
+        dispatch({ type: 'click-close' });
+    };
+    return (React__default['default'].createElement(core.IconButton, { classes: classes, "aria-label": messages.closeButtonLabel, onClick: handleClose },
+        React__default['default'].createElement(SvgX, null)));
+};
+
+var theme = {
+    palette: {
+        primary: { main: '#2E3042' },
+    },
+    typography: {
+        h1: {
+            fontFamily: 'Poppins',
+            fontSize: '24px',
+            fontWeight: 400,
+            lineHeight: '36px',
+        },
+    },
+    props: {
+        MuiTextField: {
+            variant: 'outlined',
+            fullWidth: true,
+        },
+        MuiButton: {
+            variant: 'contained',
+            color: 'primary',
+            disableElevation: true,
+            fullWidth: true,
+        },
+    },
+    overrides: {
+        MuiButton: {
+            root: {
+                borderRadius: 32,
+                textTransform: 'none',
+            },
+        },
+    },
+};
+
+var FollowerAuthenticationDialog = function (props) {
+    var open = props.open, restProps = __rest(props, ["open"]);
+    var theme$1 = core.createTheme(theme);
+    var fullScreen = core.useMediaQuery(function (_a) {
+        var breakpoints = _a.breakpoints;
+        return breakpoints.down('sm');
+    });
+    var handleClose = function () {
+        props.dispatch({ type: 'click-close' });
+    };
+    return (React__default['default'].createElement(core.ThemeProvider, { theme: theme$1 },
+        React__default['default'].createElement(FollowerAuthenticationDialogContextProvider, { value: restProps },
+            React__default['default'].createElement(core.Dialog, { open: open, fullScreen: fullScreen, onClose: handleClose },
+                React__default['default'].createElement(FollowerAuthenticationContent, null,
+                    React__default['default'].createElement(FollowerAuthenticationCloseButton, null),
+                    React__default['default'].createElement(FollowerAuthenticationGraphic, null),
+                    React__default['default'].createElement(FollowerAuthenticationTitle, null),
+                    React__default['default'].createElement(FollowerAuthenticationInfo, null),
+                    React__default['default'].createElement(FollowerAuthenticationBody, null),
+                    React__default['default'].createElement(FollowerAuthenticationFooter, null))))));
+};
+
 var useCollapsibleText = function () {
     var _a = React.useState(false), open = _a[0], setOpen = _a[1];
     var collapseState = React.useState(false);
@@ -1563,6 +1850,7 @@ exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.CollapsibleText = CollapsibleText;
 exports.Divider = Divider;
+exports.FollowerAuthenticationDialog = FollowerAuthenticationDialog;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Link = Link;