Fix typos

.storybook/main.cjs

@@ -155,7 +155,7 @@ module.exports = {
         exclude: /a\.js|node_modules/,
         // add errors to webpack instead of warnings
         failOnError: true,
-        // allow import cycles that include an asyncronous import,
+        // allow import cycles that include an asynchronous import,
         // e.g. via import(/* webpackMode: "weak" */ 'file.js')
         allowAsyncCycles: false,
         // set the current working directory for displaying module paths

docs/animations.md

@@ -22,7 +22,7 @@ const sampleAnimationObject = {
 };
 ```
 
-These objects are managed within the story reducer and passed to the animation provider. The animation provider then generates animations by passing this data to the function `AnimationPart(..)` located in `packages/animation/src/parts/index.js`. `AnimationPart(..)` maps the animations instanciation args to a generator function that will generate keyframes, WAAPI animation targets, AMP animation targets, etc.
+These objects are managed within the story reducer and passed to the animation provider. The animation provider then generates animations by passing this data to the function `AnimationPart(..)` located in `packages/animation/src/parts/index.js`. `AnimationPart(..)` maps the animations instantiation args to a generator function that will generate keyframes, WAAPI animation targets, AMP animation targets, etc.
 
 ### Animation Parts & Animation Effects
 
@@ -69,13 +69,13 @@ Target DOM elements are applied to story element components through animation wr
 
 ### Single Animation Target
 
-In early specs for animations, we allowed a single animation to have mutliple targets (be applied to mulitple elements), since then, we have changed this spec to only allow an animation to have a single target element. This new spec is manually enforced in the editor code between the story reducer and the animation effect chooser. 
+In early specs for animations, we allowed a single animation to have multiple targets (be applied to multiple elements), since then, we have changed this spec to only allow an animation to have a single target element. This new spec is manually enforced in the editor code between the story reducer and the animation effect chooser. 
 
 Remnants of this scope change can be seen in the serializable animation objects held in the story reducer state. These animations still take an array of targets even though that array should only ever hold one target while in use in the editor.
 
 ### Early Timeline Prototype
 
-For the intial animation & template implementation we were supporting very complex animations for the templates. Creating these template animations necessitated an internal timeline tool to compose animation parts manually on each template. Since then, we've simplified animations for users and tried to make them parallel the AMP Story Animation presets
+For the initial animation & template implementation we were supporting very complex animations for the templates. Creating these template animations necessitated an internal timeline tool to compose animation parts manually on each template. Since then, we've simplified animations for users and tried to make them parallel the AMP Story Animation presets
 
 If we do introduce an animation timeline to the editor in the future, here's the reference to the PR where we took out the internal timeline tool:
 [#7067](https://github.com/GoogleForCreators/web-stories-wp/pull/7067)

docs/cdn.md

@@ -19,7 +19,7 @@ In order to be able to add new assets, you have to [install Git LFS](https://doc
 
 You can download it from [git-lfs.github.com](https://git-lfs.github.com/) (or use `brew install git-lfs` if you're on Mac).
 
-Verify that the installation was succcessful:
+Verify that the installation was successful:
 
 ```bash
 $ git lfs install

docs/design-panel-push-update-flow.md

@@ -40,7 +40,7 @@ flowchart TB
                     A[pushUpdate or pushUpdateForObject] --> |update, submit| B[[setElementUpdates - Add update to update queue]]
                     B -->|submit == false| C[elementUpdates - locally stored updates]
                     B --> |submit == true| D[submit]
-                    D --> J[[setTimout to dispatch 'submit' event]]
+                    D --> J[[setTimeout to dispatch 'submit' event]]
                 end
             end
         end

docs/external-template-creation.md

@@ -133,7 +133,7 @@ Once you have the story JSON, several code changes are needed to add it to the l
        - Resets `sizes` property for images to `[]`.
        - Resets all `id` and `posterId` to 0 for image and video type resources.
 
-      NOTE: Check all resource URLs and properties are set properly before commiting the template.
+      NOTE: Check all resource URLs and properties are set properly before committing the template.
 
 2. Create a new file `metaData.js` in your newly created `<template_name>` directory. Your `<template_name>/metaData.js` file would then look something like this with object corresponding to the new template and properties `id`, `title`, `tags`, `colors`, `creationDate`, etc. 
 
@@ -270,7 +270,7 @@ export const MASKS = [
     showInLibrary: true, // mark this as true if you would like the shape to be user facing
     name: _x('Ring', 'shape/mask name', 'web-stories'),
     path: CLIP_PATHS[MaskTypes.RING],
-    ratio: 392 / 392, // <Width of svg viewbox coppied from illustrator> / <Height>
+    ratio: 392 / 392, // <Width of svg viewbox copied from illustrator> / <Height>
   },
   }
 ];

docs/performance.md

@@ -43,14 +43,14 @@ Once expensive renders are identified in the flame graph from the React Profilin
 
 ## Using Context Performantly
 
-All of our context is held using the [use-context-selector](https://github.com/dai-shi/use-context-selector) package, and we have a small layer around it that allows it to use shallow equality vs referencial equality to detect if a component should re-render based on the return value of its selector. You can see this code in `packages/react/src/useContextSelector.js`.
+All of our context is held using the [use-context-selector](https://github.com/dai-shi/use-context-selector) package, and we have a small layer around it that allows it to use shallow equality vs referential equality to detect if a component should re-render based on the return value of its selector. You can see this code in `packages/react/src/useContextSelector.js`.
 
 As a general rule of thumb, it is best practice to pull only essential data needed for your component through a selector when using `useContextSelector(...)`. This practice helps eliminate empty/extraneous renders induced from context. [Read more about it here](https://github.com/GoogleForCreators/web-stories-wp/issues/2662#issuecomment-1011372651).
 
 ## Main Areas to Identify Performance Regressions
 
 There is always a chance for performance regressions as features get altered and added. The main regression to watch out for in the story editor is where a component is rendered for every element in state. Examples of this include the Display Layer, the Frames Layer, the Layer Panel. It should be verified that not every instance of said component re-renders when only one or a few of those element components needs updating. All these components are prone to large performance regressions if hooks or props pass data around unwisely.
 
-It would be beneficial to audit these components from time to time in the react profiler. An audit can be as simple as recording an update to selection, or updating the position of a single element. If the react flame graph indicates that this is causing every element to re-render vs only the effected elements, a large performance regression has occured.
+It would be beneficial to audit these components from time to time in the react profiler. An audit can be as simple as recording an update to selection, or updating the position of a single element. If the react flame graph indicates that this is causing every element to re-render vs only the effected elements, a large performance regression has occurred.
 
 Be sure to check for this regression on PRs that effect display elements, frame elements, layers in the layers panel, or any story state hooks.

docs/third-party-integration/dashboard/api-callbacks.md

@@ -289,7 +289,7 @@ Arguments
             - description: Title of the template which will be default title for story.
         - `tags`
             - type: `Array<string>`            
-            - description: set of words tht describe the template.
+            - description: set of words that describe the template.
         - `colors`
             - type: `Array<Object>`            
             - description: Set of colors which are mostly used in template.
@@ -313,7 +313,7 @@ Arguments
             - description: Version of the template used for migration.
         - `pages`
             - type: `array<Page>`
-            - description: Each attay item corrresponds to each page in template.[ page object ](../story-editor/integration-layer-api/api-callbacks.md/#page-object-shape)
+            - description: Each attay item corresponds to each page in template.[ page object ](../story-editor/integration-layer-api/api-callbacks.md/#page-object-shape)
         - `postersByPage`
             - type: `array<Object>`
             - description: Each object consisting of the URL for the page poster.

docs/third-party-integration/story-editor/api-callbacks.md

@@ -346,7 +346,7 @@ Expected response
                             - type: `number`
                             - required: Yes
                             - description: Length of the audio file in seconds.
-                        - `lengthFormated`
+                        - `lengthFormatted`
                             - type: `string`
                             - required: Yes
                             - description: Length of the audio file formatted as MM:SS.

includes/Infrastructure/ServiceBasedPlugin.php

@@ -784,7 +784,7 @@ protected function configure_injector( Injector $injector ): Injector {
 		}
 
 		/**
-		 * Argument mape.
+		 * Argument map.
 		 *
 		 * @var array<class-string, array<string|callable|class-string>> $arguments
 		 */

includes/Migrations/Replace_Conic_Style_Presets.php

@@ -52,7 +52,7 @@ class Replace_Conic_Style_Presets extends Migrate_Base {
 	 */
 	public function migrate(): void {
 		/**
-		 * List of style presest.
+		 * List of style presets.
 		 *
 		 * @var array|null $style_presets
 		 * @phpstan-var StylePresets|null $style_presets

includes/Renderer/Stories/Renderer.php

@@ -208,7 +208,7 @@ public function current(): ?Story {
 	 *
 	 * @since 1.5.0
 	 *
-	 * @retrun void
+	 * @return void
 	 */
 	public function next(): void {
 		++$this->position;

includes/Shopping/Product.php

@@ -339,7 +339,7 @@ protected function set_images( array $images ): void {
 	 *
 	 * @since 1.26.0
 	 *
-	 * @param string $details Deatils.
+	 * @param string $details Details.
 	 */
 	protected function set_details( string $details ): void {
 		$this->details = $details;

karma-story-editor.config.cjs

@@ -184,7 +184,7 @@ module.exports = function (config) {
     // Sharding configuration for CI.
     // We trick karma-parallel into using only 1 browser (parallelOptions.executors === 1)
     // while using a custom strategy that splits up the tests into multiple shards (config.executors > 1).
-    // This allows us to run ony a subset of the tests like so:
+    // This allows us to run only a subset of the tests like so:
     // npm run test:karma:story-editor -- --headless --shard=1/3 # Run the first of 3 desired shards.
     parallelOptions: {
       shardStrategy: config.shard ? 'custom' : 'round-robin',

packages/animation/src/components/WAAPIWrapper.tsx

@@ -76,7 +76,7 @@ function WAAPIWrapper({ children, target }: WrapperProps) {
   // and not generate a new subtree of DOM nodes:
   // https://github.com/facebook/react/issues/3965
   //
-  // To Accomodate for this, we're setting a max of 3 levels deep. All stories built recently should
+  // To Accommodate for this, we're setting a max of 3 levels deep. All stories built recently should
   // only have 1 animation per element, however this allows for backward compatibility with old stories
   // created from legacy templates that use stacked animation parts on single elements
   return (

packages/animation/src/parts/effects/backgroundZoom.ts

@@ -71,7 +71,7 @@ export function EffectBackgroundZoom(
   const normalizedDelta = progress(50, { MIN: 0, MAX: BG_MAX_SCALE });
   // Interpret the normalized delta into the compounded scale coordinate space.
   const delta = lerp(normalizedDelta, { MIN: 0, MAX: range.MAX });
-  // Apply the interpretted fixed delta to the elements scale
+  // Apply the interpreted fixed delta to the elements scale
   const zoomFrom =
     1 + (zoomDirection === ScaleDirection.ScaleOut ? 1 : -1) * delta;
 

packages/animation/src/parts/simple/zoom.ts

@@ -47,7 +47,7 @@ export function AnimationZoom({
   // If supplied a transformOrigin, AMP doesn't allow us to set
   // the transformOrigin property from the keyframes since it is
   // an unanimatable property. To account for this we calculate a
-  // counter translate based off the scale change that mimicks the
+  // counter translate based off the scale change that mimics the
   // element scaling from a particular origin.
   if (transformOrigin) {
     // transformOrigin default is `50% 50%` so we account for

packages/animation/src/utils/test/orderByKeys.ts

@@ -47,7 +47,7 @@ describe('orderByKeys', () => {
     expect(Object.keys(result)).toStrictEqual(propertyOrder);
   });
 
-  it('maintains object equality if keys include property ouside of object', () => {
+  it('maintains object equality if keys include property outside of object', () => {
     const propertyOrder = ['a', 'b', 'c', 'd', 'e'];
     const input = {
       b: 0,

packages/commander/src/utils/updateCdnUrl.ts

@@ -24,7 +24,7 @@ const CDN_URL_CONSTANT_REGEX =
   /define\(\s*'WEBSTORIES_CDN_URL',\s*'([^']*)'\s*\);/;
 
 /**
- * Updates CDN URL in thhe main plugin file.
+ * Updates CDN URL in the main plugin file.
  *
  * Namely, this updates the `WEBSTORIES_CDN_URL` constant in the main plugin file.
  *

packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/index.js

@@ -45,7 +45,7 @@ export const filterContext = createContext({
  * Keeps track of the current filters state.
  *
  * Each filter will have its own logic associated with
- * initilization and how to query terms.
+ * initialization and how to query terms.
  *
  * state.filters should be used for UI.
  * state.filtersObject should hold the key value pairs associated with filtering query params
@@ -58,7 +58,7 @@ export const filterContext = createContext({
  */
 
 export default function StoryFiltersProvider({ children }) {
-  // each filter type will have its own logic for initilizing and querying
+  // each filter type will have its own logic for initializing and querying
   const initializeTaxonomyFilters = useTaxonomyFilters();
   const initializeAuthorFilter = useAuthorFilter();
 

packages/dashboard/src/app/views/myStories/filters/test/useTaxonomyFilter.js

@@ -90,7 +90,7 @@ jest.mock('../../../../api/useApi', () => {
 });
 
 describe('useTaxonomyFilters', () => {
-  it('should initilize the hierarchial taxonomy filters data only', async () => {
+  it('should initialize the hierarchial taxonomy filters data only', async () => {
     const {
       result: { current: initializeTaxonomyFilters },
     } = renderHook(() => useTaxonomyFilters());
@@ -114,21 +114,21 @@ describe('useTaxonomyFilters', () => {
   });
 
   describe('initializeTaxonomyFilters', () => {
-    let initailize;
+    let initialize;
     beforeEach(async () => {
       const {
         result: { current: initializeTaxonomyFilters },
       } = renderHook(() => useTaxonomyFilters());
 
-      initailize = initializeTaxonomyFilters;
+      initialize = initializeTaxonomyFilters;
 
       // flush promise queue
       await act(() => Promise.resolve());
     });
 
-    it('should initilize taxonomy filters data', async () => {
+    it('should initialize taxonomy filters data', async () => {
       // initialize filters
-      const filters = await initailize();
+      const filters = await initialize();
       expect(filters).toHaveLength(2);
 
       const filter1 = filters.at(0);
@@ -139,7 +139,7 @@ describe('useTaxonomyFilters', () => {
     });
 
     it('should use the correct taxonomy for getPrimaryOptions and query', async () => {
-      const filters = await initailize();
+      const filters = await initialize();
       const filter1 = filters.at(0);
       const filter2 = filters.at(1);
 

packages/dashboard/src/app/views/myStories/karma/myStories.karma.js

@@ -354,7 +354,7 @@ describe('CUJ: Creator can view their stories in grid view', () => {
       // key down to the bottom of the available search options
       // plus once more beyond available search options to make sure focus stays intact
       for (let iter = 0; iter < activeListItems.length + 1; iter++) {
-        // disable eslint to prevet overlapping .act calls
+        // disable eslint to prevent overlapping .act calls
         // eslint-disable-next-line no-await-in-loop
         await fixture.events.keyboard.press('down');
       }

packages/dashboard/src/components/layout/test/useLayoutContext.js

@@ -24,7 +24,7 @@ import LayoutProvider from '../provider';
 import useLayoutContext from '../useLayoutContext';
 
 describe('useLayoutContext()', () => {
-  it('should throw an error if used oustide Layout.Provider', () => {
+  it('should throw an error if used outside Layout.Provider', () => {
     expect(() => {
       const {
         // eslint-disable-next-line no-unused-vars

packages/dashboard/src/utils/useDashboardResultsLabel.js

@@ -34,7 +34,7 @@ export default function useDashboardResultsLabel({
   const resultsLabel = useMemo(() => {
     const numResults = totalResults ?? 0;
     const defaultLabel = RESULT_LABELS[view]?.[currentFilter] || '';
-    const interprettedDefaultLabel =
+    const interpretedDefaultLabel =
       typeof defaultLabel === 'function'
         ? defaultLabel(numResults)
         : defaultLabel;
@@ -44,7 +44,7 @@ export default function useDashboardResultsLabel({
           _n('%s result', '%s results', numResults, 'web-stories'),
           sprintf('<strong>%s</strong>', numResults)
         )
-      : interprettedDefaultLabel;
+      : interpretedDefaultLabel;
   }, [isActiveSearch, totalResults, view, currentFilter]);
 
   return resultsLabel;

packages/design-system/src/components/datalist/list/list.tsx

@@ -215,13 +215,13 @@ function OptionListWithRef<O extends AbstractOption>(
       return;
     }
 
-    const highlighedOptionEl = optionsRef.current[focusIndex];
-    if (!highlighedOptionEl) {
+    const highlightedOptionEl = optionsRef.current[focusIndex];
+    if (!highlightedOptionEl) {
       return;
     }
 
-    highlighedOptionEl.focus();
-    listEl.scrollTo(0, highlighedOptionEl.offsetTop - listEl.clientHeight / 2);
+    highlightedOptionEl.focus();
+    listEl.scrollTo(0, highlightedOptionEl.offsetTop - listEl.clientHeight / 2);
   }, [focusIndex, filteredOptions, keyword, onClose, listRef]);
 
   /*

packages/design-system/src/components/infiniteScroller/stories/index.js

@@ -30,7 +30,7 @@ export default {
   component: InfiniteScroller,
   args: {
     loadingAriaMessage:
-      'Data is loading - please note, interesection observers and storybook do not play nicely in firefox.',
+      'Data is loading - please note, intersection observers and storybook do not play nicely in firefox.',
     allDataLoadedMessage: 'all data is loaded',
     allDataLoadedAriaMessage: 'all data is loaded',
   },

packages/design-system/src/components/menu/menu.tsx

@@ -70,15 +70,15 @@ function Menu({
       return;
     }
 
-    const highlighedOptionEl = optionsRef.current[focusedIndex];
-    if (!highlighedOptionEl) {
+    const highlightedOptionEl = optionsRef.current[focusedIndex];
+    if (!highlightedOptionEl) {
       return;
     }
 
-    highlighedOptionEl.focus();
+    highlightedOptionEl.focus();
     listEl.scrollTo?.(
       0,
-      highlighedOptionEl.offsetTop - listEl.clientHeight / 2
+      highlightedOptionEl.offsetTop - listEl.clientHeight / 2
     );
   }, [focusedIndex, isMenuFocused]);
 

packages/design-system/src/components/menu/stories/index.js

@@ -45,7 +45,7 @@ export default {
   },
   argTypes: {
     onMenuItemClick: { action: 'onMenuItemClick' },
-    onDismissMenu: { action: 'onDismissMenu occured' },
+    onDismissMenu: { action: 'onDismissMenu occurred' },
   },
 };
 

packages/design-system/src/components/popup/constants.ts

@@ -80,7 +80,7 @@ export const PopupContainer = styled.div<{
         widthProp.width = `${width}px`;
       }
     }
-    // if maxWidth is given and the width propery hasn't been set
+    // if maxWidth is given and the width property hasn't been set
     // set the PopupContainers max-width
     if (maxWidth && !widthProp.width) {
       widthProp.maxWidth = `${maxWidth}px`;

packages/e2e-tests/src/config/bootstrap.js

@@ -94,7 +94,7 @@ const ALLOWED_ERROR_MESSAGES = [
   // Another Firefox warning.
   'Layout was forced before the page was fully loaded',
 
-  // Upsteam issue in gutenberg and twentytwenty theme.
+  // Upstream issue in gutenberg and twentytwenty theme.
   'Stylesheet twentytwenty-block-editor-styles-css was not properly added.',
 
   // TODO(#9240): Fix usage in the web stories block.