@dhasdk/simple-ui 1.0.8 → 1.0.10

package/src/lib/Breadcrumbs.spec.tsx

@@ -1,218 +0,0 @@
-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

@@ -1,219 +0,0 @@
-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

@@ -1,220 +0,0 @@
-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>
-  );
-}