migrate table

packages/core/src/lib/context-menu/context-menu-item.svelte

@@ -1,3 +1,11 @@
+<!--
+@component
+  
+A clickable item within a context menu that triggers some action.
+```svelte
+<ContextMenuItem icon="plus" variant="danger" label="click me!" />
+```
+-->
 <svelte:options immutable />
 
 <script

packages/core/src/lib/context-menu/context-menu-separator.svelte

@@ -1,3 +1,11 @@
+<!--
+@component
+  
+A horizontal line divider within a context menu.
+```svelte
+<ContextMenuSeparator />
+```
+-->
 <svelte:options immutable />
 
 <hr class="mb-0.5 mt-1 border-light drop-shadow-none" />

packages/core/src/lib/context-menu/context-menu.spec.svelte

@@ -1,7 +1,7 @@
 <!-- 
   @component
 
-  This component allows us to render a Tooltip with its slotted
+  This component allows us to render a Context Menu with its slotted
   children, due to limitations with rendering slots using
   `@testing-library`.
 

packages/core/src/lib/context-menu/context-menu.svelte

@@ -1,3 +1,14 @@
+<!--
+@component
+  
+A simple list menu with items, usually appears on click.
+```svelte
+<ContextMenu>
+  <ContextMenuItem icon="plus" variant="danger" label="click me!" />
+  <ContextMenuSeparator />
+</ContextMenu>
+```
+-->
 <svelte:options immutable />
 
 <div

packages/core/src/lib/index.ts

@@ -19,6 +19,13 @@ export {
   default as TextInput,
   type TextInputTypes,
 } from './input/text-input.svelte';
+
 export { default as ContextMenu } from './context-menu/context-menu.svelte';
 export { default as ContextMenuItem } from './context-menu/context-menu-item.svelte';
 export { default as ContextMenuSeparator } from './context-menu/context-menu-separator.svelte';
+
+export { default as Table } from './table/table.svelte';
+export { default as TBody } from './table/tbody.svelte';
+export { default as TD } from './table/td.svelte';
+export { default as TH } from './table/th.svelte';
+export { default as TR } from './table/tr.svelte';

packages/core/src/lib/table/table.spec.svelte

@@ -0,0 +1,29 @@
+<!-- 
+  @component
+
+  This component allows us to render a Table with its slotted
+  children, due to limitations with rendering slots using
+  `@testing-library`.
+
+  See:
+  - https://sveltesociety.dev/recipes/testing-and-debugging/unit-testing-svelte-component
+  - https://github.com/testing-library/svelte-testing-library/issues/48
+ -->
+<script lang="ts">
+import Table from './table.svelte';
+import TBody from './tbody.svelte';
+import TR from './tr.svelte';
+import TD from './td.svelte';
+
+export let cols: string[] = [];
+</script>
+
+<Table {cols}>
+  <TBody>
+    <TR>
+      <TD>stuff</TD>
+      <TD>stuffs</TD>
+      <TD>stufffss</TD>
+    </TR>
+  </TBody>
+</Table>

packages/core/src/lib/table/table.spec.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import Table from './table.svelte';
+import TableWith3Cols from './table.spec.svelte';
+
+describe('Table', () => {
+  it('Renders default variant', () => {
+    render(Table);
+    expect(screen.getByRole('table')).toBeVisible();
+    expect(screen.getByRole('table')).toHaveClass('table-auto');
+  });
+
+  it('Renders auto variant', () => {
+    render(Table, { variant: 'auto' });
+    expect(screen.getByRole('table')).toBeVisible();
+    expect(screen.getByRole('table')).toHaveClass('table-auto');
+  });
+
+  it('Renders fixed variant', () => {
+    render(Table, { variant: 'fixed' });
+    expect(screen.getByRole('table')).toBeVisible();
+    expect(screen.getByRole('table')).toHaveClass('table-fixed');
+  });
+
+  it('Renders columns with widths set by cols attribute', () => {
+    const cols = ['20%', '30%', '50%'];
+    render(TableWith3Cols, { cols });
+
+    for (const [i, width] of cols.entries()) {
+      const col = screen.getByTestId(`col-${i}`);
+      expect(col).toBeVisible();
+      expect(col).toHaveStyle(`width:${width}`);
+    }
+  });
+});

packages/core/src/lib/table/table.svelte

@@ -0,0 +1,63 @@
+<!--
+@component
+  
+A table.
+```svelte
+<Table variant='fixed' cols=["30%", "30%", "40%"]>
+  ...
+</Table>
+```
+-->
+<svelte:options immutable />
+
+<script
+  lang="ts"
+  context="module"
+>
+export type TableVariant = 'auto' | 'fixed';
+</script>
+
+<script lang="ts">
+import cx from 'classnames';
+
+/** Column width layout variant (optional) */
+export let variant: TableVariant = 'auto';
+
+/**
+ * Column width sizes
+ * @example
+ * cols={["10%", "30%", "60%"]}
+ */
+export let cols: string[] = [];
+
+/**
+ * Custom table style
+ * @example
+ * style="border-collapse"
+ */
+export let style = '';
+</script>
+
+<table
+  {style}
+  class={cx('w-full bg-white text-xs', {
+    'table-fixed': variant === 'fixed',
+    'table-auto': variant === 'auto',
+  })}
+>
+  <colgroup>
+    {#each cols as col, index}
+      <col
+        data-testid={`col-${index}`}
+        style="width: {col};"
+      />
+    {/each}
+  </colgroup>
+  <slot />
+</table>
+
+<style>
+:host {
+  display: contents !important;
+}
+</style>

packages/core/src/lib/table/tbody.svelte

@@ -0,0 +1,30 @@
+<!--
+@component
+  
+A table body.
+```svelte
+<Table>
+  <TBody></TBody>
+</Table>
+```
+-->
+<svelte:options immutable />
+
+<script lang="ts">
+/**
+ * Custom table body style
+ * @example
+ * style="border-collapse"
+ */
+export let style = '';
+</script>
+
+<tbody {style}>
+  <slot />
+</tbody>
+
+<style>
+:host {
+  display: contents !important;
+}
+</style>

packages/core/src/lib/table/td.svelte

@@ -0,0 +1,36 @@
+<!--
+@component
+  
+A table body.
+```svelte
+<Table>
+  <TBody>
+    <TD></TD>
+  </TBody>
+</Table>
+```
+-->
+<svelte:options immutable />
+
+<script lang="ts">
+/**
+ * Custom table data cell style
+ * @example
+ * style="border-collapse"
+ */
+export let style = '';
+</script>
+
+<td
+  {style}
+  part="table-cell"
+  class="overflow-hidden p-2"
+>
+  <slot />
+</td>
+
+<style>
+:host {
+  display: contents !important;
+}
+</style>

packages/core/src/lib/table/th.svelte

@@ -0,0 +1,35 @@
+<!--
+@component
+  
+A table header cell.
+```svelte
+<Table>
+  <THead>
+    <TH></TH>
+  </THead>
+</Table>
+```
+-->
+<svelte:options immutable />
+
+<script lang="ts">
+/**
+ * Custom table header cell style
+ * @example
+ * style="border-collapse"
+ */
+export let style = '';
+</script>
+
+<th
+  {style}
+  class="overflow-hidden p-2 font-normal text-default"
+>
+  <slot />
+</th>
+
+<style>
+:host {
+  display: contents !important;
+}
+</style>

packages/core/src/lib/table/thead.svelte

@@ -0,0 +1,34 @@
+<!--
+@component
+  
+A table header.
+```svelte
+<Table>
+  <THead>
+  </THead>
+</Table>
+```
+-->
+<svelte:options immutable />
+
+<script lang="ts">
+/**
+ * Custom table header style
+ * @example
+ * style="border-collapse"
+ */
+export let style = '';
+</script>
+
+<thead
+  {style}
+  class="border-b border-black"
+>
+  <slot />
+</thead>
+
+<style>
+:host {
+  display: contents !important;
+}
+</style>

packages/core/src/lib/table/tr.spec.svelte

@@ -0,0 +1,19 @@
+<!-- 
+  @component
+
+  This component allows us to render a TR with its slotted
+  children, due to limitations with rendering slots using
+  `@testing-library`.
+
+  See:
+  - https://sveltesociety.dev/recipes/testing-and-debugging/unit-testing-svelte-component
+  - https://github.com/testing-library/svelte-testing-library/issues/48
+ -->
+<script lang="ts">
+import TR from './tr.svelte';
+import TD from './td.svelte';
+</script>
+
+<TR>
+  <TD>data</TD>
+</TR>

packages/core/src/lib/table/tr.spec.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import TR from './tr.svelte';
+import TRWithTD from './tr.spec.svelte';
+
+describe('TR', () => {
+  it('Renders default variant', () => {
+    render(TR);
+    expect(screen.getByRole('row')).toBeVisible();
+    expect(screen.getByRole('row')).toHaveClass('border-b');
+  });
+
+  it('Renders success variant', () => {
+    render(TR, { variant: 'success' });
+    expect(screen.getByRole('row')).toBeVisible();
+    expect(screen.getByRole('row')).toHaveClass(
+      'text-green-700 bg-green-50 border-green-100'
+    );
+  });
+
+  it('Renders disabled variant', () => {
+    render(TR, { variant: 'disabled' });
+    expect(screen.getByRole('row')).toBeVisible();
+    expect(screen.getByRole('row')).toHaveClass('text-gray-500 bg-gray-50');
+  });
+
+  it('Renders error variant', () => {
+    render(TR, { variant: 'error' });
+    expect(screen.getByRole('row')).toBeVisible();
+    expect(screen.getByRole('row')).toHaveClass(
+      'text-red-500 bg-red-50 border-red-100'
+    );
+  });
+
+  it('Renders table data', () => {
+    render(TRWithTD);
+    expect(screen.getByText('data'));
+  });
+});