Merge branch 'main' into fix_stories_csf3

README.md

@@ -4,54 +4,46 @@ Storybook is an open-source tool that helps you develop UI components in isolati
 
 With Storybook, you can ease the development of a design system and share a common language with Designers. QA's can get an overview and test functionalities in isolation. Stakeholders can use it for demo purposes. Overall, Storybook helps connect all of these people, greatly improving collaboration!
 
-This is MealDrop, a real-world like project from the [Storybook for React apps](https://www.newline.co/courses/storybook-for-react-apps) course, used as an example to teach you how to unleash the full potential of Storybook for React apps. It's a food delivery app built from scratch with:
+This is MealDrop, a real-world like project made by [Yann Braga](https://twitter.com/yannbf) (from the Storybook team). It's a food delivery app built from scratch with:
 
 - Modern React with [Typescript](https://www.typescriptlang.org/) and hooks
 - Styles with [Styled components](https://styled-components.com/)
 - State management [Redux](https://redux.js.org/) with [@reduxjs/toolkit](https://redux-toolkit.js.org/)
-- Tests with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
+- Tests with [Vitest](https://vitest.dev/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
 - Routing with [React router](https://reactrouter.com/)
 - Component explorer [Storybook](https://storybook.js.org/)
 
-Every component of the app is in Storybook, and the designs are all in Figma.
+Every component of the app is developed and documented in Storybook, and the designs are all in Figma.
 
 [![MealDrop Demo](https://img.shields.io/badge/MealDrop-Live%20demo-green?style=for-the-badge&logo=vercel)](https://mealdrop.vercel.app/)
 [![MealDrop Storybook](https://img.shields.io/badge/MealDrop-Storybook-ff4785?style=for-the-badge&logo=storybook)](https://mealdrop.vercel.app/storybook)
 [![MealDrop Designs](https://img.shields.io/badge/MealDrop-Designs-eeeeee?style=for-the-badge&logo=figma)](https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop)
 
 ![](./.github/media/application-example.png)
 
-## What you will learn
+You can check this repo as a reference for:
 
 - The core concepts of Storybook
 - Development workflow with Storybook
-- Unleash the full potential of Storybook, adding components, features and pages
+- Using the full potential of Storybook, adding components, features and pages
 - Testing strategies with Storybook
-- How to build UI faster
+- Building UI faster
 - Mental models for component development
 - Tools to improve designer-developer collaboration
 - Best practices
 
-We start from the basics of Storybook, and later switch to MealDrop, a real world application, learning how to develop features directly in Storybook, saving lots of development time, and at the same time creating a living documentation of components and features. You will see the power of addons and how they help improve the development experience and the end quality of components.
-
-![](./.github/media/restaurant-card-stories.gif)
-
-You will learn how to connect Figma to Storybook:
-
-![](./.github/media/figma-connect.png)
-
-You will learn how to add styled components support and create a tool to switch color themes in Storybook:
-
-![](./.github/media/theme-toolbar.gif)
-
-You will add full pages to Storybook and write interaction tests that run directly in the browser:
-
-![](./.github/media/interaction-tests.gif)
-
-And you will learn how to automate interactions tests with Jest and Playwright, add visual regression tests, test accessibility, and much more!
-
-By the end of the course, you'll be able to impress your team by implementing a tool which will drastically improve the development workflow and collaboration of your projects!
-
-If you're interested in the [course](https://www.newline.co/courses/storybook-for-react-apps) (with a free module!), click on the image below to access it:
-
-[![](./src/docs/assets/mealdrop-banner.png)](https://www.newline.co/courses/storybook-for-react-apps)
+## What the demo showcases
+
+- <a href="https://mealdrop.vercel.app/storybook/?path=/docs/design-system-colors--docs">Documenting design tokens</a>
+- <a href="https://mealdrop.vercel.app/storybook/?path=/docs/components-button--docs">Documenting components</a>
+- <a href="https://mealdrop.vercel.app/storybook/?path=/story/pages-categorydetailpage--default&addonPanel=storybook/a11y/panel&panel=right">Accessibility testing</a>
+- <a href="https://mealdrop.vercel.app/storybook/?path=/story/pages-restaurantdetailpage--not-found&panel=right">Network mocking</a>
+- Rendering components in isolation, from the <a href="https://mealdrop.vercel.app/storybook/?path=/docs/components-button--default&panel=right">simplest</a> to the <a href="https://mealdrop.vercel.app/storybook/?path=/story/userflows-app--home&panel=right">most complex ones</a>
+ ![](./.github/media/restaurant-card-stories.gif)
+- <a href="https://mealdrop.vercel.app/storybook/?path=/story/userflows-app--to-success-page&addonPanel=storybook/interactions/panel&panel=right">Interaction testing</a>
+ ![](./.github/media/interaction-tests.gif)
+- <a href="https://mealdrop.vercel.app/storybook/?path=/story/components-button--default&addonPanel=STORYBOOK_ADDON_DESIGNS/panel&panel=right">Design integration (Figma)</a>
+ ![](./.github/media/figma-connect.png)
+- <a href="https://mealdrop.vercel.app/storybook/?path=/story/components-button--default&globals=theme:dark">Theme switching</a>
+ ![](./.github/media/theme-toolbar.gif)
+- And much more!

src/docs/Introduction.mdx

@@ -132,32 +132,25 @@ import banner from './assets/mealdrop-banner.png'
 Storybook helps you build UI components in isolation from your app's business logic, data, and context.
 That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
 
-This Storybook is part of the [Storybook for React apps](https://www.newline.co/courses/storybook-for-react-apps) course made by [Yann Braga](https://twitter.com/yannbf), where you learn how to unleash the full potential of Storybook for React apps. We start from the basics and quickly build up to learn how to develop features and even pages straight from Storybook, saving lots of development time, and at the same time creating a living documentation of components.
-
-We will see the power of addons and how they help improve the development experience and the end quality of components. We will also connect Figma to Storybook, write interaction tests using Testing Library, test accessibility, dark/light mode, and much more!
-
-**By the end of the course**, you'll be able to impress your team by implementing a tool which will _drastically_ improve the development workflow of your projects!
-
-<img src={banner} />
+This Storybook is made by [Yann Braga](https://twitter.com/yannbf) (from the Storybook team), to showcase Storybook features, such as:
+
+* Rendering components in isolation, from the <a href="/?path=/docs/components-button--default&panel=right">simplest</a> to the <a href="/?path=/story/userflows-app--home&panel=right">most complex ones</a>
+* <a href="/?path=/docs/design-system-colors--docs">Documenting design tokens</a>
+* <a href="/?path=/docs/components-button--docs">Documenting components</a>
+* <a href="/?path=/story/pages-categorydetailpage--default&addonPanel=storybook/a11y/panel&panel=right">Accessibility testing</a>
+* <a href="/?path=/story/pages-restaurantdetailpage--not-found&panel=right">Network mocking</a>
+* <a href="/?path=/story/userflows-app--to-success-page&addonPanel=storybook/interactions/panel&panel=right">Interaction testing</a>
+* <a href="/?path=/story/components-button--default&addonPanel=STORYBOOK_ADDON_DESIGNS/panel&panel=right">Design integration (Figma)</a>
+* <a href="/?path=/story/components-button--default&globals=theme:dark">Theme switching</a>
+* And much more!
 
 <div className="subheading">Check this out</div>
 <div className="link-list">
- <a
- className="link-item"
- href="https://www.newline.co/courses/storybook-for-react-apps/welcome"
- target="_blank"
- >
- <img src={Repo} alt="code" />
- <span>
- <strong>Watch the course</strong>
- Including some free lessons :)
- </span>
- </a>
  <a className="link-item" href="https://mealdrop.vercel.app/" target="_blank">
  <img src={MealdropLogo} alt="direction" />
  <span>
- <strong>Check the mealdrop app</strong>
- App used in the course
+ <strong>Check the MealDrop app</strong>
+ Demo app that is documented in this Storybook
  </span>
  </a>
  <a
@@ -168,30 +161,16 @@ We will see the power of addons and how they help improve the development experi
  <img src={Colors} alt="direction" />
  <span>
  <strong>Figma design</strong>
- Design was built by the incredible <strong>Maxim Molenaars</strong>
+ Design was built by the incredible <a href="https://www.linkedin.com/in/maximmolenaars/" target="_blank">Maxim Molenaars</a>
  </span>
  </a>
-</div>
-
-<div className="subheading">Already a student?</div>
-
-<div className="link-list">
  <a className="link-item" href="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/yannbf/mealdrop" target="_blank">
  <img src={Code} alt="code" />
  <span>
  <strong>Mealdrop's repository</strong>
  This project is open source, check it out!
  </span>
  </a>
- <a className="link-item" href="https://discord.gg/wrn8CUMkuH" target="_blank">
- <img src={Comments} alt="comments" />
- <span>
- <strong>Discord chat</strong>
- Chat with the course instructor and the <strong>newline community</strong> in the
- <pre>#storybook-for-react-apps</pre>
- channel
- </span>
- </a>
 </div>
 
 <div className="subheading">Follow me for updates!</div>