@strata-ds/core 2.1.0

package/dist/index.d.ts

@@ -0,0 +1,440 @@
+import * as React from 'react';
+import React__default from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type TokenType = "color" | "string" | "dimension" | "font family" | "font weight" | "duration" | "number" | "cubic-bezier" | "spacer" | "shadow" | "transition" | "border" | "display" | "layout";
+type DesignToken = {
+    name: string;
+    value: string;
+    type: TokenType;
+    unit: string | null;
+    comment: string;
+    category?: string;
+    deprecated?: boolean;
+};
+type ComponentProperty = {
+    value: string;
+    unit: string | null;
+    type: TokenType;
+    comment: string;
+    resolvedValue?: string;
+    sourceToken?: string;
+};
+type LinkedElement = {
+    htmlTag: string;
+    attributes: Record<string, string>;
+    requiredAttributes?: string[];
+    optionalAttributes?: string[];
+    attributeDescriptions?: Record<string, string>;
+};
+type ComponentVariant = {
+    description?: string;
+    properties: Record<string, ComponentProperty>;
+    linkedElement?: Partial<LinkedElement>;
+    textContent?: string;
+    children?: Record<string, ComponentNode> | null;
+    states?: Record<string, Record<string, ComponentProperty>>;
+};
+interface ComponentNode {
+    displayName?: string;
+    description?: string;
+    properties?: Record<string, ComponentProperty>;
+    children?: Record<string, ComponentNode> | null;
+    linkedElement?: LinkedElement;
+    textContent?: string;
+    variant?: string;
+    variants?: Record<string, ComponentVariant>;
+    states?: Record<string, Record<string, ComponentProperty>>;
+}
+interface DesignSystemData {
+    metadata?: {
+        name?: string;
+        version?: string;
+        lastUpdated?: string;
+    };
+    variables: Record<string, DesignToken>;
+    components: Record<string, ComponentNode>;
+    custom?: CustomDesignSystemData;
+}
+type SelectedItem = (DesignToken & {
+    key: string;
+    name: string;
+    displayValue: string;
+}) | ({
+    component: string;
+    property: string;
+    displayValue: string;
+} & ComponentProperty);
+type SelectedType = "variable" | "component_property" | "component" | null;
+type FilterType = "all" | "default" | "custom";
+interface CustomDesignSystemData {
+    variables: Record<string, DesignToken>;
+    components: Record<string, ComponentNode>;
+}
+
+interface StrataContextType {
+    designSystem: DesignSystemData;
+    updateDesignSystem: (newData: DesignSystemData) => void;
+    syncStatus: "idle" | "syncing" | "success" | "error";
+    lastSynced: Date | null;
+    forceSync: () => Promise<void>;
+    syncVersion: number;
+    syncUrl: string;
+    syncEnabled: boolean;
+    syncInterval: number;
+    syncToken: string | undefined;
+    snapshotCdnBase: string | undefined;
+    projectId: string | undefined;
+}
+declare const useStrata: () => StrataContextType;
+interface StrataProviderProps {
+    children: React__default.ReactNode;
+    initialData?: DesignSystemData;
+    userDesignSystem?: DesignSystemData;
+    syncEnabled?: boolean;
+    syncUrl?: string;
+    syncInterval?: number;
+    /**
+     * Sync token generated from the Strata project dashboard (e.g. "pt_live_xxxxxxxx").
+     * When provided, all sync fetches include an Authorization: Bearer header so the
+     * project does not need to be fully public — the token acts as the access credential.
+     */
+    syncToken?: string;
+    /**
+     * Base CDN URL where snapshot files are served.
+     * E.g. "https://cdn.strata.charisol.io"
+     * When set together with `projectId`, the provider fetches
+     * `${snapshotCdnBase}/snapshots/${projectId}/strata.json`
+     * in a single request instead of 3 API calls.
+     * Takes precedence over `syncUrl` when both are provided.
+     */
+    snapshotCdnBase?: string;
+    /**
+     * Your Strata project ID (shown in the dashboard URL and project settings).
+     * Required when using `snapshotCdnBase`.
+     */
+    projectId?: string;
+    /**
+     * Callback invoked when a sync cycle fails. Receives a structured error object
+     * containing an HTTP status `code` (0 for non-HTTP errors), a human-readable
+     * `message`, and a `source` indicating where the failure originated
+     * (`"cdn"` or `"sync"`).
+     */
+    onSyncError?: (error: {
+        code: number;
+        message: string;
+        source: string;
+    }) => void;
+    onSyncSuccess?: (data: DesignSystemData) => void;
+}
+declare const StrataProvider: React__default.FC<StrataProviderProps>;
+
+declare const DefaultCard: React__default.FC;
+
+declare const Card: {
+    ({ children, width, maxWidth, fontFamily, ...props }: any): react_jsx_runtime.JSX.Element | null;
+    Container: ({ children, width, maxWidth, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    Header: ({ children, padding, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    HeaderContent: ({ children, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    HeaderTitle: ({ children, fontSize, fontWeight, color, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    HeaderTimer: ({ children, fontSize, fontFamily, color, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    Body: ({ children, padding, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    BodyDriver: ({ children, backgroundColor, borderRadius, padding, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    BodyImage: ({ src, alt, width, height, borderRadius, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    BodyInfo: ({ children, flexGrow, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    BodyName: ({ children, fontWeight, color, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    BodySpan: ({ children, fontSize, color, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    BodyActions: ({ children, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    BodyActionButton: ({ children, variant, backgroundColor, color, hoverBackgroundColor, border, padding, borderRadius, onClick, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    BodyActionIcon: ({ children, width, height, color, ...props }: any) => react_jsx_runtime.JSX.Element;
+    Route: ({ children, paddingX, paddingBottom, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    RouteContainer: ({ children, gap, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    RouteItem: ({ children, icon, iconBackgroundColor, title, subtitle, ...props }: {
+        children?: React.ReactNode;
+        icon?: React.ReactNode;
+        iconBackgroundColor?: string;
+        title?: string;
+        subtitle?: string;
+    } & any) => react_jsx_runtime.JSX.Element | null;
+    Payment: ({ children, paddingX, paddingBottom, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    PaymentContainer: ({ children, backgroundColor, borderRadius, padding, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    PaymentContent: ({ children, ...props }: any) => react_jsx_runtime.JSX.Element;
+    PaymentIconContainer: ({ children, width, height, backgroundColor, ...props }: any) => react_jsx_runtime.JSX.Element;
+    PaymentDetails: ({ children, ...props }: any) => react_jsx_runtime.JSX.Element;
+    Number: ({ children, color, fontWeight, fontSize, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    Type: ({ children, fontSize, color, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    TotalSection: ({ children, paddingX, paddingY, borderTop, borderColor, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    TotalContent: ({ children, ...props }: any) => react_jsx_runtime.JSX.Element;
+    TotalLabel: ({ children, color, fontWeight, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+    TotalAmount: ({ children, fontSize, fontWeight, color, ...props }: any) => react_jsx_runtime.JSX.Element | null;
+};
+
+declare const StrataDebug: React__default.FC;
+
+interface CardProps {
+    children?: React__default.ReactNode;
+    width?: string;
+    maxWidth?: string;
+    backgroundColor?: string;
+    fontFamily?: string;
+}
+interface CardContainerProps {
+    children?: React__default.ReactNode;
+    width?: string;
+    maxWidth?: string;
+}
+interface CardHeaderProps {
+    children?: React__default.ReactNode;
+    padding?: string | number;
+}
+interface CardHeaderContentProps {
+    children?: React__default.ReactNode;
+}
+interface CardHeaderTitleProps {
+    children?: React__default.ReactNode;
+    fontSize?: string;
+    fontWeight?: string;
+    color?: string;
+}
+interface CardHeaderTimerProps {
+    children?: React__default.ReactNode;
+    fontSize?: string;
+    fontFamily?: string;
+    color?: string;
+}
+interface CardBodyProps {
+    children?: React__default.ReactNode;
+    padding?: string | number;
+}
+interface CardBodyDriverProps {
+    children?: React__default.ReactNode;
+    backgroundColor?: string;
+    borderRadius?: string;
+    padding?: string | number;
+}
+interface CardBodyImageProps {
+    src?: string;
+    alt?: string;
+    width?: string | number;
+    height?: string | number;
+    borderRadius?: string;
+}
+interface CardBodyInfoProps {
+    children?: React__default.ReactNode;
+    flexGrow?: number;
+}
+interface CardBodyNameProps {
+    children?: React__default.ReactNode;
+    fontWeight?: string;
+    color?: string;
+}
+interface CardBodySpanProps {
+    children?: React__default.ReactNode;
+    fontSize?: string;
+    color?: string;
+}
+interface CardBodyActionsProps {
+    children?: React__default.ReactNode;
+}
+interface CardBodyActionButtonProps {
+    children?: React__default.ReactNode;
+    padding?: string | number;
+    borderRadius?: string;
+    border?: string;
+    borderColor?: string;
+    backgroundColor?: string;
+    hoverBackgroundColor?: string;
+    transition?: string;
+    onClick?: () => void;
+}
+interface CardBodyActionIconProps {
+    children?: React__default.ReactNode;
+    width?: string | number;
+    height?: string | number;
+    color?: string;
+}
+interface CardRouteProps {
+    children?: React__default.ReactNode;
+    paddingX?: string | number;
+    paddingBottom?: string | number;
+}
+interface CardRouteContainerProps {
+    children?: React__default.ReactNode;
+    gap?: string | number;
+}
+interface CardRouteItemProps {
+    children?: React__default.ReactNode;
+    icon?: React__default.ReactNode;
+    iconBackgroundColor?: string;
+    title?: string;
+    subtitle?: string;
+}
+interface CardPaymentProps {
+    children?: React__default.ReactNode;
+    paddingX?: string | number;
+    paddingBottom?: string | number;
+}
+interface CardPaymentContainerProps {
+    children?: React__default.ReactNode;
+    backgroundColor?: string;
+    borderRadius?: string;
+    padding?: string | number;
+}
+interface CardPaymentContentProps {
+    children?: React__default.ReactNode;
+}
+interface CardPaymentIconContainerProps {
+    children?: React__default.ReactNode;
+    width?: string | number;
+    height?: string | number;
+    backgroundColor?: string;
+}
+interface CardPaymentDetailsProps {
+    children?: React__default.ReactNode;
+}
+interface CardNumberProps {
+    children?: React__default.ReactNode;
+    color?: string;
+    fontWeight?: string;
+    fontSize?: string;
+}
+interface CardTypeProps {
+    children?: React__default.ReactNode;
+    fontSize?: string;
+    color?: string;
+}
+interface CardTotalSectionProps {
+    children?: React__default.ReactNode;
+    paddingX?: string | number;
+    paddingY?: string | number;
+    borderTop?: string;
+    borderColor?: string;
+}
+interface CardTotalContentProps {
+    children?: React__default.ReactNode;
+}
+interface CardTotalLabelProps {
+    children?: React__default.ReactNode;
+    color?: string;
+    fontWeight?: string;
+}
+interface CardTotalAmountProps {
+    children?: React__default.ReactNode;
+    fontSize?: string;
+    fontWeight?: string;
+    color?: string;
+}
+interface CardComponent extends React__default.FC<CardProps> {
+    Container: React__default.FC<CardContainerProps>;
+    Header: React__default.FC<CardHeaderProps>;
+    HeaderContent: React__default.FC<CardHeaderContentProps>;
+    HeaderTitle: React__default.FC<CardHeaderTitleProps>;
+    HeaderTimer: React__default.FC<CardHeaderTimerProps>;
+    Body: React__default.FC<CardBodyProps>;
+    BodyDriver: React__default.FC<CardBodyDriverProps>;
+    BodyImage: React__default.FC<CardBodyImageProps>;
+    BodyInfo: React__default.FC<CardBodyInfoProps>;
+    BodyName: React__default.FC<CardBodyNameProps>;
+    BodySpan: React__default.FC<CardBodySpanProps>;
+    BodyActions: React__default.FC<CardBodyActionsProps>;
+    BodyActionButton: React__default.FC<CardBodyActionButtonProps>;
+    BodyActionIcon: React__default.FC<CardBodyActionIconProps>;
+    Route: React__default.FC<CardRouteProps>;
+    RouteContainer: React__default.FC<CardRouteContainerProps>;
+    RouteItem: React__default.FC<CardRouteItemProps>;
+    Payment: React__default.FC<CardPaymentProps>;
+    PaymentContainer: React__default.FC<CardPaymentContainerProps>;
+    PaymentContent: React__default.FC<CardPaymentContentProps>;
+    PaymentIconContainer: React__default.FC<CardPaymentIconContainerProps>;
+    PaymentDetails: React__default.FC<CardPaymentDetailsProps>;
+    Number: React__default.FC<CardNumberProps>;
+    Type: React__default.FC<CardTypeProps>;
+    TotalSection: React__default.FC<CardTotalSectionProps>;
+    TotalContent: React__default.FC<CardTotalContentProps>;
+    TotalLabel: React__default.FC<CardTotalLabelProps>;
+    TotalAmount: React__default.FC<CardTotalAmountProps>;
+}
+
+interface DynamicComponentProps {
+    children?: React__default.ReactNode;
+    style?: React__default.CSSProperties;
+    className?: string;
+    [key: string]: any;
+}
+declare class StrataComponentFactory {
+    static createComponent(componentName: string, componentData: ComponentNode, designSystem: DesignSystemData): React__default.ComponentType<DynamicComponentProps>;
+    static createSubComponent(componentName: string, componentData: ComponentNode, designSystem: DesignSystemData): React__default.ComponentType<DynamicComponentProps>;
+    private static processAllAttributes;
+    private static resolveAttributesWithVariables;
+    private static resolveCssVariables;
+    private static processHtmlAttributes;
+    private static processInputAttributes;
+    private static processButtonAttributes;
+    private static processImageAttributes;
+    private static processLinkAttributes;
+    private static processTextareaAttributes;
+    private static processVideoAttributes;
+    private static processAudioAttributes;
+    private static processFormAttributes;
+    private static processSelectAttributes;
+    private static processSvgAttributes;
+    private static processCanvasAttributes;
+    private static mergeClassNames;
+    private static cleanAttributes;
+    private static determineHtmlTag;
+    private static resolveComponentStyles;
+    private static kebabToCamelCase;
+    private static camelToKebabCase;
+    static validateComponent(componentData: ComponentNode): {
+        isValid: boolean;
+        errors: string[];
+    };
+    static createDebugComponent(componentName: string, componentData: ComponentNode, designSystem: DesignSystemData): React__default.ComponentType<DynamicComponentProps>;
+}
+
+interface ComponentRegistry {
+    [componentName: string]: React__default.ComponentType<DynamicComponentProps> & {
+        [subComponentName: string]: React__default.ComponentType<DynamicComponentProps>;
+    };
+}
+declare class ComponentRegistryService {
+    private registry;
+    private listeners;
+    private originalToPascalMap;
+    private formatComponentName;
+    testPascalCaseConversion(): void;
+    registerComponent(componentName: string, componentData: ComponentNode, designSystem: DesignSystemData): void;
+    private addNestedComponents;
+    getRegistry(): ComponentRegistry;
+    getComponentMapping(): Map<string, string>;
+    hasComponent(componentName: string): boolean;
+    getComponent(componentName: string): React__default.ComponentType<DynamicComponentProps> | null;
+    syncWithDesignSystem(designSystem: DesignSystemData): void;
+    subscribe(listener: (registry: ComponentRegistry) => void): () => void;
+    private notifyListeners;
+    clear(): void;
+    getPascalCaseName(originalName: string): string;
+}
+declare const strataRegistry: ComponentRegistryService;
+
+declare const useDynamicComponents: () => ComponentRegistry;
+
+declare const useComponents: () => ComponentRegistry;
+
+declare const useComponent: (componentName: string) => (React.ComponentType<DynamicComponentProps> & {
+    [subComponentName: string]: React.ComponentType<DynamicComponentProps>;
+}) | null;
+
+declare const DynamicComponent: React__default.FC<{
+    name: string;
+    children?: React__default.ReactNode;
+    [key: string]: any;
+}>;
+declare const AutoForm: React__default.FC<{
+    formName?: string;
+    children?: React__default.ReactNode;
+    [key: string]: any;
+}>;
+
+export { AutoForm, Card, DefaultCard, DynamicComponent, StrataComponentFactory, StrataDebug, StrataProvider, strataRegistry, useComponent, useComponents, useDynamicComponents, useStrata };
+export type { CardComponent, CardProps, ComponentNode, ComponentProperty, ComponentVariant, CustomDesignSystemData, DesignSystemData, DesignToken, FilterType, LinkedElement, SelectedItem, SelectedType, TokenType };

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACnE,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC"}