refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 26 insertions, 0 deletions

diff --git a/src/components/atoms/lists/list.test.tsx b/src/components/atoms/lists/list.test.tsx
new file mode 100644
index 0000000..fcf8813
--- /dev/null
+++ b/src/components/atoms/lists/list.test.tsx
@@ -0,0 +1,26 @@
+import { render, screen } from '@test-utils';
+import List, { type ListItem } from './list';
+
+const items: ListItem[] = [
+  { id: 'item-1', value: 'Item 1' },
+  { id: 'item-2', value: 'Item 2' },
+  {
+    child: [
+      { id: 'nested-item-1', value: 'Nested item 1' },
+      { id: 'nested-item-2', value: 'Nested item 2' },
+    ],
+    id: 'item-3',
+    value: 'Item 3',
+  },
+  { id: 'item-4', value: 'Item 4' },
+];
+
+describe('List', () => {
+  it('renders a nested unordered list', () => {
+    render(<List items={items} />);
+    const listItems = screen.getAllByRole('list');
+    listItems.forEach((listItem) =>
+      expect(listItem).toHaveClass('list--unordered')
+    );
+  });
+});