render the actual autocomplete typeahead component

.storybook/main.js

@@ -7,5 +7,9 @@ module.exports = {
     "../packages/**/*.stories.mdx",
     "../packages/**/*.stories.@(js|jsx|ts|tsx)",
   ],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
 };

package.json

@@ -27,12 +27,12 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-docs": "^6.2.9",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/react": "^6.2.9",
-    "@storybook/testing-react": "^0.0.17",
+    "@storybook/addon-actions": "^6.4.5",
+    "@storybook/addon-docs": "^6.4.5",
+    "@storybook/addon-essentials": "^6.4.5",
+    "@storybook/addon-links": "^6.4.5",
+    "@storybook/react": "^6.4.5",
+    "@storybook/testing-react": "^1.0.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@types/jest": "^26.0.14",
@@ -60,13 +60,15 @@
     "yalc": "^1.0.0-pre.53"
   },
   "optionalDependencies": {
+    "@storybook/addon-interactions": "^6.4.5",
+    "@storybook/testing-library": "^0.0.7",
     "apollo-server": "^3.5.0",
     "apollo-server-express": "^3.5.0",
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "graphql-tools": "^8.2.0",
     "msw": "^0.35.0",
-    "msw-storybook-addon": "^1.4.1",
+    "msw-storybook-addon": "^1.5.0",
     "typedoc": "^0.21.4"
   },
   "publishConfig": {

packages/graphql/templates/other.ts

@@ -1,5 +1,8 @@
 import { capitalize } from "@vulcanjs/utils";
 
+export const fieldDynamicQueryName = ({ queryResolverName }) =>
+  `FormComponentDynamic${capitalize(queryResolverName)}Query`;
+
 /*
 
 Field-specific data loading query template for a dynamic array of item IDs
@@ -11,7 +14,7 @@ export const fieldDynamicQueryTemplate = ({
   queryResolverName,
   autocompletePropertyName,
 }) =>
-  `query FormComponent${capitalize(queryResolverName)}Query($value: [String!]) {
+  `query ${fieldDynamicQueryName({ queryResolverName })}($value: [String!]) {
     ${queryResolverName}(input: { 
       filter: {  _id: { _in: $value } },
       sort: { ${autocompletePropertyName}: asc }
@@ -33,7 +36,7 @@ export const fieldStaticQueryTemplate = ({
   queryResolverName,
   autocompletePropertyName,
 }) =>
-  `query FormComponent${capitalize(queryResolverName)}Query {
+  `query FormComponentStatic${capitalize(queryResolverName)}Query {
   ${queryResolverName}(input: { 
     
     sort: { ${autocompletePropertyName}: asc }

packages/react-ui/components/form/inputs/AutocompleteMultiple.tsx

@@ -74,6 +74,7 @@ export const AutocompleteMultiple = (props: AutocompleteMultipleProps) => {
   return (
     <Components.FormItem
       {...props} /*path={path} label={label} {...itemProperties}*/
+      name={path}
     >
       {/** @ts-ignore */}
       <AsyncTypeahead
@@ -88,6 +89,8 @@ export const AutocompleteMultiple = (props: AutocompleteMultipleProps) => {
         }}
         options={autocompleteOptions}
         id={path}
+        // passing id doesn't seem to work, we need input props
+        inputProps={{ id: path }}
         ref={refFunction}
         onSearch={(queryString) => {
           setQueryString(queryString);

packages/react-ui/components/form/inputs/BasicInputs.tsx

@@ -27,7 +27,18 @@ const HTMLInputAdapter = (props: FormInputProps & { type: string }) => {
 }; // TODO: might need some sanitization
 // For consistency with Vulcan Meteor ui bootstrap and ui material
 // @see packages/vulcan-ui-bootstrap/lib/components/forms/FormItem.jsx
-export const FormItem = HTMLInputAdapter;
+export const FormItem = (
+  props: FormInputProps["itemProperties"] &
+    Pick<FormInputProps["inputProperties"], "label" | "name">
+) => {
+  const { inputProperties, label, name } = props;
+  return (
+    <div>
+      <label htmlFor={name}>{label}</label>
+      {props.children}
+    </div>
+  );
+};
 
 const HTMLSelectAdapter = (props: FormInputProps) => {
   const { inputProperties, options = [] } = props;

packages/react-ui/decorators/tests/autocomplete.stories.tsx

@@ -1,13 +1,19 @@
 import React from "react";
 import { Story, Meta } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
-import { createGraphqlModel } from "@vulcanjs/graphql";
+import { screen, userEvent } from "@storybook/testing-library";
+
+import { createGraphqlModel, fieldDynamicQueryName } from "@vulcanjs/graphql";
 import { makeAutocomplete } from "../autocomplete";
 import {
   Form,
   FormProps,
   VulcanComponentsProvider,
 } from "../../components/form";
+import {
+  GraphqlQueryStub,
+  graphqlQueryStubsToMsw,
+} from "@vulcanjs/graphql/testing";
 
 const people = createGraphqlModel({
   name: "People",
@@ -138,3 +144,28 @@ const AutocompleteDemoTemplate: Story<AutocompleteDemoProps> = (args) => (
   <AutocompleteDemo {...args} />
 );
 export const DefaultAutocompleteDemo = AutocompleteDemoTemplate.bind({});
+
+const peopleAutocompleteQuery: GraphqlQueryStub = {
+  operationName: fieldDynamicQueryName({ queryResolverName: "Projects" }),
+  response: {
+    data: {},
+  },
+};
+const peopleAutocompleteQueryMock = graphqlQueryStubsToMsw([
+  peopleAutocompleteQuery,
+]);
+export const PlayAutocompleteDemo = AutocompleteDemoTemplate.bind({});
+PlayAutocompleteDemo.play = async () => {
+  const projectInput = screen.getByLabelText("Project");
+  await userEvent.type(projectInput, "Vulcan Next");
+  /*
+  People is a tad trickier because it seems to depend on another Entity model in state of js
+  const peopleInput = screen.getByLabelText("People");
+  await userEvent.type(peopleInput, "Octocat");
+  */
+};
+PlayAutocompleteDemo.parameters = {
+  msw: {
+    handlers: [...peopleAutocompleteQueryMock],
+  },
+};