@modenabc/ui

Web UI component library for Modena. Built with React DOM — web only.

Scaffolded from the same structure as @ecohouse/ui, with Button as the starter example component.

Components

| Component | Description | | ---------- | ---------------------------------------------------------------------------- | | Button | 41px CTA — filled / outlineSecondary / outlinePrimary / outlineWhite | | Input | Labeled text field — Gray/800 label, bordered control | | Select | Form select — Input styles, opens on click | | Dropdown | Dark nav dropdown — opens on hover | | Textarea | Multi-line field with the same chrome as Input |

Installation

npm install @modenabc/ui

Peer dependencies: react and react-dom (>=18).

Quick start

import "@modenabc/ui/web/fonts.css";
import "@modenabc/ui/web/colors.css";
import "@modenabc/ui/web/typography.css";
import "@modenabc/ui/web/button.css";
import "@modenabc/ui/web/field.css";
import "@modenabc/ui/web/select.css";
import "@modenabc/ui/web/dropdown.css";
import { Button, Input, Select, Dropdown, Textarea } from "@modenabc/ui";

<Button title="Continue" variant="filled" onClick={() => {}} />
<Input label="Անուն, ազգանուն" placeholder="Placeholder" />
<Select
  label="Հասցե"
  options={[{ value: "a", label: "Option A" }]}
  placeholder="Ընտրեք"
  onChange={() => {}}
/>
<Dropdown
  options={[{ value: "business", label: "Բիզնես կենտրոններ" }]}
  defaultValue="business"
  onChange={() => {}}
/>
<Textarea label="Մեկնաբանություն" placeholder="…" />

Full props: docs/components.md.

Design tokens

import {
  colors,
  grey,
  fonts,
  fontWeights,
  bodyTypography,
  buttonTypography,
  labelTypography,
  inputTypography,
} from "@modenabc/ui";

Body font: Montserrat arm (bundled OTFs). See docs/tokens.md.

Development

npm install
npm run storybook   # Component playground
npm run typecheck
npm test
npm run build

Project structure

src/
  components/          # Button, Input, Select, Dropdown, Textarea
  icons/               # ArrowRight, ChevronDown
  theme/               # colors, typography
  web/fonts/           # Montserrat arm OTFs (+ OFL)
  web/styles/          # colors, fonts, typography, button, field, select, dropdown

Add new components under src/components/<Name>/ with index.ts, the component file, and optional *.stories.tsx.

Publishing

Push to main after CI verify passes. The Release job publishes @modenabc/ui to npm (bumps patch if the current version already exists).

One-time npm setup:

1. Ensure the modenabc organization exists on npm (owns the @modenabc scope). Without it, publish fails with E404.
2. Add your publish user to that org with read/write on packages.
3. Set the GitHub secret NPM_TOKEN to an npm Automation token (or Granular token with publish rights that bypasses 2FA) belonging to a member of that org. Classic tokens with write-2FA fail in CI with EOTP.