@dhasdk/simple-ui 1.0.8 → 1.0.10

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

@@ -1,107 +0,0 @@
-import { Meta } from '@storybook/react';
-import { CheckBox, CheckBoxGroup, CheckBoxProps } from './CheckBox';
-
-// import imagePath from 'src/assets/img/pill.svg';
-const imagePath = 'src/assets/img/hospital.jpg';
-// imagePath: 'src/assets/img/heartbeat.svg',
-
-// Meta object - defines basic storybook options for this story
-export default {
-  title: 'Components/CheckBox',
-  component: CheckBox,
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['','']
-      },
-    },
-  args: {
-    // label: 'Button', // set default argument values
-  },
-  parameters: {
-    layout: 'centered', // options are 'centered', 'fullscreen', and 'padded' (default value)
-    backgrounds: { default: 'light' }, // options are light, medium, or dark
-  },
-} as Meta<CheckBoxProps>;
-
-// Define "Default" story
-export const Default = {
-  args: {
-    ariaLabel: 'test label',
-    alt: 'image alt',
-    children: 'CheckBox 1'
-  }
-};
-
-export const Group = () => {
-  // const [searchResults, setSearchResults] = useState<DataSearchResults>();
-  
-  return (
-    <>
-    <div className='mb-4'>Note: 'level' prop does not take effect w/o use of the CheckBoxContainer component.</div>
-    <CheckBox level={0}>Group 1</CheckBox>
-    <CheckBox level={1}>g1, item 1</CheckBox>
-    <CheckBox level={1}>g1, item 2</CheckBox>
-    <CheckBox level={0}>Group 2</CheckBox>
-    <CheckBox level={1}>g2, item 1</CheckBox>
-    <CheckBox level={1}>g2, item 2</CheckBox>
-    <CheckBox level={2}>g2, item 2, item 1</CheckBox>
-    </>
-  );
-};
-
-
-export const GroupContainer = () => {
-  // const [searchResults, setSearchResults] = useState<DataSearchResults>();
-  
-  return (
-    <CheckBoxGroup>
-      <CheckBox level={0}>Group 1</CheckBox>
-      <CheckBox level={1}>g1, item 1</CheckBox>
-      <CheckBox level={1}>g1, item 2</CheckBox>
-      <CheckBox level={0}>Group 2</CheckBox>
-      <CheckBox level={1}>g2, item 1</CheckBox>
-      <CheckBox level={1}>g2, item 2</CheckBox>
-      <CheckBox level={2}>g2, item 2, item 1</CheckBox>
-    </CheckBoxGroup>
-  );
-};
-
-
-export const GroupContainer2 = () => {
-  // const [searchResults, setSearchResults] = useState<DataSearchResults>();
-  
-  return (
-    <CheckBoxGroup>
-      <CheckBox level={0}>Group 1</CheckBox>
-      <CheckBox level={1}>g1, item 1</CheckBox>
-      <CheckBox level={1}>g1, item 2</CheckBox>
-      <CheckBox level={2}>g1, item 2, item 1</CheckBox>
-      <CheckBox level={2}>g1, item 2, item 2</CheckBox>
-      <CheckBox level={0}>Group 2</CheckBox>
-      <CheckBox level={1}>g2, item 1</CheckBox>
-      <CheckBox level={1}>g2, item 2</CheckBox>
-      <CheckBox level={2}>g2, item 2, item 1</CheckBox>
-    </CheckBoxGroup>
-  );
-};
-
-
-export const GroupContainer3 = () => {
-  // const [searchResults, setSearchResults] = useState<DataSearchResults>();
-  
-  return (
-    <CheckBoxGroup>
-      <CheckBox level={0}>Group 1</CheckBox>
-      <CheckBox level={1}>g1, item 1</CheckBox>
-      <CheckBox level={1}>g1, item 2</CheckBox>
-      <CheckBox level={2}>g1, item 2, item 1</CheckBox>
-      <CheckBox level={2}>g1, item 2, item 2</CheckBox>
-      <CheckBox level={1}>g1, item 3</CheckBox>
-      <CheckBox level={0}>Group 2</CheckBox>
-      <CheckBox level={1}>g2, item 1</CheckBox>
-      <CheckBox level={1}>g2, item 2</CheckBox>
-      <CheckBox level={2}>g2, item 2, item 1</CheckBox>
-    </CheckBoxGroup>
-  );
-};

package/src/lib/CheckBox.spec.tsx

@@ -1,412 +0,0 @@
-import React, { createRef } from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, it, expect, vi } from "vitest";
-import { axe } from "vitest-axe";
-
-import { CheckBox, CheckBoxGroup } from "./CheckBox";
-
-// add jest-dom / vitest-dom matchers
-// expect.extend(toHaveNoViolations);
-
-describe("CheckBox component", () => {
-  it("should render unchecked by default and have no accessibility violations", async () => {
-    render(<main><CheckBox ariaLabel="accept terms">Accept terms</CheckBox></main>);
-
-    // find checkbox input
-    const input = screen.getByRole("checkbox", { name: "accept terms" });
-    expect(input).toBeInTheDocument();
-    expect(input).not.toBeChecked();
-
-    // icon img alt should reflect 'unchecked'
-    const img = screen.getByAltText("unchecked") as HTMLImageElement;
-    expect(img).toBeInTheDocument();
-    expect(img.src).toContain("check_box_empty.svg");
-
-    // axe accessibility scan
-    const results = await axe(document.body);
-    expect(results).toHaveNoViolations();
-  });
-
-  it("toggles to checked on click and calls setStatusUpdate", async () => {
-    const mockSet = vi.fn();
-    render(
-      <CheckBox
-        ariaLabel="my box"
-        setStatusUpdate={mockSet}
-        index={0}
-      >
-        Label
-      </CheckBox>
-    );
-
-    const input = screen.getByRole("checkbox", { name: "my box" });
-    // click to check
-    await userEvent.click(input);
-    expect(input).toBeChecked();
-
-    // after toggle, the internal effect should call setStatusUpdate('checked', 0)
-    expect(mockSet).toHaveBeenCalledWith("checked", 0);
-
-    // the icon src should update to checked icon
-    const img = screen.getByAltText("checked") as HTMLImageElement;
-    expect(img.src).toContain("check_box.svg");
-  });
-
-
-  it("uses marker icon when checked with marker prop", async () => {
-    render(
-      <CheckBox
-        ariaLabel="marker box"
-        marker={true}
-        setStatusUpdate={vi.fn()}
-        index={0}
-      >
-        Marker
-      </CheckBox>
-    );
-
-    const input = screen.getByRole("checkbox", { name: "marker box" }) as HTMLInputElement;
-    // check it
-    await userEvent.click(input);
-    expect(input).toBeChecked();
-
-    // marker (unchecked) initially shows regular empty – marker only kicks in on checked
-    // now that it's checked, we expect the marker icon
-    const img = screen.getByAltText("checked") as HTMLImageElement;
-    expect(img.src).toContain("marker_check_by_default.svg");
-  });
-
-  it("uses filled marker icon when checked with marker and fill props", async () => {
-    render(
-      <CheckBox
-        ariaLabel="filled marker box"
-        marker={true}
-        fill={true}
-        setStatusUpdate={vi.fn()}
-        index={0}
-      >
-        Filled Marker
-      </CheckBox>
-    );
-
-    const input = screen.getByRole("checkbox", { name: "filled marker box" }) as HTMLInputElement;
-    // check it
-    await userEvent.click(input);
-    expect(input).toBeChecked();
-
-    // with fill and marker, we expect the filled marker icon
-    const img = screen.getByAltText("checked") as HTMLImageElement;
-    expect(img.src).toContain("marker_check_by_default_fill.svg");
-  });
-
-});
-
-
-// CHECKBOX GROUP COMPONENT --------------------------
-
-describe("CheckBoxGroup component", () => {
-
-  const Siblings = (props: { bridgeParent?: boolean }) => (
-    <CheckBoxGroup bridgeParent>
-      <CheckBox level={0} ariaLabel="item A">A</CheckBox>
-      <CheckBox level={0} ariaLabel="item B">B</CheckBox>
-      <CheckBox level={1} ariaLabel="item BA">BA</CheckBox>
-      <CheckBox level={1} ariaLabel="item BB">BB</CheckBox>
-      <CheckBox level={2} ariaLabel="item BBA">BBA</CheckBox>
-      <CheckBox level={2} ariaLabel="item BBB">BBB</CheckBox>
-      <CheckBox level={2} ariaLabel="item BBC">BBC</CheckBox>
-      <CheckBox level={1} ariaLabel="item BC">BC</CheckBox>
-      <CheckBox level={0} ariaLabel="item C">C</CheckBox>
-      <CheckBox level={1} ariaLabel="item CA">CA</CheckBox>
-      <CheckBox level={2} ariaLabel="item CAA">CAA</CheckBox>
-      <CheckBox level={2} ariaLabel="item CAB">CAB</CheckBox>
-      <CheckBox level={2} ariaLabel="item CAC">CAC</CheckBox>
-    </CheckBoxGroup>
-  );
-
-
-  const SiblingsFill = (props: { bridgeParent?: boolean }) => (
-    <CheckBoxGroup bridgeParent fill>
-      <CheckBox level={0} ariaLabel="item A">A</CheckBox>
-      <CheckBox level={0} ariaLabel="item B">B</CheckBox>
-      <CheckBox level={1} ariaLabel="item BA">BA</CheckBox>
-      <CheckBox level={1} ariaLabel="item BB">BB</CheckBox>
-      <CheckBox level={2} ariaLabel="item BBA">BBA</CheckBox>
-      <CheckBox level={2} ariaLabel="item BBB">BBB</CheckBox>
-      <CheckBox level={2} ariaLabel="item BBC">BBC</CheckBox>
-      <CheckBox level={1} ariaLabel="item BC">BC</CheckBox>
-      <CheckBox level={0} ariaLabel="item C">C</CheckBox>
-      <CheckBox level={1} ariaLabel="item CA">CA</CheckBox>
-      <CheckBox level={2} ariaLabel="item CAA">CAA</CheckBox>
-      <CheckBox level={2} ariaLabel="item CAB">CAB</CheckBox>
-      <CheckBox level={2} ariaLabel="item CAC">CAC</CheckBox>
-    </CheckBoxGroup>
-  );
-
-
-
-  /**
-   * Build a tiny hierarchy:
-   * - parent (level 0)
-   *   - child 1 (level 1)
-   *   - child 2 (level 1)
-   */
-  const Parent = () => (
-    <CheckBoxGroup>
-      <CheckBox level={0} ariaLabel="parent">Parent</CheckBox>
-      <CheckBox level={1} ariaLabel="child 1">Child 1</CheckBox>
-      <CheckBox level={1} ariaLabel="child 2">Child 2</CheckBox>
-    </CheckBoxGroup>
-  );
-
-  it("checks all children when parent is clicked", async () => {
-    render(<Parent />);
-
-    const parentInput = screen.getByRole("checkbox", { name: "parent" });
-    const child1 = screen.getByRole("checkbox", { name: "child 1" });
-    const child2 = screen.getByRole("checkbox", { name: "child 2" });
-
-    // click parent → should check parent and both children
-    await userEvent.click(parentInput);
-    expect(parentInput).toBeChecked();
-    expect(child1).toBeChecked();
-    expect(child2).toBeChecked();
-  });
-
-  it("sets parent to indeterminate if only one child is checked", async () => {
-    render(<Parent />);
-
-    const parentInput = screen.getByRole("checkbox", { name: "parent" }) as HTMLInputElement;
-    const child1 = screen.getByRole("checkbox", { name: "child 1" });
-    const child2 = screen.getByRole("checkbox", { name: "child 2" });
-
-    // click only the first child
-    await userEvent.click(child1);
-    expect(child1).toBeChecked();
-    expect(child2).not.toBeChecked();
-
-    // parent should now be indeterminate
-    expect(parentInput.indeterminate).toBe(true);
-  });
-
-  it("unchecks all children when parent is clicked twice", async () => {
-    render(<Parent />);
-
-    const parentInput = screen.getByRole("checkbox", { name: "parent" });
-    const child1 = screen.getByRole("checkbox", { name: "child 1" });
-    const child2 = screen.getByRole("checkbox", { name: "child 2" });
-
-    // first click → all checked
-    await userEvent.click(parentInput);
-    expect(child1).toBeChecked();
-    expect(child2).toBeChecked();
-
-    // second click → all unchecked
-    await userEvent.click(parentInput);
-    expect(parentInput).not.toBeChecked();
-    expect(child1).not.toBeChecked();
-    expect(child2).not.toBeChecked();
-  });
-
-
-  // Uses SIBLINGS
-  it("only toggles the clicked checkbox among siblings at the same level", async () => {
-    render(<Siblings />);
-
-    const [a, b, ba, bb, bba, bbb, bbc, bc, c, ca, caa, cab, cac] = ["item A", "item B", "item BA", 
-        "item BB", "item BBA", "item BBB", "item BBC", "item BC", "item C",
-        "item CA", "item CAA", "item CAB", "item CAC"].map(name =>
-      screen.getByRole("checkbox", { name }) as HTMLInputElement
-    );
-
-    // click A → only A becomes checked
-    await userEvent.click(a);
-    expect(a).toBeChecked();          // Checked
-    expect(b).not.toBeChecked();
-    expect(ba).not.toBeChecked();
-    expect(bb).not.toBeChecked();
-    expect(bba).not.toBeChecked();
-    expect(bbb).not.toBeChecked();
-    expect(bbc).not.toBeChecked();
-    expect(bc).not.toBeChecked();
-    expect(c).not.toBeChecked();
-
-    // click B → A remains checked, B toggles on, C stays off
-    await userEvent.click(b);
-    expect(a).toBeChecked();          // Checked
-    expect(b).toBeChecked();          // Checked
-    expect(ba).toBeChecked();         // Checked
-    expect(bb).toBeChecked();         // Checked
-    expect(bba).toBeChecked();        // Checked
-    expect(bbb).toBeChecked();        // Checked
-    expect(bbc).toBeChecked();        // Checked
-    expect(bc).toBeChecked();         // Checked
-    expect(c).not.toBeChecked();
-
-    // click A again → A toggles off, B stays on, C stays off
-    await userEvent.click(a);
-    expect(a).not.toBeChecked();
-    expect(b).toBeChecked();          // Checked
-    expect(ba).toBeChecked();         // Checked
-    expect(bb).toBeChecked();         // Checked
-    expect(bba).toBeChecked();        // Checked
-    expect(bbb).toBeChecked();        // Checked
-    expect(bbc).toBeChecked();        // Checked
-    expect(bc).toBeChecked();         // Checked
-    expect(c).not.toBeChecked();
-
-    // click BB → A remains unchecked, BB toggles off
-  // click BB → BB and its descendants are unchecked; B should become indeterminate
-    await userEvent.click(bb);
-
-    // first grab everything as HTMLInputElements
-    const bInput = b as HTMLInputElement;
-
-    expect(a).not.toBeChecked();
-
-    // instead of expecting B to be unchecked, we assert that:
-    //  • it's not checked,
-    //  • but it *is* indeterminate
-    expect(bInput.checked).toBe(false);
-    expect(bInput.indeterminate).toBe(true);
-
-    // BA stays checked
-    expect(ba).toBeChecked();
-
-    // BB itself is now unchecked
-    expect(bb).not.toBeChecked();
-
-    // its children (BBA, BBB, BBC) are all unchecked
-    expect(bba).not.toBeChecked();
-    expect(bbb).not.toBeChecked();
-    expect(bbc).not.toBeChecked();
-
-    // BC (sibling-child of B) remains checked
-    expect(bc).toBeChecked();
-
-    expect(c).not.toBeChecked();
-
-
-    await userEvent.click(caa);
-    expect(c).not.toBeChecked();
-    expect(ca).not.toBeChecked();
-    expect(caa).toBeChecked();
-    expect(cab).not.toBeChecked();
-    expect(cac).not.toBeChecked();
-  });
-
-
-  it("only toggles the clicked checkbox among siblings at the same level - fill variant", async () => {
-    render(<SiblingsFill />);
-
-    const [a, b, ba, bb, bba, bbb, bbc, bc, c, ca, caa, cab, cac] = ["item A", "item B", "item BA", 
-        "item BB", "item BBA", "item BBB", "item BBC", "item BC", "item C",
-        "item CA", "item CAA", "item CAB", "item CAC"].map(name =>
-      screen.getByRole("checkbox", { name }) as HTMLInputElement
-    );
-
-    // click A → only A becomes checked
-    await userEvent.click(a);
-    expect(a).toBeChecked();          // Checked
-    expect(b).not.toBeChecked();
-    expect(ba).not.toBeChecked();
-    expect(bb).not.toBeChecked();
-    expect(bba).not.toBeChecked();
-    expect(bbb).not.toBeChecked();
-    expect(bbc).not.toBeChecked();
-    expect(bc).not.toBeChecked();
-    expect(c).not.toBeChecked();
-
-    // click B → A remains checked, B toggles on, C stays off
-    await userEvent.click(b);
-    expect(a).toBeChecked();          // Checked
-    expect(b).toBeChecked();          // Checked
-    expect(ba).toBeChecked();         // Checked
-    expect(bb).toBeChecked();         // Checked
-    expect(bba).toBeChecked();        // Checked
-    expect(bbb).toBeChecked();        // Checked
-    expect(bbc).toBeChecked();        // Checked
-    expect(bc).toBeChecked();         // Checked
-    expect(c).not.toBeChecked();
-
-    // click A again → A toggles off, B stays on, C stays off
-    await userEvent.click(a);
-    expect(a).not.toBeChecked();
-    expect(b).toBeChecked();          // Checked
-    expect(ba).toBeChecked();         // Checked
-    expect(bb).toBeChecked();         // Checked
-    expect(bba).toBeChecked();        // Checked
-    expect(bbb).toBeChecked();        // Checked
-    expect(bbc).toBeChecked();        // Checked
-    expect(bc).toBeChecked();         // Checked
-    expect(c).not.toBeChecked();
-
-    // click BB → A remains unchecked, BB toggles off
-  // click BB → BB and its descendants are unchecked; B should become indeterminate
-    await userEvent.click(bb);
-
-    // first grab everything as HTMLInputElements
-    const bInput = b as HTMLInputElement;
-
-    expect(a).not.toBeChecked();
-
-    // instead of expecting B to be unchecked, we assert that:
-    //  • it's not checked,
-    //  • but it *is* indeterminate
-    expect(bInput.checked).toBe(false);
-    expect(bInput.indeterminate).toBe(true);
-
-    // BA stays checked
-    expect(ba).toBeChecked();
-
-    // BB itself is now unchecked
-    expect(bb).not.toBeChecked();
-
-    // its children (BBA, BBB, BBC) are all unchecked
-    expect(bba).not.toBeChecked();
-    expect(bbb).not.toBeChecked();
-    expect(bbc).not.toBeChecked();
-
-    // BC (sibling-child of B) remains checked
-    expect(bc).toBeChecked();
-
-    expect(c).not.toBeChecked();
-
-
-    await userEvent.click(caa);
-    expect(c).not.toBeChecked();
-    expect(ca).not.toBeChecked();
-    expect(caa).toBeChecked();
-    expect(cab).not.toBeChecked();
-    expect(cac).not.toBeChecked();
-  });
-
-  // Uses SIBLINGS
-  it("with bridgeParent=true still treats siblings independently", async () => {
-    render(<Siblings bridgeParent={true} />);
-
-    const [a, b, c] = ["item A", "item B", "item C"].map(name =>
-      screen.getByRole("checkbox", { name }) as HTMLInputElement
-    );
-
-    // click C → only C becomes checked
-    await userEvent.click(c);
-    expect(a).not.toBeChecked();
-    expect(b).not.toBeChecked();
-    expect(c).toBeChecked();
-
-    // click B → C remains checked, B toggles on, A stays off
-    await userEvent.click(b);
-    expect(a).not.toBeChecked();
-    expect(b).toBeChecked();
-    expect(c).toBeChecked();
-
-    // click B again → B toggles off, C stays on
-    await userEvent.click(b);
-    expect(a).not.toBeChecked();
-    expect(b).not.toBeChecked();
-    expect(c).toBeChecked();
-
-  });
-});