@pubflow/react 0.1.0

package/dist/types/components/AdvancedFilter.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Advanced Filter Component for React
+ *
+ * Provides advanced filtering capabilities for BridgeList
+ */
+import React from 'react';
+import { FilterOperator, FilterDefinition } from '@pubflow/core';
+/**
+ * Filter field definition
+ */
+export interface FilterField {
+    /**
+     * Field name
+     */
+    name: string;
+    /**
+     * Display label
+     */
+    label: string;
+    /**
+     * Field type
+     */
+    type: 'text' | 'number' | 'date' | 'boolean' | 'select';
+    /**
+     * Options for select type
+     */
+    options?: {
+        label: string;
+        value: any;
+    }[];
+    /**
+     * Allowed operators
+     */
+    operators?: FilterOperator[];
+}
+/**
+ * Advanced filter texts
+ */
+export interface AdvancedFilterTexts {
+    title?: string;
+    addFilter?: string;
+    resetFilters?: string;
+    apply?: string;
+    cancel?: string;
+    field?: string;
+    operator?: string;
+    value?: string;
+    filterButton?: string;
+    activeFilters?: string;
+    noActiveFilters?: string;
+    selectField?: string;
+    selectOperator?: string;
+    enterValue?: string;
+}
+/**
+ * Advanced filter colors
+ */
+export interface AdvancedFilterColors {
+    primary?: string;
+    secondary?: string;
+    background?: string;
+    surface?: string;
+    text?: string;
+    textSecondary?: string;
+    border?: string;
+    error?: string;
+    success?: string;
+}
+/**
+ * Advanced filter props
+ */
+export interface AdvancedFilterProps {
+    /**
+     * Available filter fields
+     */
+    fields: FilterField[];
+    /**
+     * Current filters
+     */
+    filters: FilterDefinition[];
+    /**
+     * Add filter callback
+     */
+    onAddFilter: (filter: FilterDefinition) => void;
+    /**
+     * Remove filter callback
+     */
+    onRemoveFilter: (index: number) => void;
+    /**
+     * Reset filters callback
+     */
+    onResetFilters: () => void;
+    /**
+     * Container style
+     */
+    style?: React.CSSProperties;
+    /**
+     * Custom texts
+     */
+    texts?: AdvancedFilterTexts;
+    /**
+     * Custom colors
+     */
+    colors?: AdvancedFilterColors;
+    /**
+     * Custom CSS class
+     */
+    className?: string;
+}
+/**
+ * Advanced Filter component
+ */
+export declare function AdvancedFilter({ fields, filters, onAddFilter, onRemoveFilter, onResetFilters, style, texts, colors, className }: AdvancedFilterProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/BridgeForm/index.d.ts

@@ -0,0 +1,6 @@
+import { BridgeFormProps } from './types';
+/**
+ * BridgeForm component
+ */
+export declare function BridgeForm<T extends Record<string, any>>({ schema, mode, entityConfig, instanceId, initialData, id, fields, layout, onSuccess, onError, onCancel, labels, theme, mainColor, className, style, customStyles }: BridgeFormProps<T>): import("react/jsx-runtime").JSX.Element;
+export * from './types';

package/dist/types/components/BridgeForm/styles.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Styles for BridgeForm component
+ */
+/**
+ * Base styles for the form and its elements
+ */
+export declare const baseStyles: {
+    form: string;
+    formLight: string;
+    formDark: string;
+    fieldsContainer: string;
+    field: string;
+    label: string;
+    labelLight: string;
+    labelDark: string;
+    description: string;
+    descriptionLight: string;
+    descriptionDark: string;
+    input: string;
+    inputLight: string;
+    inputDark: string;
+    textarea: string;
+    textareaLight: string;
+    textareaDark: string;
+    select: string;
+    selectLight: string;
+    selectDark: string;
+    checkboxContainer: string;
+    checkbox: string;
+    checkboxLight: string;
+    checkboxDark: string;
+    checkboxLabel: string;
+    checkboxLabelLight: string;
+    checkboxLabelDark: string;
+    radioContainer: string;
+    radioOption: string;
+    radio: string;
+    radioLight: string;
+    radioDark: string;
+    radioLabel: string;
+    radioLabelLight: string;
+    radioLabelDark: string;
+    error: string;
+    errorLight: string;
+    errorDark: string;
+    buttonsContainer: string;
+    button: string;
+    primaryButton: string;
+    primaryButtonDark: string;
+    secondaryButton: string;
+    secondaryButtonDark: string;
+    loading: string;
+};
+/**
+ * Combines base styles with theme-specific styles
+ * @param base Base style
+ * @param light Light theme style
+ * @param dark Dark theme style
+ * @param isDarkMode Whether dark mode is active
+ * @returns Combined style string
+ */
+export declare function getThemedStyle(base: string, light: string, dark: string, isDarkMode: boolean): string;

package/dist/types/components/BridgeForm/types.d.ts

@@ -0,0 +1,128 @@
+/**
+ * Types for BridgeForm component
+ */
+import { ReactNode, CSSProperties } from 'react';
+import { z } from 'zod';
+import { EntityConfig } from '@pubflow/core';
+/**
+ * Field configuration for BridgeForm
+ */
+export interface FieldConfig {
+    /** Field name (must exist in the schema) */
+    name: string;
+    /** Custom label (defaults to formatted field name) */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Help text description */
+    description?: string;
+    /** Field type */
+    type?: 'text' | 'number' | 'email' | 'password' | 'select' | 'checkbox' | 'radio' | 'date' | 'textarea' | 'file' | 'color' | 'range' | 'hidden';
+    /** Options for select/radio fields */
+    options?: Array<{
+        value: any;
+        label: string;
+    }>;
+    /** Field width (%, px, etc.) */
+    width?: string;
+    /** Whether the field should be hidden */
+    hidden?: boolean;
+    /** Whether the field should be disabled */
+    disabled?: boolean;
+    /** Default value */
+    defaultValue?: any;
+    /** Whether the field should have autofocus */
+    autoFocus?: boolean;
+    /** Custom CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+    /** Custom render function */
+    render?: (props: FieldRenderProps) => ReactNode;
+}
+/**
+ * Props for custom field rendering
+ */
+export interface FieldRenderProps {
+    /** Field configuration */
+    field: FieldConfig;
+    /** Current field value */
+    value: any;
+    /** Function to change value */
+    onChange: (value: any) => void;
+    /** Function for blur event */
+    onBlur: () => void;
+    /** Validation error if any */
+    error?: string;
+    /** Whether the field is required */
+    required: boolean;
+    /** Whether the field is disabled */
+    disabled: boolean;
+    /** Whether dark mode is active */
+    isDarkMode: boolean;
+}
+/**
+ * BridgeForm component props
+ */
+export interface BridgeFormProps<T extends Record<string, any>> {
+    /** Zod schema for validation */
+    schema: z.ZodType<T>;
+    /** Form mode */
+    mode: 'create' | 'update' | 'partial';
+    /** Entity configuration for BridgeApi */
+    entityConfig: EntityConfig;
+    /** Pubflow instance ID */
+    instanceId?: string;
+    /** Initial data (for update/partial mode) */
+    initialData?: Partial<T>;
+    /** Record ID (for update/partial mode) */
+    id?: string;
+    /** Fields to display (all schema fields by default) */
+    fields?: FieldConfig[];
+    /** Layout configuration */
+    layout?: {
+        /** Number of columns or responsive configuration */
+        columns?: number | {
+            sm?: number;
+            md?: number;
+            lg?: number;
+        };
+        /** Gap between fields */
+        gap?: string;
+    };
+    /** Success callback */
+    onSuccess?: (data: T) => void;
+    /** Error callback */
+    onError?: (error: Error) => void;
+    /** Cancel callback */
+    onCancel?: () => void;
+    /** Custom labels */
+    labels?: {
+        /** Submit button text */
+        submit?: string;
+        /** Cancel button text */
+        cancel?: string;
+        /** Required field indicator text */
+        required?: string;
+    };
+    /** Theme */
+    theme?: 'light' | 'dark' | 'auto';
+    /** Main color for the form (buttons, focus rings, etc.) */
+    mainColor?: string;
+    /** Custom CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+    /** Custom styles for form elements */
+    customStyles?: {
+        form?: string;
+        field?: string;
+        label?: string;
+        input?: string;
+        select?: string;
+        checkbox?: string;
+        radio?: string;
+        button?: string;
+        error?: string;
+    };
+}

package/dist/types/components/BridgeForm/utils.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Utility functions for BridgeForm
+ */
+import { z } from 'zod';
+import { FieldConfig } from './types';
+/**
+ * Formats a string to title case with spaces
+ * @param str String to format
+ * @returns Formatted string
+ */
+export declare function formatFieldName(str: string): string;
+/**
+ * Determines the field type based on Zod schema and field config
+ * @param schema Zod schema for the field
+ * @param configType Type specified in field config
+ * @returns Determined field type
+ */
+export declare function determineFieldType(schema: z.ZodTypeAny, configType?: string): string;
+/**
+ * Checks if a field is required based on Zod schema
+ * @param schema Zod schema for the field
+ * @returns Whether the field is required
+ */
+export declare function isFieldRequired(schema: z.ZodTypeAny): boolean;
+/**
+ * Gets options for select/radio fields from Zod enum schema
+ * @param schema Zod schema for the field
+ * @returns Options array or undefined
+ */
+export declare function getOptionsFromSchema(schema: z.ZodTypeAny): Array<{
+    value: any;
+    label: string;
+}> | undefined;
+/**
+ * Gets responsive grid classes based on layout configuration
+ * @param layout Layout configuration
+ * @returns CSS class string
+ */
+export declare function getGridClasses(layout?: {
+    columns?: number | {
+        sm?: number;
+        md?: number;
+        lg?: number;
+    };
+    gap?: string;
+}): string;
+/**
+ * Extracts field configs from Zod schema
+ * @param schema Zod schema
+ * @returns Array of field configs
+ */
+export declare function getFieldsFromSchema<T extends Record<string, any>>(schema: z.ZodType<T>): FieldConfig[];
+/**
+ * Adjusts a color by a percentage
+ * @param color Hex color code
+ * @param percent Percentage to adjust (-100 to 100)
+ * @param alpha Whether to adjust opacity instead of brightness
+ * @returns Adjusted color
+ */
+export declare function adjustColor(color: string, percent: number, alpha?: boolean): string;

package/dist/types/components/BridgeList.d.ts

@@ -0,0 +1,157 @@
+/**
+ * Bridge List Component for React
+ *
+ * Provides a list component with sorting, filtering, and pagination
+ */
+import React from 'react';
+import { EntityData, EntityConfig, FilterDefinition } from '@pubflow/core';
+import { FilterField } from './AdvancedFilter';
+/**
+ * Bridge List render item props
+ */
+export interface BridgeListRenderItemProps<T> {
+    item: T;
+    index: number;
+    isSelected: boolean;
+    onSelect: () => void;
+}
+/**
+ * Bridge List texts
+ */
+export interface BridgeListTexts {
+    searchPlaceholder?: string;
+    offlineText?: string;
+    noResults?: string;
+    loading?: string;
+    error?: string;
+    loadMore?: string;
+    showingResults?: string;
+    of?: string;
+    results?: string;
+}
+/**
+ * Bridge List colors
+ */
+export interface BridgeListColors {
+    primary?: string;
+    secondary?: string;
+    background?: string;
+    surface?: string;
+    text?: string;
+    textSecondary?: string;
+    border?: string;
+    error?: string;
+    success?: string;
+}
+/**
+ * Bridge List layout configuration
+ */
+export interface BridgeListLayout {
+    advancedFilterWidth?: number;
+    contentWidth?: number;
+}
+/**
+ * Bridge List props
+ */
+export interface BridgeListProps<T extends EntityData> {
+    /**
+     * Function to render each item
+     */
+    renderItem: (props: BridgeListRenderItemProps<T>) => React.ReactNode;
+    /**
+     * Entity configuration
+     */
+    entityConfig: EntityConfig;
+    /**
+     * Show pagination
+     */
+    showPagination?: boolean;
+    /**
+     * Show search
+     */
+    showSearch?: boolean;
+    /**
+     * Show filters
+     */
+    showFilters?: boolean;
+    /**
+     * Show advanced filters
+     */
+    showAdvancedFilters?: boolean;
+    /**
+     * Advanced filter fields
+     */
+    advancedFilterFields?: FilterField[];
+    /**
+     * Layout configuration
+     */
+    layout?: BridgeListLayout;
+    /**
+     * Key extractor function
+     */
+    keyExtractor?: (item: T) => string;
+    /**
+     * Item press handler
+     */
+    onItemPress?: (item: T) => void;
+    /**
+     * Container style
+     */
+    style?: React.CSSProperties;
+    /**
+     * Loading component
+     */
+    loadingComponent?: React.ReactNode;
+    /**
+     * Empty component
+     */
+    emptyComponent?: React.ReactNode;
+    /**
+     * Error component
+     */
+    errorComponent?: React.ReactNode;
+    /**
+     * Pagination component
+     */
+    paginationComponent?: React.ReactNode;
+    /**
+     * Search component
+     */
+    searchComponent?: React.ReactNode;
+    /**
+     * Filter component
+     */
+    filterComponent?: React.ReactNode;
+    /**
+     * Advanced filter component
+     */
+    advancedFilterComponent?: React.ReactNode;
+    /**
+     * Custom texts
+     */
+    texts?: BridgeListTexts;
+    /**
+     * Custom colors
+     */
+    colors?: BridgeListColors;
+    /**
+     * Show offline indicator
+     */
+    showOfflineIndicator?: boolean;
+    /**
+     * Pubflow instance ID
+     */
+    instanceId?: string;
+    /**
+     * Custom CSS class
+     */
+    className?: string;
+    limit?: number;
+    orderBy?: string;
+    orderDir?: 'asc' | 'desc';
+    initialFilters?: FilterDefinition[];
+}
+/**
+ * Component for displaying data in a list with sorting, filtering, and pagination
+ */
+export declare function BridgeList<T extends EntityData>({ renderItem, showPagination, showSearch, showFilters, showAdvancedFilters, advancedFilterFields, layout, keyExtractor, onItemPress, style, loadingComponent, emptyComponent, errorComponent, paginationComponent, searchComponent, filterComponent, advancedFilterComponent, texts, colors, showOfflineIndicator, className, ...crudOptions }: BridgeListProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/BridgeTable.d.ts

@@ -0,0 +1,110 @@
+/**
+ * Bridge Table Component for React
+ *
+ * Provides a component for displaying data in a table with sorting, filtering, and pagination
+ */
+import React from 'react';
+import { EntityData } from '@pubflow/core';
+import { UseBridgeCrudOptions } from '../hooks/useBridgeCrud';
+/**
+ * Column definition
+ */
+export interface ColumnDef<T> {
+    /**
+     * Column key
+     */
+    key: string;
+    /**
+     * Column header
+     */
+    header: React.ReactNode;
+    /**
+     * Cell renderer
+     */
+    cell?: (item: T, index: number) => React.ReactNode;
+    /**
+     * Whether the column is sortable
+     */
+    sortable?: boolean;
+    /**
+     * Whether the column is filterable
+     */
+    filterable?: boolean;
+    /**
+     * Column width
+     */
+    width?: string | number;
+    /**
+     * Column alignment
+     */
+    align?: 'left' | 'center' | 'right';
+}
+/**
+ * Bridge Table props
+ */
+export interface BridgeTableProps<T extends EntityData> extends UseBridgeCrudOptions<T> {
+    /**
+     * Column definitions
+     */
+    columns: ColumnDef<T>[];
+    /**
+     * Whether to show pagination
+     */
+    showPagination?: boolean;
+    /**
+     * Whether to show search
+     */
+    showSearch?: boolean;
+    /**
+     * Whether to show filters
+     */
+    showFilters?: boolean;
+    /**
+     * Row key function
+     */
+    rowKey?: (item: T) => string;
+    /**
+     * Row click handler
+     */
+    onRowClick?: (item: T) => void;
+    /**
+     * Table class name
+     */
+    className?: string;
+    /**
+     * Loading component
+     */
+    loadingComponent?: React.ReactNode;
+    /**
+     * Empty component
+     */
+    emptyComponent?: React.ReactNode;
+    /**
+     * Error component
+     */
+    errorComponent?: React.ReactNode;
+    /**
+     * Pagination component
+     */
+    paginationComponent?: React.ReactNode;
+    /**
+     * Search component
+     */
+    searchComponent?: React.ReactNode;
+    /**
+     * Filter component
+     */
+    filterComponent?: React.ReactNode;
+    /**
+     * Search placeholder
+     */
+    searchPlaceholder?: string;
+    /**
+     * Actions renderer
+     */
+    actions?: (item: T) => React.ReactNode;
+}
+/**
+ * Component for displaying data in a table with sorting, filtering, and pagination
+ */
+export declare function BridgeTable<T extends EntityData>({ columns, showPagination, showSearch, showFilters, rowKey, onRowClick, className, loadingComponent, emptyComponent, errorComponent, paginationComponent, searchComponent, filterComponent, searchPlaceholder, actions, ...crudOptions }: BridgeTableProps<T>): string | number | true | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;

package/dist/types/components/BridgeView.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Bridge View Component for React
+ *
+ * Provides a component for conditional rendering based on authentication and user type
+ */
+import React from 'react';
+/**
+ * Bridge View props
+ */
+export interface BridgeViewProps {
+    /**
+     * Content to render if conditions are met
+     */
+    children: React.ReactNode;
+    /**
+     * User types allowed to view the content
+     */
+    allowedTypes?: string | string[];
+    /**
+     * Content to render if conditions are not met
+     */
+    fallback?: React.ReactNode;
+    /**
+     * Loading component
+     */
+    loadingComponent?: React.ReactNode;
+    /**
+     * Callback when user is not authorized
+     */
+    onUnauthorized?: () => void;
+    /**
+     * Pubflow instance ID
+     */
+    instanceId?: string;
+}
+/**
+ * Component for conditional rendering based on authentication and user type
+ */
+export declare function BridgeView({ children, allowedTypes, fallback, loadingComponent, onUnauthorized, instanceId }: BridgeViewProps): import("react/jsx-runtime").JSX.Element;