feat: create new folder card (#827)

* fix: first draft of the folde card

* fix: first versions

* fix: add reference

* fix: collapse component

* fix: card description

* fix: last tweeks

* fix: remove mr

* fix: remove height of description when not set

package.json

@@ -81,6 +81,7 @@
     "interweave": "13.1.0",
     "katex": "0.16.10",
     "lodash.truncate": "4.4.2",
+    "lucide-react": "0.373.0",
     "react-cookie-consent": "9.0.0",
     "react-quill": "2.0.0",
     "react-rnd": "10.4.1",

src/Card/Card.tsx

@@ -21,6 +21,7 @@ const StyledCard = styled(Card, {
   borderRadius: theme.spacing(1),
   boxShadow: theme.shadows[2],
   width: fullWidth ? '100%' : 'max-content',
+  maxWidth: '100%',
 }));
 
 type CardProps = {

src/Card/FolderCard.stories.tsx

@@ -0,0 +1,67 @@
+import { Meta, StoryObj, composeStories } from '@storybook/react';
+
+import { BrowserRouter } from 'react-router-dom';
+
+import { TextDisplay } from '..';
+import * as TextDisplayStories from '../TextDisplay/TextDisplay.stories';
+import FolderCard from './FolderCard';
+
+const { SimpleText } = composeStories(TextDisplayStories);
+
+const meta = {
+  title: 'Card/Folder',
+  component: FolderCard,
+  decorators: [
+    (story) => {
+      return <BrowserRouter>{story()}</BrowserRouter>;
+    },
+  ],
+  args: {
+    name: 'Example folder',
+    description: 'Optional description',
+    to: 'https://graasp.org',
+  },
+} satisfies Meta<typeof FolderCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  args: {
+    thumbnail: 'https://picsum.photos/256/256',
+  },
+} satisfies Story;
+
+export const NoThumbnail = {
+  args: { thumbnail: undefined },
+} satisfies Story;
+
+export const OverflowDescription = {
+  args: {
+    thumbnail: undefined,
+    description: <SimpleText />,
+  },
+} satisfies Story;
+
+export const LongHtmlDescription = {
+  args: {
+    thumbnail: undefined,
+    description: (
+      <TextDisplay content='<p>Hello wefh uwhf uqhw hqwkjehr jkqwher jkqwhej khqwefhj hwkjefh jwhef jahwefj khawjkf hawjkf hajkwefh ajk hajkhf wkej </p><p>World</p>' />
+    ),
+  },
+} satisfies Story;
+
+export const LongTitle = {
+  args: {
+    thumbnail: undefined,
+    name: 'aewrfgaf jawef kjkew hqwjerh jweqh jhkjqwehjwkrmwfkmacqjfiqfm34ion q3fmqifjkamsdk we whj hjhkwjehf jhkjweh jkwhejk hwjkehr jwkeh jf jiajweifiaiowef uawefu iuaioweuiouoi auwer ',
+  },
+} satisfies Story;
+
+export const NoDescription = {
+  args: {
+    thumbnail: undefined,
+    description: null,
+  },
+} satisfies Story;

src/Card/FolderCard.tsx

@@ -0,0 +1,118 @@
+import Thumbnail from '@/Thumbnail/Thumbnail';
+import ItemIcon from '@/icons/ItemIcon';
+import { ChevronRight } from 'lucide-react';
+
+import {
+  Box,
+  Card,
+  CardActionArea,
+  CardHeader,
+  Stack,
+  useTheme,
+} from '@mui/material';
+
+import { Link } from 'react-router-dom';
+
+const CARD_HEIGHT = '76px';
+
+type CardThumbnailProps = {
+  thumbnail?: string;
+  alt: string;
+};
+const CardThumbnail = ({ thumbnail, alt }: CardThumbnailProps): JSX.Element => {
+  if (thumbnail) {
+    return <Thumbnail url={thumbnail} alt={alt} maxHeight='100%' />;
+  }
+
+  return (
+    <Box
+      display='flex'
+      alignItems='center'
+      justifyContent='center'
+      bgcolor='#E4DFFF'
+      width={CARD_HEIGHT}
+      height='100%'
+      flexShrink={0}
+      minHeight={CARD_HEIGHT}
+      // minHeight={0}
+      minWidth={0}
+    >
+      <ItemIcon type='folder' alt={alt} />
+    </Box>
+  );
+};
+
+type Props = {
+  id?: string;
+  name: string;
+  description?: string | null | JSX.Element;
+  thumbnail?: string;
+  /**
+   * React Router Link target
+   */
+  to: string;
+};
+const FolderCard = ({
+  id,
+  name,
+  description,
+  thumbnail,
+  to,
+}: Props): JSX.Element => {
+  const theme = useTheme();
+
+  return (
+    <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,
+      }}
+    >
+      <CardActionArea component={Link} to={to} sx={{ height: '100%' }}>
+        <Stack direction='row' alignItems='center' height='100%' minWidth={0}>
+          <CardThumbnail thumbnail={thumbnail} alt={name} />
+          <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,
+              '& p': {
+                margin: 0,
+                marginBlocStart: 0,
+              },
+            }}
+          />
+          <ChevronRight
+            size={35}
+            color={theme.palette.primary.main}
+            style={{ flexShrink: 0, margin: theme.spacing(2, 2, 2, 0) }}
+          />
+        </Stack>
+      </CardActionArea>
+    </Card>
+  );
+};
+export default FolderCard;

src/Collapse/Collapse.tsx

@@ -45,9 +45,10 @@ const Collapse: FC<CollapseProps> = ({ title, content, sx, children }) => {
     <Accordion
       square
       elevation={0}
+      disableGutters
       sx={[
         {
-          border: '1px solid rgba(0, 0, 0, .125)',
+          outline: '1px solid rgba(0, 0, 0, .125)',
           boxShadow: 'none',
           borderRadius: 2,
         },
@@ -61,11 +62,6 @@ const Collapse: FC<CollapseProps> = ({ title, content, sx, children }) => {
             display: 'none',
           },
         },
-        {
-          $expanded: {
-            margin: 'auto',
-          },
-        },
         // You cannot spread `sx` directly because `SxProps` (typeof sx) might not be an array.
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}

src/index.ts

@@ -42,6 +42,7 @@ export { default as ItemLoginAuthorization } from './itemLogin';
 export * from './itemLogin';
 
 export { default as Card } from './Card';
+export { default as FolderCard } from './Card/FolderCard';
 export { default as Thumbnail } from './Thumbnail';
 export { default as Avatar } from './Avatar/Avatar';
 export { default as ItemBadges } from './ItemBadges';