docs: improve documentation DX (#472)

* docs: improve documentation DX

* fix: make sure first load page is Introduction

.storybook/main.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 const path = require('path')
 
 module.exports = {
@@ -11,7 +10,11 @@ module.exports = {
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },
-  stories: ['../src/**/__stories__/*.stories.tsx', '../src/__stories__/**'],
+  stories: [
+    '../src/__stories__/Introduction.stories.mdx',
+    '../src/**/__stories__/*.stories.tsx',
+    '../src/__stories__/**',
+  ],
   addons: [
     '@storybook/addon-docs',
     '@storybook/addon-links',
@@ -35,17 +38,6 @@ module.exports = {
       }
     }
 
-    // if (config.module?.rules) {
-    //   config.module.rules.push({
-    //     test: /\.(png)$/,
-    //     use: [
-    //       {
-    //         loader: 'file-loader',
-    //       },
-    //     ],
-    //   })
-    // }
-
     return config
   },
 }

.storybook/preview.tsx

@@ -3,7 +3,11 @@ import React from 'react'
 import { css, ThemeProvider, Global, Theme } from '@emotion/react'
 
 const STORY_SORT = {
-  order: ['Introduction', 'Components', 'Labs'],
+  order: [
+    'Introduction',
+    'Components',
+    ['Form', 'Fields', 'SubmitErrorAlert', 'Submit'],
+  ],
 }
 
 const ENV_PARAMETERS = {
@@ -15,9 +19,9 @@ const ENV_PARAMETERS = {
         disable: true,
       },
     },
-    viewMode: 'canvas',
+    viewMode: 'docs',
     previewTabs: {
-      'storybook/docs/panel': { index: 1 },
+      canvas: { hidden: true },
     },
     viewport: {
       viewports: {},

package.json

@@ -146,15 +146,15 @@
     "@semantic-release/github": "8.0.6",
     "@semantic-release/npm": "9.0.1",
     "@semantic-release/release-notes-generator": "10.0.3",
-    "@storybook/addon-actions": "6.4.22",
-    "@storybook/addon-docs": "6.4.22",
-    "@storybook/addon-essentials": "6.4.22",
-    "@storybook/addon-links": "6.4.22",
-    "@storybook/addons": "6.4.22",
-    "@storybook/builder-webpack5": "6.4.22",
-    "@storybook/manager-webpack5": "6.4.22",
-    "@storybook/react": "6.4.22",
-    "@storybook/theming": "6.4.22",
+    "@storybook/addon-actions": "6.5.10",
+    "@storybook/addon-docs": "6.5.10",
+    "@storybook/addon-essentials": "6.5.10",
+    "@storybook/addon-links": "6.5.10",
+    "@storybook/addons": "6.5.10",
+    "@storybook/builder-webpack5": "6.5.10",
+    "@storybook/manager-webpack5": "6.5.10",
+    "@storybook/react": "6.5.10",
+    "@storybook/theming": "6.5.10",
     "@testing-library/dom": "8.17.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.3.0",