![\"Playmaker](\"https://s3.amazonaws.com/upperhand-dev/static/images/playmaker_v2.svg\")
\n\n \n
\n\n## Overview\n\nPlaymaker is a Javascript library for displaying Reactjs elements in a react project. This library exists to reduce the duplication of code and components during the development of the Upper Hand software.\n\n## Running\n\nPlaymaker is primarily a library to be used in other applications. However, to run an environment for testing Playmaker components and their attributes locally, run the following:\n\n```\nnpm install\nnpm start\n```\n\n## Installation\n\nPlaymaker is an [npm](https://www.npmjs.com/package/@upperhand/playmaker) package.\n\n```bash\nnpm i @upperhand/playmaker\n```\n\n## Usage\n\n```javascript\nimport { Button } from '@playmaker/Button';\n\n;\n```\n\n## Contributing\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\n### Creating Elements\n\nElements are basic building blocks, mostly wrappers and parts you would use to build a more complete object. They are created in the `src/elements` directory and are grouped by directory. In every element directory there should be an `index.js` file that exports the default component.\n\n```javascript\nexport { default } from './Button';\n```\n\nYou should be able to import elements by using destructuring import on a global or a folder level.\n\n```javascript\nimport { Button } from '@upperhand/playmaker;\nimport { Button } from '@upperhand/playmaker/elements;\n```\n\n### Creating Components\n\nComponents are objects that we built with few configuration options but that actually have some \"logic\" tied to them. They are created in the `src/components` directory and are grouped by directory. In every component directory there should be an `index.js` file that exports the default component.\n\n```javascript\nexport { default } from './Alert';\n```\n\nYou should be able to import components by using destructuring import on a global or a folder level.\n\n```javascript\nimport { Alert } from '@upperhand/playmaker;\nimport { Alert } from '@upperhand/playmaker/components;\n```\n\n### Creating Compounds\n\nCompounds are generic but complex logic objects. They have more configuration and complexity and are not something that our version of an object used on most sights. They are created in the `src/componds` directory and are grouped by directory. In every compound directory there should be an `index.js` file that exports the default component.\n\n```javascript\nexport { default } from './FormModal';\n```\n\nYou should be able to import compounds by using destructuring import on a global or a folder level.\n\n```javascript\nimport { FormModal } from '@upperhand/playmaker;\nimport { FormModal } from '@upperhand/playmaker/compounds;\n```\n\n### Storybook\n\nEach Element should have a storybook file in the stories directory that will display how to use it and each of the props that can alter have the element's behavior:\n\n```javascript\nstoriesOf('Button', module)\n .addDecorator(\n host({\n title: 'Button',\n align: 'center middle',\n })\n )\n .addDecorator(story =>