@dailyautomations/ui 1.0.1 → 1.1.0

package/examples/pages/LoginPage.tsx

@@ -0,0 +1,166 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "../../src/components/common/button"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../src/components/common/card"
+import { Input } from "../../src/components/common/input"
+import { Label } from "../../src/components/common/label"
+import { Checkbox } from "../../src/components/common/checkbox"
+
+// Logo Component
+function Logo({ className }: { className?: string }) {
+  return (
+    <span className={className}>
+      <span className="text-purple-500">daily</span>
+      <span className="text-orange-500">X</span>
+    </span>
+  )
+}
+
+// Social Login Button
+interface SocialButtonProps {
+  icon: React.ReactNode
+  children: React.ReactNode
+  onClick?: () => void
+}
+
+function SocialButton({ icon, children, onClick }: SocialButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className="flex-1 h-10 px-4 rounded-md border border-zinc-800 bg-transparent text-sm font-medium hover:bg-zinc-800 transition-colors flex items-center justify-center gap-2"
+    >
+      {icon}
+      {children}
+    </button>
+  )
+}
+
+// Icons
+const Icons = {
+  google: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path fill="#4285F4" 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"/>
+      <path fill="#34A853" 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"/>
+      <path fill="#FBBC05" 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"/>
+      <path fill="#EA4335" 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"/>
+    </svg>
+  ),
+  github: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+    </svg>
+  ),
+}
+
+// Main Login Page Component
+export function LoginPage() {
+  const [email, setEmail] = React.useState("")
+  const [password, setPassword] = React.useState("")
+  const [rememberMe, setRememberMe] = React.useState(false)
+  const [isLoading, setIsLoading] = React.useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+    // Simulate API call
+    await new Promise((resolve) => setTimeout(resolve, 1500))
+    setIsLoading(false)
+  }
+
+  return (
+    <div className="min-h-screen bg-[#0F0F14] text-white flex items-center justify-center p-4">
+      <div className="w-full max-w-[400px]">
+        {/* Logo */}
+        <div className="text-center mb-8">
+          <Logo className="text-3xl font-bold" />
+        </div>
+
+        {/* Login Card */}
+        <Card>
+          <CardHeader className="text-center">
+            <CardTitle className="text-xl">Welcome back</CardTitle>
+            <CardDescription>Sign in to your account to continue</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <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)}
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="Enter your password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id="remember"
+                    checked={rememberMe}
+                    onCheckedChange={(checked) => setRememberMe(checked as boolean)}
+                  />
+                  <Label htmlFor="remember" className="text-sm font-normal cursor-pointer">
+                    Remember me
+                  </Label>
+                </div>
+                <a href="#" className="text-sm text-purple-400 hover:text-purple-300 transition-colors">
+                  Forgot password?
+                </a>
+              </div>
+
+              <Button type="submit" className="w-full" loading={isLoading}>
+                Sign in
+              </Button>
+            </form>
+
+            {/* Divider */}
+            <div className="relative my-6">
+              <div className="absolute inset-0 flex items-center">
+                <div className="w-full border-t border-zinc-800" />
+              </div>
+              <div className="relative flex justify-center text-xs">
+                <span className="bg-zinc-900 px-2 text-zinc-500">or continue with</span>
+              </div>
+            </div>
+
+            {/* Social Login */}
+            <div className="flex gap-3">
+              <SocialButton icon={<Icons.google className="w-5 h-5" />}>
+                Google
+              </SocialButton>
+              <SocialButton icon={<Icons.github className="w-5 h-5" />}>
+                GitHub
+              </SocialButton>
+            </div>
+
+            {/* Sign Up Link */}
+            <p className="text-center text-sm text-zinc-400 mt-6">
+              Don't have an account?{" "}
+              <a href="#" className="text-purple-400 hover:text-purple-300 transition-colors font-medium">
+                Sign up
+              </a>
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+export default LoginPage

package/examples/pages/OnboardingPage.tsx

@@ -0,0 +1,385 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "../../src/components/common/button"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../src/components/common/card"
+import { Input } from "../../src/components/common/input"
+import { Label } from "../../src/components/common/label"
+import { cn } from "../../src/utils/cn"
+
+// Logo Component
+function Logo({ className }: { className?: string }) {
+  return (
+    <span className={className}>
+      <span className="text-purple-500">daily</span>
+      <span className="text-orange-500">X</span>
+    </span>
+  )
+}
+
+// Progress Steps Component
+interface StepIndicatorProps {
+  currentStep: number
+  totalSteps: number
+  labels: string[]
+}
+
+function StepIndicator({ currentStep, totalSteps, labels }: StepIndicatorProps) {
+  return (
+    <div className="flex items-center justify-center gap-2">
+      {Array.from({ length: totalSteps }).map((_, index) => (
+        <React.Fragment key={index}>
+          <div className="flex flex-col items-center gap-1">
+            <div
+              className={cn(
+                "w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-colors",
+                index < currentStep
+                  ? "bg-purple-500 text-white"
+                  : index === currentStep
+                  ? "bg-purple-500 text-white ring-4 ring-purple-500/20"
+                  : "bg-zinc-800 text-zinc-500"
+              )}
+            >
+              {index < currentStep ? (
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7"/>
+                </svg>
+              ) : (
+                index + 1
+              )}
+            </div>
+            <span className={cn(
+              "text-xs",
+              index <= currentStep ? "text-zinc-300" : "text-zinc-500"
+            )}>
+              {labels[index]}
+            </span>
+          </div>
+          {index < totalSteps - 1 && (
+            <div
+              className={cn(
+                "w-16 h-0.5 mb-5",
+                index < currentStep ? "bg-purple-500" : "bg-zinc-800"
+              )}
+            />
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}
+
+// Option Card Component
+interface OptionCardProps {
+  icon: React.ReactNode
+  title: string
+  description: string
+  selected?: boolean
+  onClick?: () => void
+}
+
+function OptionCard({ icon, title, description, selected, onClick }: OptionCardProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "w-full p-4 rounded-lg border text-left transition-all",
+        selected
+          ? "border-purple-500 bg-purple-500/10"
+          : "border-zinc-800 hover:border-zinc-700 hover:bg-zinc-800/50"
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <div className={cn(
+          "w-10 h-10 rounded-lg flex items-center justify-center shrink-0",
+          selected ? "bg-purple-500/20 text-purple-400" : "bg-zinc-800 text-zinc-400"
+        )}>
+          {icon}
+        </div>
+        <div>
+          <p className="font-medium">{title}</p>
+          <p className="text-sm text-zinc-500 mt-0.5">{description}</p>
+        </div>
+        <div className={cn(
+          "w-5 h-5 rounded-full border-2 ml-auto shrink-0 flex items-center justify-center",
+          selected ? "border-purple-500 bg-purple-500" : "border-zinc-700"
+        )}>
+          {selected && (
+            <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7"/>
+            </svg>
+          )}
+        </div>
+      </div>
+    </button>
+  )
+}
+
+// Team Member Input
+interface TeamMemberInputProps {
+  value: string
+  onChange: (value: string) => void
+  onRemove: () => void
+}
+
+function TeamMemberInput({ value, onChange, onRemove }: TeamMemberInputProps) {
+  return (
+    <div className="flex gap-2">
+      <Input
+        type="email"
+        placeholder="colleague@company.com"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+      <Button variant="ghost" size="icon" onClick={onRemove}>
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+      </Button>
+    </div>
+  )
+}
+
+// Icons
+const Icons = {
+  user: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+    </svg>
+  ),
+  users: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
+    </svg>
+  ),
+  briefcase: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+    </svg>
+  ),
+  rocket: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
+    </svg>
+  ),
+}
+
+type UsePurpose = "personal" | "team" | "client"
+
+// Main Onboarding Page Component
+export function OnboardingPage() {
+  const [currentStep, setCurrentStep] = React.useState(0)
+  const [isLoading, setIsLoading] = React.useState(false)
+
+  // Step 1: Workspace
+  const [workspaceName, setWorkspaceName] = React.useState("")
+  const [usePurpose, setUsePurpose] = React.useState<UsePurpose | null>(null)
+
+  // Step 2: Team
+  const [teamMembers, setTeamMembers] = React.useState([""])
+
+  const stepLabels = ["Workspace", "Team", "Ready"]
+
+  const handleNext = async () => {
+    if (currentStep === 2) {
+      setIsLoading(true)
+      await new Promise((resolve) => setTimeout(resolve, 1500))
+      setIsLoading(false)
+      // Redirect to dashboard
+      return
+    }
+    setCurrentStep((prev) => Math.min(prev + 1, 2))
+  }
+
+  const handleBack = () => {
+    setCurrentStep((prev) => Math.max(prev - 1, 0))
+  }
+
+  const handleSkip = () => {
+    setCurrentStep((prev) => Math.min(prev + 1, 2))
+  }
+
+  const addTeamMember = () => {
+    setTeamMembers([...teamMembers, ""])
+  }
+
+  const updateTeamMember = (index: number, value: string) => {
+    const updated = [...teamMembers]
+    updated[index] = value
+    setTeamMembers(updated)
+  }
+
+  const removeTeamMember = (index: number) => {
+    if (teamMembers.length > 1) {
+      setTeamMembers(teamMembers.filter((_, i) => i !== index))
+    }
+  }
+
+  const canProceed = () => {
+    if (currentStep === 0) {
+      return workspaceName.trim().length > 0 && usePurpose !== null
+    }
+    return true
+  }
+
+  return (
+    <div className="min-h-screen bg-[#0F0F14] text-white flex items-center justify-center p-4">
+      <div className="w-full max-w-[520px]">
+        {/* Logo */}
+        <div className="text-center mb-8">
+          <Logo className="text-3xl font-bold" />
+        </div>
+
+        {/* Progress */}
+        <div className="mb-8">
+          <StepIndicator
+            currentStep={currentStep}
+            totalSteps={3}
+            labels={stepLabels}
+          />
+        </div>
+
+        {/* Step Content */}
+        <Card>
+          <CardHeader className="text-center">
+            {currentStep === 0 && (
+              <>
+                <CardTitle className="text-xl">Let's set up your workspace</CardTitle>
+                <CardDescription>
+                  Create a workspace to organize your projects and collaborate with your team.
+                </CardDescription>
+              </>
+            )}
+            {currentStep === 1 && (
+              <>
+                <CardTitle className="text-xl">Invite your team</CardTitle>
+                <CardDescription>
+                  Collaboration is better together. Invite teammates to join your workspace.
+                </CardDescription>
+              </>
+            )}
+            {currentStep === 2 && (
+              <>
+                <CardTitle className="text-xl">You're all set!</CardTitle>
+                <CardDescription>
+                  Your workspace is ready. Start exploring Daily X.
+                </CardDescription>
+              </>
+            )}
+          </CardHeader>
+          <CardContent>
+            {/* Step 0: Workspace Setup */}
+            {currentStep === 0 && (
+              <div className="space-y-6">
+                <div className="space-y-2">
+                  <Label htmlFor="workspace">Workspace name</Label>
+                  <Input
+                    id="workspace"
+                    placeholder="My Company"
+                    value={workspaceName}
+                    onChange={(e) => setWorkspaceName(e.target.value)}
+                  />
+                </div>
+
+                <div className="space-y-3">
+                  <Label>What will you use Daily for?</Label>
+                  <OptionCard
+                    icon={<Icons.user className="w-5 h-5" />}
+                    title="Personal projects"
+                    description="Organize my own documents and workflows"
+                    selected={usePurpose === "personal"}
+                    onClick={() => setUsePurpose("personal")}
+                  />
+                  <OptionCard
+                    icon={<Icons.users className="w-5 h-5" />}
+                    title="Team collaboration"
+                    description="Work with my team on shared projects"
+                    selected={usePurpose === "team"}
+                    onClick={() => setUsePurpose("team")}
+                  />
+                  <OptionCard
+                    icon={<Icons.briefcase className="w-5 h-5" />}
+                    title="Client work"
+                    description="Manage projects for external clients"
+                    selected={usePurpose === "client"}
+                    onClick={() => setUsePurpose("client")}
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Step 1: Team Invites */}
+            {currentStep === 1 && (
+              <div className="space-y-4">
+                <div className="space-y-3">
+                  {teamMembers.map((member, index) => (
+                    <TeamMemberInput
+                      key={index}
+                      value={member}
+                      onChange={(value) => updateTeamMember(index, value)}
+                      onRemove={() => removeTeamMember(index)}
+                    />
+                  ))}
+                </div>
+                <Button variant="outline" size="sm" onClick={addTeamMember}>
+                  <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4"/>
+                  </svg>
+                  Add another
+                </Button>
+              </div>
+            )}
+
+            {/* Step 2: Complete */}
+            {currentStep === 2 && (
+              <div className="text-center py-6">
+                <div className="w-20 h-20 rounded-full bg-green-500/20 flex items-center justify-center mx-auto mb-4">
+                  <svg className="w-10 h-10 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7"/>
+                  </svg>
+                </div>
+                <div className="space-y-2 mb-6">
+                  <p className="text-zinc-300">
+                    <span className="font-semibold text-white">{workspaceName}</span> is ready to go.
+                  </p>
+                  {teamMembers.filter(m => m.trim()).length > 0 && (
+                    <p className="text-sm text-zinc-500">
+                      {teamMembers.filter(m => m.trim()).length} team member{teamMembers.filter(m => m.trim()).length > 1 ? "s" : ""} invited.
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Navigation */}
+            <div className="flex items-center justify-between mt-8 pt-4 border-t border-zinc-800">
+              {currentStep > 0 ? (
+                <Button variant="ghost" onClick={handleBack}>
+                  Back
+                </Button>
+              ) : (
+                <div />
+              )}
+              <div className="flex items-center gap-3">
+                {currentStep === 1 && (
+                  <Button variant="ghost" onClick={handleSkip}>
+                    Skip for now
+                  </Button>
+                )}
+                <Button
+                  onClick={handleNext}
+                  disabled={!canProceed()}
+                  loading={isLoading}
+                >
+                  {currentStep === 2 ? "Go to Dashboard" : "Continue"}
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+export default OnboardingPage