@siratik/wp-component-library 0.1.0 → 0.1.2

package/components/variable-inserter/index.js

@@ -0,0 +1,168 @@
+import styled from "@emotion/styled";
+import { Button, Popover } from "@wordpress/components";
+import { useRef, useState } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import { Icon, plusCircle } from "@wordpress/icons";
+
+const StyledVariableInserter = styled.div`
+	display: inline-flex;
+	align-items: flex-start;
+	margin-top: 1.5rem;
+	align-self: flex-start;
+`;
+
+const StyledPopover = styled(Popover)`
+	&.components-popover {
+		.components-popover__content {
+			min-width: 280px;
+			max-width: min(440px, 92vw);
+			padding: 0;
+		}
+	}
+`;
+
+const StyledChipPanel = styled.div`
+	padding: 14px 16px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	max-height: 300px;
+	overflow-y: auto;
+	background-color: #f6f7f7;
+	border-radius: 2px;
+`;
+
+const StyledChip = styled.button`
+	display: inline-flex;
+	align-items: center;
+	margin: 0;
+	padding: 7px 14px;
+	border: 1px solid var(--wp-admin-theme-color, #3858e9);
+	border-radius: 999px;
+	background: #fff;
+	color: var(--wp-admin-theme-color, #3858e9);
+	font-family: inherit;
+	font-size: 11px;
+	font-weight: 400;
+	line-height: 1.35;
+	cursor: pointer;
+	transition:
+		background-color 0.15s ease,
+		color 0.15s ease,
+		border-color 0.15s ease;
+
+	&:hover,
+	&:focus-visible {
+		background: var(--wp-admin-theme-color, #3858e9);
+		border-color: var(--wp-admin-theme-color, #3858e9);
+		color: #fff;
+		outline: none;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		background: #1e1e1e;
+		color: #fff;
+		border-color: var(--wp-admin-theme-color, #3858e9);
+
+		&:hover,
+		&:focus-visible {
+			background: var(--wp-admin-theme-color, #3858e9);
+			color: #fff;
+		}
+	}
+`;
+
+const StyledEmpty = styled.div`
+	padding: 16px 20px;
+	text-align: center;
+	color: #646970;
+	font-size: 13px;
+	font-style: italic;
+	line-height: 1.4;
+
+	@media (prefers-color-scheme: dark) {
+		color: #c3c4c7;
+	}
+`;
+
+/**
+ * VariableInserter — popover of merge-tag chips for text fields.
+ *
+ * @param {Object} props
+ * @param {Array<{label: string, value: string}>} props.variables
+ * @param {string} props.currentValue
+ * @param {Function} props.onChange
+ * @param {Object} props.buttonProps
+ * @param {string} props.placeholder
+ * @param {string} props.className
+ * @param {string} props.size
+ * @param {string} props.variant
+ */
+const VariableInserter = ({
+	variables = [],
+	currentValue = "",
+	onChange,
+	buttonProps = {},
+	placeholder = __("Insert variable", "wp-component-library"),
+	className = "",
+	size = "default",
+	variant = "tertiary",
+	...props
+}) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const buttonRef = useRef(null);
+
+	const handleVariableClick = (variable) => {
+		onChange(currentValue + variable.value);
+		setIsOpen(false);
+	};
+
+	return (
+		<StyledVariableInserter className={className} {...props}>
+			<Button
+				ref={buttonRef}
+				icon={<Icon icon={plusCircle} />}
+				label={placeholder}
+				onClick={() => setIsOpen((open) => !open)}
+				size={size}
+				variant={variant}
+				{...buttonProps}
+			/>
+
+			{isOpen && (
+				<StyledPopover
+					className="variable-inserter-popover"
+					anchor={buttonRef.current}
+					onClose={() => setIsOpen(false)}
+					placement="bottom-start"
+				>
+					<StyledChipPanel className="variable-inserter-chips">
+						{variables.length === 0 ? (
+							<StyledEmpty>
+								{__(
+									"No variables available",
+									"wp-component-library",
+								)}
+							</StyledEmpty>
+						) : (
+							variables.map((variable) => (
+								<StyledChip
+									key={variable.value}
+									type="button"
+									className="variable-inserter-chip"
+									onClick={() =>
+										handleVariableClick(variable)
+									}
+								>
+									{variable.label}
+								</StyledChip>
+							))
+						)}
+					</StyledChipPanel>
+				</StyledPopover>
+			)}
+		</StyledVariableInserter>
+	);
+};
+
+export { VariableInserter };

package/constants/statusColors.js

@@ -24,7 +24,7 @@ export const STATUS_COLOR_FALLBACKS = {
 	warning: {
 		base: "#f0b849",
 		light: "#fef8e6",
-		dark: "#b26200",
+		dark: "#a35a00",
 	},
 	error: {
 		base: "#cc1818",
@@ -53,6 +53,7 @@ const CORE_FAMILY = {
  * - accent: text, icons and chart series on neutral chrome
  * - stroke: borders, dots and markers
  * - surface: tinted backgrounds
+ * - fill: chart series, rings and bars (see statusColor)
  */
 const ROLES = {
 	content: ["foreground-content-%s", "dark"],
@@ -64,15 +65,24 @@ const ROLES = {
 /**
  * A status colour by role.
  *
+ * `fill` has no core token: core's status foregrounds are darkened for text
+ * contrast (caution reads olive as a fill), so filled shapes use the bright
+ * base palette instead.
+ *
  * @param {'success' | 'warning' | 'error' | 'info'} type
- * @param {'content' | 'accent' | 'stroke' | 'surface'} [role='accent']
+ * @param {'content' | 'accent' | 'stroke' | 'surface' | 'fill'} [role='accent']
  * @returns {string}
  */
 export const statusColor = (type, role = "accent") => {
+	if (role === "fill") {
+		return STATUS_COLOR_FALLBACKS[type]?.base ?? STATUS_COLOR_FALLBACKS.error.base;
+	}
+
 	const [token, variant] = ROLES[role] ?? ROLES.accent;
 	const family = CORE_FAMILY[type] ?? "error";
 	const fallback = STATUS_COLOR_FALLBACKS[type]?.[variant] ?? "#646970";
 
+	// eslint-disable-next-line @wordpress/no-unknown-ds-tokens -- token names come from the ROLES/CORE_FAMILY maps above.
 	return `var(--wpds-color-${token.replace("%s", family)}, ${fallback})`;
 };
 
@@ -143,7 +153,7 @@ export const getScoreChartColors = (score) => {
 	const tier = getScoreStatusTier(score);
 
 	return {
-		chart: statusColor(tier, "accent"),
+		chart: statusColor(tier, "fill"),
 		text: statusColor(tier, "content"),
 	};
 };
@@ -192,8 +202,8 @@ export const getBadgeIntentColors = (intent) => {
 export const defaultChartStatusColors = [
 	ADMIN_COLOR.brandFill,
 	"#646970",
-	statusColor("success"),
-	statusColor("warning"),
-	statusColor("error"),
+	statusColor("success", "fill"),
+	statusColor("warning", "fill"),
+	statusColor("error", "fill"),
 	"#8b5cf6",
 ];

package/editor.js

@@ -0,0 +1,16 @@
+/**
+ * Post-editor-only components and helpers: everything here needs
+ * @wordpress/editor or its `core/editor` store. Import them from
+ * `@siratik/wp-component-library/editor`; the main entry (index.js) has the
+ * rest, so screens outside the post editor don't load @wordpress/editor.
+ */
+export {
+	isMetaValueEmpty,
+	isTemplateEditorSurface,
+	useMetaGatedEditorVisibility,
+} from "./components/meta/meta-gated-editor";
+export { MetaPanel } from "./components/meta/MetaPanel";
+export {
+	default as AttributesPanel,
+	useAttributes,
+} from "./components/attributes-panel";

package/index.js

@@ -0,0 +1,127 @@
+/**
+ * WordPress Component Library
+ *
+ * A collection of reusable components for WordPress projects.
+ */
+
+export { AttachmentImage } from "./components/attachment-image";
+export {
+	registerBlockExtension,
+	unregisterBlockExtension,
+} from "./components/block-extension";
+export {
+	CustomBlockAppender,
+	CustomColumnAppender,
+	CustomInlineAppender,
+	CustomInspectorAppender,
+} from "./components/block-appender";
+export { ButtonFrontend } from "./components/button";
+export {
+	EditorMediaUpload,
+	InspectorMediaUpload,
+	SettingsMediaUpload,
+	ToolbarMediaUpload,
+} from "./components/media";
+export { ImageControls } from "./components/media/image-controls";
+// MetaPanel, AttributesPanel and the meta-gated editor helpers need the post
+// editor (@wordpress/editor or its store): they live in
+// `@siratik/wp-component-library/editor` (editor.js), so screens outside the
+// post editor never load @wordpress/editor through this entry.
+export { DragHandle, RemoveButton, Repeater } from "./components/repeater";
+// Query Controls - Individual ToolsPanelItems that can be composed together
+export { Badge } from "./components/badge";
+// Address search (Nominatim, explicit submit only).
+export {
+	AddressEntryControl,
+	GeocoderSearchControl,
+	geocodeAddress,
+	getCountryOptions,
+	toOrganizationLocation,
+	GEOCODER_ATTRIBUTION_HTML,
+	DEFAULT_GEOCODER_COUNTRY_CODES,
+} from "./components/geocoder";
+// Weekly business hours editor (controlled).
+export { SpecialHoursControl, WeeklyHoursControl } from "./components/business-hours";
+export { SegmentedBar } from "./components/segmented-bar";
+export { StylePicker } from "./components/style-picker";
+export {
+	STATUS_COLOR_FALLBACKS,
+	statusColor,
+	statusVar,
+	getStatusSurfaceColors,
+	getScoreStatusTier,
+	getScoreSurfaceColors,
+	getScoreChartColors,
+	getBadgeIntentColors,
+	defaultChartStatusColors,
+} from "./constants/statusColors";
+export { ADMIN_COLOR } from "./constants/adminColors";
+export { CaptchaPlaceholder } from "./components/captcha-placeholder";
+export { useAspectRatioOptions } from "./components/media/utils/aspect-ratios";
+export {
+	ColumnCountControl,
+	defaultOrderOptions,
+	DisplayTypeSelect,
+	HideCurrentPostControl,
+	ManualPostSelector,
+	ManualTermSelector,
+	OrderBySelect,
+	PostsPerPageControl,
+	PostTypeSelect,
+	CardTemplatePartSelect,
+	CardTemplatePartPanel,
+	getDefaultCardSlugForPostType,
+	reorderByIds,
+	SelectionModeControl,
+	TaxonomySelect,
+	useOrderedTerms,
+} from "./components/query";
+export {
+	default as SortableSelect,
+	tokensToString,
+} from "./components/sortable-select";
+export {
+	LinkToolsPanel,
+	LinkToolsPanelItems,
+	LINK_DEFAULTS,
+} from "./components/link-tools-panel";
+export { VariableField } from "./components/variable-field";
+export { VariableInserter } from "./components/variable-inserter";
+
+
+export {
+	getEditorExperiencePatterns,
+	getEditorExperienceSectionDivider,
+	getLocalize,
+	getLocalizeWindow,
+	getKitarisLocalize, // @deprecated — use getLocalize
+	getKitarisLocalizeWindow, // @deprecated — use getLocalizeWindow
+	SKIN_CHANGED_EVENT,
+} from "./utils/kitaris-localize";
+
+// Color controls
+export { slugAwareColorSetter } from "./utils/slug-aware-color-setter";
+
+// Icon Picker & Registry
+export {
+	iconStore,
+	ICON_STORE_NAME,
+	registerIconSet,
+	registerIcons,
+	registerConfigIconSets,
+	removeIconSet,
+	loadIconSet,
+	loadAllIconSets,
+	useIconSets,
+	useGroupedIcons,
+	useIconPickerGroups,
+	useAllIcons,
+	useIcons,
+	useIcon,
+	Icon,
+	IconPicker,
+	IconPickerModal,
+	IconPickerToolbarButton,
+	InlineIconPicker,
+	safeSvgSource,
+} from "./components/icon-picker";

package/package.json

@@ -1,17 +1,27 @@
 {
   "name": "@siratik/wp-component-library",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Library of components for use in the WordPress block editor.",
-  "main": "build/index.js",
-  "module": "build/index.js",
+  "main": "index.js",
+  "module": "index.js",
   "exports": {
-    ".": "./build/index.js",
+    ".": "./index.js",
+    "./editor": "./editor.js",
     "./constants/*": "./constants/*.js"
   },
-  "sideEffects": false,
+  "files": [
+    "index.js",
+    "editor.js",
+    "components",
+    "utils",
+    "constants",
+    "!**/test/**",
+    "!**/*.test.js"
+  ],
+  "sideEffects": [
+    "./components/icon-picker/store.js"
+  ],
   "scripts": {
-    "start": "wp-scripts start",
-    "build": "wp-scripts build",
     "format": "wp-scripts format",
     "lint:js": "wp-scripts lint-js",
     "lint:md:docs": "wp-scripts lint-md-docs",
@@ -20,30 +30,31 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+:https://github.com/builtnorth/wp-component-library.git"
+    "url": "git+https://github.com/builtnorth/wp-component-library.git"
   },
   "author": "Built North",
-  "license": "GPL-2.0-or-later",
+  "license": "GPL-3.0-or-later",
   "bugs": {
-    "url": "https://github.com/builtnorth/wp-component-library.git/issues"
+    "url": "https://github.com/builtnorth/wp-component-library/issues"
   },
-  "homepage": "https://github.com/builtnorth/wp-admin-dashboard?tab=readme-ov-file#readme",
+  "homepage": "https://github.com/builtnorth/wp-component-library#readme",
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@leeoniya/ufuzzy": "^1.0.14",
+    "@wordpress/icons": "^15.5.0",
     "classnames": "^2.5.1",
-    "dompurify": "^3.4.7",
-    "prop-types": "^15.8.1",
-    "react-window": "^1.8.11"
+    "dompurify": "^3.4.17",
+    "prop-types": "^15.8.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1"
   },
   "devDependencies": {
-    "@wordpress/scripts": "^34.2.0"
+    "@wordpress/scripts": "^34.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

package/utils/kitaris-localize.js

@@ -0,0 +1,128 @@
+/**
+ * Resolve kitaris_localize across nested editor iframes (canvas vs shell).
+ *
+ * NOTE: window.kitaris_localize, window.kitarisLocalizeAdmin, and
+ * window.kitarisLocalizeShared are PHP-injected globals — their names are
+ * controlled by the host plugin and cannot be changed here.
+ */
+export const SKIN_CHANGED_EVENT = "themeSkinSwitcherChanged";
+
+/**
+ * Whether a window's globals can be read from here (same origin).
+ *
+ * @param {Window} win
+ * @return {boolean}
+ */
+function isReadableWindow(win) {
+	try {
+		// Throws a SecurityError for a cross-origin window.
+		return !!win.document;
+	} catch {
+		return false;
+	}
+}
+
+/**
+ * The current window plus each same-origin ancestor. The walk stops at the
+ * first cross-origin parent, so callers can read globals from every entry.
+ *
+ * @return {Window[]}
+ */
+function getEditorWindowChain() {
+	const chain = [window];
+
+	try {
+		let win = window;
+
+		while (win.parent && win.parent !== win) {
+			win = win.parent;
+
+			if (!isReadableWindow(win)) {
+				break;
+			}
+
+			chain.push(win);
+		}
+	} catch {
+		// Keep whatever was collected before the error.
+	}
+
+	return chain;
+}
+
+/**
+ * @param {string} patternSlug Optional active pattern slug for best-match lookup.
+ * @return {Window}
+ */
+export function getLocalizeWindow(patternSlug = "") {
+	const chain = getEditorWindowChain();
+
+	if (patternSlug) {
+		for (let i = chain.length - 1; i >= 0; i--) {
+			const url =
+				chain[i].kitaris_localize?.blocks?.editor_experience?.patterns
+					?.pattern_urls?.[patternSlug];
+
+			if (url) {
+				return chain[i];
+			}
+		}
+
+		for (let i = chain.length - 1; i >= 0; i--) {
+			const patterns =
+				chain[i].kitaris_localize?.blocks?.editor_experience?.patterns;
+
+			if (patterns?.available_patterns?.[patternSlug]) {
+				return chain[i];
+			}
+		}
+	}
+
+	for (let i = chain.length - 1; i >= 0; i--) {
+		if (chain[i].kitaris_localize?.blocks?.editor_experience?.patterns) {
+			return chain[i];
+		}
+	}
+
+	return window;
+}
+
+/**
+ * @param {string} patternSlug
+ * @return {object|undefined}
+ */
+export function getLocalize(patternSlug = "") {
+	return getLocalizeWindow(patternSlug).kitaris_localize;
+}
+
+/**
+ * @param {string} patternSlug
+ * @return {object|undefined}
+ */
+export function getEditorExperiencePatterns(patternSlug = "") {
+	return getLocalize(patternSlug)?.blocks?.editor_experience?.patterns;
+}
+
+/**
+ * @return {object|undefined}
+ */
+export function getEditorExperienceSectionDivider() {
+	const chain = getEditorWindowChain();
+
+	for (let i = chain.length - 1; i >= 0; i--) {
+		const sectionDivider =
+			chain[i].kitaris_localize?.blocks?.editor_experience?.section_divider;
+
+		if (sectionDivider) {
+			return sectionDivider;
+		}
+	}
+
+	return undefined;
+}
+
+// Backwards-compat aliases for the renamed functions.
+/** @deprecated Use getLocalizeWindow instead. */
+export const getKitarisLocalizeWindow = getLocalizeWindow;
+/** @deprecated Use getLocalize instead. */
+export const getKitarisLocalize = getLocalize;

package/utils/slug-aware-color-setter.js

@@ -0,0 +1,27 @@
+/**
+ * A withColors() setter that keeps the palette slug the user picked.
+ *
+ * withColors' own setters only receive the hex and save the first palette
+ * entry with that hex, so when two presets share a value (e.g. "white" and
+ * "primary-contrast" are both #ffffff) picking the second saves the first.
+ * The color dropdown also passes the slug, as core's color supports use it;
+ * save that directly and leave custom colors to the withColors setter.
+ *
+ * @param {Function} setAttributes Block attribute setter.
+ * @param {string}   name          Color attribute mapped in withColors().
+ * @param {Function} setter        withColors' setter for that attribute.
+ * @return {Function} onColorChange handler: ( value, slug ) => void.
+ */
+export function slugAwareColorSetter(setAttributes, name, setter) {
+	return (value, slug) => {
+		if (!value || !slug) {
+			setter(value);
+			return;
+		}
+
+		setAttributes({
+			[name]: slug,
+			[`custom${name.charAt(0).toUpperCase()}${name.slice(1)}`]: undefined,
+		});
+	};
+}

package/build/index.asset.php

@@ -1,20 +0,0 @@
-<?php return array(
-	'dependencies' => array(
-		'react',
-		'react-dom',
-		'react-jsx-runtime',
-		'wp-block-editor',
-		'wp-blocks',
-		'wp-components',
-		'wp-compose',
-		'wp-core-data',
-		'wp-data',
-		'wp-editor',
-		'wp-element',
-		'wp-hooks',
-		'wp-i18n',
-		'wp-keycodes',
-		'wp-media-utils'
-	),
-	'version' => 'ddaddbc0f9b3a1701879'
-);