@siratik/wp-component-library 0.1.1 → 0.1.3

package/components/icon-picker/store.js

@@ -0,0 +1,223 @@
+/**
+ * Icon Registry Store
+ *
+ * WordPress data store for managing icon sets and icons.
+ * Replaces the 10up `tenup/icons` store with the `wpcl/icons` store.
+ *
+ * Filters available via @wordpress/hooks:
+ *   - wpcl.icons.iconSet    — modify an icon set on registration
+ *   - wpcl.icons.iconSets   — modify the full sorted list of icon sets
+ *   - wpcl.icons.icon       — filter individual icons (return false to exclude)
+ *
+ * Icon sets may register with a lazy `load` function via registerIconSet() in api.js.
+ * Until loaded, placeholder icons (e.g. essential defaults) remain available.
+ */
+
+import { createReduxStore, register, select } from "@wordpress/data";
+import { applyFilters } from "@wordpress/hooks";
+
+export const STORE_NAME = "wpcl/icons";
+
+/** @typedef {'idle'|'loading'|'loaded'|'error'} IconSetLoadStatus */
+
+const DEFAULT_STATE = {
+	iconSets: {},
+};
+
+const storeSelectors = {
+	/**
+	 * Get all icon sets, sorted by priority descending (highest first).
+	 * Applies the wpcl.icons.iconSets filter.
+	 */
+	getIconSets(state) {
+		const sets = Object.values(state.iconSets);
+
+		const sorted = [...sets].sort((a, b) => {
+			const pa = a.priority ?? 0;
+			const pb = b.priority ?? 0;
+			if (pb !== pa) { return pb - pa; }
+			return a.name.localeCompare(b.name);
+		});
+
+		return applyFilters("wpcl.icons.iconSets", sorted);
+	},
+
+	/**
+	 * The registered sets keyed by name, unfiltered and unsorted. The same
+	 * object until a set changes, so hooks can memoize on it.
+	 */
+	getIconSetsMap(state) {
+		return state.iconSets;
+	},
+
+	/**
+	 * Get a specific icon set by name.
+	 */
+	getIconSet(state, name) {
+		return state.iconSets[name] ?? null;
+	},
+
+	/**
+	 * True when any registered set is still loading.
+	 */
+	isIconSetsLoading(state) {
+		return Object.values(state.iconSets).some(
+			(set) => set.loadStatus === "loading",
+		);
+	},
+
+	/**
+	 * True when any set is registered but not yet loaded (idle or loading).
+	 */
+	hasPendingIconSets(state) {
+		return Object.values(state.iconSets).some(
+			(set) => set.loadStatus === "idle" || set.loadStatus === "loading",
+		);
+	},
+
+	/**
+	 * Get all icons for a given set, with per-icon wpcl.icons.icon filter applied.
+	 */
+	getIcons(state, name) {
+		const set = state.iconSets[name];
+		if (!set) { return []; }
+
+		return set.icons.reduce((acc, icon) => {
+			const filtered = applyFilters("wpcl.icons.icon", icon, set);
+			if (filtered !== false) {
+				acc.push(filtered);
+			}
+			return acc;
+		}, []);
+	},
+
+	/**
+	 * Get a single icon by set + name.
+	 */
+	getIcon(state, iconSetName, iconName) {
+		const set = state.iconSets[iconSetName];
+		if (!set) { return undefined; }
+		return set.icons.find((icon) => icon.name === iconName);
+	},
+};
+
+const storeActions = {
+	registerIconSet(iconSet) {
+		return { type: "REGISTER_ICON_SET", iconSet };
+	},
+	setIconSetLoading(name) {
+		return { type: "SET_ICON_SET_LOADING", name };
+	},
+	setIconSetIcons(name, icons) {
+		return { type: "SET_ICON_SET_ICONS", name, icons };
+	},
+	setIconSetError(name, message) {
+		return { type: "SET_ICON_SET_ERROR", name, message };
+	},
+	removeIconSet(name) {
+		return { type: "REMOVE_ICON_SET", name };
+	},
+};
+
+function reducer(state = DEFAULT_STATE, action) {
+	switch (action.type) {
+		case "REGISTER_ICON_SET": {
+			const iconSet = applyFilters(
+				"wpcl.icons.iconSet",
+				action.iconSet,
+			);
+			const previous = state.iconSets[iconSet.name];
+			const icons =
+				iconSet.icons ??
+				(previous?.icons?.length ? previous.icons : []);
+
+			return {
+				...state,
+				iconSets: {
+					...state.iconSets,
+					[iconSet.name]: {
+						...iconSet,
+						icons,
+						loadStatus: iconSet.loadStatus ?? "loaded",
+						loadError: null,
+					},
+				},
+			};
+		}
+
+		case "SET_ICON_SET_LOADING": {
+			const set = state.iconSets[action.name];
+			if (!set) { return state; }
+			return {
+				...state,
+				iconSets: {
+					...state.iconSets,
+					[action.name]: {
+						...set,
+						loadStatus: "loading",
+						loadError: null,
+					},
+				},
+			};
+		}
+
+		case "SET_ICON_SET_ICONS": {
+			const set = state.iconSets[action.name];
+			if (!set) { return state; }
+			return {
+				...state,
+				iconSets: {
+					...state.iconSets,
+					[action.name]: {
+						...set,
+						icons: action.icons,
+						loadStatus: "loaded",
+						loadError: null,
+					},
+				},
+			};
+		}
+
+		case "SET_ICON_SET_ERROR": {
+			const set = state.iconSets[action.name];
+			if (!set) { return state; }
+			return {
+				...state,
+				iconSets: {
+					...state.iconSets,
+					[action.name]: {
+						...set,
+						loadStatus: "error",
+						loadError: action.message,
+					},
+				},
+			};
+		}
+
+		case "REMOVE_ICON_SET": {
+			if (!state.iconSets[action.name]) { return state; }
+			const next = {
+				...state,
+				iconSets: { ...state.iconSets },
+			};
+			delete next.iconSets[action.name];
+			return next;
+		}
+
+		default:
+			return state;
+	}
+}
+
+const iconStore = createReduxStore(STORE_NAME, {
+	reducer,
+	selectors: storeSelectors,
+	actions: storeActions,
+});
+
+// Register only once (safe to call multiple times)
+if (!select(STORE_NAME)) {
+	register(iconStore);
+}
+
+export { iconStore };

package/components/icon-picker/styles.js

@@ -0,0 +1,232 @@
+/**
+ * Emotion styled components for the Icon Picker.
+ */
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Button } from "@wordpress/components";
+
+/** Supports Phosphor (fill) and Lucide (stroke) SVG sources. */
+const iconSvgColorStyles = css`
+	svg[fill="none"] {
+		fill: none;
+		stroke: currentColor;
+	}
+
+	svg:not([fill="none"]) {
+		fill: currentColor;
+	}
+`;
+
+// ─── Modal (matches core's icon block picker, WP 7.1) ─────────────────────────
+// Values copy core's `.wp-block-icon__inserter-*` rules (block-library
+// editor.css) and the vertical tabs of @wordpress/ui, which core bundles
+// privately.
+
+const WIDE = "@media (min-width: 782px)";
+
+/** Sidebar: search + collection tabs. Fixed beside the grid on wide screens. */
+export const PickerSidebar = styled.div`
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding-bottom: 24px;
+
+	${WIDE} {
+		overflow-x: visible;
+		overflow-y: auto;
+		position: absolute;
+		top: 72px;
+		left: 0;
+		bottom: 0;
+		width: 280px;
+		box-sizing: border-box;
+		padding-top: 24px;
+		padding-inline: 24px;
+	}
+`;
+
+export const TabList = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+`;
+
+export const Tab = styled.button`
+	display: flex;
+	align-items: center;
+	width: 100%;
+	min-height: 40px;
+	padding: 8px 12px;
+	margin: 0;
+	border: none;
+	border-radius: 2px;
+	background: transparent;
+	box-shadow: none;
+	color: #1e1e1e;
+	font-family: inherit;
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 1.2;
+	text-align: start;
+	white-space: nowrap;
+	cursor: pointer;
+	outline: none;
+
+	&[aria-selected="true"] {
+		background-color: #ededed;
+	}
+
+	&:focus-visible {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px)
+			var(--wp-admin-theme-color, #3858e9);
+	}
+
+	.wpcl-icon-picker__tab-label {
+		flex-grow: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	svg {
+		flex-shrink: 0;
+		margin-inline-end: -4px;
+		opacity: 0;
+		fill: currentColor;
+	}
+
+	&[aria-selected="true"] svg,
+	&:hover svg,
+	&:focus-visible svg {
+		opacity: 1;
+	}
+
+	&:dir(rtl) svg {
+		rotate: 180deg;
+	}
+
+	@media (forced-colors: active) {
+		&[aria-selected="true"] {
+			outline: 1px solid CanvasText;
+		}
+	}
+`;
+
+/** The current tab's icons. */
+export const PickerPanel = styled.div`
+	outline: none;
+
+	${WIDE} {
+		margin-inline-start: 280px;
+	}
+`;
+
+export const PickerLoading = styled.div`
+	display: flex;
+	justify-content: center;
+	padding: 24px;
+`;
+
+export const PickerNoResults = styled.div`
+	display: flex;
+	justify-content: center;
+`;
+
+export const IconGridList = styled.div`
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+`;
+
+/** A components Button, so it keeps Button's hover, focus and primary colors. */
+export const IconGridItem = styled(Button)`
+	&.components-button {
+		display: flex;
+		flex-direction: column;
+		height: auto !important;
+	}
+`;
+
+export const IconGridItemIcon = styled.span`
+	padding: 12px;
+
+	svg {
+		display: block;
+		width: 24px;
+		height: 24px;
+	}
+
+	${iconSvgColorStyles}
+`;
+
+export const IconGridItemTitle = styled.span`
+	font-size: 12px;
+	padding: 4px 4px 8px;
+	overflow-wrap: break-word;
+`;
+
+// ─── Inspector panel picker ───────────────────────────────────────────────────
+
+export const PickerPreview = styled.span`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	overflow: hidden;
+	flex-shrink: 0;
+	color: inherit;
+
+	svg {
+		width: 20px;
+		height: 20px;
+		display: block;
+	}
+
+	${iconSvgColorStyles}
+`;
+
+export const PickerName = styled.span`
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+`;
+
+// ─── Toolbar picker ───────────────────────────────────────────────────────────
+
+export const ToolbarIconWrap = styled.span`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	overflow: hidden;
+	flex-shrink: 0;
+
+	/* Match wp-blocks toolbar rules; overrides SVG width/height attributes. */
+	svg {
+		display: block;
+		width: 24px !important;
+		height: 24px !important;
+		min-width: 0;
+		min-height: 0;
+		max-width: 24px;
+		max-height: 24px;
+	}
+
+	${iconSvgColorStyles}
+`;
+
+// ─── Inline (canvas) picker ───────────────────────────────────────────────────
+// div[role="button"] avoids UA button color which would break currentColor.
+
+export const InlinePickerWrap = styled.div`
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+
+	svg {
+		display: block;
+	}
+
+	${iconSvgColorStyles}
+`;

package/components/icon-picker/utils.js

@@ -0,0 +1,138 @@
+import DOMPurify from "dompurify";
+
+/**
+ * Shown when no icon is set: the kitaris-essential "star" icon
+ * (copied from wp-blocks src/util/essential-icons.js).
+ */
+export const PLACEHOLDER_SVG =
+	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z"/></svg>';
+
+/**
+ * Normalize and sanitize an SVG source string for safe innerHTML rendering.
+ *
+ * Strips leading HTML comments (e.g. Lucide license headers), extracts
+ * the root <svg> element, then sanitizes with DOMPurify to remove event
+ * handlers (onload, onerror, etc.), <script> tags, and javascript: hrefs.
+ *
+ * Icons never need these, so they are removed too:
+ * - <style> elements (inline SVG styles apply to the whole page) and
+ *   <image> elements (they load remote files).
+ * - style attributes that could load a resource (url(), image(), @, or CSS
+ *   escapes that could hide either).
+ * - href / xlink:href values that are not same-document "#" references.
+ *
+ * @param {string} source
+ * @returns {string}
+ */
+export function safeSvgSource(source) {
+	if (typeof source !== "string") {
+		return "";
+	}
+
+	let trimmed = source.trim().replace(/^(\s*<!--[\s\S]*?-->\s*)+/, "").trim();
+
+	if (!trimmed.startsWith("<svg")) {
+		const match = trimmed.match(/<svg[\s\S]*<\/svg>/i);
+		trimmed = match ? match[0] : "";
+	}
+
+	if (!trimmed) {
+		return "";
+	}
+
+	const purifier = getIconPurifier();
+	if (!purifier) {
+		// No DOM to sanitize with, so render nothing rather than raw markup.
+		return "";
+	}
+
+	return purifier.sanitize(trimmed, {
+		USE_PROFILES: { svg: true, svgFilters: true },
+		FORBID_TAGS: ["style", "image"],
+	});
+}
+
+/**
+ * Style values that could fetch a resource, or hide one behind CSS escapes.
+ */
+const UNSAFE_STYLE_PATTERN = /url\s*\(|image|@|\\|expression/i;
+
+let iconPurifier = null;
+
+/**
+ * A DOMPurify instance of our own, so the attribute hook below never
+ * affects other DOMPurify users on the page.
+ *
+ * @returns {Object|null} DOMPurify instance, or null without a DOM.
+ */
+function getIconPurifier() {
+	if (iconPurifier) {
+		return iconPurifier;
+	}
+
+	if (typeof window === "undefined") {
+		return null;
+	}
+
+	iconPurifier = DOMPurify(window);
+
+	iconPurifier.addHook("afterSanitizeAttributes", (node) => {
+		if (!node.hasAttribute) {
+			return;
+		}
+
+		["href", "xlink:href"].forEach((name) => {
+			const value = node.getAttribute(name);
+			if (value !== null && !value.trim().startsWith("#")) {
+				node.removeAttribute(name);
+			}
+		});
+
+		const style = node.getAttribute("style");
+		if (style !== null && UNSAFE_STYLE_PATTERN.test(style)) {
+			node.removeAttribute("style");
+		}
+	});
+
+	return iconPurifier;
+}
+
+/** The "All" tab's value. */
+export const ALL_TAB = "";
+
+/**
+ * Whether a set is the one a saved icon belongs to: by name, or by one of
+ * the set's `aliases` (older set names, e.g. a theme set a core collection
+ * replaced).
+ *
+ * @param {Object} group
+ * @param {string} iconSet
+ * @returns {boolean}
+ */
+export function isSetOf(group, iconSet) {
+	if (!iconSet) {
+		return false;
+	}
+	return (
+		group.name === iconSet ||
+		(Array.isArray(group.aliases) && group.aliases.includes(iconSet))
+	);
+}
+
+/**
+ * The tab the picker opens on: the selected icon's set, like core's Icon
+ * block, so the icon shows highlighted in a short list; "All" when no icon is
+ * selected (or its set is gone), so every icon is offered first.
+ *
+ * @param {Array}    groups         Icon sets ({ name, aliases, icons }).
+ * @param {string}   [valueSet]     The selected icon's set.
+ * @param {Function} isSelectedIcon Whether a grid icon is the selected one
+ *                                  (for values without a set).
+ * @returns {string} A set name, or ALL_TAB.
+ */
+export function openingTab(groups, valueSet, isSelectedIcon) {
+	const group = groups.find((item) =>
+		valueSet ? isSetOf(item, valueSet) : item.icons.some(isSelectedIcon),
+	);
+	return group?.name ?? ALL_TAB;
+}