mirror of https://github.com/grafana/grafana
Chore: Bump Storybook to 8.4.x (#96128)
* feat(storybook): upgrade to version 8.4 * chore(grafana-ui): replace all usage of preview with canvas * chore(grafana-ui): add fs-extra as dev dependency * feat(storybook): copy required assets to temp static directory due to 8.4 not supporting file paths * chore(yarn): fix up lock file so swc-loader doesnt break for decoupled plugins * Add ExampleFrame component to render grafana-ui examples * Prevent Storybook from styling in ExampleFrame * Use global styles in Storybook docs * Update mdx docs to use ExampleFrame or correct Canvas usage * update AutoSizeInput * Update Index mdx * remove the gfm mdx package * silence sass warnings * fix(storybook): add missing imports to fix failed rendering of stories/docs * remove empty docs --------- Co-authored-by: joshhunt <josh@trtr.co>pull/97170/head
Jack Westbrook
7 months ago
committed by
GitHub
parent
10eec83478
commit
25da5f0806
File diff suppressed because one or more lines are too long
@ -0,0 +1,62 @@ |
||||
// This script is used to copy assets from the public folder to a temporary static folder within
|
||||
// the .storybook directory.
|
||||
// We selectively limit assets that are uploaded to the Storybook bucket to prevent rate limiting
|
||||
// when publishing new storybook.
|
||||
// Note: Storybook has a static copying feature but it copies entire directories which can contain thousands of icons.
|
||||
|
||||
import { copySync, emptyDirSync, lstatSync } from 'fs-extra'; |
||||
import { resolve } from 'node:path'; |
||||
|
||||
// avoid importing from @grafana/data to prevent error: window is not defined
|
||||
import { availableIconsIndex, IconName } from '../../grafana-data/src/types/icon'; |
||||
import { getIconSubDir } from '../src/components/Icon/utils'; |
||||
|
||||
// doesn't require uploading 1000s of unused assets.
|
||||
const iconPaths = Object.keys(availableIconsIndex) |
||||
.filter((iconName) => !iconName.startsWith('fa ')) |
||||
.map((iconName) => { |
||||
const subDir = getIconSubDir(iconName as IconName, 'default'); |
||||
return { |
||||
from: `../../../public/img/icons/${subDir}/${iconName}.svg`, |
||||
to: `./static/public/img/icons/${subDir}/${iconName}.svg`, |
||||
}; |
||||
}); |
||||
|
||||
export function copyAssetsSync() { |
||||
const assets = [ |
||||
{ |
||||
from: '../../../public/fonts', |
||||
to: './static/public/fonts', |
||||
}, |
||||
{ |
||||
from: '../../../public/img/grafana_text_logo-dark.svg', |
||||
to: './static/public/img/grafana_text_logo-dark.svg', |
||||
}, |
||||
{ |
||||
from: '../../../public/img/grafana_text_logo-light.svg', |
||||
to: './static/public/img/grafana_text_logo-light.svg', |
||||
}, |
||||
{ |
||||
from: '../../../public/img/fav32.png', |
||||
to: './static/public/img/fav32.png', |
||||
}, |
||||
{ |
||||
from: '../../../public/lib', |
||||
to: './static/public/lib', |
||||
}, |
||||
...iconPaths, |
||||
]; |
||||
|
||||
const staticDir = resolve(__dirname, 'static', 'public'); |
||||
|
||||
emptyDirSync(staticDir); |
||||
|
||||
for (const asset of assets) { |
||||
const fromPath = resolve(__dirname, asset.from); |
||||
const toPath = resolve(__dirname, asset.to); |
||||
|
||||
copySync(fromPath, toPath, { |
||||
filter: (src) => !lstatSync(src).isSymbolicLink(), |
||||
}); |
||||
} |
||||
} |
||||
@ -1,6 +0,0 @@ |
||||
import { ArgTypes } from '@storybook/blocks'; |
||||
import { UnitPicker } from './UnitPicker'; |
||||
|
||||
# UnitPicker |
||||
|
||||
<ArgTypes of={UnitPicker} />{' '} |
||||
@ -0,0 +1,39 @@ |
||||
import { css } from '@emotion/css'; |
||||
import { Unstyled } from '@storybook/blocks'; |
||||
import { ReactNode } from 'react'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
|
||||
import { useStyles2 } from '../../themes'; |
||||
|
||||
interface ExampleFrameProps { |
||||
children: ReactNode; |
||||
} |
||||
|
||||
/** |
||||
* Wraps children with a border for nicer presentation in Storybook docs. |
||||
* |
||||
* This is intended to be used temporarily to move away from our <Preview> patch until |
||||
* we have something more long term. |
||||
*/ |
||||
export function ExampleFrame(props: ExampleFrameProps) { |
||||
const { children } = props; |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
return ( |
||||
<Unstyled> |
||||
<div className={styles.container}>{children}</div> |
||||
</Unstyled> |
||||
); |
||||
} |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => { |
||||
return { |
||||
container: css({ |
||||
border: `1px solid ${theme.colors.border.medium}`, |
||||
borderRadius: theme.shape.radius.default, |
||||
padding: theme.spacing(2), |
||||
marginBottom: theme.spacing(4), |
||||
}), |
||||
}; |
||||
}; |
||||
Loading…
Reference in new issue