@inglorious/ui 0.1.0

package/src/controls/rating/template.js

@@ -0,0 +1,53 @@
+/**
+ * @typedef {import('../../../types/controls/rating').RatingEntity} RatingEntity
+ * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html } from "@inglorious/web"
+
+/**
+ * Rating control rendered as clickable symbols.
+ *
+ * @param {RatingEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(entity, api) {
+  const {
+    value = 0,
+    max = 5,
+    disabled = false,
+    readonly = false,
+    symbol = "★",
+    emptySymbol = "☆",
+    size = "md",
+  } = entity
+
+  const classes = {
+    "iw-rating": true,
+    [`iw-rating-${size}`]: size !== "md",
+    "iw-rating-disabled": disabled,
+    "iw-rating-readonly": readonly,
+  }
+
+  return html`
+    <div class=${classMap(classes)} role="radiogroup" aria-label="rating">
+      ${Array.from({ length: max }, (_, index) => {
+        const ratingValue = index + 1
+        const active = ratingValue <= value
+        return html`
+          <button
+            type="button"
+            class="iw-rating-item"
+            aria-label=${`rate-${ratingValue}`}
+            ?disabled=${disabled || readonly}
+            @click=${() => api.notify(`#${entity.id}:change`, ratingValue)}
+          >
+            ${active ? symbol : emptySymbol}
+          </button>
+        `
+      })}
+    </div>
+  `
+}

package/src/controls/select/handlers.js

@@ -0,0 +1,133 @@
+/* eslint-disable no-magic-numbers */
+/**
+ * @typedef {import('../../../types/controls/select').SelectEntity} SelectEntity
+ * @typedef {import('../../../types/controls/select').SelectOption} SelectOption
+ */
+
+import { filterOptions, formatOption, getOptionValue } from "./helpers.js"
+
+/**
+ * Initialize missing select state defaults.
+ * @param {SelectEntity} entity
+ */
+export function create(entity) {
+  entity.isOpen ??= false
+  entity.searchTerm ??= ""
+  entity.focusedIndex ??= -1
+
+  entity.isMulti ??= false
+  entity.selectedValue ??= entity.isMulti ? [] : null
+
+  entity.options ??= []
+  entity.options = entity.options.map(formatOption)
+
+  entity.isLoading ??= false
+  entity.isDisabled ??= false
+  entity.isSearchable ??= true
+  entity.isClearable ??= true
+
+  entity.placeholder ??= "Select..."
+  entity.noOptionsMessage ??= "No options"
+  entity.loadingMessage ??= "Loading..."
+}
+
+/** @param {SelectEntity} entity */
+export function open(entity) {
+  if (entity.isDisabled) return
+  entity.isOpen = true
+
+  const filtered = filterOptions(entity.options, entity.searchTerm)
+  entity.focusedIndex = filtered.length ? 0 : -1
+}
+
+/** @param {SelectEntity} entity */
+export function close(entity) {
+  entity.isOpen = false
+  entity.focusedIndex = -1
+}
+
+/** @param {SelectEntity} entity */
+export function toggle(entity) {
+  if (entity.isOpen) close(entity)
+  else open(entity)
+}
+
+/**
+ * Select an option.
+ * @param {SelectEntity} entity
+ * @param {SelectOption} option
+ */
+export function optionSelect(entity, option) {
+  if (entity.isDisabled) return
+
+  const normalizedOption = formatOption(option)
+  const optionValue = getOptionValue(normalizedOption)
+
+  if (entity.isMulti) {
+    const values = Array.isArray(entity.selectedValue)
+      ? entity.selectedValue
+      : []
+    const index = values.indexOf(optionValue)
+
+    if (index === -1) {
+      values.push(optionValue)
+    } else {
+      values.splice(index, 1)
+    }
+
+    entity.selectedValue = values
+    return
+  }
+
+  entity.selectedValue = optionValue
+  close(entity)
+}
+
+/** @param {SelectEntity} entity */
+export function clear(entity) {
+  if (entity.isDisabled) return
+  entity.selectedValue = entity.isMulti ? [] : null
+}
+
+/**
+ * @param {SelectEntity} entity
+ * @param {string} searchTerm
+ */
+export function searchChange(entity, searchTerm) {
+  entity.searchTerm = searchTerm
+  const filtered = filterOptions(entity.options, entity.searchTerm)
+  entity.focusedIndex = filtered.length ? 0 : -1
+}
+
+/** @param {SelectEntity} entity */
+export function focusNext(entity) {
+  const filtered = filterOptions(entity.options, entity.searchTerm)
+  if (!filtered.length) return
+  entity.focusedIndex = Math.min(entity.focusedIndex + 1, filtered.length - 1)
+}
+
+/** @param {SelectEntity} entity */
+export function focusPrev(entity) {
+  entity.focusedIndex = Math.max(entity.focusedIndex - 1, -1)
+}
+
+/** @param {SelectEntity} entity */
+export function focusFirst(entity) {
+  const filtered = filterOptions(entity.options, entity.searchTerm)
+  if (filtered.length) entity.focusedIndex = 0
+}
+
+/** @param {SelectEntity} entity */
+export function focusLast(entity) {
+  const filtered = filterOptions(entity.options, entity.searchTerm)
+  if (filtered.length) entity.focusedIndex = filtered.length - 1
+}
+
+/**
+ * Set focused option index.
+ * @param {SelectEntity} entity
+ * @param {number} index
+ */
+export function focusSet(entity, index) {
+  entity.focusedIndex = Number.isInteger(index) ? index : entity.focusedIndex
+}

package/src/controls/select/helpers.js

@@ -0,0 +1,91 @@
+/**
+ * @typedef {import('../../../types/controls/select').SelectOption} SelectOption
+ */
+
+/**
+ * Get the value of an option.
+ * @param {SelectOption} option
+ * @returns {string|number}
+ */
+export function getOptionValue(option) {
+  if (typeof option === "object" && option !== null && "value" in option) {
+    return option.value
+  }
+
+  return option
+}
+
+/**
+ * Get the label of an option.
+ * @param {SelectOption} option
+ * @returns {string}
+ */
+export function getOptionLabel(option) {
+  if (typeof option === "object" && option !== null && "label" in option) {
+    return String(option.label)
+  }
+
+  if (typeof option === "object" && option !== null && "value" in option) {
+    return String(option.value)
+  }
+
+  return String(option)
+}
+
+/**
+ * Filter options based on search term.
+ * @param {SelectOption[]} options
+ * @param {string} searchTerm
+ * @returns {SelectOption[]}
+ */
+export function filterOptions(options, searchTerm) {
+  if (!searchTerm || searchTerm.trim() === "") {
+    return options
+  }
+
+  const searchLower = String(searchTerm).toLowerCase().trim()
+
+  return options.filter((option) => {
+    const label = getOptionLabel(option)
+    return label.toLowerCase().includes(searchLower)
+  })
+}
+
+/**
+ * Check whether an option is selected.
+ * @param {SelectOption} option
+ * @param {string|number|(string|number)[]|null} selectedValue
+ * @param {boolean} isMulti
+ * @returns {boolean}
+ */
+export function isOptionSelected(option, selectedValue, isMulti) {
+  const optionValue = getOptionValue(option)
+
+  if (isMulti && Array.isArray(selectedValue)) {
+    return selectedValue.some((value) => value === optionValue)
+  }
+
+  return selectedValue === optionValue
+}
+
+/**
+ * Normalize option to object shape used in rendering/handlers.
+ * @param {SelectOption} option
+ * @returns {{ value: string|number, label: string, disabled?: boolean }}
+ */
+export function formatOption(option) {
+  if (typeof option === "string" || typeof option === "number") {
+    return { value: option, label: String(option) }
+  }
+
+  if (typeof option === "object" && option !== null) {
+    return {
+      value: option.value ?? option,
+      label: option.label ?? String(option.value ?? option),
+      disabled: option.disabled ?? option.isDisabled ?? false,
+      ...option,
+    }
+  }
+
+  return { value: String(option), label: String(option) }
+}

package/src/controls/select/index.js

@@ -0,0 +1,15 @@
+import { withRenderValidation } from "../../shared/withRenderValidation.js"
+import * as handlers from "./handlers.js"
+import * as helpers from "./helpers.js"
+import * as renderers from "./template.js"
+
+export const selectPrimitive = { ...handlers, ...renderers }
+export const select = [selectPrimitive, withRenderValidation]
+
+export const {
+  filterOptions,
+  formatOption,
+  getOptionLabel,
+  getOptionValue,
+  isOptionSelected,
+} = helpers

package/src/controls/select/select.stories.js

@@ -0,0 +1,90 @@
+import {
+  makeStoryRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { select } from "."
+
+const options = [
+  { label: "Italy", value: "it" },
+  { label: "France", value: "fr" },
+  { label: "Spain", value: "es" },
+  { label: "Germany", value: "de" },
+]
+
+export default {
+  title: "Controls/Select",
+  tags: ["autodocs"],
+  render: makeStoryRender(select, "story-select"),
+  argTypes: {
+    ...notifyActionArgType,
+    label: { control: "text", description: "Field label." },
+    selectedValue: {
+      control: "object",
+      description: "Current selection. Value or array of values in multi mode.",
+    },
+    isMulti: { control: "boolean", description: "Enable multiple selection." },
+    isOpen: {
+      control: "boolean",
+      description: "Controls dropdown visibility.",
+    },
+    isSearchable: { control: "boolean", description: "Show search input." },
+    isClearable: { control: "boolean", description: "Show clear button." },
+    isDisabled: { control: "boolean", description: "Disable the control." },
+    isLoading: { control: "boolean", description: "Show loading state." },
+    searchTerm: { control: "text", description: "Current search filter." },
+    placeholder: { control: "text", description: "Placeholder text." },
+    noOptionsMessage: { control: "text", description: "No results message." },
+    loadingMessage: { control: "text", description: "Loading message." },
+    fullWidth: {
+      control: "boolean",
+      description: "Expand to container width.",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Control size.",
+    },
+    options: { control: "object", description: "Available options." },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Theme-aware custom select with searchable dropdown, clear action, and optional multi-selection.",
+      },
+    },
+  },
+}
+
+export const SingleClosed = {}
+SingleClosed.args = {
+  label: "Country",
+  selectedValue: "it",
+  isMulti: false,
+  isOpen: false,
+  isSearchable: true,
+  isClearable: true,
+  isDisabled: false,
+  isLoading: false,
+  searchTerm: "",
+  placeholder: "Select...",
+  noOptionsMessage: "No options",
+  loadingMessage: "Loading...",
+  fullWidth: false,
+  size: "md",
+  options,
+}
+
+export const SingleOpen = {}
+SingleOpen.args = {
+  ...SingleClosed.args,
+  isOpen: true,
+}
+
+export const MultiOpen = {}
+MultiOpen.args = {
+  ...SingleClosed.args,
+  isMulti: true,
+  selectedValue: ["it", "fr"],
+  isOpen: true,
+}

package/src/controls/select/style.css

@@ -0,0 +1,211 @@
+.iw-select {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  width: 20rem;
+  gap: var(--iw-space-1);
+  font-family: var(--iw-font-family-sans);
+
+  &.iw-select-full-width {
+    width: 100%;
+  }
+
+  .iw-select-label {
+    font-size: var(--iw-font-size-sm);
+    color: var(--iw-color-text);
+    line-height: var(--iw-line-height-normal);
+  }
+
+  .iw-select-control {
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--iw-space-2);
+    padding: var(--iw-space-2) var(--iw-space-10) var(--iw-space-2)
+      var(--iw-space-3);
+    border: 1px solid var(--iw-input-border);
+    border-radius: var(--iw-input-radius);
+    background: var(--iw-input-bg);
+    color: var(--iw-input-text);
+    cursor: pointer;
+    user-select: none;
+    transition:
+      border-color var(--iw-transition-fast),
+      box-shadow var(--iw-transition-fast),
+      background-color var(--iw-transition-fast);
+
+    &:hover {
+      border-color: var(--iw-input-border-hover);
+      background: var(--iw-input-bg-hover);
+    }
+
+    &.iw-select-control-open {
+      border-color: var(--iw-input-border-focus);
+      box-shadow: var(--iw-input-shadow-focus);
+      background: var(--iw-input-bg-focus);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &.iw-select-control-disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .iw-select-value,
+    .iw-select-placeholder,
+    .iw-select-multi-value {
+      flex: 1;
+      min-width: 0;
+      padding-right: var(--iw-space-1);
+    }
+
+    .iw-select-placeholder {
+      color: var(--iw-color-text-muted);
+    }
+
+    .iw-select-multi-value {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--iw-space-1);
+
+      .iw-select-multi-value-tag {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--iw-space-1);
+        border-radius: var(--iw-radius-sm);
+        padding: 0 var(--iw-space-2);
+        background: var(--iw-color-bg-secondary);
+        border: 1px solid var(--iw-color-border);
+        line-height: 1.6;
+
+        .iw-select-multi-value-tag-label {
+          font-size: var(--iw-font-size-sm);
+        }
+
+        .iw-select-multi-value-remove {
+          font-size: var(--iw-font-size-sm);
+          color: var(--iw-color-text-secondary);
+        }
+      }
+    }
+
+    .iw-select-clear {
+      border: 0;
+      background: transparent;
+      color: var(--iw-color-text-muted);
+      padding: 0;
+      width: 1.25rem;
+      height: 1.25rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      position: absolute;
+      right: var(--iw-space-7);
+
+      &:hover {
+        color: var(--iw-color-text);
+      }
+    }
+
+    .iw-select-arrow {
+      width: 1.25rem;
+      height: 1.25rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      position: absolute;
+      right: var(--iw-space-3);
+      color: var(--iw-color-text-muted);
+      transition: transform var(--iw-transition-fast);
+
+      span {
+        font-size: 0.65rem;
+        line-height: 1;
+      }
+    }
+
+    &.iw-select-control-open .iw-select-arrow {
+      transform: rotate(180deg);
+    }
+  }
+
+  .iw-select-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    max-height: 18rem;
+    overflow: hidden;
+    border: 1px solid var(--iw-color-border);
+    border-radius: var(--iw-radius-md);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    background: var(--iw-color-bg);
+    box-shadow: var(--iw-shadow-lg);
+    margin-top: -1px;
+
+    .iw-select-dropdown-search {
+      width: 100%;
+      border: 0;
+      border-bottom: 1px solid var(--iw-color-border);
+      background: transparent;
+      color: var(--iw-color-text);
+      padding: var(--iw-space-2) var(--iw-space-3);
+      outline: none;
+    }
+
+    .iw-select-dropdown-options {
+      max-height: 15rem;
+      overflow-y: auto;
+
+      .iw-select-dropdown-options-option {
+        display: flex;
+        align-items: center;
+        gap: var(--iw-space-2);
+        cursor: pointer;
+        user-select: none;
+        padding: var(--iw-space-2) var(--iw-space-3);
+
+        &.iw-select-dropdown-options-option-disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        &.iw-select-dropdown-options-option-focused {
+          background: var(--iw-color-bg-secondary);
+        }
+
+        &.iw-select-dropdown-options-option-selected {
+          background: color-mix(
+            in srgb,
+            var(--iw-color-primary) 16%,
+            var(--iw-color-bg) 84%
+          );
+        }
+      }
+    }
+
+    .iw-select-loading,
+    .iw-select-no-options {
+      padding: var(--iw-space-3);
+      text-align: center;
+      color: var(--iw-color-text-muted);
+    }
+  }
+
+  &.iw-select-sm .iw-select-control {
+    padding: var(--iw-space-1) var(--iw-space-8) var(--iw-space-1)
+      var(--iw-space-2);
+  }
+
+  &.iw-select-lg .iw-select-control {
+    padding: var(--iw-space-3) var(--iw-space-12) var(--iw-space-3)
+      var(--iw-space-4);
+  }
+}