@inglorious/ui 0.1.0 → 1.0.0

package/src/feedback/skeleton/template.js

@@ -0,0 +1,48 @@
+/**
+ * @typedef {import('../../../types/feedback/skeleton').SkeletonProps} SkeletonProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html } from "@inglorious/web"
+
+/**
+ * @param {SkeletonProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const { variant = "text", width, height, lines = 1, className = "" } = props
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
+  const style = [
+    width != null
+      ? `width: ${typeof width === "number" ? `${width}px` : width};`
+      : "",
+    height != null
+      ? `height: ${typeof height === "number" ? `${height}px` : height};`
+      : "",
+  ]
+    .filter(Boolean)
+    .join(" ")
+
+  const classes = {
+    "iw-skeleton": true,
+    [`iw-skeleton-${variant}`]: variant !== "text",
+    ...extraClasses,
+  }
+
+  if (lines > 1) {
+    return html`<div class="iw-skeleton-stack">
+      ${Array.from({ length: lines }).map(
+        () => html`<div class=${classMap(classes)} style=${style}></div>`,
+      )}
+    </div>`
+  }
+
+  return html`<div class=${classMap(classes)} style=${style}></div>`
+}

package/src/feedback/snackbar/index.js

@@ -0,0 +1,3 @@
+import { render } from "./template.js"
+
+export const snackbar = { render }

package/src/feedback/snackbar/snackbar.stories.js

@@ -0,0 +1,25 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { snackbar } from "."
+
+export default {
+  title: "Feedback/Snackbar",
+  tags: ["autodocs"],
+  render: createRender(snackbar),
+  argTypes: {
+    isOpen: { control: "boolean" },
+    message: { control: "text" },
+    position: {
+      control: "select",
+      options: ["bottom-left", "bottom-right", "top-left", "top-right"],
+    },
+    onClose: { action: "onClose" },
+  },
+}
+
+export const Default = {
+  args: {
+    isOpen: true,
+    message: "Saved successfully",
+    position: "bottom-left",
+  },
+}

package/src/feedback/snackbar/style.css

@@ -0,0 +1,64 @@
+.iw-snackbar {
+  position: fixed;
+  z-index: var(--iw-z-popover, 1060);
+}
+
+.iw-snackbar-bottom-left {
+  left: var(--iw-space-4);
+  bottom: var(--iw-space-4);
+}
+
+.iw-snackbar-bottom-right {
+  right: var(--iw-space-4);
+  bottom: var(--iw-space-4);
+}
+
+.iw-snackbar-top-left {
+  left: var(--iw-space-4);
+  top: var(--iw-space-4);
+}
+
+.iw-snackbar-top-right {
+  right: var(--iw-space-4);
+  top: var(--iw-space-4);
+}
+
+.iw-snackbar-content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--iw-space-2);
+  padding: var(--iw-space-2) var(--iw-space-3) var(--iw-space-2)
+    var(--iw-space-4);
+  background: color-mix(
+    in srgb,
+    var(--iw-color-surface, #222) 84%,
+    var(--iw-color-black)
+  );
+  color: var(--iw-color-text, #fff);
+  border: 1px solid
+    color-mix(in srgb, var(--iw-color-border, #555) 65%, transparent);
+  border-radius: var(--iw-radius-md);
+  box-shadow: var(--iw-shadow-lg, 0 6px 20px rgba(0, 0, 0, 0.3));
+}
+
+.iw-snackbar-action {
+  display: inline-flex;
+  align-items: center;
+}
+
+.iw-snackbar-close {
+  border: 0 none;
+  background: transparent;
+  cursor: pointer;
+  color: inherit;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--iw-radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.iw-snackbar-close:hover {
+  background-color: color-mix(in srgb, currentColor 12%, transparent);
+}

package/src/feedback/snackbar/template.js

@@ -0,0 +1,55 @@
+/**
+ * @typedef {import('../../../types/feedback/snackbar').SnackbarProps} SnackbarProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html } from "@inglorious/web"
+
+/**
+ * @param {SnackbarProps} props
+ * @returns {TemplateResult | null}
+ */
+export function render(props) {
+  const {
+    isOpen = false,
+    message,
+    action,
+    className = "",
+    position = "bottom-left",
+    onClose,
+  } = props
+
+  if (!isOpen) return null
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
+  return html`<div
+    class=${classMap({
+      "iw-snackbar": true,
+      [`iw-snackbar-${position}`]: true,
+      ...extraClasses,
+    })}
+    role="status"
+    aria-live="polite"
+  >
+    <div class="iw-snackbar-content">
+      <span class="iw-snackbar-message">${message}</span>
+      ${action ? html`<span class="iw-snackbar-action">${action}</span>` : null}
+      ${onClose
+        ? html`<button
+            type="button"
+            class="iw-snackbar-close"
+            aria-label="Dismiss"
+            @click=${onClose}
+          >
+            ×
+          </button>`
+        : null}
+    </div>
+  </div>`
+}

package/src/index.js

@@ -9,6 +9,37 @@ 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 { avatar } from "./data-display/avatar/index.js"
+export { badge } from "./data-display/badge/index.js"
+export { chip } from "./data-display/chip/index.js"
+export { dataGrid } from "./data-display/data-grid/index.js"
+export { divider } from "./data-display/divider/index.js"
+export { icon } from "./data-display/icon/index.js"
+export { list } from "./data-display/list/index.js"
+export { materialIcon } from "./data-display/material-icon/index.js"
+export { table } from "./data-display/table/index.js"
+export { tooltip } from "./data-display/tooltip/index.js"
+export { typography } from "./data-display/typography/index.js"
+export { virtualList } from "./data-display/virtual-list/index.js"
+export { alert } from "./feedback/alert/index.js"
+export { backdrop } from "./feedback/backdrop/index.js"
+export { dialog } from "./feedback/dialog/index.js"
+export { progress } from "./feedback/progress/index.js"
+export { skeleton } from "./feedback/skeleton/index.js"
+export { snackbar } from "./feedback/snackbar/index.js"
+export { container } from "./layout/container/index.js"
 export { flex } from "./layout/flex/index.js"
 export { grid } from "./layout/grid/index.js"
+export { bottomNavigation } from "./navigation/bottom-navigation/index.js"
+export { breadcrumbs } from "./navigation/breadcrumbs/index.js"
+export { drawer } from "./navigation/drawer/index.js"
+export { link } from "./navigation/link/index.js"
+export { menu } from "./navigation/menu/index.js"
+export { pagination } from "./navigation/pagination/index.js"
+export { speedDial } from "./navigation/speed-dial/index.js"
+export { stepper } from "./navigation/stepper/index.js"
+export { tabs } from "./navigation/tabs/index.js"
+export { accordion } from "./surfaces/accordion/index.js"
+export { appBar } from "./surfaces/app-bar/index.js"
+export { card } from "./surfaces/card/index.js"
+export { paper } from "./surfaces/paper/index.js"

package/src/layout/container/container.stories.js

@@ -0,0 +1,105 @@
+import { html } from "@inglorious/web"
+
+import { createRender } from "../../stories/notifyStory.js"
+import { container } from "."
+
+export default {
+  title: "Layout/Container",
+  tags: ["autodocs"],
+  render: createRender(container),
+  argTypes: {
+    maxWidth: {
+      control: "text",
+      description:
+        "Maximum width. Presets: xs/sm/md/lg/xl, CSS length, number (px), or false/none.",
+    },
+    isFixed: {
+      control: "boolean",
+      description: "Keeps container width fixed at the selected max width.",
+    },
+    padding: {
+      control: "select",
+      options: ["none", "sm", "md", "lg", "xl"],
+      description: "Horizontal padding preset.",
+    },
+    isCentered: {
+      control: "boolean",
+      description: "Centers container with auto horizontal margins.",
+    },
+    element: {
+      control: "select",
+      options: [
+        "div",
+        "section",
+        "main",
+        "header",
+        "footer",
+        "nav",
+        "aside",
+        "article",
+      ],
+      description: "Semantic element for the container.",
+    },
+    children: {
+      control: "text",
+      description: "Container content.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Responsive width constraint wrapper for page sections and app shells.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    maxWidth: "lg",
+    isFixed: false,
+    padding: undefined,
+    isCentered: true,
+    element: "div",
+    children: html`<div style="padding: 1rem; border: 1px dashed currentColor;">
+      Content inside container
+    </div>`,
+  },
+}
+
+export const WidthPresets = {
+  render: () =>
+    html`<div style="display: grid; gap: 0.75rem;">
+      ${["xs", "sm", "md", "lg", "xl"].map(
+        (size) =>
+          html`<div>
+            <div
+              style="font-size: 0.875rem; opacity: 0.85; margin-bottom: 0.25rem;"
+            >
+              ${size}
+            </div>
+            ${container.render({
+              maxWidth: size,
+              children: html`<div
+                style="padding: 0.5rem 0.75rem; border: 1px solid var(--iw-color-border);"
+              >
+                ${size} container
+              </div>`,
+            })}
+          </div>`,
+      )}
+    </div>`,
+}
+
+export const WithoutPadding = {
+  args: {
+    ...Default.args,
+    padding: "none",
+    children: html`<div
+      style="padding: 1rem; background: color-mix(in srgb, var(--iw-color-primary) 14%, transparent);"
+    >
+      Edge-to-edge content
+    </div>`,
+  },
+}

package/src/layout/container/index.js

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

package/src/layout/container/style.css

@@ -0,0 +1,34 @@
+.iw-container {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 68rem;
+  padding-inline: var(--iw-space-4);
+}
+
+.iw-container-centered {
+  margin-inline: auto;
+}
+
+.iw-container-fixed {
+  width: 100%;
+}
+
+.iw-container-padding-none {
+  padding: 0;
+}
+
+.iw-container-padding-sm {
+  padding-left: var(--iw-space-2);
+}
+
+.iw-container-padding-md {
+  padding: var(--iw-space-4);
+}
+
+.iw-container-padding-lg {
+  padding: var(--iw-space-6);
+}
+
+.iw-container-padding-xl {
+  padding: var(--iw-space-8);
+}

package/src/layout/container/template.js

@@ -0,0 +1,119 @@
+/**
+ * @typedef {import('../../../types/layout/container').ContainerProps} ContainerProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref, styleMap } from "@inglorious/web"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+const SIZE_TO_MAX_WIDTH = {
+  xs: "32rem",
+  sm: "40rem",
+  md: "52rem",
+  lg: "68rem",
+  xl: "80rem",
+}
+
+/**
+ * @param {ContainerProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    type, // eslint-disable-line no-unused-vars
+    element = "div",
+    children,
+    maxWidth = "lg",
+    isFixed = false,
+    padding = "md",
+    isCentered = true,
+    className = "",
+    ...rest
+  } = props
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
+  const classes = {
+    "iw-container": true,
+    "iw-container-fixed": isFixed,
+    "iw-container-centered": isCentered,
+    [`iw-container-padding-${padding}`]: true,
+    ...extraClasses,
+  }
+
+  const styles = getContainerStyle(maxWidth, isFixed)
+
+  return renderElement(element, classes, styles, rest, children)
+}
+
+function renderElement(element, classes, styles, rest, children) {
+  const classValue = classMap(classes)
+  const styleValue = styleMap(styles)
+  const refValue = ref((el) => applyElementProps(el, rest))
+
+  switch (element) {
+    case "section":
+      return html`<section class=${classValue} style=${styleValue} ${refValue}>
+        ${children}
+      </section>`
+    case "main":
+      return html`<main class=${classValue} style=${styleValue} ${refValue}>
+        ${children}
+      </main>`
+    case "header":
+      return html`<header class=${classValue} style=${styleValue} ${refValue}>
+        ${children}
+      </header>`
+    case "footer":
+      return html`<footer class=${classValue} style=${styleValue} ${refValue}>
+        ${children}
+      </footer>`
+    case "nav":
+      return html`<nav class=${classValue} style=${styleValue} ${refValue}>
+        ${children}
+      </nav>`
+    case "aside":
+      return html`<aside class=${classValue} style=${styleValue} ${refValue}>
+        ${children}
+      </aside>`
+    case "article":
+      return html`<article class=${classValue} style=${styleValue} ${refValue}>
+        ${children}
+      </article>`
+    default:
+      return html`<div class=${classValue} style=${styleValue} ${refValue}>
+        ${children}
+      </div>`
+  }
+}
+
+function getContainerStyle(maxWidth, fixed) {
+  if (maxWidth === false || maxWidth === "none") {
+    return { maxWidth: "none" }
+  }
+
+  if (fixed && typeof maxWidth === "string" && SIZE_TO_MAX_WIDTH[maxWidth]) {
+    return {
+      width: "100%",
+      maxWidth: SIZE_TO_MAX_WIDTH[maxWidth],
+    }
+  }
+
+  if (typeof maxWidth === "number") {
+    return { maxWidth: `${maxWidth}px` }
+  }
+
+  if (typeof maxWidth === "string") {
+    return {
+      maxWidth: SIZE_TO_MAX_WIDTH[maxWidth] ?? maxWidth,
+    }
+  }
+
+  return { maxWidth: SIZE_TO_MAX_WIDTH.lg }
+}

package/src/layout/flex/flex.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 { flex } from "."
 
 export default {
   title: "Layout/Flex",
   tags: ["autodocs"],
-  render: makeStoryRender(flex, "story-flex"),
+  render: createRender(flex),
   argTypes: {
-    ...notifyActionArgType,
     direction: {
       control: "select",
       options: ["row", "column", "row-reverse", "column-reverse"],
@@ -37,11 +33,30 @@ export default {
       options: ["none", "sm", "md", "lg", "xl"],
       description: "Spacing between children.",
     },
-    inline: {
+    padding: {
+      control: "select",
+      options: ["none", "sm", "md", "lg", "xl"],
+      description: "Inner padding for the flex container.",
+    },
+    element: {
+      control: "select",
+      options: [
+        "div",
+        "section",
+        "main",
+        "header",
+        "footer",
+        "nav",
+        "aside",
+        "article",
+      ],
+      description: "Semantic element for the container.",
+    },
+    isInline: {
       control: "boolean",
       description: "Uses inline-flex instead of flex.",
     },
-    fullWidth: {
+    isFullWidth: {
       control: "boolean",
       description: "Expands container width to 100%.",
     },
@@ -49,6 +64,7 @@ export default {
       control: "object",
       description: "Array of templates/content rendered as-is.",
     },
+    onClick: { action: "onClick" },
   },
   parameters: {
     docs: {
@@ -67,8 +83,10 @@ Default.args = {
   justify: "start",
   align: "stretch",
   gap: "md",
-  inline: false,
-  fullWidth: false,
+  padding: "none",
+  element: "div",
+  isInline: false,
+  isFullWidth: false,
   children: [
     html`<div>First</div>`,
     html`<div>Second</div>`,

package/src/layout/flex/index.js

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

package/src/layout/flex/style.css

@@ -100,4 +100,24 @@
   &.iw-flex-gap-xl {
     gap: var(--iw-space-8);
   }
+
+  &.iw-flex-padding-none {
+    padding: 0;
+  }
+
+  &.iw-flex-padding-sm {
+    padding: var(--iw-space-2);
+  }
+
+  &.iw-flex-padding-md {
+    padding: var(--iw-space-4);
+  }
+
+  &.iw-flex-padding-lg {
+    padding: var(--iw-space-6);
+  }
+
+  &.iw-flex-padding-xl {
+    padding: var(--iw-space-8);
+  }
 }

package/src/layout/flex/template.js

@@ -1,41 +1,68 @@
 /**
- * @typedef {import('../../../types/layout/flex').FlexEntity} FlexEntity
- * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('../../../types/layout/flex').FlexProps} FlexProps
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { classMap, html } from "@inglorious/web"
+import { classMap, ref, staticHtml, unsafeStatic } from "@inglorious/web"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
 
 /**
  * Flex layout component for Inglorious Web.
  * Children are rendered as-is (templates/content composition).
  *
- * @param {FlexEntity} entity
- * @param {Api} api
+ * @param {FlexProps} props
  * @returns {TemplateResult}
  */
-export function render(entity) {
+export function render(props) {
   const {
+    element = "div",
     direction = "row",
     wrap = "nowrap",
     justify = "start",
     align = "stretch",
-    gap = "md",
-    inline = false,
-    fullWidth = false,
+    gap = "none",
+    padding = "none",
+    isInline = false,
+    isFullWidth = false,
+    className = "",
     children = [],
-  } = entity
+    onClick,
+    ...rest
+  } = props
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
 
   const classes = {
     "iw-flex": true,
-    "iw-flex-inline": inline,
-    "iw-flex-full-width": fullWidth,
+    "iw-flex-inline": isInline,
+    "iw-flex-full-width": isFullWidth,
     [`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,
+    [`iw-flex-padding-${padding}`]: true,
+    ...extraClasses,
   }
 
-  return html`<div class=${classMap(classes)}>${children}</div>`
+  return renderElement(element, classes, onClick, children, rest)
+}
+
+function renderElement(element, classes, onClick, children, rest) {
+  const classValue = classMap(classes)
+  const staticTag = unsafeStatic(element)
+
+  return staticHtml`<${staticTag}
+    class=${classValue}
+    @click=${onClick}
+    ${ref((node) => applyElementProps(node, rest))}
+  >
+    ${children}
+  </${staticTag}>`
 }