@inglorious/ui 0.1.0 → 1.0.0

package/src/examples/dashboard/app-drawer.js

@@ -0,0 +1,255 @@
+import { html } from "@inglorious/web"
+
+import { avatar } from "../../data-display/avatar"
+import { badge } from "../../data-display/badge"
+import { list } from "../../data-display/list"
+import { materialIcon } from "../../data-display/material-icon"
+import { flex } from "../../layout/flex"
+import { drawer } from "../../navigation/drawer"
+
+export const appDrawer = {
+  create(entity) {
+    entity.items ??= getDefaultItems()
+  },
+
+  toggle(entity) {
+    entity.isOpen = !entity.isOpen
+    entity.isHidden = !entity.isHidden
+  },
+
+  collapseToggle(entity) {
+    entity.isCollapsed = !entity.isCollapsed
+  },
+
+  itemToggle(entity, payload) {
+    if (!payload?.path?.length) return
+    entity.items = toggleItemByPath(
+      entity.items ?? getDefaultItems(),
+      payload.path,
+    )
+  },
+
+  render(entity, api) {
+    const items = mapItemsForRender(entity.items ?? [], api)
+
+    return drawer.render({
+      ...entity,
+      anchor: "left",
+      onClose: () => api.notify(`#${entity.id}:toggle`),
+      onCollapseToggle: () => api.notify(`#${entity.id}:collapseToggle`),
+      title: flex.render({
+        align: "center",
+        gap: "sm",
+        padding: "md",
+        className: "iw-dashboard-brand",
+        children: [
+          avatar.render({ src: "/transparent.png", shape: "square" }),
+          html`<span class="iw-dashboard-brand-title">Inglorious UI</span>`,
+        ],
+      }),
+      children: html`
+        ${list.render({
+          isInset: true,
+          padding: "sm",
+          items,
+          onItemToggle: (_, path) =>
+            api.notify(`#${entity.id}:itemToggle`, { path }),
+        })}
+      `,
+    })
+  },
+}
+
+function mapItemsForRender(items, api) {
+  const router = api.getEntity("router")
+
+  return items.map((item) => {
+    const mappedItem = { ...item }
+
+    if (item.icon) {
+      mappedItem.icon = materialIcon.render({ name: item.icon, size: "lg" })
+    }
+
+    if (item.badge) {
+      mappedItem.action = badge.render(item.badge)
+    }
+
+    if (item.href) {
+      mappedItem.onClick = () => api.notify("#router:navigate", item.href)
+    }
+
+    if (router.path === item.href) {
+      mappedItem.isSelected = true
+    }
+
+    if (Array.isArray(item.children)) {
+      mappedItem.children = mapItemsForRender(item.children, api)
+    }
+
+    return mappedItem
+  })
+}
+
+function getDefaultItems() {
+  return [
+    {
+      id: "dashboard",
+      primary: "Dashboard",
+      icon: "speed",
+      href: "/",
+      badge: {
+        color: "info",
+        children: "NEW",
+        size: "sm",
+      },
+    },
+    { id: "primitives-title", title: "Primitives" },
+    {
+      id: "layout",
+      primary: "Layout",
+      icon: "grid_view",
+      children: [
+        { id: "container", primary: "Container", href: "/layout/container" },
+        { id: "flex", primary: "Flex", href: "/layout/flex" },
+        { id: "grid", primary: "Grid", href: "/layout/grid" },
+      ],
+    },
+    {
+      id: "controls",
+      primary: "Controls",
+      icon: "buttons_alt",
+      children: [
+        { id: "button", primary: "Button", href: "/controls/button" },
+        {
+          id: "button-group",
+          primary: "Button Group",
+          href: "/controls/button-group",
+        },
+        { id: "checkbox", primary: "Checkbox", href: "/controls/checkbox" },
+        { id: "combobox", primary: "Combobox", href: "/controls/combobox" },
+        { id: "fab", primary: "Fab", href: "/controls/fab" },
+        {
+          id: "icon-button",
+          primary: "Icon Button",
+          href: "/controls/icon-button",
+        },
+        { id: "input", primary: "Input", href: "/controls/input" },
+        {
+          id: "radio-group",
+          primary: "Radio Group",
+          href: "/controls/radio-group",
+        },
+        { id: "rating", primary: "Rating", href: "/controls/rating" },
+        { id: "select", primary: "Select", href: "/controls/select" },
+        { id: "slider", primary: "Slider", href: "/controls/slider" },
+        { id: "switch", primary: "Switch", href: "/controls/switch" },
+      ],
+    },
+    {
+      id: "data-display",
+      primary: "Data Display",
+      icon: "database",
+      children: [
+        { id: "avatar", primary: "Avatar", href: "/data-display/avatar" },
+        { id: "badge", primary: "Badge", href: "/data-display/badge" },
+        { id: "chip", primary: "Chip", href: "/data-display/chip" },
+        {
+          id: "data-grid",
+          primary: "Data Grid",
+          href: "/data-display/data-grid",
+        },
+        { id: "divider", primary: "Divider", href: "/data-display/divider" },
+        { id: "icon", primary: "Icon", href: "/data-display/icon" },
+        { id: "list", primary: "List", href: "/data-display/list" },
+        {
+          id: "material-icon",
+          primary: "Material Icon",
+          href: "/data-display/material-icon",
+        },
+        { id: "table", primary: "Table", href: "/data-display/table" },
+        { id: "tooltip", primary: "Tooltip", href: "/data-display/tooltip" },
+        {
+          id: "typography",
+          primary: "Typography",
+          href: "/data-display/typography",
+        },
+      ],
+    },
+    {
+      id: "feedback",
+      primary: "Feedback",
+      icon: "notifications",
+      children: [
+        { id: "alert", primary: "Alert", href: "/feedback/alert" },
+        { id: "backdrop", primary: "Backdrop", href: "/feedback/backdrop" },
+        { id: "dialog", primary: "Dialog", href: "/feedback/dialog" },
+        { id: "progress", primary: "Progress", href: "/feedback/progress" },
+        { id: "skeleton", primary: "Skeleton", href: "/feedback/skeleton" },
+        { id: "snackbar", primary: "Snackbar", href: "/feedback/snackbar" },
+      ],
+    },
+    {
+      id: "navigation",
+      primary: "Navigation",
+      icon: "explore",
+      children: [
+        {
+          id: "bottom-navigation",
+          primary: "Bottom Navigation",
+          href: "/navigation/bottom-navigation",
+        },
+        {
+          id: "breadcrumbs",
+          primary: "Breadcrumbs",
+          href: "/navigation/breadcrumbs",
+        },
+        { id: "drawer", primary: "Drawer", href: "/navigation/drawer" },
+        { id: "link", primary: "Link", href: "/navigation/link" },
+        { id: "menu", primary: "Menu", href: "/navigation/menu" },
+        {
+          id: "pagination",
+          primary: "Pagination",
+          href: "/navigation/pagination",
+        },
+        {
+          id: "speed-dial",
+          primary: "Speed Dial",
+          href: "/navigation/speed-dial",
+        },
+        { id: "stepper", primary: "Stepper", href: "/navigation/stepper" },
+        { id: "tabs", primary: "Tabs", href: "/navigation/tabs" },
+      ],
+    },
+    {
+      id: "surfaces",
+      primary: "Surfaces",
+      icon: "layers",
+      children: [
+        { id: "accordion", primary: "Accordion", href: "/surfaces/accordion" },
+        { id: "app-bar", primary: "App Bar", href: "/surfaces/app-bar" },
+        { id: "card", primary: "Card", href: "/surfaces/card" },
+        { id: "paper", primary: "Paper", href: "/surfaces/paper" },
+      ],
+    },
+  ]
+}
+
+function toggleItemByPath(items, path) {
+  if (!Array.isArray(items) || path.length === 0) return items
+
+  const [index, ...rest] = path
+  return items.map((item, itemIndex) => {
+    if (itemIndex !== index || !item || typeof item !== "object") return item
+
+    if (rest.length === 0) {
+      const isExpanded = !!item.isExpanded
+      return { ...item, isExpanded: !isExpanded }
+    }
+
+    const children = Array.isArray(item.children)
+      ? toggleItemByPath(item.children, rest)
+      : item.children
+
+    return { ...item, children }
+  })
+}

package/src/examples/dashboard/app-header.js

@@ -0,0 +1,149 @@
+import { html } from "@inglorious/web"
+
+import { button } from "../../controls/button"
+import { avatar } from "../../data-display/avatar"
+import { divider } from "../../data-display/divider"
+import { icon } from "../../data-display/icon"
+import { materialIcon } from "../../data-display/material-icon"
+import { flex } from "../../layout/flex"
+import { breadcrumbs } from "../../navigation/breadcrumbs"
+import { appBar } from "../../surfaces/app-bar"
+
+export const appHeader = {
+  render(entity, api) {
+    const themeEntity = api.getEntity("theme")
+    const modeEntity = api.getEntity("mode")
+    const themeMode = modeEntity?.mode ?? "auto"
+    const themeName = themeEntity?.theme ?? "inglorious"
+    const themeIcon =
+      themeName === "bootstrap"
+        ? "fa-brands fa-bootstrap"
+        : themeName === "material"
+          ? "fa-brands fa-android"
+          : "fa-solid fa-gamepad"
+    const modeIcon =
+      themeMode === "light"
+        ? "light_mode"
+        : themeMode === "dark"
+          ? "dark_mode"
+          : "contrast"
+
+    return html`
+      <div class="iw-dashboard-header">
+        ${appBar.render({
+          position: "static",
+          elevated: false,
+          children: html`
+            ${flex.render({
+              justify: "between",
+              align: "center",
+              gap: "md",
+              className: "iw-dashboard-header-row",
+              children: [
+                button.render({
+                  color: "secondary",
+                  variant: "ghost",
+                  shape: "square",
+                  children: materialIcon.render({ name: "menu", size: "lg" }),
+                  "aria-label": "Toggle navigation",
+                  onClick: () => api.notify(`#appDrawer:toggle`),
+                }),
+                flex.render({
+                  align: "center",
+                  gap: "sm",
+                  className: "iw-dashboard-header-nav",
+                  children: [
+                    button.render({
+                      color: "secondary",
+                      variant: "ghost",
+                      children: "Dashboard",
+                    }),
+                    button.render({
+                      color: "secondary",
+                      variant: "ghost",
+                      children: "Users",
+                    }),
+                    button.render({
+                      color: "secondary",
+                      variant: "ghost",
+                      children: "Settings",
+                    }),
+                  ],
+                }),
+                flex.render({
+                  align: "center",
+                  gap: "sm",
+                  className: "iw-dashboard-header-actions",
+                  children: [
+                    button.render({
+                      color: "secondary",
+                      variant: "ghost",
+                      shape: "square",
+                      children: materialIcon.render({
+                        name: "notifications",
+                        size: "lg",
+                      }),
+                      "aria-label": "Notifications",
+                    }),
+                    button.render({
+                      color: "secondary",
+                      variant: "ghost",
+                      shape: "square",
+                      children: materialIcon.render({
+                        name: "format_list_bulleted",
+                      }),
+                      "aria-label": "Tasks",
+                    }),
+                    button.render({
+                      color: "secondary",
+                      variant: "ghost",
+                      shape: "square",
+                      children: materialIcon.render({
+                        name: "mail",
+                        size: "lg",
+                      }),
+                      "aria-label": "Messages",
+                    }),
+                    divider.render({ orientation: "vertical" }),
+
+                    button.render({
+                      color: "secondary",
+                      variant: "ghost",
+                      shape: "square",
+                      children: icon.render({
+                        children: html`<i class=${themeIcon}></i>`,
+                        size: "lg",
+                      }),
+                      "aria-label": `Theme: ${themeName}`,
+                      onClick: () => api.notify("#theme:toggle"),
+                    }),
+                    button.render({
+                      color: "secondary",
+                      variant: "ghost",
+                      shape: "square",
+                      children: materialIcon.render({
+                        name: modeIcon,
+                        size: "lg",
+                      }),
+                      "aria-label": `Mode: ${themeMode}`,
+                      onClick: () => api.notify("#mode:toggle"),
+                    }),
+                    divider.render({ orientation: "vertical" }),
+                    avatar.render({ src: "/antony.jpeg" }),
+                  ],
+                }),
+              ],
+            })}
+          `,
+        })}
+        ${flex.render({
+          align: "center",
+          className: "iw-dashboard-header-row iw-dashboard-breadcrumbs",
+          children: breadcrumbs.render({
+            items: [{ label: "Home", href: "#" }, { label: "Dashboard" }],
+          }),
+        })}
+      </div>
+    `
+  },
+}

package/src/examples/dashboard/dashboard.js

@@ -0,0 +1,85 @@
+import { html } from "@inglorious/web"
+
+import { container } from "../../layout/container/index.js"
+import { flex } from "../../layout/flex/index.js"
+import { grid } from "../../layout/grid/index.js"
+import { appHeader } from "./app-header.js"
+import { socialCards, statCards } from "./data.js"
+import { socialCard } from "./social-card.js"
+import { statCard } from "./stat-card.js"
+import { trafficCard } from "./traffic-card.js"
+import { trafficSalesCard } from "./traffic-sales-card.js"
+
+export const dashboard = {
+  render(entity, api) {
+    const appDrawer = api.getEntity("appDrawer")
+    const router = api.getEntity("router")
+
+    const dashboardClassName = [
+      "iw-dashboard",
+      appDrawer.isHidden && "iw-dashboard-drawer-hidden",
+      appDrawer.isCollapsed && "iw-dashboard-drawer-collapsed",
+    ]
+      .filter(Boolean)
+      .join(" ")
+
+    const isDashboardRoot = !router || router.path === "/"
+
+    let mainContent
+    if (isDashboardRoot) {
+      mainContent = flex.render({
+        direction: "column",
+        gap: "lg",
+        children: [
+          grid.render({
+            minColumnWidth: "18rem",
+            gap: "lg",
+            children: statCards.map((card) => statCard.render(card, api)),
+          }),
+          trafficCard.render(entity, api),
+          grid.render({
+            columns: 3,
+            gap: "lg",
+            children: socialCards.map((card) => socialCard.render(card, api)),
+          }),
+          trafficSalesCard.render(entity, api),
+        ],
+      })
+    } else {
+      mainContent = api.render("primitiveSection")
+    }
+
+    return flex.render({
+      direction: "column",
+      className: dashboardClassName,
+      children: [
+        api.render("appDrawer"),
+        flex.render({
+          element: "main",
+          direction: "column",
+          className: "iw-dashboard-main",
+          children: [
+            appHeader.render(entity, api),
+            container.render({
+              maxWidth: "xl",
+              padding: "lg",
+              className: "iw-dashboard-container",
+              children: mainContent,
+            }),
+            flex.render({
+              element: "footer",
+              justify: "between",
+              gap: "md",
+              padding: "md",
+              className: "iw-dashboard-footer",
+              children: [
+                html`<div>Admin dashboard example © 2026</div>`,
+                html`<div>Built with Inglorious UI primitives and charts</div>`,
+              ],
+            }),
+          ],
+        }),
+      ],
+    })
+  },
+}

package/src/examples/dashboard/dashboard.stories.js

@@ -0,0 +1,47 @@
+import "./style.css"
+
+import { areaChart, barChart, lineChart } from "@inglorious/charts"
+
+import {
+  createEntityRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { appDrawer } from "./app-drawer.js"
+import { dashboard } from "./dashboard.js"
+import { mode } from "./mode.js"
+import { primitiveSection } from "./primitive-section.js"
+import { theme } from "./theme.js"
+
+export default {
+  title: "Examples/AdminDashboard",
+  tags: ["autodocs"],
+  render: createEntityRender({
+    theme,
+    mode,
+    appDrawer,
+    dashboard,
+    primitiveSection,
+    area: areaChart,
+    bar: barChart,
+    line: lineChart,
+  }),
+  argTypes: {
+    ...notifyActionArgType,
+  },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "A composed admin dashboard example built from existing navigation, surface, data-display, feedback, and chart primitives.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    id: "dashboard",
+    type: "dashboard",
+  },
+}