@bruit/component
Advanced tools
BRuit is a User Issues Tool
available on all frameworks that support WebComponents like
Bruit is a webComponent for user review ...
Install
Usage
Configuration
BrtConfig
BrtField
BrtLabels
BrtColors
BrtLogLevels
BrtData
BrtError
Add data in feedback
Handle errors
Framework integrations
Contributing
Having troubles ?
npm install @bruit/component --save
or
<script src="https://unpkg.com/@bruit/component/dist/bruit.js"></script>
<bruit-io> element to click </bruit-io>
with properties :
Framework integrations :
bruit-iowebComponent has aconfigproperty.
configproperty take a BrtConfig value.
BrtConfig is a JSON for configure and customize bruit-io component
| attribute | type | description | required | default value |
|---|---|---|---|---|
| apiKey | string | your personal api key (create my api key) | yes | - |
| form | array<BrtField> | input list for generate form | yes | - |
| closeModalOnSubmit | boolean | true for close modal directly on submit form and send feedback in background | no | false |
| labels | BrtLabels | labels of the modal (title/button/...) | no | see |
| logLevels | BrtLogLevels | type and number of log to send | no | see |
| maxLogLines | number | number of log to send | no | 100 |
| colors | BrtColors | modal theming | no | see |
| apiUrl | string | if you want use your own api for send feedback | no | https://api.bruit.io/feedback |
import { BrtConfig } from '@bruit/component';
BrtConfig.form must be contains minimum one BrtField with id="agreement" and type="checkbox".
this field is used to check if the user agrees to send his personal data.
special ids :
agreement id is used for determinate the field to use for check if user agrees to send his personal datatitle id is used for determinate the field tu use for make the title of feedbackformat :
interface BrtField {
id?: string;
label: string;
type: string;
required?: boolean;
value?: any;
}
import { BrtField } from '@bruit/component';
{
"title": "bruit.io",
"introduction": "send a feedback",
"button": "send"
}
import { BrtLabels } from '@bruit/component';
{
"header": "#2D8297",
"body": "#eee",
"background": "#444444ee",
"errors": "#c31313",
"focus": "#1f5a69"
}
import { BrtColors } from '@bruit/component';
{
"log": true,
"debug": true,
"info": true,
"warn": true,
"error": true,
"network": true,
"click": true,
"url": true
}
import { BrtLogLevels } from '@bruit/component';
import { BrtData } from '@bruit/component';
import { BrtError } from '@bruit/component';
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 component via a script tag.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@bruit/component/dist/test-components.js"></script>
</head>
<body>
<bruit-io></bruit-io>
<script>
var bruitCmp = document.querySelector('bruit-io');
bruitCmp.config = {
apiKey: 'xxxxxxxxxxxxxxxxx',
form: [...]
};
</script>
</body>
</html>
Using bruit-io component within an Angular CLI project is a two-step process. We need to:
CUSTOM_ELEMENTS_SCHEMA in the modules that use the componentsdefineCustomElements(window) from main.ts (or some other appropriate place)Including the CUSTOM_ELEMENTS_SCHEMA in the module allows the use of the web components in the HTML markup without the compiler producing errors. 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 custom elements.
Bruit component include a main function that is used to load the components in the collection. That function is called defineCustomElements() and it needs to be called once during the bootstrapping of your application. One convenient place to do this is in main.ts as such:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { defineCustomElements } from '@bruit/component/dist/loader';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.log(err));
defineCustomElements(window);
With an application built using the create-react-app script the easiest way to include the bruit-io component is to call defineCustomElements(window) from 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 { defineCustomElements } from '@bruit/component/dist/loader';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
defineCustomElements(window);
In order to use the bruit-io component within the Vue app, the application must 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. For example:
import Vue from 'vue';
import App from './App.vue';
import { defineCustomElements } from '@bruit/component/dist/loader';
Vue.config.productionTip = false;
Vue.config.ignoredElements = [/bruit-\w*/];
defineCustomElements(window);
new Vue({
render: h => h(App)
}).$mount('#app');
xxx
FAQs
send your feedbacks with bruit.io
The npm package @bruit/component receives a total of 187 weekly downloads. As such, @bruit/component popularity was classified as not popular.
We found that @bruit/component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.