@openlettermarketing/olc-react-sdk 0.0.39 → 0.0.40

package/README.md

@@ -1,30 +1,127 @@
-# React + TypeScript + Vite
+# OLC React SDK
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+The `OLC React SDK` SDK allows developers to integrate a customizable template builder into their applications. This SDK provides a range of options to manage templates, handle authentication, and customize the look and feel of the template builder.
 
-Currently, two official plugins are available:
+## Installation
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+To install the SDK, use npm:
 
-## Expanding the ESLint configuration
+```bash
+npm install @openlettermarketing/olc-react-sdk
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+import TemplateBuilder from '@openlettermarketing/olc-react-sdk';
 
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
+const templateBuilderProps: TemplateBuilderProps = {
+  container: document.getElementById('template-builder-container'),
+  secretKey: 'your-secret-key',
+  basicAuthUsername: 'your-username',
+  basicAuthPassword: 'your-password',
+  platformName: 'Your Platform Name',
+  createTemplateRoute: '/create-template',
+  templateBuilderRoute: '/edit-template',
+  olcTemplate: yourTemplateObject,
+  onReturnAndNavigate: () => {
+    // Define what happens when the user returns and navigates.
+  },
+  onGetOneTemplate: async (payload) => {
+    // Fetch a specific template.
+  },
+  onGetTemplates: async (payload) => {
+    // Fetch all templates.
+  },
+  onGetCustomFields: async () => {
+    // Fetch custom fields for the templates.
   },
+  onSubmit: async (payload) => {
+    // Handle the submission of a template.
+  },
+  styles: {
+    root: {
+      // Custom CSS properties for the root element.
+    },
+  },
+};
+
+TemplateBuilder(templateBuilderProps);
+```
+
+## TemplateBuilderProps Interface
+This interface defines the structure for the properties that you can pass to the TemplateBuilder SDK.
+
+## Properties
+
+#### container (HTMLElement | null):
+The container element where the template builder will be rendered. This must be an HTML element in your DOM.
+
+#### secretKey (string):
+The secret key used for authenticating requests.
+
+#### basicAuthUsername (string):
+The username for basic authentication.
+
+#### basicAuthPassword (string):
+The password for basic authentication.
+
+#### platformName (string | null, optional):
+The name of the platform where the template builder is integrated.
+
+#### createTemplateRoute (string | null, optional):
+The route used for creating new templates.
+
+#### templateBuilderRoute (string | null, optional):
+The route used for editing existing templates.
+
+#### olcTemplate (Record<string, any>, optional):
+An object representing the template to be edited or used as a base.
+
+#### onReturnAndNavigate (() => void, optional):
+A callback function triggered when the user returns and navigates away from the template builder.
+
+#### onGetOneTemplate ((payload: any) => Promise<any>, optional):
+A function to fetch a specific template. It receives a payload and returns a promise.
+
+#### onGetTemplates ((payload: any) => Promise<any>, optional):
+A function to fetch all templates. It receives a payload and returns a promise.
+
+#### onGetCustomFields (() => Promise<any>, optional):
+A function to fetch custom fields associated with the templates.
+
+#### onSubmit ((payload: any) => Promise<any>, optional):
+A function triggered upon submitting a template. It receives a payload and returns a promise.
+
+#### styles (object, optional):
+An object for custom CSS properties to style the template builder's root element.
+
+## Example Usage
+```bash
+import { useEffect } from "react";
+
+import TemplateBuilder from "@openlettermarketing/olc-react-sdk";
+import '@blueprintjs/core/lib/css/blueprint.css';
+
+function App() {
+  useEffect(() => {
+    TemplateBuilder({
+      container: document.getElementById('template-builder-container'),
+      secretKey: 'your-secret-key',
+      basicAuthUsername: 'your-username',
+      basicAuthPassword: 'your-password',
+      onSubmit: async (payload) => {
+        console.log('Template submitted:', payload);
+        // Add your submission logic here
+      },
+    });
+  }, []);
+
+  return (
+    <>
+      <div id="template-builder-container"></div>
+    </>
+  );
 }
+
+export default App;
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+## License
+This SDK is licensed under the MIT License