From a1826ca506a8bcab2a12a01330e4885fc66615aa Mon Sep 17 00:00:00 2001
From: Yury Baykov <y.baykov@corp.mail.ru>
Date: Thu, 23 Jan 2025 20:20:03 +0300
Subject: [PATCH] feat(docs): theme & adaptivityMode from query string

---
 docs/src/pages/Tokens.tsx | 39 +++++++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/docs/src/pages/Tokens.tsx b/docs/src/pages/Tokens.tsx
index f6da52135..b035fff8e 100644
--- a/docs/src/pages/Tokens.tsx
+++ b/docs/src/pages/Tokens.tsx
@@ -1,5 +1,6 @@
 import { useAdaptivityWithJSMediaQueries } from '@vkontakte/vkui';
 import React, { FC, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import { TokensActions, TokensContent, TokensHeader } from '@/components/pages/Tokens';
 import tokensData from '@/public/static/data/tokensData.json';
@@ -55,14 +56,30 @@ function findThemeTags(themeNames: string[]): string[] {
 	return tagsList;
 }
 
+enum QueryParam {
+	theme = 'theme',
+	adaptivityMode = 'adaptivityMode',
+}
+
 const Tokens: FC = () => {
 	const { viewWidth } = useAdaptivityWithJSMediaQueries();
 	const isTabletPlus = viewWidth > 3;
 
 	const themeTags = useMemo(() => findThemeTags(themes), [themes]);
 	const [selectedTags, setSelectedTags] = useState<Array<ChipOption>>([]);
-	const [selectedTheme, setSelectedTheme] = useState<string>(themes[0]);
-	const [selectedValueType, setSelectedValueType] = useState<ValueType>('regular');
+	const [searchParams, setSearchParams] = useSearchParams();
+	const [selectedTheme, setSelectedTheme] = useState<string>(() => {
+		const themeQueryParam = searchParams.get(QueryParam.theme);
+
+		return themeQueryParam && themes.includes(themeQueryParam) ? themeQueryParam : themes[0];
+	});
+	const [selectedValueType, setSelectedValueType] = useState<ValueType>(() => {
+		const adaptivityModeQueryParam = searchParams.get(QueryParam.adaptivityMode);
+
+		return adaptivityModeQueryParam === 'regular' || adaptivityModeQueryParam === 'compact'
+			? adaptivityModeQueryParam
+			: 'regular';
+	});
 	const [searchValue, setSearchValue] = useState('');
 	const searchValueDebounced = useDebounce(searchValue, 500);
 
@@ -71,7 +88,21 @@ const Tokens: FC = () => {
 	};
 
 	const changeThemeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
-		setSelectedTheme(event.target.value);
+		const newTheme = event.target.value;
+
+		setSelectedTheme(newTheme);
+		setSearchParams((prev) => {
+			prev.set(QueryParam.theme, newTheme);
+			return prev;
+		});
+	};
+
+	const changeAdaptivityMode = (newAdaptivityMode: ValueType) => {
+		setSelectedValueType(newAdaptivityMode);
+		setSearchParams((prev) => {
+			prev.set(QueryParam.adaptivityMode, newAdaptivityMode);
+			return prev;
+		});
 	};
 
 	return (
@@ -93,7 +124,7 @@ const Tokens: FC = () => {
 				}}
 				valueTypesProps={{
 					value: selectedValueType,
-					onChange: setSelectedValueType,
+					onChange: changeAdaptivityMode,
 				}}
 				searchProps={{
 					value: searchValue,