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

``bash
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

$3

`tsx
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 })
}

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

Or render inline:

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


`

Props overview:
- DialogOpener
- required: openDialog, userInfoData, api
- optional: handleClose, selectedWorkflowsList, urlBuilder, loadingComponent
- ApprovalWorkflow
- required: userInfo, api
- optional: selectedWorkflowsList, urlBuilder, loadingComponent

$3

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:

`tsx
// 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: () =>

}
)
`

If you still see “Directory import '@mui/material/Button' is not supported” during SSR, force the CJS build:
`tsx
const WorkflowDialog = dynamic(() => import('amp-workflow-ui/dist/index.cjs.js').then(m => m.DialogOpener), { ssr: false })
`

Build (package maintainers)

`bash
npm run build
`

Publish (package maintainers)

`bash


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