Component Catalog Assistant README

An extension to hook into Lucid's Component Catalog and make it easier to find and fix our frontend components to meet our standards.

The Component Catalog not only documents many of our standardized components, but also includes descriptions of components, CSS classes, or various other HTML structures that have been deprecated or require further review. You can find details on those here.

Features

The Catalog Assistant extension uses data from the Component Catalog to mark your code inline when it does not meet the Catalog's standards.

It also includes Quick Fixes for many of these cases, but it should be noted that the new components don't necessarily have the same fields as the ones they're replacing. Look up the component in our repository to find all the new inputs and properties!

Additionally, the extension provides auto-completion for LESS variables when you type @ in CSS value contexts.

Extension Settings

This extension contributes the following settings:

• componentCatalogAssistant.lucidMainPathOverride: Override the path to the Lucid repository. By default, the extension uses your workspace folder path. Only set this if you need to use a different path (e.g., if working with multiple repositories or a non-standard setup).

• componentCatalogAssistant.lessVariablesPattern: Glob pattern(s) of LESS files to scan for variable definitions, relative to the workspace root. Defaults to ["cake/app/webroot/ts/css-includes/coreux/**/_*.less"]. Used for auto-completion of LESS variables.

• componentCatalogAssistant.lessVariablesExcludedSubstrings: Exclude LESS variables containing any of these substrings in their name. Defaults to ["var", "deprecated", "old"]. This helps filter out unwanted variables from auto-completion suggestions.

Known Issues

• Currently the Assistant has somewhat limited ability to transform old components into new components and makes many assumptions about the structure of the data. Our current Catalog does not define any complicated fixes, so this is fine for now, but in the future we may want to clean up the format of the data and make it capable of describing more complex transformations.
• Ctrl+click on the 'path/to/file' in a LESS import does not work. This is a known VSCode bug.
• The extension does not resolve Ctrl+click to LESS variables from imported files.

Release Notes

2.1.1

Default the workspace directory as the Lucid main repository

• Fixes Ctrl+click jumping outside workspaces
• The lucidMainPath configuration is now a lucidMainPathOverride configuration

2.1.0

Added LESS variables auto-completion. Type @ in a LESS file value context to see suggestions. Configurable via lessVariablesPattern and lessVariablesExcludedSubstrings settings.

2.0.2

Support l3 and worktrees, by getting deprecation data from whatever worktree branch is aliased in /var/lucid/main.

2.0.1

Re-released under UFO management, instead of privately by Owen Krafft.

2.0.0

• Added LESS support. LESS properties and values can now be marked as deprecated/Needs Review by the extension.
• Added support for resolving components, classes, ids, and LESS imports to their definitions.
  • Ctrl+click a Lucid component in a .component.html file to jump to its TypeScript file, or to its usages in LESS rules.
  • Ctrl+click a class or id in a .component.html file to jump to its usages in LESS rules.
  • Ctrl+click on a LESS @import to jump to the corresponding file.
• Incorporated the "How to fix" links from the Component Catalog into the tooltips for warnings and deprecations. These frequently link to our Confluence pages for more information on the issue.
• Added support for One Off warnings (treated similar to Needs Review warnings).

1.0.2

Fixed an issue where components were being marked when they shouldn't have been. Updated wording around components that require review by #ufo-strata-support.

1.0.1

Fixed the content of tags being marked by the Assistant. Now only the opening and closing tags will be marked.

1.0.0

Initial Release.