@dlghq/dialog-components

    0.311.0 • Public • Published

    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(
      <Avatar
        title="Hipster Partycat"
        image="https://octodex.github.com/images/hipster-partycat.jpg"
      />,
      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(
      <Provider messages={messages} locale={navigator.language}>
        <App />
      </Provider>,
      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

    Install

    npm i @dlghq/dialog-components

    DownloadsWeekly Downloads

    1,043

    Version

    0.311.0

    License

    Apache-2.0

    Unpacked Size

    1.75 MB

    Total Files

    901

    Last publish

    Collaborators

    • argonavt11
    • dialogs
    • dlghq-bot
    • timurkhabibullin