@drivenets/design-system 0.7.3 → 0.9.0

package/src/styles/shared/_input.scss

@@ -57,8 +57,7 @@ $textarea-height-default: 120px;
 
 	&:has(.input:disabled) {
 		color: var(--color-background-deselected);
-		background: var(--color-background-secondary);
-		border-color: var(--color-border-disabled);
+		border-color: var(--border-border-disabled);
 		cursor: not-allowed;
 
 		.input {
@@ -82,26 +81,7 @@ $textarea-height-default: 120px;
 
 	&:disabled {
 		color: var(--color-background-deselected);
-		background: var(--color-background-secondary);
-		border-color: var(--color-border-disabled);
-		cursor: not-allowed;
-	}
-}
-
-@mixin form-control-states {
-	&:hover:not(:disabled) {
-		border-color: var(--form-control-border-color, var(--color-background-action-hover));
-	}
-
-	&:focus {
-		border-color: var(--form-control-border-color, var(--color-border-action-primary));
-		outline: none;
-	}
-
-	&:disabled {
-		color: var(--color-background-deselected);
-		background: var(--color-background-secondary);
-		border-color: var(--color-border-disabled);
+		border-color: var(--border-border-disabled);
 		cursor: not-allowed;
 	}
 }
@@ -129,8 +109,7 @@ $textarea-height-default: 120px;
 
 	&[data-disabled] {
 		color: var(--color-background-deselected);
-		background: var(--color-background-secondary);
-		border-color: var(--color-border-disabled);
+		border-color: var(--border-border-disabled);
 
 		&,
 		& * {
@@ -245,22 +224,6 @@ $textarea-height-default: 120px;
 	}
 }
 
-// Form control base styles
-@mixin formControl {
-	@include base-input-container;
-	@include form-control-states;
-	cursor: pointer;
-	justify-content: space-between;
-}
-
-@mixin formControlSmall {
-	max-height: $input-text-height-small;
-}
-
-@mixin formControlDefault {
-	max-height: $input-text-height-default;
-}
-
 // Select trigger styles
 @mixin selectControl {
 	display: grid;

package/src/utils/responsive.browser.test.ts

@@ -0,0 +1,94 @@
+import { createElement } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { page } from 'vitest/browser';
+import { renderHook } from 'vitest-browser-react';
+
+import { useBreakpoint, useResponsiveValue, withResponsiveProps } from './responsive';
+
+const mockMatchMedia = (matches: boolean) => {
+	const listeners: Array<() => void> = [];
+
+	Object.defineProperty(window, 'matchMedia', {
+		writable: true,
+		value: vi.fn().mockReturnValue({
+			matches,
+			addEventListener: (_: string, cb: () => void) => listeners.push(cb),
+			removeEventListener: (_: string, cb: () => void) => {
+				const idx = listeners.indexOf(cb);
+
+				if (idx >= 0) {
+					listeners.splice(idx, 1);
+				}
+			},
+		}),
+	});
+
+	return {
+		triggerChange: () => listeners.forEach((cb) => cb()),
+	};
+};
+
+describe('useBreakpoint', () => {
+	it('should return lg when viewport >= 1440px', async () => {
+		mockMatchMedia(true);
+		const { result } = await renderHook(() => useBreakpoint());
+
+		expect(result.current).toBe('lg');
+	});
+
+	it('should return md when viewport < 1440px', async () => {
+		mockMatchMedia(false);
+		const { result } = await renderHook(() => useBreakpoint());
+
+		expect(result.current).toBe('md');
+	});
+});
+
+describe('useResponsiveValue', () => {
+	it('should return a static value unchanged', async () => {
+		mockMatchMedia(true);
+		const { result } = await renderHook(() => useResponsiveValue('large'));
+
+		expect(result.current).toBe('large');
+	});
+
+	it('should resolve lg value on large screens', async () => {
+		mockMatchMedia(true);
+		const { result } = await renderHook(() => useResponsiveValue({ lg: 'large', md: 'small' }));
+
+		expect(result.current).toBe('large');
+	});
+
+	it('should resolve md value on small screens', async () => {
+		mockMatchMedia(false);
+		const { result } = await renderHook(() => useResponsiveValue({ lg: 'large', md: 'small' }));
+
+		expect(result.current).toBe('small');
+	});
+});
+
+describe('withResponsiveProps', () => {
+	const Base = ({ value }: { value?: string }) => createElement('span', null, value);
+	const Enhanced = withResponsiveProps(Base, ['value']);
+
+	it('should resolve responsive prop to lg value on large screens', async () => {
+		mockMatchMedia(true);
+		await page.render(createElement(Enhanced, { value: { lg: 'desktop', md: 'mobile' } }));
+
+		await expect.element(page.getByText('desktop')).toBeInTheDocument();
+	});
+
+	it('should resolve responsive prop to md value on small screens', async () => {
+		mockMatchMedia(false);
+		await page.render(createElement(Enhanced, { value: { lg: 'desktop', md: 'mobile' } }));
+
+		await expect.element(page.getByText('mobile')).toBeInTheDocument();
+	});
+
+	it('should pass through static values unchanged', async () => {
+		mockMatchMedia(true);
+		await page.render(createElement(Enhanced, { value: 'static' }));
+
+		await expect.element(page.getByText('static')).toBeInTheDocument();
+	});
+});

package/src/utils/responsive.ts

@@ -0,0 +1,79 @@
+import { createElement, useSyncExternalStore, type FunctionComponent } from 'react';
+
+import breakpointTokens from '../styles/_breakpoints.module.scss';
+
+export const BREAKPOINT_LG = parseInt(breakpointTokens.breakpointLg, 10);
+
+export const breakpoints = ['lg', 'md'] as const;
+export type Breakpoint = (typeof breakpoints)[number];
+
+export type Responsive<T> = Partial<Record<Breakpoint, T>>;
+
+export type ResponsiveValue<T> = T | Responsive<T>;
+
+export const isResponsiveValue = <T>(value: ResponsiveValue<T>): value is Responsive<T> =>
+	value !== null && typeof value === 'object' && breakpoints.some((bp) => bp in value);
+
+export const resolveResponsiveValue = <T>(value: ResponsiveValue<T>, breakpoint: Breakpoint): T => {
+	if (!isResponsiveValue(value)) {
+		return value;
+	}
+
+	return (value[breakpoint] ?? value.lg ?? value.md) as T;
+};
+
+const MEDIA_QUERY = `(min-width: ${String(BREAKPOINT_LG)}px)`;
+
+const subscribe = (callback: () => void) => {
+	const mql = window.matchMedia(MEDIA_QUERY);
+	mql.addEventListener('change', callback);
+	return () => mql.removeEventListener('change', callback);
+};
+
+const getSnapshot = (): Breakpoint => (window.matchMedia(MEDIA_QUERY).matches ? 'lg' : 'md');
+
+const getServerSnapshot = (): Breakpoint => 'lg';
+
+export const useBreakpoint = (): Breakpoint =>
+	useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+/**
+ * Resolves a `ResponsiveValue<T>` to `T` using the current breakpoint.
+ * Use for conditional rendering or JS logic that depends on the breakpoint.
+ */
+export const useResponsiveValue = <T>(value: ResponsiveValue<T>): T =>
+	resolveResponsiveValue(value, useBreakpoint());
+
+/**
+ * Wraps a component so that the specified props accept `ResponsiveValue<T>`.
+ * The wrapper resolves each responsive prop to a plain value before rendering,
+ * so the wrapped component stays completely unaware of breakpoints.
+ */
+export function withResponsiveProps<Props, const Keys extends readonly (keyof Props)[]>(
+	Component: FunctionComponent<Props>,
+	responsiveKeys: Keys,
+) {
+	type EnhancedProps = {
+		[P in keyof Props]: P extends Keys[number] ? ResponsiveValue<NonNullable<Props[P]>> : Props[P];
+	};
+
+	const Wrapper = (props: EnhancedProps) => {
+		const breakpoint = useBreakpoint();
+		const resolved = { ...props } as Record<string, unknown>;
+
+		for (const key of responsiveKeys) {
+			const k = String(key);
+			const value = resolved[k];
+
+			if (value !== undefined) {
+				resolved[k] = resolveResponsiveValue(value, breakpoint);
+			}
+		}
+
+		return createElement(Component as FunctionComponent<Record<string, unknown>>, resolved);
+	};
+
+	Wrapper.displayName = `withResponsiveProps(${Component.displayName ?? Component.name})`;
+
+	return Wrapper;
+}

package/src/utils/responsive.unit.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+
+import { BREAKPOINT_LG, isResponsiveValue, resolveResponsiveValue } from './responsive';
+
+describe('BREAKPOINT_LG', () => {
+	it('should be sourced from the SCSS variable and equal 1440', () => {
+		expect(BREAKPOINT_LG).toBe(1440);
+	});
+});
+
+describe('isResponsiveValue', () => {
+	it('should return true for a responsive object', () => {
+		expect(isResponsiveValue({ lg: 'large', md: 'small' })).toBe(true);
+	});
+
+	it('should return false for a string', () => {
+		expect(isResponsiveValue('large')).toBe(false);
+	});
+
+	it('should return false for null', () => {
+		expect(isResponsiveValue(null as unknown as string)).toBe(false);
+	});
+
+	it('should return true for an object with only lg', () => {
+		expect(isResponsiveValue({ lg: 'large' })).toBe(true);
+	});
+
+	it('should return true for an object with only md', () => {
+		expect(isResponsiveValue({ md: 'small' })).toBe(true);
+	});
+});
+
+describe('resolveResponsiveValue', () => {
+	it('should return static value unchanged for both breakpoints', () => {
+		expect(resolveResponsiveValue('large', 'lg')).toBe('large');
+		expect(resolveResponsiveValue('large', 'md')).toBe('large');
+	});
+
+	it('should resolve lg value from responsive object', () => {
+		expect(resolveResponsiveValue({ lg: 'large', md: 'small' }, 'lg')).toBe('large');
+	});
+
+	it('should resolve md value from responsive object', () => {
+		expect(resolveResponsiveValue({ lg: 'large', md: 'small' }, 'md')).toBe('small');
+	});
+
+	it('should fall back to lg when md is not specified', () => {
+		expect(resolveResponsiveValue({ lg: 'large' }, 'md')).toBe('large');
+	});
+
+	it('should fall back to md when lg is not specified', () => {
+		expect(resolveResponsiveValue({ md: 'small' }, 'lg')).toBe('small');
+	});
+});

package/src/utils/type-utils.ts

@@ -0,0 +1 @@
+export type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;

package/src/utils/use-controlled.browser.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it, vi } from 'vitest';
+import { renderHook } from 'vitest-browser-react';
+
+import { useControlled } from './use-controlled';
+
+describe('useControlled', () => {
+	describe('controlled mode', () => {
+		it('should return the controlled value', async () => {
+			const setValue = vi.fn();
+			const { result } = await renderHook(() => useControlled('hello', setValue, undefined));
+
+			expect(result.current[0]).toBe('hello');
+		});
+
+		it('should call the provided setValue', async () => {
+			const setValue = vi.fn(() => {});
+			const { result, act } = await renderHook(() => useControlled('hello', setValue, ''));
+
+			await act(() => {
+				result.current[1]('world');
+			});
+
+			expect(setValue).toHaveBeenCalledWith('world');
+		});
+
+		it('should ignore the defaultValue when controlled', async () => {
+			const setValue = vi.fn();
+			const { result } = await renderHook(() => useControlled('controlled', setValue, 'default'));
+
+			expect(result.current[0]).toBe('controlled');
+		});
+	});
+
+	describe('uncontrolled mode', () => {
+		it('should use defaultValue as the initial value', async () => {
+			const { result } = await renderHook(() => useControlled(undefined, undefined, 'fallback'));
+
+			expect(result.current[0]).toBe('fallback');
+		});
+
+		it('should update internal state via the setter', async () => {
+			const { result, act } = await renderHook(() => useControlled(undefined, undefined, 'fallback'));
+
+			expect(result.current[0]).toBe('fallback');
+
+			await act(() => {
+				result.current[1]('updated');
+			});
+
+			expect(result.current[0]).toBe('updated');
+		});
+	});
+
+	describe('edge cases', () => {
+		it('should treat value-only (no setValue) as uncontrolled', async () => {
+			const { result, act } = await renderHook(() => useControlled('initial', undefined, undefined));
+
+			await act(() => {
+				result.current[1]('updated');
+			});
+
+			expect(result.current[0]).toBe('updated');
+		});
+
+		it('should treat setValue-only (no value) as uncontrolled', async () => {
+			const setValue = vi.fn(() => {});
+			const { result, act } = await renderHook(() => useControlled(undefined, setValue, 'default'));
+
+			expect(result.current[0]).toBe('default');
+
+			await act(() => {
+				result.current[1]('updated');
+			});
+
+			expect(result.current[0]).toBe('updated');
+			expect(setValue).not.toHaveBeenCalled();
+		});
+	});
+});

package/src/utils/use-controlled.ts

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+
+/**
+ * A hook that manages a controlled or uncontrolled value.
+ * It is considered controlled if both value and setValue are provided.
+ */
+export const useControlled = <T>(
+	value: T | undefined,
+	setValue: ((value: T) => void) | undefined,
+	defaultValue: T,
+) => {
+	const isControlled = value !== undefined && setValue !== undefined;
+	const [internalValue, setInternalValue] = useState(value ?? defaultValue);
+	const resolvedValue = isControlled ? value : internalValue;
+	const resolvedSetValue = isControlled ? setValue : setInternalValue;
+
+	return [resolvedValue, resolvedSetValue] as const;
+};