{"id":16648506,"url":"https://github.com/digitalriver/react-atlas","last_synced_at":"2025-03-16T22:32:01.897Z","repository":{"id":65372172,"uuid":"50132052","full_name":"DigitalRiver/react-atlas","owner":"DigitalRiver","description":"Composable React components with CSS Modules.","archived":false,"fork":false,"pushed_at":"2018-12-27T22:20:28.000Z","size":14705,"stargazers_count":38,"open_issues_count":34,"forks_count":25,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-10-13T09:04:28.024Z","etag":null,"topics":["atlas","component-library","css-modules","react","react-atlas","react-component-boilerplate","react-components"],"latest_commit_sha":null,"homepage":"http://digitalriver.github.io/react-atlas/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DigitalRiver.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-21T19:41:57.000Z","updated_at":"2022-01-12T16:25:05.000Z","dependencies_parsed_at":"2023-01-20T01:32:35.048Z","dependency_job_id":null,"html_url":"https://github.com/DigitalRiver/react-atlas","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DigitalRiver%2Freact-atlas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DigitalRiver%2Freact-atlas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DigitalRiver%2Freact-atlas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DigitalRiver%2Freact-atlas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DigitalRiver","download_url":"https://codeload.github.com/DigitalRiver/react-atlas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221668899,"owners_count":16860751,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atlas","component-library","css-modules","react","react-atlas","react-component-boilerplate","react-components"],"created_at":"2024-10-12T09:04:34.613Z","updated_at":"2024-10-27T11:29:47.183Z","avatar_url":"https://github.com/DigitalRiver.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![React-Atlas](https://github.com/DigitalRiver/react-atlas/blob/master/docs/images/logo_full_300.png)\n\nReact 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'.\n\nCheck out our [docs site](http://digitalriver.github.io/react-atlas/) for full working examples and a code playground.\n\n## Why?\nReact Atlas originally started off as a fork of [React Toolbox](https://github.com/react-toolbox/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 ...\n- Coded using ECMAScript 2015 patterns and features\n- Styled using [CSS Modules](https://github.com/css-modules/css-modules) and [CSSNext](http://cssnext.io/)\n- Decoupled styles and logic for optimized themeing\n- Themeing is completed at compile time, not at runtime, to reduce library size and memory usage\n- Tested with [Jest](https://facebook.github.io/jest/), [Enzyme](https://github.com/airbnb/enzyme) and [Sinon](http://sinonjs.org/)\n- Bundled with [Webpack 2.0](https://webpack.js.org/)\n- Linted with [Eslint](http://eslint.org/)\n- Formatted with [Prettier](https://github.com/prettier/prettier)\n- Component styleguide to ensure code consistency throughout the library\n- Encapsulated component state within each component, instead of requiring the user to maintain state in their own application\n\n## License\nThis project is licensed under the terms of the [MIT license](https://github.com/DigitalRiver/react-atlas/blob/master/LICENSE).\n\n## Requirements\nThis library only officially supports [Node 6.x.x+](https://nodejs.org/en/) and [React 16.3+](https://facebook.github.io/react/), on Windows, MacOS, Linux and FreeBSD.\n\n## Installation\nReact Atlas can be installed as an [npm package](https://www.npmjs.com/package/react-atlas):\n```bash\n$ npm install --save react-atlas\n```\n### Usage\n\nNow make sure to either import the react atlas stylesheet into your application.\n```javascript\nimport './node_modules/react-atlas/lib/atlasThemes.min.css';\n```\nOr include the stylesheet with a link tag in your index.html.\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"node_modules/react-atlas/lib/atlasThemes.min.css\"\u003e\n```  \nAfter referencing the stylesheet, import atlas components like you would any other component.\n\n```javascript\nimport React from 'react';\nimport ReactDom from 'react-dom';\nimport Button from 'react-atlas/lib/Button/Button.js'; // Only imports the button component.\n// import { Button } from 'react-atlas'; # This will import all of atlas.\n\n\nlet element = \u003cButton\u003eSome Text\u003c/Button\u003e;\n\nReactDOM.render(element, document.getElementById('root'));\n```\n\nThe previous code creates a React button component based on a React Atlas button default styling and logic.\n\n## Setup docsite/development site\nTo setup atlas for development, run the following commands:\n\n```bash\n$ git clone https://github.com/DigitalRiver/react-atlas.git\n$ npm install\n$ npm run docs:dev\n```\n\nThere are other npm commands which may be of use in your development.\n```bash\n\n$ npm run test            // Runs test suite without coverage.\n$ npm run coverage        // Runs test suite with code coverage.\n$ npm run format          // Format all code with prettier.\n$ npm run lint            // Lint code with eslint.\n\n```\nFor more in depth information on development check out our contributors [readme](https://github.com/DigitalRiver/react-atlas/blob/master/docs/CONTRIBUTING.md).\n\n## Authors and Contributors\nBefore cloning or submitting a Pull Request, ***please read our [Contributing Guidelines](https://github.com/DigitalRiver/react-atlas/blob/master/docs/CONTRIBUTING.md)***\n\nPlease note that this project is released with a [Contributor Code of Conduct](https://github.com/DigitalRiver/react-atlas/blob/master/docs/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.\n\nThe project is being initially developed and maintained by the Digital River Experience Engineering team.\n\n\n## Atlas?\nWhen thinking about Web Design and Web Development, we came across the art of map making - [Cartography](https://en.wikipedia.org/wiki/Cartography).\n\n\u003eCartography (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.\n\nAfter 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?\n\nPlus you know, there's this cool Titan in Greek mythology that literally holds up the world named Atlas.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitalriver%2Freact-atlas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdigitalriver%2Freact-atlas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitalriver%2Freact-atlas/lists"}