create-nexu 1.4.2 → 1.4.4

package/dist/index.js

@@ -38,6 +38,7 @@ var TEMPLATE_DIRS = {
   changeset: ".changeset"
 };
 var SHARED_PACKAGES = [
+  "auth",
   "cache",
   "config",
   "constants",
@@ -147,6 +148,22 @@ function getRunCommand(pm) {
       return "npm run";
   }
 }
+function getPackageManagerVersion(pm) {
+  try {
+    const version = execSync(`${pm} --version`, {
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "pipe"]
+    }).trim();
+    return version;
+  } catch {
+    return null;
+  }
+}
+function getPackageManagerField(pm) {
+  const version = getPackageManagerVersion(pm);
+  if (!version) return null;
+  return `${pm}@${version}`;
+}
 function getInstallCommand(pm) {
   switch (pm) {
     case "pnpm":
@@ -427,6 +444,10 @@ async function init(projectName, options) {
     fs3.copySync(templateDir, projectDir);
     const dotfilesToRename = [
       { src: path3.join(projectDir, "gitignore"), dest: path3.join(projectDir, ".gitignore") },
+      {
+        src: path3.join(projectDir, "lintstagedrc.cjs"),
+        dest: path3.join(projectDir, ".lintstagedrc.cjs")
+      },
       {
         src: path3.join(projectDir, "apps", "gitkeep"),
         dest: path3.join(projectDir, "apps", ".gitkeep")
@@ -450,7 +471,12 @@ async function init(projectName, options) {
   const packageJsonPath = path3.join(projectDir, "package.json");
   const packageJson2 = fs3.readJsonSync(packageJsonPath);
   packageJson2.name = projectName;
-  delete packageJson2.packageManager;
+  const pmField = getPackageManagerField(packageManager);
+  if (pmField) {
+    packageJson2.packageManager = pmField;
+  } else {
+    delete packageJson2.packageManager;
+  }
   if (!features.includes("changesets")) {
     delete packageJson2.scripts["changeset"];
     delete packageJson2.scripts["version-packages"];
@@ -1051,6 +1077,10 @@ ${change.relativePath}:`));
   }
   const dotfilesToRename = [
     { src: path4.join(projectDir, "gitignore"), dest: path4.join(projectDir, ".gitignore") },
+    {
+      src: path4.join(projectDir, "lintstagedrc.cjs"),
+      dest: path4.join(projectDir, ".lintstagedrc.cjs")
+    },
     {
       src: path4.join(projectDir, "apps", "gitkeep"),
       dest: path4.join(projectDir, "apps", ".gitkeep")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nexu",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "CLI to create and update Nexu monorepo projects",
   "author": "Nexu Team",
   "license": "MIT",

package/templates/default/lintstagedrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  '*.{ts,tsx,js,jsx}': ['eslint --fix', 'prettier --write'],
+  '*.{json,md,yml,yaml}': ['prettier --write'],
+};

package/templates/default/packages/auth/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@repo/auth",
+  "version": "0.0.1",
+  "private": true,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.mjs",
+      "require": "./dist/hooks/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.mjs",
+      "require": "./dist/components/index.js"
+    },
+    "./next": {
+      "types": "./dist/next/index.d.ts",
+      "import": "./dist/next/index.mjs",
+      "require": "./dist/next/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "js-cookie": "^3.0.5",
+    "jwt-decode": "^4.0.0"
+  },
+  "devDependencies": {
+    "@repo/config": "workspace:*",
+    "@types/js-cookie": "^3.0.6",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.3",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "next": ">=13.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  }
+}

package/templates/default/packages/auth/src/components/ProtectedRoute.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useRequireAuth } from '../hooks/useRequireAuth';
+import type { ProtectedRouteProps } from '../types';
+
+/**
+ * Protected route component that requires authentication
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ProtectedRoute redirectTo="/login">
+ *   <Dashboard />
+ * </ProtectedRoute>
+ *
+ * // With loading fallback
+ * <ProtectedRoute
+ *   redirectTo="/login"
+ *   fallback={<LoadingSpinner />}
+ * >
+ *   <Dashboard />
+ * </ProtectedRoute>
+ *
+ * // With role-based access
+ * <ProtectedRoute
+ *   redirectTo="/unauthorized"
+ *   roles={['admin', 'moderator']}
+ * >
+ *   <AdminPanel />
+ * </ProtectedRoute>
+ * ```
+ */
+export function ProtectedRoute({
+  children,
+  fallback,
+  redirectTo = '/login',
+  roles,
+  permissions,
+}: ProtectedRouteProps) {
+  const { isAuthenticated, isLoading, user } = useRequireAuth({
+    redirectTo,
+  });
+
+  // Show loading state
+  if (isLoading) {
+    return fallback ? <>{fallback}</> : null;
+  }
+
+  // Not authenticated - useRequireAuth will handle redirect
+  if (!isAuthenticated) {
+    return fallback ? <>{fallback}</> : null;
+  }
+
+  // Check roles if specified
+  if (roles && roles.length > 0) {
+    const userRoles = (user?.metadata?.roles as string[]) || [];
+    const hasRole = roles.some(role => userRoles.includes(role));
+
+    if (!hasRole) {
+      return fallback ? <>{fallback}</> : null;
+    }
+  }
+
+  // Check permissions if specified
+  if (permissions && permissions.length > 0) {
+    const userPermissions = (user?.metadata?.permissions as string[]) || [];
+    const hasPermission = permissions.every(perm => userPermissions.includes(perm));
+
+    if (!hasPermission) {
+      return fallback ? <>{fallback}</> : null;
+    }
+  }
+
+  return <>{children}</>;
+}

package/templates/default/packages/auth/src/components/SignInForm.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import { useAuth } from '../hooks/useAuth';
+import type { AuthError, SignInFormProps } from '../types';
+
+import { SocialButtons } from './SocialButtons';
+
+/**
+ * Sign in form component
+ *
+ * @example
+ * ```tsx
+ * <SignInForm
+ *   providers={['google', 'github']}
+ *   onSuccess={(response) => router.push('/dashboard')}
+ *   showRememberMe
+ *   showForgotPassword
+ *   forgotPasswordUrl="/forgot-password"
+ *   signUpUrl="/signup"
+ * />
+ * ```
+ */
+export function SignInForm({
+  onSuccess,
+  onError,
+  providers = [],
+  showRememberMe = true,
+  showForgotPassword = true,
+  forgotPasswordUrl = '/forgot-password',
+  signUpUrl = '/signup',
+  redirectUrl,
+  className,
+}: SignInFormProps) {
+  const { signIn, isLoading, error } = useAuth();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [remember, setRemember] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setFormError(null);
+
+    if (!email || !password) {
+      setFormError('Please fill in all fields');
+      return;
+    }
+
+    try {
+      const response = await signIn({ email, password, remember });
+      onSuccess?.(response);
+
+      if (redirectUrl && typeof window !== 'undefined') {
+        window.location.href = redirectUrl;
+      }
+    } catch (err) {
+      const authError = err as AuthError;
+      setFormError(authError.message);
+      onError?.(authError);
+    }
+  };
+
+  const displayError = formError || error?.message;
+
+  return (
+    <div className={className}>
+      <form onSubmit={e => void handleSubmit(e)}>
+        {displayError && (
+          <div role="alert" aria-live="polite">
+            {displayError}
+          </div>
+        )}
+
+        <div>
+          <label htmlFor="email">Email</label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            autoComplete="email"
+            required
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            disabled={isLoading}
+            placeholder="you@example.com"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="password">Password</label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            required
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            disabled={isLoading}
+            placeholder="••••••••"
+          />
+        </div>
+
+        <div>
+          {showRememberMe && (
+            <label>
+              <input
+                type="checkbox"
+                checked={remember}
+                onChange={e => setRemember(e.target.checked)}
+                disabled={isLoading}
+              />
+              <span>Remember me</span>
+            </label>
+          )}
+
+          {showForgotPassword && <a href={forgotPasswordUrl}>Forgot password?</a>}
+        </div>
+
+        <button type="submit" disabled={isLoading}>
+          {isLoading ? 'Signing in...' : 'Sign in'}
+        </button>
+      </form>
+
+      {providers.length > 0 && (
+        <>
+          <div>
+            <span>Or continue with</span>
+          </div>
+          <SocialButtons
+            providers={providers}
+            mode="signin"
+            onSuccess={() => {
+              if (redirectUrl && typeof window !== 'undefined') {
+                window.location.href = redirectUrl;
+              }
+            }}
+            onError={onError}
+          />
+        </>
+      )}
+
+      {signUpUrl && (
+        <p>
+          Don&apos;t have an account? <a href={signUpUrl}>Sign up</a>
+        </p>
+      )}
+    </div>
+  );
+}

package/templates/default/packages/auth/src/components/SignUpForm.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import { useAuth } from '../hooks/useAuth';
+import type { AuthError, SignUpFormProps } from '../types';
+
+import { SocialButtons } from './SocialButtons';
+
+/**
+ * Sign up form component
+ *
+ * @example
+ * ```tsx
+ * <SignUpForm
+ *   providers={['google', 'github']}
+ *   onSuccess={(response) => router.push('/onboarding')}
+ *   showName
+ *   signInUrl="/signin"
+ * />
+ * ```
+ */
+export function SignUpForm({
+  onSuccess,
+  onError,
+  providers = [],
+  showName = true,
+  signInUrl = '/signin',
+  redirectUrl,
+  className,
+}: SignUpFormProps) {
+  const { signUp, isLoading, error } = useAuth();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [name, setName] = useState('');
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setFormError(null);
+
+    if (!email || !password) {
+      setFormError('Please fill in all required fields');
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setFormError('Passwords do not match');
+      return;
+    }
+
+    if (password.length < 8) {
+      setFormError('Password must be at least 8 characters');
+      return;
+    }
+
+    try {
+      const response = await signUp({
+        email,
+        password,
+        name: showName ? name : undefined,
+      });
+      onSuccess?.(response);
+
+      if (redirectUrl && typeof window !== 'undefined') {
+        window.location.href = redirectUrl;
+      }
+    } catch (err) {
+      const authError = err as AuthError;
+      setFormError(authError.message);
+      onError?.(authError);
+    }
+  };
+
+  const displayError = formError || error?.message;
+
+  return (
+    <div className={className}>
+      <form onSubmit={e => void handleSubmit(e)}>
+        {displayError && (
+          <div role="alert" aria-live="polite">
+            {displayError}
+          </div>
+        )}
+
+        {showName && (
+          <div>
+            <label htmlFor="name">Name</label>
+            <input
+              id="name"
+              name="name"
+              type="text"
+              autoComplete="name"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              disabled={isLoading}
+              placeholder="John Doe"
+            />
+          </div>
+        )}
+
+        <div>
+          <label htmlFor="email">Email</label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            autoComplete="email"
+            required
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            disabled={isLoading}
+            placeholder="you@example.com"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="password">Password</label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            autoComplete="new-password"
+            required
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            disabled={isLoading}
+            placeholder="••••••••"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="confirmPassword">Confirm Password</label>
+          <input
+            id="confirmPassword"
+            name="confirmPassword"
+            type="password"
+            autoComplete="new-password"
+            required
+            value={confirmPassword}
+            onChange={e => setConfirmPassword(e.target.value)}
+            disabled={isLoading}
+            placeholder="••••••••"
+          />
+        </div>
+
+        <button type="submit" disabled={isLoading}>
+          {isLoading ? 'Creating account...' : 'Create account'}
+        </button>
+      </form>
+
+      {providers.length > 0 && (
+        <>
+          <div>
+            <span>Or continue with</span>
+          </div>
+          <SocialButtons
+            providers={providers}
+            mode="signup"
+            onSuccess={() => {
+              if (redirectUrl && typeof window !== 'undefined') {
+                window.location.href = redirectUrl;
+              }
+            }}
+            onError={onError}
+          />
+        </>
+      )}
+
+      {signInUrl && (
+        <p>
+          Already have an account? <a href={signInUrl}>Sign in</a>
+        </p>
+      )}
+    </div>
+  );
+}

package/templates/default/packages/auth/src/components/SocialButtons.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import React from 'react';
+
+import { useAuth } from '../hooks/useAuth';
+import type { AuthError, AuthProvider, SocialButtonsProps } from '../types';
+
+/**
+ * Social provider icons (SVG)
+ */
+const ProviderIcons: Record<string, React.ReactNode> = {
+  google: (
+    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+      <path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        fill="#4285F4"
+      />
+      <path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill="#34A853"
+      />
+      <path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        fill="#FBBC05"
+      />
+      <path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill="#EA4335"
+      />
+    </svg>
+  ),
+  github: (
+    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+    </svg>
+  ),
+  facebook: (
+    <svg viewBox="0 0 24 24" width="20" height="20" fill="#1877F2">
+      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
+    </svg>
+  ),
+  apple: (
+    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+      <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
+    </svg>
+  ),
+  twitter: (
+    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  ),
+};
+
+/**
+ * Provider display names
+ */
+const ProviderNames: Record<string, string> = {
+  google: 'Google',
+  github: 'GitHub',
+  facebook: 'Facebook',
+  apple: 'Apple',
+  twitter: 'X (Twitter)',
+};
+
+interface SocialButtonProps {
+  provider: AuthProvider;
+  onClick: () => void;
+  disabled?: boolean;
+  mode?: 'signin' | 'signup';
+  className?: string;
+}
+
+/**
+ * Individual social login button
+ */
+export function SocialButton({
+  provider,
+  onClick,
+  disabled,
+  mode = 'signin',
+  className,
+}: SocialButtonProps) {
+  const actionText = mode === 'signin' ? 'Sign in' : 'Sign up';
+  const providerName = ProviderNames[provider] || provider;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={className}
+      aria-label={`${actionText} with ${providerName}`}
+    >
+      {ProviderIcons[provider]}
+      <span>
+        {actionText} with {providerName}
+      </span>
+    </button>
+  );
+}
+
+/**
+ * Social login buttons component
+ *
+ * @example
+ * ```tsx
+ * <SocialButtons
+ *   providers={['google', 'github']}
+ *   mode="signin"
+ *   onSuccess={(provider) => console.log(`Signed in with ${provider}`)}
+ * />
+ * ```
+ */
+export function SocialButtons({
+  providers,
+  onSuccess,
+  onError,
+  mode = 'signin',
+  className,
+}: SocialButtonsProps) {
+  const { signInWithProvider, isLoading } = useAuth();
+
+  const handleProviderClick = async (provider: AuthProvider) => {
+    try {
+      await signInWithProvider(provider);
+      onSuccess?.(provider);
+    } catch (error) {
+      onError?.(error as AuthError);
+    }
+  };
+
+  if (providers.length === 0) return null;
+
+  return (
+    <div className={className}>
+      {providers.map(provider => (
+        <SocialButton
+          key={provider}
+          provider={provider}
+          onClick={() => void handleProviderClick(provider)}
+          disabled={isLoading}
+          mode={mode}
+        />
+      ))}
+    </div>
+  );
+}

package/templates/default/packages/auth/src/components/index.ts

@@ -0,0 +1,4 @@
+export { SignInForm } from './SignInForm';
+export { SignUpForm } from './SignUpForm';
+export { SocialButtons, SocialButton } from './SocialButtons';
+export { ProtectedRoute } from './ProtectedRoute';