feat: init playground

apps/frontend/package.json

@@ -10,7 +10,8 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test": "vitest",
     "lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "clean": "bunx rimraf node_modules"
   },
   "devDependencies": {
     "@fontsource/fira-mono": "^5.1.0",

apps/frontend/src/lib/components/blocks/aggregate/aggregate.svelte

@@ -8,6 +8,7 @@
   import * as Tooltip from "$lib/components/ui/tooltip"
   import type { TableDo } from "@undb/table"
   import { getDataService, getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let tableId: string | undefined
   export let table: TableDo | undefined
@@ -22,6 +23,7 @@
   $: isValid = isValidWidget(widget) && !!tableId
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const getAggregate = createQuery({
     queryKey: ["aggregate", widget.id],
@@ -41,7 +43,7 @@
           ignoreView,
         })
       }
-      const dataService = await getDataService(isLocal)
+      const dataService = await getDataService(isLocal, isPlayground)
       return dataService.records.getAggregates({
         tableId: tableId!,
         viewId,

apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records.svelte

@@ -21,13 +21,16 @@
   import * as Form from "$lib/components/ui/form"
   import * as Alert from "$lib/components/ui/alert/index.js"
   import { PencilIcon } from "lucide-svelte"
-  import type { IBulkUpdateRecordsCommandOutput } from "@undb/commands"
+  import type { IBulkUpdateRecordsCommand, IBulkUpdateRecordsCommandOutput } from "@undb/commands"
   import * as AlertDialog from "$lib/components/ui/alert-dialog"
   import FiltersEditor from "../filters-editor/filters-editor.svelte"
   import { writable, type Writable } from "svelte/store"
   import autoAnimate from "@formkit/auto-animate"
   import type { Readable } from "svelte/store"
   import { LL } from "@undb/i18n/client"
+  import { getDataService, getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+
 
   const table = getTable()
   export let viewId: Readable<string | undefined>
@@ -41,13 +44,19 @@
   export let filter: IViewFilterGroup | undefined = undefined
   export let onSuccess: (data: IBulkUpdateRecordsCommandOutput) => void = () => {}
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   let selectedFieldIds: string[] = []
   $: selectedFields = selectedFieldIds.map((id) => $table.schema.getFieldById(new FieldIdVo(id)).unwrap())
 
   const client = useQueryClient()
 
   const updateRecordMutation = createMutation({
-    mutationFn: trpc.record.bulkUpdate.mutate,
+    mutationFn: async (command: IBulkUpdateRecordsCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecords(command)
+    },
     onSuccess: async (data) => {
       if (!data.modifiedCount) {
         toast.warning($LL.table.record.bulkUpdate.noRecordsUpdated())

apps/frontend/src/lib/components/blocks/calendar-view/calendar-date-remove-button.svelte

@@ -4,11 +4,13 @@
   import { type RecordDO, CalendarView, DateFieldValue, FieldIdVo } from "@undb/table"
   import { getRecordsStore } from "$lib/store/records.store"
   import { getTable } from "$lib/store/table.store"
-  import { trpc } from "$lib/trpc/client"
   import { createMutation } from "@tanstack/svelte-query"
   import { useQueryClient } from "@tanstack/svelte-query"
   import { cn } from "$lib/utils"
   import { calendarStore } from "$lib/store/calendar.store"
+  import { getDataService, getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let view: CalendarView
 
@@ -19,8 +21,14 @@
 
   let field = fieldId ? $t.schema.getFieldById(new FieldIdVo(fieldId)).into(undefined) : undefined
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateRecord = createMutation({
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
   })
 
   const client = useQueryClient()

apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-day-timeline.svelte

@@ -30,6 +30,8 @@
   import { tick } from "svelte"
   import { hasPermission } from "$lib/store/space-member.store"
   import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let viewId: Readable<string | undefined>
   export let view: CalendarView
@@ -105,6 +107,7 @@
   const q = queryParam("q")
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const getRecords = createQuery(
     derived([t, viewId, q, date], ([$table, $viewId, $q, $date]) => {
@@ -113,7 +116,7 @@
         queryKey: ["records", $table?.id.value, $viewId, $q, $date.toISOString()],
         enabled: view?.type === "calendar" && !disableRecordQuery,
         queryFn: async () => {
-          const dataService = await getDataService(isLocal)
+          const dataService = await getDataService(isLocal, isPlayground)
           const value = format($date, "yyyy-MM-dd")
           if (shareId) {
             return trpc.shareData.records.query({
@@ -255,7 +258,10 @@
   let overMinutes: number | undefined = undefined
 
   const updateRecord = createMutation({
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
   })
 
   const client = useQueryClient()

apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-date.svelte

@@ -17,6 +17,9 @@
   import { CREATE_RECORD_MODAL, openModal } from "$lib/store/modal.store"
   import { defaultRecordValues } from "$lib/store/records.store"
   import { type Readable } from "svelte/store"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let field: DateField | DateRangeField
   export let date: Date
@@ -33,6 +36,9 @@
   const isSelected = calendarStore.isSelected
   const getIsSameMonth = calendarStore.getIsSameMonth
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   $: color = $viewId ? $table.views.getViewById($viewId)?.color.into(undefined) : undefined
 
   $: day = getDate(date)
@@ -84,7 +90,10 @@
   }
 
   const updateRecord = createMutation({
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
   })
 
   const client = useQueryClient()

apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records.svelte

@@ -21,6 +21,7 @@
   import { type MaybeConditionGroup, type IViewFilterOptionSchema } from "@undb/table"
   import { LL } from "@undb/i18n/client"
   import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let viewId: Readable<string | undefined>
   export let view: CalendarView
@@ -31,6 +32,7 @@
 
   const t = getTable()
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   let defaultField = $t.schema.getDefaultDisplayField().into(undefined)
 
@@ -100,7 +102,7 @@
         return {
           queryKey: ["records", $table?.id.value, $viewId, $scope, dateString, $search],
           queryFn: async ({ pageParam = 1 }) => {
-            const dataService = await getDataService(isLocal)
+            const dataService = await getDataService(isLocal, isPlayground)
             if (shareId) {
               return trpc.shareData.records.query({
                 shareId,

apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month.svelte

@@ -13,6 +13,7 @@
   import CalendarViewMonthRecords from "./calendar-view-month-records.svelte"
   import CalendarViewMonthDate from "./calendar-view-month-date.svelte"
   import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let viewId: Readable<string | undefined>
   export let view: CalendarView
@@ -28,6 +29,7 @@
   const t = getTable()
   const q = queryParam("q")
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const getRecords = createQuery(
     derived([t, viewId, q, startTimestamp, endTimestamp], ([$table, $viewId, $q, $startTimestamp, $endTimestamp]) => {
@@ -43,7 +45,7 @@
         ],
         enabled: view?.type === "calendar" && !!$startTimestamp && !!$endTimestamp && !disableRecordQuery,
         queryFn: async () => {
-          const dataService = await getDataService(isLocal)
+          const dataService = await getDataService(isLocal, isPlayground)
           if (shareId) {
             return trpc.shareData.records.query({
               shareId,

apps/frontend/src/lib/components/blocks/create-base/create-base.svelte

@@ -1,26 +1,37 @@
 <script lang="ts">
   import * as Form from "$lib/components/ui/form"
-  import { trpc } from "$lib/trpc/client.js"
   import { createMutation } from "@tanstack/svelte-query"
   import { superForm, defaults } from "sveltekit-superforms"
-  import { createBaseCommand } from "@undb/commands"
+  import { createBaseCommand, type ICreateBaseCommand } from "@undb/commands"
   import { zodClient } from "sveltekit-superforms/adapters"
   import { Input } from "$lib/components/ui/input"
   import { toast } from "svelte-sonner"
   import { CREATE_BASE_MODAL, closeModal } from "$lib/store/modal.store"
   import { goto, invalidateAll } from "$app/navigation"
   import { LoaderCircleIcon } from "lucide-svelte"
-  import { tick } from "svelte"
   import { getNextName } from "@undb/utils"
   import { LL } from "@undb/i18n/client"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const mutation = createMutation({
-    mutationFn: trpc.base.create.mutate,
+    mutationFn: async (command: ICreateBaseCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.base.createBase(command)
+    },
     async onSuccess(data) {
       form.reset()
-      await goto(`/bases/${data}`)
-      await invalidateAll()
+      if (isPlayground) {
+        await goto(`/playground/bases/${data}`)
+      } else {
+        await goto(`/bases/${data}`)
+        await invalidateAll()
+      }
       closeModal(CREATE_BASE_MODAL)
+      toast.success($LL.base.created())
     },
     onError(error) {
       toast.error(error.message)
@@ -67,11 +78,11 @@
         {...attrs}
         disabled={$mutation.isPending}
         bind:value={$formData.name}
-        placeholder="{$LL.base.displayName()}"
+        placeholder={$LL.base.displayName()}
       />
     </Form.Control>
     <Form.FieldErrors />
-</Form.Field>
+  </Form.Field>
 
   <div class="flex items-center justify-end gap-2">
     <Form.FormButton type="button" variant="secondary" on:click={() => closeModal(CREATE_BASE_MODAL)}>

apps/frontend/src/lib/components/blocks/create-field/create-field.svelte

@@ -15,18 +15,27 @@
   import FieldTypePicker from "../field-picker/field-type-picker.svelte"
   import { LL } from "@undb/i18n/client"
   import { BetweenVerticalStartIcon, LoaderCircleIcon } from "lucide-svelte"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type ICreateFieldCommand } from "@undb/commands"
 
   const table = getTable()
 
   export let onSuccess: () => void = () => {}
 
   let name = ""
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const client = useQueryClient()
   const createFieldMutation = createMutation(
     derived([table], ([$table]) => ({
       mutationKey: ["table", $table.id.value, "createField"],
-      mutationFn: trpc.table.field.create.mutate,
+      mutationFn: async (command: ICreateFieldCommand) => {
+        const dataService = await getDataService(isLocal, isPlayground)
+        return dataService.table.field.createField(command)
+      },
       async onSuccess() {
         toast.success($LL.table.field.created())
         reset()

apps/frontend/src/lib/components/blocks/create-record/create-record.svelte

@@ -14,10 +14,12 @@
   import { defaultRecordValues, getRecordsStore } from "$lib/store/records.store"
   import { useMediaQuery } from "$lib/store/media-query.store"
   import IdControl from "../field-control/id-control.svelte"
-  import type { ICreateRecordCommandOutput } from "@undb/commands"
+  import type { ICreateRecordCommand, ICreateRecordCommandOutput } from "@undb/commands"
   import { onMount } from "svelte"
   import { LL } from "@undb/i18n/client"
-  import { getIsLocal } from "$lib/store/data-service.store"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+    import { getIsPlayground } from "$lib/store/playground.svelte"
+
 
   // beforeNavigate(({ cancel }) => {
   //   if ($tainted) {
@@ -42,18 +44,22 @@
 
   const mediaQuery = useMediaQuery("(max-width: 768px)")
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const createRecordMutation = createMutation(
     derived([table], ([$table]) => ({
-      mutationFn: trpc.record.create.mutate,
+      mutationFn: async (command: ICreateRecordCommand) => {
+        const dataService = await getDataService(isLocal, isPlayground)
+        return dataService.records.createRecord(command)
+      },
       mutationKey: [$table.id.value, "createRecord"],
       onSuccess: (data: ICreateRecordCommandOutput) => {
         client.invalidateQueries({
           queryKey: ["records", $table.id.value],
         })
         toast.success($LL.table.record.createdRecord())
         onSuccess?.(data)
-        recordsStore?.invalidateRecord(isLocal, $table, data)
+        recordsStore?.invalidateRecord(isLocal, isPlayground, $table, data)
       },
       onError: (error: Error) => {
         toast.error(error.message)

apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget.svelte

@@ -7,6 +7,7 @@
   import { getIsLocal } from "$lib/store/data-service.store"
   import { getDataService } from "$lib/store/data-service.store"
   import { createQuery } from "@tanstack/svelte-query"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let tableId: string | undefined
   export let shareId: string | undefined = undefined
@@ -16,6 +17,7 @@
   export let resizePointerDown: ((e: Event) => void) | undefined = undefined
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const shareStore = new GetDashboardWidgetShareTableStore()
 
@@ -27,7 +29,7 @@
 
   const getTable = createQuery({
     queryFn: async () => {
-      const dataService = await getDataService(isLocal)
+      const dataService = await getDataService(isLocal, isPlayground)
       return dataService.table.getTable({ tableId: tableId! })
     },
     queryKey: ["dashboard-widget-table", tableId],