React Atlas is a React component library, with a focus on supplying Admin Interface tools. The end-goal of this repo to is to eventually be the library that can power most of Digital River's complex admin interfaces and internal tooling projects. With this in mind, we need a fast, generic, composable library that can be dropped into a project and 'just work'.

Check out our docs site for full working examples and a code playground.

Why?

React Atlas originally started off as a fork of React Toolbox, which allowed us to have a quick list of components. However, the more we dug into the code and tried to use the library, the more we ended up changing. Today, almost everything in React-Atlas is custom. React-Atlas now offers ...

• Coded using ECMAScript 2015 patterns and features
• Styled using CSS Modules and CSSNext
• Decoupled styles and logic for optimized themeing
• Themeing is completed at compile time, not at runtime, to reduce library size and memory usage
• Tested with Jest, Enzyme and Sinon
• Bundled with Webpack 2.0
• Linted with Eslint
• Formatted with Prettier
• Component styleguide to ensure code consistency throughout the library
• Encapsulated component state within each component, instead of requiring the user to maintain state in their own application

License

This project is licensed under the terms of the MIT license.

Requirements

This library only officially supports Node 6.x.x+ and React 16.3+, on Windows, MacOS, Linux and FreeBSD.

Installation

React Atlas can be installed as an npm package:

$ npm install --save react-atlas

Usage

Now make sure to either import the react atlas stylesheet into your application.

import './node_modules/react-atlas/lib/atlasThemes.min.css';

Or include the stylesheet with a link tag in your index.html.

<link rel="stylesheet" type="text/css" href="node_modules/react-atlas/lib/atlasThemes.min.css">

After referencing the stylesheet, import atlas components like you would any other component.

import React from 'react';
import ReactDom from 'react-dom';
import Button from 'react-atlas/lib/Button/Button.js'; // Only imports the button component.
// import { Button } from 'react-atlas'; # This will import all of atlas.


let element = <Button>Some Text</Button>;

ReactDOM.render(element, document.getElementById('root'));

The previous code creates a React button component based on a React Atlas button default styling and logic.

Setup docsite/development site

To setup atlas for development, run the following commands:

$ git clone https://github.com/DigitalRiver/react-atlas.git
$ npm install
$ npm run docs:dev

There are other npm commands which may be of use in your development.

$ npm run test            // Runs test suite without coverage.
$ npm run coverage        // Runs test suite with code coverage.
$ npm run format          // Format all code with prettier.
$ npm run lint            // Lint code with eslint.

For more in depth information on development check out our contributors readme.

Authors and Contributors

Before cloning or submitting a Pull Request, please read our Contributing Guidelines

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

The project is being initially developed and maintained by the Digital River Experience Engineering team.

Atlas?

When thinking about Web Design and Web Development, we came across the art of map making - Cartography.

Cartography (from Greek χάρτης khartēs, "map"; and γράφειν graphein, "write") is the study and practice of making maps. Combining science, aesthetics, and technique, cartography builds on the premise that reality can be modeled in ways that communicate spatial information effectively.

After reading about it more, we realized that as Web Designer and Developers, we are essentially modern-day map makers. We combine technology and design to build flat screens that communicate information in a fixed space. With this reasoning in our heads, we decided on Atlas. Atlas is defined as a collection (or a library if you will) of maps. What better name for a library of components that will be used to compose and display complex interfaces/maps?

Plus you know, there's this cool Titan in Greek mythology that literally holds up the world named Atlas.