@xyhp915/slack-base-ui 0.0.4 → 0.0.6

package/src/pages/ComponentShowcase.tsx

@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom'
+import clsx from 'clsx'
 import {
   ArrowLeft,
   Bell,
@@ -93,6 +94,7 @@ import { Switch } from '../components/Switch'
 import { Tabs, TabList, Tab, TabPanel } from '../components/Tabs'
 import { Progress } from '../components/Progress'
 import { useToast } from '../components/Toast'
+import type { ToastPosition } from '../components/Toast'
 import { Loading } from '../components/Loading'
 import { AutoComplete } from '../components/AutoComplete'
 
@@ -126,7 +128,7 @@ export const ComponentShowcase = () => {
   const [switchOn, setSwitchOn] = useState(false)
   const [notificationsOn, setNotificationsOn] = useState(true)
   const [progressValue, setProgressValue] = useState(60)
-  const { toast } = useToast()
+  const { toast, position: toastPosition, setPosition: setToastPosition } = useToast()
 
   // AutoComplete states
   const [acValue, setAcValue] = useState('')
@@ -1868,94 +1870,152 @@ export const ComponentShowcase = () => {
         <section className="max-w-5xl mx-auto px-8 pb-16 space-y-6">
           <div className="pb-2 border-b border-(--border-light)">
             <h2 className="text-2xl font-bold text-(--text-primary)">Toast</h2>
-            <p className="text-(--text-secondary) mt-1">Lightweight notification toasts with five semantic types.</p>
+            <p className="text-(--text-secondary) mt-1">
+              轻量通知条，支持五种语义类型和六个显示位置。通过{' '}
+              <code className="text-sm bg-(--bg-secondary) px-1.5 py-0.5 rounded border border-(--border-light) font-mono">useToast()</code>{' '}
+              命令式调用。
+            </p>
           </div>
+
           <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+            {/* Types */}
             <div className="space-y-4">
-              <h3 className="font-semibold text-(--text-secondary)">Types</h3>
+              <h3 className="font-semibold text-(--text-secondary)">类型 Types</h3>
               <div className="flex flex-wrap gap-3">
                 <Button
-                    size="sm"
-                    onClick={() => toast(
-                        { title: 'Default notification', description: 'This is a default toast message.' })}
+                  size="sm"
+                  onClick={() => toast({ title: 'Default notification', description: 'This is a default toast message.' })}
                 >
                   Default
                 </Button>
                 <Button
-                    size="sm"
-                    onClick={() => toast(
-                        { type: 'info', title: 'Info', description: 'Your workspace is being updated.' })}
+                  size="sm"
+                  onClick={() => toast({ type: 'info', title: 'Info', description: 'Your workspace is being updated.' })}
                 >
                   Info
                 </Button>
                 <Button
-                    size="sm"
-                    variant="primary"
-                    onClick={() => toast({
-                      type: 'success',
-                      title: 'Message sent!',
-                      description: 'Your message was delivered to #general.',
-                    })}
+                  size="sm"
+                  variant="primary"
+                  onClick={() => toast({ type: 'success', title: 'Message sent!', description: 'Your message was delivered to #general.' })}
                 >
                   Success
                 </Button>
                 <Button
-                    size="sm"
-                    onClick={() => toast({
-                      type: 'warning',
-                      title: 'Storage almost full',
-                      description: 'You have used 90% of your storage.',
-                    })}
+                  size="sm"
+                  onClick={() => toast({ type: 'warning', title: 'Storage almost full', description: 'You have used 90% of your storage.' })}
                 >
                   Warning
                 </Button>
                 <Button
-                    size="sm"
-                    variant="danger"
-                    onClick={() => toast({
-                      type: 'error',
-                      title: 'Failed to send',
-                      description: 'Could not deliver the message. Try again.',
-                    })}
+                  size="sm"
+                  variant="danger"
+                  onClick={() => toast({ type: 'error', title: 'Failed to send', description: 'Could not deliver the message. Try again.' })}
                 >
                   Error
                 </Button>
               </div>
             </div>
+
+            {/* With action */}
             <div className="space-y-4">
-              <h3 className="font-semibold text-(--text-secondary)">With action</h3>
+              <h3 className="font-semibold text-(--text-secondary)">带操作按钮 With action</h3>
               <div className="flex flex-wrap gap-3">
                 <Button
-                    size="sm"
-                    onClick={() =>
-                        toast({
-                          type: 'info',
-                          title: 'New message in #general',
-                          description: 'Alice: "Hey everyone, quick update…"',
-                          action: {
-                            label: 'View',
-                            onClick: () => {},
-                          },
-                        })
-                    }
+                  size="sm"
+                  onClick={() =>
+                    toast({
+                      type: 'info',
+                      title: 'New message in #general',
+                      description: 'Alice: "Hey everyone, quick update…"',
+                      action: { label: 'View', onClick: () => {} },
+                    })
+                  }
                 >
                   Notification with action
                 </Button>
                 <Button
-                    size="sm"
-                    onClick={() =>
-                        toast({
-                          type: 'success',
-                          title: 'Invite sent',
-                          description: 'bob@example.com will receive an invitation.',
-                          timeout: 8000,
-                        })
-                    }
+                  size="sm"
+                  onClick={() =>
+                    toast({
+                      type: 'success',
+                      title: 'Invite sent',
+                      description: 'bob@example.com will receive an invitation.',
+                      timeout: 8000,
+                    })
+                  }
                 >
                   Custom timeout (8s)
                 </Button>
               </div>
             </div>
+
+            {/* Position picker — spans full width */}
+            <div className="space-y-4 md:col-span-2">
+              <h3 className="font-semibold text-(--text-secondary)">自定义位置 Position</h3>
+              <p className="text-sm text-(--text-secondary)">
+                可在 <code className="text-xs bg-(--bg-secondary) px-1 py-0.5 rounded border border-(--border-light) font-mono">&lt;ToastProvider position="…"&gt;</code> 设置默认位置，
+                或运行时通过 <code className="text-xs bg-(--bg-secondary) px-1 py-0.5 rounded border border-(--border-light) font-mono">setPosition()</code> 动态切换。
+                点击下方格子即可预览对应位置。
+              </p>
+
+              {/* Visual 3×2 position grid */}
+              <div className="relative w-full h-44 rounded-xl border-2 border-dashed border-(--border-light) bg-(--bg-muted) overflow-hidden">
+                {/* 3 cols × 2 rows grid */}
+                <div className="absolute inset-0 grid grid-cols-3 grid-rows-2">
+                  {(
+                    [
+                      ['top-left',     '↖', 'top-left'],
+                      ['top-center',   '↑', 'top-center'],
+                      ['top-right',    '↗', 'top-right'],
+                      ['bottom-left',  '↙', 'bottom-left'],
+                      ['bottom-center','↓', 'bottom-center'],
+                      ['bottom-right', '↘', 'bottom-right'],
+                    ] as [ToastPosition, string, string][]
+                  ).map(([pos, arrow]) => {
+                    const active = toastPosition === pos
+                    return (
+                      <button
+                        key={pos}
+                        onClick={() => {
+                          setToastPosition(pos)
+                          toast({
+                            type: 'info',
+                            title: pos,
+                            description: `Toast 显示在 ${pos}`,
+                            timeout: 3000,
+                          })
+                        }}
+                        className={clsx(
+                          'relative flex flex-col items-center justify-center gap-1 transition-all duration-150',
+                          'border border-(--border-light) text-xs font-medium',
+                          active
+                            ? 'bg-(--accent-action) text-(--accent-contrast) font-semibold shadow-inner'
+                            : 'text-(--text-muted) hover:bg-(--bg-hover) hover:text-(--text-primary)',
+                        )}
+                      >
+                        <span className="text-xl leading-none">{arrow}</span>
+                        <span className="text-[10px] opacity-80 px-1 text-center leading-tight">
+                          {pos.replace('-', '\u00A0')}
+                        </span>
+                      </button>
+                    )
+                  })}
+                </div>
+
+                {/* Center label */}
+                <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                  <span className="text-[11px] text-(--text-muted) select-none px-2 py-1 bg-(--bg-muted)/80 rounded">
+                    点击格子切换位置
+                  </span>
+                </div>
+              </div>
+
+              <p className="text-xs text-(--text-muted)">
+                当前位置：
+                <span className="font-semibold text-(--text-primary) ml-1">{toastPosition}</span>
+              </p>
+            </div>
           </div>
         </section>