@inglorious/ui 6.0.0 → 7.0.0

package/src/controls/textarea/template.js

@@ -0,0 +1,94 @@
+/**
+ * @typedef {import('../../../types/controls/textarea').TextareaProps} TextareaProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html } from "@inglorious/web"
+import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+/**
+ * Renders a labeled textarea field with optional hint and error messaging.
+ * Supports disabled/readonly/required states and emits `onChange` on input.
+ * @param {TextareaProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    id,
+    name = "",
+    value = "",
+    placeholder = "",
+    label,
+    hint,
+    error,
+    size = "md",
+    rows = 4,
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
+    isFullWidth = false,
+    isAutoSize = false,
+    isResizable = false,
+    onChange,
+    onBlur,
+    onFocus,
+    ...rest
+  } = props
+
+  const textareaId = id || name
+
+  const wrapperClasses = {
+    "iw-textarea-field": true,
+    "iw-textarea-full-width": isFullWidth,
+    "iw-textarea-disabled": isDisabled,
+    "iw-textarea-has-error": !!error,
+  }
+
+  const textareaClasses = {
+    "iw-textarea": true,
+    [`iw-textarea-${size}`]: size !== "md",
+    "iw-textarea-error": !!error,
+    "iw-textarea-auto-size": isAutoSize,
+    "iw-textarea-resizable": isResizable,
+  }
+
+  return html`
+    <div class=${classMap(wrapperClasses)}>
+      ${label
+        ? html`
+            <label for=${textareaId} class="iw-textarea-label">
+              ${label}
+              ${isRequired
+                ? html`<span class="iw-textarea-required">*</span>`
+                : null}
+            </label>
+          `
+        : null}
+
+      <textarea
+        id=${textareaId}
+        name=${name}
+        rows=${rows}
+        .value=${value}
+        placeholder=${placeholder}
+        ?disabled=${isDisabled}
+        ?readonly=${isReadOnly}
+        ?required=${isRequired}
+        class=${classMap(textareaClasses)}
+        @input=${(event) => onChange?.(event.target.value)}
+        @blur=${onBlur}
+        @focus=${onFocus}
+        ${ref((element) => applyElementProps(element, rest))}
+      ></textarea>
+
+      ${error
+        ? html`<span class="iw-textarea-error-message">${error}</span>`
+        : hint
+          ? html`<span class="iw-textarea-hint">${hint}</span>`
+          : null}
+    </div>
+  `
+}

package/src/controls/textarea/textarea.stories.js

@@ -0,0 +1,158 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { Textarea } from "."
+
+export default {
+  title: "Controls/Textarea",
+  tags: ["autodocs"],
+  render: createRender(Textarea),
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Field label rendered above the textarea.",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text shown when value is empty.",
+    },
+    name: {
+      control: "text",
+      description: "Native HTML textarea name attribute.",
+    },
+    value: {
+      control: "text",
+      description: "Current textarea value.",
+    },
+    hint: {
+      control: "text",
+      description: "Helper text shown below the field when there is no error.",
+    },
+    error: {
+      control: "text",
+      description: "Validation message shown below the field.",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Size scale for internal spacing and typography.",
+    },
+    rows: {
+      control: "number",
+      description: "Initial number of visible text rows.",
+    },
+    isDisabled: {
+      control: "boolean",
+      description: "Disables user input and interaction.",
+    },
+    isReadOnly: {
+      control: "boolean",
+      description: "Prevents editing while keeping the control focusable.",
+    },
+    isRequired: {
+      control: "boolean",
+      description: "Marks the field as required.",
+    },
+    isFullWidth: {
+      control: "boolean",
+      description: "Expands the textarea width to 100% of its container.",
+    },
+    isAutoSize: {
+      control: "boolean",
+      description:
+        "Applies field-sizing: content so the textarea grows with its content.",
+    },
+    isResizable: {
+      control: "boolean",
+      description: "Enables the browser resize handle for vertical resizing.",
+    },
+    onChange: { action: "onChange" },
+    onBlur: { action: "onBlur" },
+    onFocus: { action: "onFocus" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Multi-line text input with labels, hints, errors, and automatic content sizing support.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  label: "Bio",
+  placeholder: "Tell us a little about yourself",
+  name: "bio",
+  value: "",
+  hint: "",
+  error: "",
+  size: "md",
+  rows: 4,
+  isDisabled: false,
+  isReadOnly: false,
+  isRequired: false,
+  isFullWidth: false,
+  isAutoSize: false,
+  isResizable: false,
+}
+
+export const WithHint = {}
+WithHint.args = {
+  ...Default.args,
+  label: "Project notes",
+  hint: "Include any implementation details or blockers.",
+}
+
+export const WithError = {}
+WithError.args = {
+  ...Default.args,
+  label: "Description",
+  value: "This is too long",
+  error: "Please keep the description under 280 characters.",
+}
+
+export const Required = {}
+Required.args = {
+  ...Default.args,
+  label: "Message",
+  placeholder: "Write a quick message",
+  isRequired: true,
+}
+
+export const Disabled = {}
+Disabled.args = {
+  ...Default.args,
+  label: "Disabled textarea",
+  isDisabled: true,
+  value: "Cannot edit this value",
+}
+
+export const Readonly = {}
+Readonly.args = {
+  ...Default.args,
+  label: "Read-only textarea",
+  isReadOnly: true,
+  value: "This field is read-only and not editable.",
+}
+
+export const Small = {}
+Small.args = {
+  ...Default.args,
+  label: "Small textarea",
+  size: "sm",
+}
+
+export const Large = {}
+Large.args = {
+  ...Default.args,
+  label: "Large textarea",
+  size: "lg",
+}
+
+export const FullWidth = {}
+FullWidth.args = {
+  ...Default.args,
+  label: "Full width textarea",
+  placeholder: "This textarea takes the full width of its container",
+  isFullWidth: true,
+}

package/src/data-display/before-after/before-after.stories.js

@@ -0,0 +1,74 @@
+import {
+  createEntityRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { BeforeAfter } from "./index.js"
+
+const before = {
+  src: "https://picsum.photos/id/1015/800/500?grayscale",
+  alt: "Before",
+}
+const after = {
+  src: "https://picsum.photos/id/1015/800/500",
+  alt: "After",
+}
+
+export default {
+  title: "Data Display/BeforeAfter",
+  tags: ["autodocs"],
+  render: createEntityRender({ BeforeAfter }),
+  argTypes: {
+    ...notifyActionArgType,
+    label: { control: "text", description: "Accessible label for the slider." },
+    position: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+      description: "Divider position as a percentage (0-100).",
+    },
+    step: {
+      control: "number",
+      description: "Keyboard increment (percent) for arrow keys.",
+    },
+    isDisabled: { control: "boolean", description: "Disable interaction." },
+    isFullWidth: {
+      control: "boolean",
+      description: "Expand to container width.",
+    },
+    before: { control: "object", description: "Before image { src, alt }." },
+    after: { control: "object", description: "After image { src, alt }." },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Before/after image comparison slider. The reveal is pure CSS (clip-path); the divider position is the only piece of entity state. Drag anywhere, or focus and use arrow keys / Home / End.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  id: "before-after",
+  type: "BeforeAfter",
+  label: "Before and after comparison",
+  position: 50,
+  step: 1,
+  isDisabled: false,
+  isFullWidth: true,
+  before,
+  after,
+}
+
+export const StartLeft = {}
+StartLeft.args = {
+  ...Default.args,
+  id: "before-after-left",
+  position: 15,
+}
+
+export const Disabled = {}
+Disabled.args = {
+  ...Default.args,
+  id: "before-after-disabled",
+  isDisabled: true,
+}

package/src/data-display/before-after/handlers.js

@@ -0,0 +1,44 @@
+/**
+ * @typedef {import('../../../types/data-display/before-after.js').BeforeAfterProps} BeforeAfterEntity
+ */
+
+import { clamp } from "@inglorious/utils/math/numbers.js"
+
+import {
+  DEFAULT_POSITION,
+  DEFAULT_STEP,
+  MAX_POSITION,
+  MIN_POSITION,
+} from "./helpers.js"
+
+/**
+ * Initialize missing before/after state defaults.
+ * The only persistent piece of state is `position`: the divider location as a
+ * percentage (0-100). Everything else is configuration.
+ * @param {BeforeAfterEntity} entity
+ */
+export function create(entity) {
+  entity.position ??= DEFAULT_POSITION
+  entity.step ??= DEFAULT_STEP
+
+  entity.before ??= null
+  entity.after ??= null
+
+  entity.label ??= ""
+  entity.isDisabled ??= false
+  entity.isFullWidth ??= false
+}
+
+/**
+ * Move the divider to a new position, clamped to the 0-100 range.
+ * @param {BeforeAfterEntity} entity
+ * @param {number} position
+ */
+export function positionChange(entity, position) {
+  if (entity.isDisabled) return
+
+  const value = Number(position)
+  if (Number.isNaN(value)) return
+
+  entity.position = clamp(value, MIN_POSITION, MAX_POSITION)
+}

package/src/data-display/before-after/helpers.js

@@ -0,0 +1,4 @@
+export const DEFAULT_POSITION = 50
+export const DEFAULT_STEP = 1
+export const MIN_POSITION = 0
+export const MAX_POSITION = 100

package/src/data-display/before-after/index.js

@@ -0,0 +1,17 @@
+import * as handlers from "./handlers.js"
+import { BeforeAfter as renderers } from "./template.js"
+
+export const BeforeAfter = {
+  ...handlers,
+  ...renderers,
+  render(entity, api) {
+    const id = entity.id
+    const props = {
+      ...entity,
+      onPositionChange: (position) =>
+        api.notify(`#${id}:positionChange`, position),
+    }
+
+    return this.renderBeforeAfter(props)
+  },
+}

package/src/data-display/before-after/style.css

@@ -0,0 +1,128 @@
+.iw-before-after {
+  --iw-before-after-position: 50%;
+
+  /* Neutral in every theme on purpose: the divider should separate the two
+     pictures without competing with them for attention. */
+  --iw-before-after-divider-width: 2px;
+  --iw-before-after-divider-color: rgb(255 255 255 / 90%);
+  --iw-before-after-handle-size: 40px;
+  --iw-before-after-handle-bg: rgb(255 255 255 / 90%);
+  --iw-before-after-handle-color: rgb(17 24 39 / 65%);
+  --iw-before-after-handle-arrow: 5px;
+
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  line-height: 0;
+  cursor: ew-resize;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  outline: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--iw-color-primary);
+    outline-offset: 2px;
+  }
+
+  &.iw-before-after-full-width {
+    display: block;
+    width: 100%;
+  }
+
+  /* Greyed out and dimmed, so it reads as "you cannot move this". */
+  &.iw-before-after-disabled {
+    --iw-before-after-divider-color: rgb(156 163 175 / 60%);
+    --iw-before-after-handle-bg: rgb(156 163 175 / 60%);
+    --iw-before-after-handle-color: rgb(255 255 255 / 60%);
+
+    cursor: default;
+
+    .iw-before-after-image {
+      filter: grayscale(70%);
+      opacity: 0.75;
+    }
+
+    .iw-before-after-handle {
+      box-shadow: none;
+    }
+  }
+
+  .iw-before-after-before {
+    display: block;
+  }
+
+  .iw-before-after-before .iw-before-after-image {
+    width: 100%;
+    height: auto;
+  }
+
+  .iw-before-after-after {
+    position: absolute;
+    inset: 0;
+    clip-path: inset(0 0 0 var(--iw-before-after-position));
+  }
+
+  .iw-before-after-after .iw-before-after-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .iw-before-after-image {
+    display: block;
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-drag: none;
+  }
+
+  .iw-before-after-divider {
+    position: absolute;
+    inset-block: 0;
+    left: var(--iw-before-after-position);
+    width: var(--iw-before-after-divider-width);
+    transform: translateX(-50%);
+    background: var(--iw-before-after-divider-color);
+    box-shadow: 0 0 0 1px rgb(0 0 0 / 12%);
+    pointer-events: none;
+  }
+
+  .iw-before-after-handle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--iw-before-after-handle-size);
+    height: var(--iw-before-after-handle-size);
+    border-radius: var(--iw-radius-full);
+    background: var(--iw-before-after-handle-bg);
+    transform: translate(-50%, -50%);
+    box-shadow: var(--iw-shadow-md);
+  }
+
+  /* Two chevron arrows drawn with borders, no icon font needed. */
+  .iw-before-after-handle::before,
+  .iw-before-after-handle::after {
+    content: "";
+    width: 0;
+    height: 0;
+    border-top: var(--iw-before-after-handle-arrow) solid transparent;
+    border-bottom: var(--iw-before-after-handle-arrow) solid transparent;
+  }
+
+  .iw-before-after-handle::before {
+    margin-right: var(--iw-before-after-handle-arrow);
+    border-right: var(--iw-before-after-handle-arrow) solid
+      var(--iw-before-after-handle-color);
+  }
+
+  .iw-before-after-handle::after {
+    margin-left: var(--iw-before-after-handle-arrow);
+    border-left: var(--iw-before-after-handle-arrow) solid
+      var(--iw-before-after-handle-color);
+  }
+}