feat(shared-ui-feat-notifications): Added notifications banner and gr…

…oup components
sullivanpj · Dec 22, 2022 · 17e7946 · 17e7946
1 parent e0b5875
commit 17e7946
Show file tree

Hide file tree

Showing 48 changed files with 815 additions and 432 deletions.
diff --git a/apps/web/shell/app/error.tsx b/apps/web/shell/app/error.tsx
@@ -1,19 +1,30 @@
 "use client";
 
-import React from "react";
+import { ConsoleLogger } from "@open-system/core-typescript-utilities";
+import {
+  Button,
+  ButtonVariants,
+  MessageBar,
+  MessageBarVariants,
+} from "@open-system/design-system-components";
+import { ErrorBoundaryProps } from "@open-system/shared-ui-components";
+import { useEffect } from "react";
 
-export default function Error({ error, reset }: any) {
-  React.useEffect(() => {
-    console.log("logging error:", error);
+export default function Error({ error, reset }: ErrorBoundaryProps) {
+  useEffect(() => {
+    error?.message && ConsoleLogger.error(error.message);
   }, [error]);
 
   return (
-    <div className="space-y-4">
-      <div className="text-vercel-pink text-sm">
-        <strong className="font-bold">Error:</strong> {error?.message}
-      </div>
-      <div>
-        <button onClick={() => reset()}>Try Again</button>
+    <div className="flex w-full flex-col gap-10 p-12">
+      <MessageBar variant={MessageBarVariants.ERROR} message={error?.message} />
+      <div className="flex flex-row-reverse">
+        <Button
+          variant={ButtonVariants.PRIMARY}
+          onClick={reset}
+          hoverText="Reset">
+          Try Again
+        </Button>
       </div>
     </div>
   );

diff --git a/apps/web/shell/app/home/(technologies)/technology-group.tsx b/apps/web/shell/app/home/(technologies)/technology-group.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Heading, PropsWithBase } from "@open-system/design-system-components";
 
 type TechnologyGroupProps = PropsWithBase<{

diff --git a/apps/web/shell/app/home/(technologies)/technology.tsx b/apps/web/shell/app/home/(technologies)/technology.tsx
@@ -5,10 +5,11 @@ import {
   ButtonCornerRoundingTypes,
   ButtonVariants,
   Heading,
-  ModalReference,
   PropsWithBase,
 } from "@open-system/design-system-components";
-import { Link, Modal } from "@open-system/shared-ui-components";
+import { ModalReference } from "@open-system/shared-ui-components";
+import { Link } from "@open-system/shared-ui-components/link";
+import { Modal } from "@open-system/shared-ui-components/modal";
 import { useCallback, useRef } from "react";
 
 type TechnologyProps = PropsWithBase<{
@@ -30,19 +31,18 @@ export default function Technology({
   );
 
   return (
-    <>
-      <div
-        className="group flex h-fit w-fit flex-col justify-center gap-4"
-        onClick={handleOpen}>
-        <div className="h-fit w-fit cursor-pointer transition-transform group-hover:translate-y-0.5 group-hover:scale-110">
-          {children}
-        </div>
-        <Heading
-          level={5}
-          className="cursor-pointer whitespace-nowrap text-center transition-all group-hover:translate-y-0.5 group-hover:scale-110 group-hover:text-text-hover group-hover:underline">
-          {name}
-        </Heading>
+    <div
+      className="group flex h-fit w-fit flex-col justify-center gap-4"
+      onClick={handleOpen}>
+      <div className="h-fit w-fit cursor-pointer transition-transform group-hover:translate-y-0.5 group-hover:scale-110">
+        {children}
       </div>
+      <Heading
+        level={5}
+        className="cursor-pointer whitespace-nowrap text-center transition-all group-hover:translate-y-0.5 group-hover:scale-110 group-hover:text-text-hover group-hover:underline">
+        {name}
+      </Heading>
+
       <Modal
         ref={ref}
         title={
@@ -56,7 +56,7 @@ export default function Technology({
           </div>
         }>
         <div className="flex h-full flex-col gap-5">
-          <div className="font-body-1 text-body-1">{description}</div>
+          <div className="font-body-1 text-primary">{description}</div>
           <div className="flex flex-1 flex-row-reverse items-end">
             <Link href={url} target="_blank">
               <Button
@@ -69,6 +69,6 @@ export default function Technology({
           </div>
         </div>
       </Modal>
-    </>
+    </div>
   );
 }
diff --git a/apps/web/shell/app/layout.tsx b/apps/web/shell/app/layout.tsx
@@ -60,7 +60,9 @@ export default function RootLayout({
       <head />
       <body className="relative h-fit min-h-screen antialiased">
         <NavHeader />
-        <div id="portal" />
+
+        <div id="root-portal" />
+
         <div className="h-fit w-full">{children}</div>
         <Footer />
       </body>

diff --git a/apps/web/shell/app/nav-header.tsx b/apps/web/shell/app/nav-header.tsx
@@ -1,10 +1,13 @@
 "use client";
 
 import { NavigationMenu } from "@open-system/shared-ui-feat-layout/navigation-menu";
+import { NotificationGroup } from "@open-system/shared-ui-feat-notifications/notification-group";
 
 export default function NavHeader() {
   return (
     <nav className="fixed top-0 z-nav h-0 w-full overflow-visible">
+      <NotificationGroup />
+
       <NavigationMenu
         items={[
           { label: "Home", href: "/" },

diff --git a/assets/external-logos/redocly-logo.png b/assets/external-logos/redocly-logo.png
diff --git a/cspell.json b/cspell.json
@@ -45,6 +45,7 @@
     "theunderscorer",
     "typesense",
     "unoptimized",
+    "uuidv",
     "webp"
   ],
   "enableFiletypes": [

diff --git a/design-system/components/src/heading/Heading.tsx b/design-system/components/src/heading/Heading.tsx
@@ -66,7 +66,7 @@ export const Heading = ({ className, children, level = 2 }: HeadingProps) => {
       ) : (
         <h6
           className={clsx(
-            "font-header-6 text-xl font-bold leading-[1rem] text-primary shadow-white text-shadow-lg",
+            "font-header-6 text-2xl font-extrabold text-primary shadow-white text-shadow-lg",
             className
           )}>
           {children}

diff --git a/design-system/components/src/index.ts b/design-system/components/src/index.ts
@@ -6,8 +6,8 @@ export * from "./divider";
 export * from "./heading";
 export * from "./input";
 export * from "./link";
+export * from "./message-bar";
 export * from "./modal";
-export * from "./notification";
 export * from "./section";
 export * from "./select";
 export * from "./textarea";

diff --git a/design-system/components/src/message-bar/MessageBar.stories.tsx b/design-system/components/src/message-bar/MessageBar.stories.tsx
@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import type { ComponentStory } from "@storybook/react";
+import { MessageBar } from "./MessageBar";
+import { MessageBarVariants } from "./MessageBar.types";
+
+export default {
+  title: "Containers/MessageBar",
+  component: MessageBar,
+};
+
+const Template: ComponentStory<typeof MessageBar> = args => (
+  <MessageBar {...args} onClose={() => {}} />
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  variant: MessageBarVariants.WARNING,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  variant: MessageBarVariants.ERROR,
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  variant: MessageBarVariants.INFO,
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  variant: MessageBarVariants.SUCCESS,
+};
+
+export const LongMessage = Template.bind({});
+LongMessage.args = {
+  message:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+};
+
+export const CloseIconDisplayed = Template.bind({});
+CloseIconDisplayed.args = {
+  showCloseIcon: true,
+  message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+};
diff --git a/design-system/components/src/message-bar/MessageBar.tsx b/design-system/components/src/message-bar/MessageBar.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
+import { Heading } from "../heading";
+import { ModalVariants } from "../modal/Modal.types";
+import { PropsWithBase } from "../types";
+import { getSvgFillStyle } from "../utilities/svg-style-utils";
+import { MessageBarVariants } from "./MessageBar.types";
+import {
+  getBackgroundStyle,
+  getBorderStyle,
+  getCloseButtonStyle,
+  getDefaultTitle,
+  getTextStyle,
+} from "./MessageBar.utils";
+
+export type MessageBarProps = PropsWithBase<{
+  /**
+   * The variant style of the modal
+   */
+  variant?: MessageBarVariants;
+
+  /**
+   * The text message displayed at the top of the modal
+   */
+  message: string;
+
+  /**
+   * An indicator specifying if the "close icon" is displayed (allowing the user to manually close the message bar)
+   */
+  showCloseIcon?: boolean;
+
+  /**
+   * An event handler called when the "close icon" is clicked by the user
+   *
+   * @remarks Please note: If no `onClose` prop is provided, the "close icon" will not be displayed
+   */
+  onClose?: () => void;
+}>;
+
+/**
+ * The base MessageBar component used by the Open System repository
+ */
+export const MessageBar = ({
+  className,
+  onClose,
+  message,
+  showCloseIcon = true,
+  variant = MessageBarVariants.INFO,
+}: MessageBarProps) => {
+  return (
+    <div className="h-fit w-fit bg-black/80">
+      <div
+        className={clsx(
+          "relative h-fit w-[50rem] min-w-fit border-4 p-4 backdrop-blur-xl backdrop-brightness-0",
+          getTextStyle(variant),
+          getBorderStyle(variant),
+          getBackgroundStyle(variant),
+          className
+        )}>
+        <div className="flex h-full flex-row items-center gap-5">
+          <span className="inline-block h-fit">
+            <svg
+              width="45"
+              height="45"
+              viewBox="0 0 25 25"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M12.5 0C5.59644 0 0 5.59644 0 12.5C0 19.4035 5.59644 25 12.5 25C19.4035 25 25 19.4035 25 12.5C25 5.59644 19.4035 0 12.5 0ZM13.6364 6.81818C13.6364 6.19059 13.1276 5.68182 12.5 5.68182C11.8724 5.68182 11.3636 6.19059 11.3636 6.81818V13.6364C11.3636 14.264 11.8724 14.7727 12.5 14.7727C13.1276 14.7727 13.6364 14.264 13.6364 13.6364V6.81818ZM13.6364 17.6136C13.6364 16.986 13.1276 16.4773 12.5 16.4773C11.8724 16.4773 11.3636 16.986 11.3636 17.6136V18.1818C11.3636 18.8094 11.8724 19.3182 12.5 19.3182C13.1276 19.3182 13.6364 18.8094 13.6364 18.1818V17.6136Z"
+                className={getSvgFillStyle(
+                  variant === ModalVariants.ERROR,
+                  variant === ModalVariants.WARNING,
+                  variant === ModalVariants.INFO,
+                  variant === ModalVariants.SUCCESS
+                )}
+              />
+            </svg>
+          </span>
+          <div className="flex h-full flex-1 flex-row items-center">
+            <div className="flex h-fit flex-row items-end gap-2 leading-none">
+              <Heading
+                level={6}
+                className={clsx(getTextStyle(variant), "text-2xl")}>
+                {`${getDefaultTitle(variant)}:`}
+              </Heading>
+              <label className="flex-1 font-header-6 text-lg font-bold text-primary">
+                {message}
+              </label>
+            </div>
+          </div>
+          {showCloseIcon && onClose && (
+            <div
+              onClick={onClose}
+              className={clsx(
+                "cursor-pointer rounded-full border-2 p-3 font-semibold transition-colors",
+                getCloseButtonStyle(variant)
+              )}>
+              <XMarkIcon className="h-6 w-6 cursor-pointer" />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/design-system/components/src/message-bar/MessageBar.types.ts b/design-system/components/src/message-bar/MessageBar.types.ts
@@ -0,0 +1,7 @@
+export type MessageBarVariants = "warning" | "error" | "info" | "success";
+export const MessageBarVariants = {
+  WARNING: "warning" as MessageBarVariants,
+  ERROR: "error" as MessageBarVariants,
+  INFO: "info" as MessageBarVariants,
+  SUCCESS: "success" as MessageBarVariants,
+};
diff --git a/design-system/components/src/message-bar/MessageBar.utils.ts b/design-system/components/src/message-bar/MessageBar.utils.ts
@@ -0,0 +1,51 @@
+import { MessageBarVariants } from "./MessageBar.types";
+
+export function getBorderStyle(variant: MessageBarVariants) {
+  return variant === MessageBarVariants.ERROR
+    ? "border-error"
+    : variant === MessageBarVariants.WARNING
+    ? "border-warning"
+    : variant === MessageBarVariants.SUCCESS
+    ? "border-success"
+    : "border-info";
+}
+
+export function getBackgroundStyle(variant: MessageBarVariants) {
+  return variant === MessageBarVariants.ERROR
+    ? "bg-error/60"
+    : variant === MessageBarVariants.WARNING
+    ? "bg-warning/60"
+    : variant === MessageBarVariants.SUCCESS
+    ? "bg-success/60"
+    : "bg-info/60";
+}
+
+export function getTextStyle(variant: MessageBarVariants) {
+  return variant === MessageBarVariants.ERROR
+    ? "text-error font-bold"
+    : variant === MessageBarVariants.WARNING
+    ? "text-warning font-bold"
+    : variant === MessageBarVariants.SUCCESS
+    ? "text-success font-bold"
+    : "text-info font-bold";
+}
+
+export function getDefaultTitle(variant: MessageBarVariants) {
+  return variant === MessageBarVariants.ERROR
+    ? "Error"
+    : variant === MessageBarVariants.WARNING
+    ? "Warning"
+    : variant === MessageBarVariants.SUCCESS
+    ? "Success"
+    : "Attention";
+}
+
+export function getCloseButtonStyle(variant: MessageBarVariants) {
+  return variant === MessageBarVariants.ERROR
+    ? "border-error text-error hover:border-primary hover:text-primary font-extrabold"
+    : variant === MessageBarVariants.WARNING
+    ? "border-warning text-warning hover:border-primary hover:text-primary font-extrabold"
+    : variant === MessageBarVariants.SUCCESS
+    ? "border-success text-success hover:border-primary hover:text-primary font-extrabold"
+    : "border-info text-info hover:border-primary hover:text-primary font-extrabold";
+}
diff --git a/design-system/components/src/message-bar/index.ts b/design-system/components/src/message-bar/index.ts
@@ -0,0 +1,2 @@
+export * from "./MessageBar";
+export * from "./MessageBar.types";