Next.js Supabase V3 (#463)
Version 3 of the kit: - Radix UI replaced with Base UI (using the Shadcn UI patterns) - next-intl replaces react-i18next - enhanceAction deprecated; usage moved to next-safe-action - main layout now wrapped with [locale] path segment - Teams only mode - Layout updates - Zod v4 - Next.js 16.2 - Typescript 6 - All other dependencies updated - Removed deprecated Edge CSRF - Dynamic Github Action runner
This commit is contained in:
committed by
GitHub
parent
4912e402a3
commit
7ebff31475
70
docs/plugins/feedback-plugin.mdoc
Normal file
70
docs/plugins/feedback-plugin.mdoc
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
status: "published"
|
||||
title: 'Add a Feedback Widget plugin to your Next.js Supabase SaaS Starter kit'
|
||||
label: 'Feedback Widget'
|
||||
order: 5
|
||||
description: 'Add a Feedback Widget plugin to your Next.js Supabase SaaS Starter kit'
|
||||
---
|
||||
|
||||
This plugin is a lighter version of the Roadmap plugin. It is recommended to install the Roadmap plugin if you need more features.
|
||||
|
||||
The feedback plugin allows you to add a feedback widget to your app. Users can provide feedback on your app, and you can view and manage feedback submissions in the admin panel.
|
||||
|
||||
### Installation
|
||||
|
||||
Pull the plugin from the main repository:
|
||||
|
||||
```
|
||||
npx @makerkit/cli@latest plugins add feedback
|
||||
```
|
||||
|
||||
The codemod will automatically:
|
||||
- Add the `@kit/feedback` dependency and install packages
|
||||
- Add the feedback sidebar item to the admin panel
|
||||
- Create the translation file at `apps/web/i18n/messages/en/feedback.json`
|
||||
- Add the `feedback` namespace to your i18n settings
|
||||
- Create the Supabase migration file for the feedback table
|
||||
|
||||
### Run the migrations
|
||||
|
||||
After installation, run the migration and regenerate types:
|
||||
|
||||
```
|
||||
pnpm run supabase:web:reset
|
||||
pnpm run supabase:web:typegen
|
||||
```
|
||||
|
||||
### Import the component
|
||||
|
||||
Now, you can import the component from the plugin:
|
||||
|
||||
```tsx
|
||||
import { FeedbackPopup } from '@kit/feedback';
|
||||
```
|
||||
|
||||
And use it in your app:
|
||||
|
||||
```tsx
|
||||
<FeedbackPopup>
|
||||
<Button>Gimme feedback</Button>
|
||||
</FeedbackPopup>
|
||||
```
|
||||
|
||||
You can also import the form alone - so you can customize its appearance:
|
||||
|
||||
```tsx
|
||||
import {FeedbackForm} from '@kit/feedback';
|
||||
```
|
||||
|
||||
And use it in your app:
|
||||
|
||||
```tsx
|
||||
<FeedbackForm/>
|
||||
```
|
||||
|
||||
## Admin Panel
|
||||
|
||||
The admin pages and sidebar item are automatically set up by the CLI. You can find them at:
|
||||
|
||||
- `apps/web/app/[locale]/admin/feedback/page.tsx` — Feedback submissions list
|
||||
- `apps/web/app/[locale]/admin/feedback/[id]/page.tsx` — Submission detail page
|
||||
Reference in New Issue
Block a user