DEV Community

Cüneyt Çakar
Cüneyt Çakar

Posted on

@spexop/react v0.3.1: Building with Primitives-First Philosophy

#webdev #opensource #react #typescript 
--- title: "@spexop/react v0.3.1: Building with Primitives-First Philosophy" published: true tags: react, typescript, webdev, opensource --- # @spexop/react v0.3.1: Building with Primitives-First Philosophy I'm excited to share the latest release of @spexop/react - a React component library that emphasizes mastering fundamentals before building complexity. ## The Primitives-First Approach Instead of jumping straight to complex components, Spexop encourages starting with 5 grid primitives: - Grid - GridItem - Stack - Container - Spacer Master these, then compose them into sophisticated interfaces. This leads to more maintainable code and better design consistency. ## What's New in v0.3.1 ### 13 New Components **Data Components**
Enter fullscreen mode Exit fullscreen mode


tsx
import { DataTable } from '@spexop/react';

columns={columns}
data={data}
sortable
filterable
pagination
/>

 - **Feedback Components**
Enter fullscreen mode Exit fullscreen mode


tsx
import { Alert, Spinner, Progress } from '@spexop/react';

Operation successful!


 - **Typography Components**
Enter fullscreen mode Exit fullscreen mode


tsx
import { Heading, Text, Link } from '@spexop/react';

Page Title
Body text
Documentation

 ### 33+ React Hooks 20+ new hooks for common patterns:
Enter fullscreen mode Exit fullscreen mode


tsx
// Storage
const [value, setValue] = useLocalStorage('key', defaultValue);

// Browser APIs
const isOnline = useOnline();
const size = useWindowSize();

// Interaction
const ref = useClickOutside(() => setIsOpen(false));

// Utilities
const debouncedValue = useDebounce(value, 500);
const [copied, copy] = useCopyToClipboard();

 ### 100% Documentation Every component (all 59!) now includes: - Comprehensive README - USAGE-GUIDE with practical examples - Component tests - TypeScript definitions ## The Design Philosophy Spexop follows 7 core principles: 1. **Primitives before patterns** - Master the grid first 2. **Borders before shadows** - Clean 2px borders, not heavy shadows 3. **Typography before decoration** - Use font weight for hierarchy 4. **Tokens before magic numbers** - Design system consistency 5. **Composition before complexity** - Build from simple parts 6. **Standards before frameworks** - Web fundamentals 7. **Accessibility before aesthetics** - WCAG AA+ compliance ## Enhanced Components ### Carousel Full-featured slideshow with: - Touch/swipe support - Keyboard navigation - Thumbnails - Auto-play - Lazy loading ### CodeBlock v3 Redesigned with: - Custom syntax highlighting - Multi-framework support (React, Vue, Angular) - Theme integration - Performance optimizations ## Installation
Enter fullscreen mode Exit fullscreen mode


bash
npm install @spexop/react@0.3.1 @spexop/theme @spexop/icons

 ## Breaking Changes in v0.3.1 Animation imports changed:
Enter fullscreen mode Exit fullscreen mode


tsx
// ❌ Old
import { FadeIn } from '@spexop/react/animations';

// ✅ New
import { FadeIn } from '@spexop/react';

 See [Migration Guide](https://github.com/spexop-ui/spexop-design-system/blob/main/packages/react/MIGRATION-GUIDE.md) for details. ## Development Status This is an active development release. While components follow design principles and include comprehensive documentation, the library is still evolving. ## Links in v0.3.1 - npm: <https://www.npmjs.com/package/@spexop/react> - GitHub: <https://github.com/spexop-ui/spexop-design-system> - Documentation: <https://spexop.com> Feedback and contributions welcome! 🙌
Enter fullscreen mode Exit fullscreen mode


bash

Top comments (0)