Merge pull request #26528 from deining/fix-typo

Maintenance: Fix typos

CHANGELOG.v1-5.md

@@ -3527,7 +3527,7 @@ See [the RC announcement](https://gist.github.com/shilman/0332090b63f1798a58ed8d
 - UI: Fix ie 11 ([#5599](https://github.com/storybookjs/storybook/pull/5599))
 - CLI: Fix for when outputDir is an absolute path ([#5573](https://github.com/storybookjs/storybook/pull/5573))
 - CLI: Avoid false-negative checks for port ([#5565](https://github.com/storybookjs/storybook/pull/5565))
-- Core: Prioritise programatic configuration ([#5564](https://github.com/storybookjs/storybook/pull/5564))
+- Core: Prioritise programmatic configuration ([#5564](https://github.com/storybookjs/storybook/pull/5564))
 - UI: FIX clear search ([#5550](https://github.com/storybookjs/storybook/pull/5550))
 - Core: Transpile safe-eval package ([#5498](https://github.com/storybookjs/storybook/pull/5498))
 - UI: Add default backgrounds to official example ([#5585](https://github.com/storybookjs/storybook/pull/5585))
@@ -5258,7 +5258,7 @@ NOTE: As part of the generic addon decorators, we've reversed the order of addon
 #### Features
 
 - Storybook for Marko [#3504](https://github.com/storybookjs/storybook/pull/3504)
-- Storybook addon Jest angular suport [#3532](https://github.com/storybookjs/storybook/pull/3532)
+- Storybook addon Jest angular support [#3532](https://github.com/storybookjs/storybook/pull/3532)
 - Storybook for HTML snippets [#3475](https://github.com/storybookjs/storybook/pull/3475)
 - Feature/config custom chrome executable path [#3518](https://github.com/storybookjs/storybook/pull/3518)
 - Channel-postmessage: handle events from the same window [#3519](https://github.com/storybookjs/storybook/pull/3519)
@@ -9224,7 +9224,7 @@ Minor features including a new "events" addon, as well as the usual bugfixes, cl
 
 - Fixed knobs addon editing bug [#1233](https://github.com/storybookjs/storybook/pull/1233)
 - Fix bug in addons/graphql in reIndentQuery [#1207](https://github.com/storybookjs/storybook/pull/1207)
-- Marksy initialized with mtrcConf intead of marksyConf [#1205](https://github.com/storybookjs/storybook/pull/1205)
+- Marksy initialized with mtrcConf instead of marksyConf [#1205](https://github.com/storybookjs/storybook/pull/1205)
 
 #### Documentation
 

CHANGELOG.v6.md

@@ -1950,7 +1950,7 @@ Fix bad publish of `6.4.0-alpha.27` to the `latest` tag
 ### Bug Fixes
 
 - Controls: Don't set arg in validateOptions if it would be `undefined` ([#15654](https://github.com/storybookjs/storybook/pull/15654))
-- Trailing comma handling for "-s" command line paramenter ([#15615](https://github.com/storybookjs/storybook/pull/15615))
+- Trailing comma handling for "-s" command line parameter ([#15615](https://github.com/storybookjs/storybook/pull/15615))
 - Controls: Fix color matching behavior for non-string types ([#15549](https://github.com/storybookjs/storybook/pull/15549))
 - Composition: Fix refs ordering ([#15527](https://github.com/storybookjs/storybook/pull/15527))
 
@@ -1963,7 +1963,7 @@ Fix bad publish of `6.4.0-alpha.27` to the `latest` tag
 
 ### Bug Fixes
 
-- CLI: Fix trailing comma handling for "-s" command line paramenter ([#15615](https://github.com/storybookjs/storybook/pull/15615))
+- CLI: Fix trailing comma handling for "-s" command line parameter ([#15615](https://github.com/storybookjs/storybook/pull/15615))
 - Components: Lazy-load syntax highlighter ([#15607](https://github.com/storybookjs/storybook/pull/15607))
 
 ### Maintenance

MIGRATION.md

@@ -4177,7 +4177,7 @@ For more information, [see the documentation](https://github.com/storybookjs/sto
 
 Storybook has built-in Typescript support in 6.0. That means you should remove your complex Typescript configurations from your `.storybook` config. We've tried to pick sensible defaults that work out of the box, especially for nice prop table generation in `@storybook/addon-docs`.
 
-To migrate from an old setup, we recommend deleting any typescript-specific webpack/babel configurations in your project. You should also remove `@storybook/preset-typescript`, which is superceded by the built-in configuration.
+To migrate from an old setup, we recommend deleting any typescript-specific webpack/babel configurations in your project. You should also remove `@storybook/preset-typescript`, which is superseded by the built-in configuration.
 
 If you want to override the defaults, see the [typescript configuration docs](https://storybook.js.org/docs/react/configure/typescript).
 
@@ -5570,7 +5570,7 @@ The `@storybook/react-native` had built-in addons (`addon-actions` and `addon-li
 
 1. `imageSnapshot` test function was extracted from `addon-storyshots`
    and moved to a new package - `addon-storyshots-puppeteer` that now will
-   be dependant on puppeteer. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer)
+   be dependent on puppeteer. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer)
 2. `getSnapshotFileName` export was replaced with the `Stories2SnapsConverter`
    class that now can be overridden for a custom implementation of the
    snapshot-name generation. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#stories2snapsconverter)

code/addons/actions/src/models/ActionOptions.ts

@@ -1,7 +1,7 @@
 import type { Options as TelejsonOptions } from 'telejson';
 
 interface Options {
-  depth: number; // backards compatibility, remove in 7.0
+  depth: number; // backwards compatibility, remove in 7.0
   clearOnStoryChange: boolean;
   limit: number;
   implicit: boolean;

code/addons/actions/src/runtime/action.ts

@@ -83,7 +83,7 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti
     }
 
     const channel = addons.getChannel();
-    // this makes sure that in js enviroments like react native you can still get an id
+    // this makes sure that in js environments like react native you can still get an id
     const id = generateId();
     const minDepth = 5; // anything less is really just storybook internals
     const serializedArgs = args.map(serializeArg);

code/addons/docs/ember/README.md

@@ -55,7 +55,7 @@ import docJson from '../dist/storybook-docgen/index.json';
 setJSONDoc(docJson);
 ```
 
-Finally, be sure to fill in the `component` field in your story metadata. This should be a string that matches the name of the `@class` used in your souce comments:
+Finally, be sure to fill in the `component` field in your story metadata. This should be a string that matches the name of the `@class` used in your source comments:
 
 ```ts
 export default {

code/addons/docs/web-components/README.md

@@ -31,7 +31,7 @@
 
 In order to get [Props tables](..docs/../../docs/props-tables.md) documentation for web-components you will need to have a [custom-elements.json](https://github.com/webcomponents/custom-elements-json) file.
 
-You can hand write it or better generate it. Depending on the web components sugar you are choosing your milage may vary.
+You can hand write it or better generate it. Depending on the web components sugar you are choosing your mileage may vary.
 
 Known analyzers that output `custom-elements.json` v1.0.0:
 

code/e2e-tests/util.ts

@@ -83,7 +83,7 @@ export class SbPage {
   }
 
   async waitUntilLoaded() {
-    // make sure we start every test with clean state – to avoid possible flakyness
+    // make sure we start every test with clean state – to avoid possible flakiness
     await this.page.context().addInitScript(() => {
       const storeState = {
         layout: {

code/lib/cli/src/automigrate/index.test.ts

@@ -102,8 +102,8 @@ const runFixWrapper = async ({
 describe('runFixes', () => {
   beforeEach(() => {
     retrievePackageJson.mockResolvedValue({
-      depedencies: [],
-      devDepedencies: [],
+      dependencies: [],
+      devDependencies: [],
     });
     getPackageVersion.mockImplementation((packageName) => {
       return beforeVersion;

code/lib/core-webpack/src/importPipeline.ts

@@ -3,9 +3,9 @@ type ModuleExports = Record<string, any>;
 // If an import is in flight when another import arrives, block it until the first completes.
 // This is to avoid a situation where webpack kicks off a second compilation whilst the
 // first is still completing, cf: https://github.com/webpack/webpack/issues/15541#issuecomment-1143138832
-// Note the way this code works if N futher `import()`s occur while the first is in flight,
+// Note the way this code works if N further `import()`s occur while the first is in flight,
 // they will all be kicked off in the same tick and not block each other. This is by design,
-// Webpack can handle multiple invalidations simutaneously, just not in quick succession.
+// Webpack can handle multiple invalidations simultaneously, just not in quick succession.
 
 export function importPipeline() {
   let importGate: Promise<void> = Promise.resolve();

code/lib/instrumenter/src/instrumenter.ts

@@ -576,7 +576,7 @@ export class Instrumenter {
   update(call: Call) {
     this.channel.emit(EVENTS.CALL, call);
     this.setState(call.storyId, ({ calls }) => {
-      // Omit earlier calls for the same ID, which may have been superceded by a later invocation.
+      // Omit earlier calls for the same ID, which may have been superseded by a later invocation.
       // This typically happens when calls are part of a callback which runs multiple times.
       const callsById = calls
         .concat(call)

code/lib/manager-api/src/tests/stories.test.ts

@@ -225,7 +225,7 @@ describe('stories API', () => {
         },
       });
       const { index } = store.getState();
-      // We need exact key ordering, even if in theory JS doens't guarantee it
+      // We need exact key ordering, even if in theory JS doesn't guarantee it
       expect(Object.keys(index!)).toEqual(['a', 'a-b', 'a-b--1']);
       expect(index!.a).toMatchObject({
         type: 'root',
@@ -264,7 +264,7 @@ describe('stories API', () => {
         },
       });
       const { index } = store.getState();
-      // We need exact key ordering, even if in theory JS doens't guarantee it
+      // We need exact key ordering, even if in theory JS doesn't guarantee it
       expect(Object.keys(index!)).toEqual(['a', 'a--1']);
       expect(index!.a).toMatchObject({
         type: 'component',
@@ -295,7 +295,7 @@ describe('stories API', () => {
         },
       });
       const { index } = store.getState();
-      // We need exact key ordering, even if in theory JS doens't guarantee it
+      // We need exact key ordering, even if in theory JS doesn't guarantee it
       expect(Object.keys(index!)).toEqual(['a', 'a--1', 'a--2', 'b', 'b--1']);
       expect(index!.a).toMatchObject({
         type: 'component',

code/lib/preview-api/src/modules/preview-web/render/Render.ts

@@ -5,7 +5,7 @@ export type RenderType = 'story' | 'docs';
 /**
  * A "Render" represents the rendering of a single entry to a single location
  *
- * The implemenations of render are used for two key purposes:
+ * The implementations of render are used for two key purposes:
  *  - Tracking the state of the rendering as it moves between preparing, rendering and tearing down.
  *  - Tracking what is rendered to know if a change requires re-rendering or teardown + recreation.
  */

code/lib/preview-api/src/modules/store/GlobalsStore.test.ts

@@ -146,7 +146,7 @@ describe('GlobalsStore', () => {
             arg2: { defaultValue: 'arg2' },
           },
         });
-        // However undeclared valuse aren't persisted
+        // However undeclared values aren't persisted
         expect(store.get()).toEqual({ arg1: 'new-arg1', arg2: 'new-arg2' });
       });
     });

code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts

@@ -150,7 +150,7 @@ describe('prepareStory', () => {
       });
     });
 
-    it('can be overriden by `undefined`', () => {
+    it('can be overridden by `undefined`', () => {
       const { initialArgs } = prepareStory(
         { id, name, args: { a: undefined }, moduleExport },
         { id, title, args: { a: 'component' } },

code/lib/types/src/modules/story.ts

@@ -79,7 +79,7 @@ export type NormalizedStoryAnnotations<TRenderer extends Renderer = Renderer> =
   'storyName' | 'story' | 'decorators' | 'loaders'
 > & {
   moduleExport: ModuleExport;
-  // You cannot actually set id on story annotations, but we normalize it to be there for convience
+  // You cannot actually set id on story annotations, but we normalize it to be there for convenience
   id: StoryId;
   argTypes?: StrictArgTypes;
   name: StoryName;

code/renderers/preact/src/render.tsx

@@ -16,7 +16,7 @@ export const render: ArgsStoryFn<PreactRenderer> = (args, context) => {
   }
 
   // @ts-expect-error I think the type of Component should be Preact.ComponentType, but even that
-  // doens't make TS happy, I suspect because TS wants "react" components.
+  // doesn't make TS happy, I suspect because TS wants "react" components.
   return <Component {...args} />;
 };
 

code/ui/blocks/src/blocks/useStory.ts

@@ -16,7 +16,7 @@ export function useStories<TRenderer extends Renderer = Renderer>(
   context: DocsContextProps<TRenderer>
 ): (PreparedStory<TRenderer> | void)[] {
   // Legacy docs pages can reference any story by id. Those stories will need to be
-  // asyncronously loaded; we use the state for this
+  // asynchronously loaded; we use the state for this
   const [storiesById, setStories] = useState<Record<StoryId, PreparedStory<TRenderer>>>({});
 
   useEffect(() => {

code/ui/blocks/src/examples/Button.stories.tsx

@@ -53,7 +53,7 @@ _this description was written as a string in \`parameters.docs.description.story
 
 /**
  * This is the large button
- * _this description was written as a comment above the story, and should never be shown because it should be overriden by the description in the parameters_
+ * _this description was written as a comment above the story, and should never be shown because it should be overridden by the description in the parameters_
  */
 export const Large: Story = {
   args: {

docs/snippets/common/individual-snapshot-tests-portable-stories.jest.js.mdx

@@ -59,8 +59,8 @@ describe('Stories Snapshots', () => {
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
           // Defines the custom snapshot path location and file name
-          const customSnaphotPath = `./__snapshots__/${componentName}.test.js.snap`;
-          expect(mounted.container).toMatchSpecificSnapshot(customSnaphotPath);
+          const customSnapshotPath = `./__snapshots__/${componentName}.test.js.snap`;
+          expect(mounted.container).toMatchSpecificSnapshot(customSnapshotPath);
         });
       });
     });

docs/snippets/common/individual-snapshot-tests-portable-stories.jest.ts.mdx

@@ -73,8 +73,8 @@ describe("Stories Snapshots", () => {
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
           // Defines the custom snapshot path location and file name
-          const customSnaphotPath = `./__snapshots__/${componentName}.test.ts.snap`;
-          expect(mounted.container).toMatchSpecificSnapshot(customSnaphotPath);
+          const customSnapshotPath = `./__snapshots__/${componentName}.test.ts.snap`;
+          expect(mounted.container).toMatchSpecificSnapshot(customSnapshotPath);
       });
     });
   });

docs/snippets/common/individual-snapshot-tests-portable-stories.vitest.js.mdx

@@ -54,8 +54,8 @@ describe('Stories Snapshots', () => {
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
           // Defines the custom snapshot path location and file name
-          const customSnaphotPath = `./__snapshots__/${componentName}.spec.js.snap`;
-          expect(mounted.container).toMatchFileSnapshot(customSnaphotPath);
+          const customSnapshotPath = `./__snapshots__/${componentName}.spec.js.snap`;
+          expect(mounted.container).toMatchFileSnapshot(customSnapshotPath);
         });
       });
     });

docs/snippets/common/individual-snapshot-tests-portable-stories.vitest.ts.mdx

@@ -64,8 +64,8 @@ describe('Stories Snapshots', () => {
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
           // Defines the custom snapshot path location and file name
-          const customSnaphotPath = `./__snapshots__/${componentName}.spec.ts.snap`;
-          expect(mounted.container).toMatchFileSnapshot(customSnaphotPath);
+          const customSnapshotPath = `./__snapshots__/${componentName}.spec.ts.snap`;
+          expect(mounted.container).toMatchFileSnapshot(customSnapshotPath);
         });
       });
     });

docs/writing-tests/storyshots-migration-guide.md

@@ -26,7 +26,7 @@ This guide will teach you how to migrate your snapshot tests from the Storyshots
 
 Before you begin the migration process, ensure that you have:
 
-- A fully functional Storybook configured with one of the [suppported frameworks](../configure/frameworks.md) running the latest stable version (i.e., 7.6 or higher).
+- A fully functional Storybook configured with one of the [supported frameworks](../configure/frameworks.md) running the latest stable version (i.e., 7.6 or higher).
 - Familiarity with your current Storybook and its testing setup.
 
 ### With the test-runner

scripts/build-package.ts

@@ -115,13 +115,13 @@ async function run() {
   }
 
   selection?.filter(Boolean).forEach(async (v) => {
-    const commmand = (await readJSON(resolve('../code', v.location, 'package.json'))).scripts.prep
+    const command = (await readJSON(resolve('../code', v.location, 'package.json'))).scripts.prep
       .split(posix.sep)
       .join(sep);
 
     const cwd = resolve(__dirname, '..', 'code', v.location);
     const sub = execaCommand(
-      `${commmand}${watchMode ? ' --watch' : ''}${prodMode ? ' --optimized' : ''}`,
+      `${command}${watchMode ? ' --watch' : ''}${prodMode ? ' --optimized' : ''}`,
       {
         cwd,
         buffer: false,

scripts/check-package.ts

@@ -107,9 +107,9 @@ async function run() {
   }
 
   selection?.filter(Boolean).forEach(async (v) => {
-    const commmand = (await readJSON(resolve('../code', v.location, 'package.json'))).scripts.check;
+    const command = (await readJSON(resolve('../code', v.location, 'package.json'))).scripts.check;
     const cwd = resolve(__dirname, '..', 'code', v.location);
-    const sub = execaCommand(`${commmand}${watchMode ? ' --watch' : ''}`, {
+    const sub = execaCommand(`${command}${watchMode ? ' --watch' : ''}`, {
       cwd,
       buffer: false,
       shell: true,

scripts/release/version.ts

@@ -18,7 +18,7 @@ program
     '-R, --release-type <major|minor|patch|prerelease>',
     'Which release type to use to bump the version'
   )
-  .option('-P, --pre-id <id>', 'Which prerelease identifer to change to, eg. "alpha", "beta", "rc"')
+  .option('-P, --pre-id <id>', 'Which prerelease identifier to change to, eg. "alpha", "beta", "rc"')
   .option(
     '-E, --exact <version>',
     'Use exact version instead of calculating from current version, eg. "7.2.0-canary.123". Can not be combined with --release-type or --pre-id'

scripts/sandbox/utils/git.ts

@@ -43,7 +43,7 @@ const getTheLastCommitHashThatUpdatedTheSandboxRepo = async (branch: string) =>
 };
 
 /**
- * When commiting the changes to the sandboxes repo, we want to include the PRs that were merged since the last commit that updated the sandboxes.
+ * When committing the changes to the sandboxes repo, we want to include the PRs that were merged since the last commit that updated the sandboxes.
  * This might help us debug issues or changes that affected the sandboxes at some point in time.
  */
 export async function commitAllToGit({ cwd, branch }: { cwd: string; branch: string }) {