@inglorious/ui 1.0.1 → 2.0.0

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)