embroidery-qc-image 1.0.0 → 1.0.1

package/README.md

@@ -1,73 +1,85 @@
-# render-embroidery-config
+# embroidery-qc-image
 
-React component for rendering embroidery configurations on mockup images. This package allows you to display custom embroidered designs on product mockups with configurable text, icons, colors, and fonts.
+React component for rendering embroidery qc image. This package allows you to display custom embroidered designs on product mockups with configurable text, icons, colors, and fonts.
 
 ## Installation
 
 ```bash
-npm install render-embroidery-config
+npm install embroidery-qc-image
 ```
 
 ## Usage
 
 ```tsx
-import React from 'react';
-import { RenderEmbroidery } from 'render-embroidery-config';
-import 'render-embroidery-config/dist/index.css';
-
-const App = () => {
-  const config = {
-    image_url: "https://example.com/mockup.png",
-    sides: [
-      {
-        print_side: "Chest",
-        postitions: [
-          {
-            type: "TEXT",
-            text: "Brian ❤",
-            text_shape: "No Curved",
-            color: null,
-            font: "Times New Roman",
-            character_colors: ["Black (8)", "Red (1307)"],
-            change_character_to_heart: true,
-          },
-          {
-            type: "TEXT",
-            text: "EST. 2009",
-            text_shape: "No Curved",
-            color: "Red (1307)",
-            font: "Arial",
-            character_colors: null,
-            floral_pattern: "P01",
-            change_character_to_heart: null,
-          },
-          {
-            type: "ICON",
-            icon: "Heart 1",
-            layer_colors: ["White (9)", "Red (1307)"],
-          }
-        ]
-      },
-      {
-        print_side: "Sleeve",
-        postitions: [
-          {
-            type: "TEXT",
-            text: "Ayanna",
-            text_shape: "No Curved",
-            color: "Red (1307)",
-            font: "Times New Roman",
-            character_colors: null,
-            change_character_to_heart: true,
-          }
-        ]
-      }
-    ]
-  };
+import React from "react";
+import { EmbroideryQCImage } from "embroidery-qc-image";
+import "embroidery-qc-image/dist/index.css";
+
+// Example configuration
+const exampleConfig = {
+  image_url:
+    "https://i.etsystatic.com/34592503/r/il/5d3e59/7253371633/il_fullxfull.7253371633_kgqr.jpg",
+  sides: [
+    {
+      print_side: "Chest",
+      postitions: [
+        {
+          type: "TEXT" as const,
+          text: "Brian <3",
+          text_shape: "No Curved",
+          color: null,
+          font: "Brittany",
+          floral_pattern: null,
+          character_colors: ["Pink (1148)", "Lavender (1032)"],
+          change_character_to_heart: true,
+        },
+        {
+          type: "TEXT" as const,
+          text: "EST. 2009",
+          text_shape: "No Curved",
+          color: "Light Denim (1133)",
+          font: "Arial",
+          character_colors: null,
+          floral_pattern: "P61",
+          change_character_to_heart: null,
+        },
+        {
+          type: "ICON" as const,
+          icon: "Heart 1",
+          layer_colors: ["White (9)", "Red (1037)"],
+        },
+      ],
+    },
+    {
+      print_side: "Sleeve",
+      postitions: [
+        {
+          type: "TEXT" as const,
+          text: "Ayanna",
+          text_shape: "No Curved",
+          color: "Terra Cotta (1477)",
+          font: "Blackmate",
+          character_colors: null,
+          change_character_to_heart: true,
+        },
+        {
+          type: "TEXT" as const,
+          text: "Ryan",
+          text_shape: "No Curved",
+          color: "Terra Cotta (1477)",
+          font: "Millie",
+          character_colors: null,
+          change_character_to_heart: true,
+        },
+      ],
+    },
+  ],
+};
 
+const App: React.FC = () => {
   return (
-    <div>
-      <RenderEmbroidery config={config} />
+    <div style={{ padding: "20px", maxWidth: "800px", margin: "0 auto" }}>
+      <EmbroideryQCImage config={exampleConfig} />
     </div>
   );
 };
@@ -77,27 +89,27 @@ export default App;
 
 ## Props
 
-### RenderEmbroidery
+### EmbroideryQCImage
 
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
-| config | `EmbroideryConfig` | Yes | Configuration object containing embroidery details |
+| config | `EmbroideryQCConfig` | Yes | Configuration object containing embroidery details |
 | className | `string` | No | Additional CSS classes |
 | style | `React.CSSProperties` | No | Inline styles |
 
 ## Configuration Structure
 
-### EmbroideryConfig
+### EmbroideryQCConfig
 
 ```typescript
-interface EmbroideryConfig {
-  image_url?: string;        // Optional background image URL
+interface EmbroideryQCConfig {
+  image_url?: string;        // Optional mockup image URL (displayed at bottom-right)
   sides: Side[];             // Array of sides to render
 }
 
 interface Side {
   print_side: string;        // e.g., "Chest", "Sleeve"
-  postitions: Position[];     // Array of positions to render
+  postitions: Position[];     // Array of positions to render (note: "postitions" spelling)
 }
 
 type Position = TextPosition | IconPosition;
@@ -105,12 +117,12 @@ type Position = TextPosition | IconPosition;
 interface TextPosition {
   type: 'TEXT';
   text: string;                      // Text content
-  text_shape: string;                // "No Curved" or other shapes
-  color: string | null;              // Color for entire text
-  font: string;                      // Font name
-  character_colors: string[] | null; // Array of colors for alternating characters
-  change_character_to_heart: boolean | null; // Replace <3 with ❤
-  floral_pattern?: string; // Optional floral pattern
+  text_shape?: string | null;          // Optional: "No Curved" or other shapes
+  color?: string | null;               // Optional: Color for entire text
+  font?: string | null;                // Optional: Font name
+  character_colors?: string[] | null; // Optional: Array of colors for alternating characters
+  change_character_to_heart?: boolean | null; // Optional: Replace <3 with ❤
+  floral_pattern?: string | null;      // Optional: Floral pattern name
 }
 
 interface IconPosition {
@@ -122,23 +134,36 @@ interface IconPosition {
 
 ## Features
 
-- ✅ Render custom text on mockup images
+- ✅ Render custom text on mockup images with automatic text wrapping
 - ✅ Support for icon placement with multi-layer colors
 - ✅ Character-level color customization (alternating colors)
-- ✅ Font loading from CDN
+- ✅ Font loading from CDN with automatic fallback
 - ✅ Multiple print sides (Chest, Sleeve, etc.)
-- ✅ Floral pattern support
+- ✅ Floral pattern support with inline display
 - ✅ Heart emoji conversion (<3 → ❤)
-- ✅ Responsive canvas rendering
-- ✅ TypeScript support
+- ✅ Automatic font scaling to fit canvas (only scales down, never up)
+- ✅ Smart layout with uniform property grouping
+- ✅ Color swatches displayed inline with labels
+- ✅ Automatic word wrapping for long text
+- ✅ Fixed canvas size (4200x4800)
+- ✅ TypeScript support with full type definitions
 
 ## Supported Colors
 
-The component automatically maps color names to hex values:
+The component automatically maps color names to hex values for text rendering:
 - `White (9)`, `Black (8)`, `Red (9)`, `Red (1307)`, `Blue (9)`, `Green (9)`
 - `Forest Green (1397)`, `Brown (9)`, `Cream (9)`, `Beige (9)`
 - `Navy (9)`, `Maroon (9)` and more...
 
+## Thread Colors (Màu chỉ)
+
+Thread color swatches are automatically loaded and displayed inline with color labels:
+```
+https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/thread-colors/{ColorName}.png
+```
+
+The swatches are displayed next to "Màu chỉ:" labels, showing visual representation of the thread colors used in the embroidery design.
+
 ## Font Loading
 
 Fonts are automatically loaded from:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "embroidery-qc-image",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React component for rendering embroidery QC images",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -53,4 +53,4 @@
     "vite": "^5.0.8"
   },
   "dependencies": {}
-}
+}