Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
AI
/
kilocode
-ын хуулбар https://github.com/Kilo-Org/kilocode.git
2
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Салаа: fix/ghost-auto-bracket-detection
Салаанууд Тагууд
kilocode
/
apps
/
storybook
Chris Hasson 98c4d89f41 feat(marketplace): add descriptions to the MCP and modes marketplace headers (#3382) 3 сар өмнө
..
.storybook 0d4a18fd0f Add colorized SVG-based autocomplete decorations (#2417) 5 сар өмнө
generated-theme-styles 5ac54401fd refactor(e2e, storybook): improve reliability of theme variable extraction by aligning with VS Code (#1801) 5 сар өмнө
scripts 5ac54401fd refactor(e2e, storybook): improve reliability of theme variable extraction by aligning with VS Code (#1801) 5 сар өмнө
src b146bcde23 remove old multiplace diff svg style autocomplete 3 сар өмнө
stories 98c4d89f41 feat(marketplace): add descriptions to the MCP and modes marketplace headers (#3382) 3 сар өмнө
.gitignore 6f5c825f60 Add Playwright Screenshots to Chromatic (#1234) 7 сар өмнө
README.md 3529a8eb53 feat(storybook): Add VS Code theme generation and theme switcher (#755) 8 сар өмнө
package.json 5609a95c6a refactor(storybook): Centralize QueryClient export for Storybook 5 сар өмнө
tsconfig.json e02c2d243f Introduce Storybook for easier webview component testing (#741) 8 сар өмнө

README.md

Storybook

Component library and design system documentation for the VS Code extension.

Quick Start

# Install dependencies
pnpm install

# Run Storybook
pnpm storybook

Visit http://localhost:6006 to view the component library.

VS Code Themes

This Storybook uses automatically generated VS Code themes to ensure our components match the official VS Code appearance exactly. The themes are generated from Microsoft's official VS Code theme files and converted to CSS variables.

Available Themes

  • Dark Modern - VS Code's default dark theme
  • Light Modern - VS Code's default light theme

Use the theme switcher in the Storybook toolbar to toggle between themes.

Theme Regeneration

The theme CSS files are checked into the repository and rarely need updating. To regenerate themes (only needed when VS Code releases new theme updates):

pnpm generate-theme-styles

This script:

  1. Fetches the latest theme JSON files from the VS Code repository
  2. Resolves theme includes (e.g., dark_modern includes dark_plus)
  3. Converts theme colors to CSS variables (e.g., editor.background → --vscode-editor-background)
  4. Outputs CSS files to .storybook/themes/

Scripts

  • pnpm storybook - Start development server
  • pnpm build - Build static Storybook
  • pnpm generate-theme-styles - Regenerate VS Code theme CSS files
  • pnpm test - Run component tests