fermmap-shared 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 FermMap
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,180 @@
+# @fermmap/shared
+
+**Public (private)** deploy of FermMap-specific React components built using [React Aria Components](https://react-spectrum.adobe.com/react-aria/) and [React Spectrum S2 style-macros](https://react-spectrum.adobe.com/beta/s2/styling.html).
+
+## Overview
+
+This package contains a collection of accessible, themeable 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 styling.
+
+## Publishing to npm
+
+### Prerequisites
+- npm account with publishing rights
+- Logged in via `npm login`
+- **Granular Access Token**: For automated publishing, you'll need a granular access token with publish permissions
+
+### Before Publishing
+
+1. **Update version** in `package.json`:
+   ```json
+   {
+     "version": "0.2.0"  // Increment appropriately
+   }
+   ```
+
+2. **Set package to public** (if first time publishing):
+   ```json
+   {
+     "private": false  // Change from true
+   }
+   ```
+
+3. **Update repository URL** in `package.json`:
+   ```json
+   {
+     "repository": {
+       "type": "git",
+       "url": "https://github.com/your-actual-username/fermmap.git",
+       "directory": "packages/shared"
+     }
+   }
+   ```
+
+### Publishing
+
+The package uses **Parcel** to build optimized CommonJS and ESM bundles with CSS extracted from style macros.
+
+To publish:
+
+```bash
+# Build and publish (prepublishOnly script runs automatically)
+npm publish
+
+# Or manually:
+yarn build
+npm publish
+```
+
+The `prepublishOnly` script automatically cleans and builds before publishing.
+
+### Important Notes
+
+- **Build Process**: Uses Parcel to compile TypeScript and extract/optimize CSS from S2 style-macros
+- **Output**: CommonJS (`dist/main.cjs`), ESM (`dist/module.mjs`), TypeScript types (`dist/types.d.ts`), and optimized CSS
+- **CSS Files**: Style macro CSS is automatically extracted and optimized during build
+- **Granular Token**: For CI/CD, create a granular access token at https://www.npmjs.com/settings/YOUR-USERNAME/tokens
+- **Peer Dependencies**: Consuming apps must install:
+  - `react` ^18.2.0
+  - `react-dom` ^18.2.0  
+  - `react-aria-components` ^1.13.0
+  - `@react-spectrum/s2` ^0.12.0
+  - `react-intl` ^6.0.0
+  - `next` ^14.0.0 (optional, only for SegmentedControl)
+  - `@axe-core/react` ^4.0.0 (optional, only for dev tools)
+
+## Installation
+
+```bash
+npm install @fermmap/shared
+# or
+yarn add @fermmap/shared
+```
+
+### Importing Components
+
+```tsx
+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
+
+```tsx
+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
+
+```tsx
+import '@fermmap/shared/styles/variables.css';
+```
+
+## Development
+
+### Building
+
+```bash
+yarn build
+```
+
+This uses Parcel to build the package, generating both CommonJS and ESM outputs with TypeScript definitions.
+
+### Publishing
+
+```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.