chore(storybook): add missing AsyncFiltering story (#2566)

* feat(autocomplete): add AsyncFilteringTemplate

* chore(autocomplete): move SWCharacter out

* feat(changeset):  add missing AsyncFiltering story in Autocomplete

* chore(changeset): remove changeset since the change only impacts the story

packages/components/autocomplete/stories/autocomplete.stories.tsx

@@ -9,6 +9,7 @@ import {
   Animal,
   User,
 } from "@nextui-org/stories-utils";
+import {useAsyncList} from "@react-stately/data";
 import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
 import {PetBoldIcon, SearchLinearIcon, SelectorIcon} from "@nextui-org/shared-icons";
 import {Avatar} from "@nextui-org/avatar";
@@ -70,6 +71,13 @@ export default {
   ],
 } as Meta<typeof Autocomplete>;
 
+type SWCharacter = {
+  name: string;
+  height: string;
+  mass: string;
+  birth_year: string;
+};
+
 const defaultProps = {
   ...input.defaultVariants,
   ...autocomplete.defaultVariants,
@@ -234,6 +242,40 @@ const LabelPlacementTemplate = ({color, variant, ...args}: AutocompleteProps) =>
   </div>
 );
 
+const AsyncFilteringTemplate = ({color, variant, ...args}: AutocompleteProps<SWCharacter>) => {
+  let list = useAsyncList<SWCharacter>({
+    async load({signal, filterText}) {
+      let res = await fetch(`https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
+      let json = await res.json();
+
+      return {
+        items: json.results,
+      };
+    },
+  });
+
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      color={color}
+      inputValue={list.filterText}
+      isLoading={list.isLoading}
+      items={list.items}
+      label="Select a character"
+      placeholder="Type to search..."
+      variant={variant}
+      onInputChange={list.setFilterText}
+      {...args}
+    >
+      {(item) => (
+        <AutocompleteItem key={item.name} className="capitalize">
+          {item.name}
+        </AutocompleteItem>
+      )}
+    </Autocomplete>
+  );
+};
+
 const AsyncLoadingTemplate = ({color, variant, ...args}: AutocompleteProps<Pokemon>) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
@@ -706,6 +748,14 @@ export const LabelPlacement = {
   },
 };
 
+export const AsyncFiltering = {
+  render: AsyncFilteringTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
 export const AsyncLoading = {
   render: AsyncLoadingTemplate,