IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

withStoryContainer: removes addon-knobs since we've migrated to controls (#35763)

Browse Source 
* withStoryContainer: removes addon-knobs since we've migrated to controls

* refactored withStoryContainer utility so that users can be able to resize story

* Layout: added ability to resize story (#35824)

* Layout: added ability to resize story

* removes the knobs-disable config since its already been applied globally

* FieldArray: refactors story to use controls and ability to resize story (#35820)

* FieldArray: refactors story to use controls and ability to resize story

* added much better argTypes changed story name to capital case

* updates the FieldArray.mdx with the new usage examples

* fixes incorrect naming of the args
This commit is contained in:
Uchechukwu Obasi 2021-06-17 11:39:41 +01:00 committed by GitHub
parent 4618fd34a9
commit be5d032e8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/grafana-ui/src/components/Forms/FieldArray.mdx
View File

@ -12,21 +12,21 @@ import { FieldArray } from './FieldArray';
```jsx
import { Form, FieldArray } from '@grafana/ui';
<Form>
<Form onSubmit={() => console.log('form submitted')}>
({control, register}) => (
<FieldArray control={control} name="People">
{({ fields, append }) => (
<div>
{fields.map((field, index) => (
<div key={field.id}>
<Input key={index} ref={register()} name=`people[${index}].firstName` value={field.firstName} />
<Input ref={register()} name=`people[${index}].lastName` value={field.lastName} />
</div>
))}
<Button onClick={() => append({firstName: 'Roger', lastName: 'Waters'})}>Append</Button>
</div>
)}
</FieldArray>
<FieldArray control={control} name="People">
{({ fields, append }) => (
<div>
{fields.map((field, index) => (
<div key={field.id}>
<Input key={index} {...register(`people[${index}].firstName` as const)} value={field.firstName} />
<Input {...register(`people[${index}].lastName` as const)} value={field.lastName} />
</div>
))}
<Button onClick={() => append({firstName: 'Roger', lastName: 'Waters'})}>Append</Button>
</div>
)}
</FieldArray>
)
</Form>;
```

17
packages/grafana-ui/src/components/Forms/FieldArray.story.tsx
View File

@ -4,6 +4,7 @@ import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
import { Form, Input, Button, HorizontalGroup } from '@grafana/ui';
import { FieldArray } from './FieldArray';
import mdx from './FieldArray.mdx';
import { Meta, Story } from '@storybook/react';
export default {
title: 'Forms/FieldArray',
@ -13,10 +14,17 @@ export default {
docs: {
page: mdx,
},
controls: {
exclude: ['name', 'keyName', 'control', 'shouldUnregister'],
},
},
};
argTypes: {
containerWidth: { control: { type: 'range', min: 100, max: 500, step: 10 } },
containerHeight: { control: { type: 'range', min: 100, max: 500, step: 10 } },
},
} as Meta;
export const simple = () => {
export const Simple: Story = (args) => {
const defaultValues: any = {
people: [{ firstName: 'Janis', lastName: 'Joplin' }],
};
@ -58,3 +66,8 @@ export const simple = () => {
</Form>
);
};
Simple.args = {
containerWidth: 300,
containerHeight: 0,
showBoundaries: false,
};

8
packages/grafana-ui/src/components/Layout/Layout.story.tsx
View File

@ -15,9 +15,6 @@ export default {
docs: {
page: mdx,
},
knobs: {
disabled: true,
},
controls: {
exclude: ['orientation'],
},
@ -28,8 +25,13 @@ export default {
align: 'center',
wrap: false,
width: '100%',
containerWidth: 300,
containerHeight: 0,
showBoundaries: false,
},
argTypes: {
containerWidth: { control: { type: 'range', min: 100, max: 500, step: 10 } },
containerHeight: { control: { type: 'range', min: 100, max: 500, step: 10 } },
justify: {
control: {
type: 'select',

36
packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { boolean, number } from '@storybook/addon-knobs';
import { css, cx } from '@emotion/css';
import { RenderFunction } from '../../types';
import { StoryContext } from '@storybook/react';
const StoryContainer: React.FC<{ width?: number; height?: number; showBoundaries: boolean }> = ({
children,
@ -43,38 +43,12 @@ const StoryContainer: React.FC<{ width?: number; height?: number; showBoundaries
);
};
export const withStoryContainer = (story: RenderFunction) => {
const CONTAINER_GROUP = 'Container options';
// ---
const containerBoundary = boolean('Show container boundary', false, CONTAINER_GROUP);
const fullWidthContainer = boolean('Full width container', false, CONTAINER_GROUP);
const containerWidth = number(
'Container width',
300,
{
range: true,
min: 100,
max: 500,
step: 10,
},
CONTAINER_GROUP
);
const containerHeight = number(
'Container height',
0,
{
range: true,
min: 100,
max: 500,
step: 10,
},
CONTAINER_GROUP
);
export const withStoryContainer = (story: RenderFunction, context: StoryContext) => {
return (
<StoryContainer
width={fullWidthContainer ? undefined : containerWidth}
height={containerHeight}
showBoundaries={containerBoundary}
width={context.args.containerWidth}
height={context.args.containerHeight}
showBoundaries={context.args.showBoundaries}
>
{story()}
</StoryContainer>