@alepha/ui 0.13.6 → 0.13.7

package/src/core/components/form/TypeForm.tsx

@@ -1,5 +1,5 @@
 import type { FormModel } from "@alepha/react/form";
-import { Flex, Grid } from "@mantine/core";
+import { Card, Flex, type FlexProps, Grid } from "@mantine/core";
 import type { TObject } from "alepha";
 import type { ReactNode } from "react";
 import ActionButton, {
@@ -21,17 +21,37 @@ export interface TypeFormProps<T extends TObject> {
       };
   schema?: TObject;
   children?: (input: FormModel<T>["input"]) => ReactNode;
+
+  /**
+   * Control props applied to all fields.
+   */
   controlProps?: Partial<Omit<ControlProps, "input">>;
+
+  /**
+   * Per-field control props override.
+   * Keys are field names from the schema.
+   */
+  fieldControlProps?: Record<string, Partial<Omit<ControlProps, "input">>>;
   skipFormElement?: boolean;
   skipSubmitButton?: boolean;
   submitButtonProps?: Partial<Omit<ActionSubmitButtonProps, "form">>;
   resetButtonProps?: Partial<Omit<ActionSubmitButtonProps, "form">>;
+
+  fill?: boolean;
+  flexProps?: FlexProps;
 }
 
 /**
  * TypeForm component that automatically renders all form inputs based on schema.
  * Uses the Control component to render individual fields and Mantine Grid for responsive layout.
  *
+ * Supports all field types including:
+ * - Primitive types (string, number, boolean, etc.)
+ * - Enum types (rendered as Select)
+ * - Arrays of primitives (rendered as MultiSelect/TagsInput)
+ * - Arrays of objects (rendered as ControlArray)
+ * - Nested objects (rendered as ControlObject)
+ *
  * @example
  * ```tsx
  * import { t } from "alepha";
@@ -44,6 +64,15 @@ export interface TypeFormProps<T extends TObject> {
  *     email: t.text(),
  *     age: t.integer(),
  *     subscribe: t.boolean(),
+ *     address: t.object({
+ *       street: t.text(),
+ *       city: t.text(),
+ *     }),
+ *     tags: t.array(t.text()),
+ *     contacts: t.array(t.object({
+ *       name: t.text(),
+ *       email: t.text(),
+ *     })),
  *   }),
  *   handler: (values) => {
  *     console.log(values);
@@ -59,6 +88,7 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
     columns = 3,
     children,
     controlProps,
+    fieldControlProps,
     skipFormElement = false,
     skipSubmitButton = false,
     submitButtonProps,
@@ -71,30 +101,9 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
 
   const fieldNames = Object.keys(schema.properties);
 
-  // Filter out unsupported field types (objects only, arrays are now supported)
-  const supportedFields = fieldNames.filter((fieldName) => {
-    const field = form.input[fieldName as keyof typeof form.input];
-    if (!field || typeof field !== "object" || !("schema" in field)) {
-      return false;
-    }
-
-    const schema: any = field.schema;
-
-    // Skip if it's an object (not supported by Control)
-    // Arrays are now supported via ControlSelect (MultiSelect/TagsInput)
-    if ("type" in schema) {
-      if (schema.type === "object") {
-        return false;
-      }
-    }
-
-    // Check if it has properties (nested object)
-    if ("properties" in schema && schema.properties) {
-      return false;
-    }
-
-    return true;
-  });
+  // Filter to only include valid InputFields
+  // All types are now supported: primitives, enums, arrays, objects
+  const supportedFields = fieldNames;
 
   // Handle column configuration with defaults: xs=1, sm=2, lg=3
   const colSpan =
@@ -122,15 +131,40 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
       <Grid>
         {supportedFields.map((fieldName) => {
           const field = form.input[fieldName as keyof typeof form.input];
+          const fieldSchema: any = schema.properties[fieldName];
 
           // Type guard to ensure field has the expected structure
-          if (!field || typeof field !== "object" || !("schema" in field)) {
+          if (!field || !fieldSchema) {
             return null;
           }
 
+          // Determine if this is a complex type (object or array of objects)
+          // that should span full width
+          const isObject =
+            fieldSchema &&
+            "type" in fieldSchema &&
+            fieldSchema.type === "object";
+
+          const isArrayOfObjects =
+            fieldSchema &&
+            "type" in fieldSchema &&
+            fieldSchema.type === "array" &&
+            "items" in fieldSchema &&
+            fieldSchema.items &&
+            "properties" in fieldSchema.items;
+
+          // Complex types span full width, primitives use grid columns
+          const span = isObject || isArrayOfObjects ? 12 : colSpan;
+
+          // Merge control props: base controlProps + field-specific overrides
+          const mergedControlProps = {
+            ...controlProps,
+            ...fieldControlProps?.[fieldName],
+          };
+
           return (
-            <Grid.Col key={fieldName} span={colSpan}>
-              <Control input={field as any} {...controlProps} />
+            <Grid.Col key={fieldName} span={span}>
+              <Control input={field} {...mergedControlProps} />
             </Grid.Col>
           );
         })}
@@ -139,15 +173,34 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
   };
 
   const content = (
-    <Flex direction={"column"} gap={"sm"}>
-      {renderFields()}
+    <Flex
+      direction={"column"}
+      gap={"sm"}
+      flex={props.fill ? 1 : undefined}
+      {...props.flexProps}
+    >
+      <Flex direction={"column"} gap={"sm"} flex={1}>
+        {renderFields()}
+      </Flex>
       {!skipSubmitButton && (
-        <Flex gap={"sm"}>
-          <ActionButton form={form} {...submitButtonProps}>
-            {submitButtonProps?.children ?? "Submit"}
-          </ActionButton>
-          <ActionButton type={"reset"}>Reset</ActionButton>
-        </Flex>
+        <Card w={"100%"} withBorder>
+          <Flex gap={"sm"} flex={1}>
+            <Flex></Flex>
+            <Flex flex={1}></Flex>
+            <Flex gap={"sm"}>
+              <ActionButton variant={"subtle"} type={"reset"}>
+                Reset
+              </ActionButton>
+              <ActionButton
+                intent={"primary"}
+                form={form}
+                {...submitButtonProps}
+              >
+                {submitButtonProps?.children ?? "Submit"}
+              </ActionButton>
+            </Flex>
+          </Flex>
+        </Card>
       )}
     </Flex>
   );
@@ -156,7 +209,16 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
     return content;
   }
 
-  return <form {...form.props}>{content}</form>;
+  return (
+    <Flex
+      component={"form"}
+      flex={props.fill ? 1 : undefined}
+      {...form.props}
+      {...props.flexProps}
+    >
+      {content}
+    </Flex>
+  );
 };
 
 export default TypeForm;

package/src/core/components/layout/AdminShell.tsx

@@ -91,6 +91,10 @@ const AdminShell = (props: AdminShellProps) => {
   const hasSidebar = showSidebar && props.sidebarProps !== undefined;
   const hasAppBar = hasSidebar || props.appBarProps || props.header;
 
+  const headerHeight = hasAppBar ? 60 : 0;
+  const footerHeight = props.footer ? 24 : 0;
+  const sidebarWidth = hasSidebar ? (collapsed ? 78 : 300) : 0;
+
   return (
     <AppShell
       w={"100%"}
@@ -121,7 +125,16 @@ const AdminShell = (props: AdminShellProps) => {
         </AppShell.Navbar>
       )}
 
-      <AppShell.Main display={"flex"} flex={1} {...props.appShellMainProps}>
+      <AppShell.Main
+        pl={sidebarWidth}
+        pt={headerHeight}
+        pb={footerHeight}
+        pr={0}
+        display={"flex"}
+        flex={1}
+        style={{ flexDirection: "column" }}
+        {...props.appShellMainProps}
+      >
         {props.children ?? <NestedView />}
       </AppShell.Main>
 

package/src/core/components/layout/AlephaMantineProvider.tsx

@@ -22,7 +22,7 @@ export interface AlephaMantineProviderProps {
   navigationProgress?: NavigationProgressProps;
   notifications?: NotificationsProps;
   modals?: ModalsProviderProps;
-  omnibar?: OmnibarProps;
+  omnibar?: OmnibarProps | false;
 }
 
 const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
@@ -53,14 +53,18 @@ const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
     [],
   );
 
+  const defaultColorScheme =
+    props.mantine?.defaultColorScheme ?? theme.defaultColorScheme;
+
   return (
     <>
       <ColorSchemeScript
-        defaultColorScheme={props.mantine?.defaultColorScheme}
+        defaultColorScheme={defaultColorScheme}
         {...props.colorSchemeScript}
       />
       <MantineProvider
         {...props.mantine}
+        defaultColorScheme={defaultColorScheme}
         theme={{
           // Spread all theme properties from the selected theme
           ...theme,
@@ -71,7 +75,7 @@ const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
         <Notifications {...props.notifications} />
         <NavigationProgress {...props.navigationProgress} />
         <ModalsProvider {...props.modals}>
-          <Omnibar {...props.omnibar} />
+          {props.omnibar !== false && <Omnibar {...props.omnibar} />}
           {props.children ?? <NestedView />}
         </ModalsProvider>
       </MantineProvider>

package/src/core/components/layout/Omnibar.tsx

@@ -3,7 +3,7 @@ import { Spotlight, type SpotlightActionData } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
 import { type ReactNode, useMemo } from "react";
 import { ui } from "../../constants/ui.ts";
-import { renderIcon } from "../buttons/ActionButton.tsx";
+import { renderIcon } from "../../helpers/renderIcon.tsx";
 
 export interface OmnibarProps {
   shortcut?: string | string[];

package/src/core/components/layout/Sidebar.tsx

@@ -14,13 +14,13 @@ import {
   type ComponentType,
   type ReactNode,
   useCallback,
+  useMemo,
   useState,
 } from "react";
-import ActionButton, {
-  type ActionProps,
-  renderIcon,
-} from "../buttons/ActionButton.tsx";
+import { renderIcon } from "../../helpers/renderIcon.tsx";
+import ActionButton, { type ActionProps } from "../buttons/ActionButton.tsx";
 import OmnibarButton from "../buttons/OmnibarButton.tsx";
+import ToggleSidebarButton from "../buttons/ToggleSidebarButton.tsx";
 
 export interface SidebarProps {
   menu?: SidebarNode[];
@@ -35,6 +35,15 @@ export interface SidebarProps {
   hide?: {
     paths?: string[];
   };
+
+  /**
+   * Automatically populate the menu from the router's pages.
+   */
+  autoPopulateMenu?:
+    | boolean
+    | {
+        startsWith: string;
+      };
 }
 
 export const Sidebar = (props: SidebarProps) => {
@@ -63,6 +72,10 @@ export const Sidebar = (props: SidebarProps) => {
         return <OmnibarButton collapsed={props.collapsed} key={key} />;
       }
 
+      if (item.type === "toggle") {
+        return <ToggleSidebarButton key={key} />;
+      }
+
       if (item.type === "section") {
         if (props.collapsed) return;
         return (
@@ -114,16 +127,29 @@ export const Sidebar = (props: SidebarProps) => {
     );
   };
 
+  const getSidebarNodes = (): SidebarNode[] => {
+    if (props.menu) return props.menu;
+    if (props.autoPopulateMenu) {
+      const items = router.concretePages.map((page) => ({
+        label: page.label ?? page.name,
+        description: page.description?.slice(0, 32),
+        icon: renderIcon(page.icon),
+        href: router.path(page.name),
+      })) as SidebarMenuItem[];
+      if (
+        typeof props.autoPopulateMenu === "object" &&
+        props.autoPopulateMenu.startsWith
+      ) {
+        const startsWith = props.autoPopulateMenu.startsWith;
+        return items.filter((item) => item.href?.startsWith(startsWith));
+      }
+    }
+    return [];
+  };
+
   const padding = "md";
-  const gap = props.gap;
-  const menu =
-    props.menu ??
-    (router.concretePages.map((page) => ({
-      label: page.label ?? page.name,
-      description: page.description,
-      icon: renderIcon(page.icon),
-      href: router.path(page.name),
-    })) as SidebarMenuItem[]);
+  const gap = props.menu ? props.gap : "xs";
+  const menu = useMemo(() => getSidebarNodes(), []);
 
   return (
     <Flex
@@ -229,6 +255,8 @@ export const SidebarItem = (props: SidebarItemProps) => {
           props.theme.button?.size ??
           (level === 0 ? "sm" : "xs")
         }
+        c={"var(--mantine-color-text)"}
+        color={"gray"}
         variant={"subtle"}
         variantActive={"default"}
         radius={props.item.theme?.radius ?? props.theme.button?.radius ?? "md"}
@@ -385,7 +413,8 @@ export type SidebarNode =
   | SidebarDivider
   | SidebarSearch
   | SidebarElement
-  | SidebarSection;
+  | SidebarSection
+  | SidebarToggle;
 
 export interface SidebarAbstractItem {
   position?: "top" | "bottom";
@@ -407,6 +436,10 @@ export interface SidebarSearch extends SidebarAbstractItem {
   type: "search";
 }
 
+export interface SidebarToggle extends SidebarAbstractItem {
+  type: "toggle";
+}
+
 export interface SidebarSection extends SidebarAbstractItem {
   type: "section";
   label: string;

package/src/core/components/table/ColumnPicker.tsx

@@ -0,0 +1,126 @@
+import {
+  Button,
+  Checkbox,
+  Group,
+  Popover,
+  ScrollArea,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { IconColumns } from "@tabler/icons-react";
+import type { TObject } from "alepha";
+import { useState } from "react";
+import { ui } from "../../constants/ui.ts";
+import ActionButton from "../buttons/ActionButton.tsx";
+import type { ColumnVisibility, DataTableColumn } from "./types.ts";
+
+export interface ColumnPickerProps<T extends object, Filters extends TObject> {
+  columns: { [key: string]: DataTableColumn<T, Filters> };
+  visibility: ColumnVisibility;
+  onVisibilityChange: (visibility: ColumnVisibility) => void;
+}
+
+const ColumnPicker = <T extends object, Filters extends TObject>({
+  columns,
+  visibility,
+  onVisibilityChange,
+}: ColumnPickerProps<T, Filters>) => {
+  const [opened, setOpened] = useState(false);
+  const columnEntries = Object.entries(columns);
+
+  const handleShowAll = () => {
+    const newVisibility = columnEntries.reduce(
+      (acc, [key]) => ({ ...acc, [key]: true }),
+      {} as ColumnVisibility,
+    );
+    onVisibilityChange(newVisibility);
+  };
+
+  const handleHideAll = () => {
+    const newVisibility = columnEntries.reduce(
+      (acc, [key]) => ({ ...acc, [key]: false }),
+      {} as ColumnVisibility,
+    );
+    onVisibilityChange(newVisibility);
+  };
+
+  const handleToggle = (key: string, checked: boolean) => {
+    onVisibilityChange({
+      ...visibility,
+      [key]: checked,
+    });
+  };
+
+  const visibleCount = columnEntries.filter(
+    ([key]) => visibility[key] !== false,
+  ).length;
+
+  return (
+    <Popover
+      width={280}
+      position="bottom-start"
+      shadow="md"
+      opened={opened}
+      onChange={setOpened}
+      closeOnClickOutside
+      closeOnEscape
+      transitionProps={{
+        transition: "fade-up",
+        duration: 200,
+        timingFunction: "ease",
+      }}
+    >
+      <Popover.Target>
+        <ActionButton variant="subtle" icon={IconColumns} />
+      </Popover.Target>
+      <Popover.Dropdown
+        bg="transparent"
+        p="xs"
+        bd={`1px solid ${ui.colors.border}`}
+        style={{
+          backdropFilter: "blur(20px)",
+        }}
+      >
+        <Stack gap="xs" bg={ui.colors.surface} p="sm" bdrs="sm">
+          <Group justify="space-between">
+            <Text size="sm" fw={500}>
+              Columns ({visibleCount}/{columnEntries.length})
+            </Text>
+            <Group gap={4}>
+              <Button
+                size="compact-xs"
+                variant="subtle"
+                onClick={handleShowAll}
+              >
+                All
+              </Button>
+              <Button
+                size="compact-xs"
+                variant="subtle"
+                onClick={handleHideAll}
+              >
+                None
+              </Button>
+            </Group>
+          </Group>
+
+          <ScrollArea.Autosize mah={300}>
+            <Stack gap={4}>
+              {columnEntries.map(([key, col]) => (
+                <Checkbox
+                  key={key}
+                  label={col.label}
+                  checked={visibility[key] !== false}
+                  onChange={(e) => handleToggle(key, e.currentTarget.checked)}
+                  size="sm"
+                />
+              ))}
+            </Stack>
+          </ScrollArea.Autosize>
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+};
+
+export default ColumnPicker;