@inglorious/ui 0.1.0 → 1.0.1

package/src/surfaces/card/card.stories.js

@@ -0,0 +1,108 @@
+import { html } from "@inglorious/web"
+
+import { createRender } from "../../stories/notifyStory.js"
+import { card } from "."
+
+export default {
+  title: "Surfaces/Card",
+  tags: ["autodocs"],
+  render: createRender(card),
+  argTypes: {
+    title: {
+      control: "text",
+      description: "Default header title.",
+    },
+    subtitle: {
+      control: "text",
+      description: "Default header subtitle.",
+    },
+    children: {
+      control: "text",
+      description: "Default body content.",
+    },
+    footer: {
+      control: "text",
+      description: "Footer region content.",
+    },
+    element: {
+      control: "select",
+      options: [
+        "article",
+        "section",
+        "div",
+        "main",
+        "header",
+        "footer",
+        "nav",
+        "aside",
+      ],
+      description: "Semantic element for the card root.",
+    },
+    headerPadding: {
+      control: "select",
+      options: ["none", "sm", "md", "lg", "xl"],
+      description: "Header padding preset.",
+    },
+    bodyPadding: {
+      control: "select",
+      options: ["none", "sm", "md", "lg", "xl"],
+      description: "Body padding preset.",
+    },
+    footerPadding: {
+      control: "select",
+      options: ["none", "sm", "md", "lg", "xl"],
+      description: "Footer padding preset.",
+    },
+    isHoverable: {
+      control: "boolean",
+      description: "Enable hover visual feedback.",
+    },
+    isClickable: {
+      control: "boolean",
+      description: "Marks the card as interactive and clickable.",
+    },
+    isFullWidth: {
+      control: "boolean",
+      description: "Expand to fill parent width.",
+    },
+    onClick: { action: "onClick" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Composite surface with overridable `renderHeader`, `renderBody`, and `renderFooter` methods.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    title: "Card Title",
+    subtitle: "This is a card subtitle",
+    children: "Body content",
+    element: "article",
+    headerPadding: "md",
+    bodyPadding: "md",
+    footerPadding: "md",
+  },
+}
+
+export const WithFooter = {
+  args: {
+    title: "Card with footer",
+    children: "Body content",
+    footer: html`<button class="iw-button iw-button-sm">Save</button>`,
+  },
+}
+
+export const Interactive = {
+  args: {
+    title: "Interactive Card",
+    subtitle: "Hover and click enabled",
+    children: "Clickable body",
+    isHoverable: true,
+    isClickable: true,
+  },
+}

package/src/surfaces/card/index.js

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

package/src/surfaces/card/style.css

@@ -0,0 +1,107 @@
+.iw-card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--iw-card-bg);
+  border: 1px solid var(--iw-card-border);
+  border-radius: var(--iw-card-radius);
+  box-shadow: var(--iw-card-shadow);
+  overflow: hidden;
+  transition:
+    box-shadow var(--iw-transition-normal),
+    transform var(--iw-transition-normal);
+}
+
+.iw-card-hoverable:hover {
+  box-shadow: var(--iw-card-shadow-hover);
+}
+
+.iw-card-clickable {
+  cursor: pointer;
+}
+
+.iw-card-clickable:active {
+  transform: translateY(1px);
+}
+
+.iw-card-full-width {
+  width: 100%;
+}
+
+.iw-card-header {
+  padding: var(--iw-space-4);
+  border-bottom: 1px solid var(--iw-color-border);
+}
+
+.iw-card-header-padding-none {
+  padding: 0;
+}
+
+.iw-card-header-padding-sm {
+  padding: var(--iw-space-2);
+}
+
+.iw-card-header-padding-lg {
+  padding: var(--iw-space-6);
+}
+
+.iw-card-header-padding-xl {
+  padding: var(--iw-space-8);
+}
+
+.iw-card-title {
+  margin: 0;
+  font-size: var(--iw-font-size-lg);
+  font-weight: var(--iw-font-weight-semibold);
+  color: var(--iw-color-text);
+  line-height: var(--iw-line-height-tight);
+}
+
+.iw-card-subtitle {
+  margin: var(--iw-space-1) 0 0;
+  font-size: var(--iw-font-size-sm);
+  color: var(--iw-color-text-secondary);
+  line-height: var(--iw-line-height-normal);
+}
+
+.iw-card-body {
+  padding: var(--iw-space-4);
+  flex: 1;
+}
+
+.iw-card-body-padding-none {
+  padding: 0;
+}
+
+.iw-card-body-padding-sm {
+  padding: var(--iw-space-2);
+}
+
+.iw-card-body-padding-lg {
+  padding: var(--iw-space-6);
+}
+
+.iw-card-body-padding-xl {
+  padding: var(--iw-space-8);
+}
+
+.iw-card-footer {
+  padding: var(--iw-space-4);
+  border-top: 1px solid var(--iw-color-border);
+  background-color: var(--iw-color-bg-secondary);
+}
+
+.iw-card-footer-padding-none {
+  padding: 0;
+}
+
+.iw-card-footer-padding-sm {
+  padding: var(--iw-space-2);
+}
+
+.iw-card-footer-padding-lg {
+  padding: var(--iw-space-6);
+}
+
+.iw-card-footer-padding-xl {
+  padding: var(--iw-space-8);
+}

package/src/surfaces/card/template.js

@@ -0,0 +1,163 @@
+/**
+ * @typedef {import('../../../types/surfaces/card').CardProps} CardProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref } from "@inglorious/web"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+export const card = {
+  /**
+   * @param {CardProps} props
+   * @returns {TemplateResult}
+   */
+  render(props) {
+    const {
+      type, // eslint-disable-line no-unused-vars
+      element = "article",
+      isHoverable = false,
+      isClickable = false,
+      isFullWidth = false,
+      className = "",
+      onClick,
+      ...rest
+    } = props
+
+    const extraClasses = Object.fromEntries(
+      className
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((name) => [name, true]),
+    )
+
+    const classes = {
+      "iw-card": true,
+      "iw-card-hoverable": isHoverable || isClickable,
+      "iw-card-clickable": isClickable,
+      "iw-card-full-width": isFullWidth,
+      ...extraClasses,
+    }
+
+    return renderElement(
+      element,
+      classes,
+      onClick,
+      rest,
+      () => html`
+        ${this.renderHeader(props)} ${this.renderBody(props)}
+        ${this.renderFooter(props)}
+      `,
+    )
+  },
+
+  /**
+   * @param {CardProps} props
+   * @returns {TemplateResult | null}
+   */
+  renderHeader(props) {
+    const { title, subtitle, header, headerPadding = "md" } = props
+
+    if (header) {
+      return html`<div
+        class=${classMap({
+          "iw-card-header": true,
+          [`iw-card-header-padding-${headerPadding}`]: headerPadding !== "md",
+        })}
+      >
+        ${header}
+      </div>`
+    }
+
+    if (!title && !subtitle) return null
+
+    return html`<div
+      class=${classMap({
+        "iw-card-header": true,
+        [`iw-card-header-padding-${headerPadding}`]: headerPadding !== "md",
+      })}
+    >
+      ${title ? html`<h3 class="iw-card-title">${title}</h3>` : null}
+      ${subtitle ? html`<p class="iw-card-subtitle">${subtitle}</p>` : null}
+    </div>`
+  },
+
+  /**
+   * @param {CardProps} props
+   * @returns {TemplateResult | null}
+   */
+  renderBody(props) {
+    const { children, body, bodyPadding = "md" } = props
+    const content = body ?? children
+
+    if (content == null) return null
+
+    return html`<div
+      class=${classMap({
+        "iw-card-body": true,
+        [`iw-card-body-padding-${bodyPadding}`]: bodyPadding !== "md",
+      })}
+    >
+      ${content}
+    </div>`
+  },
+
+  /**
+   * @param {CardProps} props
+   * @returns {TemplateResult | null}
+   */
+  renderFooter(props) {
+    const { footer, footerPadding = "md" } = props
+
+    if (footer == null) return null
+
+    return html`<div
+      class=${classMap({
+        "iw-card-footer": true,
+        [`iw-card-footer-padding-${footerPadding}`]: footerPadding !== "md",
+      })}
+    >
+      ${footer}
+    </div>`
+  },
+}
+
+function renderElement(element, classes, onClick, rest, renderContent) {
+  const classValue = classMap(classes)
+  const refValue = ref((el) => applyElementProps(el, rest))
+
+  switch (element) {
+    case "section":
+      return html`<section class=${classValue} @click=${onClick} ${refValue}>
+        ${renderContent()}
+      </section>`
+    case "div":
+      return html`<div class=${classValue} @click=${onClick} ${refValue}>
+        ${renderContent()}
+      </div>`
+    case "main":
+      return html`<main class=${classValue} @click=${onClick} ${refValue}>
+        ${renderContent()}
+      </main>`
+    case "header":
+      return html`<header class=${classValue} @click=${onClick} ${refValue}>
+        ${renderContent()}
+      </header>`
+    case "footer":
+      return html`<footer class=${classValue} @click=${onClick} ${refValue}>
+        ${renderContent()}
+      </footer>`
+    case "nav":
+      return html`<nav class=${classValue} @click=${onClick} ${refValue}>
+        ${renderContent()}
+      </nav>`
+    case "aside":
+      return html`<aside class=${classValue} @click=${onClick} ${refValue}>
+        ${renderContent()}
+      </aside>`
+    default:
+      return html`<article class=${classValue} @click=${onClick} ${refValue}>
+        ${renderContent()}
+      </article>`
+  }
+}

package/src/surfaces/paper/index.js

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

package/src/surfaces/paper/paper.stories.js

@@ -0,0 +1,97 @@
+import { html } from "@inglorious/web"
+
+import { createRender } from "../../stories/notifyStory.js"
+import { paper } from "."
+
+export default {
+  title: "Surfaces/Paper",
+  tags: ["autodocs"],
+  render: createRender(paper),
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["elevated", "outlined"],
+      description: "Visual style: shadowed surface or border-only surface.",
+    },
+    elevation: {
+      control: { type: "number", min: 0, max: 4, step: 1 },
+      description: "Shadow intensity level for elevated variant (0-4).",
+    },
+    padding: {
+      control: "select",
+      options: ["none", "sm", "md", "lg"],
+      description: "Internal spacing preset for content.",
+    },
+    radius: {
+      control: "select",
+      options: ["none", "sm", "md", "lg", "xl", "2xl", "full"],
+      description: "Corner roundness preset for the surface.",
+    },
+    element: {
+      control: "select",
+      options: [
+        "div",
+        "section",
+        "main",
+        "header",
+        "footer",
+        "nav",
+        "aside",
+        "article",
+      ],
+      description: "Semantic element for the surface.",
+    },
+    children: {
+      control: "text",
+      description: "Paper body content.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Base surface container used for elevated or outlined blocks.",
+      },
+    },
+  },
+}
+
+export const Elevated = {
+  args: {
+    variant: "elevated",
+    elevation: 2,
+    padding: "md",
+    radius: "md",
+    element: "div",
+    children: "Surface content",
+  },
+}
+
+export const Outlined = {
+  args: {
+    variant: "outlined",
+    padding: "md",
+    radius: "md",
+    element: "div",
+    children: "Outlined surface",
+  },
+}
+
+export const AllElevations = {
+  render: () =>
+    html`<div
+      style="display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem;"
+    >
+      ${[0, 1, 2, 3, 4].map(
+        (level) =>
+          html`<div>
+            ${paper.render({
+              variant: "elevated",
+              elevation: level,
+              padding: "md",
+              children: html`<strong>Elevation ${level}</strong>`,
+            })}
+          </div>`,
+      )}
+    </div>`,
+}

package/src/surfaces/paper/style.css

@@ -0,0 +1,73 @@
+.iw-paper {
+  background: var(--iw-color-surface);
+  color: var(--iw-color-text);
+  border-radius: var(--iw-radius-md);
+}
+
+.iw-paper-radius-none {
+  border-radius: var(--iw-radius-none);
+}
+
+.iw-paper-radius-sm {
+  border-radius: var(--iw-radius-sm);
+}
+
+.iw-paper-radius-lg {
+  border-radius: var(--iw-radius-lg);
+}
+
+.iw-paper-radius-xl {
+  border-radius: var(--iw-radius-xl);
+}
+
+.iw-paper-radius-2xl {
+  border-radius: var(--iw-radius-2xl);
+}
+
+.iw-paper-radius-full {
+  border-radius: var(--iw-radius-full);
+}
+
+.iw-paper-outlined {
+  border: 1px solid var(--iw-color-border);
+}
+
+.iw-paper-elevated {
+  border: 1px solid color-mix(in srgb, var(--iw-color-border) 60%, transparent);
+}
+
+.iw-paper-elevation-0 {
+  box-shadow: none;
+}
+
+.iw-paper-elevation-1 {
+  box-shadow: var(--iw-shadow-sm);
+}
+
+.iw-paper-elevation-2 {
+  box-shadow: var(--iw-shadow-md);
+}
+
+.iw-paper-elevation-3 {
+  box-shadow: var(--iw-shadow-lg);
+}
+
+.iw-paper-elevation-4 {
+  box-shadow: var(--iw-shadow-xl);
+}
+
+.iw-paper-padding-none {
+  padding: 0;
+}
+
+.iw-paper-padding-sm {
+  padding: var(--iw-space-2);
+}
+
+.iw-paper-padding-md {
+  padding: var(--iw-space-4);
+}
+
+.iw-paper-padding-lg {
+  padding: var(--iw-space-6);
+}

package/src/surfaces/paper/template.js

@@ -0,0 +1,76 @@
+/**
+ * @typedef {import('../../../types/surfaces/paper').PaperProps} PaperProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref } from "@inglorious/web"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+/**
+ * @param {PaperProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    type, // eslint-disable-line no-unused-vars
+    element = "div",
+    children,
+    variant = "elevated",
+    elevation = 1,
+    radius = "md",
+    padding = "md",
+    className = "",
+    ...rest
+  } = props
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
+  return renderElement(
+    element,
+    {
+      "iw-paper": true,
+      [`iw-paper-${variant}`]: true,
+      [`iw-paper-elevation-${Math.max(0, Math.min(4, elevation))}`]:
+        variant === "elevated",
+      [`iw-paper-padding-${padding}`]: true,
+      [`iw-paper-radius-${radius}`]: radius !== "md",
+      ...extraClasses,
+    },
+    rest,
+    children,
+  )
+}
+
+function renderElement(element, classes, rest, children) {
+  const classValue = classMap(classes)
+  const refValue = ref((el) => applyElementProps(el, rest))
+
+  switch (element) {
+    case "section":
+      return html`<section class=${classValue} ${refValue}>
+        ${children}
+      </section>`
+    case "main":
+      return html`<main class=${classValue} ${refValue}>${children}</main>`
+    case "header":
+      return html`<header class=${classValue} ${refValue}>${children}</header>`
+    case "footer":
+      return html`<footer class=${classValue} ${refValue}>${children}</footer>`
+    case "nav":
+      return html`<nav class=${classValue} ${refValue}>${children}</nav>`
+    case "aside":
+      return html`<aside class=${classValue} ${refValue}>${children}</aside>`
+    case "article":
+      return html`<article class=${classValue} ${refValue}>
+        ${children}
+      </article>`
+    default:
+      return html`<div class=${classValue} ${refValue}>${children}</div>`
+  }
+}

package/src/surfaces/surfaces.css

@@ -0,0 +1,4 @@
+@import "./accordion/style.css";
+@import "./app-bar/style.css";
+@import "./card/style.css";
+@import "./paper/style.css";

package/types/controls/button-group.d.ts

@@ -1,11 +1,11 @@
-import type { TemplateResult, Api } from "@inglorious/web"
+import type { TemplateResult } from "@inglorious/web"
 
 export interface ButtonGroupItem {
   id?: string
   value?: string
   label: string
   children?: TemplateResult | string | number
-  disabled?: boolean
+  isDisabled?: boolean
   variant?: "default" | "outline" | "ghost"
   color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
   size?: "sm" | "md" | "lg"
@@ -14,22 +14,23 @@ export interface ButtonGroupItem {
   [key: string]: unknown
 }
 
-export interface ButtonGroupEntity {
+export interface ButtonGroupProps {
   id?: string
   buttons?: ButtonGroupItem[]
   value?: string | string[]
-  multiple?: boolean
+  isMultiple?: boolean
   direction?: "row" | "column"
-  attached?: boolean
+  isAttached?: boolean
   size?: "sm" | "md" | "lg"
   variant?: "default" | "outline" | "ghost"
   color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
-  disabled?: boolean
+  isDisabled?: boolean
+  onChange?: (value?: string | string[]) => void
   [key: string]: unknown
 }
 
 export interface ButtonGroupType {
-  render(entity: ButtonGroupEntity, api: Api): TemplateResult
+  render(props: ButtonGroupProps): TemplateResult
 }
 
 export declare const buttonGroup: ButtonGroupType