@manafishrov/ui 1.2.13 → 1.3.1

package/src/components/MenuComboboxList.tsx

@@ -13,36 +13,60 @@ import {
   MenuComboboxShortcut,
 } from '@/components/MenuCombobox';
 
-export type MenuItemData = { value: string; label: string; disabled?: boolean; shortcut?: string };
-export type MenuCheckboxItemData = {
+export type MenuComboboxItemData = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  shortcut?: string;
+};
+export type MenuComboboxCheckboxItemData = {
   type: 'checkbox';
   value: string;
   label: string;
   checked?: boolean;
   disabled?: boolean;
 };
-export type MenuRadioItemData = { type: 'radio'; value: string; label: string; disabled?: boolean };
-export type MenuRadioGroupData = { type: 'radio-group'; value: string; items: MenuRadioItemData[] };
-export type MenuSeparatorData = { type: 'separator' };
-export type MenuItemGroupData = {
+export type MenuComboboxRadioItemData = {
+  type: 'radio';
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+export type MenuComboboxRadioItemGroupData = {
+  type: 'radio-group';
+  value: string;
+  items: MenuComboboxRadioItemData[];
+};
+export type MenuComboboxSeparatorData = { type: 'separator' };
+export type MenuComboboxItemGroupData = {
   label: string;
-  items: (MenuItemData | MenuCheckboxItemData | MenuRadioGroupData | MenuSeparatorData)[];
+  items: (
+    | MenuComboboxItemData
+    | MenuComboboxCheckboxItemData
+    | MenuComboboxRadioItemGroupData
+    | MenuComboboxSeparatorData
+  )[];
+};
+
+export type MenuComboboxListProps = {
+  items: MenuComboboxItemData[];
+  searchValue?: string;
+  class?: string;
 };
-export type MenuComboboxListProps = { items: MenuItemData[]; searchValue?: string; class?: string };
 export type MenuComboboxGroupedListProps = {
-  groups: MenuItemGroupData[];
+  groups: MenuComboboxItemGroupData[];
   searchValue?: string;
   class?: string;
 };
 
 const hasShortcut = (shortcut?: string): boolean => typeof shortcut === 'string' && shortcut !== '';
 const matchesSearch = (
-  item: MenuItemData | MenuCheckboxItemData | MenuRadioItemData,
+  item: MenuComboboxItemData | MenuComboboxCheckboxItemData | MenuComboboxRadioItemData,
   search: string,
 ): boolean =>
   item.label.toLowerCase().includes(search) || item.value.toLowerCase().includes(search);
 
-const renderRadioItems = (items: MenuRadioItemData[]): JSXElement => (
+const renderRadioItems = (items: MenuComboboxRadioItemData[]): JSXElement => (
   <For each={items}>
     {(radioItem) => (
       <MenuComboboxRadioItem value={radioItem.value} disabled={radioItem.disabled}>
@@ -53,7 +77,11 @@ const renderRadioItems = (items: MenuRadioItemData[]): JSXElement => (
 );
 
 const renderGroupedItem = (
-  item: MenuItemData | MenuCheckboxItemData | MenuRadioGroupData | MenuSeparatorData,
+  item:
+    | MenuComboboxItemData
+    | MenuComboboxCheckboxItemData
+    | MenuComboboxRadioItemGroupData
+    | MenuComboboxSeparatorData,
 ): JSXElement => {
   if (!('type' in item)) {
     return (
@@ -88,13 +116,17 @@ const renderGroupedItem = (
 };
 
 type GroupFilterResult =
-  | MenuItemData
-  | MenuCheckboxItemData
-  | MenuRadioGroupData
-  | MenuSeparatorData;
+  | MenuComboboxItemData
+  | MenuComboboxCheckboxItemData
+  | MenuComboboxRadioItemGroupData
+  | MenuComboboxSeparatorData;
 
 const filterGroupItem = (
-  item: MenuItemData | MenuCheckboxItemData | MenuRadioGroupData | MenuSeparatorData,
+  item:
+    | MenuComboboxItemData
+    | MenuComboboxCheckboxItemData
+    | MenuComboboxRadioItemGroupData
+    | MenuComboboxSeparatorData,
   search: string,
 ): GroupFilterResult[] => {
   if (!('type' in item)) {
@@ -110,11 +142,13 @@ const filterGroupItem = (
   return filteredRadioItems.length > 0 ? [{ ...item, items: filteredRadioItems }] : [];
 };
 
-const GroupItems: Component<{ items: MenuItemGroupData['items'] }> = (props) => (
+const GroupItems: Component<{ items: MenuComboboxItemGroupData['items'] }> = (props) => (
   <For each={props.items}>{(item) => renderGroupedItem(item)}</For>
 );
 
-const GroupSection: Component<{ group: MenuItemGroupData; showSeparator: boolean }> = (props) => (
+const GroupSection: Component<{ group: MenuComboboxItemGroupData; showSeparator: boolean }> = (
+  props,
+) => (
   <>
     {props.showSeparator && <MenuComboboxSeparator />}
     <MenuComboboxItemGroup>
@@ -169,7 +203,7 @@ export const MenuComboboxGroupedList: Component<MenuComboboxGroupedListProps> =
         }
         return false;
       })
-      .filter((group): group is MenuItemGroupData => group !== false);
+      .filter((group): group is MenuComboboxItemGroupData => group !== false);
   });
 
   const emptyProps = (): { searchValue: string } | Record<string, never> =>

package/src/components/form/AutoSubmit.tsx

@@ -0,0 +1,38 @@
+import { createEffect, onCleanup, type Component } from 'solid-js';
+
+import { useFormContext } from './context';
+
+const DEFAULT_DEBOUNCE_MS = 300;
+
+export type AutoSubmitProps = {
+  debounce?: number;
+};
+
+export const AutoSubmit: Component<AutoSubmitProps> = (props) => {
+  const form = useFormContext();
+  const values = form.useStore((state) => state.values);
+  const isTouched = form.useStore((state) => state.isTouched);
+
+  createEffect(() => {
+    values();
+
+    if (!isTouched()) {
+      return;
+    }
+
+    const debounceTimer = setTimeout(
+      () => {
+        form.handleSubmit().catch((error: unknown) => {
+          throw error;
+        });
+      },
+      Math.max(0, props.debounce ?? DEFAULT_DEBOUNCE_MS),
+    );
+
+    onCleanup(() => {
+      clearTimeout(debounceTimer);
+    });
+  });
+
+  return <></>;
+};

package/src/components/form/Form.tsx

@@ -1,8 +1,11 @@
 import { createFormHook } from '@tanstack/solid-form';
+import { splitProps, type Component, type ComponentProps } from 'solid-js';
+import { cn } from 'tailwind-variants';
 
+import { AutoSubmit } from './AutoSubmit';
 import { CheckboxField } from './CheckboxField';
 import { ComboboxField } from './ComboboxField';
-import { formContext, fieldContext } from './context';
+import { fieldContext, formContext, useFormContext } from './context';
 import { DatePickerField } from './DatePickerField';
 import { NumberInputField } from './NumberInputField';
 import { PasswordInputField } from './PasswordInputField';
@@ -16,6 +19,29 @@ import { TagsInputField } from './TagsInputField';
 import { TextareaField } from './TextareaField';
 import { TextInputField } from './TextInputField';
 
+export type FormProps = Omit<ComponentProps<'form'>, 'onSubmit'>;
+
+export const Form: Component<FormProps> = (props) => {
+  const form = useFormContext();
+  const [local, formProps] = splitProps(props, ['children', 'class']);
+
+  return (
+    <form
+      class={cn('space-y-6 relative', local.class)}
+      onSubmit={(submitEvent) => {
+        submitEvent.preventDefault();
+        submitEvent.stopPropagation();
+        form.handleSubmit().catch((error: unknown) => {
+          throw error;
+        });
+      }}
+      {...formProps}
+    >
+      {local.children}
+    </form>
+  );
+};
+
 export const { useAppForm, withForm, withFieldGroup } = createFormHook({
   formContext,
   fieldContext,
@@ -35,6 +61,8 @@ export const { useAppForm, withForm, withFieldGroup } = createFormHook({
     TextareaField,
   },
   formComponents: {
+    AutoSubmit,
+    Form,
     SubmitButton,
   },
 });

package/src/components/form/index.ts

@@ -14,3 +14,4 @@ export * from './DatePickerField';
 export * from './ComboboxField';
 export * from './TagsInputField';
 export * from './SubmitButton';
+export * from './AutoSubmit';