docs(Playground): expand and copy buttons

Author: SevereCloud

packages/vkui-docs-theme/index.ts

@@ -7,6 +7,16 @@ export { Head, Navbar, TOC, Footer, Search } from './src/components';
 export type { SearchProps } from './src/components';
 export { useConfig } from './src/contexts';
 export { Layout } from './src/layout';
-export { getMdxComponents, Callout, Code, HeadingLink, Table, Th, Td, Tr } from './src/mdx';
+export {
+  getMdxComponents,
+  Callout,
+  Code,
+  HeadingLink,
+  Table,
+  Th,
+  Td,
+  Tr,
+  CopyToClipboard,
+} from './src/mdx';
 
 export { PostsLayout, PostHeader, getTags } from './src/blog';

packages/vkui-docs-theme/src/mdx/Pre/CopyToClipboard/CopyToClipboard.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Icon24ChecksOutline, Icon24CopyOutline } from '@vkontakte/icons';
 import { classNames, copyTextToClipboard } from '@vkontakte/vkjs';

packages/vkui-docs-theme/src/mdx/index.tsx

@@ -6,6 +6,7 @@ import { H1 } from './H1';
 import { HeadingLink } from './HeadingLink/HeadingLink';
 import { Main } from './Main/Main';
 import { PackageManagers } from './PackageManagers/PackageManagers';
+import { CopyToClipboard } from './Pre/CopyToClipboard/CopyToClipboard';
 import { Pre } from './Pre/Pre';
 import { Steps } from './Steps/Steps';
 import { Table, Td, Th, Tr } from './Table/Table';
@@ -54,4 +55,4 @@ export const getMdxComponents = (components?: MDXComponents): MDXComponents => {
   };
 };
 
-export { Callout, Code, HeadingLink, Table, Td, Th, Tr };
+export { Callout, Code, HeadingLink, Table, Td, Th, Tr, CopyToClipboard };

website/components/mdx/Playground/CopyCodeButton/CopyCodeButton.module.css

@@ -0,0 +1,6 @@
+.host {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  color: var(--vkui--color_icon_tertiary);
+}

website/components/mdx/Playground/CopyCodeButton/CopyCodeButton.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import * as React from 'react';
+import { CopyToClipboard } from '@vkontakte/vkui-docs-theme';
+import { LiveContext } from 'react-live';
+import styles from './CopyCodeButton.module.css';
+
+export function CopyCodeButton() {
+  const { newCode } = React.useContext(LiveContext);
+
+  return <CopyToClipboard getValue={() => newCode || ''} className={styles.host} />;
+}

website/components/mdx/Playground/Playground.module.css

@@ -6,6 +6,7 @@
 }
 
 .code {
+  position: relative;
   padding-block: var(--vkui--spacing_size_m);
   padding-inline: var(--vkui--spacing_size_xs);
   font-size: 14px;

website/components/mdx/Playground/Playground.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { classNames, useColorScheme } from '@vkontakte/vkui';
 import { JetBrains_Mono } from 'next/font/google';
 import { LiveEditor, LiveProvider } from 'react-live';
+import { CopyCodeButton } from './CopyCodeButton/CopyCodeButton';
 import {
   PlaygroundPreview,
   type PlaygroundPreviewProps,
@@ -44,6 +45,7 @@ export function Playground({
         {codeVisible && (
           <div className={styles.code}>
             <LiveEditor style={{ whiteSpace: 'nowrap' }} />
+            <CopyCodeButton />
           </div>
         )}
       </LiveProvider>

website/components/mdx/Playground/PlaygroundToolbar/CopyCodeButton.tsx

@@ -1,10 +1,6 @@
-import {
-  Icon20ArrowLeftRightCornersOutline,
-  Icon20ArrowRightLeftCornersOutline,
-} from '@vkontakte/icons';
+import { Icon20ArrowRightLeftCornersOutline, Icon20BracketsSlashOutline } from '@vkontakte/icons';
 import { AdaptivityProvider, Button, Flex } from '@vkontakte/vkui';
 import { ColorSchemePicker } from './ColorSchemePicker';
-import { CopyCodeButton } from './CopyCodeButton';
 import { PlatformPicker } from './PlatformPicker/PlatformPicker';
 import { ThemePicker } from './ThemePicker/ThemePicker';
 import styles from './PlaygroundToolbar.module.css';
@@ -17,7 +13,7 @@ interface PlaygroundToolbarProps {
 export function PlaygroundToolbar({ codeVisible, setCodeVisible }: PlaygroundToolbarProps) {
   const CodeExpandedIcon = codeVisible
     ? Icon20ArrowRightLeftCornersOutline
-    : Icon20ArrowLeftRightCornersOutline;
+    : Icon20BracketsSlashOutline;
 
   return (
     <Flex align="center" gap="s" className={styles.root}>
@@ -27,13 +23,12 @@ export function PlaygroundToolbar({ codeVisible, setCodeVisible }: PlaygroundToo
       <AdaptivityProvider sizeY="regular">
         <ThemePicker className={styles.themePicker} />
         <ColorSchemePicker />
-        <CopyCodeButton />
         <Button
           size="s"
           mode="secondary"
           appearance="neutral"
           onClick={() => setCodeVisible(!codeVisible)}
-          before={<CodeExpandedIcon className={styles.rotateIcon} />}
+          before={<CodeExpandedIcon {...(codeVisible && { className: styles.rotateIcon })} />}
           aria-label={codeVisible ? 'Свернуть блок с кодом' : 'Развернуть блок с кодом'}
         />
       </AdaptivityProvider>