From 302aae12eae4a45890df88a18e8cd49c5c1b0523 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Tue, 12 Mar 2024 14:16:03 -0600 Subject: [PATCH] Content updates --- docs/get-started/index.md | 167 ++++++++++++++++++++++---------------- 1 file changed, 99 insertions(+), 68 deletions(-) diff --git a/docs/get-started/index.md b/docs/get-started/index.md index 0afd9ee58a1..9328dc203b4 100644 --- a/docs/get-started/index.md +++ b/docs/get-started/index.md @@ -3,15 +3,38 @@ title: Get started with Storybook hideRendererSelector: true --- -Welcome to Storybook documentation ✦ Learn how to get up and running with Storybook through tutorials, APIs and platform resources. + + +export const RightArrow = () => ( + + + +); + + + +Welcome to Storybook's documentation ✦ Learn how to get started with Storybook in your project. Then explore the main concepts and additional resources to help you grow and maintain your Storybook. ## What is Storybook? -Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. It provides a workshop to build UIs in isolation. It helps you develop hard-to-reach states and edge cases without needing to run the whole app. +Storybook is a frontend workshop for building UI components and pages in isolation. It helps you develop and share hard-to-reach states and edge cases without needing to run your whole app. Thousands of teams use it for UI development, testing, and documentation. It's open source and free. ## Install Storybook -TK +Storybook is a standalone tool that runs alongside your app. It's a zero-config environment that works with any modern frontend framework. You can install Storybook into an existing project or create a new one from scratch. @@ -25,122 +48,131 @@ TK +Want to know more about the installation process? Check out the [installation guide](./install.md). + +Storybook works with many frontend tools. Choose your framework to get started and learn more. +
- - Next.js + +

Next.js

-

Full-featured React framework with great developer experience

+

Next.js is a React framework for building full-stack web applications.

 - - React + +

React + Vite

-

Full-featured React framework with great developer experience

+

React is the library for web and native user interfaces. Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

 - - + +

React + Webpack

-

Full-featured React framework with great developer experience

+

React is the library for web and native user interfaces. Webpack is a static module bundler for modern JavaScript applications.

 - - + + +

React Native

+

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.

+ + +

Vue + Vite

-

Full-featured React framework with great developer experience

+

Vue is an approachable, performant, and versatile framework for building web user interfaces. Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

 - - + +

Vue + Webpack

-

Full-featured React framework with great developer experience

+

Vue is an approachable, performant, and versatile framework for building web user interfaces. Webpack is a static module bundler for modern JavaScript applications.

 - - + +

Angular

-

Full-featured React framework with great developer experience

+

Angular is a development platform, built on TypeScript.

 - - + +

SvelteKit

-

Full-featured React framework with great developer experience

+

SvelteKit is a framework for rapidly developing robust, performant web applications using Svelte.

 - - + +

Svelte + Vite

-

Full-featured React framework with great developer experience

+

Svelte is a front-end, open-source JavaScript framework for making interactive webpages. Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

 - - + +

Svelte + Webpack

-

Full-featured React framework with great developer experience

+

Svelte is a front-end, open-source JavaScript framework for making interactive webpages. Webpack is a static module bundler for modern JavaScript applications.

 - - + +

Web components + Vite

-

Full-featured React framework with great developer experience

+

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

 - - + +

Web components + Webpack

-

Full-featured React framework with great developer experience

+

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Webpack is a static module bundler for modern JavaScript applications.
## Main concepts -TK +Storybook is a powerful tool that can help you with many aspects of your UI development workflow. Here are some of the main concepts to get you started.
- - Storybook Story + +

Stories

-

A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support.

+

A story captures the rendered state of a UI component. Each component can have multiple stories which describe all the "interesting" states that component supports.

 - - Storybook Docs + +

Docs

-

Storybook gives you tools to expand this essential documentation with prose and layout that feature your components and stories prominently.

+

Storybook automatically creates documentation for your components using your stories. That allows you to create UI library usage guidelines, design system sites, and more.

 - - Storybook Testing + +

Testing

-

TK

+

Stories are a pragmatic starting point for your UI testing strategy. You already write stories as a natural part of UI development, testing those stories is a low-effort way to prevent UI bugs over time.

 - - Share Storybook + +

Sharing

-

TK

+

Publishing your Storybook allows you to share your work with others. It can also be embedded in other places like Notion or Figma.
## Additional resources -TK +Once you've got the basics down, you can explore these other ways to get the most out of Storybook.
- - - Builders - - - - Addon library - - + Essential addons - + + Addon catalog + + + Recipes + + + Builders + - + How to contribute - + Migrate to 8.0 - + FAQ
@@ -150,11 +182,11 @@ TK

Need some help?

-

Join a discussion on GitHub

+

Join a discussion on GitHub

Latest product updates

-

See changelog

+

See changelog

@@ -206,12 +238,11 @@ TK margin: 0; } - .card.card-fancy { - border: 1px solid #D9E8F2; + .card.card-large { padding: 24px 28px; } - .card.card-fancy h3 { + .card.card-large h3 { font-size: 18px; font-weight: 700; }