@edifice.io/react 2.6.6 → 2.6.7

package/dist/homepage.js

@@ -1,13 +1,17 @@
-import { default as default2 } from "./modules/homepage/components/Header/Header.js";
-import { default as default3 } from "./modules/homepage/components/HomeCard/HomeCard.js";
-import { default as default4 } from "./modules/homepage/components/LastInfos/LastInfos.js";
-import { default as default5 } from "./modules/homepage/components/MessageFlashList/MessageFlash.js";
-import { default as default6 } from "./modules/homepage/components/MessageFlashList/MessageFlashList.js";
-import { default as default7 } from "./modules/homepage/components/Notifications/NotificationItem.js";
-import { default as default8 } from "./modules/homepage/components/Notifications/NotificationList.js";
+import { default as default2 } from "./modules/homepage/components/Communities/Communities.js";
+import { default as default3 } from "./modules/homepage/components/Communities/CommunityItem.js";
+import { default as default4 } from "./modules/homepage/components/Communities/CommunitiesSkeleton.js";
+import { default as default5 } from "./modules/homepage/components/Header/Header.js";
+import { default as default6 } from "./modules/homepage/components/HomeCard/HomeCard.js";
+import { default as default7 } from "./modules/homepage/components/LastInfos/LastInfos.js";
+import { default as default8 } from "./modules/homepage/components/MessageFlashList/MessageFlash.js";
+import { default as default9 } from "./modules/homepage/components/MessageFlashList/MessageFlashList.js";
+import { default as default10 } from "./modules/homepage/components/Notifications/NotificationItem.js";
+import { default as default11 } from "./modules/homepage/components/Notifications/NotificationList.js";
 import { NotificationListContainer } from "./modules/homepage/components/Notifications/NotificationListContainer.js";
-import { default as default9 } from "./modules/homepage/components/SchoolSpace/SchoolSpace.js";
-import { default as default10 } from "./modules/homepage/components/UserSpace/UserSpace.js";
+import { default as default12 } from "./modules/homepage/components/SchoolSpace/SchoolSpace.js";
+import { default as default13 } from "./modules/homepage/components/UserSpace/UserSpace.js";
+import { CommunitiesContainer } from "./modules/homepage/components/Communities/CommunitiesContainer.js";
 import { Favorites } from "./modules/homepage/components/Favorites/Favorites.js";
 import { FavoritesContainer } from "./modules/homepage/components/Favorites/FavoritesContainer.js";
 import { LastInfosContainer } from "./modules/homepage/components/LastInfos/LastInfosContainer.js";
@@ -15,22 +19,28 @@ import { LastInfosList } from "./modules/homepage/components/LastInfos/LastInfos
 import { MessageFlashListContainer } from "./modules/homepage/components/MessageFlashList/MessageFlashListContainer.js";
 import { SchoolSpaceContainer } from "./modules/homepage/components/SchoolSpace/SchoolSpaceContainer.js";
 import { UserSpaceContainer } from "./modules/homepage/components/UserSpace/UserSpaceContainer.js";
+import { useCommunities } from "./modules/homepage/components/Communities/useCommunities.js";
 export {
+  default2 as Communities,
+  CommunitiesContainer,
+  default3 as CommunitiesItem,
+  default4 as CommunitiesSkeleton,
   Favorites,
   FavoritesContainer,
-  default2 as Header,
-  default3 as HomeCard,
-  default4 as LastInfos,
+  default5 as Header,
+  default6 as HomeCard,
+  default7 as LastInfos,
   LastInfosContainer,
   LastInfosList,
-  default5 as MessageFlash,
-  default6 as MessageFlashList,
+  default8 as MessageFlash,
+  default9 as MessageFlashList,
   MessageFlashListContainer,
-  default7 as NotificationItem,
-  default8 as NotificationList,
+  default10 as NotificationItem,
+  default11 as NotificationList,
   NotificationListContainer,
-  default9 as SchoolSpace,
+  default12 as SchoolSpace,
   SchoolSpaceContainer,
-  default10 as UserSpace,
-  UserSpaceContainer
+  default13 as UserSpace,
+  UserSpaceContainer,
+  useCommunities
 };

package/dist/modules/homepage/components/Communities/Communities.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import illuCommunities from "@edifice.io/bootstrap/dist/images/homepage/illu-communities.svg";
+import { useMeasure } from "@uidotdev/usehooks";
+import { useTranslation } from "react-i18next";
+import SvgIconArrowRight from "../../../icons/components/IconArrowRight.js";
+import CommunityItem from "./CommunityItem.js";
+import HomeCard from "../HomeCard/HomeCard.js";
+import Flex from "../../../../components/Flex/Flex.js";
+import Image from "../../../../components/Image/Image.js";
+const NARROW_CONTAINER_WIDTH = 800, MAX_ITEMS = 4, MAX_ITEMS_NARROW = 3, Communities = ({
+  communitiesList = [],
+  handleActionClick
+}) => {
+  const {
+    t
+  } = useTranslation(), [containerRef, {
+    width
+  }] = useMeasure(), maxItems = width !== null && width < NARROW_CONTAINER_WIDTH ? MAX_ITEMS_NARROW : MAX_ITEMS, visibleCommunities = communitiesList.slice(0, maxItems), itemWidth = `${100 / maxItems}%`;
+  return /* @__PURE__ */ jsxs(HomeCard, { variant: "primary", children: [
+    /* @__PURE__ */ jsx(HomeCard.Header, { actionLabel: communitiesList.length > 0 ? t("homepage.communities.actionLabel.seeMore") : t("homepage.communities.actionLabel.create"), actionRightIcon: /* @__PURE__ */ jsx(SvgIconArrowRight, {}), onActionClick: handleActionClick, title: t("homepage.communities.title") }),
+    /* @__PURE__ */ jsx(HomeCard.Content, { children: /* @__PURE__ */ jsx(Flex, { ref: containerRef, gap: "16", children: visibleCommunities.length > 0 ? visibleCommunities.map((community, index) => /* @__PURE__ */ jsx(CommunityItem, { title: community.title, communityImage: community.communityImage, onActionClick: community.onActionClick, nbNotifications: community.nbNotifications, width: itemWidth }, index)) : /* @__PURE__ */ jsxs("div", { className: "communities-empty", children: [
+      /* @__PURE__ */ jsx(Image, { src: illuCommunities, alt: "", "aria-hidden": "true", style: {
+        width: 80,
+        height: 80
+      } }),
+      /* @__PURE__ */ jsxs("div", { className: "communities-empty-content", children: [
+        /* @__PURE__ */ jsx("p", { className: "communities-empty-title", children: t("homepage.communities.subtitle", "Créez votre première communauté pour animer votre classe !") }),
+        /* @__PURE__ */ jsx("p", { className: "communities-empty-description", children: t("homepage.communities.description", "Vous pouvez centraliser et organiser les documents et les ressources pour vos élèves.") })
+      ] })
+    ] }) }) })
+  ] });
+};
+export {
+  Communities as default
+};

package/dist/modules/homepage/components/Communities/CommunitiesContainer.d.ts

@@ -1,9 +1,11 @@
 import { CommunitiesModel } from './useCommunities';
 export type CommunitiesContainerProps = {
+    /** Handle a click on a community. If undefined, the community's home page will be opened. */
     onCommunityClick?: (community: CommunitiesModel) => void;
-    onHeaderActionClick: () => void;
+    /** Handle a click on the header action button. If undefined, communities (or the community creation flow) will be opened. */
+    onHeaderActionClick?: () => void;
 };
-export declare function CommunitiesContainer({ onCommunityClick, onHeaderActionClick, }: CommunitiesContainerProps): import("react/jsx-runtime").JSX.Element | "An error occurred while loading communities.";
+export declare function CommunitiesContainer({ onCommunityClick: handleCommunityClick, onHeaderActionClick: handleHeaderActionClick, }: CommunitiesContainerProps): import("react/jsx-runtime").JSX.Element | "An error occurred while loading communities.";
 export declare namespace CommunitiesContainer {
     var displayName: string;
 }

package/dist/modules/homepage/components/Communities/CommunitiesContainer.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import Communities from "./Communities.js";
+import CommunitiesSkeleton from "./CommunitiesSkeleton.js";
+import { useCommunities } from "./useCommunities.js";
+function CommunitiesContainer({
+  onCommunityClick: handleCommunityClick = (community) => {
+    window.open(`/communities/id/${community.id}/home`, "_self");
+  },
+  onHeaderActionClick: handleHeaderActionClick
+}) {
+  const {
+    communities,
+    isLoading,
+    error
+  } = useCommunities(), handleActionClick = useCallback(() => {
+    if (handleHeaderActionClick) {
+      handleHeaderActionClick();
+      return;
+    }
+    window.open(communities.length > 0 ? "/communities" : "/communities/create/step-type", "_self");
+  }, [handleHeaderActionClick, communities.length]), mappedCommunities = useMemo(() => communities.map((community) => ({
+    title: community.title,
+    communityImage: community.image ?? "",
+    onActionClick: () => handleCommunityClick(community)
+  })), [communities, handleCommunityClick]);
+  return isLoading ? /* @__PURE__ */ jsx(CommunitiesSkeleton, {}) : error ? "An error occurred while loading communities." : /* @__PURE__ */ jsx(Communities, { communitiesList: mappedCommunities, handleActionClick });
+}
+export {
+  CommunitiesContainer
+};

package/dist/modules/homepage/components/Communities/CommunitiesSkeleton.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import HomeCard from "../HomeCard/HomeCard.js";
+import Flex from "../../../../components/Flex/Flex.js";
+import TextSkeleton from "../../../../components/Skeleton/TextSkeleton.js";
+import ButtonSkeleton from "../../../../components/Skeleton/ButtonSkeleton.js";
+const primaryTitleWidths = ["80%", "64%", "88%", "72%"], secondaryTitleWidths = ["56%", "44%", "60%", "48%"], CommunitiesSkeleton = () => /* @__PURE__ */ jsxs(HomeCard, { variant: "primary", "data-testid": "communities-skeleton", children: [
+  /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", gap: "8", className: "home-card-header", children: [
+    /* @__PURE__ */ jsx(TextSkeleton, { size: "lg", className: "col-5" }),
+    /* @__PURE__ */ jsx(ButtonSkeleton, { "aria-hidden": "true", size: "sm", className: "px-24", color: "tertiary" })
+  ] }),
+  /* @__PURE__ */ jsx(HomeCard.Content, { children: /* @__PURE__ */ jsx(Flex, { gap: "16", children: primaryTitleWidths.map((primaryWidth, index) => /* @__PURE__ */ jsxs("div", { className: "communities-item", style: {
+    width: "25%"
+  }, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("div", { className: "communities-item-image placeholder rounded", style: {
+      display: "block",
+      aspectRatio: "1 / 1"
+    } }),
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "4", className: "mt-8", children: [
+      /* @__PURE__ */ jsx("div", { style: {
+        width: primaryWidth,
+        alignSelf: "center"
+      }, children: /* @__PURE__ */ jsx(TextSkeleton, { className: "col-12", size: "sm" }) }),
+      /* @__PURE__ */ jsx("div", { style: {
+        width: secondaryTitleWidths[index],
+        alignSelf: "center"
+      }, children: /* @__PURE__ */ jsx(TextSkeleton, { className: "col-12", size: "sm" }) })
+    ] })
+  ] }, primaryWidth)) }) })
+] });
+export {
+  CommunitiesSkeleton as default
+};

package/dist/modules/homepage/components/Communities/CommunityItem.d.ts

@@ -3,9 +3,10 @@ export interface CommunityItemProps {
     communityImage: string;
     onActionClick: () => void;
     nbNotifications?: number;
+    width?: string;
 }
 declare const CommunityItem: {
-    ({ title, communityImage, nbNotifications, onActionClick, }: CommunityItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, communityImage, nbNotifications, onActionClick, width, }: CommunityItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default CommunityItem;

package/dist/modules/homepage/components/Communities/CommunityItem.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import Badge from "../../../../components/Badge/Badge.js";
+import Image from "../../../../components/Image/Image.js";
+const CommunityItem = ({
+  title,
+  communityImage,
+  nbNotifications,
+  onActionClick,
+  width = "25%"
+}) => {
+  const hasNotifications = (nbNotifications ?? 0) > 0;
+  return /* @__PURE__ */ jsxs("div", { role: "button", tabIndex: 0, onClick: onActionClick, className: clsx("communities-item", {
+    "communities-item-has-notifications": hasNotifications
+  }), style: {
+    width
+  }, children: [
+    hasNotifications && /* @__PURE__ */ jsx(Badge, { className: "communities-item-badge", variant: {
+      level: "danger",
+      type: "notification"
+    }, children: nbNotifications }),
+    /* @__PURE__ */ jsx(Image, { className: "communities-item-image", src: communityImage, alt: title }),
+    /* @__PURE__ */ jsx("p", { className: "communities-item-title text-truncate text-truncate-2", children: title })
+  ] });
+};
+export {
+  CommunityItem as default
+};

package/dist/modules/homepage/components/Communities/useCommunities.d.ts

@@ -1,10 +1,7 @@
 export interface CommunitiesModel {
     id: number | string;
     title: string;
-    communityImage?: string;
-    icon?: string;
-    nbNotifications?: number;
-    notifications?: number;
+    image?: string;
 }
 export declare function useCommunities(): {
     communities: CommunitiesModel[];

package/dist/modules/homepage/components/Communities/useCommunities.js

@@ -0,0 +1,25 @@
+import { odeServices } from "@edifice.io/client";
+import { useQuery, queryOptions } from "@tanstack/react-query";
+function useCommunities() {
+  const {
+    data,
+    isLoading,
+    error
+  } = useQuery(queryOptions({
+    queryKey: ["communities", "preview"],
+    queryFn: async () => {
+      const http = odeServices.http(), response = await http.get("/communities/api/communities?page=1&size=4");
+      if (http.isResponseError())
+        throw new Error(http.latestResponse.statusText);
+      return response.items;
+    }
+  }));
+  return {
+    communities: data ?? [],
+    isLoading,
+    error
+  };
+}
+export {
+  useCommunities
+};

package/dist/modules/homepage/components/index.d.ts

@@ -6,3 +6,4 @@ export * from './MessageFlashList';
 export * from './Notifications';
 export * from './SchoolSpace';
 export * from './UserSpace';
+export * from './Communities';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edifice.io/react",
-  "version": "2.6.6",
+  "version": "2.6.7",
   "description": "Edifice React Library",
   "keywords": [
     "react",
@@ -140,9 +140,9 @@
     "swiper": "10.1.0",
     "ua-parser-js": "1.0.36",
     "zustand": "4.5.7",
-    "@edifice.io/bootstrap": "2.6.6",
-    "@edifice.io/tiptap-extensions": "2.6.6",
-    "@edifice.io/utilities": "2.6.6"
+    "@edifice.io/bootstrap": "2.6.7",
+    "@edifice.io/tiptap-extensions": "2.6.7",
+    "@edifice.io/utilities": "2.6.7"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "7.27.1",
@@ -173,8 +173,8 @@
     "vite": "5.4.14",
     "vite-plugin-dts": "4.5.4",
     "vite-tsconfig-paths": "5.1.4",
-    "@edifice.io/config": "2.6.6",
-    "@edifice.io/client": "2.6.6"
+    "@edifice.io/client": "2.6.7",
+    "@edifice.io/config": "2.6.7"
   },
   "peerDependencies": {
     "@react-spring/web": "9.7.5",