@julseb-lib/react 0.1.12 → 0.1.15

package/README.md

@@ -1,19 +1,206 @@
-# React components library
+# @julseb-lib/react
 
-A small components library for React.
+A comprehensive React component library built with TypeScript and Tailwind CSS, providing a complete set of UI components for modern web applications.
 
-## Install in your project
+## Features
+
+🎨 Modern Design System - Built with Tailwind CSS v4 and custom design tokens
+
+📱 Responsive Components - Mobile-first approach with flexible layouts
+
+♿ Accessibility First - WCAG compliant components with proper ARIA support
+
+🎯 TypeScript Native - Full type safety with comprehensive TypeScript definitions
+
+🔧 Highly Customizable - Extensive prop interfaces for maximum flexibility
+
+📦 Tree Shakeable - Import only what you need
+
+🎭 Icon Integration - Built-in support for React Icons
+
+🌗 Theme Support - Custom CSS variables and design tokens
+
+## Installation
 
 ```shell
-npm i @julseb-lib/react
+# npm
+npm install @julseb-lib/react
+
+# yarn
+yarn add @julseb-lib/react
+
+# pnpm
+pnpm add @julseb-lib/react
+```
+
+### Setup
+
+Import the CSS file in your main application file:
+
+```typescript
+// main.tsx or App.tsx
+import '@julseb-lib/react/index.css'
+```
+
+## Type Exports
+
+Access comprehensive TypeScript definitions:
+
+```typescript
+import type { 
+  ILibButton, 
+  ILibText, 
+  LibAllColors,
+  LibSpacers 
+} from '@julseb-lib/react/types'
+```
+
+Component-specific prop types:
+
+```typescript
+import type { 
+  ILibButton,
+  ILibInput,
+  ILibModal 
+} from '@julseb-lib/react/component-props'
+```
+
+## Styling & Customization
+
+### CSS Variables
+
+The library uses CSS custom properties for theming:
+
+```css
+:root {
+  --color-primary-500: #3b82f6;
+  --color-secondary-500: #06b6d4;
+  --spacer-xs: 8px;
+  --spacer-sm: 16px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+}
+```
+
+### Design Tokens
+
+Access design tokens programmatically:
+
+```typescript
+import { COLORS, SPACERS, RADIUS } from '@julseb-lib/react'
+
+// Use in components
+<div style={{ color: COLORS.PRIMARY_500 }}>
+  Custom styled content
+</div>
+```
+
+### Tailwind Classes
+
+All components use Tailwind CSS classes that can be extended:
+
+```typescript
+<Button className="hover:scale-105 transition-transform">
+  Custom Button
+</Button>
+```
+
+## Advanced Usage
+
+Form Handling
+
+```typescript
+import { Input, Button, Flexbox } from '@julseb-lib/react'
+
+function ContactForm() {
+  return (
+    <form>
+      <Flexbox direction="column" gap="md">
+        <Input 
+          label="Email"
+          type="email"
+          required
+          validation="Please enter a valid email"
+        />
+        <Input 
+          label="Message"
+          element="textarea"
+          rows={4}
+        />
+        <Button type="submit" variant="primary">
+          Send Message
+        </Button>
+      </Flexbox>
+    </form>
+  )
+}
+```
+
+Modal with Form
+
+```typescript
+import { Modal, Button, Text } from '@julseb-lib/react'
+import { useState } from 'react'
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>
+        Open Modal
+      </Button>
+      
+      <Modal 
+        isOpen={isOpen} 
+        onClose={() => setIsOpen(false)}
+        title="Contact Form"
+      >
+        <Text>Modal content goes here</Text>
+      </Modal>
+    </>
+  )
+}
 ```
 
-or
+## Browser Support
+
+Chrome (latest)
+
+Firefox (latest)
+
+Safari (latest)
+
+Edge (latest)
+
+## Contributing
+
+Contributions are welcome! Please read our contributing guidelines before submitting PRs.
+
+## Development
 
 ```shell
-yarn add @julseb-lib/react
+# Install dependencies
+yarn install
+
+# Start development server
+yarn dev
+
+# Run type checking
+yarn check-errors
+
+# Build library
+yarn build
 ```
 
-## Full documentation
+### License
+
+MIT © [Julien Sebag](https://julien-sebag.com)
+
+### Links
+
+[Documentation](https://doc-julseb-lib-react.vercel.app/)
+
+[GitHub Repository](https://github.com/JulSeb42/julseb-lib-react)
 
-Find the full documentation here: [https://julseb-lib-documentation.vercel.app/](https://julseb-lib-documentation.vercel.app/).
+[NPM Package](https://www.npmjs.com/package/@julseb-lib/react)

package/dist/index.d.ts

@@ -1 +1 @@
-export {}
+export * from "./lib/index.ts"

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@julseb-lib/react",
 	"private": false,
-	"version": "0.1.12",
+	"version": "0.1.15",
 	"type": "module",
 	"license": "MIT",
 	"scripts": {
@@ -11,19 +11,14 @@
 		"copy": "cp ./src/lib/index.css ./dist",
 		"copy-lib": "cp -a ./src/lib ./dist && rm -rf ./dist/lib/components/*/__preview__",
 		"clean": "rm -rf ./dist/icons ./dist/images ./dist/vite.svg ./dist/favicon.svg ./dist/icons-alt",
-		"build": "vite build && yarn copy && yarn copy-lib && yarn clean",
+		"add-index": "rm -rf ./dist/index.d.ts && touch ./dist/index.d.ts && echo 'export * from \"./lib/index.ts\"' > ./dist/index.d.ts",
+		"build": "vite build && yarn copy && yarn copy-lib && yarn clean && yarn add-index",
 		"plop": "cross-env NODE_OPTIONS='--import tsx' plop --plopfile=./plop/plopfile.ts",
 		"plop:c": "yarn plop component",
 		"plop:p": "yarn plop preview",
 		"plop:st": "yarn plop subtype",
 		"plop:g": "yarn plop generator",
 		"plop:d": "yarn plop demo",
-		"cy": "cypress",
-		"cy:open": "cypress open",
-		"cy:ct:run": "cypress run --component --browser electron",
-		"cy:ct:open": "cypress open --component --browser electron",
-		"docgen": "react-docgen -o ./src/data/docgen.json ./src/lib/components/**/*.tsx",
-		"cssgen": "cssjson src/lib/index.css --output src/data/styles.json",
 		"check-errors": "tsc --noEmit"
 	},
 	"dependencies": {
@@ -89,7 +84,7 @@
 	"exports": {
 		".": {
 			"import": "./dist/julseb-lib-react.es.js",
-			"types": "./dist/lib/index.ts",
+			"types": "./dist/index.d.ts",
 			"require": "./dist/julseb-lib-react.umd.js",
 			"default": "./dist/julseb-lib-react.cjs.js"
 		},