Skip to content

Commit ccac6ae

Browse files
fa-901fa-901
committed
feat: create Notification component
1 parent 51295e2 commit ccac6ae

8 files changed

Lines changed: 167 additions & 5 deletions

File tree

‎.storybook/preview.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
import type { Preview, ReactRenderer } from '@storybook/react';
1212

1313
import '../styles/new/index.css';
14+
import { NotificationProvider } from '../providers/notificationProvider';
1415

1516
const preview: Preview = {
1617
parameters: {
@@ -25,11 +26,13 @@ const preview: Preview = {
2526
Story => (
2627
<SiteProvider>
2728
<LocaleProvider>
28-
<div
29-
className={`${OPEN_SANS_FONT.variable} ${IBM_PLEX_MONO_FONT.variable}`}
30-
>
31-
<Story />
32-
</div>
29+
<NotificationProvider>
30+
<div
31+
className={`${OPEN_SANS_FONT.variable} ${IBM_PLEX_MONO_FONT.variable}`}
32+
>
33+
<Story />
34+
</div>
35+
</NotificationProvider>
3336
</LocaleProvider>
3437
</SiteProvider>
3538
),

‎components/Common/Notification/index.module.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.root {
2+
@apply m-6
3+
rounded
4+
border
5+
border-neutral-200
6+
bg-white
7+
px-4
8+
py-3
9+
shadow-lg
10+
dark:border-neutral-800
11+
dark:bg-neutral-900;
12+
}
13+
14+
.message {
15+
@apply font-medium
16+
text-green-600
17+
dark:text-white;
18+
}

‎components/Common/Notification/index.stories.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { CodeBracketIcon } from '@heroicons/react/24/solid';
2+
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
3+
import { FormattedMessage } from 'react-intl';
4+
5+
import Notification from './index';
6+
7+
type Story = StoryObj<typeof Notification>;
8+
type Meta = MetaObj<typeof Notification>;
9+
10+
export const Default: Story = {
11+
args: {
12+
open: true,
13+
duration: 5000,
14+
children: 'Copied to clipboard!',
15+
},
16+
};
17+
18+
export const WithJSX: Story = {
19+
args: {
20+
open: true,
21+
duration: 5000,
22+
children: (
23+
<div className="flex items-center gap-3">
24+
<CodeBracketIcon className="h-4 w-4" />
25+
<FormattedMessage id="components.common.codebox.copied" />
26+
</div>
27+
),
28+
},
29+
};
30+
31+
export default { component: Notification } as Meta;

‎components/Common/Notification/index.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import * as ToastPrimitive from '@radix-ui/react-toast';
2+
import classNames from 'classnames';
3+
import type { FC } from 'react';
4+
5+
import styles from './index.module.css';
6+
7+
type NotificationProps = {
8+
open: boolean;
9+
duration?: number;
10+
onChange?: (value: boolean) => void;
11+
children?: React.ReactNode;
12+
className?: string;
13+
};
14+
15+
const Notification: FC<NotificationProps> = ({
16+
open = true,
17+
duration = 5000,
18+
onChange,
19+
children,
20+
className,
21+
}: NotificationProps) => (
22+
<ToastPrimitive.Root
23+
open={open}
24+
duration={duration}
25+
onOpenChange={onChange}
26+
className={classNames(styles.root, className)}
27+
>
28+
<ToastPrimitive.Title className={styles.message}>
29+
{children}
30+
</ToastPrimitive.Title>
31+
</ToastPrimitive.Root>
32+
);
33+
34+
export default Notification;

‎i18n/locales/en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"components.pagination.previous": "Older",
3737
"components.common.crossLink.previous": "Prev",
3838
"components.common.crossLink.next": "Next",
39+
"components.common.codebox.copied": "Copied to clipboard!",
3940
"layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
4041
"layouts.blogIndex.currentYear": "News from {year}",
4142
"components.api.jsonLink.title": "View as JSON",

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
"@mdx-js/react": "^2.3.0",
4545
"@nodevu/core": "~0.1.0",
4646
"@radix-ui/react-select": "^2.0.0",
47+
"@radix-ui/react-toast": "^1.1.5",
4748
"@types/node": "18.17.17",
4849
"@vcarl/remark-headings": "~0.1.0",
4950
"@vercel/analytics": "^1.0.2",

‎providers/notificationProvider.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import * as Toast from '@radix-ui/react-toast';
2+
import type { CSSProperties, FC, PropsWithChildren } from 'react';
3+
4+
const viewportStyles = {
5+
position: 'absolute',
6+
bottom: 0,
7+
right: 0,
8+
} satisfies CSSProperties;
9+
10+
export const NotificationProvider: FC<PropsWithChildren> = ({ children }) => (
11+
<Toast.Provider>
12+
{children}
13+
<Toast.Viewport style={viewportStyles} />
14+
</Toast.Provider>
15+
);

0 commit comments

Comments
 (0)