@kitql/kit-feedback v0.0.5

🚧 Kit Modules Kit Feedback 🚧

About it

🚀 The Kit Feedback module lets your users :

• create an issue (with a label set in config)
• see milestones filtered by string filter (ex. : FEEDBACK) (to set in config)
• see issues (inside milestones) filtered by label permission (set label in config to tell what the user can see)
• switch between open / closed issues
• add comments on issues
• see only comment with 👀 reaction (or other reaction, to set in config among Github reactions)

⏭️ Next updates :

• config refactoring
• upvote/downvote on issues and comments (except when created from Github)
• screenshots upload (using https://github.com/upload/policies/assets endpoint ?)
• support for extra (custom) metadata (ex. : page on which the user writes the issue)
• support for comment EDIT ( & DELETE ? )

Install

yarn add @kitql/kit-feedback

Setup

1. Initialize the client

  client.initialize({ token: process.env.GITHUB_API_TOKEN });

Uses env-cmd here with process.env defined in vite because VITE_ prefix environment variables are public. See packages/modules/kit-feedback/package.json and packages/modules/kit-feedback/svelte.config.js

2. Override the default configuration and add the Feedback component to your code :

<script lang="ts" context="module">
	import { config, Feedback } from '$lib';
</script>

<script lang="ts">
	let show = true;
	const me = { id: 'jbruxelle' };

	config.override({
		title: 'Feedback',
		dev: false,
		identifier: () => me.id,
		repository: {
			name: 'my-repo-name',
			owner: 'the-owner-name'
		},
		staff: {
			members: {
				jycouet: 'Support',
				jbruxelle: 'Support'
			}
		},
		milestones: {
			filter: '[Feedback]',
			removeFilterFromName: true
		},
		issues: {
			text: {
				'create-button': 'New request',
				create: {
					'title-field': {
						label: 'Title',
						placeholder: 'Your request title'
					},
					'description-field': {
						label: 'Description',
						placeholder: 'Tell us more about your request'
					},
					submit: {
						validate: 'Confirm',
						cancel: 'Cancel'
					}
				},
				states: {
					open: 'Open',
					closed: 'Done'
				},
				'no-description': 'No description... sorry'
			},
			filters: {
				labels: ['question']
			},
			create: {
				label: 'question'
			},
			comments: {
				create: {
					placeholder: 'Your comment here !'
				},
				reactionFilter: 'Eyes'
			}
		}
	});
</script>

<button on:click={() => (show = true)}>Open feedback</button>

<Feedback bind:show />

3. Enjoy ✨