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:

All exported Edrevel elements, including <ed-alert>, <ed-button>, <ed-alert-dialog>, <ed-avatar>, <ed-avatar-group>, <ed-checkbox>, <ed-chip>, <ed-date-picker>, <ed-drawer>, <ed-dropdown>, <ed-empty-state>, <ed-input>, <ed-kpi-card>, <ed-modal>, <ed-pagination>, <ed-select>, <ed-surface>, <ed-switch>, <ed-tabs>, <ed-tab-list>, <ed-tab>, <ed-tab-panel>, <ed-tooltip>, <ed-toast>, <ed-table>, and composable table children.

In React / Next.js (.tsx / .jsx), start typing < to get autocomplete for React wrappers (<Button />, <AlertDialog />, <Avatar />, <Chip />, <DatePicker />, <Table />, <KpiCard />, etc.).

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

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:

Prefix	Component Inserted
`ed-button` / `edbtn`	Button with variant, size, and icon-only options
`ed-alert-dialog` / `edalert`	Modal alert dialog with statuses and actions
`ed-avatar` / `edavatar`	User avatar with fallback and status indicator
`ed-chip` / `edchip`	Tag/chip with variants, icons, and remove button
`ed-date-picker` / `eddate`	Date, datetime, and date-range picker
`ed-kpi-card` / `edkpi`	KPI scorecard with trend badge
`ed-input` / `edinp`	Form input with label and placeholder
`ed-select` / `edsel`	Accessible dropdown select
`ed-checkbox` / `edchk`	Animated custom checkbox
`ed-modal` / `edmod`	Modal dialog with footer action buttons
`ed-drawer` / `eddraw`	Slide-out panel drawer
`ed-table` / `edtbl`	Data-driven and composable table
`ed-table-composed`	Composable subcomponent table
`ed-pagination` / `edpag`	Pagination navigation controls
`ed-empty-state` / `edempty`	Empty state placeholder with slotted action

React and Next.js snippets are contributed through snippets/react.json; Angular snippets use Angular property/event binding through snippets/angular.json. HTML, Vue, and Svelte use the custom-element catalog in snippets/snippets.json.

📦 How to Install (for Developers)

Download or locate the generated .vsix file (e.g. edrevel-ui-toolkit-1.0.1.vsix).
Open VS Code.
Press Cmd + Shift + P (Mac) or Ctrl + Shift + P (Windows/Linux).
Type Extensions: Install from VSIX... and press Enter.
Select the edrevel-ui-toolkit-1.0.1.vsix file.
The extension is now active! Open any HTML, Angular, React, Vue, or Svelte file and start typing <ed-.

🛠️ How to Build & Package

From the root of the repository or from packages/vscode-extension:

# 1. Compile TypeScript extension code
pnpm --filter edrevel-ui-toolkit build

# 2. Package into .vsix installer
pnpm --filter edrevel-ui-toolkit package

Edrevel Design System UI

Edrevel UI