feat(shared-ui-design-token): Added docgen tools

sullivanpj · Nov 2, 2022 · d06b8e0 · d06b8e0
1 parent 5701388
commit d06b8e0
Show file tree

Hide file tree

Showing 52 changed files with 3,290 additions and 453 deletions.
diff --git a/apps/docs/docs/apis/introduction.md b/apps/docs/docs/apis/introduction.md
@@ -0,0 +1,24 @@
+---
+id: introduction
+title: OpenAPI Specs
+hide_title: false
+tags:
+  - Learning
+  - APIs
+---
+
+## APIs
+
+The Open System client <-> server communication is driven by various API end points. These end points are described by .yaml documents written in the [OpenAPI Spec v3.0.0](https://swagger.io/specification/).
+
+:::note
+
+These .yaml documents can either be updating manually or using a [GUI editor](https://stoplight.io/).
+
+:::
+
+## APIs End Points
+
+|        API Hives         |     Domain     | API App      |
+| :----------------------: | :------------: | :----------- |
+| [Message](/apis/message) | Static/Message | apis-message |
diff --git a/apps/docs/docs/services/introduction.md b/apps/docs/docs/services/introduction.md
diff --git a/apps/docs/docusaurus.config.js b/apps/docs/docusaurus.config.js
@@ -31,6 +31,27 @@ const config = {
         },
       }),
     ],
+    [
+      "redocusaurus",
+      {
+        // Plugin Options for loading OpenAPI files
+        specs: [
+          {
+            id: "Message-APIs",
+            spec: "libs/static/message/message.api-spec.json",
+            route: "/apis/message/",
+          },
+        ],
+        theme: {},
+
+        /**
+         * Options to pass to Redoc
+         *
+         * @see https://github.com/redocly/redoc#redoc-options-object
+         */
+        options: { expandResponses: "200" },
+      },
+    ],
   ],
 
   themeConfig:
@@ -53,24 +74,25 @@ const config = {
         title: "Open System",
         items: [
           {
-            type: "doc",
-            docId: "intro",
+            to: "design-system",
             position: "left",
-            label: "Tutorial",
+            label: "Design System",
           },
           {
-            to: "docs/services/introduction",
-            activeBasePath: "docs/services",
-            label: "Service End Points",
+            to: "docs/apis/introduction",
+            activeBasePath: "docs/apis",
+            label: "OpenAPI Specs",
             position: "left",
             items: [
               {
-                to: "/services/message",
-                label: "Message-Services",
+                to: "/apis/message",
+                label: "Message-APIs",
               },
             ],
           },
           {
+            type: "doc",
+            docId: "getting-started/installation",
             to: "docs/getting-started/installation",
             activeBasePath: "docs/getting-started",
             label: "Training",
@@ -93,6 +115,10 @@ const config = {
                 label: "API End Points",
                 to: "docs/apis/introduction",
               },
+              {
+                label: "Design System",
+                to: "Design System",
+              },
               {
                 label: "Docs Style Guide",
                 to: "docs/doc-creation/docs-style-guide",

diff --git a/apps/docs/sidebars.js b/apps/docs/sidebars.js
@@ -1,13 +1,13 @@
-/**
- * Creating a sidebar enables you to:
- - create an ordered group of docs
- - render a sidebar for each doc of that group
- - provide next/previous navigation
+/*const fs = require("fs");
 
- The sidebars can be generated from the filesystem, or explicitly defined here.
+let tokens = [];
+fs.readdirSync("./docs/design-tokens").forEach(file => {
+  const contents = fs.readFileSync(`./docs/design-tokens/${file}`, "utf-8");
 
- Create as many sidebars as you want.
- */
+  if (contents) {
+    tokens.push(id);
+  }
+});*/
 
 // @ts-check
 
@@ -19,12 +19,9 @@ const sidebars = {
       "getting-started/introduction",
       "getting-started/nx-console",
     ],
-    "Service End Points": ["services/introduction"],
+    "OpenAPI Specs": ["apis/introduction"],
     "Creating Docs": ["doc-creation/docs-style-guide"],
   },
-
-  // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
 };
 
 module.exports = sidebars;
diff --git a/...rc/components/HomepageFeatures.module.css → ...ents/DesignTokens/DesignTokens.module.css b/...rc/components/HomepageFeatures.module.css → ...ents/DesignTokens/DesignTokens.module.css
diff --git a/...docs/src/components/DesignTokens/DisplayDesignToken/ColorDesignToken/ColorDesignToken.tsx b/...docs/src/components/DesignTokens/DisplayDesignToken/ColorDesignToken/ColorDesignToken.tsx
@@ -0,0 +1,11 @@
+import React, { ComponentProps } from "react";
+
+export const ColorDesignToken = ({ children }: ComponentProps<any>) => (
+  <span
+    style={{
+      backgroundColor: children,
+      borderRadius: "2px",
+      color: "#aaa",
+      padding: "0px 1.5rem",
+    }}></span>
+);
diff --git a/apps/docs/src/components/DesignTokens/DisplayDesignToken/DisplayDesignToken.tsx b/apps/docs/src/components/DesignTokens/DisplayDesignToken/DisplayDesignToken.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { ColorDesignToken } from "./ColorDesignToken/ColorDesignToken";
+import { FontWeightDesignToken } from "./FontDesignToken/FontFamilyDesignToken/FontFamilyDesignToken";
+import { FontSizeDesignToken } from "./FontDesignToken/FontSizeDesignToken/FontSizeDesignToken";
+import { FontFamilyDesignToken } from "./FontDesignToken/FontWeightDesignToken/FontWeightDesignToken";
+import { SizeDesignToken } from "./SizeDesignToken/SizeDesignToken";
+
+export const DisplayDesignToken = ({ token, value }) => {
+  const tokenValue = value?.trim();
+  if (!tokenValue) {
+    return null;
+  }
+
+  if (token?.includes("color") && value?.includes("#")) {
+    return <ColorDesignToken>{value?.trim()}</ColorDesignToken>;
+  } else if (token?.includes("font-family")) {
+    return <FontFamilyDesignToken>{tokenValue}</FontFamilyDesignToken>;
+  } else if (token?.includes("font-size")) {
+    return <FontSizeDesignToken>{tokenValue}</FontSizeDesignToken>;
+  } else if (token?.includes("font-weight")) {
+    return <FontWeightDesignToken>{tokenValue}</FontWeightDesignToken>;
+  } else if (
+    token?.includes("spacing") ||
+    token?.includes("padding") ||
+    token?.includes("margin") ||
+    token?.includes("gap")
+  ) {
+    return <SizeDesignToken>{value?.trim()}</SizeDesignToken>;
+  } else {
+    return null;
+  }
+};
diff --git a/apps/docs/src/components/DesignTokens/DisplayDesignToken/FontDesignToken/FontDesignToken.tsx b/apps/docs/src/components/DesignTokens/DisplayDesignToken/FontDesignToken/FontDesignToken.tsx
@@ -0,0 +1,5 @@
+import React, { ComponentProps } from "react";
+
+export const FontDesignToken = ({ style }: ComponentProps<any>) => (
+  <p style={style}>The quick brown fox jumps over the lazy dog.</p>
+);
diff --git a/...Tokens/DisplayDesignToken/FontDesignToken/FontFamilyDesignToken/FontFamilyDesignToken.tsx b/...Tokens/DisplayDesignToken/FontDesignToken/FontFamilyDesignToken/FontFamilyDesignToken.tsx
@@ -0,0 +1,11 @@
+import React, { ComponentProps } from "react";
+import { FontDesignToken } from "../FontDesignToken";
+
+export const FontWeightDesignToken = ({ children }: ComponentProps<any>) => (
+  <FontDesignToken
+    style={{
+      fontWeight: children,
+      fontSize: "24px",
+    }}
+  />
+);
diff --git a/...signTokens/DisplayDesignToken/FontDesignToken/FontSizeDesignToken/FontSizeDesignToken.tsx b/...signTokens/DisplayDesignToken/FontDesignToken/FontSizeDesignToken/FontSizeDesignToken.tsx
@@ -0,0 +1,10 @@
+import React, { ComponentProps } from "react";
+import { FontDesignToken } from "../FontDesignToken";
+
+export const FontSizeDesignToken = ({ children }: ComponentProps<any>) => (
+  <FontDesignToken
+    style={{
+      fontSize: children,
+    }}
+  />
+);
diff --git a/...Tokens/DisplayDesignToken/FontDesignToken/FontWeightDesignToken/FontWeightDesignToken.tsx b/...Tokens/DisplayDesignToken/FontDesignToken/FontWeightDesignToken/FontWeightDesignToken.tsx
@@ -0,0 +1,11 @@
+import React, { ComponentProps } from "react";
+import { FontDesignToken } from "../FontDesignToken";
+
+export const FontFamilyDesignToken = ({ children }: ComponentProps<any>) => (
+  <FontDesignToken
+    style={{
+      fontFamily: children,
+      fontSize: "24px",
+    }}
+  />
+);
diff --git a/apps/docs/src/components/DesignTokens/DisplayDesignToken/SizeDesignToken/SizeDesignToken.tsx b/apps/docs/src/components/DesignTokens/DisplayDesignToken/SizeDesignToken/SizeDesignToken.tsx
@@ -0,0 +1,12 @@
+import React, { ComponentProps } from "react";
+
+export const SizeDesignToken = ({ children }: ComponentProps<any>) => (
+  <div
+    style={{
+      width: children,
+      height: "4px",
+      color: "#aaa",
+      backgroundColor: "#7330d5",
+      textAlign: "center",
+    }}></div>
+);
diff --git a/apps/docs/src/components/DesignTokens/design-tokens-container.mdx b/apps/docs/src/components/DesignTokens/design-tokens-container.mdx
@@ -0,0 +1,6 @@
+import DesignTokenTable from "./design-tokens-table.mdx";
+
+# Design Tokens
+
+<DesignTokenTable />
+
diff --git a/apps/docs/src/components/DesignTokens/design-tokens-table.mdx b/apps/docs/src/components/DesignTokens/design-tokens-table.mdx
@@ -0,0 +1,80 @@
+import { DisplayDesignToken } from "./DisplayDesignToken/DisplayDesignToken";
+
+## Color
+
+|          Token           |  Value  |                                 Display                                 |
+| :----------------------: | :-----: | :---------------------------------------------------------------------: |
+|     --os-color-info      | #aac2ff |     <DisplayDesignToken token="--os-color-info" value="#aac2ff" />      |
+|    --os-color-warning    | #f2c94c |    <DisplayDesignToken token="--os-color-warning" value="#f2c94c" />    |
+|     --os-color-error     | #eb6957 |     <DisplayDesignToken token="--os-color-error" value="#eb6957" />     |
+|  --os-color-white-dark   | #f1f5f8 |  <DisplayDesignToken token="--os-color-white-dark" value="#f1f5f8" />   |
+|     --os-color-white     | #ffffff |     <DisplayDesignToken token="--os-color-white" value="#ffffff" />     |
+|  --os-color-black-light  | #404f48 |  <DisplayDesignToken token="--os-color-black-light" value="#404f48" />  |
+|     --os-color-black     | #29322e |     <DisplayDesignToken token="--os-color-black" value="#29322e" />     |
+| --os-color-primary-light | #b9c4df | <DisplayDesignToken token="--os-color-primary-light" value="#b9c4df" /> |
+|    --os-color-primary    | #3a4d7e |    <DisplayDesignToken token="--os-color-primary" value="#3a4d7e" />    |
+
+## Font Family
+
+|         Token          |        Value        |                                     Display                                      |
+| :--------------------: | :-----------------: | :------------------------------------------------------------------------------: |
+| --os-font-family-title |  Arial, sans-serif  | <DisplayDesignToken token="--os-font-family-title" value="Arial, sans-serif" />  |
+| --os-font-family-body  | Verdana, sans-serif | <DisplayDesignToken token="--os-font-family-body" value="Verdana, sans-serif" /> |
+
+## Font Size
+
+|        Token         | Value |                             Display                              |
+| :------------------: | :---: | :--------------------------------------------------------------: |
+| --os-font-size-title | 80px  | <DisplayDesignToken token="--os-font-size-title" value="80px" /> |
+| --os-font-size-body  | 18px  | <DisplayDesignToken token="--os-font-size-body" value="18px" />  |
+
+## Font Weight
+
+|         Token          | Value |                              Display                              |
+| :--------------------: | :---: | :---------------------------------------------------------------: |
+| --os-font-weight-title |  700  | <DisplayDesignToken token="--os-font-weight-title" value="700" /> |
+| --os-font-weight-body  |  400  | <DisplayDesignToken token="--os-font-weight-body" value="400" />  |
+
+## Spacing
+
+|       Token       | Value |                           Display                            |
+| :---------------: | :---: | :----------------------------------------------------------: |
+|  --os-spacing-lg  | 45px  | <DisplayDesignToken token="--os-spacing-lg" value="45px" />  |
+|  --os-spacing-md  | 24px  | <DisplayDesignToken token="--os-spacing-md" value="24px" />  |
+|  --os-spacing-sm  | 12px  | <DisplayDesignToken token="--os-spacing-sm" value="12px" />  |
+|  --os-spacing-xs  |  8px  |  <DisplayDesignToken token="--os-spacing-xs" value="8px" />  |
+| --os-spacing-xxs  |  4px  | <DisplayDesignToken token="--os-spacing-xxs" value="4px" />  |
+| --os-spacing-xxxs |  2px  | <DisplayDesignToken token="--os-spacing-xxxs" value="2px" /> |
+
+## Padding
+
+|       Token       | Value |                           Display                            |
+| :---------------: | :---: | :----------------------------------------------------------: |
+|  --os-padding-lg  | 45px  | <DisplayDesignToken token="--os-padding-lg" value="45px" />  |
+|  --os-padding-md  | 24px  | <DisplayDesignToken token="--os-padding-md" value="24px" />  |
+|  --os-padding-sm  | 18px  | <DisplayDesignToken token="--os-padding-sm" value="18px" />  |
+|  --os-padding-xs  | 12px  | <DisplayDesignToken token="--os-padding-xs" value="12px" />  |
+| --os-padding-xxs  |  8px  | <DisplayDesignToken token="--os-padding-xxs" value="8px" />  |
+| --os-padding-xxxs |  4px  | <DisplayDesignToken token="--os-padding-xxxs" value="4px" /> |
+
+## Margin
+
+|      Token       | Value |                           Display                           |
+| :--------------: | :---: | :---------------------------------------------------------: |
+|  --os-margin-lg  | 45px  | <DisplayDesignToken token="--os-margin-lg" value="45px" />  |
+|  --os-margin-md  | 24px  | <DisplayDesignToken token="--os-margin-md" value="24px" />  |
+|  --os-margin-sm  | 18px  | <DisplayDesignToken token="--os-margin-sm" value="18px" />  |
+|  --os-margin-xs  | 12px  | <DisplayDesignToken token="--os-margin-xs" value="12px" />  |
+| --os-margin-xxs  |  8px  | <DisplayDesignToken token="--os-margin-xxs" value="8px" />  |
+| --os-margin-xxxs |  4px  | <DisplayDesignToken token="--os-margin-xxxs" value="4px" /> |
+
+## Gap
+
+|     Token     | Value |                         Display                          |
+| :-----------: | :---: | :------------------------------------------------------: |
+|  --os-gap-lg  | 45px  | <DisplayDesignToken token="--os-gap-lg" value="45px" />  |
+|  --os-gap-md  | 24px  | <DisplayDesignToken token="--os-gap-md" value="24px" />  |
+|  --os-gap-sm  | 18px  | <DisplayDesignToken token="--os-gap-sm" value="18px" />  |
+|  --os-gap-xs  | 12px  | <DisplayDesignToken token="--os-gap-xs" value="12px" />  |
+| --os-gap-xxs  |  8px  | <DisplayDesignToken token="--os-gap-xxs" value="8px" />  |
+| --os-gap-xxxs |  4px  | <DisplayDesignToken token="--os-gap-xxxs" value="4px" /> |
diff --git a/apps/docs/src/components/HomepageFeatures/HomepageFeatures.module.css b/apps/docs/src/components/HomepageFeatures/HomepageFeatures.module.css
@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}
diff --git a/.../docs/src/components/HomepageFeatures.tsx → ...nts/HomepageFeatures/HomepageFeatures.tsx b/.../docs/src/components/HomepageFeatures.tsx → ...nts/HomepageFeatures/HomepageFeatures.tsx