@hexclave/tanstack-start 1.0.3 → 1.0.6

package/src/components/credential-sign-in.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { passwordSchema, strictEmailSchema, yupObject } from "@hexclave/shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { Button, Input, Label, PasswordInput } from "@hexclave/ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { useStackApp } from "..";
+import { useTranslation } from "../lib/translations";
+import { FormWarningText } from "./elements/form-warning";
+import { StyledLink } from "./link";
+
+export function CredentialSignIn() {
+  const { t } = useTranslation();
+
+  const schema = yupObject({
+    email: strictEmailSchema(t('Please enter a valid email')).defined().nonEmpty(t('Please enter your email')),
+    password: passwordSchema.defined().nonEmpty(t('Please enter your password'))
+  });
+
+  const { register, handleSubmit, setError, formState: { errors } } = useForm({
+    resolver: yupResolver(schema)
+  });
+  const app = useStackApp();
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = async (data: yup.InferType<typeof schema>) => {
+    setLoading(true);
+
+    try {
+      const { email, password } = data;
+      const result = await app.signInWithCredential({
+        email,
+        password,
+      });
+      if (result.status === 'error') {
+        setError('email', { type: 'manual', message: result.error.message });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form
+      className="flex flex-col items-stretch stack-scope"
+      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+      noValidate
+    >
+      <Label htmlFor="email" className="mb-1">{t('Email')}</Label>
+      <Input
+        id="email"
+        type="email"
+        autoComplete="email"
+        {...register('email')}
+      />
+      <FormWarningText text={errors.email?.message?.toString()} />
+
+      <Label htmlFor="password" className="mt-4 mb-1">{t('Password')}</Label>
+      <PasswordInput
+        id="password"
+        autoComplete="current-password"
+        {...register('password')}
+      />
+      <FormWarningText text={errors.password?.message?.toString()} />
+
+      <StyledLink href={app.urls.forgotPassword} className="mt-1 text-sm">
+        {t('Forgot password?')}
+      </StyledLink>
+
+      <Button type="submit" className="mt-6" loading={loading}>
+        {t('Sign In')}
+      </Button>
+    </form>
+  );
+}

package/src/components/credential-sign-up.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { getPasswordError } from "@hexclave/shared/dist/helpers/password";
+import { passwordSchema, strictEmailSchema, yupObject } from "@hexclave/shared/dist/schema-fields";
+import { runAsynchronously, runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { Button, Input, Label, PasswordInput } from "@hexclave/ui";
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { useStackApp } from "../lib/hooks";
+import { useTranslation } from "../lib/translations";
+import { FormWarningText } from "./elements/form-warning";
+
+export function CredentialSignUp(props: { noPasswordRepeat?: boolean }) {
+  const { t } = useTranslation();
+
+  const schema = yupObject({
+    email: strictEmailSchema(t('Please enter a valid email')).defined().nonEmpty(t('Please enter your email')),
+    password: passwordSchema.defined().nonEmpty(t('Please enter your password')).test({
+      name: 'is-valid-password',
+      test: (value, ctx) => {
+        const error = getPasswordError(value);
+        if (error) {
+          return ctx.createError({ message: error.message });
+        } else {
+          return true;
+        }
+      }
+    }),
+    ...(!props.noPasswordRepeat && {
+      passwordRepeat: passwordSchema.nullable().oneOf([yup.ref('password'), "", null], t('Passwords do not match')).nonEmpty(t('Please repeat your password'))
+    })
+  });
+
+  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({
+    resolver: yupResolver(schema)
+  });
+  const app = useStackApp();
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = async (data: yup.InferType<typeof schema>) => {
+    setLoading(true);
+    try {
+      const { email, password } = data;
+      const result = await app.signUpWithCredential({ email, password });
+      if (result.status === 'error') {
+        setError('email', { type: 'manual', message: result.error.message });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const registerPassword = register('password');
+  const registerPasswordRepeat = register('passwordRepeat');
+
+  return (
+    <form
+      className="flex flex-col items-stretch stack-scope"
+      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+      noValidate
+    >
+      <Label htmlFor="email" className="mb-1">{t('Email')}</Label>
+      <Input id="email" type="email" autoComplete="email" {...register('email')}/>
+      <FormWarningText text={errors.email?.message?.toString()} />
+
+      <Label htmlFor="password" className="mt-4 mb-1">{t('Password')}</Label>
+      <PasswordInput
+        id="password"
+        autoComplete="new-password"
+        {...registerPassword}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          clearErrors('password');
+          clearErrors('passwordRepeat');
+          runAsynchronously(registerPassword.onChange(e));
+        }}
+      />
+      <FormWarningText text={errors.password?.message?.toString()} />
+      {
+        !props.noPasswordRepeat && (
+          <>
+            <Label htmlFor="repeat-password" className="mt-4 mb-1">{t('Repeat Password')}</Label>
+            <PasswordInput
+              id="repeat-password"
+              {...registerPasswordRepeat}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              clearErrors('password');
+              clearErrors('passwordRepeat');
+              runAsynchronously(registerPasswordRepeat.onChange(e));
+              }}
+            />
+            <FormWarningText text={errors.passwordRepeat?.message?.toString()} />
+          </>
+        )
+      }
+
+      <Button type="submit" className="mt-6" loading={loading}>
+        {t('Sign Up')}
+      </Button>
+    </form>
+  );
+}

package/src/components/elements/form-warning.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+export function FormWarningText({ text }: { text?: string }) {
+  if (!text) {
+    return null;
+  }
+  return (
+    <div className="text-red-500 text-sm mt-1">
+      {text}
+    </div>
+  );
+}

package/src/components/elements/maybe-full-page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import React, { useId } from "react";
+import { SsrScript } from "./ssr-layout-effect";
+
+export function MaybeFullPage({
+  children,
+  fullPage,
+}: {
+  children: React.ReactNode,
+  fullPage: boolean,
+  size?: number,
+  containerClassName?: string,
+}) {
+  const uniqueId = useId();
+  const id = `stack-full-page-container-${uniqueId}`;
+
+  const scriptString = `(([id]) => {
+    const el = document.getElementById(id);
+    if (!el) {
+      // component is not full page
+      return;
+    }
+    const offset = el.getBoundingClientRect().top + document.documentElement.scrollTop;
+    el.style.minHeight = \`calc(100vh - \${offset}px)\`;
+  })(${JSON.stringify([id])})`;
+
+  if (fullPage) {
+    return (
+      <>
+        <div
+          suppressHydrationWarning
+          id={id}
+          style={{
+            minHeight: '100vh',
+            alignSelf: 'stretch',
+            flexGrow: 1,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+          className="stack-scope"
+        >
+          {children}
+        </div>
+        <SsrScript script={scriptString} />
+      </>
+    );
+  } else {
+    return <>
+      {children}
+    </>;
+  }
+
+}

package/src/components/elements/separator-with-text.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { Separator } from "@hexclave/ui";
+
+export function SeparatorWithText({ text }: { text: string }) {
+  return (
+    <div className="flex items-center justify-center my-6 stack-scope">
+      <div className="flex-1">
+        <Separator />
+      </div>
+      <div className="mx-2 text-sm text-zinc-500">{text}</div>
+      <div className="flex-1">
+        <Separator />
+      </div>
+    </div>
+  );
+}

package/src/components/elements/sidebar-layout.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { useHash } from '@hexclave/shared/dist/hooks/use-hash';
+import { Button, Typography, cn } from '@hexclave/ui';
+import { XIcon } from 'lucide-react';
+import React, { ReactNode } from 'react';
+import { useStackApp } from '../..';
+
+export type SidebarItem = {
+  title: React.ReactNode,
+  type: 'item' | 'divider',
+  description?: React.ReactNode,
+  id?: string,
+  icon?: React.ReactNode,
+  content?: React.ReactNode,
+  contentTitle?: React.ReactNode,
+}
+
+export function SidebarLayout(props: { items: SidebarItem[], title?: ReactNode, className?: string }) {
+  const hash = useHash();
+  const selectedIndex = props.items.findIndex(item => item.id && (item.id === hash));
+  return (
+    <>
+      <div className={cn("hidden sm:flex stack-scope h-full", props.className)}>
+        <DesktopLayout items={props.items} title={props.title} selectedIndex={selectedIndex} />
+      </div>
+      <div className={cn("sm:hidden stack-scope h-full", props.className)}>
+        <MobileLayout items={props.items} title={props.title} selectedIndex={selectedIndex} />
+      </div>
+    </>
+  );
+}
+
+function Items(props: { items: SidebarItem[], selectedIndex: number }) {
+  const app = useStackApp();
+  const navigate = app.useNavigate();
+
+
+  const activeItemIndex = props.selectedIndex === -1 ? 0 : props.selectedIndex;
+
+  return props.items.map((item, index) => (
+    item.type === 'item' ?
+      <Button
+        key={index}
+        variant='ghost'
+        size='sm'
+        className={cn(
+          activeItemIndex === index && "sm:bg-muted",
+          "justify-start text-md text-zinc-800 dark:text-zinc-300 px-2 text-left",
+        )}
+        onClick={() => {
+          if (item.id) {
+            navigate('#' + item.id);
+          }
+        }}
+      >
+        {item.icon}
+        {item.title}
+      </Button> :
+      <Typography key={index}>
+        {item.title}
+      </Typography>
+  ));
+
+}
+
+function DesktopLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number }) {
+  const selectedItem = props.items[props.selectedIndex === -1 ? 0 : props.selectedIndex];
+
+  return (
+    <div className="stack-scope flex w-full h-full max-w-full relative">
+      <div className="flex max-w-[200px] min-w-[200px] border-r flex-col items-stretch gap-2 p-2 overflow-y-auto">
+        {props.title && <div className='mb-2 ml-2'>
+          <Typography type='h2' className="text-lg font-semibold text-zinc-800 dark:text-zinc-300">{props.title}</Typography>
+        </div>}
+
+        <Items items={props.items} selectedIndex={props.selectedIndex} />
+      </div>
+      <div className="flex-1 w-0 flex justify-center gap-4 py-2 px-4">
+        <div className='flex flex-col max-w-[800px] w-[800px]'>
+          <div className='mt-4 mb-6'>
+            <Typography type='h4' className='font-semibold'>{selectedItem.title}</Typography>
+            {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}
+          </div>
+          <div className='flex-1'>
+            {selectedItem.content}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function MobileLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number }) {
+  const selectedItem = props.items[props.selectedIndex];
+  const app = useStackApp();
+  const navigate = app.useNavigate();
+
+  if (props.selectedIndex === -1) {
+    return (
+      <div className="flex flex-col gap-2 p-2">
+        {props.title && <div className='mb-2 ml-2'>
+          <Typography type='h2' className="text-lg font-semibold text-zinc-800 dark:text-zinc-300">{props.title}</Typography>
+        </div>}
+
+        <Items items={props.items} selectedIndex={props.selectedIndex} />
+      </div>
+    );
+  } else {
+    return (
+      <div className="flex-1 flex flex-col gap-4 py-2 px-4">
+        <div className='flex flex-col'>
+          <div className='flex justify-between'>
+            <Typography type='h4' className='font-semibold'>{selectedItem.title}</Typography>
+            <Button
+              variant='ghost'
+              size='icon'
+              onClick={() => { navigate('#'); }}
+            >
+              <XIcon className='h-5 w-5' />
+            </Button>
+          </div>
+          {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}
+        </div>
+        <div className='flex-1'>
+          {selectedItem.content}
+        </div>
+      </div>
+    );
+  }
+}

package/src/components/elements/ssr-layout-effect.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { useLayoutEffect } from "react";
+
+export function SsrScript(props: { script: string, nonce?: string }) {
+  useLayoutEffect(() => {
+    // TODO fix workaround: React has a bug where it doesn't run the script on the first CSR render if SSR has been skipped due to suspense
+    // As a workaround, we run the script in the <script> tag again after the first render
+    // Note that we do an indirect eval as described here: https://esbuild.github.io/content-types/#direct-eval
+    (0, eval)(props.script);
+  }, []);
+
+  return (
+    <script
+      suppressHydrationWarning  // the transpiler is setup differently for client/server targets, so if `script` was generated with Function.toString they will differ
+      nonce={props.nonce}
+      dangerouslySetInnerHTML={{ __html: props.script }}
+    />
+  );
+}

package/src/components/elements/user-avatar.tsx

@@ -0,0 +1,32 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { Avatar, AvatarFallback, AvatarImage } from "@hexclave/ui";
+import { UserRound } from "lucide-react";
+
+const defaultSize = 34;
+
+export function UserAvatar(props: {
+  size?: number,
+  user?: {
+    profileImageUrl?: string | null,
+    displayName?: string | null,
+    primaryEmail?: string | null,
+  } | null,
+  border?: boolean,
+}) {
+  const user = props.user;
+  return (
+    <Avatar style={{ height: props.size || defaultSize, width: props.size || defaultSize }} className={props.border ? 'border' : ''}>
+      <AvatarImage src={user?.profileImageUrl || ''} />
+      <AvatarFallback>
+        {user ?
+          <div className='font-medium' style={{ fontSize: (props.size || defaultSize) * 0.4 }}>
+            {(user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase()}
+          </div> :
+          <UserRound className="text-zinc-500" size={(props.size || defaultSize) * 0.6} />}
+      </AvatarFallback>
+    </Avatar>
+  );
+}

package/src/components/link.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { cn } from "@hexclave/ui";
+
+type LinkProps = {
+  href: string,
+  children: React.ReactNode,
+  className?: string,
+  target?: string,
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>,
+  prefetch?: boolean,
+};
+
+function Link(props: LinkProps) {
+  return <a
+    href={props.href}
+    target={props.target}
+    className={props.className}
+    onClick={props.onClick}
+  >
+    {props.children}
+  </a>;
+}
+
+function StyledLink(props: LinkProps) {
+  return (
+    <Link {...props} className={cn("underline font-medium", props.className)}>
+      {props.children}
+    </Link>
+  );
+}
+
+export { Link, StyledLink };

package/src/components/magic-link-sign-in.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { KnownErrors } from "@hexclave/shared";
+import { strictEmailSchema, yupObject } from "@hexclave/shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { Button, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, Typography } from "@hexclave/ui";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { useStackApp } from "../lib/hooks";
+import { useTranslation } from "../lib/translations";
+import { FormWarningText } from "./elements/form-warning";
+
+function OTP(props: {
+  onBack: () => void,
+  nonce: string,
+}) {
+  const { t } = useTranslation();
+  const [otp, setOtp] = useState<string>('');
+  const [submitting, setSubmitting] = useState<boolean>(false);
+  const hexclaveApp = useStackApp();
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (otp.length === 6 && !submitting) {
+      setSubmitting(true);
+      // eslint-disable-next-line no-restricted-syntax
+      hexclaveApp.signInWithMagicLink(otp + props.nonce)
+        .then(result => {
+          if (result.status === 'error') {
+            if (KnownErrors.VerificationCodeError.isInstance(result.error)) {
+              setError(t("Invalid code"));
+            } else if (KnownErrors.InvalidTotpCode.isInstance(result.error)) {
+              setError(t("Invalid TOTP code"));
+            } else {
+              throw result.error;
+            }
+          }
+        })
+        .catch(e => console.error(e))
+        .finally(() => {
+          setSubmitting(false);
+          setOtp('');
+        });
+    }
+    if (otp.length !== 0 && otp.length !== 6) {
+      setError(null);
+    }
+  }, [otp, submitting]);
+
+  return (
+    <div className="flex flex-col items-stretch stack-scope">
+      <form className='w-full flex flex-col items-center mb-2'>
+        <Typography className='mb-2' >{t('Enter the code from your email')}</Typography>
+        <InputOTP
+          maxLength={6}
+          type="text"
+          inputMode="text"
+          pattern={"^[a-zA-Z0-9]+$"}
+          value={otp}
+          onChange={value => setOtp(value.toUpperCase())}
+          disabled={submitting}
+        >
+          <InputOTPGroup>
+            {[0, 1, 2, 3, 4, 5].map((index) => (
+              <InputOTPSlot key={index} index={index} size='lg' />
+            ))}
+          </InputOTPGroup>
+        </InputOTP>
+        {error && <FormWarningText text={error} />}
+      </form>
+      <Button variant='link' onClick={props.onBack} className='underline'>{t('Cancel')}</Button>
+    </div>
+  );
+}
+
+export function MagicLinkSignIn() {
+  const { t } = useTranslation();
+  const app = useStackApp();
+  const [loading, setLoading] = useState(false);
+  const [nonce, setNonce] = useState<string | null>(null);
+
+  const schema = yupObject({
+    email: strictEmailSchema(t('Please enter a valid email')).defined().nonEmpty(t('Please enter your email'))
+  });
+
+  const { register, handleSubmit, setError, formState: { errors } } = useForm({
+    resolver: yupResolver(schema)
+  });
+
+  const onSubmit = async (data: yup.InferType<typeof schema>) => {
+    setLoading(true);
+    try {
+      const { email } = data;
+      const result = await app.sendMagicLinkEmail(email);
+      if (result.status === 'error') {
+        setError('email', { type: 'manual', message: result.error.message });
+        return;
+      } else {
+        setNonce(result.data.nonce);
+      }
+    } catch (e) {
+      if (KnownErrors.SignUpNotEnabled.isInstance(e)) {
+        setError('email', { type: 'manual', message: t('New account registration is not allowed') });
+      } else {
+        throw e;
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (nonce) {
+    return <OTP nonce={nonce} onBack={() => setNonce(null)} />;
+  } else {
+    return (
+      <form
+        className="flex flex-col items-stretch stack-scope"
+        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+        noValidate
+      >
+        <Label htmlFor="email" className="mb-1">{t('Email')}</Label>
+        <Input
+          id="email"
+          type="email"
+          autoComplete="email"
+          {...register('email')}
+        />
+        <FormWarningText text={errors.email?.message?.toString()} />
+
+        <Button type="submit" className="mt-6" loading={loading}>
+          {t('Send email')}
+        </Button>
+      </form>
+    );
+  }
+}