@alepha/ui 0.14.0 → 0.14.2

package/src/auth/components/buttons/UserButton.tsx

@@ -1,5 +1,5 @@
-import { useRouter } from "@alepha/react";
 import { useAuth } from "@alepha/react/auth";
+import { useRouter } from "@alepha/react/router";
 import {
   ActionButton,
   type ActionMenuConfig,

package/src/core/RootRouter.ts

@@ -1,4 +1,4 @@
-import { $page } from "@alepha/react";
+import { $page } from "@alepha/react/router";
 import AlephaMantineProvider from "./components/layout/AlephaMantineProvider.tsx";
 
 export class RootRouter {

package/src/core/components/buttons/ActionButton.tsx

@@ -1,12 +1,11 @@
+import { type UseActionReturn, useAction } from "@alepha/react";
+import { type FormModel, useFormState } from "@alepha/react/form";
 import {
   type RouterGoOptions,
-  type UseActionReturn,
   type UseActiveOptions,
-  useAction,
   useActive,
   useRouter,
-} from "@alepha/react";
-import { type FormModel, useFormState } from "@alepha/react/form";
+} from "@alepha/react/router";
 import {
   Anchor,
   type AnchorProps,

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

@@ -48,6 +48,9 @@ export interface ControlProps extends GenericControlProps {
   object?: boolean | Partial<Omit<ControlObjectProps, "input">>; // Nested object editing
   array?: boolean | Partial<Omit<ControlArrayProps, "input">>; // Array of items editing
   custom?: ComponentType<CustomControlProps>;
+
+  slider?: boolean;
+  segmented?: boolean;
 }
 
 /**
@@ -183,6 +186,9 @@ const Control = (_props: ControlProps) => {
   ) {
     const controlNumberProps =
       typeof props.number === "object" ? props.number : {};
+    if (props.slider) {
+      controlNumberProps.sliderProps ??= {};
+    }
     return (
       <ControlNumber
         input={props.input}
@@ -237,6 +243,9 @@ const Control = (_props: ControlProps) => {
 
   if (isEnum || (isArray && !isArrayOfObjects) || props.select) {
     const opts = typeof props.select === "object" ? props.select : {};
+    if (props.segmented) {
+      opts.segmented ??= {};
+    }
     return (
       <ControlSelect
         input={props.input}
@@ -264,7 +273,9 @@ const Control = (_props: ControlProps) => {
           id={id}
           color={"blue"}
           defaultChecked={props.input.props.defaultValue}
-          {...props.input.props}
+          onChange={(event) => {
+            props.input.set(event.currentTarget.checked);
+          }}
           {...switchProps}
         />
       );

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

@@ -50,6 +50,8 @@ const ControlNumber = (props: ControlNumberProps) => {
   const { type, ...inputPropsWithoutType } = props.input.props;
 
   if (props.sliderProps) {
+    const min = props.sliderProps.min ?? inputProps.minimum ?? 0;
+    const max = props.sliderProps.max ?? inputProps.maximum ?? 100;
     return (
       <Input.Wrapper {...inputProps}>
         <div
@@ -65,6 +67,9 @@ const ControlNumber = (props: ControlNumberProps) => {
             {...inputPropsWithoutType}
             {...props.sliderProps}
             value={value}
+            min={min}
+            max={max}
+            label={() => value}
             onChange={(val) => {
               setValue(val);
               props.input.set(val);

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

@@ -1,4 +1,5 @@
-import { NestedView, useEvents, useRouter, useStore } from "@alepha/react";
+import { useEvents, useStore } from "@alepha/react";
+import { NestedView, useRouter } from "@alepha/react/router";
 import {
   AppShell,
   type AppShellFooterProps,

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

@@ -1,5 +1,6 @@
-import { NestedView, useEvents } from "@alepha/react";
+import { useEvents } from "@alepha/react";
 import { FormValidationError } from "@alepha/react/form";
+import { NestedView } from "@alepha/react/router";
 import {
   ColorSchemeScript,
   type ColorSchemeScriptProps,

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

@@ -1,4 +1,5 @@
-import { useRouter, useStore } from "@alepha/react";
+import { useStore } from "@alepha/react";
+import { useRouter } from "@alepha/react/router";
 import { Spotlight, type SpotlightActionData } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
 import { type ReactNode, useMemo } from "react";

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

@@ -1,4 +1,5 @@
-import { useEvents, useRouter } from "@alepha/react";
+import { useEvents } from "@alepha/react";
+import { useRouter } from "@alepha/react/router";
 import {
   Flex,
   type FlexProps,
@@ -23,15 +24,13 @@ import OmnibarButton from "../buttons/OmnibarButton.tsx";
 import ToggleSidebarButton from "../buttons/ToggleSidebarButton.tsx";
 
 export interface SidebarProps {
-  menu?: SidebarNode[];
-  top?: SidebarNode[];
-  bottom?: SidebarNode[];
+  items?: SidebarNode[];
   onItemClick?: (item: SidebarMenuItem) => void;
   onSearchClick?: () => void;
   theme?: SidebarTheme;
   flexProps?: Partial<FlexProps>;
   collapsed?: boolean;
-  gap?: MantineBreakpoint;
+  gap?: MantineBreakpoint | number;
   hide?: {
     paths?: string[];
   };
@@ -48,7 +47,7 @@ export interface SidebarProps {
 
 export const Sidebar = (props: SidebarProps) => {
   const router = useRouter();
-  const { top = [], bottom = [], onItemClick } = props;
+  const { onItemClick } = props;
 
   const renderNode = (item: SidebarNode, key: number) => {
     if ("type" in item) {
@@ -128,11 +127,11 @@ export const Sidebar = (props: SidebarProps) => {
   };
 
   const getSidebarNodes = (): SidebarNode[] => {
-    if (props.menu) return props.menu;
+    if (props.items) return props.items;
     if (props.autoPopulateMenu) {
       const items = router.concretePages.map((page) => ({
         label: page.label ?? page.name,
-        description: page.description?.slice(0, 32),
+        //description: page.description?.slice(0, 32),
         icon: renderIcon(page.icon),
         href: router.path(page.name),
       })) as SidebarMenuItem[];
@@ -148,7 +147,7 @@ export const Sidebar = (props: SidebarProps) => {
   };
 
   const padding = "md";
-  const gap = props.menu ? props.gap : "xs";
+  const gap = props.items ? props.gap : "xs";
   const menu = useMemo(() => getSidebarNodes(), []);
 
   return (
@@ -160,10 +159,9 @@ export const Sidebar = (props: SidebarProps) => {
       {...props.flexProps}
     >
       <Flex gap={gap} px={padding} direction={"column"}>
-        {top.map((item, index) => renderNode(item, index))}
         {menu
           .filter((it) => it.position === "top")
-          .map((item, index) => renderNode(item, index + top.length))}
+          .map((item, index) => renderNode(item, index))}
       </Flex>
       <Flex
         gap={gap}
@@ -177,10 +175,9 @@ export const Sidebar = (props: SidebarProps) => {
           .map((item, index) => renderNode(item, index))}
       </Flex>
       <Flex gap={gap} px={padding} direction={"column"}>
-        {bottom.map((item, index) => renderNode(item, index))}
         {menu
           .filter((it) => it.position === "bottom")
-          .map((item, index) => renderNode(item, index + bottom.length))}
+          .map((item, index) => renderNode(item, index))}
       </Flex>
     </Flex>
   );

package/src/core/index.ts

@@ -35,7 +35,6 @@ export { default as LanguageButton } from "./components/buttons/LanguageButton.t
 export { default as OmnibarButton } from "./components/buttons/OmnibarButton.tsx";
 export type { ThemeButtonProps } from "./components/buttons/ThemeButton.tsx";
 export { default as ThemeButton } from "./components/buttons/ThemeButton.tsx";
-export { default as JsonViewer } from "./components/data/JsonViewer.tsx";
 export { default as AlertDialog } from "./components/dialogs/AlertDialog.tsx";
 export { default as ConfirmDialog } from "./components/dialogs/ConfirmDialog.tsx";
 export { default as PromptDialog } from "./components/dialogs/PromptDialog.tsx";
@@ -126,7 +125,7 @@ declare module "alepha" {
   }
 }
 
-declare module "@alepha/react" {
+declare module "@alepha/react/router" {
   interface PagePrimitiveOptions {
     /**
      * Human-readable title for the page.

package/src/core/services/DialogService.tsx

@@ -2,7 +2,6 @@ import { Flex, type ModalProps } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import type { ReactNode } from "react";
 import ErrorViewer from "../components/data/ErrorViewer.tsx";
-import JsonViewer from "../components/data/JsonViewer.tsx";
 import AlertDialog from "../components/dialogs/AlertDialog.tsx";
 import ConfirmDialog from "../components/dialogs/ConfirmDialog.tsx";
 import PromptDialog from "../components/dialogs/PromptDialog.tsx";
@@ -160,22 +159,6 @@ export class DialogService {
     }
   }
 
-  /**
-   * Show a JSON editor/viewer dialog
-   */
-  public json(data?: any, options?: BaseDialogOptions): void {
-    this.open({
-      size: "lg",
-      title: options?.title || "Json Viewer",
-      ...options,
-      content: (
-        <Flex bdrs={"md"} w={"100%"} flex={1} p={"sm"} bg={ui.colors.surface}>
-          <JsonViewer size={"xs"} data={data} />
-        </Flex>
-      ),
-    });
-  }
-
   /**
    * Show an error viewer dialog
    */

package/{styles.css → src/core/styles.css}

@@ -20,9 +20,7 @@
   --alepha-elevated: var(--alepha-elevated-light);
   --alepha-elevated-hover: var(--alepha-elevated-hover-light);
 
-  --alepha-border-light: var(--mantine-color-gray-3);
-  --alepha-border-dark: var(--mantine-color-dark-4);
-  --alepha-border: var(--alepha-border-light);
+  --alepha-border: var(--mantine-color-default-border);
 
   --alepha-text-light: #000000;
   --alepha-text-dark: #ffffff;
@@ -43,9 +41,7 @@
   --alepha-surface: var(--alepha-surface-dark);
   --alepha-elevated: var(--alepha-elevated-dark);
   --alepha-elevated-hover: var(--alepha-elevated-hover-dark);
-  --alepha-border: var(--alepha-border-dark);
   --alepha-background: var(--alepha-background-dark);
-  --alepha-shadow: var(--alepha-shadow-dark);
   --alepha-text: var(--alepha-text-dark);
 }
 

package/src/demo/DemoRouter.ts

@@ -0,0 +1,123 @@
+import { $page } from "@alepha/react/router";
+import {
+  IconBinaryTree,
+  IconBraces,
+  IconForms,
+  IconHome,
+  IconKey,
+  IconLayoutSidebar,
+  IconLockQuestion,
+  IconLogin,
+  IconMailCheck,
+  IconPackages,
+  IconTable,
+  IconUserPlus,
+  IconWall,
+} from "@tabler/icons-react";
+
+export class DemoRouter {
+  demoLayout = $page({
+    icon: IconPackages,
+    path: "/demo",
+    label: "Demo",
+    lazy: () => import("./components/DemoLayout.tsx"),
+    children: () => [
+      this.demoHome,
+      this.demoCore,
+      this.demoJson,
+      this.demoAuth,
+    ],
+  });
+
+  demoHome = $page({
+    icon: IconHome,
+    path: "/",
+    label: "Home",
+    lazy: () => import("./components/DemoHome.tsx"),
+  });
+
+  // Core Components
+  demoCore = $page({
+    icon: IconWall,
+    path: "/core",
+    label: "Core",
+    children: () => [this.demoTypeForm, this.demoSidebar, this.demoDataTable],
+  });
+
+  demoTypeForm = $page({
+    icon: IconForms,
+    path: "/type-form",
+    label: "TypeForm",
+    lazy: () => import("./components/core/DemoTypeForm.tsx"),
+  });
+
+  demoSidebar = $page({
+    icon: IconLayoutSidebar,
+    path: "/sidebar",
+    label: "Sidebar",
+    lazy: () => import("./components/core/DemoSidebar.tsx"),
+  });
+
+  demoDataTable = $page({
+    icon: IconTable,
+    path: "/data-table",
+    label: "DataTable",
+    lazy: () => import("./components/core/DemoDataTable.tsx"),
+  });
+
+  // JSON Components
+  demoJson = $page({
+    icon: IconBraces,
+    path: "/json",
+    label: "Json",
+    children: () => [this.demoJsonViewer],
+  });
+
+  demoJsonViewer = $page({
+    icon: IconBinaryTree,
+    path: "/viewer",
+    label: "JsonViewer",
+    lazy: () => import("./components/json/DemoJsonViewer.tsx"),
+  });
+
+  // Auth Components
+  demoAuth = $page({
+    icon: IconKey,
+    path: "/auth",
+    label: "Auth",
+    children: () => [
+      this.demoLogin,
+      this.demoRegister,
+      this.demoResetPassword,
+      this.demoVerifyEmail,
+    ],
+  });
+
+  demoLogin = $page({
+    icon: IconLogin,
+    path: "/login",
+    label: "Login",
+    lazy: () => import("./components/auth/DemoLogin.tsx"),
+  });
+
+  demoRegister = $page({
+    icon: IconUserPlus,
+    path: "/register",
+    label: "Register",
+    lazy: () => import("./components/auth/DemoRegister.tsx"),
+  });
+
+  demoResetPassword = $page({
+    icon: IconLockQuestion,
+    path: "/reset-password",
+    label: "ResetPassword",
+    lazy: () => import("./components/auth/DemoResetPassword.tsx"),
+  });
+
+  demoVerifyEmail = $page({
+    icon: IconMailCheck,
+    path: "/verify-email",
+    label: "VerifyEmail",
+    lazy: () => import("./components/auth/DemoVerifyEmail.tsx"),
+  });
+}

package/src/demo/components/DemoHome.tsx

@@ -0,0 +1,29 @@
+import { Box, Stack, Text, Title } from "@mantine/core";
+import { IconBraces } from "@tabler/icons-react";
+
+const components = [
+  {
+    name: "JsonViewer",
+    description:
+      "Interactive JSON viewer with syntax highlighting, expand/collapse, and copy functionality.",
+    icon: IconBraces,
+    href: "/demo/json-viewer",
+  },
+];
+
+const DemoHome = () => {
+  return (
+    <Stack gap="xl" p="xl">
+      <Box>
+        <Title order={1} mb="xs">
+          Component Showcase
+        </Title>
+        <Text c="dimmed" size="lg">
+          Interactive demos and documentation for @alepha/ui components.
+        </Text>
+      </Box>
+    </Stack>
+  );
+};
+
+export default DemoHome;

package/src/demo/components/DemoLayout.tsx

@@ -0,0 +1,52 @@
+import { useRouter } from "@alepha/react/router";
+import { ActionButton, AdminShell, AlephaMantineProvider } from "@alepha/ui";
+import { IconArrowLeft } from "@tabler/icons-react";
+import type { DemoRouter } from "../DemoRouter.ts";
+
+const DemoLayout = () => {
+  const router = useRouter<DemoRouter>();
+  return (
+    <AlephaMantineProvider>
+      <AdminShell
+        appShellMainProps={{ h: "100%" }}
+        appBarProps={{
+          items: [
+            {
+              element: (
+                <ActionButton variant="subtle" icon={IconArrowLeft} href="/" />
+              ),
+              position: "left",
+            },
+            {
+              type: "dark",
+              position: "right",
+            },
+          ],
+        }}
+        sidebarProps={{
+          items: [
+            router.node("demoHome"),
+            {
+              ...router.node("demoCore"),
+              children: [
+                router.node("demoTypeForm"),
+                router.node("demoSidebar"),
+                router.node("demoDataTable"),
+              ],
+            },
+            {
+              ...router.node("demoJson"),
+              children: [router.node("demoJsonViewer")],
+            },
+            {
+              ...router.node("demoAuth"),
+              children: [router.node("demoLogin"), router.node("demoRegister")],
+            },
+          ],
+        }}
+      />
+    </AlephaMantineProvider>
+  );
+};
+
+export default DemoLayout;

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

@@ -0,0 +1,130 @@
+import { t } from "alepha";
+import type { UserRealmConfig } from "alepha/api/users";
+import Login from "../../../auth/components/Login.tsx";
+import Showcase from "../shared/Showcase.tsx";
+
+const showcaseSchema = t.object({
+  showCredentials: t.boolean({
+    title: "Credentials",
+    default: true,
+    $control: { switch: true },
+  }),
+  showGoogleOAuth: t.boolean({
+    title: "Google OAuth",
+    default: true,
+    $control: { switch: true },
+  }),
+  showGithubOAuth: t.boolean({
+    title: "GitHub OAuth",
+    default: false,
+    $control: { switch: true },
+  }),
+  usernameEnabled: t.boolean({
+    title: "Username Login",
+    default: true,
+    $control: { switch: true },
+  }),
+  emailEnabled: t.boolean({
+    title: "Email Login",
+    default: true,
+    $control: { switch: true },
+  }),
+  phoneEnabled: t.boolean({
+    title: "Phone Login",
+    default: false,
+    $control: { switch: true },
+  }),
+  registrationAllowed: t.boolean({
+    title: "Show Sign Up",
+    default: true,
+    $control: { switch: true },
+  }),
+  resetPasswordAllowed: t.boolean({
+    title: "Forgot Password",
+    default: true,
+    $control: { switch: true },
+  }),
+  showBranding: t.boolean({
+    title: "Show Branding",
+    default: true,
+    $control: { switch: true },
+  }),
+});
+
+const buildRealmConfig = (props: {
+  showCredentials: boolean;
+  showGoogleOAuth: boolean;
+  showGithubOAuth: boolean;
+  usernameEnabled: boolean;
+  emailEnabled: boolean;
+  phoneEnabled: boolean;
+  registrationAllowed: boolean;
+  resetPasswordAllowed: boolean;
+  showBranding: boolean;
+}): UserRealmConfig => {
+  const authMethods: UserRealmConfig["authenticationMethods"] = [];
+
+  if (props.showCredentials) {
+    authMethods.push({ name: "credentials", type: "CREDENTIALS" });
+  }
+  if (props.showGoogleOAuth) {
+    authMethods.push({ name: "google", type: "OAUTH2" });
+  }
+  if (props.showGithubOAuth) {
+    authMethods.push({ name: "github", type: "OAUTH2" });
+  }
+
+  return {
+    realmName: "demo",
+    authenticationMethods: authMethods,
+    settings: {
+      displayName: props.showBranding ? "Demo App" : undefined,
+      description: props.showBranding ? "Sign in to continue" : undefined,
+      logoUrl: undefined,
+      registrationAllowed: props.registrationAllowed,
+      emailEnabled: props.emailEnabled,
+      emailRequired: false,
+      usernameEnabled: props.usernameEnabled,
+      usernameRequired: false,
+      phoneEnabled: props.phoneEnabled,
+      phoneRequired: false,
+      verifyEmailRequired: false,
+      verifyPhoneRequired: false,
+      firstNameLastNameEnabled: false,
+      firstNameLastNameRequired: false,
+      resetPasswordAllowed: props.resetPasswordAllowed,
+      passwordPolicy: {
+        minLength: 8,
+        requireUppercase: true,
+        requireLowercase: true,
+        requireNumbers: true,
+        requireSpecialCharacters: false,
+      },
+    },
+  };
+};
+
+const DemoLogin = () => {
+  return (
+    <Showcase
+      title="Login"
+      schema={showcaseSchema}
+      initialValues={{
+        showCredentials: true,
+        showGoogleOAuth: true,
+        showGithubOAuth: false,
+        usernameEnabled: true,
+        emailEnabled: true,
+        phoneEnabled: false,
+        registrationAllowed: true,
+        resetPasswordAllowed: true,
+        showBranding: true,
+      }}
+      columns={1}
+    >
+      {(props) => <Login realmConfig={buildRealmConfig(props)} />}
+    </Showcase>
+  );
+};
+
+export default DemoLogin;