@lnco-ai/ui 1.0.0

package/README.md

@@ -0,0 +1,60 @@
+# Graasp UI
+
+> React components for the Graasp ecosystem.
+
+[![GitHub package.json version](https://img.shields.io/github/package-json/v/graasp/graasp-ui?color=limegreen&label=latest&logo=github)](https://github.com/graasp/graasp-ui/releases)
+[![npm (scoped)](https://img.shields.io/npm/v/@graasp/ui?logo=npm)](https://www.npmjs.com/package/@graasp/ui)
+![GitHub](https://img.shields.io/github/license/graasp/graasp-ui)
+[![Storybook deployment](https://img.shields.io/badge/storybook-ui-%23FF4785?logo=storybook)](https://graasp.github.io/graasp-ui/)
+
+Packages  
+![GitHub package.json - react](https://img.shields.io/github/package-json/dependency-version/graasp/graasp-ui/dev/react?logo=react&label=react%20(dev))
+![npm peer dependency version](https://img.shields.io/npm/dependency-version/@graasp/ui/peer/react?logo=react&label=react%20(peer))
+![GitHub package.json dependency version (prod) - immutable](https://img.shields.io/github/package-json/dependency-version/graasp/graasp-ui/immutable?color=plum)
+[![Mui version](https://img.shields.io/badge/mui-v5-deepskyblue?logo=mui)](https://mui.com/material-ui/getting-started/overview/)
+
+## Adding the library to your project
+
+You will have to add the library and its peer dependencies:
+
+```sh
+yarn add @graasp/ui @graasp/stylis-plugin-rtl date-fns lucide-react
+```
+
+## Usage
+
+```tsx
+import { MyComponent } from '@graasp/ui'
+
+const Example = () => {
+  return <MyComponent />
+}
+```
+
+### Sub packages
+
+#### Components for Graasp Apps
+
+Graasp apps can use specific components to share style without needing to import the full bundle: use import from `@graasp/ui/apps`
+
+#### Text Editor
+
+Since Quill does not play nicely with SSR frameworks (access to the document property is not gated), it is exposed in its own sub-package: `@graasp/ui/text-editor`
+
+## ![Storybook](https://api.iconify.design/logos/storybook-icon.svg) Storybook
+
+Storybook provides a nice display of defined UI components. To open the framework, run
+
+```sh
+yarn storybook
+```
+
+To explore the UI components and play with their props click the link bellow:
+
+<a href="https://graasp.github.io/graasp-ui/" >
+<img style="background: white; padding: 8px; border-radius: 2px; border: 1px solid lightgray" src="https://api.iconify.design/logos/storybook.svg"/>
+</a>
+
+## License
+
+AGPL-3.0 © [Graasp Association](https://graasp.org)

package/dist/Authorization/PreventGuestWrapper.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { CurrentAccount } from '@lnco-ai/sdk';
+type Props = {
+    buttonText: string;
+    children?: ReactNode;
+    currentAccount?: CurrentAccount | null;
+    /**
+     * Component to display on error.
+     * Overrides errorText
+     */
+    error?: JSX.Element;
+    errorText: string;
+    id?: string;
+    onButtonClick?: () => void;
+    startIcon?: JSX.Element;
+    text: string | JSX.Element;
+};
+declare const PreventGuestWrapper: ({ buttonText, children, currentAccount, error, id, onButtonClick, startIcon, errorText, text, }: Props) => ReactNode;
+export default PreventGuestWrapper;

package/dist/Authorization/PreventGuestWrapper.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ClipboardPen } from 'lucide-react';
+import { Alert, Box, Container, Button as MuiButton, Stack, Typography, } from '@mui/material';
+import { AccountType } from '@lnco-ai/sdk';
+const PreventGuestWrapper = ({ buttonText, children, currentAccount, error, id, onButtonClick, startIcon = _jsx(ClipboardPen, {}), errorText, text, }) => {
+    if (currentAccount) {
+        // guest - should not have access to children
+        if (currentAccount.type === AccountType.Guest) {
+            return (_jsx(Stack, { height: '100%', justifyContent: 'center', alignItems: 'center', children: _jsx(Container, { maxWidth: 'md', children: _jsxs(Alert, { severity: 'info', id: id, children: [_jsx(Typography, { children: text }), _jsx(Box, { mt: 2, textAlign: 'center', children: _jsx(MuiButton, { startIcon: startIcon, variant: 'contained', sx: { textTransform: 'none' }, onClick: onButtonClick, children: buttonText }) })] }) }) }));
+        }
+        return children;
+    }
+    return error ?? _jsx(Alert, { severity: 'error', children: errorText });
+};
+export default PreventGuestWrapper;

package/dist/Authorization/RedirectionContent.d.ts

@@ -0,0 +1,9 @@
+import { LinkProps } from 'react-router-dom';
+type Props = {
+    link: LinkProps['to'];
+    id?: string;
+    redirectionLinkText?: string;
+    redirectionText?: string;
+};
+declare const RedirectionContent: ({ link, redirectionText, redirectionLinkText, id, }: Props) => JSX.Element;
+export default RedirectionContent;

package/dist/Authorization/RedirectionContent.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container, Typography, styled } from '@mui/material';
+import { Link } from 'react-router-dom';
+import GraaspLogo from '../GraaspLogo/GraaspLogo.js';
+const StyledContainer = styled(Container)(() => ({
+    height: '100vh',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+}));
+const StyledTypography = styled(Typography)(({ theme }) => ({
+    marginLeft: theme.spacing(2),
+    color: theme.palette.primary.main,
+}));
+const StyledLink = styled(Link)(() => ({
+    textDecoration: 'none',
+    fontStyle: 'italic',
+    color: 'black',
+}));
+const RedirectionContent = ({ link, redirectionText, redirectionLinkText, id, }) => {
+    return (_jsxs(StyledContainer, { id: id, children: [_jsx(GraaspLogo, { height: 100 }), _jsxs("div", { children: [_jsx(StyledTypography, { variant: 'h4', align: 'center', children: redirectionText ?? 'You are being redirected…' }), _jsx(StyledLink, { to: link, children: _jsx(Typography, { align: 'center', children: redirectionLinkText ??
+                                'Click here if you are not automatically redirected' }) })] })] }));
+};
+export default RedirectionContent;

package/dist/Authorization/SignedInWrapper.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { CurrentAccount } from '@lnco-ai/sdk';
+export type SignedInWrapperProps = {
+    redirectionLink: string;
+    currentAccount?: CurrentAccount | null;
+    onRedirect?: () => void;
+    children?: ReactNode;
+};
+declare const SignedInWrapper: ({ currentAccount, redirectionLink, onRedirect, children, }: SignedInWrapperProps) => SignedInWrapperProps["children"];
+export default SignedInWrapper;

package/dist/Authorization/SignedInWrapper.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { redirect } from '@lnco-ai/sdk';
+import RedirectionContent from './RedirectionContent.js';
+const SignedInWrapper = ({ currentAccount, redirectionLink, onRedirect, children, }) => {
+    const redirectToSignIn = () => {
+        if (!redirectionLink) {
+            console.debug('No link has been set for redirection');
+            return;
+        }
+        redirect(window, redirectionLink);
+    };
+    // check authorization: user shouldn't be empty
+    if (currentAccount?.id) {
+        return children;
+    }
+    onRedirect?.();
+    redirectToSignIn();
+    // redirect page if redirection is not working
+    return _jsx(RedirectionContent, { link: redirectionLink });
+};
+export default SignedInWrapper;

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,24 @@
+import { SkeletonProps, SxProps } from '@mui/material';
+type AvatarProps = {
+    alt: string;
+    /**
+     * component used to display the avatar (img or avatar)
+     */
+    component?: 'img' | 'avatar';
+    id?: string;
+    isLoading?: boolean;
+    maxHeight?: string | number;
+    maxWidth?: string | number;
+    /**
+     * thumbnail size to fetch
+     */
+    size?: string;
+    sx?: SxProps;
+    url?: string;
+    /**
+     * skeleton variant
+     */
+    variant?: SkeletonProps['variant'];
+};
+declare const Avatar: ({ sx, id, alt, maxWidth, maxHeight, variant, component, isLoading, url, }: AvatarProps) => JSX.Element | null;
+export default Avatar;

package/dist/Avatar/Avatar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar as AvatarComponent, Skeleton, } from '@mui/material';
+import Thumbnail from '../Thumbnail/Thumbnail.js';
+const Avatar = ({ sx, id, alt = 'avatar', maxWidth = '100%', maxHeight = '100%', variant = 'circular', component = 'avatar', isLoading, url, }) => {
+    if (component === 'avatar') {
+        if (url) {
+            return (_jsx(AvatarComponent, { id: id, alt: alt, src: url, sx: {
+                    width: maxWidth,
+                    height: maxHeight,
+                    ...sx,
+                }, title: alt }));
+        }
+        else {
+            if (isLoading) {
+                return (_jsx(Skeleton, { variant: variant, sx: sx, width: maxWidth, height: maxHeight }));
+            }
+            return _jsx(AvatarComponent, { id: id, alt: alt, sx: { ...sx }, title: alt });
+        }
+    }
+    return (_jsx(Thumbnail, { sx: sx, alt: alt, id: id, url: url, maxWidth: maxWidth, maxHeight: maxHeight, variant: variant, isLoading: isLoading }));
+};
+export default Avatar;

package/dist/Avatar/stringToColor.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Compute the member unique color based on their id
+ * @param id memberId
+ * @returns a CSS color string that can be used to set for example the background of an avatar
+ */
+export declare const getColorFromId: (id: string) => string;
+/**
+ * Generate an HTML color from a string.
+ * This can be used to generate stable avatar colors
+ *
+ */
+export declare const stringToColor: (name: string) => string;

package/dist/Avatar/stringToColor.js

@@ -0,0 +1,31 @@
+import { hslToRgb } from '@mui/material';
+/**
+ * Compute the member unique color based on their id
+ * @param id memberId
+ * @returns a CSS color string that can be used to set for example the background of an avatar
+ */
+export const getColorFromId = (id) => {
+    const rawHue = id.slice(0, 2);
+    const hue = (parseInt(rawHue, 16) / 256) * 360;
+    const rawSaturation = id[2];
+    const saturation = 65 + (16 - parseInt(rawSaturation, 16));
+    const newRgb = hslToRgb(`hsl(${hue}, ${saturation}, ${60})`);
+    return newRgb;
+};
+/**
+ * Generate an HTML color from a string.
+ * This can be used to generate stable avatar colors
+ *
+ */
+export const stringToColor = (name) => {
+    let hash = 0;
+    for (const char of name) {
+        hash = char.charCodeAt(0) + ((hash << 5) - hash);
+    }
+    let color = '#';
+    for (let i = 0; i < 3; i += 1) {
+        const value = (hash >> (i * 8)) & 0xff;
+        color += `00${value.toString(16)}`.slice(-2);
+    }
+    return color;
+};

package/dist/Avatar/stringToColor.test.d.ts

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

package/dist/Avatar/stringToColor.test.js

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import { stringToColor } from './stringToColor.js';
+describe('stringToColor', () => {
+    it('Generates a color from a string', () => {
+        expect(stringToColor('abcd')).toEqual('#42942d');
+        expect(stringToColor('toto')).toEqual('#366a36');
+    });
+});

package/dist/Card/Card.d.ts

@@ -0,0 +1,39 @@
+import { SxProps } from '@mui/material';
+import { ReactElement } from 'react';
+import type { DraggableAndDroppableProps } from '../draggable/types.js';
+import { CardThumbnailProps } from './CardThumbnail.js';
+type CardProps = {
+    name: string | JSX.Element;
+    alt: string;
+    id?: string;
+    /**
+     * Classname for the element.
+     * Useful for selecting many cards at the same time (eg. drag targets).
+     */
+    className?: string;
+    /**
+     * creator name
+     */
+    creator?: string;
+    height?: number;
+    /**
+     * image link to display as thumbnail
+     */
+    thumbnail?: string;
+    footer?: string | ReactElement;
+    sx?: SxProps;
+    /**
+     * Whether the card should expand to take all available space
+     */
+    fullWidth?: boolean;
+    isSelected?: boolean;
+    dense?: boolean;
+    elevation?: boolean;
+    menu?: JSX.Element;
+    content?: string | JSX.Element | JSX.Element[];
+    to?: string;
+    type?: CardThumbnailProps['type'];
+    onThumbnailClick?: () => void;
+} & Partial<DraggableAndDroppableProps>;
+declare const Card: ({ footer, id, creator, height: heightProp, name, sx, dense, thumbnail, menu, fullWidth, elevation, content, alt, to, type, isOver, isDragging, isSelected, className, onThumbnailClick, }: CardProps) => JSX.Element;
+export default Card;

package/dist/Card/Card.js

@@ -0,0 +1,76 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CardActions, Grid2 as Grid, Card as MuiCard, Stack, Typography, styled, } from '@mui/material';
+import { Link } from 'react-router-dom';
+import { PRIMARY_COLOR } from '../theme.js';
+import CardThumbnail from './CardThumbnail.js';
+const DEFAULT_CARD_HEIGHT = 130;
+const PROPS_TO_FORWARD = ['elevation', 'fullWidth', 'isSelected', 'isOver'];
+const StyledCard = styled(MuiCard, {
+    shouldForwardProp: (prop) => !PROPS_TO_FORWARD.includes(prop),
+})(({ theme, elevation, fullWidth, isOver, isSelected }) => ({
+    borderRadius: theme.spacing(1),
+    boxShadow: elevation ? theme.shadows[2] : '0px 2px 2px #eeeeee',
+    width: fullWidth ? '100%' : 'max-content',
+    maxWidth: '100%',
+    outline: isOver || isSelected ? `2px solid ${PRIMARY_COLOR}` : 'none',
+}));
+const Wrapper = ({ children, to, }) => {
+    if (!to) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx(Link, { to: to, style: { textDecoration: 'none', color: 'unset' }, children: children }));
+};
+const Card = ({ footer, id, creator, height: heightProp, name, sx, dense, thumbnail, menu, fullWidth = false, elevation = true, content, alt, to, type, isOver = false, isDragging = false, isSelected = false, className, onThumbnailClick, }) => {
+    let height = heightProp;
+    if (!height) {
+        height = dense ? 60 : DEFAULT_CARD_HEIGHT;
+    }
+    if (dense) {
+        return (_jsx(StyledCard
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        , { 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            elevation: elevation && !isDragging, id: id, className: className, sx: sx, fullWidth: fullWidth, isOver: isOver, isSelected: isSelected, children: _jsxs(Stack, { sx: { height, boxSizing: 'border-box' }, direction: 'row', gap: 1, alignItems: 'center', mr: 1, children: [_jsx(Box, { onClick: onThumbnailClick, height: '100%', children: _jsx(CardThumbnail, { width: height, minHeight: height, thumbnail: thumbnail, alt: alt, type: type }) }), _jsxs(Grid, { container: true, 
+                        // necessary to respect flex layout, otherwise it does not compress
+                        minWidth: 0, width: '100%', sx: { mt: 0 }, 
+                        // ensure that if there is no description the element still goes edge to edge
+                        boxSizing: 'border-box', marginTop: 1, justifyContent: 'space-between', alignItems: 'center', children: [_jsx(Grid, { size: {
+                                    xs: 9,
+                                    sm: 5,
+                                    md: 5,
+                                }, justifyContent: 'space-between', 
+                                // align to the top so the button does not move when there is no creator
+                                alignItems: 'start', boxSizing: 'border-box', children: _jsx(Wrapper, { to: to, children: _jsxs(Stack, { minWidth: 0, children: [_jsx(Typography, { noWrap: true, variant: dense ? 'h5' : 'h3', children: name }), creator && (_jsx(Typography, { noWrap: true, variant: dense ? 'caption' : 'body1', color: 'text.secondary', children: creator }))] }) }) }), _jsx(Grid, { size: { sm: 4, xs: 0, md: 5 }, display: { xs: 'none', sm: 'block' }, children: _jsx(Wrapper, { to: to, children: content }) }), _jsx(Grid, { size: { xs: 3, sm: 3, md: 2 }, justifyContent: 'flex-end', children: _jsxs(CardActions, { sx: { p: 0, justifyContent: 'flex-end' }, children: [_jsx(Stack, { width: '100%', alignItems: 'end', direction: 'row', justifyContent: 'flex-end', alignContent: 'center', display: { xs: 'none', sm: 'block' }, children: footer }), menu] }) })] })] }) }));
+    }
+    return (_jsx(StyledCard, { isOver: isOver, id: id, sx: sx, fullWidth: fullWidth, className: className, children: _jsxs(Stack, { sx: { height, boxSizing: 'border-box' }, direction: 'row', gap: 2, children: [_jsx(CardThumbnail, { width: height, minHeight: height, thumbnail: thumbnail, alt: alt }), _jsxs(Stack, { direction: 'column', 
+                    // necessary to respect flex layout, otherwise it does not compress
+                    minWidth: 0, 
+                    // ensure that if there is no description the element still goes edge to edge
+                    width: '100%', boxSizing: 'border-box', marginTop: 1, children: [_jsxs(Stack, { direction: 'row', justifyContent: 'space-between', 
+                            // align to the top so the button does not move when there is no creator
+                            alignItems: 'start', boxSizing: 'border-box', children: [_jsx(Wrapper, { to: to, children: _jsxs(Stack, { minWidth: 0, direction: 'column', children: [_jsx(Typography, { noWrap: true, variant: dense ? 'h5' : 'h3', children: name }), creator && (_jsx(Typography, { noWrap: true, variant: dense ? 'caption' : 'body1', color: 'text.secondary', children: creator }))] }) }), menu] }), _jsx(Typography, { justifySelf: 'start', 
+                            // necessary for the `position: absolute` on the :before to work
+                            position: 'relative', 
+                            // allow compression in flex layout
+                            minHeight: 0, flexShrink: 1, 
+                            // this element will take all available space
+                            flexGrow: 1, variant: 'caption', color: 'textSecondary', sx: {
+                                // margin to the right
+                                mr: 1,
+                                // hide overflowing text
+                                overflow: 'hidden',
+                                // use a before element to create a gradient to suggest there is more text
+                                '&:before': {
+                                    content: '""',
+                                    width: '100%',
+                                    height: '30px',
+                                    position: 'absolute',
+                                    left: '0px',
+                                    bottom: '0px',
+                                    background: (theme) => `linear-gradient(transparent 10px, ${theme.palette.background.paper})`,
+                                },
+                            }, children: content }), footer] })] }) }));
+};
+export default Card;

package/dist/Card/CardHeader.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+type CardHeaderProps = {
+    name: string;
+    creator?: string;
+    ItemMenu?: ReactElement;
+    NameWrapper?: ({ children }: {
+        children: JSX.Element;
+    }) => JSX.Element;
+    dense?: boolean;
+};
+declare const CustomCardHeader: ({ name, creator, ItemMenu, dense, NameWrapper, }: CardHeaderProps) => JSX.Element;
+export default CustomCardHeader;

package/dist/Card/CardHeader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Typography } from '@mui/material';
+const CustomCardHeader = ({ name, creator, ItemMenu, dense, NameWrapper = ({ children }) => children, }) => {
+    return (_jsxs(Stack, { direction: 'row', justifyContent: 'space-between', 
+        // align to the top so the button does not move when there is no creator
+        alignItems: 'start', boxSizing: 'border-box', children: [_jsxs(Stack, { minWidth: 0, direction: 'column', children: [_jsx(NameWrapper, { children: _jsx(Typography, { noWrap: true, variant: dense ? 'h5' : 'h3', children: name }) }), creator && (_jsx(Typography, { noWrap: true, variant: dense ? 'caption' : 'body1', color: 'text.secondary', children: creator }))] }), ItemMenu] }));
+};
+export default CustomCardHeader;

package/dist/Card/CardThumbnail.d.ts

@@ -0,0 +1,10 @@
+import { DiscriminatedItem } from '@lnco-ai/sdk';
+export type CardThumbnailProps = {
+    thumbnail?: string;
+    alt: string;
+    width?: number;
+    minHeight: number;
+    type?: DiscriminatedItem['type'];
+};
+declare const CardThumbnail: ({ thumbnail, alt, width, minHeight, type, }: CardThumbnailProps) => JSX.Element;
+export default CardThumbnail;

package/dist/Card/CardThumbnail.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, useTheme } from '@mui/material';
+import { ItemType } from '@lnco-ai/sdk';
+import Thumbnail from '../Thumbnail/Thumbnail.js';
+import ItemIcon from '../icons/ItemIcon.js';
+import { DEFAULT_LIGHT_PRIMARY_COLOR } from '../theme.js';
+const CardThumbnail = ({ thumbnail, alt, width, minHeight, type = ItemType.FOLDER, }) => {
+    const theme = useTheme();
+    if (thumbnail) {
+        return (_jsx(Thumbnail, { url: thumbnail, alt: alt, maxHeight: '100%', maxWidth: width }));
+    }
+    return (_jsx(Box, { display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: DEFAULT_LIGHT_PRIMARY_COLOR.main, width: width, height: '100%', flexShrink: 0, minHeight: minHeight, minWidth: 0, children: _jsx(ItemIcon, { type: type, alt: alt, color: theme.palette.primary.main }) }));
+};
+export default CardThumbnail;

package/dist/Card/FolderCard.d.ts

@@ -0,0 +1,14 @@
+import { LinkProps } from 'react-router-dom';
+export declare const CARD_HEIGHT = 76;
+type Props = {
+    id?: string;
+    name: string;
+    description?: string | null | JSX.Element;
+    thumbnail?: string;
+    /**
+     * React Router Link target
+     */
+    to: LinkProps['to'];
+};
+declare const FolderCard: ({ id, name, description, thumbnail, to, }: Props) => JSX.Element;
+export default FolderCard;

package/dist/Card/FolderCard.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from 'lucide-react';
+import { Card, CardActionArea, CardHeader, Stack, useTheme, } from '@mui/material';
+import { Link } from 'react-router-dom';
+import { ItemType } from '@lnco-ai/sdk';
+import CardThumbnail from './CardThumbnail.js';
+// FIX: use the same constant
+export const CARD_HEIGHT = 76;
+const FolderCard = ({ id, name, description, thumbnail, to, }) => {
+    const theme = useTheme();
+    return (_jsx(Card, { id: id, sx: {
+            // card should not be longer than the content
+            width: 'max-content',
+            // but should not overflow the parent
+            maxWidth: '100%',
+            // set the height of the card to be fixed
+            height: CARD_HEIGHT,
+        }, children: _jsx(CardActionArea, { component: Link, to: to, sx: { height: '100%' }, children: _jsxs(Stack, { direction: 'row', alignItems: 'center', height: '100%', minWidth: 0, children: [_jsx(CardThumbnail, { width: CARD_HEIGHT, minHeight: CARD_HEIGHT, thumbnail: thumbnail, alt: name, type: ItemType.FOLDER }), _jsx(CardHeader, { sx: {
+                            // needed to make container not overflow parent
+                            minWidth: '0px',
+                            '& .MuiCardHeader-content': {
+                                // needed to make container not overflow parent
+                                minWidth: '0px',
+                            },
+                        }, title: name, subheader: description, titleTypographyProps: {
+                            color: 'primary',
+                            minWidth: '0px',
+                            // needed to force long title into ellipsis
+                            noWrap: true,
+                            width: '100%',
+                        }, subheaderTypographyProps: {
+                            overflow: 'hidden',
+                            height: description ? '1lh' : 'unset',
+                            textOverflow: 'ellipsis',
+                            minWidth: 0,
+                            sx: {
+                                '& p': {
+                                    margin: 0,
+                                    marginBlocStart: 0,
+                                },
+                            },
+                        } }), _jsx(ChevronRight, { size: 35, color: theme.palette.primary.main, style: { flexShrink: 0, margin: theme.spacing(2, 2, 2, 0) } })] }) }) }));
+};
+export default FolderCard;

package/dist/Card/LinkCard.d.ts

@@ -0,0 +1,11 @@
+type FancyLinkProps = {
+    id?: string;
+    title: string;
+    url: string;
+    thumbnail?: string;
+    description: string;
+    isExternal?: boolean;
+    onClick?: () => void;
+};
+declare const FancyLink: ({ id, title, thumbnail, description, url, onClick, isExternal, }: FancyLinkProps) => JSX.Element;
+export default FancyLink;

package/dist/Card/LinkCard.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLink } from 'lucide-react';
+import { Card, CardActionArea, CardHeader, Stack, Typography, useTheme, } from '@mui/material';
+import { ItemType } from '@lnco-ai/sdk';
+import CardThumbnail from './components/CardThumbnail.js';
+import { CARD_HEIGHT } from './constants.js';
+const FANCY_LINK_CARD_TEST_ID = 'fancy-link-card';
+const FancyLink = ({ id, title, thumbnail, description, url, onClick, isExternal = true, }) => {
+    const theme = useTheme();
+    return (_jsx(Card, { id: id, sx: {
+            // card should not be longer than the content
+            width: 'max-content',
+            // but should not overflow the parent
+            maxWidth: '100%',
+            // set the height of the card to be fixed
+            height: CARD_HEIGHT,
+        }, "data-testid": FANCY_LINK_CARD_TEST_ID, children: _jsx(CardActionArea, { href: url, sx: { height: '100%' }, onClick: onClick, children: _jsxs(Stack, { direction: 'row', alignItems: 'center', height: '100%', minWidth: 0, children: [_jsx(CardThumbnail, { thumbnail: thumbnail, alt: 'Link thumbnail', itemType: ItemType.LINK }), _jsx(CardHeader, { sx: {
+                            // needed to make container not overflow parent
+                            minWidth: '0px',
+                            '& .MuiCardHeader-content': {
+                                // needed to make container not overflow parent
+                                minWidth: '0px',
+                            },
+                        }, title: _jsxs(Stack, { children: [_jsxs(Stack, { direction: 'row', gap: 1, alignItems: 'center', children: [_jsx(Typography, { variant: 'h5', noWrap: true, fontWeight: 'bold', color: 'primary', children: title }), isExternal && (_jsx(ExternalLink
+                                        // the icon should not get smaller
+                                        , { 
+                                            // the icon should not get smaller
+                                            style: { flexShrink: 0 }, size: '1rem', color: theme.palette.primary.main }))] }), isExternal && (_jsxs(Typography, { color: 'text.secondary', noWrap: true, variant: 'caption', children: ["(", url, ")"] }))] }), subheader: description, subheaderTypographyProps: {
+                            overflow: 'hidden',
+                            height: description ? '1lh' : 'unset',
+                            textOverflow: 'ellipsis',
+                            minWidth: 0,
+                            sx: {
+                                '& p': {
+                                    margin: 0,
+                                    marginBlocStart: 0,
+                                },
+                            },
+                        } })] }) }) }));
+};
+export default FancyLink;

package/dist/Card/components/CardThumbnail.d.ts

@@ -0,0 +1,8 @@
+import { ItemIconProps } from '../../icons/ItemIcon.js';
+type CardThumbnailProps = {
+    itemType?: ItemIconProps['type'];
+    thumbnail?: string;
+    alt: string;
+};
+declare const CardThumbnail: ({ thumbnail, alt, itemType, }: CardThumbnailProps) => JSX.Element;
+export default CardThumbnail;

package/dist/Card/components/CardThumbnail.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, useTheme } from '@mui/material';
+import { ItemType } from '@lnco-ai/sdk';
+import Thumbnail from '../../Thumbnail/Thumbnail.js';
+import ItemIcon from '../../icons/ItemIcon.js';
+import { DEFAULT_LIGHT_PRIMARY_COLOR } from '../../theme.js';
+import { CARD_HEIGHT } from '../constants.js';
+const CardThumbnail = ({ thumbnail, alt, itemType = ItemType.FOLDER, }) => {
+    const theme = useTheme();
+    if (thumbnail) {
+        return (_jsx(Thumbnail, { maxWidth: CARD_HEIGHT, maxHeight: CARD_HEIGHT, url: thumbnail, alt: alt }));
+    }
+    return (_jsx(Box, { display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: DEFAULT_LIGHT_PRIMARY_COLOR.main, width: CARD_HEIGHT, height: '100%', flexShrink: 0, minHeight: CARD_HEIGHT, minWidth: 0, children: _jsx(ItemIcon, { type: itemType, alt: alt, color: theme.palette.primary.main }) }));
+};
+export default CardThumbnail;

package/dist/Card/constants.d.ts

@@ -0,0 +1 @@
+export declare const CARD_HEIGHT = "76px";

package/dist/Card/constants.js

@@ -0,0 +1 @@
+export const CARD_HEIGHT = '76px';

package/dist/Collapse/Collapse.d.ts

@@ -0,0 +1,10 @@
+import { SxProps } from '@mui/material';
+import { ReactNode } from 'react';
+export type CollapseProps = {
+    children?: ReactNode;
+    title: string;
+    sx?: SxProps;
+    onCollapse?: (c: boolean) => void;
+};
+declare const Collapse: ({ title, sx, children, onCollapse, }: CollapseProps) => JSX.Element;
+export default Collapse;