Merge branch 'main' of https://github.com/graasp/graasp-ui into 675-a…

…dd-type-props-for-action-buttons
graasp · Jan 29, 2024 · e304000 · e304000
2 parents 2d061f7 + 7411a5c
commit e304000
Show file tree

Hide file tree

Showing 89 changed files with 555 additions and 367 deletions.
diff --git a/src/Authorization/Redirect.stories.tsx b/src/Authorization/Redirect.stories.tsx
@@ -2,7 +2,6 @@ import { expect } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/testing-library';
 
-import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
 import { BuildIcon } from '../icons';

diff --git a/src/Authorization/withAuthorization.stories.tsx b/src/Authorization/withAuthorization.stories.tsx
@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import React from 'react';
-
 import { CompleteMember } from '@graasp/sdk';
 
 import { BuildIcon } from '../icons';

diff --git a/src/Authorization/withAuthorization.tsx b/src/Authorization/withAuthorization.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentType, FC } from 'react';
+import { ComponentType, FC } from 'react';
 
 import { CompleteMember, redirect } from '@graasp/sdk';
 

diff --git a/src/Card/Card.stories.tsx b/src/Card/Card.stories.tsx
@@ -4,8 +4,6 @@ import AcUnitIcon from '@mui/icons-material/AcUnit';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import IconButton from '@mui/material/IconButton';
 
-import React from 'react';
-
 import ItemBadges from '../ItemBadges/ItemBadges';
 import { TABLE_CATEGORIES } from '../utils/storybook';
 import Card from './Card';

diff --git a/src/Card/Card.tsx b/src/Card/Card.tsx
@@ -3,7 +3,7 @@ import Card from '@mui/material/Card';
 import CardActions from '@mui/material/CardActions';
 import Typography from '@mui/material/Typography';
 
-import React, { FC, ReactElement } from 'react';
+import { FC, ReactElement } from 'react';
 
 import CardHeader from './CardHeader';
 

diff --git a/src/Card/CardHeader.tsx b/src/Card/CardHeader.tsx
@@ -1,7 +1,7 @@
 import { Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
 
-import React, { FC, ReactElement } from 'react';
+import { FC, ReactElement } from 'react';
 
 type CardHeaderProps = {
   name: string;

diff --git a/src/Collapse/Collapse.stories.tsx b/src/Collapse/Collapse.stories.tsx
@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import React from 'react';
-
 import { TABLE_CATEGORIES } from '../utils/storybook';
 import Collapse from './Collapse';
 

diff --git a/src/Collapse/Collapse.tsx b/src/Collapse/Collapse.tsx
@@ -5,7 +5,7 @@ import AccordionDetails from '@mui/material/AccordionDetails';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import Typography from '@mui/material/Typography';
 
-import React, { FC, ReactElement, useState } from 'react';
+import { FC, ReactElement, useState } from 'react';
 
 import { COLLAPSE_MIN_HEIGHT } from '../constants';
 

diff --git a/src/Collapse/withCollapse.tsx b/src/Collapse/withCollapse.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Collapse from './Collapse';
 
 const withCollapse = <T extends { name: string }>({ item }: { item: T }) => {

diff --git a/src/CookiesBanner/CookiesBanner.stories.tsx b/src/CookiesBanner/CookiesBanner.stories.tsx
@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import React from 'react';
-
 import CookiesBanner from './CookiesBanner';
 
 const cookieName = 'cookieName';

diff --git a/src/CreativeCommons/CreativeCommons.stories.tsx b/src/CreativeCommons/CreativeCommons.stories.tsx
@@ -2,8 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Box } from '@mui/material';
 
-import React from 'react';
-
 import CreativeCommons from '.';
 import { PRIMARY_COLOR } from '../theme';
 import { CCSharing } from '../types';

diff --git a/src/CustomInitialLoader/CustomInitialLoader.stories.tsx b/src/CustomInitialLoader/CustomInitialLoader.stories.tsx
@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import React from 'react';
-
 import CustomInitialLoader from './CustomInitialLoader';
 
 const meta: Meta<typeof CustomInitialLoader> = {

diff --git a/src/CustomInitialLoader/CustomInitialLoader.tsx b/src/CustomInitialLoader/CustomInitialLoader.tsx
@@ -6,8 +6,6 @@ import {
   styled,
 } from '@mui/material';
 
-import React from 'react';
-
 import GraaspLogo from '../GraaspLogo';
 
 export interface CustomInitialLoaderProps {

diff --git a/src/DrawerHeader/DrawerHeader.stories.tsx b/src/DrawerHeader/DrawerHeader.stories.tsx
@@ -2,8 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import Typography from '@mui/material/Typography';
 
-import React from 'react';
-
 import DrawerHeader from './DrawerHeader';
 
 const meta: Meta<typeof DrawerHeader> = {

diff --git a/src/DrawerHeader/DrawerHeader.tsx b/src/DrawerHeader/DrawerHeader.tsx
@@ -5,7 +5,7 @@ import IconButton from '@mui/material/IconButton';
 import ListItem from '@mui/material/ListItem';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { DEFAULT_DIRECTION, DRAWER_HEADER_HEIGHT } from '../constants';
 

diff --git a/src/DynamicTreeView/DynamicTreeView.tsx b/src/DynamicTreeView/DynamicTreeView.tsx
@@ -4,7 +4,7 @@ import TreeItem from '@mui/lab/TreeItem';
 import TreeView from '@mui/lab/TreeView';
 import Skeleton from '@mui/material/Skeleton';
 
-import React, { FC, useState } from 'react';
+import { FC, useState } from 'react';
 import type { UseQueryResult } from 'react-query';
 
 import { DiscriminatedItem } from '@graasp/sdk';

diff --git a/src/GraaspLogo/GraaspLogo.tsx b/src/GraaspLogo/GraaspLogo.tsx
@@ -1,5 +1,3 @@
-import React, { FC } from 'react';
-
 export type GraaspLogoProps = {
   height: number;
   /**
@@ -8,34 +6,16 @@ export type GraaspLogoProps = {
   sx?: { fill: string };
 };
 
-const GraaspLogo: FC<GraaspLogoProps> = ({ height, sx }) => {
+const GraaspLogo = ({ height, sx }: GraaspLogoProps): JSX.Element => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      viewBox='130 130 290 290'
+      viewBox='0 0 512 512'
       height={height}
     >
       <path
         style={sx}
-        d='M244.82,228.06c0.22,0.19,0.92,0.72,1.81,0.68c2.44-0.1,4.14-4.11,4.74-5.5c2.89-6.64,6.54-12.9,10.2-19.11
-	c5.95-10.11,11.2-21.49,27.16-41.41c6.36-7.95,5.13-6.64,12.73-13.38c3.93-3.49,8.18-6.5,13.05-8.43
-	c5.22-2.07,10.46-1.79,14.45,2.33c4.02,4.15,2.41,9.19,0.45,13.9c-1.47,3.55-3.33,5.77-6.53,9.66c-2.22,2.7-3.02,3.58-4.74,5.68
-	c-2.16,2.63-5.11,6.6-8.17,12.05c-11.87,21.5-20.29,37.37-21.9,40.89c-0.51,1.11-1.3,3.11-0.72,5.28c0.37,1.36,1.16,2.31,1.7,2.85
-	c3.65,0.23,4.12-2.61,5.15-4.69c14.81-29.74,17.63-39.46,38.8-64.84c4.72-5.66,10.67-13.25,15.94-18.39
-	c3.74-3.65,7.97-6.76,12.76-8.91c5.9-2.65,13.32-2.01,16.25,1.65c1.12,1.4,1.79,2.81,2.12,4.21c0.88,3.76-0.34,7.39-2.66,11.38
-	c-4.27,7.33-9.75,11.81-11.42,13.22c-4.98,4.2-9.28,10.36-17.87,22.68c-15.47,22.17-23.45,47.17-19.99,49.5
-	c0.11,0.08,0.53,0.32,1.06,0.31c2.82-0.06,4.75-7.24,5.33-9.24c0.86-2.96,5.68-11.61,15.32-28.91c5.95-10.67,9.69-17.38,16.61-25.13
-	c6.83-7.64,16.07-17.88,25.04-15.85c4.06,0.92,7.77,4.36,9.13,8.38c0.49,1.44,1.53,5.04-1.19,11.97
-	c-3.35,8.51-8.49,12.27-13.49,17.83c-3.64,4.05-6.92,10.27-13.48,22.71c-4.74,8.99-10.49,21.08-15.91,36
-	c-0.44,1.46-1.6,5.56-5.06,7.78c-4.55,2.92-10.4,1.03-12.62,0.4c-12.95-3.68-26.74-0.06-36.48,2.5c0,0-20.71,5.44-35.34,23.22
-	c-5.54,6.72-8.95,13.86-9.49,15.04c-2.06,4.52-4.43,10.24-5.24,18.14c-1.6,15.67,4.72,27.61,17.53,36.24
-	c21.03,14.16,52.72,10.85,68.14-3.9c2.51-2.4,7.94-7.59,7.32-14.13c-0.47-4.94-4.3-9.79-9.05-11.66c-8.37-3.3-13.35,5.12-28.24,5.88
-	c-5.45,0.28-14.2,0.73-19.35-5.39c-5.94-7.07-2.15-18.29-1.92-18.96c1.81-5.2,5.09-8.45,6.87-9.98c5.09-3.5,15.8-9.85,30.65-11.15
-	c6.62-0.58,20.02-1.78,33.03,6.43c18.63,11.77,21.77,33.07,22.12,35.75c3.39,25.85-15.21,45.26-22.73,53.09
-	c-15.4,16.05-32.76,21.52-42.53,24.47c-8.68,2.62-35.43,10.27-66.12-0.98c-19.47-7.14-31.37-18.54-33.98-21.08
-	c-8.04-7.84-14.62-17.11-19.45-27.4c-2.15-4.59-7.03-15.85-9.03-34.26c-4.81-44.27,9.8-87.17,26.29-111.06
-	c6.4-9.28,18.61-27.78,24.07-33.39c3.32-3.41,7.45-8.19,18.04-14.15c3.22-1.81,6.57-3.43,10.24-3.78c2.67-0.25,4.66,0.5,5.78,1.97
-	c1.24,1.63,1.19,3.89,0.66,6.19c-2.13,9.25-11.81,20.79-18.22,31.46C246.54,214.52,242.13,225.72,244.82,228.06z'
+        d='M172.381 169.33C172.763 169.676 173.977 170.642 175.521 170.569C179.754 170.387 182.702 163.082 183.743 160.55C188.757 148.455 195.088 137.052 201.437 125.741C211.759 107.325 220.866 86.5958 248.551 50.3098C259.584 35.8285 257.45 38.2145 270.634 25.9372C277.451 19.58 284.824 14.0971 293.272 10.5815C302.327 6.81077 311.417 7.32082 318.338 14.8257C325.312 22.3851 322.519 31.5658 319.119 40.1453C316.569 46.6116 313.342 50.6557 307.791 57.7416C303.94 62.6597 302.553 64.2627 299.569 68.0882C295.822 72.879 290.705 80.1103 285.396 90.0378C264.805 129.203 250.199 158.108 247.405 164.52C246.52 166.542 244.186 173.107 244.785 175.457C245.383 177.808 247.567 178.763 249.105 179.33C253.16 180.824 256.252 174.575 258.038 170.787C283.729 116.612 288.621 98.9077 325.346 52.6768C333.534 42.3668 343.855 28.5412 352.997 19.1791C359.485 12.5304 366.823 6.8655 375.132 2.94902C385.367 -1.87809 398.238 -0.712281 403.321 5.95458C405.264 8.50477 406.426 11.0731 406.999 13.6234C408.525 20.4725 406.409 27.0846 402.385 34.3528C394.977 47.7049 385.471 55.8653 382.574 58.434C373.935 66.0846 366.476 77.3052 351.574 99.7458C324.738 140.128 310.896 185.67 316.898 189.912C317.088 190.057 317.817 190.495 318.736 190.476C323.628 190.367 326.976 177.289 327.983 173.645C329.474 168.253 337.836 152.497 354.558 120.983C364.88 101.547 371.368 89.3244 383.372 75.2087C395.22 61.2921 411.249 42.6404 426.81 46.337C433.853 48.0128 440.289 54.2791 442.648 61.6017C443.498 64.2247 445.302 70.7825 440.583 83.4056C434.772 98.9071 425.856 105.756 417.182 115.883C410.868 123.261 405.178 134.591 393.798 157.25C385.576 173.626 375.601 195.647 366.199 222.827C365.436 225.487 363.423 232.955 357.421 236.999C349.529 242.318 339.38 238.875 335.529 237.728C313.065 231.024 289.143 237.618 272.246 242.281C272.246 242.281 236.321 252.19 210.943 284.578C201.333 296.819 195.417 309.825 194.481 311.974C190.907 320.207 186.796 330.627 185.391 345.018C182.615 373.562 193.578 395.31 215.8 411.032C252.28 436.826 307.255 430.796 334.003 403.928C338.357 399.557 347.776 390.103 346.701 378.19C345.885 369.191 339.242 360.357 331.002 356.95C316.482 350.939 307.843 366.277 282.013 367.661C272.558 368.171 257.38 368.991 248.447 357.843C238.142 344.965 244.717 324.527 245.116 323.306C248.256 313.833 253.946 307.913 257.033 305.126C265.863 298.751 284.442 287.184 310.201 284.816C321.685 283.759 344.93 281.574 367.498 296.529C399.815 317.968 405.261 356.769 405.869 361.649C411.75 408.735 379.484 444.091 366.44 458.356C339.726 487.592 309.612 497.557 292.663 502.929C277.605 507.702 231.202 521.637 177.963 501.144C144.188 488.138 123.547 467.371 119.016 462.747C105.069 448.466 93.655 431.58 85.2777 412.837C81.5479 404.476 73.0827 383.965 69.6133 350.43C61.2693 269.789 86.6134 191.643 115.219 148.129C126.321 131.226 147.502 97.5267 156.973 87.3064C162.732 81.0949 169.897 72.3879 188.266 61.5313C193.852 58.2343 199.663 55.2832 206.029 54.6459C210.661 54.1905 214.113 55.5566 216.056 58.2343C218.207 61.2034 218.12 65.3202 217.201 69.5097C213.506 86.3592 196.714 107.379 185.593 126.816C175.359 144.667 167.708 165.067 172.375 169.332L172.381 169.33Z'
       />
     </svg>
   );

diff --git a/src/Header/Header.stories.tsx b/src/Header/Header.stories.tsx
@@ -3,8 +3,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 
-import React from 'react';
-
 import { Context } from '@graasp/sdk';
 
 import { TABLE_CATEGORIES } from '../utils/storybook';

diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
@@ -6,29 +6,27 @@ import Grid from '@mui/material/Grid';
 import IconButton from '@mui/material/IconButton';
 import Toolbar from '@mui/material/Toolbar';
 
-import React, { FC } from 'react';
-
 import { Context } from '@graasp/sdk';
 
 import { CLOSE_DRAWER_LABEL, OPEN_DRAWER_LABEL } from '../labels';
 import { AccentColors, PRIMARY_COLOR } from '../theme';
 
-export const buildHeaderGradient = (color: string): string =>
+const buildHeaderGradient = (color: string): string =>
   `linear-gradient(90deg, ${PRIMARY_COLOR} 0%, ${PRIMARY_COLOR} 35%, ${color} 100%);`;
 
-export type HeaderProps = {
+type Props = {
   context?: `${Context}` | Context;
-  centerContent?: React.ReactElement;
+  centerContent?: JSX.Element;
   handleDrawerOpen?: () => void;
   handleDrawerClose?: () => void;
   hasSidebar?: boolean;
   id?: string;
   menuButtonId?: string;
   isSidebarOpen?: boolean;
-  leftContent?: React.ReactElement;
+  leftContent?: JSX.Element;
   openDrawerAriaLabel?: string;
   closeDrawerAriaLabel?: string;
-  rightContent?: React.ReactElement;
+  rightContent?: JSX.Element;
   sx?: SxProps;
 };
 
@@ -49,7 +47,7 @@ const StyledToolbar = styled(Toolbar)({
   justifyContent: 'space-between',
 });
 
-export const Header: FC<HeaderProps> = ({
+export const Header = ({
   context,
   centerContent,
   menuButtonId,
@@ -63,7 +61,7 @@ export const Header: FC<HeaderProps> = ({
   leftContent,
   rightContent,
   sx,
-}) => {
+}: Props): JSX.Element => {
   const renderMenuIcon = (): JSX.Element | null => {
     if (!hasSidebar) {
       return null;
@@ -96,27 +94,30 @@ export const Header: FC<HeaderProps> = ({
   };
 
   return (
-    <AppBar
-      id={id}
-      position='fixed'
-      sx={{
-        background: context
-          ? buildHeaderGradient(AccentColors[context])
-          : PRIMARY_COLOR,
-        ...sx,
-      }}
-    >
-      <StyledToolbar disableGutters>
-        {renderMenuIcon()}
-        <Grid container>
-          <Grid container justifyContent='space-between' alignItems='center'>
-            <Grid item>{leftContent}</Grid>
-            <Grid item>{centerContent}</Grid>
-            <Grid item>{rightContent}</Grid>
+    <>
+      <AppBar
+        id={id}
+        position='sticky'
+        sx={{
+          background: context
+            ? buildHeaderGradient(AccentColors[context])
+            : PRIMARY_COLOR,
+          ...sx,
+        }}
+      >
+        <StyledToolbar disableGutters>
+          {renderMenuIcon()}
+          <Grid container>
+            <Grid container justifyContent='space-between' alignItems='center'>
+              <Grid item>{leftContent}</Grid>
+              <Grid item>{centerContent}</Grid>
+              <Grid item>{rightContent}</Grid>
+            </Grid>
           </Grid>
-        </Grid>
-      </StyledToolbar>
-    </AppBar>
+        </StyledToolbar>
+      </AppBar>
+      <Toolbar />
+    </>
   );
 };
 

diff --git a/src/Header/index.ts b/src/Header/index.ts
diff --git a/src/HeaderUserInformation/HeaderUserInformation.tsx b/src/HeaderUserInformation/HeaderUserInformation.tsx
@@ -4,7 +4,7 @@ import Skeleton from '@mui/material/Skeleton';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 
-import React, { AriaAttributes, FC, MouseEventHandler } from 'react';
+import { AriaAttributes, FC, MouseEventHandler } from 'react';
 
 import { UUID } from '@graasp/sdk';
 

diff --git a/src/ItemBadges/ItemBadges.tsx b/src/ItemBadges/ItemBadges.tsx
@@ -5,8 +5,6 @@ import UnfoldLess from '@mui/icons-material/UnfoldLess';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { Avatar, AvatarGroup, Tooltip } from '@mui/material';
 
-import React from 'react';
-
 import { ThumbnailSize } from '@graasp/sdk';
 
 import { LibraryIcon } from '../icons';

diff --git a/src/ItemFlag/ItemFlagButton.tsx b/src/ItemFlag/ItemFlagButton.tsx
@@ -2,7 +2,7 @@ import ReportIcon from '@mui/icons-material/Report';
 import { Tooltip } from '@mui/material';
 import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { IconSizeVariant } from '../types';
 

diff --git a/src/ItemFlag/ItemFlagDialog.stories.tsx b/src/ItemFlag/ItemFlagDialog.stories.tsx
@@ -2,8 +2,6 @@ import { expect } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { screen, userEvent, within } from '@storybook/testing-library';
 
-import React from 'react';
-
 import { FlagType } from '@graasp/sdk';
 
 import ItemFlagDialog from './ItemFlagDialog';

diff --git a/src/ItemFlag/ItemFlagDialog.tsx b/src/ItemFlag/ItemFlagDialog.tsx
@@ -6,7 +6,7 @@ import DialogTitle from '@mui/material/DialogTitle';
 import List from '@mui/material/List';
 import Typography from '@mui/material/Typography';
 
-import React, { FC, useState } from 'react';
+import { FC, useState } from 'react';
 
 import { FlagType } from '@graasp/sdk';
 

diff --git a/src/Main/LogoHeader.mdx b/src/Main/LogoHeader.mdx
@@ -0,0 +1,11 @@
+import * as LogoHeaderStories from './LogoHeader.stories';
+import {Meta, Canvas} from '@storybook/blocks'
+
+<Meta of={LogoHeaderStories}/>
+
+# Logo Header
+
+The `LogoHeader` component is used to show the Graasp hand with the Graasp name
+in the header of each platform.
+
+<Canvas of={LogoHeaderStories.Default}/>
diff --git a/src/Main/LogoHeader.stories.tsx b/src/Main/LogoHeader.stories.tsx
@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import LogoHeader from './LogoHeader';
+
+const meta = {
+  title: 'Common/LogoHeader',
+  component: LogoHeader,
+
+  render: () => (
+    <div
+      style={{
+        backgroundColor: '#5050d2',
+        color: 'white',
+        padding: '24px',
+        width: 'max-content',
+      }}
+    >
+      <LogoHeader />
+    </div>
+  ),
+} satisfies Meta<typeof LogoHeader>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {} satisfies Story;
diff --git a/src/Main/LogoHeader.tsx b/src/Main/LogoHeader.tsx
@@ -0,0 +1,22 @@
+import { Stack, Typography } from '@mui/material';
+
+import GraaspLogo from '../GraaspLogo/GraaspLogo';
+
+const LogoHeader = (): JSX.Element => (
+  <Stack
+    direction='row'
+    alignItems='center'
+    textTransform='none'
+    color='inherit'
+  >
+    <GraaspLogo height={40} sx={{ fill: 'white' }} />
+    <Typography
+      sx={{ display: { xs: 'none', sm: 'block' } }}
+      color='currentcolor'
+      variant='h6'
+    >
+      Graasp
+    </Typography>
+  </Stack>
+);
+export default LogoHeader;