feat(react/homepage): #COCO-5441, school widget

packages/client/src/ts/session/interfaces.ts

@@ -117,7 +117,7 @@ export type School = {
   id: string; // "09772a06-1362-4802-a475-66a87d9cb679"
   name: string; // "MY DEV SCHOOL"
   UAI: string; // "1111888G"
-  exports: string[]; // ["GAR-P0"]
+  exports: string[] | null; // ["GAR-P0"]
 };
 export type UserProfile = Array<
   'Student' | 'Teacher' | 'Relative' | 'Personnel' | 'Guest'

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

@@ -0,0 +1,15 @@
+.school-widget {
+  --school-widget-border-color: #ffe5a3;
+  --school-widget-bg-color: #fefaec;
+  --school-widget-selected-color: #383838;
+}
+
+.school-widget {
+  border: 1px solid var(--school-widget-border-color);
+  border-radius: 2.4rem;
+
+  background-color: var(--school-widget-bg-color);
+  background-image: url('./SchoolWidgetBackground.svg');
+  background-repeat: no-repeat;
+  background-position: bottom right;
+}

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

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SchoolWidget, { SchoolWidgetProps } from './SchoolWidget';
+
+const meta: Meta<typeof SchoolWidget> = {
+  title: 'Modules/Homepage/SchoolWidget',
+  component: SchoolWidget,
+  decorators: [
+    (Story) => (
+      <div style={{ height: '35em' }}>
+        <div id="portal" />
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Ce storybook documente le composant SchoolWidget, un widget de sélection d'école avec plusieurs variantes possibles.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SchoolWidget>;
+
+const renderWithProps = (props: SchoolWidgetProps) => () => (
+  <div style={{ maxWidth: 397 }}>
+    <SchoolWidget {...props} />
+  </div>
+);
+
+const schools = [
+  {
+    id: 'school-1',
+    name: 'Collège Jean Moulin',
+    UAI: '0012345A',
+    classes: [],
+    exports: [],
+  },
+  {
+    id: 'school-2',
+    name: 'Lycée Jeanne Ferry de Loisette en Royan',
+    UAI: '0098765Z',
+    classes: [],
+    exports: [],
+  },
+];
+
+export const MultipleSchools: Story = {
+  render: renderWithProps({
+    schools,
+    selectedSchool: {
+      id: 'school-2',
+      name: 'Lycée Jeanne Ferry de Loisette en Royan',
+      UAI: '0098765Z',
+      classes: [],
+      exports: [],
+    },
+    onSelectedSchoolChange: (idx) =>
+      alert(
+        `School id=${schools[idx].id} UAI=${schools[idx].UAI} is selected.`,
+      ),
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: `
+Affiche une liste de plusieurs écoles avec sélection active.
+<ul>
+<li>2 écoles disponibles (Collège Jean Moulin, Lycée Jeanne Ferry de Loisette en Royan)</li>
+<li>École sélectionnée : Lycée Jeanne Ferry</li>
+<li>Callback au changement de sélection</li>
+</ul>`,
+      },
+    },
+  },
+};
+
+export const SingleSchool: Story = {
+  render: renderWithProps({
+    schools: [schools[0]],
+    selectedSchool: schools[0],
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: `Affiche une seule école`,
+      },
+    },
+  },
+};
+
+export const Empty: Story = {
+  render: renderWithProps({ selectedSchool: undefined }),
+  parameters: {
+    docs: {
+      description: {
+        story: `État vide (aucune école)`,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,90 @@
+import { School } from '@edifice.io/client';
+import { useTranslation } from 'react-i18next';
+import { Dropdown, Flex, IconButton, useToggle } from '../../../..';
+import { IconRafterDown } from '../../../../modules/icons/components';
+import './SchoolWidget.css';
+
+export interface SchoolWidgetProps {
+  selectedSchool: School | undefined;
+  onSelectedSchoolChange?: (schoolIndex: number) => void;
+  schools?: School[];
+}
+
+const SchoolWidget = ({
+  schools,
+  selectedSchool,
+  onSelectedSchoolChange,
+}: SchoolWidgetProps) => {
+  const [isExpanded, toggleExpanded] = useToggle(false);
+  const { t } = useTranslation();
+
+  const hasManySchools = schools && schools.length > 1;
+
+  const widgetStyle = { padding: '1.4rem 0.4rem' };
+  const containerStyle = { padding: '0.8rem' };
+  const selectedSchoolStyle = {
+    padding: '.4rem 2.9rem',
+    fontSize: '1.6rem',
+    lineHeight: '2.2rem',
+    color: 'var(--school-widget-selected-color)',
+  };
+
+  if (!selectedSchool) return null;
+
+  return (
+    <div className="school-widget" style={widgetStyle}>
+      <div style={containerStyle}>
+        <Flex
+          style={selectedSchoolStyle}
+          justify="center"
+          gap="4"
+          align="center"
+        >
+          <b>{selectedSchool.name}</b>
+          {hasManySchools && (
+            <Dropdown placement={'bottom-end'} onToggle={toggleExpanded}>
+              {(
+                triggerProps: React.ComponentPropsWithRef<typeof IconButton>,
+              ) => (
+                <>
+                  <IconButton
+                    {...triggerProps}
+                    aria-label={t('show')}
+                    color="tertiary"
+                    variant="ghost"
+                    icon={
+                      <IconRafterDown
+                        className="w-16 min-w-0"
+                        style={{
+                          transition: 'rotate 0.2s ease-out',
+                          rotate: isExpanded ? '0deg' : '-180deg',
+                        }}
+                      />
+                    }
+                  />
+                  <Dropdown.Menu>
+                    {schools.map((school, index) => (
+                      <Dropdown.Item
+                        key={school.id}
+                        onClick={() => onSelectedSchoolChange?.(index)}
+                      >
+                        <Flex direction="column">
+                          <p>{school.name}</p>
+                          {school.UAI && <p>UAI : {school.UAI}</p>}
+                        </Flex>
+                      </Dropdown.Item>
+                    ))}
+                  </Dropdown.Menu>
+                </>
+              )}
+            </Dropdown>
+          )}
+        </Flex>
+      </div>
+    </div>
+  );
+};
+
+SchoolWidget.displayName = 'SchoolWidget';
+
+export default SchoolWidget;

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

@@ -0,0 +1,122 @@
+// packages/react/src/modules/homepage/components/SchoolWidget/useUserSchools.test.tsx
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useUserSchools } from './useUserSchools';
+
+const mocks = vi.hoisted(() => ({
+  useEdificeClient: vi.fn(),
+  useWidgetPreferences: vi.fn(),
+  lookup: vi.fn(),
+  saveUserPreferences: vi.fn(),
+}));
+
+vi.mock('src/providers', () => ({
+  useEdificeClient: mocks.useEdificeClient,
+}));
+
+vi.mock('../../hooks/useWidgetPreferences', () => ({
+  default: mocks.useWidgetPreferences,
+}));
+
+vi.mock('@edifice.io/client', () => ({
+  WIDGET_NAME: { SCHOOL: 'SCHOOL' },
+}));
+
+describe('useUserSchools', () => {
+  const schools = [
+    { id: 's1', name: 'School 1' },
+    { id: 's2', name: 'School 2' },
+  ] as any[];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mocks.useEdificeClient.mockReturnValue({
+      userDescription: { schools },
+    });
+
+    mocks.lookup.mockReturnValue(undefined);
+
+    mocks.useWidgetPreferences.mockReturnValue({
+      lookup: mocks.lookup,
+      saveUserPreferences: mocks.saveUserPreferences,
+    });
+  });
+
+  it('returns empty schools when user has no schools', () => {
+    mocks.useEdificeClient.mockReturnValue({
+      userDescription: { schools: null },
+    });
+
+    const { result } = renderHook(() => useUserSchools());
+
+    expect(result.current.schools).toEqual([]);
+    expect(result.current.selectedSchool).toBeUndefined();
+  });
+
+  it('selects preferred school when preference exists', async () => {
+    const userPref = { schoolId: 's2' };
+    mocks.lookup.mockReturnValue({ userPref });
+
+    const { result } = renderHook(() => useUserSchools());
+
+    await waitFor(() => {
+      expect(result.current.selectedSchool?.id).toBe('s2');
+    });
+
+    expect(mocks.lookup).toHaveBeenCalledWith('SCHOOL');
+  });
+
+  it('falls back to first school when preferred school is missing', async () => {
+    const userPref = { schoolId: 'missing-school' };
+    mocks.lookup.mockReturnValue({ userPref });
+
+    const { result } = renderHook(() => useUserSchools());
+
+    await waitFor(() => {
+      expect(result.current.selectedSchool?.id).toBe('s1');
+    });
+  });
+
+  it('keeps selectedSchool undefined when no user preference exists', async () => {
+    mocks.lookup.mockReturnValue(undefined);
+
+    const { result } = renderHook(() => useUserSchools());
+
+    await waitFor(() => {
+      expect(result.current.selectedSchool).toBeUndefined();
+    });
+  });
+
+  it('updates selected school and saves preference on change when userPref exists', async () => {
+    const userPref = { schoolId: 's1' };
+    mocks.lookup.mockReturnValue({ userPref });
+
+    const { result } = renderHook(() => useUserSchools());
+
+    await waitFor(() => {
+      expect(result.current.selectedSchool?.id).toBe('s1');
+    });
+
+    act(() => {
+      result.current.handleSelectedSchoolChange(schools[1] as any);
+    });
+
+    expect(result.current.selectedSchool?.id).toBe('s2');
+    expect(userPref.schoolId).toBe('s2');
+    expect(mocks.saveUserPreferences).toHaveBeenCalledTimes(1);
+  });
+
+  it('updates selected school but does not save when no userPref exists', () => {
+    mocks.lookup.mockReturnValue(undefined);
+
+    const { result } = renderHook(() => useUserSchools());
+
+    act(() => {
+      result.current.handleSelectedSchoolChange(schools[0] as any);
+    });
+
+    expect(result.current.selectedSchool?.id).toBe('s1');
+    expect(mocks.saveUserPreferences).not.toHaveBeenCalled();
+  });
+});