fix(vite): add library mode build, declare React external, document C…

[BernardOnuh]

Description

Fixes issue by adding proper Vite library build configuration and resolving three critical packaging issues:

1. No library mode build - npm run build produced HTML app instead of redistributable library
2. React not declared external - caused "multiple React instances" errors in consumer apps
3. No CSS setup documentation - consumers couldn't use Tailwind utilities

Problems Fixed

1. ❌ No build.lib Entry

• Before: npm run build → dist/index.html (app bundle)
• After: npm run build → dist/sorokit-ui.es.js + dist/sorokit-ui.cjs.js (library bundle)
• Impact: Package couldn't be published to npm; consumers couldn't use it

2. ❌ React Not Declared External

• Before: React bundled inside library

  // dist/sorokit-ui.es.js includes entire React
  // Consumer app also has React
  // Result: Two React instances, hooks break

• After: React declared external

  // dist/sorokit-ui.es.js imports React
  import React from 'react'
  // Consumer provides React
  // Result: Single React instance, everything works

• Impact: "Multiple React instances" errors in consumer apps

3. ❌ No CSS/Tailwind Documentation

• Before: No guidance on CSS setup for consumers
• After: Complete CSS setup documentation with 3 options:
  • Tailwind CSS (recommended)
  • CSS Modules (alternative)
  • Custom styling (override)
• Impact: Consumers didn't know how to import styles

Changes

• ✅ Add build.lib configuration to vite.config.ts
• ✅ Add rollupOptions.external for React dependencies
• ✅ Create vite.lib.config.ts for dedicated library builds
• ✅ Create src/components/index.ts for clean exports
• ✅ Update package.json with proper export fields
• ✅ Add tsconfig.lib.json for TypeScript definitions
• ✅ Add CSS Setup section to README
• ✅ Add build output tests

Files Changed

• vite.config.ts - Added library build configuration
• vite.lib.config.ts - New file for library-only builds
• src/components/index.ts - New file for component exports
• package.json - Added main/module/types/exports fields
• tsconfig.lib.json - New TypeScript config for declarations
• src/__tests__/build.test.ts - Tests for build output
• README.md - Added CSS Setup section

Build Output

Closes #104

Before

[drips-wave]

@BernardOnuh Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits