@umituz/web-design-system 6.3.0 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "6.3.0",
+  "version": "6.5.0",
   "private": false,
   "type": "module",
   "description": "Web Design System - Tailwind v4 authored, precompiled CSS shipped. Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications.",

package/src/__tests__/charts/BarChart.test.tsx

@@ -80,6 +80,24 @@ describe("BarChart", () => {
     expect(goal.textContent).toContain("Hedef");
   });
 
+  it("renders a band via goalLines with each line placed independently", () => {
+    const { container } = render(
+      <BarChart
+        labels={labels}
+        goalLines={[
+          { value: 1, label: "Alt", tone: "#65c99a" },
+          { value: 3, label: "Üst", tone: "#65c99a" },
+        ]}
+        series={[{ label: "A", values: [4, 4, 4] }]}
+      />,
+    );
+    const goals = container.querySelectorAll(".udb-barchart__goal");
+    expect(goals).toHaveLength(2);
+    expect((goals[0] as HTMLElement).style.bottom).toBe("25%");
+    expect((goals[1] as HTMLElement).style.bottom).toBe("75%");
+    expect(goals[1]!.textContent).toContain("Üst");
+  });
+
   it("colors series through the --udb-chart tokens by default", () => {
     const { container } = render(
       <BarChart labels={labels} series={[{ label: "A", values: [1, 2, 3] }]} />,

package/src/__tests__/confirm-provider.test.tsx

@@ -0,0 +1,77 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ConfirmProvider, useConfirm } from '../presentation/organisms/ConfirmProvider';
+
+afterEach(cleanup);
+
+function Probe({ onResult }: { onResult: (value: boolean) => void }) {
+  const confirm = useConfirm();
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        void confirm({ title: 'Delete item?', body: 'This cannot be undone.' }).then(onResult);
+      }}
+    >
+      ask
+    </button>
+  );
+}
+
+describe('ConfirmProvider', () => {
+  it('resolves true when confirmed and closes the dialog', async () => {
+    let result: boolean | undefined;
+    render(
+      <ConfirmProvider>
+        <Probe onResult={(v) => { result = v; }} />
+      </ConfirmProvider>,
+    );
+    expect(screen.queryByRole('dialog')).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'ask' }));
+    expect(screen.getByRole('dialog')).toBeTruthy();
+    expect(screen.getByText('This cannot be undone.')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+    await waitFor(() => expect(result).toBe(true));
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+  });
+
+  it('resolves false when cancelled', async () => {
+    let result: boolean | undefined;
+    render(
+      <ConfirmProvider>
+        <Probe onResult={(v) => { result = v; }} />
+      </ConfirmProvider>,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'ask' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    await waitFor(() => expect(result).toBe(false));
+  });
+
+  it('honors custom labels and tone', () => {
+    function LabelledProbe() {
+      const confirm = useConfirm();
+      return (
+        <button
+          type="button"
+          onClick={() => {
+            void confirm({ title: 'Leave page?', tone: 'danger', confirmLabel: 'Leave', cancelLabel: 'Stay' });
+          }}
+        >
+          go
+        </button>
+      );
+    }
+    render(
+      <ConfirmProvider>
+        <LabelledProbe />
+      </ConfirmProvider>,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'go' }));
+    expect(screen.getByRole('button', { name: 'Leave' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Stay' })).toBeTruthy();
+  });
+
+  it('throws when used outside the provider', () => {
+    expect(() => render(<Probe onResult={() => undefined} />)).toThrow(/ConfirmProvider/);
+  });
+});

package/src/presentation/organisms/ConfirmProvider.tsx

@@ -0,0 +1,56 @@
+
+import { createContext, useCallback, useContext, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import { ConfirmDialog } from './ConfirmDialog';
+
+export interface ConfirmOptions {
+  title: ReactNode;
+  body?: ReactNode;
+  tone?: 'danger' | 'primary' | 'success';
+  confirmLabel?: string;
+  cancelLabel?: string;
+}
+
+export type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
+
+const ConfirmContext = createContext<ConfirmFn | null>(null);
+
+export function useConfirm(): ConfirmFn {
+  const confirm = useContext(ConfirmContext);
+  if (!confirm) throw new Error('useConfirm must be used within ConfirmProvider');
+  return confirm;
+}
+
+export function ConfirmProvider({ children }: { children: ReactNode }) {
+  const [options, setOptions] = useState<ConfirmOptions | null>(null);
+  const resolver = useRef<((value: boolean) => void) | null>(null);
+
+  const confirm = useCallback<ConfirmFn>((next) => {
+    setOptions(next);
+    return new Promise<boolean>((resolve) => {
+      resolver.current = resolve;
+    });
+  }, []);
+
+  const settle = (value: boolean) => {
+    resolver.current?.(value);
+    resolver.current = null;
+    setOptions(null);
+  };
+
+  return (
+    <ConfirmContext.Provider value={confirm}>
+      {children}
+      <ConfirmDialog
+        open={options !== null}
+        title={options?.title ?? ''}
+        body={options?.body}
+        tone={options?.tone ?? 'primary'}
+        confirmLabel={options?.confirmLabel}
+        cancelLabel={options?.cancelLabel}
+        onConfirm={() => settle(true)}
+        onClose={() => settle(false)}
+      />
+    </ConfirmContext.Provider>
+  );
+}

package/src/presentation/organisms/charts/BarChart.tsx

@@ -26,6 +26,7 @@ export interface BarChartProps {
   formatValue?: (v: number) => string;
   formatLabel?: (l: string) => string;
   goalLine?: BarChartGoalLine;
+  goalLines?: readonly BarChartGoalLine[];
 }
 
 export function BarChart({
@@ -37,43 +38,45 @@ export function BarChart({
   formatValue = (v: number) => String(v),
   formatLabel = (l: string) => l,
   goalLine,
+  goalLines,
 }: BarChartProps) {
   const [hover, setHover] = useState<number | null>(null);
   const vals = (s: BarSeries) => s.values ?? s.data ?? [];
+  const goals = goalLines ?? (goalLine !== undefined ? [goalLine] : []);
   const columnTotals = labels.map((_, i) => series.reduce((sum, s) => sum + (vals(s)[i] ?? 0), 0));
   const max =
     stacking === 'stacked'
-      ? Math.max(1, ...columnTotals, goalLine?.value ?? 0)
-      : Math.max(1, ...series.flatMap((s) => vals(s)), goalLine?.value ?? 0);
+      ? Math.max(1, ...columnTotals, ...goals.map((g) => g.value))
+      : Math.max(1, ...series.flatMap((s) => vals(s)), ...goals.map((g) => g.value));
   const toneOf = (s: BarSeries, i: number) => s.tone ?? s.color ?? seriesColor(i);
   const accentOf = (s: BarSeries, si: number, i: number) => s.accents?.[i] ?? toneOf(s, si);
-  const goalPct = goalLine !== undefined ? Math.min(100, (goalLine.value / max) * 100) : null;
   return (
     <div className="udb-barchart" style={{ height }}>
-      {goalLine !== undefined && goalPct !== null && (
+      {goals.map((goal) => (
         <div
+          key={`${goal.value}-${goal.label ?? ''}`}
           className="udb-barchart__goal"
           style={{
-            bottom: `${goalPct}%`,
-            ...(goalLine.tone !== undefined ? { borderTopColor: goalLine.tone } : {}),
+            bottom: `${Math.min(100, (goal.value / max) * 100)}%`,
+            ...(goal.tone !== undefined ? { borderTopColor: goal.tone } : {}),
           }}
-          title={goalLine.label ?? formatValue(goalLine.value)}
+          title={goal.label ?? formatValue(goal.value)}
           aria-hidden="true"
         >
-          {goalLine.label !== undefined && (
+          {goal.label !== undefined && (
             <span
               className="udb-barchart__goallabel"
               style={
-                goalLine.tone !== undefined
-                  ? { color: goalLine.tone, borderColor: goalLine.tone }
+                goal.tone !== undefined
+                  ? { color: goal.tone, borderColor: goal.tone }
                   : undefined
               }
             >
-              {goalLine.label}
+              {goal.label}
             </span>
           )}
         </div>
-      )}
+      ))}
       {labels.map((label, i) => (
         <div
           key={label}

package/src/presentation/organisms/index.ts

@@ -170,6 +170,9 @@ export type {
 export { ConfirmDialog } from './ConfirmDialog';
 export type { ConfirmDialogProps } from './ConfirmDialog';
 
+export { ConfirmProvider, useConfirm } from './ConfirmProvider';
+export type { ConfirmOptions, ConfirmFn } from './ConfirmProvider';
+
 export { Stepper } from './Stepper';
 export type { StepperProps, StepperStep, StepperStepStatus } from './Stepper';