docs: add Docusaurus site (#6553)

* Create initial docusaurus site

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* add props table

* add version dropdown to navbar

* fix prop table render

* fix code examples

* add component api to TOC

* bump react

* fix sidebar positions

* fix props table parsing

* fix some components not being processed by react docgen

* delete old www

* rename www2 to www

* cleanup and styles

* fix images in examples, cleanup

* fix build

* fix

* point rb to local src dir

* address feedback

* wip

* update deps

* tweak colors

.eslintrc

@@ -14,6 +14,24 @@
       "rules": {
         "@typescript-eslint/no-unused-expressions": "off"
       }
+    },
+    {
+      "files": ["www/**/*"],
+      "rules": {
+        "no-console": "off",
+        "react/prop-types": "off",
+        "react/no-unescaped-entities": "off",
+        "no-alert": "off",
+        "no-restricted-syntax": "off",
+        "no-undef": "off",
+        "jsx-a11y/label-has-associated-control": "off"
+      }
+    },
+    {
+      "files": ["www/docs/examples/**/*"],
+      "rules": {
+        "import/no-unresolved": "off"
+      }
     }
   ]
 }

package.json

@@ -44,7 +44,7 @@
     "lint": "eslint --ext tsx --ext ts src && tsc --noEmit",
     "prepublishOnly": "npm run build",
     "release": "rollout",
-    "start": "yarn --cwd www develop",
+    "start": "yarn --cwd www start",
     "tdd": "karma start",
     "test": "npm run lint && npm run test-browser && npm run test-node",
     "test-browser": "cross-env NODE_ENV=test karma start --single-run",

src/AccordionCollapse.tsx

@@ -26,7 +26,7 @@ const propTypes = {
 };
 
 /**
- * This component accepts all of [`Collapse`'s props](/utilities/transitions/#collapse-props).
+ * This component accepts all of [`Collapse`'s props](/docs/utilities/transitions#collapse-1).
  */
 const AccordionCollapse: BsPrefixRefForwardingComponent<
   'div',

src/InputGroup.tsx

@@ -54,12 +54,6 @@ const propTypes = {
   as: PropTypes.elementType,
 };
 
-/**
- *
- * @property {InputGroupText} Text
- * @property {InputGroupRadio} Radio
- * @property {InputGroupCheckbox} Checkbox
- */
 const InputGroup: BsPrefixRefForwardingComponent<'div', InputGroupProps> =
   React.forwardRef<HTMLElement, InputGroupProps>(
     (

src/Pagination.tsx

@@ -28,14 +28,6 @@ const propTypes = {
   size: PropTypes.oneOf<PaginationSize>(['sm', 'lg']),
 };
 
-/**
- * @property {PageItem} Item
- * @property {PageItem} First
- * @property {PageItem} Prev
- * @property {PageItem} Ellipsis
- * @property {PageItem} Next
- * @property {PageItem} Last
- */
 const Pagination = React.forwardRef<HTMLUListElement, PaginationProps>(
   ({ bsPrefix, className, size, ...props }, ref) => {
     const decoratedBsPrefix = useBootstrapPrefix(bsPrefix, 'pagination');

src/ProgressBar.tsx

@@ -25,7 +25,7 @@ export interface ProgressBarProps
 const ROUND_PRECISION = 1000;
 
 /**
- * Validate that children, if any, are instances of `<ProgressBar>`.
+ * Validate that children, if any, are instances of `ProgressBar`.
  */
 function onlyProgressBar(props, propName, componentName): Error | null {
   const children = props[propName];

www/.gitignore

@@ -1,3 +1,20 @@
-node_modules/
-public/
-.cache/
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

www/README.md

@@ -0,0 +1,25 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.

www/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

www/src/pages/about.mdx → www/docs/about.mdx

@@ -1,26 +1,25 @@
-<PageHeader
-  title="About"
-  subTitle="Get to know more about the team maintaining React Bootstrap. Learn a 
-	little history of how, why and when the project started and how
-	you can be a part of it."
-/>
+---
+title: About
+description: Get to know more about the team maintaining React Bootstrap. Learn a little history of how, why and when the project started and how you can be a part of it.
+sidebar_position: 8
+---
 
-### Team
+## Team
 
 React Bootstrap is maintained by a [team of developers](https://github.com/orgs/react-bootstrap/people) on Github. We have a growing team
 and if you are interested in re-building the most popular front-end framework with React we would love to hear from you.
 
-### Contributors
+## Contributors
 
 We welcome community support with both feature and bug reporting. Please don't hesitate to jump in.
 Join our growing list of [contributors](https://github.com/react-bootstrap/react-bootstrap/graphs/contributors).
 
-### Get Involved
+## Get Involved
 
 Get involved with React Bootstrap [by opening an issue](https://github.com/react-bootstrap/react-bootstrap/issues/new) or submitting a pull request.
 See our [contributing guidelines](https://github.com/react-bootstrap/react-bootstrap/blob/master/CONTRIBUTING.md) here.
 
-### External Links
+## External Links
 
 - [Bootstrap](https://getbootstrap.com/)
 - [React](https://reactjs.org/)

www/docs/components/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Components",
+  "position": 4
+}

www/docs/components/accordion.mdx

@@ -0,0 +1,101 @@
+---
+title: Accordion
+description: Build vertically collapsing accordions in combination with the Collapse component
+---
+
+import Basic from '!!raw-loader!../examples/Accordion/Basic';
+import AllCollapse from '!!raw-loader!../examples/Accordion/AllCollapse';
+import Flush from '!!raw-loader!../examples/Accordion/Flush';
+import AlwaysOpen from '!!raw-loader!../examples/Accordion/AlwaysOpen';
+import CustomToggle from '!!raw-loader!../examples/Accordion/CustomToggle.js';
+import ContextAwareToggle from '!!raw-loader!../examples/Accordion/ContextAwareToggle.js';
+
+## Examples
+
+Click the accordions below to expand/collapse the accordion content.
+
+### Basic Example
+
+<CodeBlock language="jsx" live>
+  {Basic}
+</CodeBlock>
+
+### Fully Collapsed State
+
+If you want your `Accordion` to start in a fully-collapsed state, then simply don't pass in a `defaultActiveKey` prop to `Accordion`.
+
+<CodeBlock language="jsx" live>
+  {AllCollapse}
+</CodeBlock>
+
+### Flush
+
+Add `flush` to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
+
+<CodeBlock language="jsx" live>
+  {Flush}
+</CodeBlock>
+
+### Always open
+
+You can make accordion items stay open when another item is opened by using the `alwaysOpen` prop. If you're looking to
+control the component, you must use an array of strings for `activeKey` or `defaultActiveKey`.
+
+<CodeBlock language="jsx" live>
+  {AlwaysOpen}
+</CodeBlock>
+
+## Custom Accordions
+
+You can still create card-based accordions like those in Bootstrap 4. You can hook
+into the Accordion toggle functionality via `useAccordionButton` to make custom
+toggle components.
+
+### Custom Toggle
+
+<CodeBlock language="jsx" live noInline>
+  {CustomToggle}
+</CodeBlock>
+
+### Custom Toggle with Expansion Awareness
+
+You may wish to have different styles for the toggle if it's associated section is expanded,
+this can be achieved with a custom toggle that is context aware and also takes advantage of the `useAccordionButton` hook.
+
+<CodeBlock language="jsx" live noInline>
+  {ContextAwareToggle}
+</CodeBlock>
+
+## API
+
+### Accordion
+
+<PropsTable name="Accordion" />
+
+### AccordionItem
+
+<PropsTable name="AccordionItem" />
+
+### AccordionHeader
+
+<PropsTable name="AccordionHeader" />
+
+### AccordionBody
+
+<PropsTable name="AccordionBody" />
+
+### AccordionButton
+
+<PropsTable name="AccordionButton" />
+
+### AccordionCollapse
+
+<PropsTable name="AccordionCollapse" />
+
+### useAccordionButton
+
+```jsx
+import { useAccordionButton } from 'react-bootstrap/AccordionButton';
+
+const decoratedOnClick = useAccordionButton(eventKey, onClick);
+```