@inglorious/ui 0.1.0

package/src/controls/switch/template.js

@@ -0,0 +1,55 @@
+/**
+ * @typedef {import('../../../types/controls/switch').SwitchEntity} SwitchEntity
+ * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref } from "@inglorious/web"
+
+import { applyElementProps } from "@/shared/applyElementProps.js"
+
+/**
+ * Switch control implemented with a checkbox input.
+ *
+ * @param {SwitchEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(entity, api) {
+  const {
+    name = "",
+    label = "",
+    checked = false,
+    disabled = false,
+    size = "md",
+    ...rest
+  } = entity
+
+  const inputId = entity.id || name
+
+  const classes = {
+    "iw-switch-field": true,
+    [`iw-switch-${size}`]: size !== "md",
+    "iw-switch-disabled": disabled,
+  }
+
+  return html`
+    <label class=${classMap(classes)} for=${inputId}>
+      <input
+        id=${inputId}
+        class="iw-switch-input"
+        type="checkbox"
+        name=${name}
+        .checked=${checked}
+        ?disabled=${disabled}
+        @change=${(event) =>
+          api.notify(`#${entity.id}:change`, event.target.checked)}
+        ${ref((element) => applyElementProps(element, rest))}
+      />
+      <span class="iw-switch-track" aria-hidden="true">
+        <span class="iw-switch-thumb"></span>
+      </span>
+      ${label ? html`<span class="iw-switch-label">${label}</span>` : null}
+    </label>
+  `
+}

package/src/index.js

@@ -0,0 +1,14 @@
+export { button } from "./controls/button/index.js"
+export { buttonGroup } from "./controls/button-group/index.js"
+export { checkbox } from "./controls/checkbox/index.js"
+export { fab } from "./controls/fab/index.js"
+export { iconButton } from "./controls/icon-button/index.js"
+export { input } from "./controls/input/index.js"
+export { radioGroup } from "./controls/radio-group/index.js"
+export { rating } from "./controls/rating/index.js"
+export { select } from "./controls/select/index.js"
+export { slider } from "./controls/slider/index.js"
+export { switchControl } from "./controls/switch/index.js"
+export { card } from "./widgets/card/index.js"
+export { flex } from "./layout/flex/index.js"
+export { grid } from "./layout/grid/index.js"

package/src/layout/flex/flex.stories.js

@@ -0,0 +1,103 @@
+import { html } from "@inglorious/web"
+
+import {
+  makeStoryRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { flex } from "."
+
+export default {
+  title: "Layout/Flex",
+  tags: ["autodocs"],
+  render: makeStoryRender(flex, "story-flex"),
+  argTypes: {
+    ...notifyActionArgType,
+    direction: {
+      control: "select",
+      options: ["row", "column", "row-reverse", "column-reverse"],
+      description: "Flex main-axis direction.",
+    },
+    wrap: {
+      control: "select",
+      options: ["nowrap", "wrap", "wrap-reverse"],
+      description: "Controls wrapping behavior of children.",
+    },
+    justify: {
+      control: "select",
+      options: ["start", "center", "end", "between", "around", "evenly"],
+      description: "Main-axis distribution of children.",
+    },
+    align: {
+      control: "select",
+      options: ["stretch", "start", "center", "end", "baseline"],
+      description: "Cross-axis alignment of children.",
+    },
+    gap: {
+      control: "select",
+      options: ["none", "sm", "md", "lg", "xl"],
+      description: "Spacing between children.",
+    },
+    inline: {
+      control: "boolean",
+      description: "Uses inline-flex instead of flex.",
+    },
+    fullWidth: {
+      control: "boolean",
+      description: "Expands container width to 100%.",
+    },
+    children: {
+      control: "object",
+      description: "Array of templates/content rendered as-is.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Layout primitive for one-dimensional arrangement of template children.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  direction: "row",
+  wrap: "nowrap",
+  justify: "start",
+  align: "stretch",
+  gap: "md",
+  inline: false,
+  fullWidth: false,
+  children: [
+    html`<div>First</div>`,
+    html`<div>Second</div>`,
+    html`<div>Third</div>`,
+  ],
+}
+
+export const Vertical = {}
+Vertical.args = {
+  ...Default.args,
+  direction: "column",
+  children: [
+    html`<div>Header</div>`,
+    html`<div>Body</div>`,
+    html`<div>Footer</div>`,
+  ],
+}
+
+export const Wrapped = {}
+Wrapped.args = {
+  ...Default.args,
+  wrap: "wrap",
+  gap: "lg",
+  children: [
+    html`<div>One</div>`,
+    html`<div>Two</div>`,
+    html`<div>Three</div>`,
+    html`<div>Four</div>`,
+    html`<div>Five</div>`,
+    html`<div>Six</div>`,
+  ],
+}

package/src/layout/flex/index.js

@@ -0,0 +1,4 @@
+import { withRenderValidation } from "../../shared/withRenderValidation.js"
+import * as renderers from "./template.js"
+
+export const flex = [{ ...renderers }, withRenderValidation]

package/src/layout/flex/style.css

@@ -0,0 +1,103 @@
+.iw-flex {
+  display: flex;
+
+  &.iw-flex-inline {
+    display: inline-flex;
+  }
+
+  &.iw-flex-full-width {
+    width: 100%;
+  }
+
+  &.iw-flex-direction-column {
+    flex-direction: column;
+  }
+
+  &.iw-flex-direction-row {
+    flex-direction: row;
+  }
+
+  &.iw-flex-direction-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  &.iw-flex-direction-column-reverse {
+    flex-direction: column-reverse;
+  }
+
+  &.iw-flex-wrap-wrap {
+    flex-wrap: wrap;
+  }
+
+  &.iw-flex-wrap-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  &.iw-flex-wrap-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+
+  &.iw-flex-justify-center {
+    justify-content: center;
+  }
+
+  &.iw-flex-justify-start {
+    justify-content: flex-start;
+  }
+
+  &.iw-flex-justify-end {
+    justify-content: flex-end;
+  }
+
+  &.iw-flex-justify-between {
+    justify-content: space-between;
+  }
+
+  &.iw-flex-justify-around {
+    justify-content: space-around;
+  }
+
+  &.iw-flex-justify-evenly {
+    justify-content: space-evenly;
+  }
+
+  &.iw-flex-align-start {
+    align-items: flex-start;
+  }
+
+  &.iw-flex-align-stretch {
+    align-items: stretch;
+  }
+
+  &.iw-flex-align-center {
+    align-items: center;
+  }
+
+  &.iw-flex-align-end {
+    align-items: flex-end;
+  }
+
+  &.iw-flex-align-baseline {
+    align-items: baseline;
+  }
+
+  &.iw-flex-gap-none {
+    gap: 0;
+  }
+
+  &.iw-flex-gap-sm {
+    gap: var(--iw-space-2);
+  }
+
+  &.iw-flex-gap-md {
+    gap: var(--iw-space-4);
+  }
+
+  &.iw-flex-gap-lg {
+    gap: var(--iw-space-6);
+  }
+
+  &.iw-flex-gap-xl {
+    gap: var(--iw-space-8);
+  }
+}

package/src/layout/flex/template.js

@@ -0,0 +1,41 @@
+/**
+ * @typedef {import('../../../types/layout/flex').FlexEntity} FlexEntity
+ * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html } from "@inglorious/web"
+
+/**
+ * Flex layout component for Inglorious Web.
+ * Children are rendered as-is (templates/content composition).
+ *
+ * @param {FlexEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(entity) {
+  const {
+    direction = "row",
+    wrap = "nowrap",
+    justify = "start",
+    align = "stretch",
+    gap = "md",
+    inline = false,
+    fullWidth = false,
+    children = [],
+  } = entity
+
+  const classes = {
+    "iw-flex": true,
+    "iw-flex-inline": inline,
+    "iw-flex-full-width": fullWidth,
+    [`iw-flex-direction-${direction}`]: true,
+    [`iw-flex-wrap-${wrap}`]: true,
+    [`iw-flex-justify-${justify}`]: true,
+    [`iw-flex-align-${align}`]: true,
+    [`iw-flex-gap-${gap}`]: true,
+  }
+
+  return html`<div class=${classMap(classes)}>${children}</div>`
+}

package/src/layout/grid/grid.stories.js

@@ -0,0 +1,82 @@
+import { html } from "@inglorious/web"
+
+import {
+  makeStoryRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { grid } from "."
+
+export default {
+  title: "Layout/Grid",
+  tags: ["autodocs"],
+  render: makeStoryRender(grid, "story-grid"),
+  argTypes: {
+    ...notifyActionArgType,
+    columns: {
+      control: "number",
+      description: "Fixed number of columns when auto-fit is not used.",
+    },
+    minColumnWidth: {
+      control: "text",
+      description: "Enables auto-fit columns with minmax(minColumnWidth, 1fr).",
+    },
+    gap: {
+      control: "select",
+      options: ["none", "sm", "md", "lg", "xl"],
+      description: "Spacing between grid cells.",
+    },
+    align: {
+      control: "select",
+      options: ["stretch", "start", "center", "end"],
+      description: "Cross-axis alignment for cell content.",
+    },
+    justify: {
+      control: "select",
+      options: ["stretch", "start", "center", "end"],
+      description: "Inline-axis alignment for cell content.",
+    },
+    fullWidth: {
+      control: "boolean",
+      description: "Expands container width to 100%.",
+    },
+    children: {
+      control: "object",
+      description: "Array of templates/content rendered as-is.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Layout primitive for two-dimensional arrangement of template children.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  columns: 3,
+  gap: "md",
+  align: "stretch",
+  justify: "stretch",
+  fullWidth: false,
+  children: [
+    html`<div>Cell A</div>`,
+    html`<div>Cell B</div>`,
+    html`<div>Cell C</div>`,
+  ],
+}
+
+export const AutoFit = {}
+AutoFit.args = {
+  ...Default.args,
+  minColumnWidth: "180px",
+  children: [
+    html`<div>Product</div>`,
+    html`<div>Price</div>`,
+    html`<div>Status</div>`,
+    html`<div>Actions</div>`,
+    html`<div>Notes</div>`,
+  ],
+}

package/src/layout/grid/index.js

@@ -0,0 +1,4 @@
+import { withRenderValidation } from "../../shared/withRenderValidation.js"
+import * as renderers from "./template.js"
+
+export const grid = [{ ...renderers }, withRenderValidation]

package/src/layout/grid/style.css

@@ -0,0 +1,51 @@
+.iw-grid {
+  display: grid;
+}
+
+.iw-grid.iw-grid-full-width {
+  width: 100%;
+}
+
+.iw-grid.iw-grid-gap-none {
+  gap: 0;
+}
+
+.iw-grid.iw-grid-gap-sm {
+  gap: var(--iw-space-2);
+}
+
+.iw-grid.iw-grid-gap-md {
+  gap: var(--iw-space-4);
+}
+
+.iw-grid.iw-grid-gap-lg {
+  gap: var(--iw-space-6);
+}
+
+.iw-grid.iw-grid-gap-xl {
+  gap: var(--iw-space-8);
+}
+
+.iw-grid.iw-grid-align-start {
+  align-items: start;
+}
+
+.iw-grid.iw-grid-align-center {
+  align-items: center;
+}
+
+.iw-grid.iw-grid-align-end {
+  align-items: end;
+}
+
+.iw-grid.iw-grid-justify-start {
+  justify-items: start;
+}
+
+.iw-grid.iw-grid-justify-center {
+  justify-items: center;
+}
+
+.iw-grid.iw-grid-justify-end {
+  justify-items: end;
+}

package/src/layout/grid/template.js

@@ -0,0 +1,47 @@
+/**
+ * @typedef {import('../../../types/layout/grid').GridEntity} GridEntity
+ * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, styleMap } from "@inglorious/web"
+
+const DEFAULT_COLUMNS = 2
+
+/**
+ * Grid layout component for Inglorious Web.
+ * Children are rendered as-is (templates/content composition).
+ *
+ * @param {GridEntity} entity
+ * @param {Api} _api
+ * @returns {TemplateResult}
+ */
+export function render(entity) {
+  const {
+    columns = DEFAULT_COLUMNS,
+    minColumnWidth,
+    gap = "md",
+    align = "stretch",
+    justify = "stretch",
+    fullWidth = false,
+    children = [],
+  } = entity
+
+  const classes = {
+    "iw-grid": true,
+    "iw-grid-full-width": fullWidth,
+    [`iw-grid-gap-${gap}`]: true,
+    [`iw-grid-align-${align}`]: align !== "stretch",
+    [`iw-grid-justify-${justify}`]: justify !== "stretch",
+  }
+
+  const styles = minColumnWidth
+    ? {
+        gridTemplateColumns: `repeat(auto-fit, minmax(${minColumnWidth}, 1fr))`,
+      }
+    : { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }
+
+  return html`<div class=${classMap(classes)} style=${styleMap(styles)}>
+    ${children}
+  </div>`
+}

package/src/shared/applyElementProps.js

@@ -0,0 +1,79 @@
+const previousKeysByElement = new WeakMap()
+
+function clearProp(element, key) {
+  if (key in element && !key.includes("-")) {
+    try {
+      element[key] = undefined
+    } catch {
+      // Ignore read-only property assignments.
+    }
+  }
+  element.removeAttribute(key)
+}
+
+function setProp(element, key, value) {
+  if (value == null) {
+    clearProp(element, key)
+    return
+  }
+
+  if (typeof value === "boolean") {
+    if (value) {
+      element.setAttribute(key, "")
+    } else {
+      element.removeAttribute(key)
+    }
+
+    if (key in element && !key.includes("-")) {
+      try {
+        element[key] = value
+      } catch {
+        // Ignore read-only property assignments.
+      }
+    }
+    return
+  }
+
+  if (key === "style" && typeof value === "object" && value !== null) {
+    Object.assign(element.style, value)
+    return
+  }
+
+  if (key in element && !key.includes("-")) {
+    try {
+      element[key] = value
+      return
+    } catch {
+      // Fallback to attribute below.
+    }
+  }
+
+  element.setAttribute(key, String(value))
+}
+
+/**
+ * Apply arbitrary properties/attributes to an element.
+ * Useful when entities include extra DOM fields beyond the typed API.
+ *
+ * @param {Element | null} element
+ * @param {Record<string, unknown>} props
+ */
+export function applyElementProps(element, props) {
+  if (!element) return
+
+  const previousKeys = previousKeysByElement.get(element) ?? new Set()
+  const nextKeys = new Set(Object.keys(props))
+
+  for (const key of previousKeys) {
+    if (!nextKeys.has(key)) {
+      clearProp(element, key)
+    }
+  }
+
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "class" || key === "className") continue
+    setProp(element, key, value)
+  }
+
+  previousKeysByElement.set(element, nextKeys)
+}

package/src/shared/withRenderValidation.js

@@ -0,0 +1,19 @@
+export function withRenderValidation(type) {
+  if (typeof type.render !== "function") {
+    throw new TypeError(
+      "withRenderValidation(type): type.render must be a function",
+    )
+  }
+
+  return {
+    ...type,
+
+    render(entity, api) {
+      if (entity == null || api == null) {
+        throw new TypeError("render(entity, api): both arguments are required")
+      }
+
+      return type.render(entity, api)
+    },
+  }
+}

package/src/stories/notifyStory.js

@@ -0,0 +1,43 @@
+import { augmentType } from "@inglorious/store/types"
+import { createMockApi, render } from "@inglorious/web/test"
+
+export const notifyActionArgType = {
+  onNotify: {
+    action: "api.notify",
+    control: false,
+    table: { disable: true },
+  },
+}
+
+export function makeStoryRender(typeDefinition, id, options = {}) {
+  const { resolveByEntityType = false } = options
+  const type = augmentType(typeDefinition)
+
+  return (args) => {
+    const container = document.createElement("div")
+    const { onNotify, ...entityArgs } = args
+    const entity = { id, ...entityArgs }
+    const api = createInstrumentedApi(entity, onNotify)
+
+    if (resolveByEntityType && entity.type) {
+      const getType = api.getType?.bind(api)
+      api.getType = (typeName) =>
+        typeName === entity.type ? type : getType?.(typeName)
+    }
+
+    render(type.render(entity, api), container)
+    return container
+  }
+}
+
+function createInstrumentedApi(entityOrState, onNotify) {
+  const api = createMockApi(entityOrState)
+  const originalNotify = api.notify.bind(api)
+
+  api.notify = (type, payload) => {
+    onNotify?.({ type, payload })
+    return originalNotify(type, payload)
+  }
+
+  return api
+}