diff --git a/apps/site/components/Common/CodeBox.tsx b/apps/site/components/Common/CodeBox.tsx index 4b050cf5f9c8d..5d494fe825f3c 100644 --- a/apps/site/components/Common/CodeBox.tsx +++ b/apps/site/components/Common/CodeBox.tsx @@ -1,8 +1,10 @@ 'use client'; +import { CodeBracketIcon } from '@heroicons/react/24/outline'; import BaseCodeBox from '@node-core/ui-components/Common/BaseCodeBox'; +import styles from '@node-core/ui-components/Common/BaseCodeBox/index.module.css'; import { useTranslations } from 'next-intl'; -import type { FC, PropsWithChildren, ReactNode } from 'react'; +import type { FC, PropsWithChildren } from 'react'; import Link from '#site/components/Link'; import { useCopyToClipboard, useNotification } from '#site/hooks'; @@ -18,17 +20,26 @@ const CodeBox: FC> = props => { const notify = useNotification(); const t = useTranslations(); - const onCopy = (text: string, message: ReactNode) => { + const onCopy = (text: string) => { copyToClipboard(text); - notify({ duration: 300, message }); + + notify({ + duration: 300, + message: ( +
+ + {t('components.common.codebox.copied')} +
+ ), + }); }; + return ( ); }; diff --git a/apps/site/next.mdx.use.client.mjs b/apps/site/next.mdx.use.client.mjs index ca3f20882f805..b9e0f64d0daa1 100644 --- a/apps/site/next.mdx.use.client.mjs +++ b/apps/site/next.mdx.use.client.mjs @@ -1,6 +1,7 @@ 'use strict'; import Blockquote from '@node-core/ui-components/Common/Blockquote'; +import MDXCodeTabs from '@node-core/ui-components/MDX/CodeTabs'; import Button from './components/Common/Button'; import DownloadButton from './components/Downloads/DownloadButton'; @@ -18,7 +19,6 @@ import ReleaseVersionDropdown from './components/Downloads/Release/VersionDropdo import Link from './components/Link'; import LinkWithArrow from './components/LinkWithArrow'; import MDXCodeBox from './components/MDX/CodeBox'; -import MDXCodeTabs from './components/MDX/CodeTabs'; import MDXImage from './components/MDX/Image'; import { ReleaseProvider } from './providers/releaseProvider'; diff --git a/packages/ui-components/Common/BaseCodeBox/index.module.css b/packages/ui-components/Common/BaseCodeBox/index.module.css index ab65233e66182..81be3797f71de 100644 --- a/packages/ui-components/Common/BaseCodeBox/index.module.css +++ b/packages/ui-components/Common/BaseCodeBox/index.module.css @@ -73,12 +73,6 @@ } } -.notification { - @apply flex - items-center - gap-3; -} - .icon { @apply size-4; } diff --git a/packages/ui-components/Common/BaseCodeBox/index.tsx b/packages/ui-components/Common/BaseCodeBox/index.tsx index c35fd7347ad9d..d6960aedc2d24 100644 --- a/packages/ui-components/Common/BaseCodeBox/index.tsx +++ b/packages/ui-components/Common/BaseCodeBox/index.tsx @@ -1,11 +1,8 @@ 'use client'; -import { - DocumentDuplicateIcon, - CodeBracketIcon, -} from '@heroicons/react/24/outline'; +import { DocumentDuplicateIcon } from '@heroicons/react/24/outline'; import classNames from 'classnames'; -import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react'; +import type { FC, PropsWithChildren, ReactElement } from 'react'; import { Fragment, isValidElement, useRef } from 'react'; import BaseButton from '#ui/Common/BaseButton'; @@ -69,10 +66,9 @@ const transformCode = >( interface CodeBoxProps { language: string; className?: string; - onCopy: (text: string, message: ReactNode) => void; + onCopy: (text: string) => void; as?: LinkLike; - copyText: string; - copiedText: string; + buttonText: string; showCopyButton?: boolean; } @@ -81,8 +77,7 @@ const BaseCodeBox: FC> = ({ language, className, onCopy, - copiedText, - copyText, + buttonText, as = 'a', showCopyButton = true, }: PropsWithChildren) => { @@ -91,13 +86,7 @@ const BaseCodeBox: FC> = ({ const handleCopy = (): void => { const text = containerRef.current?.textContent; if (text) { - onCopy( - text, -
- - {copiedText} -
- ); + onCopy(text); } }; @@ -121,7 +110,7 @@ const BaseCodeBox: FC> = ({ onClick={handleCopy} > - {copyText} + {buttonText} )} diff --git a/packages/ui-components/Common/CodeTabs/index.stories.tsx b/packages/ui-components/Common/CodeTabs/index.stories.tsx index 55c6c43ac8974..bf96dcb28ea8a 100644 --- a/packages/ui-components/Common/CodeTabs/index.stories.tsx +++ b/packages/ui-components/Common/CodeTabs/index.stories.tsx @@ -40,8 +40,7 @@ server.listen(port, hostname, () => { const boxProps = { onCopy: console.log, - copyText: '[Copy Text]', - copiedText: '[Copied Text]', + buttonText: '[Button Text]', }; const TabsContent: FC = () => ( diff --git a/apps/site/components/MDX/CodeTabs/index.tsx b/packages/ui-components/MDX/CodeTabs.tsx similarity index 94% rename from apps/site/components/MDX/CodeTabs/index.tsx rename to packages/ui-components/MDX/CodeTabs.tsx index cebf603d2b37a..8728b460119f3 100644 --- a/apps/site/components/MDX/CodeTabs/index.tsx +++ b/packages/ui-components/MDX/CodeTabs.tsx @@ -1,7 +1,8 @@ -import CodeTabs from '@node-core/ui-components/Common/CodeTabs'; import * as TabsPrimitive from '@radix-ui/react-tabs'; import type { FC, ReactElement } from 'react'; +import CodeTabs from '#ui/Common/CodeTabs'; + type MDXCodeTabsProps = { children: Array>; languages: string; diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json index a61f6c129f9a2..fb0e2f1899731 100644 --- a/packages/ui-components/package.json +++ b/packages/ui-components/package.json @@ -38,7 +38,7 @@ "@radix-ui/react-label": "~2.1.2", "@radix-ui/react-select": "~2.2.2", "@radix-ui/react-separator": "~1.1.3", - "@radix-ui/react-tabs": "~1.1.3", + "@radix-ui/react-tabs": "~1.1.9", "@radix-ui/react-toast": "~1.2.6", "@radix-ui/react-tooltip": "~1.2.4", "@tailwindcss/postcss": "~4.1.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4527ae25e4222..1586b5a1e2322 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -347,7 +347,7 @@ importers: specifier: ~1.1.3 version: 1.1.4(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@radix-ui/react-tabs': - specifier: ~1.1.3 + specifier: ~1.1.9 version: 1.1.9(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@radix-ui/react-toast': specifier: ~1.2.6 @@ -12826,7 +12826,7 @@ snapshots: tinyglobby: 0.2.13 unrs-resolver: 1.7.2 optionalDependencies: - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.31.1(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@4.3.4)(eslint@9.26.0(jiti@2.4.2)) + eslint-plugin-import: 2.31.0(eslint-import-resolver-typescript@4.3.4)(eslint@9.26.0(jiti@2.4.2)) eslint-plugin-import-x: 4.11.0(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3) transitivePeerDependencies: - supports-color @@ -12854,17 +12854,28 @@ snapshots: - bluebird - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@8.31.1(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.26.0(jiti@2.4.2)): + eslint-module-utils@2.12.0(@typescript-eslint/parser@8.31.1(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.3.4)(eslint@9.26.0(jiti@2.4.2)): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 8.31.1(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3) eslint: 9.26.0(jiti@2.4.2) eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import-x@4.11.0(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-import@2.31.0)(eslint@9.26.0(jiti@2.4.2)) + eslint-import-resolver-typescript: 4.3.4(eslint-plugin-import-x@4.11.0(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-import@2.31.0)(eslint@9.26.0(jiti@2.4.2)) transitivePeerDependencies: - supports-color + eslint-module-utils@2.12.0(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.3.4)(eslint@9.26.0(jiti@2.4.2)): + dependencies: + debug: 3.2.7 + optionalDependencies: + eslint: 9.26.0(jiti@2.4.2) + eslint-import-resolver-node: 0.3.9 + eslint-import-resolver-typescript: 4.3.4(eslint-plugin-import-x@4.11.0(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-import@2.31.0)(eslint@9.26.0(jiti@2.4.2)) + transitivePeerDependencies: + - supports-color + optional: true + eslint-plugin-import-x@4.11.0(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3): dependencies: '@typescript-eslint/utils': 8.31.1(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3) @@ -12894,7 +12905,7 @@ snapshots: doctrine: 2.1.0 eslint: 9.26.0(jiti@2.4.2) eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.31.1(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.26.0(jiti@2.4.2)) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.31.1(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.3.4)(eslint@9.26.0(jiti@2.4.2)) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3 @@ -12912,6 +12923,34 @@ snapshots: - eslint-import-resolver-webpack - supports-color + eslint-plugin-import@2.31.0(eslint-import-resolver-typescript@4.3.4)(eslint@9.26.0(jiti@2.4.2)): + dependencies: + '@rtsao/scc': 1.1.0 + array-includes: 3.1.8 + array.prototype.findlastindex: 1.2.6 + array.prototype.flat: 1.3.3 + array.prototype.flatmap: 1.3.3 + debug: 3.2.7 + doctrine: 2.1.0 + eslint: 9.26.0(jiti@2.4.2) + eslint-import-resolver-node: 0.3.9 + eslint-module-utils: 2.12.0(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.3.4)(eslint@9.26.0(jiti@2.4.2)) + hasown: 2.0.2 + is-core-module: 2.16.1 + is-glob: 4.0.3 + minimatch: 3.1.2 + object.fromentries: 2.0.8 + object.groupby: 1.0.3 + object.values: 1.2.1 + semver: 6.3.1 + string.prototype.trimend: 1.0.9 + tsconfig-paths: 3.15.0 + transitivePeerDependencies: + - eslint-import-resolver-typescript + - eslint-import-resolver-webpack + - supports-color + optional: true + eslint-plugin-jsx-a11y@6.10.2(eslint@9.26.0(jiti@2.4.2)): dependencies: aria-query: 5.3.2