@gouvfr-lasuite/ui-kit 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,567 @@
+import { CunninghamProvider as CunninghamProvider_2 } from '@openfun/cunningham-react';
+import { CursorProps } from 'react-arborist';
+import { Dispatch } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { LabelHTMLAttributes } from 'react';
+import { NodeRendererProps } from 'react-arborist';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+import { SetStateAction } from 'react';
+
+export declare type BaseTreeViewData<T> = T & {
+    id: string;
+    childrenCount?: number;
+    parentId?: string;
+    children?: BaseTreeViewData<T>[];
+};
+
+export declare const cunninghamConfig: {
+    themes: {
+        default: {
+            theme: {
+                colors: {
+                    "primary-text": string;
+                    "primary-050": string;
+                    "primary-100": string;
+                    "primary-150": string;
+                    "primary-200": string;
+                    "primary-300": string;
+                    "primary-400": string;
+                    "primary-500": string;
+                    "primary-600": string;
+                    "primary-700": string;
+                    "primary-800": string;
+                    "primary-900": string;
+                    "secondary-text": string;
+                    "secondary-100": string;
+                    "secondary-200": string;
+                    "secondary-300": string;
+                    "secondary-400": string;
+                    "secondary-500": string;
+                    "secondary-600": string;
+                    "secondary-700": string;
+                    "secondary-800": string;
+                    "secondary-900": string;
+                    "greyscale-text": string;
+                    "greyscale-000": string;
+                    "greyscale-050": string;
+                    "greyscale-100": string;
+                    "greyscale-200": string;
+                    "greyscale-250": string;
+                    "greyscale-300": string;
+                    "greyscale-350": string;
+                    "greyscale-400": string;
+                    "greyscale-500": string;
+                    "greyscale-600": string;
+                    "greyscale-700": string;
+                    "greyscale-750": string;
+                    "greyscale-800": string;
+                    "greyscale-900": string;
+                    "greyscale-950": string;
+                    "greyscale-1000": string;
+                    "success-text": string;
+                    "success-100": string;
+                    "success-200": string;
+                    "success-300": string;
+                    "success-400": string;
+                    "success-500": string;
+                    "success-600": string;
+                    "success-700": string;
+                    "success-800": string;
+                    "success-900": string;
+                    "info-text": string;
+                    "info-100": string;
+                    "info-200": string;
+                    "info-300": string;
+                    "info-400": string;
+                    "info-500": string;
+                    "info-600": string;
+                    "info-700": string;
+                    "info-800": string;
+                    "info-900": string;
+                    "warning-text": string;
+                    "warning-100": string;
+                    "warning-200": string;
+                    "warning-300": string;
+                    "warning-400": string;
+                    "warning-500": string;
+                    "warning-600": string;
+                    "warning-700": string;
+                    "warning-800": string;
+                    "warning-900": string;
+                    "danger-text": string;
+                    "danger-100": string;
+                    "danger-200": string;
+                    "danger-300": string;
+                    "danger-400": string;
+                    "danger-500": string;
+                    "danger-600": string;
+                    "danger-700": string;
+                    "danger-800": string;
+                    "danger-900": string;
+                };
+                font: {
+                    sizes: {
+                        xs: string;
+                        sm: string;
+                        md: string;
+                        lg: string;
+                        ml: string;
+                        xl: string;
+                        t: string;
+                        s: string;
+                        h1: string;
+                        h2: string;
+                        h3: string;
+                        h4: string;
+                        h5: string;
+                        h6: string;
+                        "xl-alt": string;
+                        "lg-alt": string;
+                        "md-alt": string;
+                        "sm-alt": string;
+                        "xs-alt": string;
+                    };
+                    weights: {
+                        thin: number;
+                        extrabold: number;
+                        black: number;
+                    };
+                    families: {
+                        accent: string;
+                        base: string;
+                    };
+                };
+                logo: {
+                    src: string;
+                    widthHeader: string;
+                    widthFooter: string;
+                    alt: string;
+                };
+                spacings: {
+                    "0": string;
+                    none: string;
+                    auto: string;
+                    bx: string;
+                    full: string;
+                    "4xs": string;
+                    "3xs": string;
+                    "2xs": string;
+                    xs: string;
+                    sm: string;
+                    base: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                    xxl: string;
+                    xxxl: string;
+                    "4xl": string;
+                    "5xl": string;
+                    "6xl": string;
+                    "7xl": string;
+                };
+                breakpoints: {
+                    xxs: string;
+                    xs: string;
+                    mobile: string;
+                    tablet: string;
+                };
+            };
+            components: {
+                modal: {
+                    "width-small": string;
+                };
+                button: {
+                    "medium-height": string;
+                    "medium-text-height": string;
+                    "border-radius": string;
+                    "small-height": string;
+                    primary: {
+                        "background--color": string;
+                        "background--color-hover": string;
+                        "background--color-active": string;
+                        "background--color-disabled": string;
+                        color: string;
+                        "color-hover": string;
+                        "color-active": string;
+                        "color-focus-visible": string;
+                        disabled: string;
+                    };
+                    "primary-text": {
+                        "background--color": string;
+                        "background--color-hover": string;
+                        "background--color-active": string;
+                        "background--color-focus-visible": string;
+                        "background--color-disabled": string;
+                        color: string;
+                        "color-hover": string;
+                        disabled: string;
+                    };
+                    secondary: {
+                        "background--color-hover": string;
+                        "background--color-active": string;
+                        "background--color-focus-visible": string;
+                        "background--disabled": string;
+                        color: string;
+                        "border--color": string;
+                        "border--color-hover": string;
+                        "border--color-disabled": string;
+                        disabled: string;
+                    };
+                    tertiary: {
+                        "background--color": string;
+                        "background--color-focus-visible": string;
+                        "background--color-hover": string;
+                        "background--color-active": string;
+                        "background--disabled": string;
+                        color: string;
+                        disabled: string;
+                    };
+                    "tertiary-text": {
+                        "background--color-hover": string;
+                        "color-hover": string;
+                        color: string;
+                    };
+                    danger: {
+                        "color-hover": string;
+                        "background--color": string;
+                        "background--color-hover": string;
+                        "background--color-focus-visible": string;
+                        "background--color-disabled": string;
+                        "color-disabled": string;
+                    };
+                };
+                datagrid: {
+                    "header--color": string;
+                    "header--size": string;
+                    "header--weight": string;
+                    "body--background-color-hover": string;
+                };
+                "forms-checkbox": {
+                    "border-radius": string;
+                    "border-color": string;
+                    "background-color--hover": string;
+                    "border--color-disabled": string;
+                    "border--color": string;
+                    "background--disabled": string;
+                    "background--enable": string;
+                    "check--disabled": string;
+                    "check--enable": string;
+                    color: string;
+                    "label--color": string;
+                    "label--size": string;
+                    "label--weight": string;
+                    "text--color": string;
+                    "text--size": string;
+                    "text--weight": string;
+                    "text--color-disabled": string;
+                };
+                "forms-labelledbox": {
+                    "label-color--small": string;
+                    "label-color--small--disabled": string;
+                    "label-color--big": string;
+                    "label-color--big--disabled": string;
+                };
+                "forms-radio": {
+                    "border-color": string;
+                    "background-color": string;
+                    "accent-color": string;
+                    "accent-color-disabled": string;
+                };
+                "forms-switch": {
+                    "border--color-disabled": string;
+                    "border--color": string;
+                    "handle-background-color": string;
+                    "handle-background-color--disabled": string;
+                    "rail-background-color--disabled": string;
+                    "accent-color": string;
+                };
+                "forms-textarea": {
+                    "label-color--focus": string;
+                    "border-radius": string;
+                    "border-color": string;
+                    "box-shadow--color--hover": string;
+                    "box-shadow--color--focus": string;
+                    "value-color": string;
+                    "value-color--disabled": string;
+                    "font-size": string;
+                };
+                "forms-input": {
+                    "label-color--focus": string;
+                    "border-radius": string;
+                    "border-color": string;
+                    "box-shadow--color--hover": string;
+                    "box-shadow--color--focus": string;
+                    "value-color": string;
+                    "value-color--disabled": string;
+                    "font-size": string;
+                };
+                "forms-select": {
+                    "label-color--focus": string;
+                    "item-font-size": string;
+                    "border-radius": string;
+                    "border-radius-hover": string;
+                    "border-color": string;
+                    "box-shadow--color--hover": string;
+                    "box-shadow--color--focus": string;
+                    "value-color": string;
+                    "font-size": string;
+                };
+            };
+        };
+    };
+};
+
+export declare const CunninghamProvider: (props: Parameters<typeof CunninghamProvider_2>[0]) => JSX_2.Element;
+
+export declare const CustomTabs: ({ tabs, defaultSelectedTab, fullWidth, }: TabsProps) => JSX_2.Element | null;
+
+export declare const DropdownMenu: ({ options, isOpen, onOpenChange, children, selectedValues, onSelectValue, }: PropsWithChildren<DropdownMenuProps>) => JSX_2.Element;
+
+export declare type DropdownMenuOption = {
+    label: string;
+    icon?: ReactNode;
+    callback?: () => void | Promise<unknown>;
+    isDisabled?: boolean;
+    showSeparator?: boolean;
+    isHidden?: boolean;
+    isChecked?: boolean;
+    testId?: string;
+    value?: string;
+};
+
+export declare type DropdownMenuProps = {
+    options: DropdownMenuOption[];
+    onOpenChange?: (isOpen: boolean) => void;
+    selectedValues?: string[];
+    onSelectValue?: (value: string) => void;
+    isOpen?: boolean;
+};
+
+export declare function getLocales(): {
+    enUS: any;
+    frFR: any;
+};
+
+export declare const Header: ({ leftIcon, rightIcon, languages, onTogglePanel, isPanelOpen, }: HeaderProps) => JSX_2.Element;
+
+export declare const headerHeight = 52;
+
+export declare type HeaderProps = {
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    languages?: DropdownMenuOption[];
+    onTogglePanel?: () => void;
+    isPanelOpen?: boolean;
+};
+
+export declare const HorizontalSeparator: ({ withPadding }: Props_3) => JSX_2.Element;
+
+export declare const Label: ({ children, text, ...props }: LabelHTMLAttributes<HTMLLabelElement> & {
+    text?: string;
+}) => JSX_2.Element;
+
+export declare const LanguagePicker: ({ languages }: LanguagePickerProps) => JSX_2.Element;
+
+export declare type LanguagePickerProps = {
+    languages: DropdownMenuOption[];
+};
+
+export declare const LeftPanel: ({ children, isOpen, }: PropsWithChildren<LeftPanelProps>) => JSX_2.Element;
+
+export declare type LeftPanelProps = {
+    isOpen?: boolean;
+};
+
+export declare const MainLayout: ({ icon, children, leftPanelContent, rightHeaderContent, languages, enableResize, }: PropsWithChildren<MainLayoutProps>) => JSX_2.Element;
+
+export declare type MainLayoutProps = {
+    icon?: React.ReactNode;
+    leftPanelContent?: React.ReactNode;
+    rightHeaderContent?: React.ReactNode;
+    languages?: DropdownMenuOption[];
+    onTogglePanel?: () => void;
+    enableResize?: boolean;
+};
+
+export declare const ProConnectButton: ({ disabled, onClick, }: ProConnectButtonProps) => JSX_2.Element;
+
+export declare type ProConnectButtonProps = {
+    disabled?: boolean;
+    onClick?: () => void;
+};
+
+declare type Props = {
+    onSelect?: (value: string) => void;
+    id?: string;
+};
+
+declare type Props_2 = {
+    loading?: boolean;
+    inputValue?: string;
+    onFilter?: (str: string) => void;
+    placeholder?: string;
+    children?: ReactNode;
+    withSeparator?: boolean;
+};
+
+declare type Props_3 = {
+    withPadding?: boolean;
+};
+
+export declare const QuickSearch: ({ onFilter, inputContent, inputValue, loading, showInput, label, placeholder, children, }: QuickSearchProps) => JSX_2.Element;
+
+export declare type QuickSearchAction = {
+    onSelect?: () => void;
+    content: ReactNode;
+};
+
+export declare type QuickSearchData<T> = {
+    groupName: string;
+    elements: T[];
+    emptyString?: string;
+    startActions?: QuickSearchAction[];
+    endActions?: QuickSearchAction[];
+    showWhenEmpty?: boolean;
+};
+
+export declare const QuickSearchGroup: <T>({ group, onSelect, renderElement, }: QuickSearchGroupProps<T>) => JSX_2.Element | null;
+
+export declare type QuickSearchGroupProps<T> = {
+    group: QuickSearchData<T>;
+    renderElement?: (element: T) => ReactNode;
+    onSelect?: (element: T) => void;
+};
+
+export declare const QuickSearchInput: ({ loading, inputValue, onFilter, placeholder, children, withSeparator: separator, }: Props_2) => JSX_2.Element;
+
+export declare const QuickSearchItem: ({ children, onSelect, id, }: PropsWithChildren<Props>) => JSX_2.Element;
+
+export declare const QuickSearchItemTemplate: ({ alwaysShowRight, left, right, }: QuickSearchItemTemplateProps) => JSX_2.Element;
+
+export declare type QuickSearchItemTemplateProps = {
+    alwaysShowRight?: boolean;
+    left: ReactNode;
+    right?: ReactNode;
+};
+
+export declare type QuickSearchProps = {
+    onFilter?: (str: string) => void;
+    inputValue?: string;
+    inputContent?: ReactNode;
+    showInput?: boolean;
+    loading?: boolean;
+    label?: string;
+    placeholder?: string;
+    children?: ReactNode;
+};
+
+export declare const Spinner: ({ size }: SpinnerProps) => JSX_2.Element;
+
+declare interface SpinnerProps {
+    size?: "sm" | "md" | "lg" | "xl";
+}
+
+export declare type TabData = {
+    id: string;
+    label: string;
+    icon?: string;
+    content: React.ReactNode;
+};
+
+export declare type TabsProps = {
+    tabs: TabData[];
+    defaultSelectedTab?: string;
+    fullWidth?: boolean;
+};
+
+export declare const treeDemoData: ({
+    id: string;
+    name: string;
+    childrenCount?: undefined;
+    children?: undefined;
+} | {
+    id: string;
+    name: string;
+    childrenCount: number;
+    children: never[];
+} | {
+    id: string;
+    name: string;
+    children: {
+        id: string;
+        name: string;
+    }[];
+    childrenCount?: undefined;
+})[];
+
+export declare const TreeView: <T>({ treeData, selectedNodeId, rootNodeId, renderNode, afterMove, }: TreeViewProps<T>) => JSX_2.Element;
+
+export declare type TreeViewDataType<T> = BaseTreeViewData<T>;
+
+export declare const TreeViewItem: <T>({ children, onClick, node, dragHandle, style, loadChildren, forceLoading, }: PropsWithChildren<TreeViewNodeProps<T>>) => JSX_2.Element;
+
+export declare enum TreeViewMoveModeEnum {
+    FIRST_CHILD = "first-child",
+    LAST_CHILD = "last-child",
+    LEFT = "left",
+    RIGHT = "right"
+}
+
+export declare type TreeViewMoveResult = {
+    targetNodeId: string;
+    mode: TreeViewMoveModeEnum;
+    sourceNodeId: string;
+    oldParentId?: string;
+};
+
+export declare type TreeViewNodeProps<T> = NodeRendererProps<TreeViewDataType<T>> & {
+    onClick?: () => void;
+    forceLoading?: boolean;
+    loadChildren?: (node: TreeViewDataType<T>) => Promise<TreeViewDataType<T>[]>;
+};
+
+export declare type TreeViewProps<T> = {
+    treeData: TreeViewDataType<T>[];
+    width?: number | string;
+    selectedNodeId?: string;
+    rootNodeId: string;
+    renderNode: (props: NodeRendererProps<TreeViewDataType<T>>) => React.ReactNode;
+    afterMove?: (result: TreeViewMoveResult, newTreeData: TreeViewDataType<T>[]) => void;
+};
+
+export declare const TreeViewSeparator: ({ top, left }: CursorProps) => JSX_2.Element;
+
+export declare const useDropdownMenu: () => {
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+export declare const useResponsive: () => {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+};
+
+export declare const useTree: <T>(tree: TreeViewDataType<T>[], refreshCallback?: (id: string) => Promise<Partial<TreeViewDataType<T>>>) => {
+    treeData: TreeViewDataType<T>[];
+    setTreeData: Dispatch<SetStateAction<TreeViewDataType<T>[]>>;
+    addChild: (parentId: string, newNode: TreeViewDataType<T>) => void;
+    updateNode: (nodeId: string, updatedData: Partial<TreeViewDataType<T>>) => void;
+    deleteNode: (nodeId: string) => void;
+    addRootNode: (newNode: TreeViewDataType<T>) => void;
+    selectedNode: TreeViewDataType<T> | undefined;
+    setSelectedNode: Dispatch<SetStateAction<TreeViewDataType<T> | undefined>>;
+    refreshNode: (nodeId: string) => Promise<void>;
+    setChildren: (parentId: string, newChildren: TreeViewDataType<T>[], mergeStrategy?: "replace" | "merge") => void;
+};
+
+export declare const WithLabel: ({ label, text, labelSide, children, }: PropsWithChildren<WithLabelProps>) => JSX_2.Element;
+
+export declare type WithLabelProps = {
+    label: string;
+    text?: string;
+    labelSide?: "left" | "right";
+};
+
+export { }