@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/Breadcrumbs.spec.tsx

@@ -0,0 +1,218 @@
+import { render, screen, act } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { axe } from "vitest-axe";
+import { MemoryRouter } from "react-router-dom";
+import { Breadcrumbs } from "./Breadcrumbs";
+//import vector from '../assets/img/vector.svg';
+
+// Mock the ResizeObserver
+const ResizeObserverMock = vi.fn(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+// Stub the global ResizeObserver
+vi.stubGlobal('ResizeObserver', ResizeObserverMock);
+
+describe("Breadcrumbs Component", () => {
+  it("renders the breadcrumbs with the correct route structure", () => {
+    render(
+      <MemoryRouter initialEntries={["/home/about/contact"]}>
+        <Breadcrumbs />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText("Home")).toBeInTheDocument();
+    expect(screen.getByText("About")).toBeInTheDocument();
+    expect(screen.getByText("Contact")).toBeInTheDocument();
+  });
+
+  it("renders the last breadcrumb as plain text", () => {
+    render(
+      <MemoryRouter initialEntries={["/home/about/contact"]}>
+        <Breadcrumbs />
+      </MemoryRouter>
+    );
+
+    const contact = screen.getByText("Contact");
+    expect(contact).not.toHaveAttribute("href");
+    expect(contact).toHaveAttribute("aria-current", "page");
+  });
+
+  it("renders intermediate breadcrumbs as links", () => {
+    render(
+      <MemoryRouter initialEntries={["/home/about/contact"]}>
+        <Breadcrumbs />
+      </MemoryRouter>
+    );
+
+    const home = screen.getByText("Home");
+    const about = screen.getByText("About");
+
+    expect(home).toHaveAttribute("href", "/home");
+    expect(about).toHaveAttribute("href", "/home/about");
+  });
+
+  // if coverage suffers, fix this test
+  // it("uses the provided separator", () => {
+  //   render(
+  //     <MemoryRouter initialEntries={["/home/about/contact"]}>
+  //       <Breadcrumbs separator={vector} />
+  //     </MemoryRouter>
+  //   );
+
+  //   expect(screen.getAllByAltText("vector").length).toBe(2); // Ensure separator is rendered between breadcrumbs
+  // });
+
+  it("applies custom classes to the container and links", () => {
+    render(
+      <MemoryRouter initialEntries={["/home/about/contact"]}>
+        <Breadcrumbs
+          classNameContainer="custom-container"
+          className="custom-link"
+        />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByLabelText("Breadcrumbs")).toHaveClass("custom-container");
+    const links = screen.getAllByRole("link");
+    links.forEach((link) => expect(link).toHaveClass("custom-link"));
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <MemoryRouter initialEntries={["/home/about/contact"]}>
+        <Breadcrumbs />
+      </MemoryRouter>
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("handles routes with hyphens and decodes them", () => {
+    render(
+      <MemoryRouter initialEntries={["/home/about-page/contact-us"]}>
+        <Breadcrumbs />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText("About Page")).toBeInTheDocument();
+    expect(screen.getByText("Contact Us")).toBeInTheDocument();
+  });
+
+  // it("renders no breadcrumbs if the path is root ('/')", () => {
+  //   render(
+  //     <MemoryRouter initialEntries={["/"]}>
+  //       <Breadcrumbs />
+  //     </MemoryRouter>
+  //   );
+
+  //   expect(screen.queryByRole("listitem")).not.toBeInTheDocument();
+  // });
+
+  it("verifies manually specified routes exist", () => {
+    render(
+      <MemoryRouter >
+        <Breadcrumbs routes={[{ name: 'Main', route: '/' }, { name: 'Tools', route: '/tools'  }]}/>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText("Main")).toBeInTheDocument();
+    expect(screen.getByText("Tools")).toBeInTheDocument();
+  });
+});
+
+describe("Breadcrumbs — overflow → ellipsis", () => {
+  beforeEach(() => {
+    // Mock measurements so that scrollWidth > clientWidth → triggers ellipsis
+    Object.defineProperty(HTMLElement.prototype, "clientWidth", {
+      configurable: true,
+      get() {
+        return 100;
+      },
+    });
+    Object.defineProperty(HTMLElement.prototype, "scrollWidth", {
+      configurable: true,
+      get() {
+        return 200;
+      },
+    });
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+      configurable: true,
+      get() {
+        return 100;
+      },
+    });
+
+    // Simple ResizeObserver stub that immediately invokes the callback
+    class MockRO {
+      callback: ResizeObserverCallback;
+      constructor(cb: ResizeObserverCallback) {
+        this.callback = cb;
+      }
+      observe() {
+        // call synchronously so ellipsis state flips immediately
+        this.callback(
+          [
+            {
+              target: document.createElement("div"),
+              contentRect: {} as DOMRectReadOnly,
+            } as unknown as ResizeObserverEntry,
+          ],
+          this
+        );
+      }
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      unobserve() {}
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      disconnect() {}
+    }
+    // @ts-expect-error
+    global.ResizeObserver = MockRO;
+  });
+
+  afterEach(() => {
+    // clean up our globals
+    delete (HTMLElement.prototype as any).clientWidth;
+    delete (HTMLElement.prototype as any).scrollWidth;
+    delete (HTMLElement.prototype as any).offsetWidth;
+    // @ts-ignore
+    delete global.ResizeObserver;
+  });
+
+  it("renders only the final crumb with “...” when overflowed", async () => {
+    // wrap in act so that useEffect and ResizeObserver fire
+    await act(async () => {
+      render(
+        <MemoryRouter initialEntries={["/first/second"]}>
+          <Breadcrumbs />
+        </MemoryRouter>
+      );
+    });
+
+    // “...” placeholder should be present
+    expect(screen.getByText("...")).toBeInTheDocument();
+
+    // final segment (“Second”) should render as plain text with aria-current
+    const lastCrumb = screen.getByText("Second");
+    expect(lastCrumb).toBeInTheDocument();
+    expect(lastCrumb).toHaveAttribute("aria-current", "page");
+
+  });
+
+  it("has no detectable accessibility violations", async () => {
+    let container: HTMLElement;
+    await act(async () => {
+      const rendered = render(
+        <MemoryRouter initialEntries={["/a/b/c"]}>
+          <Breadcrumbs />
+        </MemoryRouter>
+      );
+      container = rendered.container;
+    });
+    const results = await axe(container!);
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/lib/Breadcrumbs.tsx

@@ -0,0 +1,219 @@
+import * as React from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useLocation, Link } from 'react-router-dom';
+import separatorSvg from '../assets/img/separator.svg';
+import home from '../assets/img/home-gray.svg';
+import { useEffect, useRef, useState, useMemo } from 'react';
+
+function prettify(name: string) {
+  return name
+    .replace(/-/g, ' ')
+    .replace(/\b\w/g, c => c.toUpperCase());
+}
+interface VariantType {
+  [key: string]: string;
+}
+
+// variant styling definition, both size and layout (portrait vs landscape)
+const variants: VariantType = {
+  default: 'overflow-x-auto w-full text-base md:text-lg', // image top
+  bold: 'overflow-x-auto font-bold w-full text-base md:text-lg',
+}
+
+export interface route {
+  name: string;
+  route: string;
+}
+
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  classNameContainer?: string;
+  variant?: string;
+  separator?: string; // i.e. >>, or -->, etc.
+  routes?: route[];
+}
+
+export const Breadcrumbs = React.forwardRef<HTMLDivElement, BreadcrumbsProps>(
+  ({ classNameContainer, className, routes, variant = 'default',
+      separator = separatorSvg, ...props }, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const iconRef = useRef<HTMLImageElement>(null);
+    const [ellipsis, setEllipsis] = useState(false);
+    const [currentTime, setCurrentTime] = useState<number>();
+    const [reqContentWidth, setReqContentWidth] = useState<number>(0);  // content width required to display non-ellipsis breadcrumbs
+
+    // Define Routes
+    const { pathname } = useLocation();
+
+    const finalRoutes: route[] = useMemo(() => {
+      // if manualRoutes was passed in, use it
+      if (routes && routes.length > 0) {
+        return routes;
+      }
+
+      const segments = pathname
+        .split('/')
+        .filter(Boolean);
+
+      return segments.map((segment, idx, arr) => ({
+        name: prettify(decodeURIComponent(segment)),
+        route: '/' + arr.slice(0, idx + 1).join('/'),
+      }));
+    }, [routes, pathname]);
+
+
+    // measures containerWidth at page load
+    // should re-measure at home-icon swap
+    useEffect(() => {
+      const fullContainer = containerRef.current;
+      if (fullContainer) {
+        setReqContentWidth(fullContainer.offsetWidth);
+      }
+
+      // build auto-routes if manualRoutes not present
+    }, []);
+
+    const checkOverflow = () => {
+      const container = containerRef.current;
+
+      if ((container && !currentTime) || (container && currentTime && Date.now() > (currentTime + 200))) {
+
+        if (ellipsis) {
+          if (container.clientWidth > reqContentWidth) {
+            // console.log('setting ellipsis false');
+            setEllipsis(false);
+          }
+        } else {
+          if (container.scrollWidth > container.clientWidth) {
+            // console.log('setting ellipsis true');
+            setEllipsis(true);
+          }
+        }
+
+        setCurrentTime(Date.now());
+      }
+    };
+
+    useEffect(() => {
+      // clientWidth = 0 for inline or w/o css, otherwise width of inner element in pixels
+      // scrollWidth = measurement of width of elements content
+      // console.log('breadcrumbs useEffect');
+
+      const container = containerRef.current;
+      if (!container) {
+        // console.log('no container - returning');
+        return;
+      }
+
+      // run once to set initial state
+      checkOverflow();
+
+      // whenever the container itself changes size, re-check
+      const ro = new ResizeObserver(checkOverflow);
+      ro.observe(container);
+      return () => { ro.disconnect(); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentTime, finalRoutes]);  // re‑run when the crumbs change
+
+    return (
+      <nav
+        className={twMerge(variants[variant], classNameContainer)}
+        {...props}
+        ref={ref}
+        aria-label="Breadcrumbs"
+      >
+        <div
+          ref={containerRef}
+          className="flex list-none flex-nowrap text-clip overflow-hidden text-nowrap w-full"
+          >
+          {/* First item / home page link */}
+          <span className="breadcrumb-item inline-flex items-center shrink-0">
+            <Link
+              to="/"
+              className={twMerge(
+              "text-[#747476] hover:text-[#0000ff] md:hover:underline capitalize me-2 hidden md:inline-flex",
+              className
+            )}>Homepage
+            </Link>
+            <Link
+              to="/"
+              className={twMerge(
+              "capitalize me-2 inline-flex md:hidden",
+              className
+            )}><img src={home} ref={iconRef} alt='home icon'></img>
+            </Link>
+            {finalRoutes.length > 0 ? <span className={twMerge("me-2", className)}><img src={separator} alt='vector'></img></span> : ''}
+          </span>
+
+          <span
+            className=''
+            // ref={ellipsisRef}
+            // ellipsisRef is used to measure size of container w/ content - may have to move to a different span
+            >
+          {finalRoutes.map((part, index) => {
+            // Reconstruct the path up to the current segment
+            // const path = '/' + routes.slice(0, index + 1).join('/');
+
+            if (ellipsis) {
+              return (
+                <span key={index} className='inline-flex items-center shrink-0 text-nowrap'>
+                {index === finalRoutes.length - 1 ? (
+                  <>
+                  <span className='text-nowrap me-3'>...</span>
+                  <span className={twMerge("me-3", className)}><img src={separator} alt='vector'></img></span>
+                  <span
+                      className="text-black font-bold capitalize text-nowrap"
+                      aria-current="page"
+                      >
+                      {decodeURIComponent(part.name).replace(/-/g, ' ')}
+                  </span>
+                  </>
+                ) : (
+                  ''
+                )}
+                </span>
+              );
+            } else {
+
+            return (
+              <span
+                key={index}
+                className="breadcrumb-item inline-flex items-center shrink-0"
+                >
+
+                {index === finalRoutes.length - 1 ? (
+                  // Render the current page as plain text (last item in list)
+                  <span
+                    className="text-black font-bold capitalize"
+                    aria-current="page"
+                    >
+                    {decodeURIComponent(part.name).replace(/-/g, ' ')}
+                  </span>
+                ) : (
+                  // Render intermediate items as links
+                  <Link
+                    to={part.route}
+                    className={twMerge(
+                      "text-[#747476] hover:text-[#0000ff] md:hover:underline capitalize me-3",
+                      className
+                    )}
+                  >
+                    {decodeURIComponent(part.name).replace(/-/g, ' ')}
+                  </Link>
+                )}
+                {/* Separator for intermediate items */}
+                {index < finalRoutes.length - 1 && (
+                  <span className={twMerge("me-3", className)}><img src={separator} alt='vector'></img></span>
+                )}
+              </span>
+            );
+
+          }
+
+          })}
+          </span>
+        </div>
+      </nav>
+    );
+  }
+);

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

@@ -0,0 +1,220 @@
+import { Meta, StoryContext } from '@storybook/react';
+import { Button, ButtonProps } from './Button';
+import { useState } from 'react';
+import { within, expect, waitFor } from 'storybook/test';
+
+// Meta object - defines basic storybook options for this story
+export default {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'filled', 'outline', 'transparent']
+      },
+    },
+  args: {
+    disabled: false,    // set default argument values
+    // 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<ButtonProps>;
+
+// Define "Default" story
+export const Default = {
+  args: {
+    children: 'Button',
+    variant: 'default',
+    size: 'default',
+  }
+};
+
+export const LeftIcon = {
+  args: {
+    label: 'Button with left icon',
+    // Pass an icon element with a test ID so we can find it.
+    icon: <svg data-testid="left-icon" />,
+    iconPosition: 'left',
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button', { name: /button with left icon/i });
+
+    // Line 87–89: There should be a span with class "icon-left"
+    const leftIconSpan = button.querySelector('.icon-left');
+    expect(leftIconSpan).toBeInTheDocument();
+
+    // Verify the icon element is rendered inside that span.
+    const iconElement = leftIconSpan?.querySelector('[data-testid="left-icon"]');
+    expect(iconElement).toBeInTheDocument();
+
+    // Also, because iconPosition is "left", the text is rendered in a span with class "button-text".
+    const textSpan = button.querySelector('.button-text');
+    expect(textSpan).toHaveTextContent('Button with left icon');
+  },
+};
+
+export const IconOnly = {
+  args: {
+    label: 'Icon Only', // This label will be ignored in rendering because an icon is provided.
+    icon: <svg data-testid="icon-only" />,
+    iconPosition: 'iconOnly',
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+
+    // The conditional (lines 91–98) should render only the icon.
+    // There should be no span with class "button-text"
+    const textSpan = button.querySelector('.button-text');
+    expect(textSpan).toBeNull();
+
+    // Instead, the icon is wrapped in a span with class "size-6".
+    const iconSpan = button.querySelector('.size-6');
+    expect(iconSpan).toBeInTheDocument();
+    const iconElement = iconSpan?.querySelector('[data-testid="icon-only"]');
+    expect(iconElement).toBeInTheDocument();
+  },
+};
+
+export const RightIcon = {
+  args: {
+    label: 'Button with right icon',
+    icon: <svg data-testid="right-icon" />,
+    iconPosition: 'right',
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button', { name: /button with right icon/i });
+
+    // The text should be rendered (via the else branch of the conditional)...
+    const textSpan = button.querySelector('.button-text');
+    expect(textSpan).toHaveTextContent('Button with right icon');
+
+    // ...and line 101 should cause a span with class "icon-right" to render.
+    const rightIconSpan = button.querySelector('.icon-right');
+    expect(rightIconSpan).toBeInTheDocument();
+
+    // Confirm that the icon element is inside the right icon span.
+    const iconElement = rightIconSpan?.querySelector('[data-testid="right-icon"]');
+    expect(iconElement).toBeInTheDocument();
+  },
+};
+
+// Define "Blank" story
+export const Filled = {
+  args: {
+    children: 'Button',
+    variant: 'filled',
+    size: 'default',
+  }
+};
+
+// Define "Blank" story
+export const Outline = {
+  args: {
+    children: 'Button',
+    variant: 'outline',
+    size: 'default',
+  }
+};
+
+// Define "Blank" story
+export const Transparent = {
+  args: {
+    children: 'Button',
+    variant: 'transparent',
+    size: 'default',
+  }
+};
+
+export const SelectedDefault = {
+  args: {
+    label: 'Selected Default',
+    selected: true,
+    variant: 'default',
+    // Do not pass classNameSelected so that line 69 executes
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    // Get the button by its role and accessible name.
+    const button = canvas.getByRole('button', { name: /selected default/i });
+
+    // For the "default" variant, the selected state (when no custom classNameSelected are provided)
+    // appends "bg-gray-500 text-white" (see variants.default.selected).
+    await expect(button.className).toContain('bg-gray-500');
+    await expect(button.className).toContain('text-white');
+  },
+};
+
+export const SelectedCustom = {
+  args: {
+    label: 'Selected Custom',
+    selected: true,
+    variant: 'default',
+    classNameSelected: 'bg-custom text-custom', // This custom value should be merged on line 71
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button', { name: /selected custom/i });
+
+    // Check that the custom selected classes are present in the className.
+    await expect(button.className).toContain('bg-custom');
+    await expect(button.className).toContain('text-custom');
+  },
+};
+
+// Define "Blank" story
+export const OutlineWithCustomClass = {
+  args: {
+    children: 'Button',
+    variant: 'outline',
+    size: 'default',
+    className: 'text-purple-600 hover:text-purple-700',
+  }
+};
+
+// Define "DHA Disabled" story
+export const DHADisabled = {
+  args: {
+    disabled: true,
+    label: 'Disabled Button',
+  }
+};
+
+
+// Define "Alternate Classes" story
+export const AlternateClasses = {
+  args: {
+    children: 'Custom Classes',
+    onClick: () => console.log('Clicked!'),
+    className: 'border-8 border-black text-white bg-orange-500',
+  }
+};
+
+// Define a story using an alternate method that contains state values
+export const ButtonWithClickHandler = ({ disabled, ...rest }: ButtonProps) => {
+  // const [clicked, setClicked] = useState(false);
+  // const handleClick = () => setClicked(!clicked);
+  const [variant, setVariant] = useState<string>('filled');
+
+  const handleClick = (() => {
+    if (variant === 'filled')
+      setVariant('outline');
+    else
+      setVariant('filled');
+  })
+
+  return (
+    <Button
+      onClick={handleClick}
+      variant={variant}
+      disabled={disabled}
+    >
+      Click Me! I am {variant}.
+    </Button>
+  );
+}