@nucel/ui 0.11.0 → 0.12.0

package/README.md

@@ -217,9 +217,21 @@ bun run storybook
 # Install dependencies
 bun install
 
-# Run checks
+# Build = export-completeness guard + svelte-check (MUST pass before commit/publish)
+bun run build
+
+# Type-check only
 bun run check
 
+# Export-completeness guard standalone — fails if any component under
+# src/lib/components is not reachable from the barrel (src/lib/index.ts).
+# This prevents the regression class where a component silently drops out
+# of the public surface and breaks the consuming app's build.
+bun run check:exports
+
+# Run the unit/component test suite (Vitest + Testing Library)
+bun run test
+
 # Run linter
 bun run lint
 
@@ -230,6 +242,14 @@ bun run format
 bun run build-storybook
 ```
 
+### Adding a component
+
+When you add a `.svelte` component under `src/lib/components`, you **must** also
+export it from `src/lib/index.ts`. `bun run build` (and CI / `prepublishOnly`)
+run `check:exports`, which fails the build if any component file is not
+reachable from the barrel. If a file is intentionally internal, list it in the
+`IGNORE` set in `scripts/check-exports.mjs`.
+
 ## License
 
 MIT © Nucel Team

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nucel/ui",
-	"version": "0.11.0",
+	"version": "0.12.0",
 	"description": "A comprehensive Svelte 5 UI component library for Nucel projects",
 	"type": "module",
 	"svelte": "./src/lib/index.ts",
@@ -13,12 +13,15 @@
 	},
 	"files": [
 		"src/lib",
-		"src/styles.css"
+		"src/styles.css",
+		"!src/lib/**/*.test.ts",
+		"!src/lib/**/*.test.js"
 	],
 	"scripts": {
 		"dev": "vite",
-		"build": "svelte-check --tsconfig ./tsconfig.json",
+		"build": "node scripts/check-exports.mjs && svelte-check --tsconfig ./tsconfig.json",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:exports": "node scripts/check-exports.mjs",
 		"lint": "eslint .",
 		"format": "prettier --write .",
 		"format:check": "prettier --check .",
@@ -26,7 +29,7 @@
 		"test:watch": "vitest",
 		"storybook": "storybook dev -p 6006",
 		"build-storybook": "storybook build",
-		"prepublishOnly": "echo 'publishing @nucel/ui'"
+		"prepublishOnly": "node scripts/check-exports.mjs && echo 'publishing @nucel/ui'"
 	},
 	"repository": {
 		"type": "git",

package/src/lib/components/ColorInput.test.ts

@@ -1,126 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render } from '@testing-library/svelte';
-import { tick } from 'svelte';
-import ColorInput from './ColorInput.svelte';
-
-/** Grab the native color input from a rendered ColorInput. */
-function getColorInput(container: HTMLElement): HTMLInputElement {
-	return container.querySelector('input[type="color"]') as HTMLInputElement;
-}
-
-describe('ColorInput', () => {
-	it('renders a native <input type="color"> inside the color-input slot', () => {
-		const { container } = render(ColorInput, { props: { value: '#3b82f6' } });
-		const wrapper = container.querySelector('[data-slot="color-input"]');
-		expect(wrapper).toBeInTheDocument();
-		const input = getColorInput(container);
-		expect(input).toBeInTheDocument();
-		expect(input.type).toBe('color');
-	});
-
-	it('reflects the initial value on the input', () => {
-		const { container } = render(ColorInput, { props: { value: '#22c55e' } });
-		expect(getColorInput(container).value).toBe('#22c55e');
-	});
-
-	it('defaults to #000000 when no value is supplied', () => {
-		const { container } = render(ColorInput, { props: {} });
-		expect(getColorInput(container).value).toBe('#000000');
-	});
-
-	it('does not show the hex value by default', () => {
-		const { container } = render(ColorInput, { props: { value: '#abcdef' } });
-		const wrapper = container.querySelector('[data-slot="color-input"]')!;
-		// Only the <input> child, no trailing text span.
-		expect(wrapper.querySelectorAll('span').length).toBe(0);
-	});
-
-	it('shows the hex value (uppercased via class) when showValue is set', () => {
-		const { container } = render(ColorInput, {
-			props: { value: '#abcdef', showValue: true },
-		});
-		const wrapper = container.querySelector('[data-slot="color-input"]')!;
-		const valueSpan = wrapper.querySelector('span');
-		expect(valueSpan).toBeInTheDocument();
-		expect(valueSpan).toHaveTextContent('#abcdef');
-		expect(valueSpan?.className).toContain('uppercase');
-		expect(valueSpan?.className).toContain('font-mono');
-	});
-
-	it('updates the displayed hex value when the input changes', async () => {
-		const { container } = render(ColorInput, {
-			props: { value: '#000000', showValue: true },
-		});
-		const input = getColorInput(container);
-
-		input.value = '#ff8800';
-		input.dispatchEvent(new Event('input', { bubbles: true }));
-		await tick();
-
-		const valueSpan = container.querySelector('[data-slot="color-input"] span');
-		expect(valueSpan).toHaveTextContent('#ff8800');
-	});
-
-	it('propagates an input change through the two-way bound value', async () => {
-		// `bind:value` drives the `showValue` span; if the bound value updates
-		// on input, the rendered hex text reflects the new colour.
-		const { container } = render(ColorInput, {
-			props: { value: '#111111', showValue: true },
-		});
-		const input = getColorInput(container);
-
-		input.value = '#00ff00';
-		input.dispatchEvent(new Event('input', { bubbles: true }));
-		await tick();
-
-		expect(input.value).toBe('#00ff00');
-		expect(container.querySelector('[data-slot="color-input"] span')).toHaveTextContent(
-			'#00ff00',
-		);
-	});
-
-	it('emits a change event consumers can listen to', async () => {
-		const onchange = vi.fn();
-		const { container } = render(ColorInput, {
-			props: { value: '#000000', onchange },
-		});
-		const input = getColorInput(container);
-
-		input.value = '#123456';
-		input.dispatchEvent(new Event('change', { bubbles: true }));
-		await tick();
-
-		expect(onchange).toHaveBeenCalledOnce();
-	});
-
-	it('forwards the disabled attribute to the native input', () => {
-		const { container } = render(ColorInput, {
-			props: { value: '#ef4444', disabled: true },
-		});
-		expect(getColorInput(container)).toBeDisabled();
-	});
-
-	it('merges a custom class onto the input', () => {
-		const { container } = render(ColorInput, {
-			props: { value: '#000000', class: 'my-swatch' },
-		});
-		const input = getColorInput(container);
-		expect(input.className).toContain('my-swatch');
-		// Base styling is preserved.
-		expect(input.className).toContain('rounded-md');
-	});
-
-	it('honours a custom data-slot', () => {
-		const { container } = render(ColorInput, {
-			props: { value: '#000000', 'data-slot': 'theme-color' },
-		});
-		expect(container.querySelector('[data-slot="theme-color"]')).toBeInTheDocument();
-	});
-
-	it('forwards arbitrary props (e.g. aria-label) to the input', () => {
-		const { getByLabelText } = render(ColorInput, {
-			props: { value: '#000000', 'aria-label': 'Pick a label colour' },
-		});
-		expect(getByLabelText('Pick a label colour')).toBeInTheDocument();
-	});
-});

package/src/lib/components/CopyButton.test.ts

@@ -1,213 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render } from '@testing-library/svelte';
-import { tick } from 'svelte';
-import CopyButton from './CopyButton.svelte';
-
-/**
- * Install a mock `navigator.clipboard.writeText`. jsdom does not provide a
- * working clipboard, so we define it ourselves. Returns the spy.
- */
-function mockClipboard(impl?: (text: string) => Promise<void>) {
-	const writeText = vi.fn(impl ?? (() => Promise.resolve()));
-	Object.defineProperty(navigator, 'clipboard', {
-		value: { writeText },
-		configurable: true,
-		writable: true,
-	});
-	return writeText;
-}
-
-describe('CopyButton', () => {
-	beforeEach(() => {
-		vi.useFakeTimers();
-	});
-
-	afterEach(() => {
-		vi.runOnlyPendingTimers();
-		vi.useRealTimers();
-		vi.restoreAllMocks();
-	});
-
-	it('writes the value to the clipboard on click', async () => {
-		const writeText = mockClipboard();
-		const { getByRole } = render(CopyButton, { props: { value: 'hello-world' } });
-
-		await getByRole('button').click();
-		await tick();
-
-		expect(writeText).toHaveBeenCalledOnce();
-		expect(writeText).toHaveBeenCalledWith('hello-world');
-	});
-
-	it('shows the copied state after a successful copy and reverts after timeout', async () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', label: 'Copy', copiedLabel: 'Copied', timeout: 2000 },
-		});
-		const btn = getByRole('button');
-
-		expect(btn).toHaveTextContent('Copy');
-		expect(btn).not.toHaveAttribute('data-copied');
-
-		await btn.click();
-		await tick();
-
-		expect(btn).toHaveTextContent('Copied');
-		expect(btn).toHaveAttribute('data-copied');
-
-		// Advance past the timeout — state reverts.
-		vi.advanceTimersByTime(2000);
-		await tick();
-
-		expect(btn).toHaveTextContent('Copy');
-		expect(btn).not.toHaveAttribute('data-copied');
-	});
-
-	it('respects a custom timeout before reverting', async () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', label: 'Copy', copiedLabel: 'Copied', timeout: 5000 },
-		});
-		const btn = getByRole('button');
-
-		await btn.click();
-		await tick();
-		expect(btn).toHaveTextContent('Copied');
-
-		// Not yet elapsed at 2s.
-		vi.advanceTimersByTime(2000);
-		await tick();
-		expect(btn).toHaveTextContent('Copied');
-
-		// Elapsed at 5s total.
-		vi.advanceTimersByTime(3000);
-		await tick();
-		expect(btn).toHaveTextContent('Copy');
-	});
-
-	it('renders a visible label by default', () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, { props: { value: 'x' } });
-		expect(getByRole('button')).toHaveTextContent('Copy');
-	});
-
-	it('renders icon-only (no text) when label is false, exposing an aria-label', () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, { props: { value: 'x', label: false } });
-		const btn = getByRole('button');
-		// No visible "Copy" text node; accessible name comes from aria-label.
-		expect(btn).toHaveAttribute('aria-label', 'Copy');
-		expect(btn.querySelector('span')).toBeNull();
-	});
-
-	it('updates the icon-only aria-label to the copied label after copying', async () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', label: false, copiedLabel: 'Copied' },
-		});
-		const btn = getByRole('button');
-
-		await btn.click();
-		await tick();
-
-		expect(btn).toHaveAttribute('aria-label', 'Copied');
-	});
-
-	it('fires the onCopy callback with the value after a successful copy', async () => {
-		mockClipboard();
-		const onCopy = vi.fn();
-		const { getByRole } = render(CopyButton, { props: { value: 'token-123', onCopy } });
-
-		await getByRole('button').click();
-		await tick();
-
-		expect(onCopy).toHaveBeenCalledOnce();
-		expect(onCopy).toHaveBeenCalledWith('token-123');
-	});
-
-	it('fires onError and does NOT enter copied state when the write rejects', async () => {
-		const boom = new Error('permission denied');
-		mockClipboard(() => Promise.reject(boom));
-		const onError = vi.fn();
-		const onCopy = vi.fn();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', onError, onCopy },
-		});
-		const btn = getByRole('button');
-
-		await btn.click();
-		await tick();
-
-		expect(onError).toHaveBeenCalledOnce();
-		expect(onError).toHaveBeenCalledWith(boom);
-		expect(onCopy).not.toHaveBeenCalled();
-		expect(btn).not.toHaveAttribute('data-copied');
-		expect(btn).toHaveTextContent('Copy');
-	});
-
-	it('hides the icon when hideIcon is set', () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', hideIcon: true },
-		});
-		const btn = getByRole('button');
-		expect(btn.querySelector('svg')).toBeNull();
-		expect(btn).toHaveTextContent('Copy');
-	});
-
-	it('renders custom label and copiedLabel text', async () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', label: 'Copy URL', copiedLabel: 'Copied URL!' },
-		});
-		const btn = getByRole('button');
-		expect(btn).toHaveTextContent('Copy URL');
-
-		await btn.click();
-		await tick();
-		expect(btn).toHaveTextContent('Copied URL!');
-	});
-
-	it('does not copy or change state when disabled', async () => {
-		const writeText = mockClipboard();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', disabled: true },
-		});
-		const btn = getByRole('button');
-		expect(btn).toBeDisabled();
-
-		await btn.click();
-		await tick();
-
-		expect(writeText).not.toHaveBeenCalled();
-		expect(btn).not.toHaveAttribute('data-copied');
-	});
-
-	it('restarts the timer on a second click (debounced revert)', async () => {
-		mockClipboard();
-		const { getByRole } = render(CopyButton, {
-			props: { value: 'x', label: 'Copy', copiedLabel: 'Copied', timeout: 2000 },
-		});
-		const btn = getByRole('button');
-
-		await btn.click();
-		await tick();
-		expect(btn).toHaveTextContent('Copied');
-
-		// 1.5s in, click again — timer should reset.
-		vi.advanceTimersByTime(1500);
-		await btn.click();
-		await tick();
-		expect(btn).toHaveTextContent('Copied');
-
-		// 1s more (2.5s since first click, 1s since second) — still copied.
-		vi.advanceTimersByTime(1000);
-		await tick();
-		expect(btn).toHaveTextContent('Copied');
-
-		// Reach 2s since the second click — now reverts.
-		vi.advanceTimersByTime(1000);
-		await tick();
-		expect(btn).toHaveTextContent('Copy');
-	});
-});

package/src/lib/components/IconButton.test.ts

@@ -1,139 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import IconButton, { iconButtonVariants } from './IconButton.svelte';
-
-/** A trivial snippet to pass as the icon child. */
-const icon = createRawSnippet(() => ({
-	render: () => `<svg data-testid="icon"></svg>`,
-}));
-
-describe('IconButton', () => {
-	it('renders as a <button> by default', () => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Notifications', children: icon },
-		});
-		const el = container.querySelector('[data-slot="icon-button"]');
-		expect(el).toBeInTheDocument();
-		expect(el?.tagName).toBe('BUTTON');
-		expect(el).toHaveAttribute('type', 'button');
-	});
-
-	it('renders as an <a> when href is set', () => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Go home', href: '/home', children: icon },
-		});
-		const el = container.querySelector('[data-slot="icon-button"]');
-		expect(el?.tagName).toBe('A');
-		expect(el).toHaveAttribute('href', '/home');
-	});
-
-	it('exposes the required aria-label on the control', () => {
-		const { getByLabelText } = render(IconButton, {
-			props: { 'aria-label': 'Search', children: icon },
-		});
-		expect(getByLabelText('Search')).toBeInTheDocument();
-	});
-
-	it('renders the icon child', () => {
-		const { getByTestId } = render(IconButton, {
-			props: { 'aria-label': 'Add', children: icon },
-		});
-		expect(getByTestId('icon')).toBeInTheDocument();
-	});
-
-	it('applies the default variant (ghost) and default size classes', () => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Default', children: icon },
-		});
-		const el = container.querySelector('[data-slot="icon-button"]')!;
-		// ghost variant => muted-foreground; default size => size-9
-		expect(el.className).toContain('text-muted-foreground');
-		expect(el.className).toContain('size-9');
-	});
-
-	it('applies the tap size (44px / size-11) for mobile hit targets', () => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Tap', size: 'tap', children: icon },
-		});
-		const el = container.querySelector('[data-slot="icon-button"]')!;
-		expect(el.className).toContain('size-11');
-	});
-
-	it.each([
-		['sm', 'size-8'],
-		['default', 'size-9'],
-		['lg', 'size-10'],
-		['tap', 'size-11'],
-	] as const)('applies the %s size class %s', (size, expectedClass) => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Sized', size, children: icon },
-		});
-		const el = container.querySelector('[data-slot="icon-button"]')!;
-		expect(el.className).toContain(expectedClass);
-	});
-
-	it.each([
-		['ghost', 'text-muted-foreground'],
-		['outline', 'border'],
-		['default', 'bg-primary'],
-		['secondary', 'bg-secondary'],
-		['destructive', 'text-destructive'],
-	] as const)('applies the %s variant classes', (variant, expectedClass) => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Variant', variant, children: icon },
-		});
-		const el = container.querySelector('[data-slot="icon-button"]')!;
-		expect(el.className).toContain(expectedClass);
-	});
-
-	it('disables the native button when disabled', () => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Disabled', disabled: true, children: icon },
-		});
-		const el = container.querySelector('button')!;
-		expect(el).toBeDisabled();
-	});
-
-	it('disables the anchor variant via aria-disabled and drops href', () => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Disabled link', href: '/x', disabled: true, children: icon },
-		});
-		const el = container.querySelector('a')!;
-		expect(el).toHaveAttribute('aria-disabled', 'true');
-		expect(el).not.toHaveAttribute('href');
-		expect(el).toHaveAttribute('role', 'link');
-		expect(el).toHaveAttribute('tabindex', '-1');
-	});
-
-	it('merges a custom class with the variant classes', () => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Custom', class: 'my-custom-class', children: icon },
-		});
-		const el = container.querySelector('[data-slot="icon-button"]')!;
-		expect(el.className).toContain('my-custom-class');
-		expect(el.className).toContain('size-9');
-	});
-
-	it('forwards arbitrary props (e.g. data-testid) to the element', () => {
-		const { getByTestId } = render(IconButton, {
-			props: { 'aria-label': 'Forwarded', 'data-testid': 'fwd', children: icon },
-		});
-		expect(getByTestId('fwd').tagName).toBe('BUTTON');
-	});
-});
-
-describe('iconButtonVariants', () => {
-	it('returns base classes plus default variant/size', () => {
-		const cls = iconButtonVariants();
-		expect(cls).toContain('inline-grid');
-		expect(cls).toContain('text-muted-foreground'); // ghost default
-		expect(cls).toContain('size-9'); // default size
-	});
-
-	it('honours explicit variant + size args', () => {
-		const cls = iconButtonVariants({ variant: 'destructive', size: 'tap' });
-		expect(cls).toContain('text-destructive');
-		expect(cls).toContain('size-11');
-	});
-});