How to use @jetbrains/ring-ui - 10 common examples

To help you get started, we’ve selected a few @jetbrains/ring-ui examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

JetBrains / ring-ui / packages / docs / webpack.config.js View on Github

'react-sortable-hoc',
            'prop-types',
            'react-waypoint',
            'angular',
            'classnames',
            'combokeys',
            'moment',
            'simply-uuid',
            'sniffr'
          ]
        },
        // Webpack config part
        devtool,
        module: {
          rules: [
            webpackConfig.loaders.whatwgLoader
          ]
        },
        plugins: optimizePlugins
      })
    ]
  };

  return docsWebpackConfig;
};
console.log('__dirname', path.resolve(__dirname, '../..'))

JetBrains / ring-ui / packages / docs / components / version.js View on Github

import React from 'react';
import PropTypes from 'prop-types';
import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
import PopupMenu from '@jetbrains/ring-ui/components/popup-menu/popup-menu';

import branches from '../branches.json';

import {currentPath} from './utils';
import styles from './index.css';

const HOST = 'https://jetbrains.github.io/ring-ui';

const rgItemType = PopupMenu.ListProps.Type.LINK;

const branchesArr = Object.keys(branches).map(version =&gt; ({
  version,
  path: branches[version],
  // /^0\.1\.\d+$/
  versionRE: new RegExp(`^${version.replace(/\./g, '\\.').replace(/\*/g, '\\d+')}$`)
}));

const Version = ({version}) =&gt; (
  
     {
        const active = branch.versionRE.test(version);

JetBrains / ring-ui / packages / docs / webpack.config.js View on Github

// needed in examples
      alias: {
        '@ring-ui/docs': __dirname,
        '@jetbrains/logos': require('@jetbrains/logos'),
        '@jetbrains/ring-ui': ringUiPath
      }
    },
    context: ringUiPath,
    module: {
      rules: [
        ...webpackConfig.config.module.rules,
        // HTML examples
        {
          test: /example\.html$/,
          use: extractHTML.extract({
            use: webpackConfig.loaders.htmlLoader.loader
          })
        },
        // CSS examples
        {
          test: exampleCssPattern,
          use: extractCSS.extract({
            // no need to emit results, we inline them manually in twig template
            disable: true,
            use: cssLoader
          })
        },
        // twig templates
        {
          test: /\.twig$/,
          loader: 'twig-loader'
        }

JetBrains / ring-ui / packages / docs / webpack.config.js View on Github

const devtool = production ? false : 'cheap-eval-source-map';
  const dllPath = `dll-${envString}`;
  const optimizePlugins = production
    ? [
      new webpack.DefinePlugin(envDefinition),
      new webpack.optimize.UglifyJsPlugin(),
      new webpack.LoaderOptionsPlugin({
        minimize: true
      })
    ]
    : [];

  const exampleCssPattern = /example?\.css$/;
  const [, ...cssLoader] = webpackConfig.loaders.cssLoader.use;
  // Patch cssLoader to avoid using it on examples' styles
  webpackConfig.loaders.cssLoader.exclude = exampleCssPattern;
  const extractCSS = new ExtractTextPlugin('examples/[name]/[hash].css');
  const extractHTML = new ExtractTextPlugin('examples/[name]/[hash].html');

  const getParam = name => (
    env[name] ||
    process.env[`npm_package_config_${name}`] ||
    process.env[`npm_package_config_${envString}_${name}`] ||
    pkgConfig[name] ||
    pkgConfig[envString][name]
  );

  const port = Number(getParam('port'));
  const host = getParam('host');
  const serverUri = getParam('hub');
  const clientId = getParam('clientId');

JetBrains / ring-ui / packages / docs / webpack.config.js View on Github

}
  };
  const devtool = production ? false : 'cheap-eval-source-map';
  const dllPath = `dll-${envString}`;
  const optimizePlugins = production
    ? [
      new webpack.DefinePlugin(envDefinition),
      new webpack.optimize.UglifyJsPlugin(),
      new webpack.LoaderOptionsPlugin({
        minimize: true
      })
    ]
    : [];

  const exampleCssPattern = /example?\.css$/;
  const [, ...cssLoader] = webpackConfig.loaders.cssLoader.use;
  // Patch cssLoader to avoid using it on examples' styles
  webpackConfig.loaders.cssLoader.exclude = exampleCssPattern;
  const extractCSS = new ExtractTextPlugin('examples/[name]/[hash].css');
  const extractHTML = new ExtractTextPlugin('examples/[name]/[hash].html');

  const getParam = name => (
    env[name] ||
    process.env[`npm_package_config_${name}`] ||
    process.env[`npm_package_config_${envString}_${name}`] ||
    pkgConfig[name] ||
    pkgConfig[envString][name]
  );

  const port = Number(getParam('port'));
  const host = getParam('host');
  const serverUri = getParam('hub');

JetBrains / ring-ui / packages / docs / webpack.config.js View on Github

const createEntriesList = require('./create-entries-list');

// Borrowed from webpack-dev-server
const colorInfo = msg => `\u001b[1m\u001b[34m${msg}\u001b[39m\u001b[22m`;

const ringUiPath = path.dirname(
  require.resolve('@jetbrains/ring-ui/package.json')
);
const publicPath = '/';
const distDir = 'dist';
const contentBase = path.resolve(__dirname, distDir);
const siteComponents = path.resolve(__dirname, 'components');

// For docs-app entry point
webpackConfig.componentsPath.push(siteComponents);
webpackConfig.loaders.svgSpriteLoader.include.push(
  require('@jetbrains/logos'),
  path.dirname(require.resolve('octicons/package.json'))
);

module.exports = (env = {}) => {
  const {server, production} = env;
  const envString = production ? 'production' : 'development';
  const envDefinition = {
    'process.env': {
      NODE_ENV: JSON.stringify(envString)
    }
  };
  const devtool = production ? false : 'cheap-eval-source-map';
  const dllPath = `dll-${envString}`;
  const optimizePlugins = production
    ? [

JetBrains / ring-ui / packages / docs / webpack.config.js View on Github

'prop-types',
            'react-waypoint',
            'angular',
            'classnames',
            'combokeys',
            'moment',
            'simply-uuid',
            'sniffr'
          ]
        },
        dllDir: path.join(contentBase, dllPath),
        webpackConfig: {
          devtool,
          module: {
            rules: [
              webpackConfig.loaders.whatwgLoader
            ]
          },
          plugins: optimizePlugins // DllBundlesPlugin will set the DllPlugin here
        }
      })
    ]
  };

  return docsWebpackConfig;
};

JetBrains / ring-ui / packages / docs / webpack.config.js View on Github

const createEntriesList = require('./create-entries-list');

// Borrowed from webpack-dev-server
const colorInfo = msg => `\u001b[1m\u001b[34m${msg}\u001b[39m\u001b[22m`;

const ringUiPath = path.dirname(
  require.resolve('@jetbrains/ring-ui/package.json')
);
const publicPath = '/';
const distDir = 'dist';
const contentBase = path.resolve(__dirname, distDir);
const siteComponents = path.resolve(__dirname, 'components');

// For docs-app entry point
webpackConfig.componentsPath.push(siteComponents);
webpackConfig.loaders.svgSpriteLoader.include.push(
  require('@jetbrains/logos'),
  path.dirname(require.resolve('octicons/package.json'))
);

module.exports = (env = {}) => {
  const {server, production} = env;
  const envString = production ? 'production' : 'development';
  const envDefinition = {
    'process.env': {
      NODE_ENV: JSON.stringify(envString)
    }
  };
  const devtool = production ? false : 'cheap-eval-source-map';
  const dllPath = `dll-${envString}`;
  const optimizePlugins = production
    ? [

JetBrains / ring-ui / packages / docs / webpack.config.js View on Github

modules: [path.resolve(ringUiPath, 'node_modules')],
      // needed in examples
      alias: {
        '@ring-ui/docs': __dirname,
        '@jetbrains/ring-ui': ringUiPath
      }
    },
    context: ringUiPath,
    module: {
      rules: [
        ...webpackConfig.config.module.rules,
        // HTML examples
        {
          test: /example\.html$/,
          use: extractHTML.extract({
            use: webpackConfig.loaders.htmlLoader.loader
          })
        },
        // CSS examples
        {
          test: exampleCssPattern,
          use: extractCSS.extract({
            // no need to emit results, we inline them manually in twig template
            disable: true,
            use: cssLoader
          })
        },
        // twig templates
        {
          test: /\.twig$/,
          loader: 'twig-loader'
        }

JetBrains / ring-ui / packages / docs / webpack.config.js View on Github

const docpackSetup = require('./webpack-docs-plugin.setup');
const createEntriesList = require('./create-entries-list');

// Borrowed from webpack-dev-server
const colorInfo = msg => `\u001b[1m\u001b[34m${msg}\u001b[39m\u001b[22m`;

const ringUiPath = path.dirname(
  require.resolve('@jetbrains/ring-ui/package.json')
);
const publicPath = '/';
const distDir = 'dist';
const contentBase = path.resolve(__dirname, distDir);
const siteComponents = path.resolve(__dirname, 'components');

// For docs-app entry point
webpackConfig.componentsPath.push(siteComponents);
webpackConfig.loaders.svgSpriteLoader.include.push(
  require('@jetbrains/logos'),
  path.dirname(require.resolve('octicons/package.json'))
);

module.exports = (env = {}) => {
  const {server, production} = env;
  const envString = production ? 'production' : 'development';
  const envDefinition = {
    'process.env': {
      NODE_ENV: JSON.stringify(envString)
    }
  };
  const devtool = production ? false : 'cheap-eval-source-map';
  const dllPath = `dll-${envString}`;
  const optimizePlugins = production

How to use @jetbrains/ring-ui - 10 common examples

To help you get started, we’ve selected a few @jetbrains/ring-ui examples, based on popular ways it is used in public projects.

@jetbrains/ring-ui

Package Health Score

Popular @jetbrains/ring-ui functions

Similar packages