@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/login/Login.stories.tsx

@@ -0,0 +1,443 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Login } from './index'
+import type { LoginConfig, LoginFormData } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof Login> = {
+  title: 'Blocks/Login',
+  component: Login,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A login form component with email/password authentication, SSO options (Google, Microsoft, Apple, GitHub, etc.), remember me, forgot password, and customizable branding.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showSocialLogin: {
+      control: 'boolean',
+      description: 'Show social login buttons (legacy mode)',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Login>
+
+export const Default: Story = {
+  render: () => (
+    <div className="min-h-screen bg-muted/30 flex items-center justify-center">
+      <Login
+        onSubmit={(data) => console.log('Login:', data)}
+        onForgotPassword={() => console.log('Forgot password')}
+        onSignUp={() => console.log('Sign up')}
+      />
+    </div>
+  ),
+}
+
+export const WithSocialLogin: Story = {
+  render: () => (
+    <div className="min-h-screen bg-muted/30 flex items-center justify-center">
+      <Login
+        showSocialLogin
+        onSubmit={(data) => console.log('Login:', data)}
+        onForgotPassword={() => console.log('Forgot password')}
+        onSignUp={() => console.log('Sign up')}
+        onSSOGoogle={() => console.log('Google SSO')}
+        onSSOGithub={() => console.log('GitHub SSO')}
+      />
+    </div>
+  ),
+}
+
+export const WithConfig: Story = {
+  render: () => {
+    const config: LoginConfig = {
+      color_json: {
+        primary: '#6366f1',
+        secondary: '#ffffff',
+        accent: '#818cf8',
+      },
+      theme_json: {
+        name: 'MyApp',
+        dark_mode: false,
+      },
+      assets: {
+        theme_logo_light: 'https://placehold.co/120x40/6366f1/white?text=MyApp',
+        theme_logo_dark: 'https://placehold.co/120x40/white/6366f1?text=MyApp',
+      },
+      waka_powered: true,
+      lang_code: 'fr_FR',
+      signup_options: {
+        allow_login: true,
+        allow_sso_google: true,
+        allow_sso_github: true,
+        allow_sso_microsoft: false,
+        allow_sso_apple: false,
+        allow_sso_linkedIn: false,
+        allow_sso_facebook: false,
+        allow_sso_instagram: false,
+        allow_sso_france_connect: false,
+        allow_mfa: false,
+      },
+    }
+
+    return (
+      <div className="min-h-screen bg-muted/30 flex items-center justify-center">
+        <Login
+          config={config}
+          onSubmit={(data) => console.log('Login:', data)}
+          onForgotPassword={() => console.log('Forgot password')}
+          onSignUp={() => console.log('Sign up')}
+          onSSOGoogle={() => console.log('Google SSO')}
+          onSSOGithub={() => console.log('GitHub SSO')}
+        />
+      </div>
+    )
+  },
+}
+
+export const AllSSOProviders: Story = {
+  render: () => {
+    const config: LoginConfig = {
+      signup_options: {
+        allow_login: true,
+        allow_sso_google: true,
+        allow_sso_github: true,
+        allow_sso_microsoft: true,
+        allow_sso_apple: true,
+        allow_sso_linkedIn: true,
+        allow_sso_facebook: true,
+        allow_sso_instagram: false,
+        allow_sso_france_connect: false,
+        allow_mfa: false,
+      },
+    }
+
+    return (
+      <div className="min-h-screen bg-muted/30 flex items-center justify-center">
+        <Login
+          config={config}
+          onSubmit={(data) => console.log('Login:', data)}
+          onSSOGoogle={() => console.log('Google')}
+          onSSOGithub={() => console.log('GitHub')}
+          onSSOMicrosoft={() => console.log('Microsoft')}
+          onSSOApple={() => console.log('Apple')}
+          onSSOLinkedIn={() => console.log('LinkedIn')}
+          onSSOFacebook={() => console.log('Facebook')}
+        />
+      </div>
+    )
+  },
+}
+
+export const SSOOnly: Story = {
+  render: () => {
+    const config: LoginConfig = {
+      signup_options: {
+        allow_login: false,
+        allow_sso_google: true,
+        allow_sso_microsoft: true,
+        allow_sso_github: false,
+        allow_sso_apple: false,
+        allow_sso_linkedIn: false,
+        allow_sso_facebook: false,
+        allow_sso_instagram: false,
+        allow_sso_france_connect: false,
+        allow_mfa: false,
+      },
+    }
+
+    return (
+      <div className="min-h-screen bg-muted/30 flex items-center justify-center">
+        <Login
+          config={config}
+          onSSOGoogle={() => console.log('Google')}
+          onSSOMicrosoft={() => console.log('Microsoft')}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithCustomLogo: Story = {
+  render: () => {
+    const config: LoginConfig = {
+      theme_json: {
+        name: 'Acme Inc',
+        dark_mode: false,
+      },
+      assets: {
+        theme_logo_light: 'https://placehold.co/160x50/1f2937/white?text=ACME+INC',
+        theme_logo_dark: 'https://placehold.co/160x50/f3f4f6/1f2937?text=ACME+INC',
+      },
+      signup_options: {
+        allow_login: true,
+        allow_sso_google: true,
+        allow_sso_github: false,
+        allow_sso_microsoft: false,
+        allow_sso_apple: false,
+        allow_sso_linkedIn: false,
+        allow_sso_facebook: false,
+        allow_sso_instagram: false,
+        allow_sso_france_connect: false,
+        allow_mfa: false,
+      },
+    }
+
+    return (
+      <div className="min-h-screen bg-muted/30 flex items-center justify-center">
+        <Login
+          config={config}
+          onSubmit={(data) => console.log('Login:', data)}
+          onForgotPassword={() => console.log('Forgot password')}
+          onSignUp={() => console.log('Sign up')}
+          onSSOGoogle={() => console.log('Google')}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithCustomColors: Story = {
+  render: () => {
+    const config: LoginConfig = {
+      color_json: {
+        primary: '#10b981',
+        secondary: '#ffffff',
+        accent: '#34d399',
+      },
+      theme_json: {
+        name: 'GreenApp',
+        dark_mode: false,
+      },
+      signup_options: {
+        allow_login: true,
+        allow_sso_google: false,
+        allow_sso_github: false,
+        allow_sso_microsoft: false,
+        allow_sso_apple: false,
+        allow_sso_linkedIn: false,
+        allow_sso_facebook: false,
+        allow_sso_instagram: false,
+        allow_sso_france_connect: false,
+        allow_mfa: false,
+      },
+    }
+
+    return (
+      <div className="min-h-screen bg-emerald-50 flex items-center justify-center">
+        <Login
+          config={config}
+          onSubmit={(data) => console.log('Login:', data)}
+          onForgotPassword={() => console.log('Forgot password')}
+          onSignUp={() => console.log('Sign up')}
+        />
+      </div>
+    )
+  },
+}
+
+export const DarkMode: Story = {
+  render: () => {
+    const config: LoginConfig = {
+      theme_json: {
+        name: 'DarkApp',
+        dark_mode: true,
+      },
+      assets: {
+        theme_logo_light: 'https://placehold.co/120x40/1f2937/white?text=DARK',
+        theme_logo_dark: 'https://placehold.co/120x40/f3f4f6/1f2937?text=DARK',
+      },
+      signup_options: {
+        allow_login: true,
+        allow_sso_google: true,
+        allow_sso_github: true,
+        allow_sso_microsoft: false,
+        allow_sso_apple: false,
+        allow_sso_linkedIn: false,
+        allow_sso_facebook: false,
+        allow_sso_instagram: false,
+        allow_sso_france_connect: false,
+        allow_mfa: false,
+      },
+    }
+
+    return (
+      <div className="min-h-screen bg-gray-950 flex items-center justify-center dark">
+        <Login
+          config={config}
+          onSubmit={(data) => console.log('Login:', data)}
+          onForgotPassword={() => console.log('Forgot password')}
+          onSignUp={() => console.log('Sign up')}
+          onSSOGoogle={() => console.log('Google')}
+          onSSOGithub={() => console.log('GitHub')}
+        />
+      </div>
+    )
+  },
+}
+
+export const NoSignUp: Story = {
+  render: () => (
+    <div className="min-h-screen bg-muted/30 flex items-center justify-center">
+      <Login
+        onSubmit={(data) => console.log('Login:', data)}
+        onForgotPassword={() => console.log('Forgot password')}
+      />
+    </div>
+  ),
+}
+
+export const NoForgotPassword: Story = {
+  render: () => (
+    <div className="min-h-screen bg-muted/30 flex items-center justify-center">
+      <Login
+        onSubmit={(data) => console.log('Login:', data)}
+        onSignUp={() => console.log('Sign up')}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [isLoading, setIsLoading] = React.useState(false)
+    const [error, setError] = React.useState<string | null>(null)
+
+    const handleSubmit = async (data: LoginFormData) => {
+      setIsLoading(true)
+      setError(null)
+
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 1500))
+
+      if (data.email === 'test@example.com' && data.password === 'password') {
+        alert('Login successful!')
+      } else {
+        setError('Invalid email or password')
+      }
+
+      setIsLoading(false)
+    }
+
+    return (
+      <div className="min-h-screen bg-muted/30 flex items-center justify-center">
+        <div className="space-y-4">
+          {error && (
+            <div className="bg-destructive/10 text-destructive px-4 py-2 rounded-md text-sm text-center">
+              {error}
+            </div>
+          )}
+          <Login
+            onSubmit={handleSubmit}
+            onForgotPassword={() => alert('Password reset email sent!')}
+            onSignUp={() => alert('Redirecting to signup...')}
+          />
+          <p className="text-xs text-muted-foreground text-center">
+            Test: test@example.com / password
+          </p>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithWakaPowered: Story = {
+  render: () => {
+    const config: LoginConfig = {
+      waka_powered: true,
+      signup_options: {
+        allow_login: true,
+        allow_sso_google: false,
+        allow_sso_github: false,
+        allow_sso_microsoft: false,
+        allow_sso_apple: false,
+        allow_sso_linkedIn: false,
+        allow_sso_facebook: false,
+        allow_sso_instagram: false,
+        allow_sso_france_connect: false,
+        allow_mfa: false,
+      },
+    }
+
+    return (
+      <div className="min-h-screen bg-muted/30 flex items-center justify-center">
+        <Login
+          config={config}
+          onSubmit={(data) => console.log('Login:', data)}
+        />
+      </div>
+    )
+  },
+}
+
+export const FranceConnect: Story = {
+  render: () => {
+    const config: LoginConfig = {
+      signup_options: {
+        allow_login: true,
+        allow_sso_google: false,
+        allow_sso_github: false,
+        allow_sso_microsoft: false,
+        allow_sso_apple: false,
+        allow_sso_linkedIn: false,
+        allow_sso_facebook: false,
+        allow_sso_instagram: false,
+        allow_sso_france_connect: true,
+        allow_mfa: false,
+      },
+    }
+
+    return (
+      <div className="min-h-screen bg-muted/30 flex items-center justify-center">
+        <Login
+          config={config}
+          onSubmit={(data) => console.log('Login:', data)}
+          onSSOFranceConnect={() => console.log('France Connect')}
+        />
+      </div>
+    )
+  },
+}
+
+export const SplitLayout: Story = {
+  render: () => (
+    <div className="min-h-screen flex">
+      <div className="flex-1 bg-gradient-to-br from-primary/20 via-primary/10 to-background flex items-center justify-center">
+        <div className="max-w-md text-center p-8">
+          <h1 className="text-4xl font-bold mb-4">Welcome Back</h1>
+          <p className="text-muted-foreground">
+            Sign in to access your dashboard and manage your projects.
+          </p>
+          <div className="mt-8 grid grid-cols-3 gap-4 text-center">
+            {[
+              { value: '10K+', label: 'Users' },
+              { value: '99.9%', label: 'Uptime' },
+              { value: '24/7', label: 'Support' },
+            ].map((stat) => (
+              <div key={stat.label}>
+                <div className="text-2xl font-bold">{stat.value}</div>
+                <div className="text-xs text-muted-foreground">{stat.label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="flex-1 flex items-center justify-center">
+        <Login
+          showSocialLogin
+          onSubmit={(data) => console.log('Login:', data)}
+          onForgotPassword={() => console.log('Forgot password')}
+          onSignUp={() => console.log('Sign up')}
+          onSSOGoogle={() => console.log('Google')}
+          onSSOGithub={() => console.log('GitHub')}
+        />
+      </div>
+    </div>
+  ),
+}