@alepha/ui 0.14.0 → 0.14.2

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

@@ -0,0 +1,144 @@
+import { t } from "alepha";
+import type { UserRealmConfig } from "alepha/api/users";
+import Register from "../../../auth/components/Register.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 Field",
+    default: true,
+    $control: { switch: true },
+  }),
+  usernameRequired: t.boolean({
+    title: "Username Required",
+    default: false,
+    $control: { switch: true },
+  }),
+  emailEnabled: t.boolean({
+    title: "Email Field",
+    default: true,
+    $control: { switch: true },
+  }),
+  emailRequired: t.boolean({
+    title: "Email Required",
+    default: true,
+    $control: { switch: true },
+  }),
+  phoneEnabled: t.boolean({
+    title: "Phone Field",
+    default: false,
+    $control: { switch: true },
+  }),
+  phoneRequired: t.boolean({
+    title: "Phone Required",
+    default: false,
+    $control: { switch: true },
+  }),
+  registrationAllowed: t.boolean({
+    title: "Registration Allowed",
+    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;
+  usernameRequired: boolean;
+  emailEnabled: boolean;
+  emailRequired: boolean;
+  phoneEnabled: boolean;
+  phoneRequired: boolean;
+  registrationAllowed: 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 ? "Create your account" : undefined,
+      logoUrl: undefined,
+      registrationAllowed: props.registrationAllowed,
+      emailEnabled: props.emailEnabled,
+      emailRequired: props.emailRequired,
+      usernameEnabled: props.usernameEnabled,
+      usernameRequired: props.usernameRequired,
+      phoneEnabled: props.phoneEnabled,
+      phoneRequired: props.phoneRequired,
+      verifyEmailRequired: false,
+      verifyPhoneRequired: false,
+      firstNameLastNameEnabled: false,
+      firstNameLastNameRequired: false,
+      resetPasswordAllowed: true,
+      passwordPolicy: {
+        minLength: 8,
+        requireUppercase: true,
+        requireLowercase: true,
+        requireNumbers: true,
+        requireSpecialCharacters: false,
+      },
+    },
+  };
+};
+
+const DemoRegister = () => {
+  return (
+    <Showcase
+      title="Register"
+      schema={showcaseSchema}
+      initialValues={{
+        showCredentials: true,
+        showGoogleOAuth: true,
+        showGithubOAuth: false,
+        usernameEnabled: true,
+        usernameRequired: false,
+        emailEnabled: true,
+        emailRequired: true,
+        phoneEnabled: false,
+        phoneRequired: false,
+        registrationAllowed: true,
+        showBranding: true,
+      }}
+      columns={1}
+    >
+      {(props) => <Register realmConfig={buildRealmConfig(props)} />}
+    </Showcase>
+  );
+};
+
+export default DemoRegister;

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

@@ -0,0 +1,69 @@
+import { t } from "alepha";
+import type { UserRealmConfig } from "alepha/api/users";
+import ResetPassword from "../../../auth/components/ResetPassword.tsx";
+import Showcase from "../shared/Showcase.tsx";
+
+const showcaseSchema = t.object({
+  resetPasswordAllowed: t.boolean({
+    title: "Reset Allowed",
+    default: true,
+    $control: { switch: true },
+  }),
+  showBranding: t.boolean({
+    title: "Show Branding",
+    default: true,
+    $control: { switch: true },
+  }),
+});
+
+const buildRealmConfig = (props: {
+  resetPasswordAllowed: boolean;
+  showBranding: boolean;
+}): UserRealmConfig => {
+  return {
+    realmName: "demo",
+    authenticationMethods: [{ name: "credentials", type: "CREDENTIALS" }],
+    settings: {
+      displayName: props.showBranding ? "Demo App" : undefined,
+      description: props.showBranding ? "Reset your password" : undefined,
+      logoUrl: undefined,
+      registrationAllowed: true,
+      emailEnabled: true,
+      emailRequired: true,
+      usernameEnabled: false,
+      usernameRequired: false,
+      phoneEnabled: false,
+      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 DemoResetPassword = () => {
+  return (
+    <Showcase
+      title="ResetPassword"
+      schema={showcaseSchema}
+      initialValues={{
+        resetPasswordAllowed: true,
+        showBranding: true,
+      }}
+      columns={1}
+    >
+      {(props) => <ResetPassword realmConfig={buildRealmConfig(props)} />}
+    </Showcase>
+  );
+};
+
+export default DemoResetPassword;

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

@@ -0,0 +1,28 @@
+import { t } from "alepha";
+import VerifyEmail from "../../../auth/components/VerifyEmail.tsx";
+import Showcase from "../shared/Showcase.tsx";
+
+const showcaseSchema = t.object({
+  placeholder: t.boolean({
+    title: "Demo Mode",
+    default: true,
+    $control: { switch: true },
+  }),
+});
+
+const DemoVerifyEmail = () => {
+  return (
+    <Showcase
+      title="VerifyEmail"
+      schema={showcaseSchema}
+      initialValues={{
+        placeholder: true,
+      }}
+      columns={1}
+    >
+      {() => <VerifyEmail />}
+    </Showcase>
+  );
+};
+
+export default DemoVerifyEmail;

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

@@ -0,0 +1,174 @@
+import { DataTable } from "@alepha/ui";
+import { Badge, Text } from "@mantine/core";
+import { t } from "alepha";
+import Showcase from "../shared/Showcase.tsx";
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  role: "admin" | "user" | "guest";
+  status: "active" | "inactive";
+}
+
+const sampleUsers: User[] = [
+  {
+    id: 1,
+    name: "Alice Johnson",
+    email: "alice@example.com",
+    role: "admin",
+    status: "active",
+  },
+  {
+    id: 2,
+    name: "Bob Smith",
+    email: "bob@example.com",
+    role: "user",
+    status: "active",
+  },
+  {
+    id: 3,
+    name: "Charlie Brown",
+    email: "charlie@example.com",
+    role: "user",
+    status: "inactive",
+  },
+  {
+    id: 4,
+    name: "Diana Prince",
+    email: "diana@example.com",
+    role: "admin",
+    status: "active",
+  },
+  {
+    id: 5,
+    name: "Eve Wilson",
+    email: "eve@example.com",
+    role: "guest",
+    status: "active",
+  },
+];
+
+const filters = t.object({
+  search: t.optional(t.text({ title: "Search" })),
+  role: t.optional(t.enum(["admin", "user", "guest"], { title: "Role" })),
+});
+
+const showcaseSchema = t.object({
+  withCheckbox: t.boolean({
+    title: "Checkbox",
+    default: true,
+    $control: { switch: true },
+  }),
+  defaultSize: t.integer({
+    title: "Page Size",
+    default: 5,
+    minimum: 1,
+    maximum: 20,
+    $control: { slider: true },
+  }),
+});
+
+const DemoDataTable = () => {
+  return (
+    <Showcase
+      title="DataTable"
+      schema={showcaseSchema}
+      initialValues={{
+        withCheckbox: true,
+        defaultSize: 5,
+      }}
+      columns={1}
+    >
+      {(props) => (
+        <DataTable<User, typeof filters>
+          key={`${props.withCheckbox}-${props.defaultSize}`}
+          filters={filters}
+          submitOnInit
+          defaultSize={props.defaultSize}
+          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);
+            }
+            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),
+              },
+            };
+          }}
+          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>
+              ),
+            },
+          }}
+          withCheckbox={props.withCheckbox}
+          getItemKey={(u) => String(u.id)}
+        />
+      )}
+    </Showcase>
+  );
+};
+
+export default DemoDataTable;

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

@@ -0,0 +1,85 @@
+import { Sidebar, type SidebarNode } from "@alepha/ui";
+import { Flex } from "@mantine/core";
+import {
+  IconDashboard,
+  IconFiles,
+  IconSettings,
+  IconUsers,
+} from "@tabler/icons-react";
+import { t } from "alepha";
+import Showcase from "../shared/Showcase.tsx";
+
+const sidebarItems = [
+  { type: "search" },
+  { type: "divider" },
+  {
+    icon: IconDashboard,
+    label: "Dashboard",
+  },
+  {
+    icon: IconUsers,
+    label: "Users",
+    children: [
+      { label: "All Users" },
+      { label: "Add User" },
+      { label: "Roles" },
+    ],
+  },
+  {
+    icon: IconFiles,
+    label: "Files",
+  },
+  { type: "spacer" },
+  {
+    position: "bottom",
+    icon: IconSettings,
+    label: "Settings",
+  },
+] satisfies SidebarNode[];
+
+const showcaseSchema = t.object({
+  collapsed: t.boolean({
+    title: "Collapsed",
+    default: false,
+    $control: { switch: true },
+  }),
+  gap: t.enum(["xs", "sm", "md", "lg"], {
+    title: "Gap",
+    default: "xs",
+    $control: { segmented: true },
+  }),
+});
+
+const DemoSidebar = () => {
+  return (
+    <Showcase
+      title="Sidebar"
+      schema={showcaseSchema}
+      initialValues={{
+        collapsed: false,
+        gap: "xs",
+      }}
+      columns={1}
+      windowProps={{
+        fill: true,
+        containerProps: { p: 0 },
+      }}
+    >
+      {(props) => (
+        <Flex
+          h={"100%"}
+          w={props.collapsed ? 60 : 240}
+          bg="var(--alepha-surface)"
+        >
+          <Sidebar
+            items={sidebarItems}
+            collapsed={props.collapsed}
+            gap={props.gap}
+          />
+        </Flex>
+      )}
+    </Showcase>
+  );
+};
+
+export default DemoSidebar;

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

@@ -0,0 +1,69 @@
+import { useForm } from "@alepha/react/form";
+import { TypeForm } from "@alepha/ui";
+import { t } from "alepha";
+import Showcase from "../shared/Showcase.tsx";
+
+const formSchema = t.object({
+  username: t.text({ title: "Username", default: "" }),
+  email: t.email({ title: "Email", default: "" }),
+  age: t.integer({ title: "Age", minimum: 0, maximum: 120 }),
+  role: t.enum(["admin", "user", "guest"], { title: "Role", default: "user" }),
+  subscribe: t.boolean({ title: "Subscribe", default: false }),
+});
+
+const showcaseSchema = t.object({
+  columns: t.integer({
+    title: "Columns",
+    default: 1,
+    minimum: 1,
+    maximum: 4,
+    $control: { slider: true },
+  }),
+  fill: t.boolean({
+    title: "Fill Width",
+    default: false,
+    $control: { switch: true },
+  }),
+  skipSubmitButton: t.boolean({
+    title: "Hide Submit",
+    default: false,
+    $control: { switch: true },
+  }),
+});
+
+const DemoTypeForm = () => {
+  const form = useForm(
+    {
+      schema: formSchema,
+      handler: (values) => {
+        alert(JSON.stringify(values, null, 2));
+      },
+    },
+    [],
+  );
+
+  return (
+    <Showcase
+      title="TypeForm"
+      schema={showcaseSchema}
+      initialValues={{
+        columns: 1,
+        fill: false,
+        skipSubmitButton: false,
+      }}
+      columns={1}
+    >
+      {(props) => (
+        <TypeForm
+          form={form}
+          columns={props.columns}
+          fill={props.fill}
+          skipSubmitButton={props.skipSubmitButton}
+          submitButtonProps={{ children: "Submit" }}
+        />
+      )}
+    </Showcase>
+  );
+};
+
+export default DemoTypeForm;

package/src/demo/components/json/DemoJsonViewer.tsx

@@ -0,0 +1,128 @@
+import { useI18n } from "@alepha/react/i18n";
+import { t } from "alepha";
+import { JsonViewer } from "../../../json/index.ts";
+import Showcase from "../shared/Showcase.tsx";
+
+const sampleData = {
+  name: "Sample Project",
+  createdAt: "2024-01-15T10:30:00.000Z",
+  updatedAt: "2024-06-20T14:45:30.000Z",
+  count: 42,
+  price: 99.99,
+  isActive: true,
+  nullValue: null,
+  tags: ["typescript", "react", "json"],
+  nested: {
+    level1: {
+      level2: {
+        deepValue: "Found me!",
+      },
+    },
+  },
+  users: [
+    { id: 1, name: "Alice", role: "admin" },
+    { id: 2, name: "Bob", role: "user" },
+  ],
+  emptyArray: [],
+  emptyObject: {},
+  longText:
+    "This is a very long text that should be truncated when it exceeds the maximum string length configured in the viewer options.",
+};
+
+const $control = {
+  switch: true,
+  slider: true,
+  segmented: true,
+};
+
+const jsonViewerSchema = t.object({
+  showQuotes: t.boolean({
+    title: "Show Quotes",
+    default: false,
+    $control: {
+      switch: true,
+    },
+  }),
+  showCopyButton: t.boolean({
+    title: "Show Copy Button",
+    default: true,
+    $control: {
+      switch: true,
+    },
+  }),
+  useFormatValue: t.boolean({
+    title: "Format Dates",
+    default: true,
+    $control: {
+      switch: true,
+    },
+  }),
+  defaultExpandedDepth: t.integer({
+    title: "Expand Depth",
+    default: 2,
+    minimum: 0,
+    maximum: 10,
+    $control: { slider: true },
+  }),
+  maxDepth: t.integer({
+    title: "Max Depth",
+    default: 10,
+    minimum: 1,
+    maximum: 20,
+    $control: { slider: true },
+  }),
+  size: t.enum(["xs", "sm", "md", "lg", "xl"], {
+    title: "Size",
+    default: "sm",
+    $control: {
+      segmented: true,
+    },
+  }),
+});
+
+const DemoJsonViewer = () => {
+  const i18n = useI18n();
+  const formatValue = (
+    key: string | undefined,
+    value: any,
+  ): string | number | undefined => {
+    if (key === "createdAt") {
+      return i18n.l(value, { date: "LLL" });
+    }
+    if (key === "updatedAt") {
+      return i18n.l(value, { date: "fromNow" });
+    }
+    return undefined;
+  };
+
+  return (
+    <Showcase
+      title="JsonViewer"
+      schema={jsonViewerSchema}
+      initialValues={{
+        showQuotes: false,
+        showCopyButton: true,
+        useFormatValue: true,
+        defaultExpandedDepth: 2,
+        maxDepth: 10,
+        size: "sm",
+      }}
+      columns={1}
+    >
+      {(props) => (
+        <JsonViewer
+          key={props.defaultExpandedDepth}
+          data={sampleData}
+          defaultExpandedDepth={props.defaultExpandedDepth}
+          showQuotes={props.showQuotes}
+          showCopyButton={props.showCopyButton}
+          formatValue={props.useFormatValue ? formatValue : undefined}
+          maxDepth={props.maxDepth}
+          size={props.size}
+        />
+      )}
+    </Showcase>
+  );
+};
+
+export default DemoJsonViewer;