From 8751d84ebaf88bdfb411a535b470d55ffa78a881 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Sun, 10 Mar 2024 21:48:38 -0600 Subject: [PATCH 1/7] WIP: Add docs get started index --- docs/get-started/index.md | 240 ++++++++++++++++++++++++++++++++++++++ docs/toc.js | 1 - 2 files changed, 240 insertions(+), 1 deletion(-) create mode 100644 docs/get-started/index.md diff --git a/docs/get-started/index.md b/docs/get-started/index.md new file mode 100644 index 000000000000..1fcecc5339b0 --- /dev/null +++ b/docs/get-started/index.md @@ -0,0 +1,240 @@ +--- +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. + +## 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. + +## Install Storybook + +TK + + + + + + + +
+ + +

Next.js

+

TK

+ + + +

React + Vite

+

TK

+ + + +

React + Webpack

+

TK

+ + + +

Vue + Vite

+

TK

+ + + +

Vue + Webpack

+

TK

+ + + +

Angular

+

TK

+ + + +

SvelteKit

+

TK

+ + + +

Svelte + Vite

+

TK

+ + + +

Svelte + Webpack

+

TK

+ + + +

Web components + Vite

+

TK

+ + + +

Web components + Webpack

+

TK

+ +
+ +## Main concepts + +TK + +
+ + +

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.

+ + + +

Docs

+

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

+ + + +

Testing

+

TK

+ + + +

Sharing

+

TK

+ +
+ +## Additional resources + +TK + +
+ + + Builders + + + + Addon library + + + + Essential addons + + + + Recipes + + + + How to contribute + + + + Migrate to 8.0 + + + + FAQ + +
+ +--- + +
+
+

Need some help?

+

Join a discussion on GitHub

+
+
+

Latest product updates

+

See changelog

+
+
+ + diff --git a/docs/toc.js b/docs/toc.js index 37149c7e8f23..74928eaffd0c 100644 --- a/docs/toc.js +++ b/docs/toc.js @@ -2,7 +2,6 @@ module.exports = { toc: [ { pathSegment: 'get-started', - redirectPath: 'get-started/install', title: 'Get started', type: 'heading', children: [ From a144db74280cda65841624ac493b3a826e400f3c Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 12 Mar 2024 18:46:17 +0000 Subject: [PATCH 2/7] Adding icons --- docs/get-started/icon-docs.svg | 3 + docs/get-started/icon-more.svg | 3 + docs/get-started/icon-sharing.svg | 4 ++ docs/get-started/icon-story.svg | 3 + docs/get-started/icon-testing.svg | 3 + docs/get-started/index.md | 89 +++++++++++++----------- docs/get-started/logo-angular.svg | 5 ++ docs/get-started/logo-nextjs.svg | 15 ++++ docs/get-started/logo-react.svg | 3 + docs/get-started/logo-svelte.svg | 11 +++ docs/get-started/logo-vue.svg | 4 ++ docs/get-started/logo-web-components.svg | 18 +++++ 12 files changed, 121 insertions(+), 40 deletions(-) create mode 100644 docs/get-started/icon-docs.svg create mode 100644 docs/get-started/icon-more.svg create mode 100644 docs/get-started/icon-sharing.svg create mode 100644 docs/get-started/icon-story.svg create mode 100644 docs/get-started/icon-testing.svg create mode 100644 docs/get-started/logo-angular.svg create mode 100644 docs/get-started/logo-nextjs.svg create mode 100644 docs/get-started/logo-react.svg create mode 100644 docs/get-started/logo-svelte.svg create mode 100644 docs/get-started/logo-vue.svg create mode 100644 docs/get-started/logo-web-components.svg diff --git a/docs/get-started/icon-docs.svg b/docs/get-started/icon-docs.svg new file mode 100644 index 000000000000..91b39708bb7b --- /dev/null +++ b/docs/get-started/icon-docs.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/get-started/icon-more.svg b/docs/get-started/icon-more.svg new file mode 100644 index 000000000000..d9f21fc8757f --- /dev/null +++ b/docs/get-started/icon-more.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/get-started/icon-sharing.svg b/docs/get-started/icon-sharing.svg new file mode 100644 index 000000000000..1021d639a955 --- /dev/null +++ b/docs/get-started/icon-sharing.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/get-started/icon-story.svg b/docs/get-started/icon-story.svg new file mode 100644 index 000000000000..87c3c2e6c49b --- /dev/null +++ b/docs/get-started/icon-story.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/get-started/icon-testing.svg b/docs/get-started/icon-testing.svg new file mode 100644 index 000000000000..f42b85ded0a2 --- /dev/null +++ b/docs/get-started/icon-testing.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/get-started/index.md b/docs/get-started/index.md index 1fcecc5339b0..8fdf6c214659 100644 --- a/docs/get-started/index.md +++ b/docs/get-started/index.md @@ -25,61 +25,61 @@ TK -
+
- + Next.js

Next.js

-

TK

+

Full-featured React framework with great developer experience

 - + React

React + Vite

-

TK

+

Full-featured React framework with great developer experience

 - +

React + Webpack

-

TK

+

Full-featured React framework with great developer experience

 - +

Vue + Vite

-

TK

+

Full-featured React framework with great developer experience

 - +

Vue + Webpack

-

TK

+

Full-featured React framework with great developer experience

 - +

Angular

-

TK

+

Full-featured React framework with great developer experience

 - +

SvelteKit

-

TK

+

Full-featured React framework with great developer experience

 - +

Svelte + Vite

-

TK

+

Full-featured React framework with great developer experience

 - +

Svelte + Webpack

-

TK

+

Full-featured React framework with great developer experience

 - +

Web components + Vite

-

TK

+

Full-featured React framework with great developer experience

 - +

Web components + Webpack

-

TK

+

Full-featured React framework with great developer experience
@@ -89,22 +89,22 @@ TK
- + 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.

 - + Storybook Docs

Docs

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

 - + Storybook Testing

Testing

TK

 - + Share Storybook

Sharing

TK

 @@ -114,33 +114,33 @@ TK TK -
+
- + Builders - + Addon library - + Essential addons - + Recipes - + How to contribute - + Migrate to 8.0 - + FAQ
@@ -183,8 +183,14 @@ TK } .card { - border-radius: 8px; + border-radius: 6px; + border: 1px solid #D9E8F2; padding: 12px; + transition: border-color 0.2s ease; + } + + .card:hover { + border-color: #B2C3CD; } .card h3 { @@ -194,6 +200,12 @@ TK margin: 0; } + .card p { + font-size: 14px; + line-height: 24px; + margin: 0; + } + .card.card-fancy { border: 1px solid #D9E8F2; padding: 32px; @@ -219,8 +231,6 @@ TK } .media:not(.media-title-only) .img { - height: 28px; - width: 28px; grid-row: span 2; } @@ -229,8 +239,7 @@ TK } .media-title-only .img { - height: 32px; - width: 32px; + margin-top: 4px; } .media-title-only p { diff --git a/docs/get-started/logo-angular.svg b/docs/get-started/logo-angular.svg new file mode 100644 index 000000000000..7ecf4dd58e99 --- /dev/null +++ b/docs/get-started/logo-angular.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/get-started/logo-nextjs.svg b/docs/get-started/logo-nextjs.svg new file mode 100644 index 000000000000..c8a3910c177f --- /dev/null +++ b/docs/get-started/logo-nextjs.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/docs/get-started/logo-react.svg b/docs/get-started/logo-react.svg new file mode 100644 index 000000000000..16540eeaf137 --- /dev/null +++ b/docs/get-started/logo-react.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/get-started/logo-svelte.svg b/docs/get-started/logo-svelte.svg new file mode 100644 index 000000000000..f85f3c4d2928 --- /dev/null +++ b/docs/get-started/logo-svelte.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/docs/get-started/logo-vue.svg b/docs/get-started/logo-vue.svg new file mode 100644 index 000000000000..62474cdeb3d2 --- /dev/null +++ b/docs/get-started/logo-vue.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/get-started/logo-web-components.svg b/docs/get-started/logo-web-components.svg new file mode 100644 index 000000000000..2ff953d616d3 --- /dev/null +++ b/docs/get-started/logo-web-components.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + From 0de51cb900f345c22353d1029ca1fca851f62e58 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 12 Mar 2024 18:51:01 +0000 Subject: [PATCH 3/7] Update index.md --- docs/get-started/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/get-started/index.md b/docs/get-started/index.md index 8fdf6c214659..0afd9ee58a18 100644 --- a/docs/get-started/index.md +++ b/docs/get-started/index.md @@ -208,7 +208,7 @@ TK .card.card-fancy { border: 1px solid #D9E8F2; - padding: 32px; + padding: 24px 28px; } .card.card-fancy h3 { From 302aae12eae4a45890df88a18e8cd49c5c1b0523 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Tue, 12 Mar 2024 14:16:03 -0600 Subject: [PATCH 4/7] 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 0afd9ee58a18..9328dc203b41 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; } From 9563ed6173049e3f876ab4278efd758e34e6089c Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 13 Mar 2024 11:52:15 +0000 Subject: [PATCH 5/7] Update blocks layouts --- docs/get-started/index.md | 205 ++++++++++++++++++++++---------------- 1 file changed, 119 insertions(+), 86 deletions(-) diff --git a/docs/get-started/index.md b/docs/get-started/index.md index 9328dc203b41..7780cee4fbaf 100644 --- a/docs/get-started/index.md +++ b/docs/get-started/index.md @@ -6,22 +6,7 @@ hideRendererSelector: true export const RightArrow = () => ( - - - + ); @@ -48,94 +33,104 @@ Storybook is a standalone tool that runs alongside your app. It's a zero-config -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 is a React framework for building full-stack web applications.

 - + -

React + Vite

-

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

+

with Vite

+
- + -

React + Webpack

-

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

+
+

React

+

with Webpack

+
- +

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

-

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

+

with Vite

+
- + -

Vue + Webpack

-

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

+
+

Vue

+

with Webpack

+
- +

Angular

-

Angular is a development platform, built on TypeScript.

 - +

SvelteKit

-

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

 - + -

Svelte + Vite

-

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

+

with Vite

+
- + -

Svelte + Webpack

-

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

+
+

Svelte

+

with Webpack

+
- + -

Web components + Vite

-

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

+

with Vite

+
- + -

Web components + Webpack

-

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.

+
+

Web Components

+

with Webpack

+
+Want to know more about the installation process? Check out the [installation guide](./install.md). + ## Main concepts 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.
- +

Stories

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.

 - +

Docs

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

 - +

Testing

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.

 - +

Sharing

Publishing your Storybook allows you to share your work with others. It can also be embedded in other places like Notion or Figma.

@@ -147,31 +142,31 @@ Storybook is a powerful tool that can help you with many aspects of your UI deve Once you've got the basics down, you can explore these other ways to get the most out of Storybook.
- + Essential addons - + Addon catalog - + Recipes - + Builders - + How to contribute - + Migrate to 8.0 - + FAQ @@ -180,13 +175,13 @@ Once you've got the basics down, you can explore these other ways to get the mos ---
-
+

Need some help?

-

Join a discussion on GitHub

+ Join a discussion on GitHub
-
+

Latest product updates

-

See changelog

+ See changelog
@@ -198,15 +193,27 @@ Once you've got the basics down, you can explore these other ways to get the mos } .sb-grid.two-up { - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(1, 1fr); } .sb-grid.three-up { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(1, 1fr); } - - .sb-grid.four-up { - grid-template-columns: repeat(4, 1fr); + + @media (min-width: 440px) { + .sb-grid.two-up { + grid-template-columns: repeat(2, 1fr); + } + + .sb-grid.three-up { + grid-template-columns: repeat(2, 1fr); + } + } + + @media (min-width: 1280px) { + .sb-grid.three-up { + grid-template-columns: repeat(3, 1fr); + } } a.sb-grid-item.sb-grid-item.sb-grid-item { @@ -219,6 +226,8 @@ Once you've got the basics down, you can explore these other ways to get the mos border: 1px solid #D9E8F2; padding: 12px; transition: border-color 0.2s ease; + color: inherit; + text-decoration: none; } .card:hover { @@ -230,12 +239,16 @@ Once you've got the basics down, you can explore these other ways to get the mos font-weight: 600; line-height: 28px; margin: 0; + color: #000; + text-decoration: none; } .card p { font-size: 14px; line-height: 24px; margin: 0; + color: #454E54; + text-decoration: none; } .card.card-large { @@ -246,35 +259,55 @@ Once you've got the basics down, you can explore these other ways to get the mos font-size: 18px; font-weight: 700; } + + .framework { + display: flex !important; + flex-direction: row; + align-items: center; + height: 80px; + gap: 12px; + padding-left: 20px; + } - .media.media.media { - display: grid; + .framework h3 { + line-height: 18px; } - .media { + .concept { + display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; - gap: 0 12px; + gap: 12px; + row-gap: 12px; } - .media .img { + .concept .img { align-self: baseline; + margin-top: 4px; } - .media:not(.media-title-only) .img { - grid-row: span 2; + .concept p { + grid-column: span 2; } - .media-title-only { - row-gap: 12px; + .resource { + display: flex !important; + align-items: center; + gap: 8px; } - .media-title-only .img { - margin-top: 4px; + .help { + margin-bottom: 24px; } - .media-title-only p { - grid-column: span 2; + .help h3 { + margin-top: 0; + } + + .help a { + display: flex !important; + align-items: center; + gap: 4px; } `} From 9affb1050f687d1f9ab293a8645fdb7390e7e255 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Wed, 13 Mar 2024 11:02:33 -0600 Subject: [PATCH 6/7] Move icons out of content - Gatsby had trouble with its cache otherwise --- docs/get-started/icon-docs.svg | 3 -- docs/get-started/icon-more.svg | 3 -- docs/get-started/icon-sharing.svg | 4 --- docs/get-started/icon-story.svg | 3 -- docs/get-started/icon-testing.svg | 3 -- docs/get-started/index.md | 46 ++++++++++++------------ docs/get-started/logo-angular.svg | 5 --- docs/get-started/logo-nextjs.svg | 15 -------- docs/get-started/logo-react.svg | 3 -- docs/get-started/logo-svelte.svg | 11 ------ docs/get-started/logo-vue.svg | 4 --- docs/get-started/logo-web-components.svg | 18 ---------- 12 files changed, 23 insertions(+), 95 deletions(-) delete mode 100644 docs/get-started/icon-docs.svg delete mode 100644 docs/get-started/icon-more.svg delete mode 100644 docs/get-started/icon-sharing.svg delete mode 100644 docs/get-started/icon-story.svg delete mode 100644 docs/get-started/icon-testing.svg delete mode 100644 docs/get-started/logo-angular.svg delete mode 100644 docs/get-started/logo-nextjs.svg delete mode 100644 docs/get-started/logo-react.svg delete mode 100644 docs/get-started/logo-svelte.svg delete mode 100644 docs/get-started/logo-vue.svg delete mode 100644 docs/get-started/logo-web-components.svg diff --git a/docs/get-started/icon-docs.svg b/docs/get-started/icon-docs.svg deleted file mode 100644 index 91b39708bb7b..000000000000 --- a/docs/get-started/icon-docs.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/docs/get-started/icon-more.svg b/docs/get-started/icon-more.svg deleted file mode 100644 index d9f21fc8757f..000000000000 --- a/docs/get-started/icon-more.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/docs/get-started/icon-sharing.svg b/docs/get-started/icon-sharing.svg deleted file mode 100644 index 1021d639a955..000000000000 --- a/docs/get-started/icon-sharing.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/docs/get-started/icon-story.svg b/docs/get-started/icon-story.svg deleted file mode 100644 index 87c3c2e6c49b..000000000000 --- a/docs/get-started/icon-story.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/docs/get-started/icon-testing.svg b/docs/get-started/icon-testing.svg deleted file mode 100644 index f42b85ded0a2..000000000000 --- a/docs/get-started/icon-testing.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/docs/get-started/index.md b/docs/get-started/index.md index 7780cee4fbaf..acc5ecd68a2d 100644 --- a/docs/get-started/index.md +++ b/docs/get-started/index.md @@ -35,72 +35,72 @@ Storybook is a standalone tool that runs alongside your app. It's a zero-config
- +

Next.js

 - +

React

with Vite

 - +

React

with Webpack

 - +

React Native

 - +

Vue

with Vite

 - +

Vue

with Webpack

 - +

Angular

 - +

SvelteKit

 - +

Svelte

with Vite

 - +

Svelte

with Webpack

 - +

Web Components

with Vite

 - +

Web Components

with Webpack

@@ -116,22 +116,22 @@ Storybook is a powerful tool that can help you with many aspects of your UI deve
- +

Stories

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.

 - +

Docs

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

 - +

Testing

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.

 - +

Sharing

Publishing your Storybook allows you to share your work with others. It can also be embedded in other places like Notion or Figma.

 @@ -143,31 +143,31 @@ Once you've got the basics down, you can explore these other ways to get the mos
- + Essential addons - + Addon catalog - + Recipes - + Builders - + How to contribute - + Migrate to 8.0 - + FAQ
diff --git a/docs/get-started/logo-angular.svg b/docs/get-started/logo-angular.svg deleted file mode 100644 index 7ecf4dd58e99..000000000000 --- a/docs/get-started/logo-angular.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/docs/get-started/logo-nextjs.svg b/docs/get-started/logo-nextjs.svg deleted file mode 100644 index c8a3910c177f..000000000000 --- a/docs/get-started/logo-nextjs.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/docs/get-started/logo-react.svg b/docs/get-started/logo-react.svg deleted file mode 100644 index 16540eeaf137..000000000000 --- a/docs/get-started/logo-react.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/docs/get-started/logo-svelte.svg b/docs/get-started/logo-svelte.svg deleted file mode 100644 index f85f3c4d2928..000000000000 --- a/docs/get-started/logo-svelte.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/docs/get-started/logo-vue.svg b/docs/get-started/logo-vue.svg deleted file mode 100644 index 62474cdeb3d2..000000000000 --- a/docs/get-started/logo-vue.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/docs/get-started/logo-web-components.svg b/docs/get-started/logo-web-components.svg deleted file mode 100644 index 2ff953d616d3..000000000000 --- a/docs/get-started/logo-web-components.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - From d534eaa9bffde0e18e861abbe7e6bae32ca79cea Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Wed, 13 Mar 2024 11:06:26 -0600 Subject: [PATCH 7/7] Prose improvements --- docs/get-started/index.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/get-started/index.md b/docs/get-started/index.md index acc5ecd68a2d..a2b68ed07bf8 100644 --- a/docs/get-started/index.md +++ b/docs/get-started/index.md @@ -11,7 +11,7 @@ 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. +Welcome to Storybook's documentation ✦ Learn how to get started with Storybook in your project. Then, explore Storybook's main concepts and discover additional resources to help you grow and maintain your Storybook. ## What is Storybook? @@ -108,7 +108,7 @@ Storybook is a standalone tool that runs alongside your app. It's a zero-config
-Want to know more about the installation process? Check out the [installation guide](./install.md). +Want to know more about installing Storybook? Check out the [installation guide](./install.md). ## Main concepts @@ -118,28 +118,28 @@ Storybook is a powerful tool that can help you with many aspects of your UI deve

Stories

-

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.

+

A story captures the rendered state of a UI component. Each component can have multiple stories, where each story describes a different component state.

Docs

-

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 can analyze your components to automatically create documentation alongside your stories. This automatic documentation makes it easier for you to create UI library usage guidelines, design system sites, and more.

Testing

-

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.

+

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

Sharing

-

Publishing your Storybook allows you to share your work with others. It can also be embedded in other places like Notion or Figma.

+

Publishing your Storybook allows you to share your work with others. You can also embed your stories in places like Notion or Figma.
## Additional resources -Once you've got the basics down, you can explore these other ways to get the most out of Storybook. +Once you've learned the basics, explore these other ways to get the most out of Storybook.