vibes-plug 1.0.0 → 2.11.0
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/.claude/rules/vibes-plug-core.md +32 -0
- package/.cursor/rules/vibes-plug-core.mdc +51 -0
- package/.cursorrules +42 -0
- package/AGENTS.md +96 -0
- package/BLUEPRINT.md +309 -125
- package/CHANGELOG.md +183 -1
- package/CLAUDE.md +70 -0
- package/LICENSE +1 -1
- package/README.md +641 -263
- package/index.js +19 -0
- package/package.json +61 -25
- package/plugin.json +24 -7
- package/scripts/generate_swarm_gif.py +295 -0
- package/scripts/install.js +201 -0
- package/skills/accessibility-testing-expert/SKILL.md +116 -0
- package/skills/ai-cost-token-optimizer/SKILL.md +82 -0
- package/skills/ai-evals-benchmark-expert/SKILL.md +188 -0
- package/skills/ai-llm-integration-expert/SKILL.md +147 -122
- package/skills/ai-media-generation-expert/SKILL.md +172 -0
- package/skills/ai-prompt-engineering-expert/SKILL.md +84 -0
- package/skills/angular-expert/SKILL.md +148 -0
- package/skills/api-design-expert/SKILL.md +316 -309
- package/skills/api-gateway-proxy-expert/SKILL.md +81 -0
- package/skills/app-analyzer-optimizer/SKILL.md +195 -188
- package/skills/apple-ecosystem-expert/SKILL.md +145 -0
- package/skills/{asisten_ramah → asisten-ramah}/SKILL.md +7 -1
- package/skills/astro-framework-expert/SKILL.md +200 -0
- package/skills/async-queue-temporal-expert/SKILL.md +240 -0
- package/skills/authentication-identity-expert/SKILL.md +279 -45
- package/skills/auto-doc-updater/SKILL.md +219 -203
- package/skills/autonomous-chaos-monkey/SKILL.md +63 -0
- package/skills/autonomous-red-teamer/SKILL.md +203 -0
- package/skills/autonomous-tdd-debugger/SKILL.md +71 -0
- package/skills/background-jobs-queue-expert/SKILL.md +235 -0
- package/skills/biome-linter-formatter-expert/SKILL.md +89 -0
- package/skills/blockchain-web3-expert/SKILL.md +115 -0
- package/skills/bootstrap-to-modern/SKILL.md +93 -86
- package/skills/brainstorming/SKILL.md +381 -353
- package/skills/browser-automation-expert/SKILL.md +222 -0
- package/skills/bun-runtime-expert/SKILL.md +7 -1
- package/skills/chatbot-messaging-expert/SKILL.md +114 -0
- package/skills/ci-cd-devops-architect/SKILL.md +81 -45
- package/skills/cloud-hosting-expert/SKILL.md +249 -243
- package/skills/coderabbit/SKILL.md +197 -191
- package/skills/compliance-gdpr-privacy-expert/SKILL.md +85 -0
- package/skills/cron-scheduler-expert/SKILL.md +304 -0
- package/skills/data-pipeline-etl-expert/SKILL.md +84 -0
- package/skills/data-telemetry-expert/SKILL.md +218 -212
- package/skills/data-visualization-expert/SKILL.md +154 -0
- package/skills/database-migration-versioning-expert/SKILL.md +90 -0
- package/skills/database-orm-expert/SKILL.md +303 -293
- package/skills/dependency-upgrade-migrator/SKILL.md +301 -0
- package/skills/design-system-architect/SKILL.md +278 -242
- package/skills/desktop-electron-expert/SKILL.md +128 -0
- package/skills/documentation-site-expert/SKILL.md +59 -0
- package/skills/doku-mcp-server/SKILL.md +257 -0
- package/skills/doku-payment-gateway/SKILL.md +233 -0
- package/skills/domain-driven-design-expert/SKILL.md +82 -0
- package/skills/e2e-testing-expert/SKILL.md +320 -314
- package/skills/ecommerce-expert/SKILL.md +87 -0
- package/skills/edge-serverless-db-expert/SKILL.md +99 -0
- package/skills/email-notification-expert/SKILL.md +368 -0
- package/skills/error-resilience-expert/SKILL.md +486 -0
- package/skills/event-driven-architect/SKILL.md +86 -80
- package/skills/feature-flag-analytics-expert/SKILL.md +66 -0
- package/skills/file-upload-media-expert/SKILL.md +437 -0
- package/skills/firebase-security-expert/SKILL.md +7 -1
- package/skills/form-validation-expert/SKILL.md +407 -0
- package/skills/fullstack-expert/SKILL.md +260 -201
- package/skills/fullstack-expert/references/api_design_guide.md +466 -466
- package/skills/fullstack-expert/references/multi_language_backend.md +528 -528
- package/skills/fullstack-expert/scripts/api_contract_validator.py +253 -253
- package/skills/fullstack-expert/scripts/architecture_analyzer.py +326 -326
- package/skills/gemini-agent-booster/SKILL.md +142 -104
- package/skills/geospatial-maps-expert/SKILL.md +80 -0
- package/skills/global-a11y-i18n-expert/SKILL.md +86 -80
- package/skills/glsl-shader-expert/SKILL.md +107 -0
- package/skills/go-programming-expert/SKILL.md +300 -294
- package/skills/graph-rag-knowledge-expert/SKILL.md +159 -0
- package/skills/graphql-apollo-expert/SKILL.md +114 -0
- package/skills/headless-cms-expert/SKILL.md +181 -0
- package/skills/hig/SKILL.md +193 -187
- package/skills/js-backend-expert/SKILL.md +218 -191
- package/skills/legacy-code-translator/SKILL.md +71 -0
- package/skills/local-slm-edge-ai-expert/SKILL.md +167 -0
- package/skills/logging-error-tracking-expert/SKILL.md +344 -0
- package/skills/mcp-client-orchestrator/SKILL.md +76 -0
- package/skills/mcp-server-architect/SKILL.md +226 -126
- package/skills/micro-frontend-architect/SKILL.md +112 -0
- package/skills/mobile-expo-expert/SKILL.md +191 -185
- package/skills/mobile-push-notification-expert/SKILL.md +71 -0
- package/skills/modern-css-native-expert/SKILL.md +189 -0
- package/skills/monday-design-aesthetic/SKILL.md +72 -66
- package/skills/monorepo-architect/SKILL.md +232 -226
- package/skills/mpa-orchestrator/SKILL.md +120 -101
- package/skills/multi-agent-orchestration/SKILL.md +173 -153
- package/skills/multiple-entry-points/SKILL.md +91 -55
- package/skills/mvc-expert/SKILL.md +237 -231
- package/skills/n8n-automation-expert/SKILL.md +89 -0
- package/skills/nextjs-app-router-expert/SKILL.md +148 -0
- package/skills/openapi-swagger-codegen-expert/SKILL.md +67 -0
- package/skills/payment-gateway-expert/SKILL.md +129 -45
- package/skills/pdf-document-generation-expert/SKILL.md +91 -0
- package/skills/performance-web-vitals/SKILL.md +337 -331
- package/skills/post-quantum-crypto-migrator/SKILL.md +57 -0
- package/skills/prd-architect/SKILL.md +206 -190
- package/skills/proactive-background-watcher/SKILL.md +68 -0
- package/skills/production-ready-hardener/PRODUCTION_READINESS_REPORT.md +67 -0
- package/skills/production-ready-hardener/SKILL.md +461 -468
- package/skills/production-ready-hardener/references/production_checklist.md +161 -161
- package/skills/production-ready-hardener/scripts/production_readiness_scanner.py +881 -875
- package/skills/project-context-mapper/SKILL.md +85 -0
- package/skills/pwa-offline-first-expert/SKILL.md +185 -0
- package/skills/python-programming-expert/SKILL.md +407 -270
- package/skills/rate-limit-abuse-prevention/SKILL.md +377 -0
- package/skills/realtime-collaboration-expert/SKILL.md +99 -45
- package/skills/rich-text-editor-expert/SKILL.md +177 -0
- package/skills/rust-programming-expert/SKILL.md +240 -234
- package/skills/saas-billing/SKILL.md +382 -376
- package/skills/saas-multi-tenant/SKILL.md +256 -236
- package/skills/saas-mvp-launcher/SKILL.md +30 -1
- package/skills/saas-transformer/SKILL.md +499 -445
- package/skills/saas-transformer/references/billing_integration_guide.md +401 -401
- package/skills/saas-transformer/references/feature_gating_patterns.md +137 -137
- package/skills/saas-transformer/references/saas_transformation_checklist.md +121 -121
- package/skills/saas-transformer/scripts/saas_transformation_scanner.py +39 -29
- package/skills/scalability-clean-code/SKILL.md +234 -228
- package/skills/search-engine-expert/SKILL.md +89 -0
- package/skills/secure-fuzz-testing/SKILL.md +7 -1
- package/skills/self-evolving-memory-graph/SKILL.md +91 -0
- package/skills/self-healing-cloud-orchestrator/SKILL.md +57 -0
- package/skills/senior-frontend/SKILL.md +85 -105
- package/skills/seo/SKILL.md +258 -224
- package/skills/session-context-loader/SKILL.md +83 -0
- package/skills/session-handoff-resume/SKILL.md +163 -157
- package/skills/{skill_baru → skill-baru}/SKILL.md +177 -146
- package/skills/solidjs-expert/SKILL.md +80 -0
- package/skills/spa-orchestrator/SKILL.md +306 -287
- package/skills/sse-websocket-streaming-expert/SKILL.md +93 -0
- package/skills/state-management-expert/SKILL.md +277 -271
- package/skills/supabase-migration/SKILL.md +47 -1
- package/skills/supabase-security-expert/SKILL.md +248 -242
- package/skills/svelte-sveltekit-expert/SKILL.md +91 -0
- package/skills/svg-animation-motion-expert/SKILL.md +115 -0
- package/skills/tailwind-expert/SKILL.md +139 -187
- package/skills/tanstack-query-expert/SKILL.md +204 -198
- package/skills/tauri-expert/SKILL.md +7 -1
- package/skills/token-saver/SKILL.md +118 -110
- package/skills/typescript-expert/SKILL.md +329 -278
- package/skills/ui-components-expert/SKILL.md +166 -63
- package/skills/ui-ux-pro-max/SKILL.md +221 -200
- package/skills/vector-db-rag-expert/SKILL.md +208 -0
- package/skills/vibe-code-gardener/SKILL.md +180 -172
- package/skills/visual-qa-vision-agent/SKILL.md +71 -0
- package/skills/voice-ai-realtime-agent/SKILL.md +202 -0
- package/skills/vue-frontend-expert/SKILL.md +132 -0
- package/skills/wasm-edge-computing-expert/SKILL.md +97 -0
- package/skills/web-3d-graphics-expert/SKILL.md +137 -0
- package/skills/web-game-engine-expert/SKILL.md +102 -0
- package/skills/web-scraper/SKILL.md +98 -146
- package/skills/website-design-cloner/SKILL.md +180 -0
- package/skills/webxr-ar-vr-expert/SKILL.md +123 -0
- package/skills/wordpress-headless-expert/SKILL.md +144 -0
- package/skills/zero-to-prod-orchestrator/SKILL.md +231 -180
- package/skills/zero-trust-secret-vault/SKILL.md +88 -0
- package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
- package/CONTRIBUTING.md +0 -199
- package/SECURITY.md +0 -21
- package/banner.png +0 -0
- package/skills/senior-fullstack/SKILL.md +0 -167
- package/skills/senior-fullstack/references/architecture_patterns.md +0 -160
- package/skills/senior-fullstack/references/development_workflows.md +0 -222
- package/skills/senior-fullstack/references/tech_stack_guide.md +0 -190
- package/skills/senior-fullstack/scripts/code_quality_analyzer.py +0 -114
- package/skills/senior-fullstack/scripts/fullstack_scaffolder.py +0 -114
- package/skills/senior-fullstack/scripts/project_scaffolder.py +0 -114
- package/skills/seo-aeo-landing-page-writer/SKILL.md +0 -97
- package/skills/seo-geo/SKILL.md +0 -188
- package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-310.pyc +0 -0
- package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc +0 -0
- package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-310.pyc +0 -0
- package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-312.pyc +0 -0
- package/skills/ui_ux_expert/SKILL.md +0 -114
|
@@ -1,137 +1,137 @@
|
|
|
1
|
-
# Feature Gating & Usage Limits Patterns
|
|
2
|
-
|
|
3
|
-
Standard patterns for restricting access to features and enforcing quotas based on plan configurations.
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
## 1. Feature Map Definitions
|
|
8
|
-
|
|
9
|
-
Define a clear schema mapping plans to features and usage limits.
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
export interface PlanConfig {
|
|
13
|
-
name: string;
|
|
14
|
-
maxMembers: number;
|
|
15
|
-
maxProjects: number;
|
|
16
|
-
features: {
|
|
17
|
-
advancedReporting: boolean;
|
|
18
|
-
apiAccess: boolean;
|
|
19
|
-
customDomain: boolean;
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export const PLAN_CONFIGS: Record<string, PlanConfig> = {
|
|
24
|
-
free: {
|
|
25
|
-
name: 'Free',
|
|
26
|
-
maxMembers: 1,
|
|
27
|
-
maxProjects: 3,
|
|
28
|
-
features: {
|
|
29
|
-
advancedReporting: false,
|
|
30
|
-
apiAccess: false,
|
|
31
|
-
customDomain: false
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
pro: {
|
|
35
|
-
name: 'Professional',
|
|
36
|
-
maxMembers: 10,
|
|
37
|
-
maxProjects: 50,
|
|
38
|
-
features: {
|
|
39
|
-
advancedReporting: true,
|
|
40
|
-
apiAccess: true,
|
|
41
|
-
customDomain: false
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
enterprise: {
|
|
45
|
-
name: 'Enterprise',
|
|
46
|
-
maxMembers: 100,
|
|
47
|
-
maxProjects: 999999,
|
|
48
|
-
features: {
|
|
49
|
-
advancedReporting: true,
|
|
50
|
-
apiAccess: true,
|
|
51
|
-
customDomain: true
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
---
|
|
58
|
-
|
|
59
|
-
## 2. Server-side Gate Keepers (Next.js Actions / Routes)
|
|
60
|
-
|
|
61
|
-
Implement standard assertions in your data access layer.
|
|
62
|
-
|
|
63
|
-
```typescript
|
|
64
|
-
import { getWorkspaceSubscription } from './billing';
|
|
65
|
-
import { PLAN_CONFIGS } from './plan-configs';
|
|
66
|
-
import { db } from './db';
|
|
67
|
-
import { projects } from './db/schema';
|
|
68
|
-
import { count, eq } from 'drizzle-orm';
|
|
69
|
-
|
|
70
|
-
// Feature gate assertion
|
|
71
|
-
export async function assertHasFeature(workspaceId: string, feature: keyof PlanConfig['features']) {
|
|
72
|
-
const { plan, isActive } = await getWorkspaceSubscription(workspaceId);
|
|
73
|
-
const activePlan = isActive ? plan : 'free';
|
|
74
|
-
|
|
75
|
-
const hasFeature = PLAN_CONFIGS[activePlan]?.features[feature];
|
|
76
|
-
if (!hasFeature) {
|
|
77
|
-
throw new Error(`Your plan (${activePlan}) does not support the feature: ${feature}`);
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
// Usage limits assertion
|
|
82
|
-
export async function assertWithinProjectLimit(workspaceId: string) {
|
|
83
|
-
const { plan, isActive } = await getWorkspaceSubscription(workspaceId);
|
|
84
|
-
const activePlan = isActive ? plan : 'free';
|
|
85
|
-
|
|
86
|
-
const limit = PLAN_CONFIGS[activePlan].maxProjects;
|
|
87
|
-
|
|
88
|
-
const [projectCount] = await db
|
|
89
|
-
.select({ val: count() })
|
|
90
|
-
.from(projects)
|
|
91
|
-
.where(eq(projects.workspaceId, workspaceId));
|
|
92
|
-
|
|
93
|
-
if (projectCount.val >= limit) {
|
|
94
|
-
throw new Error(`Project limit reached (${projectCount.val}/${limit}). Please upgrade your plan.`);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
---
|
|
100
|
-
|
|
101
|
-
## 3. UI Graceful Degradation / Upgrade Banner
|
|
102
|
-
|
|
103
|
-
Wrap component gates clean in React to encourage high conversion paths.
|
|
104
|
-
|
|
105
|
-
```tsx
|
|
106
|
-
import React from 'react';
|
|
107
|
-
import { Button } from '@/components/ui/button';
|
|
108
|
-
|
|
109
|
-
interface UpgradeGuardProps {
|
|
110
|
-
hasFeature: boolean;
|
|
111
|
-
featureName: string;
|
|
112
|
-
children: React.ReactNode;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
export function UpgradeGuard({ hasFeature, featureName, children }: UpgradeGuardProps) {
|
|
116
|
-
if (hasFeature) {
|
|
117
|
-
return <>{children}</>;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
return (
|
|
121
|
-
<div className="relative border border-dashed border-gray-300 rounded-lg p-8 text-center bg-gray-50/50">
|
|
122
|
-
<div className="absolute inset-0 bg-white/40 backdrop-blur-[1px] rounded-lg" />
|
|
123
|
-
<div className="relative z-10 max-w-sm mx-auto">
|
|
124
|
-
<h3 className="text-lg font-semibold text-gray-900">Unlock {featureName}</h3>
|
|
125
|
-
<p className="mt-2 text-sm text-gray-500">
|
|
126
|
-
This feature is available on our Professional and Enterprise plans. Upgrade today to scale.
|
|
127
|
-
</p>
|
|
128
|
-
<div className="mt-4">
|
|
129
|
-
<Button href="/settings/billing" variant="default">
|
|
130
|
-
View Pricing Plans
|
|
131
|
-
</Button>
|
|
132
|
-
</div>
|
|
133
|
-
</div>
|
|
134
|
-
</div>
|
|
135
|
-
);
|
|
136
|
-
}
|
|
137
|
-
```
|
|
1
|
+
# Feature Gating & Usage Limits Patterns
|
|
2
|
+
|
|
3
|
+
Standard patterns for restricting access to features and enforcing quotas based on plan configurations.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 1. Feature Map Definitions
|
|
8
|
+
|
|
9
|
+
Define a clear schema mapping plans to features and usage limits.
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
export interface PlanConfig {
|
|
13
|
+
name: string;
|
|
14
|
+
maxMembers: number;
|
|
15
|
+
maxProjects: number;
|
|
16
|
+
features: {
|
|
17
|
+
advancedReporting: boolean;
|
|
18
|
+
apiAccess: boolean;
|
|
19
|
+
customDomain: boolean;
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const PLAN_CONFIGS: Record<string, PlanConfig> = {
|
|
24
|
+
free: {
|
|
25
|
+
name: 'Free',
|
|
26
|
+
maxMembers: 1,
|
|
27
|
+
maxProjects: 3,
|
|
28
|
+
features: {
|
|
29
|
+
advancedReporting: false,
|
|
30
|
+
apiAccess: false,
|
|
31
|
+
customDomain: false
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
pro: {
|
|
35
|
+
name: 'Professional',
|
|
36
|
+
maxMembers: 10,
|
|
37
|
+
maxProjects: 50,
|
|
38
|
+
features: {
|
|
39
|
+
advancedReporting: true,
|
|
40
|
+
apiAccess: true,
|
|
41
|
+
customDomain: false
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
enterprise: {
|
|
45
|
+
name: 'Enterprise',
|
|
46
|
+
maxMembers: 100,
|
|
47
|
+
maxProjects: 999999,
|
|
48
|
+
features: {
|
|
49
|
+
advancedReporting: true,
|
|
50
|
+
apiAccess: true,
|
|
51
|
+
customDomain: true
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## 2. Server-side Gate Keepers (Next.js Actions / Routes)
|
|
60
|
+
|
|
61
|
+
Implement standard assertions in your data access layer.
|
|
62
|
+
|
|
63
|
+
```typescript
|
|
64
|
+
import { getWorkspaceSubscription } from './billing';
|
|
65
|
+
import { PLAN_CONFIGS } from './plan-configs';
|
|
66
|
+
import { db } from './db';
|
|
67
|
+
import { projects } from './db/schema';
|
|
68
|
+
import { count, eq } from 'drizzle-orm';
|
|
69
|
+
|
|
70
|
+
// Feature gate assertion
|
|
71
|
+
export async function assertHasFeature(workspaceId: string, feature: keyof PlanConfig['features']) {
|
|
72
|
+
const { plan, isActive } = await getWorkspaceSubscription(workspaceId);
|
|
73
|
+
const activePlan = isActive ? plan : 'free';
|
|
74
|
+
|
|
75
|
+
const hasFeature = PLAN_CONFIGS[activePlan]?.features[feature];
|
|
76
|
+
if (!hasFeature) {
|
|
77
|
+
throw new Error(`Your plan (${activePlan}) does not support the feature: ${feature}`);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
// Usage limits assertion
|
|
82
|
+
export async function assertWithinProjectLimit(workspaceId: string) {
|
|
83
|
+
const { plan, isActive } = await getWorkspaceSubscription(workspaceId);
|
|
84
|
+
const activePlan = isActive ? plan : 'free';
|
|
85
|
+
|
|
86
|
+
const limit = PLAN_CONFIGS[activePlan].maxProjects;
|
|
87
|
+
|
|
88
|
+
const [projectCount] = await db
|
|
89
|
+
.select({ val: count() })
|
|
90
|
+
.from(projects)
|
|
91
|
+
.where(eq(projects.workspaceId, workspaceId));
|
|
92
|
+
|
|
93
|
+
if (projectCount.val >= limit) {
|
|
94
|
+
throw new Error(`Project limit reached (${projectCount.val}/${limit}). Please upgrade your plan.`);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
## 3. UI Graceful Degradation / Upgrade Banner
|
|
102
|
+
|
|
103
|
+
Wrap component gates clean in React to encourage high conversion paths.
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
import React from 'react';
|
|
107
|
+
import { Button } from '@/components/ui/button';
|
|
108
|
+
|
|
109
|
+
interface UpgradeGuardProps {
|
|
110
|
+
hasFeature: boolean;
|
|
111
|
+
featureName: string;
|
|
112
|
+
children: React.ReactNode;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
export function UpgradeGuard({ hasFeature, featureName, children }: UpgradeGuardProps) {
|
|
116
|
+
if (hasFeature) {
|
|
117
|
+
return <>{children}</>;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
return (
|
|
121
|
+
<div className="relative border border-dashed border-gray-300 rounded-lg p-8 text-center bg-gray-50/50">
|
|
122
|
+
<div className="absolute inset-0 bg-white/40 backdrop-blur-[1px] rounded-lg" />
|
|
123
|
+
<div className="relative z-10 max-w-sm mx-auto">
|
|
124
|
+
<h3 className="text-lg font-semibold text-gray-900">Unlock {featureName}</h3>
|
|
125
|
+
<p className="mt-2 text-sm text-gray-500">
|
|
126
|
+
This feature is available on our Professional and Enterprise plans. Upgrade today to scale.
|
|
127
|
+
</p>
|
|
128
|
+
<div className="mt-4">
|
|
129
|
+
<Button href="/settings/billing" variant="default">
|
|
130
|
+
View Pricing Plans
|
|
131
|
+
</Button>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
);
|
|
136
|
+
}
|
|
137
|
+
```
|
|
@@ -1,121 +1,121 @@
|
|
|
1
|
-
# SaaS Transformation Checklist
|
|
2
|
-
|
|
3
|
-
Detailed verification checkpoints and implementation patterns for converting a single-tenant application to a multi-tenant SaaS platform.
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
## Phase 1: Discovery & Analysis
|
|
8
|
-
|
|
9
|
-
- [ ] **Data Model Mapping**: Extract all relationships. Identify which tables are "global" (shared reference data, e.g., plan configurations, country list) and which are "tenant-specific" (user data, posts, transactions).
|
|
10
|
-
- [ ] **Auth Audit**: Check if the app uses native session storage, custom cookies, or third-party auth. Identify where users are created and stored.
|
|
11
|
-
- [ ] **API Access Points**: Audit all public and internal route files. Note down endpoints that lack authentication.
|
|
12
|
-
- [ ] **Pricing Strategy Fit**: Document the exact plan rules.
|
|
13
|
-
- *Example*: Free Plan has 1 project limit. Pro Plan has unlimited projects.
|
|
14
|
-
|
|
15
|
-
---
|
|
16
|
-
|
|
17
|
-
## Phase 2: Multi-Tenancy Foundation
|
|
18
|
-
|
|
19
|
-
### PostgreSQL Row-Level Security (RLS) Pattern
|
|
20
|
-
When using a shared-schema model, configure your tables to automatically isolate data.
|
|
21
|
-
|
|
22
|
-
```sql
|
|
23
|
-
-- 1. Enable RLS
|
|
24
|
-
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
|
|
25
|
-
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
|
|
26
|
-
|
|
27
|
-
-- 2. Create helper function to retrieve current tenant from session context
|
|
28
|
-
CREATE OR REPLACE FUNCTION auth.current_tenant_id()
|
|
29
|
-
RETURNS UUID AS $$
|
|
30
|
-
SELECT NULLIF(current_setting('app.current_tenant_id', true), '')::UUID;
|
|
31
|
-
$$ LANGUAGE sql STABLE;
|
|
32
|
-
|
|
33
|
-
-- 3. Apply policies using membership lookup
|
|
34
|
-
CREATE POLICY tenant_isolation_policy ON projects
|
|
35
|
-
AS RESTRICTIVE
|
|
36
|
-
USING (
|
|
37
|
-
workspace_id = auth.current_tenant_id()
|
|
38
|
-
);
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
### Middleware Connection Context Setting (Node.js/Express Example)
|
|
42
|
-
Ensure every database transaction or connection sets the `app.current_tenant_id` session configuration.
|
|
43
|
-
|
|
44
|
-
```typescript
|
|
45
|
-
import { Request, Response, NextFunction } from 'express';
|
|
46
|
-
import { db } from '../lib/db';
|
|
47
|
-
|
|
48
|
-
export async function tenantMiddleware(req: Request, res: Response, next: NextFunction) {
|
|
49
|
-
const tenantId = req.headers['x-tenant-id'] || req.user?.workspaceId;
|
|
50
|
-
|
|
51
|
-
if (!tenantId) {
|
|
52
|
-
return res.status(400).json({ error: 'Tenant context missing' });
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
// Inject session variable inside transaction wrapper or pool client
|
|
56
|
-
await db.execute(sql`SET LOCAL app.current_tenant_id = ${tenantId}`);
|
|
57
|
-
next();
|
|
58
|
-
}
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
---
|
|
62
|
-
|
|
63
|
-
## Phase 3: Authentication & Authorization
|
|
64
|
-
|
|
65
|
-
- [ ] **Workspace Member Resolution**: Ensure a user is mapped to multiple workspaces via a join table (`workspace_members`).
|
|
66
|
-
- [ ] **Role-Based Checkpoint**:
|
|
67
|
-
```typescript
|
|
68
|
-
export function requireRole(allowedRoles: ('owner' | 'admin' | 'member')[]) {
|
|
69
|
-
return (req: Request, res: Response, next: NextFunction) => {
|
|
70
|
-
const userRole = req.user?.role;
|
|
71
|
-
if (!userRole || !allowedRoles.includes(userRole)) {
|
|
72
|
-
return res.status(403).json({ error: 'Permission denied' });
|
|
73
|
-
}
|
|
74
|
-
next();
|
|
75
|
-
};
|
|
76
|
-
}
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
---
|
|
80
|
-
|
|
81
|
-
## Phase 4: Billing & Subscription
|
|
82
|
-
|
|
83
|
-
- [ ] **Stripe Event Handling Idempotency**: Save all processed Stripe Event IDs to a database log table to prevent processing webhooks twice.
|
|
84
|
-
- [ ] **Dunning Flow**: Set up Stripe triggers for `invoice.payment_failed` to send a dynamic link allowing the user to update their payment card in one click.
|
|
85
|
-
|
|
86
|
-
---
|
|
87
|
-
|
|
88
|
-
## Phase 5: Workspace & Team Management
|
|
89
|
-
|
|
90
|
-
- [ ] **Invitation Tokens**: Generate cryptographically secure invite tokens using standard library utilities:
|
|
91
|
-
```typescript
|
|
92
|
-
import crypto from 'crypto';
|
|
93
|
-
const token = crypto.randomBytes(32).toString('hex');
|
|
94
|
-
```
|
|
95
|
-
- [ ] **Workspace Switcher Logic**: When changing workspaces, update the session token (or JWT) and redirect the user back to the application dashboard to force frontend hydration with new data.
|
|
96
|
-
|
|
97
|
-
---
|
|
98
|
-
|
|
99
|
-
## Phase 6: SaaS Frontend & Landing
|
|
100
|
-
|
|
101
|
-
- [ ] **Responsive Navigation**: Use dynamic dashboard layouts that collapse sidebars on mobile touchpoints.
|
|
102
|
-
- [ ] **SEO Configuration**: Output unique structured data per landing section.
|
|
103
|
-
|
|
104
|
-
---
|
|
105
|
-
|
|
106
|
-
## Phase 7: API Layer & Feature Gating
|
|
107
|
-
|
|
108
|
-
- [ ] **Feature Flags**: Guard pages and controls using a hook pattern:
|
|
109
|
-
```typescript
|
|
110
|
-
const { hasFeature } = useSubscription();
|
|
111
|
-
if (!hasFeature('advanced-export')) {
|
|
112
|
-
return <UpgradeBanner featureName="Advanced Export" />;
|
|
113
|
-
}
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
---
|
|
117
|
-
|
|
118
|
-
## Phase 8: Production Hardening & Launch
|
|
119
|
-
|
|
120
|
-
- [ ] **Rollback Runbook**: Create rollback scripts for DB migrations.
|
|
121
|
-
- [ ] **Cascade Deletion Tests**: Ensure deleting a workspace cleans up all child tables cleanly without foreign-key orphan exceptions.
|
|
1
|
+
# SaaS Transformation Checklist
|
|
2
|
+
|
|
3
|
+
Detailed verification checkpoints and implementation patterns for converting a single-tenant application to a multi-tenant SaaS platform.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Phase 1: Discovery & Analysis
|
|
8
|
+
|
|
9
|
+
- [ ] **Data Model Mapping**: Extract all relationships. Identify which tables are "global" (shared reference data, e.g., plan configurations, country list) and which are "tenant-specific" (user data, posts, transactions).
|
|
10
|
+
- [ ] **Auth Audit**: Check if the app uses native session storage, custom cookies, or third-party auth. Identify where users are created and stored.
|
|
11
|
+
- [ ] **API Access Points**: Audit all public and internal route files. Note down endpoints that lack authentication.
|
|
12
|
+
- [ ] **Pricing Strategy Fit**: Document the exact plan rules.
|
|
13
|
+
- *Example*: Free Plan has 1 project limit. Pro Plan has unlimited projects.
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Phase 2: Multi-Tenancy Foundation
|
|
18
|
+
|
|
19
|
+
### PostgreSQL Row-Level Security (RLS) Pattern
|
|
20
|
+
When using a shared-schema model, configure your tables to automatically isolate data.
|
|
21
|
+
|
|
22
|
+
```sql
|
|
23
|
+
-- 1. Enable RLS
|
|
24
|
+
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
|
|
25
|
+
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
|
|
26
|
+
|
|
27
|
+
-- 2. Create helper function to retrieve current tenant from session context
|
|
28
|
+
CREATE OR REPLACE FUNCTION auth.current_tenant_id()
|
|
29
|
+
RETURNS UUID AS $$
|
|
30
|
+
SELECT NULLIF(current_setting('app.current_tenant_id', true), '')::UUID;
|
|
31
|
+
$$ LANGUAGE sql STABLE;
|
|
32
|
+
|
|
33
|
+
-- 3. Apply policies using membership lookup
|
|
34
|
+
CREATE POLICY tenant_isolation_policy ON projects
|
|
35
|
+
AS RESTRICTIVE
|
|
36
|
+
USING (
|
|
37
|
+
workspace_id = auth.current_tenant_id()
|
|
38
|
+
);
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Middleware Connection Context Setting (Node.js/Express Example)
|
|
42
|
+
Ensure every database transaction or connection sets the `app.current_tenant_id` session configuration.
|
|
43
|
+
|
|
44
|
+
```typescript
|
|
45
|
+
import { Request, Response, NextFunction } from 'express';
|
|
46
|
+
import { db } from '../lib/db';
|
|
47
|
+
|
|
48
|
+
export async function tenantMiddleware(req: Request, res: Response, next: NextFunction) {
|
|
49
|
+
const tenantId = req.headers['x-tenant-id'] || req.user?.workspaceId;
|
|
50
|
+
|
|
51
|
+
if (!tenantId) {
|
|
52
|
+
return res.status(400).json({ error: 'Tenant context missing' });
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// Inject session variable inside transaction wrapper or pool client
|
|
56
|
+
await db.execute(sql`SET LOCAL app.current_tenant_id = ${tenantId}`);
|
|
57
|
+
next();
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## Phase 3: Authentication & Authorization
|
|
64
|
+
|
|
65
|
+
- [ ] **Workspace Member Resolution**: Ensure a user is mapped to multiple workspaces via a join table (`workspace_members`).
|
|
66
|
+
- [ ] **Role-Based Checkpoint**:
|
|
67
|
+
```typescript
|
|
68
|
+
export function requireRole(allowedRoles: ('owner' | 'admin' | 'member')[]) {
|
|
69
|
+
return (req: Request, res: Response, next: NextFunction) => {
|
|
70
|
+
const userRole = req.user?.role;
|
|
71
|
+
if (!userRole || !allowedRoles.includes(userRole)) {
|
|
72
|
+
return res.status(403).json({ error: 'Permission denied' });
|
|
73
|
+
}
|
|
74
|
+
next();
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
## Phase 4: Billing & Subscription
|
|
82
|
+
|
|
83
|
+
- [ ] **Stripe Event Handling Idempotency**: Save all processed Stripe Event IDs to a database log table to prevent processing webhooks twice.
|
|
84
|
+
- [ ] **Dunning Flow**: Set up Stripe triggers for `invoice.payment_failed` to send a dynamic link allowing the user to update their payment card in one click.
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
## Phase 5: Workspace & Team Management
|
|
89
|
+
|
|
90
|
+
- [ ] **Invitation Tokens**: Generate cryptographically secure invite tokens using standard library utilities:
|
|
91
|
+
```typescript
|
|
92
|
+
import crypto from 'crypto';
|
|
93
|
+
const token = crypto.randomBytes(32).toString('hex');
|
|
94
|
+
```
|
|
95
|
+
- [ ] **Workspace Switcher Logic**: When changing workspaces, update the session token (or JWT) and redirect the user back to the application dashboard to force frontend hydration with new data.
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## Phase 6: SaaS Frontend & Landing
|
|
100
|
+
|
|
101
|
+
- [ ] **Responsive Navigation**: Use dynamic dashboard layouts that collapse sidebars on mobile touchpoints.
|
|
102
|
+
- [ ] **SEO Configuration**: Output unique structured data per landing section.
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## Phase 7: API Layer & Feature Gating
|
|
107
|
+
|
|
108
|
+
- [ ] **Feature Flags**: Guard pages and controls using a hook pattern:
|
|
109
|
+
```typescript
|
|
110
|
+
const { hasFeature } = useSubscription();
|
|
111
|
+
if (!hasFeature('advanced-export')) {
|
|
112
|
+
return <UpgradeBanner featureName="Advanced Export" />;
|
|
113
|
+
}
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## Phase 8: Production Hardening & Launch
|
|
119
|
+
|
|
120
|
+
- [ ] **Rollback Runbook**: Create rollback scripts for DB migrations.
|
|
121
|
+
- [ ] **Cascade Deletion Tests**: Ensure deleting a workspace cleans up all child tables cleanly without foreign-key orphan exceptions.
|