chore(docs): Convert docs to storybook (#2291)

* Convert docs to storybook

* Correct show source in stories

* Update home page

* Update theme

* Correct missing Button labels

* Add story headers

Include links to Bootstrap docs

* Add Home page docs

* Disable source open

* Correct missing text

* Add ArgTables

* Correct component props

* Reorder Home

* Add controls to stories

* Improve Layout story styles

* Correct Breadcrumb props

* Add color stories

* Update CarouselUncontrolled.js

* Remove unused control

* Add remaining controls

* Split intro docs

* Update Upgrading.stories.mdx

* Correct Layout story styles

* Add Input story

* Correct close story

* Reformat fade story

* Add migration link

* Update migration

Add InputGroupAddon

* Update Upgrading.stories.mdx

.gitignore

@@ -4,6 +4,7 @@ node_modules
 /build
 /lib
 /es
+.DS_Store
 .idea
 .history
 npm-debug.log

.storybook/main.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+  stories: [
+    '../stories/*.stories.mdx',
+    '../stories/*.stories.js'
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-docs'
+  ]
+};

.storybook/manager.cjs

@@ -0,0 +1,13 @@
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming';
+
+const theme = create({
+  base: 'light',
+  brandTitle: 'Reactstrap',
+  brandUrl: '/',
+  brandImage: 'logo.svg',
+});
+
+addons.setConfig({
+  theme
+});

.storybook/preview-head.html

@@ -0,0 +1,13 @@
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
+/>
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
+/>
+<style>
+  .docblock-source {
+    margin: 0 0 1rem !important;
+  }
+</style>

.storybook/preview.cjs

@@ -0,0 +1,15 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    hideNoControlsWarning: true,
+    matchers: {
+      date: /Date$/
+    },
+  },
+  options: {
+    storySort: {
+      order: ['Home', '*']
+    }
+  },
+  viewMode: 'docs'
+}

.storybook/webpack.config.cjs

@@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = async ({ config }) => {
+  config.resolve = {
+    alias: {
+      reactstrap: path.resolve(__dirname, '../src/')
+    },
+  };
+
+  return config;
+};