SpyBug React

SpyBug is a React package that offers a flexible bug/feedback collection component for React applications. It empowers users to upload images from their devices and include comments to describe specific bugs or suggested improvements. To get an API key you can create your account on app.spybug.io and get started for free 🚀

Demo

Visit Spybug Storybook and look around!

Installation

Install @b-dev/spybug-react with npm or a package manager of your choice.

  npm i @b-dev/spybug-react

Usage

Basic implementation

Inside your React app add the styles and the SpybugPanel component.

// App.tsx

import '@b-dev/spybug-react/dist/style.css'
import { SpybugPanel } from '@b-dev/spybug-react'

function App() {
  return (
    <>
      <div>
        Hello app root
      </div>
      <SpybugPanel apiKey={'API_KEY'} senderEmail={'SENDER_EMAIL'} />
    </>
  )
}

export default App

Custom button

// App.tsx

import '@b-dev/spybug-react/dist/style.css'
import { SpybugPanel } from '@b-dev/spybug-react'

function App() {
  return (
    <>
      <div>
        Hello app root
      </div>
      <SpybugPanel apiKey={'API_KEY'} senderEmail={'SENDER_EMAIL'}>
        <button>Helooo</button>
      </SpybugPanel> 
    </>
  )
}

export default App

You can also place SpybugPanel inside other components to place the button wherever you want.

Main Scripts

• dev: Bootstrap the Storybook preview with Hot Reload.
• build: Builds the static storybook project.
• build:lib: Builds the component library into the dist folder.
• lint:fix: Applies linting.
• format:prettier: Formats files using the prettier.
• test: Runs testing using watch mode.
• test:cov: Runs testing displaying a coverage report.

Contributing

Feel free to submit pull requests!

Run Locally

Clone the project

  git clone https://github.com/Bereyziat-Development/spybug-react

Go to the project directory

  cd spybug-react

Install dependencies

  pnpm install

Start the storybook

  pnpm run dev

Running Tests

To run tests, run the following command

  pnpm run test

Tech Stack

• ⚛️ React
• 📚 Storybook - Components preview
• 🖌️ Tailwind CSS
• ⏩ Vite - Run and build the project blazingly fast!
• ⚡ Vitest - Components Unit Testing
• 📐 ESLint & Prettier - Formatting and Linting
• 🌟 Typescript
• ⏰ Release Please — Generate the changelog with the release-please workflow
• 👷 Github Actions — Releasing versions to NPM
• 📦 pnpm - Package manager

Acknowledgements

• Ignacio Miranda Figueroa - Thank you for the awesome template
• Katherine Oelsner - Thank you for providing an awesome tool Readme.so

License

MIT