Skip to content

Commit

Permalink
Merge pull request #86 from timolins/dev
Browse files Browse the repository at this point in the history
  • Loading branch information
timolins authored May 31, 2021
2 parents ad291cf + d182844 commit d1456c4
Show file tree
Hide file tree
Showing 31 changed files with 1,249 additions and 490 deletions.
14 changes: 7 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
{
"name": "react-hot-toast",
"version": "1.0.2",
"version": "2.0.0-beta.0",
"author": "Timo Lins",
"license": "MIT",
"sideEffects": false,
"repository": "timolins/react-hot-toast",
"keywords": [
"react",
Expand Down Expand Up @@ -60,10 +61,11 @@
"@size-limit/preset-small-lib": "^4.9.1",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"csstype": "^3.0.7",
"size-limit": "^4.9.1",
"tsdx": "^0.14.1"
},
"dependencies": {
"goober": "^2.0.15"
"goober": "^2.0.35"
}
}
3 changes: 2 additions & 1 deletion site/components/code.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,10 @@ const theme: PrismTheme = {

export const Code: React.FC<{
snippet: string;
language?: Language;
className?: string;
}> = (props) => {
const language = (props.className?.replace(/language-/, '') as any) || 'jsx';
const language = props.language || 'jsx';

return (
<Highlight
Expand Down
11 changes: 7 additions & 4 deletions site/components/docs-layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const TableItem: React.FC<{
href: string;
}> = ({ children, href }) => (
<Link href={href}>
<a className="rounded px-3 py-2 transition-colors duration-200 relative block hover:text-toast-500 text-toast-700">
<a className="rounded px-3 py-1.5 transition-colors duration-200 relative block hover:text-toast-500 text-toast-700">
{children}
</a>
</Link>
Expand Down Expand Up @@ -53,22 +53,25 @@ export default function DocsLayout({ children, meta }) {
GitHub
</a>
</header>
<nav className="font-medium rounded-lg">
<div className="flex flex-col mb-8">
<nav className="font-medium rounded-lg ">
<div className="flex flex-col mb-8 sticky top-0">
<TableHeader>Overview</TableHeader>

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

<TableHeader>API</TableHeader>

<TableItem href="/docs/toast">toast()</TableItem>
<TableItem href="/docs/toaster">Toaster</TableItem>
<TableItem href="/docs/toaster">{`Toaster`}</TableItem>
<TableItem href="/docs/toast-bar">{`ToastBar`}</TableItem>
<TableItem href="/docs/use-toaster">useToaster()</TableItem>
<TableItem href="/docs/use-toaster-store">
useToasterStore()
</TableItem>
<TableHeader>Guides</TableHeader>
<TableItem href="/docs/styling">Styling</TableItem>
<TableHeader>Releases</TableHeader>
<TableItem href="/docs/version-2">New in 2.0</TableItem>
</div>
</nav>

Expand Down
100 changes: 98 additions & 2 deletions site/components/sections/toast-example.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,102 @@ const examples: Array<{
});
},
},
{
title: 'Custom Position',
emoji: '⬆️',
snippet: `toast.success('Always at the bottom.', {
position: "bottom-center"
})`,
action: () => {
toast.success('Always at the bottom.', {
position: 'bottom-center',
duration: 10000,
});
},
},
{
title: 'TailwindCSS',
emoji: '️💨',
snippet: `toast.custom((t) => (
<div
className={\`\${
t.visible ? 'animate-enter' : 'animate-leave'
} max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5\`}
>
<div className="flex-1 w-0 p-4">
<div className="flex items-start">
<div className="flex-shrink-0 pt-0.5">
<img
className="h-10 w-10 rounded-full"
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"
alt=""
/>
</div>
<div className="ml-3 flex-1">
<p className="text-sm font-medium text-gray-900">
Emilia Gates
</p>
<p className="mt-1 text-sm text-gray-500">
Sure! 8:30pm works great!
</p>
</div>
</div>
</div>
<div className="flex border-l border-gray-200">
<button
onClick={() => toast.dismiss(t.id)}
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"
>
Close
</button>
</div>
</div>
))`,
action: () => {
// toast.custom(<TestApp />);

toast.custom(
(t) => (
<div
className={`${
t.visible ? 'animate-enter' : 'animate-leave'
} max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
>
<div className="flex-1 w-0 p-4">
<div className="flex items-start">
<div className="flex-shrink-0 pt-0.5">
<img
className="h-10 w-10 rounded-full"
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"
alt=""
/>
</div>
<div className="ml-3 flex-1">
<p className="text-sm font-medium text-gray-900">
Emilia Gates
</p>
<p className="mt-1 text-sm text-gray-500">
Sure! 8:30pm works great!
</p>
</div>
</div>
</div>
<div className="flex border-l border-gray-200">
<button
onClick={() => toast.dismiss(t.id)}
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"
>
Close
</button>
</div>
</div>
),
{
duration: 10000,
}
);
},
},
];

export const ToastExample = () => {
Expand Down Expand Up @@ -196,8 +292,8 @@ export const ToastExample = () => {
))}
</div>
</div>
<div className="md:h-72 w-full overflow-hidden">
<Code snippet={snippet} />
<div className="md:h-72 w-full overflow-auto rounded-lg">
<Code snippet={snippet} className="!h-auto min-h-full" />
</div>
</section>
);
Expand Down
9 changes: 7 additions & 2 deletions site/next.config.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
const withTM = require('next-transpile-modules')(['react-hot-toast']);
const remarkSlugs = require('rehype-slug');

const withMDX = require('@next/mdx')({
extension: /\.mdx?$/,
extension: /.mdx?$/,
options: {
rehypePlugins: [remarkSlugs],
},
});
const withPlugins = require('next-compose-plugins');

const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => {
return Object.assign({}, nextConfig, {
webpack(config, options) {
config.module.rules.push({
test: /\.svg$/,
test: /.svg$/,
use: ['@svgr/webpack'],
});

Expand Down
Loading

1 comment on commit d1456c4

@vercel
Copy link

@vercel vercel bot commented on d1456c4 May 31, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.