amp-workflow-ui

Reusable Approval Workflow UI components (DialogOpener, ApprovalWorkflow) for Ampersand portals. Components are decoupled from app internals and accept an injected API client and optional URL builder.

Install

npm install amp-workflow-ui
# or
yarn add amp-workflow-ui

Peer dependencies required in host:

• react, react-dom (18.x)
• @mui/material, @mui/system, @mui/icons-material
• @emotion/react, @emotion/styled
• react-hot-toast

Usage

1) Basic React usage

import { DialogOpener } from 'amp-workflow-ui'
import axios from 'axios'

const api = {
  get: (p: any) => axios({ method: 'GET', baseURL: 'https://api.example.com', url: p.url }),
  post: (p: any) => axios({ method: 'POST', baseURL: 'https://api.example.com', url: p.url, data: p.data })
}

<DialogOpener
  openDialog={open}
  handleClose={() => setOpen(false)}
  userInfoData={userInfo}
  api={api}
  // optional
  urlBuilder={(moduleName, moduleId, ctx, referenceId) => `/${moduleName}/${moduleId}${referenceId ? `?ref=${referenceId}` : ''}`}
/>

Or render inline:

import { ApprovalWorkflow } from 'amp-workflow-ui'

<ApprovalWorkflow userInfo={userInfo} api={api} />

Props overview:

• DialogOpener
  • required: openDialog, userInfoData, api
  • optional: handleClose, selectedWorkflowsList, urlBuilder, loadingComponent
• ApprovalWorkflow
  • required: userInfo, api
  • optional: selectedWorkflowsList, urlBuilder, loadingComponent

2) Next.js usage (recommended)

Next.js may SSR your imports by default. To ensure client-only execution and avoid Node ESM resolver issues, dynamically import the package in a client component:

// app or pages client component
import React from 'react'
import dynamic from 'next/dynamic'

export const WorkflowDialog = dynamic(
  async () => {
    // Prefer the package root; if your environment errors on ESM resolution,
    // fall back to the CJS build at /dist/index.cjs.js.
    try {
      const mod = await import('amp-workflow-ui')
      return mod.DialogOpener
    } catch {
      const mod = await import('amp-workflow-ui/dist/index.cjs.js')
      return mod.DialogOpener
    }
  },
  { ssr: false, loading: () => <div>Loading Approval Management...</div> }
)

If you still see “Directory import '@mui/material/Button' is not supported” during SSR, force the CJS build:

const WorkflowDialog = dynamic(() => import('amp-workflow-ui/dist/index.cjs.js').then(m => m.DialogOpener), { ssr: false })

Build (package maintainers)

npm run build

Publish (package maintainers)

# 1) Ensure you are logged in and have publish rights
npm whoami || npm login

# 2) Bump version (semver)
npm version patch   # or minor | major

# 3) Build
npm run build

# 4) Publish (public)
npm publish --access public

Notes:

• Do not publish pre-releases unless explicitly needed; otherwise npm requires --tag.
• If your org enforces 2FA for publish, complete the OTP step in your terminal.
• Keep peerDependencies in sync to avoid duplicate React/MUI bundles in hosts.

Troubleshooting

• Error: Element type is invalid … got: object

  • Ensure you are importing the React component (named export) and not the module object. When using dynamic(), return the component (e.g., m.DialogOpener).

• Error: Directory import '@mui/material/Button' is not supported resolving ES modules

  • This comes from Node’s ESM resolver during SSR. Use dynamic import with ssr: false or import the CJS build: amp-workflow-ui/dist/index.cjs.js.

License

MIT