Commit c5797cc2 by Hugo Häggmark Committed by GitHub

StoryBook: Introduces Grafana Controls (#31351)

parent 7c797f73
...@@ -14,6 +14,7 @@ module.exports = { ...@@ -14,6 +14,7 @@ module.exports = {
addons: [ addons: [
'@storybook/addon-docs', '@storybook/addon-docs',
'@storybook/addon-controls', '@storybook/addon-controls',
'../src/addons/grafana-controls/preset.ts',
'@storybook/addon-knobs', '@storybook/addon-knobs',
'@storybook/addon-actions', '@storybook/addon-actions',
'storybook-dark-mode/register', 'storybook-dark-mode/register',
......
module.exports = {
managerEntries(entry = []) {
return [...entry, require.resolve('./register')];
},
};
import React from 'react';
import { ArgTypes } from '@storybook/react';
import { addons, types } from '@storybook/addons';
import { AddonPanel, ArgsTable } from '@storybook/components';
import { useArgs, useArgTypes, useParameter } from '@storybook/api';
const ADDON_ID = 'storybook/grafana-controls';
const PANEL_ID = `${ADDON_ID}/controls`;
const PARAM_KEY = 'grafanaControls';
const GrafanaControlsPanel = () => {
const [args, updateArgs, resetArgs] = useArgs();
const rows = useArgTypes();
const argTypes = useParameter<ArgTypes>(PARAM_KEY, {});
const newRows: ArgTypes = {};
for (const key in argTypes) {
if (!Object.hasOwnProperty.call(argTypes, key)) {
continue;
}
if (Object.hasOwnProperty.call(rows, key)) {
newRows[key] = { ...rows[key], ...argTypes[key] };
}
}
return (
<ArgsTable rows={newRows} args={args} updateArgs={updateArgs} resetArgs={resetArgs as any} inAddonPanel compact />
);
};
addons.register(ADDON_ID, (api) => {
addons.add(PANEL_ID, {
type: types.PANEL,
title: 'Grafana Controls',
// eslint-disable-next-line react/display-name
render: ({ active, key }) => (
<AddonPanel active={Boolean(active)} key={key}>
<GrafanaControlsPanel />
</AddonPanel>
),
});
});
...@@ -11,7 +11,6 @@ import { ...@@ -11,7 +11,6 @@ import {
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from './BigValue.mdx'; import mdx from './BigValue.mdx';
import { useTheme } from '../../themes'; import { useTheme } from '../../themes';
import { NOOP_CONTROL } from '@grafana/ui/.storybook/preview';
import { ArrayVector, FieldSparkline, FieldType } from '@grafana/data'; import { ArrayVector, FieldSparkline, FieldType } from '@grafana/data';
export default { export default {
...@@ -23,36 +22,31 @@ export default { ...@@ -23,36 +22,31 @@ export default {
page: mdx, page: mdx,
}, },
knobs: { knobs: {
disabled: true, disable: true,
}, },
}, controls: {
argTypes: { disable: true,
width: { control: { type: 'range', min: 200, max: 800 } }, },
height: { control: { type: 'range', min: 200, max: 800 } }, grafanaControls: {
colorMode: { control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] } }, width: { control: { type: 'range', min: 200, max: 800 } },
graphMode: { control: { type: 'select', options: [BigValueGraphMode.Area, BigValueGraphMode.None] } }, height: { control: { type: 'range', min: 200, max: 800 } },
justifyMode: { control: { type: 'select', options: [BigValueJustifyMode.Auto, BigValueJustifyMode.Center] } }, colorMode: { control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] } },
textMode: { graphMode: { control: { type: 'select', options: [BigValueGraphMode.Area, BigValueGraphMode.None] } },
control: { justifyMode: { control: { type: 'select', options: [BigValueJustifyMode.Auto, BigValueJustifyMode.Center] } },
type: 'radio', textMode: {
options: [ control: {
BigValueTextMode.Auto, type: 'radio',
BigValueTextMode.Name, options: [
BigValueTextMode.ValueAndName, BigValueTextMode.Auto,
BigValueTextMode.None, BigValueTextMode.Name,
BigValueTextMode.Value, BigValueTextMode.ValueAndName,
], BigValueTextMode.None,
BigValueTextMode.Value,
],
},
}, },
color: { control: { type: 'color' } },
}, },
color: { control: 'color' },
value: NOOP_CONTROL,
sparkline: NOOP_CONTROL,
onClick: NOOP_CONTROL,
className: NOOP_CONTROL,
alignmentFactors: NOOP_CONTROL,
text: NOOP_CONTROL,
count: NOOP_CONTROL,
theme: NOOP_CONTROL,
}, },
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment