@tomaszjarosz/react-visualizers 0.2.14 → 0.4.0

package/README.md

@@ -3,12 +3,12 @@
 Interactive algorithm and data structure visualizers for React. Perfect for learning, teaching, and interview preparation.
 
 [![npm version](https://img.shields.io/npm/v/@tomaszjarosz/react-visualizers)](https://www.npmjs.com/package/@tomaszjarosz/react-visualizers)
-[![Storybook](https://img.shields.io/badge/Storybook-Live%20Demo-ff4785?logo=storybook&logoColor=white)](https://6934a2d9e17d1e509a92c935-rdicbxowdr.chromatic.com/)
+[![Storybook](https://img.shields.io/badge/Storybook-Live%20Demo-ff4785?logo=storybook&logoColor=white)](https://6934a2d9e17d1e509a92c935-oajoxaxuir.chromatic.com/)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 ## Features
 
-- **36 interactive visualizers** covering algorithms, data structures, and distributed systems
+- **51 interactive visualizers** covering algorithms, data structures, and distributed systems
 - **Interview Mode** with built-in questions, scoring, hints, and explanations
 - **Step-by-step animations** with playback controls (play, pause, step forward/back)
 - **Code highlighting** showing the current line being executed
@@ -19,7 +19,7 @@ Interactive algorithm and data structure visualizers for React. Perfect for lear
 
 ## Live Demo
 
-**[View all visualizers in Storybook](https://6934a2d9e17d1e509a92c935-rdicbxowdr.chromatic.com/)**
+**[View all visualizers in Storybook](https://6934a2d9e17d1e509a92c935-oajoxaxuir.chromatic.com/)**
 
 ## Installation
 
@@ -55,7 +55,7 @@ function App() {
 
 ## Available Visualizers
 
-### Algorithms (6)
+### Algorithms (8)
 
 | Visualizer | Description |
 |------------|-------------|
@@ -65,8 +65,10 @@ function App() {
 | `GraphVisualizer` | DFS and BFS traversal |
 | `DijkstraVisualizer` | Shortest path with distance relaxation |
 | `DPVisualizer` | Dynamic programming table (Fibonacci) |
+| `AStarVisualizer` | A* pathfinding with f(n) = g(n) + h(n) |
+| `TopologicalSortVisualizer` | Kahn's algorithm for DAG ordering |
 
-### Data Structures (10)
+### Data Structures (12)
 
 | Visualizer | Description |
 |------------|-------------|
@@ -80,6 +82,8 @@ function App() {
 | `LinkedHashMapVisualizer` | HashMap + insertion order linked list |
 | `EnumSetVisualizer` | Bit vector implementation |
 | `ListComparisonVisualizer` | ArrayList vs LinkedList performance |
+| `LRUCacheVisualizer` | Least Recently Used cache with HashMap + DLL |
+| `SegmentTreeVisualizer` | Range sum queries with O(log n) updates |
 
 ### Concurrency (4)
 
@@ -90,12 +94,15 @@ function App() {
 | `CopyOnWriteVisualizer` | Copy-on-write pattern for reads |
 | `ImmutableCollectionsVisualizer` | Java 9+ immutable collections |
 
-### Advanced Data Structures (2)
+### Advanced Data Structures (5)
 
 | Visualizer | Description |
 |------------|-------------|
 | `BloomFilterVisualizer` | Probabilistic set membership |
 | `BTreeVisualizer` | B-Tree with node splitting |
+| `TrieVisualizer` | Prefix tree for autocomplete, spell checking |
+| `UnionFindVisualizer` | Disjoint set union with path compression |
+| `SkipListVisualizer` | Probabilistic sorted list with O(log n) operations |
 
 ### Distributed Systems (2)
 
@@ -111,7 +118,7 @@ function App() {
 | `GCVisualizer` | JVM generational garbage collection |
 | `SQLJoinVisualizer` | SQL JOIN operations (INNER, LEFT, RIGHT, FULL) |
 
-### Interview Mode (10)
+### Interview Mode (15)
 
 Interview visualizers include built-in questions with multiple choice answers, hints, and detailed explanations. Perfect for interview preparation.
 
@@ -127,6 +134,11 @@ Interview visualizers include built-in questions with multiple choice answers, h
 | `BTreeInterviewVisualizer` | Node splitting, disk-based storage, order |
 | `ConsistentHashingInterviewVisualizer` | Virtual nodes, rebalancing, hot spots |
 | `RaftInterviewVisualizer` | Leader election, log replication, safety |
+| `TrieInterviewVisualizer` | Prefix operations, autocomplete, space complexity |
+| `UnionFindInterviewVisualizer` | Path compression, union by rank, cycle detection |
+| `AStarInterviewVisualizer` | f=g+h, admissible heuristics, Manhattan distance |
+| `SkipListInterviewVisualizer` | Probabilistic levels, expected complexity, Redis |
+| `LinkedListInterviewVisualizer` | Two-pointer techniques, cycle detection, reversal |
 
 ## Interview Mode Usage
 
@@ -253,27 +265,99 @@ import type {
 
 ## Development
 
+This project uses **bun** as the package manager.
+
 ```bash
 # Clone the repository
 git clone https://github.com/tomaszjarosz/tomaszjarosz-ui.git
 cd tomaszjarosz-ui/packages/react-visualizers
 
 # Install dependencies
-pnpm install
+bun install
 
-# Run Storybook locally
-pnpm run storybook
+# Run Storybook locally (port 6006)
+bun run storybook
 
 # Build library
-pnpm run build
+bun run build
 
 # Type check
-pnpm run typecheck
+bun run typecheck
+
+# Run unit tests
+bun run test
+
+# Run tests in watch mode
+bun run test:watch
+```
+
+## Storybook
+
+All visualizers have interactive stories in [Storybook](https://storybook.js.org/):
+
+- **Local:** `bun run storybook` → http://localhost:6006
+- **Live Demo:** https://6934a2d9e17d1e509a92c935-oajoxaxuir.chromatic.com/
+
+Stories are located in `src/visualizers/stories/` directory.
+
+## Chromatic (Visual Testing)
+
+This project uses [Chromatic](https://www.chromatic.com/) for visual regression testing and Storybook hosting.
+
+- **Automatic deployment** on every push to `main` branch
+- **Visual diff detection** for UI changes
+- **Storybook hosting** at the live demo URL
+
+Chromatic runs via GitHub Actions (`.github/workflows/chromatic.yml`).
+
+## Project Structure
+
+```
+packages/react-visualizers/
+├── src/
+│   ├── index.ts              # Main exports
+│   ├── styles.css            # Tailwind entry point
+│   ├── shared/               # Shared components & hooks
+│   │   ├── ControlPanel.tsx
+│   │   ├── CodePanel.tsx
+│   │   ├── useVisualizerPlayback.ts
+│   │   ├── useInterviewMode.ts
+│   │   └── *.test.ts         # Unit tests
+│   └── visualizers/          # All visualizers
+│       ├── SortingVisualizer.tsx
+│       ├── HashMapVisualizer.tsx
+│       └── stories/          # Storybook stories
+├── dist/                     # Build output
+├── .storybook/               # Storybook config
+├── package.json
+└── vite.config.ts
+```
+
+## Publishing
+
+```bash
+# Bump version
+npm version patch  # or minor/major
+
+# Build
+bun run build
+
+# Publish to npm
+npm publish --access public
+
+# Push version tag
+git push && git push --tags
 ```
 
 ## Contributing
 
-Contributions are welcome! Please read the contributing guidelines before submitting a PR.
+Contributions are welcome! Please:
+
+1. Fork the repository
+2. Create a feature branch
+3. Add tests for new functionality
+4. Ensure all tests pass (`bun run test`)
+5. Submit a pull request
 
 ## License