No Description

Introduction.stories.mdx 5.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. import { Meta } from '@storybook/addon-docs/blocks';
  2. import Code from './assets/code-brackets.svg';
  3. import Colors from './assets/colors.svg';
  4. import Comments from './assets/comments.svg';
  5. import Direction from './assets/direction.svg';
  6. import Flow from './assets/flow.svg';
  7. import Plugin from './assets/plugin.svg';
  8. import Repo from './assets/repo.svg';
  9. import StackAlt from './assets/stackalt.svg';
  10. <Meta title="Example/Introduction" />
  11. <style>{`
  12. .subheading {
  13. --mediumdark: '#999999';
  14. font-weight: 900;
  15. font-size: 13px;
  16. color: #999;
  17. letter-spacing: 6px;
  18. line-height: 24px;
  19. text-transform: uppercase;
  20. margin-bottom: 12px;
  21. margin-top: 40px;
  22. }
  23. .link-list {
  24. display: grid;
  25. grid-template-columns: 1fr;
  26. grid-template-rows: 1fr 1fr;
  27. row-gap: 10px;
  28. }
  29. @media (min-width: 620px) {
  30. .link-list {
  31. row-gap: 20px;
  32. column-gap: 20px;
  33. grid-template-columns: 1fr 1fr;
  34. }
  35. }
  36. @media all and (-ms-high-contrast:none) {
  37. .link-list {
  38. display: -ms-grid;
  39. -ms-grid-columns: 1fr 1fr;
  40. -ms-grid-rows: 1fr 1fr;
  41. }
  42. }
  43. .link-item {
  44. display: block;
  45. padding: 20px 30px 20px 15px;
  46. border: 1px solid #00000010;
  47. border-radius: 5px;
  48. transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
  49. color: #333333;
  50. display: flex;
  51. align-items: flex-start;
  52. }
  53. .link-item:hover {
  54. border-color: #1EA7FD50;
  55. transform: translate3d(0, -3px, 0);
  56. box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
  57. }
  58. .link-item:active {
  59. border-color: #1EA7FD;
  60. transform: translate3d(0, 0, 0);
  61. }
  62. .link-item strong {
  63. font-weight: 700;
  64. display: block;
  65. margin-bottom: 2px;
  66. }
  67. .link-item img {
  68. height: 40px;
  69. width: 40px;
  70. margin-right: 15px;
  71. flex: none;
  72. }
  73. .link-item span {
  74. font-size: 14px;
  75. line-height: 20px;
  76. }
  77. .tip {
  78. display: inline-block;
  79. border-radius: 1em;
  80. font-size: 11px;
  81. line-height: 12px;
  82. font-weight: 700;
  83. background: #E7FDD8;
  84. color: #66BF3C;
  85. padding: 4px 12px;
  86. margin-right: 10px;
  87. vertical-align: top;
  88. }
  89. .tip-wrapper {
  90. font-size: 13px;
  91. line-height: 20px;
  92. margin-top: 40px;
  93. margin-bottom: 40px;
  94. }
  95. .tip-wrapper code {
  96. font-size: 12px;
  97. display: inline-block;
  98. }
  99. `}</style>
  100. # Welcome to Storybook
  101. Storybook helps you build UI components in isolation from your app's business logic, data, and context.
  102. That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
  103. Browse example stories now by navigating to them in the sidebar.
  104. View their code in the `src/storybook-examples` directory to learn how they work.
  105. We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
  106. <div class="subheading">Configure</div>
  107. <div class="link-list">
  108. <a class="link-item" href="https://storybook.js.org/docs/react/api/presets" target="_blank">
  109. <img src={Plugin} alt="plugin" />
  110. <span>
  111. <strong>Presets for popular tools</strong>
  112. Easy setup for TypeScript, SCSS and more.
  113. </span>
  114. </a>
  115. <a class="link-item" href="https://storybook.js.org/docs/react/configure/webpack" target="_blank">
  116. <img src={StackAlt} alt="Build" />
  117. <span>
  118. <strong>Build configuration</strong>
  119. How to customize webpack and Babel
  120. </span>
  121. </a>
  122. <a class="link-item" href="https://storybook.js.org/docs/react/configure/styling-and-css" target="_blank">
  123. <img src={Colors} alt="colors" />
  124. <span>
  125. <strong>Styling</strong>
  126. How to load and configure CSS libraries
  127. </span>
  128. </a>
  129. <a class="link-item" href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack" target="_blank">
  130. <img src={Flow} alt="flow" />
  131. <span>
  132. <strong>Data</strong>
  133. Providers and mocking for data libraries
  134. </span>
  135. </a>
  136. </div>
  137. <div class="subheading">Learn</div>
  138. <div class="link-list">
  139. <a class="link-item" href="https://storybook.js.org/docs" target="_blank">
  140. <img src={Repo} alt="repo" />
  141. <span>
  142. <strong>Storybook documentation</strong>
  143. Configure, customize, and extend
  144. </span>
  145. </a>
  146. <a class="link-item" href="https://www.learnstorybook.com" target="_blank">
  147. <img src={Direction} alt="direction" />
  148. <span>
  149. <strong>In-depth guides</strong>
  150. Best practices from leading teams
  151. </span>
  152. </a>
  153. <a class="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
  154. <img src={Code} alt="code" />
  155. <span>
  156. <strong>GitHub project</strong>
  157. View the source and add issues
  158. </span>
  159. </a>
  160. <a class="link-item" href="https://discord.gg/UUt2PJb" target="_blank">
  161. <img src={Comments} alt="comments" />
  162. <span>
  163. <strong>Discord chat</strong>
  164. Chat with maintainers and the community
  165. </span>
  166. </a>
  167. </div>
  168. <div class="tip-wrapper">
  169. <span class="tip">Tip</span>Edit the Markdown in <code>src/storybook-examples/welcome.mdx</code>
  170. </div>