@lnco-ai/ui 1.0.0

package/dist/items/withCaption.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { AlignmentType, DescriptionPlacementType, DiscriminatedItem } from '@lnco-ai/sdk';
+export declare const getDefaultFileAlignmentSetting: (mimetype?: string) => AlignmentType;
+type WithCaptionItem = {
+    description: string | null;
+    settings?: {
+        descriptionPlacement?: DescriptionPlacementType;
+        alignment?: AlignmentType;
+    };
+    extra?: DiscriminatedItem['extra'];
+};
+type WithCaptionProps<T extends WithCaptionItem> = {
+    item: T;
+};
+export declare const CaptionWrapper: <T extends WithCaptionItem>({ item, children, }: WithCaptionProps<T> & {
+    children: ReactNode;
+}) => JSX.Element;
+export declare function withCaption<T extends WithCaptionItem>({ item, }: WithCaptionProps<T>): (component: JSX.Element) => JSX.Element;
+export default withCaption;

package/dist/items/withCaption.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from '@mui/material';
+import { Alignment, DescriptionPlacement, MimeTypes, getMimetype, } from '@lnco-ai/sdk';
+import TextDisplay from '../TextDisplay/TextDisplay.js';
+export const getDefaultFileAlignmentSetting = (mimetype) => {
+    if (!mimetype) {
+        return Alignment.Left;
+    }
+    switch (true) {
+        case MimeTypes.isImage(mimetype):
+        case MimeTypes.isAudio(mimetype):
+        case MimeTypes.isVideo(mimetype):
+        case MimeTypes.isPdf(mimetype):
+            return Alignment.Center;
+        // unknown mimetype is left aligned
+        default:
+            return Alignment.Left;
+    }
+};
+const getAlignItemsFromAlignmentSetting = (alignment) => {
+    switch (alignment) {
+        case Alignment.Right:
+            return 'flex-end';
+        case Alignment.Left:
+            return 'flex-start';
+        case Alignment.Center:
+            return 'center';
+    }
+};
+const normalizeDescription = (value) => {
+    // description may be null or undefined, we return empty string
+    if (!value) {
+        return '';
+    }
+    // empty description from quill is a paragraph with an empty line inside,
+    // we do not want to display this, so we return empty string
+    if (value === '<p><br></p>') {
+        return '';
+    }
+    return value;
+};
+export const CaptionWrapper = ({ item, children, }) => {
+    const descriptionPlacement = item.settings?.descriptionPlacement ?? 'below';
+    const direction = descriptionPlacement === DescriptionPlacement.ABOVE
+        ? 'column-reverse'
+        : 'column';
+    const alignment = item.settings?.alignment ??
+        getDefaultFileAlignmentSetting(item.extra ? getMimetype(item.extra) : undefined);
+    const alignItems = getAlignItemsFromAlignmentSetting(alignment);
+    const description = normalizeDescription(item.description);
+    return (_jsxs(Stack, { direction: direction, gap: 0.5, alignItems: alignItems, width: '100%', children: [children, _jsx(TextDisplay, { content: description })] }));
+};
+export function withCaption({ item, }) {
+    return (component) => {
+        return _jsx(CaptionWrapper, { item: item, children: component });
+    };
+}
+export default withCaption;

package/dist/items/withResizing.d.ts

@@ -0,0 +1,9 @@
+import { UUID } from '@lnco-ai/sdk';
+export type WithResizingProps = {
+    height: string | number;
+    component: JSX.Element;
+    memberId?: UUID;
+    itemId: UUID;
+};
+declare const withResizing: <P extends object>({ height, component, memberId, itemId, }: WithResizingProps) => ((props: P) => JSX.Element);
+export default withResizing;

package/dist/items/withResizing.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { Rnd } from 'react-rnd';
+import { getIframeResizeHeightCookie, setIframeResizeHeightCookie, } from '@lnco-ai/sdk';
+import { IFRAME_MIN_HEIGHT } from '../constants.js';
+import ResizingIcon from '../icons/ResizingIcon.js';
+const resizeHandleStyles = {
+    resizeHandleComponent: {
+        height: '24px',
+        bottom: '-32px',
+        width: '23px',
+        marginRight: 'auto',
+        marginLeft: 'auto',
+        left: '0',
+        right: '0',
+    },
+};
+const withResizing = ({ height, component, memberId, itemId, }) => () => {
+    const [variableHeight, setVariableHeight] = useState(getIframeResizeHeightCookie({ memberId, itemId }) ?? height);
+    useEffect(() => {
+        setIframeResizeHeightCookie({ memberId, itemId }, variableHeight);
+    }, [variableHeight]);
+    return (_jsx(Box, { width: '100%', sx: {
+            paddingBottom: '35px',
+            WebkitUserSelect: 'none',
+            WebkitTouchCallout: 'none',
+            MozUserSelect: 'none',
+            msUserSelect: 'none',
+            userSelect: 'none',
+        }, children: _jsx(Rnd, { style: { position: 'relative' }, disableDragging: true, enableResizing: { bottom: true }, default: {
+                width: '100%',
+                height: variableHeight,
+                x: 0,
+                y: 0,
+            }, minHeight: IFRAME_MIN_HEIGHT, resizeHandleComponent: { bottom: _jsx(ResizingIcon, {}) }, resizeHandleStyles: {
+                bottom: resizeHandleStyles.resizeHandleComponent,
+            }, onResizeStop: (_e, _direction, ref) => {
+                setVariableHeight(ref.style.height);
+            }, children: component }) }));
+};
+export default withResizing;

package/dist/text-editor.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TextEditor/TextEditor.js';
+export { default as DocumentItem } from './items/DocumentItem.js';

package/dist/text-editor.js

@@ -0,0 +1,2 @@
+export { default } from './TextEditor/TextEditor.js';
+export { default as DocumentItem } from './items/DocumentItem.js';

package/dist/theme.d.ts

@@ -0,0 +1,108 @@
+import { Direction, Theme } from '@mui/material';
+import { Context } from '@lnco-ai/sdk';
+export declare const PRIMARY_COLOR = "#000000";
+export declare const SECONDARY_COLOR = "#FFFFFF";
+/**
+ * Here we explicitly set primary and secondary text colors.
+ *
+ * These colors do not make use of transparency,
+ * as transparent colors do not work well with lucide icons because of overlapping paths.
+ */
+export declare const DEFAULT_TEXT_PRIMARY_COLOR = "#313131";
+export declare const DEFAULT_TEXT_SECONDARY_COLOR = "#71717A";
+export declare const DEFAULT_TEXT_DISABLED_COLOR = "#c0c0c4";
+export declare const DEFAULT_ACTIVE_ACTION_COLOR = "#777578";
+/**
+ * Color used as a light version of the primary color for button and icon backgrounds.
+ * For example in card thumbnails.
+ */
+export declare const DEFAULT_LIGHT_PRIMARY_COLOR: {
+    readonly main: "#ebeaea";
+    readonly dark: "#cbcaca";
+};
+/**
+ * Very light red color used as the default background color.
+ * Alternative to the pure white default
+ */
+export declare const DEFAULT_BACKGROUND_COLOR = "#fffefe";
+export declare const AccentColors: {
+    [K in Context]: string;
+};
+declare module '@mui/material/styles' {
+    interface TypographyVariants {
+        display: React.CSSProperties;
+        label: React.CSSProperties;
+        note: React.CSSProperties;
+    }
+    interface TypographyVariantsOptions {
+        display?: React.CSSProperties;
+        label?: React.CSSProperties;
+        note?: React.CSSProperties;
+    }
+}
+declare module '@mui/material/Typography' {
+    interface TypographyPropsVariantOverrides {
+        display: true;
+        label: true;
+        note: true;
+    }
+}
+declare module '@mui/material/styles' {
+    interface Palette {
+        builder: Palette['primary'];
+        player: Palette['primary'];
+        analytics: Palette['primary'];
+        library: Palette['primary'];
+        account: Palette['primary'];
+        auth: Palette['primary'];
+    }
+    interface PaletteOptions {
+        builder?: PaletteOptions['primary'];
+        player?: PaletteOptions['primary'];
+        analytics?: PaletteOptions['primary'];
+        library?: PaletteOptions['primary'];
+        account?: PaletteOptions['primary'];
+        auth?: PaletteOptions['primary'];
+    }
+}
+declare module '@mui/material/Button' {
+    interface ButtonPropsColorOverrides {
+        builder: true;
+        player: true;
+        analytics: true;
+        library: true;
+        account: true;
+        auth: true;
+    }
+}
+declare module '@mui/material/IconButton' {
+    interface IconButtonPropsColorOverrides {
+        builder: true;
+        player: true;
+        analytics: true;
+        library: true;
+        account: true;
+        auth: true;
+    }
+}
+declare module '@mui/material/CircularProgress' {
+    interface CircularProgressPropsColorOverrides {
+        builder: true;
+        player: true;
+        analytics: true;
+        library: true;
+        account: true;
+        auth: true;
+    }
+}
+type GraaspThemeOptions = {
+    fontFamily?: string;
+    direction?: Direction;
+};
+export declare const createGraaspTheme: ({ fontFamily, direction, }: GraaspThemeOptions) => Theme;
+/**
+ * @deprecated use buildTheme
+ */
+export declare const theme: Theme;
+export declare const buildTheme: (direction?: Direction) => Theme;
+export {};

package/dist/theme.js

@@ -0,0 +1,214 @@
+import { createTheme, responsiveFontSizes, } from '@mui/material';
+import { Context } from '@lnco-ai/sdk';
+export const PRIMARY_COLOR = '#000000';
+export const SECONDARY_COLOR = '#FFFFFF';
+/**
+ * Here we explicitly set primary and secondary text colors.
+ *
+ * These colors do not make use of transparency,
+ * as transparent colors do not work well with lucide icons because of overlapping paths.
+ */
+export const DEFAULT_TEXT_PRIMARY_COLOR = '#313131';
+export const DEFAULT_TEXT_SECONDARY_COLOR = '#71717A';
+export const DEFAULT_TEXT_DISABLED_COLOR = '#c0c0c4';
+export const DEFAULT_ACTIVE_ACTION_COLOR = '#777578';
+/**
+ * Color used as a light version of the primary color for button and icon backgrounds.
+ * For example in card thumbnails.
+ */
+export const DEFAULT_LIGHT_PRIMARY_COLOR = {
+    main: '#ebeaea',
+    dark: '#cbcaca',
+};
+/**
+ * Very light red color used as the default background color.
+ * Alternative to the pure white default
+ */
+export const DEFAULT_BACKGROUND_COLOR = '#fffefe';
+export const AccentColors = {
+    [Context.Builder]: '#a3a3a3',
+    [Context.Player]: '#a3a3a3',
+    [Context.Analytics]: '#a3a3a3',
+    [Context.Account]: '#a3a3a3',
+    [Context.Library]: '#a3a3a3',
+    [Context.Auth]: PRIMARY_COLOR,
+    [Context.Unknown]: '#a3a3a3',
+};
+export const createGraaspTheme = ({ fontFamily, direction = 'ltr', }) => {
+    const baseTheme = createTheme({
+        direction,
+        palette: {
+            action: {
+                active: DEFAULT_ACTIVE_ACTION_COLOR,
+            },
+            text: {
+                primary: DEFAULT_TEXT_PRIMARY_COLOR,
+                secondary: DEFAULT_TEXT_SECONDARY_COLOR,
+                disabled: DEFAULT_TEXT_DISABLED_COLOR,
+            },
+            background: { default: DEFAULT_BACKGROUND_COLOR },
+            primary: {
+                main: PRIMARY_COLOR,
+            },
+            secondary: {
+                main: SECONDARY_COLOR,
+            },
+        },
+        zIndex: {
+            drawer: 100,
+        },
+        components: {
+            MuiCssBaseline: {
+                styleOverrides: `
+          html {
+            scroll-behavior: smooth;
+          }
+        `,
+            },
+            MuiAvatar: {
+                styleOverrides: {
+                    root: {
+                        color: '#bcbcbc',
+                        backgroundColor: 'white',
+                    },
+                },
+            },
+            MuiTypography: {
+                defaultProps: {
+                    variantMapping: {
+                        // Map the new variants to render a <p> by default
+                        label: 'p',
+                        note: 'p',
+                    },
+                },
+            },
+            MuiButton: {
+                styleOverrides: {
+                    root: {
+                        textTransform: 'capitalize',
+                    },
+                },
+            },
+            MuiTextField: {
+                styleOverrides: {
+                    root: {
+                        '& input': {
+                            backgroundColor: 'white',
+                        },
+                    },
+                },
+            },
+            MuiOutlinedInput: {
+                // outlined inputs should have the inside white
+                styleOverrides: {
+                    root: {
+                        backgroundColor: 'white',
+                    },
+                },
+            },
+            MuiSelect: {
+                styleOverrides: {
+                    root: {
+                        overflow: 'hidden',
+                        backgroundColor: 'white',
+                    },
+                },
+            },
+            MuiTab: {
+                styleOverrides: {
+                    root: {
+                        textTransform: 'capitalize',
+                    },
+                },
+            },
+            MuiCard: {
+                styleOverrides: {
+                    root: {
+                        borderRadius: '8px',
+                    },
+                },
+            },
+        },
+        typography: {
+            fontFamily: fontFamily ?? ['Nunito', 'Roboto', 'sans-serif'].join(','),
+            display: {
+                fontSize: '4.5rem',
+                fontWeight: 800,
+            },
+            h1: {
+                fontSize: '3.2rem',
+                fontWeight: 700,
+            },
+            h2: {
+                fontSize: '2rem',
+                fontWeight: 700,
+            },
+            h3: {
+                fontSize: '1.75rem',
+                fontWeight: 700,
+            },
+            h4: {
+                fontSize: '1.6rem',
+            },
+            h5: {
+                fontSize: '1.1rem',
+                fontWeight: 700,
+            },
+            h6: {
+                fontSize: '1.1rem',
+            },
+            body1: {
+                fontSize: '1rem',
+            },
+            button: {
+                fontSize: '1rem',
+            },
+            label: {
+                fontSize: '0.9rem',
+                fontWeight: 700,
+            },
+            note: {
+                fontSize: '0.9rem',
+            },
+        },
+    });
+    const augmentedColorTheme = createTheme(baseTheme, {
+        palette: Object.fromEntries(Object.entries(AccentColors).map(([platform, color]) => {
+            return [
+                platform,
+                baseTheme.palette.augmentColor({
+                    color: {
+                        main: color,
+                        contrastText: '#fff',
+                    },
+                    name: platform,
+                }),
+            ];
+        })),
+    });
+    return responsiveFontSizes(augmentedColorTheme, {
+        disableAlign: true,
+        factor: 2,
+        // allows to also convert non-standard typography styles like "display" that we added
+        variants: [
+            'display',
+            'h1',
+            'h2',
+            'h3',
+            'h4',
+            'h5',
+            'h6',
+            'body1',
+            'body2',
+            'caption',
+            'button',
+            'label',
+            'note',
+        ],
+    });
+};
+/**
+ * @deprecated use buildTheme
+ */
+export const theme = createGraaspTheme({});
+export const buildTheme = (direction = 'ltr') => createGraaspTheme({ direction });

package/dist/types.d.ts

@@ -0,0 +1,43 @@
+import { Direction } from '@mui/material';
+import { Context, UnionOfConst } from '@lnco-ai/sdk';
+export declare enum Variant {
+    TEXT = "text",
+    RECT = "rectangular",
+    CIRCLE = "circular"
+}
+export type TooltipPlacement = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
+export declare const ColorVariants: {
+    readonly Inherit: "inherit";
+    readonly Primary: "primary";
+    readonly Secondary: "secondary";
+    readonly Error: "error";
+    readonly Info: "info";
+    readonly Success: "success";
+    readonly Warning: "warning";
+    readonly Builder: "builder";
+    readonly Player: "player";
+    readonly Library: "library";
+    readonly Analytics: "analytics";
+    readonly Auth: "auth";
+};
+export type ColorVariantsType = UnionOfConst<typeof ColorVariants>;
+export type IconSizeVariant = 'small' | 'medium' | 'large';
+export declare enum ActionButton {
+    ICON = "icon",
+    ICON_BUTTON = "iconButton",
+    MENU_ITEM = "menuItem"
+}
+export type ActionButtonVariant = ActionButton | `${ActionButton}`;
+export type AllowedContext = Exclude<Context, Context.Unknown>;
+export declare enum CCSharing {
+    YES = "yes",
+    NO = "no",
+    ALIKE = "alike"
+}
+export type CCSharingVariant = CCSharing | `${CCSharing}`;
+export type I18nInstance = {
+    language: string;
+    t: (s: string) => string;
+    dir: (l: string) => Direction;
+    changeLanguage: (lang: string) => void;
+};

package/dist/types.js

@@ -0,0 +1,32 @@
+export var Variant;
+(function (Variant) {
+    Variant["TEXT"] = "text";
+    Variant["RECT"] = "rectangular";
+    Variant["CIRCLE"] = "circular";
+})(Variant || (Variant = {}));
+export const ColorVariants = {
+    Inherit: 'inherit',
+    Primary: 'primary',
+    Secondary: 'secondary',
+    Error: 'error',
+    Info: 'info',
+    Success: 'success',
+    Warning: 'warning',
+    Builder: 'builder',
+    Player: 'player',
+    Library: 'library',
+    Analytics: 'analytics',
+    Auth: 'auth',
+};
+export var ActionButton;
+(function (ActionButton) {
+    ActionButton["ICON"] = "icon";
+    ActionButton["ICON_BUTTON"] = "iconButton";
+    ActionButton["MENU_ITEM"] = "menuItem";
+})(ActionButton || (ActionButton = {}));
+export var CCSharing;
+(function (CCSharing) {
+    CCSharing["YES"] = "yes";
+    CCSharing["NO"] = "no";
+    CCSharing["ALIKE"] = "alike";
+})(CCSharing || (CCSharing = {}));

package/dist/upload/FileDropper/FileDropper.d.ts

@@ -0,0 +1,50 @@
+import { UploadFileButtonProps } from '../UploadFileButton/UploadFileButton.js';
+export type FileDropperProps = {
+    id?: string;
+    /**
+     * Callback on files dropped
+     */
+    onDrop?: (files: File[]) => void;
+    /**
+     * Callback on files selected
+     */
+    onChange: UploadFileButtonProps['onChange'];
+    /**
+     * Error to show
+     */
+    error?: string;
+    /**
+     * Smaller text to show, such as limits
+     */
+    hints?: string;
+    /**
+     * Text of the browsing button
+     */
+    buttonText?: string;
+    /**
+     * additional buttons to display next to browse files
+     */
+    buttons?: JSX.Element;
+    /**
+     * When true, allows many files to be selected when browsing
+     */
+    multiple?: UploadFileButtonProps['multiple'];
+    /**
+     * Text displayed by default
+     */
+    message?: string;
+    /**
+     * Text displayed on drag enter
+     */
+    releaseText?: string;
+    /**
+     * Whether files are getting uploaded
+     */
+    isLoading?: boolean;
+    /**
+     * progress of the upload
+     */
+    uploadProgress?: number;
+};
+declare const FileDropper: (args: FileDropperProps) => JSX.Element | null;
+export default FileDropper;

package/dist/upload/FileDropper/FileDropper.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CloudUploadIcon } from 'lucide-react';
+import { Alert, Box, LinearProgress, Stack, Typography, useTheme, } from '@mui/material';
+import { DndProvider, useDrop } from 'react-dnd';
+import { HTML5Backend, NativeTypes } from 'react-dnd-html5-backend';
+import { DEFAULT_LIGHT_PRIMARY_COLOR } from '../../theme.js';
+import UploadFileButton from '../UploadFileButton/UploadFileButton.js';
+const FileDropperComponent = ({ id, onDrop, onChange, error, hints, buttonText = 'Browse files', buttons, multiple, message = `Drag your files here to upload or`, releaseText = 'Release to drop', uploadProgress, isLoading = false, }) => {
+    const theme = useTheme();
+    const [{ canDrop, isOver }, drop] = useDrop({
+        accept: [NativeTypes.FILE],
+        drop: (e) => {
+            onDrop?.(e.files);
+        },
+        canDrop: () => {
+            return !isLoading;
+        },
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+            canDrop: monitor.canDrop(),
+        }),
+    });
+    const isActive = canDrop && isOver;
+    let bgColor = DEFAULT_LIGHT_PRIMARY_COLOR.main;
+    if (isActive) {
+        bgColor = DEFAULT_LIGHT_PRIMARY_COLOR.dark;
+    }
+    else if (!canDrop && isOver) {
+        bgColor = '#bababa';
+    }
+    return (_jsxs(Stack, { role: 'dropzone', id: id, height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center', bgcolor: error ? '#ffbaba' : bgColor, borderRadius: 5, ref: drop, gap: 2, sx: {
+            borderStyle: 'dashed',
+            borderWidth: 3,
+            borderColor: error ? 'red' : 'lightgrey',
+        }, py: 4, boxSizing: 'border-box', children: [_jsx(CloudUploadIcon, { size: 80, color: error ? 'red' : theme.palette.primary.main }), isLoading ? (_jsxs(Box, { width: '100%', px: 5, children: [_jsx(LinearProgress, { variant: uploadProgress ? 'determinate' : 'indeterminate', color: 'primary', value: uploadProgress }), uploadProgress && (_jsxs(Typography, { textAlign: 'center', children: [uploadProgress, "%"] }))] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: 'label', color: error ? 'error' : 'primary', children: isActive ? releaseText : message }), _jsxs(Stack, { direction: 'row', gap: 2, children: [buttonText && (_jsx(UploadFileButton, { icon: null, text: buttonText, onChange: onChange, size: 'small', multiple: multiple })), buttons] }), hints && _jsx(Typography, { variant: 'caption', children: hints }), error && _jsx(Alert, { severity: 'error', children: error })] }))] }));
+};
+const FileDropper = (args) => {
+    return (
+    // we need context={window} to use multiple times in the document
+    // https://github.com/react-dnd/react-dnd/issues/3257#issuecomment-1239254032
+    _jsx(DndProvider, { backend: HTML5Backend, context: window, children: _jsx(FileDropperComponent, { error: args.error, hints: args.hints, onChange: args.onChange, id: args.id, onDrop: args.onDrop, buttonText: args.buttonText, buttons: args.buttons, multiple: args.multiple, isLoading: args.isLoading, uploadProgress: args.uploadProgress, message: args.message }) }));
+};
+export default FileDropper;

package/dist/upload/UploadFileButton/UploadFileButton.d.ts

@@ -0,0 +1,35 @@
+import { ChangeEventHandler } from 'react';
+import { GraaspButtonProps } from '../../buttons/Button/Button.js';
+export type UploadFileButtonProps = {
+    id?: string;
+    /**
+     * callback when files are selected
+     */
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * whether files are uploading
+     */
+    isLoading?: boolean;
+    /**
+     * text when loading
+     */
+    loadingText?: string;
+    /**
+     * text when changes have been detected
+     */
+    text?: string;
+    /**
+     * accept prop for browse button
+     */
+    accept?: string;
+    /**
+     * whether multiple files can be selected
+     */
+    multiple?: boolean;
+    /**
+     * button icon
+     */
+    icon?: JSX.Element | null;
+} & Pick<GraaspButtonProps, 'size' | 'color' | 'variant'>;
+declare const UploadFileButton: ({ id, isLoading, onChange, loadingText, text, variant, accept, multiple, icon, size, color, }: UploadFileButtonProps) => JSX.Element;
+export default UploadFileButton;