daply-ui 1.0.0 → 1.1.0

package/README.md

@@ -23,12 +23,107 @@ npm install daply-ui
 
 ## 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
+
+```tsx
+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
+
 ```tsx
 import { Form } from 'daply-ui';
 
@@ -85,6 +180,157 @@ function App() {
 }
 ```
 
+## 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 (
+    <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: '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.");
+      }}
+    />
+  );
+}
+```
+
+### 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.
+
+```tsx
+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
@@ -216,6 +462,25 @@ function App() {
 
 ## 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 |
@@ -252,6 +517,43 @@ function App() {
 | `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.
@@ -311,7 +613,10 @@ import type {
   FormData,
   FieldType,
   FieldSchema,
-  DaplyFormSubmission
+  DaplyFormSubmission,
+  MultiStepFormConfig,
+  FormStep,
+  VideoPlayerConfig
 } from 'daply-ui';
 ```
 
@@ -369,6 +674,9 @@ x-encrypted-db-name: {your-encrypted-db-name}
 
 ## 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
@@ -383,6 +691,13 @@ x-encrypted-db-name: {your-encrypted-db-name}
 - ✅ 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