@fermmap/shared

Public (private) deploy of FermMap-specific React components built using React Aria Components and React Spectrum S2 style-macros.

Overview

This package contains a collection of accessible, themeed React components designed for the FermMap application. All components are built on top of React Aria Components for accessibility and use React Spectrum S2 style-macros for consistent, type-safe atomic styling.

Installation

``bash
npm install @fermmap/shared


or


yarn add @fermmap/shared
`

$3

`tsx
import { Button, TextField, Table } from '@fermmap/shared';
import type { ColumnDef } from '@fermmap/shared';

// CSS is imported automatically from the built bundle
`

Available Components

$3


- AlertDialog, PromptDialog - Accessible dialogs
- Autocomplete, AutocompleteTable - Searchable inputs
- Badge - Status and category badges
- Button, CloseButton - Button components
- Checkbox, RadioGroup, Switch - Form inputs
- ComboBox, Select - Dropdown inputs
- DisclosureGroup - Expandable panels
- FilterTabs - Tab-style filters with counts
- LabeledValue, StatCard - Data display
- Link - Styled links
- ProgressBar - Progress indicators
- SearchField - Search inputs
- SegmentedControl - iOS-style segmented control
- Table - Data tables with sorting/selection
- Tabs, TabList, Tab, TabPanel - Tabbed interfaces
- TextArea, TextField - Text inputs

$3

- Custom hooks for common patterns
- Shared utility functions
- Style utilities

Usage

`tsx
import { Button, TextField, Table } from '@fermmap/shared';
import type { ColumnDef } from '@fermmap/shared';

function MyComponent() {
return (



);
}
`

$3

`tsx
import '@fermmap/shared/styles/variables.css';
`

Development

$3

`bash
yarn build
`

This uses Parcel to build the package, generating both CommonJS and ESM outputs with TypeScript definitions.

$3

`bash


Update version in package.json first


yarn publish
`

The prepublishOnly` script will automatically clean and build the package before publishing.

Features

- ✅ Fully accessible components (WCAG 2.0 AA)
- ✅ Dark mode support via React Spectrum S2 tokens
- ✅ Type-safe with TypeScript
- ✅ Tree-shakeable ESM builds
- ✅ Consistent styling with S2 style-macros
- ✅ Responsive and mobile-friendly
- ✅ RTL (Right-to-Left) language support

License

MIT

Contributing

This is a private package for the FermMap project. For internal use only.