@siratik/wp-component-library 0.0.0-stage → 0.1.1

package/constants/adminColors.js

@@ -0,0 +1,42 @@
+/**
+ * Admin colours by role.
+ *
+ * Each value reads WordPress's design tokens (`--wpds-color-*`, WP 7.1+) or
+ * the admin theme colour, then a fixed fallback. kitaris-dashboard maps its
+ * palette and whitelabel colours onto those tokens, so screens follow the
+ * brand when it is active and WordPress's defaults when it is not.
+ *
+ * @package WPComponentLibrary
+ */
+
+/** Neutral and brand colours. */
+export const ADMIN_COLOR = {
+	/** Body text and icons. */
+	text: "var(--wpds-color-foreground-content-neutral, #333333)",
+	/** Muted text, secondary icons. */
+	muted: "var(--wpds-color-foreground-content-neutral-weak, #757575)",
+	/** Cards and panels. */
+	surface: "var(--wpds-color-background-surface-neutral-strong, #ffffff)",
+	/** Subtle panels, hover rows, placeholders. */
+	surfaceSubtle: "var(--wpds-color-background-surface-neutral-weak, #f0f0f0)",
+	/** Page-level background. */
+	page: "var(--wpds-color-background-surface-neutral, rgb(247, 247, 247))",
+	/** Borders. */
+	border: "var(--wpds-color-stroke-surface-neutral, rgb(217, 219, 222))",
+	/** Dividers and faint borders. */
+	borderSubtle: "var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0)",
+	/** Brand text, links and icons. */
+	brand: "var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9))",
+	/** Brand fills (buttons, bars, active states). */
+	brandFill:
+		"var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9))",
+	/** Hovered brand fills. */
+	brandFillHover:
+		"var(--wpds-color-background-interactive-brand-strong-active, var(--wp-admin-theme-color-darker-10, #2145e6))",
+	/** Brand borders and outlines. */
+	brandStroke: "var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9))",
+	/** Text and icons on a brand fill. */
+	onBrand: "var(--wpds-color-foreground-interactive-brand-strong, #ffffff)",
+	/** Second chart series and secondary accents (no core token). */
+	secondary: "var(--kitaris-admin-color-secondary, #0F9C90)",
+};

package/constants/statusColors.js

@@ -0,0 +1,209 @@
+/**
+ * Status colours for Kitaris admin surfaces.
+ *
+ * Each value reads WordPress's design tokens (`--wpds-color-*`, WP 7.1+),
+ * then a fixed fallback. kitaris-dashboard maps its status colours onto those
+ * tokens. Warning uses core's `caution` family, as core's Notice does.
+ *
+ * @package WPComponentLibrary
+ */
+
+import { ADMIN_COLOR } from "./adminColors";
+
+/**
+ * Fixed fallbacks (kitaris-dashboard's default status colours).
+ *
+ * @type {Record<string, Record<'base' | 'light' | 'dark', string>>}
+ */
+export const STATUS_COLOR_FALLBACKS = {
+	success: {
+		base: "#4ab866",
+		light: "#edfaef",
+		dark: "#007017",
+	},
+	warning: {
+		base: "#f0b849",
+		light: "#fef8e6",
+		dark: "#b26200",
+	},
+	error: {
+		base: "#cc1818",
+		light: "#fcebea",
+		dark: "#8a0000",
+	},
+	info: {
+		base: "#3858e9",
+		light: "#e6f2ff",
+		dark: "#005cb8",
+	},
+};
+
+/** Core design-token family for each status. */
+const CORE_FAMILY = {
+	success: "success",
+	warning: "caution",
+	error: "error",
+	info: "info",
+};
+
+/**
+ * Core token for each role, and the fallback variant it uses.
+ *
+ * - content: text on a tinted surface
+ * - 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"],
+	accent: ["foreground-content-%s-weak", "base"],
+	stroke: ["stroke-surface-%s-strong", "base"],
+	surface: ["background-surface-%s-weak", "light"],
+};
+
+/**
+ * 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' | '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})`;
+};
+
+/**
+ * A status colour by variant: base (text and icons), light (tinted
+ * backgrounds) or dark (text on a tinted background).
+ *
+ * @param {'success' | 'warning' | 'error' | 'info'} type
+ * @param {'base' | 'light' | 'dark'} [variant='base']
+ * @returns {string}
+ */
+export const statusVar = (type, variant = "base") => {
+	const role = { base: "accent", light: "surface", dark: "content" }[variant] ?? "accent";
+
+	return statusColor(type, role);
+};
+
+/**
+ * Surface colors for score badges, pills, and bordered indicators.
+ *
+ * @param {'success' | 'warning' | 'error' | 'info'} status
+ * @returns {{ bg: string, text: string, border: string }}
+ */
+export const getStatusSurfaceColors = (status) => ({
+	bg: statusColor(status, "surface"),
+	text: statusColor(status, "content"),
+	border: statusColor(status, "stroke"),
+});
+
+/**
+ * Map a 0–100 score onto the four status intents.
+ *
+ * @param {number} score
+ * @returns {'success' | 'info' | 'warning' | 'error'}
+ */
+export const getScoreStatusTier = (score) => {
+	const value = Number(score);
+
+	if (!Number.isFinite(value)) {
+		return "error";
+	}
+
+	if (value >= 90) {
+		return "success";
+	}
+	if (value >= 70) {
+		return "info";
+	}
+	if (value >= 50) {
+		return "warning";
+	}
+
+	return "error";
+};
+
+/**
+ * @param {number} score
+ * @returns {{ bg: string, text: string, border: string }}
+ */
+export const getScoreSurfaceColors = (score) =>
+	getStatusSurfaceColors(getScoreStatusTier(score));
+
+/**
+ * @param {number} score
+ * @returns {{ chart: string, text: string }}
+ */
+export const getScoreChartColors = (score) => {
+	const tier = getScoreStatusTier(score);
+
+	return {
+		chart: statusColor(tier, "fill"),
+		text: statusColor(tier, "content"),
+	};
+};
+
+/**
+ * Badge intent text color — error uses the accent for stronger contrast on a
+ * light background.
+ *
+ * @param {string} intent
+ * @returns {{ background: string, color: string }}
+ */
+export const getBadgeIntentColors = (intent) => {
+	switch (intent) {
+		case "error":
+		case "critical":
+			return {
+				background: statusColor("error", "surface"),
+				color: statusColor("error", "accent"),
+			};
+		case "warning":
+			return {
+				background: statusColor("warning", "surface"),
+				color: statusColor("warning", "content"),
+			};
+		case "info":
+		case "suggestion":
+			return {
+				background: statusColor("info", "surface"),
+				color: statusColor("info", "content"),
+			};
+		case "success":
+		case "passed":
+			return {
+				background: statusColor("success", "surface"),
+				color: statusColor("success", "content"),
+			};
+		default:
+			return {
+				background: ADMIN_COLOR.surfaceSubtle,
+				color: ADMIN_COLOR.text,
+			};
+	}
+};
+
+/** Default chart series colors aligned with admin status tokens. */
+export const defaultChartStatusColors = [
+	ADMIN_COLOR.brandFill,
+	"#646970",
+	statusColor("success", "fill"),
+	statusColor("warning", "fill"),
+	statusColor("error", "fill"),
+	"#8b5cf6",
+];

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "@siratik/wp-component-library",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Library of components for use in the WordPress block editor.",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "exports": {
+    ".": "./build/index.js",
+    "./constants/*": "./constants/*.js"
+  },
+  "sideEffects": false,
+  "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",
+    "lint:pkg-json": "wp-scripts lint-pkg-json",
+    "test:unit": "wp-scripts test-unit-js components utils"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/builtnorth/wp-component-library.git"
+  },
+  "author": "Built North",
+  "license": "GPL-2.0-or-later",
+  "bugs": {
+    "url": "https://github.com/builtnorth/wp-component-library/issues"
+  },
+  "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": "^11.8.0",
+    "classnames": "^2.5.1",
+    "dompurify": "^3.4.7",
+    "prop-types": "^15.8.1",
+    "react-window": "^1.8.11"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1"
+  },
+  "devDependencies": {
+    "@wordpress/scripts": "^34.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
 }