labellife-design-tool 0.6.0 → 0.7.0

package/README.md

@@ -13,6 +13,7 @@ Professional canvas editor built with React, TypeScript, and Konva.js. A powerfu
 - 📤 **Export Options** - Export to PNG, JPG, or JSON
 - 📥 **Template Import** - Import JSON templates with user input collection
 - 🌐 **i18n Support** - Internationalization support (English, Dutch)
+- 🧩 **Customizable UI** - Fully customizable navbar with support for custom sections
 - ⚙️ **Configurable** - Customize features, panels, and behavior
 
 ## Installation
@@ -91,27 +92,6 @@ function MyEditor() {
 }
 ```
 
-## Development
-
-To run the development server:
-
-```bash
-bun install
-bun dev
-```
-
-To build the library:
-
-```bash
-bun run build:lib:all
-```
-
-To build the app:
-
-```bash
-bun run build:app
-```
-
 ### Canvas to Blob Export
 
 The library provides a flexible `canvasToBlob` function that allows converting the canvas to a Blob for various use cases:
@@ -159,6 +139,68 @@ The `canvasToBlob` function parameters:
   - `quality`: Quality for JPG format (0-1)
   - `pixelRatio`: Resolution multiplier (default: 2)
 
+### Navbar Customization
+
+You can fully customize the navbar by configuring the `navbar` property in the config object:
+
+```tsx
+import { CanvasEditor } from 'labellife-design-tool';
+
+function App() {
+  return (
+    <CanvasEditor
+      name="My Design Tool"
+      config={{
+        // Other configuration options...
+        navbar: {
+          // Control visibility of default sections
+          showAppName: true, // Show/hide the app name on the left
+          showHistoryControls: true, // Show/hide undo/redo controls
+          showZoomControls: true, // Show/hide zoom controls
+          
+          // Override default sections
+          defaultSections: {
+            appName: {
+              label: "My Custom Tool Name", // Change the default app name
+            }
+          },
+          
+          // Add custom sections to the navbar
+          customSections: [
+            {
+              id: "saveButton",
+              type: "custom",
+              position: "right", // 'left', 'center', or 'right'
+              label: "Save",
+              icon: "💾", // Optional icon
+              onClick: () => saveProject(),
+              order: 5 // Controls the ordering of sections (lower numbers come first)
+            },
+            {
+              id: "helpLink",
+              type: "custom",
+              position: "right",
+              label: "Help",
+              icon: "❓",
+              onClick: () => showHelpModal(),
+              order: 40
+            },
+            // For complex custom sections, you can provide a React component
+            {
+              id: "customDropdown",
+              type: "custom",
+              position: "right",
+              content: <CustomDropdownComponent />,
+              order: 50
+            }
+          ]
+        }
+      }}
+    />
+  );
+}
+```
+
 ## Project Structure
 
 - `src/lib/index.ts` - Library entry point (npm package)

package/dist/lib/CanvasEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAmFxE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CA68B7D,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAmFxE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CA88B7D,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/lib/components/Header.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ActivePanelId } from '../types';
+import { NavbarConfig } from '../types/Config';
 export interface HeaderProps {
     name?: string;
     zoom: number;
@@ -11,6 +12,7 @@ export interface HeaderProps {
     onZoomOut: () => void;
     onZoomReset: () => void;
     onSetActivePanel: (panel: ActivePanelId | "export") => void;
+    navbarConfig?: NavbarConfig;
 }
 export declare const Header: React.FC<HeaderProps>;
 export default Header;

package/dist/lib/components/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,KAAK,IAAI,CAAC;CAC7D;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA0DxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,YAAY,EAAiB,MAAM,iBAAiB,CAAC;AAE9D,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgKxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/lib/components/header/AppName.d.ts

@@ -1,4 +1,7 @@
 import React from "react";
-declare const AppName: React.FC;
+interface AppNameProps {
+    customName?: string;
+}
+declare const AppName: React.FC<AppNameProps>;
 export default AppName;
 //# sourceMappingURL=AppName.d.ts.map

package/dist/lib/components/header/AppName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppName.d.ts","sourceRoot":"","sources":["../../../../src/components/header/AppName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAGpB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"AppName.d.ts","sourceRoot":"","sources":["../../../../src/components/header/AppName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,YAAY;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAEnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/lib/index.css

@@ -260,6 +260,9 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }

package/dist/lib/index.js

@@ -892,19 +892,17 @@ function getUnsplashAccessKey() {
 }
 
 // src/components/header/AppName.tsx
-import { useTranslation } from "react-i18next";
 import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
-var AppName = () => {
-  const { t } = useTranslation();
+var AppName = ({ customName }) => {
   return /* @__PURE__ */ jsxDEV4("h1", {
     className: "text-white font-bold text-lg",
-    children: t("Editor.app_name")
+    children: customName || "Label Life"
   }, undefined, false, undefined, this);
 };
 var AppName_default = AppName;
 
 // src/components/header/HistoryControls.tsx
-import { useTranslation as useTranslation2 } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { Undo, Redo } from "lucide-react";
 import { jsxDEV as jsxDEV5, Fragment as Fragment4 } from "react/jsx-dev-runtime";
 var HistoryControls = ({
@@ -913,7 +911,7 @@ var HistoryControls = ({
   onUndo,
   onRedo
 }) => {
-  const { t } = useTranslation2();
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsxDEV5(Fragment4, {
     children: [
       /* @__PURE__ */ jsxDEV5("button", {
@@ -940,7 +938,7 @@ var HistoryControls = ({
 var HistoryControls_default = HistoryControls;
 
 // src/components/header/ZoomControls.tsx
-import { useTranslation as useTranslation3 } from "react-i18next";
+import { useTranslation as useTranslation2 } from "react-i18next";
 import { ZoomIn, ZoomOut, Maximize2 } from "lucide-react";
 import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
 var ZoomControls = ({
@@ -949,7 +947,7 @@ var ZoomControls = ({
   onZoomOut,
   onZoomReset
 }) => {
-  const { t } = useTranslation3();
+  const { t } = useTranslation2();
   return /* @__PURE__ */ jsxDEV6("div", {
     className: "flex items-center space-x-1 bg-gray-700 rounded px-2 py-1",
     children: [
@@ -1000,47 +998,124 @@ var Header = ({
   onRedo,
   onZoomIn,
   onZoomOut,
-  onZoomReset
+  onZoomReset,
+  navbarConfig,
+  onSetActivePanel
 }) => {
   const isLightTheme = name?.includes("(Light Theme)");
   const headerStyle = {
     backgroundColor: isLightTheme ? "#f8fafc" : "#1f2937",
     borderBottomColor: isLightTheme ? "#cbd5e1" : "#374151"
   };
+  const defaultSections = [
+    {
+      id: "appName",
+      type: "default",
+      position: "left",
+      visible: navbarConfig?.showAppName !== false,
+      content: /* @__PURE__ */ jsxDEV7(AppName_default, {
+        customName: navbarConfig?.defaultSections?.appName?.label
+      }, undefined, false, undefined, this),
+      order: 10
+    },
+    {
+      id: "title",
+      type: "default",
+      position: "center",
+      visible: !!name,
+      content: /* @__PURE__ */ jsxDEV7("div", {
+        className: "flex-1 text-center text-lg font-semibold",
+        style: { color: isLightTheme ? "#0f172a" : "#ffffff" },
+        children: name
+      }, undefined, false, undefined, this),
+      order: 10
+    },
+    {
+      id: "historyControls",
+      type: "default",
+      position: "right",
+      visible: navbarConfig?.showHistoryControls !== false,
+      content: /* @__PURE__ */ jsxDEV7(HistoryControls_default, {
+        historyIndex,
+        historyLength,
+        onUndo,
+        onRedo
+      }, undefined, false, undefined, this),
+      order: 10
+    },
+    {
+      id: "divider",
+      type: "default",
+      position: "right",
+      visible: navbarConfig?.showHistoryControls !== false && navbarConfig?.showZoomControls !== false,
+      content: /* @__PURE__ */ jsxDEV7("div", {
+        className: "border-l mx-2 h-6",
+        style: { borderLeftColor: isLightTheme ? "#cbd5e1" : "#374151" }
+      }, undefined, false, undefined, this),
+      order: 20
+    },
+    {
+      id: "zoomControls",
+      type: "default",
+      position: "right",
+      visible: navbarConfig?.showZoomControls !== false,
+      content: /* @__PURE__ */ jsxDEV7(ZoomControls_default, {
+        zoom,
+        onZoomIn,
+        onZoomOut,
+        onZoomReset
+      }, undefined, false, undefined, this),
+      order: 30
+    }
+  ];
+  const mergedSections = [...defaultSections];
+  if (navbarConfig?.customSections && navbarConfig.customSections.length > 0) {
+    mergedSections.push(...navbarConfig.customSections);
+  }
+  const leftSections = mergedSections.filter((section) => section.position === "left" && section.visible !== false).sort((a, b) => (a.order || 0) - (b.order || 0));
+  const centerSections = mergedSections.filter((section) => section.position === "center" && section.visible !== false).sort((a, b) => (a.order || 0) - (b.order || 0));
+  const rightSections = mergedSections.filter((section) => section.position === "right" && section.visible !== false).sort((a, b) => (a.order || 0) - (b.order || 0));
+  const renderSection = (section) => {
+    if (typeof section.content === "function") {
+      return section.content();
+    }
+    if (section.content) {
+      return section.content;
+    }
+    return /* @__PURE__ */ jsxDEV7("button", {
+      onClick: section.onClick,
+      className: "text-gray-400 hover:text-white p-2",
+      children: [
+        section.icon && /* @__PURE__ */ jsxDEV7("span", {
+          className: "mr-1",
+          children: section.icon
+        }, undefined, false, undefined, this),
+        section.label
+      ]
+    }, section.id, true, undefined, this);
+  };
   return /* @__PURE__ */ jsxDEV7("div", {
     className: "px-4 py-2 flex items-center justify-between",
     style: headerStyle,
     children: [
       /* @__PURE__ */ jsxDEV7("div", {
         className: "flex items-center space-x-4",
-        children: /* @__PURE__ */ jsxDEV7(AppName_default, {}, undefined, false, undefined, this)
+        children: leftSections.map((section) => /* @__PURE__ */ jsxDEV7("div", {
+          children: renderSection(section)
+        }, section.id, false, undefined, this))
       }, undefined, false, undefined, this),
-      name && /* @__PURE__ */ jsxDEV7("div", {
-        className: "flex-1 text-center text-lg font-semibold",
-        style: { color: isLightTheme ? "#0f172a" : "#ffffff" },
-        children: name
+      /* @__PURE__ */ jsxDEV7("div", {
+        className: "flex-1 flex justify-center",
+        children: centerSections.map((section) => /* @__PURE__ */ jsxDEV7("div", {
+          children: renderSection(section)
+        }, section.id, false, undefined, this))
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV7("div", {
         className: "flex items-center space-x-2",
-        children: [
-          /* @__PURE__ */ jsxDEV7(HistoryControls_default, {
-            historyIndex,
-            historyLength,
-            onUndo,
-            onRedo
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV7("div", {
-            className: "border-l mx-2 h-6",
-            style: { borderLeftColor: isLightTheme ? "#cbd5e1" : "#374151" }
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV7(ZoomControls_default, {
-            zoom,
-            onZoomIn,
-            onZoomOut,
-            onZoomReset
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
+        children: rightSections.map((section) => /* @__PURE__ */ jsxDEV7("div", {
+          children: renderSection(section)
+        }, section.id, false, undefined, this))
+      }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 };
@@ -4072,7 +4147,8 @@ var CanvasEditor = ({
         onZoomIn: () => setZoom(Math.min(3, zoom + 0.1)),
         onZoomOut: () => setZoom(Math.max(0.1, zoom - 0.1)),
         onZoomReset: () => setZoom(1),
-        onSetActivePanel: setActivePanelId
+        onSetActivePanel: setActivePanelId,
+        navbarConfig: config?.navbar
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV18("div", {
         className: "flex-1 flex overflow-hidden",

package/dist/lib/types/Config.d.ts

@@ -1,3 +1,23 @@
+export interface NavbarSection {
+    id: string;
+    type: 'default' | 'custom';
+    position: 'left' | 'center' | 'right';
+    visible?: boolean;
+    content?: React.ReactNode | (() => React.ReactNode);
+    label?: string;
+    icon?: string;
+    onClick?: () => void;
+    order?: number;
+}
+export interface NavbarConfig {
+    showAppName?: boolean;
+    showHistoryControls?: boolean;
+    showZoomControls?: boolean;
+    customSections?: NavbarSection[];
+    defaultSections?: {
+        [key: string]: Partial<NavbarSection>;
+    };
+}
 export interface Config {
     export?: {
         png?: boolean;
@@ -15,5 +35,6 @@ export interface Config {
         type: "text" | "image";
         variable: string;
     }[];
+    navbar?: NavbarConfig;
 }
 //# sourceMappingURL=Config.d.ts.map

package/dist/lib/types/Config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Config.d.ts","sourceRoot":"","sources":["../../../src/types/Config.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACrB,MAAM,CAAC,EAAE;QACP,GAAG,CAAC,EAAE,OAAO,CAAC;QACd,GAAG,CAAC,EAAE,OAAO,CAAC;QACd,IAAI,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;QACvB,QAAQ,EAAE,MAAM,CAAC;KAClB,EAAE,CAAC;CACL"}
+{"version":3,"file":"Config.d.ts","sourceRoot":"","sources":["../../../src/types/Config.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC3B,QAAQ,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IAEjC,eAAe,CAAC,EAAE;QAChB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;KACvC,CAAC;CACH;AAED,MAAM,WAAW,MAAM;IACrB,MAAM,CAAC,EAAE;QACP,GAAG,CAAC,EAAE,OAAO,CAAC;QACd,GAAG,CAAC,EAAE,OAAO,CAAC;QACd,IAAI,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;QACvB,QAAQ,EAAE,MAAM,CAAC;KAClB,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "labellife-design-tool",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Professional canvas editor built with React, TypeScript, and Konva",
   "main": "./dist/lib/index.js",
   "module": "./dist/lib/index.js",