@alepha/ui 0.18.1 → 0.18.3

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

@@ -0,0 +1,91 @@
+import { IconSquareRounded } from "@tabler/icons-react";
+import { useRouter } from "alepha/react/router";
+import { ui } from "../../constants/ui.ts";
+import { renderIcon } from "../../helpers/renderIcon.tsx";
+import type {
+  ActionMenuConfig,
+  ActionMenuItem,
+} from "../buttons/ActionButton.tsx";
+import ActionButton from "../buttons/ActionButton.tsx";
+import Flex from "../Flex.tsx";
+import type { SidebarItemProps } from "./SidebarItem.tsx";
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export const SidebarCollapsedItem = (props: SidebarItemProps) => {
+  const router = useRouter();
+
+  const handleItemClick = () => {
+    props.onItemClick?.(props.item);
+    props.item.onClick?.();
+  };
+
+  const hasChildren = props.item.children && props.item.children.length > 0;
+
+  const menu: ActionMenuConfig | undefined = hasChildren
+    ? {
+        on: "hover",
+        position: "right",
+        menuProps: {
+          arrowPosition: "center",
+          arrowSize: 10,
+          withArrow: true,
+        },
+        items: [
+          {
+            type: "label",
+            label: props.item.label,
+          },
+          ...props.item
+            .children!.filter((child) => !child.can || child.can())
+            .map(
+              (child): ActionMenuItem => ({
+                label: child.label as string,
+                icon: renderIcon(child.icon, ui.sizes.icon.sm),
+                href: child.href,
+                active: child.href
+                  ? router.isActive(child.href, {
+                      startWith: child.activeStartsWith,
+                    })
+                  : undefined,
+              }),
+            ),
+        ],
+      }
+    : undefined;
+
+  return (
+    <Flex w={"100%"} justify="center" pos={"relative"}>
+      <ActionButton
+        size={
+          props.item.theme?.size ??
+          props.theme.button?.size ??
+          (props.level === 0 ? "sm" : "xs")
+        }
+        bd={0}
+        variant={"default"}
+        propsActive={{
+          variant: "outline",
+        }}
+        tooltip={
+          hasChildren
+            ? undefined
+            : {
+                label: props.item.label,
+                position: "right",
+              }
+        }
+        onClick={hasChildren ? undefined : handleItemClick}
+        icon={
+          renderIcon(props.item.icon, ui.sizes.icon.sm) ?? (
+            <IconSquareRounded size={ui.sizes.icon.sm} />
+          )
+        }
+        href={hasChildren ? undefined : (props.item.href as any)}
+        target={hasChildren ? undefined : props.item.target}
+        menu={menu}
+        {...props.item.actionProps}
+      />
+    </Flex>
+  );
+};

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

@@ -0,0 +1,146 @@
+import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
+import { useEvents } from "alepha/react";
+import { useRouter } from "alepha/react/router";
+import { useCallback, useState } from "react";
+import { ui } from "../../constants/ui.ts";
+import { renderIcon } from "../../helpers/renderIcon.tsx";
+import ActionButton from "../buttons/ActionButton.tsx";
+import Flex from "../Flex.tsx";
+import type { SidebarMenuItem, SidebarTheme } from "./Sidebar.tsx";
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export interface SidebarItemProps {
+  item: SidebarMenuItem;
+  level: number;
+  onItemClick?: (item: SidebarMenuItem) => void;
+  theme: SidebarTheme;
+}
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export const SidebarItem = (props: SidebarItemProps) => {
+  const maxLevel = 2; // 0, 1, 2 = 3 levels total
+
+  const router = useRouter();
+  const isActive = useCallback((item: SidebarMenuItem): boolean => {
+    if (!item.children) return false;
+    for (const child of item.children) {
+      if (child.href) {
+        if (router.isActive(child.href)) {
+          return true;
+        }
+      }
+      if (isActive(child)) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
+
+  const [isOpen, setIsOpen] = useState<boolean>(isActive(props.item));
+
+  useEvents(
+    {
+      "react:transition:end": () => {
+        // recalculate open state on transition end to ensure correct state after navigation
+        if (isActive(props.item)) {
+          setIsOpen(true);
+        }
+      },
+    },
+    [],
+  );
+
+  if (props.level > maxLevel) return null;
+
+  const handleItemClick = (e: MouseEvent) => {
+    if (!props.item.target) {
+      e.preventDefault();
+    }
+    if (props.item.children && props.item.children.length > 0) {
+      setIsOpen(!isOpen);
+    } else {
+      props.onItemClick?.(props.item);
+      props.item.onClick?.();
+    }
+  };
+
+  return (
+    <Flex direction={"column"} ps={props.level === 0 ? 0 : 32} pos={"relative"}>
+      <ActionButton
+        w={"100%"}
+        justify="space-between"
+        href={props.item.href}
+        target={props.item.target}
+        size={
+          props.item.theme?.size ??
+          props.theme.button?.size ??
+          (props.level === 0 ? "sm" : "xs")
+        }
+        bd={0}
+        fw={"normal"}
+        variant={"default"}
+        propsActive={{
+          variant: "outline",
+        }}
+        radius={props.item.theme?.radius ?? props.theme.button?.radius ?? "md"}
+        onClick={handleItemClick}
+        leftSection={
+          <Flex w={"100%"} align="center" gap={"sm"}>
+            {renderIcon(props.item.icon, ui.sizes.icon.sm)}
+            <Flex direction={"column"}>
+              <Flex>{props.item.label}</Flex>
+            </Flex>
+          </Flex>
+        }
+        rightSection={
+          props.item.children ? (
+            <Flex>
+              {isOpen ? (
+                <IconChevronDown size={14} />
+              ) : (
+                <IconChevronRight size={14} />
+              )}
+            </Flex>
+          ) : (
+            props.item.rightSection
+          )
+        }
+        {...props.item.actionProps}
+      />
+
+      {props.item.children && isOpen && (
+        <Flex
+          direction={"column"}
+          data-parent-level={props.level}
+          gap={2}
+          py={2}
+        >
+          <Flex
+            style={{
+              position: "absolute",
+              width: 1,
+              background:
+                "linear-gradient(to bottom, transparent, var(--mantine-color-default-border), transparent)",
+              top: 48,
+              left: 20 + 32 * props.level,
+              bottom: 16,
+            }}
+          />
+          {props.item.children
+            .filter((child) => !child.can || child.can())
+            .map((child, index) => (
+              <SidebarItem
+                key={index}
+                item={child}
+                level={props.level + 1}
+                onItemClick={props.onItemClick}
+                theme={props.theme}
+              />
+            ))}
+        </Flex>
+      )}
+    </Flex>
+  );
+};

package/src/core/components/layout/index.ts

@@ -35,7 +35,6 @@ export type {
   SidebarButtonTheme,
   SidebarDivider,
   SidebarElement,
-  SidebarItemProps,
   SidebarMenuItem,
   SidebarNode,
   SidebarProps,
@@ -45,6 +44,9 @@ export type {
   SidebarTheme,
 } from "./Sidebar.tsx";
 export { Sidebar } from "./Sidebar.tsx";
+export { SidebarCollapsedItem } from "./SidebarCollapsedItem.tsx";
+export type { SidebarItemProps } from "./SidebarItem.tsx";
+export { SidebarItem } from "./SidebarItem.tsx";
 
 // ---------------------------------------------------------------------------------------------------------------------
 

package/src/core/constants/ui.ts

@@ -1,17 +1,17 @@
 export const ui = {
   colors: {
     transparent: "transparent",
-    background: "var(--alepha-background)",
+    background: "var(--alepha-ground)",
     surface: "var(--alepha-surface)",
     elevated: "var(--alepha-elevated)",
     border: "var(--alepha-border)",
   },
   sizes: {
     icon: {
-      xs: 14,
-      sm: 16,
-      md: 20,
-      lg: 24,
+      xs: 16,
+      sm: 20,
+      md: 24,
+      lg: 28,
       xl: 32,
     },
   },

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

@@ -19,7 +19,7 @@ import type {
   DateTimePickerProps,
   TimeInputProps,
 } from "@mantine/dates";
-import { useFormState } from "alepha/react/form";
+import { useFieldValue, useFormState } from "alepha/react/form";
 import type { ComponentType } from "react";
 import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
 import ControlArray, { type ControlArrayProps } from "./ControlArray.tsx";
@@ -76,6 +76,7 @@ export interface ControlProps extends GenericControlProps {
  */
 const Control = (_props: ControlProps) => {
   const form = useFormState(_props.input, ["error"]);
+  const [value, setValue] = useFieldValue(_props.input);
 
   // Early return if input is not properly initialized
   if (!_props.input?.props) {
@@ -93,12 +94,11 @@ const Control = (_props: ControlProps) => {
   if (props.query) {
     return (
       <ControlQueryBuilder
-        {...props.input.props}
         {...inputProps}
         schema={props.query}
-        value={props.input.props.value}
-        onChange={(value) => {
-          props.input.set(value);
+        value={value}
+        onChange={(val) => {
+          setValue(val);
         }}
       />
     );
@@ -112,9 +112,9 @@ const Control = (_props: ControlProps) => {
       <Input.Wrapper {...inputProps}>
         <Flex flex={1} mt={"calc(var(--mantine-spacing-xs) / 2)"}>
           <Custom
-            defaultValue={props.input.props.defaultValue}
-            onChange={(value) => {
-              props.input.set(value);
+            value={value}
+            onChange={(val) => {
+              setValue(val);
             }}
           />
         </Flex>
@@ -137,7 +137,7 @@ const Control = (_props: ControlProps) => {
     return (
       <ControlObject
         input={props.input}
-        title={props.title}
+        label={props.label}
         description={props.description}
         {...controlObjectProps}
       />
@@ -165,7 +165,7 @@ const Control = (_props: ControlProps) => {
     return (
       <ControlArray
         input={props.input}
-        title={props.title}
+        label={props.label}
         description={props.description}
         {...controlArrayProps}
       />
@@ -176,7 +176,8 @@ const Control = (_props: ControlProps) => {
   //region <NumberInput/>
   if (
     props.number ||
-    (props.input.schema &&
+    (!props.select &&
+      props.input.schema &&
       "type" in props.input.schema &&
       (props.input.schema.type === "number" ||
         props.input.schema.type === "integer"))
@@ -190,7 +191,7 @@ const Control = (_props: ControlProps) => {
       <ControlNumber
         size={props.size}
         input={props.input}
-        title={props.title}
+        label={props.label}
         description={props.description}
         icon={icon}
         {...controlNumberProps}
@@ -208,9 +209,7 @@ const Control = (_props: ControlProps) => {
         size={props.size}
         id={id}
         leftSection={icon}
-        onChange={(file) => {
-          props.input.set(file);
-        }}
+        onChange={(file) => setValue(file)}
         {...fileInputProps}
       />
     );
@@ -226,7 +225,8 @@ const Control = (_props: ControlProps) => {
         size={props.size}
         id={id}
         leftSection={icon}
-        {...props.input.props}
+        value={value ?? ""}
+        onChange={(val) => setValue(val)}
         {...colorInputProps}
       />
     );
@@ -244,13 +244,13 @@ const Control = (_props: ControlProps) => {
   if (isEnum || (isArray && !isArrayOfObjects) || props.select) {
     const opts = typeof props.select === "object" ? props.select : {};
     if (props.segmented) {
-      opts.segmented ??= {};
+      opts.segmentedProps ??= {};
     }
     return (
       <ControlSelect
         size={props.size}
         input={props.input}
-        title={props.title}
+        label={props.label}
         description={props.description}
         icon={icon}
         {...opts}
@@ -273,9 +273,9 @@ const Control = (_props: ControlProps) => {
           size={props.size}
           id={id}
           color={"blue"}
-          defaultChecked={props.input.props.defaultValue}
+          checked={Boolean(value)}
           onChange={(event) => {
-            props.input.set(event.currentTarget.checked);
+            setValue(event.currentTarget.checked);
           }}
           {...switchProps}
         />
@@ -284,7 +284,7 @@ const Control = (_props: ControlProps) => {
 
     const opts: ControlSelectProps = {
       input: props.input,
-      select: {
+      selectProps: {
         data: [
           { value: "true", label: "Yes" },
           { value: "false", label: "No" },
@@ -295,7 +295,7 @@ const Control = (_props: ControlProps) => {
     return (
       <ControlSelect
         size={props.size}
-        title={props.title}
+        label={props.label}
         description={props.description}
         icon={icon}
         {...opts}
@@ -314,7 +314,8 @@ const Control = (_props: ControlProps) => {
         size={props.size}
         id={id}
         leftSection={icon}
-        {...props.input.props}
+        value={value ?? ""}
+        onChange={(ev) => setValue(ev.target.value)}
         {...passwordInputProps}
       />
     );
@@ -330,7 +331,8 @@ const Control = (_props: ControlProps) => {
         size={props.size}
         id={id}
         leftSection={icon}
-        {...props.input.props}
+        value={value ?? ""}
+        onChange={(ev) => setValue(ev.target.value)}
         {...textAreaProps}
       />
     );
@@ -351,7 +353,7 @@ const Control = (_props: ControlProps) => {
       <ControlDate
         size={props.size}
         input={props.input}
-        title={props.title}
+        label={props.label}
         description={props.description}
         icon={icon}
         date={props.date}
@@ -377,7 +379,7 @@ const Control = (_props: ControlProps) => {
       case "phone":
         return "tel";
       default:
-        return undefined;
+        return props.input.props.type ?? "text";
     }
   };
 
@@ -388,9 +390,9 @@ const Control = (_props: ControlProps) => {
       id={id}
       leftSection={icon}
       type={getInputType()}
-      {...props.input.props}
+      value={value ?? ""}
+      onChange={(ev) => setValue(ev.target.value)}
       {...textInputProps}
-      inputWrapperOrder={["label", "input", "description", "error"]}
     />
   );
   //endregion
@@ -399,6 +401,6 @@ const Control = (_props: ControlProps) => {
 export default Control;
 
 export type CustomControlProps = {
-  defaultValue: any;
+  value: any;
   onChange: (value: any) => void;
 };

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

@@ -88,11 +88,11 @@ const useArrayItems = (
   const alepha = useAlepha();
   const keyCounter = useRef(0);
 
-  // Initialize from defaultValue
+  // Initialize from initialValue
   const [items, setItemsState] = useState<ArrayItem[]>(() => {
-    const defaultValue = input?.props?.defaultValue;
-    if (Array.isArray(defaultValue)) {
-      return defaultValue.map((value) => ({
+    const initial = input?.initialValue;
+    if (Array.isArray(initial)) {
+      return initial.map((value) => ({
         key: keyCounter.current++,
         value,
       }));
@@ -126,46 +126,20 @@ const useArrayItems = (
     });
   }, []);
 
-  // Listen for form changes and reset events
+  // Listen for form changes
   useEffect(() => {
     if (!input?.form) return;
 
     const formId = input.form.id;
     const fieldPath = input.path;
 
-    const listeners = [
-      // Handle form reset
-      alepha.events.on("form:reset", (event) => {
-        if (event.id === formId) {
-          const defaultValue = input.props?.defaultValue;
-          keyCounter.current = 0;
-          if (Array.isArray(defaultValue)) {
-            setItemsState(
-              defaultValue.map((value) => ({
-                key: keyCounter.current++,
-                value,
-              })),
-            );
-          } else {
-            setItemsState([]);
-          }
-        }
-      }),
-
-      // Handle external value changes (e.g., programmatic updates)
-      alepha.events.on("form:change", (event) => {
-        if (event.id === formId && event.path === fieldPath) {
-          // Value was changed externally, sync our state
-          syncFromFormValue(event.value);
-        }
-      }),
-    ];
-
-    return () => {
-      for (const unsub of listeners) {
-        unsub();
+    const unsub = alepha.events.on("form:change", (event) => {
+      if (event.id === formId && event.path === fieldPath) {
+        syncFromFormValue(event.value);
       }
-    };
+    });
+
+    return unsub;
   }, [alepha, input, syncFromFormValue]);
 
   // Update form when items change
@@ -200,10 +174,10 @@ const createArrayItemInput = (
     path: `${parentInput.path}/${index}`,
     required: false,
     form: parentInput.form,
+    initialValue: value,
     props: {
       id: `${parentInput.props.id}-${index}`,
       name: `${parentInput.props.name}[${index}]`,
-      defaultValue: value,
     },
     set: onValueChange,
   };
@@ -228,10 +202,10 @@ const createArrayItemFieldInput = (
     path: `${parentInput.path}/${index}/${fieldName}`,
     required: itemSchema.required?.includes(fieldName) ?? false,
     form: parentInput.form,
+    initialValue: itemValue?.[fieldName],
     props: {
       id: `${parentInput.props.id}-${index}-${fieldName}`,
       name: `${parentInput.props.name}[${index}].${fieldName}`,
-      defaultValue: itemValue?.[fieldName],
     },
     set: (value: any) => onFieldChange(fieldName, value),
   };

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

@@ -6,7 +6,7 @@ import {
   TimeInput,
   type TimeInputProps,
 } from "@mantine/dates";
-import { useFormState } from "alepha/react/form";
+import { useFieldValue, useFormState } from "alepha/react/form";
 import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
 
 export interface ControlDateProps extends GenericControlProps {
@@ -27,6 +27,7 @@ export interface ControlDateProps extends GenericControlProps {
  */
 const ControlDate = (props: ControlDateProps) => {
   const form = useFormState(props.input);
+  const [value, setValue] = useFieldValue(props.input);
   const { inputProps, id, icon, format } = parseInput(props, form);
   if (!props.input?.props) {
     return null;
@@ -41,14 +42,10 @@ const ControlDate = (props: ControlDateProps) => {
         {...inputProps}
         id={id}
         leftSection={icon}
-        defaultValue={
-          props.input.props.defaultValue
-            ? new Date(props.input.props.defaultValue)
-            : undefined
+        value={value ? new Date(value) : null}
+        onChange={(val) =>
+          setValue(val ? new Date(val).toISOString() : undefined)
         }
-        onChange={(value) => {
-          props.input.set(value ? new Date(value).toISOString() : undefined);
-        }}
         {...dateTimePickerProps}
       />
     );
@@ -63,16 +60,10 @@ const ControlDate = (props: ControlDateProps) => {
         {...inputProps}
         id={id}
         leftSection={icon}
-        defaultValue={
-          props.input.props.defaultValue
-            ? new Date(props.input.props.defaultValue)
-            : undefined
+        value={value ? new Date(value) : null}
+        onChange={(val) =>
+          setValue(val ? new Date(val).toISOString().slice(0, 10) : undefined)
         }
-        onChange={(value) => {
-          props.input.set(
-            value ? new Date(value).toISOString().slice(0, 10) : undefined,
-          );
-        }}
         {...dateInputProps}
       />
     );
@@ -87,10 +78,8 @@ const ControlDate = (props: ControlDateProps) => {
         {...inputProps}
         id={id}
         leftSection={icon}
-        defaultValue={props.input.props.defaultValue}
-        onChange={(event) => {
-          props.input.set(event.currentTarget.value);
-        }}
+        value={value ?? ""}
+        onChange={(event) => setValue(event.currentTarget.value)}
         {...timeInputProps}
       />
     );