@hitkey-io/strapi-plugin-region 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nikolay Larsen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,97 @@
+<p align="center">
+  <img src="docs/logo.png" alt="Region Select" width="120" />
+</p>
+
+# Strapi Plugin Region
+
+Cascading **Country → Region** selector as a Strapi 5 custom field. Pick a country, then pick a region — stored as structured JSON, auto-parsed in API responses.
+
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+[![Strapi 5](https://img.shields.io/badge/strapi-v5.x-blueviolet.svg)](https://strapi.io)
+
+<p align="center">
+  <img src="docs/screenshots/02-region-selector.jpeg" alt="Country and Region selector with autocomplete" width="720" />
+</p>
+
+## Features
+
+- Two-stage cascading selector: **Country → Region** with autocomplete
+- Country filtering: show **all**, **only selected**, or **all except selected** countries
+- ISO 3166-1 alpha-2 country codes with full country and region datasets
+- Stored as a single `string` field — no extra tables or relations
+- Automatic JSON parsing in API responses (Koa middleware)
+- Formatted **"Country, Region"** column in Content Manager list view
+
+## Installation
+
+```bash
+npm install @hitkey-io/strapi-plugin-region
+```
+
+Or with yarn:
+
+```bash
+yarn add @hitkey-io/strapi-plugin-region
+```
+
+## Configuration
+
+<p align="center">
+  <img src="docs/screenshots/01-field-options.png" alt="Field options in Content-Type Builder" width="720" />
+</p>
+
+### Adding the field
+
+1. Open the **Content-Type Builder**
+2. Add a new **Custom** field → **Region Select**
+3. Configure country filtering:
+
+| Option | Description |
+|--------|-------------|
+| **All countries** | Show every country in the selector (default) |
+| **Only selected** | Show only the listed country codes |
+| **All except selected** | Show all countries except the listed ones |
+
+Country codes are entered one per line in ISO alpha-2 format (e.g. `US`, `TR`, `AE`).
+
+### Plugin config
+
+No additional plugin configuration is needed. The plugin works out of the box once installed.
+
+## Stored value format
+
+The field stores a JSON string in the database:
+
+```json
+{ "country": "AE", "region": "AZ" }
+```
+
+### API response
+
+The plugin automatically parses stored JSON strings into objects in all `/api/*` responses via Koa middleware:
+
+```json
+{
+  "data": {
+    "id": 1,
+    "name": "Burj Al Arab Jumeirah",
+    "location": {
+      "country": "AE",
+      "region": "AZ"
+    }
+  }
+}
+```
+
+No extra configuration or population is required — it works automatically for all content types using the Region Select field.
+
+## Compatibility
+
+| Requirement | Version |
+|-------------|---------|
+| Strapi | 5.x |
+| Node.js | 20+ |
+
+## License
+
+[MIT](LICENSE)

package/dist/_chunks/Input-ClJGentv.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactIntl = require("react-intl");
+const designSystem = require("@strapi/design-system");
+const reactTooltip = require("@radix-ui/react-tooltip");
+const index = require("./index-C8USiGWk.js");
+const PLUGIN_ID = "strapi-plugin-region";
+const Input = react.forwardRef((props, ref) => {
+  const { name, value, onChange, label, error, hint, required, disabled, attribute } = props;
+  const { formatMessage } = reactIntl.useIntl();
+  const { countries: allCountries } = index.useCountries();
+  const mode = attribute?.options?.mode || "all";
+  const configuredCodes = react.useMemo(() => {
+    const raw = attribute?.options?.countries;
+    if (!Array.isArray(raw)) return [];
+    return raw.map((c) => c.trim().toUpperCase()).filter(Boolean);
+  }, [attribute?.options?.countries]);
+  const parsed = react.useMemo(() => {
+    if (!value) return null;
+    if (typeof value === "string") {
+      try {
+        return JSON.parse(value);
+      } catch {
+        return null;
+      }
+    }
+    return value;
+  }, [value]);
+  const selectedCountry = parsed?.country || null;
+  const selectedRegion = parsed?.region || null;
+  const countries = react.useMemo(() => {
+    if (mode === "all" || configuredCodes.length === 0) return allCountries;
+    if (mode === "only") {
+      return allCountries.filter((c) => configuredCodes.includes(c.countryShortCode));
+    }
+    if (mode === "except") {
+      return allCountries.filter((c) => !configuredCodes.includes(c.countryShortCode));
+    }
+    return allCountries;
+  }, [mode, configuredCodes, allCountries]);
+  const countryData = react.useMemo(
+    () => allCountries.find((c) => c.countryShortCode === selectedCountry) ?? null,
+    [selectedCountry, allCountries]
+  );
+  const regions = countryData?.regions ?? [];
+  react.useMemo(
+    () => regions.find((r) => r.shortCode === selectedRegion) ?? null,
+    [selectedRegion, regions]
+  );
+  const handleCountryChange = (countryCode) => {
+    onChange({
+      target: {
+        name,
+        value: countryCode ? JSON.stringify({ country: countryCode, region: null }) : null,
+        type: "string"
+      }
+    });
+  };
+  const handleRegionChange = (regionCode) => {
+    if (!selectedCountry || !regionCode) return;
+    onChange({
+      target: {
+        name,
+        value: JSON.stringify({ country: selectedCountry, region: regionCode }),
+        type: "string"
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(reactTooltip.Provider, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name, id: name, error, hint, required, ref, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Combobox,
+        {
+          value: selectedCountry,
+          onChange: handleCountryChange,
+          onClear: () => handleCountryChange(void 0),
+          clearLabel: formatMessage({
+            id: `${PLUGIN_ID}.clear.country`,
+            defaultMessage: "Clear country"
+          }),
+          disabled,
+          placeholder: formatMessage({
+            id: `${PLUGIN_ID}.placeholder.country`,
+            defaultMessage: "Select country..."
+          }),
+          autocomplete: { type: "both", filter: "startsWith" },
+          children: countries.map((c) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: c.countryShortCode, children: c.countryName }, c.countryShortCode))
+        }
+      ) }),
+      selectedCountry && regions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Combobox,
+        {
+          value: selectedRegion,
+          onChange: handleRegionChange,
+          onClear: () => {
+            onChange({
+              target: {
+                name,
+                value: JSON.stringify({ country: selectedCountry, region: null }),
+                type: "string"
+              }
+            });
+          },
+          clearLabel: formatMessage({
+            id: `${PLUGIN_ID}.clear.region`,
+            defaultMessage: "Clear region"
+          }),
+          disabled,
+          placeholder: formatMessage({
+            id: `${PLUGIN_ID}.placeholder.region`,
+            defaultMessage: "Select region..."
+          }),
+          autocomplete: { type: "both", filter: "startsWith" },
+          children: regions.map((r) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: r.shortCode, children: r.name }, r.shortCode))
+        },
+        selectedCountry
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+  ] }) });
+});
+Input.displayName = "RegionSelectInput";
+exports.default = Input;

package/dist/_chunks/Input-DV9NWUHU.mjs

@@ -0,0 +1,127 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useIntl } from "react-intl";
+import { Field, Grid, Combobox, ComboboxOption } from "@strapi/design-system";
+import { Provider } from "@radix-ui/react-tooltip";
+import { u as useCountries } from "./index-Cpq91_9N.mjs";
+const PLUGIN_ID = "strapi-plugin-region";
+const Input = forwardRef((props, ref) => {
+  const { name, value, onChange, label, error, hint, required, disabled, attribute } = props;
+  const { formatMessage } = useIntl();
+  const { countries: allCountries } = useCountries();
+  const mode = attribute?.options?.mode || "all";
+  const configuredCodes = useMemo(() => {
+    const raw = attribute?.options?.countries;
+    if (!Array.isArray(raw)) return [];
+    return raw.map((c) => c.trim().toUpperCase()).filter(Boolean);
+  }, [attribute?.options?.countries]);
+  const parsed = useMemo(() => {
+    if (!value) return null;
+    if (typeof value === "string") {
+      try {
+        return JSON.parse(value);
+      } catch {
+        return null;
+      }
+    }
+    return value;
+  }, [value]);
+  const selectedCountry = parsed?.country || null;
+  const selectedRegion = parsed?.region || null;
+  const countries = useMemo(() => {
+    if (mode === "all" || configuredCodes.length === 0) return allCountries;
+    if (mode === "only") {
+      return allCountries.filter((c) => configuredCodes.includes(c.countryShortCode));
+    }
+    if (mode === "except") {
+      return allCountries.filter((c) => !configuredCodes.includes(c.countryShortCode));
+    }
+    return allCountries;
+  }, [mode, configuredCodes, allCountries]);
+  const countryData = useMemo(
+    () => allCountries.find((c) => c.countryShortCode === selectedCountry) ?? null,
+    [selectedCountry, allCountries]
+  );
+  const regions = countryData?.regions ?? [];
+  useMemo(
+    () => regions.find((r) => r.shortCode === selectedRegion) ?? null,
+    [selectedRegion, regions]
+  );
+  const handleCountryChange = (countryCode) => {
+    onChange({
+      target: {
+        name,
+        value: countryCode ? JSON.stringify({ country: countryCode, region: null }) : null,
+        type: "string"
+      }
+    });
+  };
+  const handleRegionChange = (regionCode) => {
+    if (!selectedCountry || !regionCode) return;
+    onChange({
+      target: {
+        name,
+        value: JSON.stringify({ country: selectedCountry, region: regionCode }),
+        type: "string"
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsxs(Field.Root, { name, id: name, error, hint, required, ref, children: [
+    /* @__PURE__ */ jsx(Field.Label, { children: label }),
+    /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
+      /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsx(
+        Combobox,
+        {
+          value: selectedCountry,
+          onChange: handleCountryChange,
+          onClear: () => handleCountryChange(void 0),
+          clearLabel: formatMessage({
+            id: `${PLUGIN_ID}.clear.country`,
+            defaultMessage: "Clear country"
+          }),
+          disabled,
+          placeholder: formatMessage({
+            id: `${PLUGIN_ID}.placeholder.country`,
+            defaultMessage: "Select country..."
+          }),
+          autocomplete: { type: "both", filter: "startsWith" },
+          children: countries.map((c) => /* @__PURE__ */ jsx(ComboboxOption, { value: c.countryShortCode, children: c.countryName }, c.countryShortCode))
+        }
+      ) }),
+      selectedCountry && regions.length > 0 && /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsx(
+        Combobox,
+        {
+          value: selectedRegion,
+          onChange: handleRegionChange,
+          onClear: () => {
+            onChange({
+              target: {
+                name,
+                value: JSON.stringify({ country: selectedCountry, region: null }),
+                type: "string"
+              }
+            });
+          },
+          clearLabel: formatMessage({
+            id: `${PLUGIN_ID}.clear.region`,
+            defaultMessage: "Clear region"
+          }),
+          disabled,
+          placeholder: formatMessage({
+            id: `${PLUGIN_ID}.placeholder.region`,
+            defaultMessage: "Select region..."
+          }),
+          autocomplete: { type: "both", filter: "startsWith" },
+          children: regions.map((r) => /* @__PURE__ */ jsx(ComboboxOption, { value: r.shortCode, children: r.name }, r.shortCode))
+        },
+        selectedCountry
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(Field.Hint, {}),
+    /* @__PURE__ */ jsx(Field.Error, {})
+  ] }) });
+});
+Input.displayName = "RegionSelectInput";
+export {
+  Input as default
+};

package/dist/_chunks/en-C2o_F2M1.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const label = "Region Select";
+const description = "Select country and region";
+const en = {
+  label,
+  description,
+  "placeholder.country": "Select country...",
+  "placeholder.region": "Select region...",
+  "options.section.countries": "Country filtering",
+  "options.mode.label": "Mode",
+  "options.mode.description": "How to filter the list of available countries",
+  "options.mode.all": "All countries",
+  "options.mode.only": "Only selected",
+  "options.mode.except": "All except selected",
+  "options.countries.label": "Countries",
+  "options.countries.description": "One country code per line (ISO alpha-2, e.g. MV, AE, TR)",
+  "options.countries.placeholder": "MV\nAE\nTR",
+  "clear.country": "Clear country",
+  "clear.region": "Clear region",
+  "options.advanced.requiredField": "Required field",
+  "options.advanced.requiredField.description": "You won't be able to create an entry if this field is empty"
+};
+exports.default = en;
+exports.description = description;
+exports.label = label;

package/dist/_chunks/en-D3XDLQ7R.mjs

@@ -0,0 +1,26 @@
+const label = "Region Select";
+const description = "Select country and region";
+const en = {
+  label,
+  description,
+  "placeholder.country": "Select country...",
+  "placeholder.region": "Select region...",
+  "options.section.countries": "Country filtering",
+  "options.mode.label": "Mode",
+  "options.mode.description": "How to filter the list of available countries",
+  "options.mode.all": "All countries",
+  "options.mode.only": "Only selected",
+  "options.mode.except": "All except selected",
+  "options.countries.label": "Countries",
+  "options.countries.description": "One country code per line (ISO alpha-2, e.g. MV, AE, TR)",
+  "options.countries.placeholder": "MV\nAE\nTR",
+  "clear.country": "Clear country",
+  "clear.region": "Clear region",
+  "options.advanced.requiredField": "Required field",
+  "options.advanced.requiredField.description": "You won't be able to create an entry if this field is empty"
+};
+export {
+  en as default,
+  description,
+  label
+};