daply-ui

v1.1.0

Published

6 days ago

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.

0High
0Medium
0Low

divineade

@daply-ui

✨ 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: "[email protected]"
        },
        {
          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: '[email protected]'
            },
            { 
              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: "[email protected]"
    },
    {
      name: "number_field",
      type: "number",
      label: "Number Input",
      placeholder: "123"
    },
    {
      name: "tel_field",
      type: "tel",
      label: "Phone Number",
      placeholder: "+1 (555) 123-4567"
    },
    {
      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": "[email protected]",
    "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.