bsign-customization-full 0.0.1

package/src/components/layers/image-layer.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useState } from "react";
+import { useLayersStore } from "../../store/layers-store";
+import MovableItem, { type TMovableItemProps } from "../movable-item";
+import type { TLayer } from "../preview";
+import { isImageLayer } from "../../lib/type-checks";
+
+// import { ResizableBox, type ResizableBoxProps } from 'react-resizable';
+
+export type LayerImageProps = {
+    imageSrc: string;
+    width?: number;
+    height?: number;
+    coordinates: Record<string, { x: number, y: number }>; // key - id розміру таблички
+    // aspectRatio: {
+    //     width?: number;
+    //     height?: number;
+    // }
+} & TMovableItemProps
+
+export default function ImageLayer({ layerIndex }: {
+    layerIndex: number;
+}) {
+    const [layer, setLayer] = useState<TLayer<LayerImageProps>>()
+    const { layers, change, options } = useLayersStore()
+
+    // const imgRef = useRef<HTMLImageElement>(null);
+    // const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
+
+    const handleLayerUpdate = (coordinates: {
+        x?: number;
+        y?: number;
+    }) => {
+        change(layerIndex, { coordinates })
+    }
+
+    useEffect(() => {
+        if (layers && isImageLayer(layers[layerIndex]))
+            setLayer(layers[layerIndex])
+    }, [layers[layerIndex]])
+
+    // useEffect(() => {
+    //     const el = imgRef.current;
+    //     if (!el) return;
+
+    //     const resizeObserver = new ResizeObserver((entries) => {
+    //         for (const entry of entries) {
+    //             const { width, height } = entry.contentRect;
+    //             setImageSize({ width, height });
+    //         }
+    //     });
+
+    //     resizeObserver.observe(el);
+    //     return () => resizeObserver.disconnect();
+    // }, [layer?.props.imageSrc]);
+
+    if (layer) {
+        // const boxProps: ResizableBoxProps = {
+        //     width: layer.props.width,
+        //     height: layer.props.height,
+        //     resizeHandles: ['se', 'ne', 'nw', 'sw'],
+        //     minConstraints: [150, 150], // px
+        //     maxConstraints: [680, 640],
+        // };
+
+        // return (
+        //     <MovableItem coordinates={layer.props.coordinates} onUpdate={handleLayerUpdate}>
+        //         {/* Hidden image to set the appropriate width and height of the retarded bitch container */}
+        //         {/* <img
+        //         ref={imgRef}
+        //         src={layer.props.imageSrc || "/placeholder.svg"}
+        //         alt="Layer 2"
+        //         className={`absolute opacity-0 cursor-move object-cover select-none ${layer.props.horizontalMirror ? 'rotate-y-180' : ''} ${layer.props.verticalMirror ? '' : ''}`}
+        //         style={{
+        //             userSelect: "none",
+        //             pointerEvents: "auto",
+        //             width: layer.props.width,
+        //         }}
+        //         draggable={false}
+        //     /> */}
+        //         <ResizableBox {...boxProps}
+        //             onResizeStart={() => setResizing(true)}
+        //             onResizeStop={() => setResizing(false)}
+        //             className={`group top-0 absolute cursor-move object-cover select-none`}
+        //             style={{
+        //                 backgroundImage: `url(${layer.props.imageSrc || "/placeholder.svg"})`,
+        //                 transform: `translate(${layer.props.coordinates?.x || 0}px, ${layer.props.coordinates?.y || 0}px)`,
+        //                 userSelect: "none",
+        //                 pointerEvents: "auto",
+        //                 position: 'absolute',
+        //                 // width: '100%', // imageSize.width,
+        //                 // height: imageSize.height, // mb this shit is not needed, i can use aspect ratio style for bottom submisive div container
+        //                 backgroundRepeat: 'no-repeat',
+        //                 backgroundPosition: 'center top',
+        //                 backgroundSize: 'cover',
+        //                 // aspectRatio: `${layer.props.aspectRatio.width}/${layer.props.aspectRatio?.height}`
+        //             }}
+        //         />
+
+        //     </MovableItem>
+        // )
+
+        const image = (
+            <img
+                src={layer.props.imageSrc}
+                className={`group top-0 absolute object-cover select-none`}
+                style={{
+                    transform: `translate(${layer.props.coordinates[options.selectedSize.id].x || 0}px, ${layer.props.coordinates[options.selectedSize.id].y || 0}px)`,
+                    userSelect: "none",
+                    pointerEvents: "auto",
+                    position: 'absolute',
+                    width: layer.props.width ? `${layer.props.width}px` : 'auto',
+                    height: layer.props.height ? `${layer.props.height}px` : 'auto',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundPosition: 'center top',
+                    backgroundSize: 'cover',
+                    // aspectRatio: `${layer.props.aspectRatio.width}/${layer.props.aspectRatio?.height}`
+                }}
+            />
+        )
+
+        return layer.props.movable ? (
+            <MovableItem coordinates={layer.props.coordinates} onUpdate={handleLayerUpdate}>
+                {image}
+            </MovableItem>
+        ) : image
+    }
+    return null
+}

package/src/components/layers/layer-forms/material-form.tsx

@@ -0,0 +1,53 @@
+import { getTemplateById, getTemplateMaterial } from "../../../lib/config"
+import { useLayersStore } from "../../../store/layers-store"
+
+export default function MaterialLayerForm() {
+    const { options, setMaterial } = useLayersStore()
+
+    const selectedTemplate = getTemplateById(options.selectedTemplateId)
+    const selectedMaterial = getTemplateMaterial({
+        template: selectedTemplate,
+        materialId: options.selectedMaterialId,
+    })
+
+    return (
+        <div className="space-y-4 p-1">
+            <div className="space-y-1">
+                <p className="text-[24px] font-semibold text-[#1C1D1D]">Material</p>
+                <p className="text-[12px] text-[#8F8F8F]">Choose finish and automatic text contrast</p>
+            </div>
+
+            <p className="text-[14px]">
+                <span className="text-[#8F8F8F]">Selected:</span> <span className="font-bold">{selectedMaterial.label}</span>
+            </p>
+
+            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+                {selectedTemplate.materials.map((material) => (
+                    <button
+                        key={material.id}
+                        type="button"
+                        onClick={() => setMaterial(material.id)}
+                        className={`cursor-pointer rounded-[10px] flex flex-col items-center border p-2 transition ${selectedMaterial.id === material.id
+                            ? "border-[#111111] bg-[#F5F5F5]"
+                            : "border-[#D6D6D6] bg-white hover:border-[#A6A6A6]"
+                            }`}
+                    >
+                        {material.previewImage ? (
+                            <img
+                                src={material.previewImage}
+                                alt={material.label}
+                                className="h-[72px] w-[72px] rounded-[8px] object-cover"
+                            />
+                        ) : (
+                            <div
+                                className="h-[72px] w-full rounded-[8px] border border-[#D6D6D6]"
+                                style={{ backgroundColor: material.previewColor ?? "#E5E7EB" }}
+                            />
+                        )}
+                        <p className="mt-2 text-center text-[13px] font-medium text-[#111111]">{material.label}</p>
+                    </button>
+                ))}
+            </div>
+        </div>
+    )
+}

package/src/components/layers/layer-forms/size-form.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react"
+import { useLayersStore } from "../../../store/layers-store"
+import { getTemplateSizes } from "../../../lib/config"
+import { SizeGuideModal } from "../../size-guide-modal"
+import { Button } from "../../ui/button"
+import { cn } from "../../../lib/utils"
+import { Ruler } from "lucide-react"
+import { formatPrice } from "../../../lib/pricing"
+
+const formatValue = (value: number) => Number.isInteger(value) ? value.toString() : value.toFixed(1);
+
+const formatInches = (value: { w: number; h: number }) => `${formatValue(value.w)} x ${formatValue(value.h)}"`;
+
+const formatMillimeters = (value: { w: number; h: number }) => `${formatValue(value.w * 10)} x ${formatValue(value.h * 10)} mm`;
+
+export default function SizeLayerForm() {
+    const { options, setSize } = useLayersStore()
+    const [displayGuide, setDisplayGuide] = useState(false);
+
+    const availableSizes = getTemplateSizes({
+        templateId: options.selectedTemplateId,
+    })
+
+    return (
+        <div className="space-y-4 p-1">
+            <SizeGuideModal onOpenChange={setDisplayGuide} open={displayGuide} />
+            <div className="flex items-start justify-between gap-3">
+                <div className="space-y-1">
+                    <p className="text-[24px] font-semibold text-[#1C1D1D]">Size</p>
+                    <p className="text-[12px] text-[#8F8F8F]">Choose dimensions (shape is selected automatically)</p>
+                </div>
+                <Button
+                    type="button"
+                    size="sm"
+                    className="rounded-lg px-3"
+                    onClick={() => setDisplayGuide(true)}
+                >
+                    <Ruler className="size-4" />
+                    Size guide
+                </Button>
+            </div>
+
+            <div className="overflow-hidden rounded-[10px] border border-[#D6D6D6]">
+                <div className="grid grid-cols-3 gap-2 border-b border-[#D6D6D6] bg-[#F8F8F8] px-3 py-2">
+                    <p className="text-[12px] font-medium text-[#8F8F8F]">Inches</p>
+                    <p className="text-[12px] font-medium text-[#8F8F8F]">Millimeters</p>
+                    <p className="text-right text-[12px] font-medium text-[#8F8F8F]">Price</p>
+                </div>
+                <div className="divide-y divide-[#D6D6D6]">
+                    {availableSizes.map((size) => (
+                        <button
+                            type="button"
+                            key={size.id}
+                            className={cn(
+                                "grid w-full cursor-pointer grid-cols-3 gap-2 px-3 py-4 text-left transition-colors duration-300",
+                                options.selectedSize.id === size.id ? "bg-[#E6E6E6]" : "bg-white hover:bg-[#F7F7F7]",
+                            )}
+                            onClick={() => setSize(size.id)}
+                        >
+                            <p className="text-[14px] text-[#111111]">{formatInches(size.inchs)}</p>
+                            <p className="text-[14px] text-[#111111]">{formatMillimeters(size.cm)}</p>
+                            <p className="text-right text-[14px] font-medium text-[#111111]">{formatPrice(size.price)}</p>
+                        </button>
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/layers/layer-forms/template-form.tsx

@@ -0,0 +1,39 @@
+import { getTemplateById, templateCatalog } from "../../../lib/config"
+import { useLayersStore } from "../../../store/layers-store"
+
+export default function TemplateLayerForm() {
+    const { options, setTemplate } = useLayersStore()
+    const selectedTemplate = getTemplateById(options.selectedTemplateId)
+
+    return (
+        <div className="space-y-4 p-1">
+            <div className="space-y-1">
+                <p className="text-[24px] font-semibold text-[#1C1D1D]">Template</p>
+            </div>
+
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                {templateCatalog.map((template) => (
+                    <button
+                        key={template.id}
+                        type="button"
+                        onClick={() => setTemplate(template.id)}
+                        className={`cursor-pointer overflow-hidden rounded-[12px] border text-left transition ${template.id === selectedTemplate.id
+                            ? "border-[#111111] bg-[#F7F7F7]"
+                            : "border-[#D6D6D6] bg-white hover:border-[#A6A6A6]"
+                            }`}
+                    >
+                        <div className="aspect-square w-full bg-[#EFEFEF]">
+                            <img src={template.image} alt={template.name} className="h-full w-full object-cover" />
+                        </div>
+                        <div className="space-y-1 px-3 py-2">
+                            <p className="text-[14px] font-semibold text-[#111111]">{template.name}</p>
+                            {template.description && (
+                                <p className="text-[12px] text-[#8F8F8F]">{template.description}</p>
+                            )}
+                        </div>
+                    </button>
+                ))}
+            </div>
+        </div>
+    )
+}