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 ...
This project is licensed under the terms of the MIT license.
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.
Or include the stylesheet with a link tag in your index.html.
After referencing the stylesheet, import atlas components like you would any other component.
;;const someButton =<Button>Some Text</Button>;;
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.
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.