ClawPlate

Appearance

Composables Documentation ​

useAuth ​

Handles user authentication with Supabase integration. Provides methods for signing in, signing up, password management, and profile updates.

Key features:

  • Email/password authentication
  • User registration with email confirmation
  • Password reset functionality
  • Profile management
  • Loading states and error handling
  • Automatic toast notifications

Main methods:

  • signIn(email, password) - Sign in user
  • signUp(email, password, metadata) - Register new user
  • signOut() - Sign out current user
  • resetPassword(email) - Send password reset email
  • updatePassword(newPassword) - Update user password
  • updateProfile(data) - Update user profile

Reactive state:

  • isAuthenticated - Boolean indicating if user is logged in
  • user - Current user object
  • loading - Loading state
  • error - Error messages

useEmail ​

Provides email sending functionality with different template types. Supports transactional emails, newsletters, success notifications, and custom messages.

Email types:

  • Transactional emails (order confirmations, receipts)
  • Success emails (welcome messages, achievements)
  • Newsletter emails with articles and CTAs
  • Custom emails with HTML/text content

Main methods:

  • sendTransactionalEmail(data) - Send order confirmations and receipts
  • sendSuccessEmail(data) - Send welcome and success messages
  • sendNewsletterEmail(data) - Send newsletter with articles
  • sendCustomEmail(data) - Send custom HTML/text emails
  • sendOrderConfirmation(orderData) - Quick order confirmation
  • sendWelcomeEmail(userData) - Quick welcome email

All methods return promises and handle errors gracefully.

useEmailTemplate ​

Advanced email template system with multiple pre-built templates and conditional rendering. Supports various email types with dynamic content compilation.

Template types:

  • Newsletter templates with article sections
  • Welcome emails with onboarding steps
  • Purchase confirmations with order details
  • Password reset with secure links
  • Notifications and alerts
  • Subscription management emails

Main methods:

  • generateNewsletterEmail(data) - Create newsletter HTML
  • generateWelcomeEmail(data) - Create welcome email HTML
  • generatePurchaseEmail(data) - Create purchase confirmation HTML
  • generatePasswordResetEmail(data) - Create password reset HTML
  • generateNotificationEmail(data) - Create notification HTML
  • generateCustomEmail(data) - Create custom email HTML

Features:

  • Conditional content blocks
  • Variable substitution
  • Fallback templates
  • Responsive design
  • Brand customization

useModal ​

Modal dialog management system with different modal types and promise-based interactions. Handles confirmation dialogs, info modals, and user input prompts.

Modal types:

  • Confirmation modals with yes/no actions
  • Info modals for notifications
  • Error modals for error messages
  • Success modals for confirmations
  • Prompt modals for user input

Main methods:

  • showConfirmModal(title, message, options) - Returns promise with boolean
  • showInfoModal(title, message, options) - Show information
  • showErrorModal(title, message, options) - Show error message
  • showSuccessModal(title, message, options) - Show success message
  • showPromptModal(title, inputConfig, options) - Returns promise with input value

Features:

  • Promise-based API for easy async handling
  • Customizable buttons and styling
  • Click outside to close
  • Keyboard navigation support

useOAuthHistory ​

Tracks and manages OAuth provider usage history for improved user experience. Remembers which providers users have used recently.

Key features:

  • Tracks last used OAuth providers (GitHub, Google, Apple, Twitter)
  • Stores usage history in localStorage
  • Provides provider styling and icons
  • Recent usage detection (within 30 days)

Main methods:

  • recordOAuthUsage(provider, email) - Record provider usage
  • clearHistory() - Clear all history
  • getProviderIcon(provider) - Get icon for provider
  • getProviderName(provider) - Get display name
  • getProviderColors(provider) - Get styling classes

Reactive state:

  • lastUsedProvider - Most recently used provider
  • oAuthHistory - Array of recent providers
  • hasRecentOAuth - Boolean for recent usage

useOTP ​

One-time password management for email and SMS verification with Supabase. Handles sending, verifying, and resending OTP codes.

Key features:

  • Email OTP verification
  • SMS OTP verification (if configured)
  • Automatic cooldown timer for resends
  • Error handling and user feedback

Main methods:

  • sendEmailOTP(email) - Send OTP to email
  • sendPhoneOTP(phone) - Send OTP to phone
  • verifyEmailOTP(email, token) - Verify email OTP
  • verifyPhoneOTP(phone, token) - Verify phone OTP
  • resendOTP(type, contact) - Resend OTP code
  • reset() - Reset all states

Reactive state:

  • loading - Operation in progress
  • resendCooldown - Seconds until resend allowed
  • errorMessage - Current error message
  • isVerified - Verification success status

usePlan ​

Simple composable for plan management (currently minimal implementation).

Planned features:

  • Fetch available plans
  • Get specific plan details
  • Compare plans functionality

useSubscription ​

Comprehensive subscription management with Stripe integration. Handles subscription lifecycle, billing, and access control.

Key features:

  • Subscription status tracking
  • Stripe checkout session creation
  • Billing portal access
  • Subscription cancellation and resumption
  • Feature access control
  • User profile management

Main methods:

  • getCurrentSubscription() - Fetch current subscription
  • createCheckoutSession(priceId) - Create Stripe checkout
  • createBillingPortalSession() - Create billing portal
  • cancelSubscription(subscriptionId) - Cancel subscription
  • resumeSubscription(subscriptionId) - Resume subscription
  • checkAccess(feature) - Check feature access

Reactive state:

  • subscription - Current subscription object
  • hasActiveSubscription - Boolean for active status
  • isPastDue - Boolean for overdue payments
  • isCanceled - Boolean for canceled status
  • subscriptionStatusInfo - Status details with colors
  • daysUntilNextBilling - Days until next charge

useSupabase ​

Simple wrapper for Supabase client initialization with runtime configuration.

Usage: Returns configured Supabase client instance using environment variables.

useToast ​

Toast notification system with multiple variants and automatic dismissal. Provides user feedback for actions and errors.

Toast variants:

  • Default - neutral notifications
  • Success - positive feedback
  • Error - error messages
  • Warning - cautionary messages
  • Info - informational messages

Main methods:

  • addToast(options) - Add custom toast
  • removeToast(id) - Remove specific toast
  • clearAllToasts() - Remove all toasts

Convenience methods:

  • toast.success(title, description) - Add success toast
  • toast.error(title, description) - Add error toast
  • toast.info(title, description) - Add info toast
  • toast.warning(title, description) - Add warning toast

Features:

  • Auto-dismiss after configurable duration
  • Manual dismissal
  • Global state management
  • Stacking support

useTwitter ​

Twitter/X integration for fetching tweet data and handling Twitter URLs. Supports both Twitter and X.com domains.

Key features:

  • Extract tweet IDs from URLs
  • Fetch tweet data via API
  • Fallback to oEmbed API
  • Support for both twitter.com and x.com

Main methods:

  • extractTweetId(url) - Extract tweet ID from URL
  • getTweetData(url) - Fetch complete tweet data

Data structure: Returns tweet object with text, author info, creation date, and engagement metrics.

useDropDown ​

Dropdown component logic with click-outside handling and keyboard navigation. Manages dropdown state and user interactions.

Key features:

  • Open/close state management
  • Click outside to close
  • Escape key to close
  • Automatic event cleanup

Main methods:

  • open() - Open dropdown
  • close() - Close dropdown
  • toggle() - Toggle dropdown state

Reactive state:

  • isOpen - Current open/closed state
  • dropdownRef - Template ref for dropdown element

useUsage ​

Usage tracking composable for resource monitoring (currently minimal implementation).

Planned features:

  • Track resource usage
  • Get current usage statistics
  • Check usage limits

Built with love by mhdevfr

Copyright © 2025 ClawPlate