@terraware/web-components 2.10.6-rc.1 → 2.11.1-rc.0

package/components/Button/Button.d.ts

@@ -2,11 +2,13 @@ import React from 'react';
 import { IconName } from '../Icon/icons';
 import { Size } from '../Size';
 import './styles.scss';
+export type ButtonPriority = 'primary' | 'secondary' | 'ghost';
+export type ButtonType = 'productive' | 'passive' | 'destructive';
 export interface Props {
     onClick: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     label?: string;
-    type?: 'productive' | 'passive' | 'destructive';
-    priority?: 'primary' | 'secondary' | 'ghost';
+    type?: ButtonType;
+    priority?: ButtonPriority;
     size?: Size;
     disabled?: boolean;
     icon?: IconName;

package/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,eAAe,CAAC;AAYvB,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,GAAG,aAAa,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC7C,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgCxD"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,eAAe,CAAC;AAYvB,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAC/D,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,aAAa,CAAC;AAElE,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgCxD"}

package/components/Confirm/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { DialogBoxSize } from '../DialogBox/DialogBox';
+import { ButtonPriority, ButtonType } from '../Button/Button';
+import { IconName } from '../Icon/icons';
+/**
+ * A generic confirm modal built on top of DialogBox.
+ * Most properties are optional with default values.
+ * Required properties are commented as such.
+ */
+export type ConfirmProps = {
+    confirmButtonDisabled?: boolean;
+    confirmButtonIcon?: IconName;
+    confirmButtonId?: string;
+    confirmButtonPriority?: ButtonPriority;
+    confirmButtonText: string;
+    confirmButtonType?: ButtonType;
+    closeButtonId?: string;
+    closeButtonText?: string;
+    message: string | string[] | React.ReactNode;
+    onClose?: () => void;
+    onConfirm: () => void;
+    open?: boolean;
+    size?: DialogBoxSize;
+    textStyle?: Record<string, any>;
+    title: string;
+};
+export default function Confirm({ confirmButtonDisabled, confirmButtonIcon, confirmButtonId, confirmButtonPriority, confirmButtonText, confirmButtonType, closeButtonId, closeButtonText, message, onClose, onConfirm, open, size, textStyle, title, }: ConfirmProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/components/Confirm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Confirm/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAkB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAe,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,QAAQ,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,CAAC,EAAE,cAAc,CAAC;IACvC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,qBAAqB,EACrB,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,OAAO,EACP,OAAO,EACP,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,KAAK,GACN,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAwF5B"}

package/components/Confirm/index.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Confirm;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _DialogBox = _interopRequireDefault(require("../DialogBox/DialogBox"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+/**
+ * A generic confirm modal built on top of DialogBox.
+ * Most properties are optional with default values.
+ * Required properties are commented as such.
+ */
+
+function Confirm(_ref) {
+  var confirmButtonDisabled = _ref.confirmButtonDisabled,
+    confirmButtonIcon = _ref.confirmButtonIcon,
+    confirmButtonId = _ref.confirmButtonId,
+    confirmButtonPriority = _ref.confirmButtonPriority,
+    confirmButtonText = _ref.confirmButtonText,
+    confirmButtonType = _ref.confirmButtonType,
+    closeButtonId = _ref.closeButtonId,
+    closeButtonText = _ref.closeButtonText,
+    message = _ref.message,
+    onClose = _ref.onClose,
+    onConfirm = _ref.onConfirm,
+    open = _ref.open,
+    size = _ref.size,
+    textStyle = _ref.textStyle,
+    title = _ref.title;
+  var theme = (0, _material.useTheme)();
+  var middleButtons = (0, _react.useMemo)(function () {
+    var buttons = [/*#__PURE__*/_react.default.createElement(_Button.default, {
+      disabled: confirmButtonDisabled,
+      icon: confirmButtonIcon,
+      id: confirmButtonId || 'confirm-submit',
+      key: "button-2",
+      label: confirmButtonText,
+      onClick: onConfirm,
+      priority: confirmButtonPriority || 'primary',
+      type: confirmButtonType || 'productive'
+    })];
+    if (onClose && closeButtonText) {
+      buttons.unshift( /*#__PURE__*/_react.default.createElement(_Button.default, {
+        id: closeButtonId || 'confirm-close',
+        key: "button-1",
+        label: closeButtonText,
+        onClick: onClose,
+        priority: "secondary",
+        type: "passive"
+      }));
+    }
+    return buttons;
+  }, [confirmButtonDisabled, confirmButtonIcon, confirmButtonId, confirmButtonPriority, confirmButtonText, confirmButtonType, closeButtonId, closeButtonText, onClose, onConfirm]);
+  var content = (0, _react.useMemo)(function () {
+    var text = function text(str, key) {
+      return /*#__PURE__*/_react.default.createElement(_material.Typography, {
+        color: theme.palette.TwClrTxt,
+        fontSize: "16px",
+        fontWeight: 400,
+        key: key,
+        lineHeight: "24px",
+        textAlign: "center",
+        sx: (0, _objectSpread2.default)({
+          marginBottom: theme.spacing(1),
+          '&:last-child': {
+            marginBottom: 0
+          }
+        }, textStyle || {})
+      }, str);
+    };
+    if (typeof message === 'string') {
+      return text(message);
+    } else if (Array.isArray(message)) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message.map(function (str, i) {
+        return text(str, "".concat(str, "_").concat(i));
+      }));
+    } else {
+      return message;
+    }
+  }, [message, textStyle, theme]);
+  return /*#__PURE__*/_react.default.createElement(_DialogBox.default, {
+    onClose: onClose,
+    open: open !== null && open !== void 0 ? open : true,
+    title: title,
+    size: size || 'medium',
+    middleButtons: middleButtons
+  }, content);
+}

package/components/DialogBox/DialogBox.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 import './styles.scss';
+export type DialogBoxSize = 'small' | 'medium' | 'large' | 'x-large';
 export interface Props {
     title: string;
-    size: 'small' | 'medium' | 'large' | 'x-large';
+    size: DialogBoxSize;
     message?: string | string[];
     children?: ReactNode;
     leftButton?: ReactNode;

package/components/DialogBox/DialogBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBox.d.ts","sourceRoot":"","sources":["../../../src/components/DialogBox/DialogBox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,eAAe,CAAC;AAKvB,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAgElE"}
+{"version":3,"file":"DialogBox.d.ts","sourceRoot":"","sources":["../../../src/components/DialogBox/DialogBox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,eAAe,CAAC;AAKvB,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAErE,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAgElE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "2.10.6-rc.1",
+  "version": "2.11.1-rc.0",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {

package/stories/Confirm.stories.d.ts

@@ -0,0 +1,12 @@
+import Confirm, { ConfirmProps } from '../components/Confirm';
+declare const _default: {
+    title: string;
+    component: typeof Confirm;
+};
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ConfirmProps>;
+export declare const DestructiveNoCancel: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ConfirmProps>;
+export declare const Disabled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ConfirmProps>;
+export declare const Hidden: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ConfirmProps>;
+export declare const CustomContent: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ConfirmProps>;
+//# sourceMappingURL=Confirm.stories.d.ts.map

package/stories/Confirm.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confirm.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Confirm.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,OAAO,EAAE,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;;;;;AAE9D,wBAGE;AAMF,eAAO,MAAM,OAAO,6GAAoB,CAAC;AAazC,eAAO,MAAM,mBAAmB,6GAAoB,CAAC;AAWrD,eAAO,MAAM,QAAQ,6GAAoB,CAAC;AAW1C,eAAO,MAAM,MAAM,6GAAoB,CAAC;AASxC,eAAO,MAAM,aAAa,6GAAoB,CAAC"}