@beyondcorp/beyond-ui 1.2.81 → 1.2.83
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -6,6 +6,35 @@
|
|
|
6
6
|
|
|
7
7
|
## 🚀 Overview
|
|
8
8
|
|
|
9
|
+
### Local Development Setup
|
|
10
|
+
|
|
11
|
+
| Requirement | Version |
|
|
12
|
+
| ----------- | ------- |
|
|
13
|
+
| Node.js | >= 18.0.0 |
|
|
14
|
+
| npm | >= 9.0.0 |
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
# clone the repo
|
|
18
|
+
git clone https://github.com/soitechnologysolutions/beyond-ui.git
|
|
19
|
+
cd beyond-ui
|
|
20
|
+
|
|
21
|
+
# install dependencies
|
|
22
|
+
npm install
|
|
23
|
+
|
|
24
|
+
# start the playground
|
|
25
|
+
npm run dev
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Scripts you will use often
|
|
29
|
+
|
|
30
|
+
| Script | Description |
|
|
31
|
+
| ------ | ----------- |
|
|
32
|
+
| `npm run dev` | Launches Vite playground for landing/showcase pages |
|
|
33
|
+
| `npm run storybook` | Starts Storybook on http://localhost:6006 |
|
|
34
|
+
| `npm run lint` | Runs ESLint across src/stories/tests |
|
|
35
|
+
| `npm test` | Executes Jest + React Testing Library suites |
|
|
36
|
+
| `npm run build` | Builds component library + docs assets |
|
|
37
|
+
|
|
9
38
|
Beyond-UI is a comprehensive collection of ready-to-use, themeable React UI components and hooks, built with TypeScript, TailwindCSS, and Vite. Inspired by the best of modern design systems, it’s built to be both design-consistent (via semantic theming) and easily composable for dashboards, apps, platforms, and SaaS.
|
|
10
39
|
|
|
11
40
|
- **Built for teams:** Use everywhere React and TailwindCSS run—admin panels, SaaS, dashboards, internal tools, consumer apps.
|
|
@@ -306,10 +335,12 @@ export default function Demo() {
|
|
|
306
335
|
|
|
307
336
|
## 📖 Documentation & Storybook
|
|
308
337
|
|
|
338
|
+
- [Public Storybook](https://storybook.ui.beyondsoftwares.com) — hosted component gallery and prop reference
|
|
339
|
+
- [Library landing page](https://ui.beyondsoftwares.com)
|
|
309
340
|
- [Getting Started guide](./docs/getting-started.md)
|
|
310
341
|
- [Theming & customization](./docs/theming.md)
|
|
311
|
-
-
|
|
312
|
-
-
|
|
342
|
+
- [Security & DX notes](./docs/security-dx-notes.md)
|
|
343
|
+
- Run `npm run storybook` locally for the full docs experience
|
|
313
344
|
|
|
314
345
|
---
|
|
315
346
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { useState } from 'react';
|
|
3
|
+
import { useState, useRef, useMemo, useEffect } from 'react';
|
|
4
4
|
import { Layout, Shield, AlertCircle, BarChart3, MousePointer, Palette, ChevronRight, Search, ChevronDown, Monitor, Tablet, Smartphone, Sun, Moon, Eye, Code, Settings, Check, Copy, Book } from 'lucide-react';
|
|
5
5
|
import { cn } from '../../utils/cn.js';
|
|
6
6
|
import { Button } from '../Button/Button.js';
|
|
@@ -66,23 +66,60 @@ const componentCategories = {
|
|
|
66
66
|
};
|
|
67
67
|
const ComponentShowcase = ({ className }) => {
|
|
68
68
|
const [selectedComponent, setSelectedComponent] = useState("button");
|
|
69
|
+
const [activeTab, setActiveTab] = useState("preview");
|
|
69
70
|
const [searchQuery, setSearchQuery] = useState("");
|
|
70
71
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
|
71
72
|
const [expandedCategories, setExpandedCategories] = useState(["Forms"]);
|
|
72
73
|
const [viewMode, setViewMode] = useState("desktop");
|
|
73
74
|
const [darkMode, setDarkMode] = useState(false);
|
|
74
75
|
const [copiedCode, setCopiedCode] = useState(null);
|
|
76
|
+
const sidebarRef = useRef(null);
|
|
77
|
+
const [focusedIndex, setFocusedIndex] = useState(-1);
|
|
75
78
|
const toggleCategory = (category) => {
|
|
76
79
|
setExpandedCategories((prev) => prev.includes(category)
|
|
77
80
|
? prev.filter((c) => c !== category)
|
|
78
81
|
: [...prev, category]);
|
|
79
82
|
};
|
|
83
|
+
const flatComponents = useMemo(() => {
|
|
84
|
+
return Object.values(componentCategories).flatMap((category) => category.components.map((component) => component.id));
|
|
85
|
+
}, []);
|
|
86
|
+
useEffect(() => {
|
|
87
|
+
if (focusedIndex >= 0 && sidebarRef.current && !sidebarCollapsed) {
|
|
88
|
+
const buttons = sidebarRef.current.querySelectorAll('[data-component-id]');
|
|
89
|
+
const target = buttons[focusedIndex];
|
|
90
|
+
if (target) {
|
|
91
|
+
target.focus();
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}, [focusedIndex, sidebarCollapsed]);
|
|
95
|
+
const handleKeyNavigation = (event) => {
|
|
96
|
+
if (sidebarCollapsed)
|
|
97
|
+
return;
|
|
98
|
+
const currentIndex = flatComponents.indexOf(selectedComponent);
|
|
99
|
+
if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
|
|
100
|
+
event.preventDefault();
|
|
101
|
+
const nextIndex = currentIndex === flatComponents.length - 1 ? 0 : currentIndex + 1;
|
|
102
|
+
setFocusedIndex(nextIndex);
|
|
103
|
+
setSelectedComponent(flatComponents[nextIndex]);
|
|
104
|
+
}
|
|
105
|
+
else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
|
|
106
|
+
event.preventDefault();
|
|
107
|
+
const prevIndex = currentIndex <= 0 ? flatComponents.length - 1 : currentIndex - 1;
|
|
108
|
+
setFocusedIndex(prevIndex);
|
|
109
|
+
setSelectedComponent(flatComponents[prevIndex]);
|
|
110
|
+
}
|
|
111
|
+
};
|
|
80
112
|
const copyToClipboard = async (code) => {
|
|
81
113
|
try {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
114
|
+
if (navigator?.clipboard?.writeText) {
|
|
115
|
+
await navigator.clipboard.writeText(code);
|
|
116
|
+
setCopiedCode(code);
|
|
117
|
+
showToast.success("Code copied to clipboard!");
|
|
118
|
+
setTimeout(() => setCopiedCode(null), 2000);
|
|
119
|
+
}
|
|
120
|
+
else {
|
|
121
|
+
throw new Error("Clipboard API unavailable");
|
|
122
|
+
}
|
|
86
123
|
}
|
|
87
124
|
catch (err) {
|
|
88
125
|
showToast.error("Failed to copy code");
|
|
@@ -99,6 +136,8 @@ const ComponentShowcase = ({ className }) => {
|
|
|
99
136
|
return acc;
|
|
100
137
|
}, {});
|
|
101
138
|
const currentDoc = componentDocs[selectedComponent];
|
|
139
|
+
const currentExample = currentDoc?.example ?? '';
|
|
140
|
+
const currentProps = (currentDoc?.props ?? []);
|
|
102
141
|
const getViewportClass = () => {
|
|
103
142
|
switch (viewMode) {
|
|
104
143
|
case "tablet":
|
|
@@ -109,11 +148,17 @@ const ComponentShowcase = ({ className }) => {
|
|
|
109
148
|
return "w-full";
|
|
110
149
|
}
|
|
111
150
|
};
|
|
112
|
-
return (jsxs("div", { className: cn("flex h-screen bg-gray-50", className), children: [jsx(Toast, {}), jsxs("div", { className: cn("bg-white border-r border-gray-200 transition-all duration-300 flex flex-col", sidebarCollapsed ? "w-16" : "w-80"), children: [jsxs("div", { className: "p-4 border-b border-gray-200", children: [!sidebarCollapsed && (jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(Palette, { className: "h-4 w-4 text-white" }) }), jsx("span", { className: "font-bold text-lg text-gray-900", children: "Beyond UI" })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(true), children: jsx(ChevronRight, { className: "h-4 w-4" }) })] })), sidebarCollapsed && (jsx("div", { className: "flex justify-center", children: jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(false), children: jsx(Palette, { className: "h-4 w-4" }) }) })), !sidebarCollapsed && (jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { placeholder: "Search components...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-10" })] }))] }), jsx("nav", { className: "flex-1 p-4 overflow-y-auto", children: Object.entries(filteredCategories).map(([categoryName, categoryData]) => (jsxs("div", { className: "mb-4", children: [jsxs("button", { onClick: () => !sidebarCollapsed && toggleCategory(categoryName), className: cn("flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors", "hover:bg-gray-100 text-gray-700", sidebarCollapsed ? "justify-center" : "justify-between"), children: [jsxs("div", { className: "flex items-center space-x-2", children: [categoryData.icon, !sidebarCollapsed && jsx("span", { children: categoryName })] }), !sidebarCollapsed && (jsx(ChevronDown, { className: cn("h-4 w-4 transition-transform", expandedCategories.includes(categoryName) && "rotate-180") }))] }), !sidebarCollapsed && expandedCategories.includes(categoryName) && (jsx("div", { className: "mt-2 ml-6 space-y-1", children: categoryData.components.map((component) =>
|
|
113
|
-
|
|
114
|
-
|
|
151
|
+
return (jsxs("div", { className: cn("flex h-screen bg-gray-50", className), children: [jsx(Toast, {}), jsxs("div", { ref: sidebarRef, className: cn("bg-white border-r border-gray-200 transition-all duration-300 flex flex-col", sidebarCollapsed ? "w-16" : "w-80"), tabIndex: sidebarCollapsed ? -1 : 0, onKeyDown: handleKeyNavigation, "aria-label": "Component navigation", children: [jsxs("div", { className: "p-4 border-b border-gray-200", children: [!sidebarCollapsed && (jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(Palette, { className: "h-4 w-4 text-white" }) }), jsx("span", { className: "font-bold text-lg text-gray-900", children: "Beyond UI" })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(true), children: jsx(ChevronRight, { className: "h-4 w-4" }) })] })), sidebarCollapsed && (jsx("div", { className: "flex justify-center", children: jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(false), children: jsx(Palette, { className: "h-4 w-4" }) }) })), !sidebarCollapsed && (jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { placeholder: "Search components...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-10" })] }))] }), jsx("nav", { className: "flex-1 p-4 overflow-y-auto", children: Object.entries(filteredCategories).map(([categoryName, categoryData]) => (jsxs("div", { className: "mb-4", children: [jsxs("button", { onClick: () => !sidebarCollapsed && toggleCategory(categoryName), className: cn("flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors", "hover:bg-gray-100 text-gray-700", sidebarCollapsed ? "justify-center" : "justify-between"), children: [jsxs("div", { className: "flex items-center space-x-2", children: [categoryData.icon, !sidebarCollapsed && jsx("span", { children: categoryName })] }), !sidebarCollapsed && (jsx(ChevronDown, { className: cn("h-4 w-4 transition-transform", expandedCategories.includes(categoryName) && "rotate-180") }))] }), !sidebarCollapsed && expandedCategories.includes(categoryName) && (jsx("div", { className: "mt-2 ml-6 space-y-1", children: categoryData.components.map((component) => {
|
|
152
|
+
const isActive = selectedComponent === component.id;
|
|
153
|
+
return (jsx("button", { "data-component-id": component.id, onClick: () => {
|
|
154
|
+
setSelectedComponent(component.id);
|
|
155
|
+
setFocusedIndex(flatComponents.indexOf(component.id));
|
|
156
|
+
}, className: cn("flex items-center w-full p-2 text-sm rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", isActive
|
|
157
|
+
? "bg-primary-50 text-primary-700 border-r-2 border-primary-600"
|
|
158
|
+
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900"), "aria-current": isActive ? "page" : undefined, children: component.name }, component.id));
|
|
159
|
+
}) }))] }, categoryName))) })] }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [jsx("header", { className: "bg-white border-b border-gray-200 p-4", children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center space-x-4", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900", children: currentDoc?.name || "Component Showcase" }), currentDoc && jsx(Badge, { variant: "outline", children: currentDoc.name })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === "desktop" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("desktop"), children: jsx(Monitor, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "tablet" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("tablet"), children: jsx(Tablet, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "mobile" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("mobile"), children: jsx(Smartphone, { className: "h-4 w-4" }) })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setDarkMode(!darkMode), children: darkMode ? (jsx(Sun, { className: "h-4 w-4" })) : (jsx(Moon, { className: "h-4 w-4" })) })] })] }) }), jsx("main", { className: "flex-1 overflow-auto p-6", children: currentDoc ? (jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [jsx("div", { children: jsx("p", { className: "text-lg text-gray-600", children: currentDoc.description }) }), jsxs("div", { children: [jsxs("div", { className: "flex gap-3 mb-4", role: "tablist", "aria-label": "Component details tabs", children: [jsxs(Button, { variant: activeTab === "preview" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("preview"), role: "tab", "aria-selected": activeTab === "preview", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Preview"] }), jsxs(Button, { variant: activeTab === "code" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("code"), role: "tab", "aria-selected": activeTab === "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code"] }), jsxs(Button, { variant: activeTab === "props" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("props"), role: "tab", "aria-selected": activeTab === "props", children: [jsx(Settings, { className: "h-4 w-4 mr-2" }), "Props"] })] }), jsxs("div", { children: [jsx("div", { className: "mt-6", children: jsx("div", { className: "bg-white rounded-lg shadow p-6", children: jsx("div", { className: cn("mx-auto transition-all duration-300", getViewportClass()), children: jsx("div", { className: cn(darkMode && "dark"), children: showcaseRegistry[selectedComponent]
|
|
115
160
|
? React.createElement(showcaseRegistry[selectedComponent])
|
|
116
|
-
: null }) }) }) }), jsx("div", { className: "mt-6", children: jsxs("div", { className: "bg-white rounded-lg shadow p-6", children: [jsxs("div", { className: "flex flex-row items-center justify-between", children: [jsx("h2", { className: "text-lg font-semibold mb-0", children: "Usage Example" }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(
|
|
161
|
+
: null }) }) }) }), activeTab === "code" && (jsx("div", { className: "mt-6", role: "tabpanel", "aria-label": "Code example", children: jsxs("div", { className: "bg-white rounded-lg shadow p-6", children: [jsxs("div", { className: "flex flex-row items-center justify-between", children: [jsx("h2", { className: "text-lg font-semibold mb-0", children: "Usage Example" }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(currentExample), children: [copiedCode === currentExample ? (jsx(Check, { className: "h-4 w-4 mr-2" })) : (jsx(Copy, { className: "h-4 w-4 mr-2" })), "Copy"] })] }), jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto", children: jsx("code", { children: currentExample }) })] }) })), activeTab === "props" && (jsx("div", { className: "mt-6", role: "tabpanel", "aria-label": "Component props", children: jsxs("div", { className: "bg-white rounded-lg shadow p-6", children: [jsx("h2", { className: "text-lg font-semibold mb-4", children: "Component Props" }), jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: "w-full border-collapse", children: [jsx("thead", { children: jsxs("tr", { className: "border-b border-gray-200", children: [jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Prop" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Type" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Default" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Description" })] }) }), jsx("tbody", { children: currentProps.length > 0 ? (currentProps.map((prop, index) => (jsxs("tr", { className: "border-b border-gray-100", children: [jsxs("td", { className: "p-3", children: [jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.name }), prop.required && (jsx(Badge, { variant: "danger", className: "ml-2 text-xs", children: "Required" }))] }), jsx("td", { className: "p-3 text-gray-600", children: prop.type }), jsx("td", { className: "p-3 text-gray-600", children: prop.default ? (jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.default })) : null }), jsx("td", { className: "p-3 text-gray-600", children: prop.description })] }, prop.name ?? index)))) : (jsx("tr", { children: jsx("td", { colSpan: 4, className: "p-4 text-center text-gray-500", children: "No props documented for this component yet." }) })) })] }) })] }) }))] })] })] })) : (jsx("div", { className: "flex items-center justify-center h-full", children: jsxs("div", { className: "text-center", children: [jsx(Book, { className: "h-16 w-16 text-gray-400 mx-auto mb-4" }), jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Select a Component" }), jsx("p", { className: "text-gray-600", children: "Choose a component from the sidebar to view its documentation and examples." })] }) })) })] })] }));
|
|
117
162
|
};
|
|
118
163
|
|
|
119
164
|
export { ComponentShowcase };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentShowcase.js","sources":["../../../src/components/ComponentShowcase/ComponentShowcase.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { useState } from \"react\";\r\nimport {\r\n Search,\r\n Copy,\r\n Check,\r\n Monitor,\r\n Tablet,\r\n Smartphone,\r\n Sun,\r\n Moon,\r\n ChevronRight,\r\n ChevronDown,\r\n Code,\r\n Eye,\r\n Book,\r\n Palette,\r\n Layout,\r\n MousePointer,\r\n AlertCircle,\r\n BarChart3,\r\n Settings,\r\n Shield\r\n} from \"lucide-react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Button } from \"../Button\";\r\nimport { Input } from \"../Input\";\r\nimport { Badge } from \"../Badge\";\r\nimport { Toast, showToast } from \"../Toast\";\r\n\r\nimport { showcaseRegistry } from \"./showcaseRegistry\";\r\nimport { componentDocs } from \"./componentDocs\";\r\n\r\n// Component categories and their items\r\nconst componentCategories = {\r\n Forms: {\r\n icon: <MousePointer className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Button\", id: \"button\" },\r\n { name: \"Input\", id: \"input\" },\r\n { name: \"Textarea\", id: \"textarea\" },\r\n { name: \"Checkbox\", id: \"checkbox\" },\r\n { name: \"Switch\", id: \"switch\" }\r\n ]\r\n },\r\n \"Data Display\": {\r\n icon: <BarChart3 className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Card\", id: \"card\" },\r\n { name: \"Badge\", id: \"badge\" },\r\n { name: \"Avatar\", id: \"avatar\" },\r\n { name: \"StatsCard\", id: \"statscard\" },\r\n { name: \"Tabs\", id: \"tabs\" },\r\n { name: \"DataTable\", id: \"datatable\" }\r\n ]\r\n },\r\n Feedback: {\r\n icon: <AlertCircle className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Alert\", id: \"alert\" },\r\n { name: \"Toast\", id: \"toast\" },\r\n { name: \"Modal\", id: \"modal\" },\r\n { name: \"Spinner\", id: \"spinner\" },\r\n { name: \"Skeleton\", id: \"skeleton\" }\r\n ]\r\n },\r\n Authentication: {\r\n icon: <Shield className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Auth System\", id: \"auth\" },\r\n { name: \"Login Page\", id: \"login\" },\r\n { name: \"Signup Page\", id: \"signup\" },\r\n { name: \"Password Reset\", id: \"password-reset\" },\r\n { name: \"!isAuthenticated Shield\", id: \"shield\" },\r\n ]\r\n },\r\n Layout: {\r\n icon: <Layout className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"DashboardLayout\", id: \"dashboard-layout\" },\r\n { name: \"Page Layout\", id: \"page-layout\" },\r\n { name: \"DashboardGrid\", id: \"dashboard-grid\" },\r\n { name: \"Sidebar\", id: \"sidebar\" },\r\n { name: \"Navbar\", id: \"navbar\" }\r\n ]\r\n }\r\n};\r\n\r\n// Props\r\ninterface ComponentShowcaseProps {\r\n className?: string;\r\n}\r\n\r\nexport const ComponentShowcase: React.FC<ComponentShowcaseProps> = ({ className }) => {\r\n const [selectedComponent, setSelectedComponent] = useState(\"button\");\r\n const [searchQuery, setSearchQuery] = useState(\"\");\r\n const [sidebarCollapsed, setSidebarCollapsed] = useState(false);\r\n const [expandedCategories, setExpandedCategories] = useState<string[]>([\"Forms\"]);\r\n const [viewMode, setViewMode] = useState<\"desktop\" | \"tablet\" | \"mobile\">(\"desktop\");\r\n const [darkMode, setDarkMode] = useState(false);\r\n const [copiedCode, setCopiedCode] = useState<string | null>(null);\r\n\r\n const toggleCategory = (category: string) => {\r\n setExpandedCategories((prev) =>\r\n prev.includes(category)\r\n ? prev.filter((c) => c !== category)\r\n : [...prev, category]\r\n );\r\n };\r\n\r\n const copyToClipboard = async (code: string) => {\r\n try {\r\n await navigator.clipboard.writeText(code);\r\n setCopiedCode(code);\r\n showToast.success(\"Code copied to clipboard!\");\r\n setTimeout(() => setCopiedCode(null), 2000);\r\n } catch (err) {\r\n showToast.error(\"Failed to copy code\");\r\n }\r\n };\r\n\r\n const filteredCategories = Object.entries(componentCategories).reduce(\r\n (acc, [categoryName, categoryData]) => {\r\n const filteredComponents = categoryData.components.filter((component) =>\r\n component.name.toLowerCase().includes(searchQuery.toLowerCase())\r\n );\r\n\r\n if (filteredComponents.length > 0) {\r\n (acc as any)[categoryName] = {\r\n ...categoryData,\r\n components: filteredComponents\r\n };\r\n }\r\n\r\n return acc;\r\n },\r\n {} as Partial<typeof componentCategories>\r\n );\r\n\r\n const currentDoc = componentDocs[selectedComponent as keyof typeof componentDocs];\r\n\r\n const getViewportClass = () => {\r\n switch (viewMode) {\r\n case \"tablet\":\r\n return \"max-w-2xl\";\r\n case \"mobile\":\r\n return \"max-w-sm\";\r\n default:\r\n return \"w-full\";\r\n }\r\n };\r\n\r\n return (\r\n <div className={cn(\"flex h-screen bg-gray-50\", className)}>\r\n <Toast />\r\n\r\n {/* Sidebar */}\r\n <div\r\n className={cn(\r\n \"bg-white border-r border-gray-200 transition-all duration-300 flex flex-col\",\r\n sidebarCollapsed ? \"w-16\" : \"w-80\"\r\n )}\r\n >\r\n {/* Sidebar Header */}\r\n <div className=\"p-4 border-b border-gray-200\">\r\n {!sidebarCollapsed && (\r\n <div className=\"flex items-center justify-between mb-4\">\r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center\">\r\n <Palette className=\"h-4 w-4 text-white\" />\r\n </div>\r\n <span className=\"font-bold text-lg text-gray-900\">Beyond UI</span>\r\n </div>\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSidebarCollapsed(true)}\r\n >\r\n <ChevronRight className=\"h-4 w-4\" />\r\n </Button>\r\n </div>\r\n )}\r\n\r\n {sidebarCollapsed && (\r\n <div className=\"flex justify-center\">\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSidebarCollapsed(false)}\r\n >\r\n <Palette className=\"h-4 w-4\" />\r\n </Button>\r\n </div>\r\n )}\r\n\r\n {!sidebarCollapsed && (\r\n <div className=\"relative\">\r\n <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400\" />\r\n <Input\r\n placeholder=\"Search components...\"\r\n value={searchQuery}\r\n onChange={(e) => setSearchQuery(e.target.value)}\r\n className=\"pl-10\"\r\n />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/* Navigation */}\r\n <nav className=\"flex-1 p-4 overflow-y-auto\">\r\n {Object.entries(filteredCategories).map(([categoryName, categoryData]) => (\r\n <div key={categoryName} className=\"mb-4\">\r\n <button\r\n onClick={() => !sidebarCollapsed && toggleCategory(categoryName)}\r\n className={cn(\r\n \"flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors\",\r\n \"hover:bg-gray-100 text-gray-700\",\r\n sidebarCollapsed ? \"justify-center\" : \"justify-between\"\r\n )}\r\n >\r\n <div className=\"flex items-center space-x-2\">\r\n {categoryData.icon}\r\n {!sidebarCollapsed && <span>{categoryName}</span>}\r\n </div>\r\n {!sidebarCollapsed && (\r\n <ChevronDown\r\n className={cn(\r\n \"h-4 w-4 transition-transform\",\r\n expandedCategories.includes(categoryName) && \"rotate-180\"\r\n )}\r\n />\r\n )}\r\n </button>\r\n\r\n {!sidebarCollapsed && expandedCategories.includes(categoryName) && (\r\n <div className=\"mt-2 ml-6 space-y-1\">\r\n {categoryData.components.map((component) => (\r\n <button\r\n key={component.id}\r\n onClick={() => setSelectedComponent(component.id)}\r\n className={cn(\r\n \"flex items-center w-full p-2 text-sm rounded-lg transition-colors\",\r\n selectedComponent === component.id\r\n ? \"bg-primary-50 text-primary-700 border-r-2 border-primary-600\"\r\n : \"text-gray-600 hover:bg-gray-50 hover:text-gray-900\"\r\n )}\r\n >\r\n {component.name}\r\n </button>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n ))}\r\n </nav>\r\n </div>\r\n\r\n {/* Main Content */}\r\n <div className=\"flex-1 flex flex-col overflow-hidden\">\r\n {/* Header */}\r\n <header className=\"bg-white border-b border-gray-200 p-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-4\">\r\n <h1 className=\"text-2xl font-bold text-gray-900\">\r\n {currentDoc?.name || \"Component Showcase\"}\r\n </h1>\r\n {currentDoc && <Badge variant=\"outline\">{currentDoc.name}</Badge>}\r\n </div>\r\n\r\n <div className=\"flex items-center space-x-2\">\r\n {/* Viewport Controls */}\r\n <div className=\"flex items-center bg-gray-100 rounded-lg p-1\">\r\n <Button\r\n variant={viewMode === \"desktop\" ? \"primary\" : \"ghost\"}\r\n size=\"sm\"\r\n onClick={() => setViewMode(\"desktop\")}\r\n >\r\n <Monitor className=\"h-4 w-4\" />\r\n </Button>\r\n <Button\r\n variant={viewMode === \"tablet\" ? \"primary\" : \"ghost\"}\r\n size=\"sm\"\r\n onClick={() => setViewMode(\"tablet\")}\r\n >\r\n <Tablet className=\"h-4 w-4\" />\r\n </Button>\r\n <Button\r\n variant={viewMode === \"mobile\" ? \"primary\" : \"ghost\"}\r\n size=\"sm\"\r\n onClick={() => setViewMode(\"mobile\")}\r\n >\r\n <Smartphone className=\"h-4 w-4\" />\r\n </Button>\r\n </div>\r\n\r\n {/* Dark Mode Toggle */}\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setDarkMode(!darkMode)}\r\n >\r\n {darkMode ? (\r\n <Sun className=\"h-4 w-4\" />\r\n ) : (\r\n <Moon className=\"h-4 w-4\" />\r\n )}\r\n </Button>\r\n </div>\r\n </div>\r\n </header>\r\n\r\n {/* Content */}\r\n <main className=\"flex-1 overflow-auto p-6\">\r\n {currentDoc ? (\r\n <div className=\"max-w-6xl mx-auto space-y-8\">\r\n {/* Description */}\r\n <div>\r\n <p className=\"text-lg text-gray-600\">{currentDoc.description}</p>\r\n </div>\r\n\r\n {/* Tabs */}\r\n <div>\r\n <div className=\"flex gap-3 mb-4\">\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSelectedComponent(\"button\")}\r\n >\r\n <Eye className=\"h-4 w-4 mr-2\" />\r\n Preview\r\n </Button>\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSelectedComponent(\"button\")}\r\n >\r\n <Code className=\"h-4 w-4 mr-2\" />\r\n Code\r\n </Button>\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSelectedComponent(\"button\")}\r\n >\r\n <Settings className=\"h-4 w-4 mr-2\" />\r\n Props\r\n </Button>\r\n </div>\r\n <div>\r\n <div className=\"mt-6\">\r\n <div className=\"bg-white rounded-lg shadow p-6\">\r\n {/* Preview */}\r\n <div\r\n className={cn(\r\n \"mx-auto transition-all duration-300\",\r\n getViewportClass()\r\n )}\r\n >\r\n <div className={cn(darkMode && \"dark\")}>\r\n {showcaseRegistry[selectedComponent]\r\n ? React.createElement(\r\n showcaseRegistry[selectedComponent]\r\n )\r\n : null}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/* Code Example */}\r\n <div className=\"mt-6\">\r\n <div className=\"bg-white rounded-lg shadow p-6\">\r\n <div className=\"flex flex-row items-center justify-between\">\r\n <h2 className=\"text-lg font-semibold mb-0\">\r\n Usage Example\r\n </h2>\r\n <Button\r\n variant=\"outline\"\r\n size=\"sm\"\r\n onClick={() => copyToClipboard(currentDoc.example)}\r\n >\r\n {copiedCode === currentDoc.example ? (\r\n <Check className=\"h-4 w-4 mr-2\" />\r\n ) : (\r\n <Copy className=\"h-4 w-4 mr-2\" />\r\n )}\r\n Copy\r\n </Button>\r\n </div>\r\n <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto\">\r\n <code>{currentDoc.example}</code>\r\n </pre>\r\n </div>\r\n </div>\r\n\r\n {/* Props Table */}\r\n <div className=\"mt-6\">\r\n <div className=\"bg-white rounded-lg shadow p-6\">\r\n <h2 className=\"text-lg font-semibold mb-4\">\r\n Component Props\r\n </h2>\r\n <div className=\"overflow-x-auto\">\r\n <table className=\"w-full border-collapse\">\r\n <thead>\r\n <tr className=\"border-b border-gray-200\">\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Prop\r\n </th>\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Type\r\n </th>\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Default\r\n </th>\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Description\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n {currentDoc.props?.map((prop: any, index: number) => (\r\n <tr key={index} className=\"border-b border-gray-100\">\r\n <td className=\"p-3\">\r\n <code className=\"bg-gray-100 px-2 py-1 rounded text-sm\">\r\n {prop.name}\r\n </code>\r\n {\"required\" in prop && prop.required && (\r\n <Badge variant=\"danger\" className=\"ml-2 text-xs\">\r\n Required\r\n </Badge>\r\n )}\r\n </td>\r\n <td className=\"p-3 text-gray-600\">{prop.type}</td>\r\n <td className=\"p-3 text-gray-600\">\r\n {\"default\" in prop && prop.default ? (\r\n <code className=\"bg-gray-100 px-2 py-1 rounded text-sm\">\r\n {prop.default}\r\n </code>\r\n ) : null}\r\n </td>\r\n <td className=\"p-3 text-gray-600\">{prop.description}</td>\r\n </tr>\r\n ))}\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n ) : (\r\n <div className=\"flex items-center justify-center h-full\">\r\n <div className=\"text-center\">\r\n <Book className=\"h-16 w-16 text-gray-400 mx-auto mb-4\" />\r\n <h2 className=\"text-xl font-semibold text-gray-900 mb-2\">\r\n Select a Component\r\n </h2>\r\n <p className=\"text-gray-600\">\r\n Choose a component from the sidebar to view its documentation and examples.\r\n </p>\r\n </div>\r\n </div>\r\n )}\r\n </main>\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ComponentShowcase.js","sources":["../../../src/components/ComponentShowcase/ComponentShowcase.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { useState, useMemo, useRef, useEffect } from \"react\";\r\nimport {\r\n Search,\r\n Copy,\r\n Check,\r\n Monitor,\r\n Tablet,\r\n Smartphone,\r\n Sun,\r\n Moon,\r\n ChevronRight,\r\n ChevronDown,\r\n Code,\r\n Eye,\r\n Book,\r\n Palette,\r\n Layout,\r\n MousePointer,\r\n AlertCircle,\r\n BarChart3,\r\n Settings,\r\n Shield\r\n} from \"lucide-react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Button } from \"../Button\";\r\nimport { Input } from \"../Input\";\r\nimport { Badge } from \"../Badge\";\r\nimport { Toast, showToast } from \"../Toast\";\r\n\r\nimport { showcaseRegistry } from \"./showcaseRegistry\";\r\nimport { componentDocs } from \"./componentDocs\";\r\n\r\n// Component categories and their items\r\nconst componentCategories = {\r\n Forms: {\r\n icon: <MousePointer className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Button\", id: \"button\" },\r\n { name: \"Input\", id: \"input\" },\r\n { name: \"Textarea\", id: \"textarea\" },\r\n { name: \"Checkbox\", id: \"checkbox\" },\r\n { name: \"Switch\", id: \"switch\" }\r\n ]\r\n },\r\n \"Data Display\": {\r\n icon: <BarChart3 className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Card\", id: \"card\" },\r\n { name: \"Badge\", id: \"badge\" },\r\n { name: \"Avatar\", id: \"avatar\" },\r\n { name: \"StatsCard\", id: \"statscard\" },\r\n { name: \"Tabs\", id: \"tabs\" },\r\n { name: \"DataTable\", id: \"datatable\" }\r\n ]\r\n },\r\n Feedback: {\r\n icon: <AlertCircle className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Alert\", id: \"alert\" },\r\n { name: \"Toast\", id: \"toast\" },\r\n { name: \"Modal\", id: \"modal\" },\r\n { name: \"Spinner\", id: \"spinner\" },\r\n { name: \"Skeleton\", id: \"skeleton\" }\r\n ]\r\n },\r\n Authentication: {\r\n icon: <Shield className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"Auth System\", id: \"auth\" },\r\n { name: \"Login Page\", id: \"login\" },\r\n { name: \"Signup Page\", id: \"signup\" },\r\n { name: \"Password Reset\", id: \"password-reset\" },\r\n { name: \"!isAuthenticated Shield\", id: \"shield\" },\r\n ]\r\n },\r\n Layout: {\r\n icon: <Layout className=\"h-4 w-4\" />,\r\n components: [\r\n { name: \"DashboardLayout\", id: \"dashboard-layout\" },\r\n { name: \"Page Layout\", id: \"page-layout\" },\r\n { name: \"DashboardGrid\", id: \"dashboard-grid\" },\r\n { name: \"Sidebar\", id: \"sidebar\" },\r\n { name: \"Navbar\", id: \"navbar\" }\r\n ]\r\n }\r\n};\r\n\r\n// Prop documentation interface\r\ninterface PropDoc {\r\n name: string;\r\n type: string;\r\n default?: string;\r\n description?: string;\r\n required?: boolean;\r\n}\r\n\r\n// Props\r\ninterface ComponentShowcaseProps {\r\n className?: string;\r\n}\r\n\r\nexport const ComponentShowcase: React.FC<ComponentShowcaseProps> = ({ className }) => {\r\n const [selectedComponent, setSelectedComponent] = useState(\"button\");\r\n const [activeTab, setActiveTab] = useState<\"preview\" | \"code\" | \"props\">(\"preview\");\r\n const [searchQuery, setSearchQuery] = useState(\"\");\r\n const [sidebarCollapsed, setSidebarCollapsed] = useState(false);\r\n const [expandedCategories, setExpandedCategories] = useState<string[]>([\"Forms\"]);\r\n const [viewMode, setViewMode] = useState<\"desktop\" | \"tablet\" | \"mobile\">(\"desktop\");\r\n const [darkMode, setDarkMode] = useState(false);\r\n const [copiedCode, setCopiedCode] = useState<string | null>(null);\r\n const sidebarRef = useRef<HTMLDivElement | null>(null);\r\n const [focusedIndex, setFocusedIndex] = useState<number>(-1);\r\n\r\n const toggleCategory = (category: string) => {\r\n setExpandedCategories((prev) =>\r\n prev.includes(category)\r\n ? prev.filter((c) => c !== category)\r\n : [...prev, category]\r\n );\r\n };\r\n\r\n const flatComponents = useMemo(() => {\r\n return Object.values(componentCategories).flatMap((category) =>\r\n category.components.map((component) => component.id)\r\n );\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (focusedIndex >= 0 && sidebarRef.current && !sidebarCollapsed) {\r\n const buttons = sidebarRef.current.querySelectorAll<HTMLButtonElement>(\r\n '[data-component-id]'\r\n );\r\n const target = buttons[focusedIndex];\r\n if (target) {\r\n target.focus();\r\n }\r\n }\r\n }, [focusedIndex, sidebarCollapsed]);\r\n\r\n const handleKeyNavigation = (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n if (sidebarCollapsed) return;\r\n\r\n const currentIndex = flatComponents.indexOf(selectedComponent);\r\n\r\n if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\r\n event.preventDefault();\r\n const nextIndex = currentIndex === flatComponents.length - 1 ? 0 : currentIndex + 1;\r\n setFocusedIndex(nextIndex);\r\n setSelectedComponent(flatComponents[nextIndex]);\r\n } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\r\n event.preventDefault();\r\n const prevIndex = currentIndex <= 0 ? flatComponents.length - 1 : currentIndex - 1;\r\n setFocusedIndex(prevIndex);\r\n setSelectedComponent(flatComponents[prevIndex]);\r\n }\r\n };\r\n\r\n const copyToClipboard = async (code: string) => {\r\n try {\r\n if (navigator?.clipboard?.writeText) {\r\n await navigator.clipboard.writeText(code);\r\n setCopiedCode(code);\r\n showToast.success(\"Code copied to clipboard!\");\r\n setTimeout(() => setCopiedCode(null), 2000);\r\n } else {\r\n throw new Error(\"Clipboard API unavailable\");\r\n }\r\n } catch (err) {\r\n showToast.error(\"Failed to copy code\");\r\n }\r\n };\r\n\r\n const filteredCategories = Object.entries(componentCategories).reduce(\r\n (acc, [categoryName, categoryData]) => {\r\n const filteredComponents = categoryData.components.filter((component) =>\r\n component.name.toLowerCase().includes(searchQuery.toLowerCase())\r\n );\r\n\r\n if (filteredComponents.length > 0) {\r\n (acc as any)[categoryName] = {\r\n ...categoryData,\r\n components: filteredComponents\r\n };\r\n }\r\n\r\n return acc;\r\n },\r\n {} as Partial<typeof componentCategories>\r\n );\r\n\r\n const currentDoc = componentDocs[selectedComponent as keyof typeof componentDocs];\r\n const currentExample = currentDoc?.example ?? '';\r\n const currentProps = (currentDoc?.props ?? []) as PropDoc[];\r\n\r\n const getViewportClass = () => {\r\n switch (viewMode) {\r\n case \"tablet\":\r\n return \"max-w-2xl\";\r\n case \"mobile\":\r\n return \"max-w-sm\";\r\n default:\r\n return \"w-full\";\r\n }\r\n };\r\n\r\n return (\r\n <div className={cn(\"flex h-screen bg-gray-50\", className)}>\r\n <Toast />\r\n\r\n {/* Sidebar */}\r\n <div\r\n ref={sidebarRef}\r\n className={cn(\r\n \"bg-white border-r border-gray-200 transition-all duration-300 flex flex-col\",\r\n sidebarCollapsed ? \"w-16\" : \"w-80\"\r\n )}\r\n tabIndex={sidebarCollapsed ? -1 : 0}\r\n onKeyDown={handleKeyNavigation}\r\n aria-label=\"Component navigation\"\r\n >\r\n {/* Sidebar Header */}\r\n <div className=\"p-4 border-b border-gray-200\">\r\n {!sidebarCollapsed && (\r\n <div className=\"flex items-center justify-between mb-4\">\r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center\">\r\n <Palette className=\"h-4 w-4 text-white\" />\r\n </div>\r\n <span className=\"font-bold text-lg text-gray-900\">Beyond UI</span>\r\n </div>\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSidebarCollapsed(true)}\r\n >\r\n <ChevronRight className=\"h-4 w-4\" />\r\n </Button>\r\n </div>\r\n )}\r\n\r\n {sidebarCollapsed && (\r\n <div className=\"flex justify-center\">\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setSidebarCollapsed(false)}\r\n >\r\n <Palette className=\"h-4 w-4\" />\r\n </Button>\r\n </div>\r\n )}\r\n\r\n {!sidebarCollapsed && (\r\n <div className=\"relative\">\r\n <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400\" />\r\n <Input\r\n placeholder=\"Search components...\"\r\n value={searchQuery}\r\n onChange={(e) => setSearchQuery(e.target.value)}\r\n className=\"pl-10\"\r\n />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/* Navigation */}\r\n <nav className=\"flex-1 p-4 overflow-y-auto\">\r\n {Object.entries(filteredCategories).map(([categoryName, categoryData]) => (\r\n <div key={categoryName} className=\"mb-4\">\r\n <button\r\n onClick={() => !sidebarCollapsed && toggleCategory(categoryName)}\r\n className={cn(\r\n \"flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors\",\r\n \"hover:bg-gray-100 text-gray-700\",\r\n sidebarCollapsed ? \"justify-center\" : \"justify-between\"\r\n )}\r\n >\r\n <div className=\"flex items-center space-x-2\">\r\n {categoryData.icon}\r\n {!sidebarCollapsed && <span>{categoryName}</span>}\r\n </div>\r\n {!sidebarCollapsed && (\r\n <ChevronDown\r\n className={cn(\r\n \"h-4 w-4 transition-transform\",\r\n expandedCategories.includes(categoryName) && \"rotate-180\"\r\n )}\r\n />\r\n )}\r\n </button>\r\n\r\n {!sidebarCollapsed && expandedCategories.includes(categoryName) && (\r\n <div className=\"mt-2 ml-6 space-y-1\">\r\n {categoryData.components.map((component) => {\r\n const isActive = selectedComponent === component.id;\r\n return (\r\n <button\r\n key={component.id}\r\n data-component-id={component.id}\r\n onClick={() => {\r\n setSelectedComponent(component.id);\r\n setFocusedIndex(flatComponents.indexOf(component.id));\r\n }}\r\n className={cn(\r\n \"flex items-center w-full p-2 text-sm rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\",\r\n isActive\r\n ? \"bg-primary-50 text-primary-700 border-r-2 border-primary-600\"\r\n : \"text-gray-600 hover:bg-gray-50 hover:text-gray-900\"\r\n )}\r\n aria-current={isActive ? \"page\" : undefined}\r\n >\r\n {component.name}\r\n </button>\r\n );\r\n })}\r\n </div>\r\n )}\r\n </div>\r\n ))}\r\n </nav>\r\n </div>\r\n\r\n {/* Main Content */}\r\n <div className=\"flex-1 flex flex-col overflow-hidden\">\r\n {/* Header */}\r\n <header className=\"bg-white border-b border-gray-200 p-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-4\">\r\n <h1 className=\"text-2xl font-bold text-gray-900\">\r\n {currentDoc?.name || \"Component Showcase\"}\r\n </h1>\r\n {currentDoc && <Badge variant=\"outline\">{currentDoc.name}</Badge>}\r\n </div>\r\n\r\n <div className=\"flex items-center space-x-2\">\r\n {/* Viewport Controls */}\r\n <div className=\"flex items-center bg-gray-100 rounded-lg p-1\">\r\n <Button\r\n variant={viewMode === \"desktop\" ? \"primary\" : \"ghost\"}\r\n size=\"sm\"\r\n onClick={() => setViewMode(\"desktop\")}\r\n >\r\n <Monitor className=\"h-4 w-4\" />\r\n </Button>\r\n <Button\r\n variant={viewMode === \"tablet\" ? \"primary\" : \"ghost\"}\r\n size=\"sm\"\r\n onClick={() => setViewMode(\"tablet\")}\r\n >\r\n <Tablet className=\"h-4 w-4\" />\r\n </Button>\r\n <Button\r\n variant={viewMode === \"mobile\" ? \"primary\" : \"ghost\"}\r\n size=\"sm\"\r\n onClick={() => setViewMode(\"mobile\")}\r\n >\r\n <Smartphone className=\"h-4 w-4\" />\r\n </Button>\r\n </div>\r\n\r\n {/* Dark Mode Toggle */}\r\n <Button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onClick={() => setDarkMode(!darkMode)}\r\n >\r\n {darkMode ? (\r\n <Sun className=\"h-4 w-4\" />\r\n ) : (\r\n <Moon className=\"h-4 w-4\" />\r\n )}\r\n </Button>\r\n </div>\r\n </div>\r\n </header>\r\n\r\n {/* Content */}\r\n <main className=\"flex-1 overflow-auto p-6\">\r\n {currentDoc ? (\r\n <div className=\"max-w-6xl mx-auto space-y-8\">\r\n {/* Description */}\r\n <div>\r\n <p className=\"text-lg text-gray-600\">{currentDoc.description}</p>\r\n </div>\r\n\r\n {/* Tabs */}\r\n <div>\r\n <div className=\"flex gap-3 mb-4\" role=\"tablist\" aria-label=\"Component details tabs\">\r\n <Button\r\n variant={activeTab === \"preview\" ? \"primary\" : \"ghost\"}\r\n size=\"sm\"\r\n onClick={() => setActiveTab(\"preview\")}\r\n role=\"tab\"\r\n aria-selected={activeTab === \"preview\"}\r\n >\r\n <Eye className=\"h-4 w-4 mr-2\" />\r\n Preview\r\n </Button>\r\n <Button\r\n variant={activeTab === \"code\" ? \"primary\" : \"ghost\"}\r\n size=\"sm\"\r\n onClick={() => setActiveTab(\"code\")}\r\n role=\"tab\"\r\n aria-selected={activeTab === \"code\"}\r\n >\r\n <Code className=\"h-4 w-4 mr-2\" />\r\n Code\r\n </Button>\r\n <Button\r\n variant={activeTab === \"props\" ? \"primary\" : \"ghost\"}\r\n size=\"sm\"\r\n onClick={() => setActiveTab(\"props\")}\r\n role=\"tab\"\r\n aria-selected={activeTab === \"props\"}\r\n >\r\n <Settings className=\"h-4 w-4 mr-2\" />\r\n Props\r\n </Button>\r\n </div>\r\n <div>\r\n <div className=\"mt-6\">\r\n <div className=\"bg-white rounded-lg shadow p-6\">\r\n {/* Preview */}\r\n <div\r\n className={cn(\r\n \"mx-auto transition-all duration-300\",\r\n getViewportClass()\r\n )}\r\n >\r\n <div className={cn(darkMode && \"dark\")}>\r\n {showcaseRegistry[selectedComponent]\r\n ? React.createElement(\r\n showcaseRegistry[selectedComponent]\r\n )\r\n : null}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {activeTab === \"code\" && (\r\n <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Code example\">\r\n <div className=\"bg-white rounded-lg shadow p-6\">\r\n <div className=\"flex flex-row items-center justify-between\">\r\n <h2 className=\"text-lg font-semibold mb-0\">\r\n Usage Example\r\n </h2>\r\n <Button\r\n variant=\"outline\"\r\n size=\"sm\"\r\n onClick={() => copyToClipboard(currentExample)}\r\n >\r\n {copiedCode === currentExample ? (\r\n <Check className=\"h-4 w-4 mr-2\" />\r\n ) : (\r\n <Copy className=\"h-4 w-4 mr-2\" />\r\n )}\r\n Copy\r\n </Button>\r\n </div>\r\n <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto\">\r\n <code>{currentExample}</code>\r\n </pre>\r\n </div>\r\n </div>\r\n )}\r\n\r\n {activeTab === \"props\" && (\r\n <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Component props\">\r\n <div className=\"bg-white rounded-lg shadow p-6\">\r\n <h2 className=\"text-lg font-semibold mb-4\">\r\n Component Props\r\n </h2>\r\n <div className=\"overflow-x-auto\">\r\n <table className=\"w-full border-collapse\">\r\n <thead>\r\n <tr className=\"border-b border-gray-200\">\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Prop\r\n </th>\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Type\r\n </th>\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Default\r\n </th>\r\n <th className=\"text-left p-3 font-medium text-gray-900\">\r\n Description\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n {currentProps.length > 0 ? (\r\n currentProps.map((prop: PropDoc, index) => (\r\n <tr key={prop.name ?? index} className=\"border-b border-gray-100\">\r\n <td className=\"p-3\">\r\n <code className=\"bg-gray-100 px-2 py-1 rounded text-sm\">\r\n {prop.name}\r\n </code>\r\n {prop.required && (\r\n <Badge variant=\"danger\" className=\"ml-2 text-xs\">\r\n Required\r\n </Badge>\r\n )}\r\n </td>\r\n <td className=\"p-3 text-gray-600\">{prop.type}</td>\r\n <td className=\"p-3 text-gray-600\">\r\n {prop.default ? (\r\n <code className=\"bg-gray-100 px-2 py-1 rounded text-sm\">\r\n {prop.default}\r\n </code>\r\n ) : null}\r\n </td>\r\n <td className=\"p-3 text-gray-600\">{prop.description}</td>\r\n </tr>\r\n ))\r\n ) : (\r\n <tr>\r\n <td colSpan={4} className=\"p-4 text-center text-gray-500\">\r\n No props documented for this component yet.\r\n </td>\r\n </tr>\r\n )}\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n ) : (\r\n <div className=\"flex items-center justify-center h-full\">\r\n <div className=\"text-center\">\r\n <Book className=\"h-16 w-16 text-gray-400 mx-auto mb-4\" />\r\n <h2 className=\"text-xl font-semibold text-gray-900 mb-2\">\r\n Select a Component\r\n </h2>\r\n <p className=\"text-gray-600\">\r\n Choose a component from the sidebar to view its documentation and examples.\r\n </p>\r\n </div>\r\n </div>\r\n )}\r\n </main>\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@beyondcorp/beyond-ui",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.83",
|
|
4
4
|
"description": "A comprehensive React UI component library built with TypeScript, TailwindCSS, and CVA",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -75,6 +75,7 @@
|
|
|
75
75
|
"@storybook/addon-controls": "^7.6.6",
|
|
76
76
|
"@storybook/addon-docs": "^7.6.6",
|
|
77
77
|
"@storybook/addon-essentials": "^7.6.6",
|
|
78
|
+
"@storybook/addon-links": "^7.6.24",
|
|
78
79
|
"@storybook/blocks": "^7.6.6",
|
|
79
80
|
"@storybook/react": "^7.6.6",
|
|
80
81
|
"@storybook/react-vite": "^7.6.6",
|
|
@@ -102,6 +103,11 @@
|
|
|
102
103
|
"typescript": "^5.9.2",
|
|
103
104
|
"typescript-eslint": "^8.3.0",
|
|
104
105
|
"vite": "^5.4.2",
|
|
105
|
-
"vite-plugin-dts": "^3.9.1"
|
|
106
|
+
"vite-plugin-dts": "^3.9.1",
|
|
107
|
+
"browserslist": "^4.24.0"
|
|
108
|
+
},
|
|
109
|
+
"engines": {
|
|
110
|
+
"node": ">=18.0.0",
|
|
111
|
+
"npm": ">=9.0.0"
|
|
106
112
|
}
|
|
107
113
|
}
|