{"id":15313881,"url":"https://github.com/itsdouges/armory-component-ui","last_synced_at":"2025-04-15T01:50:24.211Z","repository":{"id":25750079,"uuid":"105712643","full_name":"itsdouges/armory-component-ui","owner":"itsdouges","description":"🛡 Common components and features for GW2Armory and GW2AEmbeds.","archived":false,"fork":false,"pushed_at":"2022-12-07T07:49:24.000Z","size":9142,"stargazers_count":12,"open_issues_count":32,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T13:44:48.115Z","etag":null,"topics":["component","guildwars2","gw2","react"],"latest_commit_sha":null,"homepage":"https://madou.github.io/armory-component-ui","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause-clear","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/itsdouges.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-03T23:06:20.000Z","updated_at":"2022-08-26T05:42:21.000Z","dependencies_parsed_at":"2023-01-14T07:00:58.412Z","dependency_job_id":null,"html_url":"https://github.com/itsdouges/armory-component-ui","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Farmory-component-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Farmory-component-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Farmory-component-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Farmory-component-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsdouges","download_url":"https://codeload.github.com/itsdouges/armory-component-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248991539,"owners_count":21194894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","guildwars2","gw2","react"],"created_at":"2024-10-01T08:43:31.752Z","updated_at":"2025-04-15T01:50:24.195Z","avatar_url":"https://github.com/itsdouges.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [armory-component-ui](https://github.com/madou/armory-component-ui)\n\n[![NPM version](http://img.shields.io/npm/v/armory-component-ui.svg?style=flat-square)](https://www.npmjs.com/package/armory-component-ui)\n[![NPM downloads](http://img.shields.io/npm/dm/armory-component-ui.svg?style=flat-square)](https://www.npmjs.com/package/armory-component-ui)\n\nCommon components and features for GW2Armory.com and GW2AEmbeds. \nWith data fetching, \npersistence, \nerror handling, \nand a plethora of components for use, \nall out-of-the-box.\n\n## Installation\n\n```bash\nnpm install armory-component-ui --save\n```\n\n### State Management\n\nRedux and redux-thunk are used for state management.\nHere is an example integration of `armory-component-ui`\nwith its redux state management. Note the use of `reducers`.\n\n```javascript\nimport { Provider } from 'react-redux';\nimport { combineReducers, applyMiddleware, createStore } from 'redux';\nimport thunk from 'redux-thunk';\nimport { reducers, Tooltip } from 'armory-component-ui';\n\nconst store = createStore(\n  // Create the root reducer.\n  combineReducers(reducers),\n\n  // Set the thunk middleware.\n  applyMiddleware(thunk),\n);\n\nconst App = () =\u003e (\n  \u003cProvider store={store}\u003e\n    \u003cspan\u003e\n      \u003cdiv\u003eMy Other Components Here\u003c/div\u003e\n      \u003cTooltip /\u003e\n    \u003c/span\u003e\n  \u003c/Provider\u003e\n);\n```\n\n### Styles\n\nMake sure to import the component styles to your application.\n\nIf you're using webpack, \nsimply do:\n\n```javascript\nimport '!!style-loader!css-loader!armory-component-ui/styles.css';\n```\n\nThis resets all loaders on this import, then applies the style and css loader.\n\n### Fonts\n\nThe `menomonia` and `opensans` fonts are used across these components.\nLook inside [`/stories/styles.css`](https://github.com/madou/armory-embeds/blob/master/src/styles.less) for an example font definition.\nAll the fonts are included in the package for you to use.\n\n### Images\n\nCopy `node_modules/armory-coponent-ui/images` to `{WHEREYOUWANT}/images`.\nIf you are storing the images in a subdirectory (e.g: `/assets/images`) or on another server altogether,\nmake sure to set `document.__publicPath` to the that path.\n\nSo for example if we're in a subdirectory as above, set it to `document.__publicPath = '/assets';`.\n\nIf rendering on the server you'll have to fake the `document` global variable.\n\n### Components\n\n#### `\u003cCharacterPreview /\u003e`\n\n```javascript\nimport { CharacterPreview } from 'armory-component-ui';\n\n() =\u003e \u003cCharacterPreview name=\"Quatermile\" /\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| name | `string` | n/a | yes |\n| className | `string` | n/a | no |\n\n#### `\u003cGw2Skin /\u003e`\n\n```javascript\nimport { Gw2Skin } from 'armory-component-ui';\n\n() =\u003e \u003cGw2Skin id={23} /\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| id | `number` | n/a | yes |\n| count | `number` | Sets the count which affects the name for both the `\u003cTooltip /\u003e` and `inlineText`. | no |\n| size | `number` | Custom size of the icon, e.g: `40` will result in a 40x40 icon. | no |\n| tooltipTextOverride | `string` | Overrides the tooltip with custom text | no |\n| 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 |\n| className | `string` | n/a | no |\n\n#### `\u003cGw2Title /\u003e`\n\n```javascript\nimport { Gw2Title } from 'armory-component-ui';\n\n() =\u003e \u003cGw2Title id={44} /\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| id | `number` | n/a | yes |\n\n#### `\u003cGw2GuildUpgrade /\u003e`\n\n```javascript\nimport { Gw2GuildUpgrade } from 'armory-component-ui';\n\n() =\u003e \u003cGw2GuildUpgrade id={44} /\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| id | `number` | n/a | yes |\n\n#### `\u003cGw2Item /\u003e`\n\n```javascript\nimport { Gw2Item } from 'armory-component-ui';\n\n() =\u003e\n  \u003cGw2Item\n    equipped\n    id={23}\n    count={4}\n    size={64}\n    inlineText=\"wiki\"\n    upgrades={[24815]}\n    infusions={[49426]}\n  /\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| id | `number` | n/a | yes |\n| statsId | `number` | Id of the stats the item should be assigned. | no |\n| count | `number` | Sets the count which affects the name for both the `\u003cTooltip /\u003e` and `inlineText`. | no |\n| tooltipTextOverride | `string` | Overrides the tooltip with custom text | no |\n| size | `number` | Custom size of the icon, e.g: `40` will result in a 40x40 icon. | no |\n| 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 |\n| className | `string` | n/a | no |\n| equipped | `boolean` | Shows 'Equipped' text at the top of the `\u003cTooltip /\u003e`. | no |\n| upgrades | `Array\u003cnumber\u003e` | Array of upgrade ids (`v2/items`). | no |\n| infusions | `Array\u003cnumber\u003e` | Array of infusion ids (`v2/items`). | no |\n| stats | `{ attributes: Array\u003c{ [attribute]: string }\u003e }` | Static stats usually passed from `v2/characters`. See: https://wiki.guildwars2.com/wiki/API:2/characters. Generally better to just use `statsId`. | no |\n| upgradeCounts | `{ [upgradeId]: number }` | Consolidation of total upgrade counts. | no |\n| onClick | Function | n/a | no |\n\n#### `\u003cGw2Map /\u003e`\n\n```javascript\nimport { Gw2Map } from 'armory-component-ui';\n\n() =\u003e \u003cGw2Map id={549} /\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| id | `number` | n/a | yes |\n| className | `string` | n/a | no |\n\n#### `\u003cGw2Infusion /\u003e`\n\n```javascript\nimport { Gw2Infusion } from 'armory-component-ui';\n\n() =\u003e \u003cGw2Infusion id={49426} /\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| id | `number` | n/a | yes |\n\n#### `\u003cGw2Upgrade /\u003e`\n\n```javascript\nimport { Gw2Upgrade } from 'armory-component-ui';\n\n() =\u003e \u003cGw2Upgrade id={24615} /\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| id | `number` | n/a | yes |\n\n#### `\u003cGw2Skill /\u003e`\n\n```javascript\nimport { Gw2Skill } from 'armory-component-ui';\n\n() =\u003e \u003cGw2Skill id={5493} /\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| id | `number` | n/a | yes |\n| className | `string` | n/a | no |\n| tooltipTextOverride | `string` | Overrides the tooltip with custom text | no |\n| size | `number` | Custom size of the icon, e.g: `40` will result in a 40x40 icon. | no |\n| inlineText | `'gw2Spidy'`, `'wiki'`, `string` | Will show text next to the icon that links to somewhere. Passing in any string\n\n#### `\u003cGw2Specialization /\u003e`\n\n```javascript\nimport { Gw2Specialization } from 'armory-component-ui';\n\n() =\u003e \u003cGw2Specialization id={56} activeTraits={[2177, 2061, 2138]} /\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| id | `number` | n/a | yes |\n| activeTraits | `Array\u003cnumber\u003e` | Major traits that are active. | no |\n| onTraitClick | `(id: number) =\u003e void` | Callback function called when a trait icon is clicked. | no |\n| minorTraitClass | `string` | Class name applied to the minor trait icons. | no |\n| majorTraitClass | `string` | Class name applied to the major trait icons. | no |\n\n#### `\u003cGw2Trait /\u003e`\n\n```javascript\nimport { Gw2Trait } from 'armory-component-ui';\n\n() =\u003e \u003cGw2Trait id={229} /\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| id | `number` | n/a | yes |\n| active | `boolean` | Sets the trait to active (100% opacity). | no |\n| className | `string` | n/a | no |\n| tooltipTextOverride | `string` | Overrides the tooltip with custom text | no |\n| size | `number` | Custom size of the icon, e.g: `40` will result in a 40x40 icon. | no |\n| inlineText | `'gw2Spidy'`, `'wiki'`, `string` | Will show text next to the icon that links to somewhere. Passing in any string\n\n#### `\u003cArmoryBadge /\u003e`\n\n```javascript\nimport { ArmoryBadge } from 'armory-component-ui';\n\n() =\u003e \u003cArmoryBadge hotlink /\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| className | `string` | n/a | no |\n| hotlink | `boolean` | Enables the badge to have a link back to the armory. | no |\n\n#### `\u003cGold /\u003e`\n\n```javascript\nimport { Gold } from 'armory-component-ui';\n\n() =\u003e \u003cGold coins={12345} /\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| className | `string` | n/a | no |\n\n#### `\u003cLanguageProvider /\u003e`\n\n```javascript\nimport { LanguageProvider } from 'armory-component-ui';\n\u003cLanguageProvider lang=\"de\"\u003e\n  \u003cdiv\u003eother components here\u003c/div\u003e\n\u003c/LanguageProvider\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| lang | 'en', 'de', 'fr', 'zh', 'ru', 'es' | Sets the language for all child (armory) components | yes |\n| children | `Node` | n/a | yes |\n\n#### `\u003cPieChart /\u003e`\n\n```javascript\nimport { PieChart } from 'armory-component-ui';\n\n() =\u003e\n  \u003cPieChart\n    dataValues={[{\n      color: 'lightgreen',\n      name: 'Sylvari',\n      value: 5455,\n    }, {\n      color: 'yellow',\n      name: 'Human',\n      value: 1000,\n    }]}\n  /\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| dataValues | `DataValues` | The data for the chart, see the example above. | yes |\n| size | `number` | The custom size of the chart. E.g: `128` will result in a chart 128x128. | no |\n| className | `string` | n/a | no |\n\n#### `\u003cTooltip /\u003e`\n\nMake sure to put this as high as you can in the component tree.\nThis will show the tooltip when appropriate for other components.\n\n```javascript\nimport { Tooltip } from 'armory-component-ui';\n\n() =\u003e \u003cTooltip /\u003e\n```\n\n#### `\u003cTooltipTrigger /\u003e`\n\nShows the tooltip when mouse over/touch start.\nHides the tooltip when mouse leave/touch end.\n\n```javascript\nimport { TooltipTrigger } from 'armory-component-ui';\n\n() =\u003e\n  \u003cTooltipTrigger\n    data=\"Cool Tooltip\"\n    type=\"items\"\n  \u003e\n    \u003cspan\u003eHover Over Me\u003c/span\u003e\n  \u003c/TooltipTrigger\u003e\n```\n\n| prop | type | description | required |\n|-|-|-|-|\n| children | `Node` | n/a | yes |\n| type | `'items'`, `'amulets'`, `'trait'`, `'skill'`, `'achievement'`, `'guildUpgrade'` | Type of tooltip to show. Only affects the tooltip if the data sent is an `Object`. | no |\n| data | `string`, `Object` | Data to send to the `\u003cTooltip /\u003e`. | no |\n| onMouseEnter | `Function` | n/a | no |\n| onMouseLeave | `Function` | n/a | no |\n\n### Helpers\n\n#### `reducers: { [string]: Function }`\n\nObject of reducer functions, pass this into your combineReducers function.\n\n```javascript\nimport { reducers } from 'armory-component-ui';\nimport { Provider } from 'react-redux';\nimport { combineReducers, createStore } from 'redux';\n\nconst store = createStore(\n  combineReducers(reducers),\n);\n\nconst App = () =\u003e (\n  \u003cProvider store={store}\u003e\n    \u003cdiv /\u003e\n  \u003c/Provider\u003e\n);\n```\n\n#### `actions: Object`\n\nStandard redux actions that fetch gw2 data.\n\n```javascript\nimport { connect } from 'react-redux';\nimport { actions } from 'armory-component-ui';\n\nconst mapStateToProps = (state) =\u003e ({\n  skills: state.skills,\n});\n\nconst mapDispatchToProps = {\n  fetch: actions.fetchSkills,\n};\n\nconnect(mapStateToProps, mapDispatchToProps)(\n  class SomeSkill extends React.Component {\n    componentDidMount () {\n      this.props.fetch([1139, 5490, 5495]);\n    }\n\n    render () {\n      const skill = this.props.skills[1139];\n\n      return (\n        \u003cdiv\u003e\n          {skill.name}\n        \u003c/div\u003e\n      );\n    }\n  }\n);\n```\n\n| actionName | arguments |\n|-|-|\n| fetchSkills | `Array\u003cnumber\u003e` |\n| fetchAchievementCategories | `Array\u003cnumber\u003e` | `'all'` |\n| fetchAchievementGroups | `Array\u003cnumber\u003e` | `'all'` |\n| fetchAchievements | `Array\u003cnumber\u003e` |\n| fetchAmulets | `Array\u003cnumber\u003e` |\n| fetchCurrencies | `Array\u003cnumber\u003e` |\n| fetchGuildUpgrades | `Array\u003cnumber\u003e` |\n| fetchItemStats | `Array\u003cnumber\u003e` |\n| fetchMaps | `Array\u003cnumber\u003e` |\n| fetchMaterials | `Array\u003cnumber\u003e` |\n| fetchPets | `Array\u003cnumber\u003e` |\n| fetchProfessions | `Array\u003cnumber\u003e` |\n| fetchPvpSeasons | `Array\u003cnumber\u003e` |\n| fetchAmulets | `Array\u003cnumber\u003e` |\n| fetchSkills | `Array\u003cnumber\u003e` |\n| fetchSkins | `Array\u003cnumber\u003e` |\n| fetchSpecializations | `Array\u003cnumber\u003e` |\n| fetchTitles | `Array\u003cnumber\u003e` |\n| fetchTraits | `Array\u003cnumber\u003e` |\n| fetchWorlds | `Array\u003cnumber\u003e` |\n| fetchCalculatedItemStats | `Array\u003c{ id: number, itemId: number, type: string, rarity: string, level: number }\u003e` |\n\n#### `markup(text: string, useTagName: boolean)`\n\nBy default the class will be a class inside the `armory-component-ui/styles.css`:\n\n```javascript\nimport { markup } from 'armory-component-ui';\n\nconst text = 'Gain a boon upon casting a \u003cc=@abilitytype\u003eglyph\u003c/c\u003e based on your attunement. \u003cc=@abilitytype\u003eGlyphs\u003c/c\u003e gain reduced recharge.';\n\nmarkup(text);\n// \u003cspan dangerouslySetInnerHTML={{ __html: 'Gain a boon upon casting a \u003cspan class=\"abilitytype\"\u003eglyph\u003c/span\u003e based on your attunement. \u003cspan class=\"DxsxS\"\u003eGlyphs\u003c/span\u003e gain reduced recharge.' }}\u003e\n```\n\nIf you pass `useTagName` as true, the class on the element will be the `@colourname` text, for example:\n\n```javascript\nimport { markup } from 'armory-component-ui';\n\nconst text = 'Gain a boon upon casting a \u003cc=@abilitytype\u003eglyph\u003c/c\u003e based on your attunement. \u003cc=@abilitytype\u003eGlyphs\u003c/c\u003e gain reduced recharge.';\n\nmarkup(text, true);\n// \u003cspan dangerouslySetInnerHTML={{ __html: 'Gain a boon upon casting a \u003cspan class=\"abilitytype\"\u003eglyph\u003c/span\u003e based on your attunement. \u003cspan class=\"abilitytype\"\u003eGlyphs\u003c/span\u003e gain reduced recharge.' }}\u003e\n```\n\n#### `persistToLocalStorage(boolean)`\n\nBy default data will be persisted to local storage.\nYou can turn this off by doing the following:\n\n```javascript\nimport { persistToLocalStorage } from 'armory-component-ui';\n\npersistToLocalStorage(false);\n// Local storage data persistence is now turned off.\n```\n\n#### `forceCacheClearOnNextRun(string: key)`\n\nWill force api cache to be cleared next time the code executes.\nUse a unique key every time you want to clear the cache.\n\n```javascript\nimport { forceCacheClearOnNextRun } from 'armory-component-ui;';\n\nforceCacheClearOnNextRun('1');\n```\n\n## Local Development\n\n```bash\ngit clone git@github.com:madou/armory-component-ui.git\ncd armory-component-ui\nyarn # See https://yarnpkg.com/lang/en/docs/install/\nnpm start # Runs react-storybook\nnpm run tdd # Runs tests in watch mode\n```\n\n### Building Docs\n\n```bash\nnpm run build-storybook\n```\n\n### Releasing\n\n```bash\n# Make sure the changelog has your changes under Unreleased\n# Be on master branch\nnpm version major|minor|patch\n```\n\n© 2015-present gw2armory.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdouges%2Farmory-component-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsdouges%2Farmory-component-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdouges%2Farmory-component-ui/lists"}