armory-component-ui v0.8.4

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

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.

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 = () => (
  <Provider store={store}>
    <span>
      <div>My Other Components Here</div>
      <Tooltip />
    </span>
  </Provider>
);

Styles

Make sure to import the component styles to your application.

If you're using webpack, simply do:

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 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

<CharacterPreview />

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

() => <CharacterPreview name="Quatermile" />

<Gw2Skin />

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

() => <Gw2Skin id={23} />

<Gw2Title />

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

() => <Gw2Title id={44} />

<Gw2GuildUpgrade />

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

() => <Gw2GuildUpgrade id={44} />

<Gw2Item />

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

() =>
  <Gw2Item
    equipped
    id={23}
    count={4}
    size={64}
    inlineText="wiki"
    upgrades={[24815]}
    infusions={[49426]}
  />

<Gw2Map />

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

() => <Gw2Map id={549} />

<Gw2Infusion />

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

() => <Gw2Infusion id={49426} />

<Gw2Upgrade />

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

() => <Gw2Upgrade id={24615} />

<Gw2Skill />

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

() => <Gw2Skill id={5493} />

<Gw2Specialization />

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

() => <Gw2Specialization id={56} activeTraits={[2177, 2061, 2138]} />

<Gw2Trait />

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

() => <Gw2Trait id={229} />

<ArmoryBadge />

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

() => <ArmoryBadge hotlink />

<Gold />

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

() => <Gold coins={12345} />

<LanguageProvider />

import { LanguageProvider } from 'armory-component-ui';
<LanguageProvider lang="de">
  <div>other components here</div>
</LanguageProvider>

<PieChart />

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

() =>
  <PieChart
    dataValues={[{
      color: 'lightgreen',
      name: 'Sylvari',
      value: 5455,
    }, {
      color: 'yellow',
      name: 'Human',
      value: 1000,
    }]}
  />

<Tooltip />

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

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

() => <Tooltip />

<TooltipTrigger />

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

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

() =>
  <TooltipTrigger
    data="Cool Tooltip"
    type="items"
  >
    <span>Hover Over Me</span>
  </TooltipTrigger>

Helpers

reducers: { [string]: Function }

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

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

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

const App = () => (
  <Provider store={store}>
    <div />
  </Provider>
);

actions: Object

Standard redux actions that fetch gw2 data.

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 (
        <div>
          {skill.name}
        </div>
      );
    }
  }
);

markup(text: string, useTagName: boolean)

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

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

const text = 'Gain a boon upon casting a <c=@abilitytype>glyph</c> based on your attunement. <c=@abilitytype>Glyphs</c> gain reduced recharge.';

markup(text);
// <span dangerouslySetInnerHTML={{ __html: 'Gain a boon upon casting a <span class="abilitytype">glyph</span> based on your attunement. <span class="DxsxS">Glyphs</span> gain reduced recharge.' }}>

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

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

const text = 'Gain a boon upon casting a <c=@abilitytype>glyph</c> based on your attunement. <c=@abilitytype>Glyphs</c> gain reduced recharge.';

markup(text, true);
// <span dangerouslySetInnerHTML={{ __html: 'Gain a boon upon casting a <span class="abilitytype">glyph</span> based on your attunement. <span class="abilitytype">Glyphs</span> gain reduced recharge.' }}>

persistToLocalStorage(boolean)

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

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.

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

forceCacheClearOnNextRun('1');

Local Development

git clone git@github.com: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

npm run build-storybook

Releasing

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

© 2015-present gw2armory.com