@inglorious/ui 0.1.0

package/src/controls/select/template.js

@@ -0,0 +1,423 @@
+/**
+ * @typedef {import('../../../types/controls/select').SelectEntity} SelectEntity
+ * @typedef {import('../../../types/controls/select').SelectOption} SelectOption
+ * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref, repeat, when } from "@inglorious/web"
+import { applyElementProps } from "@/shared/applyElementProps.js"
+
+import {
+  filterOptions,
+  formatOption,
+  getOptionLabel,
+  getOptionValue,
+  isOptionSelected,
+} from "./helpers.js"
+
+const NO_FOCUSED_INDEX = -1
+
+/**
+ * Select control render function.
+ * @param {SelectEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(entity, api) {
+  const type = api.getType?.(entity.type)
+  const normalized = ensureDefaults(entity)
+
+  return html`<div
+    class=${classMap({
+      "iw-select": true,
+      "iw-select-full-width": !!normalized.fullWidth,
+      [`iw-select-${normalized.size}`]: normalized.size !== "md",
+    })}
+  >
+    ${normalized.label
+      ? html`<label class="iw-select-label">${normalized.label}</label>`
+      : null}
+    ${type?.renderControl?.(normalized, api) ?? renderControl(normalized, api)}
+    ${when(
+      normalized.isOpen,
+      () =>
+        type?.renderDropdown?.(normalized, api) ??
+        renderDropdown(normalized, api),
+    )}
+  </div>`
+}
+
+/**
+ * Render trigger control.
+ * @param {SelectEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function renderControl(entity, api) {
+  const type = api.getType?.(entity.type)
+
+  return html`<div
+    class="iw-select-control ${classMap({
+      "iw-select-control-open": entity.isOpen,
+      "iw-select-control-disabled": entity.isDisabled,
+      "iw-select-control-selection":
+        entity.isMulti &&
+        Array.isArray(entity.selectedValue) &&
+        entity.selectedValue.length,
+    })}"
+    @click=${() => !entity.isDisabled && api.notify(`#${entity.id}:toggle`)}
+    ${ref((element) => applyElementProps(element, entity.controlProps ?? {}))}
+  >
+    ${when(
+      entity.isMulti,
+      () =>
+        type?.renderMultiValue?.(entity, api) ?? renderMultiValue(entity, api),
+      () => type?.renderSingleValue?.(entity) ?? renderSingleValue(entity),
+    )}
+    ${when(
+      entity.isClearable &&
+        ((entity.isMulti &&
+          Array.isArray(entity.selectedValue) &&
+          entity.selectedValue.length) ||
+          (!entity.isMulti && entity.selectedValue !== null)),
+      () =>
+        html`<button
+          class="iw-select-clear"
+          type="button"
+          @click=${(event) => {
+            event.stopPropagation()
+            api.notify(`#${entity.id}:clear`)
+          }}
+        >
+          ×
+        </button>`,
+    )}
+
+    <div class="iw-select-arrow"><span>▼</span></div>
+  </div>`
+}
+
+/**
+ * Render single selected value.
+ * @param {SelectEntity} entity
+ * @returns {TemplateResult}
+ */
+export function renderSingleValue(entity) {
+  if (entity.selectedValue === null) {
+    return html`<span class="iw-select-placeholder"
+      >${entity.placeholder}</span
+    >`
+  }
+
+  const selectedOption = entity.options.find(
+    (option) => getOptionValue(option) === entity.selectedValue,
+  )
+
+  return html`<span class="iw-select-value"
+    >${selectedOption
+      ? getOptionLabel(selectedOption)
+      : String(entity.selectedValue)}</span
+  >`
+}
+
+/**
+ * Render multi selected value tags.
+ * @param {SelectEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function renderMultiValue(entity, api) {
+  const type = api.getType?.(entity.type)
+  if (!Array.isArray(entity.selectedValue) || !entity.selectedValue.length) {
+    return html`<span class="iw-select-placeholder"
+      >${entity.placeholder}</span
+    >`
+  }
+
+  return html`<div class="iw-select-multi-value">
+    ${repeat(
+      entity.selectedValue,
+      (value) => value,
+      (value) =>
+        type?.renderMultiValueTag?.(entity, value, api) ??
+        renderMultiValueTag(entity, value, api),
+    )}
+  </div>`
+}
+
+/**
+ * Render a selected multi-value tag.
+ * @param {SelectEntity} entity
+ * @param {string|number} value
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function renderMultiValueTag(entity, value, api) {
+  const option = entity.options.find((opt) => getOptionValue(opt) === value)
+
+  return html`<div
+    class="iw-select-multi-value-tag"
+    @click=${(event) => {
+      event.stopPropagation()
+      api.notify(`#${entity.id}:optionSelect`, option || { value })
+    }}
+  >
+    <span class="iw-select-multi-value-tag-label"
+      >${option ? getOptionLabel(option) : String(value)}</span
+    >
+    <span class="iw-select-multi-value-remove">×</span>
+  </div>`
+}
+
+/**
+ * Render dropdown.
+ * @param {SelectEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function renderDropdown(entity, api) {
+  const type = api.getType?.(entity.type)
+  const filteredOptions = filterOptions(entity.options, entity.searchTerm)
+
+  return html`<div
+    class="iw-select-dropdown"
+    ${ref((el) => {
+      if (el) {
+        setTimeout(() => {
+          document.addEventListener(
+            "click",
+            (event) => {
+              if (!el.contains(event.target)) {
+                api.notify(`#${entity.id}:close`)
+              }
+            },
+            { once: true },
+          )
+        })
+      }
+    })}
+  >
+    ${when(
+      entity.isSearchable,
+      () =>
+        type?.renderSearchInput?.(entity, api) ??
+        renderSearchInput(entity, api),
+    )}
+    ${when(
+      entity.isLoading,
+      () => type?.renderLoading?.(entity) ?? renderLoading(entity),
+    )}
+    ${when(
+      !entity.isLoading && !filteredOptions.length,
+      () => type?.renderNoOptions?.(entity) ?? renderNoOptions(entity),
+    )}
+    ${when(
+      !entity.isLoading && filteredOptions.length,
+      () => type?.renderOptions?.(entity, api) ?? renderOptions(entity, api),
+    )}
+  </div>`
+}
+
+/**
+ * Render search input.
+ * @param {SelectEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function renderSearchInput(entity, api) {
+  return html`<input
+    class="iw-select-dropdown-search"
+    type="text"
+    placeholder="Search..."
+    .value=${entity.searchTerm ?? ""}
+    @input=${(event) =>
+      api.notify(`#${entity.id}:searchChange`, event.target.value)}
+    @keydown=${(event) => handleKeyDown(entity, event, api)}
+    ${ref((el) => {
+      if (el && entity.isOpen) queueMicrotask(() => el.focus())
+    })}
+  />`
+}
+
+/**
+ * Render options list.
+ * @param {SelectEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function renderOptions(entity, api) {
+  const filteredOptions = filterOptions(entity.options, entity.searchTerm)
+  const type = api.getType?.(entity.type)
+
+  return html`<div class="iw-select-dropdown-options">
+    ${repeat(
+      filteredOptions,
+      (option) => getOptionValue(option),
+      (option, index) =>
+        type?.renderOption?.(entity, { option, index }, api) ??
+        renderOption(entity, { option, index }, api),
+    )}
+  </div>`
+}
+
+/**
+ * Render an option row.
+ * @param {SelectEntity} entity
+ * @param {{ option: SelectOption, index: number }} payload
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function renderOption(entity, { option, index }, api) {
+  const normalized = formatOption(option)
+  const isSelected = isOptionSelected(
+    option,
+    entity.selectedValue,
+    entity.isMulti,
+  )
+  const isFocused = index === entity.focusedIndex
+
+  return html`<div
+    class="iw-select-dropdown-options-option ${classMap({
+      "iw-select-dropdown-options-option-selected": isSelected,
+      "iw-select-dropdown-options-option-focused": isFocused,
+      "iw-select-dropdown-options-option-disabled": !!normalized.disabled,
+    })}"
+    @click=${() =>
+      !normalized.disabled &&
+      api.notify(`#${entity.id}:optionSelect`, normalized)}
+    @mouseenter=${() => api.notify(`#${entity.id}:focusSet`, index)}
+  >
+    ${when(
+      entity.isMulti,
+      () =>
+        html`<input
+          type="checkbox"
+          .checked=${isSelected}
+          ?disabled=${!!normalized.disabled}
+        />`,
+    )}
+    <span>${getOptionLabel(normalized)}</span>
+  </div>`
+}
+
+/**
+ * Render loading state.
+ * @param {SelectEntity} entity
+ * @returns {TemplateResult}
+ */
+export function renderLoading(entity) {
+  return html`<div class="iw-select-loading">${entity.loadingMessage}</div>`
+}
+
+/**
+ * Render no options state.
+ * @param {SelectEntity} entity
+ * @returns {TemplateResult}
+ */
+export function renderNoOptions(entity) {
+  return html`<div class="iw-select-no-options">
+    ${entity.noOptionsMessage}
+  </div>`
+}
+
+/**
+ * Handle key navigation.
+ * @param {SelectEntity} entity
+ * @param {KeyboardEvent} event
+ * @param {Api} api
+ */
+function handleKeyDown(entity, event, api) {
+  const filteredOptions = filterOptions(entity.options, entity.searchTerm)
+
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault()
+      api.notify(`#${entity.id}:focusNext`)
+      break
+    case "ArrowUp":
+      event.preventDefault()
+      api.notify(`#${entity.id}:focusPrev`)
+      break
+    case "Enter":
+      event.preventDefault()
+      if (
+        entity.focusedIndex > NO_FOCUSED_INDEX &&
+        filteredOptions[entity.focusedIndex]
+      ) {
+        const option = formatOption(filteredOptions[entity.focusedIndex])
+        if (!option.disabled) {
+          api.notify(`#${entity.id}:optionSelect`, option)
+        }
+      }
+      break
+    case "Escape":
+      event.preventDefault()
+      api.notify(`#${entity.id}:close`)
+      break
+    case "Home":
+      event.preventDefault()
+      api.notify(`#${entity.id}:focusFirst`)
+      break
+    case "End":
+      event.preventDefault()
+      api.notify(`#${entity.id}:focusLast`)
+      break
+    default:
+      break
+  }
+}
+
+/**
+ * @param {SelectEntity} entity
+ * @returns {SelectEntity}
+ */
+function ensureDefaults(entity) {
+  const isMulti = entity.isMulti ?? false
+  const controlProps = Object.fromEntries(
+    Object.entries(entity).filter(([key]) => !KNOWN_SELECT_KEYS.has(key)),
+  )
+
+  return {
+    ...entity,
+    options: (entity.options ?? []).map(formatOption),
+    isOpen: entity.isOpen ?? false,
+    searchTerm: entity.searchTerm ?? "",
+    focusedIndex: entity.focusedIndex ?? NO_FOCUSED_INDEX,
+    isMulti,
+    selectedValue: entity.selectedValue ?? (isMulti ? [] : null),
+    isLoading: entity.isLoading ?? false,
+    isDisabled: entity.isDisabled ?? false,
+    isSearchable: entity.isSearchable ?? true,
+    isClearable: entity.isClearable ?? true,
+    placeholder: entity.placeholder ?? "Select...",
+    noOptionsMessage: entity.noOptionsMessage ?? "No options",
+    loadingMessage: entity.loadingMessage ?? "Loading...",
+    size: entity.size ?? "md",
+    fullWidth: entity.fullWidth ?? false,
+    label: entity.label ?? "",
+    controlProps,
+  }
+}
+
+const KNOWN_SELECT_KEYS = new Set([
+  "id",
+  "type",
+  "label",
+  "options",
+  "isOpen",
+  "searchTerm",
+  "focusedIndex",
+  "isMulti",
+  "selectedValue",
+  "isLoading",
+  "isDisabled",
+  "isSearchable",
+  "isClearable",
+  "placeholder",
+  "noOptionsMessage",
+  "loadingMessage",
+  "fullWidth",
+  "size",
+  "controlProps",
+])

package/src/controls/slider/index.js

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

package/src/controls/slider/slider.stories.js

@@ -0,0 +1,43 @@
+import {
+  makeStoryRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { slider } from "."
+
+export default {
+  title: "Controls/Slider",
+  tags: ["autodocs"],
+  render: makeStoryRender(slider, "story-slider"),
+  argTypes: {
+    ...notifyActionArgType,
+    label: { control: "text", description: "Field label." },
+    name: { control: "text", description: "Native input name." },
+    value: { control: "number", description: "Current slider value." },
+    min: { control: "number", description: "Minimum value." },
+    max: { control: "number", description: "Maximum value." },
+    step: { control: "number", description: "Step value." },
+    disabled: { control: "boolean", description: "Disables interaction." },
+    showValue: { control: "boolean", description: "Shows current value." },
+    fullWidth: { control: "boolean", description: "Expands width to 100%." },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Range input control with optional value indicator.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  label: "Volume",
+  name: "volume",
+  value: 30,
+  min: 0,
+  max: 100,
+  step: 1,
+  disabled: false,
+  showValue: true,
+  fullWidth: false,
+}

package/src/controls/slider/style.css

@@ -0,0 +1,28 @@
+.iw-slider-field {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--iw-space-2);
+  font-family: var(--iw-font-family-sans);
+  color: var(--iw-color-text);
+
+  .iw-slider-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--iw-space-4);
+    font-size: var(--iw-font-size-sm);
+  }
+
+  .iw-slider-value {
+    color: var(--iw-color-text-secondary);
+  }
+
+  .iw-slider {
+    width: 100%;
+    accent-color: var(--iw-color-primary);
+  }
+
+  &.iw-slider-full-width {
+    width: 100%;
+  }
+}

package/src/controls/slider/template.js

@@ -0,0 +1,66 @@
+/**
+ * @typedef {import('../../../types/controls/slider').SliderEntity} SliderEntity
+ * @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"
+
+/**
+ * Slider control based on native range input.
+ *
+ * @param {SliderEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(entity, api) {
+  const {
+    name = "",
+    label,
+    value = 0,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    showValue = true,
+    fullWidth = false,
+    ...rest
+  } = entity
+
+  const inputId = entity.id || name
+
+  const classes = {
+    "iw-slider-field": true,
+    "iw-slider-full-width": fullWidth,
+  }
+
+  return html`
+    <div class=${classMap(classes)}>
+      ${(label || showValue) &&
+      html`<div class="iw-slider-header">
+        ${label
+          ? html`<label for=${inputId}>${label}</label>`
+          : html`<span></span>`}
+        ${showValue
+          ? html`<output class="iw-slider-value">${value}</output>`
+          : null}
+      </div>`}
+      <input
+        id=${inputId}
+        class="iw-slider"
+        type="range"
+        name=${name}
+        min=${min}
+        max=${max}
+        step=${step}
+        .value=${String(value)}
+        ?disabled=${disabled}
+        @input=${(event) =>
+          api.notify(`#${entity.id}:change`, Number(event.target.value))}
+        ${ref((element) => applyElementProps(element, rest))}
+      />
+    </div>
+  `
+}

package/src/controls/switch/index.js

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

package/src/controls/switch/style.css

@@ -0,0 +1,82 @@
+.iw-switch-field {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--iw-space-2);
+  font-family: var(--iw-font-family-sans);
+  cursor: pointer;
+
+  .iw-switch-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .iw-switch-track {
+    width: 2.25rem;
+    height: 1.25rem;
+    border-radius: 999px;
+    background: var(--iw-color-gray-500);
+    display: inline-flex;
+    align-items: center;
+    padding: 2px;
+    transition: background-color var(--iw-transition-fast);
+  }
+
+  .iw-switch-thumb {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    background: var(--iw-color-white);
+    box-shadow: var(--iw-shadow-sm);
+    transform: translateX(0);
+    transition: transform var(--iw-transition-fast);
+  }
+
+  .iw-switch-input:checked + .iw-switch-track {
+    background: var(--iw-color-primary);
+  }
+
+  .iw-switch-input:checked + .iw-switch-track .iw-switch-thumb {
+    transform: translateX(1rem);
+  }
+
+  .iw-switch-label {
+    color: var(--iw-color-text);
+    font-size: var(--iw-font-size-base);
+  }
+
+  &.iw-switch-sm .iw-switch-track {
+    width: 2rem;
+    height: 1.125rem;
+  }
+
+  &.iw-switch-sm .iw-switch-thumb {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  &.iw-switch-sm .iw-switch-input:checked + .iw-switch-track .iw-switch-thumb {
+    transform: translateX(0.875rem);
+  }
+
+  &.iw-switch-lg .iw-switch-track {
+    width: 2.75rem;
+    height: 1.5rem;
+  }
+
+  &.iw-switch-lg .iw-switch-thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  &.iw-switch-lg .iw-switch-input:checked + .iw-switch-track .iw-switch-thumb {
+    transform: translateX(1.25rem);
+  }
+
+  &.iw-switch-disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}

package/src/controls/switch/switch.stories.js

@@ -0,0 +1,45 @@
+import {
+  makeStoryRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { switchControl } from "."
+
+export default {
+  title: "Controls/Switch",
+  tags: ["autodocs"],
+  render: makeStoryRender(switchControl, "story-switch"),
+  argTypes: {
+    ...notifyActionArgType,
+    label: { control: "text", description: "Label text." },
+    name: { control: "text", description: "Native input name." },
+    checked: { control: "boolean", description: "Current checked state." },
+    disabled: { control: "boolean", description: "Disables interaction." },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Switch size.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Binary on/off control with a styled switch track.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  label: "Enable notifications",
+  name: "notifications",
+  checked: false,
+  disabled: false,
+  size: "md",
+}
+
+export const On = {}
+On.args = {
+  ...Default.args,
+  checked: true,
+}