A monorepo containing UGRC's reusable React components, utilities, and configuration packages.

The storybook files are published to the web to view and learn about the components.

This monorepo contains the following packages:

A collection of React components implementing the Utah Design System. Includes spatial components for maps, geocoding, and location services built with React Aria and ArcGIS.

npm install @ugrc/utah-design-system

A React component that displays cursor coordinates while hovering over an ArcGIS map. Supports multiple coordinate systems and projections.

npm install @ugrc/mouse-trap

Shared utility functions and React hooks for UGRC projects, including helpers for working with ArcGIS maps and spatial data.

npm install @ugrc/utilities

Automatically switches between Esri CSS themes based on the browser's preferred color scheme (light/dark mode).

npm install @ugrc/esri-theme-toggle

Shared ESLint configurations for UGRC projects with support for React, TypeScript, and Storybook.

npm install --save-dev @ugrc/eslint-config

The default Tailwind CSS preset for UGRC projects with support for React Aria Components.

npm install --save-dev @ugrc/tailwind-preset

Shared TypeScript configurations for UGRC projects, including browser and Vite-specific configurations.

npm install --save-dev @ugrc/tsconfigs

Some packages in this monorepo depend on each other:

graph TD
    utilities[utilities]
    utah-design-system[utah-design-system]
    mouse-trap[mouse-trap]

    utilities --> utah-design-system
    utilities --> mouse-trap

    style utilities fill:#e1f5ff
    style utah-design-system fill:#fff4e1
    style mouse-trap fill:#fff4e1

• @ugrc/utah-design-system depends on @ugrc/utilities for shared utility functions and React hooks
• @ugrc/mouse-trap depends on @ugrc/utilities for coordinate projection utilities

The remaining packages (eslint-config, esri-theme-toggle, tailwind-preset, tsconfigs) are standalone and have no internal dependencies.

1. Build the packages
   1. npm run build
2. View the stories
   1. npm run storybook

Please use conventional commits with the following scopes:

• monorepo
• design-system
• eslint-config
• layer-selector
• mouse-trap
• tailwind
• tsconfigs
• utilities

Within the utah design system use the lower snake case component name

• button
• tag-group
• hooks

or if general package updates use

• uds

To test these packages in other local projects, first run npm link -workspaces from the root of this project. Then run npm link @ugrc/utah-design-system from the root of your test project. Please note that you need to run npm link for all of the packages at the same time or previous ones will be removed.

Then run npm run build:watch --workspace packages/sherlock to automatically build the package any time a file is saved.

To continue with tailwind version 3 support

• tailwind-merge is pinned at version 2.6.1 and
• tailwind-variants is pinned at version 0.3.1