chore: rollup types and generate types directory

packages/design-system/src/ui/future.ts

@@ -21,7 +21,7 @@ export * from './hover-card'
 export * from './input'
 export * from './input-otp'
 export * from './label'
-export * from './menubar'
+// export * from './menubar'
 export * from './navigation-menu'
 export * from './pagination'
 export * from './popover'

packages/design-system/types/src/Button.d.ts

@@ -0,0 +1,63 @@
+import { default as React, Dispatch } from 'react';
+export interface ButtonProps {
+    id?: string;
+    active?: boolean;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    fluid?: boolean;
+    basic?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    loading?: boolean;
+    onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: {
+        root?: string;
+        active?: string;
+    };
+    data?: {
+        cy?: string;
+        test?: string;
+    };
+    [x: string]: unknown;
+}
+/**
+ * This function returns a pre-styled Button component based on the custom theme.
+ *
+ * @param id - The id of the button.
+ * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy)
+ * @param children - The content of the button.
+ * @param active - Indicate whether the button is active or not. Conditional styling is applied, if this is true.
+ * @param disabled - Indicate whether the button is disabled or not. Conditional styling is applied, if this is true.
+ * @param fluid - Indicate whether the button should be fluid or not. Conditional styling is applied, if this is true.
+ * @param basic - This attribute allows to directly remove significant pre-styling and only applies basic styles and functionally required attributes.
+ * @param type - The html type of the button.
+ * @param loading - Indicate whether the button is loading or not. Conditional styling / loading symbol is applied, if this is true.
+ * @param onClick - Function that is applied when the button is clicked.
+ * @param className - The optional className object allows you to override the default styling.
+ * @returns Button component
+ */
+export declare function Button({ id, children, onClick, disabled, active, fluid, basic, loading, type, className, data, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Button {
+    var Icon: ({ className, children, }: {
+        className?: {
+            root?: string | undefined;
+        } | undefined;
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Label: ({ className, children, }: {
+        className?: {
+            root?: string | undefined;
+        } | undefined;
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var IconGroup: ({ state, setState, className, children, }: ButtonIconGroupProps) => import("react/jsx-runtime").JSX.Element;
+}
+export interface ButtonIconGroupProps {
+    state: number | undefined;
+    setState: Dispatch<React.SetStateAction<number | undefined>>;
+    className?: {
+        root?: string;
+        children?: string;
+    };
+    children: React.ReactNode[];
+}
+export default Button;

packages/design-system/types/src/Checkbox.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+export interface CheckboxProps {
+    id?: string;
+    data?: {
+        cy?: string;
+        test?: string;
+    };
+    children?: React.ReactNode;
+    checked: boolean | 'indeterminate';
+    partial?: boolean;
+    disabled?: boolean;
+    onCheck: () => void;
+    label?: string | React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    className?: {
+        root?: string;
+        label?: string;
+    };
+}
+/**
+ * This function returns a pre-styled Checkbox component based on the RadixUI Checkbox component and the custom theme.
+ * State is not managed internally and needs to be passed to the component through the checked and onCheck props.
+ *
+ * @param id - The id of the checkbox.
+ * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy)
+ * @param children - Optional content of the checkbox that is shown when the checked attribute is true. By default, this is just replaced by a tick symbol.
+ * @param checked - Indicate whether the checkbox is checked or not.
+ * @param partial - Indicate whether the checkbox is partially checked or not. If the checked attribute is true, it will alwawys override the partial condition simplified logic.
+ * @param onCheck - The function that is called when the checkbox is checked or unchecked.
+ * @param disabled - Indicate whether the checkbox is disabled or not.
+ * @param label - The label of the checkbox.
+ * @param size - The size of the checkbox (can be small, medium, large or extra large).
+ * @param className - The optional className object allows you to override the default styling.
+ * @returns Checkbox component
+ */
+export declare function Checkbox({ id, data, children, checked, partial, disabled, label, onCheck, size, className, }: CheckboxProps): React.ReactElement;
+export default Checkbox;

packages/design-system/types/src/Collapsible.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+export interface CollapsibleProps {
+    id?: string;
+    data?: {
+        cy?: string;
+        test?: string;
+    };
+    open: boolean;
+    onChange: () => void;
+    staticContent: React.ReactNode | string;
+    closedContent?: React.ReactNode | string;
+    customTrigger?: React.ReactNode;
+    primary?: string | React.ReactNode;
+    onPrimaryClick?: () => void;
+    secondary?: string | React.ReactNode;
+    onSecondaryClick?: () => void;
+    className?: {
+        root?: string;
+        staticContent?: string;
+        closedContent?: string;
+        content?: string;
+        trigger?: string;
+        primary?: string;
+        primaryButton?: string;
+        secondary?: string;
+        secondaryButton?: string;
+        bottomWrapper?: string;
+    };
+    children: React.ReactNode;
+}
+/**
+ * This function returns a pre-styled collapsible component based on the RadixUI collapsible component and the implemented theme.
+ * State need to be managed by the parent component.
+ *
+ * @param id - The id of the collapsible.
+ * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy)
+ * @param open - Indicate whether the collapsible is open or not.
+ * @param onChange - Function that is called when the collapsible is toggled.
+ * @param staticContent - The static content that is always shown.
+ * @param closedContent - The optional content that is only shown when the collapsible is closed.
+ * @param customTrigger - The optional custom trigger that is shown instead of the default arrow trigger.
+ * @param primary - An optional text that will be displayed on a button in the right bottom corner of the collapsible. Alternatively, it is also possible to pass a React node instead.
+ * @param onPrimaryClick - Function that will be called once the primary button is clicked (no function for custom primary nodes)
+ * @param secondary - An optional text that will be displayed on a button in the left bottom corner of the collapsible. Alternatively, it is also possible to pass a React node instead.
+ * @param onSecondaryClick - Function that will be called once the secondary button is clicked (no function for custom secondary nodes)
+ * @param className - The optional className object allows you to override the default styling.
+ * @param children - The content of the collapsible that is shown when the collapsible is open.
+ * @returns Collapsible component
+ */
+export declare function Collapsible({ id, data, open, onChange, staticContent, closedContent, customTrigger, primary, onPrimaryClick, secondary, onSecondaryClick, className, children, }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+export default Collapsible;

packages/design-system/types/src/ColorPicker.d.ts

@@ -0,0 +1,38 @@
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+export interface ColorPickerClassName {
+    root?: string;
+    trigger?: string;
+    popover?: string;
+    presetButtons?: string;
+    inputLabel?: string;
+    inputTooltip?: string;
+    input?: string;
+    abort?: string;
+    submit?: string;
+}
+export interface ColorPickerProps {
+    color: string;
+    onSubmit: (newColor: string) => void;
+    disabled?: boolean;
+    triggerIcon?: IconDefinition;
+    presetColors?: string[];
+    position?: 'bottom' | 'top';
+    submitText: string;
+    colorLabel: string;
+    tooltip?: string;
+    dataTrigger?: {
+        cy?: string;
+        test?: string;
+    };
+    dataHexInput?: {
+        cy?: string;
+        test?: string;
+    };
+    dataSubmit?: {
+        cy?: string;
+        test?: string;
+    };
+    className?: ColorPickerClassName;
+}
+export declare function ColorPicker({ color, onSubmit, disabled, triggerIcon, presetColors, position, submitText, colorLabel, tooltip, dataTrigger, dataHexInput, dataSubmit, className, }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+export default ColorPicker;

packages/design-system/types/src/Countdown.d.ts

@@ -0,0 +1,28 @@
+export interface CountdownProps {
+    isStatic?: boolean;
+    expiresAt: Date;
+    formatter?: (value: any) => any;
+    onExpire?: () => void;
+    onUpdate?: (timeRemaining: number) => void;
+    data?: {
+        cy?: string;
+        test?: string;
+    };
+    className?: {
+        root?: string;
+    };
+}
+/**
+ * This function creates a simple text countdown component (without any additional features or styling)
+ *
+ * @param isStatic - If true, the countdown will not be running, but instead show the initial value. However, as the end value is given by a date, reloading can modify the displayed countdown value
+ * @param expiresAt - Date when the countdown should expire
+ * @param formatter - Function to format the countdown value
+ * @param onExpire - Function that is executed when the countdown expires
+ * @param onUpdate - Function that is executed when the countdown is updated (not when it expires)
+ * @param data - Optional data object that can be used for testing (e.g. data-test or data-cy)
+ * @param className - Optional className object allows you to override the default styling
+ * @returns A simple text countdown component
+ */
+export declare function Countdown({ isStatic, expiresAt, formatter, onExpire, onUpdate, data, className, }: CountdownProps): import("react/jsx-runtime").JSX.Element;
+export default Countdown;

packages/design-system/types/src/CycleCountdown.d.ts

@@ -0,0 +1,44 @@
+export interface CycleCountdownProps {
+    expiresAt: Date;
+    totalDuration: number;
+    size?: 'sm' | 'md';
+    overrideSize?: number;
+    color?: string;
+    strokeWidthRem?: number;
+    isStatic?: boolean;
+    terminalColor?: string;
+    terminalPercentage?: number;
+    formatter?: (value: any) => any;
+    onExpire?: () => void;
+    onUpdate?: (timeRemaining: number) => void;
+    data?: {
+        cy?: string;
+        test?: string;
+    };
+    className?: {
+        root?: string;
+        countdownWrapper?: string;
+        countdown?: string;
+    };
+}
+/**
+ * This function combines the CycleProgress and Countdown components to create a circular progress bar with a countdown in the middle
+ *
+ * @param expiresAt - Date when the countdown should expire
+ * @param totalDuration - Total duration of the countdown in seconds, which is needed to compute the progress in percent
+ * @param size - Size of the progress bar, can be 'sm' or 'md'
+ * @param overrideSize - Optional override for the size of the progress bar
+ * @param color - Color of the progress bar (static for the moment)
+ * @param strokeWidthRem - Width of the progress bar. For small size, a smaller value is recommended
+ * @param isStatic - If true, the countdown will not be running, but instead show the initial value. However, as the end value is given by a date, reloading can modify the displayed countdown value
+ * @param terminalColor - Color of the progress bar when the countdown is expired (total Duration 0 or expiration in the past)
+ * @param terminalPercentage - Percentage of the progress bar when the countdown is expired (totalDuration 0 or expiration in the past)
+ * @param formatter - Function to format the countdown value
+ * @param onExpire - Function that is executed when the countdown expires
+ * @param onUpdate - Function that is executed when the countdown is updated (not when it expires)
+ * @param data - Optional data object that can be used for testing (e.g. data-test or data-cy)
+ * @param className - Optional className object allows you to override the default styling
+ * @returns A circular progress bar with a countdown in the middle
+ */
+export declare function CycleCountdown({ expiresAt, totalDuration, size, overrideSize, color, strokeWidthRem, isStatic, terminalColor, terminalPercentage, formatter, onExpire, onUpdate, data, className, }: CycleCountdownProps): import("react/jsx-runtime").JSX.Element;
+export default CycleCountdown;

packages/design-system/types/src/CycleProgress.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+export interface CycleProgressProps {
+    size?: 'sm' | 'md';
+    overrideSize?: number;
+    percentage: number;
+    color?: string;
+    strokeWidthRem?: number;
+    children?: React.ReactNode;
+    data?: {
+        cy?: string;
+        test?: string;
+    };
+    className?: {
+        root?: string;
+        children?: string;
+    };
+}
+/**
+ * This function create a circular progress bar with custom content in the middle (children)
+ *
+ * @param size - Size of the progress bar, can be 'sm' or 'md'
+ * @param overrideSize - If size adjustments of the relative placement are required due to font changes, this value can be used to override the circle size
+ * @param percentage - Percentage of the progress bar (0-100)
+ * @param color - Color of the progress bar (static for the moment)
+ * @param strokeWidthRem - Width of the progress bar. For small size, a smaller value is recommended
+ * @param children - Content of the progress bar, displayed in the center
+ * @param data - Optional data object that can be used for testing (e.g. data-test or data-cy)
+ * @param className - Optional className object allows you to override the default styling
+ * @returns A circular progress bar with children content in the middle
+ */
+export declare function CycleProgress({ size, overrideSize, percentage, color, strokeWidthRem, children, data, className, }: CycleProgressProps): import("react/jsx-runtime").JSX.Element;
+export default CycleProgress;

packages/design-system/types/src/DateChanger.d.ts

@@ -0,0 +1,63 @@
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { default as React } from 'react';
+export interface DateChangerClassName {
+    root?: string;
+    label?: string;
+    field?: string;
+    input?: string;
+    disabled?: string;
+    editButton?: string;
+    saveButton?: string;
+    tooltip?: string;
+}
+export interface DateChangerProps {
+    id?: string;
+    data?: {
+        cy?: string;
+        test?: string;
+    };
+    dataButton?: {
+        cy?: string;
+        test?: string;
+    };
+    label?: string;
+    labelType?: 'small' | 'large';
+    required?: boolean;
+    tooltip?: string | React.ReactNode;
+    disabled?: boolean;
+    error?: string;
+    hideError?: boolean;
+    isTouched?: boolean;
+    format?: string;
+    edit: boolean;
+    date: string;
+    onEdit: () => void;
+    onSave: (date: string) => void;
+    editIcon?: IconDefinition;
+    className?: DateChangerClassName;
+}
+/**
+ * This component provides a simple date changer with a label and a button to edit the date (not coupled to a formik context).
+ *
+ * @param id - The id of the date changer
+ * @param data - The object of data attributes that can be used for testing (e.g. data-test or data-cy)
+ * @param dataButton - The object of data attributes that can be used for testing (e.g. data-test or data-cy) for the button
+ * @param label - The label of the date changer
+ * @param labelType - The type of the label (small or large)
+ * @param tooltip - The tooltip of the date changer (is only shown if a label is given)
+ * @param required - Whether the date label should contain a required symbol
+ * @param disabled - Whether the date changer is disabled or not
+ * @param error - The error message to be displayed
+ * @param hideError - Whether the error message should be hidden
+ * @param isTouched - Whether the date changer has been touched
+ * @param format - The format of the date when the edit mode is not active (then the display is up to the browser implementation)
+ * @param edit - Whether the date changer is in edit mode or not
+ * @param date - The date to be displayed
+ * @param onEdit - The function to be called when the edit button is clicked (external state management)
+ * @param onSave - The function to be called when the save button is clicked (external state management)
+ * @param editIcon - The icon to be displayed on the edit button
+ * @param className - The optional className object allows you to override the default styling.
+ * @returns Date changer component with optional label, edit button and save button.
+ */
+export declare function DateChanger({ id, data, dataButton, label, labelType, tooltip, required, disabled, error, hideError, isTouched, format, edit, date, onEdit, onSave, editIcon, className, }: DateChangerProps): import("react/jsx-runtime").JSX.Element;
+export default DateChanger;