BrightSide Developer

BrightSide Developer is a TypeScript package designed to provide an easy-to-use interface for interacting with Supabase, leveraging TanStack Query and many other useful tools for build scalable projects fast!. It includes utilities for authentication, CRUD operations, real-time updates, and theming, making it a versatile tool for developers working with Supabase in their React applications.

Table of Contents

- Installation
- Features
- Initialization
- Authentication
- CRUD Operations
- Real-time
- Theming
- Utility Functions
- Example Usage
- Contributing
- License

Installation

To install BrightSide Developer, simply run:

``bash
npm install bsdweb
`

See full typedoc here: TypeDoc

Features

$3

Before using any of the BrightBase features, you need to initialize it with your Supabase URL and key.

`typescript
import { initBrightBase } from 'bsdweb'

const SUPABASE_URL = 'https://your-supabase-url.co'
const SUPABASE_ANON_KEY = 'your-anon-key'

initBrightBase(SUPABASE_URL, SUPABASE_ANON_KEY)
`

Also, for wetToast, TanStack query, and the useCreateQuery / useInvalidateQuery hooks to work,
they must be wrapped used as children within the BrightProvider.

`typescript
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { BrightProvider } from 'bsdweb'

createRoot(document.getElementById('root')!).render(





)
`

$3

BrightBaseAuth provides methods for handling user authentication, including signing up, signing in, and managing user sessions. It supports multiple authentication methods like email/password and OAuth providers such as Google and Apple.

#### Example

`typescript
import { BrightBaseAuth, useNavigate } from 'bsdweb'

const auth = new BrightBaseAuth()

// Sign up with email and password
auth
.signUpWithEmail('user@example.com', 'password123')
.then((user) => console.log(user))
.catch((err) => console.error(err))

// Sign in with Google
auth
.signInWithGoogle()
.then((user) => console.log(user))
.catch((err) => console.error(err))

// Sign Out
auth.signOut().then(() => useNavigate({ to: '/sign-in' +}))
`

$3

BrightBaseCRUD simplifies interacting with Supabase tables by providing a clean interface for performing Create, Read, Update, and Delete operations.

#### Example

`typescript
interface Todo {
id: string
created_at: string
todo: string
done: boolean
}

const todosTable = new BrightBaseCRUD('todos')

// Create a new todo
todosTable
.create({ todo: 'Write documentation', done: false })
.then((data) => console.log('Todo created:', data))
.catch((err) => console.error('Error creating todo:', err))

// Read todos
todosTable
.read({ done: false })
.then((data) => console.log('Todos:', data))
.catch((err) => console.error('Error reading todos:', err))

// Update a todo
todosTable
.update('some-todo-id', { done: true })
.then((data) => console.log('Todo updated:', data))
.catch((err) => console.error('Error updating todo:', err))

// Delete a todo
todosTable
.delete('some-todo-id')
.then(() => console.log('Todo deleted'))
.catch((err) => console.error('Error deleting todo:', err))
`

$3

BrightBaseRealtime allows you to subscribe to real-time updates on a channel and emit events. It's built to work seamlessly with Supabase's real-time features.

#### Example

`typescript
interface DemoEvents {
message: { message: string; name: string }
toggle: { isOn: boolean }
}

const channel = new BrightBaseRealtime('demo-channel')

// Subscribe to events
channel.on('message', (data) => {
console.log('Message received:', data)
})

// Emit an event
channel.emit('message', { message: 'Hello, world!', name: 'BrightSide' })
`

$3

BrightWebTheme is a utility that helps manage theming in your web application. It allows you to initialize themes based on system preferences, set themes manually, and listen to changes in the system's color scheme.

#### Example

`typescript
import { BrightWebTheme } from 'bsdweb'

// Initialize the theme
BrightWebTheme.initializeTheme()

// Set the theme to dark mode
BrightWebTheme.setTheme('dark')

// Listen for changes in system preferences
BrightWebTheme.mediaThemeEventListener()
`

$3

- wetToast: A utility that wraps around react-hot-toast to display consistent and theme-aware toast notifications in your application.

#### Example

`typescript
import { wetToast } from 'bsdweb'

// Display a success toast
wetToast('Todo added successfully!', { icon: '🎉' })

// Display an error toast
wetToast('Failed to add todo.', { icon: '❌' })
`

$3

Here is an example of how you can use the various components provided by BrightSide Developer in a React application:

`tsx
import { Loader2, Trash } from 'lucide-react'
import { Suspense, useState, useCallback } from 'react'
import { BrightBaseCRUD, BrightBaseRealtime, initBrightBase, useSuspenseQuery, wetToast } from 'bsdweb'

const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL
const SUPABASE_ANON_KEY = import.meta.env.VITE_SUPABASE_ANON_KEY

initBrightBase(SUPABASE_URL, SUPABASE_ANON_KEY)

export default function App() {
const [page, setPage] = useState('')

return (
}>
{page === 'realtime' ? : }

setPage('crud')}>CRUD
setPage('realtime')}>Realtime

)
}

const todosTable = new BrightBaseCRUD<{ id: string; todo: string; done: boolean }>('todos')

function CRUD() {
const [text, setText] = useState('')

const createTodo = useCallback(() => {
todosTable
.create({ todo: text, done: false })
.then(() => wetToast('Todo added!', { icon: '🎉' }))
.catch((err) => wetToast(err.message, { icon: '❌' }))
}, [text])

return (

setText(e.target.value)} placeholder="New Todo" />
Add Todo

)
}

const channel = new BrightBaseRealtime<{ message: string }>('room1')

function Realtime() {
useEffect(() => channel.subscribe(), [])
useEffect(() => channel.on('message', (msg) => alert(msg)), [])
return (

channel.emit('message', 'Hello, world!')}>Send Message

)
}
``

$3

Contributions are welcome! If you find a bug or have a feature request, please open an issue on the GitHub repository.

If you'd like to contribute code, please fork the repository, make your changes in a new branch, and submit a pull request. Be sure to include tests for any new features or changes to existing code.