amp-workflow-ui 0.1.27 → 0.1.29

package/README.md

@@ -1,128 +1,128 @@
-# 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
-
-### 1) Basic React usage
-
-```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 })
-}
-
-<DialogOpener
-  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'
-
-<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:
-
-```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: () => <div>Loading Approval Management...</div> }
-)
-```
-
-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
-
-
+# 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
+
+### 1) Basic React usage
+
+```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 })
+}
+
+<DialogOpener
+  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'
+
+<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:
+
+```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: () => <div>Loading Approval Management...</div> }
+)
+```
+
+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
+
+