Skip to content

Commit 5810685

Browse files
pheralbpheralb
authored
Merge pull request #1 from pheralb/next
🚀 v0.2.0
2 parents f6279a0 + cc8d3e2 commit 5810685

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+2367
-369
lines changed

‎.changeset/config.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,9 @@
77
"access": "public",
88
"baseBranch": "main",
99
"updateInternalDependencies": "patch",
10-
"ignore": ["@pheralb/toast-website"]
10+
"ignore": [
11+
"@pheralb/toast-website",
12+
"@pheralb-toast/nextjs-example",
13+
"@pheralb-toast/astro-example"
14+
]
1115
}

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
22

3+
# Astro
4+
.astro
5+
36
# Dependencies
47
node_modules
58
.pnp

‎examples/astro/astro.config.mjs

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { defineConfig } from 'astro/config';
2+
3+
import react from "@astrojs/react";
4+
5+
// https://astro.build/config
6+
export default defineConfig({
7+
integrations: [react()]
8+
});

‎examples/astro/package.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "@pheralb-toast/astro-example",
3+
"type": "module",
4+
"private": true,
5+
"version": "0.0.1",
6+
"scripts": {
7+
"dev": "astro dev",
8+
"start": "astro dev",
9+
"build": "astro check && astro build",
10+
"preview": "astro preview",
11+
"astro": "astro"
12+
},
13+
"dependencies": {
14+
"@pheralb/toast": "workspace:^",
15+
"@astrojs/check": "0.9.1",
16+
"@astrojs/react": "3.6.1",
17+
"@types/react": "18.3.3",
18+
"@types/react-dom": "18.3.0",
19+
"astro": "4.12.3",
20+
"react": "18.3.1",
21+
"react-dom": "18.3.1",
22+
"typescript": "5.5.4"
23+
}
24+
}

‎examples/astro/src/components/showToast.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { toast } from '@pheralb/toast';
2+
3+
const ShowToast = () => {
4+
const handleClick = () => {
5+
toast.default({
6+
text: 'Hello, world!',
7+
});
8+
};
9+
10+
return (
11+
<button type="button" onClick={handleClick}>
12+
Show Toast
13+
</button>
14+
);
15+
};
16+
17+
export default ShowToast;

‎examples/astro/src/env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="astro/client" />

‎examples/astro/src/layouts/Layout.astro

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
interface Props {
3+
title: string;
4+
}
5+
6+
import { Toaster } from '@pheralb/toast';
7+
8+
const { title } = Astro.props;
9+
---
10+
11+
<!doctype html>
12+
<html lang="en">
13+
<head>
14+
<meta charset="UTF-8" />
15+
<meta name="description" content="Astro description" />
16+
<meta name="viewport" content="width=device-width" />
17+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
18+
<meta name="generator" content={Astro.generator} />
19+
<title>{title}</title>
20+
</head>
21+
<body>
22+
<slot />
23+
<Toaster client:load theme="light" />
24+
</body>
25+
</html>

‎examples/astro/src/pages/index.astro

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
import Layout from '../layouts/Layout.astro';
3+
import ShowToast from '../components/showToast';
4+
---
5+
6+
<Layout title="Welcome to Astro.">
7+
<main>
8+
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
9+
<ShowToast client:load />
10+
</main>
11+
</Layout>

‎examples/astro/tsconfig.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "astro/tsconfigs/strict",
3+
"compilerOptions": {
4+
"jsx": "react-jsx",
5+
"jsxImportSource": "react"
6+
}
7+
}

‎examples/nextjs/src/app/layout.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ export default function RootLayout({
2626
enableSystem
2727
disableTransitionOnChange
2828
>
29-
<ToastClientProvider>{children}</ToastClientProvider>
29+
<ToastClientProvider />
30+
{children}
3031
</ThemeProvider>
3132
</body>
3233
</html>

‎examples/nextjs/src/app/page.tsx

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,46 @@
11
'use client';
22

3-
import { useToast } from '@pheralb/toast';
3+
import { toast } from '@pheralb/toast';
44
import { PartyPopperIcon } from 'lucide-react';
55
import { useTheme } from 'next-themes';
66
import { useState } from 'react';
77

88
export default function Home() {
99
const { setTheme } = useTheme();
1010
const [duration, setDuration] = useState<number>(8000);
11-
const t = useToast();
1211
const buttonStyles =
1312
'p-2 m-2 bg-neutral-100 border border-neutral-300 dark:border-neutral-700 dark:bg-neutral-800 text-sm dark:text-white rounded-md';
1413

1514
const renderToast = () => {
16-
t.default({
15+
toast.default({
1716
text: 'Rendered toast!',
1817
description: 'This is a success toast!',
1918
delayDuration: duration,
2019
});
2120
};
2221

2322
const renderToastWithIcon = () => {
24-
t.default({
23+
toast.default({
2524
text: 'Rendered toast without icon',
2625
description: 'This is a default toast!',
2726
delayDuration: duration,
2827
});
29-
t.success({
28+
toast.success({
3029
text: 'Rendered toast with library icon',
3130
description: 'This is a success toast',
3231
delayDuration: duration,
3332
});
34-
t.error({
33+
toast.error({
3534
text: 'Rendered toast without library icon',
3635
description: 'This is a error toast',
3736
delayDuration: duration,
3837
});
39-
t.warning({
38+
toast.warning({
4039
text: 'Rendered toast with library icon',
4140
description: 'This is a warning toast',
4241
delayDuration: duration,
4342
});
44-
t.default({
43+
toast.default({
4544
text: 'Rendered toast with custom icon',
4645
description: 'This is a default toast',
4746
delayDuration: duration,

‎examples/nextjs/src/providers/toastProvider.tsx

+3-7
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
'use client';
22

3-
import {
4-
ToastProvider,
5-
ToastTheme,
6-
type ToastProviderProperties,
7-
} from '@pheralb/toast';
3+
import { Toaster, ToastTheme, type ToasterProperties } from '@pheralb/toast';
84
import { useTheme } from 'next-themes';
95

10-
const ToastClientProvider = (props: ToastProviderProperties) => {
6+
const ToastClientProvider = (props: ToasterProperties) => {
117
const { theme } = useTheme();
128
return (
13-
<ToastProvider
9+
<Toaster
1410
toastFont="font-sans"
1511
maxToasts={10}
1612
theme={theme as ToastTheme}

‎library/README.md

+14-8
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,13 @@ yarn install @pheralb/toast
7676

7777
```tsx
7878
// 📃 root.tsx
79-
import { ToastProvider } from '@pheralb/toast';
79+
80+
import { Toaster } from '@pheralb/toast';
8081

8182
ReactDOM.createRoot(document.getElementById('root')!).render(
8283
<React.StrictMode>
83-
<ToastProvider>
84-
<App />
85-
</ToastProvider>
84+
<App />
85+
<Toaster />
8686
</React.StrictMode>,
8787
);
8888
```
@@ -91,8 +91,10 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
9191

9292
```jsx
9393
// 📃 index.tsx
94+
95+
import { toast } from '@pheralb/toast';
96+
9497
export default function Index() {
95-
const toast = useToast();
9698
return (
9799
<>
98100
<button
@@ -116,7 +118,7 @@ export default function Index() {
116118
## 🔭 Roadmap
117119

118120
- [ ] 🚗 Add `.loading` variant.
119-
- [ ] 📚 Add support for Astro + React.
121+
- [x] 📚 Add support for Astro + React.
120122
- [ ] 🎨 Add rich colors support.
121123

122124
## 🤝 Contributing
@@ -152,8 +154,12 @@ pnpm build
152154
pnpm test
153155
```
154156

155-
- Open [`http://localhost:5173`](http://localhost:5173) to view the **Remix** documentation website.
156-
- Open [`http://localhost:3000`](http://localhost:3000) to view the **Next.js** playground. Only for test the functionality of the library.
157+
🧑‍🚀 Open [`http://localhost:5173`](http://localhost:5173) to view the **Remix** documentation website.
158+
159+
🔎 Only for test the functionality of the library:
160+
161+
- Open [`http://localhost:3000`](http://localhost:3000) to view the **Next.js** playground.
162+
- Open [`http://localhost:4321`](http://localhost:3001) to view the **Astro** playground.
157163

158164
and create a pull request with your features or fixes 🚀✨.
159165

‎library/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@pheralb/toast",
3-
"version": "0.1.3",
3+
"version": "0.2.0",
44
"author": "@pheralb_",
55
"keywords": [
66
"react",

‎library/src/components/toast-functions.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { ToastPropsWithVariant } from '../types/toast.types';
2+
import { openToast } from './toaster';
3+
4+
export const toast = {
5+
default: (data: ToastPropsWithVariant) => {
6+
openToast({ ...data });
7+
},
8+
success: (data: ToastPropsWithVariant) => {
9+
openToast({ ...data, variant: 'success' });
10+
},
11+
error: (data: ToastPropsWithVariant) => {
12+
openToast({ ...data, variant: 'error' });
13+
},
14+
warning: (data: ToastPropsWithVariant) => {
15+
openToast({ ...data, variant: 'warning' });
16+
},
17+
info: (data: ToastPropsWithVariant) => {
18+
openToast({ ...data, variant: 'info' });
19+
},
20+
};

‎library/src/components/toast.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type {
66
} from '../types/toast.types';
77
import '../styles/toast-component.css';
88

9-
import { Error, Info, Success, Warning } from '../icons';
9+
import { Error, Info, Loading, Success, Warning } from '../icons';
1010
import { useTimeout } from '../hooks/useTimeout';
1111
import { classNames, prefersReducedMotion } from '../utils';
1212

@@ -15,13 +15,15 @@ const icons: Record<Variant, FC<React.SVGProps<SVGSVGElement>>> = {
1515
error: Error,
1616
warning: Warning,
1717
info: Info,
18+
loading: Loading,
1819
};
1920

2021
const iconsColors: Record<Variant, string> = {
2122
success: '#22c55e',
2223
error: '#ef4444',
2324
warning: '#eab308',
2425
info: '#3b82f6',
26+
loading: '#6b7280',
2527
};
2628

2729
interface ToastComponentProps extends ToastPropsWithVariant {
@@ -86,7 +88,7 @@ const Toast = (props: ToastComponentProps) => {
8688
return (
8789
<div
8890
title={props.text}
89-
aria-label="notification"
91+
aria-label="Notification"
9092
className={classNames(
9193
't_global',
9294
prefersReducedMotion() ? '' : animationClass,

0 commit comments

Comments
 (0)