feat(schemaform): add CustomComboboxWidget & add schemaform dialog

src/molecules/tanstack-table/fields/tanstack-table-action-dialogs.tsx

@@ -1,15 +1,16 @@
 import React, { Dispatch, useEffect } from 'react';
-import {
-  TanstackTableRowActionsType,
-  TanstackTableTableActionsType,
-} from '../types';
 import {
   TanstackTableAutoformDialog,
   TanstackTableConfirmationDialog,
   TanstackTableCustomDialog,
   TanstackTableTableAutoformDialog,
   TanstackTableTableCustomDialog,
 } from '.';
+import {
+  TanstackTableRowActionsType,
+  TanstackTableTableActionsType,
+} from '../types';
+import { TanstackTableTableSchemaFormDialog } from './tanstack-table-table-actions-schemaform-dialog';
 
 export function TanstackTableActionDialogs<TData>({
   rowAction,
@@ -103,6 +104,19 @@ export function TanstackTableActionDialogs<TData>({
           onCancel={tableAction.onCancel}
         />
       )}
+      {tableAction?.type === 'schemaform-dialog' && (
+        <TanstackTableTableSchemaFormDialog
+          setDialogOpen={() => setTableAction(null)}
+          title={tableAction.title}
+          type="schemaform-dialog"
+          schema={tableAction.schema}
+          submitText={tableAction.submitText}
+          onSubmit={tableAction.onSubmit}
+          uiSchema={tableAction.uiSchema}
+          filter={tableAction.filter}
+          widgets={tableAction.widgets}
+        />
+      )}
     </>
   );
 }

src/molecules/tanstack-table/fields/tanstack-table-table-actions-schemaform-dialog.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { SchemaForm } from '../../../organisms/schema-form';
+import { TanstackTableActionsSchemaFormDialog } from '../types';
+
+type TanstackTableSchemaFormDialogProps = {
+  setDialogOpen: () => void;
+} & TanstackTableActionsSchemaFormDialog;
+export function TanstackTableTableSchemaFormDialog({
+  title,
+  submitText,
+  onSubmit,
+  schema,
+  filter,
+  widgets,
+  setDialogOpen,
+  uiSchema,
+}: TanstackTableSchemaFormDialogProps) {
+  return (
+    <Dialog open onOpenChange={setDialogOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <SchemaForm
+          schema={schema}
+          uiSchema={uiSchema}
+          onSubmit={(data) => {
+            onSubmit(data.formData);
+            setDialogOpen();
+          }}
+          submitText={submitText}
+          filter={filter}
+          withScrollArea={false}
+          widgets={widgets}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}

src/molecules/tanstack-table/types/index.ts

@@ -7,6 +7,7 @@ import {
 } from '@tanstack/react-table';
 import { ComponentType } from 'react';
 import { z } from 'zod';
+import { SchemaFormProps } from '../../../organisms/schema-form/types';
 import { FieldConfig } from '../../../organisms/auto-form';
 import { ZodObjectOrWrapped } from '../../../organisms/auto-form/utils';
 
@@ -237,6 +238,15 @@ export type TanstackTableActionsAutoformDialog = Omit<
   type: 'autoform-dialog';
   values?: Partial<z.infer<ZodObjectOrWrapped>>;
 };
+export type TanstackTableActionsSchemaFormDialog = Omit<
+  TanstackTableActionsDialog,
+  'cancelText' | 'onCancel' | 'confirmationText' | 'onConfirm'
+> & {
+  className?: { autoform: string; submit: string };
+  onSubmit: (values: any | undefined) => void;
+  submitText: string;
+  type: 'schemaform-dialog';
+} & SchemaFormProps<undefined>;
 export type TanstackTableActionsCustomDialog = TanstackTableActionsDialog & {
   content: JSX.Element;
   type: 'custom-dialog';
@@ -249,6 +259,7 @@ export type TanstackTableTableActionsType = {
   | TanstackTableActionsSimple
   | TanstackTableActionsCustomDialog
   | TanstackTableActionsAutoformDialog
+  | TanstackTableActionsSchemaFormDialog
   | TanstackTableCreateRowAction
 );
 export type TanstackTableSelectedRowActionType<TData> = {

src/organisms/schema-form/types/index.ts

@@ -29,6 +29,7 @@ export interface SchemaFormProps<T>
   uiSchema?: UiSchema;
   useDefaultSubmit?: boolean;
   withScrollArea?: boolean;
+  formData?: T | undefined;
 }
 
 export type FilterType<T> = CommonFilterType<T> &

src/organisms/schema-form/widgets/custom-combobox.tsx

@@ -28,6 +28,7 @@ type CustomComboboxProps<T> = {
   searchResultLabel?: string;
   selectIdentifier: keyof T;
   selectLabel: keyof T;
+  disabledItems?: T[keyof T][];
 } & WidgetProps;
 
 export function CustomCombobox<T>(props: CustomComboboxProps<T>) {
@@ -164,6 +165,7 @@ function List<T>({
         <CommandGroup>
           {list?.map((item: T) => (
             <CommandItem
+              disabled={props.disabledItems?.includes(item[selectIdentifier])}
               onSelect={() => {
                 onChange(
                   uiOptions?.allowEmpty !== false
@@ -192,3 +194,37 @@ function List<T>({
     </Command>
   );
 }
+
+export function CustomComboboxWidget<T>({
+  languageData,
+  selectLabel,
+  selectIdentifier,
+  list,
+  disabledItems,
+}: {
+  languageData: {
+    'Select.Placeholder': string;
+    'Select.ResultLabel': string;
+    'Select.EmptyValue': string;
+  };
+  selectIdentifier: keyof T;
+  selectLabel: keyof T;
+  list: T[];
+  disabledItems?: T[keyof T][];
+}) {
+  function Widget(props: WidgetProps) {
+    return (
+      <CustomCombobox<T>
+        {...props}
+        list={list}
+        searchPlaceholder={languageData['Select.Placeholder']}
+        searchResultLabel={languageData['Select.ResultLabel']}
+        emptyValue={languageData['Select.EmptyValue']}
+        selectIdentifier={selectIdentifier}
+        selectLabel={selectLabel}
+        disabledItems={disabledItems}
+      />
+    );
+  }
+  return Widget;
+}