duxt_ui 0.3.0

A component library for Jaspr with pre-built, styled UI components.

example/duxt_ui_example.dart

// Example usage of DuxtUI components for Jaspr.
//
// DuxtUI provides 100+ pre-built UI components for the Jaspr framework.
// This example demonstrates basic component usage patterns.

import 'package:jaspr/jaspr.dart';
import 'package:jaspr/dom.dart';
import 'package:duxt_ui/duxt_ui.dart';

/// Example showing various button configurations.
Component buttonExamples() {
  return div(classes: 'space-y-4', [
    // Primary button
    DButton(label: 'Primary Button'),

    // Button variants
    DButton(label: 'Outline', variant: DButtonVariant.outline),
    DButton(label: 'Ghost', variant: DButtonVariant.ghost),
    DButton(label: 'Soft', variant: DButtonVariant.soft),
    DButton(label: 'Link', variant: DButtonVariant.link),

    // Loading and disabled states
    DButton(label: 'Loading...', loading: true),
    DButton(label: 'Disabled', disabled: true),

    // Button sizes
    DButton(label: 'Small', size: DButtonSize.sm),
    DButton(label: 'Large', size: DButtonSize.lg),

    // Button colors
    DButton(label: 'Success', color: DButtonColor.success),
    DButton(label: 'Warning', color: DButtonColor.warning),
    DButton(label: 'Error', color: DButtonColor.error),

    // Button group
    DButtonGroup(children: [
      DButton(label: 'One'),
      DButton(label: 'Two'),
      DButton(label: 'Three'),
    ]),
  ]);
}

/// Example showing form input components.
Component formExamples() {
  return div(classes: 'space-y-4 max-w-md', [
    // Text input
    DInput(placeholder: 'Enter your email'),

    // Checkbox
    DCheckbox(label: 'Subscribe to newsletter'),

    // Select dropdown
    DSelect(
      placeholder: 'Choose a plan',
      options: [
        DSelectOption(value: 'free', label: 'Free'),
        DSelectOption(value: 'pro', label: 'Pro'),
        DSelectOption(value: 'enterprise', label: 'Enterprise'),
      ],
    ),

    // Switch toggle
    DSwitch(label: 'Enable notifications'),

    // Slider
    DSlider(value: 50, min: 0, max: 100),

    // PIN input
    DPinInput(length: 4),

    // Radio group
    DRadioGroup(
      name: 'plan',
      options: [
        DRadioOption(value: 'option1', label: 'Option 1'),
        DRadioOption(value: 'option2', label: 'Option 2'),
        DRadioOption(value: 'option3', label: 'Option 3'),
      ],
    ),
  ]);
}

/// Example showing data display components.
Component dataDisplayExamples() {
  return div(classes: 'space-y-4', [
    // Badges
    div(classes: 'flex gap-2', [
      DBadge(label: 'New'),
      DBadge(label: 'Pro', color: DBadgeColor.primary),
      DBadge(label: 'Sale', color: DBadgeColor.error),
    ]),

    // Avatars
    div(classes: 'flex gap-2', [
      DAvatar(alt: 'John Doe'),
      DAvatarGroup(
        max: 3,
        avatars: [
          DAvatar(alt: 'User 1'),
          DAvatar(alt: 'User 2'),
          DAvatar(alt: 'User 3'),
          DAvatar(alt: 'User 4'),
        ],
      ),
    ]),

    // Card
    DCard(children: [Component.text('Card content goes here')]),

    // Alert
    DAlert(
      title: 'Success',
      description: 'Your changes have been saved.',
      color: DAlertColor.success,
    ),

    // Progress
    DProgress(value: 75, max: 100),

    // Spinner
    DSpinner(),
  ]);
}

/// Example showing navigation components.
Component navigationExamples() {
  return div(classes: 'space-y-4', [
    // Tabs
    DTabs(
      items: [
        DTabItem(
          value: 'tab1',
          label: 'Overview',
          content: Component.text('Overview content'),
        ),
        DTabItem(
          value: 'tab2',
          label: 'Settings',
          content: Component.text('Settings content'),
        ),
        DTabItem(
          value: 'tab3',
          label: 'Help',
          content: Component.text('Help content'),
        ),
      ],
    ),

    // Breadcrumb
    DBreadcrumb(
      items: [
        DBreadcrumbItem(label: 'Home'),
        DBreadcrumbItem(label: 'Products'),
        DBreadcrumbItem(label: 'Details'),
      ],
    ),
  ]);
}

/// Example showing overlay components.
Component overlayExamples() {
  return div(classes: 'space-y-4', [
    // Tooltip
    DTooltip(
      text: 'This is a tooltip',
      child: DButton(label: 'Hover me'),
    ),

    // Dropdown menu
    DDropdown(
      trigger: DButton(label: 'Open Menu'),
      items: [
        DDropdownItem(label: 'Edit'),
        DDropdownItem(label: 'Duplicate'),
        DDropdownItem.divider(),
        DDropdownItem(label: 'Delete'),
      ],
    ),
  ]);
}

/// Main example showing all component categories.
void main() {
  // This is an example file showing DuxtUI component usage.
  // In a real Jaspr application, you would use these components
  // within your Document and page components.

  print('DuxtUI Example - See the component functions above for usage patterns.');
  print('');
  print('Available components include:');
  print('- Buttons: DButton, DButtonGroup');
  print('- Form: DInput, DSelect, DCheckbox, DSwitch, DSlider, DPinInput, DRadioGroup');
  print('- Data Display: DBadge, DAvatar, DAvatarGroup, DCard, DProgress, DSpinner');
  print('- Navigation: DTabs, DBreadcrumb');
  print('- Overlays: DModal, DTooltip, DDropdown');
  print('- And many more...');
}