feat: update card layout (#693)

* feat: use import collapse text, new cards

* refactor: update card

* feat: add components

* refactor: update

* refactor: fix

* refactor: fix errors

* refactor: minimize cards

* refactor: use bigger cards

* refactor: update tests

* refactor: remove copy tests

* refactor: refactor code

* refactor: update graasp ui

* refactor: add css effects

* refactor: fix effects and height

* refactor: apply PR requested changes

.eslintrc

@@ -30,8 +30,9 @@
         "allow": ["warn", "error"],
       },
     ],
+    // change this rule when uniformizing the syntax
     "react/function-component-definition": [
-      2,
+      0,
       {
         "namedComponents": "arrow-function",
       },

.storybook/main.ts

@@ -2,11 +2,20 @@ import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-interactions',
+  ],
   framework: {
     name: '@storybook/nextjs',
     options: {},
   },
-  staticDirs: ['../public'],
+  docs: {
+    autodocs: true,
+  },
+  staticDirs: ['./public'],
 };
 export default config;

.storybook/preview.tsx

@@ -0,0 +1,41 @@
+import type { Preview } from '@storybook/react';
+
+import * as React from 'react';
+
+import { CssBaseline } from '@mui/material';
+import { ThemeProvider } from '@mui/system';
+
+import { theme } from '../src/config/theme';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  decorators: [
+    (Story, { globals }) => {
+      return (
+        <ThemeProvider
+          theme={{
+            ...theme,
+            direction: globals.direction,
+            palette: {
+              ...theme.palette,
+              mode: globals.theme,
+            },
+          }}
+        >
+          <CssBaseline />
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+};
+
+export default preview;

cypress/e2e/allCollections/allCollections.cy.ts

@@ -10,12 +10,14 @@ import {
   FILTER_CHIP_CY,
   FILTER_POPPER_ID,
   HOME_SEARCH_ID,
+  LIKE_COUNTER_CY,
   SEARCH_FILTER_LANG_ID,
   buildCategoryOptionSelector,
   buildCollectionCardGridId,
   buildFilterInputSelector,
   buildSearchFilterPopperButtonId,
   buildSearchFilterTagCategoryId,
+  dataCyWrapper,
 } from '../../../src/config/selectors';
 import LIBRARY from '../../../src/langs/constants';
 import { buildPublicAndPrivateEnvironments } from '../../fixtures/environment';
@@ -96,6 +98,27 @@ buildPublicAndPrivateEnvironments(PUBLISHED_ITEMS).forEach((environment) => {
         'have.length',
         environment.items.length,
       );
+
+      environment.items.forEach(
+        ({
+          id,
+          likes,
+          discipline = [],
+          level = [],
+          'resource-type': rt = [],
+        }) => {
+          // likes
+          if (likes) {
+            cy.get(
+              `#${buildCollectionCardGridId(id)} ${dataCyWrapper(LIKE_COUNTER_CY)}`,
+            ).should('contain', likes);
+          }
+          // tags
+          [...discipline, ...level, ...rt].forEach((d) => {
+            cy.get(`#${buildCollectionCardGridId(id)}`).should('contain', d);
+          });
+        },
+      );
     });
 
     it('toggle published root', () => {

cypress/e2e/collection/tags.cy.ts

@@ -14,8 +14,8 @@ describe('Tags in Summary', { defaultCommandTimeout: 10000 }, () => {
       const item = PUBLISHED_ITEMS[0];
       cy.visit(buildCollectionRoute(item.id));
 
-      item.settings.tags?.forEach((tag) => {
-        cy.get(`#${SUMMARY_TAGS_CONTAINER_ID}`).should('contain', tag);
+      item.tags?.forEach(({ name }) => {
+        cy.get(`#${SUMMARY_TAGS_CONTAINER_ID}`).should('contain', name);
       });
     });
 

cypress/e2e/home/home.cy.ts

@@ -3,9 +3,12 @@ import { HOME_ROUTE } from '../../../src/config/routes';
 import {
   GRAASP_SELECTION_TITLE_ID,
   HOME_PAGE_TITLE_TEXT_ID,
+  LIKE_COUNTER_CY,
   MOST_LIKED_TITLE_ID,
   RECENT_PUBLICATIONS_TITLE_ID,
   SECTION_TITLE_ID,
+  buildCollectionCardGridId,
+  dataCyWrapper,
 } from '../../../src/config/selectors';
 import { buildPublicAndPrivateEnvironments } from '../../fixtures/environment';
 import { GRAASPER_ITEMS } from '../../fixtures/items';
@@ -37,6 +40,15 @@ describe('Home Page', () => {
         cy.get(`#${GRAASP_SELECTION_TITLE_ID} #${SECTION_TITLE_ID}`)
           .scrollIntoView()
           .should('be.visible');
+
+        // likes are displayed
+        environment.recentCollections.forEach(({ id, likes }) => {
+          if (likes) {
+            cy.get(
+              `#${buildCollectionCardGridId(id)} ${dataCyWrapper(LIKE_COUNTER_CY)}`,
+            ).should('contain', likes);
+          }
+        });
       });
 
       describe('Graasper items', () => {

cypress/fixtures/environment.ts

@@ -3,6 +3,6 @@ import { CURRENT_USER } from './members';
 
 // eslint-disable-next-line import/prefer-default-export
 export const buildPublicAndPrivateEnvironments = (items = PUBLISHED_ITEMS) => [
-  { items },
-  { currentMember: CURRENT_USER, items },
+  { items, recentCollections: items },
+  { currentMember: CURRENT_USER, items, recentCollections: items },
 ];

cypress/fixtures/items.ts

@@ -59,7 +59,11 @@ export const PUBLISHED_ITEMS: MockItem[] = [
         account: MEMBERS.BOB,
       },
     ],
+    discipline: ['my discipline'],
+    level: [],
+    'resource-type': ['app'],
     tags: [TagFactory(), TagFactory()],
+    likes: 1,
   },
   {
     ...DEFAULT_FOLDER_ITEM,
@@ -88,7 +92,11 @@ export const PUBLISHED_ITEMS: MockItem[] = [
         account: MEMBERS.ANNA,
       },
     ],
+    discipline: [],
+    level: ['level'],
+    'resource-type': [],
     tags: [TagFactory()],
+    likes: 2,
   },
   {
     ...DEFAULT_FOLDER_ITEM,
@@ -122,7 +130,11 @@ export const PUBLISHED_ITEMS: MockItem[] = [
         account: MEMBERS.BOB,
       },
     ],
+    discipline: [],
+    level: ['level'],
+    'resource-type': ['app'],
     tags: [TagFactory(), TagFactory()],
+    likes: 0,
   },
   {
     ...DEFAULT_FOLDER_ITEM,
@@ -144,6 +156,10 @@ export const PUBLISHED_ITEMS: MockItem[] = [
         itemPath: 'egafbd2a_5688_11eb_ae93_0242ac130002',
       },
     ],
+    discipline: [],
+    level: [],
+    'resource-type': [],
+    likes: 10,
   },
   {
     ...DEFAULT_FOLDER_ITEM,
@@ -171,6 +187,10 @@ export const PUBLISHED_ITEMS: MockItem[] = [
         itemPath: 'egafbd2a_5688_11eb_ae93_0242ac130002',
       },
     ],
+    discipline: [],
+    level: [],
+    'resource-type': [],
+    likes: 1,
   },
   {
     ...DEFAULT_FOLDER_ITEM,
@@ -181,7 +201,6 @@ export const PUBLISHED_ITEMS: MockItem[] = [
     updatedAt: '2023-02-28T18:20:09.732Z',
     creator: MEMBERS.BOB,
     settings: {
-      tags: ['one-tag', 'two-tag'],
       displayCoEditors: true,
     },
     visibility: [],
@@ -197,7 +216,11 @@ export const PUBLISHED_ITEMS: MockItem[] = [
         account: MEMBERS.BOB,
       },
     ],
+    discipline: ['my discipline'],
+    level: ['level'],
+    'resource-type': [],
     tags: [TagFactory(), TagFactory()],
+    likes: 0,
   },
 ];
 

cypress/support/types.ts

@@ -33,7 +33,16 @@ export type MockItem = DiscriminatedItem & {
   visibility: MockItemVisibility[];
   publishedInfo?: MockPublishedInfo;
   memberships?: MockMembership[];
+
+  // used by get tags per item
   tags?: Tag[];
+
+  // used by search
+  discipline?: string[];
+  level?: string[];
+  ['resource-type']?: string[];
+
+  likes?: number;
   thumbnail?: string;
   isPublishedRoot?: boolean;
 };

package.json

@@ -35,11 +35,11 @@
     "@emotion/react": "11.13.3",
     "@emotion/server": "11.11.0",
     "@emotion/styled": "11.13.0",
-    "@graasp/query-client": "5.7.0",
-    "@graasp/sdk": "5.4.0",
+    "@graasp/query-client": "5.7.1",
+    "@graasp/sdk": "5.6.0",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.43.0",
-    "@graasp/ui": "5.4.0",
+    "@graasp/ui": "5.5.1",
     "@mui/icons-material": "6.1.5",
     "@mui/lab": "6.0.0-beta.13",
     "@mui/material": "6.1.5",
@@ -76,8 +76,11 @@
     "@commitlint/cli": "19.5.0",
     "@commitlint/config-conventional": "19.5.0",
     "@cypress/code-coverage": "3.13.4",
+    "@storybook/addon-a11y": "8.4.7",
+    "@storybook/addon-docs": "8.4.7",
     "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-interactions": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
     "@storybook/blocks": "^8.4.7",
     "@storybook/nextjs": "^8.4.7",
     "@storybook/react": "^8.4.7",