@inglorious/ui 0.1.0

package/src/controls/input/input.stories.js

@@ -0,0 +1,180 @@
+import {
+  makeStoryRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { input } from "."
+
+export default {
+  title: "Controls/Input",
+  tags: ["autodocs"],
+  render: makeStoryRender(input, "story-input"),
+  argTypes: {
+    ...notifyActionArgType,
+    label: {
+      control: "text",
+      description: "Field label rendered above the input.",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text shown when value is empty.",
+    },
+    name: {
+      control: "text",
+      description: "Native HTML input name attribute.",
+    },
+    type: {
+      control: "select",
+      options: ["text", "email", "password", "number", "tel", "url", "search"],
+      description: "Native HTML input type.",
+    },
+    inputmode: {
+      control: "select",
+      options: [
+        "none",
+        "text",
+        "decimal",
+        "numeric",
+        "tel",
+        "search",
+        "email",
+        "url",
+      ],
+      description: "Native inputmode hint for virtual keyboards.",
+    },
+    value: {
+      control: "text",
+      description: "Current input 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 paddings and font-size.",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disables user input and interaction.",
+    },
+    readonly: {
+      control: "boolean",
+      description: "Prevents editing while keeping the field focusable.",
+    },
+    required: {
+      control: "boolean",
+      description: "Marks the field as required.",
+    },
+    fullWidth: {
+      control: "boolean",
+      description: "Expands input width to 100% of its container.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Text field control with labels, hints, errors, and semantic states.",
+      },
+    },
+  },
+}
+export const Default = {}
+Default.args = {
+  label: "Username",
+  placeholder: "Enter your username",
+  name: "username",
+  type: "text",
+  value: "",
+  hint: "",
+  error: "",
+  size: "md",
+  disabled: false,
+  readonly: false,
+  required: false,
+  fullWidth: false,
+}
+
+export const WithHint = {}
+WithHint.args = {
+  ...Default.args,
+  label: "Email",
+  type: "email",
+  placeholder: "you@example.com",
+  hint: "We'll never share your email",
+}
+
+export const WithError = {}
+WithError.args = {
+  ...Default.args,
+  label: "Email",
+  type: "email",
+  value: "invalid-email",
+  error: "Please enter a valid email address",
+}
+
+export const Required = {}
+Required.args = {
+  ...Default.args,
+  label: "Password",
+  type: "password",
+  placeholder: "Enter your password",
+  required: true,
+}
+
+export const Disabled = {}
+Disabled.args = {
+  ...Default.args,
+  label: "Disabled Input",
+  disabled: true,
+  value: "Cannot edit",
+}
+
+export const Readonly = {}
+Readonly.args = {
+  ...Default.args,
+  label: "Readonly Input",
+  readonly: true,
+  value: "Read-only value",
+}
+
+export const Small = {}
+Small.args = {
+  ...Default.args,
+  label: "Small Input",
+  size: "sm",
+}
+
+export const Large = {}
+Large.args = {
+  ...Default.args,
+  label: "Large Input",
+  size: "lg",
+}
+
+export const FullWidth = {}
+FullWidth.args = {
+  ...Default.args,
+  label: "Full Width Input",
+  placeholder: "This input takes full width",
+  fullWidth: true,
+}
+
+export const Number = {}
+Number.args = {
+  ...Default.args,
+  label: "Amount",
+  type: "number",
+  value: "1234.56",
+  placeholder: "0.00",
+  min: "0",
+  max: "10000",
+  step: "0.01",
+  inputmode: "decimal",
+  "data-testid": "amount-input",
+}

package/src/controls/input/style.css

@@ -0,0 +1,121 @@
+.iw-input-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--iw-space-1);
+  font-family: var(--iw-font-family-sans);
+
+  &.iw-input-full-width {
+    width: 100%;
+  }
+
+  .iw-input-label {
+    font-size: var(--iw-font-size-sm);
+    font-weight: var(--iw-font-weight-medium);
+    color: var(--iw-color-text);
+  }
+
+  .iw-input-required {
+    color: var(--iw-color-error);
+    margin-left: var(--iw-space-1);
+  }
+
+  .iw-input-frame {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .iw-input {
+    width: 100%;
+    padding: var(--iw-space-2) var(--iw-space-3);
+    font-family: inherit;
+    font-size: var(--iw-font-size-base);
+    line-height: var(--iw-line-height-normal);
+    color: var(--iw-input-text);
+    background-color: var(--iw-input-bg);
+    border: 1px solid var(--iw-input-border);
+    border-radius: var(--iw-input-radius);
+    outline: none;
+    transition: all var(--iw-transition-fast);
+
+    &::placeholder {
+      color: var(--iw-input-text-placeholder);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--iw-input-bg-hover);
+      border-color: var(--iw-input-border-hover);
+    }
+
+    &:focus:not(:disabled) {
+      background-color: var(--iw-input-bg-focus);
+      border-color: var(--iw-input-border-focus);
+      box-shadow: var(--iw-input-shadow-focus);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &.iw-input-error {
+      border-color: var(--iw-color-error);
+
+      &:focus {
+        border-color: var(--iw-color-error);
+        box-shadow: 0 0 0 1px var(--iw-color-error);
+      }
+    }
+
+    &.iw-input-number {
+      text-align: right;
+    }
+
+    &.iw-input-sm {
+      padding: var(--iw-space-1) var(--iw-space-2);
+      font-size: var(--iw-font-size-sm);
+    }
+
+    &.iw-input-lg {
+      padding: var(--iw-space-3) var(--iw-space-4);
+      font-size: var(--iw-font-size-lg);
+    }
+  }
+
+  .iw-input-icon {
+    position: absolute;
+    left: var(--iw-space-3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--iw-color-text-muted);
+    pointer-events: none;
+
+    &.iw-input-icon-after {
+      left: auto;
+      right: var(--iw-space-3);
+    }
+  }
+
+  &.iw-input-has-icon .iw-input {
+    padding-left: calc(var(--iw-space-3) * 2 + 1em);
+  }
+
+  &.iw-input-has-icon-after .iw-input {
+    padding-right: calc(var(--iw-space-3) * 2 + 1em);
+  }
+
+  .iw-input-hint,
+  .iw-input-error-message {
+    font-size: var(--iw-font-size-sm);
+    line-height: var(--iw-line-height-normal);
+  }
+
+  .iw-input-hint {
+    color: var(--iw-color-text-muted);
+  }
+
+  .iw-input-error-message {
+    color: var(--iw-color-error);
+  }
+}

package/src/controls/input/template.js

@@ -0,0 +1,111 @@
+/**
+ * @typedef {import('../../../types/controls/input').InputEntity} InputEntity
+ * @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"
+
+/**
+ * Input component for Inglorious Web.
+ *
+ * @example
+ * // Stateless usage
+ * input.render({ label: 'Email', type: 'email', placeholder: 'you@example.com' }, api)
+ *
+ * @example
+ * // Stateful usage with event handling
+ * // Entity: { type: 'input', id: 'emailInput', label: 'Email' }
+ * // In store: api.render('emailInput')
+ *
+ * @param {InputEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(entity, api) {
+  const {
+    name = "",
+    type = "text",
+    value = "",
+    placeholder = "",
+    label,
+    hint,
+    error,
+    size = "md",
+    disabled = false,
+    readonly = false,
+    required = false,
+    fullWidth = false,
+    icon,
+    iconAfter,
+    ...rest
+  } = entity
+
+  const inputId = entity.id || name
+
+  const wrapperClasses = {
+    "iw-input-field": true,
+    "iw-input-full-width": fullWidth,
+    "iw-input-disabled": disabled,
+    "iw-input-has-error": !!error,
+    "iw-input-has-icon": !!icon,
+    "iw-input-has-icon-after": !!iconAfter,
+  }
+
+  const inputClasses = {
+    "iw-input": true,
+    [`iw-input-${size}`]: size !== "md",
+    "iw-input-error": !!error,
+    "iw-input-number": type === "number",
+  }
+
+  return html`
+    <div class=${classMap(wrapperClasses)}>
+      ${label
+        ? html`
+            <label for=${inputId} class="iw-input-label">
+              ${label}
+              ${required
+                ? html`<span class="iw-input-required">*</span>`
+                : null}
+            </label>
+          `
+        : null}
+
+      <div class="iw-input-frame">
+        ${icon ? html`<span class="iw-input-icon">${icon}</span>` : null}
+
+        <input
+          id=${inputId}
+          name=${name}
+          type=${type}
+          .value=${value}
+          placeholder=${placeholder}
+          ?disabled=${disabled}
+          ?readonly=${readonly}
+          ?required=${required}
+          class=${classMap(inputClasses)}
+          @input=${(event) =>
+            api.notify(`#${entity.id}:change`, event.target.value)}
+          @blur=${() => api.notify(`#${entity.id}:blur`)}
+          @focus=${() => api.notify(`#${entity.id}:focus`)}
+          ${ref((element) => applyElementProps(element, rest))}
+        />
+
+        ${iconAfter
+          ? html`<span class="iw-input-icon iw-input-icon-after"
+              >${iconAfter}</span
+            >`
+          : null}
+      </div>
+
+      ${error
+        ? html`<span class="iw-input-error-message">${error}</span>`
+        : hint
+          ? html`<span class="iw-input-hint">${hint}</span>`
+          : null}
+    </div>
+  `
+}

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

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

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

@@ -0,0 +1,51 @@
+import {
+  makeStoryRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { radioGroup } from "."
+
+export default {
+  title: "Controls/RadioGroup",
+  tags: ["autodocs"],
+  render: makeStoryRender(radioGroup, "story-radio-group"),
+  argTypes: {
+    ...notifyActionArgType,
+    label: { control: "text", description: "Fieldset label." },
+    name: { control: "text", description: "Native radio input name." },
+    value: { control: "text", description: "Selected option value." },
+    direction: {
+      control: "select",
+      options: ["column", "row"],
+      description: "Layout direction for options.",
+    },
+    disabled: { control: "boolean", description: "Disables all options." },
+    options: { control: "object", description: "List of radio options." },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Single-choice control rendered from an options array.",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  label: "Priority",
+  name: "priority",
+  value: "medium",
+  direction: "column",
+  disabled: false,
+  options: [
+    { label: "Low", value: "low" },
+    { label: "Medium", value: "medium" },
+    { label: "High", value: "high" },
+  ],
+}
+
+export const Row = {}
+Row.args = {
+  ...Default.args,
+  direction: "row",
+}

package/src/controls/radio-group/style.css

@@ -0,0 +1,41 @@
+.iw-radio-group {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-family: var(--iw-font-family-sans);
+
+  .iw-radio-group-label {
+    margin-bottom: var(--iw-space-2);
+    font-size: var(--iw-font-size-sm);
+    color: var(--iw-color-text-secondary);
+  }
+
+  .iw-radio-option {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--iw-space-2);
+    color: var(--iw-color-text);
+    cursor: pointer;
+  }
+
+  .iw-radio {
+    margin: 0;
+    accent-color: var(--iw-color-primary);
+  }
+
+  &.iw-radio-group-column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--iw-space-2);
+  }
+
+  &.iw-radio-group-row {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--iw-space-4);
+  }
+
+  &.iw-radio-group-disabled {
+    opacity: 0.6;
+  }
+}

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

@@ -0,0 +1,71 @@
+/**
+ * @typedef {import('../../../types/controls/radio-group').RadioGroupEntity} RadioGroupEntity
+ * @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"
+
+/**
+ * Radio group control for selecting one option.
+ *
+ * @param {RadioGroupEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(entity, api) {
+  const {
+    name = entity.id || "radio",
+    label,
+    value,
+    options = [],
+    direction = "column",
+    disabled = false,
+    ...rest
+  } = entity
+
+  const rootClasses = {
+    "iw-radio-group": true,
+    [`iw-radio-group-${direction}`]: true,
+    "iw-radio-group-disabled": disabled,
+  }
+
+  return html`
+    <fieldset
+      class=${classMap(rootClasses)}
+      ?disabled=${disabled}
+      ${ref((element) => applyElementProps(element, rest))}
+    >
+      ${label
+        ? html`<legend class="iw-radio-group-label">${label}</legend>`
+        : null}
+      ${options.map((option) => {
+        const {
+          label: optionLabel,
+          value: optionValue,
+          disabled: optionDisabled = false,
+          ...optionRest
+        } = option
+
+        return html`
+          <label class="iw-radio-option">
+            <input
+              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)}
+              ${ref((element) => applyElementProps(element, optionRest))}
+            />
+            <span>${optionLabel}</span>
+          </label>
+        `
+      })}
+    </fieldset>
+  `
+}

package/src/controls/rating/index.js

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

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

@@ -0,0 +1,47 @@
+import {
+  makeStoryRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { rating } from "."
+
+export default {
+  title: "Controls/Rating",
+  tags: ["autodocs"],
+  render: makeStoryRender(rating, "story-rating"),
+  argTypes: {
+    ...notifyActionArgType,
+    value: { control: "number", description: "Current rating value." },
+    max: { control: "number", description: "Maximum rating value." },
+    disabled: { control: "boolean", description: "Disables interaction." },
+    readonly: {
+      control: "boolean",
+      description: "Shows value without interaction.",
+    },
+    symbol: { control: "text", description: "Filled symbol." },
+    emptySymbol: { control: "text", description: "Unfilled symbol." },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Symbol size.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Discrete rating selector rendered as stars (or custom symbols).",
+      },
+    },
+  },
+}
+
+export const Default = {}
+Default.args = {
+  value: 3,
+  max: 5,
+  disabled: false,
+  readonly: false,
+  symbol: "★",
+  emptySymbol: "☆",
+  size: "md",
+}

package/src/controls/rating/style.css

@@ -0,0 +1,29 @@
+.iw-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--iw-space-1);
+
+  .iw-rating-item {
+    border: 0;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    color: var(--iw-color-warning);
+    font-size: 1.25rem;
+    line-height: 1;
+  }
+
+  &.iw-rating-sm .iw-rating-item {
+    font-size: 1rem;
+  }
+
+  &.iw-rating-lg .iw-rating-item {
+    font-size: 1.5rem;
+  }
+
+  &.iw-rating-disabled,
+  &.iw-rating-readonly {
+    opacity: 0.6;
+  }
+}