fix: add alignment setting (#916)

* fix: add alignment setting

* fix: sizing container

* fix: add sizing stories

* fix: update default behavior

* fix: allow image to display bigger than the original size

* fix: update sizing

* fix: add dark variant to primary light

* fix: adapt color

* fix: use sdk version

* fix: comment typo

Co-authored-by: Kim Lan Phan Hoang <pyphilia@gmail.com>

---------

Co-authored-by: Kim Lan Phan Hoang <pyphilia@gmail.com>

Author: spaenleh

package.json

@@ -75,14 +75,14 @@
   },
   "dependencies": {
     "@ag-grid-community/client-side-row-model": "31.3.2",
-    "@ag-grid-community/react": "^31.3.1",
-    "@ag-grid-community/styles": "^31.3.1",
+    "@ag-grid-community/react": "^31.3.2",
+    "@ag-grid-community/styles": "^31.3.2",
     "@storybook/react-vite": "8.1.10",
     "http-status-codes": "2.3.0",
     "interweave": "13.1.0",
     "katex": "0.16.10",
     "lodash.truncate": "4.4.2",
-    "lucide-react": "0.395.0",
+    "lucide-react": "0.397.0",
     "react-cookie-consent": "9.0.0",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
@@ -115,7 +115,7 @@
     "@emotion/cache": "~11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@graasp/sdk": "4.14.0",
+    "@graasp/sdk": "4.15.0",
     "@mui/icons-material": "5.15.20",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.15.20",
@@ -138,25 +138,25 @@
     "@types/jest": "29.5.12",
     "@types/katex": "^0.16.7",
     "@types/lodash.truncate": "4.4.9",
-    "@types/node": "20.14.8",
+    "@types/node": "20.14.9",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@types/react-router-dom": "5.3.3",
     "@types/react-text-mask": "5.4.14",
     "@types/stylis": "4.2.6",
-    "@types/uuid": "9.0.8",
-    "@typescript-eslint/eslint-plugin": "7.13.0",
-    "@typescript-eslint/parser": "7.13.0",
+    "@types/uuid": "10.0.0",
+    "@typescript-eslint/eslint-plugin": "7.14.1",
+    "@typescript-eslint/parser": "7.14.1",
     "@vitejs/plugin-react": "4.3.1",
     "concurrently": "8.2.2",
     "cross-env": "7.0.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-jsx-a11y": "6.9.0",
     "eslint-plugin-n": "17.9.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-promise": "^6.2.0",
     "http-server": "14.1.1",
     "husky": "9.0.11",
     "jest": "29.7.0",

src/Card/components/CardThumbnail.tsx

@@ -35,7 +35,7 @@ const CardThumbnail = ({
       display='flex'
       alignItems='center'
       justifyContent='center'
-      bgcolor={DEFAULT_LIGHT_PRIMARY_COLOR}
+      bgcolor={DEFAULT_LIGHT_PRIMARY_COLOR.main}
       width={CARD_HEIGHT}
       height='100%'
       flexShrink={0}

src/items/FileImage.tsx

@@ -1,12 +1,23 @@
-export interface FileImageProps {
+export type FileImageProps = {
   alt: string;
   url?: string;
   id?: string;
-}
+};
 
 const FileImage = ({ id, url, alt }: FileImageProps): JSX.Element => {
   return (
-    <img id={id} src={url} alt={alt} title={alt} style={{ maxWidth: '100%' }} />
+    <img
+      id={id}
+      src={url}
+      alt={alt}
+      title={alt}
+      style={{
+        // do not overflow the parent
+        maxWidth: '100%',
+        // display bigger than the original size if the parent wants it
+        width: '100%',
+      }}
+    />
   );
 };
 

src/items/FileItem.tsx

@@ -1,4 +1,4 @@
-import { Box, Container, SxProps } from '@mui/material';
+import { Box, SxProps } from '@mui/material';
 import Alert from '@mui/material/Alert';
 import Skeleton from '@mui/material/Skeleton';
 
@@ -22,9 +22,10 @@ import FileAudio from './FileAudio';
 import FileImage from './FileImage';
 import FilePdf from './FilePdf';
 import FileVideo from './FileVideo';
+import { SizingWrapper } from './SizingWrapper';
 import withCaption from './withCaption';
 
-export interface FileItemProps {
+export type FileItemProps = {
   /**
    * blob content of the file, overridden by fileUrl
    * */
@@ -47,7 +48,7 @@ export interface FileItemProps {
   showCollapse?: boolean;
   sx?: SxProps;
   onClick?: () => void;
-}
+};
 
 const FileItem = ({
   content,
@@ -159,6 +160,12 @@ const FileItem = ({
 
   let fileItem = getComponent();
 
+  fileItem = (
+    <SizingWrapper size={item.settings.maxWidth ?? MaxWidth.Medium}>
+      {fileItem}
+    </SizingWrapper>
+  );
+
   // display element with caption
   if (showCaption) {
     fileItem = withCaption({
@@ -170,20 +177,7 @@ const FileItem = ({
     fileItem = withCollapse({ item })(fileItem);
   }
 
-  // the container allows to resize the file to a given responsive standard
-  // There is a tradeoff because of the description:
-  // - description does not look good when align to the left while the file is centered
-  // - description does not look good when centered/cut alongside the centered file
-  return (
-    <Container
-      disableGutters
-      // m=0 align the file to the left.
-      sx={{ m: 0, ...sx }}
-      maxWidth={item.settings.maxWidth ?? MaxWidth.ExtraLarge}
-    >
-      {fileItem}
-    </Container>
-  );
+  return fileItem;
 };
 
 export default React.memo(FileItem);

src/items/FileVideo.tsx

@@ -2,11 +2,11 @@ import { SxProps, styled } from '@mui/material';
 
 import { FC } from 'react';
 
-interface FileVideoProps {
+type FileVideoProps = {
   id?: string;
   url?: string;
   sx?: SxProps;
-}
+};
 
 const StyledVideo = styled('video')({
   maxWidth: '100%',

src/items/SizingWrapper.stories.tsx

@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Container } from '@mui/material';
+
+import { MaxWidth } from '@graasp/sdk';
+
+import { SizingWrapper } from './SizingWrapper';
+
+const children = <img width='100%' src='https://picsum.photos/1000' />;
+
+const meta = {
+  title: 'Items/SizingWrapper',
+  component: SizingWrapper,
+  decorators: [
+    (Story) => {
+      return <Container maxWidth='lg'>{Story()}</Container>;
+    },
+  ],
+
+  args: {
+    children,
+  },
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: Object.values(MaxWidth),
+    },
+  },
+} satisfies Meta<typeof SizingWrapper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  args: {
+    size: MaxWidth.Medium,
+  },
+} satisfies Story;
+
+export const TallImage = {
+  args: {
+    size: MaxWidth.Medium,
+    children: <img width='100%' src='https://picsum.photos/1000/3000' />,
+  },
+};
+
+export const AllSizes = {
+  render: () =>
+    Object.values(MaxWidth).map((size) => (
+      <SizingWrapper size={size} key={size}>
+        {children}
+      </SizingWrapper>
+    )),
+};

src/items/SizingWrapper.tsx

@@ -0,0 +1,36 @@
+import { Box } from '@mui/material';
+
+import { ReactNode } from 'react';
+
+import { MaxWidth } from '@graasp/sdk';
+
+const getWidthFromSizing = (size: MaxWidth): string => {
+  switch (size) {
+    case MaxWidth.ExtraSmall:
+      return '100px';
+    case MaxWidth.Small:
+      return '200px';
+    case MaxWidth.Medium:
+      return '400px';
+    case MaxWidth.Large:
+      return '800px';
+    case MaxWidth.ExtraLarge:
+    default:
+      return '100%';
+  }
+};
+
+export const SizingWrapper = ({
+  size,
+  children,
+}: {
+  size: MaxWidth;
+  children: ReactNode;
+}): JSX.Element => {
+  const width = getWidthFromSizing(size);
+  return (
+    <Box maxWidth='100%' width={width}>
+      {children}
+    </Box>
+  );
+};

src/items/withCaption.stories.tsx

@@ -1,8 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { DescriptionPlacement, DescriptionPlacementType } from '@graasp/sdk';
+import {
+  Alignment,
+  AlignmentType,
+  DescriptionPlacement,
+  DescriptionPlacementType,
+} from '@graasp/sdk';
 
-import withCaption, { Alignment, AlignmentType } from './withCaption';
+import withCaption from './withCaption';
 
 const renderComponent = ({
   description,
@@ -45,3 +50,6 @@ export default meta;
 type Story = StoryObj<typeof renderComponent>;
 
 export const CaptionOnImage = {} satisfies Story;
+export const CanteredCaption = {
+  args: { alignment: Alignment.Center },
+} satisfies Story;

src/items/withCaption.tsx

@@ -3,9 +3,10 @@ import TextDisplay from '@/TextDisplay/TextDisplay';
 import { Stack } from '@mui/material';
 
 import {
+  AlignmentType,
   DescriptionPlacement,
   DescriptionPlacementType,
-  UnionOfConst,
+  getAlignItemsFromAlignmentSetting,
 } from '@graasp/sdk';
 
 const normalizeDescription = (value: string | null | undefined): string => {
@@ -21,28 +22,6 @@ const normalizeDescription = (value: string | null | undefined): string => {
   return value;
 };
 
-// NOTE: This is experimental and most likely is going to be moved to sdk when implementing the feature
-export const Alignment = {
-  Center: 'center',
-  Left: 'left',
-  Right: 'right',
-} as const;
-export type AlignmentType = UnionOfConst<typeof Alignment>;
-
-const getAlignItemsFromAlignmentSetting = (
-  alignment: AlignmentType,
-): 'flex-start' | 'flex-end' | 'center' => {
-  switch (alignment) {
-    case Alignment.Right:
-      return 'flex-end';
-    case Alignment.Center:
-      return 'center';
-    case Alignment.Left:
-    default:
-      return 'flex-start';
-  }
-};
-
 type WithCaptionItem = {
   description: string | null;
   settings?: {
@@ -60,7 +39,7 @@ function withCaption<T extends WithCaptionItem>({ item }: WithCaptionProps<T>) {
     const ChildComponent = (): JSX.Element => {
       const descriptionPlacement =
         item.settings?.descriptionPlacement ?? 'below';
-      const alignmentSetting = item.settings?.alignment ?? Alignment.Left;
+      const alignmentSetting = item.settings?.alignment;
       const direction =
         descriptionPlacement === DescriptionPlacement.ABOVE
           ? 'column-reverse'

src/theme.ts

@@ -19,7 +19,10 @@ 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 = '#E4DFFF';
+export const DEFAULT_LIGHT_PRIMARY_COLOR = {
+  main: 'hsl(249, 100%, 94%)',
+  dark: 'hsl(249, 100%, 90%)',
+} as const;
 
 /**
  * Very light purple color used as the default background color.