@alepha/ui 0.17.2 → 0.18.1

package/src/core/{components/table → table/components}/DataTableToolbar.tsx

@@ -1,3 +1,4 @@
+import { ActionButton, type ActionProps, isComponentType } from "@alepha/ui";
 import { Badge, Divider, Flex } from "@mantine/core";
 import {
   IconClipboard,
@@ -7,17 +8,15 @@ import {
 } from "@tabler/icons-react";
 import type { TObject } from "alepha";
 import { isValidElement, type ReactNode, useCallback } from "react";
-import { isComponentType } from "../../helpers/isComponentType.ts";
-import ActionButton, { type ActionProps } from "../buttons/ActionButton.tsx";
-import ColumnPicker from "./ColumnPicker.tsx";
-import FilterPicker from "./FilterPicker.tsx";
 import type {
   CheckboxAction,
   CheckboxActionContext,
   ColumnVisibility,
   DataTableColumn,
   FilterVisibility,
-} from "./types.ts";
+} from "../interfaces/types.ts";
+import ColumnPicker from "./ColumnPicker.tsx";
+import FilterPicker from "./FilterPicker.tsx";
 
 // ─────────────────────────────────────────────────────────────────────────────
 

package/src/core/{components/table → table/components}/FilterPicker.tsx

@@ -1,10 +1,9 @@
+import { ActionButton, ui } from "@alepha/ui";
 import { Checkbox, Flex, Popover, ScrollArea, Text } from "@mantine/core";
 import { IconFilter } 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 { FilterVisibility } from "./types.ts";
+import type { FilterVisibility } from "../interfaces/types.ts";
 
 export interface FilterPickerProps {
   schema: TObject;

package/src/core/table/index.ts

@@ -0,0 +1,12 @@
+export { default as DataTable } from "./components/DataTable.tsx";
+export type {
+  CheckboxAction,
+  CheckboxActionContext,
+  ColumnVisibility,
+  DataTableColumn,
+  DataTableColumnContext,
+  DataTableProps,
+  DataTableSubmitContext,
+  FilterVisibility,
+  MaybePage,
+} from "./interfaces/types.ts";

package/src/core/{components/table → table/interfaces}/types.ts

@@ -1,3 +1,4 @@
+import type { ActionProps } from "@alepha/ui";
 import type { DrawerProps, TableProps, TableTrProps } from "@mantine/core";
 import type {
   Alepha,
@@ -10,8 +11,7 @@ import type {
 import type { DurationLike } from "alepha/datetime";
 import type { FormModel } from "alepha/react/form";
 import type { ReactNode } from "react";
-import type { ActionProps } from "../buttons/ActionButton.tsx";
-import type { TypeFormProps } from "../form/TypeForm.tsx";
+import type { TypeFormProps } from "../../form/components/TypeForm.tsx";
 
 // -----------------------------------------------------------------------------
 // Constants

package/src/demo/DemoRouter.ts

@@ -1,14 +1,21 @@
 import {
+  IconBell,
   IconBinaryTree,
   IconBraces,
+  IconClick,
   IconForms,
+  IconHeading,
   IconHome,
   IconKey,
+  IconLayout,
   IconLayoutSidebar,
+  IconLetterT,
   IconLockQuestion,
   IconLogin,
   IconMailCheck,
+  IconMessage,
   IconPackages,
+  IconRowInsertBottom,
   IconTable,
   IconUserPlus,
   IconWall,
@@ -24,6 +31,9 @@ export class DemoRouter {
     children: () => [
       this.demoHome,
       this.demoCore,
+      this.demoLayoutSection,
+      this.demoForm,
+      this.demoTable,
       this.demoJson,
       this.demoAuth,
     ],
@@ -41,7 +51,77 @@ export class DemoRouter {
     icon: IconWall,
     path: "/core",
     label: "Core",
-    children: () => [this.demoTypeForm, this.demoSidebar, this.demoDataTable],
+    children: () => [
+      this.demoFlex,
+      this.demoText,
+      this.demoButton,
+      this.demoHeading,
+    ],
+  });
+
+  demoFlex = $page({
+    icon: IconRowInsertBottom,
+    path: "/flex",
+    label: "Flex",
+    lazy: () => import("./components/core/DemoFlex.tsx"),
+  });
+
+  demoText = $page({
+    icon: IconLetterT,
+    path: "/text",
+    label: "Text",
+    lazy: () => import("./components/core/DemoText.tsx"),
+  });
+
+  demoHeading = $page({
+    icon: IconHeading,
+    path: "/heading",
+    label: "Heading",
+    lazy: () => import("./components/core/DemoHeading.tsx"),
+  });
+
+  demoButton = $page({
+    icon: IconClick,
+    path: "/button",
+    label: "Button",
+    lazy: () => import("./components/core/DemoButton.tsx"),
+  });
+
+  // Layout Components
+  demoLayoutSection = $page({
+    icon: IconLayout,
+    path: "/layout",
+    label: "Layout",
+    children: () => [this.demoSidebar, this.demoDialog, this.demoToast],
+  });
+
+  demoSidebar = $page({
+    icon: IconLayoutSidebar,
+    path: "/sidebar",
+    label: "Sidebar",
+    lazy: () => import("./components/layout/DemoSidebar.tsx"),
+  });
+
+  demoDialog = $page({
+    icon: IconMessage,
+    path: "/dialog",
+    label: "Dialog",
+    lazy: () => import("./components/layout/DemoDialog.tsx"),
+  });
+
+  demoToast = $page({
+    icon: IconBell,
+    path: "/toast",
+    label: "Toast",
+    lazy: () => import("./components/layout/DemoToast.tsx"),
+  });
+
+  // Form Components
+  demoForm = $page({
+    icon: IconForms,
+    path: "/form",
+    label: "Form",
+    children: () => [this.demoTypeForm],
   });
 
   demoTypeForm = $page({
@@ -51,11 +131,12 @@ export class DemoRouter {
     lazy: () => import("./components/core/DemoTypeForm.tsx"),
   });
 
-  demoSidebar = $page({
-    icon: IconLayoutSidebar,
-    path: "/sidebar",
-    label: "Sidebar",
-    lazy: () => import("./components/core/DemoSidebar.tsx"),
+  // Table Components
+  demoTable = $page({
+    icon: IconTable,
+    path: "/table",
+    label: "Table",
+    children: () => [this.demoDataTable],
   });
 
   demoDataTable = $page({

package/src/demo/components/DemoHome.tsx

@@ -1,4 +1,4 @@
-import { Flex, Text, Title } from "@mantine/core";
+import { Flex, Text } from "@alepha/ui";
 import { IconBraces } from "@tabler/icons-react";
 
 const components = [
@@ -13,15 +13,11 @@ const components = [
 
 const DemoHome = () => {
   return (
-    <Flex direction="column" gap="xl" p="xl">
-      <Flex>
-        <Title order={1} mb="xs">
-          Component Showcase
-        </Title>
-        <Text c="dimmed" size="lg">
-          Interactive demos and documentation for @alepha/ui components.
-        </Text>
-      </Flex>
+    <Flex p={"lg"} col>
+      <Text title>Component Showcase</Text>
+      <Text c="dimmed">
+        Interactive demos and documentation for @alepha/ui components.
+      </Text>
     </Flex>
   );
 };

package/src/demo/components/DemoLayout.tsx

@@ -1,9 +1,10 @@
 import {
-  ActionButton,
   AlephaMantineProvider,
+  Breadcrumbs,
   DashboardShell,
+  SidebarCollapseButton,
+  ui,
 } from "@alepha/ui";
-import { IconArrowLeft } from "@tabler/icons-react";
 import { useRouter } from "alepha/react/router";
 import type { DemoRouter } from "../DemoRouter.ts";
 
@@ -12,13 +13,21 @@ const DemoLayout = () => {
   return (
     <AlephaMantineProvider>
       <DashboardShell
-        appShellMainProps={{ h: "100%" }}
+        appShellProps={{
+          withBorder: false,
+          bg: ui.colors.background,
+        }}
+        appShellHeaderProps={{
+          bg: "transparent",
+        }}
         appBarProps={{
           items: [
             {
-              element: (
-                <ActionButton variant="subtle" icon={IconArrowLeft} href="/" />
-              ),
+              type: "burger",
+              position: "left",
+            },
+            {
+              element: <Breadcrumbs />,
               position: "left",
             },
             {
@@ -33,11 +42,28 @@ const DemoLayout = () => {
             {
               ...router.node("demoCore"),
               children: [
-                router.node("demoTypeForm"),
+                router.node("demoFlex"),
+                router.node("demoText"),
+                router.node("demoHeading"),
+                router.node("demoButton"),
+              ],
+            },
+            {
+              ...router.node("demoLayoutSection"),
+              children: [
                 router.node("demoSidebar"),
-                router.node("demoDataTable"),
+                router.node("demoDialog"),
+                router.node("demoToast"),
               ],
             },
+            {
+              ...router.node("demoForm"),
+              children: [router.node("demoTypeForm")],
+            },
+            {
+              ...router.node("demoTable"),
+              children: [router.node("demoDataTable")],
+            },
             {
               ...router.node("demoJson"),
               children: [router.node("demoJsonViewer")],
@@ -46,6 +72,10 @@ const DemoLayout = () => {
               ...router.node("demoAuth"),
               children: [router.node("demoLogin"), router.node("demoRegister")],
             },
+            {
+              position: "bottom",
+              element: <SidebarCollapseButton />,
+            },
           ],
         }}
       />

package/src/demo/components/auth/DemoLogin.tsx

@@ -1,6 +1,6 @@
+import { Login } from "@alepha/ui/auth";
 import { t } from "alepha";
 import type { RealmConfig } from "alepha/api/users";
-import Login from "../../../auth/components/Login.tsx";
 import Showcase from "../shared/Showcase.tsx";
 
 const showcaseSchema = t.object({

package/src/demo/components/auth/DemoRegister.tsx

@@ -1,6 +1,6 @@
+import { Register } from "@alepha/ui/auth";
 import { t } from "alepha";
 import type { RealmConfig } from "alepha/api/users";
-import Register from "../../../auth/components/Register.tsx";
 import Showcase from "../shared/Showcase.tsx";
 
 const showcaseSchema = t.object({

package/src/demo/components/auth/DemoResetPassword.tsx

@@ -1,6 +1,6 @@
+import { ResetPassword } from "@alepha/ui/auth";
 import { t } from "alepha";
 import type { RealmConfig } from "alepha/api/users";
-import ResetPassword from "../../../auth/components/ResetPassword.tsx";
 import Showcase from "../shared/Showcase.tsx";
 
 const showcaseSchema = t.object({

package/src/demo/components/auth/DemoVerifyEmail.tsx

@@ -1,5 +1,5 @@
+import { VerifyEmail } from "@alepha/ui/auth";
 import { t } from "alepha";
-import VerifyEmail from "../../../auth/components/VerifyEmail.tsx";
 import Showcase from "../shared/Showcase.tsx";
 
 const showcaseSchema = t.object({

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

@@ -0,0 +1,160 @@
+import { ActionButton, Flex } from "@alepha/ui";
+import {
+  IconCheck,
+  IconDownload,
+  IconPlus,
+  IconSettings,
+  IconTrash,
+} from "@tabler/icons-react";
+import { t } from "alepha";
+import Showcase from "../shared/Showcase.tsx";
+
+const showcaseSchema = t.object({
+  variant: t.enum(
+    ["filled", "light", "outline", "subtle", "default", "transparent"],
+    {
+      title: "variant",
+      default: "filled",
+    },
+  ),
+  size: t.enum(["xs", "sm", "md", "lg", "xl"], {
+    title: "size",
+    default: "md",
+  }),
+  intent: t.enum(["none", "primary", "success", "danger", "warning", "info"], {
+    title: "intent",
+    default: "none",
+  }),
+  disabled: t.boolean({
+    title: "disabled",
+    default: false,
+    $control: { switch: true },
+  }),
+  loading: t.boolean({
+    title: "loading",
+    default: false,
+    $control: { switch: true },
+  }),
+});
+
+const DemoActionButton = () => {
+  return (
+    <Showcase
+      title="ActionButton"
+      schema={showcaseSchema}
+      initialValues={{
+        variant: "filled",
+        size: "md",
+        intent: "none",
+        disabled: false,
+        loading: false,
+      }}
+      columns={1}
+    >
+      {(props) => (
+        <Flex col gap="xl" p="md">
+          <Flex gap="md" wrap="wrap" centerY>
+            <ActionButton
+              variant={props.variant}
+              size={props.size}
+              intent={props.intent}
+              disabled={props.disabled}
+              loading={props.loading}
+              onClick={() => alert("Clicked")}
+            >
+              Default
+            </ActionButton>
+            <ActionButton
+              variant={props.variant}
+              size={props.size}
+              intent={props.intent}
+              disabled={props.disabled}
+              loading={props.loading}
+              icon={IconPlus}
+              onClick={() => alert("Create")}
+            >
+              Create
+            </ActionButton>
+            <ActionButton
+              variant={props.variant}
+              size={props.size}
+              intent={props.intent}
+              disabled={props.disabled}
+              loading={props.loading}
+              icon={IconTrash}
+              onClick={() => alert("Delete")}
+            />
+          </Flex>
+
+          <Flex gap="md" wrap="wrap" centerY>
+            <ActionButton
+              variant="filled"
+              size={props.size}
+              intent="primary"
+              icon={IconCheck}
+              onClick={() => {}}
+            >
+              Save
+            </ActionButton>
+            <ActionButton
+              variant="filled"
+              size={props.size}
+              intent="danger"
+              icon={IconTrash}
+              confirm="Are you sure?"
+              onClick={() => alert("Deleted")}
+            >
+              Delete
+            </ActionButton>
+            <ActionButton
+              variant="light"
+              size={props.size}
+              icon={IconDownload}
+              onClick={() => {}}
+            >
+              Export
+            </ActionButton>
+            <ActionButton
+              variant="subtle"
+              size={props.size}
+              icon={IconSettings}
+              onClick={() => {}}
+            />
+          </Flex>
+
+          <Flex gap="md" wrap="wrap" centerY>
+            <ActionButton
+              variant={props.variant}
+              size={props.size}
+              menu={{
+                items: [
+                  { label: "Edit", icon: <IconSettings size={14} /> },
+                  { type: "divider" },
+                  {
+                    label: "Delete",
+                    icon: <IconTrash size={14} />,
+                    color: "red",
+                  },
+                ],
+              }}
+              onClick={() => {}}
+            >
+              With Menu
+            </ActionButton>
+            <ActionButton
+              variant={props.variant}
+              size={props.size}
+              tooltip="This button has a tooltip"
+              icon={IconSettings}
+              onClick={() => {}}
+            >
+              With Tooltip
+            </ActionButton>
+          </Flex>
+        </Flex>
+      )}
+    </Showcase>
+  );
+};
+
+export default DemoActionButton;

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

@@ -0,0 +1,101 @@
+import { Flex, Text } from "@alepha/ui";
+import { t } from "alepha";
+import Showcase from "../shared/Showcase.tsx";
+
+const showcaseSchema = t.object({
+  fill: t.boolean({
+    title: "fill",
+    default: false,
+    $control: { switch: true },
+  }),
+  col: t.boolean({
+    title: "col",
+    default: false,
+    $control: { switch: true },
+  }),
+  center: t.boolean({
+    title: "center",
+    default: false,
+    $control: { switch: true },
+  }),
+  centerX: t.boolean({
+    title: "centerX",
+    default: false,
+    $control: { switch: true },
+  }),
+  centerY: t.boolean({
+    title: "centerY",
+    default: false,
+    $control: { switch: true },
+  }),
+  gap: t.enum(["0", "xs", "sm", "md", "lg", "xl"], {
+    title: "gap",
+    default: "md",
+  }),
+  wrap: t.enum(["nowrap", "wrap"], {
+    title: "wrap",
+    default: "nowrap",
+  }),
+});
+
+const Item = ({ label }: { label: string }) => (
+  <Flex
+    center
+    style={{
+      background: "var(--mantine-primary-color-light)",
+      border: "1px solid var(--mantine-primary-color-light-hover)",
+      borderRadius: 6,
+      padding: "8px 16px",
+      minWidth: 60,
+      minHeight: 40,
+    }}
+  >
+    <Text size="sm" fw={500}>
+      {label}
+    </Text>
+  </Flex>
+);
+
+const DemoFlex = () => {
+  return (
+    <Showcase
+      title="Flex"
+      schema={showcaseSchema}
+      initialValues={{
+        fill: false,
+        col: false,
+        center: false,
+        centerX: false,
+        centerY: false,
+        gap: "md",
+        wrap: "nowrap",
+      }}
+      columns={1}
+      windowProps={{}}
+    >
+      {(props) => (
+        <Flex
+          fill={props.fill}
+          col={props.col}
+          center={props.center}
+          centerX={props.centerX}
+          centerY={props.centerY}
+          gap={props.gap === "0" ? 0 : props.gap}
+          wrap={props.wrap}
+          style={{
+            minHeight: 200,
+            border: "1px dashed var(--mantine-color-default-border)",
+            borderRadius: 8,
+            padding: 16,
+          }}
+        >
+          <Item label="A" />
+          <Item label="B" />
+          <Item label="C" />
+        </Flex>
+      )}
+    </Showcase>
+  );
+};
+
+export default DemoFlex;

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

@@ -0,0 +1,13 @@
+import { Heading } from "@alepha/ui";
+import { t } from "alepha";
+import Showcase from "../shared/Showcase.tsx";
+
+const DemoHeading = () => {
+  return (
+    <Showcase title="Flex" schema={t.object({})} initialValues={{}}>
+      {(props) => <Heading title={"Hello!"} />}
+    </Showcase>
+  );
+};
+
+export default DemoHeading;