docs: Added docusaurus initial docs STC-532 (#150)

website/.gitignore

@@ -0,0 +1,21 @@
+# 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*
+.yalc

website/README.md

@@ -0,0 +1,33 @@
+# 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
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=true 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.

website/babel.config.js

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

website/docs/apis/Button.mdx

@@ -0,0 +1,9 @@
+# Button
+
+import { PropTable } from '@site/src/components/PropTable'
+
+<PropTable name="Button" />
+
+## Examples
+
+- [Button](/docs/components/button)

website/docs/apis/_category_.json

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

website/docs/components/Button.mdx

@@ -0,0 +1,73 @@
+# Button
+
+## Component
+
+This is the basic component for all buttons.
+
+### Variants
+
+```jsx live
+<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+  <Button variant="filled">Filled</Button>
+  <Button variant="filledLight">Filled Light</Button>
+  <Button variant="plain">Plain</Button>
+</div>
+```
+
+### Colors
+
+```jsx live
+<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+  <Button color="primary">Primary</Button>
+  <Button color="secondary">Secondary</Button>
+  <Button color="success">Success</Button>
+  <Button color="text">Text</Button>
+</div>
+```
+
+### Sizes
+
+```jsx live
+<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+  <Button size="small">Small</Button>
+  <Button size="large">Large</Button>
+</div>
+```
+
+### Disabled
+
+```jsx live
+<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+  <Button disabled color="primary">Primary</Button>
+  <Button disabled color="secondary">Secondary</Button>
+  <Button disabled color="success">Success</Button>
+  <Button disabled color="text">Text</Button>
+</div>
+```
+
+### With Icon
+
+```jsx live
+<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+  <Button color="primary" iconName="IconPlus" variant="plain" />
+  <Button color="secondary" iconName="IconRouter">With Text</Button>
+</div>
+```
+
+### With ReactNode children
+
+Please note the use is focused in custom SVG's or custom icons
+
+```jsx live
+<Button variant="filled" color="text">
+  <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"><title>MS-SymbolLockup</title><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>
+</Button>
+```
+
+## API
+
+- [Button](/docs/apis/button)
+
+
+
+

website/docs/components/_category_.json

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

website/docs/getting-started/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Getting Started",
+  "position": 2
+}

website/docs/getting-started/installation.md

@@ -0,0 +1,40 @@
+---
+sidebar_position: 1
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Installation
+
+Herz UI is a React component library implementing Micromed's design system.
+
+## Installing the library
+
+```bash
+yarn add @micromed/herz-ui
+```
+
+or with npm
+
+```bash
+yarn install @micromed/herz-ui
+```
+
+## Peer dependencies
+
+The library also has Theme-UI as a peer dependency.
+
+```bash
+yarn add theme-ui
+```
+
+or with npm:
+
+```bash
+npm install theme-ui
+```
+
+### Normalize.css
+
+It's also important to include [normalize.css](https://github.com/necolas/normalize.css) in your project, as the components styling depend on it to match the design system in all browsers.

website/docs/intro.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 1
+---
+
+# Introduction
+
+Herz UI is a React component library implementing Micromed's design system.

website/docusaurus.config.js

@@ -0,0 +1,139 @@
+const lightCodeTheme = require('prism-react-renderer/themes/github');
+const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+
+// With JSDoc @type annotations, IDEs can provide config autocompletion
+/** @type {import('@docusaurus/types').DocusaurusConfig} */
+(module.exports = {
+  title: 'Herz UI',
+  tagline: 'Herz UI (/hɛrʦ/ - Hérts) is a design system containing a styleguide(colors, grid, icons, typography) and library of UI components',
+  url: 'https://herz-ui.micromed.io',
+  baseUrl: '/',
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+  favicon: 'img/favicon.ico',
+  organizationName: 'micromed', // Usually your GitHub org/user name.
+  projectName: 'herz-ui', // Usually your repo name.
+
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+      }),
+    ],
+  ],
+  themes: ['@docusaurus/theme-live-codeblock'],
+  plugins: [
+    [
+      'docusaurus-plugin-react-docgen-typescript',
+      {
+        // pass in a single string or an array of strings
+        src: ['../src/components/**/Button.tsx', '!../src/components/**/*test.*'],
+        global: false,
+        parserOptions: {
+          // pass parserOptions to react-docgen-typescript
+          // here is a good starting point which filters out all
+          // types from react
+          propFilter: (property, component) => {
+            if (property.parent) {
+              return (
+                !property.parent.fileName.includes('@types/react') &&
+                !['css'].includes(property.name)
+              );
+            }
+
+            return !property.name.includes('css');
+          },
+        },
+      },
+    ],
+  ],
+
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      navbar: {
+        title: 'Herz UI',
+        logo: {
+          alt: 'Micromed Logo',
+          src: 'img/logo.svg',
+        },
+        items: [
+          {
+            type: 'doc',
+            docId: 'intro',
+            position: 'left',
+            label: 'Documentation',
+          },
+          {
+            href: 'https://github.com/micromedio/herz-ui',
+            label: 'GitHub',
+            position: 'right',
+          },
+        ],
+      },
+      footer: {
+        style: 'dark',
+        copyright: `Copyright © ${new Date().getFullYear()} Micromed. Built with Docusaurus.`,
+      },
+      prism: {
+        theme: lightCodeTheme,
+        darkTheme: {
+          plain: {
+            color: "#F8F8F2",
+            backgroundColor: "#2A2A2A"
+          },
+          styles: [{
+            types: ["prolog", "constant", "builtin"],
+            style: {
+              color: "#66B4FD"
+            }
+          }, {
+            types: ["inserted", "function"],
+            style: {
+              color: "#30D158"
+            }
+          }, {
+            types: ["deleted"],
+            style: {
+              color: "#E53636"
+            }
+          }, {
+            types: ["changed"],
+            style: {
+              color: "#FFF17D"
+            }
+          }, {
+            types: ["punctuation", "symbol"],
+            style: {
+              color: "rgb(248, 248, 242)"
+            }
+          }, {
+            types: ["string", "char", "tag", "selector"],
+            style: {
+              color: "#FF3C3C"
+            }
+          }, {
+            types: ["keyword", "variable"],
+            style: {
+              color: "#66B4FD",
+              fontStyle: "italic"
+            }
+          }, {
+            types: ["comment"],
+            style: {
+              color: "#777"
+            }
+          }, {
+            types: ["attr-name"],
+            style: {
+              color: "#FEFF99"
+            }
+          }]
+        },
+      },
+    }),
+});