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 @@
+:root {
+  --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,89 @@
+import { School } from '@edifice.io/client';
+import { Dropdown, Flex, IconButton, useToggle } from '@edifice.io/react';
+import { IconRafterDown } from '@edifice.io/react/icons';
+import { RefAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+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',
+    'font-size': '1.6rem',
+    'line-height': '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: RefAttributes<HTMLButtonElement>) => (
+                <>
+                  <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.ts

@@ -0,0 +1,47 @@
+import { School, WIDGET_NAME, WidgetUserPref } from '@edifice.io/client';
+import { useEffect, useState } from 'react';
+import { useEdificeClient } from 'src/providers';
+import useWidgetPreferences from '../../hooks/useWidgetPreferences';
+
+export function useUserSchools() {
+  const { userDescription } = useEdificeClient();
+  const { lookup, saveUserPreferences } = useWidgetPreferences();
+  const [userPreferences, setUserPreferences] = useState<WidgetUserPref>();
+  const [selectedSchool, setSelectedSchool] = useState<School>();
+
+  const schools = userDescription?.schools;
+
+  useEffect(() => {
+    setSelectedSchool(schools?.[0]);
+  }, []);
+
+  useEffect(() => {
+    const userPref = lookup?.(WIDGET_NAME.SCHOOL)?.userPref;
+    setUserPreferences(userPref);
+  }, [lookup]);
+
+  useEffect(() => {
+    if (userPreferences?.schoolId && Array.isArray(schools)) {
+      const index = schools.findIndex(
+        (school) => school.id === userPreferences?.schoolId,
+      );
+      setSelectedSchool(
+        index < 0 || index >= schools.length ? schools[0] : schools[index],
+      );
+    } else {
+      setSelectedSchool(undefined);
+    }
+  }, [userPreferences]);
+
+  return {
+    schools: schools ?? [],
+    selectedSchool,
+    handleSelectedSchoolChange: (school: School) => {
+      setSelectedSchool(school);
+      if (userPreferences) {
+        userPreferences.schoolId = school.id;
+        saveUserPreferences();
+      }
+    },
+  };
+}

packages/react/src/modules/homepage/hooks/useWidgetPreferences.ts

@@ -0,0 +1,22 @@
+import { IWidgetFramework, WidgetFrameworkFactory } from '@edifice.io/client';
+import { useMutation } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+
+export default function useWidgetPreferences() {
+  const [svc, setSvc] = useState<IWidgetFramework>();
+
+  const saveMutation = useMutation({
+    mutationFn: svc?.saveUserPrefs,
+  });
+
+  useEffect(() => {
+    const widgetService = WidgetFrameworkFactory.instance();
+    widgetService.initialize(null, null).then(() => setSvc(widgetService));
+  }, []);
+
+  return {
+    list: svc?.list,
+    lookup: svc?.lookup,
+    saveUserPreferences: saveMutation.mutateAsync,
+  };
+}

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

@@ -1,6 +1,5 @@
 import { useEffect, useMemo } from 'react';
 
-import { App } from '@edifice.io/client';
 import { useTranslation } from 'react-i18next';
 import { useConf } from '../../hooks/useConf';
 import { useSession } from '../../hooks/useSession';
@@ -9,13 +8,6 @@ import {
   EdificeClientProviderProps,
 } from './EdificeClientProvider.context';
 
-export interface OdeProviderParams {
-  alternativeApp?: boolean;
-  app: App;
-  cdnDomain?: string | null;
-  version?: string | null;
-}
-
 export function EdificeClientProvider({
   children,
   params,