embroidery-qc-image 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,175 @@
+# render-embroidery-config
+
+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.
+
+## Installation
+
+```bash
+npm install render-embroidery-config
+```
+
+## 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,
+          }
+        ]
+      }
+    ]
+  };
+
+  return (
+    <div>
+      <RenderEmbroidery config={config} />
+    </div>
+  );
+};
+
+export default App;
+```
+
+## Props
+
+### RenderEmbroidery
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| config | `EmbroideryConfig` | Yes | Configuration object containing embroidery details |
+| className | `string` | No | Additional CSS classes |
+| style | `React.CSSProperties` | No | Inline styles |
+
+## Configuration Structure
+
+### EmbroideryConfig
+
+```typescript
+interface EmbroideryConfig {
+  image_url?: string;        // Optional background image URL
+  sides: Side[];             // Array of sides to render
+}
+
+interface Side {
+  print_side: string;        // e.g., "Chest", "Sleeve"
+  postitions: Position[];     // Array of positions to render
+}
+
+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
+}
+
+interface IconPosition {
+  type: 'ICON';
+  icon: string;          // Icon name (e.g., "Heart 1")
+  layer_colors: string[]; // Array of colors for icon layers
+}
+```
+
+## Features
+
+- ✅ Render custom text on mockup images
+- ✅ Support for icon placement with multi-layer colors
+- ✅ Character-level color customization (alternating colors)
+- ✅ Font loading from CDN
+- ✅ Multiple print sides (Chest, Sleeve, etc.)
+- ✅ Floral pattern support
+- ✅ Heart emoji conversion (<3 → ❤)
+- ✅ Responsive canvas rendering
+- ✅ TypeScript support
+
+## Supported Colors
+
+The component automatically maps color names to hex values:
+- `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...
+
+## Font Loading
+
+Fonts are automatically loaded from:
+```
+https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/fonts/{FontName}.woff2
+```
+
+Supported format: WOFF2
+
+## Icons
+
+Icons are loaded from:
+```
+https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/icons/{IconName}.png
+```
+
+## Floral Patterns
+
+Floral patterns are loaded from:
+```
+https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/florals/{PatternName}.png
+```
+
+## License
+
+MIT
+
+## Contributing
+
+Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
+
+## Support
+
+For issues and questions, please open an issue on GitHub.

package/dist/components/EmbroideryQCImage.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { EmbroideryQCImageProps } from "../types";
+import "./EmbroideryQCImage.css";
+declare const EmbroideryQCImage: React.FC<EmbroideryQCImageProps>;
+export default EmbroideryQCImage;
+//# sourceMappingURL=EmbroideryQCImage.d.ts.map

package/dist/components/EmbroideryQCImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbroideryQCImage.d.ts","sourceRoot":"","sources":["../../src/components/EmbroideryQCImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,sBAAsB,EAAY,MAAM,UAAU,CAAC;AAC5D,OAAO,yBAAyB,CAAC;AA2EjC,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA08BvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/index.css

@@ -0,0 +1,14 @@
+.render-embroidery {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+}
+
+.render-embroidery-canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+  image-rendering: high-quality;
+  background: transparent;
+}

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import React$1 from 'react';
+
+interface TextPosition {
+    type: 'TEXT';
+    text: string;
+    text_shape?: string | null;
+    color?: string | null;
+    font?: string | null;
+    character_colors?: string[] | null;
+    change_character_to_heart?: boolean | null;
+    floral_pattern?: string | null;
+}
+interface IconPosition {
+    type: 'ICON';
+    icon: string;
+    layer_colors: string[];
+}
+type Position = TextPosition | IconPosition;
+interface Side {
+    print_side: string;
+    postitions: Position[];
+}
+interface EmbroideryQCConfig {
+    image_url?: string;
+    sides: Side[];
+}
+interface EmbroideryQCImageProps {
+    config: EmbroideryQCConfig;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+declare const EmbroideryQCImage: React$1.FC<EmbroideryQCImageProps>;
+
+export { EmbroideryQCImage };
+export type { EmbroideryQCConfig, EmbroideryQCImageProps, IconPosition, Position, Side, TextPosition };

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,kBAAkB,EAClB,sBAAsB,EACvB,MAAM,SAAS,CAAC"}

package/dist/index.esm.css

@@ -0,0 +1,14 @@
+.render-embroidery {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+}
+
+.render-embroidery-canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+  image-rendering: high-quality;
+  background: transparent;
+}