APP-2302 Migrate table to prime-core (#323)

viamrobotics · Aug 21, 2023 · 427d178 · 427d178
1 parent e09adae
commit 427d178
Show file tree

Hide file tree

Showing 24 changed files with 666 additions and 62 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/core/src/lib/collapse.spec.svelte b/packages/core/src/lib/collapse.spec.svelte
@@ -10,38 +10,65 @@
 
 <script lang="ts">
 import Collapse from './collapse.svelte';
-import Badge from './badge.svelte'
+import Badge from './badge.svelte';
 import Breadcrumbs from './breadcrumbs.svelte';
 </script>
 
 <div class="flex gap-4">
   <!-- Collapse -->
-  <Collapse
-    title='Number 1'
-  >
-    <div slot='content' class="text-sm p-4 border border-t-0 border-light">One is the loneliest number.</div>
+  <Collapse title="Number 1">
+    <div
+      slot="content"
+      class="border border-t-0 border-light p-4 text-sm"
+    >
+      One is the loneliest number.
+    </div>
   </Collapse>
 
-  <Collapse
-    title='Number 2'
-  >
-    <Badge slot='header' label='Inactive'></Badge>
-    <div slot='content' class="text-sm p-4 border border-t-0 border-light">Two can be as bad as one, its the loneliest number since the number one.</div>
+  <Collapse title="Number 2">
+    <Badge
+      slot="header"
+      label="Inactive"
+    />
+    <div
+      slot="content"
+      class="border border-t-0 border-light p-4 text-sm"
+    >
+      Two can be as bad as one, its the loneliest number since the number one.
+    </div>
   </Collapse>
 
-    <Collapse
-      title='Number 3'
+  <Collapse title="Number 3">
+    <Breadcrumbs
+      slot="title"
+      crumbs={['Hi', 'Hello']}
+    />
+    <Badge
+      slot="header"
+      label="Active"
+    />
+    <div
+      slot="content"
+      class="border border-t-0 border-light p-4 text-sm"
     >
-      <Breadcrumbs slot='title' crumbs={['Hi', 'Hello']}></Breadcrumbs>
-      <Badge slot='header' label='Active'></Badge>
-      <div slot='content' class="text-sm p-4 border border-t-0 border-light">Three is company.</div>
-    </Collapse>
+      Three is company.
+    </div>
+  </Collapse>
 
-    <Collapse
-      title='Number 4'
+  <Collapse title="Number 4">
+    <Breadcrumbs
+      slot="title"
+      crumbs={['Howdy', 'Hey']}
+    />
+    <Badge
+      slot="header"
+      label="Busy"
+    />
+    <div
+      slot="content"
+      class="border border-t-0 border-light p-4 text-sm"
     >
-      <Breadcrumbs slot='title' crumbs={['Howdy', 'Hey']}></Breadcrumbs>
-      <Badge slot='header' label='Busy'></Badge>
-      <div slot='content' class="text-sm p-4 border border-t-0 border-light">I am number 4.</div>
-    </Collapse>
-</div>
+      I am number 4.
+    </div>
+  </Collapse>
+</div>
diff --git a/packages/core/src/lib/collapse.svelte b/packages/core/src/lib/collapse.svelte
@@ -31,8 +31,8 @@ export let open = false;
 
 type Events = {
   /** Fires when the collapse is toggled */
-  toggle: boolean 
-}
+  toggle: boolean;
+};
 
 const dispatch = createEventDispatcher<Events>();
 
@@ -47,36 +47,33 @@ const handleClick = () => {
     role="button"
     aria-label="Toggle Content"
     tabindex="0"
-    class="w-full py-2 px-4 flex items-center justify-between text-default cursor-pointer border border-light bg-white"
+    class="flex w-full cursor-pointer items-center justify-between border border-light bg-white px-4 py-2 text-default"
     on:click={handleClick}
     on:keyup|preventDefault={handleClick}
   >
-    <div class="flex flex-wrap gap-x-3 gap-y-1 items-center">
+    <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
       {#if title}
         <h2 class="m-0 text-sm">{title}</h2>
       {/if}
 
       <slot name="title" />
     </div>
 
-    <div class="h-full flex items-center gap-3">
+    <div class="flex h-full items-center gap-3">
       <slot name="header" />
 
       <div
-      class={cx(
-        'transition-transform duration-200',
-        {
+        class={cx('transition-transform duration-200', {
           'rotate-0': !open,
           'rotate-180': open,
-        }
-      )}
-    >
-      <Icon name="chevron-down" />
-    </div>
+        })}
+      >
+        <Icon name="chevron-down" />
+      </div>
     </div>
   </div>
 
   {#if open}
-      <slot name="content"/>
+    <slot name="content" />
   {/if}
 </div>
diff --git a/packages/core/src/lib/context-menu/context-menu-item.svelte b/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

diff --git a/packages/core/src/lib/context-menu/context-menu-separator.svelte b/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" />
diff --git a/packages/core/src/lib/context-menu/context-menu.spec.svelte b/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`.
 

diff --git a/packages/core/src/lib/context-menu/context-menu.svelte b/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

diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
@@ -29,3 +29,10 @@ export {
   default as TextInput,
   type TextInputTypes,
 } from './input/text-input.svelte';
+
+export { default as Table } from './table/table.svelte';
+export { default as TableHeader } from './table/table-header.svelte';
+export { default as TableHeaderCell } from './table/table-header-cell.svelte';
+export { default as TableBody } from './table/table-body.svelte';
+export { default as TableRow } from './table/table-row.svelte';
+export { default as TableCell } from './table/table-cell.svelte';
diff --git a/packages/core/src/lib/input/input.svelte b/packages/core/src/lib/input/input.svelte
@@ -48,8 +48,7 @@ $: icon = {
   warn: 'alert',
   error: 'alert-circle',
   none: '',
-}[state]
-
+}[state];
 </script>
 
 <div class="relative w-full">

diff --git a/packages/core/src/lib/input/numeric-input.svelte b/packages/core/src/lib/input/numeric-input.svelte
@@ -33,7 +33,6 @@ export let input: HTMLInputElement | undefined = undefined;
 
 $: isNumber = type === 'number';
 $: pattern = isNumber ? '^([-+,0-9.]+)' : '[0-9]+';
-
 </script>
 
 <Input
@@ -42,6 +41,6 @@ $: pattern = isNumber ? '^([-+,0-9.]+)' : '[0-9]+';
   {step}
   {...$$restProps}
   bind:value
-  bind:input={input}
+  bind:input
   on:input
 />
diff --git a/packages/core/src/lib/input/slider-input.svelte b/packages/core/src/lib/input/slider-input.svelte
@@ -146,9 +146,9 @@ const handlePointerDown = async (event: PointerEvent) => {
     {type}
     {step}
     {...$$restProps}
-    style='padding-left: 0.75rem;'
+    style="padding-left: 0.75rem;"
     bind:value
-    bind:input={input}
+    bind:input
     on:input
     on:keydown
   />
@@ -159,7 +159,7 @@ const handlePointerDown = async (event: PointerEvent) => {
     {#if isDragging}
       <div
         bind:this={numberDragCord}
-        class="pointer-events-none mt-[calc(13px)] h-px bg-gray-400 z-100"
+        class="z-100 pointer-events-none mt-[calc(13px)] h-px bg-gray-400"
       />
       <div
         bind:this={numberDragHead}

diff --git a/packages/core/src/lib/table/table-body.svelte b/packages/core/src/lib/table/table-body.svelte
@@ -0,0 +1,31 @@
+<!--
+@component
+  
+A table body.
+```svelte
+<Table>
+  <TableBody></TableBody>
+</Table>
+```
+-->
+<svelte:options immutable />
+
+<script lang="ts">
+/**
+ * Custom table body style
+ * ```
+ * <TableBody style="text-align:center">
+ * ```
+ */
+export let style = '';
+</script>
+
+<tbody {style}>
+  <slot />
+</tbody>
+
+<style>
+:host {
+  display: contents !important;
+}
+</style>
diff --git a/packages/core/src/lib/table/table-cell.svelte b/packages/core/src/lib/table/table-cell.svelte
@@ -0,0 +1,37 @@
+<!--
+@component
+  
+A table body.
+```svelte
+<Table>
+  <TableBody>
+    <TableCell></TableCell>
+  </TableBody>
+</Table>
+```
+-->
+<svelte:options immutable />
+
+<script lang="ts">
+/**
+ * Custom table cell style
+ * ```
+ * <TableCell style="text-align:center">
+ * ```
+ */
+export let style = '';
+</script>
+
+<td
+  {style}
+  part="table-cell"
+  class="overflow-hidden p-2"
+>
+  <slot />
+</td>
+
+<style>
+:host {
+  display: contents !important;
+}
+</style>
diff --git a/packages/core/src/lib/table/table-header-cell.svelte b/packages/core/src/lib/table/table-header-cell.svelte
@@ -0,0 +1,36 @@
+<!--
+@component
+  
+A table header cell.
+```svelte
+<Table>
+  <TableHeader>
+    <TableHeaderCell></TableHeaderCell>
+  </TableHeader>
+</Table>
+```
+-->
+<svelte:options immutable />
+
+<script lang="ts">
+/**
+ * Custom table header cell style
+ * ```
+ * <TableHeaderCell style="text-align:center">
+ * ```
+ */
+export let style = '';
+</script>
+
+<th
+  {style}
+  class="overflow-hidden p-2 font-normal text-default"
+>
+  <slot />
+</th>
+
+<style>
+:host {
+  display: contents !important;
+}
+</style>