@gouvfr-lasuite/ui-kit 0.1.10 → 0.3.0

package/dist/index.d.ts

@@ -12,6 +12,41 @@ import { ReactNode } from 'react';
 import { SetStateAction } from 'react';
 import { TreeApi } from 'react-arborist';
 
+export declare type AccessData<UserType, T> = T & {
+    id: string;
+    role: string;
+    user: UserData<UserType>;
+};
+
+export declare const AccessRoleDropdown: ({ roles, onSelect, canUpdate, selectedRole, isOpen, onOpenChange, roleTopMessage, }: AccessRoleDropdownProps) => JSX.Element;
+
+declare type AccessRoleDropdownProps = {
+    selectedRole: string;
+    roles: DropdownMenuOption[];
+    onSelect: (role: string) => void;
+    canUpdate?: boolean;
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    roleTopMessage?: string;
+};
+
+export declare type AddShareUserListProps<UserType> = {
+    users: UserData<UserType>[];
+    onRemoveUser: (user: UserData<UserType>) => void;
+    rightActions?: ReactNode;
+    onShare: () => void;
+    roles: DropdownMenuOption[];
+    selectedRole: string;
+    shareButtonLabel?: string;
+    onSelectRole: (role: string) => void;
+};
+
+export declare type AvatarProps = {
+    fullName: string;
+    size?: "xsmall" | "small" | "medium" | "large";
+    forceColor?: string;
+};
+
 export declare type BaseTreeViewData<T> = {
     id: string;
     childrenCount?: number;
@@ -112,6 +147,17 @@ export declare const cunninghamConfig: {
                     "danger-700": string;
                     "danger-800": string;
                     "danger-900": string;
+                    "blue-500": string;
+                    "brown-500": string;
+                    "cyan-500": string;
+                    "gold-500": string;
+                    "green-500": string;
+                    "olive-500": string;
+                    "orange-500": string;
+                    "purple-500": string;
+                    "red-500": string;
+                    "yellow-500": string;
+                    "rose-500": string;
                 };
                 font: {
                     sizes: {
@@ -145,12 +191,6 @@ export declare const cunninghamConfig: {
                         base: string;
                     };
                 };
-                logo: {
-                    src: string;
-                    widthHeader: string;
-                    widthFooter: string;
-                    alt: string;
-                };
                 spacings: {
                     "0": string;
                     none: string;
@@ -333,7 +373,7 @@ export declare const CunninghamProvider: (props: Parameters<typeof CunninghamPro
 
 export declare const CustomTabs: ({ tabs, defaultSelectedTab, fullWidth, }: TabsProps) => JSX.Element | null;
 
-export declare const DropdownMenu: ({ options, isOpen, onOpenChange, children, selectedValues, onSelectValue, }: PropsWithChildren<DropdownMenuProps>) => JSX.Element;
+export declare const DropdownMenu: ({ options, isOpen, onOpenChange, children, selectedValues, onSelectValue, topMessage, shouldCloseOnInteractOutside, }: PropsWithChildren<DropdownMenuProps>) => JSX.Element;
 
 export declare type DropdownMenuOption = {
     label: string;
@@ -353,11 +393,15 @@ export declare type DropdownMenuProps = {
     selectedValues?: string[];
     onSelectValue?: (value: string) => void;
     isOpen?: boolean;
+    topMessage?: string;
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
 };
 
+export declare const Footer: () => JSX.Element;
+
 export declare function getLocales(): {
-    enUS: any;
-    frFR: any;
+    "en-US": any;
+    "fr-FR": any;
 };
 
 export declare const Header: ({ leftIcon, rightIcon, languages, onTogglePanel, isPanelOpen, }: HeaderProps) => JSX.Element;
@@ -372,8 +416,31 @@ export declare type HeaderProps = {
     isPanelOpen?: boolean;
 };
 
+export declare const Hero: ({ logo, mainButton, banner, title, subtitle, }: {
+    logo: React.ReactNode;
+    mainButton?: React.ReactNode;
+    banner: string;
+    title: string;
+    subtitle: string;
+}) => JSX.Element;
+
+export declare const HomeGutter: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+
 export declare const HorizontalSeparator: ({ withPadding }: Props_3) => JSX.Element;
 
+export declare type InvitationData<UserType, T> = T & {
+    id: string;
+    role: string;
+    email: string;
+    user: UserData<UserType>;
+};
+
+export declare const InvitationUserSelectorItem: <UserType>({ user, onRemoveUser, }: ShareSelectedUserItemProps<UserType>) => JSX.Element;
+
+export declare const InvitationUserSelectorList: <UserType>({ users, onRemoveUser, rightActions, onShare, shareButtonLabel, roles, selectedRole, onSelectRole, }: AddShareUserListProps<UserType>) => JSX.Element;
+
 export declare const isNode: <T>(node?: TreeViewDataType<T>) => boolean;
 
 export declare const isSeparator: <T>(node?: TreeViewDataType<T>) => boolean;
@@ -384,6 +451,8 @@ export declare const Label: ({ children, text, ...props }: LabelHTMLAttributes<H
     text?: string;
 }) => JSX.Element;
 
+export declare const LaGaufre: () => JSX.Element;
+
 export declare const LanguagePicker: ({ languages }: LanguagePickerProps) => JSX.Element;
 
 export declare type LanguagePickerProps = {
@@ -396,7 +465,7 @@ export declare type LeftPanelProps = {
     isOpen?: boolean;
 };
 
-export declare const MainLayout: ({ icon, children, leftPanelContent, rightPanelContent, rightHeaderContent, languages, enableResize, rightPanelIsOpen, }: PropsWithChildren<MainLayoutProps>) => JSX.Element;
+export declare const MainLayout: ({ icon, children, hideLeftPanelOnDesktop, leftPanelContent, rightPanelContent, rightHeaderContent, languages, enableResize, rightPanelIsOpen, }: PropsWithChildren<MainLayoutProps>) => JSX.Element;
 
 export declare type MainLayoutProps = {
     icon?: React.ReactNode;
@@ -407,6 +476,7 @@ export declare type MainLayoutProps = {
     onToggleRightPanel?: () => void;
     enableResize?: boolean;
     rightPanelIsOpen?: boolean;
+    hideLeftPanelOnDesktop?: boolean;
 };
 
 export { NodeRendererProps }
@@ -487,11 +557,94 @@ export declare type QuickSearchProps = {
     children?: ReactNode;
 };
 
+export declare const SearchUserItem: <UserType>({ user, }: SearchUserItemProps<UserType>) => JSX.Element;
+
+declare type SearchUserItemProps<UserType> = {
+    user: UserData<UserType>;
+};
+
+export declare const ShareInvitationItem: <UserType, InvitationType>({ invitation, roles, updateRole, deleteInvitation, canUpdate, roleTopMessage, }: ShareInvitationItemProps<UserType, InvitationType>) => JSX.Element;
+
+export declare type ShareInvitationItemProps<UserType, InvitationType> = {
+    invitation: InvitationData<UserType, InvitationType>;
+    roles: DropdownMenuOption[];
+    updateRole?: (invitation: InvitationData<UserType, InvitationType>, role: string) => void;
+    deleteInvitation?: (invitation: InvitationData<UserType, InvitationType>) => void;
+    canUpdate?: boolean;
+    roleTopMessage?: string;
+};
+
+export declare const ShareMemberItem: <UserType, AccessType>({ accessData, roles, updateRole, deleteAccess, canUpdate, roleTopMessage, }: ShareMemberItemProps<UserType, AccessType>) => JSX.Element;
+
+export declare type ShareMemberItemProps<UserType, AccessType> = {
+    accessData: AccessData<UserType, AccessType>;
+    roles: DropdownMenuOption[];
+    updateRole?: (access: AccessData<UserType, AccessType>, role: string) => void;
+    deleteAccess?: (access: AccessData<UserType, AccessType>) => void;
+    canUpdate?: boolean;
+    roleTopMessage?: string;
+};
+
+export declare const ShareModal: <UserType, InvitationType, AccessType>({ searchUsersResult, children, outsideSearchContent, accesses: members, invitations, hasNextMembers, canUpdate, hasNextInvitations, ...props }: PropsWithChildren<ShareModalProps<UserType, InvitationType, AccessType>>) => JSX.Element;
+
+declare type ShareModalAccessProps<UserType, AccessType> = {
+    accesses?: AccessData<UserType, AccessType>[];
+    hasNextMembers?: boolean;
+    onLoadNextMembers?: () => void;
+    onDeleteAccess?: (access: AccessData<UserType, AccessType>) => void;
+    onUpdateAccess?: (access: AccessData<UserType, AccessType>, role: string) => void;
+    accessRoleTopMessage?: (access: AccessData<UserType, AccessType>) => string | undefined;
+};
+
+export declare const ShareModalCopyLinkFooter: ({ onCopyLink, onOk, }: ShareModalCopyLinkFooterProps) => JSX.Element;
+
+export declare type ShareModalCopyLinkFooterProps = {
+    onCopyLink: () => void;
+    onOk: () => void;
+};
+
+declare type ShareModalInvitationProps<UserType, InvitationType> = {
+    invitations?: InvitationData<UserType, InvitationType>[];
+    onUpdateInvitation?: (invitation: InvitationData<UserType, InvitationType>, role: string) => void;
+    onDeleteInvitation?: (invitation: InvitationData<UserType, InvitationType>) => void;
+    hasNextInvitations?: boolean;
+    onLoadNextInvitations?: () => void;
+    invitationRoleTopMessage?: (invitation: InvitationData<UserType, InvitationType>) => string;
+};
+
+/**
+ * Only the props for the modal and generic props
+ * The modal is generic and can be with all types as long as the types meet the minimum requirements
+ * Like the modal, we can search users, list invitations and members and modify them, that's why we give the corresponding types
+ */
+export declare type ShareModalProps<UserType, InvitationType, AccessType> = {
+    modalTitle?: string;
+    isOpen: boolean;
+    canUpdate?: boolean;
+    onClose: () => void;
+    invitationRoles: DropdownMenuOption[];
+    getAccessRoles?: (access: AccessData<UserType, AccessType>) => DropdownMenuOption[];
+    outsideSearchContent?: ReactNode;
+} & ShareModalInvitationProps<UserType, InvitationType> & ShareModalAccessProps<UserType, AccessType> & ShareModalSearchProps<UserType>;
+
+declare type ShareModalSearchProps<UserType> = {
+    searchUsersResult?: UserData<UserType>[];
+    onSearchUsers: (search: string) => void;
+    searchPlaceholder?: string;
+    onInviteUser: (users: UserData<UserType>[], role: string) => void;
+    loading?: boolean;
+};
+
+export declare type ShareSelectedUserItemProps<UserType> = {
+    user: UserData<UserType>;
+    onRemoveUser: (user: UserData<UserType>) => void;
+};
+
 export declare const Spinner: ({ size }: SpinnerProps) => JSX.Element;
 
-declare interface SpinnerProps {
+declare type SpinnerProps = {
     size?: "sm" | "md" | "lg" | "xl";
-}
+};
 
 export declare type TabData = {
     id: string;
@@ -540,7 +693,7 @@ export declare type TreeProviderProps<T> = {
     onLoadChildren?: (id: string) => Promise<TreeViewDataType<T>[]>;
 };
 
-export declare const TreeView: <T>({ initialOpenState, selectedNodeId, rootNodeId, renderNode, canDrop, canDrag, afterMove, }: TreeViewProps<T>) => JSX.Element | undefined;
+export declare const TreeView: <T>({ initialOpenState, selectedNodeId, rootNodeId, renderNode, canDrop, canDrag, afterMove, beforeMove, }: TreeViewProps<T>) => JSX.Element | undefined;
 
 export declare type TreeViewDataType<T> = BaseTreeViewData<T>;
 
@@ -583,6 +736,7 @@ export declare type TreeViewProps<T> = {
         index: number;
     }) => boolean;
     canDrag?: (node: TreeDataItem<T>) => boolean;
+    beforeMove?: (result: TreeViewMoveResult, moveCallback: () => void) => void;
     afterMove?: (result: TreeViewMoveResult) => void;
     renderNode: (props: NodeRendererProps<TreeDataItem<T>>) => React.ReactNode;
 };
@@ -594,18 +748,36 @@ export declare const useDropdownMenu: () => {
     setIsOpen: Dispatch<SetStateAction<boolean>>;
 };
 
+export declare const UserAvatar: ({ fullName, size, forceColor, }: AvatarProps) => JSX.Element;
+
+export declare type UserData<T> = T & {
+    id: string;
+    full_name: string;
+    email: string;
+};
+
 export declare const useResponsive: () => {
     isMobile: boolean;
     isTablet: boolean;
     isDesktop: boolean;
 };
 
+declare type UserProps = {
+    fullName?: string;
+    email?: string;
+    showEmail?: boolean;
+};
+
+export declare const UserRow: ({ fullName: full_name, email, showEmail, }: UserProps) => JSX.Element;
+
 export declare const useTree: <T>(initialItems: TreeViewDataType<T>[], refreshCallback?: (id: string) => Promise<Partial<TreeViewDataType<T>>>, loadChildrenCallback?: (id: string) => Promise<TreeViewDataType<T>[]>) => {
     nodes: TreeDataItem<TreeViewDataType<T>>[];
     addChild: (parentId: string | null, newNode: TreeViewDataType<T>, index?: number) => void;
     updateNode: (nodeId: string, updatedData: Partial<TreeViewDataType<T>>) => void;
     deleteNode: (nodeId: string) => void;
+    deleteNodes: (nodeIds: string[]) => void;
     addRootNode: (newNode: TreeViewDataType<T>, index?: number) => void;
+    addRootNodes: (newNodes: TreeViewDataType<T>[], index?: number) => void;
     selectedNode: T | undefined;
     setSelectedNode: Dispatch<SetStateAction<T | undefined>>;
     refreshNode: (nodeId: string) => Promise<void>;