@stfrigerio/sito-template 0.1.7 → 0.1.8

package/dist/index.js

@@ -1199,7 +1199,8 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
 
 var styles$a = {"searchContainer":"SearchBar-module_searchContainer__TdM1w","searchInputWrapper":"SearchBar-module_searchInputWrapper__kCZLU","searchIcon":"SearchBar-module_searchIcon__IIxEu","searchInput":"SearchBar-module_searchInput__V4gkE","clearButton":"SearchBar-module_clearButton__7fNIY","filterSelect":"SearchBar-module_filterSelect__xIVE4","resultsDropdown":"SearchBar-module_resultsDropdown__yh6NF","loadingState":"SearchBar-module_loadingState__4gidK","emptyState":"SearchBar-module_emptyState__RbI4s","spinner":"SearchBar-module_spinner__PMc6-","resultsGroups":"SearchBar-module_resultsGroups__U24DC","resultGroup":"SearchBar-module_resultGroup__SoTQH","groupHeader":"SearchBar-module_groupHeader__bFRHA","groupIcon":"SearchBar-module_groupIcon__9ENM-","groupTitle":"SearchBar-module_groupTitle__ZekZs","groupCount":"SearchBar-module_groupCount__PQIqw","groupResults":"SearchBar-module_groupResults__xTF52","resultItem":"SearchBar-module_resultItem__VaKKy","highlighted":"SearchBar-module_highlighted__Q-3sH","resultTitle":"SearchBar-module_resultTitle__i1uqL","resultSubtitle":"SearchBar-module_resultSubtitle__LQOJ1","resultMeta":"SearchBar-module_resultMeta__Kmkrn","resultContent":"SearchBar-module_resultContent__TzVzL","highlight":"SearchBar-module_highlight__Q3PSP"};
 
-const filterOptions = [
+// Default filter options for backwards compatibility
+const defaultFilterOptions = [
     { value: 'all', label: 'All', icon: FiSearch },
     { value: 'projects', label: 'Projects', icon: FiFolder },
     { value: 'clients', label: 'Clients', icon: FiUsers },
@@ -1207,16 +1208,18 @@ const filterOptions = [
     { value: 'interactions', label: 'Interactions', icon: FiMessageSquare },
     { value: 'team', label: 'Team', icon: FiUserPlus },
 ];
-const entityIcons = {
+const defaultEntityIcons = {
     projects: FiFolder,
     clients: FiUsers,
     contacts: FiBook,
     interactions: FiMessageSquare,
     team: FiUserPlus,
 };
-const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch, onResultClick, onClear, debounceDelay = 300, minSearchLength = 2, showFilter = true, enableKeyboardShortcut = true }) => {
+const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch, onResultClick, onClear, debounceDelay = 300, minSearchLength = 2, showFilter = true, enableKeyboardShortcut = true, filterOptions: customFilterOptions, entityIcons: customEntityIcons }) => {
+    const filterOptions = customFilterOptions ?? defaultFilterOptions;
+    const entityIcons = customEntityIcons ?? defaultEntityIcons;
     const [query, setQuery] = React.useState('');
-    const [filter, setFilter] = React.useState('all');
+    const [filter, setFilter] = React.useState(filterOptions[0]?.value ?? 'all');
     const [results, setResults] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(false);
     const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
@@ -1545,15 +1548,16 @@ function SiJira (props) {
 
 var styles$6 = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O"};
 
-const tabs = [
+// Default tabs for backwards compatibility
+const defaultTabs = [
     { id: 'details', icon: FiInfo, label: 'Dettagli' },
     { id: 'github', icon: FiGithub, label: 'GitHub' },
     { id: 'jira', icon: SiJira, label: 'Jira' },
     { id: 'functional', icon: FiInfo, label: 'Analisi funzionale' }
 ];
-const Tabs = ({ activeTab, onTabChange }) => {
-    return (jsxRuntime.jsx("div", { className: styles$6.tabs, children: tabs.map((tab) => {
-            const Icon = tab.icon;
+const Tabs = ({ activeTab, onTabChange, tabs: customTabs, className = '' }) => {
+    const tabs = customTabs ?? defaultTabs;
+    return (jsxRuntime.jsx("div", { className: `${styles$6.tabs} ${className}`, children: tabs.map((tab) => {
             const isActive = activeTab === tab.id;
             return (jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$6.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: {
                             rotate: isActive ? [0, -10, 10, -5, 5, 0] : 0,
@@ -1562,7 +1566,7 @@ const Tabs = ({ activeTab, onTabChange }) => {
                                 duration: 0.5,
                                 ease: 'easeInOut'
                             }
-                        }, children: jsxRuntime.jsx(Icon, { className: styles$6.tabIcon }) }), jsxRuntime.jsx("span", { children: tab.label })] }, tab.id));
+                        }, children: tab.icon && (typeof tab.icon === 'function' ? (jsxRuntime.jsx("span", { className: styles$6.tabIcon, children: React.createElement(tab.icon) })) : (jsxRuntime.jsx("span", { className: styles$6.tabIcon, children: tab.icon }))) }), jsxRuntime.jsx("span", { children: tab.label })] }, tab.id));
         }) }));
 };
 
@@ -2246,11 +2250,22 @@ const BooleansHeatmap = ({ data, habitName, width = 800, height = 200, habitColo
 var styles$1 = {"container":"SunburstChart-module_container__w1ZYc","title":"SunburstChart-module_title__T6Ak7","chart":"SunburstChart-module_chart__BFM6E","tooltip":"SunburstChart-module_tooltip__TuTAN"};
 
 const COLOR_PALETTE = [
-    '#d4af37', '#FFD700', '#FFA500', '#FF8C00',
-    '#FF6347', '#DC143C', '#8B4513', '#A0522D',
-    '#DEB887', '#F4A460', '#D2691E', '#CD853F'
+    '#6366f1', '#8b5cf6', '#06b6d4', '#10b981',
+    '#f59e0b', '#ef4444', '#ec4899', '#84cc16',
+    '#f97316', '#3b82f6', '#14b8a6', '#f59e0b'
 ];
-const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Chart', tagColors = {} }) => {
+// Calculate text color based on background luminance for optimal contrast
+const getTextColor$1 = (backgroundColor) => {
+    const color = d3__namespace.color(backgroundColor);
+    if (!color)
+        return '#ffffff';
+    const rgb = color.rgb();
+    // Calculate relative luminance using WCAG formula
+    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+    // Return white text for dark backgrounds, black for light backgrounds
+    return luminance > 0.5 ? '#000000' : '#ffffff';
+};
+const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Chart', tagColors = {}, unit = 'items', centerLabel }) => {
     const svgRef = React.useRef(null);
     const colorMap = React.useRef(new Map()).current;
     const colorIndex = React.useRef(0);
@@ -2293,7 +2308,8 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             .startAngle(d => d.x0)
             .endAngle(d => d.x1)
             .innerRadius(d => Math.sqrt(d.y0))
-            .outerRadius(d => Math.sqrt(d.y1));
+            .outerRadius(d => Math.sqrt(d.y1))
+            .cornerRadius(3);
         const tooltip = d3__namespace.select('body').append('div')
             .attr('class', styles$1.tooltip)
             .style('opacity', 0)
@@ -2312,11 +2328,20 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             .attr('stroke', 'var(--bg-primary)')
             .attr('stroke-width', 2)
             .style('cursor', 'pointer')
+            .style('filter', 'drop-shadow(0 1px 3px rgba(0,0,0,0.12))')
             .on('mouseover', function (event, d) {
+            const hoverArc = d3__namespace.arc()
+                .startAngle(d => d.x0)
+                .endAngle(d => d.x1)
+                .innerRadius(d => Math.sqrt(d.y0) - 2)
+                .outerRadius(d => Math.sqrt(d.y1) + 4)
+                .cornerRadius(3);
             d3__namespace.select(this)
                 .transition()
-                .duration(200)
-                .style('opacity', 0.8);
+                .duration(150)
+                .attr('d', d => hoverArc(d))
+                .style('filter', 'drop-shadow(0 2px 8px rgba(0,0,0,0.2))')
+                .style('opacity', 0.9);
             tooltip.transition()
                 .duration(200)
                 .style('opacity', 1);
@@ -2330,10 +2355,12 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                 .style('left', (event.pageX + 10) + 'px')
                 .style('top', (event.pageY - 28) + 'px');
         })
-            .on('mouseout', function () {
+            .on('mouseout', function (event, d) {
             d3__namespace.select(this)
                 .transition()
-                .duration(200)
+                .duration(150)
+                .attr('d', d => arc(d))
+                .style('filter', 'drop-shadow(0 1px 3px rgba(0,0,0,0.12))')
                 .style('opacity', 1);
             tooltip.transition()
                 .duration(500)
@@ -2343,9 +2370,32 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             const angle = d.x1 - d.x0;
             return angle > 0.15 && d.depth <= 2;
         };
-        g.selectAll('text')
+        // Calculate average background color for center text contrast
+        const allSegments = nodes.filter(d => d.depth === 1);
+        const avgColor = allSegments.length > 0 ? d3__namespace.interpolateRgb.gamma(2.2)(...allSegments.map(d => getColor(d.data.name, 1)))(0.5) : '#ffffff';
+        const centerTextColor = getTextColor$1(avgColor);
+        // Add center text
+        g.append('text')
+            .attr('text-anchor', 'middle')
+            .attr('alignment-baseline', 'middle')
+            .attr('font-size', '18px')
+            .attr('font-weight', 'bold')
+            .attr('fill', centerTextColor)
+            .style('text-shadow', centerTextColor === '#ffffff' ? '0 1px 3px rgba(0,0,0,0.5)' : '0 1px 3px rgba(255,255,255,0.5)')
+            .text(centerLabel || data.name || 'Total');
+        g.append('text')
+            .attr('text-anchor', 'middle')
+            .attr('alignment-baseline', 'middle')
+            .attr('y', 20)
+            .attr('font-size', '14px')
+            .attr('font-weight', '500')
+            .attr('fill', centerTextColor)
+            .style('text-shadow', centerTextColor === '#ffffff' ? '0 1px 2px rgba(0,0,0,0.4)' : '0 1px 2px rgba(255,255,255,0.4)')
+            .text(`${(root.value || 0).toLocaleString()} ${unit}`);
+        g.selectAll('text.segment-label')
             .data(nodes.filter(d => d.depth > 0 && d.value && d.value > 0 && shouldDisplayLabel(d)))
             .enter().append('text')
+            .attr('class', 'segment-label')
             .attr('transform', d => {
             const angle = (d.x0 + d.x1) / 2;
             const radius = (Math.sqrt(d.y0) + Math.sqrt(d.y1)) / 2;
@@ -2355,11 +2405,32 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
         })
             .attr('text-anchor', 'middle')
             .attr('alignment-baseline', 'middle')
-            .attr('font-size', '12px')
-            .attr('fill', 'var(--text-inverse)')
-            .attr('font-weight', 'var(--font-medium)')
+            .attr('font-size', d => d.depth === 1 ? '13px' : '11px')
+            .attr('fill', d => {
+            let ancestor = d;
+            while (ancestor.depth > 1 && ancestor.parent) {
+                ancestor = ancestor.parent;
+            }
+            const segmentColor = getColor(ancestor.data.name, d.depth);
+            return getTextColor$1(segmentColor);
+        })
+            .attr('font-weight', '600')
             .style('pointer-events', 'none')
-            .text(d => d.data.name.substring(0, 10));
+            .style('text-shadow', d => {
+            let ancestor = d;
+            while (ancestor.depth > 1 && ancestor.parent) {
+                ancestor = ancestor.parent;
+            }
+            const segmentColor = getColor(ancestor.data.name, d.depth);
+            const textColor = getTextColor$1(segmentColor);
+            // Use contrasting shadow color
+            const shadowColor = textColor === '#ffffff' ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.5)';
+            return `0 1px 2px ${shadowColor}`;
+        })
+            .text(d => {
+            const maxLength = d.depth === 1 ? 12 : 8;
+            return d.data.name.substring(0, maxLength);
+        });
         return () => {
             tooltip.remove();
         };
@@ -2370,12 +2441,23 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
 var styles = {"container":"PieChart-module_container__tXjbe","title":"PieChart-module_title__61o0R","chartContainer":"PieChart-module_chartContainer__uLmOz","chart":"PieChart-module_chart__3nqON","legend":"PieChart-module_legend__rAWgh","legendItem":"PieChart-module_legendItem__Nb031","legendColor":"PieChart-module_legendColor__fLuv9","legendLabel":"PieChart-module_legendLabel__xbjBr","legendValue":"PieChart-module_legendValue__h2WS2","tooltip":"PieChart-module_tooltip__140RU"};
 
 const DEFAULT_COLORS = [
-    '#d4af37', '#FFD700', '#FFA500', '#FF8C00',
-    '#FF6347', '#DC143C', '#8B4513', '#A0522D',
-    '#DEB887', '#F4A460', '#D2691E', '#CD853F',
-    '#B8860B', '#DAA520', '#F0E68C', '#BDB76B'
+    '#6366f1', '#8b5cf6', '#06b6d4', '#10b981',
+    '#f59e0b', '#ef4444', '#ec4899', '#84cc16',
+    '#f97316', '#3b82f6', '#8b5cf6', '#14b8a6',
+    '#f59e0b', '#ef4444', '#06b6d4', '#10b981'
 ];
-const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', showLegend = true }) => {
+// Calculate text color based on background luminance for optimal contrast
+const getTextColor = (backgroundColor) => {
+    const color = d3__namespace.color(backgroundColor);
+    if (!color)
+        return '#ffffff';
+    const rgb = color.rgb();
+    // Calculate relative luminance using WCAG formula
+    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+    // Return white text for dark backgrounds, black for light backgrounds
+    return luminance > 0.5 ? '#000000' : '#ffffff';
+};
+const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', showLegend = true, unit = 'items', centerLabel }) => {
     const svgRef = React.useRef(null);
     const radius = Math.min(width, height) / 2 - 20;
     React.useEffect(() => {
@@ -2389,8 +2471,9 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
             .value(d => d.value)
             .sort(null);
         const arc = d3__namespace.arc()
-            .innerRadius(0)
-            .outerRadius(radius);
+            .innerRadius(radius * 0.4)
+            .outerRadius(radius)
+            .cornerRadius(4);
         const labelArc = d3__namespace.arc()
             .innerRadius(radius * 0.7)
             .outerRadius(radius * 0.7);
@@ -2408,13 +2491,19 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
             .attr('d', d => arc(d))
             .attr('fill', (d, i) => d.data.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length])
             .attr('stroke', 'var(--bg-primary)')
-            .attr('stroke-width', 2)
+            .attr('stroke-width', 3)
             .style('cursor', 'pointer')
+            .style('filter', 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))')
             .on('mouseover', function (event, d) {
+            const hoverArc = d3__namespace.arc()
+                .innerRadius(radius * 0.4)
+                .outerRadius(radius * 1.05)
+                .cornerRadius(4);
             d3__namespace.select(this)
                 .transition()
                 .duration(200)
-                .style('opacity', 0.8);
+                .attr('d', d => hoverArc(d))
+                .style('filter', 'drop-shadow(0 4px 12px rgba(0,0,0,0.25))');
             tooltip.transition()
                 .duration(200)
                 .style('opacity', 1);
@@ -2427,27 +2516,59 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
                 .style('left', (event.pageX + 10) + 'px')
                 .style('top', (event.pageY - 28) + 'px');
         })
-            .on('mouseout', function () {
+            .on('mouseout', function (event, d) {
             d3__namespace.select(this)
                 .transition()
                 .duration(200)
-                .style('opacity', 1);
+                .attr('d', d => arc(d))
+                .style('filter', 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))');
             tooltip.transition()
                 .duration(500)
                 .style('opacity', 0);
         });
-        arcs.filter(d => (d.endAngle - d.startAngle) > 0.3)
+        // Calculate average background color for center text contrast
+        const avgColor = data.length > 0 ? d3__namespace.interpolateRgb.gamma(2.2)(...data.map((d, i) => d.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length]))(0.5) : '#ffffff';
+        const centerTextColor = getTextColor(avgColor);
+        // Add center text for donut
+        g.append('text')
+            .attr('text-anchor', 'middle')
+            .attr('alignment-baseline', 'middle')
+            .attr('font-size', '20px')
+            .attr('font-weight', 'bold')
+            .attr('fill', centerTextColor)
+            .style('text-shadow', centerTextColor === '#ffffff' ? '0 1px 3px rgba(0,0,0,0.5)' : '0 1px 3px rgba(255,255,255,0.5)')
+            .text(centerLabel || 'Total');
+        g.append('text')
+            .attr('text-anchor', 'middle')
+            .attr('alignment-baseline', 'middle')
+            .attr('y', 22)
+            .attr('font-size', '16px')
+            .attr('font-weight', '600')
+            .attr('fill', centerTextColor)
+            .style('text-shadow', centerTextColor === '#ffffff' ? '0 1px 2px rgba(0,0,0,0.4)' : '0 1px 2px rgba(255,255,255,0.4)')
+            .text(`${total.toLocaleString()} ${unit}`);
+        arcs.filter(d => (d.endAngle - d.startAngle) > 0.2)
             .append('text')
             .attr('transform', d => `translate(${labelArc.centroid(d)})`)
             .attr('text-anchor', 'middle')
             .attr('alignment-baseline', 'middle')
-            .attr('font-size', '12px')
-            .attr('fill', 'var(--text-inverse)')
-            .attr('font-weight', 'var(--font-semibold)')
+            .attr('font-size', '13px')
+            .attr('fill', (d, i) => {
+            const segmentColor = d.data.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+            return getTextColor(segmentColor);
+        })
+            .attr('font-weight', '600')
             .style('pointer-events', 'none')
+            .style('text-shadow', (d, i) => {
+            const segmentColor = d.data.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+            const textColor = getTextColor(segmentColor);
+            // Use contrasting shadow color
+            const shadowColor = textColor === '#ffffff' ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.4)';
+            return `0 1px 2px ${shadowColor}`;
+        })
             .text(d => {
             const percentage = ((d.data.value / total) * 100);
-            return percentage > 5 ? `${percentage.toFixed(1)}%` : '';
+            return percentage > 8 ? `${percentage.toFixed(0)}%` : '';
         });
         return () => {
             tooltip.remove();