@hexclave/next 1.0.3 → 1.0.6

package/src/components/oauth-button.tsx

@@ -0,0 +1,222 @@
+'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 { BrandIcons, Button, SimpleTooltip } from '@hexclave/ui';
+import Color, { ColorInstance } from 'color';
+import type { ReactElement } from 'react';
+import { useEffect, useId, useState } from 'react';
+import { useStackApp } from '../lib/hooks';
+import { useTranslation } from '../lib/translations';
+import { useInIframe } from './use-in-iframe';
+
+const iconSize = 22;
+
+const changeColor = (c: ColorInstance, value: number) => {
+  if (c.isLight()) {
+    value = -value;
+  }
+  return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();
+};
+
+export function OAuthButton({
+  provider,
+  type,
+  isMock = false,
+  onAuthenticate,
+}: {
+  provider: string,
+  type: 'sign-in' | 'sign-up',
+  isMock?: boolean,
+  onAuthenticate?: () => Promise<void>,
+}) {
+  const { t } = useTranslation();
+  const hexclaveApp = useStackApp();
+  const styleId = useId().replaceAll(':', '-');
+  const isIframe = useInIframe();
+
+  const [lastUsed, setLastUsed] = useState<string | null>(null);
+  useEffect(() => {
+    // Hexclave rebrand: UI hint key — straight rename (dot delimiter preserved).
+    setLastUsed(localStorage.getItem('_HEXCLAVE.lastUsed'));
+  }, []);
+
+  let style : {
+    backgroundColor?: string,
+    textColor?: string,
+    name: string,
+    icon: ReactElement | null,
+    border?: string,
+  };
+  switch (provider) {
+    case 'google': {
+      style = {
+        backgroundColor: '#fff',
+        textColor: '#000',
+        name: 'Google',
+        border: '1px solid #ddd',
+        icon: <BrandIcons.Google iconSize={iconSize} />,
+      };
+      break;
+    }
+    case 'github': {
+      style = {
+        backgroundColor: '#111',
+        textColor: '#fff',
+        border: '1px solid #333',
+        name: 'GitHub',
+        icon: <BrandIcons.GitHub iconSize={iconSize} />,
+      };
+      break;
+    }
+    case 'facebook': {
+      style = {
+        backgroundColor: '#1877F2',
+        textColor: '#fff',
+        name: 'Facebook',
+        icon: <BrandIcons.Facebook iconSize={iconSize} />,
+      };
+      break;
+    }
+    case 'microsoft': {
+      style = {
+        backgroundColor: '#2f2f2f',
+        textColor: '#fff',
+        name: 'Microsoft',
+        icon: <BrandIcons.Microsoft iconSize={iconSize} />,
+      };
+      break;
+    }
+    case 'spotify': {
+      style = {
+        backgroundColor: '#1DB954',
+        textColor: '#fff',
+        name: 'Spotify',
+        icon: <BrandIcons.Spotify iconSize={iconSize} />,
+      };
+      break;
+    }
+    case 'discord': {
+      style = {
+        backgroundColor: '#5865F2',
+        textColor: '#fff',
+        name: 'Discord',
+        icon: <BrandIcons.Discord iconSize={iconSize} />,
+      };
+      break;
+    }
+    case 'gitlab': {
+      style = {
+        backgroundColor: "#111",
+        textColor: "#fff",
+        border: "1px solid #333",
+        name: "Gitlab",
+        icon: <BrandIcons.Gitlab iconSize={iconSize} />,
+      };
+      break;
+    }
+    case 'apple': {
+      style = {
+        backgroundColor: "#000",
+        textColor: "#fff",
+        border: "1px solid #333",
+        name: "Apple",
+        icon: <BrandIcons.Apple iconSize={iconSize} />,
+      };
+      break;
+    }
+    case "bitbucket": {
+      style = {
+        backgroundColor: "#fff",
+        textColor: "#000",
+        border: "1px solid #ddd",
+        name: "Bitbucket",
+        icon: <BrandIcons.Bitbucket iconSize={iconSize} />,
+      };
+      break;
+    }
+    case 'linkedin': {
+      style = {
+        backgroundColor: "#0073b1",
+        textColor: "#fff",
+        name: "LinkedIn",
+        icon: <BrandIcons.LinkedIn iconSize={iconSize} />,
+      };
+      break;
+    }
+    case 'x': {
+      style = {
+        backgroundColor: "#000",
+        textColor: "#fff",
+        name: "X",
+        icon: <BrandIcons.X iconSize={iconSize} />,
+      };
+      break;
+    }
+    case 'twitch': {
+      style = {
+        backgroundColor: "#6441a5",
+        textColor: "#fff",
+        name: "Twitch",
+        icon: <BrandIcons.Twitch iconSize={iconSize} />,
+      };
+      break;
+    }
+    default: {
+      style = {
+        name: provider,
+        icon: null,
+      };
+    }
+  }
+
+  const styleSheet = `
+    .stack-oauth-button-${styleId} {
+      background-color: ${style.backgroundColor} !important;
+      color: ${style.textColor} !important;
+      border: ${style.border} !important;
+    }
+    .stack-oauth-button-${styleId}:hover {
+      background-color: ${changeColor(Color(style.backgroundColor), 10)} !important;
+    }
+  `;
+
+  return (
+    <>
+      <style>{styleSheet}</style>
+      <SimpleTooltip
+        disabled={!isIframe}
+        tooltip={isIframe ? "This auth provider is not supported in an iframe for security reasons." : undefined}
+        className='stack-scope w-full inline-flex'
+      >
+        <Button
+          onClick={async () => {
+            // Hexclave rebrand: UI hint key — straight rename (dot delimiter preserved).
+            localStorage.setItem('_HEXCLAVE.lastUsed', provider);
+            await (onAuthenticate ? onAuthenticate() : hexclaveApp.signInWithOAuth(provider));
+          }}
+          className={`stack-oauth-button-${styleId} stack-scope relative w-full`}
+          disabled={isIframe}
+        >
+          {!isMock && lastUsed === provider && (
+            <span className="absolute -top-2 -right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-md">
+            last
+            </span>
+          )}
+          <div className='flex items-center w-full gap-4'>
+            {style.icon}
+            <span className='flex-1'>
+              {type === 'sign-up' ?
+              t('Sign up with {provider}', { provider: style.name }) :
+              t('Sign in with {provider}', { provider: style.name })
+              }
+            </span>
+          </div>
+        </Button>
+      </SimpleTooltip>
+    </>
+  );
+}

package/src/components/passkey-button.tsx

@@ -0,0 +1,43 @@
+'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 { Button } from '@hexclave/ui';
+import { KeyRound } from 'lucide-react';
+import { useId } from 'react';
+import { useStackApp } from '..';
+import { useTranslation } from '../lib/translations';
+
+
+export function PasskeyButton({
+  type,
+}: {
+  type: 'sign-in' | 'sign-up',
+}) {
+  const { t } = useTranslation();
+  const hexclaveApp = useStackApp();
+  const styleId = useId().replaceAll(':', '-');
+
+
+  return (
+    <>
+      <Button
+        onClick={async () => { await hexclaveApp.signInWithPasskey(); }}
+        className={`stack-oauth-button-${styleId} stack-scope`}
+      >
+        <div className='flex items-center w-full gap-4'>
+          <KeyRound />
+          <span className='flex-1'>
+            {type === 'sign-up' ?
+              t('Sign up with Passkey') :
+              t('Sign in with Passkey')
+            }
+          </span>
+        </div>
+      </Button>
+    </>
+  );
+}

package/src/components/profile-image-editor.tsx

@@ -0,0 +1,194 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { fileToBase64 } from '@hexclave/shared/dist/utils/base64';
+import { runAsynchronouslyWithAlert } from '@hexclave/shared/dist/utils/promises';
+import { Button, Slider, Typography } from '@hexclave/ui';
+import imageCompression from 'browser-image-compression';
+import { Upload } from 'lucide-react';
+import { ComponentProps, useCallback, useState } from 'react';
+import Cropper, { Area } from 'react-easy-crop';
+import { useTranslation } from '../lib/translations';
+import { UserAvatar } from './elements/user-avatar';
+
+export async function checkImageUrl(url: string){
+  try {
+    const res = await fetch(url, { method: 'HEAD' });
+    const buff = await res.blob();
+    return buff.type.startsWith('image/');
+  } catch (e) {
+    return false;
+  }
+}
+
+const createImage = (url: string): Promise<HTMLImageElement> =>
+  new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener('load', () => resolve(image));
+    image.addEventListener('error', (error) => reject(error));
+    image.setAttribute('crossOrigin', 'anonymous');
+    image.src = url;
+  });
+
+export async function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<string | null> {
+  const image = await createImage(imageSrc);
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+
+  if (!ctx) {
+    return null;
+  }
+
+  const safeCrop = {
+    x: Math.max(0, pixelCrop.x),
+    y: Math.max(0, pixelCrop.y),
+    width: Math.max(1, pixelCrop.width),
+    height: Math.max(1, pixelCrop.height),
+  };
+
+  canvas.width = safeCrop.width;
+  canvas.height = safeCrop.height;
+
+  ctx.drawImage(
+    image,
+    safeCrop.x,
+    safeCrop.y,
+    safeCrop.width,
+    safeCrop.height,
+    0,
+    0,
+    safeCrop.width,
+    safeCrop.height
+  );
+
+  return canvas.toDataURL('image/jpeg');
+}
+
+export function ProfileImageEditor(props: {
+  user: NonNullable<ComponentProps<typeof UserAvatar>['user']>,
+  onProfileImageUrlChange: (profileImageUrl: string | null) => void | Promise<void>,
+}) {
+  const { t } = useTranslation();
+  const [rawUrl, setRawUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
+
+  function reset() {
+    setRawUrl(null);
+    setError(null);
+    setCrop({ x: 0, y: 0 });
+    setZoom(1);
+    setCroppedAreaPixels(null);
+  }
+
+  const onCropChange = useCallback((crop: { x: number, y: number }) => {
+    setCrop(crop);
+  }, []);
+
+  const onCropComplete = useCallback((croppedArea: Area, croppedAreaPixels: Area) => {
+    setCroppedAreaPixels(croppedAreaPixels);
+  }, []);
+
+  const onZoomChange = useCallback((zoom: number) => {
+    setZoom(zoom);
+  }, []);
+
+
+  function upload() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.onchange = (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (!file) return;
+      runAsynchronouslyWithAlert(async () => {
+        const rawUrl = await fileToBase64(file);
+        if (await checkImageUrl(rawUrl)) {
+          setRawUrl(rawUrl);
+          setError(null);
+        } else {
+          setError(t('Invalid image'));
+        }
+        input.remove();
+      });
+    };
+    input.click();
+  }
+
+  if (!rawUrl) {
+    return <div className='flex flex-col'>
+      <div className='cursor-pointer relative' onClick={upload}>
+        <UserAvatar
+          size={60}
+          user={props.user}
+          border
+        />
+        <div className='absolute top-0 left-0 h-[60px] w-[60px] bg-gray-500/20 backdrop-blur-sm items-center justify-center rounded-full flex opacity-0 hover:opacity-100 transition-opacity'>
+          <div className='bg-background p-2 rounded-full'>
+            <Upload className='h-5 w-5' />
+          </div>
+        </div>
+      </div>
+      {error && <Typography variant='destructive' type='label'>{error}</Typography>}
+    </div>;
+  }
+
+  return (
+    <div className='flex flex-col items-center gap-4'>
+      <div className='relative w-64 h-64'>
+        <Cropper
+          image={rawUrl || props.user.profileImageUrl || ""}
+          crop={crop}
+          zoom={zoom}
+          aspect={1}
+          cropShape="round"
+          showGrid={false}
+          onCropChange={onCropChange}
+          onCropComplete={onCropComplete}
+          onZoomChange={onZoomChange}
+        />
+      </div>
+      <Slider
+        min={1}
+        max={3}
+        step={0.1}
+        value={[zoom]}
+        onValueChange={(v) => onZoomChange(v[0])}
+      />
+
+      <div className='flex flex-row gap-2'>
+        <Button
+          onClick={async () => {
+            if (rawUrl && croppedAreaPixels) {
+              const croppedImageUrl = await getCroppedImg(rawUrl, croppedAreaPixels);
+              if (croppedImageUrl) {
+                const compressedFile = await imageCompression(
+                  await imageCompression.getFilefromDataUrl(croppedImageUrl, 'profile-image'),
+                  {
+                    maxSizeMB: 0.1,
+                    fileType: "image/jpeg",
+                  }
+                );
+                const compressedUrl = await imageCompression.getDataUrlFromFile(compressedFile);
+                await props.onProfileImageUrlChange(compressedUrl);
+                reset();
+              } else {
+                setError(t('Could not crop image.'));
+              }
+            }
+          }}
+        >
+          {t('Save')}
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={reset}
+        >
+          {t('Cancel')}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/selected-team-switcher.tsx

@@ -0,0 +1,97 @@
+'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 { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import {
+  Skeleton,
+} from "@hexclave/ui";
+import { Suspense, useEffect } from "react";
+import { Team, useStackApp, useUser } from "..";
+import { TeamSwitcher } from "./team-switcher";
+
+type MockTeam = {
+  id: string,
+  displayName: string,
+  profileImageUrl?: string | null,
+};
+
+type SelectedTeamSwitcherProps<AllowNull extends boolean = false> = {
+  urlMap?: (team: AllowNull extends true ? Team | null : Team) => string,
+  selectedTeam?: Team,
+  noUpdateSelectedTeam?: boolean,
+  allowNull?: AllowNull,
+  nullLabel?: string,
+  onChange?: (team: AllowNull extends true ? Team | null : Team) => void,
+  triggerClassName?: string,
+  // Mock data props
+  mockUser?: {
+    selectedTeam?: MockTeam,
+  },
+  mockTeams?: MockTeam[],
+  mockProject?: {
+    config: {
+      clientTeamCreationEnabled: boolean,
+    },
+  },
+};
+
+export function SelectedTeamSwitcher<AllowNull extends boolean = false>(props: SelectedTeamSwitcherProps<AllowNull>) {
+  return <Suspense fallback={<Fallback />}>
+    <Inner {...props} />
+  </Suspense>;
+}
+
+function Fallback() {
+  return <Skeleton className="h-9 w-full max-w-64 stack-scope" />;
+}
+
+function Inner<AllowNull extends boolean>(props: SelectedTeamSwitcherProps<AllowNull>) {
+  const appFromHook = useStackApp();
+  const userFromHook = useUser();
+
+  // Use mock data if provided, otherwise use real data
+  const app = props.mockUser ? {
+    useProject: () => props.mockProject || { config: { clientTeamCreationEnabled: false } },
+    useNavigate: () => () => {}, // Mock navigate function
+    urls: { accountSettings: '/account-settings' },
+  } : appFromHook;
+
+  const user = props.mockUser ? {
+    selectedTeam: props.mockUser.selectedTeam,
+    useTeams: () => props.mockTeams || [],
+    setSelectedTeam: async () => {}, // Mock function
+  } : userFromHook;
+
+  const navigate = app.useNavigate();
+
+  useEffect(() => {
+    if (!props.noUpdateSelectedTeam && props.selectedTeam && !props.mockUser) {
+      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));
+    }
+  }, [props.noUpdateSelectedTeam, props.selectedTeam, props.mockUser]);
+
+  return (
+    <TeamSwitcher
+      team={props.selectedTeam}
+      allowNull={props.allowNull}
+      nullLabel={props.nullLabel}
+      triggerClassName={props.triggerClassName}
+      onChange={async (team) => {
+        if (props.onChange) {
+          props.onChange(team as Team);
+        }
+        // Skip actual navigation/updates in mock mode
+        if (props.mockUser) return;
+        if (!props.noUpdateSelectedTeam) {
+          await user?.setSelectedTeam(team as Team);
+        }
+        if (props.urlMap) {
+          navigate(props.urlMap(team as Team));
+        }
+      }}
+    />
+  );
+}

package/src/components/team-icon.tsx

@@ -0,0 +1,30 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+import { Avatar, AvatarImage, Typography } from "@hexclave/ui";
+import { User2 } from "lucide-react";
+import { Team } from "..";
+
+export function TeamIcon(props: { team: Team | 'personal' }) {
+  if (props.team === 'personal') {
+    return (
+      <div className="flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200">
+        <User2 className="w-4 h-4" />
+      </div>
+    );
+  }
+  if (props.team.profileImageUrl) {
+    return (
+      <Avatar className="min-w-6 min-h-6 max-w-6 max-h-6 rounded">
+        <AvatarImage src={props.team.profileImageUrl} alt={props.team.displayName} />
+      </Avatar>
+    );
+  } else {
+    return (
+      <div className="flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200">
+        <Typography className="text-zinc-800 dark:text-zinc-800">{props.team.displayName.slice(0, 1).toUpperCase()}</Typography>
+      </div>
+    );
+  }
+}