@alepha/ui 0.18.1 → 0.18.3

package/src/demo/components/core/DemoDataTable.tsx

@@ -1,4 +1,4 @@
-import { DataTable, Text } from "@alepha/ui";
+import { DataTable, Text, useDialog } from "@alepha/ui";
 import { Badge, Code, Flex, Paper } from "@mantine/core";
 import {
   IconDownload,
@@ -117,6 +117,259 @@ const showcaseSchema = t.object({
   }),
 });
 
+interface DataTablePreviewProps {
+  withCheckbox: boolean;
+  withExport: boolean;
+  withPanel: boolean;
+  withDrawer: boolean;
+  defaultSize: number;
+}
+
+const DataTablePreview = (props: DataTablePreviewProps) => {
+  const dialog = useDialog();
+
+  return (
+    <DataTable<User, typeof filters>
+      key={JSON.stringify(props)}
+      filters={filters}
+      defaultFilters={["search", "role"]}
+      submitOnInit
+      defaultSize={props.defaultSize}
+      withCheckbox={props.withCheckbox}
+      withExport={props.withExport}
+      getItemKey={(u) => String(u.id)}
+      onFilterChange={(key, _value, form) => {
+        if (key === "role" || key === "status") {
+          return form.submit();
+        }
+      }}
+      typeFormProps={{
+        skipSubmitButton: true,
+        columns: 3,
+      }}
+      items={async (params) => {
+        let filtered = [...sampleUsers];
+        if (params.search) {
+          const s = params.search.toLowerCase();
+          filtered = filtered.filter(
+            (u) =>
+              u.name.toLowerCase().includes(s) ||
+              u.email.toLowerCase().includes(s),
+          );
+        }
+        if (params.role) {
+          filtered = filtered.filter((u) => u.role === params.role);
+        }
+        if (params.status) {
+          filtered = filtered.filter((u) => u.status === params.status);
+        }
+        const start = params.page * params.size;
+        const content = filtered.slice(start, start + params.size);
+        return {
+          content,
+          page: {
+            totalElements: filtered.length,
+            totalPages: Math.ceil(filtered.length / params.size),
+          },
+        };
+      }}
+      actions={[
+        {
+          tooltip: "Add User",
+          icon: IconPlus,
+          variant: "light",
+          size: "xs",
+          onClick: () => dialog.alert({ message: "Add user clicked" }),
+        },
+      ]}
+      checkboxActions={[
+        {
+          label: "Export Selected",
+          icon: <IconDownload size={14} />,
+          intent: "primary",
+          onClick: ({ selectedItems, clearSelection }) => {
+            dialog.alert({
+              message: `Exporting ${selectedItems.length} users`,
+            });
+            clearSelection();
+          },
+        },
+        {
+          label: "Delete Selected",
+          icon: <IconTrash size={14} />,
+          intent: "danger",
+          onClick: ({ selectedItems, clearSelection }) => {
+            dialog.alert({
+              message: `Deleting ${selectedItems.length} users`,
+            });
+            clearSelection();
+          },
+        },
+      ]}
+      columns={{
+        id: {
+          label: "ID",
+          value: (u) => <Text size="sm">{u.id}</Text>,
+          sortable: true,
+          fit: true,
+        },
+        name: {
+          label: "Name",
+          value: (u) => (
+            <Text size="sm" fw={500}>
+              {u.name}
+            </Text>
+          ),
+          sortable: true,
+        },
+        email: {
+          label: "Email",
+          value: (u) => (
+            <Text size="sm" c="dimmed">
+              {u.email}
+            </Text>
+          ),
+        },
+        role: {
+          label: "Role",
+          value: (u) => (
+            <Badge
+              size="sm"
+              color={
+                u.role === "admin"
+                  ? "blue"
+                  : u.role === "user"
+                    ? "green"
+                    : "gray"
+              }
+            >
+              {u.role}
+            </Badge>
+          ),
+        },
+        status: {
+          label: "Status",
+          value: (u) => (
+            <Badge
+              size="sm"
+              color={u.status === "active" ? "green" : "red"}
+              variant="light"
+            >
+              {u.status}
+            </Badge>
+          ),
+        },
+        notes: {
+          label: "Notes",
+          defaultHidden: true,
+          value: (u) => (
+            <Text size="xs" c="dimmed" lineClamp={1}>
+              {u.notes ?? "—"}
+            </Text>
+          ),
+        },
+      }}
+      rowActions={(u) => [
+        {
+          label: "Edit",
+          icon: IconEdit,
+          color: "blue",
+          onClick: () => dialog.alert({ message: `Edit ${u.name}` }),
+        },
+        {
+          label: "Delete",
+          icon: IconTrash,
+          color: "red",
+          onClick: () => dialog.alert({ message: `Delete ${u.name}` }),
+          visible: u.role !== "admin",
+        },
+      ]}
+      panel={
+        props.withPanel
+          ? {
+              can: (u) => Boolean(u.notes),
+              render: (u) => (
+                <Flex direction="column" gap="xs" p="sm">
+                  <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+                    Notes
+                  </Text>
+                  <Text size="sm">{u.notes}</Text>
+                </Flex>
+              ),
+            }
+          : undefined
+      }
+      drawer={
+        props.withDrawer
+          ? (u) => (
+              <Flex direction="column" gap="md">
+                <Text size="lg" fw={600}>
+                  {u.name}
+                </Text>
+                <Paper p="sm" radius="md" withBorder>
+                  <Flex direction="column" gap="xs">
+                    <Flex gap="xs">
+                      <Text size="sm" c="dimmed" w={60}>
+                        Email
+                      </Text>
+                      <Text size="sm">{u.email}</Text>
+                    </Flex>
+                    <Flex gap="xs">
+                      <Text size="sm" c="dimmed" w={60}>
+                        Role
+                      </Text>
+                      <Badge
+                        size="sm"
+                        color={
+                          u.role === "admin"
+                            ? "blue"
+                            : u.role === "user"
+                              ? "green"
+                              : "gray"
+                        }
+                      >
+                        {u.role}
+                      </Badge>
+                    </Flex>
+                    <Flex gap="xs">
+                      <Text size="sm" c="dimmed" w={60}>
+                        Status
+                      </Text>
+                      <Badge
+                        size="sm"
+                        color={u.status === "active" ? "green" : "red"}
+                        variant="light"
+                      >
+                        {u.status}
+                      </Badge>
+                    </Flex>
+                  </Flex>
+                </Paper>
+                {u.notes && (
+                  <Paper p="sm" radius="md" withBorder>
+                    <Text size="sm" fw={600} mb="xs">
+                      Notes
+                    </Text>
+                    <Text size="sm">{u.notes}</Text>
+                  </Paper>
+                )}
+                <Paper p="sm" radius="md" withBorder>
+                  <Text size="sm" fw={600} mb="xs">
+                    Raw Data
+                  </Text>
+                  <Code block>{JSON.stringify(u, null, 2)}</Code>
+                </Paper>
+              </Flex>
+            )
+          : undefined
+      }
+      tableProps={{
+        highlightOnHover: true,
+      }}
+    />
+  );
+};
+
 const DemoDataTable = () => {
   return (
     <Showcase
@@ -131,246 +384,7 @@ const DemoDataTable = () => {
       }}
       columns={1}
     >
-      {(props) => (
-        <DataTable<User, typeof filters>
-          key={JSON.stringify(props)}
-          filters={filters}
-          defaultFilters={["search", "role"]}
-          submitOnInit
-          defaultSize={props.defaultSize}
-          withCheckbox={props.withCheckbox}
-          withExport={props.withExport}
-          getItemKey={(u) => String(u.id)}
-          onFilterChange={(key, _value, form) => {
-            if (key === "role" || key === "status") {
-              return form.submit();
-            }
-          }}
-          typeFormProps={{
-            skipSubmitButton: true,
-            columns: 3,
-          }}
-          items={async (params) => {
-            let filtered = [...sampleUsers];
-            if (params.search) {
-              const s = params.search.toLowerCase();
-              filtered = filtered.filter(
-                (u) =>
-                  u.name.toLowerCase().includes(s) ||
-                  u.email.toLowerCase().includes(s),
-              );
-            }
-            if (params.role) {
-              filtered = filtered.filter((u) => u.role === params.role);
-            }
-            if (params.status) {
-              filtered = filtered.filter((u) => u.status === params.status);
-            }
-            const start = params.page * params.size;
-            const content = filtered.slice(start, start + params.size);
-            return {
-              content,
-              page: {
-                totalElements: filtered.length,
-                totalPages: Math.ceil(filtered.length / params.size),
-              },
-            };
-          }}
-          actions={[
-            {
-              tooltip: "Add User",
-              icon: IconPlus,
-              variant: "light",
-              size: "xs",
-              onClick: () => alert("Add user clicked"),
-            },
-          ]}
-          checkboxActions={[
-            {
-              label: "Export Selected",
-              icon: <IconDownload size={14} />,
-              intent: "primary",
-              onClick: ({ selectedItems, clearSelection }) => {
-                alert(`Exporting ${selectedItems.length} users`);
-                clearSelection();
-              },
-            },
-            {
-              label: "Delete Selected",
-              icon: <IconTrash size={14} />,
-              intent: "danger",
-              onClick: ({ selectedItems, clearSelection }) => {
-                alert(`Deleting ${selectedItems.length} users`);
-                clearSelection();
-              },
-            },
-          ]}
-          columns={{
-            id: {
-              label: "ID",
-              value: (u) => <Text size="sm">{u.id}</Text>,
-              sortable: true,
-              fit: true,
-            },
-            name: {
-              label: "Name",
-              value: (u) => (
-                <Text size="sm" fw={500}>
-                  {u.name}
-                </Text>
-              ),
-              sortable: true,
-            },
-            email: {
-              label: "Email",
-              value: (u) => (
-                <Text size="sm" c="dimmed">
-                  {u.email}
-                </Text>
-              ),
-            },
-            role: {
-              label: "Role",
-              value: (u) => (
-                <Badge
-                  size="sm"
-                  color={
-                    u.role === "admin"
-                      ? "blue"
-                      : u.role === "user"
-                        ? "green"
-                        : "gray"
-                  }
-                >
-                  {u.role}
-                </Badge>
-              ),
-            },
-            status: {
-              label: "Status",
-              value: (u) => (
-                <Badge
-                  size="sm"
-                  color={u.status === "active" ? "green" : "red"}
-                  variant="light"
-                >
-                  {u.status}
-                </Badge>
-              ),
-            },
-            notes: {
-              label: "Notes",
-              defaultHidden: true,
-              value: (u) => (
-                <Text size="xs" c="dimmed" lineClamp={1}>
-                  {u.notes ?? "—"}
-                </Text>
-              ),
-            },
-            actions: {
-              label: "",
-              fit: true,
-              actions: (u) => [
-                {
-                  tooltip: "Edit",
-                  icon: IconEdit,
-                  color: "blue",
-                  onClick: () => alert(`Edit ${u.name}`),
-                },
-                {
-                  tooltip: "Delete",
-                  icon: IconTrash,
-                  color: "red",
-                  onClick: () => alert(`Delete ${u.name}`),
-                  visible: u.role !== "admin",
-                },
-              ],
-            },
-          }}
-          panel={
-            props.withPanel
-              ? {
-                  can: (u) => Boolean(u.notes),
-                  render: (u) => (
-                    <Flex direction="column" gap="xs" p="sm">
-                      <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
-                        Notes
-                      </Text>
-                      <Text size="sm">{u.notes}</Text>
-                    </Flex>
-                  ),
-                }
-              : undefined
-          }
-          drawer={
-            props.withDrawer
-              ? (u) => (
-                  <Flex direction="column" gap="md">
-                    <Text size="lg" fw={600}>
-                      {u.name}
-                    </Text>
-                    <Paper p="sm" radius="md" withBorder>
-                      <Flex direction="column" gap="xs">
-                        <Flex gap="xs">
-                          <Text size="sm" c="dimmed" w={60}>
-                            Email
-                          </Text>
-                          <Text size="sm">{u.email}</Text>
-                        </Flex>
-                        <Flex gap="xs">
-                          <Text size="sm" c="dimmed" w={60}>
-                            Role
-                          </Text>
-                          <Badge
-                            size="sm"
-                            color={
-                              u.role === "admin"
-                                ? "blue"
-                                : u.role === "user"
-                                  ? "green"
-                                  : "gray"
-                            }
-                          >
-                            {u.role}
-                          </Badge>
-                        </Flex>
-                        <Flex gap="xs">
-                          <Text size="sm" c="dimmed" w={60}>
-                            Status
-                          </Text>
-                          <Badge
-                            size="sm"
-                            color={u.status === "active" ? "green" : "red"}
-                            variant="light"
-                          >
-                            {u.status}
-                          </Badge>
-                        </Flex>
-                      </Flex>
-                    </Paper>
-                    {u.notes && (
-                      <Paper p="sm" radius="md" withBorder>
-                        <Text size="sm" fw={600} mb="xs">
-                          Notes
-                        </Text>
-                        <Text size="sm">{u.notes}</Text>
-                      </Paper>
-                    )}
-                    <Paper p="sm" radius="md" withBorder>
-                      <Text size="sm" fw={600} mb="xs">
-                        Raw Data
-                      </Text>
-                      <Code block>{JSON.stringify(u, null, 2)}</Code>
-                    </Paper>
-                  </Flex>
-                )
-              : undefined
-          }
-          tableProps={{
-            highlightOnHover: true,
-          }}
-        />
-      )}
+      {(props) => <DataTablePreview {...(props as DataTablePreviewProps)} />}
     </Showcase>
   );
 };

package/src/demo/components/core/DemoTypeForm.tsx

@@ -1,4 +1,4 @@
-import { TypeForm } from "@alepha/ui";
+import { TypeForm, useDialog } from "@alepha/ui";
 import { t } from "alepha";
 import { useForm } from "alepha/react/form";
 import Showcase from "../shared/Showcase.tsx";
@@ -32,11 +32,16 @@ const showcaseSchema = t.object({
 });
 
 const DemoTypeForm = () => {
+  const dialog = useDialog();
+
   const form = useForm(
     {
       schema: formSchema,
       handler: (values) => {
-        alert(JSON.stringify(values, null, 2));
+        dialog.alert({
+          title: "Submitted",
+          message: JSON.stringify(values, null, 2),
+        });
       },
     },
     [],

package/src/demo/components/shared/MacWindow.tsx

@@ -1,5 +1,5 @@
+import { Flex } from "@alepha/ui";
 import {
-  Flex,
   type FlexProps,
   Portal,
   SegmentedControl,
@@ -12,7 +12,6 @@ import {
   IconDeviceTablet,
 } from "@tabler/icons-react";
 import { type ReactNode, useState } from "react";
-
 export interface MacWindowProps {
   children: ReactNode;
   title?: string;
@@ -127,13 +126,7 @@ const MacWindow = ({ children, title, containerProps }: MacWindowProps) => {
   );
 
   const body = (
-    <Flex
-      direction={"column"}
-      flex={1}
-      p="md"
-      style={{ overflow: "auto" }}
-      {...containerProps}
-    >
+    <Flex overflow direction={"column"} flex={1} p="md" {...containerProps}>
       {children}
     </Flex>
   );
@@ -159,14 +152,15 @@ const MacWindow = ({ children, title, containerProps }: MacWindowProps) => {
 
   return (
     <Flex
-      direction="column"
+      col
+      overflow
+      h={"100%"}
       bdrs={"md"}
       style={{
         width: DEVICE_WIDTHS[device],
         maxWidth: "100%",
         border: "1px solid var(--mantine-color-default-border)",
         overflow: "hidden",
-        background: "var(--mantine-color-body)",
         boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
         transition: "width 0.3s ease",
       }}

package/src/demo/components/shared/Showcase.tsx

@@ -1,5 +1,4 @@
-import { TypeForm, ui } from "@alepha/ui";
-import { Card, Flex, Text } from "@mantine/core";
+import { Flex, Text, TypeForm } from "@alepha/ui";
 import type { Static, TObject } from "alepha";
 import { useForm } from "alepha/react/form";
 import { type ReactNode, useState } from "react";
@@ -36,14 +35,16 @@ export interface ShowcaseProps<T extends TObject> {
  * Showcase component for demonstrating UI components with interactive props configuration.
  * Uses TypeForm to render a form based on the props schema and displays the component preview.
  */
-const Showcase = <T extends TObject>({
-  title,
-  schema,
-  initialValues,
-  columns = 3,
-  children,
-  windowProps,
-}: ShowcaseProps<T>) => {
+const Showcase = <T extends TObject>(props: ShowcaseProps<T>) => {
+  const {
+    title,
+    schema,
+    initialValues,
+    columns = 3,
+    children,
+    windowProps,
+  } = props;
+
   const [values, setValues] = useState<Record<string, any>>(
     initialValues ?? {},
   );
@@ -63,43 +64,28 @@ const Showcase = <T extends TObject>({
   );
 
   return (
-    <Flex flex={1} px={"md"} gap={"md"}>
-      <Flex
-        flex={1}
-        bg={ui.colors.background}
-        h={"100%"}
-        justify="center"
-        align="flex-start"
-        style={{ flex: 1, minWidth: 0, overflow: "auto" }}
-      >
+    <Flex fill p={"md"} pt={0} gap={"md"} overflow>
+      <Flex fill overflow ground h={"100%"} justify="center" align="flex-start">
         <MacWindow title={title} {...windowProps}>
           {children(values as Static<T>)}
         </MacWindow>
       </Flex>
 
-      <Flex
-        h={"100%"}
-        style={{
-          flex: "0 0 300px",
-          overflow: "auto",
-        }}
-      >
-        <Card shadow="sm" radius="md">
-          <Card.Section withBorder py={"xs"} inheritPadding>
-            <Text size={"xs"} fw={500}>
-              {title} Props
-            </Text>
-          </Card.Section>
-
-          <Card.Section p={"sm"}>
-            <TypeForm
-              form={form}
-              columns={{ base: 1, xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }}
-              skipSubmitButton
-              skipFormElement
-            />
-          </Card.Section>
-        </Card>
+      <Flex h={"100%"} col surface bordered rounded shadowed w={300}>
+        <Flex p={"xs"} borderedBottom>
+          <Text size={"xs"} fw={500}>
+            {title} Props
+          </Text>
+        </Flex>
+        <Flex px={"md"} py={"xs"}>
+          <TypeForm
+            fill
+            form={form}
+            columns={{ base: 1, xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }}
+            skipSubmitButton
+            skipFormElement
+          />
+        </Flex>
       </Flex>
     </Flex>
   );