@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/SideBarNav.spec.tsx

@@ -0,0 +1,178 @@
+// SideBarNav.test.tsx
+import { fireEvent, render, screen } from "@testing-library/react";
+import { SideBarNav, SideBarNavProps } from "./SideBarNav";
+import { MemoryRouter } from "react-router-dom";
+import { axe } from "vitest-axe";
+
+describe("SideBarNav Component", () => {
+  const defaultProps: SideBarNavProps = {
+    appName: "Test App",
+    version: "v1.0",
+    image: "test-image.png",
+    menuItems: [
+      { target: "/home", children: "Home" },
+      { target: "/about", children: "About" },
+    ],
+  };
+
+  it("renders the component with image, app name, version, and menu items", () => {
+    render(
+      <MemoryRouter>
+        <SideBarNav {...defaultProps} />
+      </MemoryRouter>
+    );
+
+    // Check the image element
+    const image = screen.getByAltText("application icon");
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute("src", "test-image.png");
+
+    // Check the app name
+    expect(screen.getByText("Test App")).toBeInTheDocument();
+
+    // Check the menu items rendered as NavLinks
+    const homeLink = screen.getByRole("link", { name: "Home" });
+    expect(homeLink).toBeInTheDocument();
+    expect(homeLink).toHaveAttribute("href", "/home");
+
+    const aboutLink = screen.getByRole("link", { name: "About" });
+    expect(aboutLink).toBeInTheDocument();
+    expect(aboutLink).toHaveAttribute("href", "/about");
+
+    // Check the version text
+    expect(screen.getByText("Version v1.0")).toBeInTheDocument();
+  });
+
+  it("merges custom class names with default classes", () => {
+    const props: SideBarNavProps = {
+      appName: "Test App",
+      version: "v1.0",
+      menuItems: [],
+      className: "custom-sidebar-class",
+      image: "test-image.png",
+    };
+
+    const { container } = render(
+      <MemoryRouter>
+        <SideBarNav {...props} />
+      </MemoryRouter>
+    );
+
+    // The outer div should contain both the default and custom classes.
+    const containerDiv = container.firstElementChild;
+    expect(containerDiv).toHaveClass("custom-sidebar-class");
+  });
+
+  it("renders an empty menu list when no menu items are provided", () => {
+    const props: SideBarNavProps = {
+      appName: "Test App",
+      version: "v1.0",
+      menuItems: [],
+      image: "test-image.png",
+    };
+
+    render(
+      <MemoryRouter>
+        <SideBarNav {...props} />
+      </MemoryRouter>
+    );
+
+    // Since menuItems is empty, no NavLink should be rendered.
+    const links = screen.queryAllByRole("link");
+    expect(links.length).toBe(0);
+  });
+
+  it("does not render a NavLink if a menu item lacks a target", () => {
+    const props: SideBarNavProps = {
+      appName: "Test App",
+      version: "v1.0",
+      menuItems: [
+        // Intentionally leaving out the 'target' property
+        { children: "No Link" } as any,
+      ],
+      image: "test-image.png",
+    };
+
+    render(
+      <MemoryRouter>
+        <SideBarNav {...props} />
+      </MemoryRouter>
+    );
+
+    // There should be no link since the condition checks for item.target.
+    const link = screen.queryByRole("link");
+    expect(link).toBeNull();
+    // The text "No Link" should not be rendered since it’s inside the conditional.
+    expect(screen.queryByText("No Link")).not.toBeInTheDocument();
+  });
+
+  it("closes the menu when clicking outside if clickOutsideCloses is true", () => {
+    const props: SideBarNavProps = {
+      appName: "Test App",
+      version: "v1.0",
+      menu: true,
+      clickOutsideCloses: true,
+      menuItems: [{ target: "/home", children: "Home" }],
+      image: "test-image.png",
+    };
+
+    const { container } = render(
+      <MemoryRouter>
+        <SideBarNav {...props} />
+      </MemoryRouter>
+    );
+
+    // Open the menu by clicking the hamburger button
+    const button = screen.getByTestId("hamburgerMenu");
+    fireEvent.click(button);
+
+    // Simulate clicking outside the sidebar (on document body)
+    fireEvent.mouseDown(document.body);
+  });
+
+  it("toggles the sidebar when the hamburger button is clicked, displays sidebar on the right", () => {
+    const props: SideBarNavProps = {
+      appName: "Test App",
+      version: "v1.0",
+      menu: true,
+      menuItems: [{ target: "/home", children: "Home" }],
+      image: "test-image.png",
+    };
+
+    // rendering this with the 'right' flag satisfies full coverage (no specific lines specified as uncovered)
+    // however, % Funcs still scores a 75 -- something to look into
+    const { container } = render(
+      <MemoryRouter>
+        <SideBarNav right {...props} />
+      </MemoryRouter>
+    );
+
+    const button = screen.getByTestId("hamburgerMenu");
+
+    // Click the button to toggle the menu open
+    fireEvent.click(button);
+
+    // Click again to toggle it closed
+    fireEvent.click(button);
+  });
+});
+
+describe("SideBarNav Accessibility Tests", () => {
+  it("has no accessibility violations", async () => {
+    const props: SideBarNavProps = {
+      appName: "Accessible App",
+      version: "v2.0",
+      image: "accessible-image.png",
+      menuItems: [{ target: "/dashboard", children: "Dashboard" }],
+    };
+
+    const { container } = render(
+      <MemoryRouter>
+        <SideBarNav {...props} />
+      </MemoryRouter>
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/lib/SideBarNav.tsx

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { forwardRef, useState, useEffect, useRef } from 'react';
+import { NavLink } from 'react-router-dom';
+import { List, ListItemProps, ListItem } from './List';
+import { twMerge } from 'tailwind-merge';
+import backArrowRight from '../assets/img/backArrowRight.svg';
+
+export interface SideBarNavProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  image: string;
+  classNameImage?: string;
+  classNameImageContainer?: string;
+  clickOutsideCloses?: boolean
+  menu?: boolean;   // true - use integrated hamburger menu, false - react to customer event
+  classNameMenu?: string;
+  classNameMenuContainer?: string;
+  classNameMenuItem?: string;
+  version: string;
+  appName: string;
+  menuItems: ListItemProps[];
+  right?: boolean;
+}
+
+const defaultItemClass = 'pb-4';
+
+export const SideBarNav = forwardRef<HTMLDivElement, SideBarNavProps>(
+  ({ className, appName, image, classNameImage = '', clickOutsideCloses,
+    classNameImageContainer = '', menu = false, classNameMenu = '',
+    classNameMenuItem = '',
+    classNameMenuContainer = '', version, menuItems, right=false,
+    children, ...props }, ref) => {
+      const sidebarRef = useRef<HTMLDivElement>(null);
+
+    const [showMenu, setShowMenu] = useState<boolean>(false);
+    const [itemClass, setItemClass] = useState<string>(defaultItemClass);
+
+    // build css class list for individual menu items (list items)
+    useEffect(() => {
+      if (right)
+        setItemClass(twMerge(defaultItemClass + ' text-right pe-2', classNameMenuItem));
+      else
+        setItemClass(twMerge(defaultItemClass, classNameMenuItem));
+    }, [right, itemClass, classNameMenuItem]);
+
+    useEffect(() => {
+      if (clickOutsideCloses) {
+        const handleClickOutside = (event: MouseEvent) => {
+          if (sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) {
+            setShowMenu(false);
+          }
+        }
+
+        // attach event listener
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+          // cleanup listener on unmount
+          document.removeEventListener('mousedown', handleClickOutside);
+        }
+      }
+
+    }, [setShowMenu]);
+
+    // console.log('menu: ', menu);
+    // console.log('showMenu: ', showMenu);
+
+    return (
+      // eslint-disable-next-line react/jsx-no-useless-fragment
+      <>
+      {/* Hamburger Menu - display? */}
+      { menu &&
+          <button aria-label='navigation' data-testid="hamburgerMenu" className={twMerge('size-8 mb-4', classNameMenuContainer)} onClick={() => setShowMenu(!showMenu)}>
+            <Menu classes={twMerge('fill-slate-500 hover:fill-black size-8', classNameMenu)} />
+          </button>
+      }
+
+      {/* SideBarNav - display? */}
+      <div ref={sidebarRef}
+      className={twMerge("relative w-56 md:w-[328px] lg:w-[432px] h-screen flex flex-col px-4 pb-4 pt-10 bg-white overflow-y-auto",
+          // menu is used but hidden off screen
+          menu && 'fixed z-20 right-0 top-0 translate-x-full transition-transform duration-300',
+          // menu used and displayed
+          menu && showMenu && 'translate-x-0',
+          className
+      )}>
+        <button className={twMerge('-mt-8 w-full flex justify-end')} onClick={() => setShowMenu(!showMenu)}>
+          <img className={twMerge('fill-slate-500 hover:fill-black')} src={backArrowRight} alt='back arrow' />
+        </button>
+        <p className='w-full flex justify-end pr-0.5 -mb-8'>Back</p>
+
+        {/* Image */}
+
+        {/* Logo */}
+        <div className={twMerge("w-16 h-16 mx-auto", classNameImageContainer)}>
+          <img src={image} className={twMerge('border border-[#bbbabc] w-16 h-16 bg-[#eeeeef] ring-1', classNameImage)} alt="application icon"  />
+        </div>
+
+        <div className="text-center text-xl mt-2">{appName}</div>
+
+        {/* Separator */}
+        <div className="[204px] mt-3 h-[2px] border-[0.5px] border-[#D9D9D9] bg-[#D9D9D9]"></div>
+
+        {/* Menu List */}
+        {/* <div className="mt-6 border-2 border-red-500"> */}
+          <List className="pl-4 lg:pl-6 mt-6">
+          {menuItems.map((item, index) => (
+            <ListItem
+              key={index}
+              className={itemClass}
+            >
+              {item.target && (
+                <NavLink to={item.target}>{item.children}</NavLink>
+              )}
+            </ListItem>
+        ))}
+          </List>
+
+        {/* Version # - parent div must be 'relative' */}
+        <div className='align-bottom mt-auto text-right right-2 bottom-1'>Version {version}</div>
+
+      </div>
+
+      </>
+    );
+  }
+);
+
+
+export const Menu = ({ classes='fill-green-600'}, ) => (
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" className={classes} >
+      <path d="M0 0h24v24H0z" fill="none"/>
+      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+  </svg>
+);
+

package/src/lib/Skeleton--Skeleton.stories.tsx

@@ -0,0 +1,77 @@
+import { Meta } from '@storybook/react';
+import { Skeleton, SkeletonProps, SkelProps, SkelCircle, SkelLine, SkelRow, SkelSection } from './Skeleton';
+
+// Meta object - defines basic storybook options for this story
+export default {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default','larger']
+      },
+    },
+  args: {
+    disabled: false,    // set default argument values
+    children:
+    <Skeleton>
+      <SkelCircle inline /><SkelLine inline />
+      <SkelLine />
+      <SkelSection />
+      <SkelCircle />
+      <SkelRow />
+      <SkelLine />
+    </Skeleton>
+    // label: 'Button', // set default argument values
+  },
+  parameters: {
+    layout: 'centered', // options are 'centered', 'fullscreen', and 'padded' (default value)
+    backgrounds: { default: 'dark' }, // options are light, medium, or dark
+  },
+} as Meta<SkeletonProps>;
+
+// Define "Default" story
+export const Default = {
+  args: {
+
+  }
+};
+
+export const AlternateBaseColor = {
+  args: {
+    children:
+    <Skeleton>
+      <SkelCircle className='bg-blue-500/50' inline /><SkelLine className='bg-blue-500/50' inline />
+      <SkelLine className='bg-blue-500/50' />
+      <SkelSection className='bg-blue-500/50' />
+    </Skeleton>
+  }
+};
+
+/*
+  Skeleton, SkeletonProps, SkelProps, SkelCircle, SkelLine, SkelRow, SkelSection
+*/
+
+// export const ImageRight = {
+//   args: {
+//     variant: 'imageRight',
+//   }
+// };
+
+// Define "DHA Med Card" story that extends "Default"
+// export const DHAMedCard = {
+//   args: {
+//     children: 'DHA Med Card',
+//     variant: 'MedCard',
+//   }
+// };
+
+// Define "DHA Disabled" story
+// export const DHADisabled = {
+//   args: {
+//     // children: 'Disabled Button',
+//     disabled: true,
+//     label: 'Disabled Button',
+//   }
+// };
+

package/src/lib/Skeleton.module.css

@@ -0,0 +1,16 @@
+.skelContainer {
+    border: 3px solid green;
+    background-color: blue;
+    width: 100%;
+    color: red;
+    /* background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
+    background-size: 300%;
+    background-position-x: 100%;
+    animation: shimmer 1s infinite linear; */
+}
+
+@keyframes shimmer {
+    to {
+        background-position: 0%;
+    }
+}

package/src/lib/Skeleton.spec.tsx

@@ -0,0 +1,83 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { axe } from "vitest-axe";
+import { Skeleton, SkelCircle, SkelLine, SkelSection, SkelRow } from "./Skeleton";
+
+describe("Skeleton Component", () => {
+  it("renders the Skeleton component with default props", () => {
+    render(<Skeleton />);
+    const skeleton = screen.getByLabelText("Skeleton Component");
+    expect(skeleton).toBeInTheDocument();
+    expect(skeleton).toHaveClass("flex flex-row flex-wrap animate-pulse h-48 w-56 pt-2");
+  });
+
+  it("renders the Skeleton component with custom className", () => {
+    render(<Skeleton className="custom-class" />);
+    const skeleton = screen.getByLabelText("Skeleton Component");
+    expect(skeleton).toHaveClass("custom-class");
+  });
+
+  it("renders the Skeleton component with a custom variant", () => {
+    const classNames =  "h-32 w-32";
+    render(<Skeleton className={classNames} />);
+    const skeleton = screen.getByLabelText("Skeleton Component");
+    expect(skeleton).toHaveClass("h-32 w-32");
+  });
+
+  it("passes accessibility checks", async () => {
+    const { container } = render(<Skeleton />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
+
+describe("Skeleton Subcomponents", () => {
+  it("renders SkelCircle in inline mode", () => {
+    render(<SkelCircle inline />);
+    const skelCircle = screen.getByRole("presentation", { hidden: true });
+    expect(skelCircle).toHaveClass("rounded-full bg-slate-300 h-6 w-6 inline-block mx-2 me-1 my-1");
+  });
+
+  it("renders SkelCircle in non-inline mode", () => {
+    render(<SkelCircle />);
+    const skelCircle = screen.getByRole("presentation", { hidden: true });
+    expect(skelCircle).toHaveClass("rounded-full bg-slate-300 h-6 w-6 mx-2 my-1 me-0");
+  });
+
+  it("renders SkelLine in inline mode", () => {
+    render(<SkelLine inline />);
+    const skelLine = screen.getByRole("presentation", { hidden: true });
+    expect(skelLine).toHaveClass("rounded-lg bg-slate-300 h-6 inline-block mx-2 my-1 grow");
+  });
+
+  it("renders SkelLine in non-inline mode", () => {
+    render(<SkelLine />);
+    const skelLine = screen.getByRole("presentation", { hidden: true });
+    expect(skelLine).toHaveClass("rounded-lg bg-slate-300 h-6 mx-2 my-1 grow");
+  });
+
+  it("renders SkelSection with default props", () => {
+    render(<SkelSection />);
+    const skelSection = screen.getByRole("presentation", { hidden: true });
+    expect(skelSection).toHaveClass("rounded-lg bg-slate-300 grow h-24 my-1 mx-2");
+  });
+
+  it("renders SkelRow with default props", () => {
+    render(<SkelRow />);
+    const skelRow = screen.getByRole("presentation", { hidden: true });
+    expect(skelRow).toHaveClass("basis-full h-0");
+  });
+
+  it("passes accessibility checks for all subcomponents", async () => {
+    const { container } = render(
+      <div>
+        <SkelCircle />
+        <SkelLine />
+        <SkelSection />
+        <SkelRow />
+      </div>
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/lib/Skeleton.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { FC } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface VariantType {
+  [key: string]: string;
+}
+
+// variant styling definition, both size and layout (portrait vs landscape)
+const variants: VariantType = {
+  default: ' h-48 w-56 pt-2',
+  custom: ' h-48 w-56 pt-2',
+}
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: string;     //
+  className?: string;   // container classes
+}
+
+export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, variant = 'default', children, ...props }, ref) => {
+
+    return (
+      <div className={
+      twMerge('flex flex-row flex-wrap animate-pulse',
+        variants[variant], className)}
+        aria-label='Skeleton Component'
+        role='status'
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+Skeleton.displayName = 'Card';
+
+export interface SkelProps {
+  className?: string;
+  inline?: boolean; // inline (i.e. span) or not (i.e. div?)
+}
+
+// SkelCircle
+export const SkelCircle: FC<SkelProps> = ({className = '', inline = false}) => {
+  return inline ? (
+    <div
+      role="presentation"
+      className={twMerge( 
+        "rounded-full bg-slate-300 h-6 w-6 inline-block mx-2 me-1 my-1", className
+      )}
+    />
+  ) : (
+    <>
+    <div className="basis-full h-0"></div>
+    <div
+      role="presentation"
+      className={twMerge(
+        "rounded-full bg-slate-300 h-6 w-6 mx-2 my-1 me-0", className
+      )}
+    />
+    <div className="basis-full h-0"></div>
+    </>
+  );
+};
+
+// SkeletonLine
+export const SkelLine: FC<SkelProps> = ({className='', inline = false}) => {
+  return inline ? (
+    <div
+      role="presentation"
+      className={twMerge(
+        "rounded-lg bg-slate-300 h-6 inline-block mx-2 my-1 grow", className
+      )}
+    ></div>
+  ) : (
+    <>
+    <div className="basis-full h-0"></div>
+    <div
+      role="presentation"
+      className={twMerge(
+        "rounded-lg bg-slate-300 h-6 mx-2 my-1 grow", className
+      )}
+    ></div>
+    <div className="basis-full h-0"></div>
+    </>
+  );
+};
+
+// SkelSection
+export const SkelSection: FC<SkelProps> = ({className=''}) => {
+  return (
+    <div role="presentation" className={twMerge("rounded-lg bg-slate-300 grow h-24 my-1 mx-2", className)} />
+  );
+};
+
+
+// SkelRow
+export const SkelRow: FC<SkelProps> = ({className = ''}) => {
+  return (
+    <div role="presentation" className="basis-full h-0"></div>
+  );
+};

package/src/lib/SkipLink.spec.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { axe } from "vitest-axe";
+import { SkipLink } from "./SkipLink";
+
+describe("SkipLink Component", () => {
+  it("renders the child element and applies the default className", () => {
+    const child = <a href="#main">Skip Link</a>;
+    render(<SkipLink>{child}</SkipLink>);
+    const linkElement = screen.getByRole("link", { name: /skip link/i });
+    expect(linkElement).toBeInTheDocument();
+    // Default className should be applied to the child element
+    expect(linkElement).toHaveClass("skip-link");
+  });
+
+  it("handles click events by focusing the target container and cleaning up tabindex", () => {
+    // Create a container element that matches the skipTo query
+    const container = document.createElement("main");
+    container.id = "main";
+    document.body.appendChild(container);
+    // Spy on the container's focus method
+    const focusSpy = vi.spyOn(container, "focus");
+
+    // Use fake timers to test the timeout behavior
+    vi.useFakeTimers();
+    const child = <a href="#main">Skip to main</a>;
+    // Pass a skipTo prop that matches our container
+    render(<SkipLink skipTo="#main">{child}</SkipLink>);
+    const linkElement = screen.getByRole("link", { name: /skip to main/i });
+    
+    // Simulate click on the skip link
+    fireEvent.click(linkElement);
+
+    // After clicking, the container should have tabindex set to -1 and focus called
+    expect(container.tabIndex).toBe(-1);
+    expect(focusSpy).toHaveBeenCalled();
+
+    // Fast-forward time to trigger removal of tabindex (after 1000ms)
+    vi.advanceTimersByTime(1000);
+    expect(container.getAttribute("tabindex")).toBeNull();
+
+    // Clean up
+    vi.useRealTimers();
+    document.body.removeChild(container);
+  });
+
+  // What is the purpose of the timer in SkipLink?
+//   it("cleans up the timer on unmount", () => {
+//     // Spy on clearTimeout to ensure it is called during cleanup
+//     const clearTimeoutSpy = vi.spyOn(global, "clearTimeout");
+//     vi.useFakeTimers();
+
+//     const child = <a href="#main">Skip Link</a>;
+//     const { unmount } = render(<SkipLink skipTo="#main">{child}</SkipLink>);
+//     const linkElement = screen.getByRole("link", { name: /skip link/i });
+
+//     // Fire the click to create a timer
+//     fireEvent.click(linkElement);
+
+//     // Unmount the component which should trigger the cleanup useEffect
+//     unmount();
+
+//     expect(clearTimeoutSpy).toHaveBeenCalled();
+
+//     vi.useRealTimers();
+//     clearTimeoutSpy.mockRestore();
+//   });
+
+  it("has no accessibility violations", async () => {
+    const child = <a href="#main">Skip Link</a>;
+    const { container } = render(<SkipLink skipTo="#main">{child}</SkipLink>);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});