@edifice.io/react 2.0.0-develop-rc.3

package/README.md

@@ -0,0 +1,110 @@
+# Edifice React Components
+
+![npm](https://img.shields.io/npm/v/@edifice.io/react?style=flat-square)
+![bundlephobia](https://img.shields.io/bundlephobia/min/@edifice.io/react?style=flat-square)
+
+## Getting Started
+
+We follow [WAI ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) rules and [Bootstrap 5](https://getbootstrap.com/docs/5.0/components/accordion/) guidelines when making our components
+
+### Build
+
+```bash
+pnpm run build
+```
+
+### Lint
+
+```bash
+pnpm run lint
+```
+
+If `pnpm run lint` shows issues, run this command to fix them.
+
+```bash
+pnpm run fix
+```
+
+### Prettier
+
+```bash
+pnpm run format
+```
+
+## Structure
+
+### Component Folder
+
+- Folder name always in PascalCase: `Button`
+- Component file in PascalCase: `Button.tsx`
+- Export types & interfaces inside Component file
+- Stories file in PascalCase + `*.stories.tsx` : `Button.stories.tsx`
+
+```bash
+src
+  -- ComponentFolder
+    -- Component.tsx
+    -- Component.stories.tsx
+    -- index.ts
+```
+
+- Re-export the Component inside his own `index` file: `index.ts`
+- Export everything if Component has types & interfaces
+
+```jsx
+export { default as Component } from './Component';
+export * from './Component';
+```
+
+### Component Guideline
+
+- Always document basic guideline of Component with JSDoc format. Used by Storybook to generate documentation.
+
+```jsx
+/**
+ * Primary UI component for user interaction
+ */
+```
+
+### Interface description
+
+- Always document typescript types and interface with JSDoc syntax. Used by Storybook to generate documentation.
+
+```jsx
+// Interface description (e.g: TreeViewProps.tsx)
+export interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: "small" | "medium" | "large";
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+```
+
+### Index file inside `src` folder
+
+- Entry point of this React Library.
+- Import your component inside `index.ts` file.
+
+```jsx
+export * from './Button';
+```
+
+## Dev
+
+You can build your component using `Storybook`. See [README](../../docs//README.md)

package/dist/audience.js

@@ -0,0 +1,16 @@
+import { default as default2 } from "./modules/audience/ViewsCounter.js";
+import { default as default3 } from "./modules/audience/ViewsModal.js";
+import { default as default4 } from "./modules/audience/ReactionSummary.js";
+import { default as default5 } from "./modules/audience/ReactionChoice.js";
+import { default as default6 } from "./modules/audience/ReactionModal.js";
+import { default as default7 } from "./modules/audience/hooks/useReactions.js";
+import { default as default8 } from "./modules/audience/hooks/useReactionIcons.js";
+export {
+  default5 as ReactionChoice,
+  default6 as ReactionModal,
+  default4 as ReactionSummary,
+  default2 as ViewsCounter,
+  default3 as ViewsModal,
+  default8 as useReactionIcons,
+  default7 as useReactions
+};

package/dist/components/ActionBar/ActionBar.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface ActionBarProps {
+    /**
+     * Add Buttons To Actions bar
+     */
+    children: React.ReactNode;
+}
+export type ActionBarType = React.FC<ActionBarProps>;
+declare const ActionBar: import('react').ForwardRefExoticComponent<ActionBarProps & import('react').RefAttributes<HTMLDivElement>>;
+export default ActionBar;

package/dist/components/ActionBar/ActionBar.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const ActionBar = /* @__PURE__ */ forwardRef(({
+  children
+}, ref) => /* @__PURE__ */ jsx("div", { ref, className: "actionbar", children })), ActionBar$1 = ActionBar;
+export {
+  ActionBar$1 as default
+};

package/dist/components/ActionBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ActionBar } from './ActionBar';
+export * from './ActionBar';

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,60 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface AlertRef {
+    show: () => void;
+    hide: () => void;
+}
+export type AlertTypes = 'success' | 'warning' | 'info' | 'danger';
+export type AlertPosition = 'none' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export interface AlertProps extends ComponentPropsWithRef<'div'> {
+    /**
+     * Type of alert
+     */
+    type?: AlertTypes;
+    /**
+     * Alert can be closed with a button ?
+     */
+    isDismissible?: boolean;
+    /**
+     * Alert is displayed as Toast
+     */
+    isToast?: boolean;
+    /**
+     * Alert is displayed as a confirm box (cancel button and confirm button)
+     */
+    isConfirm?: boolean;
+    /**
+     * Alert poistion.
+     */
+    position?: AlertPosition;
+    /**
+     * Alert must close after delay
+     */
+    autoClose?: boolean;
+    /**
+     * If autoClose if activated, set the delay
+     * Défault : 3000
+     */
+    autoCloseDelay?: number;
+    /**
+     * Alert box content
+     */
+    children: ReactNode;
+    /**
+     * Alert box action
+     */
+    button?: ReactNode;
+    /**
+     * Callback when alert is closed
+     */
+    onClose?: () => void;
+    /**
+     * Callback when alert is closed
+     */
+    onVisibilityChange?: (isVisible: boolean) => void;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+declare const Alert: import('react').ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import('react').RefAttributes<AlertRef>>;
+export default Alert;

package/dist/components/Alert/Alert.js

@@ -0,0 +1,78 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useCallback, useImperativeHandle, useLayoutEffect, useEffect } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import Button from "../Button/Button.js";
+import { Icon } from "../Icon/Icon.js";
+const Alert = /* @__PURE__ */ forwardRef(({
+  type = "success",
+  className = "",
+  children,
+  button,
+  isDismissible = !1,
+  isToast = !1,
+  isConfirm = !1,
+  position = "none",
+  autoClose = !1,
+  autoCloseDelay = 3e3,
+  onClose,
+  onVisibilityChange
+}, ref) => {
+  const [isVisible, setVisibleStatus] = useState(!0), refAlert = useRef(null), {
+    t
+  } = useTranslation(), hide = useCallback(() => {
+    setVisibleStatus(!1), onClose == null || onClose();
+  }, [onClose]);
+  useImperativeHandle(ref, () => ({
+    show,
+    hide,
+    ...refAlert.current
+  })), useLayoutEffect(() => {
+    onVisibilityChange == null || onVisibilityChange(isVisible);
+  }, [isVisible, onVisibilityChange]), useEffect(() => {
+    autoClose && isVisible && setTimeout(() => {
+      hide();
+    }, autoCloseDelay);
+  }, [autoClose, autoCloseDelay, hide, isVisible]);
+  const show = () => {
+    setVisibleStatus(!0);
+  }, mapping = {
+    success: {
+      icon: /* @__PURE__ */ jsx(Icon, { name: "success-outline" }),
+      classModifier: "alert-success"
+    },
+    warning: {
+      icon: /* @__PURE__ */ jsx(Icon, { name: "alert-circle" }),
+      classModifier: "alert-warning"
+    },
+    info: {
+      icon: /* @__PURE__ */ jsx(Icon, { name: "info-circle" }),
+      classModifier: "alert-info"
+    },
+    danger: {
+      icon: /* @__PURE__ */ jsx(Icon, { name: "error" }),
+      classModifier: "alert-danger"
+    }
+  }, toastClasses = {
+    "is-dismissible": isDismissible,
+    "is-toast ": isToast
+  }, confirmClasses = {
+    "is-confirm": isConfirm
+  }, divContainerClasses = clsx("alert gap-12", mapping[type].classModifier, toastClasses, confirmClasses, position, className);
+  return /* @__PURE__ */ jsx(Fragment, { children: isVisible ? /* @__PURE__ */ jsxs("div", { ref: refAlert, className: divContainerClasses, role: "alert", children: [
+    !isConfirm && mapping[type].icon,
+    /* @__PURE__ */ jsx("div", { className: "alert-content small", children }),
+    button && /* @__PURE__ */ jsxs("div", { className: "ms-12", children: [
+      button,
+      " ",
+      isConfirm && /* @__PURE__ */ jsx(Button, { onClick: hide, children: t("close") })
+    ] }),
+    (isDismissible || isConfirm) && /* @__PURE__ */ jsx("div", { className: "btn-close-container", children: /* @__PURE__ */ jsx("button", { type: "button", className: "btn-close", "data-bs-dismiss": "alert", "aria-label": t("close"), onClick: hide }) }),
+    autoClose && /* @__PURE__ */ jsx("div", { className: "alert-progress", style: {
+      transform: "scaleX(0)"
+    } })
+  ] }) : null });
+}), Alert$1 = Alert;
+export {
+  Alert$1 as default
+};

package/dist/components/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Alert } from './Alert';
+export * from './Alert';

package/dist/components/AppHeader/AppHeader.d.ts

@@ -0,0 +1,17 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface AppHeaderProps extends ComponentPropsWithRef<'div'> {
+    /**
+     * Accept Breadcrumb Component
+     */
+    children: ReactNode;
+    /**
+     * Actions
+     */
+    render?: () => JSX.Element | null;
+    /**
+     * When no layout is used
+     */
+    isFullscreen?: boolean;
+}
+declare const AppHeader: import('react').ForwardRefExoticComponent<Omit<AppHeaderProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default AppHeader;

package/dist/components/AppHeader/AppHeader.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const AppHeader = /* @__PURE__ */ forwardRef(({
+  children,
+  render,
+  isFullscreen = !1,
+  ...restProps
+}, ref) => {
+  const classes = clsx("d-flex flex-wrap p-16 gap-8 border-bottom bg-white", {
+    "justify-content-between": render,
+    "mx-n16": !isFullscreen,
+    "z-3 top-0 start-0 end-0": isFullscreen
+  });
+  return /* @__PURE__ */ jsxs("div", { ref, className: classes, ...restProps, children: [
+    children,
+    render ? /* @__PURE__ */ jsx("div", { className: "d-flex align-items-center ms-auto gap-8", children: render() }) : null
+  ] });
+}), AppHeader$1 = AppHeader;
+export {
+  AppHeader$1 as default
+};

package/dist/components/AppHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AppHeader } from './AppHeader';
+export * from './AppHeader';

package/dist/components/AppIcon/AppIcon.d.ts

@@ -0,0 +1,45 @@
+import { IWebApp } from 'edifice-ts-client';
+export type AppIconSize = '24' | '32' | '40' | '48' | '80' | '160';
+export interface AppIconBaseProps {
+    /**
+     * Define icon size
+     */
+    size?: AppIconSize;
+    /**
+     * App information to get code and name
+     */
+    app?: IWebApp | string;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+type AppVariants = 'square' | 'circle' | 'rounded';
+type SquareVariant = Extract<AppVariants, 'square'>;
+type SquareIcon = {
+    /**
+     * Show icon full width
+     */
+    iconFit?: 'contain';
+    /**
+     * Square variant
+     */
+    variant?: SquareVariant;
+};
+type VariantsIcon = {
+    /**
+     * Add padding around icon
+     */
+    iconFit: 'ratio';
+    /**
+     * Rounded or Circle variant
+     */
+    variant: AppVariants;
+};
+export type AppIconVariants = SquareIcon | VariantsIcon;
+export type AppIconProps = AppIconBaseProps & AppIconVariants;
+/**
+ * Icon Component used to display the icon of an application
+ */
+export declare const AppIcon: import('react').ForwardRefExoticComponent<AppIconProps & import('react').RefAttributes<SVGSVGElement>>;
+export {};

package/dist/components/AppIcon/AppIcon.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import Image from "../Image/Image.js";
+import useOdeIcons from "../../core/useOdeIcons/useOdeIcons.js";
+import usePaths from "../../core/usePaths/usePaths.js";
+const AppIcon = /* @__PURE__ */ forwardRef(({
+  app,
+  size = "24",
+  iconFit = "contain",
+  variant = "square",
+  className = ""
+}, ref) => {
+  const {
+    isIconUrl,
+    getIconCode
+  } = useOdeIcons(), [, iconPath] = usePaths(), isSquare = variant === "square", isRounded = variant === "rounded", isCircle = variant === "circle", isContain = iconFit === "contain", isRatio = iconFit === "ratio", iconSizes = {
+    "icon-xs": size === "24",
+    "icon-sm": size === "40",
+    "icon-md": size === "48",
+    "icon-lg": size === "80",
+    "icon-xl": size === "160"
+  }, iconVariant = {
+    square: isSquare,
+    rounded: isRounded,
+    "rounded-circle": isCircle
+  }, iconFits = {
+    "icon-contain": isContain,
+    "icon-ratio": isRatio
+  }, icon = typeof app == "string" ? app : (app == null ? void 0 : app.icon) !== void 0 ? app.icon : "placeholder", displayName = typeof app != "string" && (app == null ? void 0 : app.displayName) !== void 0 ? app.displayName : "", code = app ? getIconCode(app) : "", isIconURL = isIconUrl(icon), appCode = code || "placeholder";
+  if (isIconURL) {
+    const classes2 = clsx("h-full", className);
+    return /* @__PURE__ */ jsx(Image, { src: icon, alt: displayName, objectFit: "contain", width: size, height: size, className: classes2 });
+  }
+  const classes = clsx("app-icon", {
+    ...iconSizes,
+    ...iconVariant,
+    ...iconFits,
+    [`bg-light-${appCode}`]: appCode && !isContain,
+    [`color-app-${appCode}`]: appCode
+  }, className);
+  return /* @__PURE__ */ jsx("div", { className: classes, style: {
+    width: size + "px",
+    height: size + "px"
+  }, children: /* @__PURE__ */ jsx("svg", { ref, width: size, height: size, role: "img", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx("use", { xlinkHref: `${iconPath}/apps.svg#${appCode}` }) }) });
+});
+export {
+  AppIcon
+};

package/dist/components/AppIcon/index.d.ts

@@ -0,0 +1 @@
+export * from './AppIcon';

package/dist/components/Attachment/Attachment.d.ts

@@ -0,0 +1,14 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface AttachmentProps extends ComponentPropsWithRef<'div'> {
+    /**
+     * Name of resource or Folder
+     * */
+    name?: string;
+    /**
+     * Actions attachment
+     * */
+    options: ReactNode | undefined;
+}
+export type AttachmentType = AttachmentProps;
+declare const Attachment: import('react').ForwardRefExoticComponent<Omit<AttachmentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default Attachment;

package/dist/components/Attachment/Attachment.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Icon } from "../Icon/Icon.js";
+const Attachment = /* @__PURE__ */ forwardRef(({
+  name = "Attachment Name",
+  options,
+  ...restProps
+}, ref) => /* @__PURE__ */ jsxs("div", { ref, className: "attachment px-12 py-8", ...restProps, children: [
+  /* @__PURE__ */ jsx(Icon, { name: "paperclip", size: "22" }),
+  /* @__PURE__ */ jsx("div", { className: "filename text-truncate", children: name }),
+  options && /* @__PURE__ */ jsx("div", { className: "options ps-12", children: options })
+] })), Attachment$1 = Attachment;
+export {
+  Attachment$1 as default
+};

package/dist/components/Attachment/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Attachment } from './Attachment';
+export * from './Attachment';

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export type AvatarVariants = 'square' | 'rounded' | 'circle';
+export type AvatarSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface AvatarProps extends React.ComponentPropsWithRef<'img'> {
+    /**
+     * Shape of Avatar
+     * `title`, `square`, `circle`
+     */
+    variant?: AvatarVariants;
+    /**
+     * Avatar' size
+     */
+    size?: AvatarSizes;
+    /**
+     * Show image when `src` props is provided
+     */
+    src?: string;
+    /**
+     * Custom fallback image
+     */
+    imgPlaceholder?: string;
+    /**
+     * Alternative text when using image
+     */
+    alt: string;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+declare const Avatar: import('react').ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default Avatar;

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import usePaths from "../../core/usePaths/usePaths.js";
+import Image from "../Image/Image.js";
+const Avatar = /* @__PURE__ */ forwardRef(({
+  variant = "square",
+  size = "md",
+  alt,
+  src,
+  imgPlaceholder,
+  className,
+  ...restProps
+}, ref) => {
+  const [imagePath] = usePaths(), placeholder = imgPlaceholder || `${imagePath}/avatar/no-avatar.svg`, classes = clsx("avatar", {
+    ...{
+      "avatar-xs": size === "xs",
+      "avatar-sm": size === "sm",
+      "avatar-md": size === "md",
+      "avatar-lg": size === "lg",
+      "avatar-xl": size === "xl"
+    },
+    ...{
+      square: variant === "square",
+      rounded: variant === "rounded",
+      "rounded-circle": variant === "circle"
+    }
+  }, className);
+  return /* @__PURE__ */ jsx("div", { ref, className: classes, children: /* @__PURE__ */ jsx(Image, { src: src || placeholder, alt, imgPlaceholder: placeholder, ...restProps }) });
+}), Avatar$1 = Avatar;
+export {
+  Avatar$1 as default
+};

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar';
+export * from './Avatar';

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+export type BadgeRef = HTMLSpanElement;
+/** Badge variant : notification */
+export type NotificationBadgeVariant = {
+    type: 'notification';
+    level: 'warning' | 'danger' | 'info';
+    color?: 'background' | 'text';
+};
+/** Badge variant : profile = teacher, student, relative or personnel */
+export type ProfileBadgeVariant = {
+    type: 'profile';
+    profile: 'teacher' | 'student' | 'relative' | 'personnel';
+};
+/** Badge variant : link */
+export type LinkBadgeVariant = {
+    type: 'link';
+};
+export type BadgeVariants = NotificationBadgeVariant | ProfileBadgeVariant | LinkBadgeVariant;
+export interface BadgeProps extends React.ComponentPropsWithRef<'span'> {
+    /**
+     * Badge variant : notification, link or profile (Teacher|Student|Relative|Personnel)
+     * Defaults to notification.
+     */
+    variant?: BadgeVariants;
+    /**
+     * Is badge always visible ?
+     * A badge with no children is hidden by default.
+     */
+    visibility?: 'always';
+    /**
+     * If set, forces the radius of the rounded border.
+     */
+    rounded?: 'pill' | 'circle';
+    /**
+     * Text or icon (or whatever) to render as children elements.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+/**
+ * Primary UI component for user interaction
+ */
+declare const Badge: import('react').ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export default Badge;

package/dist/components/Badge/Badge.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const Badge = /* @__PURE__ */ forwardRef(({
+  className,
+  variant = {
+    type: "notification",
+    level: "danger",
+    color: "background"
+  },
+  visibility,
+  rounded,
+  children,
+  ...restProps
+}, ref) => {
+  function getRadiusClass() {
+    if (!rounded) {
+      if (visibility === "always" && !children)
+        return "rounded-circle";
+      if (variant.type === "notification")
+        return "rounded-pill";
+      if (variant.type === "link")
+        return "rounded-2";
+    }
+  }
+  const classes = clsx("badge", getRadiusClass(), visibility === "always" && "position-absolute translate-middle p-8 d-inline", variant.type === "notification" && (!variant.color || variant.color === "background") && `bg-${variant.level} text-light`, variant.type === "notification" && variant.color === "text" && `text-${variant.level} bg-gray-200 border border-gray-400`, variant.type === "profile" && `badge-profile-${variant.profile}`, variant.type === "link" && "border border-secondary", className);
+  return /* @__PURE__ */ jsx("span", { ref, className: classes, ...restProps, children: variant.type === "link" ? /* @__PURE__ */ jsx("div", { className: "d-flex fw-800 align-items-center", children }) : children });
+}), Badge$1 = Badge;
+export {
+  Badge$1 as default
+};

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge';
+export * from './Badge';

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,12 @@
+import { IWebApp } from 'edifice-ts-client';
+export interface BreadcrumbProps {
+    /**
+     * Pass all data about current application
+     */
+    app: IWebApp;
+    /**
+     * Show name of the current resource
+     */
+    name?: string;
+}
+export declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLElement>>;