feat: add reset functionality to variable configure

fontsource · Apr 29, 2023 · 7ded71c · 7ded71c
1 parent a510239
commit 7ded71c
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 22 deletions.
diff --git a/website/app/components/preview/Configure.tsx b/website/app/components/preview/Configure.tsx
@@ -1,6 +1,5 @@
 import {
 	ActionIcon,
-	Checkbox,
 	createStyles,
 	Divider,
 	Flex,
@@ -9,10 +8,12 @@ import {
 	ScrollArea,
 	Text,
 } from '@mantine/core';
+import { useAtom } from 'jotai';
 
 import { IconRotate } from '@/components/icons';
 import type { Metadata, VariableData } from '@/utils/types';
 
+import { variationAtom } from './atoms';
 import { NormalButtonsGroup } from './Buttons';
 import { VariableButtonsGroup } from './VariableButtons';
 
@@ -51,6 +52,14 @@ interface ConfigureProps {
 
 const Configure = ({ metadata, variable }: ConfigureProps) => {
 	const { classes } = useStyles();
+	const [_, setVariation] = useAtom(variationAtom);
+	const resetVariationAtom = () => {
+		// Iterate through the axes and set the variation to the default value
+		// for each axis.
+		for (const axes of Object.keys(variable)) {
+			setVariation({ [axes]: Number(variable[axes].default) });
+		}
+	};
 
 	return (
 		<ScrollArea.Autosize mah="50vh" className={classes.scrollWrapper}>
@@ -59,17 +68,16 @@ const Configure = ({ metadata, variable }: ConfigureProps) => {
 				<NormalButtonsGroup hasItalic={metadata.styles.includes('italic')} />
 				{metadata.variable && (
 					<>
-						<Divider mt='sm' />
+						<Divider mt="sm" />
 						<Group position="apart">
 							<Text className={classes.title}>Variable Axes</Text>
-							<ActionIcon>
+							<ActionIcon onClick={resetVariationAtom}>
 								<IconRotate />
 							</ActionIcon>
 						</Group>
 						<VariableButtonsGroup variable={variable} />
 					</>
 				)}
-				<Checkbox label="Apply to all variants" />
 			</Flex>
 		</ScrollArea.Autosize>
 	);

diff --git a/website/app/components/preview/VariableButtons.tsx b/website/app/components/preview/VariableButtons.tsx
@@ -1,43 +1,70 @@
-import { ActionIcon, Box, Group, Slider, Switch, Text } from '@mantine/core';
+import { ActionIcon, Box, createStyles, Group, rem,Slider,Text } from '@mantine/core';
 import { useAtom } from 'jotai';
+import { useState } from 'react';
 
 import { IconRotate } from '@/components/icons';
 import type { AxesData, VariableData } from '@/utils/types';
 
-import { variableAtom, variationAtom } from './atoms';
+import {  variableAtom, variationAtom } from './atoms';
 
 interface VariableButtonGroupProps {
 	variable: VariableData;
-	states: Record<keyof VariableData, React.SetStateAction<string>>;
 }
 
 interface VariableButtonProps {
 	label: string;
 	axes: AxesData;
 }
 
-const VariableSlider = ({ axes }: VariableButtonProps) => {
-	// if ital slider, also modify italicatom to fetch italic font
-	return (
-		<Group position="apart">
-			<Text>Optical Size {JSON.stringify(axes)}</Text>
-			<Switch />
-		</Group>
-	);
-};
+const useStyles = createStyles((theme) => ({
+	button: {
+		marginTop: rem(2),
+		padding: `${rem(8)} ${rem(12)}`,
+		justifyContent: 'space-between',
+		height: rem(90),
+		border: `${rem(1)} solid ${
+			theme.colorScheme === 'dark'
+				? theme.colors.border[1]
+				: theme.colors.border[0]
+		}`,
+		borderRadius: '4px',
+
+		backgroundColor:
+			theme.colorScheme === 'dark'
+				? theme.colors.background[4]
+				: theme.colors.background[0],
+
+		color:
+			theme.colorScheme === 'dark'
+				? theme.colors.text[0]
+				: theme.colors.text[1],
+
+
+
+		'&:not([data-disabled])': theme.fn.hover({
+			backgroundColor: theme.fn.lighten(theme.colors.purple[0], 0.95),
+		}),
+	},
+}));
 
 const VariableButton = ({ label, axes }: VariableButtonProps) => {
+	const { classes } = useStyles();
 	const [_, setVariation] = useAtom(variationAtom);
+	const [variableValue] = useAtom(variableAtom);
+
 	const handleVariationAtom = (value: number) => {
 		setVariation({ [label]: value });
 	};
+	const resetVariationAtom = () => {
+		setVariation({ [label]: Number(axes.default) });
+	}
 
 	return (
-		<Box>
-			<Group position="apart">
+		<Box className={classes.button}>
+			<Group position="apart" mb={3}>
 				<Text>{label}</Text>
-				<ActionIcon>
-					<IconRotate />
+				<ActionIcon onClick={resetVariationAtom} variant='transparent' mr={-4}>
+					<IconRotate height={16} />
 				</ActionIcon>
 			</Group>
 			<Slider
@@ -47,7 +74,12 @@ const VariableButton = ({ label, axes }: VariableButtonProps) => {
 				step={Number(axes.step)}
 				precision={1}
 				onChange={handleVariationAtom}
+				value={variableValue[label]}
 			/>
+			<Group position="apart" px={3} mt={4}>
+				<Text>{axes.min}</Text>
+				<Text>{axes.max}</Text>
+			</Group>
 		</Box>
 	);
 };
@@ -56,7 +88,7 @@ const VariableButtonsGroup = ({ variable }: VariableButtonGroupProps) => {
 	return (
 		<>
 			{Object.keys(variable).map((key) => (
-				<VariableButton key={key} label={key} axes={variable[key]} />
+				<VariableButton key={key} label={key} axes={variable[key]}  />
 			))}
 		</>
 	);

diff --git a/website/app/components/preview/atoms.ts b/website/app/components/preview/atoms.ts
@@ -1,4 +1,5 @@
 import { atom } from 'jotai';
+import { atomWithReset } from 'jotai/utils';
 
 const languageAtom = atom('Latin');
 const sizeAtom = atom(32);
@@ -26,7 +27,7 @@ const createFontVariation = (axes: Record<string, number>) => {
 	return fontVariation.slice(0, -2);
 };
 
-const variableAtom = atom<Record<string, number>>({});
+const variableAtom = atomWithReset<Record<string, number>>({});
 const variationAtom = atom(
 	(get) => createFontVariation(get(variableAtom)),
 	(get, set, axes: Record<string, number>) => {