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.

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

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

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

React Atlas can be installed as an npm package:

$ npm install --save react-atlas

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 { Button } from 'react-atlas';

const someButton = () => (
  <Button>Some Text</Button>
);

export default someButton;

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

There are several ways to style/theme react-atlas components.

• Style individual component instance.
• Creating themes.
• Themeing whole library.
• Themeing components.

To start documentation site locally you'd need to install dependencies from the main package, setup the monorepo and then just run the docs script. npm run docsPrd runs the production version of the docsite and will not hotload

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

To setup atlas for development, run the following commands:

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

To publish your own build of react-atlas to your own fork, run the following commands:

$ npm run docs:build
$ npm run gh-pages:publish

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.
$ npm run setup           // Builds react-atlas.
$ npm run codegen         // Runs just the code generator.
$ npm run clean           // Clean all node_modules folders.

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

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.

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.