Kitchen Sink

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

Preview

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

Packages

This monorepo contains the following packages:

@ugrc/utah-design-system

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.

pnpm add @ugrc/utah-design-system

@ugrc/mouse-trap

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

pnpm add @ugrc/mouse-trap

@ugrc/utilities

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

pnpm add @ugrc/utilities

@ugrc/esri-theme-toggle

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

pnpm add @ugrc/esri-theme-toggle

@ugrc/eslint-config

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

pnpm add -D @ugrc/eslint-config

@ugrc/tailwind-preset

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

pnpm add -D @ugrc/tailwind-preset

@ugrc/tsconfigs

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

pnpm add -D @ugrc/tsconfigs

Package Dependencies

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

Loading

• @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.

Development

1. Build the packages
   1. pnpm build
2. View the stories
   1. pnpm storybook

Conventional Commits

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

Local Linking

To test these packages in other local projects use the pnpm link command. For example:

cd /my-app
pnpm link ../kitchen-sink/packages/utah-design-system

Use @ugrc/utilities by itself when you only need the shared helpers. Link both packages when you need unpublished utah-design-system changes, because it depends on @ugrc/utilities.

To remove the links later:

cd /my-app
pnpm unlink @ugrc/utah-design-system
pnpm unlink @ugrc/utilities
pnpm install