A UI component library from AppNexus.
Switch branches/tags
132-tab-focus-radio-checkbox 150-browserstack 236-banner-icon-is-small 313-autocomplete-private 319-paginator-expand-bug 344-on-select-docs 421-expander-portal-unmount 445-sidebar-collapse 448-synthetic-warning 457-resizer-flex-docs 470-icon-is-disabled 474-divider-visible-bugfix 479-single-select-w-search-jon 489-generic-empty-state-wrapper 511-light-loadingindicator 553-empty-message 554-inline-block 570-asterisk-icon 611-sidebar-offscreen-access 614-text-field-warning 660-file-image-icons 670-touch-events 678-beaker-icon 681-expanderpanel-padding 687-dialog-footer 716-drop-menu-not-closing 740-radiogroup-isdisabled 748-dateselect-issues 758-folder-icon 777 779-searchable-multi-select-group-spacing 797-CheckboxLabeled-click-area 797-clickable-areas 801-sidebar-gripper 804-disable-options-searchable-multi-select 810-help-icon-color 817-submarine-ff 821 831-add-optional-tab-styling 831-update-tabs-styling 832-tab-examples 851-IconSelect 851-checkboxIconGroup 851-iconGroup 851-icongroup-feedback 852-searchable-multi-select-select-all 853-update-tag-styling 856-searchable-multiselect-checkbox-labeled 869-searchable-select-regression 876-tag-group-spacing 881-icon-select-hover-glow 902-split-button-size 922-invisible-button 939/change-onChangeDebounced-behavior 949-button-focus ANXR-824 ANXR-986 ANXR-1033-ContextMenu-DateSelect-perf DateSelect-vertical-stretch anim anxr-1427-fine-grained-ticks anxr814-npm-link anxr1554-optimization backport-less-recursion-removal barchart-tooltip-lag bugfix/bable-7-esmodule-objects bugfix/disabled-button-styling bugfix/redux-utils bugfix/splitbutton-primary-className bugfix/194-singleselect-focus-state bugfix/316-button-text-color bugfix/328-autocomplete-props button-with-icon change-default-split-expanded-state cleanup-test-output create-class-to-create-react-class create-react-class docs/component-categories dropmenu-option-onclick-passthrough dropmenu-passthroughs example-warnings experimental/futzing-around-with-d3 feature/ANXR-196-charts feature/ANXR-197-tables feature/ANXR-200-tag feature/DivTable-draft1 feature/Lists feature/ProgressBarComponent feature/ScrollTable-draft-2 feature/ScrollTable-draft-3 feature/ScrollTable-draft-4 feature/ScrollTable-draft-5 feature/ScrollTable-draft-6 feature/ScrollTable-draft-7 feature/ScrollTable-draft-9 feature/SingleSelectTests feature/autocomplete-draft2 feature/button-with-icon-component feature/chart-legends feature/genericTests feature/text-field-with-drop-menu feature/285-accordion-component feature/294-toolip-fade-2 fix-is-resizable-warning generic-empty-state-children generic-test-warning gh-pages hackathon-datepicker hybrid-synchronous-state-update icon-hover initial-state issue-781 jest-19 jsnext liliedelamotte-ANXR-1520 master misc/fix-lint-errors nextable np optimization panel-has-margin prettier-config prop-types react-16 react-peek readme-update redux-util-enhancements redux-util-warnings remove-browser-field-package-json restrict-browserstack-to-master safe-merge search-field-on-change-debounced searchfield-export singleselect-wip3 spike-dropmenu-patterns split-vertical-is-resizeable splitter sticky-headers storybook1 storybookshelf tabs-content text-field-focus textfieldvalidated-proptypes treeshaking v1 validation-classname validation-no-msg vertical-align-tabs webpack-4-build-clean
Nothing to show
Clone or download
Kyle McGuire
Kyle McGuire 2.36.5
Latest commit 50cd8b1 Dec 5, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook Add SplitPanel component, docs, tests, examples. May 2, 2018
docs removes empty state from examples Jul 19, 2018
scripts Migrate to new docspot location Sep 24, 2018
src Merge branch 'master' into bugfix/bable-7-esmodule-objects Dec 5, 2018
stories adds a Title prop and replaces an input with a TextField Jun 28, 2018
tests remove debugging timeouts Nov 6, 2017
.babelrc fix docs mode Apr 25, 2018
.editorconfig Adding basic travis support Feb 19, 2016
.eslintignore Upgraded eslint, added lint fix, and removed gulp-eslint Nov 21, 2016
.eslintrc Fixes tests and linting Apr 14, 2017
.gitignore got first draft of ProgressBar working Jun 19, 2018
.npmignore Adds snapshot directories to .npmignore Nov 28, 2016
.npmrc Add .npmrc with public registry Mar 30, 2016
.prettierrc move prettier config to config file Feb 20, 2018
.stylelintrc #777: stylelint cleanup Jun 2, 2017
.travis.yml Move docs publish rom travis ci to the local `postpublish` phase Mar 7, 2018
CONTRIBUTING.md Updated README and CONTRIBUTING with create-component script instruct… Apr 26, 2018
LICENSE Initial commit Feb 17, 2016
PULL_REQUEST_TEMPLATE.md No more IE 11 Jun 6, 2017
README.md Updated README and CONTRIBUTING with create-component script instruct… Apr 26, 2018
codecov.yml Adds codecov.yml file. Nov 29, 2016
package.json 2.36.5 Dec 6, 2018
postcss.config.js upgrade bundle build to webpack 4 & loaders Apr 6, 2018
webpack.config.bundle.js restore dist/index.css to the build artifacts, to fix backward Apr 11, 2018
yarn.lock fix docs mode Apr 25, 2018

README.md

Lucid Build Status codecov Stories in Ready

A UI component library from AppNexus.

Install

Lucid can be installed with npm

npm install --save lucid-ui

or yarn

yarn add lucid-ui

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Button from 'lucid-ui/Button';
// `import { Button } from 'lucid-ui'` also works but will result in larger bundle sizes

ReactDOM.render(
  <Button>Hello World</Button>,
  mountNode
);

Lucid uses less for its stylesheets. If you use less, you can include the styles like so:

@import "node_modules/lucid-ui/src/index.less";

If you don't use less, you can use the precompiled css file node_modules/lucid-ui/dist/index.css.

Dependencies

lucid-ui has several React peer dependencies. This means your application is responsible for declaring dependencies on compatible versions. Currently we support React 15 and 16.

Example package.json:

{
  "dependencies": {
    "lucid-ui": "^2.0.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
  }
}

To contribute to lucid, please see CONTRIBUTING.md.

Reducing bundle size

Path imports

If you're starting a new project it's best to simply import all your components by their paths. This will make sure that only the components you need will be included in your bundle:

import Button from 'lucid-ui/Button';
import DataTable from 'lucid-ui/DataTable';

Babel plugin

If you have an existing project using lucid you should consider using babel plugin import that can automatically transform your ES6 module imports into path imports. Under the hood it will transform import code like this:

import { Button } from 'lucid-ui';

into

import Button from 'lucid-ui/Button';

Here's a .babelrc plugin configuration that works with lucid:

"plugins": [
  [
    "import",
    {
      "libraryName": "lucid-ui",
      "libraryDirectory": "",
      "camel2DashComponentName": false
    }
  ]
]

Credits

  • BrowserStack for providing cross-browser testing infrastructure.
  • Travis CI for providing continuous integration infrastructure.
  • CodeCov for providing code coverage analysis infrastructure.