Fix documentation typos and grammatical errors

addons/actions/src/preview/action.ts

@@ -25,7 +25,7 @@ const serializeArg = <T>(a: T) => {
     );
     e.persist();
     const viewDescriptor = Object.getOwnPropertyDescriptor(e, 'view');
-    // dont send the entire window object over.
+    // don't send the entire window object over.
     const view: unknown = viewDescriptor?.value;
     if (typeof view === 'object' && view?.constructor.name === 'Window') {
       Object.defineProperty(e, 'view', {

docs/addons/addon-catalog.md

@@ -4,7 +4,7 @@ title: 'Add to the addon catalog'
 
 Storybook addons are listed in the [catalog](/addons) and distributed via npm. The catalog is populated by querying npm's registry for Storybook-specific metadata in `package.json`.
 
-Add your addon to the catalog by publishing an npm package that follows these requirements:
+Add your addon to the catalog by publishing a npm package that follows these requirements:
 
 - `package.json` with [module information](./writing-addons.md#get-started) and [addon metadata](#addon-metadata)
 - `README.md` file with installation and configuration instructions

docs/addons/introduction.md

@@ -22,7 +22,7 @@ The **Preview** area is an `iframe` where your stories are rendered.
 
 ![Storybook detailed window](./manager-preview.jpg)
 
-Because both elements run in their own separate `iframes`, they use a communication channel to keep in synch. For example when you select a story in the Manager a event is dispatched across the channel notifying the Preview to render the story.
+Because both elements run in their own separate `iframes`, they use a communication channel to keep in sync. For example when you select a story in the Manager an event is dispatched across the channel notifying the Preview to render the story.
 
 ## Anatomy of an addon
 

docs/contribute/new-snippets.md

@@ -110,7 +110,7 @@ yarn start:skip-addons
 ```
 
 <div class="aside">
-💡 During the start process if there's an issue with the the documentation, the process will stop and you'll get a notification.
+💡 During the start process if there's an issue with the documentation, the process will stop and you'll get a notification.
 </div>
 
 Open a browser window to `http://localhost:8000`, click the Docs link, and select your framework from the dropdown.

docs/essentials/controls.md

@@ -11,7 +11,7 @@ Storybook Controls gives you a graphical UI to interact with a component's argum
   />
 </video>
 
-Controls does not require any modification to your components. Stories for controls are:
+Controls do not require any modification to your components. Stories for controls are:
 
 - Convenient. Auto-generate controls based on React/Vue/Angular/etc. components.
 - Portable. Reuse your interactive stories in documentation, tests, and even in designs.

docs/snippets/angular/button-story-with-blue-args.mdx.mdx

@@ -20,5 +20,5 @@ import { Button } from './button.component';
   }}
 />
 
-<!-- Your story implmentation -->
-```
+<!-- Your story implementation -->
+```

docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx

@@ -16,7 +16,7 @@ export const Template = (args) => ({ props: args });
   play={async () => {
     const exampleElement= screen.getByLabelText('example-element');
 
-    // The delay option set the ammount of milliseconds between characters being typed
+    // The delay option set the amount of milliseconds between characters being typed
     await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
@@ -28,4 +28,4 @@ export const Template = (args) => ({ props: args });
   }} >
   {Template.bind({})}
 </Story>
-```
+```

docs/snippets/angular/my-component-play-function-with-delay.ts.mdx

@@ -23,7 +23,7 @@ const Template: Story = (args) => ({
 export const DelayedStory: Story = Template.bind({});
 DelayedStory.play = () => {
   const exampleElement= screen.getByLabelText('example-element');
-    // The delay option set the ammount of milliseconds between characters being typed
+    // The delay option set the amount of milliseconds between characters being typed
   await userEvent.type(exampleElement, 'random string', {
     delay: 100,
   });
@@ -33,4 +33,4 @@ DelayedStory.play = () => {
     delay: 100,
   });
 };
-```
+```

docs/snippets/react/accessibility-testing-with-jest-axe.js.mdx

@@ -13,11 +13,11 @@ const { Accessible } = composeStories(MyComponentStories);
 
 expect.extend(toHaveNoViolations);
 
-test('Example accessiblity test', async () => {
+test('Example accessibility test', async () => {
   const { container } = render(<Accessible />);
 
   const AxeResults = await axe(container);
 
   expect(AxeResults).toHaveNoViolations();
 });
-```
+```

docs/snippets/react/button-story-with-blue-args.mdx.mdx

@@ -20,5 +20,5 @@ import { Button } from './Button';
   }}
 />
 
-<!-- Your story implmentation -->
-```
+<!-- Your story implementation -->
+```

docs/snippets/react/my-component-play-function-with-delay.js.mdx

@@ -22,7 +22,7 @@ export const DelayedStory = Template.bind({});
 DelayedStory.play = async () => {
   const exampleElement= screen.getByLabelText('example-element');
 
-  // The delay option set the ammount of milliseconds between characters being typed
+  // The delay option set the amount of milliseconds between characters being typed
   await userEvent.type(exampleElement, 'random string', {
     delay: 100,
   });
@@ -32,4 +32,4 @@ DelayedStory.play = async () => {
     delay: 100,
   });
 };
-```
+```

docs/snippets/react/my-component-play-function-with-delay.mdx.mdx

@@ -16,7 +16,7 @@ export const Template = (args) => <MyComponent {...args} />;
   play={async () => {
     const exampleElement= screen.getByLabelText('example-element');
 
-    // The delay option set the ammount of milliseconds between characters being typed
+    // The delay option set the amount of milliseconds between characters being typed
     await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
@@ -28,4 +28,4 @@ export const Template = (args) => <MyComponent {...args} />;
   }}>
   {Template.bind({})}
 </Story>
-```
+```

docs/snippets/react/my-component-play-function-with-delay.ts.mdx

@@ -24,7 +24,7 @@ export const DelayedStory = Template.bind({});
 DelayedStory.play = async () => {
   const exampleElement= screen.getByLabelText('example-element');
 
-  // The delay option set the ammount of milliseconds between characters being typed
+  // The delay option set the amount of milliseconds between characters being typed
   await userEvent.type(exampleElement, 'random string', {
     delay: 100,
   });
@@ -34,4 +34,4 @@ DelayedStory.play = async () => {
     delay: 100,
   });
 };
-```
+```

docs/snippets/svelte/button-story-with-blue-args.mdx.mdx

@@ -20,5 +20,5 @@ import Button  from './Button.svelte';
   }}
 />
 
-<!-- Your story implmentation -->
-```
+<!-- Your story implementation -->
+```

docs/snippets/svelte/my-component-play-function-with-delay.js.mdx

@@ -23,7 +23,7 @@ export const DelayedStory = Template.bind({});
 DelayedStory.play = async () => {
   const exampleElement= screen.getByLabelText('example-element');
 
-  // The delay option set the ammount of milliseconds between characters being typed
+  // The delay option set the amount of milliseconds between characters being typed
   await userEvent.type(exampleElement, 'random string', {
     delay: 100,
   });
@@ -33,4 +33,4 @@ DelayedStory.play = async () => {
     delay: 100,
   });
 };
-```
+```

docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx

@@ -19,7 +19,7 @@ export const Template = (args) => ({
   play={async () => {
     const exampleElement= screen.getByLabelText('example-element');
 
-    // The delay option set the ammount of milliseconds between characters being typed
+    // The delay option set the amount of milliseconds between characters being typed
     await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
@@ -31,4 +31,4 @@ export const Template = (args) => ({
   }}>
   {Template.bind({})}
 </Story>
-```
+```

docs/snippets/vue/accessibility-testing-with-jest-axe.js.mdx

@@ -13,11 +13,11 @@ const { Accessible } = composeStories(MyComponentStories);
 
 expect.extend(toHaveNoViolations);
 
-test('Example accessiblity test', async () => {
+test('Example accessibility test', async () => {
   const { container } = render(Accessible());
 
   const AxeResults = await axe(container);
 
   expect(AxeResults).toHaveNoViolations();
 });
-```
+```

docs/snippets/vue/button-story-with-blue-args.mdx.mdx

@@ -20,5 +20,5 @@ import Button from './Button.vue';
   }}
 />
 
-<!-- Your story implmentation -->
-```
+<!-- Your story implementation -->
+```

docs/snippets/vue/my-component-play-function-with-delay.js.mdx

@@ -23,7 +23,7 @@ export const DelayedStory = Template.bind({});
 DelayedStory.play = async () => {
   const exampleElement= screen.getByLabelText('example-element');
 
-  // The delay option set the ammount of milliseconds between characters being typed
+  // The delay option set the amount of milliseconds between characters being typed
   await userEvent.type(exampleElement, 'random string', {
     delay: 100,
   });
@@ -33,4 +33,4 @@ DelayedStory.play = async () => {
      delay: 100,
   });
 };
-```
+```

docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx

@@ -19,7 +19,7 @@ const Template = (args) => ({
   play={async () => {
     const exampleElement= screen.getByLabelText('example-element');
 
-    // The delay option set the ammount of milliseconds between characters being typed
+    // The delay option set the amount of milliseconds between characters being typed
     await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
@@ -31,4 +31,4 @@ const Template = (args) => ({
   }}>
   {Template.bind({})}
 </Story>
-```
+```

docs/writing-docs/docs-page.md

@@ -119,7 +119,7 @@ Then, update your `tsconfig.json` to include the following:
 }
 ```
 
-Finally write your custom React component and and update the `docs.page` [parameter](../writing-stories/parameters.md) to render the custom documentation.
+Finally write your custom React component and update the `docs.page` [parameter](../writing-stories/parameters.md) to render the custom documentation.
 
 <!-- prettier-ignore-start -->
 
@@ -202,4 +202,4 @@ Here’s an example of how to render Vue stories inline. The following docs conf
 
 With this function, anyone using the docs addon for [@storybook/vue](https://github.com/storybookjs/storybook/tree/master/app/vue) can make their stories render inline, either globally with the inlineStories docs parameter, or on a per-story-basis using the inline prop on the `<Story>` doc block.
 
-If you come up with an elegant and flexible implementation for the `prepareForInline` function for your framework, let us know. We'd love to make it the default configuration to make inline stories more accessible for a larger variety of frameworks!
+If you come up with an elegant and flexible implementation for the `prepareForInline` function for your framework, let us know. We'd love to make it the default configuration to make inline stories more accessible for a larger variety of frameworks!

docs/writing-tests/accessibility-testing.md

@@ -150,7 +150,7 @@ Disable accessibility testing for stories or components by adding the following
 
 ## Automate accessibility tests with Jest
 
-Accessibility testing with Storybook shortens the feedback loop which means you fix issues faster. Reuse stories in a Jest test and run an accessibility audit on them using the the [jest-axe integration](https://github.com/nickcolley/jest-axe). That also unlocks the ability to integrate accessibility tests into your functional testing pipeline.
+Accessibility testing with Storybook shortens the feedback loop which means you fix issues faster. Reuse stories in a Jest test and run an accessibility audit on them using the [jest-axe integration](https://github.com/nickcolley/jest-axe). That also unlocks the ability to integrate accessibility tests into your functional testing pipeline.
 
 For example, include the following test file to run an accessibility test on a story:
 

lib/components/src/blocks/ArgsTable/ArgValue.tsx

@@ -77,7 +77,7 @@ const Detail = styled.div<{ width: string }>(({ theme, width }) => ({
   minWidth: 200,
   maxWidth: 800,
   padding: 15,
-  // Dont remove the mono fontFamily here even if it seem useless, this is used by the browser to calculate the length of a "ch" unit.
+  // Don't remove the mono fontFamily here even if it seems useless, this is used by the browser to calculate the length of a "ch" unit.
   fontFamily: theme.typography.fonts.mono,
   fontSize: theme.typography.size.s1,
   // Most custom stylesheet will reset the box-sizing to "border-box" and will break the tooltip.