apparena / patterns

App-Arena Brand Guidelines incl. ReactJS Patterns, Colors, Logos, Templates, Identity and more

App-Arena Patterns

App-Arena Patterns is a set of React components that implement the App-Arena CI.

Title	Description
Pattern demos	Demo of all patterns of this library.
Contributing	Creating and publishing new patterns or editing the Brand portal.
Pattern generator	How the Yeoman pattern generator works and how it can be edited.

Getting started

App-Arena Patterns are available as npm package.

yarn add apparena-patterns-react

or

npm install apparena-patterns-react

to add all components to your app.

Usage

Here is a quick example to get you started:

./App.js

import React from 'react';
import ReactDOM from 'react-dom';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

const App = () => (
    <MyAwesomeReactComponent />
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

./MyAwesomeReactComponent.js

import React from 'react';
import {Button} from 'apparena-patterns-react';

const MyAwesomeReactComponent = () => (
  <Button type="primary">Label</Button>
);

export default MyAwesomeReactComponent;

Please refer to each component's documentation page to see how they should be imported.

Contributing

If you would like to contribute patterns or add patterns to this library, head over to our contributing section.

License

This project is licensed under the terms of the MIT license

patterns's Issues

npm start renders nothing

dist/ has no index to serve, just js.

Platform refactoring and extension for future use

Description

The pattern platform should be extended to be the central place for:

1. Software patterns (React)
2. Software documentation
3. Corporate Identity
4. Corporate Communication Guidelines

Refactoring steps

To reach that goal we need to refactor the repository and fullfil the following tasks:

1. Content/Pages/Navigation need to be extended easily by "Non-Devs" (slight(!) knowledge of React can be expected)
2. Clear code structure (kick out patternlab, build, public, source, docs folders, ...)
3. Working build scripts in package.json
4. Automated tests on TravisCI (Continous integration)
   • Automatically build, test and deploy Pull requests on a staging environment
   • Automatically build, test and deploy changes to the master branch to the production environment
5. Documentation in Readme.md helps a new contributer with his local setup and contribution with no hassle. (Use this template: https://gist.github.com/PurpleBooth/109311bb0361f32d87a2
   • Add a markdown file for each of the 4 areas on top. Each area needs to have a documented introduction how to maintain it.
6. Add a docker-compose file that will provide a running environment by just typing docker-compose up
7. Deployment (Automated deployment including AWS cloudfront cache invalidation)