@inglorious/ui 0.1.0 → 1.0.1

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

@@ -1,17 +1,13 @@
 import { html } from "@inglorious/web"
 
-import {
-  makeStoryRender,
-  notifyActionArgType,
-} from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notifyStory.js"
 import { grid } from "."
 
 export default {
   title: "Layout/Grid",
   tags: ["autodocs"],
-  render: makeStoryRender(grid, "story-grid"),
+  render: createRender(grid),
   argTypes: {
-    ...notifyActionArgType,
     columns: {
       control: "number",
       description: "Fixed number of columns when auto-fit is not used.",
@@ -25,6 +21,25 @@ export default {
       options: ["none", "sm", "md", "lg", "xl"],
       description: "Spacing between grid cells.",
     },
+    padding: {
+      control: "select",
+      options: ["none", "sm", "md", "lg", "xl"],
+      description: "Inner padding for the grid container.",
+    },
+    element: {
+      control: "select",
+      options: [
+        "div",
+        "section",
+        "main",
+        "header",
+        "footer",
+        "nav",
+        "aside",
+        "article",
+      ],
+      description: "Semantic element for the container.",
+    },
     align: {
       control: "select",
       options: ["stretch", "start", "center", "end"],
@@ -35,7 +50,7 @@ export default {
       options: ["stretch", "start", "center", "end"],
       description: "Inline-axis alignment for cell content.",
     },
-    fullWidth: {
+    isFullWidth: {
       control: "boolean",
       description: "Expands container width to 100%.",
     },
@@ -43,6 +58,7 @@ export default {
       control: "object",
       description: "Array of templates/content rendered as-is.",
     },
+    onClick: { action: "onClick" },
   },
   parameters: {
     docs: {
@@ -54,29 +70,29 @@ export default {
   },
 }
 
-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 Default = {
+  args: {
+    align: "stretch",
+    justify: "stretch",
+    isFullWidth: false,
+    gap: "md",
+    padding: "none",
+    element: "div",
+    children: [
+      html`<div>Product</div>`,
+      html`<div>Price</div>`,
+      html`<div>Status</div>`,
+      html`<div>Actions</div>`,
+      html`<div>Notes</div>`,
+    ],
+    columns: 3,
+  },
 }
 
-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>`,
-  ],
+export const AutoFit = {
+  args: {
+    ...Default.args,
+    columns: 0,
+    minColumnWidth: "180px",
+  },
 }

package/src/layout/grid/index.js

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

package/src/layout/grid/style.css

@@ -26,6 +26,26 @@
   gap: var(--iw-space-8);
 }
 
+.iw-grid.iw-grid-padding-none {
+  padding: 0;
+}
+
+.iw-grid.iw-grid-padding-sm {
+  padding: var(--iw-space-2);
+}
+
+.iw-grid.iw-grid-padding-md {
+  padding: var(--iw-space-4);
+}
+
+.iw-grid.iw-grid-padding-lg {
+  padding: var(--iw-space-6);
+}
+
+.iw-grid.iw-grid-padding-xl {
+  padding: var(--iw-space-8);
+}
+
 .iw-grid.iw-grid-align-start {
   align-items: start;
 }

package/src/layout/grid/template.js

@@ -1,47 +1,127 @@
 /**
- * @typedef {import('../../../types/layout/grid').GridEntity} GridEntity
- * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('../../../types/layout/grid').GridProps} GridProps
  * @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
+ * @param {GridProps} props
  * @returns {TemplateResult}
  */
-export function render(entity) {
+export function render(props) {
   const {
-    columns = DEFAULT_COLUMNS,
-    minColumnWidth,
+    element = "div",
+    columns = 0,
+    minColumnWidth = 0,
     gap = "md",
+    padding = "none",
     align = "stretch",
     justify = "stretch",
-    fullWidth = false,
+    isFullWidth = false,
+    className = "",
     children = [],
-  } = entity
+    onClick,
+  } = props
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
 
   const classes = {
     "iw-grid": true,
-    "iw-grid-full-width": fullWidth,
+    "iw-grid-full-width": isFullWidth,
     [`iw-grid-gap-${gap}`]: true,
+    [`iw-grid-padding-${padding}`]: true,
     [`iw-grid-align-${align}`]: align !== "stretch",
     [`iw-grid-justify-${justify}`]: justify !== "stretch",
+    ...extraClasses,
   }
 
-  const styles = minColumnWidth
-    ? {
-        gridTemplateColumns: `repeat(auto-fit, minmax(${minColumnWidth}, 1fr))`,
-      }
-    : { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }
+  const styles = {}
+  if (typeof columns !== "number") {
+    styles.gridTemplateColumns = columns
+  } else {
+    styles.gridTemplateColumns = `repeat(${columns || "auto-fit"}, minmax(${minColumnWidth}, 1fr))`
+  }
 
-  return html`<div class=${classMap(classes)} style=${styleMap(styles)}>
-    ${children}
-  </div>`
+  return renderElement(element, classes, styles, onClick, children)
+}
+
+function renderElement(element, classes, styles, onClick, children) {
+  const classValue = classMap(classes)
+  const styleValue = styleMap(styles)
+
+  switch (element) {
+    case "section":
+      return html`<section
+        class=${classValue}
+        style=${styleValue}
+        @click=${onClick}
+      >
+        ${children}
+      </section>`
+    case "main":
+      return html`<main
+        class=${classValue}
+        style=${styleValue}
+        @click=${onClick}
+      >
+        ${children}
+      </main>`
+    case "header":
+      return html`<header
+        class=${classValue}
+        style=${styleValue}
+        @click=${onClick}
+      >
+        ${children}
+      </header>`
+    case "footer":
+      return html`<footer
+        class=${classValue}
+        style=${styleValue}
+        @click=${onClick}
+      >
+        ${children}
+      </footer>`
+    case "nav":
+      return html`<nav
+        class=${classValue}
+        style=${styleValue}
+        @click=${onClick}
+      >
+        ${children}
+      </nav>`
+    case "aside":
+      return html`<aside
+        class=${classValue}
+        style=${styleValue}
+        @click=${onClick}
+      >
+        ${children}
+      </aside>`
+    case "article":
+      return html`<article
+        class=${classValue}
+        style=${styleValue}
+        @click=${onClick}
+      >
+        ${children}
+      </article>`
+    default:
+      return html`<div
+        class=${classValue}
+        style=${styleValue}
+        @click=${onClick}
+      >
+        ${children}
+      </div>`
+  }
 }

package/src/layout/layout.css

@@ -0,0 +1,3 @@
+@import "./container/style.css";
+@import "./flex/style.css";
+@import "./grid/style.css";

package/src/navigation/bottom-navigation/bottom-navigation.stories.js

@@ -0,0 +1,33 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { bottomNavigation } from "."
+
+export default {
+  title: "Navigation/Bottom Navigation",
+  tags: ["autodocs"],
+  render: createRender(bottomNavigation),
+  argTypes: {
+    actions: { control: "object", description: "Bottom navigation actions." },
+    value: { control: "text", description: "Currently selected action value." },
+    hasLabels: { control: "boolean", description: "Show labels below icons." },
+    onChange: { action: "onChange" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Bottom bar action navigation with overridable `renderAction`.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    value: "recents",
+    actions: [
+      { value: "recents", label: "Recents", icon: "🕘" },
+      { value: "favorites", label: "Favorites", icon: "★" },
+      { value: "nearby", label: "Nearby", icon: "📍" },
+    ],
+  },
+}

package/src/navigation/bottom-navigation/index.js

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

package/src/navigation/bottom-navigation/style.css

@@ -0,0 +1,32 @@
+.iw-bottom-navigation {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-around;
+  gap: var(--iw-space-2);
+  padding: var(--iw-space-2);
+  background: var(--iw-color-surface);
+  border-top: 1px solid var(--iw-color-border);
+}
+
+.iw-bottom-navigation-action {
+  flex: 1 1 0;
+  min-width: 0;
+  border: 0 none;
+  background: transparent;
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--iw-space-1);
+  padding: var(--iw-space-2);
+  cursor: pointer;
+}
+
+.iw-bottom-navigation-action-selected {
+  color: var(--iw-color-primary);
+}
+
+.iw-bottom-navigation-label {
+  font-size: var(--iw-font-size-sm);
+}

package/src/navigation/bottom-navigation/template.js

@@ -0,0 +1,74 @@
+/**
+ * @typedef {import('../../../types/navigation/bottom-navigation').BottomNavigationProps} BottomNavigationProps
+ * @typedef {import('../../../types/navigation/bottom-navigation').BottomNavigationAction} BottomNavigationAction
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref } from "@inglorious/web"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+export const bottomNavigation = {
+  /**
+   * @param {BottomNavigationProps} props
+   * @returns {TemplateResult}
+   */
+  render(props) {
+    const {
+      type, // eslint-disable-line no-unused-vars
+      actions = [],
+      value,
+      hasLabels = true,
+      className = "",
+      ...rest
+    } = props
+
+    const extraClasses = Object.fromEntries(
+      className
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((name) => [name, true]),
+    )
+
+    return html`<nav
+      class=${classMap({ "iw-bottom-navigation": true, ...extraClasses })}
+      ${ref((el) => applyElementProps(el, rest))}
+    >
+      ${actions.map((action, index) =>
+        this.renderAction(action, index, { ...props, hasLabels, value }),
+      )}
+    </nav>`
+  },
+
+  /**
+   * @param {BottomNavigationAction} action
+   * @param {number} index
+   * @param {BottomNavigationProps} props
+   * @returns {TemplateResult}
+   */
+  renderAction(action, index, props) {
+    const currentValue = action.value ?? index
+    const selected = currentValue === props.value
+
+    return html`<button
+      type="button"
+      class=${classMap({
+        "iw-bottom-navigation-action": true,
+        "iw-bottom-navigation-action-selected": selected,
+      })}
+      aria-current=${selected ? "page" : null}
+      ?disabled=${action.isDisabled}
+      @click=${() => {
+        action.onClick?.(currentValue)
+        props.onChange?.(currentValue)
+      }}
+    >
+      ${action.icon
+        ? html`<span class="iw-bottom-navigation-icon">${action.icon}</span>`
+        : null}
+      ${props.hasLabels
+        ? html`<span class="iw-bottom-navigation-label">${action.label}</span>`
+        : null}
+    </button>`
+  },
+}

package/src/navigation/breadcrumbs/breadcrumbs.stories.js

@@ -0,0 +1,33 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { breadcrumbs } from "."
+
+export default {
+  title: "Navigation/Breadcrumbs",
+  tags: ["autodocs"],
+  render: createRender(breadcrumbs),
+  argTypes: {
+    items: { control: "object", description: "Ordered breadcrumb path items." },
+    separator: {
+      control: "text",
+      description: "Separator rendered between items.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Hierarchical path navigation with overridable `renderItem`.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    items: [
+      { label: "Home", href: "#" },
+      { label: "Library", href: "#" },
+      { label: "Data" },
+    ],
+  },
+}

package/src/navigation/breadcrumbs/index.js

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

package/src/navigation/breadcrumbs/style.css

@@ -0,0 +1,27 @@
+.iw-breadcrumbs-list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--iw-space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.iw-breadcrumbs-link {
+  color: var(--iw-color-primary);
+  text-decoration: none;
+}
+
+.iw-breadcrumbs-link:hover {
+  text-decoration: underline;
+}
+
+.iw-breadcrumbs-separator {
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+}
+
+.iw-breadcrumbs-current {
+  color: var(--iw-color-text-secondary, var(--iw-color-text));
+  font-weight: var(--iw-font-weight-normal);
+}

package/src/navigation/breadcrumbs/template.js

@@ -0,0 +1,79 @@
+/**
+ * @typedef {import('../../../types/navigation/breadcrumbs').BreadcrumbsProps} BreadcrumbsProps
+ * @typedef {import('../../../types/navigation/breadcrumbs').BreadcrumbItem} BreadcrumbItem
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref } from "@inglorious/web"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+export const breadcrumbs = {
+  /**
+   * @param {BreadcrumbsProps} props
+   * @returns {TemplateResult}
+   */
+  render(props) {
+    const {
+      type, // eslint-disable-line no-unused-vars
+      items = [],
+      separator = "/",
+      className = "",
+      ...rest
+    } = props
+
+    const extraClasses = Object.fromEntries(
+      className
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((name) => [name, true]),
+    )
+
+    return html`<nav
+      aria-label="Breadcrumb"
+      class=${classMap({ "iw-breadcrumbs": true, ...extraClasses })}
+      ${ref((el) => applyElementProps(el, rest))}
+    >
+      <ol class="iw-breadcrumbs-list">
+        ${items.map(
+          (item, index) =>
+            html`${this.renderItem(item, index, props)}${index <
+            items.length - 1
+              ? html`<li class="iw-breadcrumbs-separator" aria-hidden="true">
+                  ${separator}
+                </li>`
+              : null}`,
+        )}
+      </ol>
+    </nav>`
+  },
+
+  /**
+   * @param {BreadcrumbItem} item
+   * @param {number} index
+   * @param {BreadcrumbsProps} props
+   * @returns {TemplateResult}
+   */
+  renderItem(item, index, props) {
+    const isLast = index === props.items.length - 1
+
+    return html`<li class="iw-breadcrumbs-item">
+      ${item.href && !isLast
+        ? html`<a
+            href=${item.href}
+            class="iw-breadcrumbs-link"
+            @click=${item.onClick ?? null}
+          >
+            ${item.label}
+          </a>`
+        : html`<span
+            class=${classMap({
+              "iw-breadcrumbs-current": isLast,
+            })}
+            aria-current=${isLast ? "page" : null}
+          >
+            ${item.label}
+          </span>`}
+    </li>`
+  },
+}

package/src/navigation/drawer/drawer.stories.js

@@ -0,0 +1,60 @@
+import { html } from "@inglorious/web"
+
+import { createRender } from "../../stories/notifyStory.js"
+import { drawer } from "."
+
+export default {
+  title: "Navigation/Drawer",
+  tags: ["autodocs"],
+  render: createRender(drawer),
+  argTypes: {
+    isOpen: {
+      control: "boolean",
+      description: "Whether the drawer is visible.",
+    },
+    anchor: {
+      control: "select",
+      options: ["left", "right", "top", "bottom"],
+      description: "Edge from which the drawer appears.",
+    },
+    variant: {
+      control: "select",
+      options: ["temporary", "persistent", "permanent", "responsive"],
+      description: "Drawer behavior model.",
+    },
+    breakpoint: {
+      control: "select",
+      options: ["sm", "md", "lg", "xl"],
+      description: "Desktop breakpoint for responsive drawers.",
+    },
+    isCollapsed: {
+      control: "boolean",
+      description: "Whether a responsive drawer is collapsed on desktop.",
+    },
+    title: { control: "text", description: "Optional drawer header title." },
+    onClose: { action: "onClose" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Overlay or persistent navigation panel anchored to a viewport edge.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    isOpen: true,
+    title: "Workspace",
+    children: html`<div>Navigation items</div>`,
+  },
+}
+
+export const Right = {
+  args: {
+    ...Default.args,
+    anchor: "right",
+  },
+}

package/src/navigation/drawer/index.js

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