@antscorp/antsomi-ui 1.3.3-beta.2 → 1.3.3-beta.21

package/es/components/molecules/ResizeGrid/ResizeGrid.js

@@ -0,0 +1,353 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Cell } from './components/Cell';
+import { GRID_TEMPLATE, MIN_SIZE, buildGrid } from './constant';
+import { StyledGrid } from './styled';
+import { useDeepCompareEffect } from '../../../hooks/useDeepCompareEffect';
+const defaultProps = {
+    containerStyle: {},
+    cellBorderStyle: '1px dashed',
+    cellStyle: {},
+    cellActiveStyle: {},
+    isPreviewMode: false,
+    isCompact: false,
+};
+export const ResizeGrid = props => {
+    const { containerStyle, cellBorderStyle, cellStyle, cellActiveStyle, isPreviewMode, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, } = props;
+    const [grid, setGrid] = useState(buildGrid(initGrid || GRID_TEMPLATE.GRID_2_3));
+    const startRef = useRef(null);
+    const startCellRef = useRef(null);
+    const selectRef = useRef(null);
+    const selectEndRef = useRef(null);
+    const gridRef = useRef();
+    const containerRef = useRef(null);
+    const cellsRef = useRef({});
+    const onChangeTimout = useRef();
+    // console.log('grid', grid)
+    const handleChangeGrid = () => {
+        clearTimeout(onChangeTimout.current);
+        onChangeTimout.current = setTimeout(() => {
+            if (containerRef.current && cellsRef.current && cellsRef.current[0]) {
+                const container = containerRef.current.getBoundingClientRect();
+                const childs = Object.values(cellsRef.current).map(cell => {
+                    if (!cell || !cell.current)
+                        return;
+                    const childBox = cell.current.getBoundingClientRect();
+                    return {
+                        width: childBox.width,
+                        height: childBox.height,
+                        x: childBox.x - container.x,
+                        y: childBox.y - container.y,
+                    };
+                });
+                if (typeof onChange === 'function') {
+                    onChange(grid, childs);
+                }
+            }
+        }, 300);
+    };
+    const isFollow = (cell, line, isCol = true) => isCol
+        ? (cell.colEnd !== line || !cell.width) && (cell.colStart !== line || !cell.width)
+        : (cell.rowEnd !== line || !cell.height) && (cell.rowStart !== line || !cell.height);
+    const notFollow = (cell, line, isCol = true) => !isFollow(cell, line, isCol);
+    useEffect(() => {
+        handleChangeGrid();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [grid]);
+    useDeepCompareEffect(() => {
+        if ((initGrid === null || initGrid === void 0 ? void 0 : initGrid.rows) && (initGrid === null || initGrid === void 0 ? void 0 : initGrid.cols)) {
+            setGrid(buildGrid(initGrid));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initGrid]);
+    useEffect(() => {
+        const handleMove = e => {
+            if (startRef.current && gridRef.current && containerRef.current) {
+                const { type, line } = startRef.current;
+                const idx = line - 1;
+                const { gridTemplateRows, gridTemplateColumns, rows, cols, childs } = gridRef.current;
+                if (idx <= 0 || (type === 'row' && idx >= rows) || (type === 'column' && idx >= cols))
+                    return;
+                const { clientX, clientY } = e;
+                if (type === 'row') {
+                    const gridHeight = containerRef.current.offsetHeight;
+                    const yDistant = clientY - startRef.current.clientY;
+                    const yPercentDistant = (100 * yDistant) / gridHeight;
+                    const minPercent = (100 * MIN_SIZE) / gridHeight;
+                    // console.log('move Y', clientY, yDistant, yPercentDistant);
+                    const newArr = [...gridTemplateRows];
+                    newArr[idx - 1] += yPercentDistant;
+                    newArr[idx] -= yPercentDistant;
+                    if (newArr[idx - 1] >= minPercent && newArr[idx] >= minPercent) {
+                        const newChilds = JSON.parse(JSON.stringify(childs));
+                        let isValidChildSize = true;
+                        newChilds.forEach(child => {
+                            var _a, _b;
+                            if (isValidChildSize && notFollow(child, (_a = startRef.current) === null || _a === void 0 ? void 0 : _a.line, false)) {
+                                if (child.rowStart === ((_b = startRef.current) === null || _b === void 0 ? void 0 : _b.line)) {
+                                    if (child.transformY) {
+                                        child.transformY = +child.transformY - yDistant;
+                                    }
+                                    else {
+                                        child.height = +child.height - yDistant;
+                                    }
+                                }
+                                else {
+                                    child.transformY && (child.height = +child.height + yDistant);
+                                }
+                                // console.log('check...', startRef.current.line, child.transformY, yDistant, +child.transformY - yDistant)
+                                if (child.height < MIN_SIZE) {
+                                    isValidChildSize = false;
+                                }
+                            }
+                        });
+                        isValidChildSize &&
+                            setGrid(Object.assign(Object.assign({}, gridRef.current), { gridTemplateRows: newArr, childs: newChilds }));
+                    }
+                }
+                else {
+                    const xDistant = clientX - startRef.current.clientX;
+                    const gridWidth = containerRef.current.offsetWidth;
+                    const xPercentDistant = (100 * xDistant) / gridWidth;
+                    const minPercent = (100 * MIN_SIZE) / gridWidth;
+                    // console.log('move X', clientX, xDistant, xPercentDistant);
+                    const newArr = [...gridTemplateColumns];
+                    newArr[idx - 1] += xPercentDistant;
+                    newArr[idx] -= xPercentDistant;
+                    if (newArr[idx - 1] >= minPercent && newArr[idx] >= minPercent) {
+                        const newChilds = JSON.parse(JSON.stringify(childs));
+                        let isValidChildSize = true;
+                        newChilds.forEach(child => {
+                            if (isValidChildSize && notFollow(child, line)) {
+                                if (child.colStart === line) {
+                                    if (child.transformX) {
+                                        child.transformX = +child.transformX - xDistant;
+                                    }
+                                    else {
+                                        child.width = +child.width - xDistant;
+                                    }
+                                }
+                                else {
+                                    child.transformX && !child.movedRight && (child.width = +child.width + xDistant);
+                                }
+                                // console.log('check...', startRef.current.line, child.transformX, xDistant, +child.transformX - xDistant)
+                                if (child.width < MIN_SIZE) {
+                                    isValidChildSize = false;
+                                }
+                            }
+                        });
+                        isValidChildSize &&
+                            setGrid(Object.assign(Object.assign({}, gridRef.current), { gridTemplateColumns: newArr, childs: newChilds }));
+                    }
+                }
+            }
+            //-------------------------------------------
+            if (startCellRef.current && gridRef.current) {
+                const { clientX: startClientX, clientY: startClientY, idx, direction, isRevert, cell, nextCell, } = startCellRef.current;
+                const { rowStart, rowEnd, colStart, colEnd, transformX, transformY } = cell;
+                const { gridTemplateRows, gridTemplateColumns, rows, cols, childs } = gridRef.current;
+                if (idx < 0 ||
+                    (direction === 'top' && rowStart === 1) ||
+                    (direction === 'right' && colEnd === cols + 1) ||
+                    (direction === 'bottom' && rowEnd === rows + 1) ||
+                    (direction === 'left' && colStart === 1))
+                    return;
+                const { clientX, clientY } = e;
+                if (['top', 'bottom'].includes(direction)) {
+                    // const cellHeight = cellRef.current.offsetHeight;
+                    const yDistant = clientY - startClientY;
+                    // console.log('move Y', clientY, yDistant);
+                    const newHeight = (cell.height || 0) + yDistant;
+                    const newHeightNextCell = (nextCell.height || 0) - yDistant;
+                    if (newHeight >= MIN_SIZE && newHeightNextCell >= MIN_SIZE) {
+                        const newChilds = [...childs];
+                        newChilds[idx] = Object.assign(Object.assign({}, childs[idx]), { height: newHeight, movedBottom: true });
+                        newChilds[nextCell.idx] = Object.assign(Object.assign({}, childs[nextCell.idx]), { height: newHeightNextCell, transformY: (nextCell.transformY || 0) + yDistant, movedTop: true });
+                        setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
+                    }
+                }
+                else {
+                    // const cellWidth = cellRef.current.offsetWidth;
+                    const xDistant = clientX - startClientX;
+                    // console.log('move X', clientX, xDistant);
+                    const newWidth = (cell.width || 0) + xDistant;
+                    const newWidthNextCell = (nextCell.width || 0) - xDistant;
+                    if (newWidth >= MIN_SIZE && newWidthNextCell >= MIN_SIZE) {
+                        const newChilds = [...childs];
+                        newChilds[idx] = Object.assign(Object.assign({}, childs[idx]), { width: newWidth, movedRight: true });
+                        newChilds[idx + 1] = Object.assign(Object.assign({}, childs[idx + 1]), { width: newWidthNextCell, transformX: (nextCell.transformX || 0) + xDistant, movedLeft: true });
+                        setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
+                    }
+                }
+            }
+            //------------------------------------------
+            // if (selectRef.current) {}
+        };
+        const handleUp = () => {
+            startRef.current = null;
+            startCellRef.current = null;
+        };
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('mouseup', handleUp);
+        return () => {
+            window.removeEventListener('mousemove', handleMove);
+            window.removeEventListener('mouseup', handleUp);
+        };
+    }, []);
+    const handleDownCell = (e, idx, direction, cell, cellRef) => {
+        const { clientX, clientY } = e;
+        const isRevert = ['top', 'left'].includes(direction);
+        let newIdx = isRevert ? idx - 1 : idx;
+        let nextCellIdx = isRevert ? idx - 1 : idx + 1;
+        if (['top', 'bottom'].includes(direction)) {
+            nextCellIdx = grid.childs.findIndex(b => b.colStart === cell.colStart &&
+                ((isRevert && b.rowEnd === cell.rowStart) || (!isRevert && b.rowStart === cell.rowEnd)));
+            newIdx = isRevert ? nextCellIdx : idx;
+        }
+        if (nextCellIdx < 0)
+            return;
+        const nextCell = grid.childs[nextCellIdx];
+        const nextCellRef = cellsRef.current[nextCellIdx];
+        if (nextCell && nextCellRef && nextCellRef.current) {
+            const newDirection = isRevert
+                ? {
+                    left: 'right',
+                    top: 'bottom',
+                }[direction]
+                : direction;
+            const cellInfo = Object.assign({ width: cell.width || cellRef.current.clientWidth, height: cell.height || cellRef.current.clientHeight, transformX: cell.transformX || 0, transformY: cell.transformY || 0, idx,
+                cellRef }, cell);
+            const nextCellInfo = Object.assign({ width: nextCell.width || nextCellRef.current.clientWidth, height: nextCell.height || nextCellRef.current.clientHeight, transformX: nextCell.transformX || 0, transformY: nextCell.transformY || 0, cellRef: nextCellRef, idx: nextCellIdx }, nextCell);
+            // console.log({cellInfo, nextCellInfo})
+            startCellRef.current = {
+                clientX,
+                clientY,
+                idx: newIdx,
+                direction: newDirection,
+                isRevert,
+                cell: isRevert ? nextCellInfo : cellInfo,
+                nextCell: !isRevert ? nextCellInfo : cellInfo,
+            };
+            // console.log('down cell', clientX, clientY, idx, direction, cell, cellRef);
+            gridRef.current = grid;
+        }
+    };
+    const handleDown = (e, type, line) => {
+        const { clientX, clientY } = e;
+        startRef.current = { clientX, clientY, type, line };
+        // console.log('down', type, line, clientX, clientY);
+        gridRef.current = JSON.parse(JSON.stringify(grid));
+    };
+    const handleUp = (e, direction, idx) => {
+        // console.log('up', direction, idx, e);
+        startRef.current = null;
+        startCellRef.current = null;
+    };
+    const downSelect = (idx, cell) => {
+        // console.log('dow select', idx, cell);
+        selectRef.current = { idx, cell };
+        gridRef.current = grid;
+    };
+    const unMerge = (cell, idx) => {
+        const { colStart, colEnd, rowStart, rowEnd } = cell;
+        if (colStart + 1 === colEnd && rowStart + 1 === rowEnd) {
+            return;
+        }
+        const newChilds = [...grid.childs];
+        for (let i = rowStart; i < rowEnd; i++) {
+            for (let j = colStart; j < colEnd; j++) {
+                const rStart = i;
+                const cStart = j;
+                const rEnd = rStart + 1;
+                const cEnd = cStart + 1;
+                // console.log('merge', i, j, rStart, cStart, rEnd, cEnd)
+                const newChild = {
+                    colStart: cStart,
+                    colEnd: cEnd,
+                    rowStart: rStart,
+                    rowEnd: rEnd,
+                };
+                if (i === rowStart && j === colStart) {
+                    newChilds[idx] = newChild;
+                }
+                else if (rStart !== rowStart ||
+                    rEnd !== rowEnd ||
+                    cStart !== colStart ||
+                    cEnd !== colEnd) {
+                    newChilds.splice(idx, 0, newChild);
+                }
+            }
+        }
+        setGrid(prev => (Object.assign(Object.assign({}, prev), { childs: newChilds })));
+    };
+    const resetBackgroundCellRef = () => {
+        Object.values(cellsRef.current).forEach(r => {
+            if (r.current) {
+                r.current.style.background = 'unset';
+            }
+        });
+    };
+    const upSelect = (idx, cell) => {
+        // console.log('up select', idx, cell);
+        resetBackgroundCellRef();
+        if (selectRef.current &&
+            selectEndRef.current &&
+            gridRef.current &&
+            selectRef.current.idx !== selectEndRef.current.idx &&
+            (selectEndRef.current.cell.rowEnd > selectRef.current.cell.rowEnd ||
+                selectEndRef.current.cell.colEnd > selectRef.current.cell.colEnd)) {
+            // console.log('merge', selectRef.current, selectEndRef.current)
+            const { cell: cellStart, idx: idxStart } = selectRef.current;
+            const { cell: cellEnd, idx: idxEnd, hCells } = selectEndRef.current;
+            const newChilds = [...gridRef.current.childs];
+            newChilds[idxStart].rowEnd = cellEnd.rowEnd;
+            newChilds[idxStart].colEnd = cellEnd.colEnd;
+            delete newChilds[idxStart].width;
+            delete newChilds[idxStart].height;
+            hCells.reverse().forEach(i => {
+                if (i !== idxStart) {
+                    newChilds.splice(i, 1);
+                    delete cellsRef.current[i];
+                }
+            });
+            setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
+        }
+        selectRef.current = null;
+        selectEndRef.current = null;
+    };
+    const hoverSelect = (idx, cell) => {
+        if (selectRef.current && gridRef.current) {
+            // console.log('hover select', idx, cell);
+            const { cell: cellStart, idx: idxStart } = selectRef.current;
+            const hCells = [];
+            gridRef.current.childs.forEach((child, i) => {
+                if (child.rowStart >= cellStart.rowStart &&
+                    child.rowEnd <= cell.rowEnd &&
+                    child.colStart >= cellStart.colStart &&
+                    child.colEnd <= cell.colEnd) {
+                    hCells.push(i);
+                }
+            });
+            // console.log('hCells', hCells)
+            resetBackgroundCellRef();
+            hCells.forEach(i => {
+                const cellRef = cellsRef.current[i];
+                if (cellRef && cellRef.current) {
+                    cellRef.current.style.background = 'rgba(255, 0, 255, .5)';
+                }
+            });
+            selectEndRef.current = { cell, idx, hCells };
+            gridRef.current = grid;
+        }
+    };
+    const setRef = (idx, ref) => {
+        cellsRef.current[idx] = ref;
+        // console.log('cellsRef.current', cellsRef.current)
+    };
+    const renderGrid = () => {
+        const { gridTemplateColumns, gridTemplateRows, childs } = grid;
+        // console.log('grid', { gridTemplateColumns, gridTemplateRows, childs });
+        return (React.createElement("div", { className: "grid-container", ref: containerRef, style: Object.assign({ backgroundImage: `url(${image})`, backgroundSize: imageSize, backgroundPosition: imagePosition, gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '), gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' ') }, containerStyle) }, childs.map((cell, idx) => (React.createElement(Cell, { key: idx, idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorderStyle, style: cellStyle, activeStyle: cellActiveStyle, isPreviewMode: isPreviewMode })))));
+    };
+    return (React.createElement(StyledGrid, { className: "grid-wrapper", isCompact: !!isCompact }, renderGrid()));
+};
+ResizeGrid.defaultProps = defaultProps;

package/es/components/molecules/ResizeGrid/components/Cell/Cell.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { CellProps } from '../../types';
+export declare const Cell: FC<CellProps>;

package/es/components/molecules/ResizeGrid/components/Cell/Cell.js

@@ -0,0 +1,67 @@
+import React, { useEffect, useRef } from 'react';
+import { buildGridArea, buildTranform } from '../../constant';
+import { StyledCell } from './styled';
+export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSelect, hoverSelect, unMerge, renderCell, style, isPreviewMode, borderStyle = '1px dashed', activeStyle, }) => {
+    const { objectFit, image } = cell;
+    const downRef = useRef(false);
+    const cellRef = useRef(null);
+    useEffect(() => {
+        setRef(idx, cellRef);
+    }, [idx, cell]);
+    const handleHoverSelect = e => {
+        hoverSelect(idx, cell);
+    };
+    const handleDownCell = e => {
+        downSelect(idx, cell);
+    };
+    const handleUpCell = e => {
+        upSelect(idx, cell);
+    };
+    const handleDown = (direction, idx, e) => {
+        e.stopPropagation();
+        downRef.current = true;
+        // console.log('down', direction, idx, e)
+        const type = ['top', 'bottom'].includes(direction) ? 'row' : 'column';
+        const line = {
+            top: cell.rowStart,
+            right: cell.colEnd,
+            bottom: cell.rowEnd,
+            left: cell.colStart,
+        }[direction];
+        if (window.event.ctrlKey ||
+            (direction === 'top' && cell.movedTop) ||
+            (direction === 'right' && cell.movedRight) ||
+            (direction === 'bottom' && cell.movedBottom) ||
+            (direction === 'left' && cell.movedLeft)) {
+            downCell(e, idx, direction, cell, cellRef);
+        }
+        else {
+            down(e, type, line);
+        }
+    };
+    const handleUp = (direction, idx, e) => {
+        e.stopPropagation();
+        // console.log('up', direction, idx, e)
+        downRef.current = false;
+        up(e, direction, idx);
+    };
+    const handlUnMerge = e => {
+        unMerge(cell, idx);
+    };
+    const renderCellContent = (cell, idx) => renderCell
+        ? renderCell(cell, idx)
+        : !!image && image.imageUrl && (React.createElement("div", { className: "imageWrapper" },
+            React.createElement("img", { src: image.imageUrl, alt: "menu", style: image.imageStyles })));
+    // const handleDrag = (direction, idx, e) => {
+    //   if (!downRef.current) return;
+    //   console.log(direction, idx, e)
+    //   drag(e, direction, idx)
+    // }
+    // console.log('TRANSFORM', idx, buildTranform(cell))
+    return (React.createElement(StyledCell, { ref: cellRef, className: "cell", onMouseOver: e => handleHoverSelect(e), onFocus: e => e, onMouseDown: e => handleDownCell(e), onMouseUp: e => handleUpCell(e), onDoubleClick: handlUnMerge, borderStyle: borderStyle, style: Object.assign(Object.assign({ gridArea: buildGridArea(cell), width: cell.width ? `${cell.width}px` : 'unset', height: cell.height ? `${cell.height}px` : 'unset', transform: buildTranform(cell), borderTop: cell.rowStart === 1 ? borderStyle : 'unset', borderLeft: cell.colStart === 1 ? borderStyle : 'unset' }, (cell.active &&
+            (activeStyle || {
+                outline: '1px solid #005eb8',
+            }))), style) },
+        renderCellContent(cell, idx),
+        ['top', 'right', 'bottom', 'left'].map(direction => (React.createElement("div", { key: direction, className: `resize-${direction}`, onMouseDown: e => handleDown(direction, idx, e), onMouseUp: e => handleUp(direction, idx, e) })))));
+};

package/es/components/molecules/ResizeGrid/components/Cell/index.d.ts

@@ -0,0 +1 @@
+export { Cell } from './Cell';

package/es/components/molecules/ResizeGrid/components/Cell/index.js

@@ -0,0 +1 @@
+export { Cell } from './Cell';

package/es/components/molecules/ResizeGrid/components/Cell/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledCell: import("styled-components").StyledComponent<"div", any, {
+    borderStyle: string;
+}, never>;

package/es/components/molecules/ResizeGrid/components/Cell/styled.js

@@ -0,0 +1,62 @@
+// Libraries
+import styled from 'styled-components';
+export const StyledCell = styled.div `
+  border: ${props => props.borderStyle};
+  border-top: none;
+  border-left: none;
+  position: relative;
+  user-select: none;
+
+  .resize-top,
+  .resize-right,
+  .resize-bottom,
+  .resize-left {
+    position: absolute;
+  }
+
+  .resize-top,
+  .resize-bottom {
+    width: 100%;
+    height: 2px;
+    left: -1px;
+    cursor: row-resize;
+  }
+  .resize-left,
+  .resize-right {
+    width: 2px;
+    height: 100%;
+    top: -1px;
+    cursor: col-resize;
+  }
+
+  .resize-top {
+    // background: red;
+    top: -1px;
+  }
+  .resize-right {
+    // background: green;
+    right: -1px;
+  }
+  .resize-bottom {
+    // background: blue;
+    bottom: -1px;
+  }
+  .resize-left {
+    // background: yellow;
+    left: -1px;
+  }
+  .imageWrapper {
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      -webkit-user-drag: none;
+    }
+  }
+`;

package/es/components/molecules/ResizeGrid/constant.d.ts

@@ -0,0 +1,34 @@
+import { TGrid } from './types';
+export declare const GRID_TEMPLATE: {
+    GRID_2_3: {
+        rows: number;
+        cols: number;
+    };
+    GRID_5_5: {
+        rows: number;
+        cols: number;
+    };
+    GRID_2_2: {
+        rows: number;
+        cols: number;
+    };
+    GRID_2_3_1: {
+        rows: number;
+        cols: number;
+        childs: ({
+            rowStart: number;
+            colStart: number;
+            colEnd: number;
+        } | {
+            rowStart: number;
+            colStart: number;
+            colEnd?: undefined;
+        })[];
+    };
+};
+export declare const buildCell: (cell: any) => any;
+export declare const buildGrid: (grid: Partial<TGrid>) => TGrid;
+export declare const buildGridArea: (box: any) => string;
+export declare const buildTranform: (box: any) => string;
+export declare const MIN_SIZE = 32;
+export declare const getSafety: (fn: any, defaultValue?: string) => any;

package/es/components/molecules/ResizeGrid/constant.js

@@ -0,0 +1,108 @@
+export const GRID_TEMPLATE = {
+    GRID_2_3: {
+        rows: 2,
+        cols: 3,
+    },
+    GRID_5_5: {
+        rows: 5,
+        cols: 5,
+    },
+    GRID_2_2: {
+        rows: 2,
+        cols: 2,
+    },
+    GRID_2_3_1: {
+        rows: 2,
+        cols: 3,
+        childs: [
+            {
+                rowStart: 1,
+                colStart: 1,
+                colEnd: 4,
+            },
+            {
+                rowStart: 2,
+                colStart: 1,
+            },
+            {
+                rowStart: 2,
+                colStart: 2,
+            },
+            {
+                rowStart: 2,
+                colStart: 3,
+            },
+        ],
+    },
+};
+export const buildCell = cell => (Object.assign({ rowEnd: cell.rowEnd || cell.rowStart + 1, colEnd: cell.colEnd || cell.colStart + 1 }, cell));
+export const buildGrid = (grid) => {
+    let childs = [];
+    let buildCol = !grid.gridTemplateColumns || !grid.gridTemplateColumns.length;
+    const buildRow = !grid.gridTemplateRows || !grid.gridTemplateRows.length;
+    const buildChild = !grid.childs || !grid.childs.length;
+    const gridTemplateColumns = grid.gridTemplateColumns || [];
+    const gridTemplateRows = grid.gridTemplateRows || [];
+    if (!buildChild && grid.childs) {
+        childs = grid.childs.map(buildCell);
+    }
+    if (buildChild || buildRow || buildCol) {
+        Array(grid.rows)
+            .fill(1)
+            .forEach((_, row) => {
+            if (buildRow && grid.rows) {
+                gridTemplateRows.push(100 / grid.rows);
+            }
+            Array(grid.cols)
+                .fill(1)
+                .forEach((__, col) => {
+                if (buildChild) {
+                    childs.push({
+                        rowStart: row + 1,
+                        rowEnd: row + 2,
+                        colStart: col + 1,
+                        colEnd: col + 2,
+                        // image: {
+                        //   imageStyles: {},
+                        //   imageSettings: {},
+                        //   imageUrl: 'https://source.unsplash.com/random/300×300'
+                        // },
+                        objectFit: 'contain',
+                    });
+                }
+                if (buildCol && grid.cols) {
+                    gridTemplateColumns.push(100 / grid.cols);
+                }
+            });
+            buildCol = false;
+        });
+    }
+    return Object.assign(Object.assign({ rows: grid.rows || 1, cols: grid.rows || 1 }, grid), { gridTemplateColumns,
+        gridTemplateRows,
+        childs });
+};
+export const buildGridArea = box => 
+// console.log('area', box, `${box.rowStart} / ${box.colStart} / ${box.rowEnd} / ${box.colEnd}`)
+`${box.rowStart} / ${box.colStart} / ${box.rowEnd} / ${box.colEnd}`;
+export const buildTranform = box => {
+    const { transformX, transformY } = box;
+    if (transformX && transformY) {
+        return `translate(${transformX}px, ${transformY}px)`;
+    }
+    if (transformX) {
+        return `translateX(${transformX}px)`;
+    }
+    if (transformY) {
+        return `translateY(${transformY}px)`;
+    }
+    return 'unset';
+};
+export const MIN_SIZE = 32;
+export const getSafety = (fn, defaultValue = '') => {
+    try {
+        return fn();
+    }
+    catch (e) {
+        return defaultValue;
+    }
+};

package/es/components/molecules/ResizeGrid/index.d.ts

@@ -0,0 +1,2 @@
+export { ResizeGrid } from './ResizeGrid';
+export type { TGrid, TCell, IResizeGridProps } from './types';

package/es/components/molecules/ResizeGrid/index.js

@@ -0,0 +1 @@
+export { ResizeGrid } from './ResizeGrid';

package/es/components/molecules/ResizeGrid/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledGrid: import("styled-components").StyledComponent<"div", any, {
+    isCompact: boolean;
+}, never>;

package/es/components/molecules/ResizeGrid/styled.js

@@ -0,0 +1,20 @@
+// Libraries
+import styled from 'styled-components';
+export const StyledGrid = styled.div `
+  width: 100%;
+  box-sizing: border-box;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .grid-container {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    background-repeat: no-repeat;
+    background-position: top left;
+    background-size: 100% 100%;
+    aspect-ratio: ${props => (props.isCompact ? '3 / 1' : '3 / 2')};
+  }
+`;