@bolttech/template-editor 0.1.8 → 0.1.9

package/README.md

@@ -121,15 +121,93 @@ function App() {
 
 ### Props
 
-The `TemplateEditor` component accepts one optional prop:
+| Prop           | Type                      | Default  | Description                                                                            |
+| -------------- | ------------------------- | -------- | -------------------------------------------------------------------------------------- |
+| `templateId`   | `string`                  | —        | ID of the template to load from the templating service                                 |
+| `sdk`          | `TemplatingSdkConfig`     | —        | SDK configuration (baseUrl, workspace) to connect to the templating service            |
+| `placeholders` | `PlaceholderData`         | `{}`     | Unified data structure supporting primitives, schemas, and nested values               |
+| `auth`         | `AuthConfig`              | —        | Authentication configuration (bearer token or function)                                |
+| `goBackUrl`    | `string`                  | —        | URL to navigate to when the user clicks "Go Back". Defaults to `window.history.back()` |
+| `storageKey`   | `string`                  | —        | Key used for local storage (e.g. for editor state persistence)                         |
+| `height`       | `CSSProperties['height']` | `'100%'` | Height of the editor container                                                         |
+| `width`        | `CSSProperties['width']`  | `'100%'` | Width of the editor container                                                          |
+
+### With SDK and Template
 
-| Prop           | Type              | Description                                                              |
-| -------------- | ----------------- | ------------------------------------------------------------------------ |
-| `placeholders` | `PlaceholderData` | Unified data structure supporting primitives, schemas, and nested values |
+```tsx
+import { TemplateEditor } from '@bolttech/template-editor';
+
+function App() {
+  return (
+    <div style={{ height: '100vh' }}>
+      <TemplateEditor
+        templateId="507f1f77bcf86cd799439011"
+        sdk={{
+          baseUrl: 'https://templating-service.example.com',
+          workspace: 'my-workspace',
+        }}
+      />
+    </div>
+  );
+}
+```
+
+### With Authentication
 
-### Example with Mixed Values
+The editor supports bearer token authentication to communicate with a protected templating service:
 
 ```tsx
+import { TemplateEditor } from '@bolttech/template-editor';
+
+// Static bearer token
+function App() {
+  return (
+    <TemplateEditor
+      templateId="507f1f77bcf86cd799439011"
+      sdk={{ baseUrl: 'https://templating-service.example.com', workspace: 'my-workspace' }}
+      auth={{ token: 'your-bearer-token' }}
+    />
+  );
+}
+
+// Dynamic token (e.g. refreshed via OAuth2)
+function App() {
+  return (
+    <TemplateEditor
+      templateId="507f1f77bcf86cd799439011"
+      sdk={{ baseUrl: 'https://templating-service.example.com', workspace: 'my-workspace' }}
+      auth={{ token: async () => await getAccessToken() }}
+    />
+  );
+}
+```
+
+### With Go Back Navigation
+
+```tsx
+import { TemplateEditor } from '@bolttech/template-editor';
+
+function App() {
+  return (
+    <TemplateEditor
+      templateId="507f1f77bcf86cd799439011"
+      sdk={{
+        baseUrl: 'https://templating-service.example.com',
+        workspace: 'my-workspace',
+      }}
+      goBackUrl="/templates"
+    />
+  );
+}
+```
+
+> **Note**: If `goBackUrl` is not provided, clicking "Go Back" calls `window.history.back()`. If there are unsaved changes, the editor will prompt the user before navigating.
+
+### With Variables
+
+```tsx
+import { PlaceholderData, TemplateEditor } from '@bolttech/template-editor';
+
 const placeholders: PlaceholderData = {
   // Primitive values (auto-converted to schemas in the UI)
   userName: 'John Doe',
@@ -153,7 +231,13 @@ const placeholders: PlaceholderData = {
   },
 };
 
-<TemplateEditor placeholders={placeholders} />;
+function App() {
+  return (
+    <div style={{ height: '100vh' }}>
+      <TemplateEditor placeholders={placeholders} />
+    </div>
+  );
+}
 ```
 
 📋 **Need more details?** See [complete API reference](docs/api/types.md) for full TypeScript definitions.