feat(docs): theme & adaptivityMode from query string

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';
@@ -26,7 +27,7 @@ themes.sort((first: string, second: string) => {
 function transformTags(tokens: TokensType) {
 	const tokensKeys = Object.keys(tokens);
 	const tags = tokensKeys.map((t) => tokens[t].tags);
-	const flatTags = tags.reduce((acc, curr) => acc.concat(curr), []);
+	const flatTags = tags.flat();
 	const sortedTagsWithQuantity = flatTags
 		.reduce(
 			(acc, curr, i, arr) => acc.concat([[curr, arr.filter((curr1) => curr1 === curr).length]]),
@@ -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,