amp-workflow-ui 0.1.1 → 0.1.2

package/README.md

@@ -1,30 +1,33 @@
-# @ampersand/workflow-ui
+# amp-workflow-ui
 
-Reusable Approval Workflow UI components for Ampersand portals.
+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 @ampersand/workflow-ui
+npm install amp-workflow-ui
 # or
-yarn add @ampersand/workflow-ui
+yarn add amp-workflow-ui
 ```
 
 Peer dependencies required in host:
 
 - react, react-dom (18.x)
-- @mui/material, @mui/system
+- @mui/material, @mui/system, @mui/icons-material
 - @emotion/react, @emotion/styled
+- react-hot-toast
 
 ## Usage
 
+### 1) Basic React usage
+
 ```tsx
-import { DialogOpener } from '@ampersand/workflow-ui'
+import { DialogOpener } from 'amp-workflow-ui'
 import axios from 'axios'
 
 const api = {
-  get: (p: any) => axios.get(p.url),
-  post: (p: any) => axios.post(p.url, p.data)
+  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
@@ -32,32 +35,94 @@ const api = {
   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 '@ampersand/workflow-ui'
+import { ApprovalWorkflow } from 'amp-workflow-ui'
 
 <ApprovalWorkflow userInfo={userInfo} api={api} />
 ```
 
-### Optional
+Props overview:
+- DialogOpener
+  - required: openDialog, userInfoData, api
+  - optional: handleClose, selectedWorkflowsList, urlBuilder, loadingComponent
+- ApprovalWorkflow
+  - required: userInfo, api
+  - optional: selectedWorkflowsList, urlBuilder, loadingComponent
 
-- `urlBuilder`: (moduleName, moduleId, context, refId?) => string
-- `loadingComponent`: custom loader
+### 2) Next.js usage (recommended)
 
-## Build
+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
+## 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
+