feat(icons): setup icons package (#536)

packages/utils/src/style/cn.ts

@@ -0,0 +1,11 @@
+/**
+ * A (very basic) utility to merge class names and make them a little easier to read.
+ * Aims to replicate the API of popular libraries like `clsx` and `classnames` but with a much simpler implementation.
+ * This is not intended to be a full replacement for those libraries, but it should be sufficient for our use case.
+ * It also allows us to avoid adding an additional dependency to our packages.
+ * @param classes - An array of class names, which can be strings or undefined. Undefined values will be filtered out.
+ * @returns A single string of class names, separated by spaces.
+ */
+export function cn(...classes: (string | undefined)[]): string {
+  return classes.filter(Boolean).join(' ');
+}

packages/utils/src/style/index.ts

@@ -0,0 +1 @@
+export * from './cn';

packages/utils/src/style/tests/cn.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { cn } from '../cn';
+
+describe('cn', () => {
+  it('returns an empty string for no arguments', () => {
+    expect(cn()).toBe('');
+  });
+
+  it('returns a single class name', () => {
+    expect(cn('foo')).toBe('foo');
+  });
+
+  it('joins multiple class names with a space', () => {
+    expect(cn('foo', 'bar', 'baz')).toBe('foo bar baz');
+  });
+
+  it('filters out undefined values', () => {
+    expect(cn('foo', undefined, 'bar')).toBe('foo bar');
+  });
+
+  it('handles all undefined values', () => {
+    expect(cn(undefined, undefined)).toBe('');
+  });
+
+  it('filters out empty strings', () => {
+    expect(cn('foo', '', 'bar')).toBe('foo bar');
+  });
+
+  it('preserves class names with multiple words', () => {
+    expect(cn('foo bar', 'baz')).toBe('foo bar baz');
+  });
+});