@inglorious/ui 1.0.2 → 2.0.0

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

@@ -1,15 +1,15 @@
 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"
+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 = {
+export const AppHeader = {
   render(entity, api) {
     const themeEntity = api.getEntity("theme")
     const modeEntity = api.getEntity("mode")
@@ -30,116 +30,116 @@ export const appHeader = {
 
     return html`
       <div class="iw-dashboard-header">
-        ${appBar.render({
+        ${AppBar.render({
           position: "static",
           elevated: false,
           children: html`
-            ${flex.render({
+            ${Flex.render({
               justify: "between",
               align: "center",
               gap: "md",
               className: "iw-dashboard-header-row",
               children: [
-                button.render({
+                Button.render({
                   color: "secondary",
                   variant: "ghost",
                   shape: "square",
-                  children: materialIcon.render({ name: "menu", size: "lg" }),
+                  children: MaterialIcon.render({ name: "menu", size: "lg" }),
                   "aria-label": "Toggle navigation",
                   onClick: () => api.notify(`#appDrawer:toggle`),
                 }),
-                flex.render({
+                Flex.render({
                   align: "center",
                   gap: "sm",
                   className: "iw-dashboard-header-nav",
                   children: [
-                    button.render({
+                    Button.render({
                       color: "secondary",
                       variant: "ghost",
                       children: "Dashboard",
                     }),
-                    button.render({
+                    Button.render({
                       color: "secondary",
                       variant: "ghost",
                       children: "Users",
                     }),
-                    button.render({
+                    Button.render({
                       color: "secondary",
                       variant: "ghost",
                       children: "Settings",
                     }),
                   ],
                 }),
-                flex.render({
+                Flex.render({
                   align: "center",
                   gap: "sm",
                   className: "iw-dashboard-header-actions",
                   children: [
-                    button.render({
+                    Button.render({
                       color: "secondary",
                       variant: "ghost",
                       shape: "square",
-                      children: materialIcon.render({
+                      children: MaterialIcon.render({
                         name: "notifications",
                         size: "lg",
                       }),
                       "aria-label": "Notifications",
                     }),
-                    button.render({
+                    Button.render({
                       color: "secondary",
                       variant: "ghost",
                       shape: "square",
-                      children: materialIcon.render({
+                      children: MaterialIcon.render({
                         name: "format_list_bulleted",
                       }),
                       "aria-label": "Tasks",
                     }),
-                    button.render({
+                    Button.render({
                       color: "secondary",
                       variant: "ghost",
                       shape: "square",
-                      children: materialIcon.render({
+                      children: MaterialIcon.render({
                         name: "mail",
                         size: "lg",
                       }),
                       "aria-label": "Messages",
                     }),
-                    divider.render({ orientation: "vertical" }),
+                    Divider.render({ orientation: "vertical" }),
 
-                    button.render({
+                    Button.render({
                       color: "secondary",
                       variant: "ghost",
                       shape: "square",
-                      children: icon.render({
+                      children: Icon.render({
                         children: html`<i class=${themeIcon}></i>`,
                         size: "lg",
                       }),
                       "aria-label": `Theme: ${themeName}`,
                       onClick: () => api.notify("#theme:toggle"),
                     }),
-                    button.render({
+                    Button.render({
                       color: "secondary",
                       variant: "ghost",
                       shape: "square",
-                      children: materialIcon.render({
+                      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" }),
+                    Divider.render({ orientation: "vertical" }),
+                    Avatar.render({ src: "/antony.jpeg" }),
                   ],
                 }),
               ],
             })}
           `,
         })}
-        ${flex.render({
+        ${Flex.render({
           align: "center",
           className: "iw-dashboard-header-row iw-dashboard-breadcrumbs",
-          children: breadcrumbs.render({
+          children: Breadcrumbs.render({
             items: [{ label: "Home", href: "#" }, { label: "Dashboard" }],
           }),
         })}

package/src/examples/dashboard/dashboard-jsx.jsx

@@ -0,0 +1,76 @@
+import { Container } from "../../layout/container/index.js"
+import { Flex } from "../../layout/flex/index.js"
+import { Grid } from "../../layout/grid/index.js"
+import { AppDrawer } from "./app-drawer.js"
+import { AppHeader } from "./app-header.js"
+import { socialCards, statCards } from "./data.js"
+import { PrimitiveSection } from "./primitive-section.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 DashboardJsx = {
+  render(entity, api) {
+    const appDrawer = api.getEntity("appDrawer")
+    const dashboardClassName = [
+      "iw-dashboard",
+      appDrawer.isHidden && "iw-dashboard-drawer-hidden",
+      appDrawer.isCollapsed && "iw-dashboard-drawer-collapsed",
+    ]
+      .filter(Boolean)
+      .join(" ")
+
+    const router = api.getEntity("router")
+    const isDashboardRoot = !router || router.path === "/"
+
+    return (
+      <Flex direction="column" className={dashboardClassName}>
+        <AppDrawer />
+
+        <Flex element="main" direction="column" className="iw-dashboard-main">
+          <AppHeader />
+
+          <Container
+            maxWidth="xl"
+            padding="lg"
+            className="iw-dashboard-container"
+          >
+            {isDashboardRoot && (
+              <Flex direction="column" gap="lg">
+                <Grid minColumnWidth="18rem" gap="lg">
+                  {statCards.map((card) => (
+                    <StatCard key={card.id} {...card} />
+                  ))}
+                </Grid>
+
+                <TrafficCard />
+
+                <Grid columns={3} gap="lg">
+                  {socialCards.map((card) => (
+                    <SocialCard key={card.id} {...card} />
+                  ))}
+                </Grid>
+
+                <TrafficSalesCard />
+              </Flex>
+            )}
+
+            {!isDashboardRoot && <PrimitiveSection />}
+          </Container>
+
+          <Flex
+            element="footer"
+            justify="between"
+            gap="md"
+            padding="md"
+            className="iw-dashboard-footer"
+          >
+            <div>Admin dashboard example © 2026</div>
+            <div>Built with Inglorious UI primitives and charts</div>
+          </Flex>
+        </Flex>
+      </Flex>
+    )
+  },
+}

package/src/examples/dashboard/dashboard-vue.vue

@@ -0,0 +1,68 @@
+<template>
+  <Flex direction="column" :className="dashboardClassName">
+    <AppDrawer />
+
+    <Flex element="main" direction="column" className="iw-dashboard-main">
+      <AppHeader />
+
+      <Container maxWidth="xl" padding="lg" className="iw-dashboard-container">
+        <Flex v-if="isDashboardRoot" direction="column" gap="lg">
+          <Grid minColumnWidth="18rem" gap="lg">
+            <StatCard v-for="card in statCards" :key="card.id" v-bind="card" />
+          </Grid>
+
+          <TrafficCard />
+
+          <Grid :columns="3" gap="lg">
+            <SocialCard
+              v-for="card in socialCards"
+              :key="card.icon"
+              v-bind="card"
+            />
+          </Grid>
+
+          <TrafficSalesCard />
+        </Flex>
+
+        <PrimitiveSection v-else />
+      </Container>
+
+      <Flex
+        element="footer"
+        justify="between"
+        gap="md"
+        padding="md"
+        className="iw-dashboard-footer"
+      >
+        <div>Admin dashboard example © 2026</div>
+        <div>Built with Inglorious UI primitives and charts</div>
+      </Flex>
+    </Flex>
+  </Flex>
+</template>
+
+<script>
+import { Container } from "../../layout/container/index.js"
+import { Flex } from "../../layout/flex/index.js"
+import { Grid } from "../../layout/grid/index.js"
+import { AppDrawer } from "./app-drawer.js"
+import { AppHeader } from "./app-header.js"
+import { socialCards, statCards } from "./data.js"
+import { PrimitiveSection } from "./primitive-section.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"
+
+const appDrawer = api.getEntity("appDrawer")
+const dashboardClassName = [
+  "iw-dashboard",
+  appDrawer.isHidden && "iw-dashboard-drawer-hidden",
+  appDrawer.isCollapsed && "iw-dashboard-drawer-collapsed",
+]
+  .filter(Boolean)
+  .join(" ")
+
+const router = api.getEntity("router")
+const isDashboardRoot = !router || router.path === "/"
+</script>

package/src/examples/dashboard/dashboard.js

@@ -1,20 +1,18 @@
-import { html } from "@inglorious/web"
+import { html, when } 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 { 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"
+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 = {
+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",
@@ -23,50 +21,53 @@ export const dashboard = {
       .filter(Boolean)
       .join(" ")
 
+    const router = api.getEntity("router")
     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({
+    return Flex.render({
       direction: "column",
       className: dashboardClassName,
       children: [
         api.render("appDrawer"),
-        flex.render({
+        Flex.render({
           element: "main",
           direction: "column",
           className: "iw-dashboard-main",
           children: [
-            appHeader.render(entity, api),
-            container.render({
+            AppHeader.render(entity, api),
+            Container.render({
               maxWidth: "xl",
               padding: "lg",
               className: "iw-dashboard-container",
-              children: mainContent,
+              children: when(
+                isDashboardRoot,
+                () =>
+                  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),
+                    ],
+                  }),
+                () => api.render("primitiveSection"),
+              ),
             }),
-            flex.render({
+            Flex.render({
               element: "footer",
               justify: "between",
               gap: "md",

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

@@ -6,25 +6,29 @@ 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"
+import { AppDrawer } from "./app-drawer.js"
+import { AppHeader } from "./app-header.js"
+import { Dashboard } from "./dashboard.js"
+import { DashboardJsx } from "./dashboard-jsx.jsx"
+import { DashboardVue } from "./dashboard-vue.vue"
+import { Mode } from "./mode.js"
+import { PrimitiveSection } from "./primitive-section.js"
+import { Theme } from "./theme.js"
+
+const baseTypes = {
+  Theme,
+  Mode,
+  AppDrawer,
+  AppHeader,
+  PrimitiveSection,
+  area: areaChart,
+  bar: barChart,
+  line: lineChart,
+}
 
 export default {
   title: "Examples/AdminDashboard",
   tags: ["autodocs"],
-  render: createEntityRender({
-    theme,
-    mode,
-    appDrawer,
-    dashboard,
-    primitiveSection,
-    area: areaChart,
-    bar: barChart,
-    line: lineChart,
-  }),
   argTypes: {
     ...notifyActionArgType,
   },
@@ -40,8 +44,34 @@ export default {
 }
 
 export const Default = {
+  render: createEntityRender({
+    ...baseTypes,
+    Dashboard,
+  }),
+  args: {
+    id: "dashboard",
+    type: "Dashboard",
+  },
+}
+
+export const Jsx = {
+  render: createEntityRender({
+    ...baseTypes,
+    Dashboard: DashboardJsx,
+  }),
+  args: {
+    id: "dashboard",
+    type: "Dashboard",
+  },
+}
+
+export const Vue = {
+  render: createEntityRender({
+    ...baseTypes,
+    Dashboard: DashboardVue,
+  }),
   args: {
     id: "dashboard",
-    type: "dashboard",
+    type: "Dashboard",
   },
 }

package/src/examples/dashboard/mode.js

@@ -6,7 +6,7 @@ import {
   nextMode,
 } from "./theme-utils.js"
 
-export const mode = {
+export const Mode = {
   create(entity) {
     entity.mode ??= DEFAULTS.mode
     applyTheme(getTheme(), entity.mode)