Storybook: add controls to Segment story (#55264)

packages/grafana-ui/src/components/Segment/Segment.story.tsx

@@ -1,9 +1,11 @@
 import { action } from '@storybook/addon-actions';
-import { ComponentMeta } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React, { useState } from 'react';
 
 import { Segment, Icon, SegmentSection } from '@grafana/ui';
 
+import { SegmentSyncProps } from './Segment';
+
 const AddButton = (
   <a className="gf-form-label query-part">
     <Icon name="plus-circle" />
@@ -149,4 +151,44 @@ export const HtmlAttributes = () => {
   );
 };
 
+export const Basic: ComponentStory<React.ComponentType<SegmentSyncProps<string>>> = (
+  args: SegmentSyncProps<string>
+) => {
+  const [value, setValue] = useState(args.value);
+
+  const props: SegmentSyncProps<string> = {
+    ...args,
+    value,
+    onChange: ({ value }) => {
+      setValue(value);
+      action('onChange fired')(value);
+    },
+    onExpandedChange: (expanded) => action('onExpandedChange fired')({ expanded }),
+  };
+
+  return (
+    <SegmentSection label="Segment:">
+      <Segment<string> {...props} />
+    </SegmentSection>
+  );
+};
+
+Basic.parameters = {
+  controls: {
+    exclude: ['onChange', 'onExpandedChange', 'Component', 'className', 'value'],
+  },
+};
+
+Basic.args = {
+  value: undefined,
+  options,
+  inputMinWidth: 0,
+  allowCustomValue: false,
+  placeholder: 'Placeholder text',
+  disabled: false,
+  autofocus: false,
+  allowEmptyValue: false,
+  inputPlaceholder: 'Start typing...',
+};
+
 export default meta;

packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx

@@ -1,11 +1,13 @@
 import { action } from '@storybook/addon-actions';
-import { ComponentMeta } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React, { useState } from 'react';
 import { AsyncState } from 'react-use/lib/useAsync';
 
 import { SelectableValue } from '@grafana/data';
 import { SegmentAsync, Icon, SegmentSection } from '@grafana/ui';
 
+import { SegmentAsyncProps } from './SegmentAsync';
+
 const AddButton = (
   <a className="gf-form-label query-part">
     <Icon name="plus" />
@@ -202,4 +204,72 @@ export const HtmlAttributes = () => {
   );
 };
 
+export const Basic: ComponentStory<React.ComponentType<SegmentAsyncProps<string>>> = (
+  args: SegmentAsyncProps<string>
+) => {
+  const [value, setValue] = useState(args.value);
+
+  const props: SegmentAsyncProps<string> = {
+    ...args,
+    value,
+    loadOptions: async (query = '') => {
+      action('loadOptions fired')({ query });
+      const result = await loadOptions(options);
+      if (query) {
+        return result.filter((data) => data.label?.includes(query));
+      }
+      return loadOptions(options);
+    },
+    onChange: ({ value }) => {
+      setValue(value);
+      action('onChange fired')(value);
+    },
+    onExpandedChange: (expanded) => action('onExpandedChange fired')({ expanded }),
+    noOptionMessageHandler: (state) => {
+      action('noOptionMessageHandler fired')(state);
+      if (state.loading) {
+        return 'Loading...';
+      }
+      if (state.error) {
+        return 'Failed to load options';
+      }
+      if (!Array.isArray(state.value) || state.value.length === 0) {
+        return 'No options found';
+      }
+      return '';
+    },
+  };
+
+  return (
+    <SegmentSection label="Segment:">
+      <SegmentAsync<string> {...props} />
+    </SegmentSection>
+  );
+};
+
+Basic.parameters = {
+  controls: {
+    exclude: [
+      'value',
+      'loadOptions',
+      'onChange',
+      'noOptionMessageHandler',
+      'Component',
+      'className',
+      'onExpandedChange',
+    ],
+  },
+};
+
+Basic.args = {
+  inputMinWidth: 0,
+  allowCustomValue: false,
+  reloadOptionsOnChange: false,
+  placeholder: 'Placeholder text',
+  disabled: false,
+  autofocus: false,
+  allowEmptyValue: false,
+  inputPlaceholder: 'Start typing...',
+};
+
 export default meta;

packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx

@@ -1,9 +1,11 @@
 import { action } from '@storybook/addon-actions';
-import { ComponentMeta } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React, { useState } from 'react';
 
 import { SegmentInput, Icon, SegmentSection } from '@grafana/ui';
 
+import { SegmentInputProps } from './SegmentInput';
+
 const SegmentFrame = ({ children }: any) => (
   <>
     <SegmentSection label="Segment Name">{children}</SegmentSection>
@@ -97,4 +99,40 @@ export const InputWithAutoFocus = () => {
   );
 };
 
+export const Basic: ComponentStory<React.ComponentType<SegmentInputProps<string | number>>> = (
+  args: SegmentInputProps<string | number>
+) => {
+  const [value, setValue] = useState(args.value);
+
+  const props: SegmentInputProps<string | number> = {
+    ...args,
+    value,
+    onChange: (value) => {
+      setValue(value);
+      action('onChange fired')({ value });
+    },
+    onExpandedChange: (expanded) => action('onExpandedChange fired')({ expanded }),
+  };
+
+  return (
+    <SegmentSection label="Segment:">
+      <SegmentInput<string | number> {...props} />
+    </SegmentSection>
+  );
+};
+
+Basic.parameters = {
+  controls: {
+    exclude: ['value', 'onChange', 'Component', 'className', 'onExpandedChange'],
+  },
+};
+
+Basic.args = {
+  value: 'Initial input value',
+  placeholder: 'Placeholder text',
+  disabled: false,
+  autofocus: false,
+  inputPlaceholder: 'Start typing...',
+};
+
 export default meta;