@selfcommunity/react-ui 0.1.2-alpha.0

package/lib/cjs/components/IncubatorsList/Skeleton.js

@@ -0,0 +1,66 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = IncubatorsListSkeleton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CardContent = _interopRequireDefault(require("@mui/material/CardContent"));
+
+var _List = _interopRequireDefault(require("@mui/material/List"));
+
+var _styles = require("@mui/material/styles");
+
+var _Incubator = require("../Incubator");
+
+var _Widget = _interopRequireDefault(require("../Widget"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const PREFIX = 'SCIncubatorsListSkeleton';
+const classes = {
+  root: `${PREFIX}-root`,
+  list: `${PREFIX}-list`
+};
+const Root = (0, _styles.styled)(_Widget.default)(({
+  theme
+}) => ({
+  [`& .${classes.list}`]: {
+    marginLeft: -16,
+    marginRight: -16
+  }
+}));
+/**
+ * > API documentation for the Community-UI Incubators List Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {IncubatorsListSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCIncubatorsListSkeleton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCIncubatorsListSkeleton-root|Styles applied to the root element.|
+ |list|.SCIncubatorsListSkeleton-list|Styles applied to the list element.|
+ *
+ */
+
+function IncubatorsListSkeleton(props) {
+  return /*#__PURE__*/_react.default.createElement(Root, _extends({
+    className: classes.root
+  }, props), /*#__PURE__*/_react.default.createElement(_CardContent.default, null, /*#__PURE__*/_react.default.createElement(_List.default, {
+    className: classes.list
+  }, [...Array(4)].map((category, index) => /*#__PURE__*/_react.default.createElement(_Incubator.IncubatorSkeleton, {
+    key: index,
+    elevation: 0
+  })))));
+}

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

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _IncubatorsList = _interopRequireWildcard(require("./IncubatorsList"));
+
+exports.IncubatorsListProps = _IncubatorsList.IncubatorsListProps;
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+exports.IncubatorsListSkeleton = _Skeleton.default;
+
+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; }
+
+var _default = _IncubatorsList.default;
+exports.default = _default;

package/lib/cjs/components/InlineComposer/InlineComposer.js

@@ -0,0 +1,221 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = InlineComposer;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactCore = require("@selfcommunity/react-core");
+
+var _material = require("@mui/material");
+
+var _styles = require("@mui/material/styles");
+
+var _Media = require("../../shared/Media");
+
+var _Composer = _interopRequireWildcard(require("../Composer"));
+
+var _Icon = _interopRequireDefault(require("@mui/material/Icon"));
+
+var _reactIntl = require("react-intl");
+
+var _notistack = require("notistack");
+
+var _Widget = _interopRequireDefault(require("../Widget"));
+
+var _useThemeProps = _interopRequireDefault(require("@mui/material/styles/useThemeProps"));
+
+const _excluded = ["mediaObjectTypes", "defaultValue", "onSuccess"];
+
+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 = 'SCInlineComposer';
+const classes = {
+  root: `${PREFIX}-root`,
+  content: `${PREFIX}-content`,
+  input: `${PREFIX}-input`,
+  actions: `${PREFIX}-actions`,
+  avatar: `${PREFIX}-avatar`
+};
+const Root = (0, _styles.styled)(_Widget.default, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2),
+  [`& .${classes.content}`]: {
+    padding: theme.spacing(),
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    [`& .${classes.input}`]: {
+      flexGrow: 2
+    },
+    [`& .${classes.input} .MuiButton-text`]: {
+      justifyContent: 'flex-start',
+      textTransform: 'none'
+    }
+  }
+}));
+const PREFERENCES = [_reactCore.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED, _reactCore.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED, _reactCore.SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED, _reactCore.SCPreferences.ADDONS_POLLS_ENABLED, _reactCore.SCPreferences.ADDONS_VIDEO_UPLOAD_ENABLED];
+const INITIAL_STATE = {
+  open: false,
+  view: null
+};
+/**
+ > API documentation for the Community-UI Inline Composer component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {InlineComposer} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCInlineComposer` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCInlineComposer-root|Styles applied to the root element.|
+ |content|.SCInlineComposer-content|Styles applied to the content element.|
+ |input|.SCInlineComposer-input|Styles applied to the input element.|
+ |actions|.SCInlineComposer-actions|Styles applied to the actions section.|
+ |avatar|.SCInlineComposer-avatar|Styles applied to the avatar element.|
+
+
+ * @param inProps
+ */
+
+function InlineComposer(inProps) {
+  // PROPS
+  const props = (0, _useThemeProps.default)({
+    props: inProps,
+    name: PREFIX
+  });
+
+  const {
+    mediaObjectTypes = [_Media.Image, _Media.Document, _Media.Link],
+    defaultValue,
+    onSuccess = null
+  } = props,
+        rest = _objectWithoutPropertiesLoose(props, _excluded); // Context
+
+
+  const scContext = (0, _react.useContext)(_reactCore.SCContext);
+  const scPreferencesContext = (0, _react.useContext)(_reactCore.SCPreferencesContext);
+  const scUserContext = (0, _react.useContext)(_reactCore.SCUserContext);
+  const {
+    enqueueSnackbar
+  } = (0, _notistack.useSnackbar)(); // State variables
+
+  const [state, setState] = (0, _react.useState)(Object.assign({}, INITIAL_STATE));
+  const {
+    open,
+    view
+  } = state;
+  /*
+   * Compute preferences
+   */
+
+  const preferences = (0, _react.useMemo)(() => {
+    const _preferences = {};
+    PREFERENCES.map(p => _preferences[p] = p in scPreferencesContext.preferences ? scPreferencesContext.preferences[p].value : null);
+    return _preferences;
+  }, [scPreferencesContext.preferences]); // Handlers
+
+  const handleOpen = view => {
+    return () => {
+      if (scUserContext.user) {
+        if (_reactCore.UserUtils.isBlocked(scUserContext.user)) {
+          enqueueSnackbar( /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+            id: "ui.common.userBlocked",
+            defaultMessage: "ui.common.userBlocked"
+          }), {
+            variant: 'warning',
+            autoHideDuration: 3000
+          });
+        } else {
+          setState({
+            view,
+            open: true
+          });
+        }
+      } else {
+        scContext.settings.handleAnonymousAction();
+      }
+    };
+  };
+
+  const handleClose = () => {
+    setState(Object.assign({}, INITIAL_STATE));
+  };
+
+  const handleSuccess = feedObject => {
+    if (onSuccess) {
+      onSuccess(feedObject);
+    }
+
+    enqueueSnackbar( /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "ui.inlineComposer.success",
+      defaultMessage: "ui.inlineComposer.success"
+    }), {
+      variant: 'success',
+      autoHideDuration: 3000
+    });
+    setState(Object.assign({}, INITIAL_STATE));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Root, _extends({
+    className: classes.root
+  }, rest), /*#__PURE__*/_react.default.createElement(_material.CardContent, {
+    className: classes.content
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: classes.input
+  }, /*#__PURE__*/_react.default.createElement(_material.Button, {
+    variant: "text",
+    disableFocusRipple: true,
+    disableRipple: true,
+    disableElevation: true,
+    onClick: handleOpen(_Composer.MAIN_VIEW),
+    fullWidth: true,
+    color: "inherit"
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+    id: "ui.inlineComposer.label",
+    defaultMessage: "ui.inlineComposer.label"
+  }))), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: classes.actions
+  }, mediaObjectTypes.filter(mediaObjectType => mediaObjectType.editButton !== null).map(mediaObjectType => /*#__PURE__*/_react.default.createElement(mediaObjectType.editButton, {
+    key: mediaObjectType.name,
+    onClick: handleOpen(mediaObjectType.name)
+  })), preferences[_reactCore.SCPreferences.ADDONS_POLLS_ENABLED] && /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    onClick: handleOpen(_Composer.POLL_VIEW)
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, null, "bar_chart"))), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: classes.avatar
+  }, !scUserContext.user ? /*#__PURE__*/_react.default.createElement(_material.Avatar, {
+    variant: "circular"
+  }) : /*#__PURE__*/_react.default.createElement(_material.Avatar, {
+    alt: scUserContext.user.username,
+    variant: "circular",
+    src: scUserContext.user.avatar
+  })))), /*#__PURE__*/_react.default.createElement(_Composer.default, {
+    open: open,
+    view: view,
+    mediaObjectTypes: mediaObjectTypes,
+    defaultValue: defaultValue,
+    maxWidth: "sm",
+    fullWidth: true,
+    scroll: "body",
+    onClose: handleClose,
+    onSuccess: handleSuccess
+  }));
+}

package/lib/cjs/components/InlineComposer/InlineComposer.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/Inline Composer',
+  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: 500
+  }
+}, /*#__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/InlineComposer/InlineComposerSkeleton.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.Base = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Design System/SC UI/Skeleton/Inline Composer',
+  component: _Skeleton.default,
+  argTypes: {},
+  args: {}
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    width: 400
+  }
+}, /*#__PURE__*/_react.default.createElement(_Skeleton.default, args));
+
+const Base = Template.bind({});
+exports.Base = Base;
+Base.args = {};

package/lib/cjs/components/InlineComposer/Skeleton.js

@@ -0,0 +1,121 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = InlineComposerSkeleton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@mui/material/styles");
+
+var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
+
+var _material = require("@mui/material");
+
+var _Widget = _interopRequireDefault(require("../Widget"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const PREFIX = 'SCInlineComposerSkeleton';
+const classes = {
+  root: `${PREFIX}-root`,
+  input: `${PREFIX}-input`,
+  actions: `${PREFIX}-actions`,
+  action: `${PREFIX}-action`,
+  avatar: `${PREFIX}-avatar`
+};
+const Root = (0, _styles.styled)(_Widget.default, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  padding: theme.spacing(),
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  marginBottom: theme.spacing(2),
+  [`& .${classes.input}`]: {
+    flexGrow: 2
+  },
+  [`& .${classes.actions}`]: {
+    marginLeft: 15,
+    marginRight: 15
+  }
+}));
+/**
+ * > API documentation for the Community-UI Inline Composer Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {InlineComposerSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCInlineComposerSkeleton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCInlineComposerSkeleton-root|Styles applied to the root element.|
+ |input|.SCInlineComposerSkeleton-input|Styles applied to the input element.|
+ |actions|.SCInlineComposerSkeleton-actions|Styles applied to the actions section.|
+ |action|.SCInlineComposerSkeleton-action|Styles applied to the action section.|
+ |avatar|.SCInlineComposerSkeleton-avatar|Styles applied to the avatar element.|
+ *
+ */
+
+function InlineComposerSkeleton() {
+  return /*#__PURE__*/_react.default.createElement(Root, {
+    className: classes.root
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: classes.input
+  }, /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+    sx: {
+      height: 40
+    },
+    animation: "wave",
+    variant: "text"
+  })), /*#__PURE__*/_react.default.createElement(_material.Stack, {
+    className: classes.actions,
+    direction: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    spacing: 2
+  }, /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+    className: classes.action,
+    animation: "wave",
+    variant: "circular",
+    width: 27,
+    height: 27
+  }), /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+    className: classes.action,
+    animation: "wave",
+    variant: "circular",
+    width: 27,
+    height: 27
+  }), /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+    className: classes.action,
+    animation: "wave",
+    variant: "circular",
+    width: 27,
+    height: 27
+  }), /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+    className: classes.action,
+    animation: "wave",
+    variant: "circular",
+    width: 27,
+    height: 27
+  })), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: classes.avatar
+  }, /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+    className: classes.avatar,
+    animation: "wave",
+    variant: "circular",
+    width: 40,
+    height: 40
+  })));
+}

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

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _InlineComposer = _interopRequireWildcard(require("./InlineComposer"));
+
+exports.InlineComposerProps = _InlineComposer.InlineComposerProps;
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+exports.InlineComposerSkeleton = _Skeleton.default;
+
+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; }
+
+var _default = _InlineComposer.default;
+exports.default = _default;