Merge pull request #1869 from undb-io/release/v1.0.0-7

Release version v1.0.0-7
undb-io · Aug 12, 2024 · 98cf60b · 98cf60b
2 parents 76a542e + a1af19a
commit 98cf60b
Show file tree

Hide file tree

Showing 36 changed files with 487 additions and 82 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
 # Changelog
 
 
+## v1.0.0-7
+
 ## v1.0.0-6
 
 

diff --git a/apps/backend/package.json b/apps/backend/package.json
@@ -8,8 +8,8 @@
     "build:docker": "bun build --compile src/index.ts --target=bun --packages=external --sourcemap --outfile undb"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.626.0",
-    "@aws-sdk/s3-request-presigner": "^3.626.0",
+    "@aws-sdk/client-s3": "^3.627.0",
+    "@aws-sdk/s3-request-presigner": "^3.627.0",
     "@elysiajs/cors": "^1.1.0",
     "@elysiajs/cron": "^1.1.0",
     "@elysiajs/html": "^1.1.0",

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -19,8 +19,8 @@
     "@neoconfetti/svelte": "^2.2.1",
     "@svelte-put/copy": "^3.0.2",
     "@svelte-put/shortcut": "^3.1.1",
-    "@sveltejs/adapter-static": "^3.0.2",
-    "@sveltejs/kit": "^2.5.20",
+    "@sveltejs/adapter-static": "^3.0.3",
+    "@sveltejs/kit": "^2.5.21",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@tanstack/eslint-plugin-query": "^5.51.15",
     "@types/eslint": "^8.56.11",
@@ -39,7 +39,7 @@
     "@undb/trpc": "workspace:*",
     "autoprefixer": "^10.4.20",
     "date-fns": "^3.6.0",
-    "eslint": "^9.8.0",
+    "eslint": "^9.9.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.43.0",
     "houdini": "^1.2.54",
@@ -50,7 +50,7 @@
     "postcss-load-config": "^6.0.1",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
-    "prettier-plugin-tailwindcss": "^0.6.5",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "radash": "^12.1.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "safe-flat": "^2.1.0",
@@ -61,10 +61,10 @@
     "svelte-persisted-store": "^0.11.0",
     "sveltekit-search-params": "^3.0.0",
     "svelvet": "^10.0.2",
-    "tailwindcss": "^3.4.8",
+    "tailwindcss": "^3.4.9",
     "timeago.js": "^4.0.2",
     "tslib": "^2.6.3",
-    "type-fest": "^4.23.0",
+    "type-fest": "^4.24.0",
     "typescript": "^5.5.4",
     "vite": "^5.4.0",
     "vitest": "^2.0.5",
@@ -83,16 +83,16 @@
     "cmdk-sv": "^0.0.18",
     "embla-carousel-svelte": "^8.1.8",
     "formsnap": "^1.0.1",
-    "lucide-svelte": "^0.424.0",
+    "lucide-svelte": "^0.427.0",
     "mode-watcher": "^0.4.1",
     "paneforge": "^0.0.5",
     "svelte-radix": "^1.1.0",
     "svelte-sonner": "^0.3.27",
     "sveltekit-superforms": "^2.16.1",
-    "tailwind-merge": "^2.4.0",
+    "tailwind-merge": "^2.5.0",
     "tailwind-variants": "^0.2.1",
     "trpc-svelte-query-adapter": "^2.3.14",
-    "ts-pattern": "^5.2.0",
+    "ts-pattern": "^5.3.1",
     "vaul-svelte": "^0.3.2"
   }
 }
diff --git a/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import CalendarIcon from "lucide-svelte/icons/calendar"
-  import { DateFormatter, getLocalTimeZone, parseDate } from "@internationalized/date"
+  import { getLocalTimeZone, parseDate, today } from "@internationalized/date"
   import { cn } from "$lib/utils.js"
   import { Button } from "$lib/components/ui/button"
   import { Calendar } from "$lib/components/ui/calendar"
@@ -52,9 +52,17 @@
       }}
       initialFocus
     />
-    <div class="border-t px-2 py-1">
+    <div class="flex items-center gap-1.5 border-t px-2 py-1">
       <Button
-        class="w-full"
+        class="flex-1"
+        variant="outline"
+        on:click={() => {
+          value = today(getLocalTimeZone()).toString()
+          open = false
+        }}>Today</Button
+      >
+      <Button
+        class="flex-1"
         variant="outline"
         on:click={() => {
           if (value) {

diff --git a/apps/frontend/src/lib/components/blocks/field-value/rollup-field.svelte b/apps/frontend/src/lib/components/blocks/field-value/rollup-field.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { cn } from "$lib/utils"
   import type { RollupField } from "@undb/table"
   import { isNumber } from "radash"
 
@@ -8,10 +9,10 @@
   $: fn = field.fn
 </script>
 
-<span class={$$restProps.class}>
+<div class={cn($$restProps.class, "flex-1 overflow-auto")}>
   {#if !!value}
     {#if fn === "lookup" && Array.isArray(value)}
-      <div class="flex overflow-hidden">
+      <div class="flex overflow-x-auto">
         {#each value as item}
           {#if !!item}
             <span
@@ -33,11 +34,5 @@
         {value}
       </span>
     {/if}
-  {:else}
-    <span
-      class="text-muted-foreground me-2 rounded bg-gray-200 px-1 py-0.5 text-xs font-medium dark:bg-gray-700 dark:text-gray-300"
-    >
-      Unamed
-    </span>
   {/if}
-</span>
+</div>
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte
@@ -3,7 +3,7 @@
   import { createMutation } from "@tanstack/svelte-query"
   import type { DateField } from "@undb/table"
   import { toast } from "svelte-sonner"
-  import { parseDate } from "@internationalized/date"
+  import { getLocalTimeZone, parseDate, today } from "@internationalized/date"
   import { Calendar } from "$lib/components/ui/calendar"
   import * as Popover from "$lib/components/ui/popover"
   import { isString, isDate } from "radash"
@@ -78,9 +78,23 @@
             })
           }}
         />
-        <div class="border-t px-2 py-1">
+        <div class="flex items-center gap-1.5 border-t px-2 py-1">
           <Button
-            class="w-full"
+            class="flex-1"
+            variant="outline"
+            on:click={() => {
+              value = today(getLocalTimeZone()).toString()
+              onValueChange(value)
+              $updateCell.mutate({
+                tableId,
+                id: recordId,
+                values: { [field.id.value]: value },
+              })
+              open = false
+            }}>Today</Button
+          >
+          <Button
+            class="flex-1"
             variant="outline"
             on:click={() => {
               if (value) {

diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/rollup-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/rollup-cell.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button"
+  import { cn } from "$lib/utils"
+  import type { RollupField } from "@undb/table"
+  import { Maximize2Icon } from "lucide-svelte"
+  import { isNumber } from "radash"
+  import * as Popover from "$lib/components/ui/popover"
+
+  export let value: string | Array<string | null>
+  export let field: RollupField
+  export let isEditing: boolean
+  export let isSelected: boolean
+
+  $: fn = field.fn
+</script>
+
+<div class={$$restProps.class}>
+  <div class={cn("flex-1 overflow-hidden", (isSelected || isEditing) && "")}>
+    {#if !!value}
+      {#if fn === "lookup" && Array.isArray(value)}
+        <div class="flex overflow-hidden">
+          {#each value as item}
+            {#if !!item}
+              <span
+                class="me-2 rounded bg-gray-200 px-1 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
+              >
+                {item}
+              </span>
+            {:else}
+              <span
+                class="text-muted-foreground me-2 rounded bg-gray-200 px-1 py-0.5 text-xs font-medium dark:bg-gray-700 dark:text-gray-300"
+              >
+                Unamed
+              </span>
+            {/if}
+          {/each}
+        </div>
+      {:else if isNumber(value)}
+        <span>
+          {value}
+        </span>
+      {/if}
+    {/if}
+  </div>
+  {#if (isSelected || isEditing) && ((!Array.isArray(value) && !!value) || (Array.isArray(value) && value.length))}
+    <Popover.Root>
+      <Popover.Trigger asChild let:builder>
+        <Button builders={[builder]} variant="link" class="min-w-4 pl-2 pr-0">
+          <Maximize2Icon class="text-muted-foreground h-3 w-3" />
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content class="grid max-h-[300px] w-[300px] gap-2 overflow-y-auto p-1.5">
+        {#if Array.isArray(value)}
+          {#each value as item}
+            {#if !!item}
+              <span
+                class="me-2 rounded bg-gray-100 px-1 py-1 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
+              >
+                {item}
+              </span>
+            {:else}
+              <span
+                class="text-muted-foreground me-2 rounded bg-gray-100 px-1 py-1 text-xs font-medium dark:bg-gray-700 dark:text-gray-300"
+              >
+                Unamed
+              </span>
+            {/if}
+          {/each}
+        {/if}
+      </Popover.Content>
+    </Popover.Root>
+  {/if}
+</div>
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-cell.svelte
@@ -22,6 +22,7 @@
   import ReadonlyUserCell from "./editable-cell/readonly-user-cell.svelte"
   import { recordsStore } from "$lib/store/records.store"
   import UrlCell from "./editable-cell/url-cell.svelte"
+  import RollupCell from "./editable-cell/rollup-cell.svelte"
 
   const table = getTable()
 
@@ -45,7 +46,7 @@
     createdBy: ReadonlyUserCell,
     updatedBy: ReadonlyUserCell,
     reference: ReferenceCell,
-    rollup: RollupField,
+    rollup: RollupCell,
     select: SelectCell,
     rating: RatingCell,
     email: EmailCell,

diff --git a/apps/frontend/src/lib/components/blocks/record-detail/record-detail-sheet.svelte b/apps/frontend/src/lib/components/blocks/record-detail/record-detail-sheet.svelte
@@ -86,7 +86,7 @@
         <div class="grid h-full grid-cols-4 overflow-hidden">
           {#if recordDo}
             <div class={cn("overflow-hidden", $preferences.showAudit && $r ? "col-span-3" : "col-span-4")}>
-              <ScrollArea class="h-full overflow-auto px-6">
+              <div class="h-full w-full overflow-auto px-6">
                 <RecordDetail
                   onSuccess={async () => {
                     $r = null
@@ -97,7 +97,7 @@
                   record={recordDo}
                   bind:disabled
                 />
-              </ScrollArea>
+              </div>
             </div>
           {/if}
           {#if $preferences.showAudit && $r}

diff --git a/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte b/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
@@ -111,9 +111,9 @@
 >
   {#each fields as field}
     {@const dirty = $tainted && $tainted[field.id.value]}
-    <Form.Field class="flex gap-4 space-y-0" {form} name={field.id.value}>
+    <Form.Field class="flex gap-2 space-y-0" {form} name={field.id.value}>
       <Form.Control let:attrs>
-        <Form.Label class="text-muted-foreground flex h-4 w-48 items-center justify-between gap-2 pt-4">
+        <Form.Label class="text-muted-foreground flex h-4 w-48 shrink-0 items-center justify-between gap-2 pt-4">
           <div class="flex items-center gap-2">
             <FieldIcon {field} type={field.type} class="h-4 w-4" />
             <span class="flex-1 truncate">{field.name.value}</span>
@@ -129,16 +129,16 @@
             {/if}
           </div>
         </Form.Label>
-        <div class="flex-1">
-          {#if field.isSystem}
+        <div class="flex-1 overflow-hidden">
+          {#if field.isSystem || !field.isMutable}
             <FieldValue
               {field}
               tableId={$table.id.value}
               recordId={record.id.value}
               value={values[field.id.value]}
               type={field.type}
               displayValue={displayValues[field.id.value]}
-              class="text-xs"
+              class="min-h-9 text-xs"
             />
           {:else}
             <FieldControl
@@ -159,7 +159,7 @@
   {/each}
 
   {#if hiddenFields.length}
-    <Collapsible.Root bind:open={$preferences.showHiddenFields} class="my-4">
+    <Collapsible.Root bind:open={$preferences.showHiddenFields} class="my-4 w-full">
       <div class="flex w-full items-center gap-1">
         <div class="h-[1px] flex-1 bg-gray-100"></div>
         <Collapsible.Trigger asChild let:builder>
@@ -175,7 +175,7 @@
           {@const dirty = $tainted && $tainted[field.id.value]}
           <Form.Field class="flex gap-4 space-y-0" {form} name={field.id.value}>
             <Form.Control let:attrs>
-              <Form.Label class="text-muted-foreground flex h-4 w-48 items-center justify-between gap-2 pt-2">
+              <Form.Label class="text-muted-foreground flex h-4 w-48 shrink-0 items-center justify-between gap-2 pt-2">
                 <div class="flex items-center gap-2">
                   <FieldIcon {field} type={field.type} class="h-4 w-4" />
                   <span class="flex-1 truncate">{field.name.value}</span>
@@ -191,16 +191,16 @@
                   {/if}
                 </div>
               </Form.Label>
-              <div class="flex-1">
-                {#if field.isSystem}
+              <div class="flex-1 overflow-hidden">
+                {#if field.isSystem || !field.isMutable}
                   <FieldValue
                     {field}
                     tableId={$table.id.value}
                     recordId={record.id.value}
                     value={values[field.id.value]}
                     type={field.type}
                     displayValue={displayValues[field.id.value]}
-                    class="text-xs"
+                    class="min-h-9 text-xs"
                   />
                 {:else}
                   <FieldControl

diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker-dropdown.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker-dropdown.svelte
@@ -6,6 +6,7 @@
   import { ReferenceField, TableCreator } from "@undb/table"
   import Button from "$lib/components/ui/button/button.svelte"
   import { Skeleton } from "$lib/components/ui/skeleton"
+  import { LoaderCircleIcon } from "lucide-svelte"
 
   export let isSelected = false
 
@@ -39,10 +40,8 @@
   <Popover.Content class="h-[400px] max-h-[700px] w-[500px] p-0 lg:max-w-4xl">
     {#if $foreignTableStore.fetching}
       <!-- content here -->
-      <div class="space-y-2 p-4">
-        <Skeleton class="h-[20px] w-full rounded-sm" />
-        <Skeleton class="h-[20px] w-full rounded-sm" />
-        <Skeleton class="h-[20px] w-full rounded-sm" />
+      <div class="flex h-full w-full items-center justify-center space-y-2 p-4">
+        <LoaderCircleIcon class="mr-2 h-8 w-8 animate-spin" />
       </div>
     {/if}
     {#if foreignTable}

diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte
@@ -152,7 +152,7 @@
       </button>
     {/if}
   </div>
-  {#if !records.length && !$getForeignTableRecords.isLoading}
+  {#if !records.length && !$getForeignTableRecords.isFetching}
     <div class="flex flex-1 flex-col items-center justify-center space-y-2 py-8">
       <InboxIcon class="h-12 w-12" />
       <p class="text-muted-foreground text-sm">No available records to link in table {$foreignTable.name.value}</p>
@@ -172,7 +172,7 @@
     </div>
   {:else}
     <div class="flex flex-1 flex-col overflow-hidden">
-      {#if $getForeignTableRecords.isLoading}
+      {#if $getForeignTableRecords.isFetching}
         <div class="flex-1 space-y-2 p-4">
           <div class="h-[80px] space-y-2">
             <Skeleton class="h-[30px] w-[100px] rounded-sm" />