flikkui 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/components/charts/shared/ChartLegend/ChartLegendContent.js

@@ -0,0 +1,22 @@
+import { __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+
+/**
+ * Basic ChartLegendContent component - minimal implementation
+ * TODO: Enhance with full legend content functionality when needed
+ */
+var ChartLegendContent = function (_a) {
+    var _b = _a.payload, payload = _b === void 0 ? [] : _b, _c = _a.nameKey, nameKey = _c === void 0 ? 'name' : _c, className = _a.className, props = __rest(_a, ["payload", "nameKey", "className"]);
+    if (!payload || payload.length === 0) {
+        return null;
+    }
+    return (React__default.createElement("div", __assign({ className: "flex flex-wrap gap-4 ".concat(className || '') }, props), payload.map(function (entry, index) {
+        var name = entry[nameKey] || entry.dataKey || "Series ".concat(index + 1);
+        var color = entry.color || '#8884d8';
+        return (React__default.createElement("div", { key: index, className: "flex items-center gap-2" },
+            React__default.createElement("div", { className: "w-3 h-3 rounded", style: { backgroundColor: color } }),
+            React__default.createElement("span", { className: "text-sm text-gray-600" }, name)));
+    })));
+};
+
+export { ChartLegendContent };

package/dist/components/charts/shared/ChartMarker/ChartMarker.js

@@ -0,0 +1,25 @@
+import React__default, { useState } from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { chartMarkerTheme } from './ChartMarker.theme.js';
+
+/**
+ * ChartMarker component for rendering circular data point markers in charts
+ * Supports hover scaling with React state for reliable SVG interactions
+ */
+var ChartMarker = function (_a) {
+    var cx = _a.cx, cy = _a.cy, radius = _a.radius, colorClass = _a.colorClass, className = _a.className, _b = _a.strokeWidth, strokeWidth = _b === void 0 ? 2 : _b, fillColor = _a.fillColor, strokeColor = _a.strokeColor;
+    var theme = chartMarkerTheme;
+    var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
+    // Extract stroke color from colorClass if not provided
+    var extractedStrokeColor = strokeColor || colorClass;
+    var baseClasses = cn(theme.baseStyle, extractedStrokeColor, className);
+    // Calculate hover radius
+    var currentRadius = isHovered ? radius * 1.1 : radius;
+    return (React__default.createElement("g", { className: "chart-marker" },
+        React__default.createElement("circle", { cx: cx, cy: cy, r: currentRadius, className: baseClasses, fill: fillColor || "white", strokeWidth: strokeWidth, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, style: {
+                transition: 'linear 0.2s ease-out',
+                cursor: 'pointer'
+            } })));
+};
+
+export { ChartMarker };

package/dist/components/charts/shared/ChartMarker/ChartMarker.theme.js

@@ -0,0 +1,9 @@
+/**
+ * Default theme for ChartMarker component
+ * Provides consistent styling for chart data point markers
+ */
+var chartMarkerTheme = {
+    baseStyle: "fill-white stroke-2",
+};
+
+export { chartMarkerTheme };

package/dist/components/charts/shared/ChartText/ChartText.js

@@ -0,0 +1,33 @@
+import { __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { chartTextTheme } from './ChartText.theme.js';
+
+/**
+ * ChartText component for consistent typography in charts
+ * Uses fixed Tailwind styling for consistency
+ */
+var ChartText = function (_a) {
+    var children = _a.children, _b = _a.textAnchor, textAnchor = _b === void 0 ? "start" : _b, _c = _a.dominantBaseline, dominantBaseline = _c === void 0 ? "auto" : _c, maxWidth = _a.maxWidth, _d = _a.truncate, truncate = _d === void 0 ? false : _d, _e = _a.rotation, rotation = _e === void 0 ? 0 : _e, className = _a.className, props = __rest(_a, ["children", "textAnchor", "dominantBaseline", "maxWidth", "truncate", "rotation", "className"]);
+    var theme = chartTextTheme;
+    // Truncate text if needed
+    var truncateText = function (text, maxWidth) {
+        // Rough estimate: 6px per character for text-sm
+        if (!maxWidth || text.length <= maxWidth / 6) {
+            return text;
+        }
+        var maxChars = Math.floor(maxWidth / 6) - 3;
+        return text.substring(0, maxChars) + "...";
+    };
+    // Process children to handle truncation
+    var processedChildren = React__default.useMemo(function () {
+        if (!truncate || !maxWidth || typeof children !== "string") {
+            return children;
+        }
+        return truncateText(children, maxWidth);
+    }, [children, truncate, maxWidth]);
+    var x = props.x, y = props.y;
+    return (React__default.createElement("text", __assign({ textAnchor: textAnchor, dominantBaseline: dominantBaseline, className: cn(theme.baseStyle, className), transform: rotation !== 0 && x !== undefined && y !== undefined ? "rotate(".concat(rotation, ", ").concat(x, ", ").concat(y, ")") : undefined }, props), processedChildren));
+};
+
+export { ChartText };

package/dist/components/charts/shared/ChartText/ChartText.theme.js

@@ -0,0 +1,9 @@
+/**
+ * Default theme for ChartText component
+ * Uses fixed Tailwind styling for consistency across charts
+ */
+var chartTextTheme = {
+    baseStyle: "transition-all duration-200 text-xs  text-text-secondary/80 fill-text-secondary/80 font-medium select-none",
+};
+
+export { chartTextTheme };

package/dist/components/charts/shared/ChartTooltip/ChartTooltip.js

@@ -0,0 +1,62 @@
+import { __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { AnimatePresence } from '../../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+import { motion } from '../../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+// Helper function to check if content is MultiSeriesData
+var isMultiSeriesData = function (content) {
+    return content && typeof content === 'object' && 'category' in content && 'series' in content;
+};
+// Component to render multi-series tooltip content
+var MultiSeriesContent = function (_a) {
+    var data = _a.data, containerClassName = _a.containerClassName, categoryClassName = _a.categoryClassName, seriesContainerClassName = _a.seriesContainerClassName, seriesRowClassName = _a.seriesRowClassName, dotClassName = _a.dotClassName, labelClassName = _a.labelClassName, valueClassName = _a.valueClassName;
+    return (React__default.createElement("div", { className: cn("text-left", containerClassName) },
+        React__default.createElement("div", { className: cn("font-medium mb-1", categoryClassName) }, data.category),
+        React__default.createElement("div", { className: cn("space-y-0.5", seriesContainerClassName) }, data.series.map(function (item, index) { return (React__default.createElement("div", { key: index, className: cn("flex items-center justify-between gap-3", seriesRowClassName) },
+            React__default.createElement("div", { className: "flex items-center gap-1" },
+                item.color && (React__default.createElement("div", { className: cn("w-2 h-2 rounded-[2px]", dotClassName), style: { backgroundColor: item.color } })),
+                React__default.createElement("span", { className: cn("text-sm opacity-90", labelClassName) }, item.label || item.key)),
+            React__default.createElement("span", { className: cn("text-sm font-semibold", valueClassName) }, item.value))); }))));
+};
+function ChartTooltip(_a) {
+    var content = _a.content, className = _a.className, _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.position, position = _c === void 0 ? { x: 0, y: 0 } : _c, children = _a.children; _a.chartType; var containerClassName = _a.containerClassName, categoryClassName = _a.categoryClassName, seriesContainerClassName = _a.seriesContainerClassName, seriesRowClassName = _a.seriesRowClassName, dotClassName = _a.dotClassName, labelClassName = _a.labelClassName, valueClassName = _a.valueClassName, tooltipRef = _a.tooltipRef, props = __rest(_a, ["content", "className", "active", "position", "children", "chartType", "containerClassName", "categoryClassName", "seriesContainerClassName", "seriesRowClassName", "dotClassName", "labelClassName", "valueClassName", "tooltipRef"]);
+    return (React__default.createElement(React__default.Fragment, null,
+        children,
+        React__default.createElement(AnimatePresence, null, active && content && (React__default.createElement(motion.div, __assign({ ref: tooltipRef, initial: {
+                opacity: 0,
+                scale: 0.95,
+                x: position.x,
+                y: position.y
+            }, animate: {
+                opacity: 1,
+                scale: 1,
+                x: position.x,
+                y: position.y - 30,
+                transition: {
+                    type: "spring",
+                    stiffness: 400,
+                    damping: 30,
+                    opacity: { duration: 0.15 },
+                    scale: { duration: 0.15 }
+                },
+            }, exit: {
+                opacity: 0,
+                scale: 0.95,
+                x: position.x,
+                y: position.y - 10,
+                transition: {
+                    type: "spring",
+                    stiffness: 300,
+                    damping: 25,
+                    duration: 0.15,
+                },
+            }, className: cn("fixed z-50 bg-black/80 backdrop-blur-sm text-white rounded-lg px-3 py-2 shadow-xl shadow-neutral-900/30 pointer-events-none border-white/50 border-t-[1px]", className), style: {
+                left: 0,
+                top: 0,
+                transform: "translate(-50%, -100%)",
+            } }, props),
+            React__default.createElement("div", { className: cn("whitespace-nowrap text-sm", isMultiSeriesData(content) ? "text-left" : "text-center") }, isMultiSeriesData(content) ? (React__default.createElement(MultiSeriesContent, { data: content, containerClassName: containerClassName, categoryClassName: categoryClassName, seriesContainerClassName: seriesContainerClassName, seriesRowClassName: seriesRowClassName, dotClassName: dotClassName, labelClassName: labelClassName, valueClassName: valueClassName })) : (content)))))));
+}
+
+export { ChartTooltip };

package/dist/components/charts/theme/chart.theme.js

@@ -0,0 +1,73 @@
+/**
+ * Default theme for Chart components
+ * Uses Tailwind classes with CSS variables for consistency with the design system
+ */
+var chartTheme = {
+    baseStyle: {
+        colors: {
+            // Default series colors using your design system colors
+            series: [
+                'fill-[var(--color-primary)] stroke-[var(--color-primary)]', // Primary
+                'fill-[var(--color-warning)] stroke-[var(--color-warning)]', // Warning/Orange
+                'fill-[var(--color-success)] stroke-[var(--color-success)]', // Success/Green
+                'fill-[var(--color-danger)] stroke-[var(--color-danger)]', // Danger/Red
+                'fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]', // Primary lighter
+                'fill-[var(--color-warning-400)] stroke-[var(--color-warning-400)]', // Warning lighter
+                'fill-[var(--color-success-400)] stroke-[var(--color-success-400)]', // Success lighter
+                'fill-[var(--color-danger-400)] stroke-[var(--color-danger-400)]', // Danger lighter
+            ],
+            // Chart infrastructure colors
+            grid: 'stroke-neutral-200',
+            axis: 'stroke-neutral-300',
+            text: 'fill-text-secondary',
+            background: 'fill-white',
+            hover: 'fill-neutral-100',
+            disabled: 'fill-neutral-200',
+        },
+        opacity: {
+            default: 'opacity-100',
+            hover: 'opacity-80',
+            disabled: 'opacity-50',
+        },
+        transitions: {
+            default: 'transition-all duration-200',
+            hover: 'transition-all duration-150',
+        },
+    },
+    variants: {
+        default: {
+            colors: [
+                'fill-[var(--color-primary)] stroke-[var(--color-primary)]',
+                'fill-[var(--color-warning)] stroke-[var(--color-warning)]',
+                'fill-[var(--color-success)] stroke-[var(--color-success)]',
+                'fill-[var(--color-danger)] stroke-[var(--color-danger)]',
+                'fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]',
+                'fill-[var(--color-warning-400)] stroke-[var(--color-warning-400)]',
+                'fill-[var(--color-success-400)] stroke-[var(--color-success-400)]',
+                'fill-[var(--color-danger-400)] stroke-[var(--color-danger-400)]',
+            ],
+        },
+        minimal: {
+            colors: [
+                'fill-neutral-600 stroke-neutral-600',
+                'fill-neutral-500 stroke-neutral-500',
+                'fill-neutral-400 stroke-neutral-400',
+                'fill-neutral-300 stroke-neutral-300',
+                'fill-neutral-700 stroke-neutral-700',
+                'fill-neutral-800 stroke-neutral-800',
+            ],
+        },
+        gradient: {
+            colors: [
+                'fill-[var(--color-primary)] stroke-[var(--color-primary)]',
+                'fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]',
+                'fill-[var(--color-primary-500)] stroke-[var(--color-primary-500)]',
+                'fill-[var(--color-primary-600)] stroke-[var(--color-primary-600)]',
+                'fill-[var(--color-primary-700)] stroke-[var(--color-primary-700)]',
+                'fill-[var(--color-primary-800)] stroke-[var(--color-primary-800)]',
+            ],
+        },
+    },
+};
+
+export { chartTheme };

package/dist/components/charts/types/chart.types.js

@@ -0,0 +1,29 @@
+// Standardized Chart Defaults
+var CHART_DEFAULTS = {
+    // Display options
+    showGrid: true,
+    showXAxis: true,
+    showYAxis: true,
+    showNullValues: true,
+    // Visual properties
+    radius: 4, // For dots, bars, cells
+    strokeWidth: 2,
+    gap: 4, // For bars, cells
+    categoryGap: 16, // For bar categories
+    // Line/Area specific
+    curved: true,
+    curveType: 'monotone',
+    fillOpacity: 0.3,
+    showStroke: true,
+    showDots: true,
+    // Bar specific
+    orientation: 'vertical',
+    // Layout
+    stacked: false,
+    // Theme
+    variant: 'default',
+    // Accessibility
+    enableKeyboardNavigation: true,
+};
+
+export { CHART_DEFAULTS };

package/dist/components/charts/utils/chart-validation.js

@@ -0,0 +1,292 @@
+/**
+ * Safe math operations to prevent division by zero and other edge cases
+ */
+var SafeMath = /** @class */ (function () {
+    function SafeMath() {
+    }
+    /**
+     * Safe division that returns 0 when dividing by zero
+     */
+    SafeMath.divide = function (numerator, denominator, fallback) {
+        if (fallback === void 0) { fallback = 0; }
+        if (denominator === 0 || !isFinite(denominator)) {
+            return fallback;
+        }
+        var result = numerator / denominator;
+        return isFinite(result) ? result : fallback;
+    };
+    /**
+     * Safe percentage calculation
+     */
+    SafeMath.percentage = function (value, total, fallback) {
+        if (fallback === void 0) { fallback = 0; }
+        return this.divide(value * 100, total, fallback);
+    };
+    /**
+     * Safe Math.max that handles empty arrays
+     */
+    SafeMath.max = function (values, fallback) {
+        if (fallback === void 0) { fallback = 0; }
+        if (!Array.isArray(values) || values.length === 0) {
+            return fallback;
+        }
+        var filtered = values.filter(function (v) { return isFinite(v); });
+        return filtered.length > 0 ? Math.max.apply(Math, filtered) : fallback;
+    };
+    /**
+     * Safe Math.min that handles empty arrays
+     */
+    SafeMath.min = function (values, fallback) {
+        if (fallback === void 0) { fallback = 0; }
+        if (!Array.isArray(values) || values.length === 0) {
+            return fallback;
+        }
+        var filtered = values.filter(function (v) { return isFinite(v); });
+        return filtered.length > 0 ? Math.min.apply(Math, filtered) : fallback;
+    };
+    /**
+     * Safe scale calculation for chart positioning
+     */
+    SafeMath.scale = function (value, min, max, targetMin, targetMax) {
+        if (targetMin === void 0) { targetMin = 0; }
+        if (targetMax === void 0) { targetMax = 1; }
+        var range = max - min;
+        if (range === 0) {
+            return targetMin + (targetMax - targetMin) / 2; // Return middle of target range
+        }
+        var ratio = this.divide(value - min, range);
+        return targetMin + ratio * (targetMax - targetMin);
+    };
+    /**
+     * Clamp a value between min and max
+     */
+    SafeMath.clamp = function (value, min, max) {
+        return Math.min(Math.max(value, min), max);
+    };
+    return SafeMath;
+}());
+/**
+ * Validates chart data array
+ */
+function validateChartData(data) {
+    var errors = [];
+    var warnings = [];
+    // Check if data exists
+    if (!data) {
+        errors.push({
+            type: 'data',
+            message: 'Chart data is required but was not provided',
+            field: 'data'
+        });
+        return { isValid: false, errors: errors, warnings: warnings };
+    }
+    // Check if data is an array
+    if (!Array.isArray(data)) {
+        errors.push({
+            type: 'data',
+            message: 'Chart data must be an array',
+            field: 'data'
+        });
+        return { isValid: false, errors: errors, warnings: warnings };
+    }
+    // Check if data is empty
+    if (data.length === 0) {
+        warnings.push({
+            type: 'data',
+            message: 'Chart data array is empty',
+            field: 'data'
+        });
+    }
+    // Validate each data item
+    data.forEach(function (item, index) {
+        if (!item || typeof item !== 'object') {
+            errors.push({
+                type: 'data',
+                message: "Data item at index ".concat(index, " must be an object"),
+                field: "data[".concat(index, "]")
+            });
+            return;
+        }
+        // Check for at least one numeric value
+        var hasNumericValue = Object.values(item).some(function (value) {
+            return typeof value === 'number' && isFinite(value);
+        });
+        if (!hasNumericValue) {
+            warnings.push({
+                type: 'data',
+                message: "Data item at index ".concat(index, " has no valid numeric values"),
+                field: "data[".concat(index, "]")
+            });
+        }
+    });
+    return { isValid: errors.length === 0, errors: errors, warnings: warnings };
+}
+/**
+ * Validates chart configuration
+ */
+function validateChartConfig(config) {
+    var errors = [];
+    var warnings = [];
+    // Check if config exists
+    if (!config) {
+        errors.push({
+            type: 'config',
+            message: 'Chart config is required but was not provided',
+            field: 'config'
+        });
+        return { isValid: false, errors: errors, warnings: warnings };
+    }
+    // Check if config is an object
+    if (typeof config !== 'object') {
+        errors.push({
+            type: 'config',
+            message: 'Chart config must be an object',
+            field: 'config'
+        });
+        return { isValid: false, errors: errors, warnings: warnings };
+    }
+    // Check if config has any keys
+    var configKeys = Object.keys(config);
+    if (configKeys.length === 0) {
+        warnings.push({
+            type: 'config',
+            message: 'Chart config is empty - no data series will be displayed',
+            field: 'config'
+        });
+    }
+    return { isValid: errors.length === 0, errors: errors, warnings: warnings };
+}
+/**
+ * Validates that data and config are compatible
+ */
+function validateDataConfigCompatibility(data, config) {
+    var errors = [];
+    var warnings = [];
+    var configKeys = Object.keys(config);
+    var dataKeys = data.length > 0 ? Object.keys(data[0]) : [];
+    // Check if any config keys exist in data
+    var validKeys = configKeys.filter(function (key) {
+        return dataKeys.includes(key) &&
+            data.some(function (item) { return typeof item[key] === 'number' && isFinite(item[key]); });
+    });
+    if (validKeys.length === 0) {
+        errors.push({
+            type: 'config',
+            message: 'No config keys match valid numeric data fields',
+            field: 'config'
+        });
+    }
+    // Warn about config keys that don't exist in data
+    var missingKeys = configKeys.filter(function (key) { return !dataKeys.includes(key); });
+    missingKeys.forEach(function (key) {
+        warnings.push({
+            type: 'config',
+            message: "Config key \"".concat(key, "\" not found in data"),
+            field: "config.".concat(key)
+        });
+    });
+    return { isValid: errors.length === 0, errors: errors, warnings: warnings };
+}
+/**
+ * Sanitizes chart data by removing invalid entries and normalizing values
+ */
+function sanitizeChartData(data) {
+    if (!Array.isArray(data)) {
+        return [];
+    }
+    return data
+        .filter(function (item) { return item && typeof item === 'object'; })
+        .map(function (item) {
+        var sanitized = {};
+        Object.entries(item).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            if (typeof value === 'number') {
+                // Replace NaN and Infinity with null
+                sanitized[key] = isFinite(value) ? value : null;
+            }
+            else if (typeof value === 'string') {
+                // Keep string values (like names, categories)
+                sanitized[key] = value;
+            }
+            else if (value === null || value === undefined) {
+                // Keep explicit null/undefined
+                sanitized[key] = null;
+            }
+            // Skip other types (objects, arrays, etc.)
+        });
+        return sanitized;
+    });
+}
+/**
+ * Calculates safe min/max values for chart scales
+ */
+function calculateSafeScaleRange(data, config, options) {
+    if (options === void 0) { options = {}; }
+    var propMin = options.minValue, propMax = options.maxValue, _a = options.includeZero, includeZero = _a === void 0 ? true : _a, _b = options.padding, padding = _b === void 0 ? 0.1 : _b;
+    // If both min and max are provided, use them
+    if (propMin !== undefined && propMax !== undefined) {
+        return {
+            min: propMin,
+            max: propMax,
+            hasValidData: true
+        };
+    }
+    var configKeys = Object.keys(config);
+    var allValues = [];
+    // Extract all numeric values
+    data.forEach(function (item) {
+        configKeys.forEach(function (key) {
+            var value = item[key];
+            if (typeof value === 'number' && isFinite(value)) {
+                allValues.push(value);
+            }
+        });
+    });
+    // No valid data found
+    if (allValues.length === 0) {
+        return {
+            min: propMin !== null && propMin !== void 0 ? propMin : 0,
+            max: propMax !== null && propMax !== void 0 ? propMax : 100,
+            hasValidData: false
+        };
+    }
+    var min = propMin !== null && propMin !== void 0 ? propMin : SafeMath.min(allValues);
+    var max = propMax !== null && propMax !== void 0 ? propMax : SafeMath.max(allValues);
+    // Include zero if requested
+    if (includeZero) {
+        min = Math.min(min, 0);
+        max = Math.max(max, 0);
+    }
+    // Add padding if min and max are the same
+    if (min === max) {
+        var absValue = Math.abs(min);
+        var paddingValue = absValue > 0 ? absValue * padding : 1;
+        min -= paddingValue;
+        max += paddingValue;
+    }
+    return { min: min, max: max, hasValidData: true };
+}
+/**
+ * Comprehensive chart validation that combines all checks
+ */
+function validateChart(data, config) {
+    var errors = [];
+    var warnings = [];
+    // Validate data
+    var dataValidation = validateChartData(data);
+    errors.push.apply(errors, dataValidation.errors);
+    warnings.push.apply(warnings, dataValidation.warnings);
+    // Validate config
+    var configValidation = validateChartConfig(config);
+    errors.push.apply(errors, configValidation.errors);
+    warnings.push.apply(warnings, configValidation.warnings);
+    // If basic validation passes, check compatibility
+    if (dataValidation.isValid && configValidation.isValid) {
+        var compatibilityValidation = validateDataConfigCompatibility(data, config);
+        errors.push.apply(errors, compatibilityValidation.errors);
+        warnings.push.apply(warnings, compatibilityValidation.warnings);
+    }
+    return { isValid: errors.length === 0, errors: errors, warnings: warnings };
+}
+
+export { SafeMath, calculateSafeScaleRange, sanitizeChartData, validateChart, validateChartConfig, validateChartData, validateDataConfigCompatibility };