@2londres/shareable-preview 1.0.0 → 1.0.2

package/README.md

@@ -1,6 +1,6 @@
 # @2londres/shareable-preview
 
-React component for shareable data preview with debug/user modes.
+React component for shareable data preview with debug/user modes, custom views, field filtering, and validation buttons.
 
 ## Installation
 
@@ -17,7 +17,10 @@ npm install @2londres/shareable-preview
 
 Your project must have Tailwind CSS configured (the component uses Tailwind classes).
 
-## Usage
+## Basic usage
+
+<!-- TODO: Replace with your own recording -->
+![Basic usage](docs/assets/basic-usage.gif)
 
 ```tsx
 import { ShareablePreview } from "@2londres/shareable-preview";
@@ -25,6 +28,17 @@ import { ShareablePreview } from "@2londres/shareable-preview";
 <ShareablePreview
   data={{ foo: "bar", count: 42 }}
   title="My Preview"
+  description="Verify the information before validation"
+  mode="user"
+/>
+```
+
+With actions:
+
+```tsx
+<ShareablePreview
+  data={myData}
+  title="Preview"
   actions={[
     { label: "Confirm", onClick: () => {} },
     { label: "Delete", onClick: () => {} },
@@ -46,9 +60,163 @@ import { ShareablePreview } from "@2londres/shareable-preview";
 | `eyeDevMode` | `'development' \| 'production'` | Show/hide debug UI (default: `process.env.NODE_ENV`) |
 | `mode` | `'debug' \| 'user'` | Default view mode |
 | `inline` | `boolean` | Render inline without dialog |
-| ... | | See component props for full API |
+| `customView` | `Component` | Single custom view component |
+| `customViewProps` | `object` | Props passed to custom view (including field filters) |
+| `customViews` | `Array` | Multiple views with tabs (id, label, view, viewProps, actions) |
+| `defaultOpen` | `boolean` | Open dialog by default |
+| `onOpenChange` | `(open: boolean) => void` | Callback when dialog open state changes |
+
+## Action buttons (ValidationButton)
+
+Actions display as gradient buttons with icons and visual effects at the bottom of the preview.
+
+<!-- TODO: Replace with your own recording -->
+![Action buttons](docs/assets/action-buttons.gif)
+
+### Action props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `string` | Button text |
+| `onClick` | `() => void` | Click handler |
+| `variant` | `"green" \| "red" \| "blue" \| "purple" \| "orange"` | Gradient color (auto-detected if absent) |
+| `icon` | `LucideIcon \| string \| ReactElement` | Icon (auto-detected from label if absent) |
+| `withPulse` | `boolean` | Pulse animation to draw attention |
+| `withIndicator` | `boolean` | Animated yellow dot in top-right corner |
+| `buttonClassName` | `string` | Additional CSS classes |
+| `disabled` | `boolean` | Disable button |
+| `order` | `number` | Display order (lower = left) |
+
+### Auto-detection
+
+- **Red variant**: labels containing "delete", "cancel", "reject", etc.
+- **Green variant**: "confirm", "validate", "approve", etc.
+- **Icon**: inferred from label (confirm → CheckCircle, cancel → XCircle, etc.)
+
+### Example — Transaction approval
+
+```tsx
+<ShareablePreview
+  data={previewData}
+  title="Preview"
+  mode="user"
+  customView={MultipleTransactionsView}
+  defaultOpen
+  onOpenChange={(open) => !open && setShowPreview(false)}
+  actions={[
+    { label: "Confirm", onClick: () => { setIsOpen(true); setShowPreview(false); }, variant: "green", withIndicator: true },
+    { label: "Reject", onClick: () => { setIsRejectOpen(true); setShowPreview(false); }, variant: "red" },
+    { label: "Cancel", onClick: () => setShowPreview(false), variant: "blue", order: 0 },
+  ]}
+/>
+```
+
+## Custom views
+
+<!-- TODO: Replace with your own recording -->
+![Custom views with tabs](docs/assets/custom-views.gif)
+
+### Single view (`customView`)
+
+```tsx
+<ShareablePreview
+  data={data}
+  customView={TransactionView}
+  customViewProps={{
+    excludedKeys: ["id", "host_id"],
+    excludedNestedKeys: ["transaction_rule", "country"],
+    maxDepth: 7,
+  }}
+/>
+```
+
+### Multiple views with tabs (`customViews`)
 
-## Integration with i18n (react-i18next)
+```tsx
+import { ShareablePreview, UserView } from "@2londres/shareable-preview";
+
+<ShareablePreview
+  data={data}
+  customViews={[
+    {
+      id: "summary",
+      label: "Summary",
+      view: UserView,
+      viewProps: { includedKeys: ["amount", "currency", "reference"] },
+      actions: [
+        { label: "Validate", variant: "green", onClick: handleValidate },
+        { label: "Cancel", variant: "red", onClick: handleCancel },
+      ],
+    },
+    {
+      id: "full",
+      label: "Full details",
+      view: TransactionView,
+      viewProps: { excludedKeys: ["id"], maxDepth: 7 },
+      actions: [
+        { label: "Confirm", variant: "green", onClick: handleConfirm },
+        { label: "Reject", variant: "red", onClick: handleReject },
+      ],
+    },
+  ]}
+/>
+```
+
+Each tab can have its **own actions**. If a view has no `actions`, the global actions are used.
+
+## Field filtering
+
+<!-- TODO: Replace with your own recording -->
+![Field filtering](docs/assets/field-filtering.gif)
+
+Options passed via `customViewProps` or `viewProps` (in `customViews`). Compatible with `UserView`.
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `includedKeys` | `string[]` | **Whitelist**: only these top-level keys |
+| `excludedKeys` | `string[]` | **Blacklist**: exclude these keys |
+| `includedNestedKeys` | `string[]` | Whitelist for nested paths |
+| `excludedNestedKeys` | `string[]` | Blacklist for nested paths |
+| `maxDepth` | `number` | Maximum recursion depth |
+
+## Helper `createPreviewActions`
+
+```tsx
+import { createPreviewActions, ShareablePreview } from "@2londres/shareable-preview";
+
+const actions = createPreviewActions({
+  onConfirm: () => { setIsOpen(true); setShowPreview(false); },
+  onReject: () => { setIsRejectOpen(true); setShowPreview(false); },
+  onCancel: () => setShowPreview(false),
+  labels: { confirm: "Confirm", reject: "Reject", cancel: "Cancel" },
+  withIndicatorOnConfirm: true,
+});
+
+<ShareablePreview data={previewData} actions={actions} mode="user" />
+```
+
+## Internationalization
+
+The package uses `labels` and `onNotify` for i18n without depending on react-i18next:
+
+<!-- TODO: Replace with your own recording -->
+![Internationalization](docs/assets/i18n.gif)
+
+```tsx
+<ShareablePreview
+  data={data}
+  labels={{
+    shareablePreviewDefaultTitle: "Preview",
+    shareablePreviewOpen: "Open preview",
+  }}
+  onNotify={(type, key) => {
+    if (type === "success") toast.success(key);
+    else toast.error(key);
+  }}
+/>
+```
+
+### With react-i18next
 
 ```tsx
 import { useTranslation } from "react-i18next";
@@ -58,7 +226,6 @@ const keys = [
   "shareablePreviewCopySuccess",
   "shareablePreviewShareLinkCopied",
   "shareablePreviewClipboardError",
-  // ... other keys
 ];
 
 <ShareablePreview
@@ -70,3 +237,10 @@ const keys = [
   }}
 />
 ```
+
+## Publishing to npm
+
+```bash
+pnpm build
+npm publish --access public
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@2londres/shareable-preview",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React component for shareable data preview with debug/user modes",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -12,7 +12,9 @@
       "require": "./dist/index.js"
     }
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch"