@revenuecat/purchases-ui-js/dist/stories/meta-templates.js

Web components for Paywalls. Powered by RevenueCat

import { DEFAULT_BACKGROUND_COLOR, DEFAULT_TEXT_COLOR, } from "../utils/constants";
export const getSpacingStoryMeta = (description) => ({
    description,
    control: { type: "object" },
    defaultValue: { top: 0, trailing: 0, bottom: 0, leading: 0 },
    table: {
        type: {
            summary: "object",
            detail: "{ top: number, trailing: number, bottom: number, leading: number }",
        },
    },
});
export const getColorStoryMeta = (description) => ({
    description,
    control: {
        type: "object",
        fields: {
            light: { type: "color" },
            dark: { type: "color" },
        },
    },
    defaultValue: {
        dark: DEFAULT_BACKGROUND_COLOR,
        light: DEFAULT_BACKGROUND_COLOR,
    },
    table: {
        type: {
            summary: "object",
            detail: "{ dark: string, light: string }",
        },
    },
});
export const stackDimensionStoryMeta = {
    control: { type: "object" },
    description: "Stack dimension configuration",
    table: {
        type: {
            summary: "object",
            detail: `{
        type: "vertical" | "horizontal" | "zlayer",
        alignment: "start" | "center" | "end" | "top" | "bottom",
        distribution: "start" | "center" | "end" | "space_between" | "space_around" | "space_evenly"
      }`,
        },
    },
};
export const getTextControlStoryMeta = (description) => ({
    control: { type: "text" },
    description,
});
export const fontWeightStoryMeta = {
    control: { type: "select" },
    options: [
        "black",
        "extra-bold",
        "bold",
        "semi-bold",
        "medium",
        "regular",
        "light",
        "extra-light",
        "thin",
    ],
    description: "Font weight to be used",
};
export const fontSizeStoryMeta = {
    control: { type: "select" },
    options: [
        "body_s",
        "body_m",
        "body_l",
        "body_xl",
        "heading_xs",
        "heading_s",
        "heading_m",
        "heading_l",
        "heading_xl",
        "heading_xxl",
    ],
    description: "Font size to be used",
};
export const textStyleStoryMeta = {
    control: { type: "select" },
    options: ["normal", "bold", "italic", "strikethrough", "link", "monospace"],
    description: "Text style to be used",
};
export const horizontalAlignmentStoryMeta = {
    control: { type: "select" },
    options: ["center", "start", "end"],
    description: "Text horizontal alignment",
};
export const shadowStoryMeta = {
    control: {
        type: "object",
        fields: {
            x: { type: "number" },
            y: { type: "number" },
            radius: { type: "number" },
            color: { type: "color" },
        },
    },
    defaultValue: {
        x: 0,
        y: 0,
        radius: 0,
        color: { dark: DEFAULT_TEXT_COLOR, light: DEFAULT_TEXT_COLOR },
    },
    table: {
        type: {
            summary: "object",
            detail: "{ x: number, y: number, radius: number, color: { dark: string, light: string } }",
        },
    },
    description: "Shadow properties including x, y, radius, and color",
};
export const borderStoryMeta = {
    control: {
        type: "object",
        fields: {
            width: { type: "number" },
            color: { type: "color" },
        },
    },
    defaultValue: {
        width: 0,
        color: { dark: DEFAULT_TEXT_COLOR, light: DEFAULT_TEXT_COLOR },
    },
    description: "Border properties including width, color, style, and radius",
};
export const sizeStoryMeta = {
    control: {
        type: "object",
        fields: {
            width: {
                type: "object",
                fields: {
                    type: { type: "select", options: ["fit", "fill", "fixed"] },
                    value: { type: "number" },
                },
            },
            height: {
                type: "object",
                fields: {
                    type: { type: "select", options: ["fit", "fill", "fixed"] },
                    value: { type: "number" },
                },
            },
        },
    },
    defaultValue: {
        width: { type: "fill" },
        height: { type: "fill" },
    },
    description: "Size properties including width and height",
};