daply-ui

@daply-ui

A React component library for building beautiful, modern forms that integrate seamlessly with the Daply backend. Features professional styling inspired by Daply forms with automatic light/dark theme support.

✨ Features

• 🎨 Modern Design - Clean, professional styling matching Daply form aesthetics
• 🌓 Theme Support - Automatic light/dark theme adaptation
• ✅ Built-in Validation - Required fields, email, URL validation
• 🔧 Custom Validation - Define your own validation rules
• 🚀 API Integration - Automatic submission to Daply backend
• 📱 Responsive - Mobile-first design that works everywhere
• 💪 TypeScript - Full type safety and IntelliSense support
• 🎯 Customizable - Override any styling with custom classes

Installation

npm install daply-ui

No additional dependencies required! The library uses inline styles, so it works out of the box without needing Tailwind CSS or any other CSS framework.

Components

Button Component

A beautiful animated button component with shadow effects and hover animations:

• 🎨 Animated Shadow - 3D push-down effect on hover
• 🎯 Multiple Variants - Primary and secondary styles
• 📏 Size Options - Small, default, and large sizes
• 🎨 Theme Support - Automatic light/dark theme adaptation
• 🔘 Icon Support - Add icons to left or right
• ⚡ Smooth Animations - Transition effects on all interactions

Form Component

A fully-featured form component with built-in validation and Daply backend integration.

MultiStepForm Component

A powerful multi-step form component that breaks long forms into manageable steps with:

• ✅ Step Navigation - Forward and backward navigation with validation
• 📊 Progress Indicator - Visual step progress tracking
• 💾 Data Persistence - Form data persists across all steps
• ✅ Step Validation - Validates each step before allowing navigation
• 🎨 Custom Styling - Title and description for each step

VideoPlayer Component

A modern video player component with support for multiple video sources:

• 🎬 YouTube Support - Embed YouTube videos with optimized parameters
• 📺 HLS Streaming - Support for HLS streams (including Daply transcoder)
• 🖼️ Custom Thumbnails - Display custom thumbnails before playback
• ⚡ Performance Optimized - Lazy loading and efficient video embedding
• 🎨 Theme Support - Automatic light/dark theme adaptation
• 🔗 External Links - Open videos in new tab

Basic Usage

Button Usage

import { Button } from 'daply-ui';

// Primary Button
function PrimaryButtonExample() {
  return (
    <Button
      label="Click Me"
      variant="primary"
      theme="light"
      onClick={() => alert('Clicked!')}
    />
  );
}

// Secondary Button
function SecondaryButtonExample() {
  return (
    <Button
      label="Secondary"
      variant="secondary"
      theme="dark"
    />
  );
}

// Button with Icon
function IconButtonExample() {
  return (
    <Button
      label="Download"
      variant="primary"
      icon={<DownloadIcon />}
      iconPosition="right"
      size="large"
    />
  );
}

// Different Sizes
function SizeExamples() {
  return (
    <>
      <Button label="Small" size="small" variant="primary" />
      <Button label="Default" size="default" variant="primary" />
      <Button label="Large" size="large" variant="primary" />
    </>
  );
}

// Disabled State
function DisabledExample() {
  return (
    <Button
      label="Disabled"
      disabled={true}
      variant="primary"
    />
  );
}

Form Usage

import { Form } from 'daply-ui';

function App() {
  return (
    <Form
      formId="contact-form"
      siteId="my-website"
      baseUrl="https://api.daply.com"
      apiToken="your-api-token-here"
      encryptedDbName="ff95d16da2340fe621ce03a61b9e6ee5b2c5dacbb12bd1914cb3dae6e5ad1bea73029edd7bf8bae1eefaa23cde52ea28"
      theme="dark" // 'light', 'dark', or 'auto' (default)
      fields={[
        {
          name: "name",
          type: "text",
          label: "Name",
          required: true,
          placeholder: "Enter your name"
        },
        {
          name: "email",
          type: "email",
          label: "Email",
          required: true,
          placeholder: "[e-mail]"
        },
        {
          name: "subject",
          type: "text",
          label: "Subject",
          required: true,
          placeholder: "What's this about?"
        },
        {
          name: "message",
          type: "textarea",
          label: "Message",
          required: true,
          rows: 6,
          placeholder: "Your message here..."
        }
      ]}
      onSuccess={(response) => {
        console.log("Form submitted successfully!", response);
        alert("Thank you for your submission!");
      }}
      onError={(error) => {
        console.error("Form submission failed:", error);
        alert("Something went wrong. Please try again.");
      }}
    />
  );
}

Multi-Step Form Usage

Break long forms into manageable steps with automatic data persistence and step validation.

import { MultiStepForm } from 'daply-ui';

function App() {
  return (
    <MultiStepForm
      formId="signup"
      siteId="my-website"
      baseUrl="https://api.daply.com"
      apiToken="your-api-token-here"
      encryptedDbName="ff95d16da2340fe621ce03a61b9e6ee5b2c5dacbb12bd1914cb3dae6e5ad1bea73029edd7bf8bae1eefaa23cde52ea28"
      theme="dark"
      showStepIndicator={true} // Show visual progress indicator
      steps={[
        {
          id: 'account',
          title: 'Account Information',
          description: 'Let\'s start with your basic account details',
          fields: [
            { 
              name: 'email', 
              type: 'email',
              label: 'Email Address', 
              required: true,
              placeholder: '[e-mail]'
            },
            { 
              name: 'password', 
              type: 'text',
              label: 'Password', 
              required: true,
              placeholder: 'Create a strong password',
              validation: (value) => {
                if (value.length < 8) {
                  return "Password must be at least 8 characters";
                }
                return undefined;
              }
            },
          ],
        },
        {
          id: 'profile',
          title: 'Personal Information',
          description: 'Tell us a bit about yourself',
          fields: [
            { 
              name: 'firstName', 
              type: 'text',
              label: 'First Name',
              required: true,
              placeholder: 'John'
            },
            { 
              name: 'lastName', 
              type: 'text',
              label: 'Last Name',
              required: true,
              placeholder: 'Doe'
            },
          ],
        },
      ]}
      submitButtonText="Create Account"
      onSuccess={(response) => {
        console.log("Form submitted successfully!", response);
        alert("Account created successfully!");
      }}
      onError={(error) => {
        console.error("Form submission failed:", error);
        alert("Something went wrong. Please try again.");
      }}
    />
  );
}

MultiStepForm Features

• Automatic Data Persistence: Form data is preserved as users navigate between steps
• Step Validation: Each step is validated before allowing forward navigation
• Visual Progress: Optional step indicator shows users where they are in the process
• Back Button: Users can go back to previous steps to review or edit their data
• Custom Step Content: Each step can have its own title and description
• All Form Features: Supports all the same validation, theming, and customization options as the regular Form component

Video Player Usage

Play YouTube videos, HLS streams, or custom video files with a beautiful, responsive player.

import { VideoPlayer } from 'daply-ui';

// YouTube Video
function YouTubeVideoExample() {
  return (
    <VideoPlayer
      youtubeUrl="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
      title="My YouTube Video"
      author="Creator Name"
      theme="auto"
      onVideoClick={() => console.log('Video clicked!')}
    />
  );
}

// HLS Stream (Daply or any HLS)
function HLSStreamExample() {
  return (
    <VideoPlayer
      videoUrl="https://storage.googleapis.com/daply-transcoder-storage/sample/manifest.m3u8"
      title="Live HLS Stream"
      author="Daply"
      thumbnailUrl="https://example.com/thumbnail.jpg"
      theme="dark"
      autoplay={false}
    />
  );
}

// Custom Video File
function CustomVideoExample() {
  return (
    <VideoPlayer
      videoUrl="https://example.com/video.mp4"
      title="Custom Video"
      author="Your Company"
      date={new Date().toISOString()}
      thumbnailUrl="https://example.com/thumbnail.jpg"
      theme="light"
    />
  );
}

VideoPlayer Features

• Multiple Video Sources: YouTube, HLS streams, or standard video files (mp4, webm, etc.)
• Smart Detection: Automatically detects video type and uses appropriate player
• Custom Thumbnails: Display custom preview images before playback
• Lazy Loading: Videos load only when needed for better performance
• Theme Support: Adapts to light, dark, or auto themes
• Responsive Design: Perfect 16:9 aspect ratio on all devices
• External Links: Built-in button to open videos in new tabs
• Loading States: Smooth loading indicators during video initialization
• Optimized YouTube Embeds: Pre-configured parameters for best performance

Advanced Usage

Custom Styling

<Form
  formId="styled-form"
  siteId="my-website"
  baseUrl="https://api.daply.com"
  apiToken="your-api-token-here"
  fields={[
    {
      name: "username",
      type: "text",
      label: "Username",
      required: true,
      className: "custom-input-class"
    }
  ]}
  formClassName="my-custom-form"
  submitButtonClassName="my-custom-button"
  submitButtonText="Send Message"
  loadingText="Sending..."
/>

With Metadata and Tracking

<Form
  formId="contact-form"
  siteId="my-website"
  baseUrl="https://api.daply.com"
  apiToken="your-api-token-here"
  pageUrl={window.location.href}
  pageId="contact-page"
  sessionId="user-session-id"
  metadata={{
    source: "contact page",
    campaign: "organic",
    userAgent: navigator.userAgent
  }}
  fields={[
    // ... your fields
  ]}
/>

Custom Validation

<Form
  formId="signup-form"
  siteId="my-website"
  baseUrl="https://api.daply.com"
  apiToken="your-api-token-here"
  fields={[
    {
      name: "password",
      type: "text",
      label: "Password",
      required: true,
      validation: (value) => {
        if (value.length < 8) {
          return "Password must be at least 8 characters";
        }
        if (!/[A-Z]/.test(value)) {
          return "Password must contain at least one uppercase letter";
        }
        if (!/[0-9]/.test(value)) {
          return "Password must contain at least one number";
        }
        return undefined; // No error
      }
    }
  ]}
/>

All Available Field Types

<Form
  formId="all-fields-form"
  siteId="my-website"
  baseUrl="https://api.daply.com"
  apiToken="your-api-token-here"
  fields={[
    {
      name: "text_field",
      type: "text",
      label: "Text Input",
      placeholder: "Enter text"
    },
    {
      name: "email_field",
      type: "email",
      label: "Email Input",
      placeholder: "[e-mail]"
    },
    {
      name: "number_field",
      type: "number",
      label: "Number Input",
      placeholder: "123"
    },
    {
      name: "tel_field",
      type: "tel",
      label: "Phone Number",
      placeholder: "[phone]"
    },
    {
      name: "url_field",
      type: "url",
      label: "Website URL",
      placeholder: "https://example.com"
    },
    {
      name: "textarea_field",
      type: "textarea",
      label: "Textarea",
      rows: 5,
      placeholder: "Enter multiple lines..."
    }
  ]}
/>

API Reference

Button Props

Prop	Type	Required	Description
label	string	No	Button text label
children	ReactNode	No	Custom button content (overrides label)
disabled	boolean	No	Whether button is disabled (default: false)
color	string	No	Color identifier (default: "blue-900")
icon	ReactNode	No	Icon to display with button
iconPosition	'left' | 'right'	No	Icon position (default: 'right')
className	string	No	Additional CSS classes
style	CSSProperties	No	Inline styles object
type	'button' | 'submit' | 'reset'	No	Button type (default: 'button')
size	'small' | 'default' | 'large'	No	Button size (default: 'default')
variant	'primary' | 'secondary'	No	Button style variant (default: 'primary')
theme	'light' | 'dark' | 'auto'	No	Theme mode (default: 'auto')
onClick	(e: MouseEvent) => void	No	Click handler function
isNoLabelForSm	boolean	No	Hide label on small screens (default: false)

FormConfig Props

Prop	Type	Required	Description
formId	string	Yes	Unique identifier for the form
siteId	string	Yes	Identifier for your site
baseUrl	string	Yes	Daply API base URL
apiToken	string	Yes	Bearer token for authentication
encryptedDbName	string	Yes	Encrypted database name for x-encrypted-db-name header
fields	FormField[]	Yes	Array of form fields (see below)
theme	'light' | 'dark' | 'auto'	No	Theme mode (default: 'auto')
pageUrl	string	No	Current page URL for tracking
pageId	string	No	Page identifier for tracking
sessionId	string	No	User session ID for tracking
metadata	object	No	Additional metadata to send with form
onSuccess	(response: any) => void	No	Callback when form submits successfully
onError	(error: Error) => void	No	Callback when form submission fails
submitButtonText	string	No	Submit button text (default: "Submit")
submitButtonClassName	string	No	Custom CSS class for submit button
formClassName	string	No	Custom CSS class for form wrapper
loadingText	string	No	Loading text (default: "Submitting...")

FormField Props

Prop	Type	Required	Description
name	string	Yes	Field name (must be unique)
type	FieldType	Yes	Field type: text, email, textarea, number, tel, url
label	string	No	Label text displayed above field
required	boolean	No	Whether field is required (default: false)
placeholder	string	No	Placeholder text
defaultValue	string	No	Default value for the field
rows	number	No	Number of rows (for textarea only)
className	string	No	Custom CSS class for input element
validation	(value: string) => string | undefined	No	Custom validation function

MultiStepFormConfig Props

MultiStepFormConfig extends all FormConfig props (except fields) and adds:

Prop	Type	Required	Description
steps	FormStep[]	Yes	Array of form steps (see below)
showStepIndicator	boolean	No	Whether to show step progress indicator (default: true)

Note: All other props from FormConfig (formId, siteId, baseUrl, apiToken, etc.) are also required.

FormStep Props

Prop	Type	Required	Description
id	string	Yes	Unique identifier for the step
title	string	No	Title displayed at the top of the step
description	string	No	Description text displayed below the title
fields	FormField[]	Yes	Array of form fields for this step

VideoPlayerConfig Props

Prop	Type	Required	Description
videoUrl	string | null | undefined	No	Direct video URL (mp4, webm, HLS manifest)
youtubeUrl	string | null | undefined	No	YouTube video URL
title	string	Yes	Video title displayed in thumbnail and metadata
author	string	No	Author/creator name (default: "Daply")
date	string	No	ISO date string for video metadata
thumbnailUrl	string | null | undefined	No	Custom thumbnail image URL
autoplay	boolean	No	Whether to autoplay video (default: false)
className	string	No	Additional CSS classes
onVideoClick	() => void	No	Callback when video play button is clicked
theme	'light' | 'dark' | 'auto'	No	Theme mode (default: 'auto')

Note: Either videoUrl or youtubeUrl must be provided.

Styling

The components use inline styles for maximum compatibility and zero dependencies. They work out of the box without requiring Tailwind CSS or any other CSS framework.

Theme Support

The components automatically adapt to light and dark modes:

// Light theme
<Form theme="light" {...props} />

// Dark theme (like Oasis Energy form)
<Form theme="dark" {...props} />

// Auto-detect user's system preference (default)
<Form theme="auto" {...props} />

Default Styles

• Form Container: Clean white (light) / dark #1a1a1a (dark) with subtle shadows
• Input Fields: Large padding (16px), rounded corners, smooth transitions
• Focus States: Blue ring with smooth animations
• Error States: Red border and background tint
• Submit Button: Gradient blue with hover effects and uppercase text

Customization Options

You can add custom classes for additional styling:

<Form
  formClassName="my-custom-form"
  submitButtonClassName="my-custom-button"
  fields={[
    {
      name: "email",
      type: "email",
      className: "my-custom-input"
      // Add your own CSS classes
    }
  ]}
/>

Note: Inline styles take precedence, but you can use !important in your custom CSS to override them if needed.

TypeScript Support

Full TypeScript support with exported types:

import type {
  FormConfig,
  FormField,
  FormSchema,
  FormData,
  FieldType,
  FieldSchema,
  DaplyFormSubmission,
  MultiStepFormConfig,
  FormStep,
  VideoPlayerConfig
} from 'daply-ui';

API Endpoint

The form submits to:

POST {{baseUrl}}/api/v1/form-submissions

With the following payload structure:

{
  "formId": "contact-form",
  "siteId": "my-website",
  "formData": {
    "name": "John Doe",
    "email": "[e-mail]",
    "subject": "Inquiry",
    "message": "This is a test message."
  },
  "formSchema": {
    "name": { "type": "text", "required": true },
    "email": { "type": "email", "required": true },
    "subject": { "type": "text", "required": true },
    "message": { "type": "textarea", "required": true }
  },
  "pageUrl": "https://example.com/contact",
  "pageId": "contact-page",
  "sessionId": "sess_123456789",
  "metadata": {
    "source": "contact page",
    "campaign": "organic"
  }
}

Headers:

Content-Type: application/json
Authorization: Bearer {your-api-token}
x-encrypted-db-name: {your-encrypted-db-name}

Important: Store your apiToken and encryptedDbName securely in environment variables:

<Form
  apiToken={process.env.REACT_APP_DAPLY_TOKEN}
  encryptedDbName={process.env.REACT_APP_ENCRYPTED_DB_NAME}
  // ... other props
/>

Features

• ✅ Animated Buttons - Beautiful 3D push-down effect with shadows
• ✅ Multiple Button Variants - Primary and secondary styles
• ✅ Button Sizes - Small, default, and large options
• ✅ Built-in validation (required fields, email, URL)
• ✅ Custom validation functions
• ✅ Automatic form submission to Daply backend
• ✅ Loading states with smooth animations
• ✅ Error handling with user-friendly messages
• ✅ Success/error callbacks
• ✅ Full TypeScript support
• ✅ Modern, clean design inspired by Daply forms
• ✅ Light & Dark theme support (automatic)
• ✅ Customizable styling with Tailwind CSS
• ✅ Multiple field types (text, email, textarea, number, tel, url)
• ✅ Metadata and tracking support
• ✅ Smooth transitions and hover effects
• ✅ Mobile-responsive design
• ✅ Multi-step forms with automatic data persistence
• ✅ Step validation - validate each step before proceeding
• ✅ Visual progress indicator - show users their progress
• ✅ Back/Next navigation - easily navigate between steps
• ✅ Video Player - YouTube, HLS streams, and custom videos
• ✅ Optimized Video Playback - lazy loading and performance optimizations
• ✅ Custom Thumbnails - beautiful video previews

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build

# Publish to npm
npm run publish

License

MIT

Support

For issues and questions, please visit our GitHub repository.