feat: adding docs website (#317)

* feat: adding docs website

* feat: adding box docs (#296)

* feat: adding skeleton docs (#295)

Co-authored-by: Brandon Clark <bclark@project44.com>

* feat: adding action docs (#297)

* Feat: breadcrumbs and pagination docs  (#300)

* fix(breadcrumb): exports from core

* feat(website): added breadcrumb docs

* fix(website): pagination docs title

* feat(website): menu docs (#301)

* feat: adding layout docs (#303)

* feat(website): side nav docs (#306)

* docs: dialog docs (#307)

* fix(website): consistent title formatting

* feat(website): add card demo

* feat(website): tooltip demo

* feat(website): dialog docs

* docs(website): spinner (#310)

* docs: portal docs (#308)

* docs(website): dropdown demo

* docs(website): pagination demo

* docs(website): portal docs

* docs(website): fix pagination format ci failure

---------

Co-authored-by: Brandon Clark <98107867+bclark-p44@users.noreply.github.com>

* feat: improving website layout (#313)

* feat: finishing component docs (#316)

* feat: adding docs website

* feat: finishing component docs

* chore: wrapping up docs

* chore: removing changesets

* chore: adding changeset

---------

Co-authored-by: Daniel <danielrobertson733@gmail.com>

.changeset/smart-bats-eat.md

@@ -0,0 +1,2 @@
+---
+---

.gitignore

@@ -21,9 +21,6 @@ build/
 .contentlayer
 .vercel
 
-# ignore sitemap
-apps/**/sitemap.xml
-
 # Configs
 *.tsbuildinfo
 

.prettierignore

@@ -1,13 +1,13 @@
-.next/
+.docusaurus
 .cache/
-.contentlayer/
 node_modules/
 build/
 coverage/
 dist/
 dts/
 esm/
 lib/
+generated/
 CHANGELOG.md
 *.d.ts
 *.d.cts

apps/website/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  rules: {
+    'global-require': 'off',
+    'import/no-commonjs': 'off',
+    'import/no-default-export': 'off',
+    'import/no-unresolved': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+  },
+};

apps/website/.gitignore

@@ -0,0 +1,20 @@
+# 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*

apps/website/README.md

@@ -0,0 +1,45 @@
+# 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.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and
+push to the `gh-pages` branch.

apps/website/babel.config.js

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

apps/website/docs/actions/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "Actions",
+  "position": 3,
+  "collapsible": false
+}

apps/website/docs/actions/action-card.mdx

@@ -0,0 +1,70 @@
+---
+title: Action Card
+description: Used as a large call to action.
+---
+
+An action card is used as a large call to action.
+
+```jsx live
+<Box css={{ maxWidth: 400 }}>
+  <ActionCard href="#">
+    <ActionCardImage size="large" src="https://picsum.photos/600/400" />
+    <ActionCardHeader>Title</ActionCardHeader>
+    <ActionCardBody>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua.
+    </ActionCardBody>
+  </ActionCard>
+</Box>
+```
+
+## Usage
+
+### Small Image
+
+The size of the image can be made to be smaller for dense layouts by sitting the `size` prop on the
+`ActionCardImage` component to `small`.
+
+```jsx live
+<Box css={{ maxWidth: 400 }}>
+  <ActionCard href="#">
+    <ActionCardImage size="small" src="https://picsum.photos/600/400" />
+    <ActionCardHeader>Title</ActionCardHeader>
+    <ActionCardBody>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua.
+    </ActionCardBody>
+  </ActionCard>
+</Box>
+```
+
+### Without Body
+
+An action card can be rendered without a body component.
+
+```jsx live
+<Box css={{ maxWidth: 400 }}>
+  <ActionCard href="#">
+    <ActionCardImage size="small" src="https://picsum.photos/600/400" />
+    <ActionCardHeader>Title</ActionCardHeader>
+  </ActionCard>
+</Box>
+```
+
+## Props
+
+### ActionCard
+
+<PropsTable component="ActionCard" />
+
+### ActionCardBody
+
+<PropsTable component="ActionCardBody" />
+
+### ActionCardHeader
+
+<PropsTable component="ActionCardHeader" />
+
+### ActionCardImage
+
+<PropsTable component="ActionCardImage" />

apps/website/docs/actions/button-group.mdx

@@ -0,0 +1,64 @@
+---
+title: Button Group
+description: Group related buttons.
+---
+
+Group related buttons.
+
+```jsx live
+<ButtonGroup>
+  <Button>Button</Button>
+  <Button>Button</Button>
+</ButtonGroup>
+```
+
+## Usage
+
+### Variant
+
+The button group can control the variant for all buttons within the group.
+
+```jsx live
+<ButtonGroup variant="secondary">
+  <Button>Button</Button>
+  <Button>Button</Button>
+</ButtonGroup>
+```
+
+### Small
+
+Small buttons are used when vertical spacing is limited.
+
+```jsx live
+<ButtonGroup size="small">
+  <Button>Button</Button>
+  <Button>Button</Button>
+</ButtonGroup>
+```
+
+### Attached
+
+All buttons within a button group can be attached to each other.
+
+```jsx live
+<ButtonGroup isAttached>
+  <Button>Button</Button>
+  <Button>Button</Button>
+</ButtonGroup>
+```
+
+### Disabled state
+
+All buttons within a button group can be disabled to prevent a user from taking action on all
+buttons within the group.
+
+```jsx live
+<ButtonGroup isDisabled>
+  <Button>Button</Button>
+  <Button>Button</Button>
+</ButtonGroup>
+```
+
+## Props
+
+<PropsTable component="ButtonGroup" />

apps/website/docs/actions/button.mdx

@@ -0,0 +1,89 @@
+---
+title: Button
+description: Clickable elements that communicate actions that users can take.
+---
+
+Clickable elements that communicate actions that users can take.
+
+```jsx live
+<Button>Button</Button>
+```
+
+## Usage
+
+### Primary
+
+Primary buttons are used to indicate the highest priority action a user can perform.
+
+```jsx live
+<Button variant="primary">Primary</Button>
+```
+
+### Secondary
+
+Secondary buttons are second in priority to primary buttons and are used for important actions that
+aren't the primary action.
+
+```jsx live
+<Button variant="secondary">Secondary</Button>
+```
+
+### Tertiary
+
+Tertiary buttons are the lowest priority actions and should be used for less commonly used actions.
+
+```jsx live
+<Button variant="tertiary">Tertiary</Button>
+```
+
+### Destructive
+
+Destructive buttons are used to indicate an action that is destructive and cannot be undone.
+
+```jsx live
+<Button variant="danger">Danger</Button>
+```
+
+### Brand
+
+Brand buttons are used for project44 specific marketing moments and should be use sparingly.
+
+```jsx live
+<Button variant="brand">Brand</Button>
+```
+
+### Small
+
+Small buttons are used when vertical spacing is limited.
+
+```jsx live
+<Button size="small">Button</Button>
+```
+
+### Start Icon
+
+Include an icon before the button label.
+
+```jsx live
+<Button startIcon={<Add />}>Button</Button>
+```
+
+### End Icon
+
+Include an icon after the button label.
+
+```jsx live
+<Button endIcon={<Add />}>Button</Button>
+```
+
+### Disabled State
+
+Set the `isDisabled` prop to prevent a user from pressing a button.
+
+```jsx live
+<Button isDisabled>Button</Button>
+```
+
+## Props
+
+<PropsTable component="Button" />