@khester/reusable-components

Reusable Fluent UI v8 React components for Dynamics 365 / Power Platform projects — extracted from real client work. CSS-in-JS (no stylesheet import required), zero setup, browser-targeted.

Install

Ad-hoc, into any project:

npm install @khester/reusable-components @fluentui/react@^8 react react-dom

@fluentui/react (v8), react, and react-dom (>=17) are peer dependencies — install them alongside. Or scaffold a project with them pre-wired:

npx @khester/create-dynamics-app my-app --artifact react-custom-page --with-components

Usage

import {
  ReusableCard,
  CustomSection,
  FieldRow,
  ActionBar,
  FileUploadField,
  MockFileUploadService,
  logger,
} from '@khester/reusable-components';

function Demo() {
  return (
    <CustomSection columnSpan={2}>
      <ReusableCard title="Details">
        <FieldRow label="Name">{/* a control */}</FieldRow>
        <FileUploadField config={{/* … */}} service={new MockFileUploadService()} hasFileContent={false} />
      </ReusableCard>
    </CustomSection>
  );
}

What's inside

| Area | Exports | |------|---------| | Primitives | ReusableCard, FieldRow, ActionBar, primaryButtonStyles | | Layout | CustomSection, SectionComponent, SectionHeaderComponent, Spacer | | Inputs | CustomTextfield, SearchComponent | | Feedback | MessageBarComponent, CalloutComponent | | Data | DetailsListComponent (ICustomColumn) | | File upload | FileUploadField, IFileUploadService, MockFileUploadService, FileUploadConfig/FileUploadResult | | Logging | logger, initLogging, withCrudLog (localhost-gated structured logger + CRUD wrapper) |

All styling is inlined via Fluent's mergeStyleSets — no CSS file to import, no ThemeProvider required.

Name-collision note

The card primitive is exported as ReusableCard (not Card) so the package can be co-installed alongside @khester/dynamics-ui-components, which exports a Card. No other export collides.

File upload

FileUploadField takes an IFileUploadService (your storage backend). MockFileUploadService is a shipped in-memory test double for demos and tests; bring your own implementation for production.

Source & drift rule

These components are maintained in the dynamics-ui-kit monorepo (packages/reusable-components) and mirrored from the originating client app. Fixes land in this package first; the app re-exports from here. Keep that direction to avoid two-source drift.