@edifice.io/react 1.7.4-develop-pedago.20241211160712

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconRafterRight from "../../modules/icons/components/IconRafterRight.js";
+import Heading from "../Heading/Heading.js";
+import BreadcrumbItem from "./BreadcrumbItem.js";
+import BreadcrumbList from "./BreadcrumbList.js";
+import BreadcrumbNav from "./BreadcrumbNav.js";
+import AppIcon from "../AppIcon/AppIcon.js";
+const Breadcrumb = /* @__PURE__ */ forwardRef(({
+  app,
+  name
+}, ref) => {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */ jsx(BreadcrumbNav, { app, ref, className: "mw-100", children: /* @__PURE__ */ jsx(BreadcrumbList, { className: "gap-12 mw-100", children: name ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx("a", { href: app == null ? void 0 : app.address, className: "d-flex", "aria-label": t(app == null ? void 0 : app.displayName), children: /* @__PURE__ */ jsx(AppIcon, { app, size: "40" }) }) }),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(SvgIconRafterRight, { color: "var(--edifice-gray-600)", width: 20, height: 20 }) }),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { className: "text-truncate", children: /* @__PURE__ */ jsx(Heading, { level: "h1", headingStyle: "h3", className: "text-truncate", children: name }) })
+  ] }) : /* @__PURE__ */ jsxs(BreadcrumbItem, { className: "gap-12 d-flex align-items-center", children: [
+    /* @__PURE__ */ jsx("a", { href: app == null ? void 0 : app.address, className: "d-flex", "aria-label": t(app == null ? void 0 : app.displayName), children: /* @__PURE__ */ jsx(AppIcon, { app, size: "40" }) }),
+    /* @__PURE__ */ jsx(Heading, { level: "h1", headingStyle: "h3", className: "d-none d-md-flex", children: t(app == null ? void 0 : app.displayName) })
+  ] }) }) });
+});
+export {
+  Breadcrumb as default
+};

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface BreadcrumbItemProps extends React.ComponentPropsWithRef<'li'> {
+    /**
+     * Link or text to display
+     */
+    children: ReactNode;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+declare const BreadcrumbItem: import('react').ForwardRefExoticComponent<Omit<BreadcrumbItemProps, "ref"> & import('react').RefAttributes<HTMLLIElement>>;
+export default BreadcrumbItem;

package/dist/components/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const BreadcrumbItem = /* @__PURE__ */ forwardRef(({
+  children,
+  className,
+  ...restProps
+}, forwardRef2) => {
+  const classes = clsx("breadcrumb-item", className);
+  return /* @__PURE__ */ jsx("li", { ref: forwardRef2, className: classes, ...restProps, children });
+});
+export {
+  BreadcrumbItem as default
+};

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface BreadcrumbListProps {
+    /**
+     * Breadcrumb LI
+     */
+    children: ReactNode;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+declare const BreadcrumbList: import('react').ForwardRefExoticComponent<BreadcrumbListProps & import('react').RefAttributes<HTMLOListElement>>;
+export default BreadcrumbList;

package/dist/components/Breadcrumb/BreadcrumbList.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const BreadcrumbList = /* @__PURE__ */ forwardRef(({
+  children,
+  className
+}, ref) => {
+  const classes = clsx("breadcrumb d-flex flex-nowrap align-items-center mb-0", className);
+  return /* @__PURE__ */ jsx("ol", { ref, className: classes, children });
+});
+export {
+  BreadcrumbList as default
+};

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { IWebApp } from '@edifice.io/client';
+export interface BreadcrumbNavProps extends React.ComponentPropsWithRef<'nav'> {
+    /**
+     * Pass all data about current application
+     */
+    app: IWebApp;
+    /**
+     * Children
+     */
+    children: ReactNode;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+declare const BreadcrumbNav: import('react').ForwardRefExoticComponent<Omit<BreadcrumbNavProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+export default BreadcrumbNav;

package/dist/components/Breadcrumb/BreadcrumbNav.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import useEdificeIcons from "../../hooks/useEdificeIcons/useEdificeIcons.js";
+const BreadcrumbNav = /* @__PURE__ */ forwardRef(({
+  children,
+  app,
+  className
+}, ref) => {
+  const {
+    t
+  } = useTranslation(), {
+    getIconClass
+  } = useEdificeIcons(), classes = clsx("d-flex align-items-center mb-0", getIconClass(app), className), style = {
+    "--edifice-breadcrumb-divider": "-"
+  };
+  return /* @__PURE__ */ jsx("nav", { ref, className: classes, "aria-label": t("breadcrumb"), style, children });
+});
+export {
+  BreadcrumbNav as default
+};

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

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

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+import { LoadingIcon, LoadingPosition } from '../Loading';
+export type ButtonRef = HTMLButtonElement;
+export type ButtonTypes = 'button' | 'submit' | 'reset';
+export type ButtonColors = 'primary' | 'secondary' | 'tertiary' | 'danger';
+export type ButtonVariants = 'filled' | 'outline' | 'ghost';
+export type ButtonSizes = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends React.ComponentPropsWithRef<'button'> {
+    /**
+     * `button`, `submit` or `reset`
+     */
+    type?: ButtonTypes;
+    /**
+     * `primary`, `secondary`, `tertiary` or `danger`
+     */
+    color?: ButtonColors;
+    /**
+     * `filled`, `outline` or `ghost`
+     */
+    variant?: ButtonVariants;
+    /**
+     * `sm`, `md` or `lg`
+     */
+    size?: ButtonSizes;
+    /**
+     * Does it has a text ?
+     */
+    children: ReactNode;
+    /**
+     * Display Icon Component to the left
+     */
+    leftIcon?: ReactNode;
+    /**
+     * Display Icon Component to the right
+     */
+    rightIcon?: ReactNode;
+    /**
+     * Is it loading ?
+     */
+    isLoading?: boolean;
+    /**
+     * Override Loading Icon
+     */
+    loadingIcon?: LoadingIcon;
+    /**
+     * Loading Icon Position
+     * `left`, `right`
+     */
+    loadingPosition?: LoadingPosition;
+    /**
+     * Disabled status
+     */
+    disabled?: boolean;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+/**
+ * Primary UI component for user interaction
+ */
+declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/components/Button/Button.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import Loading from "../Loading/Loading.js";
+const Button = /* @__PURE__ */ forwardRef(({
+  color = "primary",
+  type = "button",
+  size = "md",
+  children,
+  isLoading,
+  loadingIcon,
+  loadingPosition,
+  leftIcon,
+  rightIcon,
+  className,
+  variant = "filled",
+  ...restProps
+}, ref) => {
+  const classes = clsx("btn", {
+    [`btn-filled btn-${color}`]: variant === "filled",
+    [`btn-${variant}-${color}`]: variant === "outline" || variant === "ghost",
+    "btn-icon": !children,
+    "btn-loading": isLoading,
+    "btn-lg": size === "lg",
+    "btn-sm": size === "sm"
+  }, className);
+  return /* @__PURE__ */ jsx("button", { ref, className: classes, type, ...restProps, children: isLoading ? /* @__PURE__ */ jsx(Loading, { isLoading: !0, loadingIcon, loadingPosition, children }) : /* @__PURE__ */ jsxs("span", { children: [
+    leftIcon,
+    children,
+    rightIcon
+  ] }) });
+});
+export {
+  Button as default
+};

package/dist/components/Button/IconButton.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from './Button';
+type OmittedProps = 'children' | 'leftIcon' | 'rightIcon';
+export interface IconButtonProps extends Omit<ButtonProps, OmittedProps> {
+    icon?: ReactNode;
+}
+/**
+ * IconButton extends ButtonComponent.
+ */
+declare const IconButton: import('react').ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export default IconButton;

package/dist/components/Button/IconButton.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import Button from "./Button.js";
+const IconButton = /* @__PURE__ */ forwardRef(({
+  icon,
+  className,
+  ...restProps
+}, ref) => {
+  const buttonProps = {
+    ...restProps,
+    className: clsx("btn-icon btn-sm", className)
+  };
+  return /* @__PURE__ */ jsx(Button, { ref, ...buttonProps, children: icon });
+});
+export {
+  IconButton as default
+};

package/dist/components/Button/SearchButton.d.ts

@@ -0,0 +1,21 @@
+import { IconButtonProps } from './IconButton';
+type PickedProps = 'type' | 'icon' | 'size';
+export interface SearchButtonProps extends Pick<IconButtonProps, PickedProps> {
+    /**
+     * OnClick Handler
+     */
+    onClick?: () => void;
+    /**
+     * Disabled state of Search Button
+     */
+    disabled?: boolean;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+/**
+ * SearchButton extends the IconButton component by omitting unnecessary props.
+ */
+declare const SearchButton: import('react').ForwardRefExoticComponent<SearchButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default SearchButton;

package/dist/components/Button/SearchButton.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import SvgIconSearch from "../../modules/icons/components/IconSearch.js";
+import IconButton from "./IconButton.js";
+const SearchButton = /* @__PURE__ */ forwardRef(({
+  icon = /* @__PURE__ */ jsx(SvgIconSearch, {}),
+  onClick,
+  className,
+  ...restProps
+}, ref) => {
+  const classes = clsx("btn-search", className);
+  return /* @__PURE__ */ jsx(IconButton, { ref, className: classes, icon, onClick, ...restProps });
+});
+export {
+  SearchButton as default
+};

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

@@ -0,0 +1,6 @@
+export { default as Button } from './Button';
+export { default as IconButton } from './IconButton';
+export { default as SearchButton } from './SearchButton';
+export * from './Button';
+export * from './IconButton';
+export * from './SearchButton';

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { IWebApp } from '@edifice.io/client';
+export interface CardProps {
+    /**
+     * IWebApp
+     */
+    app?: IWebApp | undefined;
+    /**
+     * Has option
+     */
+    isSelectable?: boolean;
+    /**
+     * Action on Card
+     */
+    isClickable?: boolean;
+    /**
+     * Selected state
+     */
+    isSelected?: boolean;
+    /**
+     * Card is Focus
+     */
+    isFocused?: boolean;
+    /**
+     * Click on card
+     */
+    onClick?: (item?: any) => void;
+    /**
+     * Select a card with option menu
+     */
+    onSelect?: () => void;
+    children?: ReactNode | ((...props: any) => ReactNode);
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Title: {
+        ({ children, className, }: {
+            children: ReactNode;
+            className?: string;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Text: {
+        ({ children, className, }: {
+            children: ReactNode;
+            className?: string;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Image: {
+        ({ imageSrc, className, variant, }: {
+            imageSrc?: string | undefined;
+            className?: string;
+            variant?: "small" | "medium" | "landscape";
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, space, flexDirection, }: {
+            space?: "0" | "8" | "16" | null;
+            flexDirection?: "row" | "column" | null;
+            children: ReactNode;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    User: {
+        ({ userSrc, creatorName, }: {
+            userSrc: string;
+            creatorName: string;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children }: {
+            children: ReactNode;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Header: {
+        (): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+};
+export default Card;

package/dist/components/Card/Card.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import clsx from "clsx";
+import CardBody from "./CardBody.js";
+import { CardContext } from "./CardContext.js";
+import CardFooter from "./CardFooter.js";
+import CardHeader from "./CardHeader.js";
+import CardImage from "./CardImage.js";
+import CardText from "./CardText.js";
+import CardTitle from "./CardTitle.js";
+import CardUser from "./CardUser.js";
+import useEdificeIcons from "../../hooks/useEdificeIcons/useEdificeIcons.js";
+const Root = /* @__PURE__ */ forwardRef(({
+  app,
+  isSelectable = !0,
+  isClickable = !0,
+  isSelected = !1,
+  isFocused = !1,
+  onClick,
+  onSelect,
+  children,
+  className
+}, ref) => {
+  const {
+    getIconCode
+  } = useEdificeIcons(), appCode = app ? getIconCode(app) : "placeholder", values = useMemo(() => ({
+    app,
+    appCode,
+    isSelectable,
+    isClickable,
+    onClick,
+    onSelect
+  }), [app, appCode, isSelectable, isClickable, onClick, onSelect]);
+  return /* @__PURE__ */ jsx(CardContext.Provider, { value: values, children: /* @__PURE__ */ jsxs("div", { ref, className: clsx("card", {
+    "drag-focus": isFocused,
+    "is-selected": isSelected,
+    "c-pointer": isClickable
+  }, className), children: [
+    /* @__PURE__ */ jsx(Card.Header, {}),
+    typeof children == "function" ? children(appCode) : children
+  ] }) });
+}), Card = /* @__PURE__ */ Object.assign(Root, {
+  Title: CardTitle,
+  Text: CardText,
+  Image: CardImage,
+  Body: CardBody,
+  User: CardUser,
+  Footer: CardFooter,
+  Header: CardHeader
+});
+export {
+  Card as default
+};

package/dist/components/Card/CardBody.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+declare const CardBody: {
+    ({ children, space, flexDirection, }: {
+        space?: "0" | "8" | "16" | null;
+        flexDirection?: "row" | "column" | null;
+        children: ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CardBody;

package/dist/components/Card/CardBody.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const CardBody = ({
+  children,
+  space = null,
+  flexDirection = "row"
+}) => {
+  const cardbody = clsx("card-body", {
+    [`p-${space}`]: space,
+    [`gap-${space}`]: space,
+    "align-items-start": flexDirection === "column",
+    "flex-column": flexDirection === "column"
+  });
+  return /* @__PURE__ */ jsx("div", { className: cardbody, children });
+};
+export {
+  CardBody as default
+};

package/dist/components/Card/CardContext.d.ts

@@ -0,0 +1,12 @@
+import { IWebApp } from '@edifice.io/client';
+import { CardProps } from './Card';
+export interface CardContextProps extends Omit<CardProps, 'children' | 'className'> {
+    app?: IWebApp | undefined;
+    appCode: string | undefined;
+    isSelectable?: boolean;
+    isClickable?: boolean;
+    onClick?: () => void;
+    onSelect?: () => void;
+}
+export declare const CardContext: import('react').Context<CardContextProps | null>;
+export declare const useCardContext: () => CardContextProps;

package/dist/components/Card/CardContext.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+const CardContext = /* @__PURE__ */ createContext(null), useCardContext = () => {
+  const context = useContext(CardContext);
+  if (!context)
+    throw new Error("Cannot be rendered outside the Card component");
+  return context;
+};
+export {
+  CardContext,
+  useCardContext
+};

package/dist/components/Card/CardFooter.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+declare const CardFooter: {
+    ({ children }: {
+        children: ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CardFooter;

package/dist/components/Card/CardFooter.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+const CardFooter = ({
+  children
+}) => /* @__PURE__ */ jsx("div", { className: "card-footer gap-16", children });
+export {
+  CardFooter as default
+};

package/dist/components/Card/CardHeader.d.ts

@@ -0,0 +1,5 @@
+declare const CardHeader: {
+    (): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default CardHeader;

package/dist/components/Card/CardHeader.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import SvgIconOptions from "../../modules/icons/components/IconOptions.js";
+import { useCardContext } from "./CardContext.js";
+import IconButton from "../Button/IconButton.js";
+const CardHeader = () => {
+  const {
+    isSelectable,
+    isClickable,
+    onClick,
+    onSelect
+  } = useCardContext(), {
+    t
+  } = useTranslation();
+  return isSelectable || isClickable ? /* @__PURE__ */ jsxs("div", { className: "card-header", children: [
+    isSelectable ? /* @__PURE__ */ jsx(IconButton, { "aria-label": t("card.open.menu"), className: "z-3 bg-white", color: "secondary", icon: /* @__PURE__ */ jsx(SvgIconOptions, {}), onClick: onSelect, variant: "ghost" }) : null,
+    isClickable ? /* @__PURE__ */ jsx("button", { type: "button", onClick, className: "position-absolute bottom-0 end-0 top-0 start-0 opacity-0 z-1 w-100", "aria-label": t("card.open.resource") }) : null
+  ] }) : null;
+};
+export {
+  CardHeader as default
+};

package/dist/components/Card/CardImage.d.ts

@@ -0,0 +1,9 @@
+declare const CardImage: {
+    ({ imageSrc, className, variant, }: {
+        imageSrc?: string | undefined;
+        className?: string;
+        variant?: "small" | "medium" | "landscape";
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CardImage;

package/dist/components/Card/CardImage.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useCardContext } from "./CardContext.js";
+import Image from "../Image/Image.js";
+import AppIcon from "../AppIcon/AppIcon.js";
+const CardImage = ({
+  imageSrc,
+  className,
+  variant = "medium"
+}) => {
+  const {
+    app
+  } = useCardContext(), style = variant === "landscape" ? {
+    width: "100%",
+    height: "auto"
+  } : null;
+  return /* @__PURE__ */ jsx("div", { className: clsx("card-image", variant), children: imageSrc ? /* @__PURE__ */ jsx(Image, { alt: "", src: imageSrc, objectFit: "cover", className: clsx("h-full w-100", className) }) : /* @__PURE__ */ jsx(AppIcon, { app, iconFit: "ratio", size: "80", variant: "rounded", ...style }) });
+};
+export {
+  CardImage as default
+};

package/dist/components/Card/CardText.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+declare const CardText: {
+    ({ children, className, }: {
+        children: ReactNode;
+        className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CardText;

package/dist/components/Card/CardText.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const CardText = ({
+  children,
+  className
+}) => {
+  const text = clsx("card-text small text-break text-truncate text-truncate-1", className);
+  return /* @__PURE__ */ jsx("p", { className: text, children });
+};
+export {
+  CardText as default
+};

package/dist/components/Card/CardTitle.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+declare const CardTitle: {
+    ({ children, className, }: {
+        children: ReactNode;
+        className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CardTitle;

package/dist/components/Card/CardTitle.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const CardTitle = ({
+  children,
+  className
+}) => {
+  const title = clsx("card-title body text-break text-truncate text-truncate-2", className);
+  return /* @__PURE__ */ jsx("h3", { className: title, children: /* @__PURE__ */ jsx("strong", { children }) });
+};
+export {
+  CardTitle as default
+};

package/dist/components/Card/CardUser.d.ts

@@ -0,0 +1,8 @@
+declare const CardUser: {
+    ({ userSrc, creatorName, }: {
+        userSrc: string;
+        creatorName: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CardUser;