Feeback Client

Bu projenin amacı kendi projelerinden müşteri yorumlarını toplama amacı ile geliştirilmiş.

Demo

Default Component için tıklayınız

Customized Component için tıklayınız

Install

npm i @gokayerim/feedback
yarn add @gokayerim/feedback

Usage

Feedback componentini eklemek istediginz sayfaya aşağıda ki kodları yazarak kullanabilirsiniz.

import Feedback from '@gokayerim/feedback';
...

return(
    ...
   <Feedback vendorId={vendorId} />
    ...
)

Not: Komponenti kullanabilmek için geçerli bir vendorId'iniz olmalıdır. Demo amaçlı aşagıdaki vendorId'leri kullabilirsiniz.

• Vendor1
• Vendor2

Run Locally

Terminal ile projeye girip dependency'ileri indirikten sonra aşağıdaki komutu çalıştırarak lokal ortamda çalıştırabilirsiniz.

yarn dev

Not: Lokal ortamda sorgu yapabilmeniz için Server uygulamasını da çalıştırmalısınız. Server Uygulaması README dosyasına ulaşmak için lütfen tıklayın.

Run with Remote Server

Lokal Backend yerine uzak sunucu ile çalıştırmak için aşağıdakı komutu kullanabilirsiniz.

yarn dev:prod

Props

| Prop | isMandatory | type | Desciption | | ---------------------------- | :---------: | :---------: | :---------------------------------------------------- | | vendorId | true | string | Yorumun kaydedileceği vendorId | | customButtonClassName | false | string | Button için custom css classı | | customButtonEl | false | JSX.Element | Button için custom element | | onButtonClick | false | func | Button tıklanıldığında tetiklenecek fonksiyon | | customFeedbackModalClassName | false | string | Feedback Modalı için custom css classı | | customFeedbackModalTitle | false | string | Feedback Modalı custom başlığı | | maxFeedbackLength | false | number | Girilebilecek max feedback uzunluğu (varsayılan 2000) | | onFeedbackSubmit | false | func | Submit tıklanıldığında tetiklenecek fonksiyon | | customSuccessModalClassName | false | string | Success Modalı custom custom css classı | | customSucessMessage | false | string | Success Modal mesajı |

Unit Tests

Unit testleri çalıştırmak için aşağıdaki komutu çalıştırabilirsiniz.

yarn test

Coverage Rapor için ise şu komutu kullanmalısınız.

yarn test:coverage

Tech Stack

Proje gelşitirilirken kullanılan teknolojiler/frameworkler/kütüphaneler aşağıda listelenmşir.

• React/Typescript
• Vite
• react-icons
• Firebase (Hosting)
• Jest/Enzyme