mirror of
https://github.com/sourcegraph/sourcegraph.git
synced 2026-02-06 17:31:43 +00:00
Theme Storybook with global dark and light theme (#14606)
This commit is contained in:
Felix Becker
GitHub
parent
f82582e251
commit
ea49fb52fc
@ -10,7 +10,8 @@ const isChromatic = !!process.env.CHROMATIC
|
||||
|
||||
const config = {
|
||||
stories: ['../client/**/*.story.tsx'],
|
||||
addons: ['@storybook/addon-knobs', '@storybook/addon-actions', 'storybook-addon-designs'],
|
||||
addons: ['@storybook/addon-knobs', '@storybook/addon-actions', 'storybook-addon-designs', 'storybook-dark-mode'],
|
||||
|
||||
/**
|
||||
* @param config {import('webpack').Configuration}
|
||||
* @returns {import('webpack').Configuration}
|
||||
|
||||
2
.storybook/manager-head.html
Normal file
2
.storybook/manager-head.html
Normal file
@ -0,0 +1,2 @@
|
||||
<link rel="icon" href="img/wildcard-design-system.svg" />
|
||||
<title>Sourcegraph Wildcard design system</title>
|
||||
@ -1,10 +0,0 @@
|
||||
<script>
|
||||
window.MonacoEnvironment = {
|
||||
getWorkerUrl(_, label) {
|
||||
if (label === 'json') {
|
||||
return '/json.worker.bundle.js'
|
||||
}
|
||||
return '/editor.worker.bundle.js'
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -6,11 +6,30 @@ import { withKnobs } from '@storybook/addon-knobs'
|
||||
import { setLinkComponent, AnchorLink } from '../client/shared/src/components/Link'
|
||||
import { withDesign } from 'storybook-addon-designs'
|
||||
import isChromatic from 'chromatic/isChromatic'
|
||||
import * as themes from './themes'
|
||||
|
||||
export const decorators = [withKnobs, withDesign, (storyFn, context) => withConsole()(storyFn)(context)]
|
||||
|
||||
export const parameters = {
|
||||
darkMode: {
|
||||
stylePreview: true,
|
||||
darkClass: 'theme-dark',
|
||||
lightClass: 'theme-light',
|
||||
light: themes.light,
|
||||
dark: themes.dark,
|
||||
},
|
||||
}
|
||||
|
||||
configureActions({ depth: 100, limit: 20 })
|
||||
|
||||
setLinkComponent(AnchorLink)
|
||||
|
||||
// Default to light theme for Chromatic and "Open canvas in new tab" button.
|
||||
// addon-dark-mode will override this if it's running.
|
||||
if (!document.body.classList.contains('theme-dark')) {
|
||||
document.body.classList.add('theme-light')
|
||||
}
|
||||
|
||||
if (isChromatic()) {
|
||||
const style = document.createElement('style')
|
||||
style.innerHTML = `
|
||||
@ -21,4 +40,12 @@ if (isChromatic()) {
|
||||
document.head.append(style)
|
||||
}
|
||||
|
||||
configureActions({ depth: 100, limit: 20 })
|
||||
// @ts-ignore
|
||||
window.MonacoEnvironment = {
|
||||
getWorkerUrl(_, label) {
|
||||
if (label === 'json') {
|
||||
return '/json.worker.bundle.js'
|
||||
}
|
||||
return '/editor.worker.bundle.js'
|
||||
},
|
||||
}
|
||||
|
||||
40
.storybook/themes.js
Normal file
40
.storybook/themes.js
Normal file
@ -0,0 +1,40 @@
|
||||
import { themes } from '@storybook/theming'
|
||||
import openColor from 'open-color'
|
||||
// @ts-ignore
|
||||
import brandImage from '../ui/assets/img/wildcard-design-system.svg'
|
||||
|
||||
// Themes use the colors from our webapp.
|
||||
|
||||
/** @type {Partial<import('@storybook/theming').ThemeVars>} */
|
||||
const common = {
|
||||
colorPrimary: openColor.blue[6],
|
||||
colorSecondary: openColor.blue[6],
|
||||
brandImage,
|
||||
brandTitle: 'Sourcegraph Wildcard design system',
|
||||
fontBase:
|
||||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
||||
fontCode: 'sfmono-regular, consolas, menlo, dejavu sans mono, monospace',
|
||||
}
|
||||
|
||||
/** @type {import('@storybook/theming').ThemeVars} */
|
||||
export const dark = {
|
||||
...themes.dark,
|
||||
...common,
|
||||
appBg: '#1c2736',
|
||||
appContentBg: '#151c28',
|
||||
appBorderColor: '#2b3750',
|
||||
barBg: '#0e121b',
|
||||
barTextColor: '#a2b0cd',
|
||||
textColor: '#f2f4f8',
|
||||
inputTextColor: '#ffffff',
|
||||
}
|
||||
|
||||
/** @type {import('@storybook/theming').ThemeVars} */
|
||||
export const light = {
|
||||
...themes.light,
|
||||
...common,
|
||||
appBg: '#fbfdff',
|
||||
textColor: '#2b3750',
|
||||
barTextColor: '#566e9f',
|
||||
inputTextColor: '#2b3750',
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
import { radios } from '@storybook/addon-knobs'
|
||||
import React from 'react'
|
||||
import { MemoryRouter, MemoryRouterProps } from 'react-router'
|
||||
import { ThemeProps } from '../../../shared/src/theme'
|
||||
import brandedStyles from '../global-styles/index.scss'
|
||||
import { Tooltip } from './tooltip/Tooltip'
|
||||
import { useDarkMode } from 'storybook-dark-mode'
|
||||
|
||||
export interface WebStoryProps extends MemoryRouterProps {
|
||||
children: React.FunctionComponent<ThemeProps>
|
||||
@ -18,14 +18,12 @@ export const BrandedStory: React.FunctionComponent<
|
||||
styles?: string
|
||||
}
|
||||
> = ({ children, styles = brandedStyles, ...memoryRouterProps }) => {
|
||||
const theme = radios('Theme', { Light: 'light', Dark: 'dark' }, 'light')
|
||||
document.body.classList.toggle('theme-light', theme === 'light')
|
||||
document.body.classList.toggle('theme-dark', theme === 'dark')
|
||||
const isLightTheme = !useDarkMode()
|
||||
const Children = children
|
||||
return (
|
||||
<MemoryRouter {...memoryRouterProps}>
|
||||
<Tooltip />
|
||||
<Children isLightTheme={theme === 'light'} />
|
||||
<Children isLightTheme={isLightTheme} />
|
||||
<style title="Webapp CSS">{styles}</style>
|
||||
</MemoryRouter>
|
||||
)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { boolean } from '@storybook/addon-knobs'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import React from 'react'
|
||||
import { LoaderInput } from './LoaderInput'
|
||||
import { BrandedStory } from './BrandedStory'
|
||||
|
||||
@ -11,22 +12,10 @@ const { add } = storiesOf('branded/LoaderInput', module).addDecorator(story => (
|
||||
|
||||
add('Interactive', () => (
|
||||
<BrandedStory>
|
||||
{() => {
|
||||
const [loading, setLoading] = useState(true)
|
||||
const toggleLoading = useCallback(() => setLoading(loading => !loading), [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<button type="button" className="btn btn-primary mb-2" onClick={toggleLoading}>
|
||||
Toggle Loading
|
||||
</button>
|
||||
<p>
|
||||
<LoaderInput loading={loading}>
|
||||
<input type="text" placeholder="Loader input" className="form-control" />
|
||||
</LoaderInput>
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
}}
|
||||
{() => (
|
||||
<LoaderInput loading={boolean('loading', true)}>
|
||||
<input type="text" placeholder="Loader input" className="form-control" />
|
||||
</LoaderInput>
|
||||
)}
|
||||
</BrandedStory>
|
||||
))
|
||||
|
||||
@ -3,22 +3,15 @@ import { storiesOf } from '@storybook/react'
|
||||
import React, { useState } from 'react'
|
||||
import { Toggle } from './Toggle'
|
||||
import webStyles from '../../../web/src/main.scss'
|
||||
import { radios } from '@storybook/addon-knobs'
|
||||
|
||||
const onToggle = action('onToggle')
|
||||
|
||||
const { add } = storiesOf('branded/Toggle', module).addDecorator(story => {
|
||||
const theme = radios('Theme', { Light: 'light', Dark: 'dark' }, 'light')
|
||||
document.body.classList.toggle('theme-light', theme === 'light')
|
||||
document.body.classList.toggle('theme-dark', theme === 'dark')
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>{story()}</div>
|
||||
<style>{webStyles}</style>
|
||||
</>
|
||||
)
|
||||
})
|
||||
const { add } = storiesOf('branded/Toggle', module).addDecorator(story => (
|
||||
<>
|
||||
<div>{story()}</div>
|
||||
<style>{webStyles}</style>
|
||||
</>
|
||||
))
|
||||
|
||||
add(
|
||||
'Interactive',
|
||||
|
||||
@ -3,22 +3,15 @@ import { storiesOf } from '@storybook/react'
|
||||
import React, { useState } from 'react'
|
||||
import { ToggleBig } from './ToggleBig'
|
||||
import webStyles from '../../../web/src/main.scss'
|
||||
import { radios } from '@storybook/addon-knobs'
|
||||
|
||||
const onToggle = action('onToggle')
|
||||
|
||||
const { add } = storiesOf('branded/ToggleBig', module).addDecorator(story => {
|
||||
const theme = radios('Theme', { Light: 'light', Dark: 'dark' }, 'light')
|
||||
document.body.classList.toggle('theme-light', theme === 'light')
|
||||
document.body.classList.toggle('theme-dark', theme === 'dark')
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>{story()}</div>
|
||||
<style>{webStyles}</style>
|
||||
</>
|
||||
)
|
||||
})
|
||||
const { add } = storiesOf('branded/ToggleBig', module).addDecorator(story => (
|
||||
<>
|
||||
<div>{story()}</div>
|
||||
<style>{webStyles}</style>
|
||||
</>
|
||||
))
|
||||
|
||||
add(
|
||||
'Interactive',
|
||||
|
||||
@ -11,7 +11,7 @@ import { subtypeOf } from '../../util/types'
|
||||
const { add } = storiesOf('shared/ActivationDropdown', module).addDecorator(story => (
|
||||
<>
|
||||
<style>{webMainStyles}</style>
|
||||
<div className="theme-light">{story()}</div>
|
||||
<div>{story()}</div>
|
||||
</>
|
||||
))
|
||||
|
||||
@ -52,7 +52,6 @@ const history = H.createMemoryHistory({ keyLength: 0 })
|
||||
const commonProps = subtypeOf<Partial<ActivationDropdownProps>>()({
|
||||
alwaysShow: true,
|
||||
history,
|
||||
// Make sure the dropdown is not rendered outside the theme-light container
|
||||
portal: false,
|
||||
})
|
||||
|
||||
|
||||
@ -118,265 +118,239 @@ const FIXTURE_ACTIONS = [
|
||||
add('Loading', () => (
|
||||
<>
|
||||
<style>{webStyles}</style>
|
||||
<div className="theme-light">
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError="loading"
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</div>
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError="loading"
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</>
|
||||
))
|
||||
|
||||
add('Error', () => (
|
||||
<>
|
||||
<style>{webStyles}</style>
|
||||
<div className="theme-light">
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={
|
||||
new Error(
|
||||
'Something terrible happened: Eiusmod voluptate deserunt in sint cillum pariatur laborum eiusmod.'
|
||||
)
|
||||
}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</div>
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={
|
||||
new Error(
|
||||
'Something terrible happened: Eiusmod voluptate deserunt in sint cillum pariatur laborum eiusmod.'
|
||||
)
|
||||
}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</>
|
||||
))
|
||||
|
||||
add('Common content', () => (
|
||||
<>
|
||||
<style>{webStyles}</style>
|
||||
<div className="theme-light">
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</div>
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</>
|
||||
))
|
||||
|
||||
add('Legacy badge', () => (
|
||||
<>
|
||||
<style>{webStyles}</style>
|
||||
<div className="theme-light">
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [{ ...FIXTURE_CONTENT, badge: LEGACY_FIXTURE_BADGE }],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</div>
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [{ ...FIXTURE_CONTENT, badge: LEGACY_FIXTURE_BADGE }],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</>
|
||||
))
|
||||
|
||||
add('Only actions', () => (
|
||||
<>
|
||||
<style>{webStyles}</style>
|
||||
<div className="theme-light">
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={null}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</div>
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={null}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</>
|
||||
))
|
||||
|
||||
add('Long code', () => (
|
||||
<>
|
||||
<style>{webStyles}</style>
|
||||
<div className="theme-light">
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT_LONG_CODE],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</div>
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT_LONG_CODE],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</>
|
||||
))
|
||||
|
||||
add('Long text only', () => (
|
||||
<>
|
||||
<style>{webStyles}</style>
|
||||
<div className="theme-light">
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT_LONG_TEXT_ONLY],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</div>
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT_LONG_TEXT_ONLY],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</>
|
||||
))
|
||||
|
||||
add('Multiple MarkupContents', () => (
|
||||
<>
|
||||
<style>{webStyles}</style>
|
||||
<div className="theme-light">
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT, FIXTURE_CONTENT, FIXTURE_CONTENT],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</div>
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT, FIXTURE_CONTENT, FIXTURE_CONTENT],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
/>
|
||||
</>
|
||||
))
|
||||
|
||||
add('With small-text alert', () => (
|
||||
<>
|
||||
<style>{webStyles}</style>
|
||||
<div className="theme-light">
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT],
|
||||
alerts: [
|
||||
{
|
||||
summary: {
|
||||
kind: MarkupKind.Markdown,
|
||||
value:
|
||||
'<small>This is a test alert. Enim esse quis commodo ex. Pariatur tempor laborum officiairure est do est laborum nostrud cillum. Cupidatat id consectetur et eiusmod Loremproident cupidatat ullamco dolor nostrud. Cupidatat sit do dolor aliqua labore adlaboris cillum deserunt dolor. Sunt labore veniam Lorem reprehenderit quis occaecatsint do mollit aliquip. Consectetur mollit mollit magna eiusmod duis ex. Sint nisilabore labore nulla laboris.</small>',
|
||||
},
|
||||
type: 'test-alert-type',
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT],
|
||||
alerts: [
|
||||
{
|
||||
summary: {
|
||||
kind: MarkupKind.Markdown,
|
||||
value:
|
||||
'<small>This is a test alert. Enim esse quis commodo ex. Pariatur tempor laborum officiairure est do est laborum nostrud cillum. Cupidatat id consectetur et eiusmod Loremproident cupidatat ullamco dolor nostrud. Cupidatat sit do dolor aliqua labore adlaboris cillum deserunt dolor. Sunt labore veniam Lorem reprehenderit quis occaecatsint do mollit aliquip. Consectetur mollit mollit magna eiusmod duis ex. Sint nisilabore labore nulla laboris.</small>',
|
||||
},
|
||||
],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
onAlertDismissed={action('onAlertDismissed')}
|
||||
/>
|
||||
</div>
|
||||
type: 'test-alert-type',
|
||||
},
|
||||
],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
onAlertDismissed={action('onAlertDismissed')}
|
||||
/>
|
||||
</>
|
||||
))
|
||||
|
||||
add('With one-line alert', () => (
|
||||
<>
|
||||
<style>{webStyles}</style>
|
||||
<div className="theme-light">
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT],
|
||||
alerts: [
|
||||
{
|
||||
summary: {
|
||||
kind: MarkupKind.PlainText,
|
||||
value: 'This is a test alert.',
|
||||
},
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT],
|
||||
alerts: [
|
||||
{
|
||||
summary: {
|
||||
kind: MarkupKind.PlainText,
|
||||
value: 'This is a test alert.',
|
||||
},
|
||||
],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
onAlertDismissed={action('onAlertDismissed')}
|
||||
/>
|
||||
</div>
|
||||
},
|
||||
],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
onAlertDismissed={action('onAlertDismissed')}
|
||||
/>
|
||||
</>
|
||||
))
|
||||
|
||||
add('With badged alert', () => (
|
||||
<>
|
||||
<style>{webStyles}</style>
|
||||
<div className="theme-light">
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT],
|
||||
alerts: [
|
||||
{
|
||||
summary: {
|
||||
kind: MarkupKind.PlainText,
|
||||
value: 'This is a test alert.',
|
||||
},
|
||||
badge: {
|
||||
kind: 'info',
|
||||
},
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT],
|
||||
alerts: [
|
||||
{
|
||||
summary: {
|
||||
kind: MarkupKind.PlainText,
|
||||
value: 'This is a test alert.',
|
||||
},
|
||||
],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
onAlertDismissed={action('onAlertDismissed')}
|
||||
/>
|
||||
</div>
|
||||
badge: {
|
||||
kind: 'info',
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
onAlertDismissed={action('onAlertDismissed')}
|
||||
/>
|
||||
</>
|
||||
))
|
||||
|
||||
add('With badged dismissible alert', () => (
|
||||
<>
|
||||
<style>{webStyles}</style>
|
||||
<div className="theme-light">
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT],
|
||||
alerts: [
|
||||
{
|
||||
summary: {
|
||||
kind: MarkupKind.Markdown,
|
||||
value: 'This is a test alert.',
|
||||
},
|
||||
type: 'test-alert-type',
|
||||
badge: {
|
||||
kind: 'info',
|
||||
},
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT],
|
||||
alerts: [
|
||||
{
|
||||
summary: {
|
||||
kind: MarkupKind.Markdown,
|
||||
value: 'This is a test alert.',
|
||||
},
|
||||
],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
onAlertDismissed={action('onAlertDismissed')}
|
||||
/>
|
||||
</div>
|
||||
type: 'test-alert-type',
|
||||
badge: {
|
||||
kind: 'info',
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
onAlertDismissed={action('onAlertDismissed')}
|
||||
/>
|
||||
</>
|
||||
))
|
||||
|
||||
add('With long markdown text badged dismissible alert.', () => (
|
||||
<>
|
||||
<style>{webStyles}</style>
|
||||
<div className="theme-light">
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT],
|
||||
alerts: [
|
||||
{
|
||||
summary: {
|
||||
kind: MarkupKind.Markdown,
|
||||
value:
|
||||
'This is a test alert. [It uses Markdown.](https://sourcegraph.com) `To render things easily`. *Cool!*',
|
||||
},
|
||||
type: 'test-alert-type',
|
||||
badge: {
|
||||
kind: 'info',
|
||||
},
|
||||
<HoverOverlay
|
||||
{...commonProps()}
|
||||
{...webHoverOverlayClassProps}
|
||||
hoverOrError={{
|
||||
contents: [FIXTURE_CONTENT],
|
||||
alerts: [
|
||||
{
|
||||
summary: {
|
||||
kind: MarkupKind.Markdown,
|
||||
value:
|
||||
'This is a test alert. [It uses Markdown.](https://sourcegraph.com) `To render things easily`. *Cool!*',
|
||||
},
|
||||
],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
onAlertDismissed={action('onAlertDismissed')}
|
||||
/>
|
||||
</div>
|
||||
type: 'test-alert-type',
|
||||
badge: {
|
||||
kind: 'info',
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
actionsOrError={FIXTURE_ACTIONS}
|
||||
onAlertDismissed={action('onAlertDismissed')}
|
||||
/>
|
||||
</>
|
||||
))
|
||||
|
||||
|
||||
@ -23,9 +23,7 @@ const { add } = storiesOf('shared/NotificationItem', module).addDecorator(story
|
||||
<>
|
||||
<style>{webStyles}</style>
|
||||
<style>{notificationItemStyles}</style>
|
||||
<div className="theme-light" style={{ maxWidth: '20rem', margin: '2rem' }}>
|
||||
{story()}
|
||||
</div>
|
||||
<div style={{ maxWidth: '20rem', margin: '2rem' }}>{story()}</div>
|
||||
</>
|
||||
))
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { radios } from '@storybook/addon-knobs'
|
||||
import React, { useMemo } from 'react'
|
||||
import { useDarkMode } from 'storybook-dark-mode'
|
||||
import { MemoryRouter, MemoryRouterProps, RouteComponentProps, withRouter } from 'react-router'
|
||||
import { NOOP_TELEMETRY_SERVICE, TelemetryProps } from '../../../shared/src/telemetry/telemetryService'
|
||||
import { ThemeProps } from '../../../shared/src/theme'
|
||||
@ -22,19 +22,13 @@ export const WebStory: React.FunctionComponent<
|
||||
webStyles?: string
|
||||
}
|
||||
> = ({ children, webStyles = _webStyles, ...memoryRouterProps }) => {
|
||||
const theme = radios('Theme', { Light: 'light', Dark: 'dark' }, 'light')
|
||||
document.body.classList.toggle('theme-light', theme === 'light')
|
||||
document.body.classList.toggle('theme-dark', theme === 'dark')
|
||||
const isLightTheme = !useDarkMode()
|
||||
const breadcrumbSetters = useBreadcrumbs()
|
||||
const Children = useMemo(() => withRouter(children), [children])
|
||||
return (
|
||||
<MemoryRouter {...memoryRouterProps}>
|
||||
<Tooltip />
|
||||
<Children
|
||||
{...breadcrumbSetters}
|
||||
isLightTheme={theme === 'light'}
|
||||
telemetryService={NOOP_TELEMETRY_SERVICE}
|
||||
/>
|
||||
<Children {...breadcrumbSetters} isLightTheme={isLightTheme} telemetryService={NOOP_TELEMETRY_SERVICE} />
|
||||
<style title="Webapp CSS">{webStyles}</style>
|
||||
</MemoryRouter>
|
||||
)
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import React from 'react'
|
||||
import { CampaignListPage } from './CampaignListPage'
|
||||
import { nodes } from './CampaignNode.story'
|
||||
import { nodes } from './testData'
|
||||
import { of } from 'rxjs'
|
||||
import { EnterpriseWebStory } from '../../components/EnterpriseWebStory'
|
||||
import { useCallback } from '@storybook/addons'
|
||||
|
||||
@ -4,7 +4,7 @@ import { CampaignListPage } from './CampaignListPage'
|
||||
import { NOOP_TELEMETRY_SERVICE } from '../../../../../shared/src/telemetry/telemetryService'
|
||||
import { of } from 'rxjs'
|
||||
import { shallow } from 'enzyme'
|
||||
import { nodes } from './CampaignNode.story'
|
||||
import { nodes } from './testData'
|
||||
|
||||
const history = H.createMemoryHistory()
|
||||
|
||||
|
||||
@ -3,69 +3,9 @@ import { boolean } from '@storybook/addon-knobs'
|
||||
import React from 'react'
|
||||
import { CampaignNode } from './CampaignNode'
|
||||
import isChromatic from 'chromatic/isChromatic'
|
||||
import { ListCampaign } from '../../../graphql-operations'
|
||||
import { subDays } from 'date-fns'
|
||||
import { EnterpriseWebStory } from '../../components/EnterpriseWebStory'
|
||||
|
||||
const now = new Date()
|
||||
|
||||
export const nodes: Record<string, ListCampaign> = {
|
||||
'Open campaign': {
|
||||
id: 'test',
|
||||
url: '/users/alice/campaigns/test',
|
||||
name: 'Awesome campaign',
|
||||
description: `# What this does
|
||||
|
||||
This is my thorough explanation. And it can also get very long, in that case the UI doesn't break though, which is good. And one more line to finally be longer than the viewport.`,
|
||||
createdAt: subDays(now, 5).toISOString(),
|
||||
closedAt: null,
|
||||
changesetsStats: {
|
||||
open: 10,
|
||||
closed: 0,
|
||||
merged: 5,
|
||||
},
|
||||
namespace: {
|
||||
namespaceName: 'alice',
|
||||
url: '/users/alice',
|
||||
},
|
||||
},
|
||||
'No description': {
|
||||
id: 'test2',
|
||||
url: '/users/alice/campaigns/test2',
|
||||
name: 'Awesome campaign',
|
||||
description: null,
|
||||
createdAt: subDays(now, 5).toISOString(),
|
||||
closedAt: null,
|
||||
changesetsStats: {
|
||||
open: 10,
|
||||
closed: 0,
|
||||
merged: 5,
|
||||
},
|
||||
namespace: {
|
||||
namespaceName: 'alice',
|
||||
url: '/users/alice',
|
||||
},
|
||||
},
|
||||
'Closed campaign': {
|
||||
id: 'test3',
|
||||
url: '/users/alice/campaigns/test3',
|
||||
name: 'Awesome campaign',
|
||||
description: `# My campaign
|
||||
|
||||
This is my thorough explanation.`,
|
||||
createdAt: subDays(now, 5).toISOString(),
|
||||
closedAt: subDays(now, 3).toISOString(),
|
||||
changesetsStats: {
|
||||
open: 0,
|
||||
closed: 10,
|
||||
merged: 5,
|
||||
},
|
||||
namespace: {
|
||||
namespaceName: 'alice',
|
||||
url: '/users/alice',
|
||||
},
|
||||
},
|
||||
}
|
||||
import { nodes, now } from './testData'
|
||||
|
||||
const { add } = storiesOf('web/campaigns/CampaignNode', module).addDecorator(story => (
|
||||
<div className="p-3 container web-content campaign-list-page__grid">{story()}</div>
|
||||
|
||||
62
client/web/src/enterprise/campaigns/list/testData.ts
Normal file
62
client/web/src/enterprise/campaigns/list/testData.ts
Normal file
@ -0,0 +1,62 @@
|
||||
import { subDays } from 'date-fns'
|
||||
import { ListCampaign } from '../../../graphql-operations'
|
||||
|
||||
export const now = new Date()
|
||||
|
||||
export const nodes: Record<string, ListCampaign> = {
|
||||
'Open campaign': {
|
||||
id: 'test',
|
||||
url: '/users/alice/campaigns/test',
|
||||
name: 'Awesome campaign',
|
||||
description: `# What this does
|
||||
|
||||
This is my thorough explanation. And it can also get very long, in that case the UI doesn't break though, which is good. And one more line to finally be longer than the viewport.`,
|
||||
createdAt: subDays(now, 5).toISOString(),
|
||||
closedAt: null,
|
||||
changesetsStats: {
|
||||
open: 10,
|
||||
closed: 0,
|
||||
merged: 5,
|
||||
},
|
||||
namespace: {
|
||||
namespaceName: 'alice',
|
||||
url: '/users/alice',
|
||||
},
|
||||
},
|
||||
'No description': {
|
||||
id: 'test2',
|
||||
url: '/users/alice/campaigns/test2',
|
||||
name: 'Awesome campaign',
|
||||
description: null,
|
||||
createdAt: subDays(now, 5).toISOString(),
|
||||
closedAt: null,
|
||||
changesetsStats: {
|
||||
open: 10,
|
||||
closed: 0,
|
||||
merged: 5,
|
||||
},
|
||||
namespace: {
|
||||
namespaceName: 'alice',
|
||||
url: '/users/alice',
|
||||
},
|
||||
},
|
||||
'Closed campaign': {
|
||||
id: 'test3',
|
||||
url: '/users/alice/campaigns/test3',
|
||||
name: 'Awesome campaign',
|
||||
description: `# My campaign
|
||||
|
||||
This is my thorough explanation.`,
|
||||
createdAt: subDays(now, 5).toISOString(),
|
||||
closedAt: subDays(now, 3).toISOString(),
|
||||
changesetsStats: {
|
||||
open: 0,
|
||||
closed: 10,
|
||||
merged: 5,
|
||||
},
|
||||
namespace: {
|
||||
namespaceName: 'alice',
|
||||
url: '/users/alice',
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -13,7 +13,7 @@ window.context = {} as SourcegraphContext & SuiteFunction
|
||||
|
||||
const { add } = storiesOf('web/Codeintel administration/CodeIntelIndex', module).addDecorator(story => (
|
||||
<>
|
||||
<div className="theme-light container">{story()}</div>
|
||||
<div className="container">{story()}</div>
|
||||
<style>{webStyles}</style>
|
||||
</>
|
||||
))
|
||||
|
||||
@ -13,7 +13,7 @@ window.context = {} as SourcegraphContext & SuiteFunction
|
||||
|
||||
const { add } = storiesOf('web/Codeintel administration/CodeIntelUpload', module).addDecorator(story => (
|
||||
<>
|
||||
<div className="theme-light container">{story()}</div>
|
||||
<div className="container">{story()}</div>
|
||||
<style>{webStyles}</style>
|
||||
</>
|
||||
))
|
||||
|
||||
@ -13,7 +13,7 @@ window.context = {} as SourcegraphContext & SuiteFunction
|
||||
|
||||
const { add } = storiesOf('web/Codeintel administration/CodeIntelIndexes', module).addDecorator(story => (
|
||||
<>
|
||||
<div className="theme-light container">{story()}</div>
|
||||
<div className="container">{story()}</div>
|
||||
<style>{webStyles}</style>
|
||||
</>
|
||||
))
|
||||
|
||||
@ -13,7 +13,7 @@ window.context = {} as SourcegraphContext & SuiteFunction
|
||||
|
||||
const { add } = storiesOf('web/Codeintel administration/CodeIntelUploads', module).addDecorator(story => (
|
||||
<>
|
||||
<div className="theme-light container">{story()}</div>
|
||||
<div className="container">{story()}</div>
|
||||
<style>{webStyles}</style>
|
||||
</>
|
||||
))
|
||||
|
||||
@ -8,7 +8,7 @@ import { SearchPatternType } from '../graphql-operations'
|
||||
import { WebStory } from '../components/WebStory'
|
||||
|
||||
const { add } = storiesOf('web/VersionContextDropdown', module).addDecorator(story => (
|
||||
<WebStory>{webProps => story()}</WebStory>
|
||||
<WebStory>{() => story()}</WebStory>
|
||||
))
|
||||
|
||||
const setVersionContext = action('setVersionContext')
|
||||
@ -16,7 +16,6 @@ const history = H.createMemoryHistory({ keyLength: 0 })
|
||||
const commonProps = subtypeOf<Partial<VersionContextDropdownProps>>()({
|
||||
alwaysShow: true,
|
||||
history,
|
||||
// Make sure the dropdown is not rendered outside the theme-light container
|
||||
portal: false,
|
||||
caseSensitive: false,
|
||||
patternType: SearchPatternType.literal,
|
||||
|
||||
@ -17,9 +17,7 @@ const { add } = storiesOf('web/ChartViewContent', module).addDecorator(story =>
|
||||
<>
|
||||
<style>{webStyles}</style>
|
||||
{/* Chart will always fill the container, so we need to give the container an explicit size. */}
|
||||
<div className="theme-light" style={{ width: '32rem', height: '16rem' }}>
|
||||
{story()}
|
||||
</div>
|
||||
<div style={{ width: '32rem', height: '16rem' }}>{story()}</div>
|
||||
</>
|
||||
))
|
||||
|
||||
|
||||
@ -37,6 +37,7 @@ const config = {
|
||||
moduleNameMapper: {
|
||||
'\\.s?css$': 'identity-obj-proxy',
|
||||
'\\.ya?ml$': 'identity-obj-proxy',
|
||||
'\\.svg$': 'identity-obj-proxy',
|
||||
'^worker-loader': 'identity-obj-proxy',
|
||||
// monaco-editor uses the "module" field in package.json, which isn't supported by Jest
|
||||
// https://github.com/facebook/jest/issues/2702
|
||||
|
||||
@ -27,8 +27,8 @@
|
||||
"cover-integration": "nyc --hook-require=false yarn test-integration",
|
||||
"test-e2e": "TS_NODE_PROJECT=client/web/src/end-to-end/tsconfig.json mocha ./client/web/src/end-to-end/end-to-end.test.ts",
|
||||
"cover-e2e": "nyc --hook-require=false yarn test-e2e",
|
||||
"storybook": "start-storybook -p 9001 -c .storybook",
|
||||
"build-storybook": "build-storybook -c .storybook",
|
||||
"storybook": "start-storybook -p 9001 -c .storybook -s ui/assets",
|
||||
"build-storybook": "build-storybook -c .storybook -s ui/assets",
|
||||
"cover-storybook": "nyc --hook-require=false yarn jest .storybook/coverage",
|
||||
"deduplicate": "yarn-deduplicate -s fewer"
|
||||
},
|
||||
@ -234,6 +234,7 @@
|
||||
"socket.io": "^2.3.0",
|
||||
"socket.io-client": "^2.3.0",
|
||||
"storybook-addon-designs": "^5.4.2",
|
||||
"storybook-dark-mode": "^1.0.3",
|
||||
"string-width": "^4.2.0",
|
||||
"style-loader": "^2.0.0",
|
||||
"stylelint": "^13.7.2",
|
||||
|
||||
11
ui/assets/img/wildcard-design-system.svg
Normal file
11
ui/assets/img/wildcard-design-system.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg height="64" viewBox="0 0 451 459" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M149.314 250.377L43.7803 215.417C21.0244 207.862 8.67477 183.272 16.2117 160.462C23.7304 137.651 48.2661 125.302 71.022 132.82L162.251 163.054L136.558 68.9829C130.22 45.8093 143.841 21.8911 166.942 15.5528C190.061 9.21456 213.925 22.8536 220.263 46.0091L246.168 140.845L310.869 67.6756C326.778 49.696 354.183 48.0434 372.126 63.9707C390.07 79.898 391.722 107.376 375.831 125.355L301.646 209.251L407.221 244.239C429.959 251.758 442.327 276.348 434.79 299.158C427.253 321.951 402.717 334.336 379.962 326.781L288.7 296.55L314.41 390.672C320.73 413.827 307.128 437.745 284.009 444.102C260.889 450.422 237.026 436.783 230.687 413.627L204.785 318.79L140.099 391.943C124.208 409.923 96.7849 411.593 78.8417 395.666C60.8984 379.739 59.2458 352.243 75.1368 334.263L149.314 250.377Z" fill="white"/>
|
||||
<path d="M43.7803 215.417L39.6841 227.755L39.6923 227.758L43.7803 215.417ZM149.314 250.377L159.053 258.988L172.102 244.231L153.402 238.036L149.314 250.377ZM16.2117 160.462L28.5553 164.54L28.5582 164.531L16.2117 160.462ZM71.022 132.82L75.1116 120.48L75.1005 120.477L71.022 132.82ZM162.251 163.054L158.161 175.394L181.181 183.023L174.792 159.629L162.251 163.054ZM136.558 68.9829L149.099 65.5578L149.098 65.5533L136.558 68.9829ZM166.942 15.5528L163.505 3.01543L163.502 3.01612L166.942 15.5528ZM220.263 46.0091L232.804 42.5835L232.802 42.5769L220.263 46.0091ZM246.168 140.845L233.628 144.27L239.968 167.482L255.907 149.456L246.168 140.845ZM310.869 67.6756L301.133 59.0608L301.13 59.0641L310.869 67.6756ZM372.126 63.9707L363.496 73.693V73.693L372.126 63.9707ZM375.831 125.355L385.57 133.967L385.572 133.965L375.831 125.355ZM301.646 209.251L291.908 200.639L278.86 215.394L297.557 221.591L301.646 209.251ZM407.221 244.239L403.132 256.579L403.14 256.582L407.221 244.239ZM434.79 299.158L447.133 303.24L447.134 303.237L434.79 299.158ZM379.962 326.781L384.058 314.444L384.049 314.441L379.962 326.781ZM288.7 296.55L292.788 284.21L269.77 276.585L276.16 299.976L288.7 296.55ZM314.41 390.672L326.952 387.249L326.951 387.246L314.41 390.672ZM284.009 444.102L287.437 456.642L287.446 456.639L287.455 456.637L284.009 444.102ZM230.687 413.627L218.147 417.052L218.149 417.059L230.687 413.627ZM204.785 318.79L217.326 315.365L210.986 292.152L195.047 310.178L204.785 318.79ZM140.099 391.943L130.361 383.332L130.359 383.334L140.099 391.943ZM75.1368 334.263L65.3981 325.652L65.3961 325.654L75.1368 334.263ZM39.6923 227.758L145.226 262.717L153.402 238.036L47.8683 203.077L39.6923 227.758ZM3.868 156.383C-5.91561 185.993 10.1106 217.936 39.6841 227.755L47.8765 203.079C31.9382 197.788 23.2652 180.551 28.5553 164.54L3.868 156.383ZM75.1005 120.477C45.5191 110.703 13.6309 126.764 3.86508 156.392L28.5582 164.531C33.8298 148.538 51.0131 139.9 66.9436 145.164L75.1005 120.477ZM166.34 150.714L75.1116 120.48L66.9325 145.16L158.161 175.394L166.34 150.714ZM174.792 159.629L149.099 65.5578L124.018 72.4081L149.71 166.479L174.792 159.629ZM149.098 65.5533C144.647 49.2829 154.219 32.5241 170.382 28.0895L163.502 3.01612C133.463 11.258 115.792 42.3357 124.019 72.4126L149.098 65.5533ZM170.379 28.0902C186.548 23.6574 203.275 33.1884 207.724 49.4412L232.802 42.5769C224.574 12.5188 193.574 -5.22832 163.505 3.01543L170.379 28.0902ZM207.722 49.4346L233.628 144.27L258.709 137.419L232.804 42.5835L207.722 49.4346ZM255.907 149.456L320.607 76.2871L301.13 59.0641L236.429 132.233L255.907 149.456ZM320.605 76.2903C331.753 63.6915 350.931 62.5391 363.496 73.693L380.756 54.2484C357.435 33.5476 321.803 35.7006 301.133 59.0608L320.605 76.2903ZM363.496 73.693C376.073 84.8565 377.239 104.133 366.09 116.746L385.572 133.965C406.206 110.619 404.066 74.9396 380.756 54.2484L363.496 73.693ZM366.092 116.744L291.908 200.639L311.385 217.862L385.57 133.967L366.092 116.744ZM411.311 231.899L305.736 196.911L297.557 221.591L403.132 256.579L411.311 231.899ZM447.134 303.237C456.917 273.626 440.872 241.674 411.303 231.896L403.14 256.582C419.046 261.841 427.736 279.069 422.446 295.08L447.134 303.237ZM375.865 339.119C405.476 348.95 437.351 332.82 447.133 303.24L422.447 295.077C417.155 311.082 399.959 319.723 384.058 314.444L375.865 339.119ZM284.612 308.891L375.874 339.122L384.049 314.441L292.788 284.21L284.612 308.891ZM276.16 299.976L301.87 394.097L326.951 387.246L301.241 293.124L276.16 299.976ZM301.869 394.095C306.306 410.351 296.75 427.116 280.562 431.567L287.455 456.637C317.506 448.374 335.155 417.303 326.952 387.249L301.869 394.095ZM280.581 431.562C264.405 435.984 247.675 426.447 243.226 410.195L218.149 417.059C226.377 447.118 257.374 464.86 287.437 456.642L280.581 431.562ZM243.228 410.202L217.326 315.365L192.245 322.215L218.147 417.052L243.228 410.202ZM195.047 310.178L130.361 383.332L149.838 400.555L214.524 327.401L195.047 310.178ZM130.359 383.334C119.226 395.93 100.033 397.094 87.4717 385.944L70.2117 405.388C93.5367 426.093 129.191 423.915 149.84 400.552L130.359 383.334ZM87.4717 385.944C74.8957 374.781 73.7288 355.486 84.8775 342.872L65.3961 325.654C44.7627 348.999 46.9011 384.697 70.2117 405.388L87.4717 385.944ZM84.8755 342.875L159.053 258.988L139.575 241.765L65.3981 325.652L84.8755 342.875Z" fill="url(#paint0_linear)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="158.023" y1="16.965" x2="437.599" y2="313.484" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F96216"/>
|
||||
<stop offset="0.399786" stop-color="#B200F8"/>
|
||||
<stop offset="1" stop-color="#00B4F2"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.4 KiB |
22
yarn.lock
22
yarn.lock
@ -2817,7 +2817,8 @@
|
||||
integrity sha512-KWxkyphmlwam8kfYPSmoitKQRMGQCsr1ZRmNZgijT7ABKaVyk/+I5ezt2J213tM04Hi0vyg4L7iH1VCkNvm2Jw==
|
||||
|
||||
"@sourcegraph/extension-api-types@link:client/packages/@sourcegraph/extension-api-types":
|
||||
version "2.1.0"
|
||||
version "0.0.0"
|
||||
uid ""
|
||||
|
||||
"@sourcegraph/prettierrc@^3.0.3":
|
||||
version "3.0.3"
|
||||
@ -10427,10 +10428,10 @@ fancy-log@^1.3.2, fancy-log@^1.3.3:
|
||||
parse-node-version "^1.0.0"
|
||||
time-stamp "^1.0.0"
|
||||
|
||||
fast-deep-equal@^3.1.1:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
|
||||
integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
|
||||
fast-deep-equal@^3.0.0, fast-deep-equal@^3.1.1:
|
||||
version "3.1.3"
|
||||
resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
|
||||
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
|
||||
|
||||
fast-glob@^2.0.2, fast-glob@^2.2.6:
|
||||
version "2.2.7"
|
||||
@ -20859,7 +20860,8 @@ sourcegraph@^24.0.0:
|
||||
integrity sha512-PlGvkdBy5r5iHdKAVNY/jsPgWb3oY+2iAdIQ3qR83UHhvBFVgoctDAnyfJ1eMstENY3etBWtAJ8Kleoar3ecaA==
|
||||
|
||||
"sourcegraph@link:client/packages/sourcegraph-extension-api":
|
||||
version "24.7.0"
|
||||
version "0.0.0"
|
||||
uid ""
|
||||
|
||||
space-separated-tokens@^1.0.0:
|
||||
version "1.1.2"
|
||||
@ -21105,6 +21107,14 @@ storybook-addon-designs@^5.4.2:
|
||||
dependencies:
|
||||
react-pdf "^4.0.5"
|
||||
|
||||
storybook-dark-mode@^1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-1.0.3.tgz#8d58a874b6107ff1a7f29ebb0e6726b8036eee08"
|
||||
integrity sha512-mjHLrv/dwtqKmbOoQ2CMtGKDttWSnUybutujsIPxLcEC77EujjWiRBFv46LtXAZEyZLm8sGFUz0s6HJJfJ3tSw==
|
||||
dependencies:
|
||||
fast-deep-equal "^3.0.0"
|
||||
memoizerific "^1.11.3"
|
||||
|
||||
stream-browserify@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user