@alepha/ui 0.18.2 → 0.19.0

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

@@ -1,9 +1,14 @@
 import { Register } from "@alepha/ui/auth";
 import { t } from "alepha";
-import type { RealmConfig } from "alepha/api/users";
+import type { FieldRequirement, RealmConfig } from "alepha/api/users";
 import Showcase from "../shared/Showcase.tsx";
 
 const showcaseSchema = t.object({
+  variant: t.string({
+    title: "Variant",
+    default: "card",
+    enum: ["card", "split"],
+  }),
   showCredentials: t.boolean({
     title: "Credentials",
     default: true,
@@ -19,35 +24,20 @@ const showcaseSchema = t.object({
     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 },
+  username: t.string({
+    title: "Username",
+    default: "none",
+    enum: ["none", "optional", "required"],
   }),
-  phoneEnabled: t.boolean({
-    title: "Phone Field",
-    default: false,
-    $control: { switch: true },
+  email: t.string({
+    title: "Email",
+    default: "required",
+    enum: ["none", "optional", "required"],
   }),
-  phoneRequired: t.boolean({
-    title: "Phone Required",
-    default: false,
-    $control: { switch: true },
+  phoneNumber: t.string({
+    title: "Phone Number",
+    default: "none",
+    enum: ["none", "optional", "required"],
   }),
   registrationAllowed: t.boolean({
     title: "Registration Allowed",
@@ -65,12 +55,9 @@ const buildRealmConfig = (props: {
   showCredentials: boolean;
   showGoogleOAuth: boolean;
   showGithubOAuth: boolean;
-  usernameEnabled: boolean;
-  usernameRequired: boolean;
-  emailEnabled: boolean;
-  emailRequired: boolean;
-  phoneEnabled: boolean;
-  phoneRequired: boolean;
+  username: string;
+  email: string;
+  phoneNumber: string;
   registrationAllowed: boolean;
   showBranding: boolean;
 }): RealmConfig => {
@@ -94,17 +81,13 @@ const buildRealmConfig = (props: {
       description: props.showBranding ? "Create your account" : undefined,
       logoUrl: undefined,
       registrationAllowed: props.registrationAllowed,
-      emailEnabled: props.emailEnabled,
-      emailRequired: props.emailRequired,
-      usernameEnabled: props.usernameEnabled,
-      usernameRequired: props.usernameRequired,
+      email: props.email as FieldRequirement,
+      username: props.username as FieldRequirement,
       usernameRegExp: "^[a-zA-Z0-9_]{3,30}$",
-      phoneEnabled: props.phoneEnabled,
-      phoneRequired: props.phoneRequired,
+      phoneNumber: props.phoneNumber as FieldRequirement,
       verifyEmailRequired: false,
       verifyPhoneRequired: false,
-      firstNameLastNameEnabled: false,
-      firstNameLastNameRequired: false,
+      firstNameLastName: "none" as FieldRequirement,
       resetPasswordAllowed: true,
       adminEmails: [],
       adminUsernames: [],
@@ -125,21 +108,24 @@ const DemoRegister = () => {
       title="Register"
       schema={showcaseSchema}
       initialValues={{
+        variant: "card",
         showCredentials: true,
         showGoogleOAuth: true,
         showGithubOAuth: false,
-        usernameEnabled: true,
-        usernameRequired: false,
-        emailEnabled: true,
-        emailRequired: true,
-        phoneEnabled: false,
-        phoneRequired: false,
+        username: "none",
+        email: "required",
+        phoneNumber: "none",
         registrationAllowed: true,
         showBranding: true,
       }}
       columns={1}
     >
-      {(props) => <Register realmConfig={buildRealmConfig(props)} />}
+      {(props) => (
+        <Register
+          realmConfig={buildRealmConfig(props)}
+          variant={props.variant as "card" | "split"}
+        />
+      )}
     </Showcase>
   );
 };

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 type { FieldRequirement, RealmConfig } from "alepha/api/users";
 import Showcase from "../shared/Showcase.tsx";
 
 const showcaseSchema = t.object({
@@ -28,17 +28,13 @@ const buildRealmConfig = (props: {
       description: props.showBranding ? "Reset your password" : undefined,
       logoUrl: undefined,
       registrationAllowed: true,
-      emailEnabled: true,
-      emailRequired: true,
-      usernameEnabled: false,
-      usernameRequired: false,
+      email: "required" as FieldRequirement,
+      username: "none" as FieldRequirement,
       usernameRegExp: "^[a-zA-Z0-9_]{3,30}$",
-      phoneEnabled: false,
-      phoneRequired: false,
+      phoneNumber: "none" as FieldRequirement,
       verifyEmailRequired: false,
       verifyPhoneRequired: false,
-      firstNameLastNameEnabled: false,
-      firstNameLastNameRequired: false,
+      firstNameLastName: "none" as FieldRequirement,
       resetPasswordAllowed: props.resetPasswordAllowed,
       adminEmails: [],
       adminUsernames: [],

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

@@ -1,12 +1,13 @@
+import type { VerifyEmailStep } from "@alepha/ui/auth";
 import { VerifyEmail } from "@alepha/ui/auth";
 import { t } from "alepha";
 import Showcase from "../shared/Showcase.tsx";
 
 const showcaseSchema = t.object({
-  placeholder: t.boolean({
-    title: "Demo Mode",
-    default: true,
-    $control: { switch: true },
+  step: t.string({
+    title: "Step",
+    default: "success",
+    enum: ["verifying", "success", "error"],
   }),
 });
 
@@ -16,11 +17,11 @@ const DemoVerifyEmail = () => {
       title="VerifyEmail"
       schema={showcaseSchema}
       initialValues={{
-        placeholder: true,
+        step: "success",
       }}
       columns={1}
     >
-      {() => <VerifyEmail />}
+      {(values) => <VerifyEmail step={values.step as VerifyEmailStep} />}
     </Showcase>
   );
 };

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

@@ -1,4 +1,4 @@
-import { ActionButton, Flex } from "@alepha/ui";
+import { ActionButton, Flex, useDialog } from "@alepha/ui";
 import {
   IconCheck,
   IconDownload,
@@ -37,6 +37,127 @@ const showcaseSchema = t.object({
   }),
 });
 
+interface ButtonPreviewProps {
+  variant:
+    | "filled"
+    | "light"
+    | "outline"
+    | "subtle"
+    | "default"
+    | "transparent";
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  intent: "none" | "primary" | "success" | "danger" | "warning" | "info";
+  disabled: boolean;
+  loading: boolean;
+}
+
+const ButtonPreview = (props: ButtonPreviewProps) => {
+  const dialog = useDialog();
+
+  return (
+    <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={() => dialog.alert({ message: "Clicked" })}
+        >
+          Default
+        </ActionButton>
+        <ActionButton
+          variant={props.variant}
+          size={props.size}
+          intent={props.intent}
+          disabled={props.disabled}
+          loading={props.loading}
+          icon={IconPlus}
+          onClick={() => dialog.alert({ message: "Create" })}
+        >
+          Create
+        </ActionButton>
+        <ActionButton
+          variant={props.variant}
+          size={props.size}
+          intent={props.intent}
+          disabled={props.disabled}
+          loading={props.loading}
+          icon={IconTrash}
+          onClick={() => dialog.alert({ message: "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={() => dialog.alert({ message: "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>
+  );
+};
+
 const DemoActionButton = () => {
   return (
     <Showcase
@@ -51,108 +172,7 @@ const DemoActionButton = () => {
       }}
       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>
-      )}
+      {(props) => <ButtonPreview {...(props as ButtonPreviewProps)} />}
     </Showcase>
   );
 };