@selfcommunity/react-ui 0.1.2-alpha.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Quentral Srl
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,12 @@
+@selfCommunity/react-ui
+=============
+
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/selfcommunity/community-js/blob/master/LICENSE)
+[![npm latest package](https://img.shields.io/npm/v/@selfcommunity/react-ui/latest.svg)](https://www.npmjs.com/package/@selfcommunity/react-ui)
+[![npm downloads](https://img.shields.io/npm/dm/@selfcommunity/react-ui.svg)](https://www.npmjs.com/package/@selfcommunity/react-ui)
+[![Follow on Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/community_self.svg?style=social&label=Follow%20%40SelfCommunity)](https://twitter.com/community_self)
+
+
+### Install
+
+`npm install @selfcommunity/react-ui`

package/lib/cjs/components/AccountRecover/AccountRecover.js

@@ -0,0 +1,144 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = AccountRecover;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@mui/material/styles");
+
+var _reactCore = require("@selfcommunity/react-core");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactIntl = require("react-intl");
+
+var _lab = require("@mui/lab");
+
+var _EmailTextField = _interopRequireDefault(require("../../shared/EmailTextField"));
+
+var _useThemeProps = _interopRequireDefault(require("@mui/material/styles/useThemeProps"));
+
+const _excluded = ["className", "onSuccess", "TextFieldProps", "ButtonProps"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = 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.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const PREFIX = 'SCAccountRecover';
+const classes = {
+  root: `${PREFIX}-root`,
+  email: `${PREFIX}-email`
+};
+const Root = (0, _styles.styled)('form', {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  [`&.${classes.root} .MuiTextField-root, &.${classes.root} .MuiButton-root`]: {
+    margin: theme.spacing(1, 0, 1, 0)
+  },
+  [`&.${classes.root} .MuiTypography-root`]: {
+    margin: theme.spacing(1, 0, 1, 0)
+  }
+}));
+
+/**
+ * > API documentation for the Community-UI AccountRecover component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {AccountRecover} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCAccountRecover` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCAccountRecover-root|Styles applied to the root element.|
+ |email|.SCAccountRecover-email|Styles applied to the email TextField.|
+
+ *
+ * @param inProps
+ */
+function AccountRecover(inProps) {
+  const props = (0, _useThemeProps.default)({
+    props: inProps,
+    name: PREFIX
+  }); // PROPS
+
+  const {
+    className,
+    onSuccess = null,
+    TextFieldProps = {
+      variant: 'outlined',
+      fullWidth: true
+    },
+    ButtonProps = {
+      variant: 'contained'
+    }
+  } = props,
+        rest = _objectWithoutPropertiesLoose(props, _excluded); // STATE
+
+
+  const [email, setEmail] = (0, _react.useState)('');
+  const [emailError, setEmailError] = (0, _react.useState)('');
+  const [isSubmitting, setIsSubmitting] = (0, _react.useState)(false); // CONTEXT
+
+  const scUserContext = (0, _reactCore.useSCUser)();
+  const scRoutingContext = (0, _reactCore.useSCRouting)(); // HANDLERS
+
+  const handleSubmit = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsSubmitting(true); // TODO: recover API call
+
+    onSuccess && onSuccess(null);
+    return false;
+  };
+
+  if (scUserContext.user !== null) {
+    // User already logged in
+    return null;
+  } // RENDER
+
+
+  return /*#__PURE__*/_react.default.createElement(Root, _extends({
+    className: (0, _classnames.default)(classes.root, className)
+  }, rest, {
+    onSubmit: handleSubmit
+  }), /*#__PURE__*/_react.default.createElement(_EmailTextField.default, _extends({
+    className: classes.email,
+    label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "ui.accountRecover.email.label",
+      defaultMessage: "ui.accountRecover.email.label"
+    })
+  }, TextFieldProps, {
+    value: email,
+    onChange: event => setEmail(event.target.value),
+    error: Boolean(emailError),
+    helperText: emailError
+  })), /*#__PURE__*/_react.default.createElement(_lab.LoadingButton, _extends({
+    type: "submit"
+  }, ButtonProps, {
+    loading: isSubmitting,
+    disabled: !email
+  }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+    id: "ui.accountRecover.submit",
+    defaultMessage: "ui.accountRecover.submit"
+  })));
+}

package/lib/cjs/components/AccountRecover/AccountRecover.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.Base = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+var _default = {
+  title: 'Design System/SC UI/Account Recover',
+  component: _index.default // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+
+}; // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    width: 400
+  }
+}, /*#__PURE__*/_react.default.createElement(_index.default, args));
+
+const Base = Template.bind({});
+exports.Base = Base;
+Base.args = {
+  /* the args you need here will depend on your component */
+};

package/lib/cjs/components/AccountRecover/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _AccountRecover = _interopRequireWildcard(require("./AccountRecover"));
+
+exports.AccountRecoverProps = _AccountRecover.AccountRecoverProps;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = _AccountRecover.default;
+exports.default = _default;

package/lib/cjs/components/AccountSignIn/AccountSignIn.js

@@ -0,0 +1,182 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = AccountSignIn;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@mui/material/styles");
+
+var _apiServices = require("@selfcommunity/api-services");
+
+var _reactCore = require("@selfcommunity/react-core");
+
+var _material = require("@mui/material");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactIntl = require("react-intl");
+
+var _lab = require("@mui/lab");
+
+var _PasswordTextField = _interopRequireDefault(require("../../shared/PasswordTextField"));
+
+var _Errors = require("../../constants/Errors");
+
+var _useThemeProps = _interopRequireDefault(require("@mui/material/styles/useThemeProps"));
+
+const _excluded = ["className", "onSubmit", "onSuccess", "TextFieldProps", "ButtonProps"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = 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.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const PREFIX = 'SCAccountSignIn';
+const classes = {
+  root: `${PREFIX}-root`,
+  username: `${PREFIX}-username`,
+  password: `${PREFIX}-password`
+};
+const Root = (0, _styles.styled)('form', {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  [`&.${classes.root} .MuiTextField-root, &.${classes.root} .MuiButton-root`]: {
+    margin: theme.spacing(1, 0, 1, 0)
+  }
+}));
+
+/**
+ * > API documentation for the Community-UI AccountSignIn component. Learn about the available props and the CSS API.
+ * > This component support [OAuth2 authentication](https://developers.selfcommunity.com/docs/api/authentication/oauth#password) protocol with grant_type password
+
+ #### Import
+
+ ```jsx
+ import {AccountSignIn} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCAccountSignIn` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCAccountSignIn-root|Styles applied to the root element.|
+ |username|.SCAccountSignIn-username|Styles applied to the username TextField.|
+ |password|.SCAccountSignIn-password|Styles applied to the password TextField.|
+
+ *
+ * @param inProps
+ */
+function AccountSignIn(inProps) {
+  const props = (0, _useThemeProps.default)({
+    props: inProps,
+    name: PREFIX
+  }); // PROPS
+
+  const {
+    className,
+    onSubmit = null,
+    onSuccess = null,
+    TextFieldProps = {
+      variant: 'outlined',
+      fullWidth: true
+    },
+    ButtonProps = {
+      variant: 'contained'
+    }
+  } = props,
+        rest = _objectWithoutPropertiesLoose(props, _excluded); // STATE
+
+
+  const [username, setUsername] = (0, _react.useState)('');
+  const [password, setPassword] = (0, _react.useState)('');
+  const [isSubmitting, setIsSubmitting] = (0, _react.useState)(false); // CONTEXT
+
+  const scUserContext = (0, _reactCore.useSCUser)(); // HANDLERS
+
+  const handleSubmit = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsSubmitting(true);
+
+    if (onSubmit) {
+      onSubmit(username, password);
+    } else if (scUserContext.session.clientId) {
+      const formData = new FormData();
+      formData.append('client_id', scUserContext.session.clientId);
+      formData.append('grant_type', 'password');
+      formData.append('username', username);
+      formData.append('password', password);
+
+      _apiServices.http.request({
+        url: _apiServices.Endpoints.OAuthToken.url({}),
+        method: _apiServices.Endpoints.OAuthToken.method,
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        },
+        data: formData
+      }).then(res => {
+        onSuccess && onSuccess(res.data);
+        setIsSubmitting(false);
+      }).catch(error => {
+        setIsSubmitting(false);
+
+        _reactCore.Logger.error(_Errors.SCOPE_SC_UI, error);
+      });
+    }
+
+    return false;
+  };
+
+  if (scUserContext.user !== null) {
+    // User already logged in
+    return null;
+  } // RENDER
+
+
+  return /*#__PURE__*/_react.default.createElement(Root, _extends({
+    className: (0, _classnames.default)(classes.root, className)
+  }, rest, {
+    onSubmit: handleSubmit
+  }), /*#__PURE__*/_react.default.createElement(_material.TextField, _extends({
+    className: classes.username,
+    label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "ui.accountSignin.username.label",
+      defaultMessage: "ui.accountSignin.username.label"
+    })
+  }, TextFieldProps, {
+    value: username,
+    onChange: event => setUsername(event.target.value)
+  })), /*#__PURE__*/_react.default.createElement(_PasswordTextField.default, _extends({
+    className: classes.password,
+    label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "ui.accountSignin.password.label",
+      defaultMessage: "ui.accountSignin.password.label"
+    })
+  }, TextFieldProps, {
+    value: password,
+    onChange: event => setPassword(event.target.value)
+  })), /*#__PURE__*/_react.default.createElement(_lab.LoadingButton, _extends({
+    type: "submit"
+  }, ButtonProps, {
+    loading: isSubmitting,
+    disabled: !username || !password
+  }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+    id: "ui.accountSignin.submit",
+    defaultMessage: "ui.accountSignin.submit"
+  })));
+}

package/lib/cjs/components/AccountSignIn/AccountSignIn.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.Base = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+var _default = {
+  title: 'Design System/SC UI/Account Sign In',
+  component: _index.default // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+
+}; // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    width: 400
+  }
+}, /*#__PURE__*/_react.default.createElement(_index.default, args));
+
+const Base = Template.bind({});
+exports.Base = Base;
+Base.args = {
+  /* the args you need here will depend on your component */
+  onSuccess: data => console.log(data)
+};

package/lib/cjs/components/AccountSignIn/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _AccountSignIn = _interopRequireWildcard(require("./AccountSignIn"));
+
+exports.AccountSignInProps = _AccountSignIn.AccountSignInProps;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = _AccountSignIn.default;
+exports.default = _default;

package/lib/cjs/components/AccountSignUp/AccountSignUp.js

@@ -0,0 +1,175 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = AccountSignUp;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@mui/material/styles");
+
+var _reactCore = require("@selfcommunity/react-core");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactIntl = require("react-intl");
+
+var _lab = require("@mui/lab");
+
+var _PasswordTextField = _interopRequireDefault(require("../../shared/PasswordTextField"));
+
+var _EmailTextField = _interopRequireDefault(require("../../shared/EmailTextField"));
+
+var _UsernameTextField = _interopRequireDefault(require("../../shared/UsernameTextField"));
+
+var _useThemeProps = _interopRequireDefault(require("@mui/material/styles/useThemeProps"));
+
+const _excluded = ["className", "onSuccess", "TextFieldProps", "ButtonProps"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = 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.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const PREFIX = 'SCAccountSignUp';
+const classes = {
+  root: `${PREFIX}-root`,
+  email: `${PREFIX}-email`,
+  username: `${PREFIX}-username`,
+  password: `${PREFIX}-password`
+};
+const Root = (0, _styles.styled)('form', {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  [`&.${classes.root} .MuiTextField-root, &.${classes.root} .MuiButton-root`]: {
+    margin: theme.spacing(1, 0, 1, 0)
+  },
+  [`&.${classes.root} .MuiTypography-root`]: {
+    margin: theme.spacing(1, 0, 1, 0)
+  }
+}));
+
+/**
+ * > API documentation for the Community-UI AccountSignUp component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {AccountSignUp} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCAccountSignUp` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCAccountSignUp-root|Styles applied to the root element.|
+ |email|.SCAccountSignUp-email|Styles applied to the email TextField.|
+ |username|.SCAccountSignUp-username|Styles applied to the username TextField.|
+ |password|.SCAccountSignUp-password|Styles applied to the password TextField.|
+
+ *
+ * @param inProps
+ */
+function AccountSignUp(inProps) {
+  const props = (0, _useThemeProps.default)({
+    props: inProps,
+    name: PREFIX
+  }); // PROPS
+
+  const {
+    className,
+    onSuccess = null,
+    TextFieldProps = {
+      variant: 'outlined',
+      fullWidth: true
+    },
+    ButtonProps = {
+      variant: 'contained'
+    }
+  } = props,
+        rest = _objectWithoutPropertiesLoose(props, _excluded); // STATE
+
+
+  const [email, setEmail] = (0, _react.useState)('');
+  const [emailError, setEmailError] = (0, _react.useState)(null);
+  const [username, setUsername] = (0, _react.useState)('');
+  const [usernameError, setUsernameError] = (0, _react.useState)(null);
+  const [password, setPassword] = (0, _react.useState)('');
+  const [isSubmitting, setIsSubmitting] = (0, _react.useState)(false); // CONTEXT
+
+  const scUserContext = (0, _reactCore.useSCUser)();
+  const scRoutingContext = (0, _reactCore.useSCRouting)(); // HANDLERS
+
+  const handleSubmit = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsSubmitting(true); // TODO: signup API call
+
+    onSuccess && onSuccess(null);
+    return false;
+  };
+
+  if (scUserContext.user !== null) {
+    // User already logged in
+    return null;
+  } // RENDER
+
+
+  return /*#__PURE__*/_react.default.createElement(Root, _extends({
+    className: (0, _classnames.default)(classes.root, className)
+  }, rest, {
+    onSubmit: handleSubmit
+  }), /*#__PURE__*/_react.default.createElement(_EmailTextField.default, _extends({
+    className: classes.email,
+    label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "ui.accountSignup.email.label",
+      defaultMessage: "ui.accountSignup.email.label"
+    })
+  }, TextFieldProps, {
+    error: Boolean(emailError),
+    helperText: emailError,
+    value: email,
+    onChange: event => setEmail(event.target.value)
+  })), /*#__PURE__*/_react.default.createElement(_UsernameTextField.default, _extends({
+    className: classes.username,
+    label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "ui.accountSignup.username.label",
+      defaultMessage: "ui.accountSignup.username.label"
+    })
+  }, TextFieldProps, {
+    error: Boolean(usernameError),
+    helperText: usernameError,
+    value: username,
+    onChange: event => setUsername(event.target.value)
+  })), /*#__PURE__*/_react.default.createElement(_PasswordTextField.default, _extends({
+    className: classes.password,
+    label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "ui.accountSignup.password.label",
+      defaultMessage: "ui.accountSignup.password.label"
+    })
+  }, TextFieldProps, {
+    value: password,
+    onChange: event => setPassword(event.target.value)
+  })), /*#__PURE__*/_react.default.createElement(_lab.LoadingButton, _extends({
+    type: "submit"
+  }, ButtonProps, {
+    loading: isSubmitting,
+    disabled: !email || !username || !password
+  }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+    id: "ui.accountSignup.submit",
+    defaultMessage: "ui.accountSignup.submit"
+  })));
+}

package/lib/cjs/components/AccountSignUp/AccountSignUp.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.Base = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+var _default = {
+  title: 'Design System/SC UI/Account Sign Up',
+  component: _index.default // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+
+}; // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    width: 400
+  }
+}, /*#__PURE__*/_react.default.createElement(_index.default, args));
+
+const Base = Template.bind({});
+exports.Base = Base;
+Base.args = {
+  /* the args you need here will depend on your component */
+};