@hexclave/next 1.0.3 → 1.0.5

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,40 @@
+'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";
+import NextLink from 'next/link'; // THIS_LINE_PLATFORM next
+
+type LinkProps = {
+  href: string,
+  children: React.ReactNode,
+  className?: string,
+  target?: string,
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>,
+  prefetch?: boolean,
+};
+
+function Link(props: LinkProps) {
+  return <NextLink
+    href={props.href}
+    target={props.target}
+    className={props.className}
+    prefetch={props.prefetch}
+    onClick={props.onClick}
+  >
+    {props.children}
+  </NextLink>;
+}
+
+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>
+    );
+  }
+}

package/src/components/message-cards/known-error-message-card.tsx

@@ -0,0 +1,33 @@
+"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 { KnownError } from "@hexclave/shared";
+import { Typography } from "@hexclave/ui";
+import { useStackApp } from "../..";
+import { MessageCard } from "./message-card";
+
+export function KnownErrorMessageCard({
+  error,
+  fullPage=false,
+}: {
+  error: KnownError,
+  fullPage?: boolean,
+}) {
+  const hexclaveApp = useStackApp();
+
+  return (
+    <MessageCard
+      title={"An error occurred"}
+      fullPage={fullPage}
+      primaryButtonText={"Go Home"}
+      primaryAction={() => hexclaveApp.redirectToHome()}
+    >
+      {<Typography>Error Code: {error.errorCode}</Typography>}
+      {<Typography>Error Message: {error.message}</Typography>}
+    </MessageCard>
+  );
+}

package/src/components/message-cards/message-card.tsx

@@ -0,0 +1,46 @@
+'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 from "react";
+import { MaybeFullPage } from "../elements/maybe-full-page";
+import { Button, Typography } from "@hexclave/ui";
+
+export function MessageCard(
+  { fullPage=false, ...props }:
+  {
+    children?: React.ReactNode,
+    title: string,
+    fullPage?: boolean,
+    primaryButtonText?: string,
+    primaryAction?: () => Promise<void> | void,
+    secondaryButtonText?: string,
+    secondaryAction?: () => Promise<void> | void,
+  }
+) {
+  return (
+    <MaybeFullPage fullPage={fullPage}>
+      <div className="text-center stack-scope flex flex-col gap-4" style={{ maxWidth: '380px', flexBasis: '380px', padding: fullPage ? '1rem' : 0 }}>
+        <Typography type='h3'>{props.title}</Typography>
+        {props.children}
+        {(props.primaryButtonText || props.secondaryButtonText) && (
+          <div className="flex justify-center gap-4 my-5">
+            {props.secondaryButtonText && (
+              <Button variant="secondary" onClick={props.secondaryAction}>
+                {props.secondaryButtonText}
+              </Button>
+            )}
+            {props.primaryButtonText && (
+              <Button onClick={props.primaryAction}>
+                {props.primaryButtonText}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </MaybeFullPage>
+  );
+}

package/src/components/message-cards/predefined-message-card.tsx

@@ -0,0 +1,88 @@
+"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 { Typography } from "@hexclave/ui";
+import { useStackApp } from "../..";
+import { useTranslation } from "../../lib/translations";
+import { MessageCard } from "./message-card";
+
+export function PredefinedMessageCard({
+  type,
+  fullPage=false,
+}: {
+  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'unknownError' | 'signUpDisabled',
+  fullPage?: boolean,
+}) {
+  const hexclaveApp = useStackApp();
+  const { t } = useTranslation();
+
+  let title: string;
+  let message: string | null = null;
+  let primaryButton: string | null = null;
+  let secondaryButton: string | null = null;
+  let primaryAction: (() => Promise<void> | void) | null = null;
+  let secondaryAction: (() => Promise<void> | void) | null = null;
+
+  switch (type) {
+    case 'signedIn': {
+      title = t("You are already signed in");
+      primaryAction = () => hexclaveApp.redirectToHome();
+      secondaryAction = () => hexclaveApp.redirectToSignOut();
+      primaryButton = t("Go home");
+      secondaryButton = t("Sign out");
+      break;
+    }
+    case 'signedOut': {
+      title = t("You are not currently signed in.");
+      primaryAction = () => hexclaveApp.redirectToSignIn();
+      primaryButton = t("Sign in");
+      break;
+    }
+    case 'signUpDisabled': {
+      title = t("Sign up for new users is not enabled at the moment.");
+      primaryAction = () => hexclaveApp.redirectToHome();
+      secondaryAction = () => hexclaveApp.redirectToSignIn();
+      primaryButton = t("Go home");
+      secondaryButton = t("Sign in");
+      break;
+    }
+    case 'emailSent': {
+      title = t("Email sent!");
+      message = t("If the user with this e-mail address exists, an e-mail was sent to your inbox. Make sure to check your spam folder.");
+      primaryAction = () => hexclaveApp.redirectToHome();
+      primaryButton = t("Go home");
+      break;
+    }
+    case 'passwordReset': {
+      title = t("Password reset successfully!");
+      message = t("Your password has been reset. You can now sign in with your new password.");
+      primaryAction = () => hexclaveApp.redirectToSignIn({ noRedirectBack: true });
+      primaryButton = t("Sign in");
+      break;
+    }
+    case 'unknownError': {
+      title = t("An unknown error occurred");
+      message = t("Please try again and if the problem persists, contact support.");
+      primaryAction = () => hexclaveApp.redirectToHome();
+      primaryButton = t("Go home");
+      break;
+    }
+  }
+
+  return (
+    <MessageCard
+      title={title}
+      fullPage={fullPage}
+      primaryButtonText={primaryButton}
+      primaryAction={primaryAction}
+      secondaryButtonText={secondaryButton || undefined}
+      secondaryAction={secondaryAction || undefined}
+    >
+      {message && <Typography>{message}</Typography>}
+    </MessageCard>
+  );
+}

package/src/components/oauth-button-group.tsx

@@ -0,0 +1,35 @@
+'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 { useStackApp } from "../lib/hooks";
+import { OAuthButton } from "./oauth-button";
+
+export function OAuthButtonGroup({
+  type,
+  mockProject,
+}: {
+  type: 'sign-in' | 'sign-up',
+  mockProject?: {
+    config: {
+      oauthProviders: {
+        id: string,
+      }[],
+    },
+  },
+}) {
+  const hexclaveApp = useStackApp();
+  const project = mockProject || hexclaveApp.useProject();
+  return (
+    <div className='gap-4 flex flex-col items-stretch stack-scope'>
+      {project.config.oauthProviders.map(p => (
+        <OAuthButton key={p.id} provider={p.id} type={type}
+          isMock={!!mockProject}
+        />
+      ))}
+    </div>
+  );
+}