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

package/dist/components/FileCard/FileCard.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import clsx from "clsx";
+import { DocumentHelper, odeServices } from "edifice-ts-client";
+import Card from "../Card/Card.js";
+import FileIcon from "./FileIcon.js";
+import useThumbnail from "../../hooks/useThumbnail/useThumbnail.js";
+import { Icon } from "../Icon/Icon.js";
+const FileCard = ({
+  doc,
+  isClickable = !0,
+  isSelectable = !1,
+  isSelected = !1,
+  onClick,
+  className
+}) => {
+  var _a;
+  const ref = useRef(null), type = DocumentHelper.getRole(doc);
+  function getRoleMap(type2) {
+    const roleMappings = {
+      csv: {
+        icon: ".CSV",
+        color: "bg-orange-200"
+      },
+      xls: {
+        icon: ".XLS",
+        color: "bg-green-200"
+      },
+      doc: {
+        icon: ".DOC",
+        color: "bg-blue-200"
+      },
+      txt: {
+        icon: ".TXT",
+        color: "bg-blue-200"
+      },
+      pdf: {
+        icon: ".PDF",
+        color: "bg-red-200"
+      },
+      audio: {
+        icon: /* @__PURE__ */ jsx(Icon, { name: "mic", size: "22" }),
+        color: "bg-red-200"
+      },
+      ppt: {
+        icon: ".PPT",
+        color: "bg-yellow-200"
+      },
+      img: {
+        icon: /* @__PURE__ */ jsx(Icon, { name: "landscape", size: "22" }),
+        color: "bg-green-200"
+      },
+      video: {
+        icon: /* @__PURE__ */ jsx(Icon, { name: "video", size: "22" }),
+        color: "bg-purple-200"
+      },
+      zip: {
+        icon: ".ZIP",
+        color: "bg-gray-300"
+      },
+      md: {
+        icon: ".MD",
+        color: "bg-blue-200"
+      },
+      unknown: {
+        icon: /* @__PURE__ */ jsx(Icon, { name: "text-page", size: "22" }),
+        color: "bg-gray-300"
+      }
+    };
+    return roleMappings[type2] || roleMappings.unknown;
+  }
+  const file = clsx("file position-relative rounded", ((_a = getRoleMap(type ?? "default")) == null ? void 0 : _a.color) ?? "bg-yellow-200"), mediaSrc = type === "img" || type === "video" ? odeServices.workspace().getThumbnailUrl(doc) : null, hasThumbnail = useThumbnail(mediaSrc, {
+    ref
+  }), imageStyles = hasThumbnail && {
+    backgroundImage: `url(${mediaSrc})`,
+    backgroundSize: "cover"
+  };
+  return /* @__PURE__ */ jsx(Card, { className: clsx("card-file", className), isClickable, isSelectable, isSelected, onClick, children: /* @__PURE__ */ jsxs(Card.Body, { space: "8", children: [
+    /* @__PURE__ */ jsx("div", { ref, className: file, style: {
+      aspectRatio: "16/10",
+      ...imageStyles
+    }, children: type !== "img" || type === "img" && !hasThumbnail ? /* @__PURE__ */ jsx(FileIcon, { type, roleMap: getRoleMap(type) }) : null }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx(Card.Text, { children: doc.name }),
+      /* @__PURE__ */ jsx(Card.Text, { className: "text-black-50", children: doc == null ? void 0 : doc.ownerName })
+    ] })
+  ] }) });
+}, FileCard$1 = FileCard;
+export {
+  FileCard$1 as default
+};

package/dist/components/FileCard/FileIcon.d.ts

@@ -0,0 +1,6 @@
+import { Role } from 'edifice-ts-client';
+declare const FileIcon: ({ type, roleMap, }: {
+    type: Role | 'unknown';
+    roleMap?: Record<string, string | JSX.Element> | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FileIcon;

package/dist/components/FileCard/FileIcon.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Icon } from "../Icon/Icon.js";
+const FileIcon = ({
+  type,
+  roleMap
+}) => {
+  const hasNoShadow = typeof (roleMap == null ? void 0 : roleMap.icon) != "string" && type !== "unknown", fileicon = clsx("position-absolute top-50 start-50 translate-middle", {
+    "p-12 rounded-circle shadow": hasNoShadow
+  }, roleMap == null ? void 0 : roleMap.color);
+  return /* @__PURE__ */ jsx("div", { className: fileicon, children: (roleMap == null ? void 0 : roleMap.icon) ?? /* @__PURE__ */ jsx(Icon, { name: "paperclip" }) });
+};
+export {
+  FileIcon as default
+};

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

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

package/dist/components/Form/FormContext.d.ts

@@ -0,0 +1,6 @@
+import { FormControlProps } from './FormControl';
+type Props = Omit<FormControlProps, 'className' | 'children'>;
+export type FormContextProps = Props;
+export declare const Context: import('react').Context<Props | null>;
+export declare const useFormControl: () => Props;
+export {};

package/dist/components/Form/FormContext.js

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

package/dist/components/Form/FormControl.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+export interface FormControlProps extends React.ComponentPropsWithRef<'div'> {
+    /**
+     * For accessibility
+     */
+    id: string;
+    /**
+     * Is field optional ?
+     */
+    isOptional?: boolean;
+    /**
+     * Is field required ?
+     */
+    isRequired?: boolean;
+    /**
+     * Is field readonly ?
+     */
+    isReadOnly?: boolean;
+    /**
+     * Label, Input and Text
+     */
+    children: ReactNode;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+    /**
+     * Status to handle Form Validation
+     */
+    status?: 'valid' | 'invalid';
+}
+declare const FormControl: import('react').ForwardRefExoticComponent<Omit<FormControlProps, "ref"> & import('react').RefAttributes<HTMLDivElement>> & {
+    Label: import('react').ForwardRefExoticComponent<Omit<import('../Label').LabelProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+    Input: import('react').ForwardRefExoticComponent<Omit<import('../Input').InputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+    Text: {
+        ({ children }: {
+            children: ReactNode;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export default FormControl;

package/dist/components/Form/FormControl.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { Context } from "./FormContext.js";
+import FormText from "./FormText.js";
+import Label from "../Label/Label.js";
+import Input from "../Input/Input.js";
+const Root = /* @__PURE__ */ forwardRef(({
+  children,
+  className,
+  id,
+  isOptional,
+  isReadOnly,
+  isRequired,
+  status,
+  ...restProps
+}, ref) => {
+  const values = useMemo(() => ({
+    id,
+    isOptional,
+    isRequired,
+    isReadOnly,
+    status
+  }), [id, isOptional, isReadOnly, isRequired, status]);
+  return /* @__PURE__ */ jsx(Context.Provider, { value: values, children: /* @__PURE__ */ jsx("div", { ref, className, ...restProps, children }) });
+}), FormControl = /* @__PURE__ */ Object.assign(Root, {
+  Label,
+  Input,
+  Text: FormText
+}), FormControl$1 = FormControl;
+export {
+  FormControl$1 as default
+};

package/dist/components/Form/FormText.d.ts

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

package/dist/components/Form/FormText.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useFormControl } from "./FormContext.js";
+const FormText = ({
+  children
+}) => {
+  const {
+    status
+  } = useFormControl(), classes = clsx("form-text", {
+    "is-invalid": status === "invalid",
+    valid: status === "valid"
+  });
+  return /* @__PURE__ */ jsx("p", { className: classes, children: /* @__PURE__ */ jsx("em", { children }) });
+}, FormText$1 = FormText;
+export {
+  FormText$1 as default
+};

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

@@ -0,0 +1,3 @@
+export { default as FormText } from './FormText';
+export { default as FormControl } from './FormControl';
+export * from './FormControl';

package/dist/components/Grid/Grid.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+export interface GridProps {
+    /**
+     * Content inside the Grid component. Usually GridCol components
+     */
+    children: ReactNode;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+export interface GridColProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Size on Mobile
+     */
+    sm: string;
+    /**
+     * Size on Tablet
+     */
+    md?: string;
+    /**
+     * Size on Small Desktop
+     */
+    lg?: string;
+    /**
+     * Size on Large Desktop
+     */
+    xl?: string;
+    /**
+     * Accept content as children
+     */
+    children: ReactNode;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+    /**
+     * As Prop
+     */
+    as?: React.ElementType;
+}
+/**
+ * Grid of 12 columns on Desktop, 8 on Tablet and 4 on Mobile
+ */
+export declare const Grid: {
+    ({ children, className, ...restProps }: GridProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    Col: {
+        ({ sm, md, lg, xl, children, className, as, ...restProps }: GridColProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export declare const Column: {
+    ({ sm, md, lg, xl, children, className, as, ...restProps }: GridColProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Grid/Grid.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const Grid = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  const classes = clsx("grid", className);
+  return /* @__PURE__ */ jsx("div", { className: classes, ...restProps, children });
+}, Column = ({
+  sm,
+  md,
+  lg,
+  xl,
+  children,
+  className,
+  as,
+  ...restProps
+}) => {
+  const Component = as || "div", classes = clsx({
+    [`g-col-${sm}`]: sm,
+    [md ? `g-col-md-${md}` : ""]: md,
+    [lg ? `g-col-lg-${lg}` : ""]: lg,
+    [xl ? `g-col-xl-${xl}` : ""]: xl
+  }, className);
+  return /* @__PURE__ */ jsx(Component, { className: classes, ...restProps, children });
+};
+Grid.Col = Column;
+export {
+  Column,
+  Grid
+};

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

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

package/dist/components/Heading/Heading.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Level of Heading
+     * `"h1" | "h2" | "h3" | "h4" | "h5" | "h6"`
+     */
+    level?: HeadingElement;
+    /**
+     * Apply Bootstrap utility Class
+     * `"h1" | "h2" | "h3" | "h4" | "h5" | "h6"`
+     */
+    headingStyle?: HeadingElement;
+    /**
+     * Text to render
+     */
+    children: ReactNode;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+/**
+ * Heading component to display heading elements
+ */
+declare const Heading: import('react').ForwardRefExoticComponent<HeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export default Heading;

package/dist/components/Heading/Heading.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const Heading = /* @__PURE__ */ forwardRef(({
+  level: Component = "h1",
+  headingStyle = "h1",
+  children,
+  className,
+  ...restProps
+}, ref) => {
+  const classes = clsx(headingStyle, className);
+  return /* @__PURE__ */ jsx(Component, { ref, className: classes, ...restProps, children });
+}), Heading$1 = Heading;
+export {
+  Heading$1 as default
+};

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

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

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,17 @@
+import { IconName } from '@edifice.io/icons';
+import { SVGProps } from 'react';
+/**
+ * IconSize (default to 24x24)
+ */
+type IconSize = '16' | '18' | '20' | '22' | '24' | '40' | '36' | '48' | (string & {});
+/**
+ * Icon component displays any icon from `@edifice.io/icons`
+ */
+export declare const Icon: {
+    ({ name, size, ...props }: SVGProps<SVGSVGElement> & {
+        name: IconName;
+        size?: IconSize | undefined;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/Icon/Icon.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import spriteHref from "@edifice.io/icons/icons.svg";
+const Icon = ({
+  name,
+  size = "24",
+  ...props
+}) => /* @__PURE__ */ jsx("svg", { ...props, width: size, height: size, children: /* @__PURE__ */ jsx("use", { href: `${spriteHref}#${name}` }) });
+export {
+  Icon
+};

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

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

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export interface ImageProps extends React.ComponentPropsWithRef<'img'> {
+    /**
+     * Image URL
+     */
+    src: string;
+    /**
+     * Alternative text for a11y
+     */
+    alt: string;
+    /**
+     * Image ratio
+     */
+    ratio?: '1' | '4' | '16' | '21';
+    /**
+     * Object fit property
+     */
+    objectFit?: 'contain' | 'cover' | 'fill' | 'scale' | 'none';
+    /**
+     * Placeholder image as fallback
+     */
+    imgPlaceholder?: string;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+declare const Image: import('react').ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import('react').RefAttributes<HTMLImageElement>>;
+export default Image;

package/dist/components/Image/Image.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import usePaths from "../../core/usePaths/usePaths.js";
+import useImage from "../../hooks/useImage/useImage.js";
+const Image = /* @__PURE__ */ forwardRef(({
+  src,
+  alt,
+  imgPlaceholder,
+  ratio,
+  objectFit,
+  className,
+  ...restProps
+}, ref) => {
+  const [imagePath] = usePaths(), placeholder = imgPlaceholder ?? `${imagePath}/common/image-placeholder.png`, {
+    imgSrc,
+    onError
+  } = useImage({
+    src,
+    placeholder
+  }), ratioImage = {
+    "ratio ratio-1x1": ratio === "1",
+    "ratio ratio-4x3": ratio === "4",
+    "ratio ratio-16x9": ratio === "16",
+    "ratio ratio-21x9": ratio === "21"
+  }, objectImage = {
+    "object-fit-contain": objectFit === "contain",
+    "object-fit-cover": objectFit === "cover",
+    "object-fit-fill": objectFit === "fill",
+    "object-fit-scale": objectFit === "scale",
+    "object-fit-none": objectFit === "none"
+  }, ratioClasses = clsx({
+    ...ratioImage
+  }), classes = clsx({
+    ...objectImage
+  }, className), renderImage = /* @__PURE__ */ jsx("img", { alt, onError, ref, src: imgSrc, className: classes, ...restProps });
+  return ratio ? /* @__PURE__ */ jsx("div", { className: ratioClasses, children: renderImage }) : renderImage;
+}), Image$1 = Image;
+export {
+  Image$1 as default
+};

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

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

package/dist/components/ImagePicker/ImagePicker.d.ts

@@ -0,0 +1,38 @@
+import { ComponentPropsWithRef } from 'react';
+import { IWebApp } from 'edifice-ts-client';
+export interface ImagePickerProps extends ComponentPropsWithRef<'input'> {
+    /**
+     * Description of the ImagePicker label.
+     */
+    label: string;
+    /**
+     * Accessible description of the add button
+     */
+    addButtonLabel: string;
+    /**
+     * Accessible description of the delete button
+     */
+    deleteButtonLabel: string;
+    /**
+     * Provide a default image as placeholder
+     */
+    src?: string;
+    /**
+     * To show the icon of an application
+     */
+    app?: IWebApp | undefined;
+    appCode?: string;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+    /**
+     * Callback when uploading image
+     */
+    onUploadImage: (file: File) => void;
+    /**
+     * Callback when deleting image
+     */
+    onDeleteImage: () => void;
+}
+export declare const ImagePicker: import('react').ForwardRefExoticComponent<Omit<ImagePickerProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/ImagePicker/ImagePicker.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from "react";
+import clsx from "clsx";
+import FormControl from "../Form/FormControl.js";
+import IconButton from "../Button/IconButton.js";
+import Input from "../Input/Input.js";
+import Avatar from "../Avatar/Avatar.js";
+import useDropzone from "../../hooks/useDropzone/useDropzone.js";
+import { Icon } from "../Icon/Icon.js";
+import { AppIcon } from "../AppIcon/AppIcon.js";
+const ImagePicker = /* @__PURE__ */ forwardRef(({
+  label,
+  addButtonLabel = "Add image",
+  deleteButtonLabel = "Delete image",
+  src,
+  className,
+  app,
+  onUploadImage,
+  onDeleteImage
+}, ref) => {
+  const [preview, setPreview] = useState(src || ""), {
+    inputRef,
+    files,
+    deleteFile,
+    handleOnChange,
+    handleDragging,
+    handleDragLeave,
+    handleDrop
+  } = useDropzone();
+  useEffect(() => {
+    if (files.length > 0) {
+      deleteFile(files[0]), setPreview("");
+      const file = files == null ? void 0 : files[0];
+      if (!file) return;
+      setPreview(URL.createObjectURL(file)), onUploadImage(file);
+    }
+  }, [files]);
+  const handleClick = () => {
+    var _a;
+    (_a = inputRef.current) == null || _a.click();
+  }, handleClean = () => {
+    inputRef.current && (inputRef.current.value = ""), deleteFile(files[0]), setPreview(""), onDeleteImage();
+  }, classes = clsx("image-input", className);
+  return /* @__PURE__ */ jsxs(FormControl, { id: "image-input", className: classes, onDragEnter: handleDragging, onDragOver: handleDragging, onDragLeave: handleDragLeave, onDrop: handleDrop, ref, children: [
+    /* @__PURE__ */ jsxs("div", { className: "image-input-actions gap-8", children: [
+      /* @__PURE__ */ jsx(IconButton, { "aria-label": addButtonLabel, color: "tertiary", icon: /* @__PURE__ */ jsx(Icon, { name: "edit" }), onClick: handleClick, type: "button", variant: "ghost" }),
+      /* @__PURE__ */ jsx(IconButton, { "aria-label": deleteButtonLabel, color: "danger", disabled: !preview, icon: /* @__PURE__ */ jsx(Icon, { name: "delete", size: "20" }), onClick: handleClean, type: "button", variant: "ghost" })
+    ] }),
+    /* @__PURE__ */ jsxs(FormControl.Label, { children: [
+      /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: label }),
+      /* @__PURE__ */ jsx(Input, { accept: "image/jpeg, image/png", hidden: !0, onChange: handleOnChange, ref: inputRef, size: "sm", type: "file" }),
+      preview ? /* @__PURE__ */ jsx(Avatar, { alt: "", src: preview, size: "xl" }) : /* @__PURE__ */ jsx(AppIcon, { app, iconFit: "ratio", size: "160", variant: "rounded" })
+    ] })
+  ] });
+});
+export {
+  ImagePicker
+};

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

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

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,33 @@
+import { Size } from '../../types';
+export type OmitInputProps = 'disabled' | 'required' | 'size' | 'id' | 'readOnly';
+export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, OmitInputProps> {
+    /**
+     * Control size of input
+     */
+    size: Size;
+    /**
+     * Type of input (text, password, ..)
+     */
+    type: string;
+    /**
+     * Change text of placeholder
+     */
+    placeholder?: string;
+    /**
+     * Disabled status
+     */
+    disabled?: boolean;
+    /**
+     * Remove validation icon
+     */
+    noValidationIcon?: boolean;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+/**
+ * Input Form Component
+ */
+declare const Input: import('react').ForwardRefExoticComponent<Omit<InputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/components/Input/Input.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { useFormControl } from "../Form/FormContext.js";
+const Input = /* @__PURE__ */ forwardRef(({
+  noValidationIcon,
+  placeholder,
+  size = "md",
+  type = "text",
+  className,
+  ...restProps
+}, ref) => {
+  const {
+    id,
+    isRequired,
+    isReadOnly,
+    status
+  } = useFormControl(), classes = clsx({
+    "form-control": !isReadOnly,
+    "form-control-lg": size === "lg",
+    "form-control-sm": size === "sm",
+    "is-invalid": status === "invalid",
+    "is-valid": status === "valid",
+    "form-control-plaintext": isReadOnly,
+    "no-validation-icon": noValidationIcon
+  }, className);
+  return /* @__PURE__ */ jsx("input", { ref, id, className: classes, type, placeholder, required: isRequired, readOnly: isReadOnly, ...restProps });
+}), Input$1 = Input;
+export {
+  Input$1 as default
+};