feat(bootstrap, react/homepage): #COCO-5441, school widget by jcbe-ode · Pull Request #468 · edificeio/edifice-frontend-framework

jcbe-ode · 2026-03-23T14:06:12Z

Description

Adds a new SchoolSpace component for the React homepage module (with styling, Storybook stories, and tests).
Adds a hook to help populating the widget properties.
Adds a container encapsulating both the hook and component.
Adds a useWidgetPreferences for the homepage to load users preferences about widgets.
Updates the client School session type to reflect nullable exports (as seen during local tests).

Ticket https://edifice-community.atlassian.net/browse/COCO-5441

Which Package changed?

Please check the name of the package you changed

Components
Core
Icons
Hooks

Has the documentation changed?

Storybook

Type of change

Please check options that are relevant.

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings

Copilot

Pull request overview

Adds a new “SchoolWidget” for the React homepage module (with styling, Storybook stories, and a helper hook) and updates the client School session type to reflect nullable exports.

Changes:

Introduce SchoolWidget component + Storybook stories for single/multiple/empty states.
Add useUserSchools hook to derive schools/selected school from EdificeClientProvider.
Update School.exports typing in the client session interfaces (string[] | null) and add widget CSS/SVG background.

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/react/src/modules/homepage/components/SchoolWidget/useUserSchools.ts	New hook to read user schools and manage selected school state.
packages/react/src/modules/homepage/components/SchoolWidget/SchoolWidget.tsx	New UI widget rendering selected school + dropdown when multiple schools.
packages/react/src/modules/homepage/components/SchoolWidget/SchoolWidget.stories.tsx	Storybook coverage for multiple/single/empty scenarios.
packages/react/src/modules/homepage/components/SchoolWidget/SchoolWidget.css	Widget styling + CSS variables + background image binding.
packages/react/src/modules/homepage/components/SchoolWidget/SchoolWidgetBackground.svg	Background asset for the widget.
packages/client/src/ts/session/interfaces.ts	Update `School.exports` to allow `null` from the API.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/react/src/modules/homepage/components/SchoolSpace/SchoolSpace.tsx

packages/react/src/modules/homepage/components/SchoolWidget/SchoolWidget.css

packages/react/src/modules/homepage/components/SchoolSpace/useUserSchools.ts

packages/react/src/modules/homepage/components/SchoolWidget/SchoolWidget.tsx

damienromito

Une décision à prendre sur l'endroit où mettre le style. Discussion à avoir avec @pascalsaussier-edifice

En terme de design j'attend confirmation de Simon https://www.figma.com/design/UbAKNC5vk5XOj62z6CI4Qm?node-id=2146-36161#1690237762
Mais ça sera probablement :

si le texte est plus grand que le container, ajouter un elipsis au lieu de passer sur deux le lignes
le background doit être sticky en haut du block et pas en bas

packages/bootstrap/src/components/homepage/_school-widget.scss

damienromito · 2026-03-25T15:59:51Z

packages/react/src/modules/homepage/components/SchoolWidget/SchoolWidget.tsx

+
+  const hasManySchools = schools && schools.length > 1;
+
+  const widgetStyle = { padding: '1.4rem 0.4rem' };


mettre le css en dehors du composant et au même endroit, dans le fichier .scss (cf commentaire precedent). C'est un point important à acter pour le rester du projet

Tout ce style doit être dans un fichier CSS ou SCSS.
Les seuls styles inlines qu'on va s'autoriser sont ceux qui sont calculés en fonction d'un state ou d'une variable du composant.

damienromito · 2026-03-25T16:07:52Z

packages/react/src/modules/homepage/components/SchoolWidget/SchoolWidget.tsx

+  const widgetStyle = { padding: '1.4rem 0.4rem' };
+  const containerStyle = { padding: '0.8rem' };
+  const selectedSchoolStyle = {
+    padding: '.4rem 2.9rem',


pour les espacement, dans les application on utiliser les classes bootstrap (p-8, p12,...), dans le FF il faut utiliser les spacer (qui ne peut que être utilisé dans les fichiers sass dans bootstrap justement, exemple)

Ici il s'agit d'un spacer 1.2 (12pixel sur figma)

damienromito · 2026-03-25T16:27:25Z

packages/react/src/modules/homepage/components/SchoolWidget/SchoolWidget.tsx

+                    color="tertiary"
+                    variant="ghost"
+                    icon={
+                      <IconRafterDown


wahou chiant d'avoir dû reimplementer ça. J'ai fait un commentaire à simon https://www.figma.com/design/UbAKNC5vk5XOj62z6CI4Qm?node-id=2146-36161#1690319223

damienromito · 2026-03-25T16:30:23Z

packages/react/src/modules/homepage/components/SchoolSpace/SchoolSpace.stories.tsx

+export const Empty: Story = {
+  render: renderWithProps({ selectedSchool: undefined }),
+  parameters: {
+    docs: {
+      description: {
+        story: `État vide (aucune école)`,
+      },
+    },
+  },
+};


C'est vraiment utile ?

J'aime bien avoir la possibilité de voir les Edge Case dans storybook, ça retire pas mal de questionnements quand on regarde le composant

est ce que le cas avec aucune ecole est possible ?

Non, mais en cas d'erreur de paramétrage (provenant de la BDD) autant que le widget ne crashe pas la page !

damienromito · 2026-03-25T16:35:11Z

packages/react/src/modules/homepage/components/SchoolSpace/useUserSchools.spec.ts

@@ -0,0 +1,122 @@
+// packages/react/src/modules/homepage/components/SchoolWidget/useUserSchools.test.tsx


Comme pour le style, je pense qu'a la compilation , l'image ne sera pas ajoutée aux assets (tester en utilisant le composant dans Actualites par exemple).
Je vois qu'il y a un dossier react/modules/icons , sinon ajouter dans le dossier /bootstrap.
Quelle est la bonne pratique @pascalsaussier-edifice ?

damienromito · 2026-03-25T16:44:36Z

packages/react/src/modules/homepage/components/SchoolSpace/useUserSchools.ts

+      setSelectedSchool(
+        index < 0 || index >= schools.length ? schools[0] : schools[index],
+      );
+    } else {


est ce vraiment utile de gerer ce cas ? c'est possible fonctionnellement qu'il passe à undefined ?

L'utilisateur choisit une structure => le choix est enregistré en BDD

Une année passe, ou bien il changé d'établissement en cours d'année
=> à la reconnexion, le choix précédemment enregistré n'est plus disponible dans la liste
==> on affiche le 1er étab de la liste à la place

pascalsaussier-edifice · 2026-03-24T16:41:05Z

packages/react/src/modules/homepage/components/SchoolWidget/SchoolWidget.css

+  border-radius: 2.4rem;
+
+  background-color: var(--school-widget-bg-color);
+  background-image: url('./SchoolWidgetBackground.svg');


C'est une image qui va être lié aux préférénces de couleur qui seront accessibles dans le panneau de configuration. Pas en v1 mais faudra y penser.

Ah. bien vu, mais c'est un comportement qu'on va devoir mettre en place à plusieurs endroit. Tu as une idée de comment faire ? on peut passer des proriétés à un svg ?

pascalsaussier-edifice · 2026-03-26T09:56:47Z

packages/react/src/modules/homepage/components/SchoolSpace/SchoolSpace.stories.tsx

+export const Empty: Story = {
+  render: renderWithProps({ selectedSchool: undefined }),
+  parameters: {
+    docs: {
+      description: {
+        story: `État vide (aucune école)`,
+      },
+    },
+  },
+};


J'aime bien avoir la possibilité de voir les Edge Case dans storybook, ça retire pas mal de questionnements quand on regarde le composant

packages/bootstrap/src/components/homepage/_school-widget.scss

pascalsaussier-edifice · 2026-03-26T10:00:35Z

packages/react/src/modules/homepage/components/SchoolWidget/SchoolWidget.tsx

+
+  const hasManySchools = schools && schools.length > 1;
+
+  const widgetStyle = { padding: '1.4rem 0.4rem' };


Tout ce style doit être dans un fichier CSS ou SCSS.
Les seuls styles inlines qu'on va s'autoriser sont ceux qui sont calculés en fonction d'un state ou d'une variable du composant.

packages/react/src/modules/homepage/components/SchoolWidget/SchoolWidget.tsx

pascalsaussier-edifice · 2026-03-26T10:09:06Z

packages/react/src/providers/EdificeClientProvider/EdificeClientProvider.tsx

-  cdnDomain?: string | null;
-  version?: string | null;
-}
-


Merci pour le nettoyage !

pascalsaussier-edifice · 2026-03-26T10:10:32Z

packages/react/vite.config.ts

    globals: true,
    environment: 'jsdom',
-    include: ['src/**/*.spec.tsx'],
+    include: ['src/**/*.spec.tsx', 'src/**/*.spec.ts'],


Question pour plus tard, sur les sites on utilise plutôt .test.ts[x] le .spec.ts[x] c'est surtout un héritage d'Angular, est-ce que ça vaudrait pas le coup de normaliser avec le .test ?
@damienromito

pourquoi pas, test est plus explicite en effet, mais il faudra le changer partout ^^

jcbe-ode · 2026-03-31T14:02:20Z

packages/bootstrap/src/components/homepage/_school-space.scss

+@use '../../vendors/bootstrap';
+
+.school-widget {
+  --border-color: #ffe5a3;


Comme les variables sont scopées, on peut raccourcir leur nom sans risquer la collision avec les variables des autres composants.

oh pas bête. Comme pour des variables en JS je ne trouve pas forcement utile quand on a une seule instance d'une variable, mais ça n'affecte pas la lisibilité donc ça me va

jcbe-ode · 2026-03-31T14:05:29Z

Tous les retours sont traités autant que possible.
Qu'en pensez-vous ?

damienromito

rien de bloquant ! top, un bon exemple de composant

damienromito · 2026-04-01T12:27:47Z

packages/bootstrap/src/components/homepage/_school-space.scss

+@use '../../vendors/bootstrap';
+
+.school-widget {
+  --border-color: #ffe5a3;


oh pas bête. Comme pour des variables en JS je ne trouve pas forcement utile quand on a une seule instance d'une variable, mais ça n'affecte pas la lisibilité donc ça me va

damienromito · 2026-04-01T12:29:26Z

packages/bootstrap/src/components/homepage/_school-space.scss

+@use '../../abstracts/' as *;
+@use '../../vendors/bootstrap';
+
+.school-space {


reflexion : Est ce qu'on ajouterait pas "homepage" pour tous les composant de la home => "homepage-school-space" ?

damienromito · 2026-04-01T12:39:49Z

packages/react/src/modules/homepage/components/SchoolSpace/index.ts

+export * from './SchoolSpace';
+export { default as SchoolSpace } from './SchoolSpace';
+export * from './SchoolSpaceContainer';
+export * from './useUserSchools';


besoin de l'exporter ?

jcbe-ode requested a review from Copilot March 23, 2026 15:59

Copilot started reviewing on behalf of jcbe-ode March 23, 2026 16:00 View session

Copilot AI reviewed Mar 23, 2026

View reviewed changes

jcbe-ode requested review from Romu-C, damienromito and pascalsaussier-edifice March 24, 2026 11:09

damienromito requested changes Mar 25, 2026

View reviewed changes

pascalsaussier-edifice reviewed Mar 26, 2026

View reviewed changes

Romu-C force-pushed the epic-homepage branch from 5b5b993 to 4b29656 Compare March 30, 2026 14:27

jcbe-ode changed the title ~~feat(react/homepage): #COCO-5441, school widget~~ feat(bootstrap, react/homepage): #COCO-5441, school widget Mar 30, 2026

jcbe-ode force-pushed the feat/COCO-5441-school-widget branch 2 times, most recently from 07e420b to 62004ee Compare March 31, 2026 12:57

jcbe-ode force-pushed the epic-homepage branch from 4b29656 to 72f263b Compare March 31, 2026 13:04

jcbe-ode added 11 commits March 31, 2026 15:04

Base implementation

ffd2acc

css begin

86afe2b

fix client interface

0d4cb42

multiple schools support

6de8dad

add widgets preferences support

e8da81a

remove unused file

72ff694

feedback from copilot

2bdc714

feedback from copilot

16755b8

add tests

4001160

feedback 1 from PR

54040e2

feedback 2 from PR

5874ab8

jcbe-ode force-pushed the feat/COCO-5441-school-widget branch from 62004ee to 5874ab8 Compare March 31, 2026 13:05

feedback 3 from PR

dcae84e

jcbe-ode force-pushed the feat/COCO-5441-school-widget branch from 9248f7f to dcae84e Compare March 31, 2026 13:54

jcbe-ode commented Mar 31, 2026

View reviewed changes

jcbe-ode requested a review from damienromito March 31, 2026 14:05

jcbe-ode requested a review from pascalsaussier-edifice March 31, 2026 14:05

change naming conventions

18fbd88

damienromito reviewed Apr 1, 2026

View reviewed changes


		const hasManySchools = schools && schools.length > 1;

		const widgetStyle = { padding: '1.4rem 0.4rem' };

		@@ -0,0 +1,122 @@
		// packages/react/src/modules/homepage/components/SchoolWidget/useUserSchools.test.tsx

Conversation

jcbe-ode commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Which Package changed?

Has the documentation changed?

Type of change

Checklist:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

damienromito left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jcbe-ode Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jcbe-ode commented Mar 31, 2026

Uh oh!

damienromito left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

jcbe-ode commented Mar 23, 2026 •

edited

Loading

jcbe-ode Mar 30, 2026 •

edited

Loading