@lego-box/shell 1.0.5 → 1.0.7

package/src/pages/LandingPage.tsx

@@ -0,0 +1,221 @@
+import * as React from 'react';
+import { useGlobalState } from 'piral';
+import { 
+  WelcomeBanner, 
+  TechStackCard, 
+  FeatureCard,
+  CardContent,
+} from '@lego-box/ui-kit';
+
+/**
+ * Lego Box Landing Page - Comprehensive portal for developers
+ * 
+ * Features:
+ * - User Personalization: Welcome section with profile info
+ * - Project Introduction: Lego Box as a microfrontends platform
+ * - Developer Empowerment: Information about creating pilets
+ * - Tech Stack Documentation: Links to core technologies
+ * - Full Dark/Light mode support using CSS variables
+ */
+export function LandingPage() {
+  const userFromState = useGlobalState((s) => (s as { user?: { mail?: string; firstName?: string; lastName?: string } }).user);
+
+  const userName = userFromState
+    ? [userFromState.firstName, userFromState.lastName].filter(Boolean).join(' ').trim() || userFromState.mail
+    : 'Developer';
+
+  const techStack = [
+    {
+      name: 'Piral',
+      description: 'Open-source framework for building modular frontend applications with microfrontends.',
+      url: 'https://piral.io',
+      icon: (
+        <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+        </svg>
+      ),
+    },
+    {
+      name: 'PocketBase',
+      description: 'Open-source backend for your next SaaS and Mobile app in 1 file.',
+      url: 'https://pocketbase.io',
+      icon: (
+        <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+        </svg>
+      ),
+    },
+    {
+      name: 'shadcn/ui',
+      description: 'Beautifully designed components built with Radix UI and Tailwind CSS.',
+      url: 'https://ui.shadcn.com',
+      icon: (
+        <svg className="w-6 h-6 text-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+        </svg>
+      ),
+    },
+    {
+      name: 'React',
+      description: 'A JavaScript library for building user interfaces.',
+      url: 'https://react.dev',
+      icon: (
+        <svg className="w-6 h-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+        </svg>
+      ),
+    },
+    {
+      name: 'Tailwind CSS',
+      description: 'A utility-first CSS framework for rapidly building custom designs.',
+      url: 'https://tailwindcss.com',
+      icon: (
+        <svg className="w-6 h-6 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+        </svg>
+      ),
+    },
+    {
+      name: 'TypeScript',
+      description: 'Strongly typed programming language that builds on JavaScript.',
+      url: 'https://www.typescriptlang.org',
+      icon: (
+        <svg className="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+        </svg>
+      ),
+    },
+  ];
+
+  const features = [
+    { label: 'Independent deployments' },
+    { label: 'Shared UI components' },
+    { label: 'Runtime integration' },
+    { label: 'Team autonomy' },
+  ];
+
+  const gettingStartedSteps = [
+    'Use the shared UI Kit for consistent design',
+    'Leverage PocketBase for backend services',
+    'Register pages and components via Piral API',
+    'Deploy pilets independently to the feed service',
+  ];
+
+  return (
+    <div className="max-w-7xl mx-auto space-y-8">
+      {/* Welcome Section - User Personalization */}
+      <WelcomeBanner 
+        userName={userName} 
+        subtitle="You're now in the Lego Box ecosystem – a powerful Piral instance designed for building, deploying, and managing microfrontend applications at scale."
+      />
+
+      {/* Project Introduction */}
+      <section className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <FeatureCard
+          title="What is Lego Box?"
+          description="A comprehensive microfrontend development platform"
+          variant="primary"
+          icon={
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            </svg>
+          }
+        >
+          <CardContent className="space-y-4">
+            <p className="text-muted-foreground">
+              <strong className="text-foreground">Lego Box</strong> is a production-ready Piral instance that empowers teams to build modular, scalable web applications using microfrontends architecture. Think of it as your LEGO set for building complex applications – piece by piece, independently.
+            </p>
+            <div className="grid grid-cols-2 gap-3">
+              {features.map((feature, index) => (
+                <div key={index} className="flex items-start gap-2">
+                  <svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                  <span className="text-sm text-muted-foreground">{feature.label}</span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </FeatureCard>
+
+        <FeatureCard
+          title="Create Your Pilets"
+          description="Extend the platform with your own microfrontends"
+          variant="secondary"
+          icon={
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </svg>
+          }
+        >
+          <CardContent className="space-y-4">
+            <p className="text-muted-foreground">
+              As a developer in the Lego Box ecosystem, you can create and deploy your own <strong className="text-foreground">pilets</strong> – self-contained microfrontend modules that seamlessly integrate with the application shell. Build pages, register menu items, share components, and more.
+            </p>
+            <div className="bg-muted rounded-lg p-4 space-y-2">
+              <p className="text-sm font-medium text-foreground">Getting Started:</p>
+              <ol className="text-sm text-muted-foreground space-y-1 list-decimal list-inside">
+                {gettingStartedSteps.map((step, index) => (
+                  <li key={index}>{step}</li>
+                ))}
+              </ol>
+            </div>
+          </CardContent>
+        </FeatureCard>
+      </section>
+
+      {/* Tech Stack Documentation */}
+      <section>
+        <div className="flex items-center gap-3 mb-6">
+          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
+            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+            </svg>
+          </div>
+          <div>
+            <h2 className="text-xl font-bold text-foreground">Technology Stack</h2>
+            <p className="text-sm text-muted-foreground">Core technologies powering Lego Box</p>
+          </div>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {techStack.map((tech) => (
+            <TechStackCard
+              key={tech.name}
+              href={tech.url}
+              name={tech.name}
+              description={tech.description}
+              icon={tech.icon}
+            />
+          ))}
+        </div>
+      </section>
+
+      {/* Quick Actions */}
+      <section className="bg-muted/50 rounded-2xl p-6 lg:p-8 border border-border">
+        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
+          <div>
+            <h3 className="text-lg font-semibold text-foreground mb-2">Ready to build?</h3>
+            <p className="text-muted-foreground">
+              Start developing your first pilet or explore the existing features in the system.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-3">
+            <button className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+              </svg>
+              Create New Pilet
+            </button>
+            <button className="inline-flex items-center gap-2 px-4 py-2 bg-card border border-border text-foreground rounded-lg font-medium hover:bg-accent transition-colors">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+              View Documentation
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

package/src/pages/LoginPage.tsx

@@ -0,0 +1,217 @@
+import * as React from 'react';
+// import { z } from 'zod';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@lego-box/ui-kit';
+import { Button, Label, PasswordInput, Checkbox, Link } from '@lego-box/ui-kit';
+import { usePiralInstance } from '../context/PiralInstanceContext';
+import { useGlobalStateContext } from 'piral';
+
+// const loginSchema = z.object({
+//   email: z
+//     .string()
+//     .min(1, 'Email is required')
+//     .email('Please enter a valid email address'),
+//   password: z.string().min(1, 'Password is required'),
+// });
+
+// type LoginFormData = z.infer<typeof loginSchema>;
+type LoginFormData = { email: string; password: string };
+
+export function LoginPage() {
+  const instance = usePiralInstance();
+  const ctx = useGlobalStateContext();
+  const [email, setEmail] = React.useState('superuser@legobox.local');
+  const [password, setPassword] = React.useState("SuperUser123!");
+  const [rememberMe, setRememberMe] = React.useState(false);
+  const [error, setError] = React.useState('');
+  const [fieldErrors, setFieldErrors] = React.useState<Partial<Record<keyof LoginFormData, string>>>({});
+  const [loading, setLoading] = React.useState(false);
+
+  const root = instance?.root as
+    | {
+        isAuthenticated(): boolean;
+        login(email: string, password: string): Promise<void>;
+      }
+    | undefined;
+
+  const isAuthenticated = root?.isAuthenticated?.() ?? false;
+
+  React.useEffect(() => {
+    if (isAuthenticated && ctx?.navigation) {
+      ctx.navigation.replace('/');
+    }
+  }, [isAuthenticated, ctx?.navigation]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setFieldErrors({});
+
+    // Manual validation without Zod
+    const errors: Partial<Record<keyof LoginFormData, string>> = {};
+    if (!email) {
+      errors.email = 'Email is required';
+    } else if (!email.includes('@')) {
+      errors.email = 'Please enter a valid email address';
+    }
+    if (!password) {
+      errors.password = 'Password is required';
+    }
+    if (Object.keys(errors).length > 0) {
+      setFieldErrors(errors);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      if (root?.login) await root.login(email, password);
+      if (ctx?.navigation) ctx.navigation.replace('/');
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Invalid email or password');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen w-full flex items-center justify-center bg-slate-50 p-4">
+      <Card className="w-full max-w-[440px]">
+        <CardHeader className="text-center pb-2">
+          {/* Lego Logo - Stacked brick with studs */}
+          <div className="flex justify-center mb-6">
+            <div className="relative w-16 h-16 flex items-center justify-center">
+              {/* Back brick - offset */}
+              <div
+                className="absolute w-10 h-10 rounded-lg shadow-md"
+                style={{ backgroundColor: 'hsl(217, 91%, 70%)', bottom: 4, right: 4 }}
+              />
+              {/* Front brick - primary */}
+              <div className="absolute w-10 h-10 bg-primary rounded-lg shadow-lg left-0 top-0 flex items-center justify-center">
+                {/* Studs (2x2) */}
+                <div
+                  className="grid grid-cols-2 flex items-center justify-center"
+                  style={{ gap: 3, marginTop: -2 }}
+                >
+                  {[1, 2, 3, 4].map((i) => (
+                    <div
+                      key={i}
+                      className="rounded-full bg-primary-foreground flex-shrink-0"
+                      style={{
+                        width: 6,
+                        height: 6,
+                        boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.3)',
+                      }}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+          <CardTitle className="text-2xl font-bold text-slate-900 mb-2">
+            Lego Box
+          </CardTitle>
+          <p className="text-base text-slate-500 leading-relaxed max-w-sm mx-auto">
+            Welcome back! Sign in to pick up where you left off.
+          </p>
+        </CardHeader>
+        <CardContent className="pt-6">
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {/* Email Field */}
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <input
+                id="email"
+                type="email"
+                placeholder="you@example.com"
+                value={email}
+                onChange={(e) => {
+                  setEmail(e.target.value);
+                  if (fieldErrors.email) setFieldErrors((prev) => ({ ...prev, email: undefined }));
+                }}
+                autoComplete="email"
+                aria-invalid={!!fieldErrors.email}
+                aria-describedby={fieldErrors.email ? 'email-error' : undefined}
+                className={`flex h-11 w-full rounded-lg border bg-white px-4 py-2.5 text-sm text-foreground placeholder:text-slate-400 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 ${
+                  fieldErrors.email
+                    ? 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20'
+                    : 'border-slate-200 focus-visible:border-primary focus-visible:ring-primary/20'
+                }`}
+              />
+              {fieldErrors.email && (
+                <p id="email-error" className="text-sm text-destructive" role="alert">
+                  {fieldErrors.email}
+                </p>
+              )}
+            </div>
+
+            {/* Password Field */}
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <PasswordInput
+                id="password"
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => {
+                  setPassword(e.target.value);
+                  if (fieldErrors.password) setFieldErrors((prev) => ({ ...prev, password: undefined }));
+                }}
+                autoComplete="current-password"
+                aria-invalid={!!fieldErrors.password}
+                aria-describedby={fieldErrors.password ? 'password-error' : undefined}
+                className={fieldErrors.password ? 'border-destructive' : undefined}
+              />
+              {fieldErrors.password && (
+                <p id="password-error" className="text-sm text-destructive" role="alert">
+                  {fieldErrors.password}
+                </p>
+              )}
+            </div>
+
+            {/* Utility Row: Remember me + Forgot password */}
+            <div className="flex items-center justify-between">
+              <Checkbox
+                id="remember"
+                checked={rememberMe}
+                onChange={(e) => setRememberMe(e.target.checked)}
+                label="Remember me"
+              />
+              <Link
+                href="#"
+                variant="primary"
+                onClick={(e) => e.preventDefault()}
+              >
+                Forgot password?
+              </Link>
+            </div>
+
+            {error && (
+              <div className="p-4 rounded-lg bg-destructive/10 border border-destructive/30">
+                <p className="text-sm text-destructive font-medium">{error}</p>
+              </div>
+            )}
+
+            <Button
+              type="submit"
+              className="w-full h-12 text-base font-semibold"
+              disabled={loading}
+            >
+              {loading ? (
+                <span className="flex items-center gap-2">
+                  <svg className="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                  </svg>
+                  Signing in...
+                </span>
+              ) : 'Sign in'}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}