examples: fix typos in cms-agilitycms (#82504)

## Summary

Correct spelling errors in the cms-agilitycms example, including the
image prop spelling and dependency imports.

Bug Fixes:
- Fix misspelled intersectionTreshold prop to intersectionThreshold in
the Image component and its useInView configuration

Enhancements:
- Rename dependancies.ts to dependencies.ts and update
requireComponentDependancyByName to requireComponentDependencyByName
across API and component imports

### Adding or Updating Examples

- [x] The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`.
See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>

Author: JamBalaya56562

examples/cms-agilitycms/lib/api.ts

@@ -3,7 +3,7 @@ import { CMS_LANG, CMS_CHANNEL } from "./constants";
 import { asyncForEach } from "./utils";
 export { validatePreview } from "./preview";
 import { normalizePosts } from "./normalize";
-import { requireComponentDependancyByName } from "./dependancies";
+import { requireComponentDependencyByName } from "./dependencies";
 
 // Our LIVE API client
 const liveClient = agility.getApi({
@@ -155,7 +155,7 @@ export async function getAgilityPageProps({ params, preview }) {
 
     //loop through the zone's modules
     await asyncForEach(modulesForThisContentZone, async (moduleItem) => {
-      let ModuleComponentToRender = requireComponentDependancyByName(
+      let ModuleComponentToRender = requireComponentDependencyByName(
         moduleItem.module,
       );
 

examples/cms-agilitycms/lib/components/content-zone.tsx

@@ -1,11 +1,11 @@
-import { requireComponentDependancyByName } from "../dependancies";
+import { requireComponentDependencyByName } from "../dependencies";
 
 export default function ContentZone(props) {
   function RenderModules() {
     let modules = props.page.zones[props.name];
 
     return modules.map((m, i) => {
-      const AgilityModule = requireComponentDependancyByName(m.moduleName);
+      const AgilityModule = requireComponentDependencyByName(m.moduleName);
       return <AgilityModule key={i} {...m.item} />;
     });
   }

examples/cms-agilitycms/lib/components/image.tsx

@@ -71,7 +71,6 @@ type ImageProps = {
   className?: string;
   pictureClassName?: string;
   fadeInDuration?: number;
-  intersectionTreshold?: number;
   intersectionThreshold?: number;
   intersectionMargin?: string;
   lazyLoad?: boolean;
@@ -83,7 +82,7 @@ type ImageProps = {
 const Image = function ({
   className,
   fadeInDuration,
-  intersectionTreshold,
+  intersectionThreshold,
   intersectionMargin,
   pictureClassName,
   lazyLoad = true,
@@ -99,7 +98,7 @@ const Image = function ({
   }, []);
 
   const [ref, inView] = useInView({
-    threshold: intersectionTreshold || 0,
+    threshold: intersectionThreshold || 0,
     rootMargin: intersectionMargin || "0px 0px 0px 0px",
     triggerOnce: true,
   });

examples/cms-agilitycms/lib/components/page-template.tsx

@@ -1,7 +1,7 @@
-import { requireComponentDependancyByName } from "../dependancies";
+import { requireComponentDependencyByName } from "../dependencies";
 
 export default function CMSPageTemplate(props) {
-  const AgilityPageTemplateToRender = requireComponentDependancyByName(
+  const AgilityPageTemplateToRender = requireComponentDependencyByName(
     props.pageTemplateName,
   );
   return <AgilityPageTemplateToRender {...props} />;

examples/cms-agilitycms/lib/dependancies.ts renamed to examples/cms-agilitycms/lib/dependencies.ts

@@ -23,7 +23,7 @@ const requireComponent = (name) => {
 //Bug: when dynamic imports are used within the module, it doest not get outputted server-side
 //let AgilityModule = dynamic(() => import ('../components/' + m.moduleName));
 
-export const requireComponentDependancyByName = (name) => {
+export const requireComponentDependencyByName = (name) => {
   let pascalCaseName = name;
   let kebabCaseName = convertPascalToKebabCase(name);
   let Component = null;