Skip to content

Commit e9ec33a

Browse files
avivkellerovflowd
andauthored
chore(ui): simplify CodeBox-like UI components (#7793)
* chore(ui): simplify CodeBox-like UI components * Apply suggestions from code review Co-authored-by: Claudio W. <[email protected]> Signed-off-by: Aviv Keller <[email protected]> --------- Signed-off-by: Aviv Keller <[email protected]> Co-authored-by: Claudio W. <[email protected]>
1 parent a6881bd commit e9ec33a

File tree

8 files changed

+72
-39
lines changed

8 files changed

+72
-39
lines changed

apps/site/components/Common/CodeBox.tsx

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
'use client';
22

3+
import { CodeBracketIcon } from '@heroicons/react/24/outline';
34
import BaseCodeBox from '@node-core/ui-components/Common/BaseCodeBox';
5+
import styles from '@node-core/ui-components/Common/BaseCodeBox/index.module.css';
46
import { useTranslations } from 'next-intl';
5-
import type { FC, PropsWithChildren, ReactNode } from 'react';
7+
import type { FC, PropsWithChildren } from 'react';
68

79
import Link from '#site/components/Link';
810
import { useCopyToClipboard, useNotification } from '#site/hooks';
@@ -18,17 +20,26 @@ const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = props => {
1820
const notify = useNotification();
1921
const t = useTranslations();
2022

21-
const onCopy = (text: string, message: ReactNode) => {
23+
const onCopy = (text: string) => {
2224
copyToClipboard(text);
23-
notify({ duration: 300, message });
25+
26+
notify({
27+
duration: 300,
28+
message: (
29+
<div className="flex items-center gap-3">
30+
<CodeBracketIcon className={styles.icon} />
31+
{t('components.common.codebox.copied')}
32+
</div>
33+
),
34+
});
2435
};
36+
2537
return (
2638
<BaseCodeBox
2739
as={Link}
2840
onCopy={onCopy}
2941
{...props}
30-
copyText={t('components.common.codebox.copy')}
31-
copiedText={t('components.common.codebox.copied')}
42+
buttonText={t('components.common.codebox.copy')}
3243
/>
3344
);
3445
};

apps/site/next.mdx.use.client.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use strict';
22

33
import Blockquote from '@node-core/ui-components/Common/Blockquote';
4+
import MDXCodeTabs from '@node-core/ui-components/MDX/CodeTabs';
45

56
import Button from './components/Common/Button';
67
import DownloadButton from './components/Downloads/DownloadButton';
@@ -18,7 +19,6 @@ import ReleaseVersionDropdown from './components/Downloads/Release/VersionDropdo
1819
import Link from './components/Link';
1920
import LinkWithArrow from './components/LinkWithArrow';
2021
import MDXCodeBox from './components/MDX/CodeBox';
21-
import MDXCodeTabs from './components/MDX/CodeTabs';
2222
import MDXImage from './components/MDX/Image';
2323
import { ReleaseProvider } from './providers/releaseProvider';
2424

packages/ui-components/Common/BaseCodeBox/index.module.css

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,6 @@
7373
}
7474
}
7575

76-
.notification {
77-
@apply flex
78-
items-center
79-
gap-3;
80-
}
81-
8276
.icon {
8377
@apply size-4;
8478
}

packages/ui-components/Common/BaseCodeBox/index.tsx

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
'use client';
22

3-
import {
4-
DocumentDuplicateIcon,
5-
CodeBracketIcon,
6-
} from '@heroicons/react/24/outline';
3+
import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
74
import classNames from 'classnames';
8-
import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
5+
import type { FC, PropsWithChildren, ReactElement } from 'react';
96
import { Fragment, isValidElement, useRef } from 'react';
107

118
import BaseButton from '#ui/Common/BaseButton';
@@ -69,10 +66,9 @@ const transformCode = <T extends ReactElement<PropsWithChildren>>(
6966
interface CodeBoxProps {
7067
language: string;
7168
className?: string;
72-
onCopy: (text: string, message: ReactNode) => void;
69+
onCopy: (text: string) => void;
7370
as?: LinkLike;
74-
copyText: string;
75-
copiedText: string;
71+
buttonText: string;
7672
showCopyButton?: boolean;
7773
}
7874

@@ -81,8 +77,7 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
8177
language,
8278
className,
8379
onCopy,
84-
copiedText,
85-
copyText,
80+
buttonText,
8681
as = 'a',
8782
showCopyButton = true,
8883
}: PropsWithChildren<CodeBoxProps>) => {
@@ -91,13 +86,7 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
9186
const handleCopy = (): void => {
9287
const text = containerRef.current?.textContent;
9388
if (text) {
94-
onCopy(
95-
text,
96-
<div className={styles.notification}>
97-
<CodeBracketIcon className={styles.icon} />
98-
{copiedText}
99-
</div>
100-
);
89+
onCopy(text);
10190
}
10291
};
10392

@@ -121,7 +110,7 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
121110
onClick={handleCopy}
122111
>
123112
<DocumentDuplicateIcon className={styles.icon} />
124-
{copyText}
113+
{buttonText}
125114
</BaseButton>
126115
)}
127116
</div>

packages/ui-components/Common/CodeTabs/index.stories.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,7 @@ server.listen(port, hostname, () => {
4040

4141
const boxProps = {
4242
onCopy: console.log,
43-
copyText: '[Copy Text]',
44-
copiedText: '[Copied Text]',
43+
buttonText: '[Button Text]',
4544
};
4645

4746
const TabsContent: FC = () => (

apps/site/components/MDX/CodeTabs/index.tsx renamed to packages/ui-components/MDX/CodeTabs.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import CodeTabs from '@node-core/ui-components/Common/CodeTabs';
21
import * as TabsPrimitive from '@radix-ui/react-tabs';
32
import type { FC, ReactElement } from 'react';
43

4+
import CodeTabs from '#ui/Common/CodeTabs';
5+
56
type MDXCodeTabsProps = {
67
children: Array<ReactElement<unknown>>;
78
languages: string;

packages/ui-components/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"@radix-ui/react-label": "~2.1.2",
3939
"@radix-ui/react-select": "~2.2.2",
4040
"@radix-ui/react-separator": "~1.1.3",
41-
"@radix-ui/react-tabs": "~1.1.3",
41+
"@radix-ui/react-tabs": "~1.1.9",
4242
"@radix-ui/react-toast": "~1.2.6",
4343
"@radix-ui/react-tooltip": "~1.2.4",
4444
"@tailwindcss/postcss": "~4.1.5",

pnpm-lock.yaml

Lines changed: 44 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)