diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md index b887e1da99b..cdccbd4998a 100644 --- a/docs/addons/writing-addons.md +++ b/docs/addons/writing-addons.md @@ -235,7 +235,7 @@ Learn how to [add to the addon catalog](./addon-catalog.md). In the previous example, we introduced the structure of an addon, but barely scratched the surface of what addons can do. -To dive deeper we recommend [Learn Storybook’s “creating addons”](https://www.learnstorybook.com/intro-to-storybook/react/en/creating-addons/) tutorial. It’s an excellent walkthrough that covers the same ground as the above introduction, but goes further and leads you through the full process of creating a realistic addon. +To dive deeper we recommend Storybook's [creating an addon](https://storybook.js.org/tutorials/create-an-addon/) tutorial. It’s an excellent walkthrough that covers the same ground as the above introduction, but goes further and leads you through the full process of creating a realistic addon. [How to build a Storybook addon](https://www.chromatic.com/blog/how-to-build-a-storybook-addon/) shows you how to create a standalone addon in great detail. diff --git a/docs/get-started/conclusion.md b/docs/get-started/conclusion.md index 0af65c0769c..79d662b19f4 100644 --- a/docs/get-started/conclusion.md +++ b/docs/get-started/conclusion.md @@ -4,7 +4,7 @@ title: 'Conclusion' Congratulations! You learned the basics. Storybook is the most popular tool for UI component development and documentation. You’ll be able to transfer these skills to thousands of companies that use Storybook to build UIs including GitHub, Airbnb, and Stripe. -If you’d like to learn workflows for building app UIs with Storybook, check out the in-depth guides on [Learn Storybook](https://www.learnstorybook.com/). Continue reading for detailed information on how to use Storybook APIs. +If you’d like to learn workflows for building app UIs with Storybook, check out our in-depth guides over at the [tutorials](https://storybook.js.org/tutorials/) page. Continue reading for detailed information on how to use Storybook APIs. - [How to write stories](../writing-stories/introduction.md) - [How to document components and design systems](../writing-docs/introduction.md) diff --git a/docs/get-started/examples.md b/docs/get-started/examples.md index 63e736e7283..cb015d4454c 100644 --- a/docs/get-started/examples.md +++ b/docs/get-started/examples.md @@ -11,7 +11,7 @@ This is a curated list of Storybooks for your inspiration. - [Official Storybook](https://next--storybookjs.netlify.app/official-storybook/): Storybook application UI - [Storybook Design System](https://master--5ccbc373887ca40020446347.chromatic.com/): Reusable components that adhere to Storybook's design language - [Marketing and docs](https://master--5be26744d2f6250024a9117d.chromatic.com/): Main website that has stories for components and pages. -- [Learn Storybook](https://master--5cf841a3f3e3d200208ffc74.chromatic.com/): Tutorial site that has stories for components and pages. +- [Storybook tutorials](https://master--5cf841a3f3e3d200208ffc74.chromatic.com/): Tutorial site that has stories for components and pages. ## Websites diff --git a/docs/get-started/introduction.md b/docs/get-started/introduction.md index dadde776b69..9336b250795 100644 --- a/docs/get-started/introduction.md +++ b/docs/get-started/introduction.md @@ -23,6 +23,6 @@ Storybook integrates with most popular JavaScript UI frameworks and (experimenta If you want to learn more about the component-driven approach that Storybook enables, this [site](http://componentdriven.org) is a good place to start. -If you want a guided tutorial through building a simple application with Storybook in your framework and language, [LearnStorybook](https://www.learnstorybook.com/) has your back. +If you want a guided tutorial through building a simple application with Storybook in your framework and language, our [tutorials](https://storybook.js.org/tutorials/) have your back. Read on to learn Storybook basics and API! diff --git a/docs/workflows/build-pages-with-storybook.md b/docs/workflows/build-pages-with-storybook.md index edc1a4a242b..e72c9be784b 100644 --- a/docs/workflows/build-pages-with-storybook.md +++ b/docs/workflows/build-pages-with-storybook.md @@ -13,7 +13,7 @@ There are many ways to build pages in Storybook. Here are common patterns and so Teams at the BBC, The Guardian, and the Storybook maintainers themselves build pure presentational pages. If you take this approach, you don't need to do anything special to render your pages in Storybook. -It's straightforward to write components to be fully presentational all the way up to the screen level. That makes it easy to show in Storybook. The idea is you then do all the messy “connected” logic in a single wrapper component in your app outside of Storybook. You can see an example of this approach in the [Data](https://www.learnstorybook.com/intro-to-storybook/react/en/data/) chapter of Learn Storybook. +It's straightforward to write components to be fully presentational all the way up to the screen level. That makes it easy to show in Storybook. The idea is you then do all the messy “connected” logic in a single wrapper component in your app outside of Storybook. You can see an example of this approach in the [Data](https://storybook.js.org/tutorials/intro-to-storybook/react/en/data/) chapter of the Intro to Storybook tutorial. The benefits: @@ -70,7 +70,7 @@ If you need to render a connected component in Storybook, you can mock the netwo ### Mocking providers -If you are using a provider that supplies data via the context, you can wrap your story in a decorator that supplies a mocked version of that provider. For example, in the [Screens](https://www.learnstorybook.com/intro-to-storybook/react/en/screen/) chapter of Learn Storybook we mock a Redux provider with mock data. +If you are using a provider that supplies data via the context, you can wrap your story in a decorator that supplies a mocked version of that provider. For example, in the [Screens](https://storybook.js.org/tutorials/intro-to-storybook/react/en/screen/) chapter of the Intro to Storybook tutorial we mock a Redux provider with mock data. Additionally, there may be addons that supply such providers and nice APIs to set the data they provide. For instance [`storybook-addon-apollo-client`](https://www.npmjs.com/package/storybook-addon-apollo-client) provides this API: diff --git a/docs/workflows/publish-storybook.md b/docs/workflows/publish-storybook.md index cbab8bf97c1..b8fc053250e 100644 --- a/docs/workflows/publish-storybook.md +++ b/docs/workflows/publish-storybook.md @@ -47,7 +47,7 @@ We also maintain [`storybook-deployer`](https://github.com/storybookjs/storybook ## Review with your team -Publishing Storybook as part of the development process makes it quick and easy to [gather team feedback](https://www.learnstorybook.com/design-systems-for-developers/react/en/review/). +Publishing Storybook as part of the development process makes it quick and easy to [gather team feedback](https://storybook.js.org/tutorials/design-systems-for-developers/react/en/review/). A common method to ask for review is to paste a link to the published Storybook in a pull request or Slack. diff --git a/examples/html-kitchen-sink/stories/from-essentials/Page.ts b/examples/html-kitchen-sink/stories/from-essentials/Page.ts index 8247119f71e..446682036a1 100644 --- a/examples/html-kitchen-sink/stories/from-essentials/Page.ts +++ b/examples/html-kitchen-sink/stories/from-essentials/Page.ts @@ -45,8 +45,8 @@ export const createPage = ({ user, onLogout, onLogin, onCreateAccount }: PagePro

Get a guided tutorial on component-driven development at - - Learn Storybook + + Storybook tutorials . Read more in the docs diff --git a/examples/vue-3-cli/src/stories/Introduction.stories.mdx b/examples/vue-3-cli/src/stories/Introduction.stories.mdx index b98fe98607d..8b959a257af 100644 --- a/examples/vue-3-cli/src/stories/Introduction.stories.mdx +++ b/examples/vue-3-cli/src/stories/Introduction.stories.mdx @@ -182,7 +182,7 @@ We recommend building UIs with a [**component-driven**](https://componentdriven. Configure, customize, and extend - + direction In-depth guides diff --git a/examples/vue-3-cli/src/stories/Page.vue b/examples/vue-3-cli/src/stories/Page.vue index c97bafe5c93..2a95a0763e1 100644 --- a/examples/vue-3-cli/src/stories/Page.vue +++ b/examples/vue-3-cli/src/stories/Page.vue @@ -33,8 +33,8 @@

Get a guided tutorial on component-driven development at - Learn StorybookStorybook tutorials . Read more in the docs diff --git a/lib/cli/src/frameworks/angular/page.component.ts b/lib/cli/src/frameworks/angular/page.component.ts index 23e83b85424..d5b8b2ec936 100644 --- a/lib/cli/src/frameworks/angular/page.component.ts +++ b/lib/cli/src/frameworks/angular/page.component.ts @@ -35,8 +35,8 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';

Get a guided tutorial on component-driven development at - - Learn Storybook + + Storybook tutorials . Read more in the docs diff --git a/lib/cli/src/frameworks/common/Introduction.stories.mdx b/lib/cli/src/frameworks/common/Introduction.stories.mdx index b98fe98607d..8b959a257af 100644 --- a/lib/cli/src/frameworks/common/Introduction.stories.mdx +++ b/lib/cli/src/frameworks/common/Introduction.stories.mdx @@ -182,7 +182,7 @@ We recommend building UIs with a [**component-driven**](https://componentdriven. Configure, customize, and extend - + direction In-depth guides diff --git a/lib/cli/src/frameworks/html/js/Page.js b/lib/cli/src/frameworks/html/js/Page.js index da3e2c31799..1ea39188f2e 100644 --- a/lib/cli/src/frameworks/html/js/Page.js +++ b/lib/cli/src/frameworks/html/js/Page.js @@ -36,8 +36,8 @@ export const createPage = ({ user, onLogout, onLogin, onCreateAccount }) => {

Get a guided tutorial on component-driven development at - - Learn Storybook + + Storybook tutorials . Read more in the docs diff --git a/lib/cli/src/frameworks/html/ts/Page.ts b/lib/cli/src/frameworks/html/ts/Page.ts index 323b3e2a2c7..bbccd64ada5 100644 --- a/lib/cli/src/frameworks/html/ts/Page.ts +++ b/lib/cli/src/frameworks/html/ts/Page.ts @@ -43,8 +43,8 @@ export const createPage = ({ user, onLogout, onLogin, onCreateAccount }: PagePro

Get a guided tutorial on component-driven development at - - Learn Storybook + + Storybook tutorials . Read more in the docs diff --git a/lib/cli/src/frameworks/mithril/Page.js b/lib/cli/src/frameworks/mithril/Page.js index 9aeca273043..199957740cf 100644 --- a/lib/cli/src/frameworks/mithril/Page.js +++ b/lib/cli/src/frameworks/mithril/Page.js @@ -42,8 +42,8 @@ export const Page = {

Get a guided tutorial on component-driven development at{' '} - - Learn Storybook + + Storybook tutorials . Read more in the{' '} diff --git a/lib/cli/src/frameworks/preact/Page.js b/lib/cli/src/frameworks/preact/Page.js index e46059665f1..76d40dcee73 100644 --- a/lib/cli/src/frameworks/preact/Page.js +++ b/lib/cli/src/frameworks/preact/Page.js @@ -35,8 +35,8 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => (

Get a guided tutorial on component-driven development at{' '} - - Learn Storybook + + Storybook tutorials . Read more in the{' '} diff --git a/lib/cli/src/frameworks/rax/Page.js b/lib/cli/src/frameworks/rax/Page.js index 3660ee8dc51..0bda5cae9e9 100644 --- a/lib/cli/src/frameworks/rax/Page.js +++ b/lib/cli/src/frameworks/rax/Page.js @@ -33,8 +33,8 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => (

Get a guided tutorial on component-driven development at{' '} - - Learn Storybook + + Storybook tutorials . Read more in the{' '} diff --git a/lib/cli/src/frameworks/react/js/Page.js b/lib/cli/src/frameworks/react/js/Page.js index a537a006719..1534d1c0b68 100644 --- a/lib/cli/src/frameworks/react/js/Page.js +++ b/lib/cli/src/frameworks/react/js/Page.js @@ -34,8 +34,8 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => (

Get a guided tutorial on component-driven development at{' '} - - Learn Storybook + + Storybook tutorials . Read more in the{' '} diff --git a/lib/cli/src/frameworks/react/ts/Page.tsx b/lib/cli/src/frameworks/react/ts/Page.tsx index 3c0bbcd84eb..ab4ce27c4cc 100644 --- a/lib/cli/src/frameworks/react/ts/Page.tsx +++ b/lib/cli/src/frameworks/react/ts/Page.tsx @@ -40,8 +40,8 @@ export const Page: React.FC = ({ user, onLogin, onLogout, onCreateAcc

Get a guided tutorial on component-driven development at{' '} - - Learn Storybook + + Storybook tutorials . Read more in the{' '} diff --git a/lib/cli/src/frameworks/svelte/Page.svelte b/lib/cli/src/frameworks/svelte/Page.svelte index 780b20616f0..e976d8800fe 100644 --- a/lib/cli/src/frameworks/svelte/Page.svelte +++ b/lib/cli/src/frameworks/svelte/Page.svelte @@ -51,8 +51,8 @@

Get a guided tutorial on component-driven development at - - Learn Storybook + + Storybook tutorials . Read more in the docs diff --git a/lib/cli/src/frameworks/vue/Page.vue b/lib/cli/src/frameworks/vue/Page.vue index 4762fcb323c..987b8b9f318 100644 --- a/lib/cli/src/frameworks/vue/Page.vue +++ b/lib/cli/src/frameworks/vue/Page.vue @@ -33,8 +33,8 @@

Get a guided tutorial on component-driven development at - Learn StorybookStorybook tutorials . Read more in the docs diff --git a/lib/cli/src/frameworks/vue3/Page.vue b/lib/cli/src/frameworks/vue3/Page.vue index 6b345b65ad4..f7f23842237 100644 --- a/lib/cli/src/frameworks/vue3/Page.vue +++ b/lib/cli/src/frameworks/vue3/Page.vue @@ -33,8 +33,8 @@

Get a guided tutorial on component-driven development at - Learn StorybookStorybook tutorials . Read more in the docs diff --git a/lib/cli/src/frameworks/web-components/js/Page.js b/lib/cli/src/frameworks/web-components/js/Page.js index 86b5c8cc82d..e6c5181fe36 100644 --- a/lib/cli/src/frameworks/web-components/js/Page.js +++ b/lib/cli/src/frameworks/web-components/js/Page.js @@ -36,8 +36,8 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html`

Get a guided tutorial on component-driven development at - - Learn Storybook + + Storybook tutorials . Read more in the docs diff --git a/lib/cli/src/frameworks/web-components/ts/Page.ts b/lib/cli/src/frameworks/web-components/ts/Page.ts index c94aca7d94c..db59099e952 100644 --- a/lib/cli/src/frameworks/web-components/ts/Page.ts +++ b/lib/cli/src/frameworks/web-components/ts/Page.ts @@ -43,8 +43,8 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) =>

Get a guided tutorial on component-driven development at - - Learn Storybook + + Storybook tutorials . Read more in the docs