@tulip-systems/core 0.4.0 → 0.5.0

package/src/modules/commands/utils/send-mail-command.client.tsx

@@ -1,187 +1,150 @@
-"use client";
+// "use client";
 
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { ComboboxDropdown } from "@/components/ui/combobox-dropdown.client";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form.client";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
-import { StandardSchemaV1 } from "better-auth";
-import { DefaultValues, FieldValues, useForm } from "react-hook-form";
-import { ZodSchema } from "zod";
-import {
-  CommandFormDialog,
-  CommandFormDialogCancel,
-  CommandFormDialogContent,
-  CommandFormDialogDescription,
-  CommandFormDialogFields,
-  CommandFormDialogFooter,
-  CommandFormDialogHeader,
-  CommandFormDialogSubmit,
-  CommandFormDialogTitle,
-  CommandFormDialogTrigger,
-} from "../components/form-dialog-command.client";
-import { CommandAction } from "../hooks/use-command-action.client";
-import { SingleCommandDefRenderParams } from "../lib/definitions";
-import { SendEmailSchema } from "../lib/schema";
+// export type SendMailCommandMeta = {
+//   contacts: { id: string; name: string; email: string }[];
+// };
 
-export type SendMailCommandMeta = {
-  contacts: { id: string; name: string; email: string }[];
-};
+// export type SendMailCommandProps<
+//   TSchema extends FieldValues,
+//   TData extends { id: string },
+//   TMeta extends SendMailCommandMeta,
+// > = {
+//   schema: ZodSchema<TSchema>;
+//   action: CommandAction<TSchema>;
+//   defaultValues?: DefaultValues<TSchema>;
+//   children?: React.ReactNode;
+// } & Pick<SingleCommandDefRenderParams<TData, TMeta>, "meta">;
 
-export type SendMailCommandProps<
-  TSchema extends FieldValues,
-  TData extends { id: string },
-  TMeta extends SendMailCommandMeta,
-> = {
-  schema: ZodSchema<TSchema>;
-  action: CommandAction<TSchema>;
-  defaultValues?: DefaultValues<TSchema>;
-  children?: React.ReactNode;
-} & Pick<SingleCommandDefRenderParams<TData, TMeta>, "meta">;
+// /**
+//  * SendMail command
+//  * @description command to delete a resource
+//  */
+// export function SendMailCommand<
+//   TSchema extends SendEmailSchema,
+//   TData extends { id: string },
+//   TMeta extends SendMailCommandMeta,
+// >({ schema, action, defaultValues, meta, children }: SendMailCommandProps<TSchema, TData, TMeta>) {
+//   const form = useForm<SendEmailSchema>({
+//     resolver: standardSchemaResolver(schema as StandardSchemaV1<SendEmailSchema>),
+//     defaultValues,
+//   });
 
-/**
- * SendMail command
- * @description command to delete a resource
- */
-export function SendMailCommand<
-  TSchema extends SendEmailSchema,
-  TData extends { id: string },
-  TMeta extends SendMailCommandMeta,
->({ schema, action, defaultValues, meta, children }: SendMailCommandProps<TSchema, TData, TMeta>) {
-  const form = useForm<SendEmailSchema>({
-    resolver: standardSchemaResolver(schema as StandardSchemaV1<SendEmailSchema>),
-    defaultValues,
-  });
+//   const contactComboboxItems = meta.contacts.map((contact) => ({
+//     id: contact.email,
+//     value: contact.name,
+//   }));
 
-  const contactComboboxItems = meta.contacts.map((contact) => ({
-    id: contact.email,
-    value: contact.name,
-  }));
+//   return (
+//     <CommandFormDialog>
+//       {children}
 
-  return (
-    <CommandFormDialog>
-      {children}
+//       <Form {...form}>
+//         <CommandFormDialogContent action={action} message="Succesvol verzonden">
+//           <CommandFormDialogHeader>
+//             <CommandFormDialogTitle>Verzend een e-mail</CommandFormDialogTitle>
 
-      <Form {...form}>
-        <CommandFormDialogContent action={action} message="Succesvol verzonden">
-          <CommandFormDialogHeader>
-            <CommandFormDialogTitle>Verzend een e-mail</CommandFormDialogTitle>
+//             <CommandFormDialogDescription>
+//               Verzend een e-mail naar de geselecteerde contacten.
+//             </CommandFormDialogDescription>
+//           </CommandFormDialogHeader>
 
-            <CommandFormDialogDescription>
-              Verzend een e-mail naar de geselecteerde contacten.
-            </CommandFormDialogDescription>
-          </CommandFormDialogHeader>
+//           <CommandFormDialogFields>
+//             <div className="flex flex-col">
+//               <FormField
+//                 control={form.control}
+//                 name="to"
+//                 render={({ field }) => (
+//                   <FormItem>
+//                     <FormLabel>Ontvanger</FormLabel>
+//                     <FormControl>
+//                       <ComboboxDropdown
+//                         placeholder="Kies een ontvanger..."
+//                         selectedItem={
+//                           contactComboboxItems?.find((contact) => contact.id === field.value) ??
+//                           undefined
+//                         }
+//                         items={contactComboboxItems ?? []}
+//                         onSelect={({ id }) => field.onChange(id)}
+//                       />
+//                     </FormControl>
+//                     <FormMessage />
+//                   </FormItem>
+//                 )}
+//               />
 
-          <CommandFormDialogFields>
-            <div className="flex flex-col">
-              <FormField
-                control={form.control}
-                name="to"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Ontvanger</FormLabel>
-                    <FormControl>
-                      <ComboboxDropdown
-                        placeholder="Kies een ontvanger..."
-                        selectedItem={
-                          contactComboboxItems?.find((contact) => contact.id === field.value) ??
-                          undefined
-                        }
-                        items={contactComboboxItems ?? []}
-                        onSelect={({ id }) => field.onChange(id)}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+//               <Accordion type="single" collapsible>
+//                 <AccordionItem value="cc">
+//                   <AccordionTrigger>{""}</AccordionTrigger>
+//                   <AccordionContent>
+//                     <div className="flex flex-col gap-4 p-1">
+//                       <FormField
+//                         control={form.control}
+//                         name="cc"
+//                         render={({ field }) => (
+//                           <FormItem>
+//                             <FormLabel>cc</FormLabel>
+//                             <FormControl>
+//                               <Input placeholder="Vul hier de cc in..." {...field} />
+//                             </FormControl>
+//                             <FormMessage />
+//                           </FormItem>
+//                         )}
+//                       />
 
-              <Accordion type="single" collapsible>
-                <AccordionItem value="cc">
-                  <AccordionTrigger>{""}</AccordionTrigger>
-                  <AccordionContent>
-                    <div className="flex flex-col gap-4 p-1">
-                      <FormField
-                        control={form.control}
-                        name="cc"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>cc</FormLabel>
-                            <FormControl>
-                              <Input placeholder="Vul hier de cc in..." {...field} />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
+//                       <FormField
+//                         control={form.control}
+//                         name="bcc"
+//                         render={({ field }) => (
+//                           <FormItem>
+//                             <FormLabel>bcc</FormLabel>
+//                             <FormControl>
+//                               <Input placeholder="Vul hier de bcc in..." {...field} />
+//                             </FormControl>
+//                             <FormMessage />
+//                           </FormItem>
+//                         )}
+//                       />
+//                     </div>
+//                   </AccordionContent>
+//                 </AccordionItem>
+//               </Accordion>
+//             </div>
 
-                      <FormField
-                        control={form.control}
-                        name="bcc"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>bcc</FormLabel>
-                            <FormControl>
-                              <Input placeholder="Vul hier de bcc in..." {...field} />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </div>
-                  </AccordionContent>
-                </AccordionItem>
-              </Accordion>
-            </div>
+//             <FormField
+//               control={form.control}
+//               name="subject"
+//               render={({ field }) => (
+//                 <FormItem>
+//                   <FormLabel>Onderwerp</FormLabel>
+//                   <FormControl>
+//                     <Input placeholder="Vul hier het onderwerp in..." {...field} />
+//                   </FormControl>
+//                   <FormMessage />
+//                 </FormItem>
+//               )}
+//             />
 
-            <FormField
-              control={form.control}
-              name="subject"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Onderwerp</FormLabel>
-                  <FormControl>
-                    <Input placeholder="Vul hier het onderwerp in..." {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+//             <FormField
+//               control={form.control}
+//               name="body"
+//               render={({ field }) => (
+//                 <FormItem>
+//                   <FormLabel>Bericht</FormLabel>
+//                   <Textarea {...field} rows={10} />
+//                   <FormMessage />
+//                 </FormItem>
+//               )}
+//             />
+//           </CommandFormDialogFields>
 
-            <FormField
-              control={form.control}
-              name="body"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Bericht</FormLabel>
-                  <Textarea {...field} rows={10} />
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </CommandFormDialogFields>
+//           <CommandFormDialogFooter>
+//             <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+//             <CommandFormDialogSubmit>Versturen</CommandFormDialogSubmit>
+//           </CommandFormDialogFooter>
+//         </CommandFormDialogContent>
+//       </Form>
+//     </CommandFormDialog>
+//   );
+// }
 
-          <CommandFormDialogFooter>
-            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
-            <CommandFormDialogSubmit>Versturen</CommandFormDialogSubmit>
-          </CommandFormDialogFooter>
-        </CommandFormDialogContent>
-      </Form>
-    </CommandFormDialog>
-  );
-}
-
-export const SendMailCommandTrigger = CommandFormDialogTrigger;
+// export const SendMailCommandTrigger = CommandFormDialogTrigger;

package/src/modules/config/db/create-client.ts

@@ -2,18 +2,25 @@ import "server-cli-only";
 
 import { drizzle, PostgresJsDatabase } from "drizzle-orm/postgres-js";
 import postgres from "postgres";
-import { TulipConfig } from "../lib/config.server";
 import { TDatabaseSchema } from "./types";
 
 declare global {
-  // eslint-disable-next-line no-var, @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var db: PostgresJsDatabase<any> | undefined;
 }
 
+type CreateDatabaseClientProps<TSchema extends TDatabaseSchema> = {
+  schema: TSchema;
+  pool: {
+    connectionString: string;
+    max?: number;
+  };
+};
+
 export function createDatabaseClient<TSchema extends TDatabaseSchema>(
-  database: TulipConfig<TSchema>["database"],
+  props: CreateDatabaseClientProps<TSchema>,
 ) {
-  const { pool, schema } = database;
+  const { pool, schema } = props;
 
   let db: PostgresJsDatabase<TSchema>;
 

package/src/modules/config/db/helpers.ts

@@ -1,6 +1,8 @@
 import { timestamp, uuid } from "drizzle-orm/pg-core";
 import { v7 as uuidv7 } from "uuid";
 
+export const generateDefaultUUID = () => uuidv7(); 
+
 /**
  * Base columns4
  */
@@ -8,7 +10,7 @@ export const baseColumns = {
   // Primary key
   id: uuid()
     .primaryKey()
-    .$defaultFn(() => uuidv7()),
+    .$defaultFn(() => generateDefaultUUID()),
   // Timestamps
   createdAt: timestamp().defaultNow().notNull(),
   updatedAt: timestamp()

package/src/modules/config/db/init.ts

@@ -0,0 +1,25 @@
+import "server-cli-only";
+
+import { drizzle } from "drizzle-orm/postgres-js";
+import postgres from "postgres";
+import { TDatabaseSchema } from "./types";
+
+type InitDatabaseProps<TSchema extends TDatabaseSchema> = {
+  schema: TSchema;
+  pool: {
+    connectionString: string;
+    max?: number;
+  };
+};
+
+export function initDatabase<TSchema extends TDatabaseSchema>({
+  schema,
+  pool,
+}: InitDatabaseProps<TSchema>) {
+  const client = postgres(pool.connectionString, { max: pool.max });
+  return drizzle({ client, schema, casing: "snake_case" });
+}
+
+export type DatabaseClient<TSchema extends TDatabaseSchema> = ReturnType<
+  typeof initDatabase<TSchema>
+>;

package/src/modules/config/entry.server.ts

@@ -1,13 +1,9 @@
 /**
- * Lib
+ * Database
  */
-export * from "./lib/config.server";
-export * from "./lib/resolve.server";
+export * from "./db/init";
 
 /**
- * Router
+ * Providers
  */
-export * from "./router/client.server";
-export * from "./router/context.server";
-export * from "./router/error.server";
-export * from "./router/init.server";
+export * from "./providers/email";

package/src/modules/config/entry.ts

@@ -1,8 +1,8 @@
 export * from "./db/helpers";
 export * from "./db/types";
 
+export * from "./lib/config";
+export * from "./lib/context";
+
 export * from "./paths/helpers";
 export * from "./paths/types";
-
-export * from "./router/client";
-export * from "./router/validators";

package/src/modules/config/lib/config.ts

@@ -0,0 +1,15 @@
+export type TulipConfig<TValues> = {
+  general: {
+    name: string;
+    shortName: string;
+  };
+  email: {
+    defaultFrom: string;
+  };
+} & TValues;
+
+/**
+ * Build the Tulip config
+ */
+
+export const defineTulipConfig = <TValues>(config: TulipConfig<TValues>): TulipConfig<TValues> => config;

package/src/modules/config/lib/context.ts

@@ -0,0 +1,17 @@
+import { StorageClient } from "@/modules/storage/lib/create-client.server";
+import { AuthClient } from "../../auth/handler/init";
+import { DatabaseClient } from "../db/init";
+import { TDatabaseSchema } from "../entry";
+import { EmailClient } from "../providers/email";
+
+export type TulipContext<TSchema extends TDatabaseSchema> = {
+  db: DatabaseClient<TSchema>;
+  schema: TSchema;
+  auth: AuthClient;
+  email: EmailClient;
+  storage: StorageClient<TSchema>;
+};
+
+export function createContext<TSchema extends TDatabaseSchema>(props: TulipContext<TSchema>) {
+  return props;
+}

package/src/modules/config/providers/email.ts

@@ -0,0 +1,13 @@
+import "server-cli-only";
+
+import { Resend } from "resend";
+
+type InitEmailProviderProps = {
+  key: string;
+};
+
+export function initEmailProvider(props: InitEmailProviderProps) {
+  return new Resend(props.key);
+}
+
+export type EmailClient = ReturnType<typeof initEmailProvider>;

package/src/modules/data-tables/components/filters/combobox.client.tsx

@@ -114,9 +114,9 @@ export function TableFilterCombobox<TValue extends string>({
                       <Check className="text-foreground h-4 w-4" />
                     </div>
 
-                    <div className={cn("flex flex-1 items-center gap-2", option.className)}>
-                      {Icon && <Icon className="size-4" />}
-                      <span>{option.label}</span>
+                    <div className="flex flex-1 items-center gap-2">
+                      {Icon && <Icon className={cn("size-4", option.className)} />}
+                      <span className={cn(option.className)}>{option.label}</span>
                     </div>
 
                     {option.total !== undefined && (

package/src/modules/data-tables/entry.ts

@@ -12,9 +12,9 @@ export * from "./components/toolbar";
  * Lib
  */
 export * from "./lib/filters/config";
+export * from "./lib/filters/helpers";
 export * from "./lib/filters/parsers";
 export * from "./lib/filters/resolvers";
 export * from "./lib/search-params";
 export * from "./lib/types";
 export * from "./lib/validators";
-

package/src/modules/data-tables/hooks/use-context.client.tsx

@@ -11,7 +11,8 @@ import {
   useEffect,
   useState,
 } from "react";
-import type { Selection, TableColumnDef, TableStrategy } from "../lib/types";
+import { TableFiltersResult } from "../lib/filters/config";
+import type { Selection, TableColumnDef, TableMetaInput, TableStrategy } from "../lib/types";
 
 type useReactTableProps<TData extends { id: string }> = Omit<
   TableOptions<TData>,
@@ -23,7 +24,11 @@ type useReactTableProps<TData extends { id: string }> = Omit<
 /**
  * Use table config
  */
-export type TableConfigContextValue<TData extends { id: string }> = useReactTableProps<TData> & {
+export type TableConfigContextValue<
+  TData extends { id: string },
+  TFilters extends TableFiltersResult = TableFiltersResult,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+> = useReactTableProps<TData> & {
   queryData: TData[];
   data: TData[];
   setData: Dispatch<SetStateAction<TData[]>>;
@@ -31,7 +36,9 @@ export type TableConfigContextValue<TData extends { id: string }> = useReactTabl
   strategy: TableStrategy;
   selection?: Selection;
   columnVisibility?: VisibilityState;
-  commands?: CommandDef<TData>[];
+  commands?: CommandDef<TData, TMeta>[];
+  meta?: TMeta;
+  where?: TFilters;
 };
 
 const TableConfigContext = createContext({});
@@ -41,19 +48,25 @@ const TableConfigContext = createContext({});
  */
 export function useTableConfigContext<
   TData extends { id: string },
->(): TableConfigContextValue<TData> {
+  TFilters extends TableFiltersResult = TableFiltersResult,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+>(): TableConfigContextValue<TData, TFilters, TMeta> {
   const context = use(TableConfigContext);
   if (!context) throw new Error("TableConfigContext not found!");
-  return context as TableConfigContextValue<TData>;
+  return context as TableConfigContextValue<TData, TFilters, TMeta>;
 }
 
 /**
  * Table context provider
  */
-export function TableConfigProvider<TData extends { id: string }>({
+export function TableConfigProvider<
+  TData extends { id: string },
+  TFilters extends TableFiltersResult = TableFiltersResult,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+>({
   children,
   config,
-}: PropsWithChildren<{ config: CreateTableConfigInput<TData> }>) {
+}: PropsWithChildren<{ config: CreateTableConfigInput<TData, TFilters, TMeta> }>) {
   const [data, setData] = useState(config.queryData);
   useEffect(() => setData(config.queryData), [config.queryData]);
 
@@ -63,11 +76,16 @@ export function TableConfigProvider<TData extends { id: string }>({
 /**
  * Create use table config hook
  */
-type CreateTableConfigInput<TData extends { id: string }> = Omit<
-  TableConfigContextValue<TData>,
-  "data" | "setData"
->;
+type CreateTableConfigInput<
+  TData extends { id: string },
+  TFilters extends TableFiltersResult = TableFiltersResult,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+> = Omit<TableConfigContextValue<TData, TFilters, TMeta>, "data" | "setData">;
 
-export const createTableConfig = <TData extends { id: string }>(
-  config: CreateTableConfigInput<TData>,
+export const createTableConfig = <
+  TData extends { id: string },
+  TFilters extends TableFiltersResult = TableFiltersResult,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+>(
+  config: CreateTableConfigInput<TData, TFilters, TMeta>,
 ) => config;

package/src/modules/data-tables/hooks/use-search.client.ts

@@ -1,16 +1,17 @@
 "use client";
 
 import { useQueryStates } from "nuqs";
+import { startTransition } from "react";
 import { useDebouncedCallback } from "use-debounce";
-import { useTableConfigContext } from "./use-context.client";
 import { tableSearchParams } from "../entry";
+import { useTableConfigContext } from "./use-context.client";
 
 /**
  * Search hook for data table search
  */
 export function useSearch() {
   const context = useTableConfigContext();
-  const [query, setQuery] = useQueryStates(tableSearchParams);
+  const [query, setQuery] = useQueryStates(tableSearchParams, { shallow: false, startTransition });
 
   const defaultValue = query.search ?? "";
 

package/src/modules/data-tables/hooks/use-table.client.ts

@@ -14,9 +14,12 @@ import { useSelection } from "./use-selection.client";
 /**
  * Server data table
  */
-export function useTable<TData extends { id: string }>() {
+export function useTable<
+  TData extends { id: string },
+  TMeta extends TableMeta<TData> = TableMeta<TData>,
+>() {
   const { data, strategy, selection, columnVisibility, commands, ...options } =
-    useTableConfigContext<TData>();
+    useTableConfigContext<TData, TMeta>();
 
   const { rowSelection, selectedData, onRowSelectionChange } = useSelection({
     data,
@@ -52,6 +55,6 @@ export function useTable<TData extends { id: string }>() {
     onColumnFiltersChange: setColumnFilters,
     enableHiding: true,
     onColumnVisibilityChange: setColumnVisibility,
-    meta: { ...options.meta, selectedData, commands, strategy } satisfies TableMeta<TData>,
+    meta: { ...options.meta, selectedData, commands, strategy } satisfies TableMeta<TData, TMeta>,
   });
 }

package/src/modules/data-tables/lib/filters/config.ts

@@ -2,5 +2,6 @@ import { ZodType } from "zod";
 import { ParseFilter } from "./parsers";
 
 export type TableFiltersDef = { readonly [k: string]: ParseFilter<ZodType> };
+export type TableFiltersResult = { readonly [k: string]: unknown };
 
 export const createTableFilters = <TDef extends TableFiltersDef>(def: TDef) => def;