@liiift-studio/sanity-font-manager 2.7.0 → 2.8.0

package/src/components/NestedObjectArraySelector.jsx

@@ -1,146 +1,146 @@
-// Generic checkbox-list selector for nested objects from Sanity documents — configured via schema options
-
-import React, { useMemo, useState } from 'react';
-import { Stack, Card, Text, Checkbox, Box, Spinner, Flex } from '@sanity/ui';
-import { useNestedObjects } from '../hooks/useNestedObjects';
-import { set, unset } from 'sanity';
-
-/**
- * Sanity input component that renders a searchable checkbox list of items fetched
- * from nested arrays inside Sanity documents.
- *
- * Configure via schema options:
- * ```js
- * components: { input: NestedObjectArraySelector },
- * options: {
- *   sourceType: 'licenseGroup',      // document type to query
- *   nestedField: 'sections',          // array field to extract
- *   titleField: 'title',              // GROQ expression for display text
- *   valueField: 'slug.current',       // GROQ expression for stored value
- *   filter: 'state == "published"',   // optional GROQ filter
- *   sortBy: 'title asc',              // optional sort field + direction
- *   emptyMessage: 'No options found', // optional empty state text
- *   searchPlaceholder: 'Search...',   // optional search input placeholder
- * }
- * ```
- */
-export const NestedObjectArraySelector = React.forwardRef((props, ref) => {
-	const { value = [], onChange, schemaType } = props;
-
-	const options = schemaType?.options || {};
-	const {
-		sourceType,
-		nestedField,
-		titleField,
-		valueField,
-		filter = '',
-		sortBy = 'title asc',
-		emptyMessage = 'No options found',
-		searchPlaceholder = 'Search...',
-	} = options;
-
-	const [searchTerm, setSearchTerm] = useState('');
-	const { objects, loading, error } = useNestedObjects({ sourceType, nestedField, titleField, valueField, filter, sortBy });
-
-	const filteredObjects = useMemo(() => {
-		if (!searchTerm) return objects;
-		const lower = searchTerm.toLowerCase();
-		return objects.filter(obj => obj.title?.toLowerCase().includes(lower));
-	}, [objects, searchTerm]);
-
-	const handleToggle = (itemValue) => {
-		const currentValue = value || [];
-		const isSelected = currentValue.includes(itemValue);
-		if (isSelected) {
-			const newValue = currentValue.filter(v => v !== itemValue);
-			onChange(newValue.length > 0 ? set(newValue) : unset());
-		} else {
-			onChange(set([...currentValue, itemValue]));
-		}
-	};
-
-	if (!sourceType || !nestedField || !titleField || !valueField) {
-		return (
-			<Card padding={3} tone="critical" border>
-				<Text size={1}>Configuration error: Missing required options (sourceType, nestedField, titleField, or valueField)</Text>
-			</Card>
-		);
-	}
-
-	if (loading) {
-		return (
-			<Card padding={3} border>
-				<Flex align="center" justify="center" padding={4}>
-					<Spinner />
-					<Box marginLeft={3}><Text size={1}>Loading options...</Text></Box>
-				</Flex>
-			</Card>
-		);
-	}
-
-	if (error) {
-		return (
-			<Card padding={3} tone="critical" border>
-				<Text size={1}>Error loading options: {error.message}</Text>
-			</Card>
-		);
-	}
-
-	if (objects.length === 0) {
-		return (
-			<Card padding={3} tone="transparent" border>
-				<Text size={1} muted>{emptyMessage}</Text>
-			</Card>
-		);
-	}
-
-	return (
-		<Card padding={0} border ref={ref}>
-			{objects.length > 5 && (
-				<Box padding={3} style={{ borderBottom: '1px solid var(--card-border-color)' }}>
-					<input
-						type="text"
-						placeholder={searchPlaceholder}
-						value={searchTerm}
-						onChange={(e) => setSearchTerm(e.target.value)}
-						style={{ width: '100%', padding: '8px 12px', border: '1px solid var(--card-border-color)', borderRadius: '4px', fontSize: '13px', fontFamily: 'inherit' }}
-					/>
-				</Box>
-			)}
-
-			<Stack space={0}>
-				{filteredObjects.length === 0 ? (
-					<Box padding={3}>
-						<Text size={1} muted>No results found for "{searchTerm}"</Text>
-					</Box>
-				) : (
-					filteredObjects.map((obj, index) => {
-						const isSelected = value?.includes(obj.value);
-						const isLast = index === filteredObjects.length - 1;
-						return (
-							<Box
-								key={obj.value}
-								padding={3}
-								style={{ borderBottom: isLast ? 'none' : '1px solid var(--card-border-color)', cursor: 'pointer', backgroundColor: isSelected ? 'var(--card-muted-fg-color)' : 'transparent', transition: 'background-color 0.2s' }}
-								onClick={() => handleToggle(obj.value)}
-							>
-								<Flex align="center" gap={3}>
-									<Checkbox checked={isSelected} readOnly style={{ pointerEvents: 'none' }} />
-									<Text size={1} weight={isSelected ? 'semibold' : 'regular'}>{obj.title}</Text>
-								</Flex>
-							</Box>
-						);
-					})
-				)}
-			</Stack>
-
-			{value?.length > 0 && (
-				<Box padding={2} paddingX={3} style={{ borderTop: '1px solid var(--card-border-color)', backgroundColor: 'var(--card-muted-fg-color)' }}>
-					<Text size={1} muted>{value.length} selected</Text>
-				</Box>
-			)}
-		</Card>
-	);
-});
-
-NestedObjectArraySelector.displayName = 'NestedObjectArraySelector';
+// Generic checkbox-list selector for nested objects from Sanity documents — configured via schema options
+
+import React, { useMemo, useState } from 'react';
+import { Stack, Card, Text, Checkbox, Box, Spinner, Flex } from '@sanity/ui';
+import { useNestedObjects } from '../hooks/useNestedObjects';
+import { set, unset } from 'sanity';
+
+/**
+ * Sanity input component that renders a searchable checkbox list of items fetched
+ * from nested arrays inside Sanity documents.
+ *
+ * Configure via schema options:
+ * ```js
+ * components: { input: NestedObjectArraySelector },
+ * options: {
+ *   sourceType: 'licenseGroup',      // document type to query
+ *   nestedField: 'sections',          // array field to extract
+ *   titleField: 'title',              // GROQ expression for display text
+ *   valueField: 'slug.current',       // GROQ expression for stored value
+ *   filter: 'state == "published"',   // optional GROQ filter
+ *   sortBy: 'title asc',              // optional sort field + direction
+ *   emptyMessage: 'No options found', // optional empty state text
+ *   searchPlaceholder: 'Search...',   // optional search input placeholder
+ * }
+ * ```
+ */
+export const NestedObjectArraySelector = React.forwardRef((props, ref) => {
+	const { value = [], onChange, schemaType } = props;
+
+	const options = schemaType?.options || {};
+	const {
+		sourceType,
+		nestedField,
+		titleField,
+		valueField,
+		filter = '',
+		sortBy = 'title asc',
+		emptyMessage = 'No options found',
+		searchPlaceholder = 'Search...',
+	} = options;
+
+	const [searchTerm, setSearchTerm] = useState('');
+	const { objects, loading, error } = useNestedObjects({ sourceType, nestedField, titleField, valueField, filter, sortBy });
+
+	const filteredObjects = useMemo(() => {
+		if (!searchTerm) return objects;
+		const lower = searchTerm.toLowerCase();
+		return objects.filter(obj => obj.title?.toLowerCase().includes(lower));
+	}, [objects, searchTerm]);
+
+	const handleToggle = (itemValue) => {
+		const currentValue = value || [];
+		const isSelected = currentValue.includes(itemValue);
+		if (isSelected) {
+			const newValue = currentValue.filter(v => v !== itemValue);
+			onChange(newValue.length > 0 ? set(newValue) : unset());
+		} else {
+			onChange(set([...currentValue, itemValue]));
+		}
+	};
+
+	if (!sourceType || !nestedField || !titleField || !valueField) {
+		return (
+			<Card padding={3} tone="critical" border>
+				<Text size={1}>Configuration error: Missing required options (sourceType, nestedField, titleField, or valueField)</Text>
+			</Card>
+		);
+	}
+
+	if (loading) {
+		return (
+			<Card padding={3} border>
+				<Flex align="center" justify="center" padding={4}>
+					<Spinner />
+					<Box marginLeft={3}><Text size={1}>Loading options...</Text></Box>
+				</Flex>
+			</Card>
+		);
+	}
+
+	if (error) {
+		return (
+			<Card padding={3} tone="critical" border>
+				<Text size={1}>Error loading options: {error.message}</Text>
+			</Card>
+		);
+	}
+
+	if (objects.length === 0) {
+		return (
+			<Card padding={3} tone="transparent" border>
+				<Text size={1} muted>{emptyMessage}</Text>
+			</Card>
+		);
+	}
+
+	return (
+		<Card padding={0} border ref={ref}>
+			{objects.length > 5 && (
+				<Box padding={3} style={{ borderBottom: '1px solid var(--card-border-color)' }}>
+					<input
+						type="text"
+						placeholder={searchPlaceholder}
+						value={searchTerm}
+						onChange={(e) => setSearchTerm(e.target.value)}
+						style={{ width: '100%', padding: '8px 12px', border: '1px solid var(--card-border-color)', borderRadius: '4px', fontSize: '13px', fontFamily: 'inherit' }}
+					/>
+				</Box>
+			)}
+
+			<Stack space={0}>
+				{filteredObjects.length === 0 ? (
+					<Box padding={3}>
+						<Text size={1} muted>No results found for "{searchTerm}"</Text>
+					</Box>
+				) : (
+					filteredObjects.map((obj, index) => {
+						const isSelected = value?.includes(obj.value);
+						const isLast = index === filteredObjects.length - 1;
+						return (
+							<Box
+								key={obj.value}
+								padding={3}
+								style={{ borderBottom: isLast ? 'none' : '1px solid var(--card-border-color)', cursor: 'pointer', backgroundColor: isSelected ? 'var(--card-muted-fg-color)' : 'transparent', transition: 'background-color 0.2s' }}
+								onClick={() => handleToggle(obj.value)}
+							>
+								<Flex align="center" gap={3}>
+									<Checkbox checked={isSelected} readOnly style={{ pointerEvents: 'none' }} />
+									<Text size={1} weight={isSelected ? 'semibold' : 'regular'}>{obj.title}</Text>
+								</Flex>
+							</Box>
+						);
+					})
+				)}
+			</Stack>
+
+			{value?.length > 0 && (
+				<Box padding={2} paddingX={3} style={{ borderTop: '1px solid var(--card-border-color)', backgroundColor: 'var(--card-muted-fg-color)' }}>
+					<Text size={1} muted>{value.length} selected</Text>
+				</Box>
+			)}
+		</Card>
+	);
+});
+
+NestedObjectArraySelector.displayName = 'NestedObjectArraySelector';

package/src/components/PriceInput.jsx

@@ -1,26 +1,26 @@
-// Reusable $ + number input for collection and pair price fields
-
-import React from 'react';
-import { Flex, Text } from '@sanity/ui';
-
-/**
- * Renders an inline price field: "Price  $  [input]  per style"
- * @param {Object} props
- * @param {string} props.inputPrice - Current price value
- * @param {Function} props.handleInputChange - onChange handler
- */
-const PriceInput = ({ inputPrice, handleInputChange }) => (
-	<Flex align="center" gap={2}>
-		<Text size={1} muted>Price:</Text>
-		<Text size={1} muted>$</Text>
-		<input
-			value={inputPrice}
-			onChange={handleInputChange}
-			type="number"
-			style={{ textAlign: 'end', padding: '5px', maxWidth: '75px' }}
-		/>
-		<Text size={1} muted>per style</Text>
-	</Flex>
-);
-
-export default PriceInput;
+// Reusable $ + number input for collection and pair price fields
+
+import React from 'react';
+import { Flex, Text } from '@sanity/ui';
+
+/**
+ * Renders an inline price field: "Price  $  [input]  per style"
+ * @param {Object} props
+ * @param {string} props.inputPrice - Current price value
+ * @param {Function} props.handleInputChange - onChange handler
+ */
+const PriceInput = ({ inputPrice, handleInputChange }) => (
+	<Flex align="center" gap={2}>
+		<Text size={1} muted>Price:</Text>
+		<Text size={1} muted>$</Text>
+		<input
+			value={inputPrice}
+			onChange={handleInputChange}
+			type="number"
+			style={{ textAlign: 'end', padding: '5px', maxWidth: '75px' }}
+		/>
+		<Text size={1} muted>per style</Text>
+	</Flex>
+);
+
+export default PriceInput;

package/src/components/PrimaryCollectionGeneratorTypeface.jsx

@@ -1,116 +1,116 @@
-// Generates a single primary full-family collection from a typeface's linked fonts and prepends it to the existing collections array
-
-import React, { useCallback, useState } from 'react';
-import { Stack, Flex, Text, Button, Card, Spinner } from '@sanity/ui';
-import { useFormValue } from 'sanity';
-import { nanoid } from 'nanoid';
-
-import { useSanityClient } from '../hooks/useSanityClient';
-import StatusDisplay from './StatusDisplay';
-
-/**
- * Generates a full-family collection document from the typeface's linked fonts
- * and prepends it to the existing styles.collections array.
- */
-export const PrimaryCollectionGeneratorTypeface = () => {
-	const client = useSanityClient();
-
-	const [status, setStatus] = useState('ready');
-	const [ready, setReady] = useState(true);
-	const [price, setPrice] = useState(
-		process.env.SANITY_STUDIO_DEFAULT_COLLECTION_PRICE || 100
-	);
-
-	const fonts = useFormValue(['styles', 'fonts']);
-	const title = useFormValue(['title']);
-	const preferredStyle = useFormValue(['preferredStyle']);
-	const docId = useFormValue(['_id']);
-	const styles = useFormValue(['styles']);
-
-	/** Creates or replaces the full-family collection document and prepends it to the typeface's collections array. */
-	const generateCollection = useCallback(async () => {
-		setStatus('Generating collection...');
-		setReady(false);
-
-		let id = title.toLowerCase().replace(/\s+/g, '-').slice(0, 200);
-		if (!id.includes('collection')) id += '-collection';
-
-		const colTitle = id.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-
-		const collectionDoc = {
-			_key: nanoid(),
-			_id: id,
-			title: colTitle,
-			slug: { _type: 'slug', current: id },
-			price: Number(price) || 0,
-			fonts: Object.values(fonts),
-			preferredStyle: preferredStyle,
-			_type: 'collection',
-			type: 'collection',
-		};
-
-		try {
-			const sanityCollection = await client.createOrReplace(collectionDoc);
-			const collections = styles.collections || [];
-
-			await client.patch(docId)
-				.setIfMissing({ styles: {} })
-				.set({
-					styles: {
-						...styles,
-						collections: [{
-							_type: 'reference',
-							_key: nanoid(),
-							_ref: sanityCollection._id,
-							_weak: true,
-						}, ...collections],
-					},
-				})
-				.commit();
-
-			setStatus('Collection generated');
-		} catch (err) {
-			console.error('Error creating collection:', err.message);
-			setStatus('Error generating collection');
-		}
-
-		setReady(true);
-	}, [docId, fonts, price, preferredStyle, styles, title, client]);
-
-	if (!title || !fonts) return null;
-
-	return (
-		<Stack space={2}>
-			<StatusDisplay status={status} error={false} />
-			<Card border padding={2} shadow={1} radius={2}>
-				{ready ? (
-					<Stack space={3}>
-						<Flex align="center" gap={2} marginTop={1} marginBottom={1}>
-							<Text size={1} muted>Price</Text>
-							<Text size={1} muted>$</Text>
-							<input
-								value={price}
-								onChange={(e) => setPrice(e.target.value)}
-								type="number"
-								style={{ textAlign: 'end', padding: '5px', maxWidth: '75px' }}
-							/>
-							<Text size={1} muted>per full family</Text>
-						</Flex>
-						<Button
-							mode="ghost"
-							tone="primary"
-							style={{ width: '100%' }}
-							onClick={generateCollection}
-							text="Generate Full Family Collection"
-						/>
-					</Stack>
-				) : (
-					<Flex align="center" justify="center" gap={3} padding={4}>
-						<Spinner />
-						<Text muted size={1}>{status}</Text>
-					</Flex>
-				)}
-			</Card>
-		</Stack>
-	);
-};
+// Generates a single primary full-family collection from a typeface's linked fonts and prepends it to the existing collections array
+
+import React, { useCallback, useState } from 'react';
+import { Stack, Flex, Text, Button, Card, Spinner } from '@sanity/ui';
+import { useFormValue } from 'sanity';
+import { nanoid } from 'nanoid';
+
+import { useSanityClient } from '../hooks/useSanityClient';
+import StatusDisplay from './StatusDisplay';
+
+/**
+ * Generates a full-family collection document from the typeface's linked fonts
+ * and prepends it to the existing styles.collections array.
+ */
+export const PrimaryCollectionGeneratorTypeface = () => {
+	const client = useSanityClient();
+
+	const [status, setStatus] = useState('ready');
+	const [ready, setReady] = useState(true);
+	const [price, setPrice] = useState(
+		process.env.SANITY_STUDIO_DEFAULT_COLLECTION_PRICE || 100
+	);
+
+	const fonts = useFormValue(['styles', 'fonts']);
+	const title = useFormValue(['title']);
+	const preferredStyle = useFormValue(['preferredStyle']);
+	const docId = useFormValue(['_id']);
+	const styles = useFormValue(['styles']);
+
+	/** Creates or replaces the full-family collection document and prepends it to the typeface's collections array. */
+	const generateCollection = useCallback(async () => {
+		setStatus('Generating collection...');
+		setReady(false);
+
+		let id = title.toLowerCase().replace(/\s+/g, '-').slice(0, 200);
+		if (!id.includes('collection')) id += '-collection';
+
+		const colTitle = id.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+
+		const collectionDoc = {
+			_key: nanoid(),
+			_id: id,
+			title: colTitle,
+			slug: { _type: 'slug', current: id },
+			price: Number(price) || 0,
+			fonts: Object.values(fonts),
+			preferredStyle: preferredStyle,
+			_type: 'collection',
+			type: 'collection',
+		};
+
+		try {
+			const sanityCollection = await client.createOrReplace(collectionDoc);
+			const collections = styles.collections || [];
+
+			await client.patch(docId)
+				.setIfMissing({ styles: {} })
+				.set({
+					styles: {
+						...styles,
+						collections: [{
+							_type: 'reference',
+							_key: nanoid(),
+							_ref: sanityCollection._id,
+							_weak: true,
+						}, ...collections],
+					},
+				})
+				.commit();
+
+			setStatus('Collection generated');
+		} catch (err) {
+			console.error('Error creating collection:', err.message);
+			setStatus('Error generating collection');
+		}
+
+		setReady(true);
+	}, [docId, fonts, price, preferredStyle, styles, title, client]);
+
+	if (!title || !fonts) return null;
+
+	return (
+		<Stack space={2}>
+			<StatusDisplay status={status} error={false} />
+			<Card border padding={2} shadow={1} radius={2}>
+				{ready ? (
+					<Stack space={3}>
+						<Flex align="center" gap={2} marginTop={1} marginBottom={1}>
+							<Text size={1} muted>Price</Text>
+							<Text size={1} muted>$</Text>
+							<input
+								value={price}
+								onChange={(e) => setPrice(e.target.value)}
+								type="number"
+								style={{ textAlign: 'end', padding: '5px', maxWidth: '75px' }}
+							/>
+							<Text size={1} muted>per full family</Text>
+						</Flex>
+						<Button
+							mode="ghost"
+							tone="primary"
+							style={{ width: '100%' }}
+							onClick={generateCollection}
+							text="Generate Full Family Collection"
+						/>
+					</Stack>
+				) : (
+					<Flex align="center" justify="center" gap={3} padding={4}>
+						<Spinner />
+						<Text muted size={1}>{status}</Text>
+					</Flex>
+				)}
+			</Card>
+		</Stack>
+	);
+};