@alepha/ui 0.10.6 → 0.11.0

package/src/components/ControlSelect.tsx

@@ -0,0 +1,196 @@
+import { useFormState } from "@alepha/react-form";
+import {
+  Autocomplete,
+  type AutocompleteProps,
+  Flex,
+  Input,
+  MultiSelect,
+  type MultiSelectProps,
+  SegmentedControl,
+  type SegmentedControlProps,
+  Select,
+  type SelectProps,
+  TagsInput,
+  type TagsInputProps,
+} from "@mantine/core";
+import { useEffect, useState } from "react";
+import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
+
+export type SelectValueLabel =
+  | string
+  | { value: string; label: string; icon?: string };
+
+export interface ControlSelectProps extends GenericControlProps {
+  select?: boolean | SelectProps;
+  multi?: boolean | MultiSelectProps;
+  tags?: boolean | TagsInputProps;
+  autocomplete?: boolean | AutocompleteProps;
+  segmented?: boolean | Partial<SegmentedControlProps>;
+
+  loader?: () => Promise<SelectValueLabel[]>;
+}
+
+/**
+ * ControlSelect component for handling Select, MultiSelect, and TagsInput.
+ *
+ * Features:
+ * - Basic Select with enum support
+ * - MultiSelect for array of enums
+ * - TagsInput for array of strings (no enum)
+ * - Future: Lazy loading
+ * - Future: Searchable/filterable options
+ * - Future: Custom option rendering
+ *
+ * Automatically detects enum values and array types from schema.
+ */
+const ControlSelect = (props: ControlSelectProps) => {
+  const form = useFormState(props.input);
+  const { inputProps, id, icon } = parseInput(props, form);
+
+  // Detect if schema is an array type
+  const isArray =
+    props.input.schema &&
+    "type" in props.input.schema &&
+    props.input.schema.type === "array";
+
+  // For arrays, check if items have enum (MultiSelect) or not (TagsInput)
+  let itemsEnum: string[] | undefined;
+  if (isArray && "items" in props.input.schema && props.input.schema.items) {
+    const items: any = props.input.schema.items;
+    if ("enum" in items && Array.isArray(items.enum)) {
+      itemsEnum = items.enum;
+    }
+  }
+
+  // Extract enum values from schema (for non-array select)
+  const enumValues =
+    props.input.schema &&
+    "enum" in props.input.schema &&
+    Array.isArray(props.input.schema.enum)
+      ? props.input.schema.enum
+      : [];
+
+  const [data, setData] = useState<SelectValueLabel[]>([]);
+
+  useEffect(() => {
+    if (!props.input?.props) {
+      return;
+    }
+
+    if (props.loader) {
+      props.loader().then(setData);
+    } else {
+      setData(enumValues);
+    }
+  }, [props.input, props.loader]);
+
+  if (!props.input?.props) {
+    return null;
+  }
+
+  if (props.segmented) {
+    const segmentedControlProps: Partial<SegmentedControlProps> =
+      typeof props.segmented === "object" ? props.segmented : {};
+
+    return (
+      <Input.Wrapper {...inputProps}>
+        <Flex mt={"calc(var(--mantine-spacing-xs) / 2)"}>
+          <SegmentedControl
+            disabled={inputProps.disabled}
+            defaultValue={String(props.input.props.defaultValue)}
+            {...segmentedControlProps}
+            onChange={(value) => {
+              props.input.set(value);
+            }}
+            data={data.slice(0, 10)}
+          />
+        </Flex>
+      </Input.Wrapper>
+    );
+  }
+
+  if (props.autocomplete) {
+    const autocompleteProps =
+      typeof props.autocomplete === "object" ? props.autocomplete : {};
+
+    return (
+      <Autocomplete
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        data={data}
+        {...props.input.props}
+        {...autocompleteProps}
+      />
+    );
+  }
+
+  // region <TagsInput/> - for array of strings without enum
+  if ((isArray && !itemsEnum) || props.tags) {
+    const tagsInputProps = typeof props.tags === "object" ? props.tags : {};
+    return (
+      <TagsInput
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        defaultValue={
+          Array.isArray(props.input.props.defaultValue)
+            ? props.input.props.defaultValue
+            : []
+        }
+        onChange={(value) => {
+          props.input.set(value);
+        }}
+        {...tagsInputProps}
+      />
+    );
+  }
+  // endregion
+
+  // region <MultiSelect/> - for array of enums
+  if ((isArray && itemsEnum) || props.multi) {
+    const data =
+      itemsEnum?.map((value: string) => ({
+        value,
+        label: value,
+      })) || [];
+
+    const multiSelectProps = typeof props.multi === "object" ? props.multi : {};
+
+    return (
+      <MultiSelect
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        data={data}
+        defaultValue={
+          Array.isArray(props.input.props.defaultValue)
+            ? props.input.props.defaultValue
+            : []
+        }
+        onChange={(value) => {
+          props.input.set(value);
+        }}
+        {...multiSelectProps}
+      />
+    );
+  }
+  // endregion
+
+  // region <Select/> - for single enum value
+  const selectProps = typeof props.select === "object" ? props.select : {};
+
+  return (
+    <Select
+      {...inputProps}
+      id={id}
+      leftSection={icon}
+      data={data}
+      {...props.input.props}
+      {...selectProps}
+    />
+  );
+  // endregion
+};
+
+export default ControlSelect;

package/src/components/DarkModeButton.tsx

@@ -0,0 +1,82 @@
+import {
+  ActionIcon,
+  Flex,
+  SegmentedControl,
+  useComputedColorScheme,
+  useMantineColorScheme,
+} from "@mantine/core";
+import { IconMoon, IconSun } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+
+export interface DarkModeButtonProps {
+  mode?: "minimal" | "segmented";
+  size?: string | number;
+  variant?:
+    | "filled"
+    | "light"
+    | "outline"
+    | "default"
+    | "subtle"
+    | "transparent";
+}
+
+const DarkModeButton = (props: DarkModeButtonProps) => {
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme("light");
+  const [colorScheme, setColorScheme2] = useState("default");
+  const mode = props.mode ?? "minimal";
+
+  useEffect(() => {
+    setColorScheme2(computedColorScheme);
+  }, [computedColorScheme]);
+
+  const toggleColorScheme = () => {
+    setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
+  };
+
+  if (mode === "segmented") {
+    return (
+      <SegmentedControl
+        value={colorScheme}
+        onChange={(value) => setColorScheme(value as "light" | "dark")}
+        data={[
+          {
+            value: "light",
+            label: (
+              <Flex h={20} align="center" justify="center">
+                <IconSun size={16} />
+              </Flex>
+            ),
+          },
+          {
+            value: "dark",
+            label: (
+              <Flex h={20} align="center" justify="center">
+                <IconMoon size={16} />
+              </Flex>
+            ),
+          },
+        ]}
+      />
+    );
+  }
+
+  return (
+    <ActionIcon
+      onClick={toggleColorScheme}
+      variant={props.variant ?? "default"}
+      size={props.size ?? "lg"}
+      aria-label="Toggle color scheme"
+    >
+      {colorScheme === "dark" ? (
+        <IconSun size={20} />
+      ) : colorScheme === "light" ? (
+        <IconMoon size={20} />
+      ) : (
+        <Flex h={20} />
+      )}
+    </ActionIcon>
+  );
+};
+
+export default DarkModeButton;

package/src/components/DataTable.css

@@ -0,0 +1,199 @@
+/* ------------------------------------------------------------------------------------------------------------------ */
+/* DataTable Component Styles */
+/* ------------------------------------------------------------------------------------------------------------------ */
+
+.alepha-datatable-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.alepha-datatable-toolbar {
+  border-radius: var(--mantine-radius-md);
+  background: var(--mantine-color-body);
+}
+
+.alepha-datatable-search-input {
+  min-width: 200px;
+  max-width: 300px;
+}
+
+.alepha-datatable-page-size-select {
+  width: 120px;
+}
+
+.alepha-datatable-table {
+  position: relative;
+}
+
+.alepha-datatable-th {
+  font-weight: 600;
+  white-space: nowrap;
+  user-select: none;
+  transition: background-color 0.2s ease;
+}
+
+.alepha-datatable-th:hover {
+  background-color: var(--mantine-color-gray-0);
+}
+
+[data-mantine-color-scheme="dark"] .alepha-datatable-th:hover {
+  background-color: var(--mantine-color-dark-6);
+}
+
+.alepha-datatable-tr {
+  transition: background-color 0.15s ease;
+}
+
+.alepha-datatable-tr.alepha-datatable-selected {
+  background-color: var(--mantine-color-blue-0) !important;
+}
+
+[data-mantine-color-scheme="dark"]
+  .alepha-datatable-tr.alepha-datatable-selected {
+  background-color: rgba(34, 139, 230, 0.1) !important;
+}
+
+.alepha-datatable-checkbox-column {
+  width: 40px;
+  text-align: center;
+}
+
+.alepha-datatable-actions-column {
+  width: 100px;
+  text-align: center;
+}
+
+.alepha-datatable-sort-icon {
+  color: var(--mantine-color-blue-6);
+  transition: transform 0.2s ease;
+}
+
+.alepha-datatable-sort-icon-inactive {
+  color: var(--mantine-color-gray-5);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.alepha-datatable-th:hover .alepha-datatable-sort-icon-inactive {
+  opacity: 0.5;
+}
+
+/* Loading state */
+.alepha-datatable-loading {
+  position: relative;
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.alepha-datatable-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.8);
+  z-index: 10;
+}
+
+[data-mantine-color-scheme="dark"] .alepha-datatable-loading-overlay {
+  background: rgba(26, 27, 30, 0.8);
+}
+
+/* Sticky header styles */
+.alepha-datatable-sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background: var(--mantine-color-body);
+}
+
+/* Zebra striping adjustments */
+.alepha-datatable-striped tbody tr:nth-of-type(odd) {
+  background-color: var(--mantine-color-gray-0);
+}
+
+[data-mantine-color-scheme="dark"]
+  .alepha-datatable-striped
+  tbody
+  tr:nth-of-type(odd) {
+  background-color: var(--mantine-color-dark-7);
+}
+
+/* Empty state */
+.alepha-datatable-empty-state {
+  padding: 3rem 1rem;
+  text-align: center;
+}
+
+.alepha-datatable-empty-icon {
+  color: var(--mantine-color-gray-5);
+  margin-bottom: 1rem;
+}
+
+/* Footer */
+.alepha-datatable-footer {
+  border-top: 1px solid var(--mantine-color-gray-2);
+  padding-top: var(--mantine-spacing-sm);
+  margin-top: var(--mantine-spacing-xs);
+}
+
+[data-mantine-color-scheme="dark"] .alepha-datatable-footer {
+  border-top-color: var(--mantine-color-dark-5);
+}
+
+/* Custom scrollbar for better UX */
+.alepha-datatable-container ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.alepha-datatable-container ::-webkit-scrollbar-track {
+  background: var(--mantine-color-gray-1);
+  border-radius: 4px;
+}
+
+[data-mantine-color-scheme="dark"]
+  .alepha-datatable-container
+  ::-webkit-scrollbar-track {
+  background: var(--mantine-color-dark-6);
+}
+
+.alepha-datatable-container ::-webkit-scrollbar-thumb {
+  background: var(--mantine-color-gray-4);
+  border-radius: 4px;
+}
+
+[data-mantine-color-scheme="dark"]
+  .alepha-datatable-container
+  ::-webkit-scrollbar-thumb {
+  background: var(--mantine-color-dark-4);
+}
+
+.alepha-datatable-container ::-webkit-scrollbar-thumb:hover {
+  background: var(--mantine-color-gray-5);
+}
+
+[data-mantine-color-scheme="dark"]
+  .alepha-datatable-container
+  ::-webkit-scrollbar-thumb:hover {
+  background: var(--mantine-color-dark-3);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .alepha-datatable-toolbar {
+    padding: var(--mantine-spacing-sm);
+  }
+
+  .alepha-datatable-search-input {
+    min-width: 150px;
+  }
+
+  .alepha-datatable-page-size-select {
+    width: 100px;
+  }
+}