feat(shared): Generated the React components lib

sullivanpj · Nov 13, 2022 · f6f882b · f6f882b
1 parent 33aeaa1
commit f6f882b
Show file tree

Hide file tree

Showing 46 changed files with 734 additions and 243 deletions.
diff --git a/.gitignore b/.gitignore
@@ -49,3 +49,5 @@ tools/**/out-test/**
 .docusaurus/
 .cache-loader/
 libs/shared-ui-design-components-react/**/generated
+
+.next
diff --git a/apps/web/landing/ClientApp/app/error.tsx b/apps/web/landing/ClientApp/app/error.tsx
diff --git a/apps/web/landing/ClientApp/app/head.tsx b/apps/web/landing/ClientApp/app/head.tsx
diff --git a/apps/web/landing/ClientApp/app/layout.tsx b/apps/web/landing/ClientApp/app/layout.tsx
@@ -1,34 +1,11 @@
-import Link from "next/link";
-
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <head />
-      <body className="bg-gray-1100">
-        <nav>
-          <div className="flex flex-row gap-2">
-            <Link href="/" className="rounded-lg bg-gray-900 hover:bg-gray-800">
-              Home
-            </Link>
-            <Link
-              href="/contact"
-              className="rounded-lg bg-gray-900 hover:bg-gray-800">
-              Contact
-            </Link>
-            <Link
-              href="/about"
-              className="rounded-lg bg-gray-900 hover:bg-gray-800">
-              About
-            </Link>
-          </div>
-        </nav>
-
-        <div className="lg:pl-72">{children}</div>
-      </body>
-    </html>
+    <div className="flex flex-row gap-2">
+      <div className="lg:pl-72">{children}</div>
+    </div>
   );
 }
diff --git a/apps/web/landing/ClientApp/app/loading.tsx b/apps/web/landing/ClientApp/app/loading.tsx
diff --git a/apps/web/landing/ClientApp/app/not-found.tsx b/apps/web/landing/ClientApp/app/not-found.tsx
diff --git a/apps/web/landing/ClientApp/next.config.js b/apps/web/landing/ClientApp/next.config.js
@@ -6,9 +6,9 @@ const { API_URL } = process.env;
  * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
+  basePath: "/home",
+  distDir: "../../../../dist/web/landing/ClientApp",
   nx: {
-    // Set this to true if you would like to to use SVGR
-    // See: https://github.com/gregberge/svgr
     svgr: true,
   },
   swcMinify: true,

diff --git a/apps/web/shell/ClientApp/app/layout.tsx b/apps/web/shell/ClientApp/app/layout.tsx
@@ -1,4 +1,6 @@
+import { UserProvider } from "@auth0/nextjs-auth0";
 import Link from "next/link";
+import React from "react";
 import "./globals.css";
 
 export default function RootLayout({
@@ -10,25 +12,35 @@ export default function RootLayout({
     <html lang="en">
       <head />
       <body className="bg-gray-1100">
-        <nav>
-          <div className="flex flex-row gap-2">
-            <Link href="/" className="rounded-lg bg-gray-900 hover:bg-gray-800">
-              Home
-            </Link>
-            <Link
-              href="/contact"
-              className="rounded-lg bg-gray-900 hover:bg-gray-800">
-              Contact
-            </Link>
-            <Link
-              href="/about"
-              className="rounded-lg bg-gray-900 hover:bg-gray-800">
-              About
-            </Link>
-          </div>
-        </nav>
+        <UserProvider>
+          <nav>
+            <div className="flex flex-row gap-2">
+              <Link
+                href="/"
+                className="rounded-lg bg-gray-900 text-primary hover:bg-gray-800">
+                Home
+              </Link>
+              <Link
+                href="/contact"
+                className="rounded-lg bg-gray-900 text-primary hover:bg-gray-800">
+                Contact
+              </Link>
+              <Link
+                href="/about"
+                className="rounded-lg bg-gray-900 text-primary hover:bg-gray-800">
+                About
+              </Link>
 
-        <div className="lg:pl-72">{children}</div>
+              <Link
+                href="/api/auth/login"
+                className="rounded-lg bg-gray-900 text-primary hover:bg-gray-800">
+                Login
+              </Link>
+            </div>
+          </nav>
+
+          <div className="lg:pl-72">{children}</div>
+        </UserProvider>
       </body>
     </html>
   );

diff --git a/apps/web/shell/ClientApp/next.config.js b/apps/web/shell/ClientApp/next.config.js
@@ -6,9 +6,9 @@ const { DOCS_URL, API_URL } = process.env;
  * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
+  basePath: "/",
+  distDir: "../../../../dist/web/shell/ClientApp",
   nx: {
-    // Set this to true if you would like to to use SVGR
-    // See: https://github.com/gregberge/svgr
     svgr: true,
   },
   swcMinify: true,
@@ -31,8 +31,8 @@ const nextConfig = {
         destination: `${DOCS_URL}/:path*`,
       },
       {
-        source: "/api/:path*",
-        destination: `${API_URL}/api/:path*`,
+        source: "/api/os/:path*",
+        destination: `${API_URL}/api/os/:path*`,
       },
     ];
   },

diff --git a/apps/web/shell/ClientApp/pages/api/auth/[...auth0].js b/apps/web/shell/ClientApp/pages/api/auth/[...auth0].js
@@ -0,0 +1,3 @@
+import { handleAuth } from "@auth0/nextjs-auth0";
+
+export default handleAuth();
diff --git a/design-system/components/project.json b/design-system/components/project.json
@@ -45,12 +45,12 @@
           "dev": true,
           "prod": false,
           "clean": false,
-          "verbose": false
+          "verbose": true
         },
         "production": {
           "dev": false,
           "prod": true,
-          "clean": false
+          "clean": true
         }
       }
     },
@@ -80,24 +80,11 @@
     "serve": {
       "executor": "@nxext/stencil:serve",
       "outputs": ["{options.outputPath}"],
-      "defaultConfiguration": "production",
       "options": {
         "projectType": "library",
         "tsConfig": "design-system/components/tsconfig.lib.json",
         "configPath": "design-system/components/stencil.config.ts",
         "outputPath": "dist/design-system/components"
-      },
-      "configurations": {
-        "development": {
-          "dev": true,
-          "debug": true,
-          "verbose": true
-        },
-        "production": {
-          "dev": false,
-          "debug": false,
-          "verbose": false
-        }
       }
     },
     "e2e": {

diff --git a/design-system/components/src/components.d.ts b/design-system/components/src/components.d.ts
@@ -5,8 +5,6 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { ButtonTransitionDirections, ButtonTypes, ButtonVariants } from "./components/os-button/os-button.types";
-import { SelectOption } from "./components/os-select/os-select.types";
 export namespace Components {
     interface OsButton {
         /**

diff --git a/design-system/components/src/components/os-button/os-button.tsx b/design-system/components/src/components/os-button/os-button.tsx
@@ -8,11 +8,6 @@ import {
   Prop,
 } from "@stencil/core";
 import clsx from "clsx";
-import {
-  ButtonTransitionDirections,
-  ButtonTypes,
-  ButtonVariants,
-} from "./os-button.types";
 
 @Component({
   tag: "os-button",
@@ -131,7 +126,7 @@ export class OsButton {
           <div
             class={clsx(
               this.getTextColor(),
-              "font-btn-label-1 text-btn-label-1 rounded-full bg-bg-1 px-8  py-3"
+              "rounded-full bg-bg-1 px-8 py-3 font-btn-label-1  text-btn-label-1"
             )}>
             {this.inverse ? (
               <slot name="hover-text">{this.getDefaultText()}</slot>
@@ -274,7 +269,7 @@ export class OsButton {
                               this.variant !== ButtonVariants.GRADIENT ||
                               this.disabled,
                           },
-                          "font-btn-label-1 text-btn-label-1 flex h-full w-full items-center justify-center text-center"
+                          "flex h-full w-full items-center justify-center text-center font-btn-label-1 text-btn-label-1"
                         )}>
                         {this.inverse ? (
                           <slot>{this.getDefaultText()}</slot>

diff --git a/design-system/components/src/components/os-button/os-button.types.ts b/design-system/components/src/components/os-button/os-button.types.ts
diff --git a/design-system/components/src/components/os-input/readme.md b/design-system/components/src/components/os-input/readme.md
@@ -5,6 +5,10 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+An input field used in forms to collect data from users
+
 ## Properties
 
 | Property      | Attribute     | Description                                                                       | Type      | Default     |

diff --git a/design-system/components/src/components/os-select/os-select.tsx b/design-system/components/src/components/os-select/os-select.tsx
@@ -12,7 +12,6 @@ import {
   Watch,
 } from "@stencil/core";
 import clsx from "clsx";
-import { SelectOption } from "./os-select.types";
 
 @Component({
   tag: "os-select",

diff --git a/design-system/components/src/components/os-select/os-select.types.ts b/design-system/components/src/components/os-select/os-select.types.ts
diff --git a/design-system/components/src/declaration.d.ts b/design-system/components/src/declaration.d.ts
@@ -0,0 +1,52 @@
+declare interface SelectOption {
+  /**
+   * 	The string value to display in the field
+   */
+  name: string;
+
+  /**
+   * The value stored behind the scenes when selected
+   */
+  value: string;
+
+  /**
+   * Is the option value valid for selection in the dropdown
+   */
+  disabled: boolean;
+
+  /**
+   * Sets or retrieves whether the option in the list box is the default item.
+   */
+  selected: boolean;
+}
+
+declare enum ButtonVariants {
+  GRADIENT = "gradient",
+  PRIMARY = "primary",
+  SECONDARY = "secondary",
+  TERTIARY = "tertiary",
+}
+
+declare enum ButtonTransitionDirections {
+  LEFT = "left",
+  RIGHT = "right",
+  TOP = "top",
+  BOTTOM = "bottom",
+}
+
+declare enum ButtonTypes {
+  /**
+   * 	The button is a submit button (submits form-data)
+   */
+  SUBMIT = "submit",
+
+  /**
+   * The button is a reset button (resets the form-data to its initial values)
+   */
+  RESET = "reset",
+
+  /**
+   * The button is a clickable button
+   */
+  BUTTON = "button",
+}