Oxpecker.Solid.DaisyUI 1.0.7

Oxpecker.Solid.DaisyUI

Oxpecker.Solid.DaisyUI is a comprehensive F# library that provides type-safe bindings for all DaisyUI components, specifically designed for use with Oxpecker.Solid and SolidJS.

This library enables you to build beautiful, responsive user interfaces using DaisyUI's component library with the power and type safety of F#, all while leveraging SolidJS's reactive primitives.

Features

✨ Complete DaisyUI Coverage - All major DaisyUI components available as type-safe F# functions
🔒 Type Safety - Leverage F#'s type system to catch errors at compile time
⚡ Oxpecker.Solid Integration - Seamlessly works with Oxpecker's SolidJS bindings
🎨 Tailwind CSS Powered - Built on top of Tailwind CSS utility classes
📦 Easy to Use - Simple, idiomatic F# API

Installation

NuGet Package

dotnet add package Oxpecker.Solid.DaisyUI

Prerequisites

You'll also need:

• Oxpecker.Solid - For SolidJS bindings
• DaisyUI - The CSS framework (install via npm/yarn)
• Tailwind CSS - DaisyUI's peer dependency

npm install -D daisyui@latest
npm install -D tailwindcss@latest

Tailwind Configuration

For DaisyUI v4+, configure it directly in your CSS file (e.g., src/index.css):

@import "tailwindcss";

@plugin "daisyui" {
  themes: winter --default, sunset --prefersdark;
  root: ":root";
}

Quick Start

Here's a simple example showing how to use Oxpecker.Solid.DaisyUI components:

module App

open Oxpecker.Solid
open Oxpecker.Solid.DaisyUI

[<SolidComponent>]
let App() =
    div(class' = "container mx-auto p-4") {
        Card(bordered = true) {
            CardBody() {
                CardTitle() { "Welcome to DaisyUI!" }
                p() { "This is a card component built with Oxpecker.Solid.DaisyUI" }
                
                Button(color = Primary, size = Large) {
                    "Click Me!"
                }
            }
        }
        
        Alert(color = Success) {
            span() { "✓ Your application is ready!" }
        }
    }

Component Syntax

All DaisyUI components use a clean, type-safe syntax with optional parameters:

Button(color = Primary, size = Large) { "Click" }
Card(bordered = true, class' = "shadow-xl") { ... }
Badge(color = Success) { "New" }
Alert(color = Info) { "Message" }

Modal(open' = true) {
    ModalBox() {
        h3() { "Title" }
        p() { "Content" }
        ModalAction() {
            Button() { "Close" }
        }
    }
}

This approach provides:

• ✅ Clean, readable code
• ✅ Full IntelliSense support
• ✅ Type-safe parameters
• ✅ Optional parameter flexibility

Component Categories

Actions

Interactive components with clean syntax:

• Button - Buttons with various styles and colors
• Dropdown - Dropdown menus
• Modal - Modal dialogs
• Swap - Swap/toggle animations
• ThemeController - Theme switching control

Data Display

Components for showing data:

• Badge - Small status indicators
• Card - Content containers
• CardTitle - Card titles
• CardBody - Card body sections
• Avatar - User profile images
• Stat / Stats - Statistics display
• Table - Data tables
• Timeline - Event timelines

Data Input

Form input components:

• Checkbox - Checkbox inputs
• Radio - Radio button inputs
• TextInput - Text input fields
• Textarea - Multi-line text areas
• Select - Dropdown selects
• Range - Range sliders
• Toggle - Toggle switches
• FileInput - File upload inputs
• Rating - Star ratings

Layout

Page layout components:

• Artboard - Mobile mockup frames
• Divider - Content dividers
• Drawer - Side drawers
• Footer - Page footers
• Hero - Hero sections
• Indicator - Badge indicators
• Join - Grouped items
• Stack - Stacked items
• Toast - Toast notifications

Navigation

Navigation components:

• Breadcrumbs - Breadcrumb navigation
• BottomNav - Bottom navigation bars
• Link - Styled links
• Menu - Menu lists
• Navbar - Navigation bars
• Steps - Step indicators
• Step - Individual step items
• Tabs - Tab navigation
• Tab - Individual tab items

Feedback

User feedback components:

• Alert - Alert messages
• Loading - Loading spinners
• Progress - Progress bars
• RadialProgress - Circular progress
• Skeleton - Loading placeholders
• Tooltip - Hover tooltips

Component Usage Examples

Button with Custom Styling

open Oxpecker.Solid.DaisyUI

[<SolidComponent>]
let MyButton() =
    Button(color = Primary, size = Large, wide = true) {
        "Large Primary Button"
    }

Modal Dialog

open Oxpecker.Solid
open Oxpecker.Solid.DaisyUI

[<SolidComponent>]
let MyModal() =
    let isOpen, setIsOpen = createSignal false
    
    Fragment() {
        Button(color = Primary).onClick(fun _ -> setIsOpen(not (isOpen()))) {
            "Open Modal"
        }
        
        Show(when' = isOpen ()) {
            Modal(open' = isOpen()).attr("open", "true") {
                ModalBox() {
                    h3(class' = "font-bold text-lg") { "Hello!" }
                    p(class' = "py-4") { "This is a modal dialog" }
                    ModalAction() {
                        Button().onClick(fun _ -> setIsOpen(false)) {
                            "Close"
                        }
                    }
                }
            }
        }
    }

Card with Stats

open Oxpecker.Solid.DaisyUI

[<SolidComponent>]
let StatsCard() =
    Card(bordered = true) {
        CardBody() {
            CardTitle() { "Statistics" }
            
            Stats() {
                Stat() {
                    div(class' = "stat-title") { "Total Users" }
                    div(class' = "stat-value") { "25.6K" }
                    div(class' = "stat-desc") { "↗︎ 400 (22%)" }
                }
                Stat() {
                    div(class' = "stat-title") { "Page Views" }
                    div(class' = "stat-value") { "2.6M" }
                    div(class' = "stat-desc") { "↗︎ 90 (14%)" }
                }
            }
        }
    }

Form with Inputs

open Oxpecker.Solid.DaisyUI

[<SolidComponent>]
let MyForm() =
    let name, setName = createSignal ""
    let agreed, setAgreed = createSignal false
    
    form(class' = "space-y-4") {
        FormControl() {
            Label() {
                LabelText() { "Your Name" }
            }
            TextInput(placeholder = "Enter your name", bordered = true)
        }
        
        FormControl() {
            Label(class' = "cursor-pointer") {
                LabelText() { "I agree to terms" }
                Checkbox(color = Primary)
            }
        }
        
        FormControl() {
            Label() {
                LabelText() { "Select option" }
            }
            Select(bordered = true) {
                option() { "Option 1" }
                option() { "Option 2" }
                option() { "Option 3" }
            }
        }
        
        Button(color = Primary, block = true) {
            "Submit"
        }
    }

Type-Safe Variants

The library provides type-safe discriminated unions for common DaisyUI modifiers, e.g.:

Color

type Color =
    | Primary
    | Secondary
    | Accent
    | Neutral
    | Info
    | Success
    | Warning
    | Error

Size

type Size =
    | ExtraSmall
    | Small
    | Medium
    | Large
    | ExtraLarge

Advanced Usage

Combining with Oxpecker.Solid Reactivity

open Oxpecker.Solid

[<SolidComponent>]
let LoadingExample() =
    let loading, setLoading = createSignal true
    let progress, setProgress = createSignal 0
    
    div() {
    Show(when' = Loading()) {
            Loading()
        }
        
        Progress(value = Progress(), max = 100)
        
        DaisyButton(onClick = fun _ ->
            setLoading(not (Loading()))
            setProgress(Progress() + 10)
        ) {
            "Toggle & Increment"
        }
    }

Custom Themes

DaisyUI supports multiple themes. Switch between them using the ThemeController:

open Oxpecker.Solid.DaisyUI.Actions

[<SolidComponent>]
let ThemeSwitcher() =
    div(class' = "flex gap-2") {
        label() {
            span() { "Dark Mode" }
            ThemeController "dark"
        }
    }

Contributing

Contributions are welcome! This library is part of the Oxpecker ecosystem. If you'd like to add more components, improve type safety, or enhance the API:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• DaisyUI - The amazing component library
• Oxpecker - F# web framework and Solid.js bindings
• SolidJS - The reactive JavaScript library
• Tailwind CSS - The utility-first CSS framework

Related Projects

• Oxpecker - F# web framework
• Oxpecker.Solid - SolidJS bindings for F#
• DaisyUI - Tailwind CSS component library

Support

If you find this library helpful, please consider:

• ⭐ Starring the repository
• 📢 Sharing it with others
• 🐛 Reporting issues
• 💡 Suggesting improvements

Happy coding with F#, Oxpecker.Solid, and DaisyUI! 🎉