"Calcite Design System is a collection of design and development resources for creating beautiful, easy to use, cohesive experiences across apps with minimal effort. It includes a UI kit, icons, color schemes, and a web component library with UI elements such as buttons, panels, accordions, alerts, and many more" (Calcite Design System.
This is an unofficial extension for the Calcite Design System components created as a part of Esri's monthly First Friday Hack from October and November 2023.
| Technology Name | Version | Description | Download |
|---|---|---|---|
| Node.js | Latest | Needed for building and running the extension. | https://nodejs.org/en/download |
| VSCode | Latest | Platform the extension is used on! | https://code.visualstudio.com/download |
| git | Latest | Only needed if you'd like to contribute. You can just download the zip if you just want to run it. | https://git-scm.com/downloads |
The extension has not been published in the VSCode extension store yet.
See notes here: https://github.com/abp6318/calcite-snippets/blob/main/vsc-extension-quickstart.md#install-your-extension
- Name (string, required) = Name of Calcite component; capital case with spaces
- Prefix (string, required) = See formatting options below.
calcite-alert= Component tagscalcite-alert_required-attributes= Component with only required attributescalcite-alert_default-attributes= Component with all default and required attributescalcite-alert_example= Component example (can include sub-components)
- Description (string, required) = Description of Calcite component; sentence case
- Body (string, required) = Code block; add to snippet.html
First, add your snippet to snippet.html, then once formatted the way you want, run the snippify.js script by using the following. You will then be prompted for the name, prefix, and description.
npm run snippify
Testing your changes is relatively simple once you've run npm run snippify and completed the prompts. Inside the .vscode directory are two essential files for testing: launch.json and tasks.json.
Open up the debug tab (using shift + command + D on Mac or shift + windows + D on Windows). You should see a small dropdown at the top; select the option that says ~Launch Extension~. This label may change in the future if the launch.json file is updated.
Press the run button (a green triangle in the same area) and a new Extension Development Host (EDH) window will open; it will look similar to an empty/repo-less VSCode window. Create a new file in this EDH and begin typing out a prefix for a calcite component. It should appear as an option.
To clean up your testing environment, close your EDH by either hitting the red 'x' or going back to the VSCode window you started the debugger from and hit the stop button (a red square).
- For testing your changes: https://github.com/abp6318/calcite-snippets/edit/main/README.md#testing-your-changes
- For finding the app in the store: (TBD upon publication)
Using a snippets extension in VSCode is relatively simple, considering they are meant to assist users in development. Once you have the extension installed (or you are in the Extension Development Host mentioned in the testing section), all you need to do is begin typing out the prefix and the snippet should appear as an option.
- Extensions
- Esri & Calcite
- Calcite Design System: https://developers.arcgis.com/calcite-design-system/
- Esri Home: https://www.esri.com/en-us/home
- ArcGIS Hub: https://hub.arcgis.com/
If you are not a part of Esri, but are interested in contributing, please contact me.
- Aaron Putterman
- aputterman@esri.com
- https://www.linkedin.com/in/aaron-putterman/