@selfcommunity/react-ui 0.1.2-alpha.0

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

@@ -0,0 +1,23 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _Composer = _interopRequireWildcard(require("./Composer"));
+
+exports.ComposerProps = _Composer.ComposerProps;
+exports.MAIN_VIEW = _Composer.MAIN_VIEW;
+exports.POLL_VIEW = _Composer.POLL_VIEW;
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+exports.ComposerSkeleton = _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 = _Composer.default;
+exports.default = _default;

package/lib/cjs/components/ConnectionUserButton/ConnectionUserButton.js

@@ -0,0 +1,83 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = ConnectionUserButton;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@mui/material/styles");
+
+var _reactCore = require("@selfcommunity/react-core");
+
+var _material = require("@mui/material");
+
+var _FollowUserButton = _interopRequireDefault(require("../FollowUserButton"));
+
+var _FriendshipUserButton = _interopRequireDefault(require("../FriendshipUserButton"));
+
+var _useThemeProps = _interopRequireDefault(require("@mui/material/styles/useThemeProps"));
+
+const _excluded = ["user", "followConnectUserButtonProps"];
+
+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 = 'SCConnectionUserButton';
+const classes = {
+  root: `${PREFIX}-root`
+};
+const Root = (0, _styles.styled)(_material.Box, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({}));
+
+/**
+ > API documentation for the Community-UI Connection User Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {ConnectionUserButton} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCConnectionUserButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCConnectionUserButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function ConnectionUserButton(inProps) {
+  // PROPS
+  const props = (0, _useThemeProps.default)({
+    props: inProps,
+    name: PREFIX
+  });
+
+  const {
+    user = null,
+    followConnectUserButtonProps = {}
+  } = props,
+        rest = _objectWithoutPropertiesLoose(props, _excluded); // CONTEXT
+
+
+  const scPreferencesContext = (0, _react.useContext)(_reactCore.SCPreferencesContext);
+  const followEnabled = _reactCore.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED in scPreferencesContext.preferences && scPreferencesContext.preferences[_reactCore.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED].value;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, followEnabled ? /*#__PURE__*/_react.default.createElement(_FollowUserButton.default, _extends({
+    user: user
+  }, followConnectUserButtonProps, rest)) : /*#__PURE__*/_react.default.createElement(_FriendshipUserButton.default, _extends({
+    user: user
+  }, followConnectUserButtonProps, rest)));
+}

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

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _ConnectionUserButton = _interopRequireDefault(require("./ConnectionUserButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _ConnectionUserButton.default;
+exports.default = _default;

package/lib/cjs/components/CustomAdv/CustomAdv.js

@@ -0,0 +1,98 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = CustomAdv;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@mui/material/styles");
+
+var _material = require("@mui/material");
+
+var _reactCore = require("@selfcommunity/react-core");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _useThemeProps = _interopRequireDefault(require("@mui/material/styles/useThemeProps"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const PREFIX = 'SCCustomAdv';
+const classes = {
+  root: `${PREFIX}-root`,
+  image: `${PREFIX}-image`
+};
+const Root = (0, _styles.styled)(_material.Box, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2),
+  [`& .${classes.image}`]: {
+    width: '100%'
+  }
+}));
+
+/**
+ > API documentation for the Community-UI CustomAdv component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CustomAdv} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCCustomAdv` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCustomAdv-root|Styles applied to the root element.|
+ |image|.SCCustomAdv-image|Styles applied to the image element.|
+
+ * @param inProps
+ */
+function CustomAdv(inProps) {
+  // PROPS
+  const props = (0, _useThemeProps.default)({
+    props: inProps,
+    name: PREFIX
+  });
+  const {
+    id = 'custom_adv',
+    className = null,
+    position,
+    categoriesId = null
+  } = props; // retrieve adv
+
+  const {
+    scCustomAdv
+  } = (0, _reactCore.useSCFetchCustomAdv)({
+    position,
+    categoriesId
+  });
+
+  if (!scCustomAdv) {
+    return null;
+  }
+
+  const adv = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, scCustomAdv.image && /*#__PURE__*/_react.default.createElement("img", {
+    src: scCustomAdv.image,
+    alt: scCustomAdv.title,
+    className: classes.image
+  }), scCustomAdv.embed_code && /*#__PURE__*/_react.default.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: scCustomAdv.embed_code
+    }
+  }));
+
+  return /*#__PURE__*/_react.default.createElement(Root, {
+    id: id,
+    className: (0, _classnames.default)(classes.root, className)
+  }, scCustomAdv.link ? /*#__PURE__*/_react.default.createElement("a", {
+    href: scCustomAdv.link,
+    title: scCustomAdv.title
+  }, adv) : adv);
+}

package/lib/cjs/components/CustomAdv/CustomAdv.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/CustomAdv',
+  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 */
+  position: 'BELOW_TOPBAR'
+};

package/lib/cjs/components/CustomAdv/CustomAdvSkeleton.stories.js

@@ -0,0 +1,31 @@
+"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 }; }
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+var _default = {
+  title: 'Design System/SC UI/Skeleton/CustomAdv',
+  component: _Skeleton.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(_Skeleton.default, args));
+
+const Base = Template.bind({});
+exports.Base = Base;
+Base.args = {
+  contained: true
+};

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

@@ -0,0 +1,50 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = CustomAdvSkeleton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Skeleton = require("../Skeleton");
+
+var _styles = require("@mui/material/styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const PREFIX = 'SCCustomAdvSkeleton';
+const classes = {
+  root: `${PREFIX}-root`
+};
+const Root = (0, _styles.styled)(_Skeleton.GenericSkeleton, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({}));
+/**
+ * > API documentation for the Community-UI Custom Adv Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CustomAdvSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCustomAdvSkeleton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCustomAdvSkeleton-root|Styles applied to the root element.|
+ *
+ */
+
+function CustomAdvSkeleton() {
+  return /*#__PURE__*/_react.default.createElement(Root, {
+    className: classes.root
+  });
+}

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

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _CustomAdv = _interopRequireWildcard(require("./CustomAdv"));
+
+exports.CustomAdvProps = _CustomAdv.CustomAdvProps;
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+exports.CustomAdvSkeleton = _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 = _CustomAdv.default;
+exports.default = _default;

package/lib/cjs/components/Editor/Editor.js

@@ -0,0 +1,236 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@mui/material/styles");
+
+var _reactIntl = require("react-intl");
+
+var _material = require("@mui/material");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _useThemeProps = _interopRequireDefault(require("@mui/material/styles/useThemeProps"));
+
+var _LexicalComposer = _interopRequireDefault(require("@lexical/react/LexicalComposer"));
+
+var _LexicalContentEditable = _interopRequireDefault(require("@lexical/react/LexicalContentEditable"));
+
+var _LexicalRichTextPlugin = _interopRequireDefault(require("@lexical/react/LexicalRichTextPlugin"));
+
+var _LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
+
+var _plugins = require("./plugins");
+
+var _nodes = _interopRequireDefault(require("./nodes"));
+
+var _LexicalLinkPlugin = _interopRequireDefault(require("@lexical/react/LexicalLinkPlugin"));
+
+var _LexicalAutoFocusPlugin = _interopRequireDefault(require("@lexical/react/LexicalAutoFocusPlugin"));
+
+var _ApiPlugin = _interopRequireDefault(require("./plugins/ApiPlugin"));
+
+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; }
+
+const PREFIX = 'SCEditor';
+const classes = {
+  root: `${PREFIX}-root`,
+  content: `${PREFIX}-content`,
+  placeholder: `${PREFIX}-placeholder`,
+  actions: `${PREFIX}-actions`
+};
+const Root = (0, _styles.styled)(_material.Box, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  boxSizing: 'border-box',
+  cursor: 'text',
+  padding: theme.spacing(1),
+  position: 'relative',
+  [`& .${classes.content}`]: {
+    outline: 'none',
+    minHeight: 60,
+    '& > p': {
+      margin: theme.spacing(1, 0, 1, 0),
+      '&:first-child': {
+        marginTop: 0
+      },
+      '&:last-child': {
+        marginBottom: 0
+      }
+    },
+    '& img': {
+      margin: theme.spacing(1, 0, 1, 0),
+      '&.focused': {
+        outline: '2px solid rgb(60, 132, 244)',
+        userSelect: 'none'
+      }
+    },
+    ['& mention']: {
+      backgroundColor: theme.palette.primary.light
+    }
+  },
+  [`& .${classes.placeholder}`]: {
+    position: 'absolute',
+    top: theme.spacing(1),
+    left: theme.spacing(1),
+    color: theme.palette.text.disabled
+  },
+  [`& .${classes.actions}`]: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    color: theme.palette.text.primary
+  },
+  '& .image-resizer': {
+    display: 'block',
+    width: 7,
+    height: 7,
+    position: 'absolute',
+    backgroundColor: 'rgb(60, 132, 244)',
+    border: '1px solid #fff',
+    '&.image-resizer-n': {
+      top: -6,
+      left: '48%',
+      cursor: 'n-resize'
+    },
+    '&.image-resizer-ne': {
+      top: -6,
+      right: -6,
+      cursor: 'ne-resize'
+    },
+    '&.image-resizer-e': {
+      top: '48%',
+      right: -6,
+      cursor: 'e-resize'
+    },
+    '&.image-resizer-se': {
+      bottom: -2,
+      right: -6,
+      cursor: 'se-resize'
+    },
+    '&.image-resizer-s': {
+      bottom: -2,
+      left: '48%',
+      cursor: 's-resize'
+    },
+    '&.image-resizer-sw': {
+      bottom: -2,
+      left: -6,
+      cursor: 'sw-resize'
+    },
+    '&.image-resizer-w': {
+      bottom: '48%',
+      left: -6,
+      cursor: 'w-resize'
+    },
+    '&.image-resizer-nw': {
+      top: -6,
+      left: -6,
+      cursor: 'nw-resize'
+    }
+  }
+}));
+
+/**
+ * > API documentation for the Community-UI Editor component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {Editor} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCEditor` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEditor-root|Styles applied to the root element.|
+ |content|.SCEditor-content|Styles applied to the content element.|
+
+ * @param inProps
+ */
+const Editor = (inProps, ref) => {
+  // PROPS
+  const props = (0, _useThemeProps.default)({
+    props: inProps,
+    name: PREFIX
+  });
+  const {
+    id = 'editor',
+    className = null,
+    defaultValue = '',
+    readOnly = false,
+    onChange = null
+  } = props;
+  const apiRef = (0, _react.useRef)(); // HANDLERS
+
+  const handleChange = value => {
+    onChange && onChange(value);
+  };
+
+  const handleError = (error, editor) => {
+    console.log(error);
+  };
+
+  const handleFocus = () => {
+    apiRef.current.focus();
+  }; // EXPOSED METHODS
+
+
+  (0, _react.useImperativeHandle)(ref, () => ({
+    focus: () => {
+      apiRef.current.focus();
+    }
+  })); // RENDER
+
+  const initialConfig = (0, _react.useMemo)(() => ({
+    readOnly: readOnly,
+    onError: handleError,
+    nodes: [..._nodes.default]
+  }), [readOnly]);
+  return /*#__PURE__*/_react.default.createElement(Root, {
+    id: id,
+    className: (0, _classnames.default)(classes.root, className)
+  }, /*#__PURE__*/_react.default.createElement(_LexicalComposer.default, {
+    initialConfig: initialConfig
+  }, /*#__PURE__*/_react.default.createElement(_LexicalRichTextPlugin.default, {
+    contentEditable: /*#__PURE__*/_react.default.createElement(_LexicalContentEditable.default, {
+      className: classes.content
+    }),
+    placeholder: /*#__PURE__*/_react.default.createElement(_material.Box, {
+      className: classes.placeholder,
+      onClick: handleFocus
+    }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "ui.editor.placeholder",
+      defaultMessage: "ui.editor.placeholder"
+    }))
+  }), /*#__PURE__*/_react.default.createElement(_plugins.DefaultHtmlValuePlugin, {
+    defaultValue: defaultValue
+  }), /*#__PURE__*/_react.default.createElement(_LexicalAutoFocusPlugin.default, null), /*#__PURE__*/_react.default.createElement(_LexicalHistoryPlugin.HistoryPlugin, null), /*#__PURE__*/_react.default.createElement(_plugins.OnChangePlugin, {
+    onChange: handleChange
+  }), /*#__PURE__*/_react.default.createElement(_LexicalLinkPlugin.default, null), /*#__PURE__*/_react.default.createElement(_plugins.AutoLinkPlugin, null), /*#__PURE__*/_react.default.createElement(_plugins.MentionsPlugin, null), /*#__PURE__*/_react.default.createElement(_material.Stack, {
+    className: classes.actions,
+    direction: "row"
+  }, /*#__PURE__*/_react.default.createElement(_plugins.ImagePlugin, null), /*#__PURE__*/_react.default.createElement(_plugins.EmojiPlugin, null)), /*#__PURE__*/_react.default.createElement(_ApiPlugin.default, {
+    ref: apiRef
+  })));
+};
+
+var _default = /*#__PURE__*/(0, _react.forwardRef)(Editor);
+
+exports.default = _default;

package/lib/cjs/components/Editor/Editor.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/Editor',
+  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 */
+  defaultValue: 'ciao <mention id="1" ext-id="5">@username</mention>'
+};

package/lib/cjs/components/Editor/EditorSkeleton.stories.js

@@ -0,0 +1,31 @@
+"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 }; }
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+var _default = {
+  title: 'Design System/SC UI/Skeleton/Editor',
+  component: _Skeleton.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(_Skeleton.default, args));
+
+const Base = Template.bind({});
+exports.Base = Base;
+Base.args = {
+  contained: true
+};