mirror of
https://github.com/sourcegraph/sourcegraph.git
synced 2026-02-06 14:51:44 +00:00
migrate to storybook 7 (#57437)
- storybook-addon-designs was renamed to @storybook/addon-designs
This commit is contained in:
Quinn Slack
GitHub
parent
3051c1e321
commit
b3ee44f32d
@ -1,7 +1,7 @@
|
||||
// @ts-check
|
||||
|
||||
const config = {
|
||||
extends: '@sourcegraph/eslint-config',
|
||||
extends: ['@sourcegraph/eslint-config', 'plugin:storybook/recommended'],
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
@ -31,7 +31,7 @@ const config = {
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: ['@sourcegraph/sourcegraph', 'monorepo', '@sourcegraph/wildcard'],
|
||||
plugins: ['@sourcegraph/sourcegraph', 'monorepo', '@sourcegraph/wildcard', 'storybook'],
|
||||
rules: {
|
||||
// Rules that are specific to this repo
|
||||
// All other rules should go into https://github.com/sourcegraph/eslint-config
|
||||
|
||||
@ -210,6 +210,7 @@ js_library(
|
||||
":node_modules/eslint-plugin-react",
|
||||
":node_modules/eslint-plugin-react-hooks",
|
||||
":node_modules/eslint-plugin-rxjs",
|
||||
":node_modules/eslint-plugin-storybook",
|
||||
":node_modules/eslint-plugin-unicorn",
|
||||
":node_modules/eslint-plugin-unused-imports",
|
||||
":node_modules/react", # required to resolve the react version for eslint-plugin-react
|
||||
|
||||
@ -60,10 +60,10 @@ ts_project(
|
||||
":node_modules/@sourcegraph/wildcard",
|
||||
"//:node_modules/@storybook/addon-actions",
|
||||
"//:node_modules/@storybook/addon-console",
|
||||
"//:node_modules/@storybook/addons",
|
||||
"//:node_modules/@storybook/core-common",
|
||||
"//:node_modules/@storybook/react",
|
||||
"//:node_modules/@storybook/react-webpack5",
|
||||
"//:node_modules/@storybook/theming",
|
||||
"//:node_modules/@storybook/types",
|
||||
"//:node_modules/@types/case-sensitive-paths-webpack-plugin",
|
||||
"//:node_modules/@types/classnames",
|
||||
"//:node_modules/@types/lodash",
|
||||
@ -80,7 +80,6 @@ ts_project(
|
||||
"//:node_modules/react",
|
||||
"//:node_modules/signale",
|
||||
"//:node_modules/speed-measure-webpack-plugin",
|
||||
"//:node_modules/storybook-addon-designs",
|
||||
"//:node_modules/webpack",
|
||||
"//:node_modules/webpack-manifest-plugin",
|
||||
],
|
||||
|
||||
@ -8,12 +8,12 @@
|
||||
"main": "./src/index.ts",
|
||||
"scripts": {
|
||||
"lint:js": "eslint --cache 'src/**/*.[jt]s?(x)'",
|
||||
"start": "TS_NODE_TRANSPILE_ONLY=true start-storybook -p 9001 -c ./src",
|
||||
"start:chromatic": "CHROMATIC=true TS_NODE_TRANSPILE_ONLY=true start-storybook -p 9001 -c ./src",
|
||||
"build": "TS_NODE_TRANSPILE_ONLY=true build-storybook -c ./src",
|
||||
"build:webpack-stats": "TS_NODE_TRANSPILE_ONLY=true WEBPACK_DLL_PLUGIN=false start-storybook -c ./src --smoke-test --webpack-stats-json ./storybook-static --loglevel warn",
|
||||
"start": "TS_NODE_TRANSPILE_ONLY=true sb dev -p 9001 -c ./src",
|
||||
"start:chromatic": "CHROMATIC=true TS_NODE_TRANSPILE_ONLY=true sb dev -p 9001 -c ./src",
|
||||
"build": "TS_NODE_TRANSPILE_ONLY=true sb build -c ./src",
|
||||
"build:webpack-stats": "TS_NODE_TRANSPILE_ONLY=true WEBPACK_DLL_PLUGIN=false sb build -c ./src --smoke-test --webpack-stats-json ./storybook-static --loglevel warn",
|
||||
"build:dll-bundle": "TS_NODE_TRANSPILE_ONLY=true webpack --config ./src/webpack.config.dll.ts --no-stats",
|
||||
"start:dll": "TS_NODE_TRANSPILE_ONLY=true WEBPACK_DLL_PLUGIN=true start-storybook -p 9001 -c ./src",
|
||||
"start:dll": "TS_NODE_TRANSPILE_ONLY=true WEBPACK_DLL_PLUGIN=true sb dev -p 9001 -c ./src",
|
||||
"clean:dll": "rm -rf assets/dll-bundle storybook-static/*-stats.json",
|
||||
"test": "jest"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { ReactElement } from 'react'
|
||||
|
||||
import type { DecoratorFunction } from '@storybook/addons'
|
||||
import type { Decorator } from '@storybook/react'
|
||||
|
||||
import { ChromaticRoot } from './ChromaticRoot'
|
||||
|
||||
@ -13,7 +13,7 @@ import { ChromaticRoot } from './ChromaticRoot'
|
||||
* If the `chromatic.enableDarkMode` story parameter is set to `true`, the story will
|
||||
* be rendered twice in Chromatic — in light and dark modes.
|
||||
*/
|
||||
export const withChromaticThemes: DecoratorFunction<ReactElement> = (StoryFunc, { parameters }) => {
|
||||
export const withChromaticThemes: Decorator<ReactElement> = (StoryFunc, { parameters }) => {
|
||||
if (parameters?.chromatic?.enableDarkMode) {
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import path from 'path'
|
||||
|
||||
import type { Options, StorybookConfig } from '@storybook/core-common'
|
||||
import type { StorybookConfig as ReactWebpack5StorybookConfig } from '@storybook/react-webpack5'
|
||||
import type { Options, StorybookConfig } from '@storybook/types'
|
||||
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'
|
||||
import { remove } from 'lodash'
|
||||
import signale from 'signale'
|
||||
@ -63,20 +64,29 @@ const getDllScriptTag = (): string => {
|
||||
`
|
||||
}
|
||||
|
||||
const isStoryshotsEnvironment = globalThis.navigator?.userAgent?.match?.('jsdom')
|
||||
|
||||
interface Config extends StorybookConfig {
|
||||
// Custom extension until `StorybookConfig` is fixed by adding this field.
|
||||
previewHead: (head: string) => string
|
||||
}
|
||||
|
||||
const config: Config = {
|
||||
framework: '@storybook/react',
|
||||
const config: Config & ReactWebpack5StorybookConfig = {
|
||||
framework: {
|
||||
name: '@storybook/react-webpack5',
|
||||
|
||||
options: {
|
||||
builder: {
|
||||
fsCache: true,
|
||||
lazyCompilation: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
staticDirs: [path.resolve(__dirname, '../assets'), STATIC_ASSETS_PATH],
|
||||
stories: getStoriesGlob(),
|
||||
|
||||
addons: [
|
||||
'@storybook/addon-actions',
|
||||
'storybook-addon-designs',
|
||||
'@storybook/addon-designs',
|
||||
'storybook-dark-mode',
|
||||
'@storybook/addon-a11y',
|
||||
'@storybook/addon-toolbars',
|
||||
@ -98,24 +108,6 @@ const config: Config = {
|
||||
|
||||
core: {
|
||||
disableTelemetry: true,
|
||||
builder: {
|
||||
name: 'webpack5',
|
||||
options: {
|
||||
fsCache: true,
|
||||
// Disabled because fast clicking through stories causes unexpected errors.
|
||||
lazyCompilation: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
features: {
|
||||
// Explicitly disable the deprecated, not used postCSS support,
|
||||
// so no warning is rendered on each start of storybook.
|
||||
postcss: false,
|
||||
// Storyshots is not currently compatible with the v7 store.
|
||||
// https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyshots-compatibility-in-the-v7-store
|
||||
storyStoreV7: !isStoryshotsEnvironment,
|
||||
babelModeV7: !isStoryshotsEnvironment,
|
||||
},
|
||||
|
||||
typescript: {
|
||||
@ -270,6 +262,10 @@ const config: Config = {
|
||||
|
||||
return config
|
||||
},
|
||||
|
||||
docs: {
|
||||
autodocs: true,
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = config
|
||||
|
||||
@ -5,7 +5,6 @@ import type { ReactElement } from 'react'
|
||||
import { configureActions } from '@storybook/addon-actions'
|
||||
import { withConsole } from '@storybook/addon-console'
|
||||
import type { DecoratorFn, Parameters } from '@storybook/react'
|
||||
import { withDesign } from 'storybook-addon-designs'
|
||||
|
||||
import { setLinkComponent, AnchorLink } from '@sourcegraph/wildcard'
|
||||
import { isChromatic } from '@sourcegraph/wildcard/src/stories'
|
||||
@ -15,7 +14,7 @@ import { themeDark, themeLight, THEME_DARK_CLASS, THEME_LIGHT_CLASS } from './th
|
||||
|
||||
const withConsoleDecorator: DecoratorFn = (storyFunc, context): ReactElement => withConsole()(storyFunc)(context)
|
||||
|
||||
export const decorators = [withDesign, withConsoleDecorator, isChromatic() && withChromaticThemes].filter(Boolean)
|
||||
export const decorators = [withConsoleDecorator, isChromatic() && withChromaticThemes].filter(Boolean)
|
||||
|
||||
export const parameters: Parameters = {
|
||||
layout: 'fullscreen',
|
||||
|
||||
@ -5,7 +5,10 @@ export const THEME_DARK_CLASS = 'theme-dark'
|
||||
export const THEME_LIGHT_CLASS = 'theme-light'
|
||||
|
||||
// Themes use the colors from our webapp.
|
||||
const common: Omit<ThemeVars, 'base'> = {
|
||||
const common: Pick<
|
||||
ThemeVars,
|
||||
'colorPrimary' | 'colorSecondary' | 'brandTitle' | 'brandUrl' | 'brandImage' | 'fontBase' | 'fontCode'
|
||||
> = {
|
||||
colorPrimary: openColor.blue[6],
|
||||
colorSecondary: openColor.blue[6],
|
||||
brandTitle: 'Sourcegraph Wildcard design system',
|
||||
|
||||
@ -14,8 +14,8 @@
|
||||
"lint": "eslint .",
|
||||
"format": "prettier --config ./prettier.config.cjs --write . --plugin prettier-plugin-svelte",
|
||||
"generate": "pnpm -w generate",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build"
|
||||
"storybook": "sb dev -p 6006",
|
||||
"build-storybook": "sb build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@faker-js/faker": "^8.0.2",
|
||||
@ -73,4 +73,4 @@
|
||||
"msw": {
|
||||
"workerDirectory": "static"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1782,7 +1782,6 @@ ts_project(
|
||||
"//:node_modules/@reach/visually-hidden",
|
||||
"//:node_modules/@sentry/browser",
|
||||
"//:node_modules/@sourcegraph/extension-api-classes",
|
||||
"//:node_modules/@storybook/client-api",
|
||||
"//:node_modules/@tauri-apps/api",
|
||||
"//:node_modules/@types/bloomfilter",
|
||||
"//:node_modules/@types/chrome", #keep
|
||||
|
||||
@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { BrandedStory } from '@sourcegraph/wildcard/src/stories'
|
||||
|
||||
import 'storybook-addon-designs'
|
||||
import '@storybook/addon-designs'
|
||||
|
||||
import { Container } from '@sourcegraph/wildcard'
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import '@sourcegraph/branded'
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import 'storybook-addon-designs'
|
||||
import '@storybook/addon-designs'
|
||||
|
||||
import { BrandedStory } from '@sourcegraph/wildcard/src/stories'
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import '@sourcegraph/branded'
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import 'storybook-addon-designs'
|
||||
import '@storybook/addon-designs'
|
||||
|
||||
import { BrandedStory } from '@sourcegraph/wildcard/src/stories'
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { BrandedStory } from '@sourcegraph/wildcard/src/stories'
|
||||
|
||||
import 'storybook-addon-designs'
|
||||
import '@storybook/addon-designs'
|
||||
|
||||
import { Container } from '@sourcegraph/wildcard'
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react'
|
||||
import { Container } from '@sourcegraph/wildcard'
|
||||
import { BrandedStory } from '@sourcegraph/wildcard/src/stories'
|
||||
|
||||
import 'storybook-addon-designs'
|
||||
import '@storybook/addon-designs'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { type ClipboardEvent, forwardRef, type ReactElement, useCallback, useState } from 'react'
|
||||
|
||||
import { mdiSourceRepository } from '@mdi/js'
|
||||
import type { ErrorLike } from '@storybook/client-api'
|
||||
import { identity } from 'lodash'
|
||||
import { useMergeRefs } from 'use-callback-ref'
|
||||
|
||||
import type { ErrorLike } from '@sourcegraph/common'
|
||||
import {
|
||||
MultiCombobox,
|
||||
MultiComboboxInput,
|
||||
|
||||
@ -430,6 +430,7 @@ ts_project(
|
||||
"//:node_modules/@reach/tabs",
|
||||
"//:node_modules/@reach/visually-hidden",
|
||||
"//:node_modules/@react-aria/live-announcer",
|
||||
"//:node_modules/@storybook/addon-designs",
|
||||
"//:node_modules/@testing-library/react",
|
||||
"//:node_modules/@types/classnames",
|
||||
"//:node_modules/@types/d3-format",
|
||||
@ -473,7 +474,6 @@ ts_project(
|
||||
"//:node_modules/react-router-dom",
|
||||
"//:node_modules/react-spring",
|
||||
"//:node_modules/rxjs",
|
||||
"//:node_modules/storybook-addon-designs",
|
||||
"//:node_modules/storybook-dark-mode",
|
||||
"//:node_modules/ts-key-enum",
|
||||
"//:node_modules/use-callback-ref",
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Story, Meta } from '@storybook/react'
|
||||
import classNames from 'classnames'
|
||||
import { flow } from 'lodash'
|
||||
|
||||
import 'storybook-addon-designs'
|
||||
import '@storybook/addon-designs'
|
||||
|
||||
import { H1, H4, Text } from '..'
|
||||
import { BrandedStory } from '../../stories/BrandedStory'
|
||||
|
||||
@ -2,7 +2,7 @@ import React from 'react'
|
||||
|
||||
import { startCase } from 'lodash'
|
||||
|
||||
import 'storybook-addon-designs'
|
||||
import '@storybook/addon-designs'
|
||||
|
||||
import { logger } from '@sourcegraph/common'
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { type ReactNode } from 'react'
|
||||
|
||||
import { Checkbox, RadioButton, Select, TextArea, Input } from '../../../components'
|
||||
|
||||
import 'storybook-addon-designs'
|
||||
import '@storybook/addon-designs'
|
||||
|
||||
import styles from './FormFieldVariants.module.scss'
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
import { action } from '@storybook/addon-actions'
|
||||
import type { DecoratorFn, Meta, Story } from '@storybook/react'
|
||||
|
||||
import 'storybook-addon-designs'
|
||||
import '@storybook/addon-designs'
|
||||
|
||||
import { highlightCodeSafe, registerHighlightContributions } from '@sourcegraph/common'
|
||||
|
||||
|
||||
@ -161,7 +161,6 @@ func bazelTest(name, target string) *linter {
|
||||
// warning " > @storybook/react@6.5.9" has unmet peer dependency "require-from-string@^2.0.2".
|
||||
// warning "@storybook/react > react-element-to-jsx-string@14.3.4" has incorrect peer dependency "react@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
|
||||
// warning " > @testing-library/react-hooks@8.0.0" has incorrect peer dependency "react@^16.9.0 || ^17.0.0".
|
||||
// warning "storybook-addon-designs > @figspec/react@1.0.0" has incorrect peer dependency "react@^16.14.0 || ^17.0.0".
|
||||
// warning Workspaces can only be enabled in private projects.
|
||||
// warning Workspaces can only be enabled in private projects.
|
||||
func pnpmInstallFilter() pipeline.Pipeline {
|
||||
|
||||
49
package.json
49
package.json
@ -129,26 +129,28 @@
|
||||
"@sourcegraph/stylelint-plugin-sourcegraph": "^1.0.1",
|
||||
"@sourcegraph/tsconfig": "^4.0.1",
|
||||
"@statoscope/cli": "^5.24.0",
|
||||
"@storybook/addon-a11y": "^6.5.14",
|
||||
"@storybook/addon-actions": "^6.5.14",
|
||||
"@storybook/addon-console": "^1.2.3",
|
||||
"@storybook/addon-docs": "^6.5.14",
|
||||
"@storybook/addon-links": "^6.5.14",
|
||||
"@storybook/addon-storyshots": "^6.5.14",
|
||||
"@storybook/addon-storyshots-puppeteer": "^6.5.14",
|
||||
"@storybook/addon-storysource": "^6.5.14",
|
||||
"@storybook/addon-toolbars": "^6.5.14",
|
||||
"@storybook/addons": "^6.5.14",
|
||||
"@storybook/api": "^6.5.14",
|
||||
"@storybook/builder-webpack5": "^6.5.14",
|
||||
"@storybook/client-api": "^6.5.14",
|
||||
"@storybook/components": "^6.5.14",
|
||||
"@storybook/core": "^6.5.14",
|
||||
"@storybook/core-common": "^6.5.14",
|
||||
"@storybook/core-events": "^6.5.14",
|
||||
"@storybook/manager-webpack5": "^6.5.14",
|
||||
"@storybook/react": "^6.5.14",
|
||||
"@storybook/theming": "^6.5.14",
|
||||
"@storybook/addon-a11y": "^7.4.6",
|
||||
"@storybook/addon-actions": "^7.4.6",
|
||||
"@storybook/addon-console": "^2.0.0",
|
||||
"@storybook/addon-controls": "^7.4.6",
|
||||
"@storybook/addon-designs": "^7.0.5",
|
||||
"@storybook/addon-docs": "^7.4.6",
|
||||
"@storybook/addon-links": "^7.4.6",
|
||||
"@storybook/addon-storyshots": "^7.4.6",
|
||||
"@storybook/addon-storyshots-puppeteer": "^7.4.6",
|
||||
"@storybook/addon-storysource": "^7.4.6",
|
||||
"@storybook/addon-toolbars": "^7.4.6",
|
||||
"@storybook/addons": "^7.4.6",
|
||||
"@storybook/api": "^7.4.6",
|
||||
"@storybook/client-api": "^7.4.6",
|
||||
"@storybook/components": "^7.4.6",
|
||||
"@storybook/core": "^6.5.16",
|
||||
"@storybook/core-common": "^7.4.6",
|
||||
"@storybook/core-events": "^7.4.6",
|
||||
"@storybook/react": "^7.4.6",
|
||||
"@storybook/react-webpack5": "^7.4.6",
|
||||
"@storybook/theming": "^7.4.6",
|
||||
"@storybook/types": "^7.4.6",
|
||||
"@tauri-apps/cli": "^1.2.3",
|
||||
"@terminus-term/to-string-loader": "^1.1.7-beta.1",
|
||||
"@testing-library/dom": "^8.13.0",
|
||||
@ -239,7 +241,7 @@
|
||||
"bundlesize2": "^0.0.31",
|
||||
"chalk": "^4.1.0",
|
||||
"chokidar-cli": "^2.1.0",
|
||||
"chromatic": "^6.17.3",
|
||||
"chromatic": "^7.2.3",
|
||||
"chrome-webstore-upload-cli": "^1.2.0",
|
||||
"command-exists": "^1.2.9",
|
||||
"compression": "^1.7.4",
|
||||
@ -254,6 +256,7 @@
|
||||
"esbuild": "^0.17.14",
|
||||
"eslint": "^8.13.0",
|
||||
"eslint-plugin-monorepo": "^0.3.2",
|
||||
"eslint-plugin-storybook": "^0.6.12",
|
||||
"events": "^3.3.0",
|
||||
"execa": "^5.0.0",
|
||||
"expect": "^27.5.1",
|
||||
@ -314,8 +317,7 @@
|
||||
"sinon": "^9.0.2",
|
||||
"sourcegraph": "workspace:*",
|
||||
"speed-measure-webpack-plugin": "^1.5.0",
|
||||
"storybook-addon-designs": "^6.3.1",
|
||||
"storybook-dark-mode": "^2.0.4",
|
||||
"storybook-dark-mode": "^3.0.1",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"string-width": "^4.2.0",
|
||||
"strip-ansi": "^6.0.1",
|
||||
@ -383,7 +385,6 @@
|
||||
"@react-aria/live-announcer": "^3.1.0",
|
||||
"@sentry/browser": "^7.8.1",
|
||||
"@sourcegraph/extension-api-classes": "^1.1.0",
|
||||
"@storybook/addon-controls": "^6.5.14",
|
||||
"@tauri-apps/api": "^1.2.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@visx/annotation": "^2.10.0",
|
||||
|
||||
8083
pnpm-lock.yaml
8083
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user