@napps/nodes.
React component types
interface RootComponentProps<TSettings = Record<string, unknown>> {
settings?: TSettings;
}
type ComponentArgs<TSettings = Record<string, unknown>> = {
identifier?: string;
packageName?: string | null;
settings?: TSettings;
};
type ComponentContext = {
setInitialState(state?: unknown): void;
updateState(state: unknown): void;
removeComponent(): void;
setComponentTheme(theme: ComponentTheme): void;
cards?: ProductCardsBridge;
};
class BaseReactUIComponent {
constructor(
context: ComponentContext,
args: ComponentArgs,
element: React.ReactNode
);
}
function createReactUIComponent(
context: ComponentContext,
args: ComponentArgs,
element: React.ReactNode
): BaseReactUIComponent;
Node tree types
type NodeProps = Record<string, unknown> & { text?: string };
interface UIRootConfig {
concurrentRenderer?: boolean;
dispatchEvent?: (
callback: (payload: unknown) => unknown,
payload: unknown,
delivery: 0 | 1
) => unknown;
}
class UINode {
clearChildren(): void;
appendChild(child: UINode): void;
removeChild(child: UINode): void;
insertBefore(child: UINode, beforeChild: UINode): void;
updateProperty(property: string, value: unknown): void;
removeProperty(property: string): void;
updateProps(newProps: NodeProps, previousProps?: NodeProps): void;
setHidden(isHidden: boolean): void;
resetTextContent(): void;
commitTextUpdate(oldText: string, newText: string): void;
dispose(): void;
}
class UIContainer {
clearChildren(): void;
appendChild(child: UINode): void;
removeChild(child: UINode): void;
insertBefore(child: UINode, beforeChild: UINode): void;
createNode(type: string, props: NodeProps): UINode;
shouldSetTextContent(type: string, props: NodeProps): boolean;
prepareForCommit(): void;
resetAfterCommit(): void;
}
const RootNode: new (config?: UIRootConfig) => UIContainer;
Styles and gradients
interface GradientStop {
color: string;
position?: number | string;
}
interface Gradient {
type?: "linear" | "radial" | "sweep" | "conic";
angle?: number;
centerX?: number | string;
centerY?: number | string;
center?: [number | string, number | string];
radius?: number;
colors?: string[];
stops?: number[] | GradientStop[];
positions?: number[];
}
interface StyleProperties {
backgroundColor?: string;
backgroundGradient?: string | Gradient;
color?: string;
borderColor?: string;
borderRadius?: number | string;
borderRadiusTopStart?: number;
borderRadiusTopEnd?: number;
borderRadiusBottomStart?: number;
borderRadiusBottomEnd?: number;
borderWidth?: number;
spacing?: number;
padding?: number;
paddingStart?: number;
paddingEnd?: number;
paddingTop?: number;
paddingBottom?: number;
margin?: number;
marginStart?: number;
marginEnd?: number;
marginTop?: number;
marginBottom?: number;
minWidth?: number;
maxWidth?: number;
minHeight?: number;
maxHeight?: number;
width?: number | string;
height?: number | string;
weight?: number;
aspectRatio?: number;
clip?: boolean;
horizontalAlignment?: "start" | "center" | "end";
verticalAlignment?: "top" | "center" | "bottom";
fontSize?: number;
fontWeight?: number;
fontFamily?: string;
textAlignment?: "start" | "center" | "end";
textDecoration?: "none" | "underline" | "strikethrough";
maxLines?: number;
minLines?: number;
alpha?: number;
rotate?: number;
scale?: number;
scaleX?: number;
scaleY?: number;
translationX?: number;
translationY?: number;
transition?: string;
}
interface StyleRegistry {
registerStyle(name: string, style: StyleProperties): void;
removeStyle(name: string): void;
clearAll(): void;
mergeStyles(...sources: Array<string | StyleProperties>): StyleProperties | null;
getStyle(name: string): Uint8Array | null;
}
Reactive animation types
interface SharedValue {
value: number | string | AnimationHandle;
}
interface DerivedValue {
readonly value: number;
}
type ReactiveValue = SharedValue | DerivedValue;
type AnimationHandle = { readonly __anim: unique symbol };
type AnimationReason = "completed" | "cancelled" | "replaced" | "overwritten";
interface AnimationResult {
finished: boolean;
reason: AnimationReason;
}
interface TimingConfig {
duration?: number;
easing?: EasingValue;
driver?: "cpp" | "native";
}
interface SpringConfig {
stiffness?: number;
damping?: number;
mass?: number;
velocity?: number;
response?: number;
dampingFraction?: number;
restDisplacement?: number;
restVelocity?: number;
driver?: "cpp" | "native";
}
function sv(initial?: number | string): SharedValue;
function sharedValue(initial?: number | string): SharedValue;
function timing(toValue: number | string, config?: TimingConfig, callback?: (result: AnimationResult) => void): AnimationHandle;
function spring(toValue: number | string, config?: SpringConfig, callback?: (result: AnimationResult) => void): AnimationHandle;
function cancelAnimation(value: SharedValue): void;
function interpolate(source: ReactiveValue, inputRange: number[], outputRange: number[]): DerivedValue;
function clamp(source: ReactiveValue, min: number, max: number): DerivedValue;
function add(a: ReactiveValue, b: ReactiveValue): DerivedValue;
function multiply(a: ReactiveValue, b: ReactiveValue): DerivedValue;
function animatedProps(props: object): object;
function mapEvent(map: Record<string, SharedValue>): object;
function event<E = unknown>(handler: (event: E) => void): (event: E) => void;