@inglorious/ui 0.1.0

package/src/controls/button-group/template.js

@@ -0,0 +1,117 @@
+/**
+ * @typedef {import('../../../types/controls/button-group').ButtonGroupEntity} ButtonGroupEntity
+ * @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"
+
+import { buttonPrimitive as button } from "../button/index.js"
+
+/**
+ * Button group control for grouped actions.
+ *
+ * @param {ButtonGroupEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(entity, api) {
+  const {
+    buttons = [],
+    value,
+    multiple = false,
+    direction = "row",
+    attached = true,
+    size = "md",
+    variant = "default",
+    color = "primary",
+    disabled = false,
+    ...rest
+  } = entity
+
+  const groupClasses = {
+    "iw-button-group": true,
+    "iw-button-group-selection": value != null || multiple,
+    [`iw-button-group-${direction}`]: true,
+    "iw-button-group-attached": attached,
+  }
+
+  const selectedValues = multiple
+    ? new Set(Array.isArray(value) ? value : [])
+    : null
+
+  return html`
+    <div
+      class=${classMap(groupClasses)}
+      role="group"
+      ${ref((element) => applyElementProps(element, rest))}
+    >
+      ${buttons.map((item, index) => {
+        const {
+          id: itemId,
+          value: explicitValue,
+          label,
+          children,
+          disabled: itemDisabled,
+          variant: itemVariant,
+          color: itemColor,
+          size: itemSize,
+          icon,
+          iconAfter,
+          ...itemRest
+        } = item
+
+        const childId = `${entity.id}-btn-${itemId ?? index}`
+        const itemValue = explicitValue ?? itemId
+        const pressed = multiple
+          ? selectedValues.has(itemValue)
+          : value != null
+            ? value === itemValue
+            : false
+
+        const childApi = {
+          ...api,
+          notify(type, payload) {
+            if (type === `#${childId}:click`) {
+              api.notify(`#${entity.id}:click`, itemValue)
+              if (value != null || multiple) {
+                if (multiple) {
+                  const next = new Set(selectedValues)
+                  if (next.has(itemValue)) next.delete(itemValue)
+                  else next.add(itemValue)
+                  return api.notify(`#${entity.id}:change`, [...next])
+                }
+                return api.notify(`#${entity.id}:change`, itemValue)
+              }
+              return
+            }
+            return api.notify(type, payload)
+          },
+        }
+
+        return button.render(
+          {
+            id: childId,
+            children: html`
+              ${icon ? html`<span class="iw-button-icon">${icon}</span>` : null}
+              ${children ?? label}
+              ${iconAfter
+                ? html`<span class="iw-button-icon">${iconAfter}</span>`
+                : null}
+            `,
+            variant: itemVariant ?? variant,
+            color: itemColor ?? color,
+            size: itemSize ?? size,
+            disabled: disabled || !!itemDisabled,
+            ariaPressed: pressed ? true : undefined,
+            className: pressed ? "iw-button-pressed" : "",
+            type: "button",
+            ...itemRest,
+          },
+          childApi,
+        )
+      })}
+    </div>
+  `
+}

package/src/controls/checkbox/checkbox.stories.js

@@ -0,0 +1,47 @@
+import {
+  makeStoryRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { checkbox } from "."
+
+export default {
+  title: "Controls/Checkbox",
+  tags: ["autodocs"],
+  render: makeStoryRender(checkbox, "story-checkbox"),
+  argTypes: {
+    ...notifyActionArgType,
+    label: { control: "text", description: "Label text." },
+    name: { control: "text", description: "Native HTML name attribute." },
+    checked: { control: "boolean", description: "Current checked state." },
+    disabled: { control: "boolean", description: "Disables interaction." },
+    required: { control: "boolean", description: "Marks input as required." },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Label size scale.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Boolean control with a native checkbox input.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  label: "Accept terms",
+  name: "terms",
+  checked: false,
+  disabled: false,
+  required: false,
+  size: "md",
+}
+
+export const Checked = {}
+Checked.args = {
+  ...Default.args,
+  checked: true,
+}

package/src/controls/checkbox/index.js

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

package/src/controls/checkbox/style.css

@@ -0,0 +1,33 @@
+.iw-checkbox-field {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--iw-space-2);
+  font-family: var(--iw-font-family-sans);
+  color: var(--iw-color-text);
+  cursor: pointer;
+
+  .iw-checkbox {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    accent-color: var(--iw-color-primary);
+  }
+
+  .iw-checkbox-label {
+    font-size: var(--iw-font-size-base);
+    line-height: var(--iw-line-height-normal);
+  }
+
+  &.iw-checkbox-sm .iw-checkbox-label {
+    font-size: var(--iw-font-size-sm);
+  }
+
+  &.iw-checkbox-lg .iw-checkbox-label {
+    font-size: var(--iw-font-size-lg);
+  }
+
+  &.iw-checkbox-disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}

package/src/controls/checkbox/template.js

@@ -0,0 +1,54 @@
+/**
+ * @typedef {import('../../../types/controls/checkbox').CheckboxEntity} CheckboxEntity
+ * @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"
+
+/**
+ * Checkbox control for boolean values.
+ *
+ * @param {CheckboxEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(entity, api) {
+  const {
+    name = "",
+    label = "",
+    checked = false,
+    disabled = false,
+    required = false,
+    size = "md",
+    ...rest
+  } = entity
+
+  const inputId = entity.id || name
+
+  const classes = {
+    "iw-checkbox-field": true,
+    "iw-checkbox-disabled": disabled,
+    [`iw-checkbox-${size}`]: size !== "md",
+  }
+
+  return html`
+    <label class=${classMap(classes)} for=${inputId}>
+      <input
+        id=${inputId}
+        class="iw-checkbox"
+        type="checkbox"
+        name=${name}
+        .checked=${checked}
+        ?disabled=${disabled}
+        ?required=${required}
+        @change=${(event) =>
+          api.notify(`#${entity.id}:change`, event.target.checked)}
+        ${ref((element) => applyElementProps(element, rest))}
+      />
+      <span class="iw-checkbox-label">${label}</span>
+    </label>
+  `
+}

package/src/controls/fab/fab.stories.js

@@ -0,0 +1,52 @@
+import { html } from "@inglorious/web"
+
+import {
+  makeStoryRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { fab } from "."
+
+export default {
+  title: "Controls/Fab",
+  tags: ["autodocs"],
+  render: makeStoryRender(fab, "story-fab"),
+  argTypes: {
+    ...notifyActionArgType,
+    children: { control: "text", description: "Content of the FAB." },
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "success", "warning", "error", "info"],
+      description: "Semantic color intent.",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Button size.",
+    },
+    extended: { control: "boolean", description: "Use extended pill shape." },
+    disabled: { control: "boolean", description: "Disables interaction." },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Floating action button for prominent primary actions.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  children: "+",
+  color: "primary",
+  size: "md",
+  extended: false,
+  disabled: false,
+}
+
+export const Extended = {}
+Extended.args = {
+  ...Default.args,
+  extended: true,
+  children: html`<span>＋</span><span>Create</span>`,
+}

package/src/controls/fab/index.js

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

package/src/controls/fab/style.css

@@ -0,0 +1,76 @@
+.iw-button.iw-fab {
+  box-shadow: var(--iw-shadow-lg);
+  border: 0;
+  width: 3.5rem;
+
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: var(--iw-shadow-xl);
+  }
+
+  .iw-fab-content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.65em;
+    line-height: 1;
+    font-weight: var(--iw-font-weight-normal);
+    transform: translateY(-0.04em);
+  }
+
+  &.iw-button-sm {
+    width: 2.75rem;
+
+    .iw-fab-content {
+      font-size: 1.55em;
+    }
+  }
+
+  &.iw-button-lg {
+    width: 4.25rem;
+
+    .iw-fab-content {
+      font-size: 1.75em;
+    }
+  }
+
+  &.iw-fab-extended {
+    width: auto;
+    min-height: 2.5rem;
+    padding: var(--iw-space-2) var(--iw-space-4);
+    gap: var(--iw-space-2);
+
+    .iw-fab-content {
+      font-size: inherit;
+      transform: none;
+    }
+  }
+
+  &.iw-fab-extended.iw-button-sm {
+    min-height: 2rem;
+    padding: var(--iw-space-1) var(--iw-space-3);
+  }
+
+  &.iw-fab-extended.iw-button-lg {
+    min-height: 3rem;
+    padding: var(--iw-space-3) var(--iw-space-5);
+  }
+
+  &.iw-fab-extended .iw-fab-content {
+    transform: none;
+  }
+
+  &.iw-fab-extended .iw-button-icon {
+    width: 1.1em;
+    height: 1.1em;
+    transform: translateY(-0.02em);
+  }
+
+  &.iw-fab-extended.iw-button-sm .iw-button-icon {
+    transform: none;
+  }
+
+  &.iw-fab-extended.iw-button-lg .iw-button-icon {
+    transform: translateY(-0.03em);
+  }
+}

package/src/controls/fab/template.js

@@ -0,0 +1,33 @@
+/**
+ * @typedef {import('../../../types/controls/fab').FabEntity} FabEntity
+ * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html } from "@inglorious/web"
+
+import { buttonPrimitive as button } from "../button/index.js"
+
+/**
+ * Floating action button for primary contextual actions.
+ *
+ * @param {FabEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(entity, api) {
+  const { children, extended = false, className = "", ...rest } = entity
+
+  return button.render(
+    {
+      ...rest,
+      shape: extended ? "pill" : "round",
+      className:
+        `iw-fab ${extended ? "iw-fab-extended" : ""} ${className}`.trim(),
+      children: extended
+        ? children
+        : html`<span class="iw-fab-content">${children}</span>`,
+    },
+    api,
+  )
+}

package/src/controls/icon-button/icon-button.stories.js

@@ -0,0 +1,70 @@
+import {
+  makeStoryRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { iconButton } from "."
+
+export default {
+  title: "Controls/IconButton",
+  tags: ["autodocs"],
+  render: makeStoryRender(iconButton, "story-icon-button"),
+  argTypes: {
+    ...notifyActionArgType,
+    icon: { control: "text", description: "Leading icon content." },
+    label: { control: "text", description: "Optional button label." },
+    iconAfter: { control: "text", description: "Trailing icon content." },
+    direction: {
+      control: "select",
+      options: ["row", "column"],
+      description: "Layout direction for icon and label.",
+    },
+    iconOnly: {
+      control: "boolean",
+      description: "Renders icon-only content.",
+    },
+    ariaLabel: {
+      control: "text",
+      description: "Accessible name when used as icon-only button.",
+    },
+    variant: {
+      control: "select",
+      options: ["default", "outline", "ghost"],
+      description: "Visual style variant inherited from button.",
+    },
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "success", "warning", "error", "info"],
+      description: "Semantic color inherited from button.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Wrapper around button for icon-oriented content and compact icon-only actions.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  icon: "★",
+  label: "Favorite",
+  iconAfter: "",
+  direction: "row",
+  iconOnly: false,
+  ariaLabel: "Favorite",
+  variant: "default",
+  color: "primary",
+}
+
+export const IconOnly = {}
+IconOnly.args = {
+  ...Default.args,
+  icon: "⚙",
+  label: "",
+  iconOnly: true,
+  variant: "ghost",
+  ariaLabel: "Settings",
+}

package/src/controls/icon-button/index.js

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

package/src/controls/icon-button/style.css

@@ -0,0 +1,14 @@
+.iw-icon-button-content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--iw-space-2);
+
+  &.iw-icon-button-content-column {
+    flex-direction: column;
+  }
+
+  &.iw-icon-button-content-row {
+    flex-direction: row;
+  }
+}

package/src/controls/icon-button/template.js

@@ -0,0 +1,47 @@
+/**
+ * @typedef {import('../../../types/controls/icon-button').IconButtonEntity} IconButtonEntity
+ * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html } from "@inglorious/web"
+
+import { render as renderButton } from "../button/template.js"
+
+/**
+ * Icon button wrapper built on top of the base button renderer.
+ *
+ * @param {IconButtonEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(entity, api) {
+  const {
+    icon,
+    label,
+    iconAfter,
+    direction = "row",
+    iconOnly = false,
+    ariaLabel,
+  } = entity
+
+  const children = html`
+    <span class="iw-icon-button-content iw-icon-button-content-${direction}">
+      ${icon ? html`<span class="iw-button-icon">${icon}</span>` : null}
+      ${iconOnly ? null : label}
+      ${iconAfter
+        ? html`<span class="iw-button-icon">${iconAfter}</span>`
+        : null}
+    </span>
+  `
+
+  return renderButton(
+    {
+      ...entity,
+      label: iconOnly ? "" : label,
+      children,
+      ariaLabel,
+    },
+    api,
+  )
+}

package/src/controls/input/index.js

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