@yoast/related-keyphrase-suggestions 0.1.0

package/build/elements/UserMessage/components/RequestLimitReached.js

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { __, sprintf } from "@wordpress/i18n";
+import { Alert, Button } from "@yoast/ui-library";
+import { ArrowNarrowRightIcon } from "@heroicons/react/outline";
+
+/**
+ * Display the message for a request that has reached the limit.
+ *
+ * @param {string} [upsellLink=""] The upsell link.
+ * @param {string} [className=""] The class name for the alert.
+ *
+ * @returns {JSX.Element} The message for limit reached.
+ */
+export const RequestLimitReached = ({
+  upsellLink = "",
+  className = ""
+}) => {
+  return /*#__PURE__*/React.createElement(Alert, {
+    variant: "warning",
+    className: className
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "yst-flex yst-flex-col yst-items-start"
+  }, sprintf(/* translators: %s : Expands to "Semrush". */
+  __("You've reached your request limit for today. Check back tomorrow or upgrade your plan over at %s.", "wordpress-seo"), "Semrush"), upsellLink && /*#__PURE__*/React.createElement(Button, {
+    variant: "upsell",
+    className: "yst-mt-3 yst-gap-1.5",
+    as: "a",
+    href: upsellLink,
+    target: "_blank"
+  }, sprintf(/* translators: %s : Expands to "Semrush". */
+  __("Upgrade your %s plan", "wordpress-seo"), "Semrush"), /*#__PURE__*/React.createElement(ArrowNarrowRightIcon, {
+    className: "yst-w-4 yst-h-4 yst-text-amber-900 rtl:yst-rotate-180"
+  }))));
+};
+RequestLimitReached.propTypes = {
+  upsellLink: PropTypes.string,
+  className: PropTypes.string
+};
+//# sourceMappingURL=RequestLimitReached.js.map

package/build/elements/UserMessage/components/index.js

@@ -0,0 +1,5 @@
+export { MaxRelatedKeyphrases } from "./MaxRelatedKeyphrases";
+export { RequestFailed } from "./RequestFailed";
+export { RequestEmpty } from "./RequestEmpty";
+export { RequestLimitReached } from "./RequestLimitReached";
+//# sourceMappingURL=index.js.map

package/build/elements/UserMessage/index.js

@@ -0,0 +1,46 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { MaxRelatedKeyphrases, RequestEmpty, RequestFailed, RequestLimitReached } from "./components";
+
+/**
+ * Displays the user message following a request or action.
+ *
+ * @param {?string} [variant=null] The type of message to display.
+ * @param {string} [upsellLink=""] The link to the upsell page.
+ * @param {string} [className=""] The class name for the button.
+ *
+ * @returns {JSX.Element} The user message.
+ */
+export const UserMessage = ({
+  variant = null,
+  upsellLink = "",
+  className = ""
+}) => {
+  switch (variant) {
+    case "requestLimitReached":
+      return /*#__PURE__*/React.createElement(RequestLimitReached, {
+        upsellLink: upsellLink,
+        className: className
+      });
+    case "requestFailed":
+      return /*#__PURE__*/React.createElement(RequestFailed, {
+        className: className
+      });
+    case "requestEmpty":
+      return /*#__PURE__*/React.createElement(RequestEmpty, {
+        className: className
+      });
+    case "maxRelatedKeyphrases":
+      return /*#__PURE__*/React.createElement(MaxRelatedKeyphrases, {
+        className: className
+      });
+    default:
+      return null;
+  }
+};
+UserMessage.propTypes = {
+  variant: PropTypes.oneOf(["requestLimitReached", "requestFailed", "requestEmpty", "maxRelatedKeyphrases"]),
+  upsellLink: PropTypes.string,
+  className: PropTypes.string
+};
+//# sourceMappingURL=index.js.map

package/build/index.js

@@ -0,0 +1,10 @@
+export { TrendGraph } from "./elements/TrendGraph";
+export { KeyphrasesTable } from "./components/KeyphrasesTable";
+export { DifficultyBullet } from "./elements/DifficultyBullet";
+export { IntentBadge } from "./elements/IntentBadge";
+export { TableButton } from "./elements/TableButton";
+export { CountrySelector } from "./components/CountrySelector";
+export { PremiumUpsell } from "./elements/PremiumUpsell";
+export { UserMessage } from "./elements/UserMessage";
+export { Modal } from "./components/Modal";
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@yoast/related-keyphrase-suggestions",
+  "version": "0.1.0",
+  "description": "Yoast related keyphrase suggestions package",
+  "main": "build/index.js",
+  "style": "build/css/style.css",
+  "files": [
+    "build",
+    "!*.map"
+  ],
+  "author": "Team Yoast <support@yoast.com>",
+  "license": "GPL-3.0",
+  "private": false,
+  "sideEffects": false,
+  "scripts": {
+    "clean:build": "rm -rf build",
+    "build": "yarn clean:build && yarn build:js && yarn build:css",
+    "build:js": "babel src --out-dir build --ignore \"src/**/*.stories.js\",\"src/**/stories.js\",\"src/**/docs/**/*.js\"",
+    "build:css": "node ./scripts/build-css.js",
+    "watch": "yarn watch:js & yarn watch:css",
+    "watch:js": "yarn build:js --watch",
+    "watch:css": "node ./scripts/watch-css.js",
+    "storybook": "storybook dev -p 6007",
+    "lint": "eslint . --max-warnings=2"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.25.9",
+    "@babel/core": "^7.26.0",
+    "@babel/parser": "^7.26.1",
+    "@babel/plugin-transform-optional-chaining": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/preview-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-webpack5": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
+    "@wordpress/jest-preset-default": "^8.0.1",
+    "@yoast/browserslist-config": "^1.2.4",
+    "@yoast/eslint-config": "^8.1.0",
+    "@yoast/jest-preset": "^1.0.1",
+    "@yoast/postcss-preset": "^1.2.0",
+    "@yoast/tailwindcss-preset": "^2.3.0",
+    "babel-loader": "^9.2.1",
+    "css-loader": "^7.1.2",
+    "eslint": "^9.16.0",
+    "eslint-plugin-storybook": "^0.12.0",
+    "globals": "^15.13.0",
+    "postcss": "^8.4.47",
+    "postcss-loader": "^8.1.1",
+    "puppeteer": "^23.6.0",
+    "storybook": "^8.6.12",
+    "style-loader": "^4.0.0",
+    "tailwindcss": "^3.4.16"
+  },
+  "dependencies": {
+    "@heroicons/react": "^1.0.6",
+    "@wordpress/i18n": "^5.10.0",
+    "classnames": "^2.5.1",
+    "lodash": "^4.17.21",
+    "prop-types": "^15.8.1"
+  },
+  "peerDependencies": {
+    "@yoast/ui-library": "^4.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/readme.md

@@ -0,0 +1,18 @@
+# Welcome to the Yoast releated keyphrase suggestions package!
+A React component library for building user interfaces for Yoast related keyphrase suggestions. 
+
+[View the changelog here](https://github.com/Yoast/wordpress-seo/blob/trunk/packages/related-keyphrase-suggestions/changelog.md).
+
+For internal use only. Not offering support for external use.
+
+## Local development
+The components in this package are developed in isolation inside a [Storybook](https://storybook.js.org/), a visual tool for building component libraries. Developing components in isolation helps keep the interfaces flexible while ignoring implementation details.
+
+```sh
+# Install dependencies
+yarn install
+# Run Storybook for local development
+yarn storybook
+# Build a static Storybook
+yarn build:storybook
+```