Edrevel UI — VS Code Extension

Official Visual Studio Code extension providing IntelliSense, Autocomplete, Hover Documentation, and Code Snippets for Edrevel UI Web Components (<ed-*>) and React wrappers (<Button>, <KpiCard>, etc.).

🚀 Features

1. Tag & Component Autocomplete

Start typing <ed- in any HTML, Angular, Vue, Svelte, or JSX file to get instant component suggestions.

Form and data components

<ed-button>, <ed-input>, <ed-select>, <ed-checkbox>, <ed-switch>, <ed-date-picker>, <ed-pagination>, <ed-table>, <ed-table-header>, <ed-table-body>, <ed-table-footer>, <ed-table-row>, <ed-table-head>, and <ed-table-cell>.

Feedback and overlay components

<ed-alert>, <ed-alert-dialog>, <ed-toast>, <ed-modal>, <ed-drawer>, <ed-dropdown>, and <ed-tooltip>.

Content and layout components

<ed-avatar>, <ed-avatar-group>, <ed-chip>, <ed-empty-state>, <ed-icon>, <ed-kpi-card>, <ed-balanced-grid>, <ed-surface>, <ed-tabs>, <ed-tab-list>, <ed-tab>, <ed-tab-panel>, and <ed-video-player>.

In React / Next.js (.tsx / .jsx), start typing < to get autocomplete for the corresponding React wrappers:

<Button />, <Input />, <Select />, <Checkbox />, <Switch />, <DatePicker />, <Pagination />, <Table />, <TableHeader />, <TableBody />, <TableFooter />, <TableRow />, <TableHead />, <TableCell />, <Alert />, <AlertDialog />, <Toast />, <Modal />, <Drawer />, <Dropdown />, <Tooltip />, <Avatar />, <AvatarGroup />, <Chip />, <EmptyState />, <Icon />, <KpiCard />, <BalancedGrid />, <Surface />, <Tabs />, <TabList />, <Tab />, <TabPanel />, and <VideoPlayer />.

2. Attribute & Enum Value IntelliSense

• Suggests available attributes inside open component tags.
• Suggests valid string literal options when typing attribute values:
  • variant=" → suggests only the values declared by the active component
  • size=" → suggests xs, sm, md, lg, xl, 2xl
  • density=" → suggests compact, normal, spacious
  • status=" → suggests info, success, warning, danger, neutral, ai
  • placement=" → suggests top, bottom, left, right, center
  • ed-toast → suggests default, success, warning, danger variants and six viewport placements

3. Rich Hover Documentation

Hover your mouse over any Edrevel component tag to view:

• Description and visual behavior.
• Full table of supported attributes, types, and default values.
• Supported events (ed-click, ed-change, ed-input, ed-close, ed-sort-change, ed-column-resize, ed-page-change, and component-specific events).
• Available slots (leading-icon, trailing-icon, footer, etc.).

4. Boilerplate Code Snippets

Type any snippet prefix and press Tab or Enter to expand a full component:

The ed-icon and ed-video-player components are available through tag, attribute, and hover IntelliSense. Selecting the ed-video-player completion inserts <ed-video-player src=""></ed-video-player> with the cursor inside src. In React, selecting VideoPlayer inserts <VideoPlayer src="" />.

The VideoPlayer rewind, forward, playback-speed, and Picture-in-Picture toolbar controls are hidden by default. Enable them with show-rewind, show-forward, show-playback-speed, and show-picture-in-picture (or the camelCase React props).

5. Framework Support

The extension provides component and attribute IntelliSense for:

• HTML
• Angular templates
• React and Next.js (.jsx, .tsx)
• Vue
• Svelte

Angular snippets use Angular property/event binding syntax, while React snippets use React props and event handler names.

Building and Packaging

Run these commands from the repository root:

# Compile the extension
pnpm --filter edrevel-ui-toolkit build

# Create the installable .vsix package
pnpm --filter edrevel-ui-toolkit package