@wordpress-gcb/fields 0.2.0 → 0.2.2

package/dist/controls/index.js

@@ -0,0 +1,88 @@
+/**
+ * Registry of control type → React component.
+ *
+ * Each component receives `{ control, value, onChange, attributes }` and is
+ * responsible for its own UI. Some are thin wrappers around @wordpress/components;
+ * the richer ones (image, gallery, post-object, taxonomy, user, icon, google-map)
+ * carry full UI logic ported from the original plugin.
+ */
+
+import TextField from './text';
+import TextareaField from './textarea';
+import NumberField from './number';
+import EmailField from './email';
+import UrlField from './url';
+import CodeField from './code';
+import SelectField from './select';
+import RadioField from './radio';
+import CheckboxField from './checkbox';
+import CheckboxGroupField from './checkbox-group';
+import ToggleField from './toggle';
+import ToggleGroupField from './toggle-group';
+import ButtonGroupField from './button-group';
+import RangeField from './range';
+import ColorField from './color';
+import DateField from './date';
+import DatetimeField from './datetime';
+import SizeField from './size';
+import SpacingField from './spacing';
+import MessageField from './message';
+import OembedField from './oembed';
+import WysiwygField from './wysiwyg';
+import ImageField from './image';
+import GalleryField from './gallery';
+import FileField from './file';
+import IconField from './icon';
+import GoogleMapField from './google-map';
+import PostObjectField from './post-object';
+import TaxonomyField from './taxonomy';
+import UserField from './user';
+import PageLinkField from './page-link';
+import RelationshipField from './relationship';
+import HeadingLevelField from './heading-level';
+import RepeaterField from './repeater';
+import RichtextField from './richtext';
+export const controlComponents = {
+  // Text family
+  text: TextField,
+  textarea: TextareaField,
+  number: NumberField,
+  email: EmailField,
+  url: UrlField,
+  code: CodeField,
+  // Choice family
+  select: SelectField,
+  radio: RadioField,
+  checkbox: CheckboxField,
+  'checkbox-group': CheckboxGroupField,
+  toggle: ToggleField,
+  'toggle-group': ToggleGroupField,
+  'button-group': ButtonGroupField,
+  // Numeric / visual
+  range: RangeField,
+  color: ColorField,
+  date: DateField,
+  datetime: DatetimeField,
+  size: SizeField,
+  spacing: SpacingField,
+  'heading-level': HeadingLevelField,
+  // Display-only
+  message: MessageField,
+  wysiwyg: WysiwygField,
+  richtext: RichtextField,
+  oembed: OembedField,
+  // Media
+  image: ImageField,
+  gallery: GalleryField,
+  file: FileField,
+  icon: IconField,
+  // Reference
+  'post-object': PostObjectField,
+  taxonomy: TaxonomyField,
+  user: UserField,
+  'page-link': PageLinkField,
+  relationship: RelationshipField,
+  // Other
+  'google-map': GoogleMapField,
+  repeater: RepeaterField
+};

package/dist/controls/message.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Message — informational note in the Inspector. No input.
+ *
+ * Variants: `neutral` (default) | `info` | `warning` | `danger` | `success`
+ * Pair with `conditionalLogic` to fire context-sensitive messages (e.g.
+ * a `danger` message that only shows when another field has an invalid
+ * value).
+ *
+ * Body source: `control.message` (preferred) or `control.helpText` fallback.
+ */
+
+const VARIANTS = {
+  neutral: {
+    bg: '#f0f0f1',
+    border: '#dcdcde',
+    fg: '#1e1e1e',
+    glyph: null
+  },
+  info: {
+    bg: '#f0f6fc',
+    border: '#c5d9eb',
+    fg: '#0b3b6f',
+    glyph: 'ℹ'
+  },
+  warning: {
+    bg: '#fcf9e8',
+    border: '#f5e6a8',
+    fg: '#674e00',
+    glyph: '⚠'
+  },
+  danger: {
+    bg: '#fcf0f1',
+    border: '#facfd2',
+    fg: '#7c0c0c',
+    glyph: '✕'
+  },
+  success: {
+    bg: '#edfaef',
+    border: '#b8e6bf',
+    fg: '#0a4d12',
+    glyph: '✓'
+  }
+};
+export default function MessageField({
+  control
+}) {
+  const variant = VARIANTS[control.variant] || VARIANTS.neutral;
+  const body = control.message || control.helpText || '';
+  return /*#__PURE__*/_jsx("div", {
+    className: `components-base-control gcb-message-control gcb-message-control--${control.variant || 'neutral'}`,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "components-base-control__field",
+      children: [control.label && /*#__PURE__*/_jsx("label", {
+        className: "components-base-control__label",
+        children: control.label
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "gcb-message-control__content",
+        role: control.variant === 'danger' || control.variant === 'warning' ? 'alert' : undefined,
+        style: {
+          display: 'flex',
+          alignItems: 'flex-start',
+          gap: 8,
+          padding: '10px 12px',
+          backgroundColor: variant.bg,
+          border: `1px solid ${variant.border}`,
+          color: variant.fg,
+          borderRadius: 4,
+          fontSize: 13,
+          lineHeight: 1.5
+        },
+        children: [variant.glyph && /*#__PURE__*/_jsx("span", {
+          "aria-hidden": true,
+          style: {
+            flexShrink: 0,
+            fontWeight: 600,
+            lineHeight: 1.5
+          },
+          children: variant.glyph
+        }), /*#__PURE__*/_jsx("span", {
+          children: body
+        })]
+      })]
+    })
+  });
+}

package/dist/controls/number.js

@@ -0,0 +1,19 @@
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function NumberField({
+  control,
+  value,
+  onChange
+}) {
+  return /*#__PURE__*/_jsx(NumberControl, {
+    label: control.label,
+    help: control.helpText,
+    placeholder: control.placeholder,
+    value: value ?? 0,
+    onChange: next => onChange(next === '' ? 0 : Number(next)),
+    min: control.min,
+    max: control.max,
+    step: control.step ?? 1,
+    __nextHasNoMarginBottom: true
+  });
+}

package/dist/controls/oembed.js

@@ -0,0 +1,42 @@
+/**
+ * oEmbed — URL input with a quick preview underneath.
+ */
+import { __ } from '@wordpress/i18n';
+import { TextControl } from '@wordpress/components';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function OembedField({
+  control,
+  value,
+  onChange
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: "components-base-control gcb-oembed-control",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "components-base-control__field",
+      children: /*#__PURE__*/_jsx("label", {
+        className: "components-base-control__label",
+        children: control.label
+      })
+    }), control.helpText && /*#__PURE__*/_jsx("p", {
+      className: "components-base-control__help",
+      children: control.helpText
+    }), /*#__PURE__*/_jsx(TextControl, {
+      value: value || '',
+      onChange: onChange,
+      placeholder: __('Enter URL to embed (YouTube, Twitter, etc.)', 'gcblite'),
+      type: "url",
+      __nextHasNoMarginBottom: true
+    }), value && /*#__PURE__*/_jsx("div", {
+      style: {
+        marginTop: 12,
+        fontSize: 13
+      },
+      children: /*#__PURE__*/_jsx("wp-embed", {
+        children: /*#__PURE__*/_jsx("a", {
+          href: value,
+          children: value
+        })
+      })
+    })]
+  });
+}

package/{src → dist}/controls/page-link.js

@@ -5,5 +5,4 @@
  * If you have real demand, replace this with a wp/v2/pages search dropdown.
  */
 import UrlField from './url';
-
-export default UrlField;
+export default UrlField;