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