🎨 WalletSphere Components

A modern, lightweight React component library built with TypeScript, Tailwind CSS, and Lucide icons.

✨ Features

• 🎯 TypeScript First - Fully typed components
• 🎨 Tailwind CSS - Utility-first styling
• 🔧 Customizable - Flexible props and variants
• ♿ Accessible - ARIA compliant
• 📦 Tree-shakeable - Import only what you need
• 🚀 Lightweight - No heavy dependencies
• 📚 Storybook - Interactive documentation

📦 Installation

npm install walletsphere-components

🚀 Quick Start

import { Button, Input, toast, ToastContainer } from 'walletsphere-components';
import 'walletsphere-components/styles';

function App() {
  return (
    <>
      <Button variant="primary" onClick={() => toast.success('Hello!')}>
        Click me
      </Button>
      
      <Input 
        label="Email" 
        placeholder="[email protected]"
        type="email"
      />
      
      <ToastContainer />
    </>
  );
}

📚 Components

Button

Versatile button component with multiple variants and sizes.

<Button variant="primary" size="md" loading>
  Save Changes
</Button>

Variants: default, primary, secondary, danger, ghost, link
Sizes: sm, md, lg

Input

Form input with labels, errors, and icons support.

<Input 
  label="Email"
  error="Invalid email"
  leftIcon={<Mail />}
  placeholder="[email protected]"
/>

Variants: default, outlined, filled
Sizes: sm, md, lg

Toast (Imperative API) ⭐ NEW

Modern toast notifications with imperative API.

// Setup: Add ToastContainer once in your app
<ToastContainer />

// Use anywhere in your code
toast.success('Saved successfully!');
toast.error('Something went wrong');
toast.promise(fetchData(), {
  loading: 'Loading...',
  success: 'Done!',
  error: 'Failed!'
});

Methods: success, error, warning, info, default, promise, dismiss, dismissAll

📖 Full Toast documentation

Notification (Declarative)

Controlled notification component for custom implementations.

<Notification 
  open={isOpen}
  variant="success"
  message="Changes saved"
  position="top-right"
  onClose={() => setIsOpen(false)}
/>

🎯 Usage Examples

Form with validation

import { Input, Button, toast } from 'walletsphere-components';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = async () => {
    if (!email.includes('@')) {
      setError('Invalid email');
      return;
    }
    
    try {
      await login(email);
      toast.success('Logged in successfully!');
    } catch (err) {
      toast.error('Login failed');
    }
  };

  return (
    <>
      <Input
        label="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        error={error}
      />
      <Button variant="primary" onClick={handleSubmit}>
        Login
      </Button>
    </>
  );
}

Async operations with toast.promise

import { toast } from 'walletsphere-components';

function DataFetcher() {
  const loadData = () => {
    toast.promise(
      fetch('/api/data').then(r => r.json()),
      {
        loading: 'Fetching data...',
        success: (data) => `Loaded ${data.items.length} items`,
        error: 'Failed to load data'
      }
    );
  };

  return <Button onClick={loadData}>Load Data</Button>;
}

🛠️ Development

# Install dependencies
npm install

# Start Storybook
npm run storybook

# Build library
npm run build

# Run linter
npm run lint

📖 Documentation

Full documentation available in /docs folder:

• Toast System Guide
• Architecture
• Design Tokens

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines.

📄 License

MIT © WalletSphere Team