@wix/react-component-schema 1.4.0 → 1.6.0

package/dist/editor-react-types.d.ts

@@ -0,0 +1,408 @@
+declare module '@wix/editor-react-types' {
+import type { ReactElement } from 'react';
+
+/**
+ * Accessibility attributes.
+ *
+ * @example
+ * ```tsx
+ * import type { A11y } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   a11y?: A11y;
+ * }
+ *
+ * const MyComponent = ({ a11y }: MyComponentProps) => (
+ *   <div
+ *     tabIndex={a11y?.tabIndex}
+ *     role={a11y?.role}
+ *     aria-label={a11y?.ariaLabel}
+ *   />
+ * );
+ * ```
+ */
+export interface A11y {
+    /** The `tabindex` attribute. Controls the component's position in keyboard focus order. */
+    tabIndex?: number;
+    /** The `aria-level` attribute. Defines the hierarchical level of a component within a structure. */
+    ariaLevel?: number;
+    /** The `aria-expanded` attribute. Indicates whether a collapsible component is expanded or collapsed. */
+    ariaExpanded?: boolean | 'false' | 'true';
+    /** The `aria-disabled` attribute. Indicates that the component is perceivable but disabled. */
+    ariaDisabled?: boolean | 'false' | 'true';
+    /** The `aria-atomic` attribute. Indicates whether assistive technologies should present the entire region as a whole. */
+    ariaAtomic?: boolean | 'false' | 'true';
+    /** The `aria-hidden` attribute. Hides the component from assistive technologies. */
+    ariaHidden?: boolean | 'false' | 'true';
+    /** The `aria-busy` attribute. Indicates the component is being modified and assistive technologies should wait. */
+    ariaBusy?: boolean | 'false' | 'true';
+    /** Whether the component supports multiline input. */
+    multiline?: boolean;
+    /** The `aria-autocomplete` attribute. Indicates the type of autocomplete behavior for an input. */
+    ariaAutocomplete?: 'none' | 'inline' | 'list' | 'both';
+    /** The `aria-pressed` attribute. Indicates the current "pressed" state of a toggle button. */
+    ariaPressed?: boolean | 'false' | 'mixed' | 'true';
+    /** The `aria-haspopup` attribute. Indicates the availability and type of an interactive popup component. */
+    ariaHaspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /** The `aria-relevant` attribute. Indicates what notifications the user agent will trigger when the accessibility tree is modified. */
+    ariaRelevant?: 'additions' | 'additions text' | 'all' | 'removals' | 'text';
+    /** The `role` attribute. Defines the semantic role of the component. */
+    role?: string;
+    /** The `aria-live` attribute. Indicates that the component will be updated and describes the types of updates. */
+    ariaLive?: 'off' | 'assertive' | 'polite';
+    /** The `aria-current` attribute. Indicates the component that represents the current item within a container or set. */
+    ariaCurrent?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';
+    /** The `aria-label` attribute. Defines a string value that labels the component. */
+    ariaLabel?: string;
+    /** The `aria-roledescription` attribute. Defines a human-readable description for the role of the component. */
+    ariaRoledescription?: string;
+    /** The `aria-describedby` attribute. Identifies the element that describes this component. */
+    ariaDescribedby?: string;
+    /** The `aria-labelledby` attribute. Identifies the element that labels this component. */
+    ariaLabelledby?: string;
+    /** The `aria-errormessage` attribute. Identifies the element that provides an error message for this component. */
+    ariaErrormessage?: string;
+    /** The `aria-owns` attribute. Identifies a component to define a visual, functional, or contextual parent/child relationship. */
+    ariaOwns?: string;
+    /** The `aria-controls` attribute. Identifies the element whose contents or presence are controlled by this component. */
+    ariaControls?: string;
+    /** The HTML tag to render the component as (e.g. `'h1'`, `'button'`). */
+    tag?: string;
+    /** The `aria-multiline` attribute. Indicates whether a text box accepts multiple lines of input. */
+    ariaMultiline?: boolean | 'false' | 'true';
+    /** The `aria-invalid` attribute. Indicates the entered value does not conform to the expected format. */
+    ariaInvalid?: boolean | 'false' | 'true' | 'grammar' | 'spelling';
+}
+
+/** An adaptive streaming video source (HLS or DASH). */
+type AdaptiveVideoSource = {
+    /** The adaptive streaming format. */
+    format: 'hls' | 'dash';
+    /** The video URI. */
+    uri: string;
+    /** The fully resolved video URL. */
+    url: string;
+};
+
+/**
+ * An audio track from Wix Media.
+ *
+ * @example
+ * ```tsx
+ * import type { Audio } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   audio?: Audio;
+ * }
+ * ```
+ */
+export type Audio = {
+    /** The fully resolved audio URL. */
+    url: string;
+    /** The audio artist name. */
+    artist?: string;
+    /** The audio track title. */
+    title?: string;
+    /** The audio duration in seconds. */
+    duration?: number;
+    /** The audio file name. */
+    name?: string;
+    /** All available audio sources at different quality levels and formats. */
+    audio?: Array<AudioSource>;
+};
+
+/** A single audio source file at a specific quality and format. */
+type AudioSource = {
+    /** The audio bitrate in kbps. */
+    audioBitrate: number;
+    /** The audio format (e.g. `'mp3'`, `'ogg'`). */
+    format: string;
+    /** The audio quality label. */
+    quality: string;
+    /** The fully resolved audio URL. */
+    url: string;
+};
+
+type Crop = Point & {
+    width: number;
+    height: number;
+};
+
+/**
+ * The text direction of the component.
+ * Maps to the HTML `dir` attribute.
+ * - `'ltr'` — left to right.
+ * - `'rtl'` — right to left.
+ * - `'auto'` — determined by content.
+ *
+ * @example
+ * ```tsx
+ * import type { Direction } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   direction?: Direction;
+ * }
+ *
+ * const MyComponent = ({ direction = 'ltr' }: MyComponentProps) => (
+ *   <div dir={direction}>...</div>
+ * );
+ * ```
+ */
+export type Direction = 'rtl' | 'ltr' | 'auto';
+
+/**
+ * An image from Wix Media.
+ *
+ * @example
+ * ```tsx
+ * import type { Image } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   image?: Image;
+ * }
+ *
+ * const MyComponent = ({ image }: MyComponentProps) => (
+ *   <img src={image?.url} alt={image?.alt} />
+ * );
+ * ```
+ */
+export type Image = {
+    /** The image URI. */
+    uri?: string;
+    /** The image URL. */
+    url: string;
+    /** The image file name. */
+    name?: string;
+    /** The image height in pixels. */
+    height?: number;
+    /** The image width in pixels. */
+    width?: number;
+    /** Whether the image is animated (e.g. GIF). */
+    animated?: boolean;
+    /** The crop region applied to the image. */
+    crop?: Crop;
+    /** The image quality, as a percentage from 0 to 100. */
+    quality?: number;
+    /** The image alt text for accessibility. */
+    alt?: string;
+};
+
+/**
+ * A link to a URL, used for navigation within components.
+ *
+ * @example
+ * ```tsx
+ * import type { Link } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   link?: Link;
+ * }
+ * ```
+ */
+export type Link = {
+    /** The link URL. */
+    href?: string;
+    /**
+     * Where this link should open.
+     * - `'_self'` — opens in the same page.
+     * - `'_blank'` — opens in a new tab.
+     */
+    target?: LinkTarget;
+    /** The `rel` attribute of the link. Accepts LinkRel values separated by a space. */
+    rel?: string;
+};
+
+type LinkTarget = '_self' | '_blank';
+
+/**
+ * A local date string in ISO-8601 extended format (`YYYY-MM-DD`).
+ *
+ * @example
+ * ```tsx
+ * import type { LocalDate } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   startDate?: LocalDate; // e.g. '2024-03-15'
+ * }
+ * ```
+ */
+export type LocalDate = string;
+
+/**
+ * A local time string in ISO-8601 extended format (`hh:mm[:ss][.sss]`).
+ *
+ * @example
+ * ```tsx
+ * import type { LocalTime } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   openingTime?: LocalTime; // e.g. '09:00'
+ * }
+ * ```
+ */
+export type LocalTime = string;
+
+/**
+ * A single item in a menu, optionally containing nested sub-items.
+ */
+type MenuItem = {
+    /** A unique identifier for the menu item. */
+    id: string;
+    /** The display label shown to the user. */
+    label: string;
+    /** The navigation link for this menu item. */
+    link?: Link;
+    /** An optional container element rendered alongside the menu item. */
+    container?: ReactElement;
+    /** Nested child menu items, for building multi-level menus. */
+    items?: Array<MenuItem>;
+};
+
+/**
+ * A list of menu items.
+ *
+ * @example
+ * ```tsx
+ * import type { MenuItems } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   items?: MenuItems;
+ * }
+ * ```
+ */
+export type MenuItems = Array<MenuItem>;
+
+type Point = {
+    x: number;
+    y: number;
+};
+
+/**
+ * Rich text content with resolved links.
+ *
+ * @example
+ * ```tsx
+ * import type { RichText } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   description?: RichText;
+ * }
+ *
+ * const MyComponent = ({ description }: MyComponentProps) => (
+ *   <div>
+ *     {description?.html}
+ *     {description?.linkList.map((link) => (
+ *       <a key={link.href} href={link.href}>{link.href}</a>
+ *     ))}
+ *   </div>
+ * );
+ * ```
+ */
+export type RichText = {
+    /** The original rich text content. */
+    text: string;
+    /** The HTML content with all links resolved. */
+    html: string;
+    /** All links present in the rich text content. */
+    linkList: Array<Link>;
+};
+
+/**
+ * A vector art (SVG) asset from Wix Media.
+ *
+ * @example
+ * ```tsx
+ * import type { VectorArt } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   icon?: VectorArt;
+ * }
+ * ```
+ */
+export type VectorArt = {
+    /** The SVG URI. */
+    uri: string;
+    /** The SVG `viewBox` attribute value. */
+    viewBox: string;
+    /** The SVG content box dimensions. */
+    contentBox: string;
+    /** A map of color IDs to their resolved color values, for themeable SVGs. */
+    colors: Record<string, string>;
+    /**
+     * The SVG content type, which determines how colors and theming are applied.
+     * - `'shape'` — a simple monochromatic shape.
+     * - `'color'` — a multi-color SVG.
+     * - `'tint'` — a single-color tintable SVG.
+     * - `'ugc'` — user-generated content.
+     * - `'textpath'` — text along a path.
+     */
+    contentType: 'shape' | 'color' | 'tint' | 'ugc' | 'textpath';
+    /** The raw SVG markup. */
+    svgContent: string;
+};
+
+/**
+ * A video from Wix Media, including all available sources and quality levels.
+ *
+ * @example
+ * ```tsx
+ * import type { Video } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   video?: Video;
+ * }
+ * ```
+ */
+export type Video = {
+    /** The original video URI. */
+    uri: string;
+    /** All available quality-level sources for progressive playback. */
+    sources: Array<VideoSource>;
+    /** Adaptive streaming sources (HLS/DASH) for streaming playback. */
+    adaptiveSources: Array<AdaptiveVideoSource>;
+    /** Whether the video contains an audio track. */
+    hasAudio: boolean;
+    /** The video frame rate in frames per second. */
+    fps: number;
+    /** A poster image to display before the video plays. */
+    poster?: Image;
+};
+
+/** A set of video files for a specific quality level. */
+type VideoSource = {
+    /** The video quality level. */
+    quality: '1080p' | '720p' | '480p' | '360p';
+    /** The video width in pixels at this quality level. */
+    width: number;
+    /** The video height in pixels at this quality level. */
+    height: number;
+    /** The available file types for this quality level. */
+    types: Array<VideoSourceType>;
+};
+
+/** A single video file format for a given quality level. */
+type VideoSourceType = {
+    /** The video format. */
+    format: 'mp4' | 'mp4-luminance';
+    /** The video URI. */
+    uri: string;
+    /** The fully resolved video URL. */
+    url: string;
+};
+
+/**
+ * A URL with an `http` or `https` scheme.
+ *
+ * @example
+ * ```tsx
+ * import type { WebUrl } from '@wix/editor-react-types';
+ *
+ * interface MyComponentProps {
+ *   website?: WebUrl;
+ * }
+ * ```
+ */
+export type WebUrl = string;
+
+export { }
+}