@inglorious/ui 0.1.0 → 1.0.0

package/src/navigation/pagination/template.js

@@ -0,0 +1,140 @@
+/**
+ * @typedef {import('../../../types/navigation/pagination').PaginationProps} PaginationProps
+ * @typedef {import('../../../types/navigation/pagination').PaginationItemRenderProps} PaginationItemRenderProps
+ * @typedef {import('../../../types/navigation/pagination').PaginationControlRenderProps} PaginationControlRenderProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html } from "@inglorious/web"
+
+import { button } from "../../controls/button/index.js"
+
+const PRETTY_PAGE = 1
+
+export const pagination = {
+  /**
+   * @param {PaginationProps} props
+   * @returns {TemplateResult}
+   */
+  render(props) {
+    const {
+      page = 1,
+      count = 1,
+      siblingCount = 1,
+      isFirstButtonVisible = false,
+      isLastButtonVisible = false,
+      isDisabled = false,
+      className = "",
+    } = props
+
+    const items = getPageItems(page, count, siblingCount)
+    const extraClasses = Object.fromEntries(
+      className
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((name) => [name, true]),
+    )
+
+    return html`<nav
+      class=${classMap({ "iw-pagination": true, ...extraClasses })}
+      aria-label="Pagination"
+    >
+      ${isFirstButtonVisible
+        ? this.renderControl(props, {
+            label: "«",
+            target: 1,
+            isDisabled: page <= PRETTY_PAGE || isDisabled,
+          })
+        : null}
+      ${this.renderControl(props, {
+        label: "‹",
+        target: Math.max(PRETTY_PAGE, page - PRETTY_PAGE),
+        isDisabled: page <= PRETTY_PAGE || isDisabled,
+      })}
+      ${items.map((item) => this.renderItem(props, { item }))}
+      ${this.renderControl(props, {
+        label: "›",
+        target: Math.min(count, page + PRETTY_PAGE),
+        isDisabled: page >= count || isDisabled,
+      })}
+      ${isLastButtonVisible
+        ? this.renderControl(props, {
+            label: "»",
+            target: count,
+            isDisabled: page >= count || isDisabled,
+          })
+        : null}
+    </nav>`
+  },
+
+  /**
+   * @param {PaginationProps} props
+   * @param {PaginationItemRenderProps} payload
+   * @returns {TemplateResult}
+   */
+  renderItem(props, { item }) {
+    if (item === "…") {
+      return html`<span class="iw-pagination-ellipsis">…</span>`
+    }
+
+    const isCurrent = item === props.page
+    return button.render({
+      variant: isCurrent ? "default" : props.buttonVariant,
+      color: isCurrent ? "primary" : props.buttonColor,
+      size: props.buttonSize,
+      className: [
+        "iw-pagination-item",
+        isCurrent ? "iw-pagination-item-current" : "",
+        props.itemClassName ?? "",
+      ]
+        .filter(Boolean)
+        .join(" "),
+      "aria-current": isCurrent ? "page" : null,
+      isDisabled: props.isDisabled,
+      onClick: () => props.onChange?.(item),
+      children: item,
+    })
+  },
+
+  /**
+   * @param {PaginationProps} props
+   * @param {PaginationControlRenderProps} payload
+   * @returns {TemplateResult}
+   */
+  renderControl(
+    props,
+    { label, target, isDisabled = false, onChange = props.onChange },
+  ) {
+    return button.render({
+      variant: props.buttonVariant,
+      color: props.buttonColor,
+      size: props.buttonSize,
+      className: ["iw-pagination-item", props.itemClassName ?? ""]
+        .filter(Boolean)
+        .join(" "),
+      ariaLabel: `Go to page ${target}`,
+      isDisabled,
+      onClick: () => onChange?.(target),
+      children: label,
+    })
+  },
+}
+
+function getPageItems(page, count, siblingCount) {
+  if (count <= 7) {
+    return Array.from({ length: count }, (_, index) => index + PRETTY_PAGE)
+  }
+
+  const start = Math.max(PRETTY_PAGE + PRETTY_PAGE, page - siblingCount)
+  const end = Math.min(count - PRETTY_PAGE, page + siblingCount)
+  const items = [1]
+
+  if (start > 2) items.push("…")
+  for (let current = start; current <= end; current += PRETTY_PAGE) {
+    items.push(current)
+  }
+  if (end < count - PRETTY_PAGE) items.push("…")
+  items.push(count)
+
+  return items
+}

package/src/navigation/speed-dial/index.js

@@ -0,0 +1 @@
+export { speedDial } from "./template.js"

package/src/navigation/speed-dial/speed-dial.stories.js

@@ -0,0 +1,40 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { speedDial } from "."
+
+export default {
+  title: "Navigation/Speed Dial",
+  tags: ["autodocs"],
+  render: createRender(speedDial),
+  argTypes: {
+    isOpen: {
+      control: "boolean",
+      description: "Whether actions are expanded.",
+    },
+    direction: {
+      control: "select",
+      options: ["up", "down", "left", "right"],
+      description: "Direction in which actions expand.",
+    },
+    onToggle: { action: "onToggle" },
+    onAction: { action: "onAction" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Floating action entry point with overridable action rendering.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    isOpen: true,
+    actions: [
+      { value: "edit", icon: "✎", label: "Edit" },
+      { value: "share", icon: "↗", label: "Share" },
+      { value: "print", icon: "⎙", label: "Print" },
+    ],
+  },
+}

package/src/navigation/speed-dial/style.css

@@ -0,0 +1,38 @@
+.iw-speed-dial {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--iw-space-2);
+}
+
+.iw-speed-dial-actions {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--iw-space-2);
+}
+
+.iw-speed-dial-down .iw-speed-dial-actions {
+  order: 1;
+}
+
+.iw-speed-dial-left .iw-speed-dial-actions,
+.iw-speed-dial-right .iw-speed-dial-actions {
+  flex-direction: row;
+}
+
+.iw-speed-dial-trigger,
+.iw-speed-dial-action {
+  border: 0 none;
+  border-radius: 999px;
+  background: var(--iw-color-primary);
+  color: var(--iw-color-primary-text, var(--iw-color-white));
+  width: 3rem;
+  height: 3rem;
+  box-shadow: var(--iw-shadow-md);
+  cursor: pointer;
+}
+
+.iw-speed-dial-action {
+  width: 2.5rem;
+  height: 2.5rem;
+}

package/src/navigation/speed-dial/template.js

@@ -0,0 +1,68 @@
+/**
+ * @typedef {import('../../../types/navigation/speed-dial').SpeedDialProps} SpeedDialProps
+ * @typedef {import('../../../types/navigation/speed-dial').SpeedDialAction} SpeedDialAction
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html } from "@inglorious/web"
+
+export const speedDial = {
+  /**
+   * @param {SpeedDialProps} props
+   * @returns {TemplateResult}
+   */
+  render(props) {
+    const {
+      isOpen = false,
+      direction = "up",
+      icon = "+",
+      ariaLabel = "Speed dial",
+      actions = [],
+    } = props
+
+    return html`<div
+      class=${classMap({
+        "iw-speed-dial": true,
+        [`iw-speed-dial-${direction}`]: true,
+        "iw-speed-dial-open": isOpen,
+      })}
+    >
+      ${isOpen
+        ? html`<div class="iw-speed-dial-actions">
+            ${actions.map((action, index) =>
+              this.renderAction(action, index, props),
+            )}
+          </div>`
+        : null}
+      <button
+        type="button"
+        class="iw-speed-dial-trigger"
+        aria-label=${ariaLabel}
+        @click=${() => props.onToggle?.(!isOpen)}
+      >
+        ${icon}
+      </button>
+    </div>`
+  },
+
+  /**
+   * @param {SpeedDialAction} action
+   * @param {number} index
+   * @param {SpeedDialProps} props
+   * @returns {TemplateResult}
+   */
+  renderAction(action, index, props) {
+    return html`<button
+      type="button"
+      class="iw-speed-dial-action"
+      aria-label=${action.label ?? `Speed dial action ${index + 1}`}
+      ?disabled=${action.isDisabled}
+      @click=${() => {
+        action.onClick?.(action.value ?? index)
+        props.onAction?.(action.value ?? index, action)
+      }}
+    >
+      ${action.icon ?? action.label}
+    </button>`
+  },
+}

package/src/navigation/stepper/index.js

@@ -0,0 +1 @@
+export { stepper } from "./template.js"

package/src/navigation/stepper/stepper.stories.js

@@ -0,0 +1,35 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { stepper } from "."
+
+export default {
+  title: "Navigation/Stepper",
+  tags: ["autodocs"],
+  render: createRender(stepper),
+  argTypes: {
+    steps: { control: "object", description: "Ordered step definitions." },
+    activeStep: {
+      control: "number",
+      description: "Zero-based active step index.",
+    },
+    orientation: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "Stepper axis.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Progress navigation for multi-step workflows with overridable `renderStep`.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    activeStep: 1,
+    steps: [{ label: "Campaign" }, { label: "Ad group" }, { label: "Ad" }],
+  },
+}

package/src/navigation/stepper/style.css

@@ -0,0 +1,49 @@
+.iw-stepper {
+  display: flex;
+  gap: var(--iw-space-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.iw-stepper-vertical {
+  flex-direction: column;
+}
+
+.iw-stepper-step {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--iw-space-2);
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+}
+
+.iw-stepper-indicator {
+  width: 2rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid var(--iw-color-border);
+}
+
+.iw-stepper-step-active,
+.iw-stepper-step-completed {
+  color: var(--iw-color-text);
+}
+
+.iw-stepper-step-active .iw-stepper-indicator,
+.iw-stepper-step-completed .iw-stepper-indicator {
+  background: var(--iw-color-primary);
+  border-color: var(--iw-color-primary);
+  color: var(--iw-color-primary-text, var(--iw-color-white));
+}
+
+.iw-stepper-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.iw-stepper-optional {
+  font-size: var(--iw-font-size-sm);
+}

package/src/navigation/stepper/template.js

@@ -0,0 +1,61 @@
+/**
+ * @typedef {import('../../../types/navigation/stepper').StepperProps} StepperProps
+ * @typedef {import('../../../types/navigation/stepper').Step} Step
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html } from "@inglorious/web"
+
+export const stepper = {
+  /**
+   * @param {StepperProps} props
+   * @returns {TemplateResult}
+   */
+  render(props) {
+    const {
+      steps = [],
+      activeStep = 0,
+      orientation = "horizontal",
+      isAlternativeLabel = false,
+    } = props
+
+    return html`<ol
+      class=${classMap({
+        "iw-stepper": true,
+        [`iw-stepper-${orientation}`]: true,
+        "iw-stepper-alternative-label": isAlternativeLabel,
+      })}
+    >
+      ${steps.map((step, index) =>
+        this.renderStep(step, index, { ...props, activeStep }),
+      )}
+    </ol>`
+  },
+
+  /**
+   * @param {Step} step
+   * @param {number} index
+   * @param {StepperProps} props
+   * @returns {TemplateResult}
+   */
+  renderStep(step, index, props) {
+    const completed = step.isCompleted ?? index < props.activeStep
+    const active = index === props.activeStep
+
+    return html`<li
+      class=${classMap({
+        "iw-stepper-step": true,
+        "iw-stepper-step-active": active,
+        "iw-stepper-step-completed": completed,
+      })}
+    >
+      <span class="iw-stepper-indicator">${completed ? "✓" : index + 1}</span>
+      <span class="iw-stepper-content">
+        <span class="iw-stepper-label">${step.label}</span>
+        ${step.optional
+          ? html`<span class="iw-stepper-optional">${step.optional}</span>`
+          : null}
+      </span>
+    </li>`
+  },
+}

package/src/navigation/tabs/index.js

@@ -0,0 +1 @@
+export { tabs } from "./template.js"

package/src/navigation/tabs/style.css

@@ -0,0 +1,35 @@
+.iw-tabs-list {
+  display: flex;
+  align-items: stretch;
+  gap: var(--iw-space-2);
+  border-bottom: 1px solid var(--iw-color-border);
+}
+
+.iw-tabs-centered {
+  justify-content: center;
+}
+
+.iw-tabs-full-width .iw-tab {
+  flex: 1 1 0;
+}
+
+.iw-tab {
+  border: 0 none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+  display: inline-flex;
+  align-items: center;
+  gap: var(--iw-space-2);
+  padding: var(--iw-space-3) var(--iw-space-4);
+  cursor: pointer;
+}
+
+.iw-tab-selected {
+  color: var(--iw-color-primary);
+  border-bottom-color: var(--iw-color-primary);
+}
+
+.iw-tab-panel {
+  padding-top: var(--iw-space-4);
+}

package/src/navigation/tabs/tabs.stories.js

@@ -0,0 +1,40 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { tabs } from "."
+
+export default {
+  title: "Navigation/Tabs",
+  tags: ["autodocs"],
+  render: createRender(tabs),
+  argTypes: {
+    items: {
+      control: "object",
+      description: "Tab labels, values, and optional panels.",
+    },
+    value: { control: "text", description: "Currently selected tab value." },
+    isCentered: { control: "boolean", description: "Center the tab list." },
+    isFullWidth: {
+      control: "boolean",
+      description: "Stretch tabs to fill available width.",
+    },
+    onChange: { action: "onChange" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Section navigation with overridable `renderTab` and `renderPanel` methods.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    value: "overview",
+    items: [
+      { value: "overview", label: "Overview", panel: "Overview content" },
+      { value: "activity", label: "Activity", panel: "Activity content" },
+      { value: "settings", label: "Settings", panel: "Settings content" },
+    ],
+  },
+}

package/src/navigation/tabs/template.js

@@ -0,0 +1,79 @@
+/**
+ * @typedef {import('../../../types/navigation/tabs').TabsProps} TabsProps
+ * @typedef {import('../../../types/navigation/tabs').TabItem} TabItem
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html } from "@inglorious/web"
+
+export const tabs = {
+  /**
+   * @param {TabsProps} props
+   * @returns {TemplateResult}
+   */
+  render(props) {
+    const {
+      items = [],
+      value = items[0]?.value ?? 0,
+      isCentered = false,
+      isFullWidth = false,
+    } = props
+
+    return html`<div class="iw-tabs">
+      <div
+        class=${classMap({
+          "iw-tabs-list": true,
+          "iw-tabs-centered": isCentered,
+          "iw-tabs-full-width": isFullWidth,
+        })}
+        role="tablist"
+      >
+        ${items.map((item, index) =>
+          this.renderTab(item, index, { ...props, value }),
+        )}
+      </div>
+      ${this.renderPanel(
+        items.find((item, index) => (item.value ?? index) === value) ?? null,
+        props,
+      )}
+    </div>`
+  },
+
+  /**
+   * @param {TabItem} item
+   * @param {number} index
+   * @param {TabsProps} props
+   * @returns {TemplateResult}
+   */
+  renderTab(item, index, props) {
+    const tabValue = item.value ?? index
+    const selected = tabValue === props.value
+
+    return html`<button
+      type="button"
+      role="tab"
+      class=${classMap({
+        "iw-tab": true,
+        "iw-tab-selected": selected,
+      })}
+      aria-selected=${selected ? "true" : "false"}
+      ?disabled=${item.isDisabled}
+      @click=${() => {
+        item.onClick?.(tabValue)
+        props.onChange?.(tabValue)
+      }}
+    >
+      ${item.icon ? html`<span class="iw-tab-icon">${item.icon}</span>` : null}
+      <span>${item.label}</span>
+    </button>`
+  },
+
+  /**
+   * @param {TabItem | null} item
+   * @returns {TemplateResult | null}
+   */
+  renderPanel(item) {
+    if (!item?.panel) return null
+    return html`<div class="iw-tab-panel" role="tabpanel">${item.panel}</div>`
+  },
+}

package/src/overview.mdx

@@ -0,0 +1,39 @@
+import { Meta } from "@storybook/addon-docs/blocks"
+
+<Meta title="Overview" />
+
+# Inglorious UI
+
+Inglorious UI is a design system built on the same entity/type model as Inglorious Web. It provides ready-made primitives for building complete UIs while keeping rendering and behavior fully overrideable.
+
+## What You Get
+
+- **Controls**: Buttons, inputs, selects, toggles, sliders, and field helpers.
+- **Data Display**: Typography, badges, avatars, icons, tooltips, and data-driven widgets.
+- **Navigation**: Tabs, breadcrumbs, drawers, menus, pagination, and links.
+- **Feedback**: Alerts, dialogs, progress indicators, snackbars, and skeletons.
+- **Layout & Surfaces**: Grid, flex, containers, cards, paper, and app scaffolding.
+
+## Design System Principles
+
+- **Composable**: Most components are built from smaller primitives.
+- **Overridable**: You can replace `render()` and sub-renders to customize structure.
+- **Themeable**: Themes are layered on top of shared tokens and reset styles.
+- **Entity-first**: Every primitive is a type that integrates with the same rendering and store model.
+
+## Using the Library
+
+To get a themed UI, include the base styles plus a theme stylesheet, then add the theme classes at your app root.
+
+```css
+@import "@inglorious/ui/base.css";
+@import "@inglorious/ui/themes/bootstrap.css";
+```
+
+```html
+<div class="iw-theme-bootstrap iw-theme-light">...</div>
+```
+
+Explore the sidebar to see primitives grouped by category, with examples and configuration options for each type.
+
+You can also switch the active **Theme** and **Mode** from the Storybook header toolbar to preview components with different styles.