@gouvfr-lasuite/ui-kit 0.2.0 → 0.4.0

package/dist/index.d.ts

@@ -7,11 +7,48 @@ import { Key } from 'react-stately';
 import { LabelHTMLAttributes } from 'react';
 import { NodeApi } from 'react-arborist';
 import { NodeRendererProps } from 'react-arborist';
+import { Option as Option_2 } from '@openfun/cunningham-react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
+import { SelectProps } from 'react-aria-components';
 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 +149,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: {
@@ -327,7 +375,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;
@@ -347,8 +395,17 @@ export declare type DropdownMenuProps = {
     selectedValues?: string[];
     onSelectValue?: (value: string) => void;
     isOpen?: boolean;
+    topMessage?: string;
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
 };
 
+export declare const Filter: (props: FilterProps) => JSX.Element;
+
+export declare type FilterProps = {
+    label: string;
+    options: Option_2[];
+} & SelectProps;
+
 export declare const Footer: () => JSX.Element;
 
 export declare function getLocales(): {
@@ -382,6 +439,17 @@ export declare const HomeGutter: ({ children }: {
 
 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;
@@ -498,11 +566,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;
@@ -551,7 +702,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>;
 
@@ -594,6 +745,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;
 };
@@ -605,18 +757,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>;