@viamedici-spc/configurator-framer/dist/index.d.ts

Component library to build configurator apps with Framer based on Viamedici SPC.

import { ChoiceValue } from '@viamedici-spc/configurator-ts';
import { ChoiceValueId } from '@viamedici-spc/configurator-ts';
import { ComponentType } from 'react';
import { ConstraintExplanation } from '@viamedici-spc/configurator-ts';
import { ControlType } from 'framer';
import { CSSProperties } from 'react';
import { DecisionExplanation } from '@viamedici-spc/configurator-ts';
import { DecisionsExplainAnswer } from '@viamedici-spc/configurator-ts';
import { ExplainQuestion } from '@viamedici-spc/configurator-ts';
import { ExplainQuestionParam } from '@viamedici-spc/configurator-ts';
import { ForwardRefRenderFunction } from 'react';
import { GlobalAttributeId } from '@viamedici-spc/configurator-ts';
import { HTMLAttributes } from 'react';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import NumericFormat from 'react-number-format';
import { PropsWithChildren } from 'react';
import { PropsWithoutRef } from 'react';
import { default as React_2 } from 'react';
import { ReactNode } from 'react';
import { Ref } from 'react';
import { RefAttributes } from 'react';
import { UseExplainResult as UseExplainResult_2 } from '@viamedici-spc/configurator-react';

export declare const attributeIdPropertyControls: {
    attributeId: {
        title: string;
        type: ControlType.String;
    };
    componentPath: {
        title: string;
        type: ControlType.String;
    };
    sharedConfigurationModel: {
        title: string;
        type: ControlType.String;
    };
};

export declare type AttributeIdProps = {
    attributeId: string;
    componentPath: string;
    sharedConfigurationModel: string;
};

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare const AttributeName: ComponentType<AttributeIdProps & ReplaceTextProps & {
    customName?: string;
} & RefAttributes<unknown>>;

/**
 * @framerIntrinsicWidth 300
 * @framerIntrinsicHeight 35
 *
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight fixed
 */
export declare const BooleanSelect: ComponentType<Omit<Omit<Omit<AttributeIdProps & PaddingProps & BorderProps & {
    fill: string;
} & TextProps & ExplainProps & {
    style: CSSProperties;
    implicitLabelPrefix: string;
    unsatisfiedColors: InputStateColors;
    implicitSelectedColors: InputStateColors;
} & {
    resetLabel: string;
    blockedLabel: string;
    appearance: "none" | "auto";
} & {
    trueLabel?: string;
    falseLabel?: string;
} & RefAttributes<HTMLSelectElement>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>>;

declare type BorderProps = {
    radius: number;
    border: {
        color: string;
        width: number;
        isMixedWidth: boolean;
        widthTop: number;
        widthRight: number;
        widthBottom: number;
        widthLeft: number;
    };
};

/**
 * @framerIntrinsicWidth 300
 * @framerIntrinsicHeight 35
 *
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight fixed
 */
export declare const ChoiceSelect: ComponentType<Omit<Omit<Omit<AttributeIdProps & PaddingProps & BorderProps & {
    fill: string;
} & TextProps & ExplainProps & {
    style: CSSProperties;
    implicitLabelPrefix: string;
    unsatisfiedColors: InputStateColors;
    implicitSelectedColors: InputStateColors;
} & {
    resetLabel: string;
    blockedLabel: string;
    appearance: "none" | "auto";
} & {
    noOptionsAvailableColors: InputStateColors;
} & RefAttributes<HTMLSelectElement>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>>;

export declare const choiceValueIdPropertyControls: {
    choiceValueId: {
        title: string;
        type: ControlType.String;
    };
};

export declare type ChoiceValueIdProps = {
    choiceValueId: string;
};

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare const ChoiceValueListRenderer: React_2.ComponentType<Omit<AttributeIdProps & {
    itemTemplate: ReactNode;
    style: CSSProperties;
    filter: Filter[];
} & React_2.RefAttributes<unknown>, "ref"> & React_2.RefAttributes<unknown>>;

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare const ChoiceValueName: ComponentType<AttributeIdProps & ChoiceValueIdProps & ReplaceTextProps & {
    customName?: string;
} & RefAttributes<unknown>>;

export declare type ChoiceValueNames = ReadonlyMap<ChoiceValueId, string>;

declare type ChoiceValueSorting = {
    defaultRules: SortingRule[];
    attributes: Array<AttributeIdProps & {
        choiceValues: ChoiceValueId[];
        rules: SortingRule[];
    }>;
};

declare type ChoiceValueSortingProps = {
    choiceValueSorting: ChoiceValueSorting & {
        jsonDefinition: string;
    };
};

export declare function cloneChildrenWithProps(children: ReactNode, additionalProps: PropsWithChildrenAndRef): ReactNode;

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare const Colorize: ComponentType<Props_2 & {
    children?: ReactNode;
} & RefAttributes<unknown>>;

declare type CommonExplainProps = {
    applySolutionButtonCaption: string;
    configurationSubjectTitle: string;
    generalConflictTitle: string;
    componentDecisionStateIncludedLabel: string;
    componentDecisionStateExcludedLabel: string;
    booleanDecisionStateTrueLabel: string;
    booleanDecisionStateFalseLabel: string;
    isBlockedSuffix: string;
    isNotSatisfiedSuffix: string;
};

/**
 * @framerIntrinsicWidth 300
 * @framerIntrinsicHeight 35
 *
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight fixed
 */
export declare const ComponentSelect: ComponentType<Omit<Omit<Omit<AttributeIdProps & PaddingProps & BorderProps & {
    fill: string;
} & TextProps & ExplainProps & {
    style: CSSProperties;
    implicitLabelPrefix: string;
    unsatisfiedColors: InputStateColors;
    implicitSelectedColors: InputStateColors;
} & {
    resetLabel: string;
    blockedLabel: string;
    appearance: "none" | "auto";
} & {
    includedLabel?: string;
    excludedLabel?: string;
} & RefAttributes<HTMLSelectElement>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>>;

declare type Condition = "none" | "explicit" | "implicit" | "blocked";

declare type Condition_2 = "none" | "explicit" | "implicit" | "blocked";

/**
 * These annotations control how your component sizes
 * Learn more: https://www.framer.com/developers/#code-components-auto-sizing
 *
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare const Configuration: ComponentType<{
    configurationModelNotFoundContent?: ReactNode;
    accessTokenInvalidContent?: ReactNode;
    accessTokenRestrictionContent?: ReactNode;
    errorContent?: ReactNode;
} & ChoiceValueSortingProps & LocalizationProps & WizardAttributeRelationsProps & {
    hcaBaseUrl: string;
    sessionCreation: "client-side" | "server-side";
    accessToken?: string;
    sessionCreateUrl?: string;
    sessionDeleteUrl?: string;
    deploymentName: string;
    channel: string;
    explainDialogProps: ExplainDialogProps;
    explainPopoverProps: ExplainPopoverProps;
    explainConstraints: boolean;
    attributeRelations: {
        jsonDefinition: string;
    };
} & {
    children?: ReactNode;
} & RefAttributes<unknown>>;

declare type DisplayMode = "dialog" | "popover";

export declare function explainableComponent<T, TProps extends ExplainProps>(Component: ForwardRefRenderFunction<T, TProps>): ComponentType<PropsWithoutRef<PropsWithoutRef<PropsWithoutRef<PropsWithoutRef<TProps> & RefAttributes<T>> & RefAttributes<unknown>> & RefAttributes<unknown>> & RefAttributes<unknown>>;

declare type ExplainContext = {
    switchMode: (displayMode: DisplayMode) => void;
    explain: (question: ExplainQuestionParam, displayMode: DisplayMode, controlId?: string) => Promise<void>;
    handleExplainAnswer: (explainAnswer: DecisionsExplainAnswer, displayMode: DisplayMode, controlId?: string) => Promise<void>;
    applySolution: UseExplainResult_2["applySolution"];
    dismiss: () => void;
    /**
     * Is Null if there is no ongoing explain process.
     */
    process: ExplainProcess | null;
};

declare type ExplainDialogProps = CommonExplainProps & {
    attributeValueFill: string;
    attributeValueAddFill: string;
    attributeValueAddColor: string;
    attributeValueRemoveFill: string;
    attributeValueRemoveColor: string;
    headerValueColor: string;
    fill: string;
    color: string;
    closeButtonOutline: string;
    applySolutionButtonFill: string;
    applySolutionButtonColor: string;
    applySolutionButtonOutline: string;
    explanationCard: string;
    scrollShadowBorder: string;
    backdropFilter: string;
    decisionExplanationSolutionsTitle: string;
    constraintExplanationSolutionsTitle: string;
};

declare type ExplainPopoverProps = CommonExplainProps & {
    attributeValueFill: string;
    attributeValueAddFill: string;
    attributeValueAddColor: string;
    attributeValueRemoveFill: string;
    attributeValueRemoveColor: string;
    headerValueColor: string;
    fill: string;
    color: string;
    closeButtonOutline: string;
    listSeparator: string;
    applySolutionButtonFill: string;
    applySolutionButtonColor: string;
    applySolutionButtonOutline: string;
    showMoreButtonOutline: string;
    solutionTitle: string;
    showMoreButtonCaption: string;
    showConstraintsButtonCaption: string;
};

declare type ExplainProcess = {
    /**
     * Is Null if the explanation process is not the result of an ExplainQuestion.
     */
    explainQuestion: ExplainQuestion | null;
    displayMode: DisplayMode;
    /**
     * Is Null if no controlId was provided.
     */
    controlId: string | null;
    hasError: boolean;
    /**
     * Is Null in case of an error.
     */
    decisionExplanations: ReadonlyArray<DecisionExplanation> | null;
    /**
     * Is Null in case of an error.
     */
    constraintExplanations: ReadonlyArray<ConstraintExplanation> | null;
};

declare type ExplainProps = {
    explain: DisplayMode | "disabled";
};

declare type Filter = {
    selection: SelectionState_5;
    condition: Condition_2;
};

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare const InitializationRetry: ComponentType<{
    children?: ReactNode;
} & RefAttributes<unknown>>;

declare type InputStateColors = {
    fill: string;
    color: string;
    borderColor: string;
};

declare type LocalizationProps = {
    localization: {
        jsonDefinition: string;
    };
};

/**
 * @framerIntrinsicWidth 300
 * @framerIntrinsicHeight 35
 *
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight fixed
 */
export declare const NumericInput: ComponentType<Omit<Omit<Omit<AttributeIdProps & PaddingProps & BorderProps & {
    fill: string;
} & TextProps & ExplainProps & {
    style: CSSProperties;
    implicitLabelPrefix: string;
    unsatisfiedColors: InputStateColors;
    implicitSelectedColors: InputStateColors;
} & {
    wait: number;
    decimalSeparator: string;
    thousandSeparator: string;
    placeholder: string;
} & RefAttributes<NumericFormat<unknown>>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>>;

declare type PaddingProps = {
    padding: number;
    paddingTop: number;
    paddingRight: number;
    paddingBottom: number;
    paddingLeft: number;
    isMixedPadding: boolean;
};

export declare function parseGlobalAttributeId(a: AttributeIdProps): GlobalAttributeId;

declare type Props = {
    enabledChildren: ReactNode;
    disabledChildren: ReactNode;
};

declare type Props_2 = {
    color: string;
    style?: CSSProperties;
};

declare type Props_3 = {
    target: "file" | "clipboard";
    fileName: string;
    fileExtension: string;
};

declare type Props_4 = {
    delay: number;
};

declare type PropsWithChildrenAndRef = HTMLAttributes<HTMLElement> & {
    ref?: Ref<HTMLElement>;
};

export declare const ReplaceText: ComponentType<ReplaceTextProps & {
    text: string;
} & RefAttributes<unknown>>;

declare type ReplaceTextProps = {
    children: ReactNode;
    mode: "replace" | "set-prop";
    replaceString: string;
    elementName: string;
    propName: string;
};

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare const ResetConfiguration: ComponentType<Props & RefAttributes<unknown>>;

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare const RestoreConfiguration: ComponentType<Omit<Omit<Omit<ExplainProps & {
    source: "file" | "clipboard";
    fileExtension: string;
    autoResolveConflicts: boolean;
} & {
    children?: ReactNode;
} & RefAttributes<HTMLElement>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>>;

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare const SatisfactionIndicator: ComponentType<Omit<Omit<Omit<AttributeIdProps & ExplainProps & {
    satisfiedChildren: ReactNode;
    unsatisfiedChildren: ReactNode;
    attributes: AttributeIdProps[];
} & {
    children?: ReactNode;
} & RefAttributes<HTMLElement>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>>;

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare function ScrollIntoView(props: Props_4): JSX_2.Element;

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare const SelectedNumericValue: ComponentType<AttributeIdProps & ReplaceTextProps & {
    fallback: string;
} & RefAttributes<unknown>>;

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare const SelectionIndicator: ComponentType<Omit<AttributeIdProps & ChoiceValueIdProps & {
    variants: Variant[];
    content1: ReactNode;
    content2: ReactNode;
    content3: ReactNode;
    content4: ReactNode;
    content5: ReactNode;
    content6: ReactNode;
    content7: ReactNode;
    content8: ReactNode;
    content9: ReactNode;
    content10: ReactNode;
} & RefAttributes<HTMLElement>, "ref"> & RefAttributes<unknown>>;

declare type SelectionState = "undefined" | "included" | "excluded" | "true" | "false";

declare type SelectionState_2 = "undefined" | "included" | "excluded" | "true" | "false" | "numeric";

declare type SelectionState_3 = "undefined" | "included" | "excluded" | "true" | "false" | "numeric";

declare type SelectionState_4 = "undefined" | "included" | "excluded" | "true" | "false" | "numeric";

declare type SelectionState_5 = "undefined" | "included" | "excluded";

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare const SelectionToggle: ComponentType<Omit<Omit<Omit<AttributeIdProps & ChoiceValueIdProps & ExplainProps & {
    toggleFrom: SelectionState;
    toggleTo: SelectionState;
} & {
    children?: ReactNode;
} & RefAttributes<HTMLElement>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>>;

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare const SetSelection: ComponentType<Omit<Omit<Omit<AttributeIdProps & ChoiceValueIdProps & ExplainProps & {
    setSelection: SelectionState_2;
    numericValue: number;
    attributeIds: [];
} & {
    children?: ReactNode;
} & RefAttributes<HTMLElement>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>>;

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare const SetSelections: ComponentType<Omit<Omit<Omit<ExplainProps & {
    attributes: (AttributeIdProps & ChoiceValueIdProps & {
        setSelection: SelectionState_3;
        numericValue: number;
    })[];
    existingSelections: "keep" | "drop";
    autoResolveConflicts: boolean;
    trigger: "click" | "auto";
} & {
    children?: ReactNode;
} & RefAttributes<HTMLElement>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>, "ref"> & RefAttributes<unknown>>;

export declare function Singleton(props: PropsWithChildren<{
    singletonId: string;
}>): JSX_2.Element;

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare function Slot(props: PropsWithChildren): ReactNode;

declare type SortingRule = {
    regex: string;
    direction: "asc" | "desc";
    mode: "isMatch" | "string" | "numeric";
    description?: string;
};

/**
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export declare function StoreConfiguration(props: PropsWithChildren<Props_3>): ReactNode;

declare type TextProps = {
    color: string;
    text: {
        fontFamily: string;
        fontSize: string;
        fontStyle: string;
        fontWeight: string;
    };
};

export declare function useAttributeName(attributeId: GlobalAttributeId): string | undefined;

export declare function useChoiceValueName(attributeId: GlobalAttributeId, choiceValueId: ChoiceValueId): string | undefined;

export declare function useChoiceValueNames(attributeId: GlobalAttributeId): ChoiceValueNames;

export declare const useControlId: () => string;

export declare function useDebounceValue<TValue>(sourceValue: TValue, setSourceValue: (value: TValue) => void, inputValue: TValue, setInputValue: (value: TValue) => void, wait?: number): {
    flush: () => void;
};

export declare function useExplain(): UseExplainResult;

export declare function useExplainProcess(): UseExplainProcessResult | null;

export declare type UseExplainProcessResult = ExplainProcess & {
    switchMode: ExplainContext["switchMode"];
    applySolution: ExplainContext["applySolution"];
    dismiss: ExplainContext["dismiss"];
};

export declare type UseExplainResult = {
    explain: ExplainContext["explain"];
    handleExplainAnswer: ExplainContext["handleExplainAnswer"];
};

export declare function useRenderPlaceholder(): boolean;

export declare function useSortedChoiceValues(attributeId: GlobalAttributeId, choiceValues?: ReadonlyArray<ChoiceValue>): ReadonlyArray<ChoiceValue>;

declare type Variant = {
    selection: SelectionState_4;
    condition: Condition;
    content: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
    useInDesignTime: boolean;
};

export declare function withControlId<T, TProps>(Component: ComponentType<TProps>): ComponentType<PropsWithoutRef<TProps> & RefAttributes<T>>;

export declare function withErrorBoundary<T, TProps>(Component: ComponentType<TProps>): ComponentType<PropsWithoutRef<TProps> & RefAttributes<T>>;

export declare function withFullSize<T, TProps extends {
    style?: CSSProperties;
}>(Component: ComponentType<TProps>): ComponentType<PropsWithoutRef<TProps> & RefAttributes<T>>;

declare type WizardAttributeRelationsProps = {
    wizardAttributeRelations: {
        wizardSteps: WizardStep[];
    };
};

declare type WizardStep = {
    name: string;
    attributes: AttributeIdProps[];
};

export { }