@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/AppointmentPicker.spec.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { axe } from 'vitest-axe';
+import { AppointmentPicker, generateOptions } from './AppointmentPicker';
+import { Select } from './Select';
+
+type Option = {
+  name: string;
+  value?: string;
+};
+
+// Mock the Select component to inspect props and simulate option selection
+vi.mock('./Select', () => ({
+  Select: vi.fn(({
+    options,
+    optionsLabel,
+    setSelectedOption,
+    className,
+    classNameContainer,
+    label,
+    variant,
+    width,
+    ...rest
+  }) => (
+    <div data-testid="mock-select" className={classNameContainer} {...rest}>
+      {label && <span data-testid="picker-label">{label}</span>}
+      <span data-testid="options-label">{optionsLabel}</span>
+      <div data-testid="options-container">
+        {options.map((opt: Option) => (
+          <button
+            key={opt.value}
+            data-value={opt.value}
+            onClick={() => setSelectedOption && setSelectedOption(opt.value || '')}
+          >
+            {opt.name}
+          </button>
+        ))}
+      </div>
+    </div>
+  )),
+}));
+
+describe('generateOptions utility', () => {
+  it('generates 24 hourly options for default range in 24hr format', () => {
+    const opts = generateOptions('hour', '24hr');
+    expect(opts).toHaveLength(24);
+    expect(opts[0]).toEqual({ name: '00:00', value: '00:00' });
+    expect(opts[23]).toEqual({ name: '23:00', value: '23:00' });
+  });
+
+  it('generates half-hourly options in 12hr format with AM/PM', () => {
+    const opts = generateOptions('half-hour', '12hr');
+    expect(opts.find(o => o.value === '00:30')?.name).toBe('12:30 AM');
+    expect(opts.find(o => o.value === '12:00')?.name).toBe('12:00 PM');
+    expect(opts).toHaveLength((24 * 60) / 30);
+  });
+
+  it('respects custom hourRange filter', () => {
+    const opts = generateOptions('quarter-hour', '24hr', [9, 10]);
+    // From 09:00 to 10:59 in 15-min steps: (2 hours * 4) = 8 options
+    expect(opts).toHaveLength(8);
+    expect(opts[0].value).toBe('09:00');
+    expect(opts[opts.length - 1].value).toBe('10:45');
+  });
+});
+
+describe('AppointmentPicker Component', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the Select component with provided className and container class', () => {
+    render(
+      <AppointmentPicker
+        className="picker-class"
+        classNameContainer="container-class"
+        label="Choose time"
+        optionsLabel="Pick"
+        variant="outline"
+        width="200px"
+      />
+    );
+
+    const select = screen.getByTestId('mock-select');
+    expect(select).toHaveClass('container-class');
+
+    expect(Select).toHaveBeenCalledWith(
+      expect.objectContaining({
+        className: 'picker-class',
+        classNameContainer: 'container-class',
+        label: 'Choose time',
+        optionsLabel: 'Pick',
+        variant: 'outline',
+        width: '200px',
+      }),
+      {}
+    );
+  });
+
+  it('calls console.log with interval and options', () => {
+    const logSpy = vi.spyOn(console, 'log');
+    render(<AppointmentPicker interval="half-hour" />);
+    expect(logSpy).toHaveBeenCalledWith('half-hour');
+    expect(logSpy).toHaveBeenCalledWith(expect.arrayContaining([
+      expect.objectContaining({ name: '00:00', value: '00:00' })
+    ]));
+    logSpy.mockRestore();
+  });
+
+  // this test contributes to satisfy all lines being covered (no specific lines specified as uncovered)
+  // however, % Funcs still scores a 66.66 -- something to look into
+  it('defaults to half-hour interval when interval is nullish', () => {
+    // Pass undefined to trigger the fallback
+    const opts = generateOptions(undefined as any, '24hr');
+    // Should produce 48 options (24h / 0.5h)
+    expect(opts).toHaveLength((24 * 60) / 30);
+    // First two entries: 00:00 and 00:30
+    expect(opts[0]).toEqual({ name: '00:00', value: '00:00' });
+    expect(opts[1]).toEqual({ name: '00:30', value: '00:30' });
+  });
+});
+
+describe('AppointmentPicker Accessibility Tests', () => {
+  it('has no accessibility violations by default', async () => {
+    const { container } = render(<AppointmentPicker />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has no accessibility violations with custom props', async () => {
+    const { container } = render(
+      <AppointmentPicker interval="quarter-hour" timeFormat="12hr" hourRange={[8, 9]} />
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/lib/AppointmentPicker.tsx

@@ -0,0 +1,97 @@
+import { HTMLAttributes } from 'react';
+import { Select } from './Select';
+
+type Interval = 'hour' | 'half-hour' | 'quarter-hour';
+
+const INTERVAL_MINUTES: Record<Interval, number> = {
+  'hour': 60,
+  'half-hour': 30,
+  'quarter-hour': 15
+};
+
+type Option = {
+  name: string;
+  value?: string;
+};
+
+export interface AppointmentPickerProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  classNameContainer?: string;
+  interval?: 'hour' | 'half-hour' | 'quarter-hour';
+  timeFormat?: '12hr' | '24hr';
+  hourRange?: [number, number];
+  label?: string;
+  variant?: string;
+  optionsLabel?: string;
+  width?: string;
+  setSelectedOption?: (param: string) => void;
+}
+
+export const generateOptions = (
+  interval: Interval,
+  timeFormat: AppointmentPickerProps['timeFormat'],
+  hourRange?: [number, number]
+): Option[] => {
+  const step = INTERVAL_MINUTES[interval ?? 'half-hour'];
+  const options: Option[] = [];
+
+  for (let minutes = 0; minutes < 24 * 60; minutes += step) {
+    const hrs = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+
+    // Filter by custom hourRange
+    if (hourRange && (hrs < hourRange[0] || hrs > hourRange[1])) {
+      continue;
+    }
+
+    // Format label
+    let label: string;
+    if (timeFormat === '12hr') {
+      const period = hrs < 12 ? 'AM' : 'PM';
+      const displayHour = hrs % 12 === 0 ? 12 : hrs % 12;
+      label = `${displayHour}:${mins.toString().padStart(2, '0')} ${period}`;
+    } else {
+      label = `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
+    }
+
+    const value = `${hrs.toString().padStart(2, '0')}:${mins
+      .toString()
+      .padStart(2, '0')}`;
+
+    options.push({ name: label, value });
+  }
+
+  return options;
+};
+
+export const AppointmentPicker = ({
+  className,
+  classNameContainer = '',
+  interval = 'hour',
+  timeFormat = '24hr',
+  hourRange,
+  label,
+  optionsLabel = 'Select a time',
+  variant = 'default',
+  setSelectedOption,
+  width = '',
+  ...props
+}: AppointmentPickerProps) => {
+
+  const timeOptions: Option[] = generateOptions(interval, timeFormat, hourRange);
+  console.log(interval);
+  console.log(timeOptions);
+
+  return (
+    <Select
+      className={className}
+      classNameContainer={classNameContainer}
+      label={label}
+      optionsLabel={optionsLabel}
+      options={timeOptions}
+      variant={variant}
+      width={width}
+      setSelectedOption={() => setSelectedOption}>
+    </Select>
+  );
+};

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

@@ -0,0 +1,60 @@
+// Badge.stories.tsx
+
+// import { Meta, StoryFn} from '@storybook/react';
+import { Badge } from './Badge';
+import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/react';
+
+
+// Import your images
+import firstAidKit from '../assets/img/first-aid-kit.svg';
+import heartbeat from '../assets/img/heartbeat.svg';
+import pill from '../assets/img/pill.svg';
+import prescription from '../assets/img/prescription.svg';
+import stethoscope from '../assets/img/stethoscope.svg';
+// import { useState } from 'react';
+
+
+export default {
+  title: 'Components/Badge',
+  component: Badge,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['success', 'caution', 'danger', 'disabled']
+      },
+  },
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+} as Meta<typeof Badge>;
+
+// DefaultBadge story
+export const DefaultBadge = {
+  args: {
+    variant: 'success',
+    children: 'Badge!',
+    className: 'bg-gray-200',
+    classNameImage: 'mr-2',
+    icon: firstAidKit,
+  }
+};
+
+export const CautionBadge = {
+  args: {
+    variant: 'caution',
+    children: 'Badge!',
+  }
+};
+export const DangerBadge = {
+  args: {
+    variant: 'danger',
+    children: 'Badge!',
+  }
+};
+export const DisabledBadge = {
+  args: {
+    variant: 'disabled',
+    children: 'Badge!',
+  }
+};

package/src/lib/Badge.spec.tsx

@@ -0,0 +1,70 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from "vitest";
+import { Badge, BadgeProps } from './Badge';
+import React, { createRef } from 'react';
+import { axe } from "vitest-axe";
+import closeIcon from '../assets/img/close_small.svg';
+import warning from '../assets/img/warning.svg';
+import emergency from '../assets/img/emergency_home.svg';
+import thumbUp from '../assets/img/thumb_up.svg';
+
+
+const imagePath = new URL('/src/assets/pill.svg', import.meta.url).href;
+
+describe('Badge', () => {
+
+  it('renders with default warning icon if no icon is provided', () => {
+    render(<Badge>Test Badge</Badge>);
+    // The default fallback is an image with alt text "warning"
+    const warningImage = screen.getByAltText('warning');
+    expect(warningImage).toBeInTheDocument();
+  });
+
+  it('renders with provided icon instead of the default warning icon', () => {
+    // Create a simple custom icon component for testing.
+    const CustomIcon = () => <span data-testid="custom-icon">Icon</span>;
+    render(<Badge icon={<CustomIcon />}>Test Badge</Badge>);
+    // Ensure the custom icon is rendered.
+    expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+    // And that the default warning icon is not rendered.
+    const warningImage = screen.queryByAltText('warning');
+    expect(warningImage).toBeNull();
+  });
+
+  it('renders children text correctly', () => {
+    render(<Badge>Badge Content</Badge>);
+    expect(screen.getByText('Badge Content')).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', () => {
+    const handleClick = vi.fn();
+    render(<Badge onClick={handleClick}>Clickable Badge</Badge>);
+    fireEvent.click(screen.getByText('Clickable Badge'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('forwards ref to the underlying div element', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<Badge ref={ref}>Ref Badge</Badge>);
+    // Check that the ref is set and points to a div element.
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('DIV');
+  });
+
+  it('applies the correct classes for the danger variant', () => {
+    const { container } = render(<Badge variant="danger">Danger Badge</Badge>);
+    // Find the outer div by getting the closest ancestor of the children text.
+    const badgeElement = container.firstChild as HTMLElement;
+    // Check that the rendered className contains the danger variant background.
+    expect(badgeElement?.className).toContain('bg-[#f4c2c2]');
+  });
+
+});
+
+describe('Badge Accessibility Tests', () => {
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Badge>Accessible Badge</Badge>);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/lib/Badge.tsx

@@ -0,0 +1,87 @@
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+import warningSuccess from '../assets/img/warning-badge-green.svg';
+import warningDanger from '../assets/img/warning-badge-red.svg';
+import warningCaution from '../assets/img/warning-badge-yellow.svg';
+import warningDisabled from '../assets/img/warning-badge-disabled.svg';
+
+type VariantsType = {
+  [key: string]: {
+    className: string;
+    classNameImage: string;
+    classNameChildren: string;
+  }
+};
+
+const badgeVariants: VariantsType = {
+  success: {
+    className: 'w-[79px] h-[26px] px-3 py-1 bg-[#d6f4d5] rounded-[40px] outline outline-1 -outline-offset-1 outline-[#387740] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0',
+    classNameImage: 'relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1',
+    classNameChildren: "text-[#387740] text-xs font-normal font-['Arial'] leading-[18px] md:text-md md:leading-normal lg:text-lg lg:leading-[27px]",
+  },
+  caution: {
+    className: 'w-[79px] h-[26px] px-3 py-1 bg-[#fff1be] rounded-[40px] outline outline-1 -outline-offset-1 outline-[#966121] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0',
+    classNameImage: 'relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1',
+    classNameChildren: "text-[#966222] text-xs font-normal font-['Arial'] leading-[18px] md:text-base md:leading-normal lg:text-lg lg:leading-[27px]",
+  },
+  danger: {
+    className: 'w-[79px] h-[26px] px-3 py-1 bg-[#f4c2c2] rounded-[40px] outline outline-1 -outline-offset-1 outline-[#a22b23] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0',
+    classNameImage: 'relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1',
+    classNameChildren: "text-[#A32C24] text-xs font-normal font-['Arial'] leading-[18px] md:text-base md:leading-normal lg:text-lg lg:leading-[27px]",
+  },
+  disabled: {
+    className: 'w-[79px] h-[26px] px-3 py-1 rounded-[40px] outline outline-1 -outline-offset-1 outline-[#394150] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0',
+    classNameImage: 'relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1',
+    classNameChildren: "text-[#394150] text-xs font-normal font-['Arial'] leading-[18px] md:text-md md:leading-normal lg:text-lg lg:leading-[27px]",
+  },
+};
+
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+  // variant?: keyof typeof badgeVariants;
+  variant?: 'success' | 'caution' | 'danger' | 'disabled';
+  className?: string;
+  classNameImage?: string;
+  classNameChildren?: string;
+  icon?: ReactNode;
+  iconAlt?: string;
+  children: ReactNode;
+}
+
+// Map each variant to its default SVG asset
+const defaultIcons = {
+  success: warningSuccess,
+  caution: warningCaution,
+  danger: warningDanger,
+  disabled: warningDisabled,
+};
+
+export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
+  ({ variant = 'success', className = '', classNameImage = '',
+    classNameChildren = '', icon, children, ...props }, ref) => {
+    // Use the provided icon or default to the one for the variant.
+    // Note: The imported SVGs are URLs so they can be passed as src.
+    const iconToDisplay = defaultIcons[variant];
+
+    return (
+      <div
+        className={twMerge(badgeVariants[variant].className, className)}
+        ref={ref}
+        {...props}
+      >
+        {/* Conditionally render based on icon type */}
+        {icon ? (
+          <span className={twMerge(badgeVariants[variant].classNameImage, classNameImage)}>{icon}</span>
+        ) : (
+          <img
+            className={twMerge(badgeVariants[variant].classNameImage, classNameImage)}
+            src={iconToDisplay as string}
+            alt={'warning'}
+          />
+        )}
+        <div className={twMerge(badgeVariants[variant].classNameChildren, classNameChildren)}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+);

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { Breadcrumbs, BreadcrumbsProps } from './Breadcrumbs';
+import { Meta, StoryFn } from '@storybook/react';
+
+export default {
+  title: 'Components/Breadcrumbs',
+  component: Breadcrumbs,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'white',
+      values: [
+        { name: 'white', value: '#ffffff' },
+        { name: 'medium', value: '#b5bbb7' },
+        { name: 'dark', value: '#000' },
+      ],
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <MemoryRouter initialEntries={context.parameters.initialEntries || ['/home/products/details']}>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+} as Meta;
+
+const Template: StoryFn<BreadcrumbsProps> = (args) => (
+  <Routes>
+    <Route path="*" element={<Breadcrumbs {...args} />} />
+  </Routes>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  variant: 'default',
+};
+
+export const BoldVariant = Template.bind({});
+BoldVariant.args = {
+  variant: 'bold',
+};
+
+export const CustomRoutes = Template.bind({});
+CustomRoutes.args = {
+  routes: [
+    { name: 'Section One', route: '/section-one' },
+    { name: 'Section Two', route: '/section-one/section-two' },
+  ],
+};
+CustomRoutes.parameters = {
+  initialEntries: ['/section-one/section-two'],
+};
+
+export const HomeOnly = Template.bind({});
+HomeOnly.args = {};
+HomeOnly.parameters = {
+  initialEntries: ['/'],
+};
+
+export const ContainerClass = Template.bind({});
+ContainerClass.args = {
+  classNameContainer: 'border-2 border-gray-500 bg-gray-200 px-2 rounded-md',
+  className: 'capitalize font-bold',
+};
+
+export const SeparatorChars = Template.bind({});
+SeparatorChars.args = {
+  separator: '/',
+  className: 'capitalize font-bold',
+};
+
+export const SeparatorEmoji = Template.bind({});
+SeparatorEmoji.args = {
+  separator: '➜',
+  className: 'capitalize font-bold',
+};
+
+export const ManySegments = Template.bind({});
+ManySegments.args = {};
+ManySegments.parameters = {
+  initialEntries: ['/a/b/c/d/e/f'],
+};
+
+// New stories to cover prettify (hyphens), home icon alt, and overflow behavior
+export const HyphenatedSegment = Template.bind({});
+HyphenatedSegment.args = {};
+HyphenatedSegment.storyName = 'Hyphenated Segment';
+HyphenatedSegment.parameters = {
+  initialEntries: ['/section-one/section-two-with-hyphen'],
+};
+
+export const HomeIconOnly = Template.bind({});
+HomeIconOnly.args = {};
+HomeIconOnly.storyName = 'Home Icon Only';
+HomeIconOnly.decorators = [
+  (Story) => <div style={{ width: 200 }}>{Story()}</div>,
+];
+HomeIconOnly.parameters = {
+  initialEntries: ['/only'],
+};
+
+export const OverflowScenario = Template.bind({});
+OverflowScenario.args = {
+  classNameContainer: 'w-24 overflow-hidden',
+};
+OverflowScenario.storyName = 'Overflow Scenario';
+OverflowScenario.decorators = [
+  (Story) => <div style={{ width: 100 }}>{Story()}</div>,
+];
+OverflowScenario.parameters = {
+  initialEntries: ['/one/two/three/four'],
+};