[PSL-1596] Making onSubmit a required prop (#33)

* fix: remove unresolved merge conflicts

* qol: Makes onSubmit Required

* Docs: Update docs to include now required onSubmit

* lint

* fix: Standardize double quotes and fix brace padding

* build: docs

* build: rebuilt docs

* sync docs with main

* sync docs with main

---------

Co-authored-by: Jesse DeOms <[email protected]>

Author: Mudaafi

src/constants.ts

@@ -1,3 +1,5 @@
+import { AutocompleteSubmitEvent } from './types';
+
 // Autocomplete key index
 export const apiKey = 'key_Gep3oQOu5IMcNh9A';
 
@@ -7,7 +9,7 @@ export const apiKey = 'key_Gep3oQOu5IMcNh9A';
 
 export const componentDescription = `- import \`CioAutocomplete\` to render in your JSX.
 - This component handles state management, data fetching, and rendering logic.
-- To use this component, an \`apiKey\` or \`cioJsClient\` are required, all other values are optional.
+- To use this component, an \`apiKey\` or \`cioJsClient\` are required, and an \`onSubmit\` callback must be passed. All other values are optional.
 - Use different props to configure the behavior of this component.
 - The following stories shows how different props affect the component's behavior
 
@@ -16,7 +18,7 @@ export const componentDescription = `- import \`CioAutocomplete\` to render in y
 
 export const hookDescription = `- import \`useCioAutocomplete\` and call this custom hook in a functional component.
 - This hook handles state management & data fetching, but leaves rendering logic up to you
-- To use this hook, an \`apiKey\` or \`cioJsClient\` are required, all other values are optional.
+- To use this hook, an \`apiKey\` or \`cioJsClient\` are required, and an \`onSubmit\` callback must be passed. All other values are optional.
 - Pass different options to the \`useCioAutocomplete\` hook to configure behavior.
 - The following stories shows how different options affect the hook's behavior
 
@@ -50,7 +52,7 @@ const {
 /// //////////////////////////////
 
 export const sectionsDescription = `- by default, typing a query will fetch data for search suggestions and Products
-- to override this, pass a an array of sections objects
+- to override this, pass an array of sections objects
 - the order of the objects in the \`sections\` array determines the order of the results
 - each section object must have an \`identifier\`
 - each section object can specify a \`type\`
@@ -77,7 +79,7 @@ When no values are passed for the \`sections\` argument, the following defaults
 export const userEventsDescription = `- pass callback functions to respond to user events
 - if provided, the onFocus callback function will be called each time the user focuses on the text input field
 - if provided, the onChange callback function will be called each time the user changes the value in the text input field
-- if provided, the onSubmit callback function will be called each time the user submits the form
+- the onSubmit callback function will be called each time the user submits the form
 - the user can submit the form by pressing the enter key in the text input field, clicking a submit button within the form, clicking on a result, or pressing enter while a result is selected
 
 > ⚠️ NOTE ⚠️ Use the Storybook Canvas Actions tab to explore the behavior of all of these \`OnEvent\` callback functions as you interact with our Default User Events example rendered in the Canvas. In the stories below, Storybook Canvas Actions have been disabled to focus on each of these callback functions in isolation. Each of the example callback functions in the stories below log output to the console tab of the browser's developer tools.`;
@@ -118,6 +120,8 @@ export const onSubmitDescription = `Pass an \`onSubmit\` callback function to ex
   - if the user selects a suggested item from the dropdown list:
     - the \`originalQuery\` field will provide the value of the input field that generated the selected item
     - an \`item\` object with information about the suggestion that the user selected`;
+// eslint-disable-next-line no-console
+export const onSubmitDefault = (submitEvent: AutocompleteSubmitEvent) => console.dir(submitEvent);
 export const zeroStateSectionsDescription = `Use \`zeroStateSections\` to show suggestions after a user applies focus to the search input field and before they start typing a query`;
 export const openOnFocusDescription = `Use \`openOnFocus: false\` to show suggestions after a user clears their query, but not when they initially apply focus to the search input field`;
 export const multipleSectionsDescription = `Use as many different \`recommendations\` and \`custom\` sections as you'd like and in whatever order you would like!`;

src/hooks/useDownShift.ts

@@ -7,7 +7,7 @@ let idCounter = 0;
 type UseDownShiftOptions = {
   setQuery: React.Dispatch<React.SetStateAction<string>>;
   items: Item[];
-  onSubmit?: OnSubmit;
+  onSubmit: OnSubmit;
   previousQuery?: string;
   cioClient?: ConstructorIOClient;
   onChange?: (string) => void;

src/stories/Autocomplete/Component/Sections.stories.tsx

@@ -1,6 +1,6 @@
 import { CioAutocomplete } from '../../../index';
 import { argTypes } from '../argTypes';
-import { stringify } from '../../../utils';
+import { stringifyWithDefaults } from '../../../utils';
 import {
   contentDescription,
   customSectionDescription,
@@ -11,6 +11,7 @@ import {
   sectionOrderDescription,
   sectionsDescription,
   apiKey,
+  onSubmitDefault as onSubmit,
 } from '../../../constants';
 import { ComponentTemplate, getComponentStoryParams, addComponentStoryDescription } from '.';
 
@@ -28,12 +29,13 @@ export default {
 };
 
 export const Default = ComponentTemplate.bind({});
-Default.args = { apiKey };
-Default.parameters = getComponentStoryParams(`const args = ${stringify(Default.args)}`);
+Default.args = { apiKey, onSubmit };
+Default.parameters = getComponentStoryParams(`const args = ${stringifyWithDefaults(Default.args)}`);
 
 export const RenderSearchSuggestions = ComponentTemplate.bind({});
 RenderSearchSuggestions.args = {
   apiKey,
+  onSubmit,
   sections: [
     {
       identifier: 'Search Suggestions',
@@ -42,13 +44,14 @@ RenderSearchSuggestions.args = {
 };
 addComponentStoryDescription(
   RenderSearchSuggestions,
-  `const args = ${stringify(RenderSearchSuggestions.args)}`,
+  `const args = ${stringifyWithDefaults(RenderSearchSuggestions.args)}`,
   searchSuggestionsDescription
 );
 
 export const RenderSuggestedProducts = ComponentTemplate.bind({});
 RenderSuggestedProducts.args = {
   apiKey,
+  onSubmit,
   sections: [
     {
       identifier: 'Products',
@@ -57,13 +60,14 @@ RenderSuggestedProducts.args = {
 };
 addComponentStoryDescription(
   RenderSuggestedProducts,
-  `const args = ${stringify(RenderSuggestedProducts.args)}`,
+  `const args = ${stringifyWithDefaults(RenderSuggestedProducts.args)}`,
   productsDescription
 );
 
 export const RenderSuggestedContent = ComponentTemplate.bind({});
 RenderSuggestedContent.args = {
   apiKey,
+  onSubmit,
   sections: [
     {
       identifier: 'Content',
@@ -72,13 +76,14 @@ RenderSuggestedContent.args = {
 };
 addComponentStoryDescription(
   RenderSuggestedContent,
-  `const args = ${stringify(RenderSuggestedContent.args)}`,
+  `const args = ${stringifyWithDefaults(RenderSuggestedContent.args)}`,
   contentDescription
 );
 
 export const ConfigureNumberOfResultsPerSection = ComponentTemplate.bind({});
 ConfigureNumberOfResultsPerSection.args = {
   apiKey,
+  onSubmit,
   sections: [
     {
       identifier: 'Products',
@@ -88,13 +93,14 @@ ConfigureNumberOfResultsPerSection.args = {
 };
 addComponentStoryDescription(
   ConfigureNumberOfResultsPerSection,
-  `const args = ${stringify(ConfigureNumberOfResultsPerSection.args)}`,
+  `const args = ${stringifyWithDefaults(ConfigureNumberOfResultsPerSection.args)}`,
   numResultsDescription
 );
 
 export const ConfigureOrderOfRenderedSections = ComponentTemplate.bind({});
 ConfigureOrderOfRenderedSections.args = {
   apiKey,
+  onSubmit,
   sections: [
     {
       identifier: 'Products',
@@ -106,13 +112,14 @@ ConfigureOrderOfRenderedSections.args = {
 };
 addComponentStoryDescription(
   ConfigureOrderOfRenderedSections,
-  `const args = ${stringify(ConfigureOrderOfRenderedSections.args)}`,
+  `const args = ${stringifyWithDefaults(ConfigureOrderOfRenderedSections.args)}`,
   sectionOrderDescription
 );
 
 export const RenderRecommendations = ComponentTemplate.bind({});
 RenderRecommendations.args = {
   apiKey,
+  onSubmit,
   sections: [
     {
       identifier: 'Search Suggestions',
@@ -129,13 +136,14 @@ RenderRecommendations.args = {
 };
 addComponentStoryDescription(
   RenderRecommendations,
-  `const args = ${stringify(RenderRecommendations.args)}`,
+  `const args = ${stringifyWithDefaults(RenderRecommendations.args)}`,
   recommendationsDescription
 );
 
 export const RenderCustomSection = ComponentTemplate.bind({});
 RenderCustomSection.args = {
   apiKey,
+  onSubmit,
   sections: [
     {
       identifier: 'Search Suggestions',
@@ -165,6 +173,6 @@ RenderCustomSection.args = {
 };
 addComponentStoryDescription(
   RenderCustomSection,
-  `const args = ${stringify(RenderCustomSection.args)}`,
+  `const args = ${stringifyWithDefaults(RenderCustomSection.args)}`,
   customSectionDescription
 );

src/stories/Autocomplete/Component/UserEvents.stories.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable no-console */
 import { CioAutocomplete } from '../../../index';
 import { argTypes } from '../argTypes';
-import { stringify, disableStoryActions } from '../../../utils';
+import { stringifyWithDefaults, disableStoryActions, defaultArgumentsCode } from '../../../utils';
 import {
   onChangeDescription,
   onFocusDescription,
   onSubmitDescription,
   userEventsDescription,
   apiKey,
+  onSubmitDefault,
 } from '../../../constants';
 import { ComponentTemplate, getComponentStoryParams, addComponentStoryDescription } from '.';
 
@@ -25,20 +26,20 @@ export default {
 };
 
 export const Default = ComponentTemplate.bind({});
-Default.args = { apiKey };
-Default.parameters = getComponentStoryParams(`const args = ${stringify(Default.args)}`);
+Default.args = { apiKey, onSubmit: onSubmitDefault };
+Default.parameters = getComponentStoryParams(`const args = ${stringifyWithDefaults(Default.args)}`);
 
 const onFocus = () => {
   console.log('Focus!');
 };
 export const OnFocus = ComponentTemplate.bind({});
-OnFocus.args = { apiKey, onFocus };
+OnFocus.args = { apiKey, onSubmit: onSubmitDefault, onFocus };
 addComponentStoryDescription(
   OnFocus,
   `const args = {
-    apiKey: '${apiKey}',
-    onFocus: () => { console.log('Focus!') }
-  }`,
+  ${defaultArgumentsCode(apiKey)},
+  "onFocus": () => { console.log("Focus!") }
+}`,
   onFocusDescription
 );
 disableStoryActions(OnFocus);
@@ -47,15 +48,15 @@ const onChange = (inputFieldValue) => {
   console.log(`New Query: ${inputFieldValue}`);
 };
 export const OnChange = ComponentTemplate.bind({});
-OnChange.args = { apiKey, onChange };
+OnChange.args = { apiKey, onSubmit: onSubmitDefault, onChange };
 addComponentStoryDescription(
   OnChange,
   `const args = {
-    apiKey: '${apiKey}',
-    onChange: (inputFieldValue) => {
-      console.log('New Query: ' + inputFieldValue);
-    }
-  }`,
+  ${defaultArgumentsCode(apiKey)}
+  "onChange": (inputFieldValue) => {
+    console.log("New Query: " + inputFieldValue);
+  }
+}`,
   onChangeDescription
 );
 disableStoryActions(OnChange);
@@ -74,17 +75,17 @@ OnSubmit.args = { apiKey, onSubmit };
 addComponentStoryDescription(
   OnSubmit,
   `const args = {
-    apiKey: '${apiKey}',
-    onSubmit: (submitEvent) => {
-      const { query, item, originalQuery } = submitEvent;
-      if (query) {
-        console.log('Submitted query: ' + query);
-      } else {
-        console.log('Selected a search suggestion for: ' + originalQuery);
-        console.dir(item);
-      }
+  "apiKey": "${apiKey}",
+  "onSubmit": (submitEvent) => {
+    const { query, item, originalQuery } = submitEvent;
+    if (query) {
+      console.log("Submitted query: " + query);
+    } else {
+      console.log("Selected a search suggestion for: " + originalQuery);
+      console.dir(item);
     }
-  }`,
+  }
+}`,
   onSubmitDescription
 );
 disableStoryActions(OnSubmit);

src/stories/Autocomplete/Component/ZeroState.stories.tsx

@@ -1,6 +1,6 @@
 import { CioAutocomplete } from '../../../index';
 import { argTypes } from '../argTypes';
-import { stringify } from '../../../utils';
+import { stringifyWithDefaults } from '../../../utils';
 import {
   customSectionDescription,
   multipleSectionsDescription,
@@ -9,6 +9,7 @@ import {
   zeroStateDescription,
   zeroStateSectionsDescription,
   apiKey,
+  onSubmitDefault as onSubmit,
 } from '../../../constants';
 import { ComponentTemplate, getComponentStoryParams, addComponentStoryDescription } from '.';
 
@@ -26,12 +27,13 @@ export default {
 };
 
 export const Default = ComponentTemplate.bind({});
-Default.args = { apiKey };
-Default.parameters = getComponentStoryParams(`const args = ${stringify(Default.args)}`);
+Default.args = { apiKey, onSubmit };
+Default.parameters = getComponentStoryParams(`const args = ${stringifyWithDefaults(Default.args)}`);
 
 export const RenderSections = ComponentTemplate.bind({});
 RenderSections.args = {
   apiKey,
+  onSubmit,
   zeroStateSections: [
     {
       identifier: 'bestsellers',
@@ -42,13 +44,14 @@ RenderSections.args = {
 };
 addComponentStoryDescription(
   RenderSections,
-  `const args = ${stringify(RenderSections.args)}`,
+  `const args = ${stringifyWithDefaults(RenderSections.args)}`,
   zeroStateSectionsDescription
 );
 
 export const NoOpenOnFocus = ComponentTemplate.bind({});
 NoOpenOnFocus.args = {
   apiKey,
+  onSubmit,
   openOnFocus: false,
   zeroStateSections: [
     {
@@ -59,13 +62,14 @@ NoOpenOnFocus.args = {
 };
 addComponentStoryDescription(
   NoOpenOnFocus,
-  `const args = ${stringify(NoOpenOnFocus.args)}`,
+  `const args = ${stringifyWithDefaults(NoOpenOnFocus.args)}`,
   openOnFocusDescription
 );
 
 export const RenderRecommendations = ComponentTemplate.bind({});
 RenderRecommendations.args = {
   apiKey,
+  onSubmit,
   zeroStateSections: [
     {
       identifier: 'bestsellers',
@@ -75,13 +79,14 @@ RenderRecommendations.args = {
 };
 addComponentStoryDescription(
   RenderRecommendations,
-  `const args = ${stringify(RenderRecommendations.args)}`,
+  `const args = ${stringifyWithDefaults(RenderRecommendations.args)}`,
   recommendationsDescription
 );
 
 export const RenderCustomSection = ComponentTemplate.bind({});
 RenderCustomSection.args = {
   apiKey,
+  onSubmit,
   zeroStateSections: [
     {
       identifier: 'recent_searches',
@@ -108,13 +113,14 @@ RenderCustomSection.args = {
 };
 addComponentStoryDescription(
   RenderCustomSection,
-  `const args = ${stringify(RenderCustomSection.args)}`,
+  `const args = ${stringifyWithDefaults(RenderCustomSection.args)}`,
   customSectionDescription
 );
 
 export const RenderMultipleSections = ComponentTemplate.bind({});
 RenderMultipleSections.args = {
   apiKey,
+  onSubmit,
   zeroStateSections: [
     {
       identifier: 'bestsellers',
@@ -145,6 +151,6 @@ RenderMultipleSections.args = {
 };
 addComponentStoryDescription(
   RenderMultipleSections,
-  `const args = ${stringify(RenderMultipleSections.args)}`,
+  `const args = ${stringifyWithDefaults(RenderMultipleSections.args)}`,
   multipleSectionsDescription
 );