@arbisoft/react-design-tool 1.0.1

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) [2025] [arbisoft]
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,236 @@
+
+# 🎨 React Design Tool (by @arbisoft)
+
+A React component for creating and editing designs with templates, images, and customizable elements.  
+A JavaScript framework for building your own Canva-like design editors.
+
+With this tool, you can:
+
+- Add and manipulate **shapes**, **images**, **QR codes**, and **text**
+- Load and switch between **multiple templates**
+- **Customize** and **edit elements** on the canvas
+- **Save** the final design data and image output
+
+Perfect for integrating into applications that require user-driven visual content creation.
+
+## 📦 Installation
+
+```bash
+npm install @arbisoft/react-design-tool
+```
+OR
+```bash
+yarn add @arbisoft/react-design-tool
+
+```
+#### Required Dependencies: 
+```bash
+npm install konva prop-types qrcode react-konva react-konva-utils styled-components
+```
+
+OR
+```bash
+yarn add konva prop-types qrcode react-konva react-konva-utils styled-components
+
+```
+## 🚀 Quick Start
+
+```jsx
+import React, { useRef } from 'react';
+import { Studio } from '@arbisoft/react-design-tool';
+
+function MyComponent() {
+  const studioRef = useRef(null);
+
+  return (
+    <Studio
+      ref={studioRef}
+      defaultTemplatesList={[]}
+      customTemplatesList={[]}
+      defaultImages={[]}
+      customImages={[]}
+      uploadImageCallBack={async (file) => {
+        // Upload logic here
+        return 'url_of_uploaded_image';
+      }}
+      elementsList={[]}
+      qrLink={'http://example.com'}
+      disableWhiteLabel={true}
+      title={'New Title'}
+      styleProps={{
+          primaryColor: 'red',
+      }}
+      defaultText={'Your Default Text'}
+      onSave={async (data) => {
+        console.log('Saved data:', data);
+      }}
+      saveButtonText={'Save Progress'}
+      locale={'fr'}
+    />
+  );
+}
+
+export default MyComponent;
+```
+## Props Configuration
+
+#### 1. `defaultTemplatesList` (Array of templates)
+Pre-loaded default templates provided by the system.  
+**Format:** Array of template objects  
+**Example:**
+```js
+defaultTemplatesList={[
+  { 
+    title: 'Business Card', 
+    image: 'url', 
+    elements: [...] 
+  }
+]}
+```
+#### 2. `customTemplatesList` (Array of templates)  
+**Format:** Array of template objects  
+**Example:**
+```js
+customTemplatesList={[
+  { 
+    title: 'Custom template', 
+    image: 'url', 
+    elements: [...] 
+  }
+]}
+```
+#### 3. `defaultImages` (Array of URLs)  
+System-provided stock images.
+
+**Format:** Array of image urls  
+**Example:**
+```js
+defaultImages={[
+  "https://example.com/stock1.jpg",
+  "https://example.com/stock2.png"
+]}
+```
+#### 4. `customImages` (Array of URLs)  
+User-uploaded or organization-specific images.
+
+**Format:** Array of image urls  
+**Example:**
+```js
+customImages={[
+  "https://example.com/stock1.jpg",
+  "https://example.com/stock2.png"
+]}
+```
+#### 5. `uploadImageCallBack` (Async function)  
+User-defined function to handle file uploads and return a hosted URL.  
+By default, the component handles images as base64, which may not be ideal for storage.  
+To avoid large payloads and for better performance, it's recommended to upload the file and return the hosted URL.
+
+**Example:**
+```js
+uploadImageCallBack={async (file) => {
+  // Upload logic here
+  return 'https://yourcdn.com/uploaded-image.png';
+}}
+```
+#### 6. `elementsList` (Array of elements)  
+An array of design elements to be rendered on the canvas by default.  
+If you pass an `elementsList`, the Studio will initialize with these elements already placed on the canvas.
+
+**Example:**
+```js
+elementsList={[
+  {...},{...},{...}
+]}
+```
+#### 7. `qrLink` (URL String)  
+A URL string used to generate a QR code element on the canvas.  
+When scanned, the QR will redirect to this link.
+
+**Example:**
+```js
+qrLink={'https://somelink.com'}
+```
+#### 8. `disableWhiteLabel` (Boolean)  
+Boolean flag to hide the white-label (branding) section from the sidebar.  
+Set to `true` if you want to remove branding options from the sidebar.
+
+**Example:**
+```js
+disableWhiteLabel={true}
+```
+#### 9. `title` (String)  
+Sets the title for the current template being edited in the Studio.
+
+**Example:**
+```js
+title={'New Title'}
+```
+#### 10. `styleProps` (Object)  
+Use this to customize the styling of the Studio, including elements like the sidebar pills.  
+For example, by providing a `primaryColor`, you can change the color of the sidebar pills to match your branding color.
+
+**Example:**
+```js
+styleProps={{
+  primaryColor: 'red',
+}}
+```
+#### 11. `defaultText` (String)  
+Overrides the predefined text content in the text section of the Studio.  
+There is a list of predefined texts that can be added to the canvas by clicking on them, each with predefined fonts and styles.  
+By providing this prop, you can change the default content for these texts.
+
+**Example:**
+```js
+defaultText={'Your Default Text'}
+```
+#### 12. `onSave` (Async function)  
+By providing this function, a "Save" Call-to-Action (CTA) button will appear in the Studio.  
+When the user clicks on this button, the function will be executed, and you will receive the current design data.  
+This data includes an array of elements and the image of the canvas. You can then use this data as needed, such as storing the elements and image.
+
+**Example:**
+```js
+onSave={async (data) => {
+  console.log('Saved data:', data); 
+  // { elements: [array of elements],image:canvas image }
+  // You can store this data or perform any actions you'd like
+}}
+```
+#### 13. `saveButtonText` (String)  
+Overrides the text for the Call-to-Action (CTA) button that appears in the Studio.
+
+**Example:**
+```js
+saveButtonText={'Save Progress'}
+```
+#### 14. `locale` (String)  
+Sets the locale for the Studio to provide multilingual support.  
+You can set the `locale` prop to one of the supported languages: `"fr"`, `"en"`, `"ru"`, `"pl"`, `"de"`, `"es"`, or `"it"`.  
+The default locale is `"en"`.
+
+**Example:**
+```js
+locale={'fr'}
+```
+#### 15. `ref` (reference)  
+A reference to the `Studio` component.  
+```js
+const studioRef = useRef();
+
+<Studio
+  ref={studioRef}
+  ...
+/>  
+```
+You can use this reference to call the `onSave` function whenever you want, and retrieve the updated elements and image of the canvas, along with any other data.
+
+**Example:**
+```js
+const handleSave = async () => {
+  const data = await studioRef?.current?.onSave();
+  console.log('Saved data:', data); 
+  // { elements: [array of elements], image: canvas image }
+};
+```