dialog-web-components

by dialogs

Set of react components for building messaging applications

412 Stars 49 Forks Last release: about 4 years ago (v0.3.0) Apache License 2.0 3.4K Commits 735 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

dialog web components

CircleCI

Quality Gate Status Maintainability Rating Security Rating

Vulnerabilities Bugs Code Smells

Total alerts Language grade: JavaScript

dependencies devDependencies

GitHub tag npm version

license

Docs & Demo

Installation

yarn add @dlghq/dialog-components

or

npm install --save @dlghq/dialog-components

Usage example

import React from 'react';
import { render } from 'react-dom';
import { Avatar } from '@dlghq/dialog-components';

const container = document.getElementById('container');

render( , container );

More components.

Webpack configuration

We're not compiling JS & CSS code before publishing. You have to update or add webpack configuration to your build pipeline.

yarn add babel-loader postcss-loader css-loader style-loader svg-sprite-loader
yarn add @dlghq/babel-preset-dialog @dlghq/postcss-dialog
// webpack.config.js

const fs = require('fs'); const path = require('path');

function resolve(...paths) { return fs.realpathSync(path.join(__dirname, ...paths)); }

const whitelist = [ resolve('src'), // your application code resolve('node_modules/@dlghq/dialog-components/src'), resolve('node_modules/@dlghq/markdown'), resolve('node_modules/@dlghq/react-l10n'), resolve('node_modules/@dlghq/dialog-types'), resolve('node_modules/@dlghq/dialog-utils'), resolve('node_modules/@dlghq/country-codes') ];

module.exports = { module: { rules: [ { test: /.js$/, include: whitelist, loader: 'babel-loader', options: { babelrc: false, cacheDirectory: true, presets: [ [ '@dlghq/dialog', { modules: false, runtime: false } ] ] } }, { test: /.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: false, importLoaders: 1 } }, { loader: 'postcss-loader', options: { plugins() { return require('@dlghq/postcss-dialog')(); } } } ], include: [ resolve('node_modules/@dlghq/dialog-components/src/styles/global.css') ] }, { test: /.css$/, include: whitelist, exclude: [ resolve('node_modules/@dlghq/dialog-components/src/styles/global.css') ], use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: '[name]__[local]' } }, { loader: 'postcss-loader', options: { plugins() { return require('@dlghq/postcss-dialog')(); } } } ] }, { test: /.(jpg|png|svg|gif)$/, exclude: resolve('node_modules/@dlghq/dialog-components/src/components/Icon/svg'), loader: 'file-loader' }, { test: /.svg$/, include: resolve('node_modules/@dlghq/dialog-components/src/components/Icon/svg'), loader: 'svg-sprite-loader' } ] } };

Translations

For some complex components, like

AuthForm
you should wrap your components tree by
@dlghq/react-l10n
Provider
component. Before publishing we generate
messages.json
bundle, which you should pass to
Provider
.
import React from 'react';
import { render } from 'react-dom';
import { Provider } from '@dlghq/react-l10n';
import dialogMessages from '@dlghq/dialog-components/src/messages.json';
import appMessages from './messages';

const container = document.getElementById('container');

const messages = { ...dialogMessages, ...appMessages };

render( , container );

Development

NPM scripts:

  • npm start
    start dev server
  • npm run create
    create new component
  • npm test
    run tests
  • npm run lint
    run linters
  • npm run format
    run formatters
  • npm run build
    build library
  • npm run docs
    build docs
  • npm run release
    build & publish to npm & publish to gh-pages

License

Apache-2.0

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.