132 lines
4.5 KiB
TypeScript
132 lines
4.5 KiB
TypeScript
import type { SideBarItem } from "~/application/sidebar/SidebarItem";
|
|
|
|
export type UiLayout = "app" | "admin" | "docs";
|
|
|
|
export const UI_SURFACE_IDS = {
|
|
shell: "ui.surface.shell",
|
|
shellInset: "ui.surface.shell.inset",
|
|
appSidebar: "ui.surface.app.sidebar",
|
|
adminSidebar: "ui.surface.admin.sidebar",
|
|
docsSidebar: "ui.surface.docs.sidebar",
|
|
shellHeader: "ui.surface.shell.header",
|
|
shellBreadcrumb: "ui.surface.shell.breadcrumb",
|
|
shellBreadcrumbCurrent: "ui.surface.shell.breadcrumb.current",
|
|
shellMain: "ui.surface.shell.main",
|
|
shellNavActions: "ui.surface.shell.navActions",
|
|
aiAssistantDialog: "ui.surface.shell.aiAssistant.dialog",
|
|
feedbackDialog: "ui.surface.shell.feedback.dialog",
|
|
commandPalettePortal: "ui.surface.commandPalette.portal",
|
|
commandPaletteSearch: "ui.surface.commandPalette.search",
|
|
commandPaletteResults: "ui.surface.commandPalette.results",
|
|
commandPaletteRow: "ui.surface.commandPalette.row",
|
|
} as const;
|
|
|
|
export const UI_ACTION_IDS = {
|
|
sidebarTrigger: "ui.action.shell.sidebarTrigger",
|
|
search: "ui.action.shell.search",
|
|
aiAssistant: "ui.action.shell.aiAssistant",
|
|
aiAssistantExpand: "ui.action.shell.aiAssistant.expand",
|
|
aiAssistantClose: "ui.action.shell.aiAssistant.close",
|
|
notifications: "ui.action.shell.notifications",
|
|
onboarding: "ui.action.shell.onboarding",
|
|
feedback: "ui.action.shell.feedback",
|
|
chatSupport: "ui.action.shell.chatSupport",
|
|
more: "ui.action.shell.more",
|
|
profile: "ui.action.shell.profile",
|
|
subscription: "ui.action.shell.subscription",
|
|
signOut: "ui.action.shell.signOut",
|
|
} as const;
|
|
|
|
export const UI_NAV_IDS = {
|
|
appDashboard: "ui.nav.app.dashboard",
|
|
appNotifications: "ui.nav.app.notifications",
|
|
appCrm: "ui.nav.app.crm",
|
|
appEmailMarketing: "ui.nav.app.emailMarketing",
|
|
appApi: "ui.nav.app.api",
|
|
appWorkflowEngine: "ui.nav.app.workflowEngine",
|
|
appCredits: "ui.nav.app.credits",
|
|
appSettings: "ui.nav.app.settings",
|
|
appSwitchToAdmin: "ui.nav.app.switchToAdmin",
|
|
adminDashboard: "ui.nav.admin.dashboard",
|
|
adminAccounts: "ui.nav.admin.accounts",
|
|
adminAnalytics: "ui.nav.admin.analytics",
|
|
adminEntities: "ui.nav.admin.entities",
|
|
adminWorkflows: "ui.nav.admin.workflows",
|
|
adminApi: "ui.nav.admin.api",
|
|
adminEvents: "ui.nav.admin.events",
|
|
adminAuditTrails: "ui.nav.admin.auditTrails",
|
|
adminNotifications: "ui.nav.admin.notifications",
|
|
adminFeatureFlags: "ui.nav.admin.featureFlags",
|
|
adminNavigation: "ui.nav.admin.navigation",
|
|
adminPortals: "ui.nav.admin.portals",
|
|
adminPrompts: "ui.nav.admin.prompts",
|
|
adminEmailMarketing: "ui.nav.admin.emailMarketing",
|
|
adminMarketing: "ui.nav.admin.marketing",
|
|
adminKnowledgeBase: "ui.nav.admin.knowledgeBase",
|
|
adminHelpDesk: "ui.nav.admin.helpDesk",
|
|
adminOnboarding: "ui.nav.admin.onboarding",
|
|
adminMetrics: "ui.nav.admin.metrics",
|
|
adminSettings: "ui.nav.admin.settings",
|
|
adminSwitchToApp: "ui.nav.admin.switchToApp",
|
|
docsIntroduction: "ui.nav.docs.introduction",
|
|
} as const;
|
|
|
|
export const UI_ID_PATTERNS = {
|
|
appEntity: "ui.nav.app.entity.{entityName}",
|
|
appEntityGroup: "ui.nav.app.entityGroup.{groupSlug}",
|
|
appEntityGroupEntity: "ui.nav.app.entityGroup.{groupSlug}.entity.{entityName}",
|
|
appSection: "ui.nav.app.section.{sectionName}",
|
|
docsRoute: "ui.nav.docs.route.{routeSlug}",
|
|
} as const;
|
|
|
|
export function getSidebarSurfaceId(layout: UiLayout) {
|
|
if (layout === "admin") {
|
|
return UI_SURFACE_IDS.adminSidebar;
|
|
}
|
|
if (layout === "docs") {
|
|
return UI_SURFACE_IDS.docsSidebar;
|
|
}
|
|
return UI_SURFACE_IDS.appSidebar;
|
|
}
|
|
|
|
export function uiIdSegment(value: string) {
|
|
const words = value
|
|
.trim()
|
|
.replace(/&/g, "and")
|
|
.split(/[^a-zA-Z0-9]+/)
|
|
.filter(Boolean);
|
|
|
|
if (words.length === 0) {
|
|
return "untitled";
|
|
}
|
|
|
|
return words
|
|
.map((word, index) => {
|
|
const normalized = word.toLowerCase();
|
|
if (index === 0) {
|
|
return normalized;
|
|
}
|
|
return normalized.charAt(0).toUpperCase() + normalized.slice(1);
|
|
})
|
|
.join("");
|
|
}
|
|
|
|
export function getUiIdAttributes(item: Pick<SideBarItem, "id" | "uiIdPattern" | "uiIdParams">) {
|
|
const attributes: Record<string, string> = {};
|
|
if (item.id) {
|
|
attributes["data-ui-id"] = item.id;
|
|
}
|
|
if (item.uiIdPattern) {
|
|
attributes["data-ui-id-pattern"] = item.uiIdPattern;
|
|
}
|
|
if (item.uiIdParams) {
|
|
Object.entries(item.uiIdParams).forEach(([key, value]) => {
|
|
if (value !== undefined && value !== null) {
|
|
const paramName = key.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
|
|
attributes[`data-ui-id-param-${paramName}`] = String(value);
|
|
}
|
|
});
|
|
}
|
|
return attributes;
|
|
}
|