@xyhp915/slack-base-ui 0.0.1 → 0.0.3

package/src/examples/slack-clone/layout/Sidebar.tsx

@@ -0,0 +1,67 @@
+import { SidebarItem } from './SidebarItem';
+import { ChevronDown, Plus } from 'lucide-react';
+
+export const Sidebar = () => {
+    return (
+        <aside className="w-[260px] bg-(--sidebar-bg) flex flex-col h-full text-(--sidebar-text) select-none">
+            {/* Workspace Header */}
+            <div className="h-12 px-4 flex items-center justify-between hover:bg-(--sidebar-item-hover) cursor-pointer border-b border-white/10 transition-colors">
+                <h1 className="font-bold text-white truncate text-[18px]">Acme Corp</h1>
+                <div className="bg-white/90 p-1 rounded-full text-(--slack-aubergine)">
+                    <ChevronDown className="w-3 h-3 stroke-3" />
+                </div>
+            </div>
+
+            {/* Scrollable Content */}
+            <div className="flex-1 overflow-y-auto py-3 px-2 custom-scrollbar space-y-6">
+
+                {/* Section: Channels */}
+                <div className="space-y-0.5">
+                    <div className="flex items-center justify-between group px-3 py-1 mb-1">
+                        <div className="flex items-center gap-1 hover:bg-(--sidebar-item-hover) cursor-pointer rounded px-1 -ml-1">
+                            <ChevronDown className="w-3 h-3" />
+                            <span className="text-[15px] font-medium group-hover:text-white transition-colors">Channels</span>
+                        </div>
+                        <button className="opacity-0 group-hover:opacity-100 p-1 hover:bg-(--sidebar-item-hover) rounded text-white transition-opacity">
+                            <Plus className="w-4 h-4" />
+                        </button>
+                    </div>
+
+                    <SidebarItem label="general" active />
+                    <SidebarItem label="random" />
+                    <SidebarItem label="announcements" isPrivate />
+                    <SidebarItem label="design-team" unreadCount={2} highlight />
+                    <SidebarItem label="engineering" />
+                </div>
+
+                {/* Section: Direct Messages */}
+                <div className="space-y-0.5">
+                    <div className="flex items-center justify-between group px-3 py-1 mb-1">
+                        <div className="flex items-center gap-1 hover:bg-(--sidebar-item-hover) cursor-pointer rounded px-1 -ml-1">
+                            <ChevronDown className="w-3 h-3" />
+                            <span className="text-[15px] font-medium group-hover:text-white transition-colors">Direct messages</span>
+                        </div>
+                        <button className="opacity-0 group-hover:opacity-100 p-1 hover:bg-(--sidebar-item-hover) rounded text-white transition-opacity">
+                            <Plus className="w-4 h-4" />
+                        </button>
+                    </div>
+
+                    <SidebarItem itemType="dm" label="Alice Smith" status="online" />
+                    <SidebarItem itemType="dm" label="Bob Jones" status="away" />
+                    <SidebarItem itemType="dm" label="Charlie Day" status="offline" />
+                </div>
+
+                {/* Section: Apps */}
+                <div className="space-y-0.5">
+                    <div className="flex items-center gap-1 px-3 py-1 mb-1 group cursor-pointer">
+                        <ChevronDown className="w-3 h-3" />
+                        <span className="text-[15px] font-medium group-hover:text-white transition-colors">Apps</span>
+                    </div>
+                    <SidebarItem label="Google Calendar" itemType="app" />
+                    <SidebarItem label="Jira" itemType="app" />
+                </div>
+
+            </div>
+        </aside>
+    );
+};

package/src/examples/slack-clone/layout/SidebarItem.tsx

@@ -0,0 +1,57 @@
+import clsx from 'clsx';
+import React from 'react';
+import { Hash, Lock } from 'lucide-react';
+import { Badge } from '../../../components/Badge';
+
+export type SidebarItemType = 'channel' | 'dm' | 'app' | 'section';
+
+export interface SidebarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    label: string;
+    itemType?: SidebarItemType;
+    active?: boolean;
+    unreadCount?: number;
+    highlight?: boolean; // White text for unreads/mentions
+    icon?: React.ElementType; // Override icon
+    isPrivate?: boolean;
+    status?: 'online' | 'away' | 'dnd' | 'offline';
+}
+
+export const SidebarItem = React.forwardRef<HTMLButtonElement, SidebarItemProps>(
+    ({ className, label, itemType = 'channel', active, unreadCount, highlight, icon: Icon, isPrivate, status, ...props }, ref) => {
+
+        // Determine default icon based on type
+        const DefaultIcon = isPrivate ? Lock : Hash;
+        const ItemIcon = Icon || (itemType === 'channel' ? DefaultIcon : undefined);
+
+        return (
+            <button
+                ref={ref}
+                className={clsx(
+                    "w-full text-left flex items-center gap-2 px-3 py-1 rounded-md transition-colors text-[15px]",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50",
+                    active
+                        ? "bg-(--sidebar-item-active) text-(--sidebar-text-active)"
+                        : "text-(--sidebar-text) hover:bg-(--sidebar-item-hover)",
+                    (highlight || unreadCount) && !active && "text-(--sidebar-text-active) font-bold",
+                    className
+                )}
+                {...props}
+            >
+                <span className="opacity-70 flex items-center justify-center w-4">
+                    {ItemIcon && <ItemIcon className="w-3.5 h-3.5" />}
+                    {itemType === 'dm' && <div className={clsx("w-2.5 h-2.5 rounded text-[10px] bg-green-500", !active && "opacity-80")} />}
+                </span>
+
+                <span className="truncate flex-1">{label}</span>
+
+                {unreadCount ? (
+                    <Badge
+                        count={unreadCount}
+                        variant={highlight ? "danger" : "neutral"}
+                        className="ml-auto"
+                    />
+                ) : null}
+            </button>
+        );
+    }
+);

package/src/examples/slack-clone/layout/TopBar.tsx

@@ -0,0 +1,30 @@
+import { Search, Clock, HelpCircle } from 'lucide-react';
+import { Avatar } from '../../../components/Avatar';
+
+export const TopBar = () => {
+    return (
+        <header className="h-[44px] bg-(--slack-aubergine-dark) flex items-center justify-between px-4 shrink-0 shadow-sm z-10">
+
+            {/* Left Spacer / History Controls (often here) */}
+            <div className="w-[200px] flex items-center gap-4 text-white/70">
+                <Clock className="w-4 h-4 cursor-pointer hover:text-white" />
+            </div>
+
+            {/* Search Bar */}
+            <div className="flex-1 max-w-[600px]">
+                <button className="w-full h-[28px] bg-white/10 hover:bg-white/15 rounded-md flex items-center justify-center text-white/80 text-[13px] border border-white/10 shadow-inner px-2 transition-colors">
+                    <Search className="w-3.5 h-3.5 mr-2 opacity-80" />
+                    <span>Search Acme Corp</span>
+                </button>
+            </div>
+
+            {/* Right Controls */}
+            <div className="w-[200px] flex items-center justify-end gap-3">
+                <HelpCircle className="w-4 h-4 text-white/70 cursor-pointer hover:text-white" />
+                <div className="relative cursor-pointer">
+                    <Avatar size="xs" fallback="ME" status="online" rounded={false} className="rounded" />
+                </div>
+            </div>
+        </header>
+    );
+};

package/src/index.css

@@ -0,0 +1,240 @@
+@import "tailwindcss";
+
+@theme {
+  --animate-in: fade-in 150ms ease-out;
+  --animate-out: fade-out 150ms ease-in;
+
+  /* 自定义圆角 - Slack 风格 */
+  --radius-sm: 3px;
+  --radius: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-2xl: 16px;
+  --radius-full: 9999px;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes zoom-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes zoom-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+
+@keyframes loading-bar {
+  0% {
+    left: -33%;
+  }
+  50% {
+    left: 100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+:root {
+  /* Colors - Slack Brand */
+  --slack-aubergine: #3F0E40;
+  --slack-aubergine-dark: #350d36;
+  --slack-blue: #1164A3;
+  --slack-green: #007a5a;
+  --slack-green-hover: #148567;
+  --slack-red: #E01E5A;
+
+  /* Theme Accent Tokens */
+  --accent: var(--slack-blue);
+  --accent-hover: #0b4c7a;
+  --accent-contrast: #ffffff;
+  --accent-action: var(--slack-green);
+  --accent-action-hover: var(--slack-green-hover);
+  --focus-ring: var(--accent);
+  --danger: var(--slack-red);
+  --danger-hover: #bd1546;
+  --badge-neutral: #616061;
+
+  /* Layout Colors */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8f8f8;
+  --bg-hover: #f2f2f2;
+
+  --text-primary: #1d1c1d;
+  --text-secondary: #616061;
+  --text-muted: #868686;
+
+  --border-light: #dddddd;
+  --border-gray: #767676;
+  --border-active: #dddddd;
+  --border-subtle: #e6e6e6;
+
+  /* Sidebar */
+  --sidebar-bg: var(--slack-aubergine);
+  --sidebar-text: #cfc3cf;
+  --sidebar-text-active: #ffffff;
+  --sidebar-item-hover: #350d36;
+  --sidebar-item-active: #1164A3;
+
+  /* Spacing */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+
+  /* Typography */
+  --font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-size-sm: 13px;
+  --font-size-md: 15px;
+  --font-size-lg: 18px;
+}
+
+:root[data-theme-color="slack"] {
+  --accent: var(--slack-blue);
+  --accent-hover: #0b4c7a;
+  --accent-action: var(--slack-green);
+  --accent-action-hover: var(--slack-green-hover);
+}
+
+:root[data-theme-color="blue"] {
+  --accent: #1164A3;
+  --accent-hover: #0b4c7a;
+  --accent-action: #1164A3;
+  --accent-action-hover: #0b4c7a;
+}
+
+:root[data-theme-color="green"] {
+  --accent: #007a5a;
+  --accent-hover: #148567;
+  --accent-action: #007a5a;
+  --accent-action-hover: #148567;
+}
+
+:root[data-theme-color="aubergine"] {
+  --accent: #3F0E40;
+  --accent-hover: #350d36;
+  --accent-action: #3F0E40;
+  --accent-action-hover: #350d36;
+}
+
+:root.dark {
+  /* Colors - Slack Brand (Dark Mode Adjustments if needed) */
+  --slack-aubergine: #19171d;
+  /* Darker sidebar */
+  --slack-aubergine-dark: #121016;
+
+  /* Layout Colors */
+  --bg-primary: #1A1D21;
+  --bg-secondary: #222529;
+  --bg-hover: #2C3036;
+
+  --text-primary: #D1D2D3;
+  --text-secondary: #ABACAE;
+  --text-muted: #858688;
+
+  --border-light: #363a3e;
+  --border-active: transparent;
+  /* Slack buttons don't usually show high contrast borders on active in dark mode */
+  /* Darker border */
+  --border-subtle: #454545;
+  --border-gray: #404040;
+
+  /* Sidebar */
+  --sidebar-bg: #19171d;
+  --sidebar-text: #ABACAE;
+  --sidebar-text-active: #FFFFFF;
+  --sidebar-item-hover: #27242c;
+  --sidebar-item-active: #1164A3;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-family), serif;
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  -webkit-font-smoothing: subpixel-antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+/* Dark mode scrollbar */
+:root.dark ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+:root.dark ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* Focus Ring for Accessibility */
+input:focus-visible, textarea:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--focus-ring) 35%, transparent);
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--focus-ring) 40%, transparent);
+}

package/src/main.tsx

@@ -0,0 +1,22 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+import { ThemeProvider } from './context/ThemeContext'
+import { ToastProvider } from './components'
+import { DialogProvider } from './components'
+import { ImperativePopoverProvider } from './components'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ThemeProvider>
+      <ToastProvider>
+        <DialogProvider>
+          <ImperativePopoverProvider>
+            <App />
+          </ImperativePopoverProvider>
+        </DialogProvider>
+      </ToastProvider>
+    </ThemeProvider>
+  </StrictMode>,
+)