@cristianmpx/react-import-sheet-ui-raw

UI components for sheet import — built on @cristianmpx/react-import-sheet-headless. Hooks-first, headless: no styles; you apply your own CSS and markup.

Features

• Hooks (useRawFilePicker, useRawCell, useRawTableBody, etc.) with prop-getters and DOM contract (data-*, aria-*).
• RawImporterWorkflow — optional orchestrator for idle → mapping → process → result/error.
• Validation errors: cells expose data-has-error and an error message slot (getErrorProps, data-ris-ui="raw-cell-error-message"). The workflow supports cellErrorPlacement (inline | below | none) to show the message inline, on a second line in the cell, or not in the cell (e.g. tooltip elsewhere).

Usage reference: run npm run storybook for live examples and demos.

Install

npm install @cristianmpx/react-import-sheet-ui-raw @cristianmpx/react-import-sheet-headless react react-dom

Usage

Configure the headless engine with ImporterProvider, then use the raw UI components (e.g. RawProgressMonitor, RawAbortController) inside that tree. See the headless package for layout and pipeline setup.

import { ImporterProvider } from '@cristianmpx/react-import-sheet-headless';
import { RawProgressMonitor, RawAbortController } from '@cristianmpx/react-import-sheet-ui-raw';

<ImporterProvider layout={myLayout} engine="auto">
  <RawProgressMonitor>
    {({ phase, progressRef, aborted }) => (
      <div>
        {phase} {aborted && 'Aborted'}
      </div>
    )}
  </RawProgressMonitor>
  <RawAbortController>Cancel</RawAbortController>
</ImporterProvider>;

Scripts

| Script | Description | | ------------------------- | ---------------------------------- | | npm run build | Build ESM + CJS + types to dist/ | | npm run lint | Run ESLint | | npm run lint:fix | ESLint with auto-fix | | npm run format | Prettier write | | npm run format:check | Prettier check | | npm run test | Vitest watch | | npm run test:run | Vitest run once | | npm run test:coverage | Vitest with coverage (≥90%) | | npm run storybook | Storybook dev server | | npm run build-storybook | Build static Storybook | | npm run commit | Commitizen (conventional commits) |

Storybook

Storybook includes:

• Test widget (addon-vitest): run component tests on stories from the sidebar; optional Accessibility and Coverage.
• Accessibility (addon-a11y): run a11y checks alongside tests and inspect violations in the Accessibility panel.
• Docs (addon-docs): auto-generated docs and MDX (e.g. Get started in the sidebar).

Restart Storybook after installing or updating addons.

License

ISC