@inglorious/ui 0.1.0 → 1.0.1

package/src/data-display/table/template.js

@@ -0,0 +1,114 @@
+/**
+ * @typedef {import('../../../types/data-display/table').TableProps} TableProps
+ * @typedef {import('../../../types/data-display/table').TableColumn} TableColumn
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref, repeat } from "@inglorious/web"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+const EVEN_ROW_DIVISOR = 2
+const STRIPED_OFFSET = 1
+
+export const table = {
+  /**
+   * @param {TableProps} props
+   * @returns {TemplateResult}
+   */
+  render(props) {
+    const {
+      columns = [],
+      rows = [],
+      isFullWidth = false,
+      isStriped = false,
+      onRowClick,
+      ...rest
+    } = props
+
+    const classes = {
+      "iw-table": true,
+      "iw-table-full-width": isFullWidth,
+      "iw-table-striped": isStriped,
+    }
+
+    return html`
+      <div class="iw-table-wrap">
+        <table
+          class=${classMap(classes)}
+          ${ref((el) => applyElementProps(el, rest))}
+        >
+          <thead>
+            <tr>
+              ${repeat(
+                columns,
+                (column, index) => column.id ?? `${index}`,
+                (column, index) =>
+                  this.renderHeaderCell(props, { column, index }),
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            ${repeat(
+              rows,
+              (row, index) => row?.id ?? `${index}`,
+              (row, index) => this.renderRow(props, { row, index, onRowClick }),
+            )}
+          </tbody>
+        </table>
+      </div>
+    `
+  },
+
+  /**
+   * @param {TableProps} _props
+   * @param {{column: TableColumn, index: number}} payload
+   * @returns {TemplateResult}
+   */
+  renderHeaderCell(_props, { column }) {
+    const title = column.label ?? column.title ?? column.id
+    return html`<th class="iw-table-header-cell">${title}</th>`
+  },
+
+  /**
+   * @param {TableProps} props
+   * @param {{row: Record<string, unknown>, index: number}} payload
+   * @returns {TemplateResult}
+   */
+  renderRow(props, { row, index, onRowClick }) {
+    const columns = props.columns ?? []
+
+    return html`<tr
+      class=${classMap({
+        "iw-table-row": true,
+        "iw-table-row-even": index % EVEN_ROW_DIVISOR === STRIPED_OFFSET,
+      })}
+      @click=${() => onRowClick(row)}
+    >
+      ${repeat(
+        columns,
+        (column, columnIndex) => column.id ?? `${columnIndex}`,
+        (column, columnIndex) =>
+          this.renderCell(props, { column, row, index, columnIndex }),
+      )}
+    </tr>`
+  },
+
+  /**
+   * @param {TableProps} _props
+   * @param {{column: TableColumn, row: Record<string, unknown>}} payload
+   * @returns {TemplateResult}
+   */
+  renderCell(_props, { column, row }) {
+    const value = row?.[column.id]
+
+    return html`<td
+      class=${classMap({
+        "iw-table-cell": true,
+        "iw-table-cell-number": column.align === "right",
+      })}
+    >
+      ${value}
+    </td>`
+  },
+}

package/src/data-display/tooltip/index.js

@@ -0,0 +1,3 @@
+import * as renderers from "./template.js"
+
+export const tooltip = { ...renderers }

package/src/data-display/tooltip/style.css

@@ -0,0 +1,57 @@
+.iw-tooltip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  .iw-tooltip-bubble {
+    position: absolute;
+    z-index: var(--iw-z-tooltip);
+    opacity: 0;
+    pointer-events: none;
+    background: var(--iw-color-bg-elevated, var(--iw-color-surface));
+    color: var(--iw-color-text);
+    border: 1px solid var(--iw-color-border);
+    border-radius: var(--iw-radius-sm);
+    padding: var(--iw-space-2) var(--iw-space-3);
+    box-shadow: var(--iw-shadow-md);
+    transition: opacity 150ms ease;
+    left: 50%;
+    bottom: calc(100% + var(--iw-space-2));
+    transform: translateX(-50%);
+    white-space: normal;
+  }
+
+  &.iw-tooltip-size-sm .iw-tooltip-bubble {
+    font-size: var(--iw-font-size-sm);
+    padding: var(--iw-space-1) var(--iw-space-2);
+  }
+
+  &.iw-tooltip-size-lg .iw-tooltip-bubble {
+    font-size: var(--iw-font-size-lg);
+    padding: var(--iw-space-3) var(--iw-space-4);
+  }
+
+  &:hover .iw-tooltip-bubble,
+  &:focus-within .iw-tooltip-bubble,
+  &.iw-tooltip-open .iw-tooltip-bubble {
+    opacity: 1;
+  }
+
+  &.iw-tooltip-bottom .iw-tooltip-bubble {
+    top: calc(100% + var(--iw-space-2));
+    bottom: auto;
+  }
+
+  &.iw-tooltip-left .iw-tooltip-bubble {
+    left: auto;
+    right: calc(100% + var(--iw-space-2));
+    bottom: 50%;
+    transform: translateY(50%);
+  }
+
+  &.iw-tooltip-right .iw-tooltip-bubble {
+    left: calc(100% + var(--iw-space-2));
+    bottom: 50%;
+    transform: translateY(50%);
+  }
+}

package/src/data-display/tooltip/template.js

@@ -0,0 +1,58 @@
+/**
+ * @typedef {import('../../../types/data-display/tooltip').TooltipProps} TooltipProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref } from "@inglorious/web"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+/**
+ * @param {TooltipProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    children,
+    content,
+    position = "top",
+    size = "md",
+    isOpen = false,
+    maxWidth = "20rem",
+    className = "",
+    onClick,
+    ...rest
+  } = props
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
+  const classes = {
+    "iw-tooltip": true,
+    "iw-tooltip-open": isOpen,
+    [`iw-tooltip-${position}`]: position !== "top",
+    [`iw-tooltip-size-${size}`]: size !== "md",
+    ...extraClasses,
+  }
+
+  return html`
+    <span
+      class=${classMap(classes)}
+      ${ref((el) => applyElementProps(el, rest))}
+      @click=${onClick}
+    >
+      <span class="iw-tooltip-trigger">${children ?? "?"}</span>
+      <span
+        class="iw-tooltip-bubble"
+        role="tooltip"
+        style=${`max-width: ${maxWidth};`}
+      >
+        ${content}
+      </span>
+    </span>
+  `
+}

package/src/data-display/tooltip/tooltip.stories.js

@@ -0,0 +1,44 @@
+import { html } from "@inglorious/web"
+
+import { createRender } from "../../stories/notifyStory.js"
+import { tooltip } from "."
+
+export default {
+  title: "Data Display/Tooltip",
+  tags: ["autodocs"],
+  render: createRender(tooltip),
+  argTypes: {
+    content: { control: "text", description: "Tooltip text." },
+    position: {
+      control: "select",
+      options: ["top", "right", "bottom", "left"],
+      description: "Tooltip placement.",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Tooltip size scale.",
+    },
+    isOpen: { control: "boolean", description: "Force tooltip visible." },
+    maxWidth: { control: "text", description: "Max width CSS value." },
+    onClick: { action: "onClick" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Hover/focus tooltip primitive with configurable placement.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    children: html`<button type="button">Hover me</button>`,
+    content: "Tooltip content",
+    position: "bottom",
+    size: "md",
+    isOpen: false,
+    maxWidth: "20rem",
+  },
+}

package/src/data-display/typography/index.js

@@ -0,0 +1,3 @@
+import * as renderers from "./template.js"
+
+export const typography = { ...renderers }

package/src/data-display/typography/style.css

@@ -0,0 +1,49 @@
+.iw-typography {
+  margin: 0;
+  color: var(--iw-color-text);
+  line-height: 1.45;
+
+  &.iw-typography-h1 {
+    font-size: var(--iw-font-size-4xl);
+    line-height: 1.1;
+  }
+
+  &.iw-typography-h2 {
+    font-size: var(--iw-font-size-3xl);
+    line-height: 1.15;
+  }
+
+  &.iw-typography-h3 {
+    font-size: var(--iw-font-size-2xl);
+    line-height: 1.2;
+  }
+
+  &.iw-typography-caption {
+    font-size: var(--iw-font-size-sm);
+    opacity: 0.85;
+  }
+
+  &.iw-typography-overline {
+    font-size: var(--iw-font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  &.iw-typography-align-center {
+    text-align: center;
+  }
+
+  &.iw-typography-align-right {
+    text-align: right;
+  }
+
+  &.iw-typography-nowrap {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &.iw-typography-gutter-bottom {
+    margin-bottom: var(--iw-space-3);
+  }
+}

package/src/data-display/typography/template.js

@@ -0,0 +1,110 @@
+/**
+ * @typedef {import('../../../types/data-display/typography').TypographyProps} TypographyProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref } from "@inglorious/web"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+/**
+ * @param {TypographyProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    children,
+    variant = "body",
+    align = "left",
+    weight,
+    color,
+    isNoWrap = false,
+    hasGutterBottom = false,
+    className = "",
+    ...rest
+  } = props
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
+  const classes = {
+    "iw-typography": true,
+    [`iw-typography-${variant}`]: variant !== "body",
+    [`iw-typography-align-${align}`]: align !== "left",
+    "iw-typography-nowrap": isNoWrap,
+    "iw-typography-gutter-bottom": hasGutterBottom,
+    ...extraClasses,
+  }
+
+  return renderTag(variant, classes, children, { weight, color, rest })
+}
+
+function renderTag(variant, classes, children, options) {
+  const { weight, color, rest } = options
+
+  if (variant === "h1") {
+    return html`<h1
+      class=${classMap(classes)}
+      style=${buildStyle(weight, color)}
+      ${ref((el) => applyElementProps(el, rest))}
+    >
+      ${children}
+    </h1>`
+  }
+
+  if (variant === "h2") {
+    return html`<h2
+      class=${classMap(classes)}
+      style=${buildStyle(weight, color)}
+      ${ref((el) => applyElementProps(el, rest))}
+    >
+      ${children}
+    </h2>`
+  }
+
+  if (variant === "h3") {
+    return html`<h3
+      class=${classMap(classes)}
+      style=${buildStyle(weight, color)}
+      ${ref((el) => applyElementProps(el, rest))}
+    >
+      ${children}
+    </h3>`
+  }
+
+  if (variant === "caption" || variant === "overline") {
+    return html`<span
+      class=${classMap(classes)}
+      style=${buildStyle(weight, color)}
+      ${ref((el) => applyElementProps(el, rest))}
+    >
+      ${children}
+    </span>`
+  }
+
+  return html`<p
+    class=${classMap(classes)}
+    style=${buildStyle(weight, color)}
+    ${ref((el) => applyElementProps(el, rest))}
+  >
+    ${children}
+  </p>`
+}
+
+function buildStyle(weight, color) {
+  const parts = []
+
+  if (weight) {
+    parts.push(`font-weight: ${weight};`)
+  }
+
+  if (color) {
+    parts.push(`color: ${color};`)
+  }
+
+  return parts.join(" ")
+}

package/src/data-display/typography/typography.stories.js

@@ -0,0 +1,48 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { typography } from "."
+
+export default {
+  title: "Data Display/Typography",
+  tags: ["autodocs"],
+  render: createRender(typography),
+  argTypes: {
+    children: { control: "text", description: "Text content." },
+    variant: {
+      control: "select",
+      options: ["body", "h1", "h2", "h3", "caption", "overline"],
+      description: "Visual text variant.",
+    },
+    align: {
+      control: "select",
+      options: ["left", "center", "right"],
+      description: "Horizontal text alignment.",
+    },
+    weight: { control: "text", description: "Optional CSS font-weight value." },
+    color: { control: "text", description: "Optional CSS color value." },
+    isNoWrap: {
+      control: "boolean",
+      description: "Single-line ellipsis behavior.",
+    },
+    hasGutterBottom: {
+      control: "boolean",
+      description: "Add bottom spacing.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Typography primitive for headings, body text, and labels.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    children: "The quick brown fox jumps over the lazy dog.",
+    variant: "body",
+    align: "left",
+    isNoWrap: false,
+    hasGutterBottom: false,
+  },
+}

package/src/data-display/virtual-list/handlers.js

@@ -0,0 +1,68 @@
+/**
+ * @typedef {import('../../../types/data-display/virtual-list').VirtualListEntity} VirtualListEntity
+ */
+
+const LIST_START = 0
+
+/**
+ * Initializes the virtual list entity with default state.
+ * @param {VirtualListEntity} entity
+ */
+export function create(entity) {
+  resetList(entity)
+}
+
+/**
+ * Handles the scroll event to update the visible range.
+ * @param {VirtualListEntity} entity
+ * @param {HTMLElement} containerEl
+ */
+export function scroll(entity, containerEl) {
+  const scrollTop = containerEl.scrollTop
+  const { items, bufferSize, itemHeight, estimatedHeight, viewportHeight } =
+    entity
+  const height = itemHeight || estimatedHeight
+
+  const start = Math.max(
+    LIST_START,
+    Math.floor(scrollTop / height) - bufferSize,
+  )
+  const visibleCount = Math.ceil(viewportHeight / height)
+  const end = Math.min(start + visibleCount + bufferSize, items.length)
+
+  if (entity.visibleRange.start === start && entity.visibleRange.end === end) {
+    return
+  }
+
+  entity.scrollTop = scrollTop
+  entity.visibleRange = { start, end }
+}
+
+/**
+ * Mounts the list, measuring the first item to determine item height.
+ * @param {VirtualListEntity} entity
+ * @param {HTMLElement} containerEl
+ */
+export function mount(entity, containerEl) {
+  const firstItem = containerEl.querySelector("[data-index]")
+  if (!firstItem) return
+
+  entity.itemHeight = firstItem.offsetHeight
+  entity.visibleRange = {
+    start: 0,
+    end: Math.ceil(entity.viewportHeight / entity.itemHeight),
+  }
+}
+
+/**
+ * Resets the list entity state.
+ * @param {VirtualListEntity} entity
+ */
+function resetList(entity) {
+  entity.scrollTop = 0
+  entity.visibleRange ??= { start: 0, end: 20 }
+  entity.viewportHeight ??= 600
+  entity.bufferSize ??= 5
+  entity.itemHeight ??= null
+  entity.estimatedHeight ??= 50
+}

package/src/data-display/virtual-list/index.js

@@ -0,0 +1,4 @@
+import * as handlers from "./handlers.js"
+import * as renderers from "./template.js"
+
+export const virtualList = { ...handlers, ...renderers }

package/src/data-display/virtual-list/template.js

@@ -0,0 +1,101 @@
+/**
+ * @typedef {import('../../../types/data-display/virtual-list').VirtualListEntity} VirtualListEntity
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ * @typedef {import('@inglorious/web').Api} Api
+ */
+
+import { html, ref, repeat, styleMap } from "@inglorious/web"
+
+const PRETTY_INDEX = 1
+
+/**
+ * Renders the virtualized list component.
+ * @param {VirtualListEntity} entity The list entity state.
+ * @param {Api} api The API object.
+ * @returns {TemplateResult} The rendered list.
+ */
+export function render(entity, api) {
+  const {
+    items,
+    visibleRange,
+    viewportHeight,
+    itemHeight,
+    estimatedHeight,
+    className,
+  } = entity
+  const type = api.getType(entity.type)
+
+  if (!items) {
+    console.warn(`virtual list entity ${entity.id} needs 'items'`)
+    return html``
+  }
+
+  if (!type.renderItem) {
+    console.warn(`type ${entity.type} needs 'renderItem' method`)
+    return html``
+  }
+
+  const visibleItems = items.slice(visibleRange.start, visibleRange.end)
+  const height = itemHeight || estimatedHeight
+  const totalHeight = items.length * height
+
+  return html`
+    <div
+      class=${className ?? ""}
+      style=${styleMap({ height: `${viewportHeight}px`, overflow: "auto" })}
+      @scroll=${(e) => api.notify(`#${entity.id}:scroll`, e.currentTarget)}
+      ${ref((el) => {
+        if (el && !itemHeight) {
+          queueMicrotask(() => {
+            api.notify(`#${entity.id}:mount`, el)
+          })
+        }
+      })}
+    >
+      <div
+        style=${styleMap({
+          height: `${totalHeight}px`,
+          position: "relative",
+        })}
+      >
+        ${repeat(
+          visibleItems,
+          (item) => item.id,
+          (item, index) => {
+            const absoluteIndex = visibleRange.start + index
+            const top = absoluteIndex * height
+
+            return html`
+              <div
+                style=${styleMap({
+                  position: "absolute",
+                  top: `${top}px`,
+                  width: "100%",
+                })}
+                data-index=${absoluteIndex}
+              >
+                ${type.renderItem(entity, { item, index: absoluteIndex }, api)}
+              </div>
+            `
+          },
+        )}
+      </div>
+    </div>
+  `
+}
+
+/**
+ * Default item renderer.
+ * @param {VirtualListEntity} entity The list entity.
+ * @param {object} payload The payload for rendering the item.
+ * @param {any} payload.item The item data.
+ * @param {number} payload.index The item's absolute index in the full list.
+ * @param {Api} api The API object.
+ * @returns {TemplateResult} The rendered list item.
+ */
+// eslint-disable-next-line no-unused-vars
+export function renderItem(entity, { item, index }, api) {
+  return html`<div class="iw-list-item">
+    ${index + PRETTY_INDEX}. ${JSON.stringify(item)}
+  </div>`
+}