refactor: theme mods type

src/wizards/newspack/views/settings/constants.ts

@@ -7,57 +7,72 @@
  */
 export const PAGE_NAMESPACE = 'newspack-settings';
 
-/* export const DEFAULT_THEME_MODS = {
-	font_header: '',
-	font_body: '',
-	custom_font_import_code: undefined,
-	custom_font_import_code_alternate: undefined,
-	
-	header_center_logo: false,
-	header_simplified: false,
-	header_solid_background: false,
-	logo_size: 0,
-	header_text: false,
-	header_display_tagline: false,
-	footer_color_hex: '',
-	newspack_footer_logo: '',
-}; */
-
-const OPTIONAL_THEME_MODS = {};
-
-export const DEFAULT_THEME_MODS = {
+/**
+ * Theme and Brand.
+ */
+export const THEME_BRAND_DEFAULTS = {
+	// Colors.
 	header_color: 'custom',
 	theme_colors: 'default',
 	primary_color_hex: '#3366ff',
 	secondary_color_hex: '#666666',
-	header_color_hex: '#3366ff',
-	homepage_pattern_index: 0,
-	accent_allcaps: true,
-	footer_color: 'default',
-	footer_logo_size: 'medium',
-	footer_copyright: '',
-	header_text: false,
-	header_display_tagline: false,
-
+	// Typography.
 	font_header: '',
 	font_body: '',
+	accent_allcaps: true,
 	custom_font_import_code: undefined,
 	custom_font_import_code_alternate: undefined,
-
+	// Header.
 	header_center_logo: false,
 	header_simplified: false,
 	header_solid_background: false,
+	header_color_hex: '#3366ff',
+	custom_logo: '',
 	logo_size: 0,
+	header_text: false, // No custom_logo set.
+	header_display_tagline: false, // No custom_logo set.
+	// Footer.
+	footer_copyright: '',
+	footer_color: 'default',
 	footer_color_hex: '',
 	newspack_footer_logo: '',
+	footer_logo_size: 'medium',
+	// Homepage pattern.
+	homepage_pattern_index: 0,
+};
 
-	custom_logo: '',
+export const DISPLAY_SETTINGS_DEFAULTS = {
+	// Recirculation.
+	relatedPostsEnabled: false,
+	relatedPostsError: null,
+	relatedPostsMaxAge: 0,
+	relatedPostsUpdated: false,
+	// Author Bio.
+	show_author_bio: true,
+	show_author_email: false,
+	author_bio_length: 200,
+	// Default Featured Image and Post Template.
+	featured_image_default: 'large',
+	post_template_default: 'default',
+	// Featured Image and Post Template for All Posts.
+	featured_image_all_posts: 'none',
+	post_template_all_posts: 'none',
+	// Media Credits.
+	newspack_image_credits_placeholder_url: undefined,
+	newspack_image_credits_class_name: 'image-credit',
+	newspack_image_credits_prefix_label: 'Credit:',
+	newspack_image_credits_placeholder: null,
+	newspack_image_credits_auto_populate: false,
+};
+
+export const DEFAULT_THEME_MODS: ThemeMods = {
+	...THEME_BRAND_DEFAULTS,
+	...DISPLAY_SETTINGS_DEFAULTS,
 
-	custom_css_post_id: -1, //
-	newspack_image_credits_class_name: 'image-credit', //
-	newspack_image_credits_prefix_label: 'Credit:', //
-	newspack_image_credits_placeholder: null, //
-	newspack_image_credits_auto_populate: false, //
+	/**
+	 * Misc.
+	 */
+	custom_css_post_id: -1,
 };
 
 export default {

src/wizards/newspack/views/settings/display-settings/author-bio.tsx

@@ -6,7 +6,7 @@ import { Grid, TextControl } from '../../../../../components/src';
 export default function AuthorBio( {
 	update,
 	data,
-}: SectionComponentProps< DisplaySettingsData > ) {
+}: SectionComponentProps< DisplaySettings > ) {
 	return (
 		<Grid gutter={ 32 }>
 			<Grid columns={ 1 } gutter={ 16 }>

src/wizards/newspack/views/settings/display-settings/index.tsx

@@ -17,50 +17,33 @@ import WizardsTab from '../../../../wizards-tab';
 import WizardSection from '../../../../wizards-section';
 import { Button, hooks } from '../../../../../components/src';
 import { useWizardApiFetch } from '../../../../hooks/use-wizard-api-fetch';
+import { DEFAULT_THEME_MODS } from '../constants';
 
 export default function DisplaySettings() {
-	const [ data, setData ] = hooks.useObjectState< DisplaySettingsData >( {
-		// Recirculation.
-		relatedPostsEnabled: false,
-		relatedPostsError: null,
-		relatedPostsMaxAge: 0,
-		relatedPostsUpdated: false,
-		// Author Bio.
-		show_author_bio: true,
-		show_author_email: false,
-		author_bio_length: 200,
-		// Default settings.
-		featured_image_default: 'large',
-		post_template_default: 'default',
-		featured_image_all_posts: 'none',
-		post_template_all_posts: 'none',
-		newspack_image_credits_placeholder_url: '',
-		newspack_image_credits_class_name: '',
-		newspack_image_credits_prefix_label: '',
-		newspack_image_credits_auto_populate: false,
-	} );
+	const [ data, setData ] =
+		hooks.useObjectState< DisplaySettings >( DEFAULT_THEME_MODS );
 
 	const { wizardApiFetch } = useWizardApiFetch(
 		'newspack-settings/display-settings'
 	);
 
 	useEffect( () => {
-		wizardApiFetch< RecirculationData >(
+		wizardApiFetch< DisplaySettings >(
 			{
 				path: '/newspack/v1/wizard/newspack-settings/related-content',
 			},
 			{
 				onSuccess: setData,
 			}
 		);
-		wizardApiFetch< RecirculationData >(
+		wizardApiFetch< ThemeData >(
 			{
 				path: '/newspack/v1/wizard/newspack-setup-wizard/theme',
 			},
 			{
-				// onSuccess( { theme_mods } ) {
-				// 	setData( theme_mods );
-				// },
+				onSuccess( { theme_mods } ) {
+					setData( theme_mods );
+				},
 			}
 		);
 	}, [] );
@@ -86,10 +69,7 @@ export default function DisplaySettings() {
 				<Recirculation update={ setData } data={ data } />
 			</WizardSection>
 			<WizardSection title={ __( 'Author Bio', 'newspack-plugin' ) }>
-				<AuthorBio
-					update={ theme_mods => setData( {} /* { theme_mods } */ ) }
-					data={ data }
-				/>
+				<AuthorBio update={ setData } data={ data } />
 			</WizardSection>
 			<div className="newspack-buttons-card">
 				<Button variant="tertiary">

src/wizards/newspack/views/settings/display-settings/recirculation.tsx

@@ -6,10 +6,7 @@ import { Button, Card, Grid, TextControl } from '../../../../../components/src';
 export default function Recirculation( {
 	update,
 	data,
-}: {
-	data: RecirculationData;
-	update: ( a: Partial< RecirculationData > ) => void;
-} ) {
+}: ThemeModComponentProps< DisplaySettings > ) {
 	return (
 		<>
 			<WizardsActionCard

src/wizards/newspack/views/settings/theme-and-brand/index.tsx

@@ -25,7 +25,7 @@ import { DEFAULT_THEME_MODS } from '../constants';
 // CSS.
 import './style.scss';
 
-const DEFAULT_DATA: ThemeBrandData = {
+const DEFAULT_DATA: ThemeData = {
 	theme: 'newspack-theme',
 	homepage_patterns: [],
 	theme_mods: DEFAULT_THEME_MODS,
@@ -35,9 +35,9 @@ function ThemeBrand( { isPartOfSetup = false } ) {
 	const { wizardApiFetch, isFetching } = useWizardApiFetch(
 		'newspack-settings/theme-and-brand'
 	);
-	const [ data, setDataState ] = useState< ThemeBrandData >( DEFAULT_DATA );
+	const [ data, setDataState ] = useState< ThemeData >( DEFAULT_DATA );
 
-	function setData( newData: ThemeBrandData ) {
+	function setData( newData: ThemeData ) {
 		setDataState( { ...data, ...newData } );
 	}
 
@@ -142,9 +142,9 @@ function ThemeBrand( { isPartOfSetup = false } ) {
 				) }
 			>
 				<Typography
-					themeMods={ data.theme_mods }
+					data={ data.theme_mods }
 					isFetching={ isFetching }
-					updateTypography={ theme_mods => {
+					update={ theme_mods => {
 						setData( {
 							...data,
 							theme_mods,

src/wizards/newspack/views/settings/theme-and-brand/theme-select.tsx

@@ -16,8 +16,8 @@ const ThemeSelection = ( {
 	theme,
 	updateTheme,
 }: {
-	theme: ThemeBrandData[ 'theme' ];
-	updateTheme: ( a: ThemeBrandData[ 'theme' ] ) => void;
+	theme: ThemeData[ 'theme' ];
+	updateTheme: ( a: ThemeData[ 'theme' ] ) => void;
 } ) => (
 	<Grid columns={ 3 } gutter={ 32 }>
 		<StyleCard

src/wizards/newspack/views/settings/theme-and-brand/types.d.ts

@@ -1,32 +1,3 @@
-/**
- * Theme names without `newspack` prefix.
- */
-type ThemeNames =
-	| 'theme'
-	| 'scott'
-	| 'nelson'
-	| 'katharine'
-	| 'sacha'
-	| 'joseph';
-
-/**
- * Theme names with `newspack` prefix.
- */
-type NewspackThemes = `newspack-${ ThemeNames }`;
-
-/**
- * Homepage pattern schema.
- */
-type HomepagePattern = {
-	content: string;
-	image: string;
-};
-
-/**
- * Typography option types.
- */
-type TypographyOptions = 'curated' | 'custom';
-
 /**
  * Typography schema.
  */
@@ -40,66 +11,3 @@ type Typography = {
 	font_body_stack?: string;
 	font_header_stack?: string;
 };
-
-/**
- * Font Group schema.
- */
-type FontGroup = {
-	label: string;
-	fallback?: string;
-	options: Array< {
-		label: string;
-		value: string;
-	} >;
-};
-
-/**
- * Colors settings schema.
- */
-type ThemeColors = {
-	primary_color_hex: string;
-	secondary_color_hex: string;
-	theme_colors: string;
-};
-
-/**
- * Header schema.
- */
-type Header = {
-	header_center_logo: boolean;
-	header_simplified: boolean;
-	header_solid_background: boolean;
-	header_color_hex: string;
-	custom_logo: string;
-	logo_size: number;
-	header_text: boolean;
-	header_display_tagline: boolean;
-};
-
-/**
- * Footer schema.
- */
-type Footer = {
-	footer_color: string;
-	footer_copyright: string;
-	footer_color_hex: string;
-	newspack_footer_logo: string;
-	footer_logo_size: string;
-};
-
-/**
- * Theme mods schema.
- */
-type ThemeMods = { homepage_pattern_index: number } & ThemeColors &
-	Typography &
-	Header &
-	Footer;
-
-/**
- * Theme and brand schema.
- */
-type ThemeBrandData = {
-	theme: '' | NewspackThemes;
-	theme_mods: ThemeMods;
-	homepage_patterns: HomepagePattern[];
-};