@instructure/institutional-tagging

Institutions need a flexible system for categorizing and tracking users, courses and other resources beyond Canvas’s built-in organizational structures.

Installation

# ./canvas-lms 
yarn add -W @instructure/institutional-tagging

-W flag to add to the root workspace

Peer Dependencies

{
  "react": "^18.0.0",
  "@instructure/ui-*": "^10.0.0",
  "@instructure/emotion": "^10.0.0"
}

Usage

<AccountTags />

Development

# Start Storybook sandbox
pnpm storybook

# Run tests
pnpm test

# Run tests with coverage
pnpm test --coverage

# Build
pnpm build

# Type check
pnpm type-check

Mock server

# Start the app with a local mock API, hot-reloading locales, and console labels per process
pnpm dev:mock

This runs three processes concurrently:

• web-app — Vite dev server
• mock-server — local API mock (see scripts/mock-server.mjs)
• locales — watches src/constants/i18n.ts and regenerates + validates locales on change

Locales

Translations are defined in src/constants/i18n.ts and generated into locales/en.json.

# Regenerate locales/en.json from src/constants/i18n.ts and validate
pnpm locales:generate

# Watch src/constants/i18n.ts and regenerate + validate on every change
pnpm locales:watch

Validation enforces two rules:

| Rule | Behaviour | |---|---| | Keys must be alphabetically sorted within each object | Exits with error — run pnpm locales:sort to fix | | No unused keys | Prints a warning — does not fail the process |

# Auto-sort keys in src/constants/i18n.ts alphabetically
pnpm locales:sort

# Validate only (sort check + unused key warning)
pnpm locales:validate