@kubit-ui-web/react-charts 1.11.0 → 1.11.2

package/CHANGELOG.md

@@ -0,0 +1,269 @@
+# @kubit-ui-web/react-charts
+
+## 1.11.2
+
+### Patch Changes
+
+- Add mouse event handlers to Bar component for tooltip support
+
+  PR: #21
+
+## 1.11.1
+
+### Patch Changes
+
+- Add changesets and update packages
+
+  PR: #20
+
+## Changelog
+
+All notable changes to this project will be documented in this file.
+
+This project uses [Changesets](https://github.com/changesets/changesets) for automated version management and changelog generation. The changelog is automatically updated when releases are published.
+
+The format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+---
+
+## [1.5.0] - 2025-11-19
+
+### Added
+
+#### Error Handling System
+
+- **PieChart Error Accumulator**: Implemented comprehensive error accumulation system for PieChart components
+  - Added error validation for canvas dimensions (width and height must be > 0)
+  - Added dataKey existence validation in dataset
+  - Added validation for segment values (numeric, non-negative)
+  - Added validation for segment names (non-empty required property)
+  - Added validation for total values (must be > 0)
+  - Added radius validation (must be positive number)
+  - Added innerRadius validation (must be non-negative number)
+  - Added innerRadius < radius constraint validation
+  - Implemented `onErrors` callback prop for error handling
+  - Added error builders: `buildPieDataKeyNotFoundError`, `buildEmptyDataArrayError`, `buildInvalidTotalError`, `buildSegmentValueError`, `buildSegmentNegativeValueError`, `buildInvalidGroupError`, `buildInvalidRadiusError`, `buildInvalidInnerRadiusError`, `buildInnerRadiusOutOfRangeError`
+  - Added error types: `PIE_CHART_CONTEXT_ERROR`, `PIE_CHART_PATH_ERROR`, `PIE_CHART_SEGMENT_ERROR`
+  - Added PieChart-specific error messages and constants
+
+- **Interactive Error Handling Story**: Added comprehensive Storybook story demonstrating PieChart error handling
+  - Real-time error detection visualization with error panel
+  - Multiple error scenarios demonstration (missing dataKey, empty data, negative values, invalid values, missing names, zero totals)
+  - Interactive UI showing error count and categorization by component type
+  - Fallback UI demonstration for error states
+
+- **Chart Constants**: Extended chart defaults with PieChart-specific constants
+  - Added `PIE_CHART_DEFAULTS` for radius percentage and minimum segments
+  - Added `PIE_CHART_FALLBACK_DATA` for fallback data keys, segment names, and values
+
+### Changed
+
+#### Performance Optimizations
+
+- **useEffect Dependencies Optimization**: Optimized React hooks across chart components
+  - BarChart: Optimized `barChartPath.tsx` and `barChartSeparator.tsx` dependencies by extracting stable primitive values
+  - LineChart: Optimized `lineChartPath.tsx`, `lineChartSeparator.tsx`, and `lineChartProjection.tsx` dependencies
+  - Extracted computed values (numeric conversions, array accesses) outside useEffect to ensure stable references
+  - Removed unnecessary function dependencies (`addError`) from dependency arrays
+
+#### Documentation
+
+- **Storybook Argtypes**: Standardized `onErrors` prop descriptions across all chart components
+  - Updated BarChart argtypes with consistent error callback documentation
+  - Updated LineChart argtypes with consistent error callback documentation
+  - Added PieChart argtypes with comprehensive error callback documentation
+  - Unified documentation format across all chart types
+
+## [1.4.0] - 2025-11-18
+
+### Added
+
+#### CI/CD Enhancements
+
+- **Chromatic Visual Regression Testing Integration**: Automated visual regression testing in CI/CD pipeline
+  - Added Chromatic build and publish steps to auto-publish GitHub Actions workflow
+  - Integrated visual testing with automatic change acceptance during releases
+  - Enhanced release process to include Storybook visual regression validation
+  - Ensures design system consistency and catches visual regressions before production
+
+### Changed
+
+#### Security & Configuration
+
+- **Environment Variable Security**: Improved token management and security practices
+  - Replaced hardcoded Chromatic project token with environment variable (`$CHROMATIC_PROJECT_TOKEN`)
+  - Enhanced GitHub Actions workflow to use secrets for sensitive tokens
+  - Updated workflow documentation with comprehensive secret configuration guide
+  - Improved error handling and notifications for missing or invalid tokens
+
+#### Developer Experience
+
+- **Enhanced Release Notifications**: Improved CI/CD feedback and status reporting
+  - Updated success notifications to include Chromatic publication status
+  - Enhanced error notifications with Chromatic-specific troubleshooting guidance
+  - Added comprehensive secret configuration documentation
+  - Improved workflow status visibility for visual regression testing
+
+### Infrastructure
+
+- **GitHub Actions Workflow Updates**: Enhanced automated release pipeline
+  - Added Storybook build step specifically for Chromatic integration
+  - Implemented automatic visual regression testing during releases
+  - Enhanced workflow resilience with proper error handling for Chromatic steps
+  - Updated release process documentation with new requirements
+
+## [1.3.0] - 2025-11-17
+
+### Added
+
+#### Logger System
+
+- **Centralized Logging Utility**: New logging system with configurable log levels (debug, info, warn, error)
+  - Production-safe logging (automatically disabled in production builds)
+  - Configurable logger with customizable prefix and minimum log level
+  - SSR-compatible environment detection using globalThis
+  - Tree-shakable implementation optimized for build tools
+
+#### SSR (Server-Side Rendering) Support
+
+- **Complete SSR Compatibility**: New utilities for server-side rendering support
+  - Safe browser API access utilities (`safeWindow`, `safeDocument`, `safeQuerySelector`)
+  - Environment detection functions (`isBrowser`, `isServer`)
+  - Safe execution wrappers with fallback support (`safeExecute`, `safeExecuteWithFallback`)
+  - SVG creation utilities compatible with server environments (`createSVGElement`)
+  - Safe `getComputedStyle` access for server-side rendering (`safeGetComputedStyle`)
+
+## [1.2.0] - 2025-11-14
+
+### Added
+
+#### Error Management System
+
+- **Centralized Error Accumulator**: Implemented a higher-order function with closures for centralized error handling across chart components
+  - Creates isolated error state per chart instance using `Map<string, ChartError[]>`
+  - Provides `addError`, `getAccumulatedErrors`, and `clearErrors` functions
+  - State maintained in closure (not React state) to avoid unnecessary re-renders
+  - Supports multiple internal components reporting errors centrally
+
+#### Chart Component Enhancements
+
+- **LineChart Error Integration**:
+  - Modified `buildLineContextValue` to include error accumulator functions
+  - Updated `LineChartContextType` with new error handling methods
+  - Child components can now report errors via context
+  - Replaced existing `useEffect` error handling with accumulated error reporting
+
+- **BarChart Error Integration**:
+  - Modified `buildBarContextValues` to include error accumulator functions
+  - Updated `BarChartContextType` with new error handling methods
+  - Consistent implementation with LineChart for unified error management
+  - Maintains backward compatibility with existing `onErrors` callbacks
+
+#### Utility Functions
+
+- **Error Validation System**:
+  - Chart-specific error builders for LineChart and BarChart in `src/utils/buildErrors/charts/`
+  - Comprehensive error messages for different error scenarios
+  - Type-safe error definitions and validation
+  - Centralized chart defaults in `src/charts/constants/chartDefaults.ts`
+
+#### Developer Experience
+
+- **Enhanced Testing**:
+  - Added comprehensive test suites for `createErrorAccumulator` utility
+  - Added test cases for LineChart and BarChart error integration
+  - Updated existing error handling tests to cover new functionality
+  - All error accumulator test cases passing
+
+- **Documentation & Stories**:
+  - Added Storybook stories demonstrating error handling
+  - JSDoc comments for all public error handling APIs
+  - Self-documenting code with clear variable/function names
+  - Enhanced TypeScript type definitions
+
+### Technical Details
+
+- **Compound Components Pattern**: Foundation for scalable error management across all chart components with multiple internal components (XAxis, YAxis, Path, Separator, etc.) reporting errors centrally
+- **Performance Optimized**: Closure-based state management prevents React re-renders while maintaining full compatibility
+- **Backward Compatible**: 100% compatibility with existing `onErrors` callback implementations
+- **Independent Instances**: Each chart instance maintains its own isolated error accumulator
+
+### Testing
+
+- ✅ Unit tests for error accumulator utility
+- ✅ Integration tests for LineChart error handling
+- ✅ Integration tests for BarChart error handling
+- ✅ Existing error callback compatibility tests
+- ✅ Performance validation (no unnecessary re-renders)
+- ✅ ESLint and code quality checks passing
+
+## [1.1.0] - 2025-11-12
+
+### Updated
+
+- **Testing Mocks**: Refactored `ResizeObserver` mock implementation in `zoomArea.test.js` to use a class-based approach for better clarity and maintainability.
+- **Hexagon & Pentagon Tests**: Updated imports in `hexagon.test.tsx` and `pentagon.test.tsx` to ensure proper mocking and testing of shape point calculations.
+- **Vitest Imports**: Standardized Vitest imports across test files for consistency.
+- **Storybook**: versions updated to latest compatible versions for improved documentation experience.
+
+## [1.0.0] - 2025-10-23
+
+🎉 **Official Release** - First stable version of Kubit React Charts library with comprehensive charting components and full TypeScript support.
+
+### Added
+
+#### Core Chart Components
+
+- **BarChart**: Full-featured bar chart component with horizontal and vertical orientations
+- **LineChart**: Interactive line chart with smooth curves and data point highlighting
+- **PieChart**: Responsive pie chart with customizable segments and labels
+
+#### Interactive Features
+
+- **Hover Effects**: Built-in hover states for all chart elements with `useHover` hook
+- **Focus Management**: Keyboard navigation support with `useFocus` hook
+- **Zoom Functionality**: Interactive zoom area component for detailed data exploration
+
+#### SVG Components Library
+
+- **AxisChart**: Configurable X and Y axis components with custom tick formatting
+- **Bar**: Reusable bar elements with animation support
+- **ChartText**: Text rendering component with automatic positioning
+- **Line**: SVG line components with smooth path generation
+- **Node**: Interactive data point components
+- **Path**: Custom SVG path rendering utilities
+- **Plot**: Main plotting area component
+- **SvgContainer**: Responsive SVG wrapper with viewBox management
+- **Tick**: Customizable axis tick components
+
+#### Utility Functions
+
+- **Data Processing**: Functions for coordinate calculation, data fingerprinting, and axis data generation
+- **Text Rendering**: Advanced text bounds calculation and space adjustment utilities
+- **Styling**: CSS gradient to SVG conversion and className utilities
+- **Positioning**: Comprehensive coordinate system and tick positioning utilities
+- **Error Handling**: Built-in error validation and user-friendly error messages
+
+#### Developer Experience
+
+- **TypeScript Support**: Full TypeScript definitions for all components and utilities
+- **Storybook Documentation**: Interactive component documentation with live examples
+- **Testing Suite**: Comprehensive test coverage with Vitest and custom render utilities
+- **Modern Build System**: Vite-based build with optimized bundle output
+
+#### Configuration & Tooling
+
+- **ESLint Configuration**: Modern ESLint setup with TypeScript support
+- **Prettier Integration**: Consistent code formatting across the project
+- **Babel Configuration**: Optimized JavaScript compilation
+- **Stylelint**: CSS/SCSS linting configuration
+- **HTML Validation**: Built-in HTML validation for generated markup
+
+### Technical Details
+
+- Built with React 18+ and TypeScript 5+
+- D3.js integration for mathematical calculations
+- Responsive design with CSS Grid and Flexbox
+- Accessibility features following WCAG guidelines
+- Tree-shakable modular architecture
+- Support for both CommonJS and ES modules

package/README.md

@@ -62,6 +62,12 @@
 
 ## Installation
 
+### pnpm (Recommended)
+
+```bash
+pnpm add @kubit-ui-web/react-charts
+```
+
 ### NPM
 
 ```bash
@@ -377,19 +383,28 @@ This pattern enables:
 
 ```bash
 # Start Storybook in development mode
-yarn start
+pnpm start
 
 # Build library for production
-yarn dist
+pnpm dist
 
 # Run tests with coverage
-yarn test
+pnpm test
 
 # Lint code with ESLint
-yarn eslint
+pnpm eslint
+
+# Format code
+pnpm prettier
 
 # Build Storybook for production
-yarn build
+pnpm build
+
+# Changeset commands (for maintainers)
+pnpm changeset              # Create a changeset manually
+pnpm changeset:version      # Version packages
+pnpm changeset:publish      # Publish to NPM
+pnpm changeset:status       # Check changeset status
 
 # Run accessibility tests
 yarn storybook:axe

package/dist/cjs/charts/barChart/barChart.js

@@ -1,13 +1 @@
-import { BarChartStructure } from './barChartStructure';
-import { BarChartPath } from './fragments/barChartPath';
-import { BarChartSeparator } from './fragments/barChartSeparator';
-import { BarChartXAxis } from './fragments/barChartXAxis';
-import { BarChartYAxis } from './fragments/barChartYAxis';
-const BarChart = Object.assign(BarChartStructure, {
-    Path: BarChartPath,
-    Separator: BarChartSeparator,
-    XAxis: BarChartXAxis,
-    YAxis: BarChartYAxis,
-});
-export { BarChart };
-export * from './barChart.type';
+const e=require(`./fragments/barChartPath.js`),t=require(`./fragments/barChartXAxis.js`),n=require(`./fragments/barChartYAxis.js`),r=require(`./barChartStructure.js`),i=require(`./fragments/barChartSeparator.js`);var a=Object.assign(r.BarChartStructure,{Path:e.BarChartPath,Separator:i.BarChartSeparator,XAxis:t.BarChartXAxis,YAxis:n.BarChartYAxis});exports.BarChart=a;

package/dist/cjs/charts/barChart/barChartStructure.js

@@ -1,80 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, useMemo } from 'react';
-import { SvgContainer } from '../../components/svgContainer/svgContainer';
-import { useId } from '../../hooks/useId/useId';
-import { useResponsiveCanvas } from '../../hooks/useResponsiveCanvas/useResponsiveCanvas';
-import { DefaultCanvasConfig } from '../../types/canvas.type';
-import { createErrorAccumulator } from '../../utils/createErrorAccumulator';
-import { getDataFingerprint } from '../../utils/getDataFingerprint/getDataFingerprint';
-import { BarChartContext } from './context/barChartContext';
-import { buildBarContextValue } from './context/buildBarContextValues';
-import { BarChartXAxis } from './fragments/barChartXAxis';
-import { BarChartYAxis } from './fragments/barChartYAxis';
-import { countBarChildren } from './utils/countBarChildren';
-export const BarChartStructure = ({ canvasConfig = DefaultCanvasConfig, caption, children, classNames, data, dataTestId: dataTestIdProp = 'bar-chart', gapBetweenBars = 0, height = '100%', onErrors, orientation, pKey, role, tabIndex, width = '100%', ...props }) => {
-    const dataTestId = useId(dataTestIdProp);
-    // Use the responsive canvas hook for dimension management
-    const { parsedCanvas, parsedCanvasExtraSpace, viewBox } = useResponsiveCanvas({
-        canvasConfig,
-        dataTestId,
-        height,
-        width,
-    });
-    const parsedCanvasWidth = parsedCanvas.width;
-    const parsedCanvasHeight = parsedCanvas.height;
-    // count how many of bar children exists
-    const barChildrenCount = countBarChildren(children);
-    const secureGap = gapBetweenBars * 2;
-    // Set the default axis for the chart
-    const defaultAxis = [
-        _jsx(BarChartXAxis, {}, "default-x-axis"),
-        _jsx(BarChartYAxis, {}, "default-y-axis"),
-    ];
-    const arrayChildren = (Children.toArray(children) || []);
-    const chidrenWithDefaultAxis = defaultAxis.concat(arrayChildren);
-    const maxValue = Math.max(parsedCanvasWidth, parsedCanvasHeight, parsedCanvasExtraSpace ?? 0);
-    const ajustedX = parsedCanvasWidth / maxValue;
-    const ajustedY = parsedCanvasHeight / maxValue;
-    const errorAccumulator = useMemo(() => createErrorAccumulator(onErrors), [onErrors]);
-    // Create a fingerprint of the data to avoid unnecessary contextValue updates
-    const dataFingerprint = getDataFingerprint(data);
-    // Build the context value
-    const contextValue = useMemo(() => {
-        // Clear previous errors before building new context
-        errorAccumulator.clearErrors();
-        return buildBarContextValue({
-            addError: (errorType, error) => {
-                errorAccumulator.addError(errorType, error);
-            },
-            ajustedX,
-            ajustedY,
-            canvasHeight: parsedCanvasHeight,
-            canvasWidth: parsedCanvasWidth,
-            children: chidrenWithDefaultAxis,
-            data,
-            gapBetweenBars: secureGap,
-            orientation,
-            pKey,
-            viewBox,
-        });
-    }, [
-        parsedCanvasHeight,
-        parsedCanvasWidth,
-        dataFingerprint,
-        pKey,
-        orientation,
-        errorAccumulator.addError,
-    ]);
-    return (_jsx(SvgContainer, { caption: caption, className: classNames, dataTestId: dataTestId, height: height, role: role, tabIndex: tabIndex, viewBox: viewBox, width: width, ...props, children: _jsx(BarChartContext.Provider, { value: {
-                ...contextValue,
-                barChildrenCount,
-                canvasExtraSpace: parsedCanvasExtraSpace,
-                canvasHeight: parsedCanvasHeight,
-                canvasWidth: parsedCanvasWidth,
-                data,
-                dataTestId,
-                gapBetweenBars,
-                orientation,
-                pKey,
-            }, children: children }) }));
-};
+const e=require(`../../components/svgContainer/svgContainer.js`),t=require(`../../hooks/useId/useId.js`),n=require(`../../hooks/useResponsiveCanvas/useResponsiveCanvas.js`),r=require(`../../types/canvas.type.js`),i=require(`../../utils/createErrorAccumulator/createErrorAccumulator.js`),a=require(`../../utils/getDataFingerprint/getDataFingerprint.js`),o=require(`./context/barChartContext.js`),s=require(`./utils/countBarChildren.js`),c=require(`./fragments/barChartXAxis.js`),l=require(`./fragments/barChartYAxis.js`),u=require(`./context/buildBarContextValues.js`);let d=require(`react`),f=require(`react/jsx-runtime`);exports.BarChartStructure=({canvasConfig:p=r.DefaultCanvasConfig,caption:m,children:h,classNames:g,data:_,dataTestId:v=`bar-chart`,gapBetweenBars:y=0,height:b=`100%`,onErrors:x,orientation:S,pKey:C,role:w,tabIndex:T,width:E=`100%`,...D})=>{let O=t.useId(v),{parsedCanvas:k,parsedCanvasExtraSpace:A,viewBox:j}=n.useResponsiveCanvas({canvasConfig:p,dataTestId:O,height:b,width:E}),M=k.width,N=k.height,P=s.countBarChildren(h),F=y*2,I=[(0,f.jsx)(c.BarChartXAxis,{},`default-x-axis`),(0,f.jsx)(l.BarChartYAxis,{},`default-y-axis`)],L=d.Children.toArray(h)||[],R=I.concat(L),z=Math.max(M,N,A??0),B=M/z,V=N/z,H=(0,d.useMemo)(()=>i.createErrorAccumulator(x),[x]),U=(0,d.useMemo)(()=>(H.clearErrors(),u.buildBarContextValue({addError:(e,t)=>{H.addError(e,t)},ajustedX:B,ajustedY:V,canvasHeight:N,canvasWidth:M,children:R,data:_,gapBetweenBars:F,orientation:S,pKey:C,viewBox:j})),[N,M,a.getDataFingerprint(_),C,S,H.addError]);return(0,f.jsx)(e.SvgContainer,{caption:m,className:g,dataTestId:O,height:b,role:w,tabIndex:T,viewBox:j,width:E,...D,children:(0,f.jsx)(o.BarChartContext.Provider,{value:{...U,barChildrenCount:P,canvasExtraSpace:A,canvasHeight:N,canvasWidth:M,data:_,dataTestId:O,gapBetweenBars:y,orientation:S,pKey:C},children:h})})};

package/dist/cjs/charts/barChart/context/barChartContext.js

@@ -1,2 +1 @@
-import { createContext } from 'react';
-export const BarChartContext = createContext({});
+const e=(0,require(`react`).createContext)({});exports.BarChartContext=e;