@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

npm install @fermmap/shared
# or
yarn add @fermmap/shared

Importing Components

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

// CSS is imported automatically from the built bundle

Available Components

UI Components

• 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

Hooks & Utilities

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

Usage

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

function MyComponent() {
  return (
    <div>
      <TextField
        label="Name"
        value={name}
        onChange={setName}
      />
      <Button onPress={handleSubmit}>
        Submit
      </Button>
    </div>
  );
}

Importing Styles

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

Development

Building

yarn build

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

Publishing

# 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.