@openlettermarketing/olc-react-sdk 0.0.8 → 0.0.10

package/src/utils/templateRestrictedArea/triFold.ts

@@ -0,0 +1,434 @@
+import { DPI } from "../constants";
+
+// Define the type for the element being added
+interface Element {
+    id: string;
+    type: string;
+    name: string;
+    opacity: number;
+    visible: boolean;
+    selectable: boolean;
+    removable: boolean;
+    alwaysOnTop: boolean;
+    showInExport: boolean;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+    animations?: any[];
+    blurEnabled?: boolean;
+    blurRadius?: number;
+    brightnessEnabled?: boolean;
+    brightness?: number;
+    sepiaEnabled?: boolean;
+    grayscaleEnabled?: boolean;
+    shadowEnabled?: boolean;
+    shadowBlur?: number;
+    shadowOffsetX?: number;
+    shadowOffsetY?: number;
+    shadowColor?: string;
+    shadowOpacity?: number;
+    draggable?: boolean;
+    resizable?: boolean;
+    contentEditable: boolean;
+    styleEditable: boolean;
+    subType?: string;
+    fill?: string;
+    dash?: any[];
+    strokeWidth?: number;
+    stroke?: string;
+    cornerRadius?: number;
+    text?: string;
+    placeholder?: string;
+    fontSize?: number;
+    fontFamily?: string;
+    fontStyle?: string;
+    fontWeight?: string;
+    textDecoration?: string;
+    align?: string;
+    verticalAlign?: string;
+    lineHeight?: number;
+    letterSpacing?: number;
+    backgroundEnabled?: boolean;
+    backgroundColor?: string;
+    backgroundOpacity?: number;
+    backgroundCornerRadius?: number;
+    backgroundPadding?: number;
+    src?: string;
+    cropX?: number;
+    cropY?: number;
+    cropWidth?: number;
+    cropHeight?: number;
+    flipX?: boolean;
+    flipY?: boolean;
+    clipSrc?: string;
+    borderSize?: number;
+    keepRatio?: boolean;
+}
+
+// Define the type for the page
+interface Page {
+    addElement: (element: Element) => void;
+}
+
+// Define the type for the store
+interface Store {
+    width: number;
+    height: number;
+    pages: Page[];
+    history: {
+        clear: () => void;
+    };
+}
+
+
+export const addRestrictedAreaToTriFold = (store: Store, size: [number, number], barcodeSrc: string): void => {
+    const page = store.pages[0];
+
+    const elements: Element[] = [
+        {
+            id: 'figure-1',
+            type: 'figure',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: store.width - size[0] * DPI - 0.15 * DPI,
+            y: store.height - size[1] * DPI - 0.125 * DPI - 4 * DPI,
+            width: size[0] * DPI,
+            height: size[1] * DPI,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            subType: 'rect',
+            fill: 'white',
+            dash: [],
+            strokeWidth: 0,
+            stroke: '#0c0c0c',
+            cornerRadius: 0,
+        },
+        {
+            id: 'return-address',
+            type: 'text',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: store.width - size[0] * DPI - 0.15 * DPI + 10,
+            y: store.height - size[1] * DPI - 0.125 * DPI + 20 - 4 * DPI,
+            width: 240,
+            height: 20,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            text: 'YOUR RETURN ADDRESS \nWILL AUTOMATICALLY \nBE PRINTED IN THIS \nPOSITION',
+            placeholder: '',
+            fontSize: 12,
+            fontFamily: 'Roboto',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            textDecoration: '',
+            fill: 'black',
+            align: 'start',
+            verticalAlign: 'top',
+            strokeWidth: 0,
+            stroke: 'black',
+            lineHeight: 1.2,
+            letterSpacing: 0,
+            backgroundEnabled: false,
+            backgroundColor: '#7ED321',
+            backgroundOpacity: 1,
+            backgroundCornerRadius: 0.5,
+            backgroundPadding: 0.5,
+        },
+        {
+            id: 'indicia',
+            type: 'text',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: store.width - 111 - 0.15 * DPI,
+            y: store.height - size[1] * DPI + 10 - 4 * DPI,
+            width: 111,
+            height: 40,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            text: `POSTAGE\nINDICIA`,
+            placeholder: '',
+            fontSize: 12,
+            fontFamily: 'Roboto',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            textDecoration: '',
+            fill: 'black',
+            align: 'center',
+            verticalAlign: 'top',
+            strokeWidth: 0,
+            stroke: 'black',
+            lineHeight: 1.2,
+            letterSpacing: 0,
+            backgroundEnabled: false,
+            backgroundColor: '#7ED321',
+            backgroundOpacity: 1,
+            backgroundCornerRadius: 0.5,
+            backgroundPadding: 0.5,
+        },
+        {
+            id: 'barcode',
+            type: 'image',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            y: store.height - 12 - size[1] * DPI + 110 - 4 * DPI,
+            x: store.width - size[0] * DPI - 0.15 * DPI + 40,
+            width: size[0] * DPI - 80,
+            height: 12,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            src: barcodeSrc,
+            cropX: 0,
+            cropY: 0,
+            cropWidth: 1,
+            cropHeight: 1,
+            cornerRadius: 0,
+            flipX: false,
+            flipY: false,
+            clipSrc: '',
+            borderSize: 0,
+            keepRatio: false,
+        },
+        {
+            id: 'recipient-address',
+            type: 'text',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: store.width - size[0] * DPI - 0.15 * DPI + 10,
+            y: store.height - size[1] * DPI - 0.125 * DPI + 150 - 4 * DPI,
+            width: 240,
+            height: 20,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            text: 'RECIPIENT ADDRESS \nWILL AUTOMATICALLY \nBE PRINTED IN THIS \nPOSITION',
+            placeholder: '',
+            fontSize: 12,
+            fontFamily: 'Roboto',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            textDecoration: '',
+            fill: 'black',
+            align: 'start',
+            verticalAlign: 'top',
+            strokeWidth: 0,
+            stroke: 'black',
+            lineHeight: 1.2,
+            letterSpacing: 0,
+            backgroundEnabled: false,
+            backgroundColor: '#7ED321',
+            backgroundOpacity: 1,
+            backgroundCornerRadius: 0.5,
+            backgroundPadding: 0.5,
+        },
+        {
+            id: 'sequence',
+            type: 'text',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: store.width - 111 - 0.15 * DPI,
+            y: store.height - size[1] * DPI + 170 - 4 * DPI,
+            width: 111,
+            height: 40,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            text: `Sequence`,
+            placeholder: '',
+            fontSize: 8,
+            fontFamily: 'Roboto',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            textDecoration: '',
+            fill: 'black',
+            align: 'center',
+            verticalAlign: 'top',
+            strokeWidth: 0,
+            stroke: 'black',
+            lineHeight: 1.2,
+            letterSpacing: 0,
+            backgroundEnabled: false,
+            backgroundColor: '#7ED321',
+            backgroundOpacity: 1,
+            backgroundCornerRadius: 0.5,
+            backgroundPadding: 0.5,
+        },
+        {
+            id: 'contId',
+            type: 'text',
+            name: '',
+            opacity: 1,
+            visible: true,
+            selectable: false,
+            removable: false,
+            alwaysOnTop: true,
+            showInExport: true,
+            x: store.width - 111 - 0.15 * DPI,
+            y: store.height - size[1] * DPI + 180 - 4 * DPI,
+            width: 111,
+            height: 40,
+            rotation: 0,
+            animations: [],
+            blurEnabled: false,
+            blurRadius: 10,
+            brightnessEnabled: false,
+            brightness: 0,
+            sepiaEnabled: false,
+            grayscaleEnabled: false,
+            shadowEnabled: false,
+            shadowBlur: 5,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowColor: 'black',
+            shadowOpacity: 1,
+            draggable: false,
+            resizable: false,
+            contentEditable: false,
+            styleEditable: false,
+            text: `Cont ID`,
+            placeholder: '',
+            fontSize: 8,
+            fontFamily: 'Roboto',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            textDecoration: '',
+            fill: 'black',
+            align: 'center',
+            verticalAlign: 'top',
+            strokeWidth: 0,
+            stroke: 'black',
+            lineHeight: 1.2,
+            letterSpacing: 0,
+            backgroundEnabled: false,
+            backgroundColor: '#7ED321',
+            backgroundOpacity: 1,
+            backgroundCornerRadius: 0.5,
+            backgroundPadding: 0.5,
+        }
+    ];
+
+    elements.forEach(element => page.addElement(element));
+    store.history.clear();
+};

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "outDir": "build/types",
+    "module": "es2020",
+    "target": "es5",
+    "jsx": "react",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "lib": ["es2018", "dom"],
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmitOnError": false,
+    "baseUrl" : ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "include": ["src/*.tsx", "src/importMeta.d.ts"],
+  "exclude": ["src/**/tests", "node_modules", "assets/**"],
+}

package/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  assetsInclude: ['**/*.ttf'],
+});

package/webpack.config.js

@@ -0,0 +1,80 @@
+import webpack from 'webpack';
+import path from 'node:path';
+import TerserPlugin from 'terser-webpack-plugin';
+
+const __dirname = path.resolve();
+
+export default {
+  mode: 'production',
+  devtool: 'source-map',
+  entry: './src/index.tsx',
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname, 'build'),
+    library: {
+      type: 'module',
+    },
+    clean: true,
+    module: true,
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin({ extractComments: false })],
+  },
+  experiments: {
+    outputModule: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
+            plugins: ['@babel/plugin-transform-class-properties'],
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.scss$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'svg-url-loader',
+            options: {
+              noquotes: true,
+            },
+          }
+        ],
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        type: "asset/inline"
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: ['file-loader'],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+    alias: {
+      '~': path.resolve(__dirname, 'src'),
+    },
+  },
+  plugins: [
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
+  ],
+};