Old AsyncSelect: Add story (#22536)

* Change to CSF

* Remove comments

* Fix AsyncSelect error

* Remove changes to the component

* Restructure

* Remove comments

* Add searching

* Remove witespace

Co-Authored-By: Dominik Prokop <dominik.prokop@grafana.com>

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

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

-import React from 'react';
-import { storiesOf } from '@storybook/react';
+import React, { useState, useCallback } from 'react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, object } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
 import { SelectableValue } from '@grafana/data';
-import { Select } from './Select';
+import { Select, AsyncSelect } from './Select';
 
-const SelectStories = storiesOf('General/Select/Select', module);
+export default {
+  title: 'General/Select/Select',
+  component: Select,
+  decorators: [withCenteredStory, withKnobs],
+};
 
-SelectStories.addDecorator(withCenteredStory).addDecorator(withKnobs);
+const intialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
 
-SelectStories.add('default', () => {
-  const intialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
+const options = object<Array<SelectableValue<string>>>('Options:', [
+  intialState,
+  { label: 'Another label', value: 'Another value 1' },
+  { label: 'Another label', value: 'Another value 2' },
+  { label: 'Another label', value: 'Another value 3' },
+  { label: 'Another label', value: 'Another value 4' },
+  { label: 'Another label', value: 'Another value 5' },
+  { label: 'Another label', value: 'Another value ' },
+]);
+
+export const basic = () => {
   const value = object<SelectableValue<string>>('Selected Value:', intialState);
-  const options = object<Array<SelectableValue<string>>>('Options:', [
-    intialState,
-    { label: 'Another label', value: 'Another value' },
-  ]);
 
   return (
     <UseState initialState={value}>
@@ -35,16 +43,11 @@ SelectStories.add('default', () => {
       }}
     </UseState>
   );
-});
+};
 
-SelectStories.add('With allowCustomValue', () => {
-  const intialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
+export const withAllowCustomValue = () => {
   // @ts-ignore
   const value = object<SelectableValue<string>>('Selected Value:', null);
-  const options = object<Array<SelectableValue<string>>>('Options:', [
-    intialState,
-    { label: 'Another label', value: 'Another value' },
-  ]);
 
   return (
     <UseState initialState={value}>
@@ -64,4 +67,32 @@ SelectStories.add('With allowCustomValue', () => {
       }}
     </UseState>
   );
-});
+};
+
+export const asyncSelect = () => {
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [value, setValue] = useState();
+  const loadAsyncOptions = useCallback(
+    inputValue => {
+      return new Promise<Array<SelectableValue<string>>>(resolve => {
+        setTimeout(() => {
+          setIsLoading(false);
+          resolve(options.filter(option => option.label && option.label.includes(inputValue)));
+        }, 1000);
+      });
+    },
+    [value]
+  );
+  return (
+    <AsyncSelect
+      value={value}
+      defaultOptions
+      isLoading={isLoading}
+      loadOptions={loadAsyncOptions}
+      onChange={value => {
+        action('onChange')(value);
+        setValue(value);
+      }}
+    />
+  );
+};