Careflow Style Guide

The Careflow Style Guide 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

1. Navigation:

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

2. Preview and Code Display:

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

3. Snippets:

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

Requirements

• Visual Studio Code version 1.91.0 or higher

Installation

1. Install the extension from the VS Code Marketplace.
2. 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.

License

This extension is licensed under the MIT License.