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: 29 days ago
JSON representation
🛡 Common components and features for GW2Armory and GW2AEmbeds.
Host: GitHub
URL: https://github.com/itsdouges/armory-component-ui
Owner: itsdouges
License: bsd-3-clause-clear
Created: 2017-10-03T23:06:20.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2022-12-07T07:49:24.000Z (almost 2 years ago)
Last Synced: 2024-10-02T08:43:30.296Z (about 1 month ago)
Topics: component, guildwars2, gw2, react
Language: JavaScript
Homepage: https://madou.github.io/armory-component-ui
Size: 8.72 MB
Stars: 12
Watchers: 4
Forks: 4
Open Issues: 32
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
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