docs: migrate TabBar docs to csf3

Author: Nikolai Lopin

src/components/TabBar/docs/TabBar.stories.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { TabBar } from '../TabBar';
+
+const TABS = ['A New Hope', 'Empire Strikes Back', 'Return of the Jedi'];
+
+const meta: Meta = {
+    title: 'Components/TabBar',
+    component: TabBar.Link,
+    argTypes: {
+        as: {
+            control: 'text'
+        }
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TabBar.Link>;
+
+export const Default: Story = {
+    render: args => {
+        const [selected, setSelected] = useState<string>();
+
+        return (
+            <TabBar>
+                {TABS.map(it => (
+                    <TabBar.Link
+                        key={it}
+                        href="#"
+                        onClick={e => {
+                            e.preventDefault();
+                            setSelected(it);
+                        }}
+                        selected={selected === it}
+                        {...args}
+                    >
+                        {it}
+                    </TabBar.Link>
+                ))}
+            </TabBar>
+        );
+    }
+};

src/components/TabBar/docs/TabBar.stories.mdx renamed to src/components/TabBar/docs/TabBar.storybook.mdx

@@ -1,26 +1,13 @@
-import { Canvas, Story, ArgsTable, Meta, Source } from '@storybook/blocks';
-import { TabBar } from '../TabBar';
-import { TabBarExample } from './TabBarExample';
+import { Primary, ArgTypes, Meta } from '@storybook/blocks';
+
 import { StyledSystemLinks } from '../../../docs/StyledSystemLinks';
+import * as TabBarStories from './TabBar.stories';
+
+<Meta of={TabBarStories} />
 
-<Meta
-    title="Components/TabBar"
-    component={TabBar}
-    argTypes={{
-        initiallySelected: {
-            control: 'radio',
-            options: ['A New Hope', 'Empire Strikes Back', 'Return of the Jedi']
-        }
-    }}
-/>
-
-# Tabbar
-
-<Canvas>
-    <Story name="Default" args={{}}>
-        {TabBarExample.bind({})}
-    </Story>
-</Canvas>
+# TabBar
+
+<Primary />
 
 -   This component is a sub-navigation to organize different categories of a content on the same page
 -   The recommended amount of tabs is 2-5
@@ -31,23 +18,20 @@ import { StyledSystemLinks } from '../../../docs/StyledSystemLinks';
 
 ### TabBar.Link
 
-<ArgsTable of={TabBar.Link} />
+<ArgTypes of={TabBarStories} />
+
 <StyledSystemLinks component="TabBar" supportedProps={['margin']} />
 
 The `TabBar.Link` supports all the props that can be passed to `<a>` tag.
 
-### Usage with react-router
+## Usage
 
-When using this component as a navigational element with the `NavLink` from react-router, the class name `active` on the
-`TabBar.Link` element can also be used to indicate that the element is active and is the default that react-router adds
-to active `NavLink` elements.
+### Idiomatic usage
 
-## Idiomatic usage
-
-```jsx
+```tsx
 const TabBarExample = () => {
     const items = ['A New Hope', 'Empire Strikes Back', 'Return of the Jedi'];
-    const [selected, setSelected] = useState(items[0]);
+    const [selected, setSelected] = useState<string>(items[0]);
 
     return (
         <TabBar my={5}>
@@ -60,3 +44,9 @@ const TabBarExample = () => {
     );
 };
 ```
+
+### With react-router
+
+When using this component as a navigational element with the `NavLink` from react-router, the class name `active` on the
+`TabBar.Link` element can also be used to indicate that the element is active and is the default that react-router adds
+to active `NavLink` elements.