@dhasdk/simple-ui 1.0.7 → 1.0.8

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

@@ -0,0 +1,113 @@
+import { Meta } from '@storybook/react';
+import { Card, CardProps } from './Card';
+
+// 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/Card',
+  component: Card,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['','']
+      },
+    },
+  args: {
+    disabled: false,    // set default argument values
+    imagePath: imagePath,
+    alt: "default image alt",
+    children: 
+    <>
+      <h1 className="font-bold mb-2 text-lg" aria-label="Heading">Heading</h1>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+        Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</p>
+    </>
+    // 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<CardProps>;
+
+// Define "Default" story
+export const Default = {
+  args: {
+    ariaLabel: 'test label',
+    alt: 'image alt'
+  }
+};
+
+export const ImageInsetDefault = {
+  args: {
+    imageInset: true,
+  }
+}
+
+export const ImageBotton = {
+  args: {
+    variant: 'imageBottom',
+  }
+}
+
+export const Outline = {
+  args: {
+    variantStyle: 'outline',
+  }
+};
+
+
+export const ImageLeft = {
+  args: {
+    variant: 'imageLeft',
+  }
+};
+
+export const ImageLeftInsetDefault = {
+  args: {
+    variant: 'imageLeft',
+    imageInset: true,
+  }
+}
+
+export const ImageLeftOutline = {
+  args: {
+    variant: 'imageLeft',
+    variantStyle: 'outline',
+  }
+};
+
+export const ImageLeftInsetDefaultOutline = {
+  args: {
+    variant: 'imageLeft',
+    imageInset: true,
+    variantStyle: 'outline',
+  }
+}
+
+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/Card.spec.tsx

@@ -0,0 +1,112 @@
+import { render, screen } from '@testing-library/react';
+import { axe } from "vitest-axe";
+import { describe, it, expect, vi } from "vitest";    // required for ".toHaveNoViolations"
+import { Card, CardProps } from './Card';
+
+describe('Card default variant', () => {
+  it('default variant with image should render successfully', () => {
+    render(<Card variant='default' imagePath='path/to/some/image.png' alt='test alt' ariaLabel='test card' />);
+    const parentDiv = screen.getByLabelText('test card');
+    expect(parentDiv).toBeTruthy();
+    expect(parentDiv).toHaveClass('flex-col');
+  });
+
+  it('imageBottom variant with image should render successfully', () => {
+    render(<Card variant='imageBottom' imagePath='path/to/some/image.png' ariaLabel='test card' alt='test alt' />);
+    const parentDiv = screen.getByLabelText('test card');
+    expect(parentDiv).toBeTruthy();
+    expect(parentDiv).toHaveClass('flex-col-reverse');
+  });
+
+  it('default variant + imageInset true should render successfully', () => {
+    render(<Card variant='default' alt='test alt' imageInset={true} ariaLabel='test card' />);
+    const parentDiv = screen.getByLabelText('test card');
+    expect(parentDiv).toBeTruthy();
+    expect(parentDiv).toHaveClass('flex-col');
+  });
+
+  it('imageLeft variant should render successfully', () => {
+    render(<Card variant='imageLeft' alt='test alt' ariaLabel='test card'/>);
+    const parentDiv = screen.getByLabelText('test card');
+    expect(parentDiv).toBeTruthy();
+    expect(parentDiv).toHaveClass('flex-row');
+  });
+
+  it('imageLeft variant + imageInset true should render successfully', () => {
+    render(<Card variant='imageLeft' alt='test alt' ariaLabel='test card' imageInset={true}/>);
+    const parentDiv = screen.getByLabelText('test card');
+    expect(parentDiv).toBeTruthy();
+    expect(parentDiv).toHaveClass('flex-row');
+  });
+
+  it('imageRight variant + imageInset true should render successfully', () => {
+    render(<Card variant='imageRight' alt='test alt' ariaLabel='test card' imageInset={true}/>);
+    const parentDiv = screen.getByLabelText('test card');
+    expect(parentDiv).toBeTruthy();
+    expect(parentDiv).toHaveClass('flex-row-reverse');
+  });
+
+});
+
+
+describe('Card Accessibility Tests', () => {
+  const renderComponent = (props: CardProps) =>
+    render(<Card {...props}>Card Content</Card>);
+
+  it('should have no accessibility violations with default variant', async () => {
+    const { container } = renderComponent({
+      imagePath: 'https://via.placeholder.com/150',
+      alt: 'Placeholder Image',
+    });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should have no accessibility violations with image and alt text', async () => {
+    const { container } = renderComponent({
+      imagePath: 'https://via.placeholder.com/150',
+      alt: 'Placeholder Image',
+    });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should have no accessibility violations with outline variant style', async () => {
+    const { container } = renderComponent({ variantStyle: 'outline',  alt: 'test alt' });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should include alt text for images when provided', () => {
+    const { getByAltText } = renderComponent({
+      imagePath: 'https://via.placeholder.com/150',
+      alt: 'Accessible Image',
+    });
+    expect(getByAltText('Accessible Image')).toBeInTheDocument();
+  });
+
+  it('should have an accessible name via aria-label', () => {
+    const { getByLabelText } = renderComponent({ ariaLabel: 'Custom Card Label',  alt: 'test alt' });
+    expect(getByLabelText('Custom Card Label')).toBeInTheDocument();
+  });
+
+  it('should render different layout variants without accessibility violations', async () => {
+    const variants = ['default', 'imageBottom', 'imageLeft', 'imageRight'];
+
+    for (const variant of variants) {
+      const { container } = renderComponent({ variant,  alt: 'test alt' });
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  });
+
+  it('should support custom classes without accessibility issues', async () => {
+    const { container } = renderComponent({
+      className: 'custom-class bg-blue-500',
+      alt: 'test alt',
+    });
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+});

package/src/lib/Card.tsx

@@ -0,0 +1,69 @@
+import * as React 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: 'flex flex-col w-64 max-w-64', // image top
+  imageBottom: 'flex flex-col-reverse w-64 mx-w-64',
+  imageLeft: 'flex flex-row h-auto max-w-lg min-w-96',
+  imageRight: 'flex flex-row-reverse h-auto max-w-lg min-w-96',
+}
+
+// default styles, i.e. outline, etc.
+const variantStyles: VariantType = {
+  default: 'bg-white overflow-hidden rounded-lg',
+  outline: 'bg-white overflow-hidden rounded-lg shadow-md border border-slate-300',
+}
+
+const imageDivInsetStyleDefault = 'px-4 my-2';
+const imageDivInsetStyleFlag = 'px-2 my-2';
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: string;
+  subVariant?: string;
+  imagePath?: string;
+  classNameImage?: string;
+  imageInset?: boolean;
+  alt: string;
+  ariaLabel?: string;
+}
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = 'default', subVariant: variantStyle = 'default',
+    imagePath, classNameImage = 'w-full h-full', imageInset = false, alt,
+    ariaLabel='card component', children, ...props }, ref) => {
+
+    return (
+      <div className={
+          twMerge(
+            'flex ',
+            variantStyles[variantStyle],
+            variants[variant],
+            className
+          )}
+            aria-label={ariaLabel}
+            ref={ref}
+            {...props}
+            >
+
+        {/* Image */}
+        <div
+          className={twMerge('flex-initial items-center justify-center w-full', imageInset &&
+            (variant === 'default' || variant === 'imageBottom' ? imageDivInsetStyleDefault : imageDivInsetStyleFlag ))}
+          >
+          {imagePath && <img src={imagePath} alt={alt} className={classNameImage} />}
+        </div>
+
+        {/* children / content */}
+        <div className="flex-auto px-2 py-3">
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+Card.displayName = 'Card';

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

@@ -0,0 +1,169 @@
+import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/react';
+import { Input, InputProps } from './Input';
+import { CharacterCounter, CharacterCounterProps } from './CharacterCounter';
+import { userEvent, within } from 'storybook/test';
+import { expect } from 'storybook/test';
+import { FC, useRef, useState } from 'react';
+
+
+export default {
+  title: 'Components/CharacterCounter',
+  component: CharacterCounter,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'white',
+      values: [
+        { name: 'white', value: '#ffffff' },
+        { name: 'light', value: '#f0f0f0' },
+      ],
+    },
+  },
+  args: {
+    maxCharacters: 25
+  },
+} as Meta<CharacterCounterProps>;
+
+export const DefaultWithInput: StoryObj<typeof CharacterCounter> = {
+  args: {
+    maxCharacters: 10,
+    children: <Input variant="default" />,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    // 1) The initial text might be "10 characters allowed"
+    expect(await canvas.findByText('10 characters allowed')).toBeInTheDocument();
+
+    // 2) Type "Hello"
+    const input = canvas.getByRole('textbox');
+    await userEvent.type(input, 'Hello');
+    // After typing 5 chars, we expect "5 remaining" (or your actual text).
+    expect(await canvas.findByText('5 remaining')).toBeInTheDocument();
+
+    // 3) Clear the input to test the zero-length scenario
+    await userEvent.clear(input);
+    // Now it should go back to "10 characters allowed"
+    expect(await canvas.findByText('10 characters allowed')).toBeInTheDocument();
+  },
+};
+
+export const WithInputHandler: StoryFn = () => {
+
+  const [inputValue, setInputValue] = useState<string>('');
+  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+  };
+
+  return (
+    <>
+      <div className="mb-4 font-bold">Input Value: {inputValue}</div>
+      <CharacterCounter maxCharacters={10}>
+        {/* <div className="ms-2">10 Characters Max</div> */}
+        <Input
+          variant="default"
+          onChange={onChangeHandler}
+        />
+      </CharacterCounter>
+    </>
+  );
+};
+
+
+// export const WithTextAreaHandler: StoryFn = () => {
+
+//   const [inputValue, setInputValue] = useState<string>('');
+//   const onChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+//     setInputValue(event.target.value);
+//   };
+
+//   return (
+//     <>
+//       <div className="mb-4 font-bold">Input Value: 
+//         <span className="font-normal">{inputValue}</span>
+//       </div>
+//       <CharacterCounter maxCharacters={20}>
+//         <textarea 
+//           className='border-2'
+//           cols={20}
+//           onChange={onChangeHandler}
+//         />
+//       </CharacterCounter>
+//     </>
+//   );
+// };
+
+export const OverLimitTest: StoryObj<typeof CharacterCounter> = {
+  args: {
+    maxCharacters: 5,
+    children: <Input variant="default" />,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Type 6 characters, e.g., "abcdef"
+    const input = canvas.getByRole('textbox');
+    await userEvent.type(input, 'abcdef');
+
+    // Expect the over-limit message: "1 characters too many"
+    expect(await canvas.findByText('1 characters too many')).toBeInTheDocument();
+  },
+};
+
+
+export const WithTextAreaHandler: StoryObj<typeof CharacterCounter> = {
+  args: {
+    maxCharacters: 20,
+    // We'll inline a small component that keeps state outside CharacterCounter,
+    // but we still rely on CharacterCounter for the message display.
+    children: (
+      <textarea
+        className="border-2"
+        cols={20}
+        // onChange is optional if your story doesn't need an external state
+      />
+    ),
+  },
+  render: (args) => <CharacterCounter {...args} />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 1) Should see "20 characters allowed" initially
+    expect(await canvas.findByText('20 characters allowed')).toBeInTheDocument();
+
+    // 2) Type some text
+    const textarea = canvas.getByRole('textbox'); // <textarea> is still a "textbox" role
+    await userEvent.type(textarea, 'This is more than 10 chars');
+    // That’s 26 chars, so we are over limit by 6
+    // We expect "6 characters too many"
+    expect(await canvas.findByText('6 characters too many')).toBeInTheDocument();
+  },
+};
+
+
+export const UsingAltMessages: StoryObj<typeof CharacterCounter> = {
+  args: {
+    maxCharacters: 5,
+    altRemainingMessageText: ' left to go!',
+    altOverageMessageText: ' too many!',
+    children: <Input variant="default" />,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole('textbox');
+
+    // Initially, "5 characters allowed"
+    expect(await canvas.findByText('5 characters allowed')).toBeInTheDocument();
+
+    // Type 3 characters => "2 left to go!"
+    await userEvent.type(input, 'abc');
+    expect(await canvas.findByText('2 left to go!')).toBeInTheDocument();
+
+    // Clear and confirm it goes back to "5 characters allowed"
+    await userEvent.clear(input);
+    expect(await canvas.findByText('5 characters allowed')).toBeInTheDocument();
+
+    // Type 6 => "1 too many!"
+    await userEvent.type(input, 'abcdef');
+    expect(await canvas.findByText('1 too many!')).toBeInTheDocument();
+  },
+};

package/src/lib/CharacterCounter.spec.tsx

@@ -0,0 +1,123 @@
+/**
+ * CharacterCounter.test.tsx
+ */
+import { render, screen, fireEvent } from "@testing-library/react";
+import { userEvent } from '@testing-library/user-event';
+import { describe, it, expect } from "vitest";
+import { axe } from "vitest-axe";
+import { CharacterCounter } from "./CharacterCounter";
+import { SourceTextModule } from "vm";
+
+describe("CharacterCounter", () => {
+  it("renders without crashing", () => {
+    render(<CharacterCounter maxCharacters={10}>
+        <input size={20} />
+        </CharacterCounter>
+        );
+    // We can check for certain text, placeholder, or aria attributes
+    // that appear when the component is rendered.
+    // Example: verify it shows '0' characters by default:
+    expect(screen.getByText(/0/i)).toBeInTheDocument();
+  });
+
+  it("displays the correct character count when user types", async () => {
+    render(
+        <CharacterCounter maxCharacters={10}>
+            <input size={20} type="text" aria-label="input box" />
+        </CharacterCounter>
+        );
+    
+    // Assuming CharacterCounter has a text input element:
+    const input = screen.getByLabelText("input box");
+
+    // Type a few characters
+    userEvent.type(input, "Hello");
+
+    // Wait for potential asynchronous updates (if applicable)
+    await screen.findByText("5 remaining"); 
+    
+    // Check that the character counter updated
+    expect(screen.getByText("5 remaining")).toBeInTheDocument();
+  });
+  
+  it("is accessible according to axe", async () => {
+    // Render your component
+    const { container } = render(
+        <CharacterCounter maxCharacters={10}>
+            <input size={20} aria-label="a test input box" />
+        </CharacterCounter>
+        );
+    // Use axe to analyze the rendered DOM
+    const results = await axe(container);
+    // Expect no accessibility violations
+    expect(results).toHaveNoViolations();
+  });
+
+  it("shows the overage message when user types too many characters", async () => {
+    render(
+      <CharacterCounter maxCharacters={5}>
+        <input type="text" />
+      </CharacterCounter>
+    );
+
+    const input = screen.getByRole("textbox");
+    
+    // Type 6 characters (more than the max of 5)
+    await userEvent.type(input, "abcdef");
+
+    // For 6 chars typed and a max of 5, we expect: "1 characters too many"
+    // The difference is (6 - 5) = 1
+    expect(screen.getByText("1 characters too many")).toBeInTheDocument();
+  });
+
+  it("uses the altOverageMessageText if provided", async () => {
+    render(
+      <CharacterCounter
+        maxCharacters={5}
+        altOverageMessageText="too many! Please shorten."
+      >
+        <input type="text" />
+      </CharacterCounter>
+    );
+
+    const input = screen.getByRole("textbox");
+
+    // Again, exceed maxCharacters
+    await userEvent.type(input, "abcdef");
+
+    // Now we expect it to say: "1 too many! Please shorten."
+    expect(screen.getByText("1 too many! Please shorten.")).toBeInTheDocument();
+  });
+
+
+  it("displays correct starting message before user types", async () => {
+    render(
+        <CharacterCounter maxCharacters={10}>
+            <input size={20} type="text" aria-label="input box" />
+        </CharacterCounter>
+        );
+    
+    // Check that the character counter updated
+    expect(screen.getByText("10 characters allowed")).toBeInTheDocument();
+  });
+
+  it("sets the correct message when the input is cleared (numCharacters === 0)", async () => {
+    render(
+      <CharacterCounter maxCharacters={5}>
+        <input type="text" />
+      </CharacterCounter>
+    );
+
+    const input = screen.getByRole("textbox");
+
+    // Type some text first
+    await userEvent.type(input, "abcde");
+
+    // Now clear it (this should reset numCharacters to 0)
+    await userEvent.clear(input);
+
+    // If numCharacters === 0, the default message is "5 allowed"
+    expect(screen.getByText("5 characters allowed")).toBeInTheDocument();
+  });
+  
+});

package/src/lib/CharacterCounter.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export interface CharacterCounterProps {
+  maxCharacters: number;      // required prop
+  children: React.ReactNode;  // required prop
+  className?: string;         // optional class for parent container div
+  classNameMessage?: string;  // optional class for message text (div)
+  classNameOverLimitMessage?: string; // optional class applied when over limit
+  altRemainingMessageText?: string;
+  altOverageMessageText?: string;
+}
+
+export const CharacterCounter = ({
+  className = '',
+  classNameMessage = '',
+  classNameOverLimitMessage = '',
+  maxCharacters,
+  children,
+  altRemainingMessageText,
+  altOverageMessageText,
+}: CharacterCounterProps) => {
+  const [counterMessage, setCounterMessage] = useState<string>(`${maxCharacters} characters allowed`);
+  const [overLimit, setOverLimit] = useState<boolean>(false);
+
+  // is this valid w/ just an HTMLInputElement interface?
+  const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const editableText = event.target.value;
+    const numCharacters = editableText.length;
+
+    setOverLimit(numCharacters > maxCharacters);
+
+    if (numCharacters === 0) {
+      setCounterMessage(`${maxCharacters} characters allowed`);
+    } else if (numCharacters <= maxCharacters) {
+      const msgText = ' ' + (altRemainingMessageText ?? "remaining");
+      setCounterMessage(`${maxCharacters - numCharacters}${msgText}`);
+    } else {
+      const msgText = ' ' + (altOverageMessageText ?? "characters too many");
+      setCounterMessage(`${numCharacters - maxCharacters}${msgText}`);
+    }
+  };
+
+  return (
+    <div className={className}>
+      <div
+        onInput={handleInput}
+        className="mb-2"
+      >
+        {children}
+      </div>
+      <div className={twMerge('ml-2', classNameMessage, overLimit && 'text-red-500', overLimit && classNameOverLimitMessage)}
+        >{counterMessage}</div> {/* separate from the editable area */}
+    </div>
+  );
+};