How to update Forge UI version / use of Avatar and User in Forge UI app

Forge Forge Custom UI and UI kit (beta)
, ,
1

In the Forge UI kit documentation for Avatar is says, that

In UI kit version 0.15.0 and later, the Avatar component has been removed and is replaced by the User component.

I am trying to use User, but I get an error message that User is not possible. Avatar works fine.

As I have not specified a specific version in my code, I assume I am using latest, and that would be UI kit 0.16.0 since Dec, right? So why I cannot use User and UserGroup?

import ForgeUI, { Text, Avatar, AvatarStack, User, UserGroup } from '@forge/ui'

Or do I have to update my local npm to use always the latest version? I checked using npm list --depth=0 that I have locally @forge/ui@0.13.1 installed. Guess this the root cause? Also my package-lock.json shows 0.13.1.

    "@forge/ui": {
      "version": "0.13.1",
      "resolved": "https://registry.npmjs.org/@forge/ui/-/ui-0.13.1.tgz",
      "integrity": "sha512-al9Cv52Jqwz6XtJLzNXAWNYIljfKKHRqrjVJG99nu9QIzz9ri/efdz3axjotIy4Mh002jQxdvpjNL3LTVXWE8w==",
      "requires": {
        "fast-json-stable-stringify": "^2.1.0",
        "sha.js": "^2.4.11",
        "tslib": "^1.11.0"
      }
    },

How do I update to newer version of Forge UI? npm update does not change anything. Sorry, I am new to npm. Do I have to change package-lock.json manually to update to new version of Forge UI?

Also I wonder if Avatar resp. User can be configured to use the smaller 24x24 avatar image. Any idea?

I have a list of user names to show (not only the avatar images like in AvatarStack or UserStack) and I don’t like the huge avatar images of Avatar or User and also not the appearing as a lozenge when using User or UserStack inside Text as documented.

2

Hi @Holger,

Could you run npm update -dd and share the console output? It should show us exactly why @forge/ui is not being upgraded in this case. My initial guess would be due to semver.

Cheers

3

Here is the output

holgers-macbook:projectroletab-forge holger$ npm update -dd
npm info it worked if it ends with ok
npm verb cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'update', '-dd' ]
npm info using npm@6.14.11
npm info using node@v14.16.0
npm verb npm-session b79ee75b2fb0401f
npm verb update computing outdated modules to update
npm http fetch GET 304 https://registry.npmjs.org/eslint 222ms (from cache)
npm http fetch GET 200 https://registry.npmjs.org/eslint-plugin-react-hooks 1001ms
npm http fetch GET 304 https://registry.npmjs.org/@forge%2fui 2119ms (from cache)
npm http fetch GET 304 https://registry.npmjs.org/@forge%2fapi 2284ms (from cache)
npm verb outdated not updating @forge/ui because it's currently at the maximum version that matches its specified semver range
npm verb outdated not updating eslint because it's currently at the maximum version that matches its specified semver range
npm verb outdated not updating eslint-plugin-react-hooks because it's currently at the maximum version that matches its specified semver range
npm verb exit [ 0, true ]
npm timing npm Completed in 3055ms
npm info ok
4

Hi @Holger,

Thank you for sharing. As the update tool mentions, the semver is currently locking the version to 0.13.1 given your dependencies list. Following the Semantic Versioning guide page, you should be able to change the version from 0.13.1 to ^0.13.1. This will tell npm that it can update @forge/ui minor versions and patch versions (although it will not allow major versions upgrade). Making this change and running npm update should allow it to fetch 0.16.0.

Cheers

5

Thank you for your support. As I am new to npm I am confused about package.json and package-lock.json. The quote above was from package-lock.json.

In my package.json it is already "@forge/ui": "^0.13.1"

{
  "name": "forge-ui-starter",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "scripts": {
    "lint": "./node_modules/.bin/eslint src/**/* || npm run --silent hook-errors",
    "hook-errors": "echo '\\x1b[31mThe build failed because a Forge UI hook is being used incorrectly. Forge UI hooks follow the same rules as React Hooks but have their own API definitions. See the Forge documentation for details on how to use Forge UI hooks.\n' && exit 1"
  },
  "devDependencies": {
    "eslint": "^6.5.1",
    "eslint-plugin-react-hooks": "^2.1.2"
  },
  "dependencies": {
    "@forge/api": "^2.5.0",
    "@forge/ui": "^0.13.1"
  }
}
6

I realized that I am using an older version of npm

   │                                                               │
   │      New major version of npm available! 6.14.11 → 8.3.1      │
   │   Changelog: https://github.com/npm/cli/releases/tag/v8.3.1   │
   │               Run npm install -g npm to update!               │
   │                                                               │

So, I updated npm, then tried npm update. This is the output.

holgers-macbook:projectroletab-forge holger$ npm update

up to date, audited 154 packages in 1s

13 packages are looking for funding
  run `npm fund` for details

5 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.