feat(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 “SchoolWidget” for the React homepage module (with styling, Storybook stories, and tests).
Adds a hook to help populating the widget properties.
Updates the client School session type to reflect nullable exports (as seen during local tests).

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.

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/SchoolWidget/SchoolWidget.tsx

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

packages/react/src/modules/homepage/components/SchoolWidget/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

damienromito · 2026-03-25T15:57:28Z

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

@@ -0,0 +1,15 @@
+.school-widget {


dans le forntend framework le css n'est pas pris en compte si il est dans les composant (on s'en rendra compte uniquement lorsqu'on importera le ticket dans un projet).
Il faut donc créer un fichier .scss (exemple)
Cela permet aussi d'utiliser les variables sass mais surtout de gerer tout le style dans bootstrap

Bon attention, goût personnel, mais c'est un truc que j'aimerais bien retirer, le fait de ne pas avoir le css dans les composants ça m'emmerde, ça rend la lecture compliquée et la maintenance pas intuitive.
Mais c'est pas un chantier pour maintenant, on verra plus tard. Donc en attendant oui, on garde les guidelines de FF et direction le package bootstrap.

Par contre très bien les vars scopées sur le composant lui-même.

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/SchoolWidget/SchoolWidget.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 ?

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

packages/react/src/modules/homepage/components/SchoolWidget/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/SchoolWidget/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 ?

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/SchoolWidget/SchoolWidget.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

pascalsaussier-edifice · 2026-03-26T09:58:39Z

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

@@ -0,0 +1,15 @@
+.school-widget {


Bon attention, goût personnel, mais c'est un truc que j'aimerais bien retirer, le fait de ne pas avoir le css dans les composants ça m'emmerde, ça rend la lecture compliquée et la maintenance pas intuitive.
Mais c'est pas un chantier pour maintenant, on verra plus tard. Donc en attendant oui, on garde les guidelines de FF et direction le package bootstrap.

pascalsaussier-edifice · 2026-03-26T09:59:01Z

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

@@ -0,0 +1,15 @@
+.school-widget {


Par contre très bien les vars scopées sur le composant lui-même.

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.

pascalsaussier-edifice · 2026-03-26T10:01:30Z

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

+                        style={{
+                          transition: 'rotate 0.2s ease-out',
+                          rotate: isExpanded ? '0deg' : '-180deg',
+                        }}


Si tu peux mettre un TODO pour récupérer ce que j'ai fait sur le composant de Partage

cad ? Tu peux mettre un lien sur le code en question

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 added 6 commits March 20, 2026 16:37

Base implementation

6138a68

css begin

d9f8789

fix client interface

7b7ad1d

multiple schools support

36efe29

add widgets preferences support

5d6fcf4

remove unused file

141f105

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 added 3 commits March 24, 2026 09:55

feedback from copilot

ad4540e

feedback from copilot

e61bf71

add tests

ec88d15

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


		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!

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!

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!

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

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jcbe-ode commented Mar 23, 2026 •

edited

Loading