CareFlow Styleguide (VSCode Extension)

The CareFlow Styleguide extension provides a comprehensive visual and code-based interface for developers working with the Careflow design system. This extension integrates a tree view with a webview to display related data, preview templates, and offer class, template snippets.

Features

Combined Tree and Webview Interface

Navigate the Careflow design system using the tree view.
Preview selected items within the webview.

Live Data Preview

Dynamically update the iframe with the selected component or style.

Code Formatting

View neatly formatted code templates below the preview section.

Icons Preview

Easily copy the HTML template of any icon to your clipboard by simply clicking on the icon in the preview section.

Snippets

Quickly insert utility classes with pre-defined snippets.

Usage

Click on the icon in the VS Code sidebar, and the tree and webview will be displayed in VS Code.

Preview and Code Display

Click on a tree item to see its preview and corresponding code in the webview.

Snippets

Quickly insert utility class names and component templates with pre-defined snippets.

Requirements

Visual Studio Code version 1.91.0 or higher

Installation

Install the extension from the VS Code Marketplace.
Open your workspace and start using the Careflow Style Guide by navigating the tree view.

Extension Settings

No specific settings are required. The extension works out of the box with any workspace containing Careflow components.

CareFlow Styleguide