Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/itsdouges/armory-component-ui

🛡 Common components and features for GW2Armory and GW2AEmbeds.
https://github.com/itsdouges/armory-component-ui

component guildwars2 gw2 react

Last synced: about 1 month ago
JSON representation

🛡 Common components and features for GW2Armory and GW2AEmbeds.

Awesome Lists containing this project

README

        

# [armory-component-ui](https://github.com/madou/armory-component-ui)

[![NPM version](http://img.shields.io/npm/v/armory-component-ui.svg?style=flat-square)](https://www.npmjs.com/package/armory-component-ui)
[![NPM downloads](http://img.shields.io/npm/dm/armory-component-ui.svg?style=flat-square)](https://www.npmjs.com/package/armory-component-ui)

Common components and features for GW2Armory.com and GW2AEmbeds.
With data fetching,
persistence,
error handling,
and a plethora of components for use,
all out-of-the-box.

## Installation

```bash
npm install armory-component-ui --save
```

### State Management

Redux and redux-thunk are used for state management.
Here is an example integration of `armory-component-ui`
with its redux state management. Note the use of `reducers`.

```javascript
import { Provider } from 'react-redux';
import { combineReducers, applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import { reducers, Tooltip } from 'armory-component-ui';

const store = createStore(
// Create the root reducer.
combineReducers(reducers),

// Set the thunk middleware.
applyMiddleware(thunk),
);

const App = () => (


My Other Components Here




);
```

### Styles

Make sure to import the component styles to your application.

If you're using webpack,
simply do:

```javascript
import '!!style-loader!css-loader!armory-component-ui/styles.css';
```

This resets all loaders on this import, then applies the style and css loader.

### Fonts

The `menomonia` and `opensans` fonts are used across these components.
Look inside [`/stories/styles.css`](https://github.com/madou/armory-embeds/blob/master/src/styles.less) for an example font definition.
All the fonts are included in the package for you to use.

### Images

Copy `node_modules/armory-coponent-ui/images` to `{WHEREYOUWANT}/images`.
If you are storing the images in a subdirectory (e.g: `/assets/images`) or on another server altogether,
make sure to set `document.__publicPath` to the that path.

So for example if we're in a subdirectory as above, set it to `document.__publicPath = '/assets';`.

If rendering on the server you'll have to fake the `document` global variable.

### Components

#### ``

```javascript
import { CharacterPreview } from 'armory-component-ui';

() =>
```

| prop | type | description | required |
|-|-|-|-|
| name | `string` | n/a | yes |
| className | `string` | n/a | no |

#### ``

```javascript
import { Gw2Skin } from 'armory-component-ui';

() =>
```

| prop | type | description | required |
|-|-|-|-|
| id | `number` | n/a | yes |
| count | `number` | Sets the count which affects the name for both the `` and `inlineText`. | no |
| size | `number` | Custom size of the icon, e.g: `40` will result in a 40x40 icon. | no |
| tooltipTextOverride | `string` | Overrides the tooltip with custom text | no |
| inlineText | `'gw2Spidy'`, `'wiki'`, `string` | Will show text next to the icon that links to somewhere. Passing in any string will result in linking to that string. | no |
| className | `string` | n/a | no |

#### ``

```javascript
import { Gw2Title } from 'armory-component-ui';

() =>
```

| prop | type | description | required |
|-|-|-|-|
| id | `number` | n/a | yes |

#### ``

```javascript
import { Gw2GuildUpgrade } from 'armory-component-ui';

() =>
```

| prop | type | description | required |
|-|-|-|-|
| id | `number` | n/a | yes |

#### ``

```javascript
import { Gw2Item } from 'armory-component-ui';

() =>

```

| prop | type | description | required |
|-|-|-|-|
| id | `number` | n/a | yes |
| statsId | `number` | Id of the stats the item should be assigned. | no |
| count | `number` | Sets the count which affects the name for both the `` and `inlineText`. | no |
| tooltipTextOverride | `string` | Overrides the tooltip with custom text | no |
| size | `number` | Custom size of the icon, e.g: `40` will result in a 40x40 icon. | no |
| inlineText | `'gw2Spidy'`, `'wiki'`, `string` | Will show text next to the icon that links to somewhere. Passing in any string will result in linking to that string. | no |
| className | `string` | n/a | no |
| equipped | `boolean` | Shows 'Equipped' text at the top of the ``. | no |
| upgrades | `Array` | Array of upgrade ids (`v2/items`). | no |
| infusions | `Array` | Array of infusion ids (`v2/items`). | no |
| stats | `{ attributes: Array<{ [attribute]: string }> }` | Static stats usually passed from `v2/characters`. See: https://wiki.guildwars2.com/wiki/API:2/characters. Generally better to just use `statsId`. | no |
| upgradeCounts | `{ [upgradeId]: number }` | Consolidation of total upgrade counts. | no |
| onClick | Function | n/a | no |

#### ``

```javascript
import { Gw2Map } from 'armory-component-ui';

() =>
```

| prop | type | description | required |
|-|-|-|-|
| id | `number` | n/a | yes |
| className | `string` | n/a | no |

#### ``

```javascript
import { Gw2Infusion } from 'armory-component-ui';

() =>
```

| prop | type | description | required |
|-|-|-|-|
| id | `number` | n/a | yes |

#### ``

```javascript
import { Gw2Upgrade } from 'armory-component-ui';

() =>
```

| prop | type | description | required |
|-|-|-|-|
| id | `number` | n/a | yes |

#### ``

```javascript
import { Gw2Skill } from 'armory-component-ui';

() =>
```

| prop | type | description | required |
|-|-|-|-|
| id | `number` | n/a | yes |
| className | `string` | n/a | no |
| tooltipTextOverride | `string` | Overrides the tooltip with custom text | no |
| size | `number` | Custom size of the icon, e.g: `40` will result in a 40x40 icon. | no |
| inlineText | `'gw2Spidy'`, `'wiki'`, `string` | Will show text next to the icon that links to somewhere. Passing in any string

#### ``

```javascript
import { Gw2Specialization } from 'armory-component-ui';

() =>
```

| prop | type | description | required |
|-|-|-|-|
| id | `number` | n/a | yes |
| activeTraits | `Array` | Major traits that are active. | no |
| onTraitClick | `(id: number) => void` | Callback function called when a trait icon is clicked. | no |
| minorTraitClass | `string` | Class name applied to the minor trait icons. | no |
| majorTraitClass | `string` | Class name applied to the major trait icons. | no |

#### ``

```javascript
import { Gw2Trait } from 'armory-component-ui';

() =>
```

| prop | type | description | required |
|-|-|-|-|
| id | `number` | n/a | yes |
| active | `boolean` | Sets the trait to active (100% opacity). | no |
| className | `string` | n/a | no |
| tooltipTextOverride | `string` | Overrides the tooltip with custom text | no |
| size | `number` | Custom size of the icon, e.g: `40` will result in a 40x40 icon. | no |
| inlineText | `'gw2Spidy'`, `'wiki'`, `string` | Will show text next to the icon that links to somewhere. Passing in any string

#### ``

```javascript
import { ArmoryBadge } from 'armory-component-ui';

() =>
```

| prop | type | description | required |
|-|-|-|-|
| className | `string` | n/a | no |
| hotlink | `boolean` | Enables the badge to have a link back to the armory. | no |

#### ``

```javascript
import { Gold } from 'armory-component-ui';

() =>
```

| prop | type | description | required |
|-|-|-|-|
| className | `string` | n/a | no |

#### ``

```javascript
import { LanguageProvider } from 'armory-component-ui';

other components here

```

| prop | type | description | required |
|-|-|-|-|
| lang | 'en', 'de', 'fr', 'zh', 'ru', 'es' | Sets the language for all child (armory) components | yes |
| children | `Node` | n/a | yes |

#### ``

```javascript
import { PieChart } from 'armory-component-ui';

() =>

```

| prop | type | description | required |
|-|-|-|-|
| dataValues | `DataValues` | The data for the chart, see the example above. | yes |
| size | `number` | The custom size of the chart. E.g: `128` will result in a chart 128x128. | no |
| className | `string` | n/a | no |

#### ``

Make sure to put this as high as you can in the component tree.
This will show the tooltip when appropriate for other components.

```javascript
import { Tooltip } from 'armory-component-ui';

() =>
```

#### ``

Shows the tooltip when mouse over/touch start.
Hides the tooltip when mouse leave/touch end.

```javascript
import { TooltipTrigger } from 'armory-component-ui';

() =>

Hover Over Me

```

| prop | type | description | required |
|-|-|-|-|
| children | `Node` | n/a | yes |
| type | `'items'`, `'amulets'`, `'trait'`, `'skill'`, `'achievement'`, `'guildUpgrade'` | Type of tooltip to show. Only affects the tooltip if the data sent is an `Object`. | no |
| data | `string`, `Object` | Data to send to the ``. | no |
| onMouseEnter | `Function` | n/a | no |
| onMouseLeave | `Function` | n/a | no |

### Helpers

#### `reducers: { [string]: Function }`

Object of reducer functions, pass this into your combineReducers function.

```javascript
import { reducers } from 'armory-component-ui';
import { Provider } from 'react-redux';
import { combineReducers, createStore } from 'redux';

const store = createStore(
combineReducers(reducers),
);

const App = () => (



);
```

#### `actions: Object`

Standard redux actions that fetch gw2 data.

```javascript
import { connect } from 'react-redux';
import { actions } from 'armory-component-ui';

const mapStateToProps = (state) => ({
skills: state.skills,
});

const mapDispatchToProps = {
fetch: actions.fetchSkills,
};

connect(mapStateToProps, mapDispatchToProps)(
class SomeSkill extends React.Component {
componentDidMount () {
this.props.fetch([1139, 5490, 5495]);
}

render () {
const skill = this.props.skills[1139];

return (


{skill.name}

);
}
}
);
```

| actionName | arguments |
|-|-|
| fetchSkills | `Array` |
| fetchAchievementCategories | `Array` | `'all'` |
| fetchAchievementGroups | `Array` | `'all'` |
| fetchAchievements | `Array` |
| fetchAmulets | `Array` |
| fetchCurrencies | `Array` |
| fetchGuildUpgrades | `Array` |
| fetchItemStats | `Array` |
| fetchMaps | `Array` |
| fetchMaterials | `Array` |
| fetchPets | `Array` |
| fetchProfessions | `Array` |
| fetchPvpSeasons | `Array` |
| fetchAmulets | `Array` |
| fetchSkills | `Array` |
| fetchSkins | `Array` |
| fetchSpecializations | `Array` |
| fetchTitles | `Array` |
| fetchTraits | `Array` |
| fetchWorlds | `Array` |
| fetchCalculatedItemStats | `Array<{ id: number, itemId: number, type: string, rarity: string, level: number }>` |

#### `markup(text: string, useTagName: boolean)`

By default the class will be a class inside the `armory-component-ui/styles.css`:

```javascript
import { markup } from 'armory-component-ui';

const text = 'Gain a boon upon casting a glyph based on your attunement. Glyphs gain reduced recharge.';

markup(text);
// glyph based on your attunement. Glyphs gain reduced recharge.' }}>
```

If you pass `useTagName` as true, the class on the element will be the `@colourname` text, for example:

```javascript
import { markup } from 'armory-component-ui';

const text = 'Gain a boon upon casting a glyph based on your attunement. Glyphs gain reduced recharge.';

markup(text, true);
// glyph based on your attunement. Glyphs gain reduced recharge.' }}>
```

#### `persistToLocalStorage(boolean)`

By default data will be persisted to local storage.
You can turn this off by doing the following:

```javascript
import { persistToLocalStorage } from 'armory-component-ui';

persistToLocalStorage(false);
// Local storage data persistence is now turned off.
```

#### `forceCacheClearOnNextRun(string: key)`

Will force api cache to be cleared next time the code executes.
Use a unique key every time you want to clear the cache.

```javascript
import { forceCacheClearOnNextRun } from 'armory-component-ui;';

forceCacheClearOnNextRun('1');
```

## Local Development

```bash
git clone [email protected]:madou/armory-component-ui.git
cd armory-component-ui
yarn # See https://yarnpkg.com/lang/en/docs/install/
npm start # Runs react-storybook
npm run tdd # Runs tests in watch mode
```

### Building Docs

```bash
npm run build-storybook
```

### Releasing

```bash
# Make sure the changelog has your changes under Unreleased
# Be on master branch
npm version major|minor|patch
```

© 2015-present gw2armory.com