mrva/vscode-codeql
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #3480 from github/dependabot/npm_and_yarn/extensions/ql-vscode/storybook-ea1bb043e9

Browse Source 
Bump the storybook group in /extensions/ql-vscode with 11 updates
This commit is contained in:
Koen Vlaswinkel
2024-03-20 14:50:38 +01:00
committed by GitHub
parent 6c3b0b5bb1 8c3d3b62f5
commit 9e1ca91676
7 changed files with 1368 additions and 5573 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
extensions/ql-vscode/.babelrc.json
View File

@@ -1,16 +0,0 @@
{
"sourceType": "unambiguous",
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": 100
}
}
],
"@babel/preset-typescript",
"@babel/preset-react"
],
"plugins": []
}

6
extensions/ql-vscode/.storybook/main.ts
View File

@@ -1,7 +1,7 @@
import type { StorybookConfig } from "@storybook/react-webpack5";
import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
@@ -10,7 +10,7 @@ const config: StorybookConfig = {
"./vscode-theme-addon/preset.ts",
],
framework: {
name: "@storybook/react-webpack5",
name: "@storybook/react-vite",
options: {},
},
docs: {

4
extensions/ql-vscode/.storybook/vscode-theme-addon/ThemeSelector.tsx
View File

@@ -5,10 +5,10 @@ import { useCallback } from "react";
import { useGlobals } from "@storybook/manager-api";
import {
IconButton,
Icons,
TooltipLinkList,
WithTooltip,
} from "@storybook/components";
import { DashboardIcon } from "@storybook/icons";
import { themeNames, VSCodeTheme } from "./theme";
@@ -53,7 +53,7 @@ export const ThemeSelector: FunctionComponent = () => {
title="Change the theme of the preview"
active={vscodeTheme !== VSCodeTheme.Dark}
>
<Icons icon="dashboard" />
<DashboardIcon />
</IconButton>
</WithTooltip>
);

39
extensions/ql-vscode/.storybook/vscode-theme-addon/withTheme.ts
View File

@@ -1,3 +1,5 @@
/// <reference types="vite/client" />
import { useEffect } from "react";
import type {
PartialStoryFn as StoryFunction,
@@ -6,31 +8,20 @@ import type {
import { VSCodeTheme } from "./theme";
import darkThemeStyle from "../../src/stories/vscode-theme-dark.css?url";
import lightThemeStyle from "../../src/stories/vscode-theme-light.css?url";
import lightHighContrastThemeStyle from "../../src/stories/vscode-theme-light-high-contrast.css?url";
import darkHighContrastThemeStyle from "../../src/stories/vscode-theme-dark-high-contrast.css?url";
import githubLightDefaultThemeStyle from "../../src/stories/vscode-theme-github-light-default.css?url";
import githubDarkDefaultThemeStyle from "../../src/stories/vscode-theme-github-dark-default.css?url";
const themeFiles: { [key in VSCodeTheme]: string } = {
[VSCodeTheme.Dark]:
// eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
require("!file-loader?modules!../../src/stories/vscode-theme-dark.css")
.default,
[VSCodeTheme.Light]:
// eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
require("!file-loader?modules!../../src/stories/vscode-theme-light.css")
.default,
[VSCodeTheme.LightHighContrast]:
// eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
require("!file-loader?modules!../../src/stories/vscode-theme-light-high-contrast.css")
.default,
[VSCodeTheme.DarkHighContrast]:
// eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
require("!file-loader?modules!../../src/stories/vscode-theme-dark-high-contrast.css")
.default,
[VSCodeTheme.GitHubLightDefault]:
// eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
require("!file-loader?modules!../../src/stories/vscode-theme-github-light-default.css")
.default,
[VSCodeTheme.GitHubDarkDefault]:
// eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
require("!file-loader?modules!../../src/stories/vscode-theme-github-dark-default.css")
.default,
[VSCodeTheme.Dark]: darkThemeStyle,
[VSCodeTheme.Light]: lightThemeStyle,
[VSCodeTheme.LightHighContrast]: lightHighContrastThemeStyle,
[VSCodeTheme.DarkHighContrast]: darkHighContrastThemeStyle,
[VSCodeTheme.GitHubLightDefault]: githubLightDefaultThemeStyle,
[VSCodeTheme.GitHubDarkDefault]: githubDarkDefaultThemeStyle,
};
export const withTheme = (StoryFn: StoryFunction, context: StoryContext) => {

6831
extensions/ql-vscode/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

31
extensions/ql-vscode/package.json
View File

@@ -1995,17 +1995,19 @@
"@github/markdownlint-github": "^0.6.0",
"@octokit/plugin-throttling": "^8.0.0",
"@playwright/test": "^1.40.1",
"@storybook/addon-a11y": "^7.6.15",
"@storybook/addon-actions": "^7.1.0",
"@storybook/addon-essentials": "^7.1.0",
"@storybook/addon-interactions": "^7.1.0",
"@storybook/addon-links": "^7.1.0",
"@storybook/components": "^7.6.17",
"@storybook/addon-a11y": "^8.0.2",
"@storybook/addon-actions": "^8.0.2",
"@storybook/addon-essentials": "^8.0.2",
"@storybook/addon-interactions": "^8.0.2",
"@storybook/addon-links": "^8.0.2",
"@storybook/blocks": "^8.0.2",
"@storybook/components": "^8.0.2",
"@storybook/csf": "^0.1.1",
"@storybook/manager-api": "^7.6.7",
"@storybook/react": "^7.1.0",
"@storybook/react-webpack5": "^7.6.12",
"@storybook/theming": "^7.6.12",
"@storybook/icons": "^1.2.9",
"@storybook/manager-api": "^8.0.2",
"@storybook/react": "^8.0.2",
"@storybook/react-vite": "^8.0.2",
"@storybook/theming": "^8.0.2",
"@testing-library/dom": "^9.3.4",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.2.1",
@@ -2041,7 +2043,6 @@
"applicationinsights": "^2.9.4",
"cosmiconfig": "^9.0.0",
"cross-env": "^7.0.3",
"css-loader": "^6.10.0",
"del": "^6.0.0",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.0.0",
@@ -2055,7 +2056,6 @@
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-storybook": "^0.8.0",
"file-loader": "^6.2.0",
"glob": "^10.0.0",
"gulp": "^4.0.2",
"gulp-esbuild": "^0.12.0",
@@ -2068,19 +2068,18 @@
"lint-staged": "^15.0.2",
"markdownlint-cli2": "^0.12.1",
"markdownlint-cli2-formatter-pretty": "^0.0.5",
"mini-css-extract-plugin": "^2.8.1",
"npm-run-all": "^4.1.5",
"patch-package": "^8.0.0",
"prettier": "^3.2.5",
"storybook": "^7.6.15",
"storybook": "^8.0.2",
"tar-stream": "^3.1.7",
"through2": "^4.0.2",
"ts-jest": "^29.0.1",
"ts-json-schema-generator": "^1.1.2",
"ts-loader": "^9.4.2",
"ts-node": "^10.7.0",
"ts-unused-exports": "^10.0.0",
"typescript": "^5.0.2"
"typescript": "^5.0.2",
"vite": "^5.2.0"
},
"lint-staged": {
"./**/*.{json,css,scss}": [

14
extensions/ql-vscode/src/stories/Overview.stories.mdx → extensions/ql-vscode/src/stories/Overview.mdx
View File

@@ -1,4 +1,4 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Canvas, Meta, Story } from '@storybook/blocks';
import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
@@ -39,23 +39,29 @@ updated manually if new variables are added to VSCode. It can also be updated if
these variables, follow these steps:
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
select the **Dark+** theme. You can use **Preferences: Color Theme** in the *Command Palette* to select the theme.
select the **Dark+** theme. You can use **Preferences: Color Theme** in the *Command Palette* to select the theme.
2. Open a WebView in VSCode (for example the results of a query)
3. Open the *Command Palette* (Ctrl/Cmd+Shift+P)
4. Select **Developer: Open WebView Developer Tools**
5. Now, you will need to find the `<html>` element in the lowest-level `<iframe>`. See the image below:
<img src={iframeImage} alt="The iframe element showing in the VS Code webview developer tools element inspector" />
6. Once you have selected the `<html>` element as in the image above, click on **Show All Properties (... more)** (see image below). This will
expand all CSS variables.
expand all CSS variables.
<img src={stylesImage} alt="The styles tab of the VS Code webview developer tools element inspector" />
7. Copy all variables to the `src/stories/vscode-theme-dark.css` file.
8. Now, select the `<body>` element which is a direct child of the `<html>` element.
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-dark.css` file.
See the image below for which styles need to be copied.
See the image below for which styles need to be copied.
<img src={bodyImage} alt="The styles on the body element showing in the VS Code webview developer tools element inspector" />