@lilith/ui-creator

Creator and content management components for building content creation interfaces. Includes media uploads, rich text editing, file management, and media playback.

Features

• MediaUpload - Drag-and-drop file upload with validation and progress tracking
• RichTextEditor - WYSIWYG text editor with formatting controls
• MarkdownEditor - Markdown editing with live preview
• CodeEditor - Syntax-highlighted code editor
• FileManager - File browser and management interface
• ImageCropper - Image cropping and adjustment tool
• VideoPlayer - Custom video player with controls
• AudioPlayer - Audio playback with waveform visualization
• SchedulePicker - Content scheduling interface
• DraftAutosave - Automatic draft saving functionality
• TagInput - Tag/label input with autocomplete
• ContentPreview - Content preview component

Installation

npm install @lilith/ui-creator
# or
pnpm add @lilith/ui-creator

Peer Dependencies

npm install react react-dom styled-components

Usage

MediaUpload

Drag-and-drop file upload with validation.

import { MediaUpload } from '@lilith/ui-creator';
import type { UploadedFile } from '@lilith/ui-creator';

const [files, setFiles] = useState<UploadedFile[]>([]);

<MediaUpload
  accept="image/*,video/*"
  multiple={true}
  maxSize={10 * 1024 * 1024} // 10MB
  maxFiles={5}
  value={files}
  onUpload={async (newFiles) => {
    // Upload to your server
    const uploaded = await uploadToServer(newFiles);
    setFiles((prev) => [...prev, ...uploaded]);
    return uploaded;
  }}
  onRemove={(fileId) => {
    setFiles((prev) => prev.filter((f) => f.id !== fileId));
  }}
  disabled={false}
/>

TagInput

Input for managing tags or labels.

import { TagInput } from '@lilith/ui-creator';

const [tags, setTags] = useState(['react', 'typescript']);

<TagInput
  value={tags}
  onChange={setTags}
  placeholder="Add tags..."
  maxTags={10}
  suggestions={['javascript', 'css', 'html', 'nodejs']}
/>

RichTextEditor

WYSIWYG content editing.

import { RichTextEditor } from '@lilith/ui-creator';

const [content, setContent] = useState('<p>Start writing...</p>');

<RichTextEditor
  value={content}
  onChange={setContent}
  placeholder="Write your content..."
  toolbar={['bold', 'italic', 'underline', 'link', 'image', 'list']}
  minHeight={300}
/>

MarkdownEditor

Markdown editing with preview.

import { MarkdownEditor } from '@lilith/ui-creator';

const [markdown, setMarkdown] = useState('# Hello World');

<MarkdownEditor
  value={markdown}
  onChange={setMarkdown}
  showPreview={true}
  splitView={true}
/>

CodeEditor

Syntax-highlighted code editing.

import { CodeEditor } from '@lilith/ui-creator';

const [code, setCode] = useState('function hello() {\n  console.log("Hello!");\n}');

<CodeEditor
  value={code}
  onChange={setCode}
  language="javascript"
  theme="dark"
  showLineNumbers={true}
  readOnly={false}
/>

FileManager

File browser and management.

import { FileManager } from '@lilith/ui-creator';
import type { FileItem } from '@lilith/ui-creator';

const files: FileItem[] = [
  { id: '1', name: 'images', type: 'folder', children: [...] },
  { id: '2', name: 'document.pdf', type: 'file', size: 1024000 },
];

<FileManager
  files={files}
  onFileSelect={(file) => console.log('Selected:', file)}
  onFileDelete={(fileId) => deleteFile(fileId)}
  onFileMove={(fileId, targetFolder) => moveFile(fileId, targetFolder)}
  onFolderCreate={(parentId, name) => createFolder(parentId, name)}
/>

ImageCropper

Image cropping interface.

import { ImageCropper } from '@lilith/ui-creator';

<ImageCropper
  src="/path/to/image.jpg"
  aspectRatio={16 / 9}
  onCrop={(croppedImageBlob) => {
    // Handle cropped image
    uploadCroppedImage(croppedImageBlob);
  }}
  onCancel={() => setShowCropper(false)}
/>

VideoPlayer

Custom video player.

import { VideoPlayer } from '@lilith/ui-creator';

<VideoPlayer
  src="https://example.com/video.mp4"
  poster="https://example.com/thumbnail.jpg"
  autoPlay={false}
  loop={false}
  muted={false}
  controls={true}
  onPlay={() => trackVideoPlay()}
  onEnded={() => showNextVideo()}
/>

AudioPlayer

Audio playback with controls.

import { AudioPlayer } from '@lilith/ui-creator';

<AudioPlayer
  src="https://example.com/audio.mp3"
  title="Episode 1"
  artist="Podcast Name"
  showWaveform={true}
  onTimeUpdate={(time) => saveProgress(time)}
/>

SchedulePicker

Content scheduling.

import { SchedulePicker } from '@lilith/ui-creator';
import type { SchedulePreset } from '@lilith/ui-creator';

const presets: SchedulePreset[] = [
  { label: 'Morning', time: '09:00' },
  { label: 'Afternoon', time: '14:00' },
  { label: 'Evening', time: '19:00' },
];

<SchedulePicker
  value={scheduledDate}
  onChange={setScheduledDate}
  minDate={new Date()}
  presets={presets}
  timezone="America/New_York"
/>

DraftAutosave

Automatic draft saving.

import { DraftAutosave } from '@lilith/ui-creator';

<DraftAutosave
  content={editorContent}
  onSave={async (content) => {
    await saveDraft(content);
  }}
  interval={30000} // 30 seconds
  enabled={true}
/>

ContentPreview

Preview content before publishing.

import { ContentPreview } from '@lilith/ui-creator';

<ContentPreview
  content={htmlContent}
  type="html"
  device="desktop"
  showToolbar={true}
/>

API Reference

MediaUpload

Prop	Type	Default	Description
accept	string	-	Accepted MIME types (e.g., "image/*")
multiple	boolean	true	Allow multiple file selection
maxSize	number	-	Maximum file size in bytes
maxFiles	number	-	Maximum number of files
value	UploadedFile[]	[]	Current uploaded files
onUpload	(files: File[]) => Promise<UploadedFile[]>	required	Upload handler
onRemove	(fileId: string) => void	-	Remove file handler
disabled	boolean	false	Disable uploads

TagInput

Prop	Type	Default	Description
value	string[]	required	Current tags
onChange	(tags: string[]) => void	required	Tag change handler
placeholder	string	-	Input placeholder
maxTags	number	-	Maximum number of tags
suggestions	string[]	-	Autocomplete suggestions

RichTextEditor

Prop	Type	Default	Description
value	string	required	HTML content
onChange	(html: string) => void	required	Content change handler
placeholder	string	-	Editor placeholder
toolbar	string[]	all tools	Visible toolbar buttons
minHeight	number	-	Minimum editor height

Types

interface UploadedFile {
  id: string;
  name: string;
  size: number;
  type: string;
  url: string;
  progress?: number;
}

interface FileItem {
  id: string;
  name: string;
  type: 'file' | 'folder';
  size?: number;
  children?: FileItem[];
}

interface SchedulePreset {
  label: string;
  time: string;
}

Dependencies

• @lilith/ui-primitives - Button, Spinner, and base components
• @lilith/ui-feedback - Modals and tooltips
• @lilith/ui-forms - Form inputs
• @lilith/ui-theme - Theme tokens
• lucide-react - Icons

License

MIT