daply-ui 0.0.0 → 1.1.0

package/README.md

@@ -1,73 +1,724 @@
-# React + TypeScript + Vite
+# @daply-ui
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+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.
 
-Currently, two official plugins are available:
+## ✨ Features
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- 🎨 **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
 
-## React Compiler
+## Installation
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/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
+
+### 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';
+
+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: "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 (
+    <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
 
-## Expanding the ESLint configuration
+```tsx
+<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
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+```tsx
+<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
+  ]}
+/>
+```
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+### Custom Validation
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+```tsx
+<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
+      }
+    }
+  ]}
+/>
+```
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
+### All Available Field Types
+
+```tsx
+<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"
     },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
+    {
+      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
+
+### 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:
+
+```tsx
+// 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:
+
+```tsx
+<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:
+
+```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
+<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
+
+```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](https://github.com/yourusername/daply-ui).