@inglorious/ui 0.1.0 → 1.0.0

package/src/examples/dashboard/primitive-section.js

@@ -0,0 +1,158 @@
+import { html } from "@inglorious/web"
+
+import { typography } from "../../data-display/typography/index.js"
+import { container } from "../../layout/container/index.js"
+import { flex } from "../../layout/flex/index.js"
+import { grid } from "../../layout/grid/index.js"
+import { card } from "../../surfaces/card/index.js"
+import { getPrimitiveContent } from "./primitive-content.js"
+
+export const primitiveSection = {
+  render(entity, api) {
+    const router = api?.getEntity?.("router")
+    const content = getPrimitiveContent(router?.path, entity)
+    const name = content?.name ?? "Primitive"
+    const category = content?.category ?? ""
+    const summary = content?.summary
+    const description = content?.description
+    const useCases = content?.useCases ?? []
+    const example = content?.example
+    const exampleCode = example?.code
+    const examplePreview =
+      typeof example?.preview === "function"
+        ? example.preview()
+        : example?.preview
+    const showEmpty = !content
+
+    return container.render({
+      maxWidth: "xl",
+      padding: "lg",
+      className: "iw-dashboard-container",
+      children: flex.render({
+        direction: "column",
+        gap: "lg",
+        children: [
+          flex.render({
+            direction: "column",
+            gap: "xs",
+            children: [
+              typography.render({
+                variant: "h4",
+                children: showEmpty ? "Choose a Primitive" : name,
+              }),
+              category
+                ? typography.render({
+                    variant: "body2",
+                    color: "secondary",
+                    children: `Category: ${category}`,
+                  })
+                : "",
+              summary
+                ? typography.render({
+                    variant: "body1",
+                    color: "secondary",
+                    children: summary,
+                  })
+                : "",
+            ],
+          }),
+          card.render({
+            padding: "xl",
+            children: flex.render({
+              align: "center",
+              justify: "center",
+              padding: "xl",
+              className: "iw-primitive-placeholder",
+              children: html`
+                <div style="text-align: center;">
+                  ${typography.render({
+                    variant: "h6",
+                    children: showEmpty
+                      ? "Pick a primitive from the drawer to see details."
+                      : `Documentation for ${name}`,
+                  })}
+                  ${typography.render({
+                    variant: "body1",
+                    children:
+                      description ??
+                      "This section is wired for per-primitive docs and examples.",
+                  })}
+                  ${useCases.length
+                    ? html`
+                        <div style="margin-top: 16px; text-align: left;">
+                          ${typography.render({
+                            variant: "body2",
+                            color: "secondary",
+                            children: "Common use cases",
+                          })}
+                          <ul style="margin: 8px 0 0; padding-left: 20px;">
+                            ${useCases.map(
+                              (useCase) => html`<li>${useCase}</li>`,
+                            )}
+                          </ul>
+                        </div>
+                      `
+                    : ""}
+                </div>
+              `,
+            }),
+          }),
+          showEmpty
+            ? ""
+            : card.render({
+                padding: "xl",
+                className: "iw-primitive-example",
+                children: flex.render({
+                  direction: "column",
+                  gap: "md",
+                  children: [
+                    typography.render({
+                      variant: "h6",
+                      children: "Example",
+                    }),
+                    grid.render({
+                      minColumnWidth: "18rem",
+                      gap: "lg",
+                      children: [
+                        flex.render({
+                          direction: "column",
+                          gap: "sm",
+                          children: [
+                            typography.render({
+                              variant: "body2",
+                              color: "secondary",
+                              children: "Code",
+                            }),
+                            html`<pre
+                              class="iw-primitive-code"
+                            ><code>${exampleCode ??
+                            "// Example coming soon."}</code></pre>`,
+                          ],
+                        }),
+                        flex.render({
+                          direction: "column",
+                          gap: "sm",
+                          children: [
+                            typography.render({
+                              variant: "body2",
+                              color: "secondary",
+                              children: "Result",
+                            }),
+                            html`<div class="iw-primitive-preview">
+                              ${examplePreview ??
+                              html`<div class="iw-primitive-preview-empty">
+                                Preview coming soon.
+                              </div>`}
+                            </div>`,
+                          ],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              }),
+        ],
+      }),
+    })
+  },
+}

package/src/examples/dashboard/router.js

@@ -0,0 +1,13 @@
+import { setRoutes } from "@inglorious/web/router"
+export { router } from "@inglorious/web/router"
+
+setRoutes({
+  "/": "dashboard",
+  "/layout/:name": "primitiveSection",
+  "/controls/:name": "primitiveSection",
+  "/data-display/:name": "primitiveSection",
+  "/feedback/:name": "primitiveSection",
+  "/navigation/:name": "primitiveSection",
+  "/surfaces/:name": "primitiveSection",
+  "*": "dashboard",
+})

package/src/examples/dashboard/social-card.js

@@ -0,0 +1,73 @@
+import { chart } from "@inglorious/charts"
+import { html } from "@inglorious/web"
+
+import { divider } from "../../data-display/divider"
+import { materialIcon } from "../../data-display/material-icon"
+import { typography } from "../../data-display/typography"
+import { grid } from "../../layout/grid"
+import { card } from "../../surfaces/card"
+
+export const socialCard = {
+  render(entity, api) {
+    return card.render({
+      className: "iw-dashboard-social-card",
+      headerPadding: "none",
+      header: html`
+        <div class="iw-dashboard-social-cap ${entity.capClass}">
+          ${materialIcon.render({ name: entity.icon, size: "lg" })}
+          <div class="iw-dashboard-social-chart">
+            ${this.renderAreaSpark(entity, api)}
+          </div>
+        </div>
+      `,
+      body: grid.render({
+        columns: "1fr auto 1fr",
+        gap: "md",
+        className: "iw-dashboard-social-stats",
+        children: [
+          html`<div>
+            ${typography.render({ variant: "h3", children: entity.top })}
+            ${typography.render({
+              variant: "caption",
+              children: entity.topLabel,
+              color: "var(--iw-color-text-secondary)",
+            })}
+          </div>`,
+          divider.render({ orientation: "vertical" }),
+          html`<div>
+            ${typography.render({ variant: "h3", children: entity.bottom })}
+            ${typography.render({
+              variant: "caption",
+              children: entity.bottomLabel,
+              color: "var(--iw-color-text-secondary)",
+            })}
+          </div>`,
+        ],
+      }),
+    })
+  },
+
+  renderAreaSpark(entity, api) {
+    return chart.renderAreaChart(
+      {
+        type: "area",
+        data: entity.data.map((value, index) => ({ name: `${index}`, value })),
+      },
+      {
+        width: 640,
+        height: 200,
+        padding: 0,
+        dataKeys: ["value"],
+        children: [
+          chart.Area({
+            dataKey: "value",
+            stroke: "rgba(255,255,255,0.9)",
+            fill: "rgba(255,255,255,0.35)",
+            strokeWidth: 2,
+          }),
+        ],
+      },
+      api,
+    )
+  },
+}

package/src/examples/dashboard/stat-card.js

@@ -0,0 +1,84 @@
+import { chart } from "@inglorious/charts"
+import { html } from "@inglorious/web"
+
+import { button } from "../../controls/button"
+import { materialIcon } from "../../data-display/material-icon"
+import { typography } from "../../data-display/typography"
+import { card } from "../../surfaces/card"
+
+export const statCard = {
+  render(entity, api) {
+    return card.render({
+      className: `iw-dashboard-stat ${entity.className}`,
+      bodyPadding: "none",
+      body: html`
+        <div class="iw-dashboard-stat-container">
+          <div class="iw-dashboard-stat-top">
+            <div>
+              <div class="iw-dashboard-stat-value">
+                ${typography.render({ variant: "h2", children: entity.value })}
+                <span
+                  >(${typography.render({
+                    variant: "caption",
+                    children: html`<span class="iw-dashboard-stat-change">
+                      ${entity.change}
+                      ${materialIcon.render({
+                        name: entity.direction,
+                        size: "sm",
+                      })}
+                    </span>`,
+                  })})</span
+                >
+              </div>
+              ${typography.render({ children: entity.label })}
+            </div>
+          </div>
+          <div class="iw-dashboard-stat-chart">
+            ${this.renderStatChart(entity, api)}
+          </div>
+          ${button.render({
+            variant: "ghost",
+            shape: "square",
+            className: "iw-dashboard-stat-more",
+            children: materialIcon.render({ name: "more_vert", size: "lg" }),
+            "aria-label": "More options",
+          })}
+        </div>
+      `,
+    })
+  },
+
+  renderStatChart(entity, api) {
+    const data = entity.data.map((value, index) => ({
+      name: `${index}`,
+      value,
+    }))
+
+    const chartConfig = {
+      id: entity.id,
+      type: entity.chartType,
+      data,
+      width: 400,
+      height: 80,
+      padding: { top: 0, right: 16, bottom: -16, left: 16 },
+    }
+
+    const children = []
+    if (entity.hasDots) {
+      children.push(
+        chart.Dots({ dataKey: "value", stroke: "white", fill: "#39a2f1" }),
+      )
+    }
+
+    if (entity.chartType === "area") {
+      children.push(chart.Area({ fill: "rgba(255,255,255,0.3)" }))
+      return chart.renderAreaChart(chartConfig, { children }, api)
+    } else if (entity.chartType === "bar") {
+      children.push(chart.Bar({ fill: "rgba(255,255,255,0.3)" }))
+      return chart.renderBarChart(chartConfig, { children }, api)
+    } else {
+      children.push(chart.Line({ stroke: "white" }))
+      return chart.renderLineChart(chartConfig, { children }, api)
+    }
+  },
+}

package/src/examples/dashboard/style.css

@@ -0,0 +1,339 @@
+.iw-dashboard {
+  min-height: 100vh;
+
+  .iw-dashboard-main {
+    transition: padding-left var(--iw-transition-fast);
+  }
+
+  &.iw-dashboard-drawer-collapsed .iw-dashboard-main {
+    padding-left: var(--iw-space-16);
+  }
+
+  &.iw-dashboard-drawer-collapsed .iw-dashboard-brand-title {
+    display: none;
+  }
+
+  &.iw-dashboard-drawer-hidden .iw-dashboard-main {
+    padding-left: 0;
+  }
+}
+
+@media (min-width: 0rem) {
+  .iw-dashboard .iw-dashboard-main {
+    padding-left: 0;
+  }
+
+  .iw-dashboard .iw-dashboard-header-nav {
+    display: none;
+  }
+}
+
+@media (min-width: 64rem) {
+  .iw-dashboard .iw-dashboard-main {
+    padding-left: 16rem;
+  }
+
+  .iw-dashboard .iw-dashboard-header-nav {
+    display: flex;
+  }
+}
+
+.iw-dashboard-brand {
+  font-weight: var(--iw-font-weight-semibold);
+}
+
+.iw-dashboard-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--iw-color-surface);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(10px);
+  transition:
+    background-color var(--iw-transition-slow),
+    border-color var(--iw-transition-slow);
+
+  .iw-dashboard-header-row {
+    width: 100%;
+    padding-inline: var(--iw-space-4);
+  }
+
+  .iw-dashboard-breadcrumbs {
+    min-height: var(--iw-space-12);
+  }
+}
+
+.iw-dashboard-header-actions {
+  margin-inline-start: auto;
+
+  .iw-divider-vertical {
+    height: var(--iw-space-8);
+  }
+}
+
+.iw-dashboard-container {
+  background: var(--iw-color-bg);
+  transition: background-color var(--iw-transition-slow);
+}
+
+.iw-dashboard-stat {
+  overflow: hidden;
+  color: white;
+
+  .iw-typography,
+  .iw-material-icon,
+  .iw-button,
+  .iw-button .iw-material-icon {
+    color: white;
+  }
+}
+
+.iw-dashboard-stat-primary {
+  background: #5856d6;
+}
+.iw-dashboard-stat-info {
+  background: #39a2f1;
+}
+.iw-dashboard-stat-warning {
+  background: #f5a524;
+}
+.iw-dashboard-stat-danger {
+  background: #e55353;
+}
+
+.iw-dashboard-stat-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--iw-space-3);
+  padding: var(--iw-space-4);
+}
+
+.iw-dashboard-stat-value {
+  display: flex;
+  align-items: baseline;
+  gap: var(--iw-space-2);
+}
+
+.iw-dashboard-stat-change {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--iw-space-1);
+  line-height: 1;
+}
+
+.iw-dashboard-stat-container {
+  position: relative;
+}
+
+.iw-dashboard-stat-chart {
+  height: 5rem;
+}
+
+.iw-dashboard-stat-more {
+  position: absolute;
+  top: var(--iw-space-2);
+  right: var(--iw-space-2);
+}
+
+.iw-dashboard-stat-chart .iw-chart,
+.iw-dashboard-stat-chart svg {
+  width: 100%;
+  height: 100%;
+}
+
+.iw-dashboard-traffic-chart .iw-chart,
+.iw-dashboard-traffic-chart svg {
+  width: 100%;
+  height: 100%;
+}
+
+.iw-dashboard-social-card {
+  .iw-dashboard-social-cap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 7.5rem;
+    color: white;
+
+    &.iw-dashboard-social-cap-facebook {
+      background: #3b5998;
+    }
+
+    &.iw-dashboard-social-cap-twitter {
+      background: #00aced;
+    }
+
+    &.iw-dashboard-social-cap-linkedin {
+      background: #4875b4;
+    }
+  }
+
+  .iw-dashboard-social-chart {
+    position: absolute;
+    inset: 0;
+    opacity: 0.35;
+
+    .iw-chart,
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.iw-dashboard-social-stats {
+  text-align: center;
+}
+
+.iw-dashboard-kpi {
+  border-left: 4px solid currentColor;
+  padding-left: var(--iw-space-3);
+}
+
+.iw-dashboard-divider {
+  margin: var(--iw-space-4) 0;
+  border: 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.iw-primitive-example {
+  border: 1px solid color-mix(in srgb, var(--iw-color-border) 60%, transparent);
+}
+
+.iw-primitive-code {
+  margin: 0;
+  padding: var(--iw-space-3);
+  border-radius: var(--iw-radius-sm);
+  background: color-mix(in srgb, var(--iw-color-surface) 85%, transparent);
+  border: 1px solid color-mix(in srgb, var(--iw-color-border) 55%, transparent);
+  font-family: var(--iw-font-family-mono, "SFMono-Regular", ui-monospace);
+  font-size: 0.85rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.iw-primitive-preview {
+  position: relative;
+  min-height: 10rem;
+  padding: var(--iw-space-3);
+  border-radius: var(--iw-radius-sm);
+  background: color-mix(in srgb, var(--iw-color-surface) 92%, transparent);
+  border: 1px dashed color-mix(in srgb, var(--iw-color-border) 55%, transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.iw-primitive-preview-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--iw-space-3);
+}
+
+.iw-primitive-preview-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--iw-space-3);
+}
+
+.iw-primitive-preview-empty {
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+  font-size: 0.9rem;
+}
+
+.iw-primitive-preview .iw-backdrop,
+.iw-primitive-preview .iw-dialog-backdrop,
+.iw-primitive-preview .iw-snackbar,
+.iw-primitive-preview .iw-drawer {
+  position: absolute;
+}
+
+.iw-primitive-preview .iw-backdrop,
+.iw-primitive-preview .iw-dialog-backdrop {
+  inset: 0;
+}
+
+.iw-primitive-preview .iw-drawer {
+  top: var(--iw-space-3);
+  bottom: var(--iw-space-3);
+  left: var(--iw-space-3);
+  width: min(14rem, 70%);
+}
+
+.iw-primitive-preview .iw-snackbar {
+  left: var(--iw-space-3);
+  bottom: var(--iw-space-3);
+}
+
+.iw-dashboard-progress-meta {
+  color: var(--iw-color-text-secondary);
+}
+
+.iw-dashboard-progress-list .iw-progress-linear-track {
+  height: 0.25rem;
+}
+
+.iw-dashboard-user-subtitle {
+  color: var(--iw-color-text-secondary);
+  font-size: var(--iw-font-size-sm);
+}
+
+.iw-dashboard-avatar {
+  position: relative;
+  display: inline-flex;
+}
+
+.iw-dashboard-avatar-badge {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+
+.iw-dashboard-country {
+  text-align: center;
+}
+
+.iw-dashboard-payment {
+  text-align: center;
+  color: var(--iw-color-text-secondary);
+}
+
+.iw-dashboard-menu-cell {
+  text-align: right;
+}
+
+.iw-dashboard-footer {
+  color: var(--iw-color-text-secondary);
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+@media (max-width: 80rem) {
+  .iw-dashboard-sales-layout {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+@media (max-width: 64rem) {
+  .iw-dashboard-header-row {
+    flex-wrap: wrap;
+    padding-inline: var(--iw-space-3);
+  }
+  .iw-dashboard-content {
+    padding: var(--iw-space-3);
+  }
+}
+
+@media (max-width: 40rem) {
+  .iw-dashboard-kpi-grid {
+    grid-template-columns: 1fr !important;
+  }
+  .iw-dashboard-progress-row {
+    grid-template-columns: 1fr !important;
+  }
+  .iw-dashboard-footer {
+    flex-direction: column;
+  }
+}