Skip to content

Commit d1456c4

Browse files
timolinstimolins
authored
Merge pull request #86 from timolins/dev
2 parents ad291cf + d182844 commit d1456c4

31 files changed

+1249
-490
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
22
"name": "react-hot-toast",
3-
"version": "1.0.2",
3+
"version": "2.0.0-beta.0",
44
"author": "Timo Lins",
55
"license": "MIT",
6+
"sideEffects": false,
67
"repository": "timolins/react-hot-toast",
78
"keywords": [
89
"react",
@@ -60,10 +61,11 @@
6061
"@size-limit/preset-small-lib": "^4.9.1",
6162
"@types/react": "^17.0.0",
6263
"@types/react-dom": "^17.0.0",
64+
"csstype": "^3.0.7",
6365
"size-limit": "^4.9.1",
6466
"tsdx": "^0.14.1"
6567
},
6668
"dependencies": {
67-
"goober": "^2.0.15"
69+
"goober": "^2.0.35"
6870
}
6971
}

‎site/components/code.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,10 @@ const theme: PrismTheme = {
103103

104104
export const Code: React.FC<{
105105
snippet: string;
106+
language?: Language;
106107
className?: string;
107108
}> = (props) => {
108-
const language = (props.className?.replace(/language-/, '') as any) || 'jsx';
109+
const language = props.language || 'jsx';
109110

110111
return (
111112
<Highlight

‎site/components/docs-layout.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const TableItem: React.FC<{
99
href: string;
1010
}> = ({ children, href }) => (
1111
<Link href={href}>
12-
<a className="rounded px-3 py-2 transition-colors duration-200 relative block hover:text-toast-500 text-toast-700">
12+
<a className="rounded px-3 py-1.5 transition-colors duration-200 relative block hover:text-toast-500 text-toast-700">
1313
{children}
1414
</a>
1515
</Link>
@@ -53,22 +53,25 @@ export default function DocsLayout({ children, meta }) {
5353
GitHub
5454
</a>
5555
</header>
56-
<nav className="font-medium rounded-lg">
57-
<div className="flex flex-col mb-8">
56+
<nav className="font-medium rounded-lg ">
57+
<div className="flex flex-col mb-8 sticky top-0">
5858
<TableHeader>Overview</TableHeader>
5959

6060
<TableItem href="/docs">Get Started</TableItem>
6161

6262
<TableHeader>API</TableHeader>
6363

6464
<TableItem href="/docs/toast">toast()</TableItem>
65-
<TableItem href="/docs/toaster">Toaster</TableItem>
65+
<TableItem href="/docs/toaster">{`Toaster`}</TableItem>
66+
<TableItem href="/docs/toast-bar">{`ToastBar`}</TableItem>
6667
<TableItem href="/docs/use-toaster">useToaster()</TableItem>
6768
<TableItem href="/docs/use-toaster-store">
6869
useToasterStore()
6970
</TableItem>
7071
<TableHeader>Guides</TableHeader>
7172
<TableItem href="/docs/styling">Styling</TableItem>
73+
<TableHeader>Releases</TableHeader>
74+
<TableItem href="/docs/version-2">New in 2.0</TableItem>
7275
</div>
7376
</nav>
7477

‎site/components/sections/toast-example.tsx

Lines changed: 98 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,102 @@ const examples: Array<{
169169
});
170170
},
171171
},
172+
{
173+
title: 'Custom Position',
174+
emoji: '⬆️',
175+
snippet: `toast.success('Always at the bottom.', {
176+
position: "bottom-center"
177+
})`,
178+
action: () => {
179+
toast.success('Always at the bottom.', {
180+
position: 'bottom-center',
181+
duration: 10000,
182+
});
183+
},
184+
},
185+
{
186+
title: 'TailwindCSS',
187+
emoji: '️💨',
188+
snippet: `toast.custom((t) => (
189+
<div
190+
className={\`\${
191+
t.visible ? 'animate-enter' : 'animate-leave'
192+
} max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5\`}
193+
>
194+
<div className="flex-1 w-0 p-4">
195+
<div className="flex items-start">
196+
<div className="flex-shrink-0 pt-0.5">
197+
<img
198+
className="h-10 w-10 rounded-full"
199+
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=6GHAjsWpt9&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"
200+
alt=""
201+
/>
202+
</div>
203+
<div className="ml-3 flex-1">
204+
<p className="text-sm font-medium text-gray-900">
205+
Emilia Gates
206+
</p>
207+
<p className="mt-1 text-sm text-gray-500">
208+
Sure! 8:30pm works great!
209+
</p>
210+
</div>
211+
</div>
212+
</div>
213+
<div className="flex border-l border-gray-200">
214+
<button
215+
onClick={() => toast.dismiss(t.id)}
216+
className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
217+
>
218+
Close
219+
</button>
220+
</div>
221+
</div>
222+
))`,
223+
action: () => {
224+
// toast.custom(<TestApp />);
225+
226+
toast.custom(
227+
(t) => (
228+
<div
229+
className={`${
230+
t.visible ? 'animate-enter' : 'animate-leave'
231+
} max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
232+
>
233+
<div className="flex-1 w-0 p-4">
234+
<div className="flex items-start">
235+
<div className="flex-shrink-0 pt-0.5">
236+
<img
237+
className="h-10 w-10 rounded-full"
238+
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=6GHAjsWpt9&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"
239+
alt=""
240+
/>
241+
</div>
242+
<div className="ml-3 flex-1">
243+
<p className="text-sm font-medium text-gray-900">
244+
Emilia Gates
245+
</p>
246+
<p className="mt-1 text-sm text-gray-500">
247+
Sure! 8:30pm works great!
248+
</p>
249+
</div>
250+
</div>
251+
</div>
252+
<div className="flex border-l border-gray-200">
253+
<button
254+
onClick={() => toast.dismiss(t.id)}
255+
className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
256+
>
257+
Close
258+
</button>
259+
</div>
260+
</div>
261+
),
262+
{
263+
duration: 10000,
264+
}
265+
);
266+
},
267+
},
172268
];
173269

174270
export const ToastExample = () => {
@@ -196,8 +292,8 @@ export const ToastExample = () => {
196292
))}
197293
</div>
198294
</div>
199-
<div className="md:h-72 w-full overflow-hidden">
200-
<Code snippet={snippet} />
295+
<div className="md:h-72 w-full overflow-auto rounded-lg">
296+
<Code snippet={snippet} className="!h-auto min-h-full" />
201297
</div>
202298
</section>
203299
);

‎site/next.config.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
const withTM = require('next-transpile-modules')(['react-hot-toast']);
2+
const remarkSlugs = require('rehype-slug');
3+
24
const withMDX = require('@next/mdx')({
3-
extension: /\.mdx?$/,
5+
extension: /.mdx?$/,
6+
options: {
7+
rehypePlugins: [remarkSlugs],
8+
},
49
});
510
const withPlugins = require('next-compose-plugins');
611

712
const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => {
813
return Object.assign({}, nextConfig, {
914
webpack(config, options) {
1015
config.module.rules.push({
11-
test: /\.svg$/,
16+
test: /.svg$/,
1217
use: ['@svgr/webpack'],
1318
});
1419

0 commit comments

Comments
 (0)