feat: add VS Code extension (#1349)

* feat: add vscode extension

* feat: ts

* fix: skip npm

* chore: bump

* fix: aws param

* chore: add changeset

* feat: add dev flow

* fix: words

* feat: add hover and color preview

* fix: lock

* fix: transform

* fix: use rgba for accurate previews

* chore: update pattern

* feat: add icon

* chore: update gh action

.changeset/empty-chefs-grin.md

@@ -0,0 +1,7 @@
+---
+"launchpad-design-system": minor
+---
+
+- Add design token autocomplete
+- Show token details on hover
+- Show color box previews for color tokens

.github/workflows/release-vscode.yml

@@ -0,0 +1,51 @@
+name: Release LaunchPad VS Code Extension
+
+on:
+  push:
+    paths:
+      - 'apps/vscode/CHANGELOG.md'
+    branches:
+      - main
+
+jobs:
+  release-vscode:
+    # Prevents action from publishing on forks
+    if: github.repository == 'launchdarkly/launchpad-ui'
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      contents: read
+    steps:
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          audience: https://github.com/launchdarkly
+          role-to-assume: ${{ vars.AWS_ROLE_ARN }}
+          aws-region: us-east-1
+
+      - uses: dkershner6/aws-ssm-getparameters-action@v2
+        with:
+          parameterPairs: '/production/common/services/vscode_marketplace/vsce_pat = VSCE_PAT'
+          withDecryption: 'true'
+
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: pnpm/action-setup@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build extension
+        run: pnpm nx run launchpad-design-system:build
+
+      - name: Publish extension
+        run: pnpm --filter=launchpad-design-system publish

.gitignore

@@ -16,4 +16,5 @@ playwright-report/
 .nyc_output
 .idea
 .nx/cache
-.nx/workspace-data
+.nx/workspace-data
+*.vsix

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+	"recommendations": [
+		"biomejs.biome",
+		"GitHub.vscode-github-actions",
+		"connor4312.esbuild-problem-matchers"
+	]
+}

.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "launchpad-design-system: client",
+			"type": "extensionHost",
+			"request": "launch",
+			"runtimeExecutable": "${execPath}/apps/vscode",
+			"args": ["--extensionDevelopmentPath=${workspaceRoot}/apps/vscode"],
+			"outFiles": ["${workspaceRoot}/apps/vscode/dist/**/*.js"],
+			"preLaunchTask": "launchpad-design-system: start-dev",
+			"postDebugTask": "launchpad-design-system: stop-dev"
+		},
+		{
+			"name": "launchpad-design-system: server",
+			"type": "node",
+			"request": "attach",
+			"port": 6009,
+			"restart": true,
+			"outFiles": ["${workspaceRoot}/apps/vscode/dist/**/*.js"]
+		}
+	],
+	"compounds": [
+		{
+			"name": "launchpad-design-system: debug",
+			"configurations": ["launchpad-design-system: client", "launchpad-design-system: server"]
+		}
+	]
+}

.vscode/tasks.json

@@ -0,0 +1,31 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"label": "launchpad-design-system: start-dev",
+			"type": "shell",
+			"command": "pnpm --filter=launchpad-design-system watch",
+			"group": "build",
+			"isBackground": true,
+			"presentation": {
+				"panel": "dedicated",
+				"reveal": "always"
+			},
+			"problemMatcher": "$esbuild-watch"
+		},
+		{
+			"label": "launchpad-design-system: stop-dev",
+			"command": "echo ${input:terminate}",
+			"type": "shell",
+			"problemMatcher": []
+		}
+	],
+	"inputs": [
+		{
+			"id": "terminate",
+			"type": "command",
+			"command": "workbench.action.tasks.terminate",
+			"args": "terminateAll"
+		}
+	]
+}

apps/vscode/.vscodeignore

@@ -0,0 +1,5 @@
+**/*.ts
+node_modules
+
+../../**
+../**

apps/vscode/CONTRIBUTING.md

@@ -0,0 +1,23 @@
+# Contributing to the `LaunchPad Design System` VS Code extension
+
+We're happily taking pull requests! Please read the `launchpad-ui` contributing docs for general guidance on contributing to this codebase.
+
+## Development Workflow
+
+To get started with this project:
+
+1. Build the extension
+
+```sh
+$ pnpm nx run launchpad-design-system:build
+```
+
+2. Open the [VS Code debugger](https://code.visualstudio.com/api/get-started/your-first-extension#debugging-the-extension)
+3. Select `launchpad-design-system: debug` and press <kbd>F5</kbd> to start debugging
+4. Open a `.css` file in the `Extensions Development Host` window
+5. Start typing the extension trigger characters `--` to bring up the LaunchPad design tokens autocomplete
+6. Start making your changes to `launchpad-design-system`
+
+## Install locally
+
+To install the extension locally first build it and then [install the resulting .vsix file](https://code.visualstudio.com/docs/editor/extension-marketplace#_install-from-a-vsix).

apps/vscode/LICENSE.txt

@@ -0,0 +1 @@
+SEE LICENSE IN LICENSE.md AT https://github.com/launchdarkly/launchpad-ui.

apps/vscode/README.md

@@ -0,0 +1,9 @@
+# LaunchPad VS Code Extension
+
+VS Code extension for building with the LaunchDarkly LaunchPad Design System.
+
+## Features
+
+- Design tokens autocomplete
+- Token details on hover
+- Color box previews for color tokens

apps/vscode/package.json

@@ -0,0 +1,48 @@
+{
+	"name": "launchpad-design-system",
+	"private": true,
+	"displayName": "LaunchPad Design System",
+	"version": "0.0.1",
+	"publisher": "launchdarklyofficial",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/launchdarkly/launchpad-ui",
+		"directory": "apps/vscode"
+	},
+	"homepage": "https://github.com/launchdarkly/launchpad-ui/blob/main/apps/vscode/README.md",
+	"bugs": {
+		"url": "https://github.com/launchdarkly/launchpad-ui/issues"
+	},
+	"description": "LaunchPad VS Code extension",
+	"license": "SEE LICENSE IN LICENSE.txt",
+	"keywords": ["launchpad", "launchdarkly"],
+	"engines": {
+		"vscode": "^1.90.0"
+	},
+	"categories": ["Other"],
+	"icon": "images/osmo.png",
+	"galleryBanner": {
+		"color": "#00522E",
+		"theme": "light"
+	},
+	"activationEvents": ["onLanguage:css"],
+	"main": "dist/client.js",
+	"scripts": {
+		"vscode:prepublish": "esbuild ./src/client.ts ./src/server.ts --bundle --outdir=dist --external:vscode --format=cjs --platform=node",
+		"build": "pnpm dlx @vscode/vsce package --no-dependencies",
+		"publish": "pnpm dlx @vscode/vsce publish --no-dependencies",
+		"watch": "pnpm vscode:prepublish --watch"
+	},
+	"dependencies": {
+		"@launchpad-ui/tokens": "workspace:~",
+		"vscode-css-languageservice": "^6.3.0",
+		"vscode-languageclient": "^9.0.1",
+		"vscode-languageserver": "^9.0.1",
+		"vscode-languageserver-textdocument": "^1.0.11"
+	},
+	"devDependencies": {
+		"@types/vscode": "^1.90.0",
+		"esbuild": "0.23.1",
+		"style-dictionary": "^4.0.1"
+	}
+}

apps/vscode/src/client.ts

@@ -0,0 +1,49 @@
+import path from 'path';
+
+import type { ExtensionContext } from 'vscode';
+import type { LanguageClientOptions, ServerOptions } from 'vscode-languageclient/node';
+
+import { LanguageClient, TransportKind } from 'vscode-languageclient/node';
+
+let client: LanguageClient;
+
+export function activate(context: ExtensionContext) {
+	// The server is implemented in node
+	const serverModule = context.asAbsolutePath(path.join('dist', 'server.js'));
+	const debugOptions = { execArgv: ['--nolazy', '--inspect=6009'] };
+
+	// If the extension is launched in debug mode then the debug server options are used
+	// Otherwise the run options are used
+	const serverOptions: ServerOptions = {
+		run: { module: serverModule, transport: TransportKind.ipc },
+		debug: {
+			module: serverModule,
+			transport: TransportKind.ipc,
+			options: debugOptions,
+		},
+	};
+
+	// Options to control the language client
+	const clientOptions: LanguageClientOptions = {
+		// Register the server for plain text documents
+		documentSelector: [{ scheme: 'file', language: 'css' }],
+	};
+
+	// Create the language client and start the client.
+	client = new LanguageClient(
+		'LaunchPadDesignSystem',
+		'LaunchPad Design System',
+		serverOptions,
+		clientOptions,
+	);
+
+	// Start the client. This will also launch the server
+	client.start();
+}
+
+export function deactivate(): Thenable<void> | undefined {
+	if (!client) {
+		return undefined;
+	}
+	return client.stop();
+}