@inglorious/ui 0.1.0 → 1.0.0

package/src/examples/dashboard/theme-utils.js

@@ -0,0 +1,95 @@
+const DEFAULT_THEME = "inglorious"
+const DEFAULT_MODE = "auto"
+const THEME_CYCLE = ["inglorious", "material", "bootstrap"]
+const MODE_CYCLE = ["auto", "light", "dark"]
+
+let currentTheme = DEFAULT_THEME
+let currentMode = DEFAULT_MODE
+let systemMedia
+let systemListener
+
+export function applyTheme(theme = currentTheme, mode = currentMode) {
+  if (typeof document === "undefined") return
+
+  currentTheme = theme ?? DEFAULT_THEME
+  currentMode = mode ?? DEFAULT_MODE
+  ensureSystemListener()
+
+  const resolvedMode = resolveMode(currentMode)
+  const themeClass = `iw-theme-${currentTheme}`
+  const modeClass =
+    resolvedMode === "light" ? "iw-theme-light" : "iw-theme-dark"
+
+  document.body.className = document.body.className.replace(
+    /iw-theme-(\w+)/g,
+    "",
+  )
+  document.body.classList.add(themeClass, modeClass)
+  document.body.dataset.iwThemeMode = currentMode
+  document.body.dataset.iwTheme = currentTheme
+  document.documentElement.style.colorScheme = resolvedMode
+
+  const background =
+    getComputedStyle(document.body).getPropertyValue("--iw-color-bg").trim() ||
+    (resolvedMode === "dark" ? "#111827" : "#ffffff")
+  const foreground =
+    getComputedStyle(document.body)
+      .getPropertyValue("--iw-color-text")
+      .trim() || (resolvedMode === "dark" ? "#f9fafb" : "#111827")
+
+  document.body.style.backgroundColor = background
+  document.body.style.color = foreground
+}
+
+export function getTheme() {
+  return currentTheme
+}
+
+export function getMode() {
+  return currentMode
+}
+
+export function nextTheme(theme) {
+  const index = THEME_CYCLE.indexOf(theme)
+  if (index === -1) return THEME_CYCLE[0]
+  return THEME_CYCLE[(index + 1) % THEME_CYCLE.length]
+}
+
+export function nextMode(mode) {
+  const index = MODE_CYCLE.indexOf(mode)
+  if (index === -1) return MODE_CYCLE[0]
+  return MODE_CYCLE[(index + 1) % MODE_CYCLE.length]
+}
+
+function resolveMode(mode) {
+  if (mode !== "auto") return mode
+  return getSystemMode()
+}
+
+function getSystemMode() {
+  if (typeof window === "undefined") return "light"
+  systemMedia ??= window.matchMedia("(prefers-color-scheme: dark)")
+  return systemMedia.matches ? "dark" : "light"
+}
+
+function ensureSystemListener() {
+  if (typeof window === "undefined") return
+  systemMedia ??= window.matchMedia("(prefers-color-scheme: dark)")
+  if (systemListener) return
+
+  systemListener = () => {
+    if (currentMode !== "auto") return
+    applyTheme(currentTheme, currentMode)
+  }
+
+  if (typeof systemMedia.addEventListener === "function") {
+    systemMedia.addEventListener("change", systemListener)
+  } else if (typeof systemMedia.addListener === "function") {
+    systemMedia.addListener(systemListener)
+  }
+}
+
+export const DEFAULTS = {
+  theme: DEFAULT_THEME,
+  mode: DEFAULT_MODE,
+}

package/src/examples/dashboard/theme.js

@@ -0,0 +1,27 @@
+import {
+  applyTheme,
+  DEFAULTS,
+  getMode,
+  getTheme,
+  nextTheme,
+} from "./theme-utils.js"
+
+export const theme = {
+  create(entity) {
+    entity.theme ??= DEFAULTS.theme
+    applyTheme(entity.theme, getMode())
+  },
+
+  set(entity, payload = {}) {
+    const next = payload.theme ?? entity.theme ?? DEFAULTS.theme
+    entity.theme = next
+    applyTheme(next, getMode())
+  },
+
+  toggle(entity) {
+    const activeTheme = entity.theme ?? getTheme()
+    const next = nextTheme(activeTheme)
+    entity.theme = next
+    applyTheme(next, getMode())
+  },
+}

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

@@ -0,0 +1,108 @@
+import { chart } from "@inglorious/charts"
+import { html } from "@inglorious/web"
+
+import { button } from "../../controls/button"
+import { buttonGroup } from "../../controls/button-group"
+import { materialIcon } from "../../data-display/material-icon"
+import { typography } from "../../data-display/typography"
+import { progress } from "../../feedback/progress"
+import { flex } from "../../layout/flex"
+import { grid } from "../../layout/grid"
+import { card } from "../../surfaces/card"
+import { trafficSeries, trafficSummary } from "./data"
+
+export const trafficCard = {
+  render(entity, api) {
+    return card.render({
+      header: flex.render({
+        justify: "between",
+        align: "start",
+        gap: "md",
+        children: [
+          html`<div>
+            ${typography.render({ variant: "h3", children: "Traffic" })}
+            ${typography.render({
+              variant: "caption",
+              children: "January - July 2023",
+              color: "var(--iw-color-text-secondary)",
+            })}
+          </div>`,
+          flex.render({
+            gap: "md",
+            children: [
+              buttonGroup.render({
+                value: "month",
+                variant: "outline",
+                color: "secondary",
+                size: "md",
+                buttons: [
+                  { id: "day", label: "Day" },
+                  { id: "month", label: "Month" },
+                  { id: "year", label: "Year" },
+                ],
+              }),
+              button.render({
+                size: "md",
+                color: "primary",
+                children: materialIcon.render({ name: "download" }),
+                "aria-label": "Download report",
+              }),
+            ],
+          }),
+        ],
+      }),
+      body: html`
+        <div class="iw-dashboard-traffic-chart">
+          ${this.renderTrafficChart(entity, api)}
+        </div>
+      `,
+      footer: grid.render({
+        minColumnWidth: "17rem",
+        gap: "lg",
+        children: [
+          trafficSummary.map((item) =>
+            flex.render({
+              direction: "column",
+              align: "center",
+              gap: "sm",
+              children: [
+                typography.render({
+                  children: item.label,
+                  color: "var(--iw-color-text-secondary)",
+                }),
+                typography.render({ children: item.value, weight: 600 }),
+                progress.render({
+                  value: item.progress,
+                  className: `iw-progress-${item.color}`,
+                }),
+              ],
+            }),
+          ),
+        ],
+      }),
+    })
+  },
+
+  renderTrafficChart(_, api) {
+    return chart.renderAreaChart(
+      { id: "traffic", type: "area", data: trafficSeries },
+      {
+        width: 1400,
+        height: 320,
+        dataKeys: ["visits", "unique"],
+        children: [
+          chart.CartesianGrid({
+            stroke: "rgba(255,255,255,0.08)",
+            strokeDasharray: "4 4",
+          }),
+          chart.XAxis({ dataKey: "month" }),
+          chart.YAxis({ width: "auto" }),
+          chart.Area({ dataKey: "visits", stroke: "#39a2f1", strokeWidth: 3 }),
+          chart.Area({ dataKey: "unique", stroke: "#2eb85c", strokeWidth: 3 }),
+          chart.Tooltip({}),
+        ],
+      },
+      api,
+    )
+  },
+}

package/src/examples/dashboard/traffic-sales-card.js

@@ -0,0 +1,267 @@
+import { html } from "@inglorious/web"
+
+import { button } from "../../controls/button"
+import { avatar } from "../../data-display/avatar"
+import { badge } from "../../data-display/badge"
+import { icon } from "../../data-display/icon"
+import { materialIcon } from "../../data-display/material-icon"
+import { table } from "../../data-display/table"
+import { typography } from "../../data-display/typography"
+import { progress } from "../../feedback/progress"
+import { flex } from "../../layout/flex"
+import { grid } from "../../layout/grid"
+import { card } from "../../surfaces/card"
+import { clientBars, sourceBars, userRows } from "./data"
+
+export const trafficSalesCard = {
+  render(entity, api) {
+    return card.render({
+      title: "Traffic & Sales",
+      body: html`
+        ${grid.render({
+          columns: 2,
+          gap: "lg",
+          className: "iw-dashboard-sales-layout",
+          children: [
+            html`
+              <div>
+                ${grid.render({
+                  columns: 2,
+                  gap: "lg",
+                  className: "iw-dashboard-kpi-grid",
+                  children: [
+                    this.renderKpi(
+                      entity,
+                      {
+                        label: "New Clients",
+                        value: "9.123",
+                        color: "#39a2f1",
+                      },
+                      api,
+                    ),
+                    this.renderKpi(
+                      entity,
+                      {
+                        label: "Recurring Clients",
+                        value: "22.643",
+                        color: "#e55353",
+                      },
+                      api,
+                    ),
+                  ],
+                })}
+                <hr class="iw-dashboard-divider" />
+                ${flex.render({
+                  direction: "column",
+                  gap: "lg",
+                  className: "iw-dashboard-progress-list",
+                  children: clientBars.map(([day, first, second]) =>
+                    grid.render({
+                      columns: "6rem 1fr",
+                      gap: "lg",
+                      align: "center",
+                      className: "iw-dashboard-progress-row",
+                      children: [
+                        html`<span>${day}</span>`,
+                        flex.render({
+                          direction: "column",
+                          gap: "sm",
+                          children: [
+                            progress.render({
+                              value: first,
+                              className: "iw-progress-info",
+                            }),
+                            progress.render({
+                              value: second,
+                              className: "iw-progress-error",
+                            }),
+                          ],
+                        }),
+                      ],
+                    }),
+                  ),
+                })}
+              </div>
+            `,
+            html`
+              <div>
+                ${grid.render({
+                  columns: 2,
+                  gap: "lg",
+                  className: "iw-dashboard-kpi-grid",
+                  children: [
+                    this.renderKpi(
+                      entity,
+                      {
+                        label: "Pageviews",
+                        value: "78.623",
+                        color: "#f5a524",
+                      },
+                      api,
+                    ),
+                    this.renderKpi(
+                      entity,
+                      { label: "Organic", value: "49.123", color: "#2eb85c" },
+                      api,
+                    ),
+                  ],
+                })}
+                <hr class="iw-dashboard-divider" />
+                ${flex.render({
+                  direction: "column",
+                  gap: "lg",
+                  className: "iw-dashboard-progress-list",
+                  children: sourceBars.map(
+                    ([label, value, iconName, tone, metric, suffix]) => html`
+                      <div>
+                        ${flex.render({
+                          align: "center",
+                          justify: "between",
+                          gap: "lg",
+                          children: [
+                            flex.render({
+                              align: "center",
+                              gap: "sm",
+                              children: [
+                                materialIcon.render({
+                                  name: iconName,
+                                  size: "lg",
+                                }),
+                                html`<span>${label}</span>`,
+                              ],
+                            }),
+                            flex.render({
+                              align: "center",
+                              gap: "sm",
+                              className: "iw-dashboard-progress-meta",
+                              children: metric
+                                ? [
+                                    html`<span>${metric}</span>`,
+                                    html`<span>${suffix}</span>`,
+                                  ]
+                                : [html`<span>${value}%</span>`],
+                            }),
+                          ],
+                        })}
+                        ${progress.render({
+                          value,
+                          className: `iw-progress-${tone}`,
+                        })}
+                      </div>
+                    `,
+                  ),
+                })}
+              </div>
+            `,
+          ],
+        })}
+
+        <div style="height: var(--iw-space-5)"></div>
+
+        ${table.render({
+          columns: [
+            { id: "user", title: "User" },
+            { id: "country", title: "Country" },
+            { id: "usage", title: "Usage" },
+            { id: "payment", title: "Payment Method" },
+            { id: "activity", title: "Activity" },
+            { id: "menu", title: "" },
+          ],
+          rows: userRows.map((row) => ({
+            user: html`
+              ${flex.render({
+                align: "center",
+                gap: "lg",
+                children: [
+                  html`<span class="iw-dashboard-avatar">
+                    ${avatar.render({
+                      size: "lg",
+                      color: "auto",
+                      initials: row.initials,
+                    })}
+                    ${badge.render({
+                      shape: "circle",
+                      ringWidth: "1px",
+                      color: row.status,
+                      className: "iw-dashboard-avatar-badge",
+                      children: "",
+                    })}
+                  </span>`,
+                  html`<div>
+                    <div>${row.name}</div>
+                    <div class="iw-dashboard-user-subtitle">
+                      ${row.subtitle}
+                    </div>
+                  </div>`,
+                ],
+              })}
+            `,
+            country: html`<div class="iw-dashboard-country">
+              ${row.country}
+            </div>`,
+            usage: html`
+              ${flex.render({
+                direction: "column",
+                gap: "sm",
+                children: [
+                  flex.render({
+                    justify: "between",
+                    gap: "sm",
+                    children: [
+                      html`<span>${row.usage}%</span>`,
+                      html`<span class="iw-dashboard-user-subtitle"
+                        >${row.range}</span
+                      >`,
+                    ],
+                  }),
+                  progress.render({
+                    value: row.usage,
+                    className: `iw-progress-${row.status}`,
+                  }),
+                ],
+              })}
+            `,
+            payment: html`<div class="iw-dashboard-payment">
+              ${icon.render({
+                size: "lg",
+                children: html`<i
+                  class="fa-brands fa-${row.payment}"
+                  aria-hidden="true"
+                ></i>`,
+              })}
+            </div>`,
+            activity: html`
+              <div>
+                <div class="iw-dashboard-user-subtitle">Last login</div>
+                <div>${row.activity}</div>
+              </div>
+            `,
+            menu: html`
+              <div class="iw-dashboard-menu-cell">
+                ${button.render({
+                  variant: "ghost",
+                  color: "secondary",
+                  children: materialIcon.render({ name: "more_vert" }),
+                  "aria-label": "Row actions",
+                })}
+              </div>
+            `,
+          })),
+        })}
+      `,
+    })
+  },
+
+  renderKpi(_, { label, value, color }) {
+    return html`
+      <div class="iw-dashboard-kpi" style=${`color: ${color};`}>
+        ${typography.render({
+          variant: "caption",
+          children: label,
+          color: "var(--iw-color-text-secondary)",
+        })}
+        ${typography.render({ variant: "h3", children: value })}
+      </div>
+    `
+  },
+}

package/src/feedback/alert/alert.stories.js

@@ -0,0 +1,70 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { alert } from "."
+
+export default {
+  title: "Feedback/Alert",
+  tags: ["autodocs"],
+  render: createRender(alert),
+  argTypes: {
+    title: { control: "text" },
+    description: { control: "text" },
+    severity: {
+      control: "select",
+      options: ["info", "success", "warning", "error"],
+    },
+    variant: { control: "select", options: ["filled", "outlined"] },
+    icon: { control: "text" },
+    onClose: { action: "onClose" },
+  },
+}
+
+export const Info = {
+  args: {
+    title: "Info",
+    description: "This is an informational alert.",
+    severity: "info",
+  },
+}
+
+export const Success = {
+  args: {
+    title: "Success",
+    description: "Your changes have been saved.",
+    severity: "success",
+  },
+}
+
+export const Warning = {
+  args: {
+    title: "Warning",
+    description: "Please double-check your entries.",
+    severity: "warning",
+  },
+}
+
+export const Error = {
+  args: {
+    title: "Error",
+    description: "Something went wrong.",
+    severity: "error",
+  },
+}
+
+export const Outlined = {
+  args: {
+    title: "Outlined Alert",
+    description: "This alert uses the outlined variant.",
+    variant: "outlined",
+    severity: "info",
+  },
+}
+
+export const Actionable = {
+  args: {
+    title: "Saved",
+    description: "Your draft was saved.",
+    severity: "success",
+    action: "Undo",
+    onClose: () => {},
+  },
+}

package/src/feedback/alert/index.js

@@ -0,0 +1,3 @@
+import { render } from "./template.js"
+
+export const alert = { render }

package/src/feedback/alert/style.css

@@ -0,0 +1,98 @@
+.iw-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--iw-space-3);
+  padding: var(--iw-space-3);
+  border-radius: var(--iw-alert-radius, var(--iw-radius-md));
+  background: var(--iw-color-surface);
+  color: var(--iw-color-text);
+  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+  box-shadow: var(--iw-alert-shadow, none);
+}
+
+.iw-alert-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.1em;
+  color: var(--iw-alert-color, currentColor);
+}
+
+.iw-alert-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--iw-space-1);
+  flex: 1 1 auto;
+}
+
+.iw-alert-title {
+  font-weight: var(--iw-font-weight-semibold);
+}
+
+.iw-alert-description {
+  color: color-mix(in srgb, currentColor 88%, transparent);
+}
+
+.iw-alert-trailing {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--iw-space-2);
+}
+
+.iw-alert-action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--iw-space-2);
+}
+
+.iw-alert-close {
+  border: 0 none;
+  background: transparent;
+  cursor: pointer;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--iw-radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  color: inherit;
+  font-size: 1rem;
+}
+
+.iw-alert-close:hover {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.iw-alert-info {
+  --iw-alert-color: var(--iw-color-info, #2f7ef7);
+}
+
+.iw-alert-success {
+  --iw-alert-color: var(--iw-color-success, #2e8b57);
+}
+
+.iw-alert-warning {
+  --iw-alert-color: var(--iw-color-warning, #c79500);
+}
+
+.iw-alert-error {
+  --iw-alert-color: var(--iw-color-error, #d14343);
+}
+
+.iw-alert-outlined {
+  background: transparent;
+  border-color: color-mix(in srgb, var(--iw-alert-color) 55%, transparent);
+  color: var(--iw-alert-color);
+}
+
+.iw-alert-filled {
+  background: color-mix(
+    in srgb,
+    var(--iw-alert-color) 18%,
+    var(--iw-color-surface)
+  );
+  border-color: color-mix(in srgb, var(--iw-alert-color) 45%, transparent);
+  color: color-mix(in srgb, var(--iw-alert-color) 72%, var(--iw-color-text));
+}