@yorab/react-paint 0.2.2

package/dist/components/Canvas.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { DrawableShape, Point, StyledShape, ToolsType } from 'types/Shapes';
+import { SelectionModeData } from 'types/Mode';
+declare type DrawerType = {
+    withGrid: boolean;
+    disabled?: boolean;
+    canGrow?: boolean;
+    width: number;
+    height: number;
+    shapes: DrawableShape[];
+    saveShapes: () => void;
+    addShape: (newShape: DrawableShape) => void;
+    updateSingleShape: (updatedShape: DrawableShape) => void;
+    selectedShape: DrawableShape | undefined;
+    setSelectedShape: React.Dispatch<React.SetStateAction<DrawableShape | undefined>>;
+    activeTool: ToolsType;
+    setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
+    canvasOffsetStartPosition: Point | undefined;
+    setCanvasOffsetStartPosition: React.Dispatch<React.SetStateAction<Point | undefined>>;
+    canvasOffset: Point;
+    setCanvasOffset: React.Dispatch<React.SetStateAction<Point>>;
+    defaultConf: StyledShape;
+    isInsideComponent: boolean;
+    selectionMode: SelectionModeData<number | Point>;
+    setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
+};
+declare const Canvas: React.ForwardRefExoticComponent<DrawerType & React.RefAttributes<HTMLCanvasElement>>;
+export default Canvas;

package/dist/components/Canvas.js

@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@linaria/react");
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _Shapes = require("../types/Shapes");
+
+var _draw = require("../utils/draw");
+
+var _Mode = require("../types/Mode");
+
+var _transform = require("../utils/transform");
+
+var _draw2 = require("../constants/draw");
+
+var _EditTextBox = _interopRequireDefault(require("./toolbox/EditTextBox"));
+
+var _useDrawableCanvas2 = _interopRequireDefault(require("../hooks/useDrawableCanvas"));
+
+var _icons = require("../constants/icons");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var drawCanvas = function drawCanvas(drawCtx, selectionCtx, selectionMode, width, height, activeTool, canvasOffset, shapes, selectedShape) {
+  drawCtx.clearRect(0, 0, width, height);
+  selectionCtx.clearRect(0, 0, width, height);
+
+  for (var i = shapes.length - 1; i >= 0; i--) {
+    if (selectionMode.mode !== _Mode.SelectionModeLib.textedition || shapes[i] !== selectedShape) {
+      (0, _draw.drawShape)(drawCtx, shapes[i], canvasOffset);
+    }
+  }
+
+  selectedShape && activeTool !== _Shapes.ShapeEnum.brush && (0, _draw.drawSelection)({
+    ctx: selectionCtx,
+    shape: selectedShape,
+    canvasOffset: canvasOffset,
+    withAnchors: selectionMode.mode !== _Mode.SelectionModeLib.textedition
+  });
+};
+
+var StyledCanvasBox = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledCanvasBox",
+  "class": "s9czb9p"
+});
+var StyledCanvasContainer = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledCanvasContainer",
+  "class": "s1538eht"
+});
+var StyledDrawCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
+  name: "StyledDrawCanvas",
+  "class": "s101qxdc"
+});
+var StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
+  name: "StyledSelectionCanvas",
+  "class": "sa4oq48",
+  vars: {
+    "sa4oq48-0": [function (_ref) {
+      var cursor = _ref.cursor;
+      return cursor;
+    }]
+  }
+});
+
+var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
+  var withGrid = _ref2.withGrid,
+      canGrow = _ref2.canGrow,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      width = _ref2.width,
+      height = _ref2.height,
+      shapes = _ref2.shapes,
+      addShape = _ref2.addShape,
+      updateSingleShape = _ref2.updateSingleShape,
+      selectedShape = _ref2.selectedShape,
+      setSelectedShape = _ref2.setSelectedShape,
+      saveShapes = _ref2.saveShapes,
+      activeTool = _ref2.activeTool,
+      setActiveTool = _ref2.setActiveTool,
+      canvasOffsetStartPosition = _ref2.canvasOffsetStartPosition,
+      setCanvasOffsetStartPosition = _ref2.setCanvasOffsetStartPosition,
+      canvasOffset = _ref2.canvasOffset,
+      setCanvasOffset = _ref2.setCanvasOffset,
+      defaultConf = _ref2.defaultConf,
+      isInsideComponent = _ref2.isInsideComponent,
+      selectionMode = _ref2.selectionMode,
+      setSelectionMode = _ref2.setSelectionMode;
+  var drawCanvasRef = (0, _react.useRef)(null);
+  var selectionCanvasRef = (0, _react.useRef)(null); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return drawCanvasRef.current;
+  });
+
+  var _useDrawableCanvas = (0, _useDrawableCanvas2["default"])({
+    disabled: disabled,
+    addShape: addShape,
+    drawCanvasRef: drawCanvasRef,
+    setActiveTool: setActiveTool,
+    shapes: shapes,
+    defaultConf: defaultConf,
+    selectionMode: selectionMode,
+    width: width,
+    height: height,
+    activeTool: activeTool,
+    isInsideComponent: isInsideComponent,
+    setCanvasOffset: setCanvasOffset,
+    selectedShape: selectedShape,
+    selectionCanvasRef: selectionCanvasRef,
+    canvasOffsetStartPosition: canvasOffsetStartPosition,
+    setSelectedShape: setSelectedShape,
+    setCanvasOffsetStartPosition: setCanvasOffsetStartPosition,
+    updateSingleShape: updateSingleShape,
+    canvasOffset: canvasOffset,
+    saveShapes: saveShapes,
+    setSelectionMode: setSelectionMode
+  }),
+      hoverMode = _useDrawableCanvas.hoverMode;
+
+  var updateSelectedShapeText = (0, _react.useCallback)(function (newText) {
+    var _drawCanvasRef$curren, _newShape$style;
+
+    if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) !== _Shapes.ShapeEnum.text) return;
+    var ctx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
+    if (!ctx) return;
+
+    var newShape = _fp["default"].set('value', newText, selectedShape);
+
+    var newWidth = (0, _transform.calculateTextWidth)(ctx, newShape.value, newShape.fontSize, (_newShape$style = newShape.style) === null || _newShape$style === void 0 ? void 0 : _newShape$style.fontFamily);
+
+    var resizedShape = _objectSpread(_objectSpread({}, newShape), {}, {
+      width: newWidth,
+      height: newShape.fontSize * newShape.value.length
+    });
+
+    updateSingleShape(resizedShape);
+  }, [updateSingleShape, selectedShape]);
+  (0, _react.useEffect)(function () {
+    var _drawCanvasRef$curren2, _selectionCanvasRef$c;
+
+    var drawCtx = (_drawCanvasRef$curren2 = drawCanvasRef.current) === null || _drawCanvasRef$curren2 === void 0 ? void 0 : _drawCanvasRef$curren2.getContext('2d');
+    var selectionCtx = (_selectionCanvasRef$c = selectionCanvasRef.current) === null || _selectionCanvasRef$c === void 0 ? void 0 : _selectionCanvasRef$c.getContext('2d');
+    drawCtx && selectionCtx && _fp["default"].throttle(_draw2.FRAMERATE_DRAW, drawCanvas)(drawCtx, selectionCtx, selectionMode, width, height, activeTool, canvasOffset, shapes, selectedShape);
+  }, [shapes, selectionMode, selectedShape, activeTool, canvasOffset, width, height]);
+  return /*#__PURE__*/_react["default"].createElement(StyledCanvasBox, null, /*#__PURE__*/_react["default"].createElement(StyledCanvasContainer, {
+    "data-grid": withGrid,
+    "data-grow": canGrow
+  }, /*#__PURE__*/_react["default"].createElement(StyledDrawCanvas, {
+    ref: drawCanvasRef,
+    "data-grow": canGrow,
+    width: width,
+    height: height
+  }), /*#__PURE__*/_react["default"].createElement(StyledSelectionCanvas, {
+    ref: selectionCanvasRef,
+    width: width,
+    height: height,
+    "data-grow": canGrow,
+    cursor: activeTool !== _Shapes.ToolEnum.selection && activeTool !== _Shapes.ToolEnum.move || hoverMode.mode === _Mode.SelectionModeLib.resize ? 'crosshair' : activeTool === _Shapes.ToolEnum.move || hoverMode.mode === _Mode.SelectionModeLib.translate ? 'move' : hoverMode.mode === _Mode.SelectionModeLib.rotate ? 'grab' : 'default'
+  }), selectionMode.mode === _Mode.SelectionModeLib.textedition && (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text && /*#__PURE__*/_react["default"].createElement(_EditTextBox["default"], {
+    disabled: disabled,
+    shape: selectedShape,
+    defaultValue: selectionMode.defaultValue,
+    updateValue: updateSelectedShapeText
+  })));
+});
+
+var _default = Canvas;
+exports["default"] = _default;

package/dist/components/common/Button.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+declare type CommonType = {
+    hidden?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    icon?: string;
+};
+declare type ButtonType = CommonType & React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare type FileInputType = CommonType & {
+    type: 'file' | 'color';
+    accept?: string;
+} & React.InputHTMLAttributes<HTMLInputElement | HTMLButtonElement>;
+declare const Button: React.ForwardRefExoticComponent<(ButtonType | FileInputType) & React.RefAttributes<HTMLButtonElement | HTMLInputElement>>;
+export default Button;

package/dist/components/common/Button.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@linaria/react");
+
+var _excluded = ["hidden", "disabled", "selected", "icon", "children", "className", "title", "onClick"],
+    _excluded2 = ["hidden", "disabled", "selected", "icon", "children", "type"];
+var StyledButton = /*#__PURE__*/(0, _react2.styled)("button")({
+  name: "StyledButton",
+  "class": "sq3bzv4"
+});
+var StyledButtonContent = /*#__PURE__*/(0, _react2.styled)("span")({
+  name: "StyledButtonContent",
+  "class": "sst453j"
+});
+var StyledIcon = /*#__PURE__*/(0, _react2.styled)("span")({
+  name: "StyledIcon",
+  "class": "s1q5lsc2"
+});
+var StyledChildren = /*#__PURE__*/(0, _react2.styled)("span")({
+  name: "StyledChildren",
+  "class": "s1dis2j8"
+});
+
+var Button = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  if (props.type === 'file' || props.type === 'color') {
+    var _props$hidden = props.hidden,
+        hidden = _props$hidden === void 0 ? false : _props$hidden,
+        _props$disabled = props.disabled,
+        disabled = _props$disabled === void 0 ? false : _props$disabled,
+        _props$selected = props.selected,
+        selected = _props$selected === void 0 ? false : _props$selected,
+        icon = props.icon,
+        children = props.children,
+        className = props.className,
+        title = props.title,
+        onClick = props.onClick,
+        fileProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+    return /*#__PURE__*/_react["default"].createElement(StyledButton, {
+      as: "label",
+      className: className,
+      title: title,
+      onClick: onClick,
+      "data-disabled": +disabled,
+      "data-selected": +selected,
+      "data-hidden": +hidden
+    }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
+      ref: ref,
+      disabled: disabled
+    }, fileProps)), /*#__PURE__*/_react["default"].createElement(StyledButtonContent, null, children && /*#__PURE__*/_react["default"].createElement(StyledChildren, null, children), icon && /*#__PURE__*/_react["default"].createElement(StyledIcon, {
+      dangerouslySetInnerHTML: {
+        __html: icon
+      }
+    })));
+  } else {
+    var _ref = props,
+        _ref$hidden = _ref.hidden,
+        _hidden = _ref$hidden === void 0 ? false : _ref$hidden,
+        _ref$disabled = _ref.disabled,
+        _disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+        _ref$selected = _ref.selected,
+        _selected = _ref$selected === void 0 ? false : _ref$selected,
+        _icon = _ref.icon,
+        _children = _ref.children,
+        _ref$type = _ref.type,
+        type = _ref$type === void 0 ? 'button' : _ref$type,
+        _fileProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
+
+    return /*#__PURE__*/_react["default"].createElement(StyledButton, (0, _extends2["default"])({
+      ref: ref,
+      disabled: _disabled,
+      "data-disabled": +_disabled,
+      "data-selected": +_selected,
+      "data-hidden": +_hidden,
+      type: type
+    }, _fileProps), /*#__PURE__*/_react["default"].createElement(StyledButtonContent, null, _children && /*#__PURE__*/_react["default"].createElement(StyledChildren, null, _children), _icon && /*#__PURE__*/_react["default"].createElement(StyledIcon, {
+      dangerouslySetInnerHTML: {
+        __html: _icon
+      }
+    })));
+  }
+});
+
+var _default = Button;
+exports["default"] = _default;

package/dist/components/common/Loading.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare type LoadingType = {
+    isLoading: boolean;
+};
+declare const Loading: ({ isLoading }: LoadingType) => JSX.Element | null;
+export default Loading;

package/dist/components/common/Loading.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("@linaria/react");
+
+var _style = require("../../constants/style");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var TRANSITION_DURATION = 300;
+var StyledLoading = /*#__PURE__*/(0, _react.styled)("div")({
+  name: "StyledLoading",
+  "class": "s9j48u3"
+});
+var StyledLoader = /*#__PURE__*/(0, _react.styled)("div")({
+  name: "StyledLoader",
+  "class": "s4auclc"
+});
+var StyledShape = /*#__PURE__*/(0, _react.styled)("div")({
+  name: "StyledShape",
+  "class": "s1l3fbq"
+});
+
+var Loading = function Loading(_ref) {
+  var _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
+
+  var _useState = (0, _react2.useState)('hidden'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      loadingState = _useState2[0],
+      setLoadingState = _useState2[1];
+
+  (0, _react2.useEffect)(function () {
+    if (isLoading) {
+      setLoadingState('visible');
+    } else {
+      setLoadingState('fadeOut');
+      var fadeOutTimeout = setTimeout(function () {
+        return setLoadingState('hidden');
+      }, TRANSITION_DURATION);
+      return function () {
+        clearTimeout(fadeOutTimeout);
+      };
+    }
+  }, [isLoading]);
+  return loadingState === 'hidden' ? null : /*#__PURE__*/_react2["default"].createElement(StyledLoading, {
+    "data-loading": loadingState
+  }, /*#__PURE__*/_react2["default"].createElement(StyledLoader, null, /*#__PURE__*/_react2["default"].createElement(StyledShape, null), /*#__PURE__*/_react2["default"].createElement(StyledShape, null), /*#__PURE__*/_react2["default"].createElement(StyledShape, null), /*#__PURE__*/_react2["default"].createElement(StyledShape, null)));
+};
+
+var _default = Loading;
+exports["default"] = _default;

package/dist/components/common/Modal.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+declare type ModalType = {
+    children: ReactNode;
+    onClose: () => void;
+    className?: string;
+};
+declare const Modal: ({ children, onClose, className }: ModalType) => JSX.Element;
+export default Modal;

package/dist/components/common/Modal.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@linaria/react");
+
+var _style = require("../../constants/style");
+
+var StyledModal = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledModal",
+  "class": "s1c8tp02"
+});
+var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledPanel",
+  "class": "svkxpz4"
+});
+var StyledMask = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledMask",
+  "class": "s1s9jyyg"
+});
+
+var Modal = function Modal(_ref) {
+  var children = _ref.children,
+      onClose = _ref.onClose,
+      className = _ref.className;
+  return /*#__PURE__*/_react["default"].createElement(StyledModal, null, /*#__PURE__*/_react["default"].createElement(StyledMask, {
+    onClick: onClose
+  }), /*#__PURE__*/_react["default"].createElement(StyledPanel, {
+    className: className
+  }, children));
+};
+
+var _default = Modal;
+exports["default"] = _default;

package/dist/components/common/Panel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type PanelType = {
+    vertical?: boolean;
+    children: React.ReactNode;
+    title?: string;
+    className?: string;
+    alignment?: 'left' | 'right' | 'center';
+};
+declare const Panel: ({ children, vertical, title, className, alignment }: PanelType) => JSX.Element;
+export default Panel;

package/dist/components/common/Panel.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@linaria/react");
+
+var _style = require("../../constants/style");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledPanel",
+  "class": "s1xzg253"
+});
+var StyledTitle = /*#__PURE__*/(0, _react2.styled)("h3")({
+  name: "StyledTitle",
+  "class": "s17qj3jh"
+});
+
+var Panel = function Panel(_ref) {
+  var children = _ref.children,
+      _ref$vertical = _ref.vertical,
+      vertical = _ref$vertical === void 0 ? false : _ref$vertical,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      className = _ref.className,
+      _ref$alignment = _ref.alignment,
+      alignment = _ref$alignment === void 0 ? 'center' : _ref$alignment;
+  var componentRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react["default"].createElement(StyledPanel, {
+    ref: componentRef,
+    className: className,
+    "data-vertical": +vertical,
+    "data-alignment": alignment
+  }, title && /*#__PURE__*/_react["default"].createElement(StyledTitle, null, title), children);
+};
+
+var _default = Panel;
+exports["default"] = _default;

package/dist/components/common/Snackbar.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SnackBarType } from 'hooks/useSnackbar';
+declare type SnackbarContainerType = {
+    snackbarList: SnackBarType[];
+};
+declare const SnackbarContainer: ({ snackbarList }: SnackbarContainerType) => JSX.Element;
+export default SnackbarContainer;

package/dist/components/common/Snackbar.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _snackbar = require("../../constants/snackbar");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@linaria/react");
+
+var _style = require("../../constants/style");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var StyledSnackbar = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledSnackbar",
+  "class": "s1xssqat"
+});
+var StyledSnackbarContainer = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledSnackbarContainer",
+  "class": "s1bgtt22"
+});
+
+var Snackbar = function Snackbar(_ref) {
+  var type = _ref.type,
+      text = _ref.text,
+      duration = _ref.duration;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isShown = _useState2[0],
+      setIsShown = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var timeoutShowId = setTimeout(function () {
+      setIsShown(true);
+    }, 100);
+    var timeoutHideId = setTimeout(function () {
+      setIsShown(false);
+    }, duration - _snackbar.SNACKBAR_ANIMATION_DURATION - 100);
+    return function () {
+      clearTimeout(timeoutShowId);
+      clearTimeout(timeoutHideId);
+    };
+  }, [duration]);
+  return /*#__PURE__*/_react["default"].createElement(StyledSnackbar, {
+    "data-is-shown": +isShown,
+    "data-type": type
+  }, text);
+};
+
+var SnackbarContainer = function SnackbarContainer(_ref2) {
+  var snackbarList = _ref2.snackbarList;
+  return /*#__PURE__*/_react["default"].createElement(StyledSnackbarContainer, null, snackbarList.map(function (snackbar) {
+    return /*#__PURE__*/_react["default"].createElement(Snackbar, (0, _extends2["default"])({
+      key: snackbar.id
+    }, snackbar));
+  }));
+};
+
+var _default = SnackbarContainer;
+exports["default"] = _default;

package/dist/components/settings/ColorField.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type ShapeStyleColorType = {
+    selectedSettings: string | undefined;
+    setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
+    title?: string;
+    disabled?: boolean;
+    field: string;
+    value?: string | undefined;
+    valueChanged: (field: string, value: string | number) => void;
+};
+declare const ColorField: ({ selectedSettings, setSelectedSettings, title, disabled, field, value, valueChanged }: ShapeStyleColorType) => JSX.Element;
+export default ColorField;