Lovable Design System React

A React component library for building beautiful and consistent user interfaces.

Installation

npm install lovable-dsr

Components

LoginPage

The LoginPage component provides a complete login page with form handling and navigation capabilities.

Requirements

• The component must be wrapped in a React Router's BrowserRouter component since it uses router hooks internally.

Usage

import { LoginPage } from 'lovable-dsr';

function App() {
  return (
    <BrowserRouter>
      <LoginPage />
    </BrowserRouter>
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | onSuccess | () => void | No | Callback function called when login is successful | | proxyLoginUrl | string | No | URL of the login proxy Edge Function for external domains (e.g. Lovable) |

Login from external domains (Lovable)

When using this library from an external domain (e.g. Lovable), the Adsmurai API will block requests due to CORS. To solve this, use the login proxy Edge Function included in login-proxy.tsx.

1. Deploy the Edge Function

In your Supabase project:

supabase functions new login-proxy

Copy the contents of login-proxy.tsx into supabase/functions/login-proxy/index.ts, then deploy:

supabase functions deploy login-proxy

2. Pass the proxy URL to LoginPage

<LoginPage
  onSuccess={() => console.log('Login successful')}
  proxyLoginUrl="https://<your-project-ref>.supabase.co/functions/v1/login-proxy"
/>

The proxy only accepts requests from *.lovable.app, *.lovableproject.com and localhost.

Development

To start the development environment:

npm install
npm run storybook