|
| 1 | +import { Canvas, Meta, Story } from '@storybook/addon-docs'; |
| 2 | + |
| 3 | +import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'; |
| 4 | + |
| 5 | +import iframeImage from './images/update-css-variables-iframe.png'; |
| 6 | +import stylesImage from './images/update-css-variables-styles.png'; |
| 7 | +import bodyImage from './images/update-css-variables-body.png'; |
| 8 | + |
| 9 | +<Meta title="Overview" /> |
| 10 | + |
| 11 | +Welcome to the Storybook for **CodeQL for Visual Studio Code**! This Storybook contains stories for components and pages in the extension. |
| 12 | + |
| 13 | +### Writing stories |
| 14 | + |
| 15 | +To create new stories, copy an existing story in the `src/stories` directory and modify it to use your component or page. Please note that |
| 16 | +you are not able to access any VSCode specific APIs or receive messages from VSCode so an ideal component would use generic props. The |
| 17 | +`vscode.postMessage` API is mocked but no message will be sent. |
| 18 | + |
| 19 | +You are able to use all VSCode CSS variables; these are injected into the Storybook preview. However, only the Dark+ theme is supported. It |
| 20 | +is currently not possible to preview your component in another theme. |
| 21 | + |
| 22 | +For more information about how to write stories and how to add controls, please see the |
| 23 | +[Storybook documentation](https://storybook.js.org/docs/react/writing-stories/introduction). |
| 24 | + |
| 25 | +### WebView UI Toolkit |
| 26 | + |
| 27 | +As much as possible, we try to make use of the [WebView UI Toolkit](https://github.com/microsoft/vscode-webview-ui-toolkit). The Storybook |
| 28 | +for the WebView UI Toolkit can be found [here](https://microsoft.github.io/vscode-webview-ui-toolkit/). |
| 29 | + |
| 30 | +### Updating VSCode CSS variables |
| 31 | + |
| 32 | +The VSCode CSS variables that are injected into the Storybook preview are defined in the `src/stories/vscode-theme.css` file. They need to be |
| 33 | +updated manually if new variables are added to VSCode. It can also be updated if you would like to manually preview a different theme. To update |
| 34 | +these variables, follow these steps: |
| 35 | + |
| 36 | +1. Make sure you have selected the correct theme. If you want to use a variable which is currently not available and will be committed, please |
| 37 | +select the **Dark+** theme. You can use **Preferences: Color Theme** in the *Command Palette* to select the theme. |
| 38 | +2. Open a WebView in VSCode (for example the results of a query) |
| 39 | +3. Open the *Command Palette* (Ctrl/Cmd+Shift+P) |
| 40 | +4. Select **Developer: Open WebView Developer Tools** |
| 41 | +5. Now, you will need to find the `<html>` element in the lowest-level `<iframe>`. See the image below: |
| 42 | + |
| 43 | +<img src={iframeImage} /> |
| 44 | + |
| 45 | +6. Once you have selected the `<html>` element as in the image above, click on **Show All Properties (... more)** (see image below). This will |
| 46 | +expand all CSS variables. |
| 47 | + |
| 48 | +<img src={stylesImage} /> |
| 49 | + |
| 50 | +7. Copy all variables to the `src/stories/vscode-theme.css` file. |
| 51 | +8. Now, select the `<body>` element which is a direct child of the `<html>` element. |
| 52 | +9. This time, you do not need to copy the variables. Instead, copy the styles on the `<body>` element to the `src/stories/vscode-theme.css` file. |
| 53 | +See the image below for which styles need to be copied. |
| 54 | + |
| 55 | +<img src={bodyImage} /> |
0 commit comments