newspack-components 3.0.0-alpha.3 → 3.0.0-alpha.4

package/dist/cjs/button/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _router = _interopRequireDefault(require("../proxied-imports/router"));
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Button
+ */
+
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  useHistory
+} = _router.default;
+const Button = ({
+  href,
+  onClick,
+  ...otherProps
+}) => {
+  const history = useHistory();
+  const [isAwaitingOnClick, setIsAwaitingOnClick] = (0, _element.useState)(false);
+
+  // If both onClick and href are present, await the onClick action an then redirect.
+  if (href && onClick) {
+    otherProps.onClick = async () => {
+      setIsAwaitingOnClick(true);
+      await onClick();
+      setIsAwaitingOnClick(false);
+      history.push((href || '').replace('#', ''));
+    };
+  } else {
+    otherProps.href = href;
+    otherProps.onClick = onClick;
+  }
+  if (isAwaitingOnClick) {
+    otherProps.disabled = true;
+  }
+  // @ts-ignore - @wordpress/components' Button can only have either href or onClick, not both.
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+    ...otherProps
+  });
+};
+var _default = exports.default = Button;

package/dist/cjs/grid/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./style.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Grid
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+const Grid = ({
+  className = '',
+  columns = 2,
+  gutter = 32,
+  noMargin = false,
+  rowGap = 0,
+  ...otherProps
+}) => {
+  const classes = (0, _classnames.default)('newspack-grid', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes,
+    ...otherProps
+  });
+};
+var _default = exports.default = Grid;

package/dist/cjs/hooks/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _usePrompt = _interopRequireDefault(require("./usePrompt"));
+var _useObjectState = _interopRequireDefault(require("./useObjectState"));
+var _useOnClickOutside = _interopRequireDefault(require("./useOnClickOutside"));
+/**
+ * WordPress dependencies
+ */
+
+const useUniqueId = prefix => {
+  const id = (0, _element.useRef)(`${prefix}-${Math.round(Math.random() * 99999)}`);
+  return id.current;
+};
+var _default = exports.default = {
+  usePrompt: _usePrompt.default,
+  useObjectState: _useObjectState.default,
+  useOnClickOutside: _useOnClickOutside.default,
+  useUniqueId
+};

package/dist/cjs/hooks/usePrompt.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _router = _interopRequireDefault(require("../proxied-imports/router"));
+// https://gist.github.com/sibelius/60a4e11da1f826b8d60dc3975a1ac805
+
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+const {
+  useHistory
+} = _router.default;
+var _default = (when, message) => {
+  const history = useHistory();
+  const self = (0, _element.useRef)(null);
+  const onWindowOrTabClose = event => {
+    if (!when) {
+      return;
+    }
+    if (typeof event === 'undefined') {
+      event = window.event;
+    }
+    return message;
+  };
+  (0, _element.useEffect)(() => {
+    if (when) {
+      self.current = history.block(message);
+      window.addEventListener('beforeunload', onWindowOrTabClose);
+    }
+    return () => {
+      if (self.current) {
+        self.current();
+      }
+      window.removeEventListener('beforeunload', onWindowOrTabClose);
+    };
+  }, [message, when]);
+  return self.current || (() => {});
+};
+exports.default = _default;

package/dist/cjs/text-control/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+require("./style.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Text Control
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+const TextControl = ({
+  className = '',
+  required = false,
+  isWide = false,
+  withMargin = true,
+  ...otherProps
+}) => {
+  const wrapperRef = (0, _element.useRef)(null);
+  (0, _element.useEffect)(() => {
+    if (wrapperRef.current === null) {
+      return;
+    }
+    const labelEl = wrapperRef.current.querySelector('label');
+    if (labelEl) {
+      labelEl.setAttribute('data-required-text', (0, _i18n.__)('(required)', 'newspack-plugin'));
+    }
+  }, [wrapperRef.current]);
+  const classes = (0, _classnames.default)('newspack-text-control', {
+    'newspack-text-control--wide': isWide,
+    'newspack-text-control--with-margin': withMargin
+  }, className);
+  return required ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: wrapperRef,
+    className: "newspack-text-control--required",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
+      className: classes,
+      required: required,
+      ...otherProps
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
+    className: classes,
+    ...otherProps
+  });
+};
+var _default = exports.default = TextControl;

package/dist/esm/button/index.js

@@ -0,0 +1,48 @@
+/**
+ * Button
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { Button as BaseComponent } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Router from '../proxied-imports/router';
+import './style.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  useHistory
+} = Router;
+const Button = ({
+  href,
+  onClick,
+  ...otherProps
+}) => {
+  const history = useHistory();
+  const [isAwaitingOnClick, setIsAwaitingOnClick] = useState(false);
+
+  // If both onClick and href are present, await the onClick action an then redirect.
+  if (href && onClick) {
+    otherProps.onClick = async () => {
+      setIsAwaitingOnClick(true);
+      await onClick();
+      setIsAwaitingOnClick(false);
+      history.push((href || '').replace('#', ''));
+    };
+  } else {
+    otherProps.href = href;
+    otherProps.onClick = onClick;
+  }
+  if (isAwaitingOnClick) {
+    otherProps.disabled = true;
+  }
+  // @ts-ignore - @wordpress/components' Button can only have either href or onClick, not both.
+  return /*#__PURE__*/_jsx(BaseComponent, {
+    ...otherProps
+  });
+};
+export default Button;

package/dist/esm/grid/index.js

@@ -0,0 +1,29 @@
+/**
+ * Grid
+ */
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Grid = ({
+  className = '',
+  columns = 2,
+  gutter = 32,
+  noMargin = false,
+  rowGap = 0,
+  ...otherProps
+}) => {
+  const classes = classnames('newspack-grid', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
+  return /*#__PURE__*/_jsx("div", {
+    className: classes,
+    ...otherProps
+  });
+};
+export default Grid;

package/dist/esm/hooks/index.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import usePrompt from './usePrompt';
+import useObjectState from './useObjectState';
+import useOnClickOutside from './useOnClickOutside';
+const useUniqueId = prefix => {
+  const id = useRef(`${prefix}-${Math.round(Math.random() * 99999)}`);
+  return id.current;
+};
+export default {
+  usePrompt,
+  useObjectState,
+  useOnClickOutside,
+  useUniqueId
+};

package/dist/esm/hooks/usePrompt.js

@@ -0,0 +1,40 @@
+// https://gist.github.com/sibelius/60a4e11da1f826b8d60dc3975a1ac805
+
+/**
+ * External dependencies.
+ */
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import Router from '../proxied-imports/router';
+const {
+  useHistory
+} = Router;
+export default ((when, message) => {
+  const history = useHistory();
+  const self = useRef(null);
+  const onWindowOrTabClose = event => {
+    if (!when) {
+      return;
+    }
+    if (typeof event === 'undefined') {
+      event = window.event;
+    }
+    return message;
+  };
+  useEffect(() => {
+    if (when) {
+      self.current = history.block(message);
+      window.addEventListener('beforeunload', onWindowOrTabClose);
+    }
+    return () => {
+      if (self.current) {
+        self.current();
+      }
+      window.removeEventListener('beforeunload', onWindowOrTabClose);
+    };
+  }, [message, when]);
+  return self.current || (() => {});
+});

package/dist/esm/text-control/index.js

@@ -0,0 +1,56 @@
+/**
+ * Text Control
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { TextControl as BaseComponent } from '@wordpress/components';
+import { useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TextControl = ({
+  className = '',
+  required = false,
+  isWide = false,
+  withMargin = true,
+  ...otherProps
+}) => {
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    if (wrapperRef.current === null) {
+      return;
+    }
+    const labelEl = wrapperRef.current.querySelector('label');
+    if (labelEl) {
+      labelEl.setAttribute('data-required-text', __('(required)', 'newspack-plugin'));
+    }
+  }, [wrapperRef.current]);
+  const classes = classNames('newspack-text-control', {
+    'newspack-text-control--wide': isWide,
+    'newspack-text-control--with-margin': withMargin
+  }, className);
+  return required ? /*#__PURE__*/_jsx("div", {
+    ref: wrapperRef,
+    className: "newspack-text-control--required",
+    children: /*#__PURE__*/_jsx(BaseComponent, {
+      className: classes,
+      required: required,
+      ...otherProps
+    })
+  }) : /*#__PURE__*/_jsx(BaseComponent, {
+    className: classes,
+    ...otherProps
+  });
+};
+export default TextControl;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "3.0.0-alpha.3",
+	"version": "3.0.0-alpha.4",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -50,9 +50,10 @@
 	},
 	"scripts": {
 		"clean": "rm -rf dist && rm -rf shared",
-		"compile-cjs": "npx babel src --config-file ./babel.config.cjs.js --out-dir dist/cjs",
-		"compile-esm": "npx babel src --out-dir dist/esm",
-		"prepublishOnly": "npm run clean && npm run compile-esm && npm run compile-cjs && node copy-styles.js",
+		"compile:cjs": "npx babel src --config-file ./babel.config.cjs.js --extensions='.js,.jsx,.ts,.tsx' --out-dir dist/cjs",
+		"compile:esm": "npx babel src --extensions='.js,.jsx,.ts,.tsx' --out-dir dist/esm",
+		"compile": "npm run compile:cjs && npm run compile:esm",
+		"prepublishOnly": "npm run clean && npm run compile && node copy-styles.js",
 		"postpublish": "npm run clean && rm -rf node_modules"
 	}
 }