@nucel/ui 0.2.0 → 0.10.0

package/src/lib/components/ui/editor/mention-suggestion.ts

@@ -1,144 +0,0 @@
-import tippy, { type Instance, type Props as TippyProps } from 'tippy.js';
-
-export type MentionItem = {
-  id: string;
-  label: string;
-  type?: 'user' | 'team';
-  slug?: string;
-  avatar_url?: string;
-  sublabel?: string;
-};
-
-function escapeHtml(text: string): string {
-  const div = document.createElement('div');
-  div.textContent = text;
-  return div.innerHTML;
-}
-
-function getInitials(name: string): string {
-  return name.split(' ').map(p => p.charAt(0)).join('').toUpperCase().slice(0, 2);
-}
-
-function createDropdown(props: { items: MentionItem[]; command: (item: MentionItem) => void }) {
-  const el = document.createElement('div');
-  el.className = 'mention-list';
-  let selectedIndex = 0;
-  let items = props.items;
-  let command = props.command;
-
-  function render() {
-    if (items.length === 0) {
-      el.innerHTML = `<div class="mention-list-empty">No results</div>`;
-      return;
-    }
-    if (items.length === 1 && (items[0] as any).type === 'hint') {
-      el.innerHTML = `<div class="mention-list-empty">${escapeHtml(items[0].label)}</div>`;
-      return;
-    }
-    el.innerHTML = items.map((item, i) => `
-      <button type="button" class="mention-list-item ${i === selectedIndex ? 'is-selected' : ''}" data-index="${i}">
-        ${item.avatar_url
-          ? `<img src="${escapeHtml(item.avatar_url)}" alt="" class="mention-avatar" />`
-          : `<span class="mention-avatar-fallback">${getInitials(item.label)}</span>`
-        }
-        <span class="mention-info">
-          <span class="mention-label">${escapeHtml(item.label)}</span>
-          ${item.sublabel ? `<span class="mention-sublabel">${escapeHtml(item.sublabel)}</span>` : ''}
-        </span>
-        ${item.type === 'team' ? `<span class="mention-badge">Team</span>` : ''}
-      </button>
-    `).join('');
-
-    el.querySelectorAll('.mention-list-item').forEach(btn => {
-      btn.addEventListener('click', () => {
-        const idx = parseInt((btn as HTMLElement).dataset.index ?? '0');
-        select(idx);
-      });
-    });
-  }
-
-  function select(idx: number) {
-    const item = items[idx];
-    if (item) command(item);
-  }
-
-  function updateSelection(idx: number) {
-    selectedIndex = ((idx % items.length) + items.length) % items.length;
-    render();
-  }
-
-  render();
-
-  return {
-    el,
-    update(newItems: MentionItem[], newCommand: (item: MentionItem) => void) {
-      items = newItems;
-      command = newCommand;
-      selectedIndex = 0;
-      render();
-    },
-    onKeyDown(key: string): boolean {
-      if (key === 'ArrowUp') { updateSelection(selectedIndex - 1); return true; }
-      if (key === 'ArrowDown') { updateSelection(selectedIndex + 1); return true; }
-      if (key === 'Enter') { select(selectedIndex); return true; }
-      return false;
-    },
-  };
-}
-
-export function createMentionSuggestion(mentionsUrl: string) {
-  return {
-    char: '@',
-    allowSpaces: false,
-    items: async ({ query }: { query: string }): Promise<MentionItem[]> => {
-      if (!query || query.length < 1) {
-        return [{ id: 'hint', label: 'Type to search users…', type: 'user' } as any];
-      }
-      try {
-        const sep = mentionsUrl.includes('?') ? '&' : '?';
-        const res = await fetch(`${mentionsUrl}${sep}query=${encodeURIComponent(query)}`, {
-          headers: { Accept: 'application/json' },
-        });
-        if (!res.ok) return [];
-        const data = await res.json();
-        return Array.isArray(data.suggestions) ? data.suggestions : [];
-      } catch {
-        return [];
-      }
-    },
-    render: () => {
-      let dropdown: ReturnType<typeof createDropdown>;
-      let popup: Instance<TippyProps>[];
-
-      return {
-        onStart(props: any) {
-          dropdown = createDropdown({ items: props.items, command: (item) => props.command({ id: item.id, label: item.label, type: item.type, slug: item.slug }) });
-          if (!props.clientRect) return;
-          popup = tippy('body', {
-            getReferenceClientRect: props.clientRect,
-            appendTo: () => document.body,
-            content: dropdown.el,
-            showOnCreate: true,
-            interactive: true,
-            trigger: 'manual',
-            placement: 'bottom-start',
-          }) as Instance<TippyProps>[];
-        },
-        onUpdate(props: any) {
-          dropdown.update(props.items, (item) => props.command({ id: item.id, label: item.label, type: item.type, slug: item.slug }));
-          if (props.clientRect && popup?.[0]) {
-            popup[0].setProps({ getReferenceClientRect: props.clientRect });
-          }
-        },
-        onKeyDown(props: any) {
-          if (props.event.key === 'Escape') { popup?.[0]?.hide(); return true; }
-          return dropdown.onKeyDown(props.event.key);
-        },
-        onExit() {
-          popup?.[0]?.destroy();
-          dropdown.el.remove();
-        },
-      };
-    },
-  };
-}

package/src/lib/components/ui/table/Table.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
-
-  let { children, class: className }: { children: Snippet; class?: string } = $props();
-</script>
-
-<div class={cn("w-full overflow-auto", className)}>
-  <table class="w-full caption-bottom text-sm">
-    {@render children()}
-  </table>
-</div>

package/src/lib/components/ui/table/Table.test.ts

@@ -1,317 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/svelte";
-import Table from "./Table.svelte";
-import TableHeader from "./TableHeader.svelte";
-import TableBody from "./TableBody.svelte";
-import TableRow from "./TableRow.svelte";
-import TableHead from "./TableHead.svelte";
-import TableCell from "./TableCell.svelte";
-import TableCaption from "./TableCaption.svelte";
-
-describe("Table", () => {
-  it("renders a div wrapper with overflow-auto", () => {
-    const { container } = render(Table, {
-      props: { children: (() => {}) as any },
-    });
-    const wrapper = container.querySelector("div");
-    expect(wrapper).not.toBeNull();
-    expect(wrapper!.className).toContain("overflow-auto");
-  });
-
-  it("renders a table element inside the wrapper", () => {
-    const { container } = render(Table, {
-      props: { children: (() => {}) as any },
-    });
-    const table = container.querySelector("table");
-    expect(table).not.toBeNull();
-  });
-
-  it("table element has caption-bottom class", () => {
-    const { container } = render(Table, {
-      props: { children: (() => {}) as any },
-    });
-    const table = container.querySelector("table");
-    expect(table!.className).toContain("caption-bottom");
-  });
-
-  it("table element has text-sm class", () => {
-    const { container } = render(Table, {
-      props: { children: (() => {}) as any },
-    });
-    const table = container.querySelector("table");
-    expect(table!.className).toContain("text-sm");
-  });
-
-  it("wrapper has w-full class", () => {
-    const { container } = render(Table, {
-      props: { children: (() => {}) as any },
-    });
-    const wrapper = container.querySelector("div");
-    expect(wrapper!.className).toContain("w-full");
-  });
-
-  it("accepts an extra class on the wrapper", () => {
-    const { container } = render(Table, {
-      props: { children: (() => {}) as any, class: "my-table-wrapper" },
-    });
-    const wrapper = container.querySelector("div");
-    expect(wrapper!.className).toContain("my-table-wrapper");
-  });
-
-  it("does not lose default classes when class prop is provided", () => {
-    const { container } = render(Table, {
-      props: { children: (() => {}) as any, class: "extra" },
-    });
-    const wrapper = container.querySelector("div");
-    expect(wrapper!.className).toContain("overflow-auto");
-    expect(wrapper!.className).toContain("extra");
-  });
-});
-
-describe("TableHeader", () => {
-  it("renders a thead element", () => {
-    const { container } = render(TableHeader, {
-      props: { children: (() => {}) as any },
-    });
-    expect(container.querySelector("thead")).not.toBeNull();
-  });
-
-  it("thead has [&_tr]:border-b class", () => {
-    const { container } = render(TableHeader, {
-      props: { children: (() => {}) as any },
-    });
-    const thead = container.querySelector("thead");
-    expect(thead!.className).toContain("[&_tr]:border-b");
-  });
-
-  it("thead has [&_tr]:border-border class", () => {
-    const { container } = render(TableHeader, {
-      props: { children: (() => {}) as any },
-    });
-    const thead = container.querySelector("thead");
-    expect(thead!.className).toContain("[&_tr]:border-border");
-  });
-
-  it("accepts an extra class", () => {
-    const { container } = render(TableHeader, {
-      props: { children: (() => {}) as any, class: "my-header" },
-    });
-    const thead = container.querySelector("thead");
-    expect(thead!.className).toContain("my-header");
-  });
-});
-
-describe("TableBody", () => {
-  it("renders a tbody element", () => {
-    const { container } = render(TableBody, {
-      props: { children: (() => {}) as any },
-    });
-    expect(container.querySelector("tbody")).not.toBeNull();
-  });
-
-  it("tbody has [&_tr:last-child]:border-0 class", () => {
-    const { container } = render(TableBody, {
-      props: { children: (() => {}) as any },
-    });
-    const tbody = container.querySelector("tbody");
-    expect(tbody!.className).toContain("[&_tr:last-child]:border-0");
-  });
-
-  it("accepts an extra class", () => {
-    const { container } = render(TableBody, {
-      props: { children: (() => {}) as any, class: "my-body" },
-    });
-    const tbody = container.querySelector("tbody");
-    expect(tbody!.className).toContain("my-body");
-  });
-});
-
-describe("TableRow", () => {
-  it("renders a tr element", () => {
-    const { container } = render(TableRow, {
-      props: { children: (() => {}) as any },
-    });
-    expect(container.querySelector("tr")).not.toBeNull();
-  });
-
-  it("tr has border-b class", () => {
-    const { container } = render(TableRow, {
-      props: { children: (() => {}) as any },
-    });
-    const tr = container.querySelector("tr");
-    expect(tr!.className).toContain("border-b");
-  });
-
-  it("tr has hover:bg-accent/50 class", () => {
-    const { container } = render(TableRow, {
-      props: { children: (() => {}) as any },
-    });
-    const tr = container.querySelector("tr");
-    expect(tr!.className).toContain("hover:bg-accent/50");
-  });
-
-  it("tr has transition-colors class", () => {
-    const { container } = render(TableRow, {
-      props: { children: (() => {}) as any },
-    });
-    const tr = container.querySelector("tr");
-    expect(tr!.className).toContain("transition-colors");
-  });
-
-  it("accepts an extra class", () => {
-    const { container } = render(TableRow, {
-      props: { children: (() => {}) as any, class: "bg-muted/20" },
-    });
-    const tr = container.querySelector("tr");
-    expect(tr!.className).toContain("bg-muted/20");
-  });
-
-  it("does not lose base classes when extra class is added", () => {
-    const { container } = render(TableRow, {
-      props: { children: (() => {}) as any, class: "extra" },
-    });
-    const tr = container.querySelector("tr");
-    expect(tr!.className).toContain("border-b");
-    expect(tr!.className).toContain("extra");
-  });
-});
-
-describe("TableHead", () => {
-  it("renders a th element", () => {
-    const { container } = render(TableHead, {
-      props: { children: (() => {}) as any },
-    });
-    expect(container.querySelector("th")).not.toBeNull();
-  });
-
-  it("th has h-9 class", () => {
-    const { container } = render(TableHead, {
-      props: { children: (() => {}) as any },
-    });
-    const th = container.querySelector("th");
-    expect(th!.className).toContain("h-9");
-  });
-
-  it("th has text-left class", () => {
-    const { container } = render(TableHead, {
-      props: { children: (() => {}) as any },
-    });
-    const th = container.querySelector("th");
-    expect(th!.className).toContain("text-left");
-  });
-
-  it("th has uppercase class", () => {
-    const { container } = render(TableHead, {
-      props: { children: (() => {}) as any },
-    });
-    const th = container.querySelector("th");
-    expect(th!.className).toContain("uppercase");
-  });
-
-  it("th has text-muted-foreground class", () => {
-    const { container } = render(TableHead, {
-      props: { children: (() => {}) as any },
-    });
-    const th = container.querySelector("th");
-    expect(th!.className).toContain("text-muted-foreground");
-  });
-
-  it("accepts an extra class", () => {
-    const { container } = render(TableHead, {
-      props: { children: (() => {}) as any, class: "w-1/4" },
-    });
-    const th = container.querySelector("th");
-    expect(th!.className).toContain("w-1/4");
-  });
-});
-
-describe("TableCell", () => {
-  it("renders a td element", () => {
-    const { container } = render(TableCell, {
-      props: { children: (() => {}) as any },
-    });
-    expect(container.querySelector("td")).not.toBeNull();
-  });
-
-  it("td has px-4 class", () => {
-    const { container } = render(TableCell, {
-      props: { children: (() => {}) as any },
-    });
-    const td = container.querySelector("td");
-    expect(td!.className).toContain("px-4");
-  });
-
-  it("td has py-2.5 class", () => {
-    const { container } = render(TableCell, {
-      props: { children: (() => {}) as any },
-    });
-    const td = container.querySelector("td");
-    expect(td!.className).toContain("py-2.5");
-  });
-
-  it("td has align-middle class", () => {
-    const { container } = render(TableCell, {
-      props: { children: (() => {}) as any },
-    });
-    const td = container.querySelector("td");
-    expect(td!.className).toContain("align-middle");
-  });
-
-  it("accepts an extra class", () => {
-    const { container } = render(TableCell, {
-      props: { children: (() => {}) as any, class: "font-mono" },
-    });
-    const td = container.querySelector("td");
-    expect(td!.className).toContain("font-mono");
-  });
-
-  it("does not lose base classes when extra class is added", () => {
-    const { container } = render(TableCell, {
-      props: { children: (() => {}) as any, class: "extra" },
-    });
-    const td = container.querySelector("td");
-    expect(td!.className).toContain("px-4");
-    expect(td!.className).toContain("extra");
-  });
-});
-
-describe("TableCaption", () => {
-  it("renders a caption element", () => {
-    const { container } = render(TableCaption, {
-      props: { children: (() => {}) as any },
-    });
-    expect(container.querySelector("caption")).not.toBeNull();
-  });
-
-  it("caption has mt-4 class", () => {
-    const { container } = render(TableCaption, {
-      props: { children: (() => {}) as any },
-    });
-    const caption = container.querySelector("caption");
-    expect(caption!.className).toContain("mt-4");
-  });
-
-  it("caption has text-xs class", () => {
-    const { container } = render(TableCaption, {
-      props: { children: (() => {}) as any },
-    });
-    const caption = container.querySelector("caption");
-    expect(caption!.className).toContain("text-xs");
-  });
-
-  it("caption has text-muted-foreground class", () => {
-    const { container } = render(TableCaption, {
-      props: { children: (() => {}) as any },
-    });
-    const caption = container.querySelector("caption");
-    expect(caption!.className).toContain("text-muted-foreground");
-  });
-
-  it("accepts an extra class", () => {
-    const { container } = render(TableCaption, {
-      props: { children: (() => {}) as any, class: "italic" },
-    });
-    const caption = container.querySelector("caption");
-    expect(caption!.className).toContain("italic");
-  });
-});

package/src/lib/components/ui/table/TableBody.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
-
-  let { children, class: className }: { children: Snippet; class?: string } = $props();
-</script>
-
-<tbody class={cn("[&_tr:last-child]:border-0", className)}>
-  {@render children()}
-</tbody>

package/src/lib/components/ui/table/TableCaption.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
-
-  let { children, class: className }: { children: Snippet; class?: string } = $props();
-</script>
-
-<caption class={cn("mt-4 text-xs text-muted-foreground", className)}>
-  {@render children()}
-</caption>

package/src/lib/components/ui/table/TableCell.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
-
-  let { children, class: className, ...rest }: { children?: Snippet; class?: string; [key: string]: unknown } = $props();
-</script>
-
-<td class={cn("px-4 py-2.5 align-middle [&:has([role=checkbox])]:pr-0", className)} {...rest}>
-  {@render children?.()}
-</td>

package/src/lib/components/ui/table/TableHead.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
-
-  let { children, class: className, ...rest }: { children?: Snippet; class?: string; [key: string]: unknown } = $props();
-</script>
-
-<th class={cn("h-9 px-4 text-left align-middle text-[10px] font-semibold uppercase tracking-wide text-muted-foreground [&:has([role=checkbox])]:pr-0", className)} {...rest}>
-  {@render children?.()}
-</th>

package/src/lib/components/ui/table/TableHeader.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
-
-  let { children, class: className }: { children: Snippet; class?: string } = $props();
-</script>
-
-<thead class={cn("[&_tr]:border-b [&_tr]:border-border", className)}>
-  {@render children()}
-</thead>

package/src/lib/components/ui/table/TableRow.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { cn } from '$lib/utils/cn.js';
-
-  let { children, class: className }: { children: Snippet; class?: string } = $props();
-</script>
-
-<tr class={cn("border-b border-border transition-colors hover:bg-accent/50 data-[state=selected]:bg-accent", className)}>
-  {@render children()}
-</tr>

package/src/lib/components/ui/table/index.ts

@@ -1,7 +0,0 @@
-export { default as Table } from './Table.svelte';
-export { default as TableHeader } from './TableHeader.svelte';
-export { default as TableBody } from './TableBody.svelte';
-export { default as TableRow } from './TableRow.svelte';
-export { default as TableHead } from './TableHead.svelte';
-export { default as TableCell } from './TableCell.svelte';
-export { default as TableCaption } from './TableCaption.svelte';