Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@bruit/component

Package Overview
Dependencies
Maintainers
1
Versions
162
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@bruit/component

send your feedbacks with bruit.io

  • 0.7.3
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

bruit.io

NPM Version License License Built With Stencil

bruit.io is a Web Component built with Stencil.js

Available on all frameworks that support Web Components such as

Angular React Ember Vue Stencil Polymer Ionic Meteor Backbone Aurelia


bruit.io is a tool to get your users feedbacks, designed to be as simple to use as possible, following the Web Components standards. Users' feedbacks are sent directly to your favorite project management tools 🎉 .

bruit.io is built around an open source Web Component and a backend reciving the users feedback.

And we do no data retention at all about those feedbacks 👏


Getting started

start on bruit.io

By default, bruit.io component posts feedbacks to bruit.io api. If you wish, It can be connected with your own.

The free bruit.io api allows to pass feedbacks on to tools such as

Mail GitLab Trello GitHub Slack Basecamp

Table of Contents

Installation
Usage
Configuration
    BrtConfig
    BrtCoreConfig
    BrtField
    BrtLabels
    BrtColors
    BrtLogCacheLength
Add data in feedbacks
Handle errors
Frameworks integration
Contributing
Having troubles?

Installation

bruit.io can be installed either with a command line

npm install @bruit/component --save

Or by directly modifying your index.html file

<script src="https://unpkg.com/@bruit/component/dist/bruit.js"></script>

Usage

Simply add this tag wherever you want in your project:

<bruit-io> ... optional element to click ... </bruit-io>

These properties are available on the component:

Integration code examples are available for these platforms:

Javascript      Angular      React      Vue

Configuration

bruit-io Web Component has a config attribute, which takes a value of BrtConfig type.

defineBruitElements function which takes a configuration of BrtCoreConfig type.

BrtConfig

Describes the options for the bruit-io component

interface BrtConfig {
  apiKey?: string;
  form: Array<BrtField>;
  labels?: BrtLabels;
  colors?: BrtColors;
  closeModalOnSubmit?: boolean;
  apiUrl?: string;
}
AttributeTypeDescriptionMandatoryDefault value
apiKeystringyour personal api key (create an api key)no-
formarray<BrtField>inputs list for the generated formyes-
labelsBrtLabelsdescribes the labels of the modal (title / button / ...)nosee
colorsBrtColorsAllows to pick your colors in the modal themingnosee
closeModalOnSubmitbooleantrue to have modal closed automatically on submit (feedback is sent in background)nofalse
apiUrlstringAllows to use some third party backend for feedback processingnosee

Typescript import :

import { BrtConfig } from '@bruit/component';

BrtCoreConfig

Describes the options for the bruit core

interface BrtCoreConfig {
  logCacheLength?: BrtLogCacheLength;
}
AttributeTypeDescriptionMandatoryDefault value
logCacheLengthBrtLogCacheLengthUsed to filter the logs to send by their level (debug, warn, error, etc)nosee

Typescript import :

import { BrtCoreConfig } from '@bruit/component';

BrtField

Describes both the fields displayed in the popup form and the users' answers.

interface BrtField {
  id?: string;
  label: string;
  type: BrtFieldType;
  required?: boolean;
  value?: any;
  max?: number;
}
AttributeTypeDescriptionMandatory
idstringUnique identifier for the fieldno
labelstringPlaceholder / label for the fieldyes
typeBrtFieldTypeThe input type of the fieldyes
requiredbooleantrue to make the field required to send the feedbackno
valueanyThe value typed by the userno
maxnumbermax number for rating typeno

BrtConfig.form must contain one BrtField with id="agreement" and type="checkbox", used to check whether personal data should be sent with the feedback.

There are special values for the id attribute:

  • agreement: sets the field to use to check whether user agrees to send his personal data
  • title: sets the field used to display the title of feedback

Typescript import:

import { BrtField } from '@bruit/component';

BrtLabels

Used to describe the texts displayed in the modal.

interface BrtLabels {
  title?: string;
  introduction?: string;
  button?: string;
}
AttributeDescriptionDefault value
titleDefines the title of the modalbruit.io
introductionDefines the description textsend a feedback
buttonDefines the text of the submit buttonsend

Typescript import:

import { BrtLabels } from '@bruit/component';

BrtColors

If you feel like an artist 🎨 , you may use BrtColors to change the theme of the modal.

This gives the possiblity to change the header, body, background, errors and focus colors.

Only hexadecimal values are allowed here.

interface BrtColors {
  header?: string;
  body?: string;
  background?: string;
  errors?: string;
  focus?: string;
}
AttributeDescriptionDefault value
headerthe modal's header color#2D8297
bodythe color for the background of the modal#eee
backgroundthe color used to dim what's behind the modal#444444ee
errorsthe text color to use for errors#c31313
focusthe color to use on focused field#1f5a6

Typescript import:

import { BrtColors } from '@bruit/component';

BrtLogCacheLength

By default, all log levels (log, warn, errors, ...) are sent in the feedback. BrtLogCacheLength allows to disable specific ones.

To disable a type, just set the related type to 0 in the logCacheLength section of core configuration:

{
  "logCacheLength": {
    "log": 0,
    ...
  }
}
interface BrtLogCacheLength {
  log?: number;
  debug?: number;
  info?: number;
  warn?: number;
  error?: number;
  network?: number;
  click?: number;
  url?: number;
}

bruit.io adds special types of logs:

  • network type is for your fetch and xmlHttpRequest calls.
  • click type is for mouse click event.
  • url type logs all url changing

Typescript import:

import { BrtLogCacheLength } from '@bruit/component';

BrtFeedback

By default, bruit.io component posts a feedback to bruit.io API (https://api.bruit.io/feedback).

If you wish, it can be connected with your own API.

To do it, you must provide a API endpoint, to be passed to BrtConfig as apiUrl.

bruit.io component posts a BrtFeedback to your API endpoint.

interface BrtFeedback {
  apiKey?: string;
  canvas?: string;
  url?: string;
  cookies?: BrtCookies;
  navigator?: BrtNavigatorInfo;
  display?: BrtScreenInfo;
  logs?: Array<BrtLog>;
  data: Array<BrtData>;
}

Typescript import:

import { BrtFeedback } from '@bruit/types';

Add data to the feedback

It is possible to automatically had technical data in the feedback, for example the version number of your application, the identifier of the user sending the feedback, etc.

This is done by using either the data or dataFn property on the component.

data

data property is used to send an array of objects to add to the feedback to the component.

The property takes a BrtData array as a value.

dataFn

dataFn property takes a function as a value. The function should return either an array of BrtData or a promise of an array of BrtData.

BrtData

Used to pass additional data to the feedback (ie the application version number)

interface BrtData {
  label: string;
  type?: string;
  value: any;
  id?: string;
}
AttributeTypeDescriptionMandatory
labelstringa label for the datayes
typestringthe type of the datano
valueanythe value to sendyes
idstringan identifier for the datano

Typescript import:

import { BrtData } from '@bruit/component';

Handle errors

event

bruit-io emits onError events when an error occurs.

An error is of type BrtError, composed by a code and a text.

more information about errors

BrtError

Format of the errors which may be sent by the component.

interface BrtError {
  code: number;
  text: string;
}

Typescript import:

import { BrtError } from '@bruit/component';

Framework integrations

JavaScript

Integrating bruit-io component to a project without a JavaScript framework is straight forward. If you're using a simple HTML page, you can add bruit.io component via a script tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@bruit/component/dist/bruit.js"></script>
  </head>
  <body>
    <bruit-io></bruit-io>
    <script>
      var bruitCmp = document.querySelector('bruit-io');
      bruitCmp.addEventListener('onReady', function () {
        bruitCmp.start();
      });
      bruitCmp.config = {
        apiKey: 'xxxxxxxxxxxxxxxxx',
        form: [...]
      };
    </script>
  </body>
</html>

from stencil documentation

Angular

Using bruit-io component within an Angular project is a two-step process. You need to:

  1. Include the CUSTOM_ELEMENTS_SCHEMA in the modules that use the components
  2. Call defineBruitElements() from main.ts (or some other appropriate place)

Including the Custom Elements Schema

Including the CUSTOM_ELEMENTS_SCHEMA in the module allows the use of Web Components in the HTML files. Here is an example of adding it to AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

The CUSTOM_ELEMENTS_SCHEMA needs to be included in any module that uses bruit.io.

Calling defineBruitElements

bruit.io component includes a function used to load itself in the application window object. That function is called defineBruitElements() and needs to be executed once during the bootstrapping of your application. One convenient place to add it is in the main.ts file as follows:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { defineBruitElements } from '@bruit/component/dist/init';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.log(err));
defineBruitElements();

Using bruit.io in an Angular component

<bruit-io
  [config]="bruitConfig"
  [data]="bruitData"
  [dataFn]="bruitDataPromise()"
  (onError)="handleBruitError($event)"
></bruit-io>
public bruitConfig: BrtConfig = {
  apiKey:"xxxxxxxxxxx",
  form:[...]
};

public bruitData: Array<BrtData> = [
  {
    label:"version",
    value: environment.version
  }
];

constructor(private api : ApiService){}

bruitDataPromise(): Promise<Array<BrtData>>{
  return this.api.getUser().then( user =>
    [
      {
        label: "user id",
        value: user.id
      },
      {
        label: "user email",
        value: user.email
      }
    ]
  );
}

handleBruitError(error: BrtError){
  ...
}

from stencil documentation

React

With an application built using React CLI (namely create-react-app), the easiest way is to include the bruit-io component by calling the defineBruitElements() method in the index.js file.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { defineBruitElements } from '@bruit/component/dist/init';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
defineBruitElements();

from stencil documentation

Vue

In order to use the bruit-io Web Component inside of a Vue application, it should be modified to define the custom elements and to inform the Vue compiler which elements to ignore during compilation. This can all be done within the main.js file as follows:

import Vue from 'vue';
import App from './App.vue';
import { defineBruitElements } from '@bruit/component/dist/init';

Vue.config.productionTip = false;
Vue.config.ignoredElements = [/bruit-\w*/];

defineBruitElements();

new Vue({
  render: h => h(App)
}).$mount('#app');

from stencil documentation

Contributing

Bruit.io web component is 100% free and open source. Contributing to bruit.io may involve writing TypeScript, TSX, Stencil, SCSS or Markdown depending on the component you are working on. We are looking for help in any of these areas!

Having troubles ?

Keywords

FAQs

Package last updated on 03 Jan 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc