Skip to content

Commit 599d4cf

Browse files
avivkelleravivkeller
committed
feat(ui): move more Toast logic
1 parent cc36077 commit 599d4cf

10 files changed

Lines changed: 44 additions & 50 deletions

File tree

‎apps/site/components/Common/CodeBox.tsx‎

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
'use client';
22

3-
import { CodeBracketIcon } from '@heroicons/react/24/outline';
4-
import BaseCodeBox from '@node-core/ui-components/Common/BaseCodeBox';
5-
import styles from '@node-core/ui-components/Common/BaseCodeBox/index.module.css';
6-
import { useNotification } from '@node-core/ui-components/Providers/NotificationProvider';
3+
import BaseCodeBox from '@node-core/ui-components/Common/CodeBox';
74
import { useTranslations } from 'next-intl';
85
import type { FC, PropsWithChildren } from 'react';
96

@@ -18,29 +15,15 @@ type CodeBoxProps = {
1815

1916
const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = props => {
2017
const [, copyToClipboard] = useCopyToClipboard();
21-
const notify = useNotification();
2218
const t = useTranslations();
2319

24-
const onCopy = (text: string) => {
25-
copyToClipboard(text);
26-
27-
notify({
28-
duration: 300,
29-
message: (
30-
<div className="flex items-center gap-3">
31-
<CodeBracketIcon className={styles.icon} />
32-
{t('components.common.codebox.copied')}
33-
</div>
34-
),
35-
});
36-
};
37-
3820
return (
3921
<BaseCodeBox
4022
as={Link}
41-
onCopy={onCopy}
23+
onCopy={copyToClipboard}
4224
{...props}
4325
buttonText={t('components.common.codebox.copy')}
26+
notificationText={t('components.common.codebox.copied')}
4427
/>
4528
);
4629
};

‎apps/site/components/Downloads/Release/ReleaseCodeBox.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useTranslations } from 'next-intl';
77
import type { FC } from 'react';
88
import { useContext, useMemo } from 'react';
99

10-
import CodeBox from '#site/components/Common/CodeBox';
10+
import BaseCodeBox from '#site/components/Common/CodeBox';
1111
import Link from '#site/components/Link';
1212
import LinkWithArrow from '#site/components/LinkWithArrow';
1313
import { createSval } from '#site/next.jsx.compiler.mjs';
@@ -150,9 +150,9 @@ const ReleaseCodeBox: FC = () => {
150150
)}
151151

152152
<Skeleton loading={renderSkeleton}>
153-
<CodeBox language={displayName} className="min-h-[16.5rem]">
153+
<BaseCodeBox language={displayName} className="min-h-[16.5rem]">
154154
<code dangerouslySetInnerHTML={{ __html: parsedSnippets }} />
155-
</CodeBox>
155+
</BaseCodeBox>
156156
</Skeleton>
157157

158158
<span className="text-center text-xs text-neutral-800 dark:text-neutral-200">

‎apps/site/components/MDX/CodeBox/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { getLanguageDisplayName } from '@node-core/rehype-shiki';
22
import type { FC, PropsWithChildren } from 'react';
33

4-
import CodeBox from '#site/components/Common/CodeBox';
4+
import BaseCodeBox from '#site/components/Common/CodeBox';
55

66
type CodeBoxProps = { className?: string; showCopyButton?: string };
77

@@ -14,13 +14,13 @@ const MDXCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
1414
const language = matches?.groups?.language ?? '';
1515

1616
return (
17-
<CodeBox
17+
<BaseCodeBox
1818
language={getLanguageDisplayName(language)}
1919
showCopyButton={showCopyButton ? showCopyButton === 'true' : undefined}
2020
className={className}
2121
>
2222
{code}
23-
</CodeBox>
23+
</BaseCodeBox>
2424
);
2525
};
2626

‎apps/site/layouts/Base.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { NavigationStateProvider } from '#site/providers/navigationStateProvider
88
import styles from './layouts.module.css';
99

1010
const BaseLayout: FC<PropsWithChildren> = ({ children }) => (
11-
<NotificationProvider viewportClassName="fixed bottom-0 right-0 list-none">
11+
<NotificationProvider>
1212
<NavigationStateProvider>
1313
<div className={styles.baseLayout}>{children}</div>
1414
</NavigationStateProvider>

‎packages/ui-components/.storybook/preview.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import * as Toast from '@radix-ui/react-toast';
21
import { withThemeByDataAttribute } from '@storybook/addon-themes';
32
import type { Preview, ReactRenderer } from '@storybook/react';
43

4+
import { NotificationProvider } from '#ui/Providers/NotificationProvider';
5+
56
import { STORYBOOK_MODES, STORYBOOK_SIZES } from './constants';
67

78
import '#ui/styles/index.css';
@@ -13,10 +14,9 @@ const preview: Preview = {
1314
},
1415
decorators: [
1516
Story => (
16-
<Toast.Provider>
17+
<NotificationProvider>
1718
<Story />
18-
<Toast.Viewport />
19-
</Toast.Provider>
19+
</NotificationProvider>
2020
),
2121
withThemeByDataAttribute<ReactRenderer>({
2222
themes: { light: '', dark: 'dark' },

packages/ui-components/src/Common/BaseCodeBox/index.module.css renamed to packages/ui-components/src/Common/CodeBox/index.module.css

File renamed without changes.

packages/ui-components/src/Common/BaseCodeBox/index.stories.tsx renamed to packages/ui-components/src/Common/CodeBox/index.stories.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
22

3-
import BaseCodeBox from '#ui/Common/BaseCodeBox';
3+
import CodeBox from '#ui/Common/CodeBox';
44

5-
type Story = StoryObj<typeof BaseCodeBox>;
6-
type Meta = MetaObj<typeof BaseCodeBox>;
5+
type Story = StoryObj<typeof CodeBox>;
6+
type Meta = MetaObj<typeof CodeBox>;
77

88
const content = `const http = require('http');
99
@@ -36,4 +36,4 @@ export const WithCopyButton: Story = {
3636
},
3737
};
3838

39-
export default { component: BaseCodeBox } as Meta;
39+
export default { component: CodeBox } as Meta;

packages/ui-components/src/Common/BaseCodeBox/index.tsx renamed to packages/ui-components/src/Common/CodeBox/index.tsx

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
'use client';
22

3-
import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
3+
import {
4+
DocumentDuplicateIcon,
5+
CodeBracketIcon,
6+
} from '@heroicons/react/24/outline';
47
import classNames from 'classnames';
58
import type { FC, PropsWithChildren, ReactElement } from 'react';
69
import { Fragment, isValidElement, useRef } from 'react';
710

811
import BaseButton from '#ui/Common/BaseButton';
12+
import { useNotification } from '#ui/Providers/NotificationProvider';
913
import type { LinkLike } from '#ui/types';
1014

1115
import styles from './index.module.css';
@@ -69,23 +73,35 @@ interface CodeBoxProps {
6973
onCopy: (text: string) => void;
7074
as?: LinkLike;
7175
buttonText: string;
76+
notificationText: string;
7277
showCopyButton?: boolean;
7378
}
7479

75-
const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
80+
const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
7681
children,
7782
language,
7883
className,
7984
onCopy,
8085
buttonText,
86+
notificationText,
8187
as = 'a',
8288
showCopyButton = true,
8389
}: PropsWithChildren<CodeBoxProps>) => {
90+
const notify = useNotification();
8491
const containerRef = useRef<HTMLPreElement>(null);
8592

8693
const handleCopy = (): void => {
8794
const text = containerRef.current?.textContent;
8895
if (text) {
96+
notify({
97+
duration: 300,
98+
message: (
99+
<div className="flex items-center gap-3">
100+
<CodeBracketIcon className={styles.icon} />
101+
{notificationText}
102+
</div>
103+
),
104+
});
89105
onCopy(text);
90106
}
91107
};
@@ -119,4 +135,4 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
119135
);
120136
};
121137

122-
export default BaseCodeBox;
138+
export default CodeBox;

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
22
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
33
import type { FC } from 'react';
44

5-
import BaseCodeBox from '#ui/Common/BaseCodeBox';
5+
import CodeBox from '#ui/Common/CodeBox';
66
import CodeTabs from '#ui/Common/CodeTabs';
77

88
type Story = StoryObj<typeof CodeTabs>;
@@ -46,14 +46,14 @@ const boxProps = {
4646
const TabsContent: FC = () => (
4747
<>
4848
<TabsPrimitive.Content key="mjs" value="mjs">
49-
<BaseCodeBox language="JavaScript (MJS)" {...boxProps}>
49+
<CodeBox language="JavaScript (MJS)" {...boxProps}>
5050
<code>{mjsContent}</code>
51-
</BaseCodeBox>
51+
</CodeBox>
5252
</TabsPrimitive.Content>
5353
<TabsPrimitive.Content key="cjs" value="cjs">
54-
<BaseCodeBox language="JavaScript (CJS)" {...boxProps}>
54+
<CodeBox language="JavaScript (CJS)" {...boxProps}>
5555
<code>{cjsContent}</code>
56-
</BaseCodeBox>
56+
</CodeBox>
5757
</TabsPrimitive.Content>
5858
</>
5959
);

‎packages/ui-components/src/Providers/NotificationProvider.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ type NotificationContextType = {
1515
duration: number;
1616
} | null;
1717

18-
type NotificationProps = { viewportClassName?: string };
19-
2018
const NotificationContext = createContext<NotificationContextType>(null);
2119

2220
export const NotificationDispatch = createContext<
@@ -25,10 +23,7 @@ export const NotificationDispatch = createContext<
2523

2624
export const useNotification = () => useContext(NotificationDispatch);
2725

28-
export const NotificationProvider: FC<PropsWithChildren<NotificationProps>> = ({
29-
viewportClassName,
30-
children,
31-
}) => {
26+
export const NotificationProvider: FC<PropsWithChildren> = ({ children }) => {
3227
const [notification, dispatch] = useState<NotificationContextType>(null);
3328

3429
useEffect(() => {
@@ -43,7 +38,7 @@ export const NotificationProvider: FC<PropsWithChildren<NotificationProps>> = ({
4338
<Toast.Provider>
4439
{children}
4540

46-
<Toast.Viewport className={viewportClassName} />
41+
<Toast.Viewport className={'fixed bottom-0 right-0 list-none'} />
4742

4843
{notification && (
4944
<Notification duration={notification.duration}>

0 commit comments

Comments
 (0)