@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

``bash
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

$3

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

$3

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

$3

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

$3

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

$3

`tsx
import { Button } from 'daply-ui';

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

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

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

// Different Sizes
function SizeExamples() {
return (
<>




);
}

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

$3

`tsx
import { Form } from 'daply-ui';

function App() {
return (
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: "your.email@example.com"
},
{
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.

`tsx
import { MultiStepForm } from 'daply-ui';

function App() {
return (
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: 'you@example.com'
},
{
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.");
}}
/>
);
}
`

$3

- 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.

`tsx
import { VideoPlayer } from 'daply-ui';

// YouTube Video
function YouTubeVideoExample() {
return (
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 (
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 (
videoUrl="https://example.com/video.mp4"
title="Custom Video"
author="Your Company"
date={new Date().toISOString()}
thumbnailUrl="https://example.com/thumbnail.jpg"
theme="light"
/>
);
}
`

$3

- 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

$3

`tsx
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..."
/>
`

$3

`tsx
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
]}
/>
`

$3

`tsx
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
}
}
]}
/>
`

$3

`tsx
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@example.com"
},
{
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

$3

| 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) |

$3

| 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...") |

$3

| 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 |

$3

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.

$3

| 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 |

$3

| 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.

$3

The components automatically adapt to light and dark modes:

`tsx
// Light theme


// Dark theme (like Oasis Energy form)


// Auto-detect user's system preference (default)

`

$3


- 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

$3

You can add custom classes for additional styling:

`tsx
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:

`tsx
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:

`json
{
"formId": "contact-form",
"siteId": "my-website",
"formData": {
"name": "John Doe",
"email": "john@example.com",
"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:

`tsx
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

`bash


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.