Public (private) deploy of World Ferment-specific React components built using React Aria Components and React Spectrum S2 style-macros
npm install fermmap-sharedPublic (private) deploy of FermMap-specific React components built using React Aria Components and React Spectrum S2 style-macros.
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.
``bash`
npm install @fermmap/sharedor
yarn add @fermmap/shared
`tsx
import { Button, TextField, Table } from '@fermmap/shared';
import type { ColumnDef } from '@fermmap/shared';
// CSS is imported automatically from the built bundle
`
, 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 utilitiesUsage
`tsx
import { Button, TextField, Table } from '@fermmap/shared';
import type { ColumnDef } from '@fermmap/shared';function MyComponent() {
return (
label="Name"
value={name}
onChange={setName}
/>
);
}
`$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.- ✅ 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
MIT
This is a private package for the FermMap project. For internal use only.