@editora/ui-react

Overview

@editora/ui-react provides React-native ergonomics on top of Web Components from @editora/ui-core. It includes typed wrappers, hooks for common workflows, and providers for dialogs and theme state.

Installation

npm install @editora/ui-react @editora/ui-core

Peer dependencies: react, react-dom.

Quick Start

import { Button, Input, ThemeProvider } from '@editora/ui-react';

export function App() {
 return (
 <ThemeProvider>
 <div style={{ display: 'grid', gap: 12, maxWidth: 360 }}>
 <Input name="title" label="Title" placeholder="Untitled" clearable />
 <Button variant="primary">Save</Button>
 </div>
 </ThemeProvider>
 );
}

Import Rule

Providers and Hooks

Common Patterns

1. Form + useForm

import { Form, Field, Input, Button, useForm } from '@editora/ui-react';

export function ProfileForm() {
 const { ref, submit, validate, getValues, reset, isDirty } = useForm();

 return (
 <Form
 ref={ref}
 autosave
 guardUnsaved
 onSubmit={(values) => console.log('submit', values)}
 onInvalid={(errors) => console.log('invalid', errors)}
 >
 <Field label="Full name" required>
 <Input name="fullName" required />
 </Field>

 <Field label="Email" required>
 <Input name="email" type="email" required />
 </Field>

 <Button onClick={() => submit()} disabled={!isDirty()}>Submit</Button>
 <Button variant="secondary" onClick={() => reset()}>Reset</Button>
 <Button variant="secondary" onClick={() => console.log(getValues())}>Values</Button>
 </Form>
 );
}

2. Dialog providers

import { DialogProvider, useDialog, AlertDialogProvider, useAlertDialog, Button } from '@editora/ui-react';

function Actions() {
 const dialog = useDialog();
 const alerts = useAlertDialog();

 return (
 <div style={{ display: 'flex', gap: 8 }}>
 <Button onClick={async () => {
 const res = await dialog.confirm({ title: 'Archive project?' });
 console.log(res);
 }}>Confirm</Button>

 <Button variant="secondary" onClick={async () => {
 const res = await alerts.prompt({ title: 'Rename' });
 console.log(res);
 }}>Prompt</Button>
 </div>
 );
}

export function DialogExample() {
 return (
 <DialogProvider>
 <AlertDialogProvider>
 <Actions />
 </AlertDialogProvider>
 </DialogProvider>
 );
}

3. Data table workflows

import { DataTable, Pagination } from '@editora/ui-react';
import { useState } from 'react';

export function UsersTable() {
 const [page, setPage] = useState(1);

 return (
 <div style={{ display: 'grid', gap: 10 }}>
 <DataTable
 sortable
 selectable
 page={page}
 pageSize={10}
 paginationId="users-pager"
 onPageChange={(d) => setPage(d.page)}
 onSortChange={(d) => console.log('sort', d)}
 onRowSelect={(d) => console.log('rows', d.indices)}
 >
 {/* table markup */}
 </DataTable>

 <Pagination id="users-pager" page={String(page)} />
 </div>
 );
}

4. Gantt planning workspace

Gantt provides an interactive project timeline for release plans, delivery roadmaps, and dependency-heavy schedules. It supports task, summary, and milestone rows; baselines; critical tasks; split segments; dependency links; drag/resize editing; keyboard selection; and virtualized rendering for large plans.

import { Gantt, type GanttLink, type GanttTask } from '@editora/ui-react';
import { useState } from 'react';

const initialTasks: GanttTask[] = [
 {
 id: 'foundation',
 label: 'Foundation build',
 start: '2026-02-01',
 end: '2026-02-18',
 progress: 68,
 baselineStart: '2026-01-29',
 baselineEnd: '2026-02-14',
 critical: true
 },
 {
 id: 'launch',
 label: 'Launch milestone',
 start: '2026-02-28',
 type: 'milestone',
 tone: 'success'
 }
];

const links: GanttLink[] = [
 { id: 'foundation-launch', source: 'foundation', target: 'launch', type: 'e2s' }
];

export function ReleasePlan() {
 const [tasks, setTasks] = useState(initialTasks);

 return (
 <Gantt
 tasks={tasks}
 links={links}
 zoom="week"
 sort="start"
 barVariant="soft"
 onTaskChange={({ id, start, end }) => {
 setTasks((items) => items.map((task) => (
 task.id === id ? { ...task, start: start ?? task.start, end: end ?? task.end } : task
 )));
 }}
 onTaskDelete={({ id }) => setTasks((items) => items.filter((task) => task.id !== id))}
 onLinkSelect={(detail) => console.log('dependency selected', detail)}
 />
 );
}

• Dependency types: e2s, s2s, e2e, and s2e.
• Bar variants: solid, soft, striped, outline, and glass.
• Scale support: automatic row virtualization for large schedules, including the 10,000-task Storybook example.

Component Groups

• Forms: Form, Field, Input, Textarea, Select, Combobox, Switch, Checkbox, DatePicker, ColorPicker
• Data: DataTable, Pagination, Table, Calendar, Chart, Timeline, Gantt, Progress
• Overlay: Dialog, AlertDialog, Popover, Tooltip, Dropdown, Drawer
• Layout: Layout, Sidebar, Tabs, Grid, Flex, Container, Section

Theming

import { ThemeProvider } from '@editora/ui-react';

<ThemeProvider
 tokens={{
 colors: { primary: '#0f766e', text: '#0f172a', background: '#ffffff' },
 radius: '10px'
 }}
 storageKey="my-app.theme"
>
 {/** app */}
</ThemeProvider>

SSR and StrictMode Notes

• Providers are SSR-safe and create host nodes on client mount.
• Promise dialog providers are StrictMode-safe and clean up on unmount.
• Avoid calling custom element imperative methods until component mount is complete.

Production Guidance

• Keep root imports from @editora/ui-react to avoid registration drift.
• Batch expensive state updates around large table operations.
• Prefer declarative props over direct DOM mutation of wrapped components.