@abdumamdouh/s360-react-ui

Shift360 design-system React components extracted from the enquiry client extension: form field shell, text/textarea fields (with live character counter), native dialog wrapper, drag-and-drop file input with preview card, and a phone field with an accessible country-code combobox — plus useCountdown and useClipboardFlash.

Install

npm i @abdumamdouh/s360-react-ui

react / react-dom 18 are peer dependencies.

Usage in a Liferay client extension

import { TextField, FileDrop, PhoneField, Dialog } from '@abdumamdouh/s360-react-ui';
import '@abdumamdouh/s360-react-ui/styles.css';

The components are styled by --s360-* design tokens and the base .s360-field rules, both provided on every portal page by the shift360-global-styles client extension. Outside the portal (Storybook, tests) import those css files yourself.

Development

npm install
npm run dev          # Storybook on :6006
npm run test         # vitest
npm run typecheck
npm run lint
npm run build        # dist/: ESM + CJS + d.ts + styles.css

Architecture

src/ is layered — imports only point down:

composites (PhoneField)  →  inputs (TextField, FileDrop)  →  primitives (Field, Dialog)  →  hooks

Each component folder co-locates implementation + story + test + index.ts. Everything public is re-exported from src/index.ts; every prop type is an exported interface. All component CSS lives in src/styles.css, scoped under .s360-ui.

Release

npm run release:patch   # fix
npm run release:minor   # new component/prop

prepublishOnly runs tests + build automatically. No npm account or OTP needed: this folder's .npmrc carries a granular npm token that can publish ONLY this package (2FA-bypass, yearly expiry — the package owner renews it). The token grants publish rights to anyone with repo access; keep the repo private.