@inglorious/ui 0.1.0 → 1.0.1

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

@@ -0,0 +1,119 @@
+.iw-list {
+  margin: 0;
+  padding: 0;
+  color: var(--iw-color-text);
+  list-style: none;
+
+  &.iw-list-padding-sm {
+    padding: var(--iw-space-2);
+  }
+
+  &.iw-list-padding-md {
+    padding: var(--iw-space-4);
+  }
+
+  &.iw-list-padding-lg {
+    padding: var(--iw-space-6);
+  }
+
+  &.iw-list-padding-xl {
+    padding: var(--iw-space-8);
+  }
+
+  &.iw-list-dense {
+    .iw-list-item {
+      padding-block: var(--iw-space-2);
+    }
+  }
+
+  &.iw-list-divided {
+    .iw-list-divider {
+      display: block;
+    }
+  }
+}
+
+.iw-list-item {
+  padding: var(--iw-space-3);
+  border-radius: var(--iw-radius-sm);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.iw-list-item-inset .iw-list-item-content {
+  margin-left: calc(var(--iw-space-3) + var(--iw-list-icon-size, 1.25rem));
+}
+
+.iw-list-title {
+  padding: var(--iw-space-3);
+  font-size: var(--iw-font-size-xs);
+  font-weight: var(--iw-font-weight-semibold);
+  text-transform: uppercase;
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+}
+
+.iw-list-item-action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--iw-space-2);
+}
+
+.iw-list-item-trailing {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--iw-space-2);
+}
+
+.iw-list-item-toggle {
+  .iw-list-item-caret {
+    transition: transform 0.15s ease;
+  }
+
+  &[aria-expanded] .iw-list-item-caret {
+    transform: rotate(90deg);
+  }
+}
+
+.iw-list-item-primary {
+  font-weight: 500;
+}
+
+.iw-list-item-secondary {
+  font-size: 0.9em;
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+}
+
+.iw-list-item-clickable {
+  cursor: pointer;
+}
+
+.iw-list-item-clickable:hover {
+  background-color: var(--iw-color-surface, rgba(0, 0, 0, 0.05));
+}
+
+.iw-list-item-selected {
+  background-color: var(--iw-color-surface-active, rgba(0, 0, 0, 0.08));
+
+  .iw-list-item-icon {
+    color: var(--iw-color-text);
+  }
+}
+
+.iw-list-item-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.iw-list-divider {
+  display: none;
+  height: 1px;
+  background: var(--iw-color-border);
+  margin: 0 var(--iw-space-3);
+}
+
+.iw-list-nested {
+  margin-top: var(--iw-space-1);
+  padding-left: var(--iw-space-4);
+}

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

@@ -0,0 +1,302 @@
+/**
+ * @typedef {import('../../../types/data-display/list').ListProps} ListProps
+ * @typedef {import('../../../types/data-display/list').ListItem} ListItem
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ * @typedef {{
+ *   id: string | number,
+ *   primary: TemplateResult | string | number,
+ *   secondary?: TemplateResult | string | number,
+ *   icon?: TemplateResult | string | number,
+ *   action?: TemplateResult | string | number,
+ *   isExpanded?: boolean,
+ *   onToggle?: (item: ListItem, path: number[]) => void,
+ *   isDisabled?: boolean,
+ *   isSelected?: boolean,
+ *   hasDivider?: boolean,
+ *   onClick?: (item: ListItem, path: number[]) => void,
+ *   children?: ListItem[] | TemplateResult | string | number | null,
+ *   raw?: ListItem,
+ * }} ListItemMeta
+ */
+
+import { classMap, html, ref, repeat, when } from "@inglorious/web"
+
+import { iconButton } from "../../controls/icon-button"
+import { flex } from "../../layout/flex"
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+const PRETTY_INDEX = 1
+
+export const list = {
+  /**
+   * @param {ListProps} props
+   * @returns {TemplateResult}
+   */
+  render(props) {
+    const {
+      type, // eslint-disable-line no-unused-vars
+      items = [],
+      children,
+      isOrdered = false,
+      isDense = false,
+      isDivided = false,
+      isInset = false,
+      padding = "none",
+      path = [],
+      className = "",
+      ...rest
+    } = props
+
+    const extraClasses = Object.fromEntries(
+      className
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((name) => [name, true]),
+    )
+
+    const classes = {
+      "iw-list": true,
+      "iw-list-ordered": isOrdered,
+      "iw-list-dense": isDense,
+      "iw-list-divided": isDivided,
+      "iw-list-inset": isInset,
+      [`iw-list-padding-${padding}`]: padding !== "none",
+      ...extraClasses,
+    }
+
+    const content =
+      children ??
+      repeat(
+        items,
+        (item, index) => item?.id ?? `${index}`,
+        (item, index) => {
+          const meta = getItemMeta(item, index)
+          const shouldDivide =
+            (isDivided || meta.hasDivider) && index < items.length - 1
+
+          return html`${this.renderItem(props, {
+            item,
+            meta,
+            index,
+            path: [...path, index],
+          })}${shouldDivide
+            ? html`<li class="iw-list-divider" role="separator"></li>`
+            : null}`
+        },
+      )
+
+    if (isOrdered) {
+      return html`
+        <ol
+          class=${classMap(classes)}
+          ${ref((el) => applyElementProps(el, rest))}
+        >
+          ${content}
+        </ol>
+      `
+    }
+
+    return html`
+      <ul
+        class=${classMap(classes)}
+        ${ref((el) => applyElementProps(el, rest))}
+      >
+        ${content}
+      </ul>
+    `
+  },
+
+  /**
+   * @param {ListProps} props
+   * @param {{
+   *   item: ListItem,
+   *   meta: ListItemMeta,
+   *   index: number,
+   *   path: number[]
+   * }} payload
+   * @returns {TemplateResult}
+   */
+  renderItem(props, { item, meta, path }) {
+    const {
+      primary,
+      secondary,
+      icon,
+      isDisabled,
+      isSelected,
+      onClick,
+      raw,
+      children,
+      action,
+      isExpanded,
+      onToggle,
+    } = meta
+
+    if (meta.title) {
+      return html`<li class="iw-list-title">${meta.title}</li>`
+    }
+
+    const isClickable = !!props.onItemClick || !!onClick
+    const hasChildren = Array.isArray(children) && children.length > 0
+    const hasAction = !!action
+
+    const listItemClassName = [
+      "iw-list-item",
+      isClickable && "iw-list-item-clickable",
+      isDisabled && "iw-list-item-disabled",
+      isSelected && "iw-list-item-selected",
+      props.isInset && !icon && "iw-list-item-inset",
+    ]
+      .filter(Boolean)
+      .join(" ")
+
+    return flex.render({
+      element: "li",
+      padding: "sm",
+      direction: "column",
+      className: listItemClassName,
+      onClick: (event) => {
+        event.stopPropagation()
+        if (isDisabled) return
+        onClick?.(raw ?? item, path)
+        props.onItemClick?.(raw ?? item, path)
+      },
+      children: [
+        flex.render({
+          align: "center",
+          gap: "sm",
+          children: [
+            when(icon, () =>
+              iconButton.render({
+                icon,
+                size: "sm",
+                color: "secondary",
+                variant: "ghost",
+                shape: "square",
+                className: "iw-list-item-icon",
+              }),
+            ),
+            flex.render({
+              direction: "column",
+              gap: "sm",
+              className: "iw-list-item-content",
+              children: [
+                html`<div class="iw-list-item-primary">${primary}</div>`,
+                when(
+                  secondary,
+                  () =>
+                    html`<div class="iw-list-item-secondary">
+                      ${secondary}
+                    </div>`,
+                ),
+              ],
+            }),
+            when(
+              hasChildren || hasAction,
+              () =>
+                html`<span class="iw-list-item-trailing">
+                  ${when(hasChildren, () =>
+                    iconButton.render({
+                      variant: "ghost",
+                      color: "secondary",
+                      size: "sm",
+                      shape: "square",
+                      className: "iw-list-item-toggle",
+                      isDisabled,
+                      ariaLabel: "Toggle section",
+                      "aria-expanded": isExpanded,
+                      onClick: (event) => {
+                        event.stopPropagation()
+                        if (isDisabled) return
+                        onToggle?.(raw ?? item, path)
+                        props.onItemToggle?.(raw ?? item, path)
+                      },
+                      icon: html`<span
+                        class="iw-list-item-caret"
+                        aria-hidden="true"
+                        >❯</span
+                      >`,
+                      label: "",
+                    }),
+                  )}
+                  ${when(
+                    action,
+                    () =>
+                      html`<span
+                        class="iw-list-item-action"
+                        @click=${(event) => event.stopPropagation()}
+                      >
+                        ${action}
+                      </span>`,
+                  )}
+                </span>`,
+            ),
+          ],
+        }),
+        when(hasChildren, () =>
+          when(isExpanded, () =>
+            this.render({
+              ...props,
+              items: children,
+              className: `${props.className ?? ""} iw-list-nested`.trim(),
+              path,
+            }),
+          ),
+        ),
+      ],
+    })
+  },
+}
+
+function getItemMeta(item, index) {
+  if (!item || typeof item !== "object") {
+    return {
+      id: `${index}`,
+      primary: item ?? `${index + PRETTY_INDEX}`,
+    }
+  }
+
+  const {
+    id,
+    label,
+    primary,
+    secondary,
+    icon,
+    title,
+    isDisabled = false,
+    isSelected = false,
+    hasDivider = false,
+    onClick,
+    children,
+    action,
+    isExpanded = false,
+    onToggle,
+  } = item
+
+  const hasNestedChildren = Array.isArray(children)
+  const normalizedChildren = hasNestedChildren
+    ? children
+    : typeof children === "string" || typeof children === "number"
+      ? children
+      : null
+
+  return {
+    id: id ?? `${index}`,
+    primary:
+      primary ??
+      label ??
+      (hasNestedChildren ? "" : normalizedChildren) ??
+      `${index + PRETTY_INDEX}`,
+    secondary,
+    icon,
+    title,
+    isDisabled,
+    isSelected,
+    hasDivider,
+    onClick,
+    children: hasNestedChildren ? children : normalizedChildren,
+    action,
+    isExpanded,
+    onToggle,
+    raw: item,
+  }
+}

package/src/data-display/material-icon/index.js

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

package/src/data-display/material-icon/material-icon.stories.js

@@ -0,0 +1,99 @@
+import { html, repeat } from "@inglorious/web"
+
+import { materialIcon } from "."
+
+const materialIcons = [
+  "search",
+  "home",
+  "menu",
+  "settings",
+  "favorite",
+  "visibility",
+  "notifications",
+  "shopping_cart",
+  "person",
+  "calendar_today",
+  "mail",
+  "chat",
+  "help",
+  "info",
+  "warning",
+  "check_circle",
+  "cancel",
+  "delete",
+  "download",
+  "upload",
+  "lock",
+  "star",
+  "play_arrow",
+  "pause",
+  "stop",
+  "cloud",
+  "camera_alt",
+  "bolt",
+  "palette",
+  "code",
+  "analytics",
+  "schedule",
+]
+
+export default {
+  title: "Data Display/Material Icon",
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+    isFilled: {
+      control: "boolean",
+    },
+    columns: {
+      control: "number",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Material Symbols icon set (requires Material Symbols font to be loaded).",
+      },
+    },
+  },
+}
+
+export const Gallery = {
+  args: {
+    size: "lg",
+    isFilled: false,
+    columns: 6,
+  },
+  render: (args) => {
+    const columns = Math.max(4, Number(args.columns ?? 6))
+    const size = args.size ?? "lg"
+    const isFilled = Boolean(args.isFilled)
+
+    return html`
+      <div
+        style=${[
+          "display: grid",
+          `grid-template-columns: repeat(${columns}, minmax(0, 1fr))`,
+          "gap: 1rem",
+          "align-items: center",
+          "justify-items: center",
+        ].join("; ")}
+      >
+        ${repeat(
+          materialIcons,
+          (name) => name,
+          (name) =>
+            materialIcon.render({
+              name,
+              size,
+              isFilled,
+            }),
+        )}
+      </div>
+    `
+  },
+}

package/src/data-display/material-icon/style.css

@@ -0,0 +1,27 @@
+.iw-material-icon {
+  font-family: "Material Symbols Outlined", "Material Symbols";
+  font-variation-settings:
+    "FILL" 0,
+    "wght" 400,
+    "GRAD" 0,
+    "opsz" 24;
+  line-height: 1;
+  display: inline-flex;
+  cursor: pointer;
+
+  &.iw-material-icon-filled {
+    font-variation-settings:
+      "FILL" 1,
+      "wght" 400,
+      "GRAD" 0,
+      "opsz" 24;
+  }
+
+  &.iw-material-icon-sm {
+    font-size: 0.875rem;
+  }
+
+  &.iw-material-icon-lg {
+    font-size: 1.5rem;
+  }
+}

package/src/data-display/material-icon/template.js

@@ -0,0 +1,21 @@
+/**
+ * @typedef {import('../../../types/data-display/material-icon').MaterialIconProps} MaterialIconProps
+ */
+
+import { classMap, html } from "@inglorious/web"
+
+export function render(props) {
+  const { name = "help", size = "md", isFilled = true, onClick } = props
+
+  return html`<span
+    class=${classMap({
+      "iw-material-icon": true,
+      "material-symbols-outlined": true,
+      "iw-material-icon-filled": isFilled,
+      [`iw-material-icon-${size}`]: size !== "md",
+    })}
+    aria-hidden="true"
+    @click=${onClick}
+    >${name}</span
+  >`
+}

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

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

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

@@ -0,0 +1,42 @@
+.iw-table-wrap {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.iw-table {
+  width: 100%;
+  min-width: max-content;
+  border-collapse: collapse;
+  border: 1px solid var(--iw-color-border);
+  background: var(--iw-color-surface);
+  color: var(--iw-color-text);
+
+  &.iw-table-full-width {
+    width: 100%;
+  }
+
+  &.iw-table-striped {
+    .iw-table-row-even {
+      background: color-mix(
+        in srgb,
+        var(--iw-color-surface) 88%,
+        var(--iw-color-bg)
+      );
+    }
+  }
+}
+
+.iw-table-header-cell,
+.iw-table-cell {
+  padding: var(--iw-space-3) var(--iw-space-4);
+  text-align: left;
+  border-bottom: 1px solid var(--iw-color-border);
+}
+
+.iw-table-header-cell {
+  font-weight: var(--iw-font-weight-semibold);
+}
+
+.iw-table-cell-number {
+  text-align: right;
+}

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

@@ -0,0 +1,40 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { table } from "."
+
+export default {
+  title: "Data Display/Table",
+  tags: ["autodocs"],
+  render: createRender(table),
+  argTypes: {
+    columns: { control: "object", description: "Column definitions." },
+    rows: { control: "object", description: "Row records." },
+    isFullWidth: { control: "boolean", description: "Stretch table width." },
+    isStriped: { control: "boolean", description: "Enable zebra rows." },
+    onRowClick: { action: "onRowClick" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Base table primitive with overridable `renderHeaderCell`, `renderRow`, and `renderCell` sub-renders.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    columns: [
+      { id: "name", label: "Name" },
+      { id: "role", label: "Role" },
+      { id: "score", label: "Score", align: "right" },
+    ],
+    rows: [
+      { id: "u1", name: "Ada", role: "Maintainer", score: 98 },
+      { id: "u2", name: "Max", role: "Contributor", score: 87 },
+      { id: "u3", name: "Lin", role: "Designer", score: 91 },
+    ],
+    isFullWidth: true,
+    isStriped: true,
+  },
+}