@lnco-ai/ui 1.0.0

package/dist/PlatformSwitch/PlatformSwitch.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, SpeedDial, SpeedDialAction, Tooltip, useMediaQuery, useTheme, } from '@mui/material';
+import { AnalyticsIcon, BuildIcon, PlayIcon } from '../icons/index.js';
+import { PRIMARY_COLOR, SECONDARY_COLOR } from '../theme.js';
+import { Platform } from './hooks.js';
+/** Mapping from platform to their icons */
+const PlatformIcons = {
+    [Platform.Builder]: BuildIcon,
+    [Platform.Player]: PlayIcon,
+    [Platform.Analytics]: AnalyticsIcon,
+};
+/**
+ * PlatformSwitch allows the user to change between the platforms
+ */
+export const PlatformSwitch = ({ id, spacing = 0.5, size = 32, color = SECONDARY_COLOR, accentColor = PRIMARY_COLOR, disabledColor = '#CCC', sx, selected, platformsProps, CustomMobileIcon, }) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+    /** Helper inner component: generates buttons from icons while capturing parent props */
+    const PlatformButton = ({ platform, sx = {}, }) => {
+        const isSelectedPlatform = platform === selected;
+        const platformProps = platformsProps?.[platform];
+        const Icon = PlatformIcons[platform];
+        const tooltip = platformProps?.tooltip;
+        const sxProps = { ...sx, ...(platformProps?.sx ?? {}) };
+        return (_jsx(Tooltip, { title: platformProps?.disabled ? undefined : tooltip, placement: platformProps?.placement, children: _jsx("a", { id: platformProps?.id, style: {
+                    display: 'flex',
+                    cursor: platformProps?.disabled ? 'default' : 'pointer',
+                }, "data-testid": platform, href: (!platformProps?.disabled && platformProps?.href) || '#', "aria-disabled": platformProps?.disabled, "data-umami-event": `header-navigation-switch-${platform}`, children: _jsx(Icon, { disabledColor: disabledColor, disabled: platformProps?.disabled, selected: isSelectedPlatform, secondaryColor: accentColor, primaryColor: color, primaryOpacity: 1, size: size, sx: sxProps, disableHover: false }) }) }));
+    };
+    const buttons = Object.values(Platform).map((platform, index, platforms) => (_jsx(PlatformButton, { 
+        // the last icon does not need margin at the end
+        sx: { mr: index === platforms.length - 1 ? 0 : spacing }, platform: platform }, platform)));
+    if (isMobile) {
+        const selectedPlatform = selected || Platform.Builder;
+        const SelectedIcon = CustomMobileIcon ?? PlatformIcons[selectedPlatform];
+        const platformProps = platformsProps?.[selectedPlatform];
+        const sxProps = { ...sx, ...(platformProps?.sx ?? {}) };
+        return (_jsx(Box, { sx: { position: 'relative', height: '40px' }, children: _jsx(SpeedDial, { FabProps: {
+                    size: 'small',
+                    sx: {
+                        border: '2px solid white',
+                    },
+                }, icon: _jsx(SelectedIcon, { selected: true, secondaryColor: accentColor, primaryColor: color, primaryOpacity: 1, size: size, sx: sxProps }), role: 'navigation', direction: 'down', ariaLabel: 'platform switch dial', children: Object.values(Platform).map((platform, index) => {
+                    const Icon = PlatformIcons[platform];
+                    const isSelectedPlatform = platform === selected;
+                    const platformProps = platformsProps?.[platform];
+                    const sxProps = { ...sx, ...(platformProps?.sx ?? {}) };
+                    return (_jsx(SpeedDialAction, { icon: _jsx(Icon, { disabledColor: disabledColor, disabled: platformProps?.disabled, selected: isSelectedPlatform, secondaryColor: accentColor, primaryColor: color, primaryOpacity: 1, size: size, sx: sxProps }), tooltipTitle: platformProps?.tooltip, onClick: () => {
+                            if (!platformProps?.disabled && platformProps?.href) {
+                                location.assign(platformProps?.href);
+                            }
+                        } }, index));
+                }) }) }));
+    }
+    return (_jsx(Box, { component: 'nav', id: id, sx: {
+            p: spacing,
+            border: 1,
+            borderColor: color,
+            borderRadius: `${size}px`,
+            width: 'fit-content',
+            display: 'flex',
+            // props sx must be spread last to override existing styles
+            ...sx,
+        }, children: buttons }));
+};
+export default PlatformSwitch;

package/dist/PlatformSwitch/hooks.d.ts

@@ -0,0 +1,30 @@
+/** Enumeration of available platforms */
+export declare enum Platform {
+    Builder = "builder",
+    Player = "player",
+    Analytics = "analytics"
+}
+/** Maps each Platform to a URL generator function */
+export type HostsMapper = Partial<Record<Platform, (itemId?: string) => string | undefined>>;
+/**
+ * Generates a default hosts mapper given a record of platform to hostname
+ * Only the origin part of the given hostname will be used!
+ *
+ * The default mapping is:
+ *  BUILDER_HOST/items/<itemId>
+ *  PLAYER_HOST/<itemId>
+ *  LIBRARY_HOST/<itemId>
+ *  ANALYTICS_HOST/items/<itemId>
+ *
+ * For any advanced usage, create your own {@see HostsMapper}
+ */
+export declare function defaultHostsMapper(hostsUrls: Partial<Record<Platform, string>>): HostsMapper;
+/**
+ * Hook to create a platform navigator function
+ * @param hostsMapper {@see HostsMapper}
+ * @param itemId Optional ID of the item context which will be opened in the target platform
+ * @returns A mouse events factory that will generate left and middle click actions, to be applied to a given platform
+ */
+export declare function usePlatformNavigation(hostsMapper: HostsMapper, itemId?: string): (platform: Platform) => {
+    href: string;
+};

package/dist/PlatformSwitch/hooks.js

@@ -0,0 +1,49 @@
+/** Enumeration of available platforms */
+export var Platform;
+(function (Platform) {
+    Platform["Builder"] = "builder";
+    Platform["Player"] = "player";
+    Platform["Analytics"] = "analytics";
+})(Platform || (Platform = {}));
+/**
+ * Generates a default hosts mapper given a record of platform to hostname
+ * Only the origin part of the given hostname will be used!
+ *
+ * The default mapping is:
+ *  BUILDER_HOST/items/<itemId>
+ *  PLAYER_HOST/<itemId>
+ *  LIBRARY_HOST/<itemId>
+ *  ANALYTICS_HOST/items/<itemId>
+ *
+ * For any advanced usage, create your own {@see HostsMapper}
+ */
+export function defaultHostsMapper(hostsUrls) {
+    const urlBuilders = {
+        [Platform.Builder]: (origin, itemId) => `${origin}/items/${itemId}`,
+        [Platform.Player]: (origin, itemId) => `${origin}/${itemId}`,
+        [Platform.Analytics]: (origin, itemId) => `${origin}/items/${itemId}`,
+    };
+    return Object.fromEntries(Object.entries(hostsUrls).map(([platform, url]) => {
+        const origin = new URL(url).origin;
+        return [
+            platform,
+            // if passed itemId is undefined, redirect to home page of platform
+            (itemId) => itemId ? urlBuilders[platform](origin, itemId) : origin,
+        ];
+    }));
+}
+/**
+ * Hook to create a platform navigator function
+ * @param hostsMapper {@see HostsMapper}
+ * @param itemId Optional ID of the item context which will be opened in the target platform
+ * @returns A mouse events factory that will generate left and middle click actions, to be applied to a given platform
+ */
+export function usePlatformNavigation(hostsMapper, itemId) {
+    return (platform) => {
+        const url = hostsMapper[platform]?.(itemId);
+        const href = url ?? '#';
+        return {
+            href,
+        };
+    };
+}

package/dist/SearchInput/SearchInput.d.ts

@@ -0,0 +1,20 @@
+import { type TextFieldProps } from '@mui/material';
+import { ChangeEvent } from 'react';
+export type Props = {
+    ariaLabel?: string;
+    inputBaseId?: string;
+    onChange?: (event: ChangeEvent<{
+        value: string;
+    }>) => void;
+    placeholder?: string;
+    value?: string;
+    width?: string | number;
+    margin?: TextFieldProps['margin'];
+    size?: TextFieldProps['size'];
+    /**
+     * Name of the event to send to Umami for tracking user actions
+     */
+    dataUmamiEvent?: string;
+};
+export declare const SearchInput: ({ ariaLabel, inputBaseId, onChange, placeholder, value, width, margin, size, dataUmamiEvent, }: Props) => JSX.Element;
+export default SearchInput;

package/dist/SearchInput/SearchInput.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SearchIcon } from 'lucide-react';
+import { InputAdornment, TextField } from '@mui/material';
+// todo: create minified version for small screens
+export const SearchInput = ({ ariaLabel = 'search', inputBaseId, onChange, placeholder = 'Search…', value = '', width, margin, size, dataUmamiEvent, }) => {
+    return (_jsx(TextField, { InputProps: {
+            endAdornment: (_jsx(InputAdornment, { position: 'end', children: _jsx(SearchIcon, { "aria-label": 'search' }) })),
+        }, margin: margin, id: inputBaseId, onChange: onChange, value: value, sx: { flex: 1, width: width ?? '100%', backgroundColor: 'white' }, placeholder: placeholder, size: size, inputProps: {
+            'aria-label': ariaLabel,
+            // Umami data props
+            'data-umami-event': dataUmamiEvent,
+        } }));
+};
+export default SearchInput;

package/dist/Select/Select.d.ts

@@ -0,0 +1,24 @@
+import { SelectProps as MuiSelectProps, SxProps } from '@mui/material';
+type Props<T> = {
+    buildOptionId?: (v: T) => string;
+    className?: string;
+    disabled?: boolean;
+    color?: MuiSelectProps['color'];
+    defaultValue?: T;
+    value?: T | undefined;
+    displayEmpty?: MuiSelectProps['displayEmpty'];
+    id?: string;
+    label?: string;
+    labelId?: MuiSelectProps['labelId'];
+    onChange?: MuiSelectProps<T>['onChange'];
+    sx?: SxProps;
+    values: {
+        value: T;
+        text: string;
+        disabled?: boolean;
+    }[];
+    variant?: MuiSelectProps['variant'];
+    size?: MuiSelectProps['size'];
+};
+declare const Select: <T extends string | number>({ buildOptionId, className, color, disabled, defaultValue, displayEmpty, id, label, labelId, onChange, sx, values, variant, size, value, }: Props<T>) => JSX.Element;
+export default Select;

package/dist/Select/Select.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, InputLabel, MenuItem, Select as MuiSelect, } from '@mui/material';
+const Select = ({ buildOptionId, className, color, disabled = false, defaultValue, displayEmpty, id, label, labelId, onChange, sx, values, variant, size, value, }) => {
+    const showLabel = Boolean(labelId ?? label);
+    return (_jsxs(FormControl, { sx: { mt: label ? 1 : 0, height: 'fit-content' }, size: size, "data-testid": 'select-test-id', disabled: disabled || values.every(({ disabled }) => disabled), children: [showLabel && _jsx(InputLabel, { id: labelId, children: label }), _jsx(MuiSelect, { labelId: labelId, label: label, defaultValue: defaultValue, onChange: onChange, renderValue: (v) => values.find(({ value }) => value === v)?.text ?? label, displayEmpty: displayEmpty, className: className, color: color, variant: variant, id: id, value: value, sx: sx, children: values.map(({ value, text, disabled }) => (_jsx(MenuItem, { id: buildOptionId?.(value), value: value, disabled: Boolean(disabled), children: text }, value))) })] }));
+};
+export default Select;

package/dist/Sidebar/Sidebar.d.ts

@@ -0,0 +1,11 @@
+import { SxProps } from '@mui/material';
+import React, { ReactNode } from 'react';
+export type SidebarProps = {
+    children?: ReactNode;
+    drawerHeaderContent?: React.ReactElement;
+    handleDrawerClose?: () => void;
+    isSidebarOpen?: boolean;
+    sx?: SxProps;
+};
+export declare const Sidebar: ({ children, drawerHeaderContent, handleDrawerClose, isSidebarOpen, sx, }: SidebarProps) => JSX.Element;
+export default Sidebar;

package/dist/Sidebar/Sidebar.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer, styled } from '@mui/material';
+import DrawerHeader from '../DrawerHeader/DrawerHeader.js';
+import { DRAWER_WIDTH } from '../constants.js';
+const StyledDrawer = styled(Drawer)(({ theme, open }) => ({
+    transition: theme.transitions.create(['width'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+    }),
+    ...(open && {
+        transition: theme.transitions.create(['width'], {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    }),
+    position: 'sticky',
+    flexShrink: 0,
+    '.MuiDrawer-paper': {
+        width: DRAWER_WIDTH,
+    },
+}));
+export const Sidebar = ({ children, drawerHeaderContent, handleDrawerClose, isSidebarOpen = false, sx, }) => {
+    return (_jsx(StyledDrawer, { sx: sx, variant: 'persistent', anchor: 'left', open: isSidebarOpen, children: _jsxs(_Fragment, { children: [_jsx(DrawerHeader, { handleDrawerClose: handleDrawerClose, children: drawerHeaderContent }), children] }) }));
+};
+export default Sidebar;

package/dist/StyledComponents/StyledBaseComponents.d.ts

@@ -0,0 +1,11 @@
+import { SxProps } from '@mui/material';
+import { DetailedHTMLProps, HTMLAttributes, ImgHTMLAttributes } from 'react';
+type ImageProps = {
+    sx?: SxProps;
+} & DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
+declare const StyledImage: (props: ImageProps) => JSX.Element;
+type DivProps = {
+    sx?: SxProps;
+} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare const StyledDiv: (props: DivProps) => JSX.Element;
+export { StyledImage, StyledDiv };

package/dist/StyledComponents/StyledBaseComponents.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@mui/material';
+const StyledImage = (props) => {
+    const StyledImage = styled('img')({});
+    return _jsx(StyledImage, { ...props });
+};
+const StyledDiv = (props) => {
+    const StyledDiv = styled('div')({});
+    return _jsx(StyledDiv, { ...props });
+};
+export { StyledImage, StyledDiv };

package/dist/TextDisplay/TextDisplay.d.ts

@@ -0,0 +1,5 @@
+declare const TextDisplay: ({ id, content, }: {
+    id?: string;
+    content: string;
+}) => JSX.Element | null;
+export default TextDisplay;

package/dist/TextDisplay/TextDisplay.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Interweave } from 'interweave';
+import { styled } from '@mui/material';
+const StyledDiv = styled('div')(({ theme }) => ({
+    '& .ql-editor': {
+        padding: '0px',
+        // apply paragraph margin bottom only to elements that are not last children
+        '& p:not(:last-child)': {
+            marginBlockEnd: theme.spacing(2),
+        },
+        '& td, th': {
+            border: '1px solid #ddd',
+            textAlign: 'left',
+            padding: '8px',
+        },
+    },
+}));
+const TextDisplay = ({ id, content, }) => {
+    if (content) {
+        return (_jsx(StyledDiv, { className: 'quill', id: id, children: _jsx("div", { className: 'ql-snow ql-disabled', children: _jsx("div", { className: 'ql-editor', children: _jsx(Interweave, { content: content, noWrap: true }) }) }) }));
+    }
+    return null;
+};
+export default TextDisplay;

package/dist/TextDisplay/fixtures.d.ts

@@ -0,0 +1,3 @@
+export declare const HTML_CONTENT = "<p class=\"ql-align-center\">I am centered</p><p>I am left aligned</p><p class=\"ql-align-right\">I am right aligned</p><p class=\"ql-align-right\"><span class=\"ql-emojiblot\" data-name=\"smiling_imp\">\uFEFF<span contenteditable=\"false\"><span class=\"ap ap-smiling_imp\">\uD83D\uDE08</span></span>\uFEFF</span></p><p class=\"ql-align-right\">I <span style=\"background-color: rgb(204, 224, 245);\">have</span> a <span style=\"background-color: rgb(194, 133, 255);\">background</span></p><p class=\"ql-align-center\"><a href=\"https://www.google.com\" rel=\"noopener noreferrer\" target=\"_blank\">Test link</a></p><p><s>Hey !</s></p><p><strong class=\"ql-font-serif\"><s>Wow</s></strong></p><p><br></p><pre class=\"ql-syntax\" spellcheck=\"false\">Some code too !\n</pre>";
+export declare const HTML_TABLE = "\n<h2>HTML Table</h2>\n<table>\n  <tr>\n    <th>Company</th>\n    <th>Contact</th>\n    <th>Country</th>\n  </tr>\n  <tr>\n    <td>Alfreds Futterkiste</td>\n    <td>Maria Anders</td>\n    <td>Germany</td>\n  </tr>\n  <tr>\n    <td>Centro comercial Moctezuma</td>\n    <td>Francisco Chang</td>\n    <td>Mexico</td>\n  </tr>\n  <tr>\n    <td>Ernst Handel</td>\n    <td>Roland Mendel</td>\n    <td>Austria</td>\n  </tr>\n  <tr>\n    <td>Island Trading</td>\n    <td>Helen Bennett</td>\n    <td>UK</td>\n  </tr>\n  <tr>\n    <td>Laughing Bacchus Winecellars</td>\n    <td>Yoshi Tannamuri</td>\n    <td>Canada</td>\n  </tr>\n  <tr>\n    <td>Magazzini Alimentari Riuniti</td>\n    <td>Giovanni Rovelli</td>\n    <td>Italy</td>\n  </tr>\n</table>\n  ";
+export declare const STYLED_HTML_TABLE = "\n<h2 style=\"background-color: #5050d2; color: white; border-radius: 4px; padding: 8px\">HTML Table in Graasp !</h2>\n\n<table style=\"font-family: arial, sans-serif;\nborder-collapse: collapse;\nwidth: 100%;\">\n  <tr>\n    <th>Company</th>\n    <th>Contact</th>\n    <th>Country</th>\n  </tr>\n  <tr>\n    <td>Alfreds Futterkiste</td>\n    <td>Maria Anders</td>\n    <td>Germany</td>\n  </tr>\n  <tr>\n    <td>Centro comercial Moctezuma</td>\n    <td>Francisco Chang</td>\n    <td>Mexico</td>\n  </tr>\n  <tr>\n    <td>Ernst Handel</td>\n    <td>Roland Mendel</td>\n    <td>Austria</td>\n  </tr>\n  <tr>\n    <td>Island Trading</td>\n    <td>Helen Bennett</td>\n    <td>UK</td>\n  </tr>\n  <tr>\n    <td>Laughing Bacchus Winecellars</td>\n    <td>Yoshi Tannamuri</td>\n    <td>Canada</td>\n  </tr>\n  <tr>\n    <td>Magazzini Alimentari Riuniti</td>\n    <td>Giovanni Rovelli</td>\n    <td>Italy</td>\n  </tr>\n</table>\n  ";

package/dist/TextDisplay/fixtures.js

@@ -0,0 +1,84 @@
+export const HTML_CONTENT = '<p class="ql-align-center">I am centered</p><p>I am left aligned</p><p class="ql-align-right">I am right aligned</p><p class="ql-align-right"><span class="ql-emojiblot" data-name="smiling_imp"><span contenteditable="false"><span class="ap ap-smiling_imp">😈</span></span></span></p><p class="ql-align-right">I <span style="background-color: rgb(204, 224, 245);">have</span> a <span style="background-color: rgb(194, 133, 255);">background</span></p><p class="ql-align-center"><a href="https://www.google.com" rel="noopener noreferrer" target="_blank">Test link</a></p><p><s>Hey !</s></p><p><strong class="ql-font-serif"><s>Wow</s></strong></p><p><br></p><pre class="ql-syntax" spellcheck="false">Some code too !\n</pre>';
+export const HTML_TABLE = `
+<h2>HTML Table</h2>
+<table>
+  <tr>
+    <th>Company</th>
+    <th>Contact</th>
+    <th>Country</th>
+  </tr>
+  <tr>
+    <td>Alfreds Futterkiste</td>
+    <td>Maria Anders</td>
+    <td>Germany</td>
+  </tr>
+  <tr>
+    <td>Centro comercial Moctezuma</td>
+    <td>Francisco Chang</td>
+    <td>Mexico</td>
+  </tr>
+  <tr>
+    <td>Ernst Handel</td>
+    <td>Roland Mendel</td>
+    <td>Austria</td>
+  </tr>
+  <tr>
+    <td>Island Trading</td>
+    <td>Helen Bennett</td>
+    <td>UK</td>
+  </tr>
+  <tr>
+    <td>Laughing Bacchus Winecellars</td>
+    <td>Yoshi Tannamuri</td>
+    <td>Canada</td>
+  </tr>
+  <tr>
+    <td>Magazzini Alimentari Riuniti</td>
+    <td>Giovanni Rovelli</td>
+    <td>Italy</td>
+  </tr>
+</table>
+  `;
+export const STYLED_HTML_TABLE = `
+<h2 style="background-color: #5050d2; color: white; border-radius: 4px; padding: 8px">HTML Table in Graasp !</h2>
+
+<table style="font-family: arial, sans-serif;
+border-collapse: collapse;
+width: 100%;">
+  <tr>
+    <th>Company</th>
+    <th>Contact</th>
+    <th>Country</th>
+  </tr>
+  <tr>
+    <td>Alfreds Futterkiste</td>
+    <td>Maria Anders</td>
+    <td>Germany</td>
+  </tr>
+  <tr>
+    <td>Centro comercial Moctezuma</td>
+    <td>Francisco Chang</td>
+    <td>Mexico</td>
+  </tr>
+  <tr>
+    <td>Ernst Handel</td>
+    <td>Roland Mendel</td>
+    <td>Austria</td>
+  </tr>
+  <tr>
+    <td>Island Trading</td>
+    <td>Helen Bennett</td>
+    <td>UK</td>
+  </tr>
+  <tr>
+    <td>Laughing Bacchus Winecellars</td>
+    <td>Yoshi Tannamuri</td>
+    <td>Canada</td>
+  </tr>
+  <tr>
+    <td>Magazzini Alimentari Riuniti</td>
+    <td>Giovanni Rovelli</td>
+    <td>Italy</td>
+  </tr>
+</table>
+  `;

package/dist/TextDisplay/withFlavor.d.ts

@@ -0,0 +1,8 @@
+import { DocumentItemExtraFlavor } from '@lnco-ai/sdk';
+type WithFlavorProps = {
+    content: JSX.Element | string;
+    title?: string;
+    flavor?: `${DocumentItemExtraFlavor}` | DocumentItemExtraFlavor;
+};
+export declare const withFlavor: ({ content, title, flavor, }: WithFlavorProps) => JSX.Element;
+export {};

package/dist/TextDisplay/withFlavor.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, AlertTitle, Typography } from '@mui/material';
+import { DocumentItemExtraFlavor } from '@lnco-ai/sdk';
+const Title = ({ title, isAlert = false, }) => {
+    if (!title) {
+        return null;
+    }
+    if (isAlert) {
+        return (_jsx(AlertTitle, { sx: { fontWeight: 700, fontSize: '1.1rem' }, children: title }));
+    }
+    return _jsx(Typography, { variant: 'h5', children: title });
+};
+export const withFlavor = ({ content, title, flavor = DocumentItemExtraFlavor.None, }) => {
+    if (flavor === DocumentItemExtraFlavor.None) {
+        // need to wrap in a fragment because content can be a string which is not a JSX.Element
+        return (_jsxs(_Fragment, { children: [_jsx(Title, { title: title }), content] }));
+    }
+    return (_jsxs(Alert, { severity: flavor, sx: {
+            alignItems: 'flex-start',
+            '& .MuiAlert-message': {
+                // this allows the content of the text to expand over all available space
+                flexGrow: 1,
+            },
+        }, children: [_jsx(Title, { title: title, isAlert: true }), content] }));
+};

package/dist/TextEditor/TextEditor.d.ts

@@ -0,0 +1,16 @@
+export type TextEditorProps = {
+    cancelButtonId?: string;
+    cancelButtonText?: string;
+    id?: string;
+    onCancel?: (text: string) => void;
+    onChange?: (text: string) => void;
+    onSave?: (text: string) => void;
+    placeholderText?: string;
+    saveButtonId?: string;
+    saveButtonText?: string;
+    savedButtonText?: string;
+    showActions?: boolean;
+    value?: string;
+};
+declare const TextEditor: ({ cancelButtonId, cancelButtonText, id, onCancel, onChange, onSave, placeholderText, saveButtonId, saveButtonText, savedButtonText, showActions, value: initialValue, }: TextEditorProps) => JSX.Element | null;
+export default TextEditor;

package/dist/TextEditor/TextEditor.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// formula dependencies
+import katex from 'katex';
+import { Stack, styled } from '@mui/material';
+import { useEffect, useRef, useState } from 'react';
+import ReactQuill from 'react-quill';
+import Button from '../buttons/Button/Button.js';
+import SaveButton from '../buttons/SaveButton/SaveButton.js';
+window.katex = katex;
+const TEXT_EDITOR_TOOLBAR = [
+    [{ header: [1, 2, 3, 4, 5, 6, false] }],
+    [{ font: [] }],
+    ['bold', 'italic', 'underline', 'strike'],
+    [{ color: [] }], // default colors depending on theme
+    [{ background: [] }], // default colors depending on theme
+    [{ align: [] }],
+    [{ list: 'ordered' }, { list: 'bullet' }, 'code-block', 'link', 'formula'],
+];
+const TEXT_EDITOR_MIN_HEIGHT = 200;
+const TEXT_EDITOR_MAX_HEIGHT = 400;
+const Div = styled('div')(({ theme }) => ({
+    width: '100%',
+    '.ql-tooltip': {
+        zIndex: theme.zIndex.tooltip,
+    },
+    '& .ql-editor': {
+        // adapt height if read only
+        minHeight: TEXT_EDITOR_MIN_HEIGHT,
+        // necessary styles to avoid window scrolling top on paste
+        // set a max height only on edition
+        maxHeight: TEXT_EDITOR_MAX_HEIGHT,
+        overflow: 'auto',
+        '& p': {
+            paddingBottom: 3,
+            paddingTop: 3,
+        },
+    },
+    '& .ql-container': {
+        // use font size from mui theme
+        fontSize: 'unset',
+    },
+}));
+const TextEditor = ({ cancelButtonId, cancelButtonText = 'Cancel', id, onCancel, onChange, onSave, placeholderText = 'Write something…', saveButtonId, saveButtonText, savedButtonText, showActions = true, value: initialValue = '', }) => {
+    // keep current content
+    const [content, setContent] = useState(initialValue ?? '');
+    const editorRef = useRef(null);
+    const onTextChange = (text) => {
+        // keep track of the current content
+        setContent(text);
+        onChange?.(text);
+    };
+    const onCancelClick = () => {
+        onCancel?.(content);
+        setContent(initialValue);
+    };
+    useEffect(() => {
+        // update the content with initialValue only when initialValue changes
+        setContent(initialValue);
+    }, [initialValue]);
+    // this hack is necessary because the "placeholder" prop does not update
+    // see: https://github.com/zenoamaro/react-quill/issues/340
+    useEffect(() => {
+        if (editorRef.current) {
+            editorRef.current.getEditor().root.dataset.placeholder = placeholderText;
+        }
+    }, [placeholderText]);
+    return (_jsxs(Stack, { direction: 'column', spacing: 1, alignItems: 'flex-end', children: [_jsx(Div, { children: _jsx(ReactQuill, { ref: editorRef, id: id, placeholder: placeholderText, theme: 'snow', value: content, onChange: onTextChange, modules: {
+                        toolbar: TEXT_EDITOR_TOOLBAR,
+                        clipboard: {
+                            matchVisual: false,
+                        },
+                    } }) }), showActions && (_jsxs(Stack, { spacing: 1, direction: 'row', children: [_jsx(Button, { variant: 'text', id: cancelButtonId, onClick: onCancelClick, children: cancelButtonText }), _jsx(SaveButton, { id: saveButtonId, onClick: () => onSave?.(content), text: saveButtonText, savedText: savedButtonText, hasChanges: content !== initialValue })] }))] }));
+};
+export default TextEditor;

package/dist/ThemeContext/LanguageSelect.d.ts

@@ -0,0 +1,15 @@
+import { Direction, SelectProps as MuiSelectProps, SxProps } from '@mui/material';
+import { Dispatch } from 'react';
+import { I18nInstance } from '../types.js';
+declare const LanguageSelect: ({ i18n, setDirection, languageSelectSx, langs, label, size, variant, }: {
+    i18n: I18nInstance;
+    setDirection?: Dispatch<Direction>;
+    languageSelectSx?: SxProps;
+    langs: {
+        [key: string]: string;
+    };
+    label?: string;
+    variant?: MuiSelectProps["variant"];
+    size?: MuiSelectProps["size"];
+}) => JSX.Element;
+export default LanguageSelect;

package/dist/ThemeContext/LanguageSelect.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import Select from '../Select/Select.js';
+const LanguageSelect = ({ i18n, setDirection, languageSelectSx, langs, label, size, variant, }) => {
+    // init local lang, it does not update if we use i18n language directly
+    const [lang, setLang] = useState(i18n.language);
+    const handleLangSelect = (event) => {
+        const d = i18n.dir(event.target.value);
+        // this should be guarded for ssr rendering
+        if (document) {
+            document.dir = d;
+        }
+        setDirection?.(d);
+        i18n.changeLanguage(event.target.value);
+        setLang(event.target.value);
+    };
+    return (_jsx(Select, { size: size, label: label, variant: variant, labelId: label ? 'language-select-label' : undefined, defaultValue: lang, sx: { minWidth: 80, ...languageSelectSx }, onChange: handleLangSelect, buildOptionId: (value) => `language-${value}`, values: Object.entries(langs).map(([k, l]) => ({ value: k, text: l })) }));
+};
+export default LanguageSelect;

package/dist/ThemeContext/ThemeContext.d.ts

@@ -0,0 +1,22 @@
+import { Direction, SelectProps as MuiSelectProps, SxProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { I18nInstance } from '../types.js';
+type Props = {
+    children: ReactNode;
+    i18n: I18nInstance;
+    langs: {
+        [key: string]: string;
+    };
+    languageSelectSx: SxProps;
+    languageSelectLabel?: string;
+    languageSelectVariant?: MuiSelectProps['variant'];
+    languageSelectSize?: MuiSelectProps['size'];
+    defaultDirection?: Direction;
+};
+type Context = {
+    languageSelect: JSX.Element;
+    direction: Direction;
+};
+declare const ThemeProvider: ({ children, i18n, langs, languageSelectSx, languageSelectLabel, languageSelectVariant, languageSelectSize, defaultDirection, }: Props) => JSX.Element;
+declare const useTheme: () => Context;
+export { ThemeProvider, useTheme };

package/dist/ThemeContext/ThemeContext.js

@@ -0,0 +1,31 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import { prefixer } from 'stylis';
+import { ThemeProvider as MuiThemeProvider, } from '@mui/material';
+import { createContext, useContext, useEffect, useMemo, useState, } from 'react';
+import rtlPlugin from '@graasp/stylis-plugin-rtl';
+import { buildTheme } from '../theme.js';
+import LanguageSelect from './LanguageSelect.js';
+const ThemeContext = createContext({
+    languageSelect: _jsx(_Fragment, {}),
+    direction: 'ltr',
+});
+const getCacheForDirection = (direction) => createCache({
+    key: `mui-dir-${direction}`,
+    stylisPlugins: [prefixer, ...(direction === 'rtl' ? [rtlPlugin] : [])],
+});
+const ThemeProvider = ({ children, i18n, langs, languageSelectSx, languageSelectLabel, languageSelectVariant = 'outlined', languageSelectSize = 'small', defaultDirection = 'ltr', }) => {
+    const [direction, setDirection] = useState(defaultDirection);
+    const languageSelect = (_jsx(LanguageSelect, { languageSelectSx: languageSelectSx, i18n: i18n, setDirection: setDirection, langs: langs, variant: languageSelectVariant, label: languageSelectLabel, size: languageSelectSize }));
+    const value = useMemo(() => ({ direction, languageSelect }), [direction, languageSelect]);
+    useEffect(() => {
+        document.documentElement.setAttribute('dir', direction);
+    }, [direction]);
+    useEffect(() => {
+        setDirection(defaultDirection);
+    }, [defaultDirection]);
+    return (_jsx(ThemeContext.Provider, { value: value, children: _jsx(MuiThemeProvider, { theme: { ...buildTheme(direction), direction }, children: _jsx(CacheProvider, { value: getCacheForDirection(direction), children: children }) }) }));
+};
+const useTheme = () => useContext(ThemeContext);
+export { ThemeProvider, useTheme };