bsign-customization-full 0.0.1

package/src/lib/pricing.ts

@@ -0,0 +1,61 @@
+import type { TCartItem } from "../store/cart-store";
+import type { TSize } from "./config";
+
+export const CURRENCY_SYMBOL = "$";
+
+export const QUANTITY_DISCOUNT_TIERS = [
+  { qty: 1, discount: 0 },
+  { qty: 10, discount: 5 },
+  { qty: 25, discount: 10 },
+  { qty: 50, discount: 15 },
+] as const;
+
+export function formatPriceAmount(value: number): string {
+  return new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(value);
+}
+
+export function formatPrice(value: number): string {
+  return `${CURRENCY_SYMBOL}${formatPriceAmount(value)}`;
+}
+
+export function getBasePriceBySize(size: Pick<TSize, "price">): number {
+  return size.price;
+}
+
+export function getDiscountByQty(qty: number): number {
+  const safeQty = Number.isFinite(qty) && qty > 0 ? Math.floor(qty) : 1;
+
+  return QUANTITY_DISCOUNT_TIERS.reduce((currentDiscount, tier) => {
+    if (safeQty >= tier.qty) {
+      return tier.discount;
+    }
+
+    return currentDiscount;
+  }, 0);
+}
+
+export function getUnitPrice(size: Pick<TSize, "price">, qty: number): number {
+  const basePrice = getBasePriceBySize(size);
+  const discount = getDiscountByQty(qty);
+  const discountedPrice = basePrice * (1 - discount / 100);
+
+  return Number(discountedPrice.toFixed(2));
+}
+
+export function getCartSummary(cart: TCartItem[]): { totalQty: number; totalAmount: number } {
+  return cart.reduce(
+    (acc, item) => {
+      const safeQty = Number.isFinite(item.qty) && item.qty > 0 ? Math.floor(item.qty) : 1;
+      const unitPrice = getUnitPrice(item.options.selectedSize, safeQty);
+
+      acc.totalQty += safeQty;
+      acc.totalAmount += unitPrice * safeQty;
+
+      return acc;
+    },
+    { totalQty: 0, totalAmount: 0 }
+  );
+}

package/src/lib/type-checks.ts

@@ -0,0 +1,47 @@
+import type { LayerImageProps } from "../components/layers/image-layer";
+import type { LayerTextProps } from "../components/layers/text-layer";
+import type { LayrProps, TLayer } from "../components/preview";
+
+export function isLayerImageProps(layer: LayrProps): layer is LayerImageProps {
+    return (
+        (layer as LayerImageProps).imageSrc !== undefined 
+    );
+}
+
+export function isLayerTextProps(layer: LayrProps): layer is LayerTextProps {
+    return (
+        typeof (layer as LayerTextProps).text === 'string' &&
+        typeof (layer as LayerTextProps).fontSize === 'number'
+    );
+}
+
+/** Перевіряє, чи layer є "image-layer" */
+export function isImageLayer(
+    layer: TLayer<LayrProps>
+): layer is TLayer<LayerImageProps> {
+    return (
+        layer.type === 'image' &&
+        typeof (layer.props as LayerImageProps).imageSrc === 'string' 
+    );
+}
+
+/** Перевіряє, чи layer є "background-layer" */
+export function isBackgroundLayer(
+    layer: TLayer<LayrProps>
+): layer is TLayer<LayerImageProps> {
+    return (
+        layer.type === 'background' &&
+        typeof (layer.props as { imageSrc: string }).imageSrc === 'string'
+    );
+}
+
+/** Перевіряє, чи layer є "text-layer" */
+export function isTextLayer(
+    layer: TLayer<LayrProps>
+): layer is TLayer<LayerTextProps> {
+    return (
+        layer.type === 'text' &&
+        typeof (layer.props as LayerTextProps).text === 'string' &&
+        typeof (layer.props as LayerTextProps).fontSize === 'number'
+    );
+}

package/src/lib/utils.ts

@@ -0,0 +1,146 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+import Papa from "papaparse";
+import { saveAs } from "file-saver";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+/**
+ * Обчислює співвідношення сторін, наприклад 16:9, 1:2 або 1:1.2
+ *
+ * @param w           — ширина
+ * @param h           — висота
+ * @param maxDen      — (необов’язково) максимальний знаменник у шуканому раціональному наближенні.
+ *                       Для цілих чисел роль maxDen не відіграє; для дробових значень
+ *                       використовується алгоритм обмежених дробів (continued fractions).
+ *                       За замовчуванням 100.
+ * @returns           — рядок у форматі "x:y"
+ */
+export function aspectRatio(
+  w: number,
+  h: number,
+  maxDen: number = 100,
+): string {
+  if (w <= 0 || h <= 0 || !isFinite(w) || !isFinite(h)) {
+    throw new Error("Widths and heights must be finite positive numbers");
+  }
+
+  // Якщо обидва числа цілі — просто скорочуємо через НСД
+  if (Number.isInteger(w) && Number.isInteger(h)) {
+    const gcd = (a: number, b: number): number =>
+      b === 0 ? a : gcd(b, a % b);
+
+    const g = gcd(w, h);
+    return `${w / g}/${h / g}`;
+  }
+
+  // Для дробових — раціональне наближення за допомогою
+  // алгоритму обмежених дробів / Farey, щоби мати приємні числа
+  const target = w / h;
+
+  let bestNum = 1;
+  let bestDen = 1;
+  let minError = Math.abs(target - bestNum / bestDen);
+
+  for (let den = 1; den <= maxDen; den++) {
+    const num = Math.round(target * den);
+    const value = num / den;
+    const error = Math.abs(target - value);
+
+    if (error < minError) {
+      minError = error;
+      bestNum = num;
+      bestDen = den;
+      if (error === 0) break; // ідеальне співпадіння
+    }
+  }
+
+  // Скорочуємо знайдену пару ще раз, раптом num та den мають спільні дільники
+  const gcd = (a: number, b: number): number =>
+    b === 0 ? a : gcd(b, a % b);
+
+  const g = gcd(bestNum, bestDen);
+  bestNum /= g;
+  bestDen /= g;
+
+  return `${bestNum}/${bestDen}`;
+}
+
+type CsvRow = Record<string, unknown>;
+
+export function downloadCsv<T extends CsvRow>(
+  rows: T[],
+  filename = "data.csv",
+  options?: Papa.UnparseConfig // delimiter, header, columns, etc.
+) {
+  // Приклад: за замовчуванням додаємо header
+  const csv = Papa.unparse(rows, { header: true, ...options });
+
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+  saveAs(blob, filename);
+}
+
+export interface ParseCsvOptions<T> {
+  delimiter?: string;               // ",", ";", "\t", ...
+  dynamicTyping?: boolean | object; // true щоб конвертувати числа/булеві
+  transformHeader?: (header: string) => string; // нормалізація назв колонок
+  beforeRow?: (row: T) => T;        // опціональна постобробка кожного рядка
+}
+
+/**
+ * Зчитує CSV-файл і повертає масив об'єктів (по заголовкам).
+ * Використовує Web Worker для великих файлів.
+ */
+export function parseCsvFile<T extends CsvRow = CsvRow>(
+  file: File,
+  opts: ParseCsvOptions<T> = {}
+): Promise<T[]> {
+  const useWorker = !(opts.beforeRow || opts.transformHeader); // безпечніше для функцій
+
+  return new Promise<T[]>((resolve, reject) => {
+    Papa.parse(file, {
+      header: true,
+      skipEmptyLines: "greedy",
+      worker: useWorker,
+      delimiter: opts.delimiter,
+      // dynamicTyping: opts.dynamicTyping ?? true,
+      transformHeader: opts.transformHeader,
+      complete: (result) => {
+        // 1) Нормальний шлях: Papa віддав масив об’єктів
+        let data = (result.data as unknown as T[]).filter(
+          (r) => r && Object.keys(r).length > 0
+        );
+
+        // 2) Якщо headers не розпізнані (наприклад, не той роздільник),
+        // пробуємо трактувати перший рядок як заголовки самостійно.
+        if ((!result.meta.fields || result.meta.fields.length === 0) && Array.isArray(result.data)) {
+          const rows = result.data as unknown as any[][];
+          if (rows.length > 1 && Array.isArray(rows[0])) {
+            const [headers, ...rest] = rows;
+            data = rest.map((row) =>
+              Object.fromEntries(
+                headers.map((h, i) => [String(h).trim(), row?.[i] ?? ""])
+              )
+            ) as T[];
+          }
+        }
+
+        resolve(opts.beforeRow ? data.map(opts.beforeRow) : data);
+      },
+      error: (err) => reject(err),
+    });
+  });
+}
+
+export function arraysEqual<T>(a: T[], b: T[]): boolean {
+  if (a === b) return true;
+  if (a == null || b == null || a.length !== b.length) return false;
+
+  return a.every((val, index) => val === b[index]);
+}
+
+export async function sleep(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}

package/src/lib/widget-context.tsx

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react"
+
+export const WidgetPortalContainerContext = createContext<HTMLElement | null>(
+  null
+)
+
+export function useWidgetPortalContainer() {
+  return useContext(WidgetPortalContainerContext)
+}

package/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './AppDemo2.tsx'
+import 'react-resizable/css/styles.css'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/store/cart-store.ts

@@ -0,0 +1,78 @@
+import { create } from 'zustand'
+import type { LayrProps, TLayer } from '../components/preview'
+import type { TLayersOption } from './layers-store';
+
+export type TCartItem = {
+    sign: TLayer<LayrProps>[];
+    options: TLayersOption;
+    qty: number;
+    id: number;
+    img: string;
+}
+
+type CartStore = {
+    cart: TCartItem[];
+    add: (newSign: TLayer<LayrProps>[], preview: string, options: TLayersOption, qty?: number) => TCartItem;
+    update: (id: number, data: Omit<Partial<TCartItem>, 'id'>, contextUpdate?: (prev: TCartItem) => Omit<Partial<TCartItem>, 'id'>) => void;
+    init: (cart: TCartItem[]) => void;
+}
+
+export const useCartStore = create<CartStore>()((set) => ({
+    cart: [],
+    init: (cart) => set(() => ({ cart })),
+    add: (newSign, preview, options, qty = 1) => {
+        let id = new Date().getTime();
+        const normalizedQty = Number.isFinite(qty) && qty > 0 ? Math.floor(qty) : 1;
+        // Глибока копія, щоб від’єднатися від редактора
+        // Це піздець, скільки це лайно зжерло моїх нервів
+        const signCopy = typeof structuredClone === 'function'
+            ? structuredClone(newSign)
+            : JSON.parse(JSON.stringify(newSign));
+
+        const newCartItem: TCartItem = {
+            sign: signCopy,
+            qty: normalizedQty,
+            id,
+            img: preview,
+            options
+        };
+
+        set((state) => {
+
+            // При імпорті в моменті створюється декілька записів,
+            // Тому варто перевіряти на унікальність
+            let exists = state.cart.find(item => item.id === id);
+            if (exists) {
+                while (exists) {
+                    id += 1;
+                    exists = state.cart.find(item => item.id === id);
+                }
+                newCartItem.id = id;
+            }
+
+            return {
+                cart: [...state.cart, newCartItem],
+            }
+        });
+        return newCartItem;
+    },
+
+    update: (id, data, contextUpdate) =>
+        set((state) => ({
+            cart: state.cart.map((item) => {
+                if (item.id !== id) return item;
+
+                const contextData = contextUpdate ? contextUpdate(item) : {};
+                const next: Partial<TCartItem> = { ...data, ...contextData };
+
+                if (data.sign) {
+                    next.sign = typeof structuredClone === 'function'
+                        ? structuredClone(data.sign)
+                        : JSON.parse(JSON.stringify(data.sign));
+                }
+
+                return { ...item, ...next };
+            }),
+        })),
+}))
+

package/src/store/layers-store.ts

@@ -0,0 +1,337 @@
+import { create } from 'zustand'
+import type { LayrProps, TLayer } from '../components/preview'
+import {
+    applyTemplateVisualsToLayers,
+    createTemplateLayers,
+    getDefaultTemplateOptions,
+    resolveTemplateSelection,
+    type TSize,
+} from '../lib/config'
+
+export type TLayersOption = {
+    selectedTemplateId: string;
+    selectedShapeId: string;
+    selectedMaterialId: string;
+    selectedSize: TSize;
+    gridCm: boolean;
+    gridInch: boolean;
+};
+
+type HistoryState = {
+    layers: TLayer<LayrProps>[];
+    options: TLayersOption;
+}
+
+const CSS_INCH_IN_PX = 96;
+
+const shiftTextLayersForSizeChange = ({
+    layers,
+    previousSize,
+    nextSize,
+}: {
+    layers: TLayer<LayrProps>[];
+    previousSize: TSize;
+    nextSize: TSize;
+}): TLayer<LayrProps>[] => {
+    const deltaX = ((nextSize.inchs.w - previousSize.inchs.w) * CSS_INCH_IN_PX) / 2;
+    const deltaY = ((nextSize.inchs.h - previousSize.inchs.h) * CSS_INCH_IN_PX) / 2;
+
+    if (Math.abs(deltaX) < 0.01 && Math.abs(deltaY) < 0.01) {
+        return layers;
+    }
+
+    return layers.map((layer) => {
+        if (layer.type !== "text") return layer;
+
+        const coordinates = layer.props.coordinates;
+        const x = coordinates?.x;
+        const y = coordinates?.y;
+
+        if (typeof x !== "number" || typeof y !== "number") {
+            return layer;
+        }
+
+        return {
+            ...layer,
+            props: {
+                ...layer.props,
+                coordinates: {
+                    ...coordinates,
+                    x: x + deltaX,
+                    y: y + deltaY,
+                },
+            },
+        };
+    });
+};
+
+const templateDefaults = getDefaultTemplateOptions();
+
+export const INITIAL_STATE = {
+    layers: [] as TLayer<LayrProps>[],
+    options: {
+        ...templateDefaults,
+        gridInch: false,
+        gridCm: false
+    } as TLayersOption,
+    resizing: false,
+    preview: undefined as string | undefined,
+    cartId: undefined as number | undefined,
+    textCenteringRequest: 0,
+
+    past: [] as HistoryState[],
+    future: [] as HistoryState[],
+};
+
+type LayersStore = {
+    layers: TLayer<LayrProps>[]
+    options: TLayersOption
+
+    past: HistoryState[]
+    future: HistoryState[]
+    undo: () => void
+    redo: () => void
+
+    setTemplate: (templateId: string) => void
+    setShape: (shapeId: string) => void
+    setSize: (sizeId: string) => void
+    setMaterial: (materialId: string) => void
+    editOptions: (value: Partial<TLayersOption>) => void
+    init: (layers: TLayer<LayrProps>[]) => void
+    reset: (layers: TLayer<LayrProps>[]) => void
+    resizing: boolean
+    setResizing: (resizing: boolean) => void
+    change: (index: number, props: Partial<LayrProps>) => void;
+    add: (layer: TLayer<LayrProps>) => void;
+    preview?: string;
+    setPreview: (base64: string) => void;
+    cartId?: number;
+    setCartId: (id: number | undefined) => void;
+    textCenteringRequest: number;
+    requestTextCentering: () => void;
+    remove: (index: number) => void;
+    clearAll: (state?: Partial<typeof INITIAL_STATE>) => void;
+}
+
+export const useLayersStore = create<LayersStore>()((set) => ({
+    ...INITIAL_STATE,
+
+    undo: () => set((state) => {
+        if (state.past.length === 0) return state;
+
+        const previous = state.past[state.past.length - 1];
+        const newPast = state.past.slice(0, -1);
+
+        return {
+            layers: previous.layers,
+            options: previous.options,
+            past: newPast,
+            future: [{ layers: state.layers, options: state.options }, ...state.future],
+        };
+    }),
+
+    redo: () => set((state) => {
+        if (state.future.length === 0) return state;
+
+        const next = state.future[0];
+        const newFuture = state.future.slice(1);
+
+        return {
+            layers: next.layers,
+            options: next.options,
+            past: [...state.past, { layers: state.layers, options: state.options }],
+            future: newFuture,
+        };
+    }),
+
+    init: (layers) => set({ layers, past: [], future: [] }),
+
+    reset: (layers) => set({ ...INITIAL_STATE, layers }),
+
+    clearAll: (state = INITIAL_STATE) => set(state),
+
+    setTemplate: (templateId) => set((state) => {
+        const resolved = resolveTemplateSelection({ templateId });
+        const nextOptions: TLayersOption = {
+            ...state.options,
+            selectedTemplateId: resolved.template.id,
+            selectedShapeId: resolved.shape.id,
+            selectedMaterialId: resolved.material.id,
+            selectedSize: resolved.size,
+        };
+
+        return {
+            past: [...state.past, { layers: state.layers, options: state.options }],
+            future: [],
+            options: nextOptions,
+            layers: createTemplateLayers({
+                templateId: resolved.template.id,
+                shapeId: resolved.shape.id,
+                materialId: resolved.material.id,
+                preferredSizeId: resolved.size.id,
+            }),
+        };
+    }),
+
+    setShape: (shapeId) => set((state) => {
+        const resolved = resolveTemplateSelection({
+            templateId: state.options.selectedTemplateId,
+            shapeId,
+            materialId: state.options.selectedMaterialId,
+        });
+
+        const nextOptions: TLayersOption = {
+            ...state.options,
+            selectedTemplateId: resolved.template.id,
+            selectedShapeId: resolved.shape.id,
+            selectedMaterialId: resolved.material.id,
+            selectedSize: resolved.size,
+        };
+
+        const nextLayers = state.layers.length
+            ? applyTemplateVisualsToLayers({
+                layers: state.layers,
+                templateId: resolved.template.id,
+                shapeId: resolved.shape.id,
+                materialId: resolved.material.id,
+                preferredSizeId: resolved.size.id,
+            })
+            : createTemplateLayers({
+                templateId: resolved.template.id,
+                shapeId: resolved.shape.id,
+                materialId: resolved.material.id,
+                preferredSizeId: resolved.size.id,
+            });
+
+        return {
+            past: [...state.past, { layers: state.layers, options: state.options }],
+            future: [],
+            options: nextOptions,
+            layers: nextLayers,
+        };
+    }),
+
+    setSize: (sizeId) => set((state) => {
+        const previousSize = state.options.selectedSize;
+        const resolved = resolveTemplateSelection({
+            templateId: state.options.selectedTemplateId,
+            materialId: state.options.selectedMaterialId,
+            preferredSizeId: sizeId,
+        });
+
+        const nextOptions: TLayersOption = {
+            ...state.options,
+            selectedTemplateId: resolved.template.id,
+            selectedShapeId: resolved.shape.id,
+            selectedMaterialId: resolved.material.id,
+            selectedSize: resolved.size,
+        };
+
+        const nextLayers = state.layers.length
+            ? shiftTextLayersForSizeChange({
+                previousSize,
+                nextSize: resolved.size,
+                layers: applyTemplateVisualsToLayers({
+                layers: state.layers,
+                templateId: resolved.template.id,
+                shapeId: resolved.shape.id,
+                materialId: resolved.material.id,
+                preferredSizeId: resolved.size.id,
+            }),
+            })
+            : createTemplateLayers({
+                templateId: resolved.template.id,
+                shapeId: resolved.shape.id,
+                materialId: resolved.material.id,
+                preferredSizeId: resolved.size.id,
+            });
+
+        return {
+            past: [...state.past, { layers: state.layers, options: state.options }],
+            future: [],
+            options: nextOptions,
+            layers: nextLayers,
+        };
+    }),
+
+    setMaterial: (materialId) => set((state) => {
+        const resolved = resolveTemplateSelection({
+            templateId: state.options.selectedTemplateId,
+            shapeId: state.options.selectedShapeId,
+            materialId,
+            preferredSizeId: state.options.selectedSize.id,
+        });
+
+        const nextOptions: TLayersOption = {
+            ...state.options,
+            selectedTemplateId: resolved.template.id,
+            selectedShapeId: resolved.shape.id,
+            selectedMaterialId: resolved.material.id,
+            selectedSize: resolved.size,
+        };
+
+        const nextLayers = state.layers.length
+            ? applyTemplateVisualsToLayers({
+                layers: state.layers,
+                templateId: resolved.template.id,
+                shapeId: resolved.shape.id,
+                materialId: resolved.material.id,
+                preferredSizeId: resolved.size.id,
+            })
+            : createTemplateLayers({
+                templateId: resolved.template.id,
+                shapeId: resolved.shape.id,
+                materialId: resolved.material.id,
+                preferredSizeId: resolved.size.id,
+            });
+
+        return {
+            past: [...state.past, { layers: state.layers, options: state.options }],
+            future: [],
+            options: nextOptions,
+            layers: nextLayers,
+        };
+    }),
+
+    setResizing: (resizing) => set({ resizing }),
+
+    change: (index, props) => set((state) => ({
+        past: [...state.past, { layers: state.layers, options: state.options }],
+        future: [],
+
+        layers: state.layers.map((layer, i) =>
+            i === index
+                ? { ...layer, props: { ...layer.props, ...props } }
+                : layer
+        )
+    })),
+
+    add: (layer) => set((state) => ({
+        past: [...state.past, { layers: state.layers, options: state.options }],
+        future: [],
+        layers: [...state.layers, layer]
+    })),
+
+    remove: (indexToRemove) => set((state) => ({
+        past: [...state.past, { layers: state.layers, options: state.options }],
+        future: [],
+        layers: state.layers.filter((_, index) => index !== indexToRemove)
+    })),
+
+    editOptions: (newOptions) => set((state) => ({
+        past: [...state.past, { layers: state.layers, options: state.options }],
+        future: [],
+        options: {
+            ...state.options,
+            ...newOptions
+        }
+    })),
+
+    setPreview: (base64) => set({ preview: base64 }),
+
+    setCartId: (id) => set({ cartId: id }),
+
+    requestTextCentering: () => set((state) => ({
+        textCenteringRequest: state.textCenteringRequest + 1,
+    })),
+}))

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />