feat(Toc): add toc docs (#515)

Author: kseniya57

src/content/components/uikit/Toc/TocComponent.tsx

@@ -0,0 +1,54 @@
+import {Toc} from '@gravity-ui/uikit';
+import React from 'react';
+
+const items = [
+    {
+        value: 'vm',
+        content: 'Virtual machine creation',
+    },
+    {
+        value: 'info',
+        content: 'Getting information about a group of virtual machines',
+    },
+    {
+        value: 'disk',
+        content: 'Disk',
+        items: [
+            {
+                value: 'control',
+                content: 'Disk controls',
+                items: [
+                    {
+                        value: 'floppy',
+                        content: 'Floppy',
+                    },
+                    {
+                        value: 'hard',
+                        content: 'Hard',
+                        items: [],
+                    },
+                ],
+            },
+            {
+                value: 'snapshots',
+                content: 'Disk snapshots',
+                items: [
+                    {
+                        value: 'standard',
+                        content: 'Standard',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'images',
+        content: 'Images with preinstalled software',
+    },
+];
+
+export const TocComponent = () => {
+    const [value, setValue] = React.useState('vm');
+
+    return <Toc items={items} value={value} onUpdate={setValue} />;
+};

src/content/components/uikit/Toc/index.ts

@@ -0,0 +1,19 @@
+import dynamic from 'next/dynamic';
+
+import {Repos} from '../../../../types/common';
+import {getGithubUrl, getReadmeUrl} from '../../utils';
+
+const getterOptions = {repoName: Repos.Uikit, componentName: 'Toc'};
+
+export const tocConfig = {
+    id: 'toc',
+    title: 'Toc',
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() => import('./TocComponent').then((mod) => mod.TocComponent)),
+        props: {},
+    },
+};

src/content/components/uikit/index.ts

@@ -48,6 +48,7 @@ import {textConfig} from './Text';
 import {textAreaConfig} from './TextArea';
 import {textInputConfig} from './TextInput';
 import {config as toasterConfig} from './Toaster';
+import {tocConfig} from './Toc';
 import {tooltipConfig} from './Tooltip';
 import {userConfig} from './User';
 import {userLabelConfig} from './UserLabel';
@@ -97,6 +98,7 @@ const uikitComponents: Component[] = [
     textInputConfig,
     tooltipConfig,
     toasterConfig,
+    tocConfig,
     userConfig,
     userLabelConfig,
     sheetConfig,