nzk-react-components 0.4.6-1 → 0.4.6-2

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "nzk-react-components",
-  "version": "0.4.6-1",
+  "version": "0.4.6-2",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
   "files": [
     "dist"
   ],
+  "sideEffects": false,
   "types": "dist/index.d.ts",
+  "module": "dist/esm/index.js",
   "devDependencies": {
     "@babel/core": "^7.14.8",
     "@rollup/plugin-commonjs": "^20.0.0",
@@ -70,7 +72,7 @@
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "build": "rollup -c",
+    "build": "rm -rf dist && rollup -c",
     "build:before": "rm -rf dist",
     "svgr": "svgr --icon --typescript -d src src/assets",
     "deploy:storybook": "npx -p @storybook/storybook-deployer storybook-to-ghpages",

package/dist/components/DrawingTool/DrawingTool.d.ts

@@ -1,29 +0,0 @@
-/// <reference types="react" />
-export interface Props {
-    prompt: string;
-    showHeader: boolean;
-    onBack: () => void;
-    onSave: () => void;
-    showPaperBackground?: boolean;
-    disableCameraUpload?: boolean;
-    minImageUploadSize?: number;
-    disableAutoCache?: boolean;
-    openUploadPopupOnStart?: boolean;
-    cacheKey?: string;
-}
-export declare type Orientation = 'LANDSCAPE' | 'PORTRAIT';
-declare const Drawing: {
-    (props: Props): JSX.Element;
-    defaultProps: {
-        prompt: string;
-        showHeader: boolean;
-        onBack: () => void;
-        onSave: () => void;
-        showPaperBackground: boolean;
-        disableCameraUpload: boolean;
-        disableAutoCache: boolean;
-        cacheKey: string;
-        openUploadPopupOnStart: boolean;
-    };
-};
-export default Drawing;

package/dist/components/DrawingTool/DrawingTool.js

@@ -1,277 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-var polished = require('polished');
-var Moveable = require('react-moveable');
-var MoveableHelper = require('moveable-helper');
-var ReactTooltip = require('react-tooltip');
-var DrawingTool_styles = require('./DrawingTool.styles.js');
-var useDebounce = require('../../hooks/useDebounce.js');
-var useElementSize = require('../../hooks/useElementSize.js');
-var Button = require('../Button/Button.js');
-var Icon = require('../Icon/Icon.js');
-var IconButton = require('../IconButton/IconButton.js');
-var ColourToolbar = require('./components/ColourToolbar/ColourToolbar.js');
-var Modal = require('../Modal/Modal.js');
-var DrawingToolProvider = require('./DrawingToolProvider.js');
-var FileInput = require('./components/FileInput/FileInput.js');
-var index = require('./components/Placeable/index.js');
-var OpacityToggle = require('./components/OpacityToggle/OpacityToggle.js');
-var Header = require('./components/Header/Header.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Moveable__default = /*#__PURE__*/_interopDefaultLegacy(Moveable);
-var MoveableHelper__default = /*#__PURE__*/_interopDefaultLegacy(MoveableHelper);
-var ReactTooltip__default = /*#__PURE__*/_interopDefaultLegacy(ReactTooltip);
-
-var Drawing = function (props) {
-    var _a, _b;
-    var containerRef = React.useRef(null);
-    var sketchOuterRef = React.useRef(null);
-    var sketchInnerRef = React.useRef(null);
-    var sketchCutInnerRef = React.useRef(null);
-    var imageToPlaceContainerRef = React.useRef(null);
-    var moveableRef = React.useRef(null);
-    var helper = React.useState(function () {
-        return new MoveableHelper__default['default']();
-    })[0];
-    var _c = useElementSize(containerRef), containerWidth = _c.width, containerHeight = _c.height;
-    var debouncedContainerWidth = useDebounce(containerWidth, 1000);
-    var debouncedContainerHeight = useDebounce(containerHeight, 1000);
-    var _d = React.useState('LANDSCAPE'), orientation = _d[0], setOrientation = _d[1];
-    var _e = React.useState(1280), maxContainerWidth = _e[0], setMaxContainerWidth = _e[1];
-    var _f = React.useState(960), maxContainerHeight = _f[0], setMaxContainerHeight = _f[1];
-    var _g = React.useState(50), buttonSize = _g[0], setButtonSize = _g[1];
-    var _h = React.useState(false), isMobile = _h[0], setIsMobile = _h[1];
-    var _j = React.useState(true), resizing = _j[0], setResizing = _j[1];
-    var _k = React.useState(false), showRestartConfirmModal = _k[0], setShowRestartConfirmModal = _k[1];
-    var _l = React.useState(props.openUploadPopupOnStart), showFileInput = _l[0], setShowFileInput = _l[1];
-    var _m = React.useState(), imageToCut = _m[0], setImageToCut = _m[1];
-    var _o = React.useState(true), showCutTutorial = _o[0], setShowCutTutorial = _o[1];
-    var _p = React.useState(false), showSaveCutAction = _p[0], setShowSaveCutAction = _p[1];
-    var _q = React.useState(), imageToPlace = _q[0], setImageToPlace = _q[1];
-    var _r = DrawingToolProvider.useDrawingTool(), initSketch = _r.initSketch, initSketchCut = _r.initSketchCut, exportSketchCut = _r.exportSketchCut, currentColour = _r.currentColour, brushSize = _r.brushSize, setBrushSize = _r.setBrushSize, brushType = _r.brushType, setBrushType = _r.setBrushType, undo = _r.undo, redo = _r.redo, restart = _r.restart, setCacheKey = _r.setCacheKey, setAutoCache = _r.setAutoCache, resetCut = _r.resetCut, mergeImage = _r.mergeImage, setToolMode = _r.setToolMode;
-    React.useEffect(function () {
-        if (typeof props.disableAutoCache === 'boolean') {
-            setAutoCache(!props.disableAutoCache);
-        }
-        if (props.cacheKey)
-            setCacheKey(props.cacheKey);
-    }, []);
-    React.useLayoutEffect(function () {
-        if (debouncedContainerHeight !== containerHeight || debouncedContainerWidth !== containerWidth) {
-            setResizing(true);
-        }
-        else if (containerWidth > 0 && containerHeight > 0) {
-            setResizing(false);
-            if (containerWidth < 768) {
-                setIsMobile(true);
-            }
-            else {
-                setIsMobile(false);
-            }
-        }
-    }, [debouncedContainerWidth, debouncedContainerHeight, containerWidth, containerHeight]);
-    React.useLayoutEffect(function () {
-        setMaxContainerHeight(containerWidth * 1.4);
-        setMaxContainerWidth(containerHeight * 1.4);
-        if (containerWidth < containerHeight && containerWidth < 1024) {
-            setButtonSize(Math.floor(containerWidth / 11) * 0.85);
-            setOrientation('PORTRAIT');
-        }
-        else {
-            if (containerHeight < 420) {
-                setButtonSize(Math.floor(containerHeight / 13) * 0.85);
-            }
-            else if (containerHeight < 1024) {
-                setButtonSize(Math.floor(containerHeight / 12) * 0.85);
-            }
-            else {
-                setButtonSize(Math.floor(containerHeight / 11) * 0.85);
-            }
-            setOrientation('LANDSCAPE');
-        }
-    }, [containerWidth, containerHeight]);
-    React.useEffect(function () {
-        if (!imageToCut && !resizing && sketchInnerRef.current) {
-            initSketch(sketchInnerRef.current);
-        }
-    }, [resizing, sketchInnerRef, imageToCut]);
-    React.useEffect(function () {
-        if (!resizing && sketchCutInnerRef.current && imageToCut) {
-            initSketchCut(sketchCutInnerRef.current, imageToCut, function () {
-                setShowSaveCutAction(true);
-            });
-        }
-    }, [resizing, sketchCutInnerRef, imageToCut]);
-    var onClickRestart = function () {
-        setShowRestartConfirmModal(true);
-    };
-    var onClickCamera = function () {
-        setShowFileInput(true);
-    };
-    var onImageUploaded = function (image) {
-        setShowFileInput(false);
-        setImageToCut(image);
-        setToolMode("CUT");
-    };
-    var strokeBrushColour = polished.getLuminance(currentColour.hex) > 0.05 ? polished.darken(0.15, currentColour.hex) : polished.lighten(0.1, currentColour.hex);
-    var deselectedButtonColourProps = {
-        theme: 'white'
-    };
-    var selectedButtonColourProps = {
-        backgroundColor: currentColour.hex,
-        strokeColor: strokeBrushColour,
-        dropShadowColor: 'rgba(0,0,0,.3)',
-        shadowColor: 'rgba(0,0,0,.5)'
-    };
-    var eraserBrushColourProps = (brushType === 'eraser' ? selectedButtonColourProps : deselectedButtonColourProps);
-    var fillBrushColourProps = (brushType === 'fill' ? selectedButtonColourProps : deselectedButtonColourProps);
-    var lineBrushColourProps = (brushType === 'line' ? selectedButtonColourProps : deselectedButtonColourProps);
-    var smallLineColourProps = (brushSize === DrawingToolProvider.BrushSize.small ? selectedButtonColourProps : deselectedButtonColourProps);
-    var mediumLineColourProps = (brushSize === DrawingToolProvider.BrushSize.medium ? selectedButtonColourProps : deselectedButtonColourProps);
-    var largeLineColourProps = (brushSize === DrawingToolProvider.BrushSize.large ? selectedButtonColourProps : deselectedButtonColourProps);
-    var sketchStyles;
-    if (!resizing && sketchOuterRef && sketchOuterRef.current) {
-        sketchStyles = {
-            width: sketchOuterRef.current.offsetWidth + "px",
-            height: sketchOuterRef.current.offsetHeight + "px",
-            position: 'absolute',
-            top: '0px',
-            left: '0px'
-        };
-    }
-    var disableToolbars = (showFileInput || showRestartConfirmModal || imageToCut || imageToPlace);
-    var inSketchActions = [];
-    if (showSaveCutAction) {
-        inSketchActions.push({
-            key: 'retry-cut',
-            component: React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(Icon, { name: "drawing-tool-undo", fill: "white" }), theme: 'orange', size: isMobile ? "small" : "regular", onClick: function () {
-                    setShowSaveCutAction(false);
-                    setShowCutTutorial(true);
-                    resetCut();
-                } }, "Retry")
-        }, {
-            key: 'save-cut',
-            component: React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(Icon, { name: "tick" }), theme: 'confirm', size: isMobile ? "small" : "regular", onClick: function () {
-                    setShowSaveCutAction(false);
-                    setImageToCut(undefined);
-                    var newImage = new Image;
-                    newImage.onload = function () {
-                        setImageToPlace(newImage);
-                        setToolMode('PLACE');
-                    };
-                    newImage.src = exportSketchCut();
-                } }, "Save")
-        });
-    }
-    else if (imageToPlace) {
-        inSketchActions.push({
-            key: 'cancel-place',
-            component: React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(Icon, { name: "close" }), theme: 'red', size: isMobile ? "small" : "regular", onClick: function () {
-                    setImageToPlace(undefined);
-                    setToolMode('DRAW');
-                } }, "Cancel")
-        }, {
-            key: 'save-place',
-            component: React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(Icon, { name: "tick" }), theme: 'confirm', size: isMobile ? "small" : "regular", onClick: function () {
-                    if (moveableRef.current) {
-                        var rect = moveableRef.current.getRect();
-                        mergeImage({
-                            image: imageToPlace,
-                            x: rect.left,
-                            y: rect.top,
-                            origin: rect.origin,
-                            width: Math.hypot(rect.pos2[0] - rect.pos1[0], rect.pos2[1] - rect.pos1[1]),
-                            height: Math.hypot(rect.pos3[0] - rect.pos2[0], rect.pos3[1] - rect.pos2[1]),
-                            rotation: rect.rotation
-                        });
-                        setToolMode('DRAW');
-                        setImageToPlace(undefined);
-                    }
-                } }, "Save")
-        });
-    }
-    var headerHeight = 90;
-    if (containerHeight < 800 || containerWidth < 728)
-        headerHeight = 70;
-    if (containerHeight < 500 || containerWidth < 500)
-        headerHeight = 50;
-    return React__default['default'].createElement(DrawingTool_styles.Container, { ref: containerRef, maxWidth: maxContainerWidth, maxHeight: maxContainerHeight },
-        props.showHeader && React__default['default'].createElement(Header, { height: headerHeight, prompt: props.prompt, onBack: props.onBack, onSave: props.onSave }),
-        React__default['default'].createElement(DrawingTool_styles.Tool, { hasHeader: props.showHeader, headerHeight: headerHeight, orientation: orientation },
-            React__default['default'].createElement(ReactTooltip__default['default'], { effect: "solid", delayShow: 750, multiline: true }),
-            React__default['default'].createElement(DrawingTool_styles.LeftToolbarContainer, { orientation: orientation, buttonSize: buttonSize, disabled: disableToolbars },
-                React__default['default'].createElement(DrawingTool_styles.ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
-                    React__default['default'].createElement(Button, { "data-tip": "Start again?", height: buttonSize, round: true, theme: 'red', onClick: onClickRestart },
-                        React__default['default'].createElement(Icon, { name: 'trash-white' }))),
-                React__default['default'].createElement(DrawingTool_styles.ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
-                    React__default['default'].createElement(Button, { height: buttonSize, round: true, theme: "white", onClick: undo },
-                        React__default['default'].createElement(Icon, { fill: currentColour.hex, name: 'drawing-tool-undo' })),
-                    React__default['default'].createElement(Button, { height: buttonSize, round: true, theme: "white", onClick: redo },
-                        React__default['default'].createElement(Icon, { fill: currentColour.hex, name: 'drawing-tool-redo' }))),
-                !props.disableCameraUpload && React__default['default'].createElement(DrawingTool_styles.ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
-                    React__default['default'].createElement(Button, { "data-tip": "Upload a drawing", height: buttonSize, round: true, theme: 'purple', onClick: onClickCamera },
-                        React__default['default'].createElement(Icon, { name: 'drawing-tool-camera' }))),
-                React__default['default'].createElement(DrawingTool_styles.ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
-                    React__default['default'].createElement(Button, tslib.__assign({ height: buttonSize, round: true }, eraserBrushColourProps, { onClick: function () { return setBrushType('eraser'); } }),
-                        React__default['default'].createElement(Icon, { "data-tip": "Eraser", fill: brushType === 'eraser' ? 'white' : currentColour.hex, name: 'drawing-tool-eraser' })),
-                    React__default['default'].createElement(Button, tslib.__assign({ "data-tip": "Fill brush", height: buttonSize, round: true }, fillBrushColourProps, { onClick: function () { return setBrushType('fill'); } }),
-                        React__default['default'].createElement(Icon, { fill: brushType === 'fill' ? 'white' : currentColour.hex, name: 'drawing-tool-fill-brush' })),
-                    React__default['default'].createElement(Button, tslib.__assign({ "data-tip": "Line brush", height: buttonSize, round: true }, lineBrushColourProps, { onClick: function () { return setBrushType('line'); } }),
-                        React__default['default'].createElement(Icon, { fill: brushType === 'line' ? 'white' : currentColour.hex, name: 'drawing-tool-line-brush' })),
-                    React__default['default'].createElement(Button, tslib.__assign({ height: buttonSize, round: true }, smallLineColourProps, { onClick: function () { return setBrushSize(DrawingToolProvider.BrushSize.small); } }),
-                        React__default['default'].createElement(Icon, { fill: brushSize === DrawingToolProvider.BrushSize.small ? 'white' : currentColour.hex, name: 'drawing-tool-small-line' })),
-                    React__default['default'].createElement(Button, tslib.__assign({ height: buttonSize, round: true }, mediumLineColourProps, { onClick: function () { return setBrushSize(DrawingToolProvider.BrushSize.medium); } }),
-                        React__default['default'].createElement(Icon, { fill: brushSize === DrawingToolProvider.BrushSize.medium ? 'white' : currentColour.hex, name: 'drawing-tool-medium-line' })),
-                    React__default['default'].createElement(Button, tslib.__assign({ height: buttonSize, round: true }, largeLineColourProps, { onClick: function () { return setBrushSize(DrawingToolProvider.BrushSize.large); } }),
-                        React__default['default'].createElement(Icon, { fill: brushSize === DrawingToolProvider.BrushSize.large ? 'white' : currentColour.hex, name: 'drawing-tool-large-line' })))),
-            React__default['default'].createElement(DrawingTool_styles.SketchContainer, { orientation: orientation, ref: sketchOuterRef },
-                props.showPaperBackground && React__default['default'].createElement(DrawingTool_styles.PaperBackground, { cutMode: imageToCut && true }),
-                !imageToCut && sketchStyles && React__default['default'].createElement("div", { style: sketchStyles, ref: sketchInnerRef }),
-                imageToCut && sketchStyles && React__default['default'].createElement("div", { style: sketchStyles, ref: sketchCutInnerRef }),
-                imageToPlace && sketchStyles && (React__default['default'].createElement("div", { style: tslib.__assign(tslib.__assign({}, sketchStyles), { zIndex: '101' }) },
-                    React__default['default'].createElement(DrawingTool_styles.ImageToPlaceContainer, null,
-                        React__default['default'].createElement(DrawingTool_styles.ImageToPlace, { ref: imageToPlaceContainerRef, src: imageToPlace.src })),
-                    React__default['default'].createElement(Moveable__default['default'], { ref: moveableRef, target: imageToPlaceContainerRef, ables: [index], props: {
-                            placeable: true,
-                        }, snappable: true, bounds: { left: 0, top: 0, bottom: (_a = sketchOuterRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight, right: (_b = sketchOuterRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth }, draggable: true, scalable: true, keepRatio: true, rotatable: true, onDragStart: helper.onDragStart, onDrag: helper.onDrag, onScaleStart: helper.onScaleStart, onScale: helper.onScale, onRotateStart: helper.onRotateStart, onRotate: helper.onRotate }))),
-                inSketchActions.length && (React__default['default'].createElement(DrawingTool_styles.InSketchActions, null, inSketchActions.map(function (action) { return (React__default['default'].createElement(DrawingTool_styles.InSketchAction, { key: action.key }, action.component)); }))),
-                imageToCut && showCutTutorial && React__default['default'].createElement(DrawingTool_styles.CutImageTutorial, { onClick: function () { return setShowCutTutorial(false); } },
-                    React__default['default'].createElement("div", null, "Now cut out your animal: Click, hold and make sure you draw around it."),
-                    React__default['default'].createElement("img", { alt: "crop example", src: "https://cdn.nightzookeeper.com/nzk-assets/crop-tutorial.png" }),
-                    React__default['default'].createElement("div", null,
-                        React__default['default'].createElement(Button, { size: isMobile ? "small" : "regular", theme: "primary" }, "Ok")))),
-            React__default['default'].createElement(DrawingTool_styles.RightToolbarContainer, { orientation: orientation, buttonSize: buttonSize, disabled: disableToolbars },
-                React__default['default'].createElement(ColourToolbar, { orientation: orientation, size: buttonSize, currentColour: currentColour }),
-                React__default['default'].createElement(OpacityToggle, { orientation: orientation, buttonSize: buttonSize }))),
-        showRestartConfirmModal && React__default['default'].createElement(DrawingTool_styles.ModalOverlay, null,
-            React__default['default'].createElement(Modal, { title: "Are you sure?", actions: [
-                    React__default['default'].createElement(Button, { key: 'cancel', size: isMobile ? "small" : "regular", theme: "red", onClick: function () {
-                            setShowRestartConfirmModal(false);
-                        } }, "No"),
-                    React__default['default'].createElement(Button, { key: 'confirm', size: isMobile ? "small" : "regular", theme: "confirm", onClick: function () {
-                            restart();
-                            setShowRestartConfirmModal(false);
-                        } }, "Yes"),
-                ] })),
-        showFileInput && React__default['default'].createElement(DrawingTool_styles.ModalOverlay, null,
-            React__default['default'].createElement(FileInput, { isMobile: isMobile, dismiss: function () { return setShowFileInput(false); }, onImageUploaded: onImageUploaded, minImageSize: props.minImageUploadSize })));
-};
-Drawing.defaultProps = {
-    prompt: 'Draw your Animal',
-    showHeader: true,
-    onBack: function () { },
-    onSave: function () { },
-    showPaperBackground: true,
-    disableCameraUpload: false,
-    disableAutoCache: false,
-    cacheKey: 'nzk-sketch-cache',
-    openUploadPopupOnStart: false
-};
-
-module.exports = Drawing;
-//# sourceMappingURL=DrawingTool.js.map

package/dist/components/DrawingTool/DrawingTool.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DrawingTool.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/DrawingTool.stories.d.ts

@@ -1,6 +0,0 @@
-import { Story } from "@storybook/react";
-import { Meta } from "@storybook/react/types-6-0";
-import { Props as DrawingToolProps } from "./DrawingTool";
-declare const _default: Meta<import("@storybook/react").Args>;
-export default _default;
-export declare const Primary: Story<DrawingToolProps>;

package/dist/components/DrawingTool/DrawingTool.styles.d.ts

@@ -1,41 +0,0 @@
-import { Orientation } from './DrawingTool';
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    maxWidth: number;
-    maxHeight: number;
-}, never>;
-export declare const Tool: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    hasHeader: boolean;
-    headerHeight: number;
-}, never>;
-export declare const ButtonGroup: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    buttonSize: number;
-}, never>;
-export declare const ColourButtonGroup: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    buttonSize: number;
-}, never>;
-export declare const ScrollableColours: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LeftToolbarContainer: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    buttonSize: number;
-    disabled: boolean;
-}, never>;
-export declare const RightToolbarContainer: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    buttonSize: number;
-    disabled: boolean;
-}, never>;
-export declare const SketchContainer: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-}, never>;
-export declare const PaperBackground: import("styled-components").StyledComponent<"div", any, {
-    cutMode?: boolean | undefined;
-}, never>;
-export declare const InSketchActions: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InSketchAction: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ModalOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ImageToPlaceContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ImageToPlace: import("styled-components").StyledComponent<"img", any, {}, never>;
-export declare const CutImageTutorial: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/DrawingTool/DrawingTool.styles.js

@@ -1,54 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var getToolbarWidth = function (props) {
-    if (props.orientation === 'PORTRAIT')
-        return '100%';
-    return props.buttonSize + 10 + "px";
-};
-var getToolbarHeight = function (props) {
-    if (props.orientation === 'LANDSCAPE')
-        return '100%';
-    return props.buttonSize + 10 + "px";
-};
-var Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  position: relative;\n  width: calc(100% - 40px);\n  height: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", "px;\n  max-height: ", "px;\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  position: relative;\n  width: calc(100% - 40px);\n  height: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", "px;\n  max-height: ", "px;\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return props.maxWidth; }, function (props) { return props.maxHeight; });
-var Tool = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  height: ", ";\n  width: 100%;\n  display: flex;\n  flex-shrink: none;\n  flex-direction: ", ";\n"], ["\n  position: absolute;\n  top: ", "px;\n  height: ", ";\n  width: 100%;\n  display: flex;\n  flex-shrink: none;\n  flex-direction: ", ";\n"])), function (props) { return props.hasHeader ? props.headerHeight : 0; }, function (props) { return props.hasHeader ? "calc(100% - " + (props.headerHeight + 20) + "px)" : 'calc(100% - 20px)'; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'row' : 'column'; });
-var ButtonGroup = styled__default['default'].div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  display: flex;\n  flex-shrink: none;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  > div {\n    user-select: none;\n    margin-bottom: ", ";\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  flex-shrink: none;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  > div {\n    user-select: none;\n    margin-bottom: ", ";\n    margin-right: ", ";\n  }\n"])), function (props) { return props.orientation === 'LANDSCAPE' ? Math.floor(props.buttonSize / 5) + "px" : 0; }, function (props) { return props.orientation === 'PORTRAIT' ? Math.floor(props.buttonSize / 5) + "px" : 0; });
-styled__default['default'].div(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n  background-color: rgba(255, 255, 255, .5);\n  border-radius: ", "px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  padding-left: ", ";\n  padding-right: ", ";\n  display: flex;\n  height: 70%;\n  flex-wrap: ", ";\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  > div {\n    margin-bottom: ", ";\n    margin-right: ", ";\n  }\n"], ["\n  background-color: rgba(255, 255, 255, .5);\n  border-radius: ", "px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  padding-left: ", ";\n  padding-right: ", ";\n  display: flex;\n  height: 70%;\n  flex-wrap: ", ";\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  > div {\n    margin-bottom: ", ";\n    margin-right: ", ";\n  }\n"])), function (props) { return props.buttonSize; }, function (props) { return props.orientation === 'PORTRAIT' ? '8px' : 0; }, function (props) { return props.orientation === 'PORTRAIT' ? '8px' : 0; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'wrap' : 'no-wrap'; }, function (props) { return props.orientation === 'LANDSCAPE' ? Math.floor(props.buttonSize / 5) + "px" : 0; }, function (props) { return props.orientation === 'PORTRAIT' ? Math.floor(props.buttonSize / 5) + "px" : 0; });
-styled__default['default'].div(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n  overflow: hidden;\n"], ["\n  overflow: hidden;\n"])));
-var LeftToolbarContainer = styled__default['default'].div(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n  position: relative;\n  pointer-events: ", ";\n  opacity: ", ";\n  filter: ", ";\n  width: ", ";\n  height: ", ";\n  order: ", ";\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  position: relative;\n  pointer-events: ", ";\n  opacity: ", ";\n  filter: ", ";\n  width: ", ";\n  height: ", ";\n  order: ", ";\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  align-items: center;\n"])), function (props) { return props.disabled ? 'none' : 'all'; }, function (props) { return props.disabled ? 0.5 : 1; }, function (props) { return props.disabled ? 'grayscale(100%)' : 'none'; }, function (props) { return getToolbarWidth(props); }, function (props) { return getToolbarHeight(props); }, function (props) { return props.orientation === 'LANDSCAPE' ? 1 : 2; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'column' : 'row'; });
-var RightToolbarContainer = styled__default['default'].div(templateObject_7 || (templateObject_7 = tslib.__makeTemplateObject(["\n  position: relative;\n  width: ", ";\n  max-height: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n  filter: ", ";\n  order: 3;\n  justify-content: space-between;\n  display: flex;\n  flex-direction: ", ";\n  margin-top: ", ";\n  align-items: center;\n"], ["\n  position: relative;\n  width: ", ";\n  max-height: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n  filter: ", ";\n  order: 3;\n  justify-content: space-between;\n  display: flex;\n  flex-direction: ", ";\n  margin-top: ", ";\n  align-items: center;\n"])), function (props) { return getToolbarWidth(props); }, function (props) { return getToolbarHeight(props); }, function (props) { return props.disabled ? 0.5 : 1; }, function (props) { return props.disabled ? 'none' : 'all'; }, function (props) { return props.disabled ? 'grayscale(100%)' : 'none'; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'column' : 'row'; }, function (props) { return props.orientation === 'PORTRAIT' ? '10px' : '0px'; });
-var SketchContainer = styled__default['default'].div(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n  position: relative;\n  flex: 1 1 auto;\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  order: ", ";\n\n  .moveable-rotation .moveable-control.moveable-rotation-control {\n    border: none !important;\n    width: 24px !important;\n    height: 24px !important;\n    margin-top: -12px !important;\n    margin-left: -12px !important;\n    cursor: alias;\n    opacity: 0;\n  }\n\n  .moveable-control {\n    width: 24px !important;\n    height: 24px !important;\n    margin-top: -12px !important;\n    margin-left: -12px !important;\n    border: none !important;\n  }\n\n  .moveable-line.moveable-rotation-line {\n    width: 4px !important;\n    height: 40px !important;\n    margin-left: -1px;\n  }\n\n  .moveable-line {\n    height: 4px !important;\n  }\n\n  .moveable-origin {\n    display: none !important;\n  }\n}"], ["\n  position: relative;\n  flex: 1 1 auto;\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  order: ", ";\n\n  .moveable-rotation .moveable-control.moveable-rotation-control {\n    border: none !important;\n    width: 24px !important;\n    height: 24px !important;\n    margin-top: -12px !important;\n    margin-left: -12px !important;\n    cursor: alias;\n    opacity: 0;\n  }\n\n  .moveable-control {\n    width: 24px !important;\n    height: 24px !important;\n    margin-top: -12px !important;\n    margin-left: -12px !important;\n    border: none !important;\n  }\n\n  .moveable-line.moveable-rotation-line {\n    width: 4px !important;\n    height: 40px !important;\n    margin-left: -1px;\n  }\n\n  .moveable-line {\n    height: 4px !important;\n  }\n\n  .moveable-origin {\n    display: none !important;\n  }\n}"])), function (props) { return props.orientation === 'LANDSCAPE' ? '10px' : '0px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '20px' : '0px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '0px' : '10px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? 2 : 1; });
-var PaperBackground = styled__default['default'].div(templateObject_9 || (templateObject_9 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  box-shadow: 0px 4px 0px #C7C7C6;\n  background: ", ";\n\n  &:before, &:after {\n    z-index: -1;\n    position: absolute;\n    content: \"\";\n    bottom: 7px;\n    left: 10px;\n    width: 50%;\n    top: 80%;\n    max-width: 300px;\n    background: rgba(0,0,0,.3);\n    box-shadow: 0 15px 0px rgba(0,0,0,.3);\n    transform: rotate(-3deg);\n  }\n  &:after {\n    transform: rotate(3deg);\n    right: 10px;\n    left: auto;\n  }\n"], ["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  box-shadow: 0px 4px 0px #C7C7C6;\n  background: ", ";\n\n  &:before, &:after {\n    z-index: -1;\n    position: absolute;\n    content: \"\";\n    bottom: 7px;\n    left: 10px;\n    width: 50%;\n    top: 80%;\n    max-width: 300px;\n    background: rgba(0,0,0,.3);\n    box-shadow: 0 15px 0px rgba(0,0,0,.3);\n    transform: rotate(-3deg);\n  }\n  &:after {\n    transform: rotate(3deg);\n    right: 10px;\n    left: auto;\n  }\n"])), function (props) { return props.cutMode
-    ? 'repeating-linear-gradient(-45deg, #ebebeb, #ebebeb 20px, #dfdfdf 20px, #dfdfdf 40px)'
-    : '#ebebeb'; });
-var InSketchActions = styled__default['default'].div(templateObject_10 || (templateObject_10 = tslib.__makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  bottom: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 102;\n  @media (max-width: 768px) {\n    bottom: 10px;\n  }\n  @media (max-height: 500px) {\n    bottom: 10px;\n  }\n"], ["\n  position: absolute;\n  width: 100%;\n  bottom: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 102;\n  @media (max-width: 768px) {\n    bottom: 10px;\n  }\n  @media (max-height: 500px) {\n    bottom: 10px;\n  }\n"])));
-var InSketchAction = styled__default['default'].div(templateObject_11 || (templateObject_11 = tslib.__makeTemplateObject(["\n  position: relative;\n  margin-right: 20px;\n"], ["\n  position: relative;\n  margin-right: 20px;\n"])));
-var ModalOverlay = styled__default['default'].div(templateObject_12 || (templateObject_12 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-var ImageToPlaceContainer = styled__default['default'].div(templateObject_13 || (templateObject_13 = tslib.__makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 101;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 101;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}"])));
-var ImageToPlace = styled__default['default'].img(templateObject_14 || (templateObject_14 = tslib.__makeTemplateObject(["\n  position: absolute;\n  width: 80%;\n  max-width: 400px;\n  @media (max-width: 768px) {\n    max-width: 200px;\n  }\n  @media (max-height: 600px) {\n    width: auto;\n    height: 80%;\n    max-width: none;\n    max-height: 200px;\n  }\n}\n"], ["\n  position: absolute;\n  width: 80%;\n  max-width: 400px;\n  @media (max-width: 768px) {\n    max-width: 200px;\n  }\n  @media (max-height: 600px) {\n    width: auto;\n    height: 80%;\n    max-width: none;\n    max-height: 200px;\n  }\n}\n"])));
-var CutImageTutorial = styled__default['default'].div(templateObject_15 || (templateObject_15 = tslib.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  left: 50%;\n  top: 50%;\n  width: 90%;\n  height: 90%;\n  transform: translate(-50%, -50%);\n  max-width: 800px;\n  max-height: 600px;\n  background-color: white;\n  z-index: 101;\n  border-radius: 50px;\n  padding: 40px;\n  background-color: #341644;\n  box-shadow: 0 -5px 0 #531D75, 0 10px 0 #1C042B, 0 14px 0 rgba(0,0,0,0.3);\n  box-sizing: border-box;\n  color: white;\n  font-size: 30px;\n  text-align: center;\n\n  @media (max-width: 960px) {\n    font-size: 24px;\n  }\n\n  @media (max-width: 760px), (max-height: 600px) {\n    font-size: 16px;\n    width: 95%;\n    padding: 30px;\n  }\n\n  img {\n    width: 100%;\n    max-width: 350px;\n    @media (max-width: 960px) {\n      max-width: 250px;\n    }\n    @media (max-width: 760px), (max-height: 600px) {\n      max-width: 120px;\n    }\n  }\n  > :last-child {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n\n"], ["\n  position: absolute;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  left: 50%;\n  top: 50%;\n  width: 90%;\n  height: 90%;\n  transform: translate(-50%, -50%);\n  max-width: 800px;\n  max-height: 600px;\n  background-color: white;\n  z-index: 101;\n  border-radius: 50px;\n  padding: 40px;\n  background-color: #341644;\n  box-shadow: 0 -5px 0 #531D75, 0 10px 0 #1C042B, 0 14px 0 rgba(0,0,0,0.3);\n  box-sizing: border-box;\n  color: white;\n  font-size: 30px;\n  text-align: center;\n\n  @media (max-width: 960px) {\n    font-size: 24px;\n  }\n\n  @media (max-width: 760px), (max-height: 600px) {\n    font-size: 16px;\n    width: 95%;\n    padding: 30px;\n  }\n\n  img {\n    width: 100%;\n    max-width: 350px;\n    @media (max-width: 960px) {\n      max-width: 250px;\n    }\n    @media (max-width: 760px), (max-height: 600px) {\n      max-width: 120px;\n    }\n  }\n  > :last-child {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
-
-exports.ButtonGroup = ButtonGroup;
-exports.Container = Container;
-exports.CutImageTutorial = CutImageTutorial;
-exports.ImageToPlace = ImageToPlace;
-exports.ImageToPlaceContainer = ImageToPlaceContainer;
-exports.InSketchAction = InSketchAction;
-exports.InSketchActions = InSketchActions;
-exports.LeftToolbarContainer = LeftToolbarContainer;
-exports.ModalOverlay = ModalOverlay;
-exports.PaperBackground = PaperBackground;
-exports.RightToolbarContainer = RightToolbarContainer;
-exports.SketchContainer = SketchContainer;
-exports.Tool = Tool;
-//# sourceMappingURL=DrawingTool.styles.js.map

package/dist/components/DrawingTool/DrawingTool.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DrawingTool.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/DrawingToolProvider.d.ts

@@ -1,56 +0,0 @@
-/// <reference types="react" />
-import { SketchActionMergeData } from './lib/SketchModel';
-export declare const BrushSize: {
-    small: number;
-    medium: number;
-    large: number;
-};
-export declare type BrushType = 'fill' | 'line' | 'eraser';
-export declare const Colours: {
-    rgb: number[];
-    hex: string;
-}[];
-export interface Colour {
-    rgb: number[];
-    hex: string;
-}
-declare type ToolMode = 'LOADING' | 'DRAW' | 'CUT' | 'PLACE';
-export interface Props {
-    cache?: string;
-}
-export declare const DrawingToolProvider: import("react").ComponentType<import("unstated-next").ContainerProviderProps<Props>>;
-export declare const useDrawingTool: () => {
-    initSketch: (containerEl: any) => void;
-    initSketchCut: (containerEl: any, imageToCut: HTMLImageElement, onImageCut: () => void) => void;
-    exportSketch: (options?: {
-        crop: boolean;
-    }) => string;
-    exportSketchCut: () => string;
-    currentColour: {
-        rgb: number[];
-        hex: string;
-    };
-    setCurrentColour: import("react").Dispatch<import("react").SetStateAction<{
-        rgb: number[];
-        hex: string;
-    }>>;
-    brushOpacity: number;
-    setBruchOpacity: import("react").Dispatch<import("react").SetStateAction<number>>;
-    brushSize: number;
-    setBrushSize: import("react").Dispatch<import("react").SetStateAction<number>>;
-    brushType: string;
-    setBrushType: import("react").Dispatch<import("react").SetStateAction<string>>;
-    undo: () => void;
-    redo: () => void;
-    restart: () => void;
-    onSketchChange: () => void;
-    setCacheKey: import("react").Dispatch<import("react").SetStateAction<string>>;
-    setAutoCache: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    clearCache: () => void;
-    resetCut: () => void;
-    mergeImage: (data: SketchActionMergeData) => void | null;
-    setToolMode: import("react").Dispatch<import("react").SetStateAction<ToolMode>>;
-    toolMode: ToolMode;
-    exportCache: () => string | null;
-};
-export {};