mirror of
https://github.com/xtr-dev/payload-feature-flags.git
synced 2025-12-10 02:43:25 +00:00
Replace redundant components with updated feature flag hooks and views. Add comprehensive documentation and ESLint config for improved development workflow.
This commit is contained in:
99
dev/app/(app)/layout.tsx
Normal file
99
dev/app/(app)/layout.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function AppLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Feature Flags Demo - Payload CMS Plugin</title>
|
||||
</head>
|
||||
<body style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontFamily: 'system-ui, -apple-system, sans-serif',
|
||||
backgroundColor: '#f8fafc'
|
||||
}}>
|
||||
<style dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.nav-link {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.nav-link:hover {
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
}
|
||||
`
|
||||
}} />
|
||||
<nav style={{
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
padding: '1rem 2rem',
|
||||
boxShadow: '0 2px 10px rgba(0,0,0,0.1)'
|
||||
}}>
|
||||
<div style={{
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<div>
|
||||
<h1 style={{
|
||||
color: 'white',
|
||||
margin: 0,
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: '600'
|
||||
}}>
|
||||
🚩 Payload Feature Flags
|
||||
</h1>
|
||||
<p style={{
|
||||
color: 'rgba(255,255,255,0.8)',
|
||||
margin: '0.25rem 0 0 0',
|
||||
fontSize: '0.9rem'
|
||||
}}>
|
||||
Development & Testing Environment
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '1rem' }}>
|
||||
<a href="/admin" className="nav-link">
|
||||
Admin Panel
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main style={{ minHeight: 'calc(100vh - 100px)' }}>
|
||||
{children}
|
||||
</main>
|
||||
<footer style={{
|
||||
background: '#2d3748',
|
||||
color: 'white',
|
||||
padding: '1rem 2rem',
|
||||
textAlign: 'center',
|
||||
fontSize: '0.9rem'
|
||||
}}>
|
||||
<div style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
||||
<p style={{ margin: 0 }}>
|
||||
Built with <strong>@xtr-dev/payload-feature-flags</strong> •
|
||||
<a
|
||||
href="https://payloadcms.com"
|
||||
style={{ color: '#a0aec0', marginLeft: '0.5rem' }}
|
||||
>
|
||||
Powered by Payload CMS
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
127
dev/app/(app)/page.tsx
Normal file
127
dev/app/(app)/page.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import { getPayload } from 'payload'
|
||||
import config from '@payload-config'
|
||||
import { getAllFeatureFlags, isFeatureEnabled } from 'payload-feature-flags/rsc'
|
||||
|
||||
export default async function HomePage() {
|
||||
const payload = await getPayload({ config })
|
||||
|
||||
const allFlags = await getAllFeatureFlags(payload)
|
||||
const activeCount = Object.keys(allFlags).length
|
||||
const isNewFeatureEnabled = await isFeatureEnabled('new-feature', payload)
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
padding: '2rem',
|
||||
maxWidth: '800px',
|
||||
margin: '0 auto',
|
||||
fontFamily: 'system-ui, -apple-system, sans-serif'
|
||||
}}>
|
||||
<h1 style={{
|
||||
fontSize: '2.5rem',
|
||||
fontWeight: '700',
|
||||
color: '#1e293b',
|
||||
marginBottom: '1rem',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
Feature Flags Demo
|
||||
</h1>
|
||||
|
||||
<p style={{
|
||||
fontSize: '1.1rem',
|
||||
color: '#64748b',
|
||||
textAlign: 'center',
|
||||
marginBottom: '2rem'
|
||||
}}>
|
||||
Simple demonstration of the Payload CMS Feature Flags plugin
|
||||
</p>
|
||||
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
|
||||
gap: '1rem',
|
||||
marginBottom: '2rem'
|
||||
}}>
|
||||
<div style={{
|
||||
background: 'white',
|
||||
padding: '1.5rem',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
|
||||
border: '1px solid #e2e8f0',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<div style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>🚩</div>
|
||||
<div style={{ fontSize: '1.5rem', fontWeight: '600', color: '#1e293b' }}>
|
||||
{activeCount}
|
||||
</div>
|
||||
<div style={{ fontSize: '0.9rem', color: '#64748b' }}>
|
||||
Active Flags
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
background: 'white',
|
||||
padding: '1.5rem',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
|
||||
border: '1px solid #e2e8f0',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<div style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>
|
||||
{isNewFeatureEnabled ? '✅' : '❌'}
|
||||
</div>
|
||||
<div style={{ fontSize: '1rem', fontWeight: '600', color: '#1e293b' }}>
|
||||
New Feature
|
||||
</div>
|
||||
<div style={{ fontSize: '0.9rem', color: '#64748b' }}>
|
||||
{isNewFeatureEnabled ? 'Enabled' : 'Disabled'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isNewFeatureEnabled && (
|
||||
<div style={{
|
||||
background: '#f0f9ff',
|
||||
border: '1px solid #0ea5e9',
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
marginBottom: '2rem'
|
||||
}}>
|
||||
<h3 style={{ margin: '0 0 0.5rem 0', color: '#0369a1' }}>
|
||||
🎉 Feature Flag Active
|
||||
</h3>
|
||||
<p style={{ margin: 0, color: '#0369a1' }}>
|
||||
The "new-feature" flag is enabled! This content is only visible when the flag is active.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{
|
||||
background: '#f8fafc',
|
||||
padding: '1.5rem',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #e2e8f0'
|
||||
}}>
|
||||
<h3 style={{ margin: '0 0 1rem 0', color: '#1e293b' }}>
|
||||
Manage Feature Flags
|
||||
</h3>
|
||||
<p style={{ margin: '0 0 1rem 0', color: '#64748b' }}>
|
||||
Use the Payload admin panel to create and manage feature flags.
|
||||
</p>
|
||||
<a
|
||||
href="/admin/collections/feature-flags"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
padding: '0.75rem 1.5rem',
|
||||
background: '#3b82f6',
|
||||
color: 'white',
|
||||
textDecoration: 'none',
|
||||
borderRadius: '6px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
>
|
||||
Open Admin Panel
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user