@djangocfg/layouts 1.2.50 → 1.2.53
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@djangocfg/layouts",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.53",
|
|
4
4
|
"description": "Layout system and components for Unrealon applications",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "DjangoCFG",
|
|
@@ -63,9 +63,9 @@
|
|
|
63
63
|
"check": "tsc --noEmit"
|
|
64
64
|
},
|
|
65
65
|
"peerDependencies": {
|
|
66
|
-
"@djangocfg/api": "^1.2.
|
|
67
|
-
"@djangocfg/og-image": "^1.2.
|
|
68
|
-
"@djangocfg/ui": "^1.2.
|
|
66
|
+
"@djangocfg/api": "^1.2.53",
|
|
67
|
+
"@djangocfg/og-image": "^1.2.53",
|
|
68
|
+
"@djangocfg/ui": "^1.2.53",
|
|
69
69
|
"@hookform/resolvers": "^5.2.0",
|
|
70
70
|
"consola": "^3.4.2",
|
|
71
71
|
"lucide-react": "^0.468.0",
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"vidstack": "0.6.15"
|
|
87
87
|
},
|
|
88
88
|
"devDependencies": {
|
|
89
|
-
"@djangocfg/typescript-config": "^1.2.
|
|
89
|
+
"@djangocfg/typescript-config": "^1.2.53",
|
|
90
90
|
"@types/node": "^24.7.2",
|
|
91
91
|
"@types/react": "19.2.2",
|
|
92
92
|
"@types/react-dom": "19.2.1",
|
|
@@ -16,36 +16,36 @@ export interface PackageInfo {
|
|
|
16
16
|
/**
|
|
17
17
|
* Package versions registry
|
|
18
18
|
* Auto-synced from package.json files
|
|
19
|
-
* Last updated: 2025-11-
|
|
19
|
+
* Last updated: 2025-11-22T06:07:49.048Z
|
|
20
20
|
*/
|
|
21
21
|
const PACKAGE_VERSIONS: PackageInfo[] = [
|
|
22
22
|
{
|
|
23
23
|
"name": "@djangocfg/ui",
|
|
24
|
-
"version": "1.2.
|
|
24
|
+
"version": "1.2.53"
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
27
|
"name": "@djangocfg/api",
|
|
28
|
-
"version": "1.2.
|
|
28
|
+
"version": "1.2.53"
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
31
|
"name": "@djangocfg/layouts",
|
|
32
|
-
"version": "1.2.
|
|
32
|
+
"version": "1.2.53"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"name": "@djangocfg/markdown",
|
|
36
|
-
"version": "1.2.
|
|
36
|
+
"version": "1.2.53"
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
"name": "@djangocfg/og-image",
|
|
40
|
-
"version": "1.2.
|
|
40
|
+
"version": "1.2.53"
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
43
|
"name": "@djangocfg/eslint-config",
|
|
44
|
-
"version": "1.2.
|
|
44
|
+
"version": "1.2.53"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"name": "@djangocfg/typescript-config",
|
|
48
|
-
"version": "1.2.
|
|
48
|
+
"version": "1.2.53"
|
|
49
49
|
}
|
|
50
50
|
];
|
|
51
51
|
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* UILayoutSidebar
|
|
3
|
+
* Modern layout with left sidebar navigation (instead of tabs)
|
|
4
|
+
*
|
|
5
|
+
* Features:
|
|
6
|
+
* - Desktop: Fixed left sidebar with category navigation
|
|
7
|
+
* - Mobile: Collapsible sidebar via burger menu
|
|
8
|
+
* - Sticky header
|
|
9
|
+
* - Responsive content area
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
'use client';
|
|
13
|
+
|
|
14
|
+
import React, { useState } from 'react';
|
|
15
|
+
import { Menu, X } from 'lucide-react';
|
|
16
|
+
import { Button } from '@djangocfg/ui';
|
|
17
|
+
import { useIsMobile } from '@djangocfg/ui';
|
|
18
|
+
import { Header } from '../components/layout/Header';
|
|
19
|
+
import { Sidebar } from '../components/layout/Sidebar';
|
|
20
|
+
import { MobileOverlay } from '../components/layout/MobileOverlay';
|
|
21
|
+
import { generateAIContext } from '../config';
|
|
22
|
+
import type { UILayoutProps } from '../types';
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* UILayoutSidebar - Layout with left sidebar navigation
|
|
26
|
+
*
|
|
27
|
+
* Features:
|
|
28
|
+
* - Config-driven sidebar categories
|
|
29
|
+
* - "Copy for AI": One-click export of documentation
|
|
30
|
+
* - Responsive: Mobile burger menu + overlay
|
|
31
|
+
* - Type-safe: Full TypeScript support
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```tsx
|
|
35
|
+
* <UILayoutSidebar
|
|
36
|
+
* title="UI Components"
|
|
37
|
+
* categories={CATEGORIES}
|
|
38
|
+
* currentCategory={category}
|
|
39
|
+
* onCategoryChange={setCategory}
|
|
40
|
+
* >
|
|
41
|
+
* <CategoryRenderer categoryId={category} />
|
|
42
|
+
* </UILayoutSidebar>
|
|
43
|
+
* ```
|
|
44
|
+
*/
|
|
45
|
+
export function UILayoutSidebar({
|
|
46
|
+
children,
|
|
47
|
+
title = "UI Component Library",
|
|
48
|
+
description,
|
|
49
|
+
categories,
|
|
50
|
+
currentCategory,
|
|
51
|
+
onCategoryChange,
|
|
52
|
+
logo,
|
|
53
|
+
projectName = "Django CFG UI",
|
|
54
|
+
}: UILayoutProps) {
|
|
55
|
+
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
|
56
|
+
const isMobile = useIsMobile();
|
|
57
|
+
|
|
58
|
+
const handleCopyForAI = () => {
|
|
59
|
+
return generateAIContext();
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
const toggleSidebar = () => {
|
|
63
|
+
setIsSidebarOpen(!isSidebarOpen);
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
const handleCategoryChange = (categoryId: string) => {
|
|
67
|
+
onCategoryChange?.(categoryId);
|
|
68
|
+
// Auto-close sidebar on mobile after selection
|
|
69
|
+
if (isMobile) {
|
|
70
|
+
setIsSidebarOpen(false);
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
return (
|
|
75
|
+
<div className="flex flex-col min-h-screen bg-background">
|
|
76
|
+
{/* Header with mobile burger */}
|
|
77
|
+
<div className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
78
|
+
<div className="flex h-14 items-center gap-4 px-4">
|
|
79
|
+
{/* Mobile burger menu */}
|
|
80
|
+
{isMobile && (
|
|
81
|
+
<Button
|
|
82
|
+
variant="ghost"
|
|
83
|
+
size="icon"
|
|
84
|
+
onClick={toggleSidebar}
|
|
85
|
+
className="shrink-0"
|
|
86
|
+
aria-label={isSidebarOpen ? "Close menu" : "Open menu"}
|
|
87
|
+
>
|
|
88
|
+
{isSidebarOpen ? (
|
|
89
|
+
<X className="h-5 w-5" />
|
|
90
|
+
) : (
|
|
91
|
+
<Menu className="h-5 w-5" />
|
|
92
|
+
)}
|
|
93
|
+
</Button>
|
|
94
|
+
)}
|
|
95
|
+
|
|
96
|
+
{/* Header title and actions */}
|
|
97
|
+
<div className="flex-1 flex items-center justify-between">
|
|
98
|
+
<div className="flex items-center gap-2">
|
|
99
|
+
{!isMobile && logo}
|
|
100
|
+
<h1 className="text-lg font-semibold">{title}</h1>
|
|
101
|
+
</div>
|
|
102
|
+
<Header
|
|
103
|
+
title=""
|
|
104
|
+
projectName={projectName}
|
|
105
|
+
logo={null}
|
|
106
|
+
onCopyForAI={handleCopyForAI}
|
|
107
|
+
/>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
{/* Main layout: Sidebar + Content */}
|
|
113
|
+
<div className="flex flex-1 overflow-hidden">
|
|
114
|
+
{/* Sidebar */}
|
|
115
|
+
<Sidebar
|
|
116
|
+
categories={categories}
|
|
117
|
+
currentCategory={currentCategory}
|
|
118
|
+
onCategoryChange={handleCategoryChange}
|
|
119
|
+
isOpen={isSidebarOpen}
|
|
120
|
+
projectName={projectName}
|
|
121
|
+
logo={logo}
|
|
122
|
+
/>
|
|
123
|
+
|
|
124
|
+
{/* Mobile overlay (backdrop) */}
|
|
125
|
+
<MobileOverlay
|
|
126
|
+
isOpen={isMobile && isSidebarOpen}
|
|
127
|
+
onClose={() => setIsSidebarOpen(false)}
|
|
128
|
+
/>
|
|
129
|
+
|
|
130
|
+
{/* Main Content */}
|
|
131
|
+
<main className="flex-1 overflow-y-auto">
|
|
132
|
+
<div className="container max-w-7xl mx-auto p-6">
|
|
133
|
+
{description && (
|
|
134
|
+
<p className="text-sm text-muted-foreground mb-6">
|
|
135
|
+
{description}
|
|
136
|
+
</p>
|
|
137
|
+
)}
|
|
138
|
+
{children}
|
|
139
|
+
</div>
|
|
140
|
+
</main>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
);
|
|
144
|
+
}
|