@inglorious/ui 0.1.0 → 1.0.1

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

@@ -1,41 +1,46 @@
 /**
- * @typedef {import('../../../types/controls/radio-group').RadioGroupEntity} RadioGroupEntity
- * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('../../../types/controls/radio-group').RadioGroupProps} RadioGroupProps
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
 import { classMap, html, ref } from "@inglorious/web"
 
-import { applyElementProps } from "@/shared/applyElementProps.js"
+import { applyElementProps } from "../../shared/applyElementProps.js"
 
 /**
  * Radio group control for selecting one option.
  *
- * @param {RadioGroupEntity} entity
- * @param {Api} api
+ * @param {RadioGroupProps} props
  * @returns {TemplateResult}
  */
-export function render(entity, api) {
+export function render(props) {
   const {
-    name = entity.id || "radio",
+    id,
+    type, // eslint-disable-line no-unused-vars
+    name = "",
     label,
     value,
     options = [],
     direction = "column",
-    disabled = false,
+    color = "primary",
+    isDisabled = false,
+    onChange,
     ...rest
-  } = entity
+  } = props
+
+  const inputId = id || name
 
   const rootClasses = {
     "iw-radio-group": true,
     [`iw-radio-group-${direction}`]: true,
-    "iw-radio-group-disabled": disabled,
+    [`iw-radio-group-${color}`]: color !== "primary",
+    "iw-radio-group-disabled": isDisabled,
   }
 
   return html`
     <fieldset
       class=${classMap(rootClasses)}
-      ?disabled=${disabled}
+      ?disabled=${isDisabled}
       ${ref((element) => applyElementProps(element, rest))}
     >
       ${label
@@ -45,21 +50,21 @@ export function render(entity, api) {
         const {
           label: optionLabel,
           value: optionValue,
-          disabled: optionDisabled = false,
+          isDisabled: optionDisabled = false,
           ...optionRest
         } = option
 
         return html`
           <label class="iw-radio-option">
             <input
+              id=${inputId}
               class="iw-radio"
               type="radio"
               name=${name}
               value=${optionValue}
               .checked=${value === optionValue}
-              ?disabled=${disabled || optionDisabled}
-              @change=${(event) =>
-                api.notify(`#${entity.id}:change`, event.target.value)}
+              ?disabled=${isDisabled || optionDisabled}
+              @change=${(event) => onChange?.(event.target.value)}
               ${ref((element) => applyElementProps(element, optionRest))}
             />
             <span>${optionLabel}</span>

package/src/controls/rating/index.js

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

package/src/controls/rating/rating.stories.js

@@ -1,19 +1,15 @@
-import {
-  makeStoryRender,
-  notifyActionArgType,
-} from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notifyStory.js"
 import { rating } from "."
 
 export default {
   title: "Controls/Rating",
   tags: ["autodocs"],
-  render: makeStoryRender(rating, "story-rating"),
+  render: createRender(rating),
   argTypes: {
-    ...notifyActionArgType,
     value: { control: "number", description: "Current rating value." },
     max: { control: "number", description: "Maximum rating value." },
-    disabled: { control: "boolean", description: "Disables interaction." },
-    readonly: {
+    isDisabled: { control: "boolean", description: "Disables interaction." },
+    isReadOnly: {
       control: "boolean",
       description: "Shows value without interaction.",
     },
@@ -24,6 +20,7 @@ export default {
       options: ["sm", "md", "lg"],
       description: "Symbol size.",
     },
+    onChange: { action: "onChange" },
   },
   parameters: {
     docs: {
@@ -39,8 +36,8 @@ export const Default = {}
 Default.args = {
   value: 3,
   max: 5,
-  disabled: false,
-  readonly: false,
+  isDisabled: false,
+  isReadOnly: false,
   symbol: "★",
   emptySymbol: "☆",
   size: "md",

package/src/controls/rating/style.css

@@ -22,8 +22,7 @@
     font-size: 1.5rem;
   }
 
-  &.iw-rating-disabled,
-  &.iw-rating-readonly {
+  &.iw-rating-disabled {
     opacity: 0.6;
   }
 }

package/src/controls/rating/template.js

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

package/src/controls/select/helpers.js

@@ -32,25 +32,6 @@ export function getOptionLabel(option) {
   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
@@ -71,7 +52,7 @@ export function isOptionSelected(option, selectedValue, isMulti) {
 /**
  * Normalize option to object shape used in rendering/handlers.
  * @param {SelectOption} option
- * @returns {{ value: string|number, label: string, disabled?: boolean }}
+ * @returns {{ value: string|number, label: string, isDisabled?: boolean }}
  */
 export function formatOption(option) {
   if (typeof option === "string" || typeof option === "number") {
@@ -82,7 +63,7 @@ export function formatOption(option) {
     return {
       value: option.value ?? option,
       label: option.label ?? String(option.value ?? option),
-      disabled: option.disabled ?? option.isDisabled ?? false,
+      isDisabled: option.isDisabled ?? option.disabled ?? false,
       ...option,
     }
   }

package/src/controls/select/index.js

@@ -1,15 +1,3 @@
-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
+export const select = { ...renderers }

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

@@ -1,90 +1,94 @@
-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" },
-]
+import { createRender } from "../../stories/notifyStory.js"
+import { select } from "./index.js"
 
 export default {
   title: "Controls/Select",
   tags: ["autodocs"],
-  render: makeStoryRender(select, "story-select"),
+  render: createRender(select),
   argTypes: {
-    ...notifyActionArgType,
-    label: { control: "text", description: "Field label." },
-    selectedValue: {
-      control: "object",
-      description: "Current selection. Value or array of values in multi mode.",
+    name: {
+      control: "text",
+      description: "Native HTML input name attribute.",
     },
-    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.",
+    value: {
+      control: "text",
+      description: "Current select value.",
     },
     size: {
       control: "select",
       options: ["sm", "md", "lg"],
-      description: "Control size.",
+      description: "Size scale for paddings and font-size.",
     },
-    options: { control: "object", description: "Available options." },
+    isDisabled: {
+      control: "boolean",
+      description: "Disables user input and interaction.",
+    },
+    isFullWidth: {
+      control: "boolean",
+      description: "Expands input width to 100% of its container.",
+    },
+    onChange: { action: "onChange" },
+    onBlur: { action: "onBlur" },
+    onFocus: { action: "onFocus" },
   },
   parameters: {
     docs: {
       description: {
-        component:
-          "Theme-aware custom select with searchable dropdown, clear action, and optional multi-selection.",
+        component: "Select field control.",
       },
     },
   },
 }
 
-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,
+export const Default = {}
+Default.args = {
+  name: "animals",
+  options: ["Cat", "Dog", "Seal"],
+  value: "",
   size: "md",
-  options,
+  isDisabled: false,
+  isFullWidth: false,
+}
+
+export const ComplexOptions = {}
+ComplexOptions.args = {
+  ...Default.args,
+  options: [
+    { value: "cat", label: "Cat" },
+    { value: "dog", label: "Dog" },
+    { value: "seal", label: "Seal" },
+  ],
+}
+
+export const Disabled = {}
+Disabled.args = {
+  ...Default.args,
+  value: "Cat",
+  isDisabled: true,
+}
+
+export const DisabledOption = {}
+DisabledOption.args = {
+  ...ComplexOptions.args,
+  options: ComplexOptions.args.options.map((option, index) =>
+    index % 2 ? { ...option, isDisabled: true } : option,
+  ),
+}
+
+export const Small = {}
+Small.args = {
+  ...Default.args,
+  size: "sm",
 }
 
-export const SingleOpen = {}
-SingleOpen.args = {
-  ...SingleClosed.args,
-  isOpen: true,
+export const Large = {}
+Large.args = {
+  ...Default.args,
+  size: "lg",
 }
 
-export const MultiOpen = {}
-MultiOpen.args = {
-  ...SingleClosed.args,
-  isMulti: true,
-  selectedValue: ["it", "fr"],
-  isOpen: true,
+export const FullWidth = {}
+FullWidth.args = {
+  ...Default.args,
+  isFullWidth: true,
 }