@inglorious/ui 0.1.0 → 1.0.0

package/src/controls/fab/fab.stories.js

@@ -1,17 +1,13 @@
 import { html } from "@inglorious/web"
 
-import {
-  makeStoryRender,
-  notifyActionArgType,
-} from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notifyStory.js"
 import { fab } from "."
 
 export default {
   title: "Controls/Fab",
   tags: ["autodocs"],
-  render: makeStoryRender(fab, "story-fab"),
+  render: createRender(fab),
   argTypes: {
-    ...notifyActionArgType,
     children: { control: "text", description: "Content of the FAB." },
     color: {
       control: "select",
@@ -23,8 +19,12 @@ export default {
       options: ["sm", "md", "lg"],
       description: "Button size.",
     },
-    extended: { control: "boolean", description: "Use extended pill shape." },
-    disabled: { control: "boolean", description: "Disables interaction." },
+    isExtended: {
+      control: "boolean",
+      description: "Use extended pill shape.",
+    },
+    isDisabled: { control: "boolean", description: "Disables interaction." },
+    onClick: { action: "onClick" },
   },
   parameters: {
     docs: {
@@ -40,13 +40,13 @@ Default.args = {
   children: "+",
   color: "primary",
   size: "md",
-  extended: false,
-  disabled: false,
+  isExtended: false,
+  isDisabled: false,
 }
 
 export const Extended = {}
 Extended.args = {
   ...Default.args,
-  extended: true,
+  isExtended: true,
   children: html`<span>＋</span><span>Create</span>`,
 }

package/src/controls/fab/index.js

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

package/src/controls/fab/template.js

@@ -1,33 +1,35 @@
 /**
- * @typedef {import('../../../types/controls/fab').FabEntity} FabEntity
- * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('../../../types/controls/fab').FabProps} FabProps
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
 import { html } from "@inglorious/web"
 
-import { buttonPrimitive as button } from "../button/index.js"
+import { button } from "../button/index.js"
 
 /**
  * Floating action button for primary contextual actions.
  *
- * @param {FabEntity} entity
- * @param {Api} api
+ * @param {FabProps} props
  * @returns {TemplateResult}
  */
-export function render(entity, api) {
-  const { children, extended = false, className = "", ...rest } = entity
+export function render(props) {
+  const {
+    children,
+    isExtended = false,
+    className = "",
+    onClick,
+    ...rest
+  } = props
 
-  return button.render(
-    {
-      ...rest,
-      shape: extended ? "pill" : "round",
-      className:
-        `iw-fab ${extended ? "iw-fab-extended" : ""} ${className}`.trim(),
-      children: extended
-        ? children
-        : html`<span class="iw-fab-content">${children}</span>`,
-    },
-    api,
-  )
+  return button.render({
+    ...rest,
+    shape: isExtended ? "pill" : "round",
+    className:
+      `iw-fab ${isExtended ? "iw-fab-extended" : ""} ${className}`.trim(),
+    children: isExtended
+      ? children
+      : html`<span class="iw-fab-content">${children}</span>`,
+    onClick,
+  })
 }

package/src/controls/icon-button/icon-button.stories.js

@@ -1,15 +1,11 @@
-import {
-  makeStoryRender,
-  notifyActionArgType,
-} from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notifyStory.js"
 import { iconButton } from "."
 
 export default {
   title: "Controls/IconButton",
   tags: ["autodocs"],
-  render: makeStoryRender(iconButton, "story-icon-button"),
+  render: createRender(iconButton),
   argTypes: {
-    ...notifyActionArgType,
     icon: { control: "text", description: "Leading icon content." },
     label: { control: "text", description: "Optional button label." },
     iconAfter: { control: "text", description: "Trailing icon content." },
@@ -18,10 +14,6 @@ export default {
       options: ["row", "column"],
       description: "Layout direction for icon and label.",
     },
-    iconOnly: {
-      control: "boolean",
-      description: "Renders icon-only content.",
-    },
     ariaLabel: {
       control: "text",
       description: "Accessible name when used as icon-only button.",
@@ -36,6 +28,12 @@ export default {
       options: ["primary", "secondary", "success", "warning", "error", "info"],
       description: "Semantic color inherited from button.",
     },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Size scale for paddings and font-size.",
+    },
+    onClick: { action: "onClick" },
   },
   parameters: {
     docs: {

package/src/controls/icon-button/index.js

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

package/src/controls/icon-button/template.js

@@ -1,47 +1,41 @@
 /**
- * @typedef {import('../../../types/controls/icon-button').IconButtonEntity} IconButtonEntity
- * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('../../../types/controls/icon-button').IconButtonProps} IconButtonProps
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
 import { html } from "@inglorious/web"
 
-import { render as renderButton } from "../button/template.js"
+import { button } from "../button/index.js"
 
 /**
  * Icon button wrapper built on top of the base button renderer.
  *
- * @param {IconButtonEntity} entity
- * @param {Api} api
+ * @param {IconButtonProps} props
  * @returns {TemplateResult}
  */
-export function render(entity, api) {
+export function render(props) {
   const {
+    type, // eslint-disable-line no-unused-vars
     icon,
     label,
     iconAfter,
     direction = "row",
-    iconOnly = false,
-    ariaLabel,
-  } = entity
+    onClick,
+  } = props
 
   const children = html`
     <span class="iw-icon-button-content iw-icon-button-content-${direction}">
       ${icon ? html`<span class="iw-button-icon">${icon}</span>` : null}
-      ${iconOnly ? null : label}
+      ${label}
       ${iconAfter
         ? html`<span class="iw-button-icon">${iconAfter}</span>`
         : null}
     </span>
   `
 
-  return renderButton(
-    {
-      ...entity,
-      label: iconOnly ? "" : label,
-      children,
-      ariaLabel,
-    },
-    api,
-  )
+  return button.render({
+    ...props,
+    children,
+    onClick,
+  })
 }

package/src/controls/input/index.js

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

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

@@ -1,15 +1,12 @@
-import {
-  makeStoryRender,
-  notifyActionArgType,
-} from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notifyStory.js"
 import { input } from "."
 
 export default {
   title: "Controls/Input",
   tags: ["autodocs"],
-  render: makeStoryRender(input, "story-input"),
+  render: createRender(input),
   argTypes: {
-    ...notifyActionArgType,
+    // ...notifyActionArgType,
     label: {
       control: "text",
       description: "Field label rendered above the input.",
@@ -58,22 +55,25 @@ export default {
       options: ["sm", "md", "lg"],
       description: "Size scale for paddings and font-size.",
     },
-    disabled: {
+    isDisabled: {
       control: "boolean",
       description: "Disables user input and interaction.",
     },
-    readonly: {
+    isReadOnly: {
       control: "boolean",
       description: "Prevents editing while keeping the field focusable.",
     },
-    required: {
+    isRequired: {
       control: "boolean",
       description: "Marks the field as required.",
     },
-    fullWidth: {
+    isFullWidth: {
       control: "boolean",
       description: "Expands input width to 100% of its container.",
     },
+    onChange: { action: "onChange" },
+    onBlur: { action: "onBlur" },
+    onFocus: { action: "onFocus" },
   },
   parameters: {
     docs: {
@@ -84,27 +84,28 @@ export default {
     },
   },
 }
+
 export const Default = {}
 Default.args = {
   label: "Username",
   placeholder: "Enter your username",
   name: "username",
-  type: "text",
+  inputType: "text",
   value: "",
   hint: "",
   error: "",
   size: "md",
-  disabled: false,
-  readonly: false,
-  required: false,
-  fullWidth: false,
+  isDisabled: false,
+  isReadOnly: false,
+  isRequired: false,
+  isFullWidth: false,
 }
 
 export const WithHint = {}
 WithHint.args = {
   ...Default.args,
   label: "Email",
-  type: "email",
+  inputType: "email",
   placeholder: "you@example.com",
   hint: "We'll never share your email",
 }
@@ -113,7 +114,7 @@ export const WithError = {}
 WithError.args = {
   ...Default.args,
   label: "Email",
-  type: "email",
+  inputType: "email",
   value: "invalid-email",
   error: "Please enter a valid email address",
 }
@@ -122,16 +123,16 @@ export const Required = {}
 Required.args = {
   ...Default.args,
   label: "Password",
-  type: "password",
+  inputType: "password",
   placeholder: "Enter your password",
-  required: true,
+  isRequired: true,
 }
 
 export const Disabled = {}
 Disabled.args = {
   ...Default.args,
   label: "Disabled Input",
-  disabled: true,
+  isDisabled: true,
   value: "Cannot edit",
 }
 
@@ -139,7 +140,7 @@ export const Readonly = {}
 Readonly.args = {
   ...Default.args,
   label: "Readonly Input",
-  readonly: true,
+  isReadOnly: true,
   value: "Read-only value",
 }
 
@@ -162,14 +163,14 @@ FullWidth.args = {
   ...Default.args,
   label: "Full Width Input",
   placeholder: "This input takes full width",
-  fullWidth: true,
+  isFullWidth: true,
 }
 
 export const Number = {}
 Number.args = {
   ...Default.args,
   label: "Amount",
-  type: "number",
+  inputType: "number",
   value: "1234.56",
   placeholder: "0.00",
   min: "0",

package/src/controls/input/style.css

@@ -4,13 +4,13 @@
   gap: var(--iw-space-1);
   font-family: var(--iw-font-family-sans);
 
-  &.iw-input-full-width {
+  &.iw-input-full-width .iw-input {
     width: 100%;
   }
 
   .iw-input-label {
     font-size: var(--iw-font-size-sm);
-    font-weight: var(--iw-font-weight-medium);
+    font-weight: var(--iw-font-weight-normal);
     color: var(--iw-color-text);
   }
 
@@ -26,11 +26,11 @@
   }
 
   .iw-input {
-    width: 100%;
-    padding: var(--iw-space-2) var(--iw-space-3);
+    height: 2.25rem;
+    padding: 0 var(--iw-space-3);
     font-family: inherit;
     font-size: var(--iw-font-size-base);
-    line-height: var(--iw-line-height-normal);
+    line-height: 1.2;
     color: var(--iw-input-text);
     background-color: var(--iw-input-bg);
     border: 1px solid var(--iw-input-border);
@@ -72,12 +72,14 @@
     }
 
     &.iw-input-sm {
-      padding: var(--iw-space-1) var(--iw-space-2);
+      height: 2rem;
+      padding: 0 var(--iw-space-2);
       font-size: var(--iw-font-size-sm);
     }
 
     &.iw-input-lg {
-      padding: var(--iw-space-3) var(--iw-space-4);
+      height: 2.75rem;
+      padding: 0 var(--iw-space-4);
       font-size: var(--iw-font-size-lg);
     }
   }

package/src/controls/input/template.js

@@ -1,54 +1,52 @@
 /**
- * @typedef {import('../../../types/controls/input').InputEntity} InputEntity
- * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('../../../types/controls/input').InputProps} InputProps
  * @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"
 
 /**
  * Input component for Inglorious Web.
  *
  * @example
  * // Stateless usage
- * input.render({ label: 'Email', type: 'email', placeholder: 'you@example.com' }, api)
+ * input.render({ label: 'Email', type: 'email', placeholder: 'you@example.com' })
  *
- * @example
- * // Stateful usage with event handling
- * // Entity: { type: 'input', id: 'emailInput', label: 'Email' }
- * // In store: api.render('emailInput')
- *
- * @param {InputEntity} entity
- * @param {Api} api
+ * @param {InputProps} props
  * @returns {TemplateResult}
  */
-export function render(entity, api) {
+export function render(props) {
   const {
+    id,
+    type, // eslint-disable-line no-unused-vars
     name = "",
-    type = "text",
+    inputType = "text",
     value = "",
     placeholder = "",
     label,
     hint,
     error,
     size = "md",
-    disabled = false,
-    readonly = false,
-    required = false,
-    fullWidth = false,
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
+    isFullWidth = false,
     icon,
     iconAfter,
+    onChange,
+    onBlur,
+    onFocus,
     ...rest
-  } = entity
+  } = props
 
-  const inputId = entity.id || name
+  const inputId = id || name
 
   const wrapperClasses = {
     "iw-input-field": true,
-    "iw-input-full-width": fullWidth,
-    "iw-input-disabled": disabled,
+    "iw-input-full-width": isFullWidth,
+    "iw-input-disabled": isDisabled,
     "iw-input-has-error": !!error,
     "iw-input-has-icon": !!icon,
     "iw-input-has-icon-after": !!iconAfter,
@@ -58,7 +56,7 @@ export function render(entity, api) {
     "iw-input": true,
     [`iw-input-${size}`]: size !== "md",
     "iw-input-error": !!error,
-    "iw-input-number": type === "number",
+    "iw-input-number": inputType === "number",
   }
 
   return html`
@@ -67,7 +65,7 @@ export function render(entity, api) {
         ? html`
             <label for=${inputId} class="iw-input-label">
               ${label}
-              ${required
+              ${isRequired
                 ? html`<span class="iw-input-required">*</span>`
                 : null}
             </label>
@@ -80,17 +78,16 @@ export function render(entity, api) {
         <input
           id=${inputId}
           name=${name}
-          type=${type}
+          type=${inputType}
           .value=${value}
           placeholder=${placeholder}
-          ?disabled=${disabled}
-          ?readonly=${readonly}
-          ?required=${required}
+          ?disabled=${isDisabled}
+          ?readonly=${isReadOnly}
+          ?required=${isRequired}
           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`)}
+          @input=${(event) => onChange?.(event.target.value)}
+          @blur=${onBlur}
+          @focus=${onFocus}
           ${ref((element) => applyElementProps(element, rest))}
         />
 

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

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

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

@@ -1,15 +1,11 @@
-import {
-  makeStoryRender,
-  notifyActionArgType,
-} from "../../stories/notifyStory.js"
+import { createRender } from "../../stories/notifyStory.js"
 import { radioGroup } from "."
 
 export default {
   title: "Controls/RadioGroup",
   tags: ["autodocs"],
-  render: makeStoryRender(radioGroup, "story-radio-group"),
+  render: createRender(radioGroup),
   argTypes: {
-    ...notifyActionArgType,
     label: { control: "text", description: "Fieldset label." },
     name: { control: "text", description: "Native radio input name." },
     value: { control: "text", description: "Selected option value." },
@@ -18,8 +14,14 @@ export default {
       options: ["column", "row"],
       description: "Layout direction for options.",
     },
-    disabled: { control: "boolean", description: "Disables all options." },
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "success", "warning", "error", "info"],
+      description: "Semantic accent color.",
+    },
+    isDisabled: { control: "boolean", description: "Disables all options." },
     options: { control: "object", description: "List of radio options." },
+    onChange: { action: "onChange" },
   },
   parameters: {
     docs: {
@@ -36,7 +38,8 @@ Default.args = {
   name: "priority",
   value: "medium",
   direction: "column",
-  disabled: false,
+  color: "primary",
+  isDisabled: false,
   options: [
     { label: "Low", value: "low" },
     { label: "Medium", value: "medium" },

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

@@ -1,4 +1,5 @@
 .iw-radio-group {
+  --iw-radio-accent: var(--iw-color-primary);
   border: 0;
   margin: 0;
   padding: 0;
@@ -20,7 +21,7 @@
 
   .iw-radio {
     margin: 0;
-    accent-color: var(--iw-color-primary);
+    accent-color: var(--iw-radio-accent);
   }
 
   &.iw-radio-group-column {
@@ -38,4 +39,24 @@
   &.iw-radio-group-disabled {
     opacity: 0.6;
   }
+
+  &.iw-radio-group-secondary {
+    --iw-radio-accent: var(--iw-color-gray-600);
+  }
+
+  &.iw-radio-group-success {
+    --iw-radio-accent: var(--iw-color-success);
+  }
+
+  &.iw-radio-group-warning {
+    --iw-radio-accent: var(--iw-color-warning);
+  }
+
+  &.iw-radio-group-error {
+    --iw-radio-accent: var(--iw-color-error);
+  }
+
+  &.iw-radio-group-info {
+    --iw-radio-accent: var(--iw-color-info);
+  }
 }