@liiift-studio/sanity-font-manager 2.3.18 → 2.4.0

package/src/components/RegenerateSubfamiliesComponent.jsx

@@ -1,185 +1,185 @@
-// Recalculates and patches the subfamily field on all fonts linked to a typeface
-
-import React, { useState } from 'react';
-import { nanoid } from 'nanoid';
-import { Button, Text, Stack, Box } from '@sanity/ui';
-import { useFormValue } from 'sanity';
-import { useSanityClient } from '../hooks/useSanityClient';
-import { expandAbbreviations } from '../utils/generateKeywords';
-
-/**
- * Button component that rebuilds the subfamilies array on the current typeface document
- * by grouping all linked fonts by their `subfamily` field.
- *
- * NOTE: This component uses its own local updateTypefaceDocument that patches ONLY
- * the `subfamilies` key while preserving all other styles fields (fonts, variableFont).
- * Do NOT replace it with the shared updateTypefaceDocument from utils/, which patches
- * the full styles object and would overwrite the fonts/variableFont arrays.
- */
-export const RegenerateSubfamiliesComponent = () => {
-	const [status, setStatus] = useState('');
-	const [ready, setReady] = useState(true);
-	const [error, setError] = useState(false);
-
-	const client = useSanityClient();
-
-	const doc_id = useFormValue(['_id']);
-	const title = useFormValue(['title']);
-	const slug = useFormValue(['slug']);
-	const stylesObject = useFormValue(['styles']) || { fonts: [], variableFont: [] };
-
-	const handleClick = () => {
-		regenerateSubfamilies({ title, stylesObject, slug, doc_id, client, setStatus, setReady, setError });
-	};
-
-	return (
-		<>
-			{status && (
-				<Box padding={3} style={{ borderRadius: '4px', marginBottom: '10px' }}>
-					<Text size={1} style={{ color: error ? 'red' : 'green' }}>{status}</Text>
-				</Box>
-			)}
-			<Button mode="ghost" tone="primary" width="fill" padding={3} onClick={handleClick} disabled={!ready}>
-				<Stack space={2}>
-					<Text align="center">Regenerate Subfamilies</Text>
-				</Stack>
-			</Button>
-		</>
-	);
-};
-
-/**
- * Fetches all fonts for a typeface, groups them by subfamily, and patches the document.
- */
-const regenerateSubfamilies = async ({ title, stylesObject, slug, doc_id, client, setStatus, setReady, setError }) => {
-	try {
-		setStatus('Regenerating subfamilies...');
-		setReady(false);
-		setError(false);
-
-		const allFonts = await fetchFonts(title, slug, client);
-
-		if (!allFonts || allFonts.length === 0) {
-			setStatus('No fonts found for this typeface');
-			setReady(true);
-			setError(true);
-			return;
-		}
-
-		console.log('Found fonts:', allFonts.length);
-		setStatus(`Found ${allFonts.length} fonts. Processing...`);
-
-		const subfamilies = groupFontsBySubfamily(allFonts);
-		const newSubfamiliesArray = createSubfamiliesArray(subfamilies);
-
-		console.log('New subfamilies:', newSubfamiliesArray);
-		setStatus(`Created ${newSubfamiliesArray.length} subfamily groups`);
-
-		await updateTypefaceSubfamilies(doc_id, stylesObject, newSubfamiliesArray, client, setStatus, setError);
-
-		setStatus('Subfamilies regenerated successfully');
-	} catch (e) {
-		console.error(e.message);
-		setStatus('Error regenerating subfamilies');
-		setError(true);
-	}
-
-	setReady(true);
-};
-
-/**
- * Fetches the font list for a typeface by slug.
- * @param {string} title
- * @param {Object} slug
- * @param {Object} client
- * @returns {Promise<Array>}
- */
-const fetchFonts = async (title, slug, client) => {
-	const slugCurrent = slug?.current || title;
-	const query = await client.fetch(
-		`*[_type == "typeface" && slug.current == $slugCurrent][0]{
-			"fonts": styles.fonts[]->{ _id, title, subfamily, style, weight, _key }
-		}`,
-		{ slugCurrent }
-	);
-	return query?.fonts || [];
-};
-
-/**
- * Groups fonts by their subfamily name, excluding VF fonts from shared subfamilies.
- * @param {Object[]} fonts
- * @returns {Object}
- */
-const groupFontsBySubfamily = (fonts) => {
-	const subfamilies = {};
-	fonts.forEach(font => {
-		if (font.title?.includes('VF')) {
-			// Variable fonts get isolated into their own unique group so they don't pollute subfamilies
-			subfamilies[`VF_${font.title}`] = [font];
-		} else {
-			const subfamilyName = font.subfamily ? expandAbbreviations(font.subfamily) : 'Regular';
-			if (!subfamilies[subfamilyName]) subfamilies[subfamilyName] = [];
-			subfamilies[subfamilyName].push(font);
-		}
-	});
-	return subfamilies;
-};
-
-/**
- * Converts a grouped subfamilies map into the Sanity array format.
- * @param {Object} subfamilies
- * @returns {Object[]}
- */
-const createSubfamiliesArray = (subfamilies) => {
-	return Object.keys(subfamilies).map(subfamilyName => ({
-		title: subfamilyName,
-		_key: nanoid(),
-		_type: 'object',
-		fonts: subfamilies[subfamilyName].map(font => ({
-			_ref: font._id,
-			_key: nanoid(),
-			_type: 'reference',
-			_weak: true,
-		})),
-	}));
-};
-
-/**
- * Patches ONLY the subfamilies key on the typeface document, preserving fonts and variableFont.
- * This is intentionally scoped — do NOT replace with the shared updateTypefaceDocument util.
- * @param {string} doc_id
- * @param {Object} stylesObject
- * @param {Object[]} newSubfamiliesArray
- * @param {Object} client
- * @param {Function} setStatus
- * @param {Function} setError
- */
-const updateTypefaceSubfamilies = async (doc_id, stylesObject, newSubfamiliesArray, client, setStatus, setError) => {
-	const patch = {
-		styles: {
-			...stylesObject,
-			subfamilies: newSubfamiliesArray,
-		},
-	};
-
-	try {
-		await client.patch(doc_id).set(patch).commit();
-		console.log(`Updated document: ${doc_id}`);
-
-		if (doc_id.startsWith('drafts.')) {
-			const publishedId = doc_id.replace('drafts.', '');
-			// Parameterized to guard against any edge-case injection via draft IDs
-			const publishedDoc = await client.fetch(`*[_id == $publishedId]`, { publishedId }).then(res => res[0]);
-			if (publishedDoc) {
-				await client.patch(publishedId).set(patch).commit();
-				console.log(`Updated published document: ${publishedId}`);
-			} else {
-				console.log(`No published document found for ${publishedId}, skipping`);
-			}
-		}
-	} catch (err) {
-		console.error('Error updating document:', err.message);
-		setStatus('Error regenerating subfamilies');
-		setError(true);
-	}
-};
+// Recalculates and patches the subfamily field on all fonts linked to a typeface
+
+import React, { useState } from 'react';
+import { nanoid } from 'nanoid';
+import { Button, Text, Stack, Box } from '@sanity/ui';
+import { useFormValue } from 'sanity';
+import { useSanityClient } from '../hooks/useSanityClient';
+import { expandAbbreviations } from '../utils/generateKeywords';
+
+/**
+ * Button component that rebuilds the subfamilies array on the current typeface document
+ * by grouping all linked fonts by their `subfamily` field.
+ *
+ * NOTE: This component uses its own local updateTypefaceDocument that patches ONLY
+ * the `subfamilies` key while preserving all other styles fields (fonts, variableFont).
+ * Do NOT replace it with the shared updateTypefaceDocument from utils/, which patches
+ * the full styles object and would overwrite the fonts/variableFont arrays.
+ */
+export const RegenerateSubfamiliesComponent = () => {
+	const [status, setStatus] = useState('');
+	const [ready, setReady] = useState(true);
+	const [error, setError] = useState(false);
+
+	const client = useSanityClient();
+
+	const doc_id = useFormValue(['_id']);
+	const title = useFormValue(['title']);
+	const slug = useFormValue(['slug']);
+	const stylesObject = useFormValue(['styles']) || { fonts: [], variableFont: [] };
+
+	const handleClick = () => {
+		regenerateSubfamilies({ title, stylesObject, slug, doc_id, client, setStatus, setReady, setError });
+	};
+
+	return (
+		<>
+			{status && (
+				<Box padding={3} style={{ borderRadius: '4px', marginBottom: '10px' }}>
+					<Text size={1} style={{ color: error ? 'red' : 'green' }}>{status}</Text>
+				</Box>
+			)}
+			<Button mode="ghost" tone="primary" width="fill" padding={3} onClick={handleClick} disabled={!ready}>
+				<Stack space={2}>
+					<Text align="center">Regenerate Subfamilies</Text>
+				</Stack>
+			</Button>
+		</>
+	);
+};
+
+/**
+ * Fetches all fonts for a typeface, groups them by subfamily, and patches the document.
+ */
+const regenerateSubfamilies = async ({ title, stylesObject, slug, doc_id, client, setStatus, setReady, setError }) => {
+	try {
+		setStatus('Regenerating subfamilies...');
+		setReady(false);
+		setError(false);
+
+		const allFonts = await fetchFonts(title, slug, client);
+
+		if (!allFonts || allFonts.length === 0) {
+			setStatus('No fonts found for this typeface');
+			setReady(true);
+			setError(true);
+			return;
+		}
+
+		console.log('Found fonts:', allFonts.length);
+		setStatus(`Found ${allFonts.length} fonts. Processing...`);
+
+		const subfamilies = groupFontsBySubfamily(allFonts);
+		const newSubfamiliesArray = createSubfamiliesArray(subfamilies);
+
+		console.log('New subfamilies:', newSubfamiliesArray);
+		setStatus(`Created ${newSubfamiliesArray.length} subfamily groups`);
+
+		await updateTypefaceSubfamilies(doc_id, stylesObject, newSubfamiliesArray, client, setStatus, setError);
+
+		setStatus('Subfamilies regenerated successfully');
+	} catch (e) {
+		console.error(e.message);
+		setStatus('Error regenerating subfamilies');
+		setError(true);
+	}
+
+	setReady(true);
+};
+
+/**
+ * Fetches the font list for a typeface by slug.
+ * @param {string} title
+ * @param {Object} slug
+ * @param {Object} client
+ * @returns {Promise<Array>}
+ */
+const fetchFonts = async (title, slug, client) => {
+	const slugCurrent = slug?.current || title;
+	const query = await client.fetch(
+		`*[_type == "typeface" && slug.current == $slugCurrent][0]{
+			"fonts": styles.fonts[]->{ _id, title, subfamily, style, weight, _key }
+		}`,
+		{ slugCurrent }
+	);
+	return query?.fonts || [];
+};
+
+/**
+ * Groups fonts by their subfamily name, excluding VF fonts from shared subfamilies.
+ * @param {Object[]} fonts
+ * @returns {Object}
+ */
+const groupFontsBySubfamily = (fonts) => {
+	const subfamilies = {};
+	fonts.forEach(font => {
+		if (font.title?.includes('VF')) {
+			// Variable fonts get isolated into their own unique group so they don't pollute subfamilies
+			subfamilies[`VF_${font.title}`] = [font];
+		} else {
+			const subfamilyName = font.subfamily ? expandAbbreviations(font.subfamily) : 'Regular';
+			if (!subfamilies[subfamilyName]) subfamilies[subfamilyName] = [];
+			subfamilies[subfamilyName].push(font);
+		}
+	});
+	return subfamilies;
+};
+
+/**
+ * Converts a grouped subfamilies map into the Sanity array format.
+ * @param {Object} subfamilies
+ * @returns {Object[]}
+ */
+const createSubfamiliesArray = (subfamilies) => {
+	return Object.keys(subfamilies).map(subfamilyName => ({
+		title: subfamilyName,
+		_key: nanoid(),
+		_type: 'object',
+		fonts: subfamilies[subfamilyName].map(font => ({
+			_ref: font._id,
+			_key: nanoid(),
+			_type: 'reference',
+			_weak: true,
+		})),
+	}));
+};
+
+/**
+ * Patches ONLY the subfamilies key on the typeface document, preserving fonts and variableFont.
+ * This is intentionally scoped — do NOT replace with the shared updateTypefaceDocument util.
+ * @param {string} doc_id
+ * @param {Object} stylesObject
+ * @param {Object[]} newSubfamiliesArray
+ * @param {Object} client
+ * @param {Function} setStatus
+ * @param {Function} setError
+ */
+const updateTypefaceSubfamilies = async (doc_id, stylesObject, newSubfamiliesArray, client, setStatus, setError) => {
+	const patch = {
+		styles: {
+			...stylesObject,
+			subfamilies: newSubfamiliesArray,
+		},
+	};
+
+	try {
+		await client.patch(doc_id).set(patch).commit();
+		console.log(`Updated document: ${doc_id}`);
+
+		if (doc_id.startsWith('drafts.')) {
+			const publishedId = doc_id.replace('drafts.', '');
+			// Parameterized to guard against any edge-case injection via draft IDs
+			const publishedDoc = await client.fetch(`*[_id == $publishedId]`, { publishedId }).then(res => res[0]);
+			if (publishedDoc) {
+				await client.patch(publishedId).set(patch).commit();
+				console.log(`Updated published document: ${publishedId}`);
+			} else {
+				console.log(`No published document found for ${publishedId}, skipping`);
+			}
+		}
+	} catch (err) {
+		console.error('Error updating document:', err.message);
+		setStatus('Error regenerating subfamilies');
+		setError(true);
+	}
+};

package/src/components/SetOTF.jsx

@@ -1,87 +1,87 @@
-// Detects and sets active OpenType features on a typeface document from the first linked font's metadata
-
-import React, { useState } from 'react';
-import { set, useFormValue } from 'sanity';
-import { Stack, Button, Text } from '@sanity/ui';
-import { useSanityClient } from '../hooks/useSanityClient';
-
-/**
- * Reads the first linked font's opentypeFeatures data and checks which configured
- * feature keys are supported. Patches the field with the detected features array.
- */
-export const SetOTF = (props) => {
-	const { onChange, value = {} } = props;
-	const client = useSanityClient();
-	const stylesObject = useFormValue(['styles']);
-	const [message, setMessage] = useState('');
-
-	/** Fetches the first font document and matches its OpenType features against the configured keys. */
-	const detect = async () => {
-		if (!stylesObject?.fonts?.length) {
-			setMessage('Error: No fonts found in styles. Please add at least one font first.');
-			setTimeout(() => setMessage(''), 5000);
-			return;
-		}
-
-		const fontRef = stylesObject.fonts[0]?._ref;
-		if (!fontRef) {
-			setMessage('Error: Invalid font reference in styles.');
-			setTimeout(() => setMessage(''), 5000);
-			return;
-		}
-
-		try {
-			const font = await client.fetch('*[_type == "font" && _id == $id][0]', { id: fontRef });
-
-			if (!font) {
-				setMessage('Error: Could not find the referenced font.');
-				setTimeout(() => setMessage(''), 5000);
-				return;
-			}
-
-			if (!font.opentypeFeatures?.chars) {
-				setMessage(`Error: No OpenType feature data found in "${font.title || 'this font'}". Generate font data first.`);
-				setTimeout(() => setMessage(''), 5000);
-				return;
-			}
-
-			const features = [];
-			Object.keys(value).forEach(key => {
-				if (key !== 'features' && value[key]?.feature) {
-					const requiredFeatures = value[key].feature.split(' ');
-					const approved = requiredFeatures.every(v => font.opentypeFeatures.chars.includes(v));
-					if (approved) features.push(key);
-				}
-			});
-
-			onChange(set({ ...value, features }));
-			setMessage(`Features detected: ${features.length ? features.join(', ') : 'none'}.`);
-			setTimeout(() => setMessage(''), 5000);
-		} catch (err) {
-			setMessage('Error detecting features. Check the console for details.');
-			console.error('SetOTF detect error:', err);
-		}
-	};
-
-	return (
-		<Stack className="openType">
-			{value?.features?.length > 0 && (
-				<Text muted size={1} style={{ marginBottom: '0.5rem' }}>
-					Number of features: {value.features.length}
-				</Text>
-			)}
-			{!!stylesObject?.fonts?.length && (
-				<Button
-					text="Detect OTF"
-					mode="ghost"
-					onClick={detect}
-					style={{ borderRadius: '0 3px 0 0', marginBottom: '1rem' }}
-				/>
-			)}
-			{!!message && (
-				<Text muted size={1}><br />{message}<br /><br /></Text>
-			)}
-			{props.renderDefault(props)}
-		</Stack>
-	);
-};
+// Detects and sets active OpenType features on a typeface document from the first linked font's metadata
+
+import React, { useState } from 'react';
+import { set, useFormValue } from 'sanity';
+import { Stack, Button, Text } from '@sanity/ui';
+import { useSanityClient } from '../hooks/useSanityClient';
+
+/**
+ * Reads the first linked font's opentypeFeatures data and checks which configured
+ * feature keys are supported. Patches the field with the detected features array.
+ */
+export const SetOTF = (props) => {
+	const { onChange, value = {} } = props;
+	const client = useSanityClient();
+	const stylesObject = useFormValue(['styles']);
+	const [message, setMessage] = useState('');
+
+	/** Fetches the first font document and matches its OpenType features against the configured keys. */
+	const detect = async () => {
+		if (!stylesObject?.fonts?.length) {
+			setMessage('Error: No fonts found in styles. Please add at least one font first.');
+			setTimeout(() => setMessage(''), 5000);
+			return;
+		}
+
+		const fontRef = stylesObject.fonts[0]?._ref;
+		if (!fontRef) {
+			setMessage('Error: Invalid font reference in styles.');
+			setTimeout(() => setMessage(''), 5000);
+			return;
+		}
+
+		try {
+			const font = await client.fetch('*[_type == "font" && _id == $id][0]', { id: fontRef });
+
+			if (!font) {
+				setMessage('Error: Could not find the referenced font.');
+				setTimeout(() => setMessage(''), 5000);
+				return;
+			}
+
+			if (!font.opentypeFeatures?.chars) {
+				setMessage(`Error: No OpenType feature data found in "${font.title || 'this font'}". Generate font data first.`);
+				setTimeout(() => setMessage(''), 5000);
+				return;
+			}
+
+			const features = [];
+			Object.keys(value).forEach(key => {
+				if (key !== 'features' && value[key]?.feature) {
+					const requiredFeatures = value[key].feature.split(' ');
+					const approved = requiredFeatures.every(v => font.opentypeFeatures.chars.includes(v));
+					if (approved) features.push(key);
+				}
+			});
+
+			onChange(set({ ...value, features }));
+			setMessage(`Features detected: ${features.length ? features.join(', ') : 'none'}.`);
+			setTimeout(() => setMessage(''), 5000);
+		} catch (err) {
+			setMessage('Error detecting features. Check the console for details.');
+			console.error('SetOTF detect error:', err);
+		}
+	};
+
+	return (
+		<Stack className="openType">
+			{value?.features?.length > 0 && (
+				<Text muted size={1} style={{ marginBottom: '0.5rem' }}>
+					Number of features: {value.features.length}
+				</Text>
+			)}
+			{!!stylesObject?.fonts?.length && (
+				<Button
+					text="Detect OTF"
+					mode="ghost"
+					onClick={detect}
+					style={{ borderRadius: '0 3px 0 0', marginBottom: '1rem' }}
+				/>
+			)}
+			{!!message && (
+				<Text muted size={1}><br />{message}<br /><br /></Text>
+			)}
+			{props.renderDefault(props)}
+		</Stack>
+	);
+};