@beyondcorp/beyond-ui 1.3.8 → 1.3.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Auth/AuthShowcase.js +5 -5
- package/dist/components/Auth/AuthShowcase.js.map +1 -1
- package/dist/components/Auth/LoginForm.d.ts +4 -1
- package/dist/components/Auth/LoginForm.example.js +1 -1
- package/dist/components/Auth/LoginForm.example.js.map +1 -1
- package/dist/components/Auth/LoginForm.js +6 -11
- package/dist/components/Auth/LoginForm.js.map +1 -1
- package/dist/components/Auth/SignupForm.d.ts +4 -1
- package/dist/components/Auth/SignupForm.example.js +1 -1
- package/dist/components/Auth/SignupForm.example.js.map +1 -1
- package/dist/components/Auth/SignupForm.js +6 -11
- package/dist/components/Auth/SignupForm.js.map +1 -1
- package/dist/components/ComponentShowcase/ComponentShowcase.js +4 -3
- package/dist/components/ComponentShowcase/ComponentShowcase.js.map +1 -1
- package/package.json +1 -1
|
@@ -29,8 +29,8 @@ const codeExamples = {
|
|
|
29
29
|
function LoginPage() {
|
|
30
30
|
return (
|
|
31
31
|
<LoginForm
|
|
32
|
-
|
|
33
|
-
console.log('Login successful!');
|
|
32
|
+
onSubmit={async (data) => {
|
|
33
|
+
console.log('Login successful!', data);
|
|
34
34
|
// Redirect to dashboard
|
|
35
35
|
}}
|
|
36
36
|
onForgotPassword={() => {
|
|
@@ -44,8 +44,8 @@ function LoginPage() {
|
|
|
44
44
|
function SignupPage() {
|
|
45
45
|
return (
|
|
46
46
|
<SignupForm
|
|
47
|
-
|
|
48
|
-
console.log('Signup successful!');
|
|
47
|
+
onSubmit={async (data) => {
|
|
48
|
+
console.log('Signup successful!', data);
|
|
49
49
|
// Redirect to dashboard
|
|
50
50
|
}}
|
|
51
51
|
/>
|
|
@@ -98,7 +98,7 @@ const AuthShowcase = () => {
|
|
|
98
98
|
showToast.error('Failed to copy code');
|
|
99
99
|
}
|
|
100
100
|
};
|
|
101
|
-
return (jsx(AuthProvider, { children: jsxs("div", { className: "space-y-6", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { children: [jsx("h1", { className: "text-2xl font-bold text-gray-900", children: "Authentication Components" }), jsx("p", { className: "text-gray-600 mt-1", children: "Comprehensive authentication system with forms, validation, and protection" })] }), jsxs(Badge, { variant: "outline", className: "flex items-center", children: [jsx(Shield, { className: "h-4 w-4 mr-1" }), "Secure"] })] }), jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [jsxs(TabsList, { children: [jsxs(TabsTrigger, { value: "demo", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Demo"] }), jsxs(TabsTrigger, { value: "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code Examples"] }), jsxs(TabsTrigger, { value: "features", children: [jsx(Settings, { className: "h-4 w-4 mr-2" }), "Features"] })] }), jsx(TabsContent, { value: "demo", className: "mt-6", children: jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [jsx("div", { children: jsxs(Card, { children: [jsx(CardHeader, { children: jsxs("div", { className: "flex items-center justify-between", children: [jsx(CardTitle, { children: "Authentication Forms" }), jsxs("div", { className: "flex bg-gray-100 rounded-lg p-1", children: [jsxs(Button, { variant: authMode === 'login' ? 'primary' : 'ghost', size: "sm", onClick: () => setAuthMode('login'), children: [jsx(Lock, { className: "h-4 w-4 mr-1" }), "Login"] }), jsxs(Button, { variant: authMode === 'signup' ? 'primary' : 'ghost', size: "sm", onClick: () => setAuthMode('signup'), children: [jsx(UserPlus, { className: "h-4 w-4 mr-1" }), "Signup"] })] })] }) }), jsx(CardContent, { children: authMode === 'login' ? (jsx(LoginForm, {
|
|
101
|
+
return (jsx(AuthProvider, { children: jsxs("div", { className: "space-y-6", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { children: [jsx("h1", { className: "text-2xl font-bold text-gray-900", children: "Authentication Components" }), jsx("p", { className: "text-gray-600 mt-1", children: "Comprehensive authentication system with forms, validation, and protection" })] }), jsxs(Badge, { variant: "outline", className: "flex items-center", children: [jsx(Shield, { className: "h-4 w-4 mr-1" }), "Secure"] })] }), jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [jsxs(TabsList, { children: [jsxs(TabsTrigger, { value: "demo", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Demo"] }), jsxs(TabsTrigger, { value: "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code Examples"] }), jsxs(TabsTrigger, { value: "features", children: [jsx(Settings, { className: "h-4 w-4 mr-2" }), "Features"] })] }), jsx(TabsContent, { value: "demo", className: "mt-6", children: jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [jsx("div", { children: jsxs(Card, { children: [jsx(CardHeader, { children: jsxs("div", { className: "flex items-center justify-between", children: [jsx(CardTitle, { children: "Authentication Forms" }), jsxs("div", { className: "flex bg-gray-100 rounded-lg p-1", children: [jsxs(Button, { variant: authMode === 'login' ? 'primary' : 'ghost', size: "sm", onClick: () => setAuthMode('login'), children: [jsx(Lock, { className: "h-4 w-4 mr-1" }), "Login"] }), jsxs(Button, { variant: authMode === 'signup' ? 'primary' : 'ghost', size: "sm", onClick: () => setAuthMode('signup'), children: [jsx(UserPlus, { className: "h-4 w-4 mr-1" }), "Signup"] })] })] }) }), jsx(CardContent, { children: authMode === 'login' ? (jsx(LoginForm, { onSubmit: async () => { showToast.success('Login successful!'); }, onForgotPassword: () => showToast.info('Forgot password clicked'), onSignupClick: () => setAuthMode('signup') })) : (jsx(SignupForm, { onSubmit: async () => { showToast.success('Signup successful!'); }, onLoginClick: () => setAuthMode('login') })) })] }) }), jsx("div", { children: jsx(AuthStatus, {}) })] }) }), jsx(TabsContent, { value: "code", className: "mt-6", children: jsx("div", { className: "space-y-6", children: Object.entries(codeExamples).map(([key, code]) => (jsxs(Card, { children: [jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [jsxs(CardTitle, { className: "capitalize", children: [key, " Example"] }), jsx(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(code), children: "Copy Code" })] }), jsx(CardContent, { children: jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm", children: jsx("code", { children: code }) }) })] }, key))) }) }), jsx(TabsContent, { value: "features", className: "mt-6", children: jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "LoginForm Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsx("li", { children: "\u2022 Email/password validation with Zod schema" }), jsx("li", { children: "\u2022 Password visibility toggle" }), jsx("li", { children: "\u2022 \"Remember me\" functionality" }), jsx("li", { children: "\u2022 Loading states and error handling" }), jsx("li", { children: "\u2022 ARIA labels for accessibility" }), jsx("li", { children: "\u2022 Keyboard navigation support" }), jsx("li", { children: "\u2022 Demo credentials provided" })] }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "SignupForm Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsx("li", { children: "\u2022 Real-time form validation" }), jsx("li", { children: "\u2022 Password strength indicator" }), jsx("li", { children: "\u2022 Password confirmation matching" }), jsx("li", { children: "\u2022 Terms of service acceptance" }), jsx("li", { children: "\u2022 Email uniqueness validation" }), jsx("li", { children: "\u2022 Responsive design" }), jsx("li", { children: "\u2022 Error boundary protection" })] }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "AuthProvider Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsx("li", { children: "\u2022 Context-based state management" }), jsx("li", { children: "\u2022 Token persistence with cookies" }), jsx("li", { children: "\u2022 Automatic token refresh" }), jsx("li", { children: "\u2022 Session management" }), jsx("li", { children: "\u2022 Error handling and recovery" }), jsx("li", { children: "\u2022 TypeScript support" }), jsx("li", { children: "\u2022 Secure cookie configuration" })] }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "ProtectedRoute Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsx("li", { children: "\u2022 Authentication checking" }), jsx("li", { children: "\u2022 Role-based access control" }), jsx("li", { children: "\u2022 Automatic redirects" }), jsx("li", { children: "\u2022 Loading states" }), jsx("li", { children: "\u2022 Custom fallback components" }), jsx("li", { children: "\u2022 Location state preservation" }), jsx("li", { children: "\u2022 HOC pattern support" })] }) })] })] }) })] })] }) }));
|
|
102
102
|
};
|
|
103
103
|
|
|
104
104
|
export { AuthShowcase };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AuthShowcase.js","sources":["../../../src/components/Auth/AuthShowcase.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Shield, Lock, UserPlus, Eye, Code, Settings } from 'lucide-react';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Button } from '../Button';\nimport { Badge } from '../Badge';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs';\nimport { LoginForm } from './LoginForm';\nimport { SignupForm } from './SignupForm';\nimport { AuthProvider, useAuth } from '../../contexts/AuthContext';\nimport { showToast } from '../Toast';\n\n/**\n * Component to display current authentication state\n */\nconst AuthStatus: React.FC = () => {\n const { user, isAuthenticated, logout } = useAuth();\n\n if (!isAuthenticated || !user) {\n return (\n <Card>\n <CardContent className=\"p-6 text-center\">\n <Shield className=\"h-12 w-12 text-gray-400 mx-auto mb-4\" />\n <h3 className=\"text-lg font-semibold text-gray-900 mb-2\">\n Not Authenticated\n </h3>\n <p className=\"text-gray-600\">\n Please log in to see your authentication status\n </p>\n </CardContent>\n </Card>\n );\n }\n\n return (\n <Card>\n <CardHeader>\n <CardTitle className=\"flex items-center\">\n <Shield className=\"h-5 w-5 text-success-600 mr-2\" />\n Authentication Status\n </CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">Status:</span>\n <Badge variant=\"success\">Authenticated</Badge>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">User:</span>\n <span className=\"text-sm text-gray-900\">{user.name}</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">Email:</span>\n <span className=\"text-sm text-gray-900\">{user.email}</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">Role:</span>\n <Badge variant=\"outline\">{user.role}</Badge>\n </div>\n <div className=\"pt-4 border-t\">\n <Button\n variant=\"outline\"\n onClick={logout}\n className=\"w-full\"\n >\n Sign Out\n </Button>\n </div>\n </CardContent>\n </Card>\n );\n};\n\n/**\n * Code examples for the authentication components\n */\nconst codeExamples = {\n login: `import { LoginForm } from '@/components/Auth';\n\nfunction LoginPage() {\n return (\n <LoginForm\n onSuccess={() => {\n console.log('Login successful!');\n // Redirect to dashboard\n }}\n onForgotPassword={() => {\n // Handle forgot password\n }}\n />\n );\n}`,\n signup: `import { SignupForm } from '@/components/Auth';\n\nfunction SignupPage() {\n return (\n <SignupForm\n onSuccess={() => {\n console.log('Signup successful!');\n // Redirect to dashboard\n }}\n />\n );\n}`,\n provider: `import { AuthProvider } from '@/contexts/AuthContext';\n\nfunction App() {\n return (\n <AuthProvider>\n <Router>\n <Routes>\n <Route path=\"/login\" element={<LoginPage />} />\n <Route path=\"/signup\" element={<SignupPage />} />\n <Route\n path=\"/dashboard\"\n element={\n <ProtectedRoute>\n <Dashboard />\n </ProtectedRoute>\n }\n />\n </Routes>\n </Router>\n </AuthProvider>\n );\n}`,\n protected: `import { ProtectedRoute } from '@/components/Auth';\n\nfunction AdminPanel() {\n return (\n <ProtectedRoute requiredRole=\"admin\">\n <div>Admin-only content</div>\n </ProtectedRoute>\n );\n}`,\n};\n\n/**\n * AuthShowcase component demonstrating all authentication features\n */\nexport const AuthShowcase: React.FC = () => {\n const [activeTab, setActiveTab] = useState('demo');\n const [authMode, setAuthMode] = useState<'login' | 'signup'>('login');\n\n const copyToClipboard = async (code: string) => {\n try {\n await navigator.clipboard.writeText(code);\n showToast.success('Code copied to clipboard!');\n } catch (err) {\n showToast.error('Failed to copy code');\n }\n };\n\n return (\n <AuthProvider>\n <div className=\"space-y-6\">\n {/* Header */}\n <div className=\"flex items-center justify-between\">\n <div>\n <h1 className=\"text-2xl font-bold text-gray-900\">Authentication Components</h1>\n <p className=\"text-gray-600 mt-1\">\n Comprehensive authentication system with forms, validation, and protection\n </p>\n </div>\n <Badge variant=\"outline\" className=\"flex items-center\">\n <Shield className=\"h-4 w-4 mr-1\" />\n Secure\n </Badge>\n </div>\n\n {/* Tabs */}\n <Tabs value={activeTab} onValueChange={setActiveTab}>\n <TabsList>\n <TabsTrigger value=\"demo\">\n <Eye className=\"h-4 w-4 mr-2\" />\n Demo\n </TabsTrigger>\n <TabsTrigger value=\"code\">\n <Code className=\"h-4 w-4 mr-2\" />\n Code Examples\n </TabsTrigger>\n <TabsTrigger value=\"features\">\n <Settings className=\"h-4 w-4 mr-2\" />\n Features\n </TabsTrigger>\n </TabsList>\n\n <TabsContent value=\"demo\" className=\"mt-6\">\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n {/* Authentication Forms */}\n <div>\n <Card>\n <CardHeader>\n <div className=\"flex items-center justify-between\">\n <CardTitle>Authentication Forms</CardTitle>\n <div className=\"flex bg-gray-100 rounded-lg p-1\">\n <Button\n variant={authMode === 'login' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setAuthMode('login')}\n >\n <Lock className=\"h-4 w-4 mr-1\" />\n Login\n </Button>\n <Button\n variant={authMode === 'signup' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setAuthMode('signup')}\n >\n <UserPlus className=\"h-4 w-4 mr-1\" />\n Signup\n </Button>\n </div>\n </div>\n </CardHeader>\n <CardContent>\n {authMode === 'login' ? (\n <LoginForm\n onSuccess={() => showToast.success('Login successful!')}\n onForgotPassword={() => showToast.info('Forgot password clicked')}\n onSignupClick={() => setAuthMode('signup')}\n />\n ) : (\n <SignupForm\n onSuccess={() => showToast.success('Signup successful!')}\n onLoginClick={() => setAuthMode('login')}\n />\n )}\n </CardContent>\n </Card>\n </div>\n\n {/* Authentication Status */}\n <div>\n <AuthStatus />\n </div>\n </div>\n </TabsContent>\n\n <TabsContent value=\"code\" className=\"mt-6\">\n <div className=\"space-y-6\">\n {Object.entries(codeExamples).map(([key, code]) => (\n <Card key={key}>\n <CardHeader className=\"flex flex-row items-center justify-between\">\n <CardTitle className=\"capitalize\">{key} Example</CardTitle>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => copyToClipboard(code)}\n >\n Copy Code\n </Button>\n </CardHeader>\n <CardContent>\n <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm\">\n <code>{code}</code>\n </pre>\n </CardContent>\n </Card>\n ))}\n </div>\n </TabsContent>\n\n <TabsContent value=\"features\" className=\"mt-6\">\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <Card>\n <CardHeader>\n <CardTitle>LoginForm Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Email/password validation with Zod schema</li>\n <li>• Password visibility toggle</li>\n <li>• \"Remember me\" functionality</li>\n <li>• Loading states and error handling</li>\n <li>• ARIA labels for accessibility</li>\n <li>• Keyboard navigation support</li>\n <li>• Demo credentials provided</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>SignupForm Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Real-time form validation</li>\n <li>• Password strength indicator</li>\n <li>• Password confirmation matching</li>\n <li>• Terms of service acceptance</li>\n <li>• Email uniqueness validation</li>\n <li>• Responsive design</li>\n <li>• Error boundary protection</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>AuthProvider Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Context-based state management</li>\n <li>• Token persistence with cookies</li>\n <li>• Automatic token refresh</li>\n <li>• Session management</li>\n <li>• Error handling and recovery</li>\n <li>• TypeScript support</li>\n <li>• Secure cookie configuration</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>ProtectedRoute Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Authentication checking</li>\n <li>• Role-based access control</li>\n <li>• Automatic redirects</li>\n <li>• Loading states</li>\n <li>• Custom fallback components</li>\n <li>• Location state preservation</li>\n <li>• HOC pattern support</li>\n </ul>\n </CardContent>\n </Card>\n </div>\n </TabsContent>\n </Tabs>\n </div>\n </AuthProvider>\n );\n};"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AuthShowcase.js","sources":["../../../src/components/Auth/AuthShowcase.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Shield, Lock, UserPlus, Eye, Code, Settings } from 'lucide-react';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Button } from '../Button';\nimport { Badge } from '../Badge';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs';\nimport { LoginForm } from './LoginForm';\nimport { SignupForm } from './SignupForm';\nimport { AuthProvider, useAuth } from '../../contexts/AuthContext';\nimport { showToast } from '../Toast';\n\n/**\n * Component to display current authentication state\n */\nconst AuthStatus: React.FC = () => {\n const { user, isAuthenticated, logout } = useAuth();\n\n if (!isAuthenticated || !user) {\n return (\n <Card>\n <CardContent className=\"p-6 text-center\">\n <Shield className=\"h-12 w-12 text-gray-400 mx-auto mb-4\" />\n <h3 className=\"text-lg font-semibold text-gray-900 mb-2\">\n Not Authenticated\n </h3>\n <p className=\"text-gray-600\">\n Please log in to see your authentication status\n </p>\n </CardContent>\n </Card>\n );\n }\n\n return (\n <Card>\n <CardHeader>\n <CardTitle className=\"flex items-center\">\n <Shield className=\"h-5 w-5 text-success-600 mr-2\" />\n Authentication Status\n </CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">Status:</span>\n <Badge variant=\"success\">Authenticated</Badge>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">User:</span>\n <span className=\"text-sm text-gray-900\">{user.name}</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">Email:</span>\n <span className=\"text-sm text-gray-900\">{user.email}</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium text-gray-700\">Role:</span>\n <Badge variant=\"outline\">{user.role}</Badge>\n </div>\n <div className=\"pt-4 border-t\">\n <Button\n variant=\"outline\"\n onClick={logout}\n className=\"w-full\"\n >\n Sign Out\n </Button>\n </div>\n </CardContent>\n </Card>\n );\n};\n\n/**\n * Code examples for the authentication components\n */\nconst codeExamples = {\n login: `import { LoginForm } from '@/components/Auth';\n\nfunction LoginPage() {\n return (\n <LoginForm\n onSubmit={async (data) => {\n console.log('Login successful!', data);\n // Redirect to dashboard\n }}\n onForgotPassword={() => {\n // Handle forgot password\n }}\n />\n );\n}`,\n signup: `import { SignupForm } from '@/components/Auth';\n\nfunction SignupPage() {\n return (\n <SignupForm\n onSubmit={async (data) => {\n console.log('Signup successful!', data);\n // Redirect to dashboard\n }}\n />\n );\n}`,\n provider: `import { AuthProvider } from '@/contexts/AuthContext';\n\nfunction App() {\n return (\n <AuthProvider>\n <Router>\n <Routes>\n <Route path=\"/login\" element={<LoginPage />} />\n <Route path=\"/signup\" element={<SignupPage />} />\n <Route\n path=\"/dashboard\"\n element={\n <ProtectedRoute>\n <Dashboard />\n </ProtectedRoute>\n }\n />\n </Routes>\n </Router>\n </AuthProvider>\n );\n}`,\n protected: `import { ProtectedRoute } from '@/components/Auth';\n\nfunction AdminPanel() {\n return (\n <ProtectedRoute requiredRole=\"admin\">\n <div>Admin-only content</div>\n </ProtectedRoute>\n );\n}`,\n};\n\n/**\n * AuthShowcase component demonstrating all authentication features\n */\nexport const AuthShowcase: React.FC = () => {\n const [activeTab, setActiveTab] = useState('demo');\n const [authMode, setAuthMode] = useState<'login' | 'signup'>('login');\n\n const copyToClipboard = async (code: string) => {\n try {\n await navigator.clipboard.writeText(code);\n showToast.success('Code copied to clipboard!');\n } catch (err) {\n showToast.error('Failed to copy code');\n }\n };\n\n return (\n <AuthProvider>\n <div className=\"space-y-6\">\n {/* Header */}\n <div className=\"flex items-center justify-between\">\n <div>\n <h1 className=\"text-2xl font-bold text-gray-900\">Authentication Components</h1>\n <p className=\"text-gray-600 mt-1\">\n Comprehensive authentication system with forms, validation, and protection\n </p>\n </div>\n <Badge variant=\"outline\" className=\"flex items-center\">\n <Shield className=\"h-4 w-4 mr-1\" />\n Secure\n </Badge>\n </div>\n\n {/* Tabs */}\n <Tabs value={activeTab} onValueChange={setActiveTab}>\n <TabsList>\n <TabsTrigger value=\"demo\">\n <Eye className=\"h-4 w-4 mr-2\" />\n Demo\n </TabsTrigger>\n <TabsTrigger value=\"code\">\n <Code className=\"h-4 w-4 mr-2\" />\n Code Examples\n </TabsTrigger>\n <TabsTrigger value=\"features\">\n <Settings className=\"h-4 w-4 mr-2\" />\n Features\n </TabsTrigger>\n </TabsList>\n\n <TabsContent value=\"demo\" className=\"mt-6\">\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n {/* Authentication Forms */}\n <div>\n <Card>\n <CardHeader>\n <div className=\"flex items-center justify-between\">\n <CardTitle>Authentication Forms</CardTitle>\n <div className=\"flex bg-gray-100 rounded-lg p-1\">\n <Button\n variant={authMode === 'login' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setAuthMode('login')}\n >\n <Lock className=\"h-4 w-4 mr-1\" />\n Login\n </Button>\n <Button\n variant={authMode === 'signup' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setAuthMode('signup')}\n >\n <UserPlus className=\"h-4 w-4 mr-1\" />\n Signup\n </Button>\n </div>\n </div>\n </CardHeader>\n <CardContent>\n {authMode === 'login' ? (\n <LoginForm\n onSubmit={async () => { showToast.success('Login successful!'); }}\n onForgotPassword={() => showToast.info('Forgot password clicked')}\n onSignupClick={() => setAuthMode('signup')}\n />\n ) : (\n <SignupForm\n onSubmit={async () => { showToast.success('Signup successful!'); }}\n onLoginClick={() => setAuthMode('login')}\n />\n )}\n </CardContent>\n </Card>\n </div>\n\n {/* Authentication Status */}\n <div>\n <AuthStatus />\n </div>\n </div>\n </TabsContent>\n\n <TabsContent value=\"code\" className=\"mt-6\">\n <div className=\"space-y-6\">\n {Object.entries(codeExamples).map(([key, code]) => (\n <Card key={key}>\n <CardHeader className=\"flex flex-row items-center justify-between\">\n <CardTitle className=\"capitalize\">{key} Example</CardTitle>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => copyToClipboard(code)}\n >\n Copy Code\n </Button>\n </CardHeader>\n <CardContent>\n <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm\">\n <code>{code}</code>\n </pre>\n </CardContent>\n </Card>\n ))}\n </div>\n </TabsContent>\n\n <TabsContent value=\"features\" className=\"mt-6\">\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <Card>\n <CardHeader>\n <CardTitle>LoginForm Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Email/password validation with Zod schema</li>\n <li>• Password visibility toggle</li>\n <li>• \"Remember me\" functionality</li>\n <li>• Loading states and error handling</li>\n <li>• ARIA labels for accessibility</li>\n <li>• Keyboard navigation support</li>\n <li>• Demo credentials provided</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>SignupForm Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Real-time form validation</li>\n <li>• Password strength indicator</li>\n <li>• Password confirmation matching</li>\n <li>• Terms of service acceptance</li>\n <li>• Email uniqueness validation</li>\n <li>• Responsive design</li>\n <li>• Error boundary protection</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>AuthProvider Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Context-based state management</li>\n <li>• Token persistence with cookies</li>\n <li>• Automatic token refresh</li>\n <li>• Session management</li>\n <li>• Error handling and recovery</li>\n <li>• TypeScript support</li>\n <li>• Secure cookie configuration</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>ProtectedRoute Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Authentication checking</li>\n <li>• Role-based access control</li>\n <li>• Automatic redirects</li>\n <li>• Loading states</li>\n <li>• Custom fallback components</li>\n <li>• Location state preservation</li>\n <li>• HOC pattern support</li>\n </ul>\n </CardContent>\n </Card>\n </div>\n </TabsContent>\n </Tabs>\n </div>\n </AuthProvider>\n );\n};"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { type LoginFormData } from '../../utils/validation';
|
|
2
3
|
interface LoginFormProps {
|
|
3
4
|
className?: string;
|
|
4
|
-
|
|
5
|
+
onSubmit: (data: LoginFormData) => Promise<void>;
|
|
6
|
+
isLoading?: boolean;
|
|
7
|
+
error?: string | null;
|
|
5
8
|
onForgotPassword?: () => void;
|
|
6
9
|
onSignupClick?: () => void;
|
|
7
10
|
}
|
|
@@ -3,7 +3,7 @@ import { LoginForm } from './LoginForm.js';
|
|
|
3
3
|
import { Card, CardHeader, CardTitle, CardContent } from '../Card/Card.js';
|
|
4
4
|
import { AuthProvider } from '../../contexts/AuthContext.js';
|
|
5
5
|
|
|
6
|
-
const LoginFormExample = () => (jsx(AuthProvider, { children: jsx("div", { className: "flex items-center justify-center min-h-[400px] bg-background", children: jsxs(Card, { className: "w-full max-w-md", children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Login" }) }), jsx(CardContent, { children: jsx(LoginForm, {}) })] }) }) }));
|
|
6
|
+
const LoginFormExample = () => (jsx(AuthProvider, { children: jsx("div", { className: "flex items-center justify-center min-h-[400px] bg-background", children: jsxs(Card, { className: "w-full max-w-md", children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Login" }) }), jsx(CardContent, { children: jsx(LoginForm, { onSubmit: async (data) => console.log('Login submitted:', data) }) })] }) }) }));
|
|
7
7
|
|
|
8
8
|
export { LoginFormExample };
|
|
9
9
|
//# sourceMappingURL=LoginForm.example.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoginForm.example.js","sources":["../../../src/components/Auth/LoginForm.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { LoginForm } from \"./LoginForm\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"../Card\";\nimport { AuthProvider } from \"../../contexts/AuthContext\";\n\nexport const LoginFormExample: React.FC = () => (\n <AuthProvider>\n <div className=\"flex items-center justify-center min-h-[400px] bg-background\">\n <Card className=\"w-full max-w-md\">\n <CardHeader>\n <CardTitle>Login</CardTitle>\n </CardHeader>\n <CardContent>\n
|
|
1
|
+
{"version":3,"file":"LoginForm.example.js","sources":["../../../src/components/Auth/LoginForm.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { LoginForm } from \"./LoginForm\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"../Card\";\nimport { AuthProvider } from \"../../contexts/AuthContext\";\n\nexport const LoginFormExample: React.FC = () => (\n <AuthProvider>\n <div className=\"flex items-center justify-center min-h-[400px] bg-background\">\n <Card className=\"w-full max-w-md\">\n <CardHeader>\n <CardTitle>Login</CardTitle>\n </CardHeader>\n <CardContent>\n <LoginForm onSubmit={async (data) => console.log('Login submitted:', data)} />\n </CardContent>\n </Card>\n </div>\n </AuthProvider>\n);"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKO,MAAM,gBAAgB,GAAa,OACxCA,GAAA,CAAC,YAAY,EAAA,EAAA,QAAA,EACXA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8DAA8D,EAAA,QAAA,EAC3EC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,CAC/BD,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,OAAA,EAAA,CAAkB,EAAA,CACjB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACZA,GAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,IAAI,CAAC,EAAA,CAAI,EAAA,CAChE,CAAA,EAAA,CACT,EAAA,CACH,EAAA,CACO;;;;"}
|
|
@@ -9,14 +9,12 @@ import { Input } from '../Input/Input.js';
|
|
|
9
9
|
import { Checkbox } from '../Checkbox/Checkbox.js';
|
|
10
10
|
import { Alert, AlertDescription } from '../Alert/Alert.js';
|
|
11
11
|
import { Spinner } from '../Spinner/Spinner.js';
|
|
12
|
-
import { useAuth } from '../../contexts/AuthContext.js';
|
|
13
12
|
import { loginSchema } from '../../utils/validation.js';
|
|
14
13
|
|
|
15
14
|
/**
|
|
16
15
|
* LoginForm component with validation and accessibility features
|
|
17
16
|
*/
|
|
18
|
-
const LoginForm = ({ className,
|
|
19
|
-
const { login, isLoading, error, clearError } = useAuth();
|
|
17
|
+
const LoginForm = ({ className, onSubmit, isLoading, error, onForgotPassword, onSignupClick, }) => {
|
|
20
18
|
const [showPassword, setShowPassword] = useState(false);
|
|
21
19
|
const { register, handleSubmit, formState: { errors, isSubmitting }, reset, } = useForm({
|
|
22
20
|
resolver: zodResolver(loginSchema),
|
|
@@ -26,22 +24,19 @@ const LoginForm = ({ className, onSuccess, onForgotPassword, onSignupClick, }) =
|
|
|
26
24
|
rememberMe: false,
|
|
27
25
|
},
|
|
28
26
|
});
|
|
29
|
-
const
|
|
27
|
+
const handleFormSubmit = async (data) => {
|
|
30
28
|
try {
|
|
31
|
-
|
|
32
|
-
await login(data);
|
|
29
|
+
await onSubmit(data);
|
|
33
30
|
reset();
|
|
34
|
-
onSuccess?.();
|
|
35
31
|
}
|
|
36
|
-
catch (
|
|
37
|
-
|
|
38
|
-
console.error('Login failed:', error);
|
|
32
|
+
catch (err) {
|
|
33
|
+
console.error('Login failed:', err);
|
|
39
34
|
}
|
|
40
35
|
};
|
|
41
36
|
const togglePasswordVisibility = () => {
|
|
42
37
|
setShowPassword(prev => !prev);
|
|
43
38
|
};
|
|
44
|
-
return (jsx("div", { className: cn('w-full max-w-md mx-auto', className), children: jsxs("div", { className: "bg-white rounded-lg shadow-lg p-8", children: [jsxs("div", { className: "text-center mb-8", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Welcome Back" }), jsx("p", { className: "text-gray-600", children: "Sign in to your account to continue" })] }), error && (jsxs(Alert, { variant: "danger", className: "mb-6", children: [jsx(AlertCircle, { className: "h-4 w-4" }), jsx(AlertDescription, { children: error })] })), jsxs("form", { onSubmit: handleSubmit(
|
|
39
|
+
return (jsx("div", { className: cn('w-full max-w-md mx-auto', className), children: jsxs("div", { className: "bg-white rounded-lg shadow-lg p-8", children: [jsxs("div", { className: "text-center mb-8", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Welcome Back" }), jsx("p", { className: "text-gray-600", children: "Sign in to your account to continue" })] }), error && (jsxs(Alert, { variant: "danger", className: "mb-6", children: [jsx(AlertCircle, { className: "h-4 w-4" }), jsx(AlertDescription, { children: error })] })), jsxs("form", { onSubmit: handleSubmit(handleFormSubmit), className: "space-y-6", children: [jsxs("div", { children: [jsx("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 mb-2", children: "Email Address" }), jsxs("div", { className: "relative", children: [jsx(Mail, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" }), jsx(Input, { id: "email", type: "email", placeholder: "Enter your email", className: cn('pl-10', errors.email && 'border-danger-500 focus:ring-danger-500'), "aria-invalid": errors.email ? 'true' : 'false', "aria-describedby": errors.email ? 'email-error' : undefined, ...register('email') })] }), errors.email && (jsx("p", { id: "email-error", className: "mt-1 text-sm text-danger-600", role: "alert", children: errors.email.message }))] }), jsxs("div", { children: [jsx("label", { htmlFor: "password", className: "block text-sm font-medium text-gray-700 mb-2", children: "Password" }), jsxs("div", { className: "relative", children: [jsx(Lock, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" }), jsx(Input, { id: "password", type: showPassword ? 'text' : 'password', placeholder: "Enter your password", className: cn('pl-10 pr-10', errors.password && 'border-danger-500 focus:ring-danger-500'), "aria-invalid": errors.password ? 'true' : 'false', "aria-describedby": errors.password ? 'password-error' : undefined, ...register('password') }), jsx("button", { type: "button", onClick: togglePasswordVisibility, className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600", "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? (jsx(EyeOff, { className: "h-5 w-5" })) : (jsx(Eye, { className: "h-5 w-5" })) })] }), errors.password && (jsx("p", { id: "password-error", className: "mt-1 text-sm text-danger-600", role: "alert", children: errors.password.message }))] }), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("label", { className: "flex items-center", children: [jsx(Checkbox, { ...register('rememberMe') }), jsx("span", { className: "ml-2 text-sm text-gray-600", children: "Remember me" })] }), jsx("button", { type: "button", onClick: onForgotPassword, className: "text-sm text-primary-600 hover:text-primary-500 font-medium", children: "Forgot password?" })] }), jsx(Button, { type: "submit", variant: "primary", className: "w-full", disabled: isSubmitting || isLoading, children: isSubmitting || isLoading ? (jsxs(Fragment, { children: [jsx(Spinner, { size: "sm", className: "mr-2" }), "Signing in..."] })) : ('Sign In') })] }), jsxs("div", { className: "mt-6 p-4 bg-gray-50 rounded-lg", children: [jsx("p", { className: "text-sm text-gray-600 mb-2 font-medium", children: "Demo Credentials:" }), jsxs("p", { className: "text-xs text-gray-500", children: ["Email: admin@example.com", jsx("br", {}), "Password: Password123!"] })] }), jsx("div", { className: "mt-6 text-center", children: jsxs("p", { className: "text-sm text-gray-600", children: ["Don't have an account?", ' ', jsx("button", { type: "button", onClick: onSignupClick, className: "text-primary-600 hover:text-primary-500 font-medium", children: "Sign up" })] }) })] }) }));
|
|
45
40
|
};
|
|
46
41
|
|
|
47
42
|
export { LoginForm };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoginForm.js","sources":["../../../src/components/Auth/LoginForm.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Eye, EyeOff, Mail, Lock, AlertCircle } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Input } from '../Input';\nimport { Checkbox } from '../Checkbox';\nimport { Alert, AlertDescription } from '../Alert';\nimport { Spinner } from '../Spinner';\nimport { useAuth } from '../../contexts/AuthContext';\nimport { loginSchema, type LoginFormData } from '../../utils/validation';\n\ninterface LoginFormProps {\n className?: string;\n onSuccess?: () => void;\n onForgotPassword?: () => void;\n onSignupClick?: () => void;\n}\n\n/**\n * LoginForm component with validation and accessibility features\n */\nexport const LoginForm: React.FC<LoginFormProps> = ({\n className,\n onSuccess,\n onForgotPassword,\n onSignupClick,\n}) => {\n const { login, isLoading, error, clearError } = useAuth();\n const [showPassword, setShowPassword] = useState(false);\n\n const {\n register,\n handleSubmit,\n formState: { errors, isSubmitting },\n reset,\n } = useForm<LoginFormData>({\n resolver: zodResolver(loginSchema),\n defaultValues: {\n email: '',\n password: '',\n rememberMe: false,\n },\n });\n\n const onSubmit = async (data: LoginFormData) => {\n try {\n clearError();\n await login(data);\n reset();\n onSuccess?.();\n } catch (error) {\n // Error is handled by the auth context\n console.error('Login failed:', error);\n }\n };\n\n const togglePasswordVisibility = () => {\n setShowPassword(prev => !prev);\n };\n\n return (\n <div className={cn('w-full max-w-md mx-auto', className)}>\n <div className=\"bg-white rounded-lg shadow-lg p-8\">\n {/* Header */}\n <div className=\"text-center mb-8\">\n <h1 className=\"text-2xl font-bold text-gray-900 mb-2\">\n Welcome Back\n </h1>\n <p className=\"text-gray-600\">\n Sign in to your account to continue\n </p>\n </div>\n\n {/* Error Alert */}\n {error && (\n <Alert variant=\"danger\" className=\"mb-6\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n )}\n\n {/* Login Form */}\n <form onSubmit={handleSubmit(onSubmit)} className=\"space-y-6\">\n {/* Email Field */}\n <div>\n <label\n htmlFor=\"email\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Email Address\n </label>\n <div className=\"relative\">\n <Mail className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"Enter your email\"\n className={cn(\n 'pl-10',\n errors.email && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.email ? 'true' : 'false'}\n aria-describedby={errors.email ? 'email-error' : undefined}\n {...register('email')}\n />\n </div>\n {errors.email && (\n <p\n id=\"email-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.email.message}\n </p>\n )}\n </div>\n\n {/* Password Field */}\n <div>\n <label\n htmlFor=\"password\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Password\n </label>\n <div className=\"relative\">\n <Lock className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"password\"\n type={showPassword ? 'text' : 'password'}\n placeholder=\"Enter your password\"\n className={cn(\n 'pl-10 pr-10',\n errors.password && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.password ? 'true' : 'false'}\n aria-describedby={errors.password ? 'password-error' : undefined}\n {...register('password')}\n />\n <button\n type=\"button\"\n onClick={togglePasswordVisibility}\n className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600\"\n aria-label={showPassword ? 'Hide password' : 'Show password'}\n >\n {showPassword ? (\n <EyeOff className=\"h-5 w-5\" />\n ) : (\n <Eye className=\"h-5 w-5\" />\n )}\n </button>\n </div>\n {errors.password && (\n <p\n id=\"password-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.password.message}\n </p>\n )}\n </div>\n\n {/* Remember Me & Forgot Password */}\n <div className=\"flex items-center justify-between\">\n <label className=\"flex items-center\">\n <Checkbox {...register('rememberMe')} />\n <span className=\"ml-2 text-sm text-gray-600\">Remember me</span>\n </label>\n <button\n type=\"button\"\n onClick={onForgotPassword}\n className=\"text-sm text-primary-600 hover:text-primary-500 font-medium\"\n >\n Forgot password?\n </button>\n </div>\n\n {/* Submit Button */}\n <Button\n type=\"submit\"\n variant=\"primary\"\n className=\"w-full\"\n disabled={isSubmitting || isLoading}\n >\n {isSubmitting || isLoading ? (\n <>\n <Spinner size=\"sm\" className=\"mr-2\" />\n Signing in...\n </>\n ) : (\n 'Sign In'\n )}\n </Button>\n </form>\n\n {/* Demo Credentials */}\n <div className=\"mt-6 p-4 bg-gray-50 rounded-lg\">\n <p className=\"text-sm text-gray-600 mb-2 font-medium\">Demo Credentials:</p>\n <p className=\"text-xs text-gray-500\">\n Email: admin@example.com<br />\n Password: Password123!\n </p>\n </div>\n\n {/* Sign Up Link */}\n <div className=\"mt-6 text-center\">\n <p className=\"text-sm text-gray-600\">\n Don't have an account?{' '}\n <button\n type=\"button\"\n onClick={onSignupClick}\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Sign up\n </button>\n </p>\n </div>\n </div>\n </div>\n );\n};"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;;;AAoBA;;AAEG;AACI,MAAM,SAAS,GAA6B,CAAC,EAClD,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,aAAa,GACd,KAAI;AACH,IAAA,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,OAAO,EAAE;IACzD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEvD,IAAA,MAAM,EACJ,QAAQ,EACR,YAAY,EACZ,SAAS,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,EACnC,KAAK,GACN,GAAG,OAAO,CAAgB;AACzB,QAAA,QAAQ,EAAE,WAAW,CAAC,WAAW,CAAC;AAClC,QAAA,aAAa,EAAE;AACb,YAAA,KAAK,EAAE,EAAE;AACT,YAAA,QAAQ,EAAE,EAAE;AACZ,YAAA,UAAU,EAAE,KAAK;AAClB,SAAA;AACF,KAAA,CAAC;AAEF,IAAA,MAAM,QAAQ,GAAG,OAAO,IAAmB,KAAI;AAC7C,QAAA,IAAI;AACF,YAAA,UAAU,EAAE;AACZ,YAAA,MAAM,KAAK,CAAC,IAAI,CAAC;AACjB,YAAA,KAAK,EAAE;YACP,SAAS,IAAI;QACf;QAAE,OAAO,KAAK,EAAE;;AAEd,YAAA,OAAO,CAAC,KAAK,CAAC,eAAe,EAAE,KAAK,CAAC;QACvC;AACF,IAAA,CAAC;IAED,MAAM,wBAAwB,GAAG,MAAK;QACpC,eAAe,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC;AAChC,IAAA,CAAC;IAED,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,EAAA,QAAA,EACtDC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAEhDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,CAC/BD,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,cAAA,EAAA,CAEhD,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,qCAAA,EAAA,CAExB,CAAA,EAAA,CACA,EAGL,KAAK,KACJC,IAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,CACtCD,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EACnCA,GAAA,CAAC,gBAAgB,EAAA,EAAA,QAAA,EAAE,KAAK,GAAoB,CAAA,EAAA,CACtC,CACT,EAGDC,IAAA,CAAA,MAAA,EAAA,EAAM,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,CAE3DA,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACED,GAAA,CAAA,OAAA,EAAA,EACE,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,eAAA,EAAA,CAGlD,EACRC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,UAAU,EAAA,QAAA,EAAA,CACvBD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0EAA0E,EAAA,CAAG,EAC7FA,GAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,kBAAkB,EAC9B,SAAS,EAAE,EAAE,CACX,OAAO,EACP,MAAM,CAAC,KAAK,IAAI,yCAAyC,CAC1D,EAAA,cAAA,EACa,MAAM,CAAC,KAAK,GAAG,MAAM,GAAG,OAAO,EAAA,kBAAA,EAC3B,MAAM,CAAC,KAAK,GAAG,aAAa,GAAG,SAAS,EAAA,GACtD,QAAQ,CAAC,OAAO,CAAC,EAAA,CACrB,CAAA,EAAA,CACE,EACL,MAAM,CAAC,KAAK,KACXA,GAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAC,aAAa,EAChB,SAAS,EAAC,8BAA8B,EACxC,IAAI,EAAC,OAAO,EAAA,QAAA,EAEX,MAAM,CAAC,KAAK,CAAC,OAAO,EAAA,CACnB,CACL,CAAA,EAAA,CACG,EAGNC,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACED,GAAA,CAAA,OAAA,EAAA,EACE,OAAO,EAAC,UAAU,EAClB,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,UAAA,EAAA,CAGlD,EACRC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,UAAU,EAAA,QAAA,EAAA,CACvBD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0EAA0E,EAAA,CAAG,EAC7FA,GAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAC,UAAU,EACb,IAAI,EAAE,YAAY,GAAG,MAAM,GAAG,UAAU,EACxC,WAAW,EAAC,qBAAqB,EACjC,SAAS,EAAE,EAAE,CACX,aAAa,EACb,MAAM,CAAC,QAAQ,IAAI,yCAAyC,CAC7D,EAAA,cAAA,EACa,MAAM,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,kBAAA,EAC9B,MAAM,CAAC,QAAQ,GAAG,gBAAgB,GAAG,SAAS,EAAA,GAC5D,QAAQ,CAAC,UAAU,CAAC,EAAA,CACxB,EACFA,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,wBAAwB,EACjC,SAAS,EAAC,uFAAuF,EAAA,YAAA,EACrF,YAAY,GAAG,eAAe,GAAG,eAAe,EAAA,QAAA,EAE3D,YAAY,IACXA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,SAAS,GAAG,KAE9BA,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,CAC5B,EAAA,CACM,CAAA,EAAA,CACL,EACL,MAAM,CAAC,QAAQ,KACdA,GAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAC,gBAAgB,EACnB,SAAS,EAAC,8BAA8B,EACxC,IAAI,EAAC,OAAO,EAAA,QAAA,EAEX,MAAM,CAAC,QAAQ,CAAC,OAAO,EAAA,CACtB,CACL,CAAA,EAAA,CACG,EAGNC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDA,IAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAAA,CAClCD,GAAA,CAAC,QAAQ,EAAA,EAAA,GAAK,QAAQ,CAAC,YAAY,CAAC,EAAA,CAAI,EACxCA,cAAM,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,aAAA,EAAA,CAAmB,CAAA,EAAA,CACzD,EACRA,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAC,6DAA6D,EAAA,QAAA,EAAA,kBAAA,EAAA,CAGhE,CAAA,EAAA,CACL,EAGNA,GAAA,CAAC,MAAM,EAAA,EACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,EACjB,SAAS,EAAC,QAAQ,EAClB,QAAQ,EAAE,YAAY,IAAI,SAAS,EAAA,QAAA,EAElC,YAAY,IAAI,SAAS,IACxBC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAA,CAAG,qBAErC,KAEH,SAAS,CACV,EAAA,CACM,CAAA,EAAA,CACJ,EAGPC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAAA,CAC7CD,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,wCAAwC,EAAA,QAAA,EAAA,mBAAA,EAAA,CAAsB,EAC3EC,IAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,CAAA,0BAAA,EACVD,GAAA,CAAA,IAAA,EAAA,EAAA,CAAM,EAAA,wBAAA,CAAA,EAAA,CAE5B,CAAA,EAAA,CACA,EAGNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAC/BC,IAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,CAAA,wBAAA,EACX,GAAG,EAC1BD,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,qDAAqD,EAAA,QAAA,EAAA,SAAA,EAAA,CAGxD,CAAA,EAAA,CACP,EAAA,CACA,CAAA,EAAA,CACF,EAAA,CACF;AAEV;;;;"}
|
|
1
|
+
{"version":3,"file":"LoginForm.js","sources":["../../../src/components/Auth/LoginForm.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Eye, EyeOff, Mail, Lock, AlertCircle } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Input } from '../Input';\nimport { Checkbox } from '../Checkbox';\nimport { Alert, AlertDescription } from '../Alert';\nimport { Spinner } from '../Spinner';\nimport { loginSchema, type LoginFormData } from '../../utils/validation';\n\ninterface LoginFormProps {\n className?: string;\n onSubmit: (data: LoginFormData) => Promise<void>;\n isLoading?: boolean;\n error?: string | null;\n onForgotPassword?: () => void;\n onSignupClick?: () => void;\n}\n\n/**\n * LoginForm component with validation and accessibility features\n */\nexport const LoginForm: React.FC<LoginFormProps> = ({\n className,\n onSubmit,\n isLoading,\n error,\n onForgotPassword,\n onSignupClick,\n}) => {\n const [showPassword, setShowPassword] = useState(false);\n\n const {\n register,\n handleSubmit,\n formState: { errors, isSubmitting },\n reset,\n } = useForm<LoginFormData>({\n resolver: zodResolver(loginSchema),\n defaultValues: {\n email: '',\n password: '',\n rememberMe: false,\n },\n });\n\n const handleFormSubmit = async (data: LoginFormData) => {\n try {\n await onSubmit(data);\n reset();\n } catch (err) {\n console.error('Login failed:', err);\n }\n };\n\n const togglePasswordVisibility = () => {\n setShowPassword(prev => !prev);\n };\n\n return (\n <div className={cn('w-full max-w-md mx-auto', className)}>\n <div className=\"bg-white rounded-lg shadow-lg p-8\">\n {/* Header */}\n <div className=\"text-center mb-8\">\n <h1 className=\"text-2xl font-bold text-gray-900 mb-2\">\n Welcome Back\n </h1>\n <p className=\"text-gray-600\">\n Sign in to your account to continue\n </p>\n </div>\n\n {/* Error Alert */}\n {error && (\n <Alert variant=\"danger\" className=\"mb-6\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n )}\n\n {/* Login Form */}\n <form onSubmit={handleSubmit(handleFormSubmit)} className=\"space-y-6\">\n {/* Email Field */}\n <div>\n <label\n htmlFor=\"email\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Email Address\n </label>\n <div className=\"relative\">\n <Mail className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"Enter your email\"\n className={cn(\n 'pl-10',\n errors.email && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.email ? 'true' : 'false'}\n aria-describedby={errors.email ? 'email-error' : undefined}\n {...register('email')}\n />\n </div>\n {errors.email && (\n <p\n id=\"email-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.email.message}\n </p>\n )}\n </div>\n\n {/* Password Field */}\n <div>\n <label\n htmlFor=\"password\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Password\n </label>\n <div className=\"relative\">\n <Lock className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"password\"\n type={showPassword ? 'text' : 'password'}\n placeholder=\"Enter your password\"\n className={cn(\n 'pl-10 pr-10',\n errors.password && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.password ? 'true' : 'false'}\n aria-describedby={errors.password ? 'password-error' : undefined}\n {...register('password')}\n />\n <button\n type=\"button\"\n onClick={togglePasswordVisibility}\n className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600\"\n aria-label={showPassword ? 'Hide password' : 'Show password'}\n >\n {showPassword ? (\n <EyeOff className=\"h-5 w-5\" />\n ) : (\n <Eye className=\"h-5 w-5\" />\n )}\n </button>\n </div>\n {errors.password && (\n <p\n id=\"password-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.password.message}\n </p>\n )}\n </div>\n\n {/* Remember Me & Forgot Password */}\n <div className=\"flex items-center justify-between\">\n <label className=\"flex items-center\">\n <Checkbox {...register('rememberMe')} />\n <span className=\"ml-2 text-sm text-gray-600\">Remember me</span>\n </label>\n <button\n type=\"button\"\n onClick={onForgotPassword}\n className=\"text-sm text-primary-600 hover:text-primary-500 font-medium\"\n >\n Forgot password?\n </button>\n </div>\n\n {/* Submit Button */}\n <Button\n type=\"submit\"\n variant=\"primary\"\n className=\"w-full\"\n disabled={isSubmitting || isLoading}\n >\n {isSubmitting || isLoading ? (\n <>\n <Spinner size=\"sm\" className=\"mr-2\" />\n Signing in...\n </>\n ) : (\n 'Sign In'\n )}\n </Button>\n </form>\n\n {/* Demo Credentials */}\n <div className=\"mt-6 p-4 bg-gray-50 rounded-lg\">\n <p className=\"text-sm text-gray-600 mb-2 font-medium\">Demo Credentials:</p>\n <p className=\"text-xs text-gray-500\">\n Email: admin@example.com<br />\n Password: Password123!\n </p>\n </div>\n\n {/* Sign Up Link */}\n <div className=\"mt-6 text-center\">\n <p className=\"text-sm text-gray-600\">\n Don't have an account?{' '}\n <button\n type=\"button\"\n onClick={onSignupClick}\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Sign up\n </button>\n </p>\n </div>\n </div>\n </div>\n );\n};"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { type SignupFormData } from '../../utils/validation';
|
|
2
3
|
interface SignupFormProps {
|
|
3
4
|
className?: string;
|
|
4
|
-
|
|
5
|
+
onSubmit: (data: SignupFormData) => Promise<void>;
|
|
6
|
+
isLoading?: boolean;
|
|
7
|
+
error?: string | null;
|
|
5
8
|
onLoginClick?: () => void;
|
|
6
9
|
}
|
|
7
10
|
/**
|
|
@@ -3,7 +3,7 @@ import { SignupForm } from './SignupForm.js';
|
|
|
3
3
|
import { Card, CardHeader, CardTitle, CardContent } from '../Card/Card.js';
|
|
4
4
|
import { AuthProvider } from '../../contexts/AuthContext.js';
|
|
5
5
|
|
|
6
|
-
const SignupFormExample = () => (jsx(AuthProvider, { children: jsx("div", { className: "flex items-center justify-center min-h-[400px] bg-background", children: jsxs(Card, { className: "w-full max-w-md", children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Sign Up" }) }), jsx(CardContent, { children: jsx(SignupForm, {}) })] }) }) }));
|
|
6
|
+
const SignupFormExample = () => (jsx(AuthProvider, { children: jsx("div", { className: "flex items-center justify-center min-h-[400px] bg-background", children: jsxs(Card, { className: "w-full max-w-md", children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Sign Up" }) }), jsx(CardContent, { children: jsx(SignupForm, { onSubmit: async (data) => console.log('Signup submitted:', data) }) })] }) }) }));
|
|
7
7
|
|
|
8
8
|
export { SignupFormExample };
|
|
9
9
|
//# sourceMappingURL=SignupForm.example.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SignupForm.example.js","sources":["../../../src/components/Auth/SignupForm.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { SignupForm } from \"./SignupForm\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"../Card\";\nimport { AuthProvider } from \"../../contexts/AuthContext\";\n\nexport const SignupFormExample: React.FC = () => (\n <AuthProvider>\n <div className=\"flex items-center justify-center min-h-[400px] bg-background\">\n <Card className=\"w-full max-w-md\">\n <CardHeader>\n <CardTitle>Sign Up</CardTitle>\n </CardHeader>\n <CardContent>\n
|
|
1
|
+
{"version":3,"file":"SignupForm.example.js","sources":["../../../src/components/Auth/SignupForm.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { SignupForm } from \"./SignupForm\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"../Card\";\nimport { AuthProvider } from \"../../contexts/AuthContext\";\n\nexport const SignupFormExample: React.FC = () => (\n <AuthProvider>\n <div className=\"flex items-center justify-center min-h-[400px] bg-background\">\n <Card className=\"w-full max-w-md\">\n <CardHeader>\n <CardTitle>Sign Up</CardTitle>\n </CardHeader>\n <CardContent>\n <SignupForm onSubmit={async (data) => console.log('Signup submitted:', data)} />\n </CardContent>\n </Card>\n </div>\n </AuthProvider>\n);"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKO,MAAM,iBAAiB,GAAa,OACzCA,GAAA,CAAC,YAAY,EAAA,EAAA,QAAA,EACXA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8DAA8D,EAAA,QAAA,EAC3EC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,CAC/BD,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAoB,EAAA,CACnB,EACbA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACZA,GAAA,CAAC,UAAU,EAAA,EAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,IAAI,CAAC,EAAA,CAAI,EAAA,CAClE,CAAA,EAAA,CACT,EAAA,CACH,EAAA,CACO;;;;"}
|
|
@@ -10,14 +10,12 @@ import { Checkbox } from '../Checkbox/Checkbox.js';
|
|
|
10
10
|
import { Alert, AlertDescription } from '../Alert/Alert.js';
|
|
11
11
|
import { Spinner } from '../Spinner/Spinner.js';
|
|
12
12
|
import { Badge } from '../Badge/Badge.js';
|
|
13
|
-
import { useAuth } from '../../contexts/AuthContext.js';
|
|
14
13
|
import { signupSchema, calculatePasswordStrength } from '../../utils/validation.js';
|
|
15
14
|
|
|
16
15
|
/**
|
|
17
16
|
* SignupForm component with real-time validation and password strength indicator
|
|
18
17
|
*/
|
|
19
|
-
const SignupForm = ({ className,
|
|
20
|
-
const { signup, isLoading, error, clearError } = useAuth();
|
|
18
|
+
const SignupForm = ({ className, onSubmit, isLoading, error, onLoginClick, }) => {
|
|
21
19
|
const [showPassword, setShowPassword] = useState(false);
|
|
22
20
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|
23
21
|
const { register, handleSubmit, watch, formState: { errors, isSubmitting }, reset, } = useForm({
|
|
@@ -33,16 +31,13 @@ const SignupForm = ({ className, onSuccess, onLoginClick, }) => {
|
|
|
33
31
|
});
|
|
34
32
|
const password = watch('password');
|
|
35
33
|
const passwordStrength = password ? calculatePasswordStrength(password) : null;
|
|
36
|
-
const
|
|
34
|
+
const handleFormSubmit = async (data) => {
|
|
37
35
|
try {
|
|
38
|
-
|
|
39
|
-
await signup(data);
|
|
36
|
+
await onSubmit(data);
|
|
40
37
|
reset();
|
|
41
|
-
onSuccess?.();
|
|
42
38
|
}
|
|
43
|
-
catch (
|
|
44
|
-
|
|
45
|
-
console.error('Signup failed:', error);
|
|
39
|
+
catch (err) {
|
|
40
|
+
console.error('Signup failed:', err);
|
|
46
41
|
}
|
|
47
42
|
};
|
|
48
43
|
const togglePasswordVisibility = () => {
|
|
@@ -51,7 +46,7 @@ const SignupForm = ({ className, onSuccess, onLoginClick, }) => {
|
|
|
51
46
|
const toggleConfirmPasswordVisibility = () => {
|
|
52
47
|
setShowConfirmPassword(prev => !prev);
|
|
53
48
|
};
|
|
54
|
-
return (jsx("div", { className: cn('w-full max-w-md mx-auto', className), children: jsxs("div", { className: "bg-white rounded-lg shadow-lg p-8", children: [jsxs("div", { className: "text-center mb-8", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Create Account" }), jsx("p", { className: "text-gray-600", children: "Join us today and get started" })] }), error && (jsxs(Alert, { variant: "danger", className: "mb-6", children: [jsx(AlertCircle, { className: "h-4 w-4" }), jsx(AlertDescription, { children: error })] })), jsxs("form", { onSubmit: handleSubmit(
|
|
49
|
+
return (jsx("div", { className: cn('w-full max-w-md mx-auto', className), children: jsxs("div", { className: "bg-white rounded-lg shadow-lg p-8", children: [jsxs("div", { className: "text-center mb-8", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Create Account" }), jsx("p", { className: "text-gray-600", children: "Join us today and get started" })] }), error && (jsxs(Alert, { variant: "danger", className: "mb-6", children: [jsx(AlertCircle, { className: "h-4 w-4" }), jsx(AlertDescription, { children: error })] })), jsxs("form", { onSubmit: handleSubmit(handleFormSubmit), className: "space-y-6", children: [jsxs("div", { children: [jsx("label", { htmlFor: "name", className: "block text-sm font-medium text-gray-700 mb-2", children: "Full Name" }), jsxs("div", { className: "relative", children: [jsx(User, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" }), jsx(Input, { id: "name", type: "text", placeholder: "Enter your full name", className: cn('pl-10', errors.name && 'border-danger-500 focus:ring-danger-500'), "aria-invalid": errors.name ? 'true' : 'false', "aria-describedby": errors.name ? 'name-error' : undefined, ...register('name') })] }), errors.name && (jsx("p", { id: "name-error", className: "mt-1 text-sm text-danger-600", role: "alert", children: errors.name.message }))] }), jsxs("div", { children: [jsx("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 mb-2", children: "Email Address" }), jsxs("div", { className: "relative", children: [jsx(Mail, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" }), jsx(Input, { id: "email", type: "email", placeholder: "Enter your email", className: cn('pl-10', errors.email && 'border-danger-500 focus:ring-danger-500'), "aria-invalid": errors.email ? 'true' : 'false', "aria-describedby": errors.email ? 'email-error' : undefined, ...register('email') })] }), errors.email && (jsx("p", { id: "email-error", className: "mt-1 text-sm text-danger-600", role: "alert", children: errors.email.message }))] }), jsxs("div", { children: [jsx("label", { htmlFor: "password", className: "block text-sm font-medium text-gray-700 mb-2", children: "Password" }), jsxs("div", { className: "relative", children: [jsx(Lock, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" }), jsx(Input, { id: "password", type: showPassword ? 'text' : 'password', placeholder: "Create a strong password", className: cn('pl-10 pr-10', errors.password && 'border-danger-500 focus:ring-danger-500'), "aria-invalid": errors.password ? 'true' : 'false', "aria-describedby": errors.password ? 'password-error password-strength' : 'password-strength', ...register('password') }), jsx("button", { type: "button", onClick: togglePasswordVisibility, className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600", "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? (jsx(EyeOff, { className: "h-5 w-5" })) : (jsx(Eye, { className: "h-5 w-5" })) })] }), password && passwordStrength && (jsxs("div", { id: "password-strength", className: "mt-2", children: [jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsx("span", { className: "text-xs text-gray-600", children: "Password strength:" }), jsx(Badge, { variant: passwordStrength.color === 'success' ? 'success' :
|
|
55
50
|
passwordStrength.color === 'warning' ? 'warning' : 'danger', className: "text-xs", children: passwordStrength.label })] }), jsx("div", { className: "w-full bg-gray-200 rounded-full h-2", children: jsx("div", { className: cn('h-2 rounded-full transition-all duration-300', passwordStrength.color === 'success' && 'bg-success-500', passwordStrength.color === 'warning' && 'bg-warning-500', passwordStrength.color === 'danger' && 'bg-danger-500'), style: { width: `${(passwordStrength.score / 6) * 100}%` } }) })] })), errors.password && (jsx("p", { id: "password-error", className: "mt-1 text-sm text-danger-600", role: "alert", children: errors.password.message }))] }), jsxs("div", { children: [jsx("label", { htmlFor: "confirmPassword", className: "block text-sm font-medium text-gray-700 mb-2", children: "Confirm Password" }), jsxs("div", { className: "relative", children: [jsx(Lock, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" }), jsx(Input, { id: "confirmPassword", type: showConfirmPassword ? 'text' : 'password', placeholder: "Confirm your password", className: cn('pl-10 pr-10', errors.confirmPassword && 'border-danger-500 focus:ring-danger-500'), "aria-invalid": errors.confirmPassword ? 'true' : 'false', "aria-describedby": errors.confirmPassword ? 'confirm-password-error' : undefined, ...register('confirmPassword') }), jsx("button", { type: "button", onClick: toggleConfirmPasswordVisibility, className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600", "aria-label": showConfirmPassword ? 'Hide password' : 'Show password', children: showConfirmPassword ? (jsx(EyeOff, { className: "h-5 w-5" })) : (jsx(Eye, { className: "h-5 w-5" })) })] }), errors.confirmPassword && (jsx("p", { id: "confirm-password-error", className: "mt-1 text-sm text-danger-600", role: "alert", children: errors.confirmPassword.message }))] }), jsxs("div", { children: [jsxs("label", { className: "flex items-start", children: [jsx(Checkbox, { className: "mt-1", ...register('acceptTerms'), "aria-invalid": errors.acceptTerms ? 'true' : 'false', "aria-describedby": errors.acceptTerms ? 'terms-error' : undefined }), jsxs("span", { className: "ml-2 text-sm text-gray-600", children: ["I agree to the", ' ', jsx("a", { href: "#", className: "text-primary-600 hover:text-primary-500 font-medium", children: "Terms of Service" }), ' ', "and", ' ', jsx("a", { href: "#", className: "text-primary-600 hover:text-primary-500 font-medium", children: "Privacy Policy" })] })] }), errors.acceptTerms && (jsx("p", { id: "terms-error", className: "mt-1 text-sm text-danger-600", role: "alert", children: errors.acceptTerms.message }))] }), jsx(Button, { type: "submit", variant: "primary", className: "w-full", disabled: isSubmitting || isLoading, children: isSubmitting || isLoading ? (jsxs(Fragment, { children: [jsx(Spinner, { size: "sm", className: "mr-2" }), "Creating account..."] })) : ('Create Account') })] }), jsx("div", { className: "mt-6 text-center", children: jsxs("p", { className: "text-sm text-gray-600", children: ["Already have an account?", ' ', jsx("button", { type: "button", onClick: onLoginClick, className: "text-primary-600 hover:text-primary-500 font-medium", children: "Sign in" })] }) })] }) }));
|
|
56
51
|
};
|
|
57
52
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SignupForm.js","sources":["../../../src/components/Auth/SignupForm.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Eye, EyeOff, Mail, Lock, User, AlertCircle, Check } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Input } from '../Input';\nimport { Checkbox } from '../Checkbox';\nimport { Alert, AlertDescription } from '../Alert';\nimport { Spinner } from '../Spinner';\nimport { Badge } from '../Badge';\nimport { useAuth } from '../../contexts/AuthContext';\nimport { signupSchema, type SignupFormData, calculatePasswordStrength } from '../../utils/validation';\n\ninterface SignupFormProps {\n className?: string;\n onSuccess?: () => void;\n onLoginClick?: () => void;\n}\n\n/**\n * SignupForm component with real-time validation and password strength indicator\n */\nexport const SignupForm: React.FC<SignupFormProps> = ({\n className,\n onSuccess,\n onLoginClick,\n}) => {\n const { signup, isLoading, error, clearError } = useAuth();\n const [showPassword, setShowPassword] = useState(false);\n const [showConfirmPassword, setShowConfirmPassword] = useState(false);\n\n const {\n register,\n handleSubmit,\n watch,\n formState: { errors, isSubmitting },\n reset,\n } = useForm<SignupFormData>({\n resolver: zodResolver(signupSchema),\n defaultValues: {\n name: '',\n email: '',\n password: '',\n confirmPassword: '',\n acceptTerms: false,\n },\n mode: 'onChange',\n });\n\n const password = watch('password');\n const passwordStrength = password ? calculatePasswordStrength(password) : null;\n\n const onSubmit = async (data: SignupFormData) => {\n try {\n clearError();\n await signup(data);\n reset();\n onSuccess?.();\n } catch (error) {\n // Error is handled by the auth context\n console.error('Signup failed:', error);\n }\n };\n\n const togglePasswordVisibility = () => {\n setShowPassword(prev => !prev);\n };\n\n const toggleConfirmPasswordVisibility = () => {\n setShowConfirmPassword(prev => !prev);\n };\n\n return (\n <div className={cn('w-full max-w-md mx-auto', className)}>\n <div className=\"bg-white rounded-lg shadow-lg p-8\">\n {/* Header */}\n <div className=\"text-center mb-8\">\n <h1 className=\"text-2xl font-bold text-gray-900 mb-2\">\n Create Account\n </h1>\n <p className=\"text-gray-600\">\n Join us today and get started\n </p>\n </div>\n\n {/* Error Alert */}\n {error && (\n <Alert variant=\"danger\" className=\"mb-6\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n )}\n\n {/* Signup Form */}\n <form onSubmit={handleSubmit(onSubmit)} className=\"space-y-6\">\n {/* Name Field */}\n <div>\n <label\n htmlFor=\"name\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Full Name\n </label>\n <div className=\"relative\">\n <User className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"name\"\n type=\"text\"\n placeholder=\"Enter your full name\"\n className={cn(\n 'pl-10',\n errors.name && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.name ? 'true' : 'false'}\n aria-describedby={errors.name ? 'name-error' : undefined}\n {...register('name')}\n />\n </div>\n {errors.name && (\n <p\n id=\"name-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.name.message}\n </p>\n )}\n </div>\n\n {/* Email Field */}\n <div>\n <label\n htmlFor=\"email\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Email Address\n </label>\n <div className=\"relative\">\n <Mail className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"Enter your email\"\n className={cn(\n 'pl-10',\n errors.email && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.email ? 'true' : 'false'}\n aria-describedby={errors.email ? 'email-error' : undefined}\n {...register('email')}\n />\n </div>\n {errors.email && (\n <p\n id=\"email-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.email.message}\n </p>\n )}\n </div>\n\n {/* Password Field */}\n <div>\n <label\n htmlFor=\"password\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Password\n </label>\n <div className=\"relative\">\n <Lock className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"password\"\n type={showPassword ? 'text' : 'password'}\n placeholder=\"Create a strong password\"\n className={cn(\n 'pl-10 pr-10',\n errors.password && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.password ? 'true' : 'false'}\n aria-describedby={errors.password ? 'password-error password-strength' : 'password-strength'}\n {...register('password')}\n />\n <button\n type=\"button\"\n onClick={togglePasswordVisibility}\n className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600\"\n aria-label={showPassword ? 'Hide password' : 'Show password'}\n >\n {showPassword ? (\n <EyeOff className=\"h-5 w-5\" />\n ) : (\n <Eye className=\"h-5 w-5\" />\n )}\n </button>\n </div>\n \n {/* Password Strength Indicator */}\n {password && passwordStrength && (\n <div id=\"password-strength\" className=\"mt-2\">\n <div className=\"flex items-center justify-between mb-1\">\n <span className=\"text-xs text-gray-600\">Password strength:</span>\n <Badge\n variant={\n passwordStrength.color === 'success' ? 'success' :\n passwordStrength.color === 'warning' ? 'warning' : 'danger'\n }\n className=\"text-xs\"\n >\n {passwordStrength.label}\n </Badge>\n </div>\n <div className=\"w-full bg-gray-200 rounded-full h-2\">\n <div\n className={cn(\n 'h-2 rounded-full transition-all duration-300',\n passwordStrength.color === 'success' && 'bg-success-500',\n passwordStrength.color === 'warning' && 'bg-warning-500',\n passwordStrength.color === 'danger' && 'bg-danger-500'\n )}\n style={{ width: `${(passwordStrength.score / 6) * 100}%` }}\n />\n </div>\n </div>\n )}\n \n {errors.password && (\n <p\n id=\"password-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.password.message}\n </p>\n )}\n </div>\n\n {/* Confirm Password Field */}\n <div>\n <label\n htmlFor=\"confirmPassword\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Confirm Password\n </label>\n <div className=\"relative\">\n <Lock className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"confirmPassword\"\n type={showConfirmPassword ? 'text' : 'password'}\n placeholder=\"Confirm your password\"\n className={cn(\n 'pl-10 pr-10',\n errors.confirmPassword && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.confirmPassword ? 'true' : 'false'}\n aria-describedby={errors.confirmPassword ? 'confirm-password-error' : undefined}\n {...register('confirmPassword')}\n />\n <button\n type=\"button\"\n onClick={toggleConfirmPasswordVisibility}\n className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600\"\n aria-label={showConfirmPassword ? 'Hide password' : 'Show password'}\n >\n {showConfirmPassword ? (\n <EyeOff className=\"h-5 w-5\" />\n ) : (\n <Eye className=\"h-5 w-5\" />\n )}\n </button>\n </div>\n {errors.confirmPassword && (\n <p\n id=\"confirm-password-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.confirmPassword.message}\n </p>\n )}\n </div>\n\n {/* Terms of Service */}\n <div>\n <label className=\"flex items-start\">\n <Checkbox\n className=\"mt-1\"\n {...register('acceptTerms')}\n aria-invalid={errors.acceptTerms ? 'true' : 'false'}\n aria-describedby={errors.acceptTerms ? 'terms-error' : undefined}\n />\n <span className=\"ml-2 text-sm text-gray-600\">\n I agree to the{' '}\n <a\n href=\"#\"\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Terms of Service\n </a>{' '}\n and{' '}\n <a\n href=\"#\"\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Privacy Policy\n </a>\n </span>\n </label>\n {errors.acceptTerms && (\n <p\n id=\"terms-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.acceptTerms.message}\n </p>\n )}\n </div>\n\n {/* Submit Button */}\n <Button\n type=\"submit\"\n variant=\"primary\"\n className=\"w-full\"\n disabled={isSubmitting || isLoading}\n >\n {isSubmitting || isLoading ? (\n <>\n <Spinner size=\"sm\" className=\"mr-2\" />\n Creating account...\n </>\n ) : (\n 'Create Account'\n )}\n </Button>\n </form>\n\n {/* Login Link */}\n <div className=\"mt-6 text-center\">\n <p className=\"text-sm text-gray-600\">\n Already have an account?{' '}\n <button\n type=\"button\"\n onClick={onLoginClick}\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Sign in\n </button>\n </p>\n </div>\n </div>\n </div>\n );\n};"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SignupForm.js","sources":["../../../src/components/Auth/SignupForm.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Eye, EyeOff, Mail, Lock, User, AlertCircle, Check } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Input } from '../Input';\nimport { Checkbox } from '../Checkbox';\nimport { Alert, AlertDescription } from '../Alert';\nimport { Spinner } from '../Spinner';\nimport { Badge } from '../Badge';\nimport { signupSchema, type SignupFormData, calculatePasswordStrength } from '../../utils/validation';\n\ninterface SignupFormProps {\n className?: string;\n onSubmit: (data: SignupFormData) => Promise<void>;\n isLoading?: boolean;\n error?: string | null;\n onLoginClick?: () => void;\n}\n\n/**\n * SignupForm component with real-time validation and password strength indicator\n */\nexport const SignupForm: React.FC<SignupFormProps> = ({\n className,\n onSubmit,\n isLoading,\n error,\n onLoginClick,\n}) => {\n const [showPassword, setShowPassword] = useState(false);\n const [showConfirmPassword, setShowConfirmPassword] = useState(false);\n\n const {\n register,\n handleSubmit,\n watch,\n formState: { errors, isSubmitting },\n reset,\n } = useForm<SignupFormData>({\n resolver: zodResolver(signupSchema),\n defaultValues: {\n name: '',\n email: '',\n password: '',\n confirmPassword: '',\n acceptTerms: false,\n },\n mode: 'onChange',\n });\n\n const password = watch('password');\n const passwordStrength = password ? calculatePasswordStrength(password) : null;\n\n const handleFormSubmit = async (data: SignupFormData) => {\n try {\n await onSubmit(data);\n reset();\n } catch (err) {\n console.error('Signup failed:', err);\n }\n };\n\n const togglePasswordVisibility = () => {\n setShowPassword(prev => !prev);\n };\n\n const toggleConfirmPasswordVisibility = () => {\n setShowConfirmPassword(prev => !prev);\n };\n\n return (\n <div className={cn('w-full max-w-md mx-auto', className)}>\n <div className=\"bg-white rounded-lg shadow-lg p-8\">\n {/* Header */}\n <div className=\"text-center mb-8\">\n <h1 className=\"text-2xl font-bold text-gray-900 mb-2\">\n Create Account\n </h1>\n <p className=\"text-gray-600\">\n Join us today and get started\n </p>\n </div>\n\n {/* Error Alert */}\n {error && (\n <Alert variant=\"danger\" className=\"mb-6\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n )}\n\n {/* Signup Form */}\n <form onSubmit={handleSubmit(handleFormSubmit)} className=\"space-y-6\">\n {/* Name Field */}\n <div>\n <label\n htmlFor=\"name\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Full Name\n </label>\n <div className=\"relative\">\n <User className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"name\"\n type=\"text\"\n placeholder=\"Enter your full name\"\n className={cn(\n 'pl-10',\n errors.name && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.name ? 'true' : 'false'}\n aria-describedby={errors.name ? 'name-error' : undefined}\n {...register('name')}\n />\n </div>\n {errors.name && (\n <p\n id=\"name-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.name.message}\n </p>\n )}\n </div>\n\n {/* Email Field */}\n <div>\n <label\n htmlFor=\"email\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Email Address\n </label>\n <div className=\"relative\">\n <Mail className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"Enter your email\"\n className={cn(\n 'pl-10',\n errors.email && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.email ? 'true' : 'false'}\n aria-describedby={errors.email ? 'email-error' : undefined}\n {...register('email')}\n />\n </div>\n {errors.email && (\n <p\n id=\"email-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.email.message}\n </p>\n )}\n </div>\n\n {/* Password Field */}\n <div>\n <label\n htmlFor=\"password\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Password\n </label>\n <div className=\"relative\">\n <Lock className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"password\"\n type={showPassword ? 'text' : 'password'}\n placeholder=\"Create a strong password\"\n className={cn(\n 'pl-10 pr-10',\n errors.password && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.password ? 'true' : 'false'}\n aria-describedby={errors.password ? 'password-error password-strength' : 'password-strength'}\n {...register('password')}\n />\n <button\n type=\"button\"\n onClick={togglePasswordVisibility}\n className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600\"\n aria-label={showPassword ? 'Hide password' : 'Show password'}\n >\n {showPassword ? (\n <EyeOff className=\"h-5 w-5\" />\n ) : (\n <Eye className=\"h-5 w-5\" />\n )}\n </button>\n </div>\n \n {/* Password Strength Indicator */}\n {password && passwordStrength && (\n <div id=\"password-strength\" className=\"mt-2\">\n <div className=\"flex items-center justify-between mb-1\">\n <span className=\"text-xs text-gray-600\">Password strength:</span>\n <Badge\n variant={\n passwordStrength.color === 'success' ? 'success' :\n passwordStrength.color === 'warning' ? 'warning' : 'danger'\n }\n className=\"text-xs\"\n >\n {passwordStrength.label}\n </Badge>\n </div>\n <div className=\"w-full bg-gray-200 rounded-full h-2\">\n <div\n className={cn(\n 'h-2 rounded-full transition-all duration-300',\n passwordStrength.color === 'success' && 'bg-success-500',\n passwordStrength.color === 'warning' && 'bg-warning-500',\n passwordStrength.color === 'danger' && 'bg-danger-500'\n )}\n style={{ width: `${(passwordStrength.score / 6) * 100}%` }}\n />\n </div>\n </div>\n )}\n \n {errors.password && (\n <p\n id=\"password-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.password.message}\n </p>\n )}\n </div>\n\n {/* Confirm Password Field */}\n <div>\n <label\n htmlFor=\"confirmPassword\"\n className=\"block text-sm font-medium text-gray-700 mb-2\"\n >\n Confirm Password\n </label>\n <div className=\"relative\">\n <Lock className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400\" />\n <Input\n id=\"confirmPassword\"\n type={showConfirmPassword ? 'text' : 'password'}\n placeholder=\"Confirm your password\"\n className={cn(\n 'pl-10 pr-10',\n errors.confirmPassword && 'border-danger-500 focus:ring-danger-500'\n )}\n aria-invalid={errors.confirmPassword ? 'true' : 'false'}\n aria-describedby={errors.confirmPassword ? 'confirm-password-error' : undefined}\n {...register('confirmPassword')}\n />\n <button\n type=\"button\"\n onClick={toggleConfirmPasswordVisibility}\n className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600\"\n aria-label={showConfirmPassword ? 'Hide password' : 'Show password'}\n >\n {showConfirmPassword ? (\n <EyeOff className=\"h-5 w-5\" />\n ) : (\n <Eye className=\"h-5 w-5\" />\n )}\n </button>\n </div>\n {errors.confirmPassword && (\n <p\n id=\"confirm-password-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.confirmPassword.message}\n </p>\n )}\n </div>\n\n {/* Terms of Service */}\n <div>\n <label className=\"flex items-start\">\n <Checkbox\n className=\"mt-1\"\n {...register('acceptTerms')}\n aria-invalid={errors.acceptTerms ? 'true' : 'false'}\n aria-describedby={errors.acceptTerms ? 'terms-error' : undefined}\n />\n <span className=\"ml-2 text-sm text-gray-600\">\n I agree to the{' '}\n <a\n href=\"#\"\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Terms of Service\n </a>{' '}\n and{' '}\n <a\n href=\"#\"\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Privacy Policy\n </a>\n </span>\n </label>\n {errors.acceptTerms && (\n <p\n id=\"terms-error\"\n className=\"mt-1 text-sm text-danger-600\"\n role=\"alert\"\n >\n {errors.acceptTerms.message}\n </p>\n )}\n </div>\n\n {/* Submit Button */}\n <Button\n type=\"submit\"\n variant=\"primary\"\n className=\"w-full\"\n disabled={isSubmitting || isLoading}\n >\n {isSubmitting || isLoading ? (\n <>\n <Spinner size=\"sm\" className=\"mr-2\" />\n Creating account...\n </>\n ) : (\n 'Create Account'\n )}\n </Button>\n </form>\n\n {/* Login Link */}\n <div className=\"mt-6 text-center\">\n <p className=\"text-sm text-gray-600\">\n Already have an account?{' '}\n <button\n type=\"button\"\n onClick={onLoginClick}\n className=\"text-primary-600 hover:text-primary-500 font-medium\"\n >\n Sign in\n </button>\n </p>\n </div>\n </div>\n </div>\n );\n};"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
@@ -9,6 +9,7 @@ import { Badge } from '../Badge/Badge.js';
|
|
|
9
9
|
import { Toast, showToast } from '../Toast/Toast.js';
|
|
10
10
|
import { showcaseRegistry } from './showcaseRegistry.js';
|
|
11
11
|
import { componentDocs } from './componentDocs.js';
|
|
12
|
+
import { useDarkMode } from '../../hooks/useDarkMode.js';
|
|
12
13
|
|
|
13
14
|
// Component categories and their items
|
|
14
15
|
const componentCategories = {
|
|
@@ -77,7 +78,7 @@ const ComponentShowcase = ({ className }) => {
|
|
|
77
78
|
});
|
|
78
79
|
const [expandedCategories, setExpandedCategories] = useState(["Forms"]);
|
|
79
80
|
const [viewMode, setViewMode] = useState("desktop");
|
|
80
|
-
const
|
|
81
|
+
const { isDarkMode, toggle: toggleDarkMode } = useDarkMode();
|
|
81
82
|
const [copiedCode, setCopiedCode] = useState(null);
|
|
82
83
|
const sidebarRef = useRef(null);
|
|
83
84
|
const [focusedIndex, setFocusedIndex] = useState(-1);
|
|
@@ -154,7 +155,7 @@ const ComponentShowcase = ({ className }) => {
|
|
|
154
155
|
return "w-full";
|
|
155
156
|
}
|
|
156
157
|
};
|
|
157
|
-
return (jsxs("div", { className: cn("flex h-screen bg-gray-50 dark:bg-gray-950",
|
|
158
|
+
return (jsxs("div", { className: cn("flex h-screen bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100", isDarkMode && "dark", className), children: [jsx(Toast, {}), !sidebarCollapsed && (jsx("div", { className: "fixed inset-0 bg-black/50 dark:bg-black/80 z-10 lg:hidden backdrop-blur-sm transition-opacity", onClick: () => setSidebarCollapsed(true) })), jsxs("div", { ref: sidebarRef, className: cn("bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 transition-all duration-300 flex flex-col z-20 shrink-0", "max-lg:absolute max-lg:h-full max-lg:shadow-2xl", sidebarCollapsed ? "lg:w-16 max-lg:w-80 max-lg:-translate-x-full" : "w-80 max-lg:translate-x-0"), tabIndex: sidebarCollapsed ? -1 : 0, onKeyDown: handleKeyNavigation, "aria-label": "Component navigation", children: [jsxs("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800", children: [jsxs("div", { className: cn("flex items-center justify-between mb-4", sidebarCollapsed ? "lg:hidden" : ""), children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(Palette, { className: "h-4 w-4 text-white" }) }), jsx("span", { className: "font-bold text-lg text-gray-900 dark:text-white", children: "Beyond UI" })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(true), children: jsx(ChevronRight, { className: "h-4 w-4" }) })] }), jsx("div", { className: cn("justify-center", sidebarCollapsed ? "flex max-lg:hidden" : "hidden"), children: jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(false), children: jsx(Palette, { className: "h-4 w-4" }) }) }), jsxs("div", { className: cn("relative", sidebarCollapsed ? "lg:hidden" : ""), children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 dark:text-gray-500" }), jsx(Input, { placeholder: "Search components...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-10" })] })] }), jsx("nav", { className: "flex-1 p-4 overflow-y-auto", children: Object.entries(filteredCategories).map(([categoryName, categoryData]) => (jsxs("div", { className: "mb-4", children: [jsxs("button", { onClick: () => {
|
|
158
159
|
if (typeof window !== "undefined" && window.innerWidth < 1024) {
|
|
159
160
|
toggleCategory(categoryName);
|
|
160
161
|
}
|
|
@@ -172,7 +173,7 @@ const ComponentShowcase = ({ className }) => {
|
|
|
172
173
|
}, className: cn("flex items-center w-full p-2 text-sm rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", isActive
|
|
173
174
|
? "bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-400 border-r-2 border-primary-600 dark:border-primary-500"
|
|
174
175
|
: "text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 hover:text-gray-900 dark:hover:text-white"), "aria-current": isActive ? "page" : undefined, children: component.name }, component.id));
|
|
175
|
-
}) }))] }, categoryName))) })] }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [jsx("header", { className: "bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 p-4", children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center space-x-4", children: [jsx(Button, { variant: "ghost", size: "sm", className: "lg:hidden p-2 -ml-2 shrink-0", onClick: () => setSidebarCollapsed(false), "aria-label": "Open component menu", children: jsx(Menu, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }) }), jsx("h1", { className: "text-xl md:text-2xl font-bold text-gray-900 dark:text-white truncate", children: currentDoc?.name || "Component Showcase" }), currentDoc && jsx(Badge, { variant: "outline", children: currentDoc.name })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsxs("div", { className: "flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === "desktop" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("desktop"), children: jsx(Monitor, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "tablet" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("tablet"), children: jsx(Tablet, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "mobile" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("mobile"), children: jsx(Smartphone, { className: "h-4 w-4" }) })] }), jsx(Button, { variant: "ghost", size: "sm", onClick:
|
|
176
|
+
}) }))] }, categoryName))) })] }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [jsx("header", { className: "bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 p-4", children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center space-x-4", children: [jsx(Button, { variant: "ghost", size: "sm", className: "lg:hidden p-2 -ml-2 shrink-0", onClick: () => setSidebarCollapsed(false), "aria-label": "Open component menu", children: jsx(Menu, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }) }), jsx("h1", { className: "text-xl md:text-2xl font-bold text-gray-900 dark:text-white truncate", children: currentDoc?.name || "Component Showcase" }), currentDoc && jsx(Badge, { variant: "outline", children: currentDoc.name })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsxs("div", { className: "flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === "desktop" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("desktop"), children: jsx(Monitor, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "tablet" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("tablet"), children: jsx(Tablet, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "mobile" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("mobile"), children: jsx(Smartphone, { className: "h-4 w-4" }) })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: toggleDarkMode, children: isDarkMode ? (jsx(Sun, { className: "h-4 w-4" })) : (jsx(Moon, { className: "h-4 w-4" })) })] })] }) }), jsx("main", { className: "flex-1 overflow-auto p-6 bg-gray-50 dark:bg-gray-950", children: currentDoc ? (jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [jsx("div", { children: jsx("p", { className: "text-lg text-gray-600 dark:text-gray-400", children: currentDoc.description }) }), jsxs("div", { children: [jsxs("div", { className: "flex gap-3 mb-4", role: "tablist", "aria-label": "Component details tabs", children: [jsxs(Button, { variant: activeTab === "preview" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("preview"), role: "tab", "aria-selected": activeTab === "preview", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Preview"] }), jsxs(Button, { variant: activeTab === "code" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("code"), role: "tab", "aria-selected": activeTab === "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code"] }), jsxs(Button, { variant: activeTab === "props" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("props"), role: "tab", "aria-selected": activeTab === "props", children: [jsx(Settings, { className: "h-4 w-4 mr-2" }), "Props"] })] }), jsxs("div", { children: [jsx("div", { className: "mt-6", children: jsx("div", { className: "bg-white dark:bg-gray-900 rounded-lg shadow p-6", children: jsx("div", { className: cn("mx-auto transition-all duration-300", getViewportClass()), children: jsx("div", { children: showcaseRegistry[selectedComponent]
|
|
176
177
|
? React.createElement(showcaseRegistry[selectedComponent])
|
|
177
178
|
: null }) }) }) }), activeTab === "code" && (jsx("div", { className: "mt-6", role: "tabpanel", "aria-label": "Code example", children: jsxs("div", { className: "bg-white dark:bg-gray-900 rounded-lg shadow p-6", children: [jsxs("div", { className: "flex flex-row items-center justify-between", children: [jsx("h2", { className: "text-lg font-semibold mb-0 dark:text-white", children: "Usage Example" }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(currentExample), children: [copiedCode === currentExample ? (jsx(Check, { className: "h-4 w-4 mr-2" })) : (jsx(Copy, { className: "h-4 w-4 mr-2" })), "Copy"] })] }), jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto", children: jsx("code", { children: currentExample }) })] }) })), activeTab === "props" && (jsx("div", { className: "mt-6", role: "tabpanel", "aria-label": "Component props", children: jsxs("div", { className: "bg-white dark:bg-gray-900 rounded-lg shadow p-6", children: [jsx("h2", { className: "text-lg font-semibold mb-4 dark:text-white", children: "Component Props" }), jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: "w-full border-collapse", children: [jsx("thead", { children: jsxs("tr", { className: "border-b border-gray-200 dark:border-gray-800", children: [jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-gray-100", children: "Prop" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-gray-100", children: "Type" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-gray-100", children: "Default" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-gray-100", children: "Description" })] }) }), jsx("tbody", { children: currentProps.length > 0 ? (currentProps.map((prop, index) => (jsxs("tr", { className: "border-b border-gray-100 dark:border-gray-800/50", children: [jsxs("td", { className: "p-3", children: [jsx("code", { className: "bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300", children: prop.name }), prop.required && (jsx(Badge, { variant: "danger", className: "ml-2 text-xs", children: "Required" }))] }), jsx("td", { className: "p-3 text-gray-600 dark:text-gray-400", children: prop.type }), jsx("td", { className: "p-3 text-gray-600 dark:text-gray-400", children: prop.default ? (jsx("code", { className: "bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300", children: prop.default })) : null }), jsx("td", { className: "p-3 text-gray-600 dark:text-gray-400", children: prop.description })] }, prop.name ?? index)))) : (jsx("tr", { children: jsx("td", { colSpan: 4, className: "p-4 text-center text-gray-500 dark:text-gray-400", children: "No props documented for this component yet." }) })) })] }) })] }) }))] })] })] })) : (jsx("div", { className: "flex items-center justify-center h-full", children: jsxs("div", { className: "text-center", children: [jsx(Book, { className: "h-16 w-16 text-gray-400 dark:text-gray-600 mx-auto mb-4" }), jsx("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-2", children: "Select a Component" }), jsx("p", { className: "text-gray-600 dark:text-gray-400", children: "Choose a component from the sidebar to view its documentation and examples." })] }) })) })] })] }));
|
|
178
179
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentShowcase.js","sources":["../../../src/components/ComponentShowcase/ComponentShowcase.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useMemo, useRef, useEffect } from \"react\";\nimport {\n Search,\n Copy,\n Check,\n Monitor,\n Tablet,\n Smartphone,\n Sun,\n Moon,\n ChevronRight,\n ChevronDown,\n Code,\n Eye,\n Book,\n Palette,\n Layout,\n MousePointer,\n AlertCircle,\n BarChart3,\n Settings,\n Shield,\n Menu\n} from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button\";\nimport { Input } from \"../Input\";\nimport { Badge } from \"../Badge\";\nimport { Toast, showToast } from \"../Toast\";\n\nimport { showcaseRegistry } from \"./showcaseRegistry\";\nimport { componentDocs } from \"./componentDocs\";\n\n// Component categories and their items\nconst componentCategories = {\n Forms: {\n icon: <MousePointer className=\"h-4 w-4\" />,\n components: [\n { name: \"Button\", id: \"button\" },\n { name: \"Input\", id: \"input\" },\n { name: \"Textarea\", id: \"textarea\" },\n { name: \"Checkbox\", id: \"checkbox\" },\n { name: \"Switch\", id: \"switch\" }\n ]\n },\n \"Data Display\": {\n icon: <BarChart3 className=\"h-4 w-4\" />,\n components: [\n { name: \"Card\", id: \"card\" },\n { name: \"Badge\", id: \"badge\" },\n { name: \"Avatar\", id: \"avatar\" },\n { name: \"StatsCard\", id: \"statscard\" },\n { name: \"Tabs\", id: \"tabs\" },\n { name: \"DataTable\", id: \"datatable\" }\n ]\n },\n Feedback: {\n icon: <AlertCircle className=\"h-4 w-4\" />,\n components: [\n { name: \"Alert\", id: \"alert\" },\n { name: \"Toast\", id: \"toast\" },\n { name: \"Modal\", id: \"modal\" },\n { name: \"Spinner\", id: \"spinner\" },\n { name: \"Skeleton\", id: \"skeleton\" },\n { name: \"Chat Widget\", id: \"chatwidget\" }\n ]\n },\n Authentication: {\n icon: <Shield className=\"h-4 w-4\" />,\n components: [\n { name: \"Auth System\", id: \"auth\" },\n { name: \"Login Page\", id: \"login\" },\n { name: \"Signup Page\", id: \"signup\" },\n { name: \"Password Reset\", id: \"password-reset\" },\n { name: \"!isAuthenticated Shield\", id: \"shield\" },\n ]\n },\n Layout: {\n icon: <Layout className=\"h-4 w-4\" />,\n components: [\n { name: \"DashboardLayout\", id: \"dashboard-layout\" },\n { name: \"Page Layout\", id: \"page-layout\" },\n { name: \"DashboardGrid\", id: \"dashboard-grid\" },\n { name: \"Sidebar\", id: \"sidebar\" },\n { name: \"Navbar\", id: \"navbar\" }\n ]\n }\n};\n\n// Prop documentation interface\ninterface PropDoc {\n name: string;\n type: string;\n default?: string;\n description?: string;\n required?: boolean;\n}\n\n// Props\ninterface ComponentShowcaseProps {\n className?: string;\n}\n\nexport const ComponentShowcase: React.FC<ComponentShowcaseProps> = ({ className }) => {\n const [selectedComponent, setSelectedComponent] = useState(\"button\");\n const [activeTab, setActiveTab] = useState<\"preview\" | \"code\" | \"props\">(\"preview\");\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {\n if (typeof window !== \"undefined\") {\n return window.innerWidth < 1024;\n }\n return false; // Default for SSR\n });\n const [expandedCategories, setExpandedCategories] = useState<string[]>([\"Forms\"]);\n const [viewMode, setViewMode] = useState<\"desktop\" | \"tablet\" | \"mobile\">(\"desktop\");\n const [darkMode, setDarkMode] = useState(false);\n const [copiedCode, setCopiedCode] = useState<string | null>(null);\n const sidebarRef = useRef<HTMLDivElement | null>(null);\n const [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\n const toggleCategory = (category: string) => {\n setExpandedCategories((prev) =>\n prev.includes(category)\n ? prev.filter((c) => c !== category)\n : [...prev, category]\n );\n };\n\n const flatComponents = useMemo(() => {\n return Object.values(componentCategories).flatMap((category) =>\n category.components.map((component) => component.id)\n );\n }, []);\n\n useEffect(() => {\n if (focusedIndex >= 0 && sidebarRef.current && !sidebarCollapsed) {\n const buttons = sidebarRef.current.querySelectorAll<HTMLButtonElement>(\n '[data-component-id]'\n );\n const target = buttons[focusedIndex];\n if (target) {\n target.focus();\n }\n }\n }, [focusedIndex, sidebarCollapsed]);\n\n const handleKeyNavigation = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (sidebarCollapsed) return;\n\n const currentIndex = flatComponents.indexOf(selectedComponent);\n\n if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n event.preventDefault();\n const nextIndex = currentIndex === flatComponents.length - 1 ? 0 : currentIndex + 1;\n setFocusedIndex(nextIndex);\n setSelectedComponent(flatComponents[nextIndex]);\n } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n event.preventDefault();\n const prevIndex = currentIndex <= 0 ? flatComponents.length - 1 : currentIndex - 1;\n setFocusedIndex(prevIndex);\n setSelectedComponent(flatComponents[prevIndex]);\n }\n };\n\n const copyToClipboard = async (code: string) => {\n try {\n if (navigator?.clipboard?.writeText) {\n await navigator.clipboard.writeText(code);\n setCopiedCode(code);\n showToast.success(\"Code copied to clipboard!\");\n setTimeout(() => setCopiedCode(null), 2000);\n } else {\n throw new Error(\"Clipboard API unavailable\");\n }\n } catch (err) {\n showToast.error(\"Failed to copy code\");\n }\n };\n\n const filteredCategories = Object.entries(componentCategories).reduce(\n (acc, [categoryName, categoryData]) => {\n const filteredComponents = categoryData.components.filter((component) =>\n component.name.toLowerCase().includes(searchQuery.toLowerCase())\n );\n\n if (filteredComponents.length > 0) {\n (acc as any)[categoryName] = {\n ...categoryData,\n components: filteredComponents\n };\n }\n\n return acc;\n },\n {} as Partial<typeof componentCategories>\n );\n\n const currentDoc = componentDocs[selectedComponent as keyof typeof componentDocs];\n const currentExample = currentDoc?.example ?? '';\n const currentProps = (currentDoc?.props ?? []) as PropDoc[];\n\n const getViewportClass = () => {\n switch (viewMode) {\n case \"tablet\":\n return \"max-w-2xl\";\n case \"mobile\":\n return \"max-w-sm\";\n default:\n return \"w-full\";\n }\n };\n\n return (\n <div className={cn(\"flex h-screen bg-gray-50 dark:bg-gray-950\", darkMode && \"dark\", className)}>\n <Toast />\n\n {/* Mobile Overlay for Showcase Sidebar */}\n {!sidebarCollapsed && (\n <div\n className=\"fixed inset-0 bg-black/50 dark:bg-black/80 z-10 lg:hidden backdrop-blur-sm transition-opacity\"\n onClick={() => setSidebarCollapsed(true)}\n />\n )}\n\n {/* Sidebar */}\n <div\n ref={sidebarRef}\n className={cn(\n \"bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 transition-all duration-300 flex flex-col z-20 shrink-0\",\n \"max-lg:absolute max-lg:h-full max-lg:shadow-2xl\",\n sidebarCollapsed ? \"lg:w-16 max-lg:w-80 max-lg:-translate-x-full\" : \"w-80 max-lg:translate-x-0\"\n )}\n tabIndex={sidebarCollapsed ? -1 : 0}\n onKeyDown={handleKeyNavigation}\n aria-label=\"Component navigation\"\n >\n {/* Sidebar Header */}\n <div className=\"p-4 border-b border-gray-200 dark:border-gray-800\">\n <div className={cn(\"flex items-center justify-between mb-4\", sidebarCollapsed ? \"lg:hidden\" : \"\")}>\n <div className=\"flex items-center space-x-2\">\n <div className=\"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center\">\n <Palette className=\"h-4 w-4 text-white\" />\n </div>\n <span className=\"font-bold text-lg text-gray-900 dark:text-white\">Beyond UI</span>\n </div>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setSidebarCollapsed(true)}\n >\n <ChevronRight className=\"h-4 w-4\" />\n </Button>\n </div>\n\n <div className={cn(\"justify-center\", sidebarCollapsed ? \"flex max-lg:hidden\" : \"hidden\")}>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setSidebarCollapsed(false)}\n >\n <Palette className=\"h-4 w-4\" />\n </Button>\n </div>\n\n <div className={cn(\"relative\", sidebarCollapsed ? \"lg:hidden\" : \"\")}>\n <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 dark:text-gray-500\" />\n <Input\n placeholder=\"Search components...\"\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n className=\"pl-10\"\n />\n </div>\n </div>\n\n {/* Navigation */}\n <nav className=\"flex-1 p-4 overflow-y-auto\">\n {Object.entries(filteredCategories).map(([categoryName, categoryData]) => (\n <div key={categoryName} className=\"mb-4\">\n <button\n onClick={() => {\n if (typeof window !== \"undefined\" && window.innerWidth < 1024) {\n toggleCategory(categoryName);\n } else if (!sidebarCollapsed) {\n toggleCategory(categoryName);\n }\n }}\n className={cn(\n \"flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors\",\n \"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300\",\n sidebarCollapsed ? \"lg:justify-center max-lg:justify-between\" : \"justify-between\"\n )}\n >\n <div className=\"flex items-center space-x-2\">\n {categoryData.icon}\n <span className={cn(sidebarCollapsed ? \"lg:hidden\" : \"\")}>{categoryName}</span>\n </div>\n <ChevronDown\n className={cn(\n \"h-4 w-4 transition-transform\",\n expandedCategories.includes(categoryName) && \"rotate-180\",\n sidebarCollapsed ? \"lg:hidden\" : \"\"\n )}\n />\n </button>\n\n {expandedCategories.includes(categoryName) && (\n <div className={cn(\"mt-2 ml-6 space-y-1\", sidebarCollapsed ? \"lg:hidden\" : \"\")}>\n {categoryData.components.map((component) => {\n const isActive = selectedComponent === component.id;\n return (\n <button\n key={component.id}\n data-component-id={component.id}\n onClick={() => {\n setSelectedComponent(component.id);\n setFocusedIndex(flatComponents.indexOf(component.id));\n if (window.innerWidth < 1024) {\n setSidebarCollapsed(true);\n }\n }}\n className={cn(\n \"flex items-center w-full p-2 text-sm rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\",\n isActive\n ? \"bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-400 border-r-2 border-primary-600 dark:border-primary-500\"\n : \"text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 hover:text-gray-900 dark:hover:text-white\"\n )}\n aria-current={isActive ? \"page\" : undefined}\n >\n {component.name}\n </button>\n );\n })}\n </div>\n )}\n </div>\n ))}\n </nav>\n </div>\n\n {/* Main Content */}\n <div className=\"flex-1 flex flex-col overflow-hidden\">\n {/* Header */}\n <header className=\"bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 p-4\">\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center space-x-4\">\n {/* Mobile Menu Toggle */}\n <Button\n variant=\"ghost\"\n size=\"sm\"\n className=\"lg:hidden p-2 -ml-2 shrink-0\"\n onClick={() => setSidebarCollapsed(false)}\n aria-label=\"Open component menu\"\n >\n <Menu className=\"h-5 w-5 text-gray-700 dark:text-gray-300\" />\n </Button>\n \n <h1 className=\"text-xl md:text-2xl font-bold text-gray-900 dark:text-white truncate\">\n {currentDoc?.name || \"Component Showcase\"}\n </h1>\n {currentDoc && <Badge variant=\"outline\">{currentDoc.name}</Badge>}\n </div>\n\n <div className=\"flex items-center space-x-2\">\n {/* Viewport Controls */}\n <div className=\"flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1\">\n <Button\n variant={viewMode === \"desktop\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setViewMode(\"desktop\")}\n >\n <Monitor className=\"h-4 w-4\" />\n </Button>\n <Button\n variant={viewMode === \"tablet\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setViewMode(\"tablet\")}\n >\n <Tablet className=\"h-4 w-4\" />\n </Button>\n <Button\n variant={viewMode === \"mobile\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setViewMode(\"mobile\")}\n >\n <Smartphone className=\"h-4 w-4\" />\n </Button>\n </div>\n\n {/* Dark Mode Toggle */}\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setDarkMode(!darkMode)}\n >\n {darkMode ? (\n <Sun className=\"h-4 w-4\" />\n ) : (\n <Moon className=\"h-4 w-4\" />\n )}\n </Button>\n </div>\n </div>\n </header>\n\n {/* Content */}\n <main className=\"flex-1 overflow-auto p-6\">\n {currentDoc ? (\n <div className=\"max-w-6xl mx-auto space-y-8\">\n {/* Description */}\n <div>\n <p className=\"text-lg text-gray-600 dark:text-gray-400\">{currentDoc.description}</p>\n </div>\n\n {/* Tabs */}\n <div>\n <div className=\"flex gap-3 mb-4\" role=\"tablist\" aria-label=\"Component details tabs\">\n <Button\n variant={activeTab === \"preview\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setActiveTab(\"preview\")}\n role=\"tab\"\n aria-selected={activeTab === \"preview\"}\n >\n <Eye className=\"h-4 w-4 mr-2\" />\n Preview\n </Button>\n <Button\n variant={activeTab === \"code\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setActiveTab(\"code\")}\n role=\"tab\"\n aria-selected={activeTab === \"code\"}\n >\n <Code className=\"h-4 w-4 mr-2\" />\n Code\n </Button>\n <Button\n variant={activeTab === \"props\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setActiveTab(\"props\")}\n role=\"tab\"\n aria-selected={activeTab === \"props\"}\n >\n <Settings className=\"h-4 w-4 mr-2\" />\n Props\n </Button>\n </div>\n <div>\n <div className=\"mt-6\">\n <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n {/* Preview */}\n <div\n className={cn(\n \"mx-auto transition-all duration-300\",\n getViewportClass()\n )}\n >\n <div>\n {showcaseRegistry[selectedComponent]\n ? React.createElement(\n showcaseRegistry[selectedComponent]\n )\n : null}\n </div>\n </div>\n </div>\n </div>\n\n {activeTab === \"code\" && (\n <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Code example\">\n <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n <div className=\"flex flex-row items-center justify-between\">\n <h2 className=\"text-lg font-semibold mb-0 dark:text-white\">\n Usage Example\n </h2>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => copyToClipboard(currentExample)}\n >\n {copiedCode === currentExample ? (\n <Check className=\"h-4 w-4 mr-2\" />\n ) : (\n <Copy className=\"h-4 w-4 mr-2\" />\n )}\n Copy\n </Button>\n </div>\n <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto\">\n <code>{currentExample}</code>\n </pre>\n </div>\n </div>\n )}\n\n {activeTab === \"props\" && (\n <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Component props\">\n <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n <h2 className=\"text-lg font-semibold mb-4 dark:text-white\">\n Component Props\n </h2>\n <div className=\"overflow-x-auto\">\n <table className=\"w-full border-collapse\">\n <thead>\n <tr className=\"border-b border-gray-200 dark:border-gray-800\">\n <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n Prop\n </th>\n <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n Type\n </th>\n <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n Default\n </th>\n <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n Description\n </th>\n </tr>\n </thead>\n <tbody>\n {currentProps.length > 0 ? (\n currentProps.map((prop: PropDoc, index) => (\n <tr key={prop.name ?? index} className=\"border-b border-gray-100 dark:border-gray-800/50\">\n <td className=\"p-3\">\n <code className=\"bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300\">\n {prop.name}\n </code>\n {prop.required && (\n <Badge variant=\"danger\" className=\"ml-2 text-xs\">\n Required\n </Badge>\n )}\n </td>\n <td className=\"p-3 text-gray-600 dark:text-gray-400\">{prop.type}</td>\n <td className=\"p-3 text-gray-600 dark:text-gray-400\">\n {prop.default ? (\n <code className=\"bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300\">\n {prop.default}\n </code>\n ) : null}\n </td>\n <td className=\"p-3 text-gray-600 dark:text-gray-400\">{prop.description}</td>\n </tr>\n ))\n ) : (\n <tr>\n <td colSpan={4} className=\"p-4 text-center text-gray-500 dark:text-gray-400\">\n No props documented for this component yet.\n </td>\n </tr>\n )}\n </tbody>\n </table>\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"flex items-center justify-center h-full\">\n <div className=\"text-center\">\n <Book className=\"h-16 w-16 text-gray-400 dark:text-gray-600 mx-auto mb-4\" />\n <h2 className=\"text-xl font-semibold text-gray-900 dark:text-white mb-2\">\n Select a Component\n </h2>\n <p className=\"text-gray-600 dark:text-gray-400\">\n Choose a component from the sidebar to view its documentation and examples.\n </p>\n </div>\n </div>\n )}\n </main>\n </div>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;AAkCA;AACA,MAAM,mBAAmB,GAAG;AAC1B,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAEA,GAAA,CAAC,YAAY,IAAC,SAAS,EAAC,SAAS,EAAA,CAAG;AAC1C,QAAA,UAAU,EAAE;AACV,YAAA,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE;AAChC,YAAA,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE;AAC9B,YAAA,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE;AACpC,YAAA,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE;AACpC,YAAA,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ;AAC/B;AACF,KAAA;AACD,IAAA,cAAc,EAAE;AACd,QAAA,IAAI,EAAEA,GAAA,CAAC,SAAS,IAAC,SAAS,EAAC,SAAS,EAAA,CAAG;AACvC,QAAA,UAAU,EAAE;AACV,YAAA,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE;AAC5B,YAAA,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE;AAC9B,YAAA,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE;AAChC,YAAA,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,EAAE;AACtC,YAAA,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE;AAC5B,YAAA,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW;AACrC;AACF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAEA,GAAA,CAAC,WAAW,IAAC,SAAS,EAAC,SAAS,EAAA,CAAG;AACzC,QAAA,UAAU,EAAE;AACV,YAAA,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE;AAC9B,YAAA,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE;AAC9B,YAAA,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE;AAC9B,YAAA,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE;AAClC,YAAA,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE;AACpC,YAAA,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,YAAY;AACxC;AACF,KAAA;AACD,IAAA,cAAc,EAAE;AACd,QAAA,IAAI,EAAEA,GAAA,CAAC,MAAM,IAAC,SAAS,EAAC,SAAS,EAAA,CAAG;AACpC,QAAA,UAAU,EAAE;AACV,YAAA,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,EAAE;AACnC,YAAA,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,OAAO,EAAE;AACnC,YAAA,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,QAAQ,EAAE;AACrC,YAAA,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,gBAAgB,EAAE;AAChD,YAAA,EAAE,IAAI,EAAE,yBAAyB,EAAE,EAAE,EAAE,QAAQ,EAAE;AAClD;AACF,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAEA,GAAA,CAAC,MAAM,IAAC,SAAS,EAAC,SAAS,EAAA,CAAG;AACpC,QAAA,UAAU,EAAE;AACV,YAAA,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE,EAAE,kBAAkB,EAAE;AACnD,YAAA,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,aAAa,EAAE;AAC1C,YAAA,EAAE,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE,gBAAgB,EAAE;AAC/C,YAAA,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE;AAClC,YAAA,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ;AAC/B;AACF;CACF;MAgBY,iBAAiB,GAAqC,CAAC,EAAE,SAAS,EAAE,KAAI;IACnF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC;IACpE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAA+B,SAAS,CAAC;IACnF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;IAClD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,MAAK;AAC5D,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AACjC,YAAA,OAAO,MAAM,CAAC,UAAU,GAAG,IAAI;QACjC;QACA,OAAO,KAAK,CAAC;AACf,IAAA,CAAC,CAAC;AACF,IAAA,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAW,CAAC,OAAO,CAAC,CAAC;IACjF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAkC,SAAS,CAAC;IACpF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC/C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC;AACjE,IAAA,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC;IACtD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC;AAE5D,IAAA,MAAM,cAAc,GAAG,CAAC,QAAgB,KAAI;QAC1C,qBAAqB,CAAC,CAAC,IAAI,KACzB,IAAI,CAAC,QAAQ,CAAC,QAAQ;AACpB,cAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,QAAQ;cACjC,CAAC,GAAG,IAAI,EAAE,QAAQ,CAAC,CACxB;AACH,IAAA,CAAC;AAED,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,MAAK;AAClC,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,KACzD,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,EAAE,CAAC,CACrD;IACH,CAAC,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;QACb,IAAI,YAAY,IAAI,CAAC,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,gBAAgB,EAAE;YAChE,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,gBAAgB,CACjD,qBAAqB,CACtB;AACD,YAAA,MAAM,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC;YACpC,IAAI,MAAM,EAAE;gBACV,MAAM,CAAC,KAAK,EAAE;YAChB;QACF;AACF,IAAA,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;AAEpC,IAAA,MAAM,mBAAmB,GAAG,CAAC,KAA0C,KAAI;AACzE,QAAA,IAAI,gBAAgB;YAAE;QAEtB,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,CAAC,iBAAiB,CAAC;AAE9D,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;YAC3D,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,MAAM,SAAS,GAAG,YAAY,KAAK,cAAc,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC;YACnF,eAAe,CAAC,SAAS,CAAC;AAC1B,YAAA,oBAAoB,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QACjD;AAAO,aAAA,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YAC/D,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,MAAM,SAAS,GAAG,YAAY,IAAI,CAAC,GAAG,cAAc,CAAC,MAAM,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC;YAClF,eAAe,CAAC,SAAS,CAAC;AAC1B,YAAA,oBAAoB,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QACjD;AACF,IAAA,CAAC;AAED,IAAA,MAAM,eAAe,GAAG,OAAO,IAAY,KAAI;AAC7C,QAAA,IAAI;AACF,YAAA,IAAI,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE;gBACnC,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;gBACzC,aAAa,CAAC,IAAI,CAAC;AACnB,gBAAA,SAAS,CAAC,OAAO,CAAC,2BAA2B,CAAC;gBAC9C,UAAU,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC;YAC7C;iBAAO;AACL,gBAAA,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC;YAC9C;QACF;QAAE,OAAO,GAAG,EAAE;AACZ,YAAA,SAAS,CAAC,KAAK,CAAC,qBAAqB,CAAC;QACxC;AACF,IAAA,CAAC;IAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,MAAM,CACnE,CAAC,GAAG,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,KAAI;AACpC,QAAA,MAAM,kBAAkB,GAAG,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,SAAS,KAClE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CACjE;AAED,QAAA,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;YAChC,GAAW,CAAC,YAAY,CAAC,GAAG;AAC3B,gBAAA,GAAG,YAAY;AACf,gBAAA,UAAU,EAAE;aACb;QACH;AAEA,QAAA,OAAO,GAAG;IACZ,CAAC,EACD,EAAyC,CAC1C;AAED,IAAA,MAAM,UAAU,GAAG,aAAa,CAAC,iBAA+C,CAAC;AACjF,IAAA,MAAM,cAAc,GAAG,UAAU,EAAE,OAAO,IAAI,EAAE;IAChD,MAAM,YAAY,IAAI,UAAU,EAAE,KAAK,IAAI,EAAE,CAAc;IAE3D,MAAM,gBAAgB,GAAG,MAAK;QAC5B,QAAQ,QAAQ;AACd,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,WAAW;AACpB,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,UAAU;AACnB,YAAA;AACE,gBAAA,OAAO,QAAQ;;AAErB,IAAA,CAAC;AAED,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,2CAA2C,EAAE,QAAQ,IAAI,MAAM,EAAE,SAAS,CAAC,aAC5FD,GAAA,CAAC,KAAK,EAAA,EAAA,CAAG,EAGR,CAAC,gBAAgB,KAChBA,aACE,SAAS,EAAC,+FAA+F,EACzG,OAAO,EAAE,MAAM,mBAAmB,CAAC,IAAI,CAAC,EAAA,CACxC,CACH,EAGDC,IAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CACX,iIAAiI,EACjI,iDAAiD,EACjD,gBAAgB,GAAG,8CAA8C,GAAG,2BAA2B,CAChG,EACD,QAAQ,EAAE,gBAAgB,GAAG,EAAE,GAAG,CAAC,EACnC,SAAS,EAAE,mBAAmB,EAAA,YAAA,EACnB,sBAAsB,EAAA,QAAA,EAAA,CAGjCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAAA,CAChEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,wCAAwC,EAAE,gBAAgB,GAAG,WAAW,GAAG,EAAE,CAAC,aAC7FA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,aAC1CD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oEAAoE,EAAA,QAAA,EACjFA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,oBAAoB,EAAA,CAAG,EAAA,CACtC,EACNA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,iDAAiD,0BAAiB,CAAA,EAAA,CAC9E,EACNA,GAAA,CAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,mBAAmB,CAAC,IAAI,CAAC,EAAA,QAAA,EAExCA,GAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAAA,CAC7B,CAAA,EAAA,CACL,EAERA,aAAK,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,GAAG,oBAAoB,GAAG,QAAQ,CAAC,EAAA,QAAA,EACpFA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,mBAAmB,CAAC,KAAK,CAAC,YAEzCA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAAA,CACxB,EAAA,CACL,EAERC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,gBAAgB,GAAG,WAAW,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CAC/DD,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,6FAA6F,EAAA,CAAG,EAClHA,GAAA,CAAC,KAAK,IACJ,WAAW,EAAC,sBAAsB,EAClC,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC/C,SAAS,EAAC,OAAO,EAAA,CACjB,CAAA,EAAA,CACE,CAAA,EAAA,CACJ,EAGNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EACxC,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,EAAE,YAAY,CAAC,MACnEC,IAAA,CAAA,KAAA,EAAA,EAAwB,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,CACtCA,IAAA,CAAA,QAAA,EAAA,EACE,OAAO,EAAE,MAAK;wCACZ,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,UAAU,GAAG,IAAI,EAAE;4CAC7D,cAAc,CAAC,YAAY,CAAC;wCAC9B;6CAAO,IAAI,CAAC,gBAAgB,EAAE;4CAC5B,cAAc,CAAC,YAAY,CAAC;wCAC9B;oCACF,CAAC,EACD,SAAS,EAAE,EAAE,CACX,+EAA+E,EACjF,2EAA2E,EACzE,gBAAgB,GAAG,0CAA0C,GAAG,iBAAiB,CAClF,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CACzC,YAAY,CAAC,IAAI,EAClBD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,gBAAgB,GAAG,WAAW,GAAG,EAAE,CAAC,EAAA,QAAA,EAAG,YAAY,EAAA,CAAQ,CAAA,EAAA,CAC3E,EACJA,GAAA,CAAC,WAAW,EAAA,EACV,SAAS,EAAE,EAAE,CACX,8BAA8B,EAC9B,kBAAkB,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,YAAY,EACzD,gBAAgB,GAAG,WAAW,GAAG,EAAE,CACpC,EAAA,CACD,CAAA,EAAA,CACG,EAER,kBAAkB,CAAC,QAAQ,CAAC,YAAY,CAAC,KACxCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,WAAW,GAAG,EAAE,CAAC,EAAA,QAAA,EAC3E,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,KAAI;AACzC,wCAAA,MAAM,QAAQ,GAAG,iBAAiB,KAAK,SAAS,CAAC,EAAE;wCACnD,QACEA,qCAEqB,SAAS,CAAC,EAAE,EAC/B,OAAO,EAAE,MAAK;AACZ,gDAAA,oBAAoB,CAAC,SAAS,CAAC,EAAE,CAAC;gDAClC,eAAe,CAAC,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;AAC7D,gDAAA,IAAI,MAAM,CAAC,UAAU,GAAG,IAAI,EAAE;oDAC5B,mBAAmB,CAAC,IAAI,CAAC;gDAC3B;AACM,4CAAA,CAAC,EACD,SAAS,EAAE,EAAE,CACX,0IAA0I,EAC1I;AACA,kDAAE;kDACA,uHAAuH,CAC1H,EAAA,cAAA,EACa,QAAQ,GAAG,MAAM,GAAG,SAAS,EAAA,QAAA,EAE1C,SAAS,CAAC,IAAI,EAAA,EAjBV,SAAS,CAAC,EAAE,CAkBV;oCAEb,CAAC,CAAC,EAAA,CACE,CACP,CAAA,EAAA,EAxDO,YAAY,CAyDhB,CACP,CAAC,EAAA,CACE,CAAA,EAAA,CACF,EAGNC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,CAEnDD,GAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,6EAA6E,EAAA,QAAA,EAC7FC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAE1CD,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,8BAA8B,EACxC,OAAO,EAAE,MAAM,mBAAmB,CAAC,KAAK,CAAC,EAAA,YAAA,EAC9B,qBAAqB,EAAA,QAAA,EAEhCA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0CAA0C,EAAA,CAAG,EAAA,CACtD,EAETA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sEAAsE,EAAA,QAAA,EACjF,UAAU,EAAE,IAAI,IAAI,oBAAoB,EAAA,CACtC,EACJ,UAAU,IAAIA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAA,QAAA,EAAE,UAAU,CAAC,IAAI,EAAA,CAAS,CAAA,EAAA,CAC7D,EAENC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAE1CA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+DAA+D,EAAA,QAAA,EAAA,CAC5ED,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,QAAQ,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,EACrD,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,WAAW,CAAC,SAAS,CAAC,EAAA,QAAA,EAErCA,IAAC,OAAO,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAAA,CACxB,EACTA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,QAAQ,KAAK,QAAQ,GAAG,SAAS,GAAG,OAAO,EACpD,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,WAAW,CAAC,QAAQ,CAAC,EAAA,QAAA,EAEpCA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,SAAS,GAAG,EAAA,CACvB,EACTA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,QAAQ,KAAK,QAAQ,GAAG,SAAS,GAAG,OAAO,EACpD,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,WAAW,CAAC,QAAQ,CAAC,EAAA,QAAA,EAEpCA,GAAA,CAAC,UAAU,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAAA,CAC3B,CAAA,EAAA,CACL,EAGNA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,WAAW,CAAC,CAAC,QAAQ,CAAC,EAAA,QAAA,EAEpC,QAAQ,IACPA,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,SAAS,GAAG,KAE3BA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,CAC7B,EAAA,CACM,IACL,CAAA,EAAA,CACF,EAAA,CACC,EAGTA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,0BAA0B,EAAA,QAAA,EACvC,UAAU,IACTC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAE1CD,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EACEA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAE,UAAU,CAAC,WAAW,EAAA,CAAK,EAAA,CAChF,EAGNC,yBACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS,EAAA,YAAA,EAAY,wBAAwB,EAAA,QAAA,EAAA,CACjFA,IAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,EACtD,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,YAAY,CAAC,SAAS,CAAC,EACtC,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,SAAS,KAAK,SAAS,EAAA,QAAA,EAAA,CAEtCD,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,SAAA,CAAA,EAAA,CAEzB,EACTC,IAAA,CAAC,MAAM,IACL,OAAO,EAAE,SAAS,KAAK,MAAM,GAAG,SAAS,GAAG,OAAO,EACnD,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,YAAY,CAAC,MAAM,CAAC,EACnC,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,SAAS,KAAK,MAAM,EAAA,QAAA,EAAA,CAEnCD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,EAAA,MAAA,CAAA,EAAA,CAE1B,EACTC,IAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,SAAS,KAAK,OAAO,GAAG,SAAS,GAAG,OAAO,EACpD,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,YAAY,CAAC,OAAO,CAAC,EACpC,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,SAAS,KAAK,OAAO,EAAA,QAAA,EAAA,CAEpCD,GAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,aAE9B,CAAA,EAAA,CACL,EACNC,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACED,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,MAAM,EAAA,QAAA,EACnBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAE9DA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,qCAAqC,EACrC,gBAAgB,EAAE,CACnB,EAAA,QAAA,EAEDA,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EACG,gBAAgB,CAAC,iBAAiB;sEAC/B,KAAK,CAAC,aAAa,CACjB,gBAAgB,CAAC,iBAAiB,CAAC;AAEvC,sEAAE,IAAI,EAAA,CACJ,GACF,EAAA,CACF,EAAA,CACF,EAEL,SAAS,KAAK,MAAM,KACnBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,MAAM,EAAC,IAAI,EAAC,UAAU,EAAA,YAAA,EAAY,cAAc,YAC7DC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAAA,CAC9DA,cAAK,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,CACzDD,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,4CAA4C,8BAErD,EACLC,IAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,eAAe,CAAC,cAAc,CAAC,aAE7C,UAAU,KAAK,cAAc,IAC5BD,IAAC,KAAK,EAAA,EAAC,SAAS,EAAC,cAAc,GAAG,KAElCA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,GAAG,CAClC,EAAA,MAAA,CAAA,EAAA,CAEM,CAAA,EAAA,CACL,EACNA,aAAK,SAAS,EAAC,0DAA0D,EAAA,QAAA,EACvEA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,cAAc,EAAA,CAAQ,EAAA,CACzB,CAAA,EAAA,CACF,EAAA,CACF,CACP,EAEA,SAAS,KAAK,OAAO,KACpBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,MAAM,EAAC,IAAI,EAAC,UAAU,EAAA,YAAA,EAAY,iBAAiB,YAChEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAAA,CAC9DD,YAAI,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,iBAAA,EAAA,CAErD,EACLA,aAAK,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAC9BC,gBAAO,SAAS,EAAC,wBAAwB,EAAA,QAAA,EAAA,CACvCD,GAAA,CAAA,OAAA,EAAA,EAAA,QAAA,EACEC,aAAI,SAAS,EAAC,+CAA+C,EAAA,QAAA,EAAA,CAC3DD,YAAI,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAAA,MAAA,EAAA,CAErE,EACLA,YAAI,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAAA,MAAA,EAAA,CAErE,EACLA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAAA,SAAA,EAAA,CAErE,EACLA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAAA,aAAA,EAAA,CAErE,IACF,EAAA,CACC,EACRA,yBACG,YAAY,CAAC,MAAM,GAAG,CAAC,IACtB,YAAY,CAAC,GAAG,CAAC,CAAC,IAAa,EAAE,KAAK,MACpCC,aAA6B,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAAA,CACvFA,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,KAAK,EAAA,QAAA,EAAA,CACjBD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,2EAA2E,YACxF,IAAI,CAAC,IAAI,EAAA,CACL,EACN,IAAI,CAAC,QAAQ,KACZA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,UAAA,EAAA,CAExC,CACT,IACE,EACLA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAE,IAAI,CAAC,IAAI,EAAA,CAAM,EACrEA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sCAAsC,YACjD,IAAI,CAAC,OAAO,IACXA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,2EAA2E,YACxF,IAAI,CAAC,OAAO,EAAA,CACR,IACL,IAAI,EAAA,CACL,EACLA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAE,IAAI,CAAC,WAAW,EAAA,CAAM,CAAA,EAAA,EAnBrE,IAAI,CAAC,IAAI,IAAI,KAAK,CAoBtB,CACN,CAAC,KAEFA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EACEA,YAAI,OAAO,EAAE,CAAC,EAAE,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAAA,6CAAA,EAAA,CAEvE,GACF,CACN,EAAA,CACK,IACF,EAAA,CACJ,CAAA,EAAA,CACF,GACF,CACP,CAAA,EAAA,CACG,CAAA,EAAA,CACF,CAAA,EAAA,CACF,KAENA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EACtDC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,aAAa,aAC1BD,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,yDAAyD,EAAA,CAAG,EAC5EA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0DAA0D,EAAA,QAAA,EAAA,oBAAA,EAAA,CAEnE,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,6EAAA,EAAA,CAE3C,IACA,EAAA,CACF,CACP,GACI,CAAA,EAAA,CACH,CAAA,EAAA,CACF;AAEV;;;;"}
|
|
1
|
+
{"version":3,"file":"ComponentShowcase.js","sources":["../../../src/components/ComponentShowcase/ComponentShowcase.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useMemo, useRef, useEffect } from \"react\";\nimport {\n Search,\n Copy,\n Check,\n Monitor,\n Tablet,\n Smartphone,\n Sun,\n Moon,\n ChevronRight,\n ChevronDown,\n Code,\n Eye,\n Book,\n Palette,\n Layout,\n MousePointer,\n AlertCircle,\n BarChart3,\n Settings,\n Shield,\n Menu\n} from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button\";\nimport { Input } from \"../Input\";\nimport { Badge } from \"../Badge\";\nimport { Toast, showToast } from \"../Toast\";\n\nimport { showcaseRegistry } from \"./showcaseRegistry\";\nimport { componentDocs } from \"./componentDocs\";\nimport { useDarkMode } from \"../../hooks/useDarkMode\";\n\n// Component categories and their items\nconst componentCategories = {\n Forms: {\n icon: <MousePointer className=\"h-4 w-4\" />,\n components: [\n { name: \"Button\", id: \"button\" },\n { name: \"Input\", id: \"input\" },\n { name: \"Textarea\", id: \"textarea\" },\n { name: \"Checkbox\", id: \"checkbox\" },\n { name: \"Switch\", id: \"switch\" }\n ]\n },\n \"Data Display\": {\n icon: <BarChart3 className=\"h-4 w-4\" />,\n components: [\n { name: \"Card\", id: \"card\" },\n { name: \"Badge\", id: \"badge\" },\n { name: \"Avatar\", id: \"avatar\" },\n { name: \"StatsCard\", id: \"statscard\" },\n { name: \"Tabs\", id: \"tabs\" },\n { name: \"DataTable\", id: \"datatable\" }\n ]\n },\n Feedback: {\n icon: <AlertCircle className=\"h-4 w-4\" />,\n components: [\n { name: \"Alert\", id: \"alert\" },\n { name: \"Toast\", id: \"toast\" },\n { name: \"Modal\", id: \"modal\" },\n { name: \"Spinner\", id: \"spinner\" },\n { name: \"Skeleton\", id: \"skeleton\" },\n { name: \"Chat Widget\", id: \"chatwidget\" }\n ]\n },\n Authentication: {\n icon: <Shield className=\"h-4 w-4\" />,\n components: [\n { name: \"Auth System\", id: \"auth\" },\n { name: \"Login Page\", id: \"login\" },\n { name: \"Signup Page\", id: \"signup\" },\n { name: \"Password Reset\", id: \"password-reset\" },\n { name: \"!isAuthenticated Shield\", id: \"shield\" },\n ]\n },\n Layout: {\n icon: <Layout className=\"h-4 w-4\" />,\n components: [\n { name: \"DashboardLayout\", id: \"dashboard-layout\" },\n { name: \"Page Layout\", id: \"page-layout\" },\n { name: \"DashboardGrid\", id: \"dashboard-grid\" },\n { name: \"Sidebar\", id: \"sidebar\" },\n { name: \"Navbar\", id: \"navbar\" }\n ]\n }\n};\n\n// Prop documentation interface\ninterface PropDoc {\n name: string;\n type: string;\n default?: string;\n description?: string;\n required?: boolean;\n}\n\n// Props\ninterface ComponentShowcaseProps {\n className?: string;\n}\n\nexport const ComponentShowcase: React.FC<ComponentShowcaseProps> = ({ className }) => {\n const [selectedComponent, setSelectedComponent] = useState(\"button\");\n const [activeTab, setActiveTab] = useState<\"preview\" | \"code\" | \"props\">(\"preview\");\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {\n if (typeof window !== \"undefined\") {\n return window.innerWidth < 1024;\n }\n return false; // Default for SSR\n });\n const [expandedCategories, setExpandedCategories] = useState<string[]>([\"Forms\"]);\n const [viewMode, setViewMode] = useState<\"desktop\" | \"tablet\" | \"mobile\">(\"desktop\");\n const { isDarkMode, toggle: toggleDarkMode } = useDarkMode();\n const [copiedCode, setCopiedCode] = useState<string | null>(null);\n const sidebarRef = useRef<HTMLDivElement | null>(null);\n const [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\n const toggleCategory = (category: string) => {\n setExpandedCategories((prev) =>\n prev.includes(category)\n ? prev.filter((c) => c !== category)\n : [...prev, category]\n );\n };\n\n const flatComponents = useMemo(() => {\n return Object.values(componentCategories).flatMap((category) =>\n category.components.map((component) => component.id)\n );\n }, []);\n\n useEffect(() => {\n if (focusedIndex >= 0 && sidebarRef.current && !sidebarCollapsed) {\n const buttons = sidebarRef.current.querySelectorAll<HTMLButtonElement>(\n '[data-component-id]'\n );\n const target = buttons[focusedIndex];\n if (target) {\n target.focus();\n }\n }\n }, [focusedIndex, sidebarCollapsed]);\n\n const handleKeyNavigation = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (sidebarCollapsed) return;\n\n const currentIndex = flatComponents.indexOf(selectedComponent);\n\n if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n event.preventDefault();\n const nextIndex = currentIndex === flatComponents.length - 1 ? 0 : currentIndex + 1;\n setFocusedIndex(nextIndex);\n setSelectedComponent(flatComponents[nextIndex]);\n } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n event.preventDefault();\n const prevIndex = currentIndex <= 0 ? flatComponents.length - 1 : currentIndex - 1;\n setFocusedIndex(prevIndex);\n setSelectedComponent(flatComponents[prevIndex]);\n }\n };\n\n const copyToClipboard = async (code: string) => {\n try {\n if (navigator?.clipboard?.writeText) {\n await navigator.clipboard.writeText(code);\n setCopiedCode(code);\n showToast.success(\"Code copied to clipboard!\");\n setTimeout(() => setCopiedCode(null), 2000);\n } else {\n throw new Error(\"Clipboard API unavailable\");\n }\n } catch (err) {\n showToast.error(\"Failed to copy code\");\n }\n };\n\n const filteredCategories = Object.entries(componentCategories).reduce(\n (acc, [categoryName, categoryData]) => {\n const filteredComponents = categoryData.components.filter((component) =>\n component.name.toLowerCase().includes(searchQuery.toLowerCase())\n );\n\n if (filteredComponents.length > 0) {\n (acc as any)[categoryName] = {\n ...categoryData,\n components: filteredComponents\n };\n }\n\n return acc;\n },\n {} as Partial<typeof componentCategories>\n );\n\n const currentDoc = componentDocs[selectedComponent as keyof typeof componentDocs];\n const currentExample = currentDoc?.example ?? '';\n const currentProps = (currentDoc?.props ?? []) as PropDoc[];\n\n const getViewportClass = () => {\n switch (viewMode) {\n case \"tablet\":\n return \"max-w-2xl\";\n case \"mobile\":\n return \"max-w-sm\";\n default:\n return \"w-full\";\n }\n };\n\n return (\n <div className={cn(\"flex h-screen bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100\", isDarkMode && \"dark\", className)}>\n <Toast />\n\n {/* Mobile Overlay for Showcase Sidebar */}\n {!sidebarCollapsed && (\n <div\n className=\"fixed inset-0 bg-black/50 dark:bg-black/80 z-10 lg:hidden backdrop-blur-sm transition-opacity\"\n onClick={() => setSidebarCollapsed(true)}\n />\n )}\n\n {/* Sidebar */}\n <div\n ref={sidebarRef}\n className={cn(\n \"bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 transition-all duration-300 flex flex-col z-20 shrink-0\",\n \"max-lg:absolute max-lg:h-full max-lg:shadow-2xl\",\n sidebarCollapsed ? \"lg:w-16 max-lg:w-80 max-lg:-translate-x-full\" : \"w-80 max-lg:translate-x-0\"\n )}\n tabIndex={sidebarCollapsed ? -1 : 0}\n onKeyDown={handleKeyNavigation}\n aria-label=\"Component navigation\"\n >\n {/* Sidebar Header */}\n <div className=\"p-4 border-b border-gray-200 dark:border-gray-800\">\n <div className={cn(\"flex items-center justify-between mb-4\", sidebarCollapsed ? \"lg:hidden\" : \"\")}>\n <div className=\"flex items-center space-x-2\">\n <div className=\"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center\">\n <Palette className=\"h-4 w-4 text-white\" />\n </div>\n <span className=\"font-bold text-lg text-gray-900 dark:text-white\">Beyond UI</span>\n </div>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setSidebarCollapsed(true)}\n >\n <ChevronRight className=\"h-4 w-4\" />\n </Button>\n </div>\n\n <div className={cn(\"justify-center\", sidebarCollapsed ? \"flex max-lg:hidden\" : \"hidden\")}>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setSidebarCollapsed(false)}\n >\n <Palette className=\"h-4 w-4\" />\n </Button>\n </div>\n\n <div className={cn(\"relative\", sidebarCollapsed ? \"lg:hidden\" : \"\")}>\n <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 dark:text-gray-500\" />\n <Input\n placeholder=\"Search components...\"\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n className=\"pl-10\"\n />\n </div>\n </div>\n\n {/* Navigation */}\n <nav className=\"flex-1 p-4 overflow-y-auto\">\n {Object.entries(filteredCategories).map(([categoryName, categoryData]) => (\n <div key={categoryName} className=\"mb-4\">\n <button\n onClick={() => {\n if (typeof window !== \"undefined\" && window.innerWidth < 1024) {\n toggleCategory(categoryName);\n } else if (!sidebarCollapsed) {\n toggleCategory(categoryName);\n }\n }}\n className={cn(\n \"flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors\",\n \"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300\",\n sidebarCollapsed ? \"lg:justify-center max-lg:justify-between\" : \"justify-between\"\n )}\n >\n <div className=\"flex items-center space-x-2\">\n {categoryData.icon}\n <span className={cn(sidebarCollapsed ? \"lg:hidden\" : \"\")}>{categoryName}</span>\n </div>\n <ChevronDown\n className={cn(\n \"h-4 w-4 transition-transform\",\n expandedCategories.includes(categoryName) && \"rotate-180\",\n sidebarCollapsed ? \"lg:hidden\" : \"\"\n )}\n />\n </button>\n\n {expandedCategories.includes(categoryName) && (\n <div className={cn(\"mt-2 ml-6 space-y-1\", sidebarCollapsed ? \"lg:hidden\" : \"\")}>\n {categoryData.components.map((component) => {\n const isActive = selectedComponent === component.id;\n return (\n <button\n key={component.id}\n data-component-id={component.id}\n onClick={() => {\n setSelectedComponent(component.id);\n setFocusedIndex(flatComponents.indexOf(component.id));\n if (window.innerWidth < 1024) {\n setSidebarCollapsed(true);\n }\n }}\n className={cn(\n \"flex items-center w-full p-2 text-sm rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\",\n isActive\n ? \"bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-400 border-r-2 border-primary-600 dark:border-primary-500\"\n : \"text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 hover:text-gray-900 dark:hover:text-white\"\n )}\n aria-current={isActive ? \"page\" : undefined}\n >\n {component.name}\n </button>\n );\n })}\n </div>\n )}\n </div>\n ))}\n </nav>\n </div>\n\n {/* Main Content */}\n <div className=\"flex-1 flex flex-col overflow-hidden\">\n {/* Header */}\n <header className=\"bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 p-4\">\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center space-x-4\">\n {/* Mobile Menu Toggle */}\n <Button\n variant=\"ghost\"\n size=\"sm\"\n className=\"lg:hidden p-2 -ml-2 shrink-0\"\n onClick={() => setSidebarCollapsed(false)}\n aria-label=\"Open component menu\"\n >\n <Menu className=\"h-5 w-5 text-gray-700 dark:text-gray-300\" />\n </Button>\n \n <h1 className=\"text-xl md:text-2xl font-bold text-gray-900 dark:text-white truncate\">\n {currentDoc?.name || \"Component Showcase\"}\n </h1>\n {currentDoc && <Badge variant=\"outline\">{currentDoc.name}</Badge>}\n </div>\n\n <div className=\"flex items-center space-x-2\">\n {/* Viewport Controls */}\n <div className=\"flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1\">\n <Button\n variant={viewMode === \"desktop\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setViewMode(\"desktop\")}\n >\n <Monitor className=\"h-4 w-4\" />\n </Button>\n <Button\n variant={viewMode === \"tablet\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setViewMode(\"tablet\")}\n >\n <Tablet className=\"h-4 w-4\" />\n </Button>\n <Button\n variant={viewMode === \"mobile\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setViewMode(\"mobile\")}\n >\n <Smartphone className=\"h-4 w-4\" />\n </Button>\n </div>\n\n {/* Dark Mode Toggle */}\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={toggleDarkMode}\n >\n {isDarkMode ? (\n <Sun className=\"h-4 w-4\" />\n ) : (\n <Moon className=\"h-4 w-4\" />\n )}\n </Button>\n </div>\n </div>\n </header>\n\n {/* Content */}\n <main className=\"flex-1 overflow-auto p-6 bg-gray-50 dark:bg-gray-950\">\n {currentDoc ? (\n <div className=\"max-w-6xl mx-auto space-y-8\">\n {/* Description */}\n <div>\n <p className=\"text-lg text-gray-600 dark:text-gray-400\">{currentDoc.description}</p>\n </div>\n\n {/* Tabs */}\n <div>\n <div className=\"flex gap-3 mb-4\" role=\"tablist\" aria-label=\"Component details tabs\">\n <Button\n variant={activeTab === \"preview\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setActiveTab(\"preview\")}\n role=\"tab\"\n aria-selected={activeTab === \"preview\"}\n >\n <Eye className=\"h-4 w-4 mr-2\" />\n Preview\n </Button>\n <Button\n variant={activeTab === \"code\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setActiveTab(\"code\")}\n role=\"tab\"\n aria-selected={activeTab === \"code\"}\n >\n <Code className=\"h-4 w-4 mr-2\" />\n Code\n </Button>\n <Button\n variant={activeTab === \"props\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setActiveTab(\"props\")}\n role=\"tab\"\n aria-selected={activeTab === \"props\"}\n >\n <Settings className=\"h-4 w-4 mr-2\" />\n Props\n </Button>\n </div>\n <div>\n <div className=\"mt-6\">\n <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n {/* Preview */}\n <div\n className={cn(\n \"mx-auto transition-all duration-300\",\n getViewportClass()\n )}\n >\n <div>\n {showcaseRegistry[selectedComponent]\n ? React.createElement(\n showcaseRegistry[selectedComponent]\n )\n : null}\n </div>\n </div>\n </div>\n </div>\n\n {activeTab === \"code\" && (\n <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Code example\">\n <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n <div className=\"flex flex-row items-center justify-between\">\n <h2 className=\"text-lg font-semibold mb-0 dark:text-white\">\n Usage Example\n </h2>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => copyToClipboard(currentExample)}\n >\n {copiedCode === currentExample ? (\n <Check className=\"h-4 w-4 mr-2\" />\n ) : (\n <Copy className=\"h-4 w-4 mr-2\" />\n )}\n Copy\n </Button>\n </div>\n <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto\">\n <code>{currentExample}</code>\n </pre>\n </div>\n </div>\n )}\n\n {activeTab === \"props\" && (\n <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Component props\">\n <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n <h2 className=\"text-lg font-semibold mb-4 dark:text-white\">\n Component Props\n </h2>\n <div className=\"overflow-x-auto\">\n <table className=\"w-full border-collapse\">\n <thead>\n <tr className=\"border-b border-gray-200 dark:border-gray-800\">\n <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n Prop\n </th>\n <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n Type\n </th>\n <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n Default\n </th>\n <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n Description\n </th>\n </tr>\n </thead>\n <tbody>\n {currentProps.length > 0 ? (\n currentProps.map((prop: PropDoc, index) => (\n <tr key={prop.name ?? index} className=\"border-b border-gray-100 dark:border-gray-800/50\">\n <td className=\"p-3\">\n <code className=\"bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300\">\n {prop.name}\n </code>\n {prop.required && (\n <Badge variant=\"danger\" className=\"ml-2 text-xs\">\n Required\n </Badge>\n )}\n </td>\n <td className=\"p-3 text-gray-600 dark:text-gray-400\">{prop.type}</td>\n <td className=\"p-3 text-gray-600 dark:text-gray-400\">\n {prop.default ? (\n <code className=\"bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300\">\n {prop.default}\n </code>\n ) : null}\n </td>\n <td className=\"p-3 text-gray-600 dark:text-gray-400\">{prop.description}</td>\n </tr>\n ))\n ) : (\n <tr>\n <td colSpan={4} className=\"p-4 text-center text-gray-500 dark:text-gray-400\">\n No props documented for this component yet.\n </td>\n </tr>\n )}\n </tbody>\n </table>\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"flex items-center justify-center h-full\">\n <div className=\"text-center\">\n <Book className=\"h-16 w-16 text-gray-400 dark:text-gray-600 mx-auto mb-4\" />\n <h2 className=\"text-xl font-semibold text-gray-900 dark:text-white mb-2\">\n Select a Component\n </h2>\n <p className=\"text-gray-600 dark:text-gray-400\">\n Choose a component from the sidebar to view its documentation and examples.\n </p>\n </div>\n </div>\n )}\n </main>\n </div>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|