react-shadcn-kit 0.0.7 → 0.0.8
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/dist/default-layout.js +42 -36
- package/dist/default-layout.js.map +1 -1
- package/package.json +1 -1
package/dist/default-layout.js
CHANGED
|
@@ -1,72 +1,78 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { SidebarProvider as
|
|
3
|
-
import { AppSidebar as
|
|
4
|
-
import { AppNavbar as
|
|
5
|
-
import * as
|
|
6
|
-
const
|
|
7
|
-
function
|
|
8
|
-
children:
|
|
9
|
-
layoutConfig:
|
|
1
|
+
import { jsx as o, jsxs as d } from "react/jsx-runtime";
|
|
2
|
+
import { SidebarProvider as x, SidebarInset as I } from "./atoms/sidebar.js";
|
|
3
|
+
import { AppSidebar as N } from "./organisms/app-sidebar.js";
|
|
4
|
+
import { AppNavbar as T } from "./organisms/app-navbar.js";
|
|
5
|
+
import * as u from "lucide-react";
|
|
6
|
+
const a = (n) => u[n] ?? u.Circle;
|
|
7
|
+
function A({
|
|
8
|
+
children: n,
|
|
9
|
+
layoutConfig: r
|
|
10
10
|
}) {
|
|
11
|
-
const { navbar: e = {}, sidebar: i = {} } =
|
|
11
|
+
const { navbar: e = {}, sidebar: i = {} } = r.components || {}, h = e.items?.map((s) => ({
|
|
12
12
|
...s,
|
|
13
|
-
icon:
|
|
14
|
-
})), b =
|
|
13
|
+
icon: a(s.icon || "")
|
|
14
|
+
})), b = e.userMenuItems?.map((s) => ({
|
|
15
15
|
...s,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
icon: s.icon ? a(s.icon) : void 0
|
|
17
|
+
})), m = i.groups?.map((s) => ({
|
|
18
|
+
...s,
|
|
19
|
+
items: s.items.map((l) => ({
|
|
20
|
+
...l,
|
|
21
|
+
icon: a(l.icon || "")
|
|
19
22
|
}))
|
|
20
|
-
})),
|
|
23
|
+
})), p = i.userMenuItems?.map((s) => ({
|
|
24
|
+
...s,
|
|
25
|
+
icon: s.icon ? a(s.icon) : void 0
|
|
26
|
+
})), f = {
|
|
21
27
|
"--sidebar-width": i.width || "250px"
|
|
22
|
-
},
|
|
28
|
+
}, t = r.layoutRules || {
|
|
23
29
|
public: { navbar: !0, sidebar: !0 }
|
|
24
|
-
},
|
|
30
|
+
}, c = t.public?.sidebar ?? !0, g = t.public?.navbar ?? !0, v = e.notifications?.enabled && e.notifications.count ? Array.from({ length: e.notifications.count }).map(() => ({
|
|
25
31
|
title: "New Notification",
|
|
26
32
|
description: "You have a new notification.",
|
|
27
33
|
date: "Just now",
|
|
28
34
|
read: !e.notifications?.isNewNotification
|
|
29
|
-
})) : [],
|
|
30
|
-
return /* @__PURE__ */
|
|
31
|
-
|
|
32
|
-
|
|
35
|
+
})) : [], w = i.scrollable ?? !0;
|
|
36
|
+
return /* @__PURE__ */ o("div", { style: { "--header-height": "calc(var(--spacing, 14))" }, children: /* @__PURE__ */ d(x, { defaultOpen: !0, className: "flex flex-col", style: f, children: [
|
|
37
|
+
g && /* @__PURE__ */ o(
|
|
38
|
+
T,
|
|
33
39
|
{
|
|
34
|
-
items:
|
|
40
|
+
items: h,
|
|
35
41
|
searchPlaceholder: e.search?.placeholder,
|
|
36
42
|
showSearch: e.search?.enabled ?? !1,
|
|
37
43
|
showThemeToggle: e.showThemeToggle,
|
|
38
44
|
showUserMenu: e.showUserMenu,
|
|
39
45
|
showNotifications: e.notifications?.enabled,
|
|
40
|
-
notifications:
|
|
41
|
-
user:
|
|
42
|
-
userMenuItems:
|
|
46
|
+
notifications: v,
|
|
47
|
+
user: r.user,
|
|
48
|
+
userMenuItems: b,
|
|
43
49
|
branding: e.branding,
|
|
44
50
|
labels: void 0,
|
|
45
51
|
style: { height: e.height },
|
|
46
|
-
showSidebarTrigger:
|
|
52
|
+
showSidebarTrigger: c && (e.showSidebarTrigger ?? !0)
|
|
47
53
|
}
|
|
48
54
|
),
|
|
49
|
-
/* @__PURE__ */
|
|
50
|
-
|
|
51
|
-
|
|
55
|
+
/* @__PURE__ */ d("div", { className: "flex flex-1", children: [
|
|
56
|
+
c && /* @__PURE__ */ o(
|
|
57
|
+
N,
|
|
52
58
|
{
|
|
53
59
|
side: i.placement === "right" ? "right" : "left",
|
|
54
|
-
scrollable:
|
|
60
|
+
scrollable: w,
|
|
55
61
|
fixed: !0,
|
|
56
|
-
groups:
|
|
62
|
+
groups: m,
|
|
57
63
|
showThemeToggle: i.showThemeToggle,
|
|
58
|
-
user:
|
|
59
|
-
userMenuItems:
|
|
64
|
+
user: r.user,
|
|
65
|
+
userMenuItems: p,
|
|
60
66
|
branding: i.branding,
|
|
61
67
|
labels: void 0,
|
|
62
68
|
hideBranding: !1
|
|
63
69
|
}
|
|
64
70
|
),
|
|
65
|
-
/* @__PURE__ */
|
|
71
|
+
/* @__PURE__ */ o(I, { children: /* @__PURE__ */ o("div", { className: "p-4 mx-auto w-full", style: void 0, children: n }) })
|
|
66
72
|
] })
|
|
67
73
|
] }) });
|
|
68
74
|
}
|
|
69
75
|
export {
|
|
70
|
-
|
|
76
|
+
A as default
|
|
71
77
|
};
|
|
72
78
|
//# sourceMappingURL=default-layout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default-layout.js","sources":["../src/default-layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { SidebarProvider, SidebarInset } from \"@/atoms/sidebar\";\nimport { AppSidebar } from \"@/organisms/app-sidebar\";\nimport { AppNavbar } from \"@/organisms/app-navbar\";\nimport * as LucideIcons from \"lucide-react\";\n\nexport type Placement = \"left\" | \"right\" | \"top\" | \"bottom\";\nexport type NavbarHeight = \"sm\" | \"md\" | \"lg\" | string;\nexport type RouteType = \"public\" | \"auth\" | \"private\";\nexport type HttpMethod = \"GET\" | \"POST\";\n\nexport type LayoutRules = {\n [key in RouteType]?: { navbar?: boolean; sidebar?: boolean };\n};\n\nexport type UserConfig = {\n name?: string;\n image?: string;\n username?: string;\n email?: string;\n roles?: string[];\n};\n\nexport type SearchConfig = {\n enabled?: boolean;\n placeholder?: string;\n action?: string;\n method?: HttpMethod;\n debounceTimeMs?: number;\n suggestionsApi?: string;\n};\n\nexport type NotificationsList = {\n title: string;\n image?: string;\n description: string;\n date: string;\n read: boolean;\n};\n\nexport type NotificationConfig = {\n enabled?: boolean;\n isNewNotification?: boolean;\n count?: number;\n showBadge?: boolean;\n notifications?: NotificationsList[];\n};\n\nexport type MenuItem = {\n label: string;\n href: string;\n icon?: string;\n disabled?: boolean;\n};\n\nexport type BrandingConfig = {\n logoUrl?: string;\n logoAlt?: string;\n title?: string;\n subtitle?: string;\n};\n\nexport type BaseComponentConfig = {\n showThemeToggle?: boolean;\n showUserMenu?: boolean;\n search?: SearchConfig;\n scrollable?: boolean;\n branding?: BrandingConfig;\n showSidebarTrigger?: boolean;\n customContent?: React.ReactNode;\n notifications?: NotificationConfig;\n};\n\nexport type NavbarConfig = BaseComponentConfig & {\n height?: NavbarHeight;\n items?: MenuItem[];\n};\n\nexport type SidebarGroup = {\n label: string;\n items: MenuItem[];\n collapsible?: boolean;\n};\n\nexport type SidebarConfig = BaseComponentConfig & {\n width?: string;\n placement?: Placement;\n groups?: SidebarGroup[];\n};\n\nexport type ComponentConfig = {\n navbar?: NavbarConfig;\n sidebar?: SidebarConfig;\n};\n\nexport type LayoutConfig = {\n layoutRules?: LayoutRules;\n user?: UserConfig;\n search?: SearchConfig;\n components?: ComponentConfig;\n appName?: string;\n theme?: \"light\" | \"dark\" | \"system\";\n};\n\nconst getIcon = (name: string) => {\n // @ts-ignore – dynamic access to lucide icons\n return (LucideIcons as any)[name] ?? (LucideIcons as any)[\"Circle\"];\n};\n\nexport default function DefaultLayout({\n children,\n layoutConfig,\n}: {\n children: React.ReactNode;\n layoutConfig: LayoutConfig;\n}) {\n const { navbar = {}, sidebar = {} } = layoutConfig.components || {};\n\n const navbarItems = navbar.items?.map((item) => ({\n ...item,\n icon: getIcon(item.icon || \"\"),\n }));\n\n const sidebarGroups = sidebar.groups?.map((group) => ({\n ...group,\n items: group.items.map((item) => ({\n ...item,\n icon: getIcon(item.icon || \"\"),\n })),\n }));\n\n const sidebarProviderStyle: React.CSSProperties = {\n \"--sidebar-width\": sidebar.width || \"250px\",\n } as React.CSSProperties;\n\n const layoutRules = layoutConfig.layoutRules || {\n public: { navbar: true, sidebar: true },\n auth: { navbar: true, sidebar: true },\n private: { navbar: true, sidebar: true },\n };\n\n const showSidebar = layoutRules.public?.sidebar ?? true;\n const showNavbar = layoutRules.public?.navbar ?? true;\n\n const notifications =\n navbar.notifications?.enabled && navbar.notifications.count\n ? Array.from({ length: navbar.notifications.count }).map(() => ({\n title: \"New Notification\",\n description: \"You have a new notification.\",\n date: \"Just now\",\n read: !navbar.notifications?.isNewNotification,\n }))\n : [];\n\n const scrollable = sidebar.scrollable ?? true;\n const maxWidth = undefined;\n\n return (\n <div style={{ \"--header-height\": \"calc(var(--spacing, 14))\" } as React.CSSProperties}>\n <SidebarProvider defaultOpen={true} className=\"flex flex-col\" style={sidebarProviderStyle}>\n {showNavbar && (\n <AppNavbar\n items={navbarItems}\n searchPlaceholder={navbar.search?.placeholder}\n showSearch={navbar.search?.enabled ?? false}\n showThemeToggle={navbar.showThemeToggle}\n showUserMenu={navbar.showUserMenu}\n showNotifications={navbar.notifications?.enabled}\n notifications={notifications}\n user={layoutConfig.user}\n userMenuItems={
|
|
1
|
+
{"version":3,"file":"default-layout.js","sources":["../src/default-layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { SidebarProvider, SidebarInset } from \"@/atoms/sidebar\";\nimport { AppSidebar } from \"@/organisms/app-sidebar\";\nimport { AppNavbar } from \"@/organisms/app-navbar\";\nimport * as LucideIcons from \"lucide-react\";\n\nexport type Placement = \"left\" | \"right\" | \"top\" | \"bottom\";\nexport type NavbarHeight = \"sm\" | \"md\" | \"lg\" | string;\nexport type RouteType = \"public\" | \"auth\" | \"private\";\nexport type HttpMethod = \"GET\" | \"POST\";\n\nexport type LayoutRules = {\n [key in RouteType]?: { navbar?: boolean; sidebar?: boolean };\n};\n\nexport type UserConfig = {\n name?: string;\n image?: string;\n username?: string;\n email?: string;\n roles?: string[];\n};\n\nexport type SearchConfig = {\n enabled?: boolean;\n placeholder?: string;\n action?: string;\n method?: HttpMethod;\n debounceTimeMs?: number;\n suggestionsApi?: string;\n};\n\nexport type NotificationsList = {\n title: string;\n image?: string;\n description: string;\n date: string;\n read: boolean;\n};\n\nexport type NotificationConfig = {\n enabled?: boolean;\n isNewNotification?: boolean;\n count?: number;\n showBadge?: boolean;\n notifications?: NotificationsList[];\n};\n\nexport type MenuItem = {\n label: string;\n href: string;\n icon?: string;\n disabled?: boolean;\n};\n\nexport type BrandingConfig = {\n logoUrl?: string;\n logoAlt?: string;\n title?: string;\n subtitle?: string;\n};\n\nexport type BaseComponentConfig = {\n showThemeToggle?: boolean;\n showUserMenu?: boolean;\n search?: SearchConfig;\n scrollable?: boolean;\n branding?: BrandingConfig;\n showSidebarTrigger?: boolean;\n customContent?: React.ReactNode;\n notifications?: NotificationConfig;\n};\n\nexport type NavbarConfig = BaseComponentConfig & {\n height?: NavbarHeight;\n items?: MenuItem[];\n userMenuItems?: { label: string; href?: string; icon?: string; onClick?: () => void }[];\n};\n\nexport type SidebarGroup = {\n label: string;\n items: MenuItem[];\n collapsible?: boolean;\n};\n\nexport type SidebarConfig = BaseComponentConfig & {\n width?: string;\n placement?: Placement;\n groups?: SidebarGroup[];\n userMenuItems?: { label: string; href?: string; icon?: string; onClick?: () => void }[];\n};\n\nexport type ComponentConfig = {\n navbar?: NavbarConfig;\n sidebar?: SidebarConfig;\n};\n\nexport type LayoutConfig = {\n layoutRules?: LayoutRules;\n user?: UserConfig;\n search?: SearchConfig;\n components?: ComponentConfig;\n appName?: string;\n theme?: \"light\" | \"dark\" | \"system\";\n};\n\nconst getIcon = (name: string) => {\n // @ts-ignore – dynamic access to lucide icons\n return (LucideIcons as any)[name] ?? (LucideIcons as any)[\"Circle\"];\n};\n\nexport default function DefaultLayout({\n children,\n layoutConfig,\n}: {\n children: React.ReactNode;\n layoutConfig: LayoutConfig;\n}) {\n const { navbar = {}, sidebar = {} } = layoutConfig.components || {};\n\n const navbarItems = navbar.items?.map((item) => ({\n ...item,\n icon: getIcon(item.icon || \"\"),\n }));\n\n const navbarUserMenuItems = navbar.userMenuItems?.map((item) => ({\n ...item,\n icon: item.icon ? getIcon(item.icon) : undefined,\n }));\n\n const sidebarGroups = sidebar.groups?.map((group) => ({\n ...group,\n items: group.items.map((item) => ({\n ...item,\n icon: getIcon(item.icon || \"\"),\n })),\n }));\n\n const sidebarUserMenuItems = sidebar.userMenuItems?.map((item) => ({\n ...item,\n icon: item.icon ? getIcon(item.icon) : undefined,\n }));\n\n const sidebarProviderStyle: React.CSSProperties = {\n \"--sidebar-width\": sidebar.width || \"250px\",\n } as React.CSSProperties;\n\n const layoutRules = layoutConfig.layoutRules || {\n public: { navbar: true, sidebar: true },\n auth: { navbar: true, sidebar: true },\n private: { navbar: true, sidebar: true },\n };\n\n const showSidebar = layoutRules.public?.sidebar ?? true;\n const showNavbar = layoutRules.public?.navbar ?? true;\n\n const notifications =\n navbar.notifications?.enabled && navbar.notifications.count\n ? Array.from({ length: navbar.notifications.count }).map(() => ({\n title: \"New Notification\",\n description: \"You have a new notification.\",\n date: \"Just now\",\n read: !navbar.notifications?.isNewNotification,\n }))\n : [];\n\n const scrollable = sidebar.scrollable ?? true;\n const maxWidth = undefined;\n\n return (\n <div style={{ \"--header-height\": \"calc(var(--spacing, 14))\" } as React.CSSProperties}>\n <SidebarProvider defaultOpen={true} className=\"flex flex-col\" style={sidebarProviderStyle}>\n {showNavbar && (\n <AppNavbar\n items={navbarItems}\n searchPlaceholder={navbar.search?.placeholder}\n showSearch={navbar.search?.enabled ?? false}\n showThemeToggle={navbar.showThemeToggle}\n showUserMenu={navbar.showUserMenu}\n showNotifications={navbar.notifications?.enabled}\n notifications={notifications}\n user={layoutConfig.user}\n userMenuItems={navbarUserMenuItems}\n branding={navbar.branding}\n labels={undefined}\n style={{ height: navbar.height }}\n showSidebarTrigger={showSidebar && (navbar.showSidebarTrigger ?? true)}\n />\n )}\n <div className=\"flex flex-1\">\n {showSidebar && (\n <AppSidebar\n side={sidebar.placement === \"right\" ? \"right\" : \"left\"}\n scrollable={scrollable}\n fixed={true}\n groups={sidebarGroups}\n showThemeToggle={sidebar.showThemeToggle}\n user={layoutConfig.user}\n userMenuItems={sidebarUserMenuItems}\n branding={sidebar.branding}\n labels={undefined}\n hideBranding={false}\n />\n )}\n <SidebarInset>\n <div className=\"p-4 mx-auto w-full\" style={maxWidth ? { maxWidth } : undefined}>\n {children}\n </div>\n </SidebarInset>\n </div>\n </SidebarProvider>\n </div>\n );\n}\n"],"names":["jsx","jsxs","SidebarProvider","SidebarInset","AppSidebar","AppNavbar","LucideIcons","getIcon","name","DefaultLayout","children","layoutConfig","navbar","sidebar","navbarItems","item","navbarUserMenuItems","sidebarGroups","group","sidebarUserMenuItems","sidebarProviderStyle","layoutRules","showSidebar","showNavbar","notifications","scrollable"],"mappings":"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"}
|