@memori.ai/memori-react 1.0.0-alpha.1

package/esm/components/StartPanel/StartPanel.css

@@ -0,0 +1,121 @@
+.memori--gamification-badge {
+    position: absolute;
+    right: 0.25rem;
+    bottom: -1.25rem;
+    display: flex;
+    width: 2rem;
+    height: 2rem;
+    align-items: center;
+    justify-content: center;
+    border: 1.5px solid var(--ant-primary-color);
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 0 5px 6px rgba(255, 255, 255, 0.5);
+}
+
+.memori--gamification-badge span {
+    font-size: 1.2rem;
+}
+
+.memori--start-panel {
+    width: 100%;
+    align-self: flex-start;
+    padding: var(--memori-inner-content-pad, 0);
+    border-radius: 10px;
+    margin-top: 2rem;
+    background-color: var(--memori-inner-bg, transparent);
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+}
+
+.memori--start-panel .memori--start-panel-title {
+    color: var(--memori-text-color, var(--ant-primary-color)) !important;
+}
+
+.memori--start-panel .memori--start-panel-description {
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+}
+
+@media (max-width: 870px) {
+    .memori--start-panel {
+        margin-top: 1rem;
+    }
+}
+
+.memori--cover {
+    position: relative;
+    width: 100%;
+    padding-top: 31.25%;
+    border-radius: 3px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.memori--avatar {
+    position: relative;
+    z-index: 0;
+    top: -20px;
+    display: inline-flex;
+    overflow: hidden;
+    width: 60px;
+    height: 60px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    margin-right: 10px;
+    background: #fff;
+    box-shadow: 0 0 5px rgba(50, 50, 50, 0.3);
+}
+
+
+.memori--avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.memori--title {
+    display: inline-block;
+    color: var(--ant-primary-color);
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 1.8;
+}
+
+.memori--description,
+.memori--needsPosition {
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.memori--description-text {
+    display: block;
+}
+
+.memori--translation-toggle {
+    height: auto;
+    padding-right: 0;
+    padding-left: 0;
+    font-size: 0.85em;
+}
+
+.memori--start-description {
+    margin-top: 0.5rem;
+    font-size: 0.85em;
+    opacity: 0.85;
+}
+
+.memori--language-chooser {
+    margin-bottom: 1rem;
+}
+
+.memori--language-chooser svg {
+    margin-right: 0.5rem;
+}
+
+.memori--language-chooser select,
+.memori--language-chooser .memori--select {
+    min-width: 7rem;
+    margin-left: 0.5rem;
+}

package/esm/components/StartPanel/StartPanel.d.ts

@@ -0,0 +1,23 @@
+import { GamificationLevel, Memori, Tenant, Venue } from '@memori.ai/memori-api-client/dist/types';
+import React from 'react';
+import './StartPanel.css';
+export interface Props {
+    memori: Memori;
+    tenant?: Tenant;
+    gamificationLevel?: GamificationLevel;
+    language?: string;
+    userLang?: string;
+    setUserLang: (lang: string) => void;
+    baseUrl?: string;
+    position?: Venue;
+    openPositionDrawer: () => void;
+    integrationConfig?: {
+        [key: string]: any;
+    };
+    instruct?: boolean;
+    sessionId?: string;
+    clickedStart?: boolean;
+    onClickStart?: () => void;
+}
+declare const StartPanel: React.FC<Props>;
+export default StartPanel;

package/esm/components/StartPanel/StartPanel.js

@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from 'react';
+import { getResourceUrl } from '../../helpers/media';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '../ui/Tooltip';
+import { getTranslation } from '../../helpers/translations';
+import Button from '../ui/Button';
+import Translation from '../icons/Translation';
+import { chatLanguages } from '../../helpers/constants';
+import BlockedMemoriBadge from '../BlockedMemoriBadge/BlockedMemoriBadge';
+import './StartPanel.css';
+const StartPanel = ({ memori, tenant, gamificationLevel, language, userLang, setUserLang, baseUrl, position, openPositionDrawer, integrationConfig, instruct = false, sessionId, clickedStart, onClickStart, }) => {
+    var _a, _b;
+    const { t, i18n } = useTranslation();
+    const [translatedDescription, setTranslatedDescription] = useState(memori.description);
+    const [showTranslation, setShowTranslation] = useState(true);
+    const toggleTranslations = () => {
+        setShowTranslation(show => !show);
+    };
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (((_b = (_a = i18n.language) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== null && _b !== void 0 ? _b : 'IT') !==
+            ((_c = language === null || language === void 0 ? void 0 : language.toUpperCase()) !== null && _c !== void 0 ? _c : 'IT') &&
+            !!((_d = memori.description) === null || _d === void 0 ? void 0 : _d.length)) {
+            getTranslation(memori.description, (_f = (_e = i18n.language) === null || _e === void 0 ? void 0 : _e.toUpperCase()) !== null && _f !== void 0 ? _f : 'IT', language, baseUrl)
+                .then(value => {
+                setTranslatedDescription(value.text);
+            })
+                .catch(console.error);
+        }
+    }, [i18n.language, language, memori.description, baseUrl]);
+    return (React.createElement("div", { className: "memori--start-panel" },
+        React.createElement("div", { className: "memori--cover", style: {
+                backgroundImage: `url("${getResourceUrl({
+                    type: 'cover',
+                    tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.id,
+                    resourceURI: memori.coverURL,
+                    baseURL: baseUrl,
+                })}"), url("${getResourceUrl({
+                    type: 'cover',
+                    tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.id,
+                    baseURL: baseUrl,
+                })}")`,
+            } }, !!((_a = gamificationLevel === null || gamificationLevel === void 0 ? void 0 : gamificationLevel.badge) === null || _a === void 0 ? void 0 : _a.length) && (React.createElement("div", { className: "memori--gamification-badge" },
+            React.createElement(Tooltip, { alignLeft: true, content: `${t('gamification.level')} ${gamificationLevel.badge}, ${gamificationLevel.points} ${t('gamification.points')}` },
+                React.createElement("span", { "aria-label": `${t('gamification.level')} ${gamificationLevel.badge}, ${gamificationLevel.points} ${t('gamification.points')}` }, gamificationLevel.badge))))),
+        React.createElement("picture", { className: "memori--avatar" },
+            React.createElement("source", { src: (_b = memori.avatarURL) !== null && _b !== void 0 ? _b : getResourceUrl({
+                    type: 'avatar',
+                    tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.id,
+                    resourceURI: memori.avatarURL,
+                    baseURL: baseUrl,
+                }) }),
+            React.createElement("img", { alt: memori.name, src: memori.avatarURL && memori.avatarURL.length > 0
+                    ? getResourceUrl({
+                        type: 'avatar',
+                        tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.id,
+                        resourceURI: memori.avatarURL,
+                        baseURL: baseUrl,
+                    })
+                    : getResourceUrl({
+                        type: 'avatar',
+                        tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.id,
+                        baseURL: baseUrl,
+                    }) })),
+        React.createElement("h2", { className: "memori--title" }, memori.name),
+        memori.needsPosition && !position && (React.createElement("div", { className: "memori--needsPosition" },
+            React.createElement("p", null, t('write_and_speak.requirePosition')),
+            React.createElement(Button, { primary: true, onClick: () => openPositionDrawer(), className: "memori--start-button" }, t('widget.position')))),
+        ((memori.needsPosition && position) || !memori.needsPosition) && (React.createElement("div", { className: "memori--description" },
+            React.createElement("p", null,
+                React.createElement("span", { className: "memori--description-text" }, translatedDescription && showTranslation
+                    ? translatedDescription
+                    : memori.description),
+                translatedDescription !== memori.description && (React.createElement(Button, { ghost: true, className: "memori--translation-toggle", icon: React.createElement(Translation, null), onClick: () => toggleTranslations() }, showTranslation
+                    ? t('showOriginalText')
+                    : t('showTranslatedText')))),
+            (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.multilanguage) && !instruct && (React.createElement("div", { className: "memori--language-chooser" },
+                React.createElement("label", { id: "user-lang-pref-label", htmlFor: "user-lang-pref" }, t('write_and_speak.iWantToTalkToIn', {
+                    name: memori.name,
+                })),
+                React.createElement("select", { id: "user-lang-pref", value: (userLang !== null && userLang !== void 0 ? userLang : i18n.language).toUpperCase(), "aria-labelledby": "user-lang-pref-label", onChange: e => {
+                        setUserLang(e.target.value);
+                    } }, chatLanguages.map(lang => (React.createElement("option", { key: lang.value, value: lang.value, "aria-label": lang.label }, lang.label)))))),
+            React.createElement(Button, { primary: true, disabled: (!sessionId && memori.privacyType === 'PUBLIC') ||
+                    (!!memori.blockedUntil && !memori.isGiver), loading: clickedStart, onClick: onClickStart, className: "memori--start-button" }, t(`write_and_speak.${!instruct ? 'tryMeButton' : 'instructButton'}`)),
+            React.createElement("p", { className: "memori--start-description" }, instruct
+                ? t('write_and_speak.pageInstructExplanation')
+                : t('write_and_speak.pageTryMeExplanation')),
+            !!memori.blockedUntil && (React.createElement(BlockedMemoriBadge, { memoriName: memori.name, blockedUntil: memori.blockedUntil, showGiverInfo: memori.isGiver, showTitle: true, marginLeft: true }))))));
+};
+export default StartPanel;
+//# sourceMappingURL=StartPanel.js.map

package/esm/components/StartPanel/StartPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StartPanel.js","sourceRoot":"","sources":["../../../src/components/StartPanel/StartPanel.tsx"],"names":[],"mappings":"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"}

package/esm/components/StartPanel/StartPanel.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/react';
+import { Props } from './StartPanel';
+import '../../i18n';
+declare const meta: Meta;
+export default meta;
+export declare const Default: Story<Props>;
+export declare const WithGamificationLevel: Story<Props>;
+export declare const Instruct: Story<Props>;
+export declare const PositionRequired: Story<Props>;
+export declare const WithIntegration: Story<Props>;

package/esm/components/StartPanel/StartPanel.stories.js

@@ -0,0 +1,159 @@
+var _a, _b, _c, _d, _e, _f;
+import React from 'react';
+import { memori, sessionID, integration, tenant } from '../../mocks/data';
+import StartPanel from './StartPanel';
+import '../../i18n';
+const meta = {
+    title: 'Widget/Start panel',
+    component: StartPanel,
+    argTypes: {
+        showShare: {
+            control: {
+                type: 'boolean',
+            },
+        },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+const integrationConfig = {
+    ...JSON.parse((_a = integration.customData) !== null && _a !== void 0 ? _a : '{}'),
+    avatarURL: ((_d = (_c = JSON.parse((_b = integration.customData) !== null && _b !== void 0 ? _b : '{}').avatarURL) === null || _c === void 0 ? void 0 : _c.split('#')) === null || _d === void 0 ? void 0 : _d[0]) +
+        '#' +
+        new Date(Date.now()).getTime(),
+};
+const integrationProperties = {
+    '--memori-chat-bubble-bg': '#fff',
+    ...((integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.buttonBgColor)
+        ? {
+            '--memori-button-bg': integrationConfig.buttonBgColor,
+            '--memori-button-hover-brightness': '1.2',
+            '--ant-primary-color': integrationConfig.buttonBgColor,
+            '--ant-primary-color-hover': integrationConfig.buttonBgColor,
+            '--ant-primary-4': integrationConfig.buttonBgColor,
+            '--ant-primary-5': integrationConfig.buttonBgColor,
+            '--ant-primary-7': integrationConfig.buttonBgColor,
+        }
+        : {
+            '--memori-button-hover-brightness': '1',
+        }),
+    ...((integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.buttonTextColor)
+        ? {
+            '--memori-button-text': integrationConfig.buttonTextColor,
+            '--ant-primary-text': integrationConfig.buttonTextColor,
+        }
+        : {}),
+    ...((integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.blurBackground)
+        ? {
+            '--memori-blur-background': '5px',
+        }
+        : {
+            '--memori-blur-background': '0px',
+        }),
+    ...((integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.innerBgColor)
+        ? {
+            '--memori-inner-bg': `rgba(${integrationConfig.innerBgColor === 'dark'
+                ? '0, 0, 0'
+                : '255, 255, 255'}, ${(_e = integrationConfig.innerBgAlpha) !== null && _e !== void 0 ? _e : 0.4})`,
+            '--memori-inner-content-pad': '1.5rem',
+            '--memori-nav-bg-image': 'none',
+            '--memori-nav-bg': `rgba(${integrationConfig.innerBgColor === 'dark'
+                ? '0, 0, 0'
+                : '255, 255, 255'}, ${(_f = integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.innerBgAlpha) !== null && _f !== void 0 ? _f : 0.4})`,
+        }
+        : {
+            '--memori-inner-content-pad': '0px',
+        }),
+};
+const integrationStylesheet = `
+    #root {
+      ${Object.entries(integrationProperties)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join('\n')}
+    }
+  `;
+const Template = args => (React.createElement("div", { style: { maxWidth: '600px', margin: 'auto' } },
+    args.integrationConfig && (React.createElement("style", { dangerouslySetInnerHTML: { __html: integrationStylesheet } })),
+    React.createElement(StartPanel, { ...args })));
+export const Default = Template.bind({});
+Default.args = {
+    memori,
+    tenant,
+    language: 'it',
+    userLang: 'en',
+    setUserLang: () => { },
+    openPositionDrawer: () => { },
+    instruct: false,
+    sessionId: sessionID,
+    clickedStart: false,
+    onClickStart: () => { },
+};
+export const WithGamificationLevel = Template.bind({});
+WithGamificationLevel.args = {
+    memori,
+    tenant,
+    gamificationLevel: {
+        points: 61,
+        pointsForCurrentBadge: 60,
+        badge: '🌍',
+    },
+    language: 'it',
+    userLang: 'en',
+    setUserLang: () => { },
+    openPositionDrawer: () => { },
+    instruct: false,
+    sessionId: sessionID,
+    clickedStart: false,
+    onClickStart: () => { },
+};
+export const Instruct = Template.bind({});
+Instruct.args = {
+    memori,
+    tenant,
+    gamificationLevel: {
+        points: 61,
+        pointsForCurrentBadge: 60,
+        badge: '🌍',
+    },
+    language: 'it',
+    userLang: 'en',
+    setUserLang: () => { },
+    openPositionDrawer: () => { },
+    instruct: true,
+    sessionId: sessionID,
+    clickedStart: false,
+    onClickStart: () => { },
+};
+export const PositionRequired = Template.bind({});
+PositionRequired.args = {
+    memori: {
+        ...memori,
+        needsPosition: true,
+    },
+    tenant,
+    language: 'it',
+    userLang: 'en',
+    setUserLang: () => { },
+    openPositionDrawer: () => { },
+    instruct: true,
+    sessionId: sessionID,
+    clickedStart: false,
+    onClickStart: () => { },
+};
+export const WithIntegration = Template.bind({});
+WithIntegration.args = {
+    memori,
+    tenant,
+    integrationConfig,
+    language: 'it',
+    userLang: 'en',
+    setUserLang: () => { },
+    openPositionDrawer: () => { },
+    instruct: false,
+    sessionId: sessionID,
+    clickedStart: false,
+    onClickStart: () => { },
+};
+//# sourceMappingURL=StartPanel.stories.js.map

package/esm/components/StartPanel/StartPanel.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StartPanel.stories.js","sourceRoot":"","sources":["../../../src/components/StartPanel/StartPanel.stories.tsx"],"names":[],"mappings":"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"}

package/esm/components/StartPanel/StartPanel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/components/StartPanel/StartPanel.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { memori, tenant, sessionID, integration } from '../../mocks/data';
+import StartPanel from './StartPanel';
+it('renders StartPanel unchanged', () => {
+    const { container } = render(React.createElement(StartPanel, { memori: memori, tenant: tenant, language: "it", userLang: "en", setUserLang: () => { }, openPositionDrawer: () => { }, instruct: false, sessionId: sessionID, clickedStart: false, onClickStart: () => { } }));
+    expect(container).toMatchSnapshot();
+});
+it('renders StartPanel with gamification level unchanged', () => {
+    const { container } = render(React.createElement(StartPanel, { memori: memori, tenant: tenant, gamificationLevel: {
+            points: 61,
+            pointsForCurrentBadge: 60,
+            badge: '🌍',
+        }, language: "it", userLang: "en", setUserLang: () => { }, openPositionDrawer: () => { }, instruct: false, sessionId: sessionID, clickedStart: false, onClickStart: () => { } }));
+    expect(container).toMatchSnapshot();
+});
+it('renders StartPanel on instruct unchanged', () => {
+    const { container } = render(React.createElement(StartPanel, { memori: memori, tenant: tenant, gamificationLevel: {
+            points: 61,
+            pointsForCurrentBadge: 60,
+            badge: '🌍',
+        }, language: "it", userLang: "en", setUserLang: () => { }, openPositionDrawer: () => { }, instruct: true, sessionId: sessionID, clickedStart: false, onClickStart: () => { } }));
+    expect(container).toMatchSnapshot();
+});
+it('renders StartPanel with position required unchanged', () => {
+    const { container } = render(React.createElement(StartPanel, { memori: {
+            ...memori,
+            needsPosition: true,
+        }, tenant: tenant, gamificationLevel: {
+            points: 61,
+            pointsForCurrentBadge: 60,
+            badge: '🌍',
+        }, language: "it", userLang: "en", setUserLang: () => { }, openPositionDrawer: () => { }, instruct: true, sessionId: sessionID, clickedStart: false, onClickStart: () => { } }));
+    expect(container).toMatchSnapshot();
+});
+it('renders StartPanel with integrationConfig unchanged', () => {
+    var _a;
+    const { container } = render(React.createElement(StartPanel, { memori: memori, tenant: tenant, integrationConfig: JSON.parse((_a = integration.customData) !== null && _a !== void 0 ? _a : '{}'), language: "it", userLang: "en", setUserLang: () => { }, openPositionDrawer: () => { }, instruct: false, sessionId: sessionID, clickedStart: false, onClickStart: () => { } }));
+    expect(container).toMatchSnapshot();
+});
+//# sourceMappingURL=StartPanel.test.js.map

package/esm/components/StartPanel/StartPanel.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StartPanel.test.js","sourceRoot":"","sources":["../../../src/components/StartPanel/StartPanel.test.tsx"],"names":[],"mappings":"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"}

package/esm/components/UploadMenu/UploadMenu.css

@@ -0,0 +1,46 @@
+.memori-upload-menu {
+    position: relative;
+    display: inline-block;
+}
+
+.memori--conversation-button {
+    cursor: pointer;
+}
+
+.memori-menu--overlay {
+    position: absolute;
+    right: auto;
+    bottom: 100%;
+    left: 0;
+    display: flex;
+    min-width: 10rem;
+    flex-direction: column;
+    padding: 0.5rem 0;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 0.375rem;
+    margin: 0;
+    margin-top: 0.5rem;
+    background-color: #fff;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
+    list-style: none;
+    outline: none;
+    transform-origin: top right;
+}
+
+.memori-menu--li {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-menu--button {
+    width: 100%;
+    justify-content: flex-start;
+    color: inherit;
+    text-align: left;
+    text-decoration: none;
+}
+
+.memori-menu--icon {
+    width: 1em;
+}

package/esm/components/UploadMenu/UploadMenu.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './UploadMenu.css';
+export interface Props {
+    attachmentsMenuOpen?: 'link' | 'media';
+    setAttachmentsMenuOpen: (value: 'link' | 'media') => void;
+    disabled?: boolean;
+}
+declare const UploadMenu: React.FC<Props>;
+export default UploadMenu;

package/esm/components/UploadMenu/UploadMenu.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Menu } from '@headlessui/react';
+import cx from 'classnames';
+import Button from '../ui/Button';
+import Link from '../icons/Link';
+import Picture from '../icons/Picture';
+import PaperClip from '../icons/PaperClip';
+import './UploadMenu.css';
+const UploadMenu = ({ attachmentsMenuOpen, setAttachmentsMenuOpen, disabled = false, }) => {
+    return (React.createElement(Menu, { as: "div", className: "memori-upload-menu" },
+        React.createElement(Menu.Button, { disabled: disabled, className: cx('memori-button', 'memori-button--circle', 'memori-button--icon-only', 'memori-share-button--button', 'memori--conversation-button') },
+            React.createElement("div", { className: "memori-button--icon" },
+                React.createElement(PaperClip, null))),
+        React.createElement(Menu.Items, { as: "ul", className: "memori-menu--overlay" },
+            React.createElement(Menu.Item, { as: "li", className: "memori-menu--li" },
+                React.createElement(Button, { className: "memori-menu--button", ghost: true, icon: React.createElement(Link, null), outlined: attachmentsMenuOpen === 'link', onClick: () => setAttachmentsMenuOpen('link') }, "Link")),
+            React.createElement(Menu.Item, null,
+                React.createElement(Button, { className: "memori-menu--button", ghost: true, icon: React.createElement(Picture, null), outlined: attachmentsMenuOpen === 'media', onClick: () => setAttachmentsMenuOpen('media') }, "Media")))));
+};
+export default UploadMenu;
+//# sourceMappingURL=UploadMenu.js.map

package/esm/components/UploadMenu/UploadMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadMenu.js","sourceRoot":"","sources":["../../../src/components/UploadMenu/UploadMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,IAAI,MAAM,eAAe,CAAC;AACjC,OAAO,OAAO,MAAM,kBAAkB,CAAC;AACvC,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAE3C,OAAO,kBAAkB,CAAC;AAQ1B,MAAM,UAAU,GAAoB,CAAC,EACnC,mBAAmB,EACnB,sBAAsB,EACtB,QAAQ,GAAG,KAAK,GACjB,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,IAAI,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,oBAAoB;QAC3C,oBAAC,IAAI,CAAC,MAAM,IACV,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CACX,eAAe,EACf,uBAAuB,EACvB,0BAA0B,EAC1B,6BAA6B,EAC7B,6BAA6B,CAC9B;YAED,6BAAK,SAAS,EAAC,qBAAqB;gBAClC,oBAAC,SAAS,OAAG,CACT,CACM;QACd,oBAAC,IAAI,CAAC,KAAK,IAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAC,sBAAsB;YAClD,oBAAC,IAAI,CAAC,IAAI,IAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAC,iBAAiB;gBAC5C,oBAAC,MAAM,IACL,SAAS,EAAC,qBAAqB,EAC/B,KAAK,QACL,IAAI,EAAE,oBAAC,IAAI,OAAG,EACd,QAAQ,EAAE,mBAAmB,KAAK,MAAM,EACxC,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,MAAM,CAAC,WAGtC,CACC;YACZ,oBAAC,IAAI,CAAC,IAAI;gBACR,oBAAC,MAAM,IACL,SAAS,EAAC,qBAAqB,EAC/B,KAAK,QACL,IAAI,EAAE,oBAAC,OAAO,OAAG,EACjB,QAAQ,EAAE,mBAAmB,KAAK,OAAO,EACzC,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,OAAO,CAAC,YAGvC,CACC,CACD,CACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/components/UploadMenu/UploadMenu.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, Story } from '@storybook/react';
+import { Props } from './UploadMenu';
+declare const meta: Meta;
+export default meta;
+export declare const Default: Story<Props>;
+export declare const Disabled: Story<Props>;

package/esm/components/UploadMenu/UploadMenu.stories.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import UploadMenu from './UploadMenu';
+const meta = {
+    title: 'Widget/Upload Menu',
+    component: UploadMenu,
+    argTypes: {
+        attachmentsMenuOpen: {
+            control: {
+                type: 'select',
+                options: ['link', 'media'],
+            },
+        },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+const Template = args => {
+    const [attachmentsMenuOpen, setAttachmentsMenuOpen] = useState(args.attachmentsMenuOpen);
+    return (React.createElement("div", { style: {
+            minHeight: '200px',
+            display: 'flex',
+            alignItems: 'flex-end',
+        } },
+        React.createElement(UploadMenu, { ...args, attachmentsMenuOpen: attachmentsMenuOpen, setAttachmentsMenuOpen: setAttachmentsMenuOpen })));
+};
+export const Default = Template.bind({});
+Default.args = {
+    attachmentsMenuOpen: undefined,
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    attachmentsMenuOpen: undefined,
+    disabled: true,
+};
+//# sourceMappingURL=UploadMenu.stories.js.map

package/esm/components/UploadMenu/UploadMenu.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadMenu.stories.js","sourceRoot":"","sources":["../../../src/components/UploadMenu/UploadMenu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,UAAqB,MAAM,cAAc,CAAC;AAEjD,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,mBAAmB,EAAE;YACnB,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;aAC3B;SACF;KACF;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC7B;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,QAAQ,GAAiB,IAAI,CAAC,EAAE;IACpC,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAE5D,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC5B,OAAO,CACL,6BACE,KAAK,EAAE;YACL,SAAS,EAAE,OAAO;YAClB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,UAAU;SACvB;QAED,oBAAC,UAAU,OACL,IAAI,EACR,mBAAmB,EAAE,mBAAmB,EACxC,sBAAsB,EAAE,sBAAsB,GAC9C,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAIF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,mBAAmB,EAAE,SAAS;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,mBAAmB,EAAE,SAAS;IAC9B,QAAQ,EAAE,IAAI;CACf,CAAC"}

package/esm/components/UploadMenu/UploadMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/components/UploadMenu/UploadMenu.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import UploadMenu from './UploadMenu';
+it('renders UploadMenu unchanged', () => {
+    const { container } = render(React.createElement(UploadMenu, { setAttachmentsMenuOpen: jest.fn() }));
+    expect(container).toMatchSnapshot();
+});
+it('renders UploadMenu disabled unchanged', () => {
+    const { container } = render(React.createElement(UploadMenu, { setAttachmentsMenuOpen: jest.fn(), disabled: true }));
+    expect(container).toMatchSnapshot();
+});
+it('renders UploadMenu on link selected unchanged', () => {
+    const { container } = render(React.createElement(UploadMenu, { attachmentsMenuOpen: "link", setAttachmentsMenuOpen: jest.fn() }));
+    expect(container).toMatchSnapshot();
+});
+it('renders UploadMenu on media selected unchanged', () => {
+    const { container } = render(React.createElement(UploadMenu, { attachmentsMenuOpen: "media", setAttachmentsMenuOpen: jest.fn() }));
+    expect(container).toMatchSnapshot();
+});
+//# sourceMappingURL=UploadMenu.test.js.map

package/esm/components/UploadMenu/UploadMenu.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadMenu.test.js","sourceRoot":"","sources":["../../../src/components/UploadMenu/UploadMenu.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;IACtC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,UAAU,IAAC,sBAAsB,EAAE,IAAI,CAAC,EAAE,EAAE,GAAI,CAClD,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,uCAAuC,EAAE,GAAG,EAAE;IAC/C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,UAAU,IAAC,sBAAsB,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,QAAQ,SAAG,CAC3D,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,+CAA+C,EAAE,GAAG,EAAE;IACvD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,UAAU,IAAC,mBAAmB,EAAC,MAAM,EAAC,sBAAsB,EAAE,IAAI,CAAC,EAAE,EAAE,GAAI,CAC7E,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;IACxD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,UAAU,IACT,mBAAmB,EAAC,OAAO,EAC3B,sBAAsB,EAAE,IAAI,CAAC,EAAE,EAAE,GACjC,CACH,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC"}