@inglorious/ui 0.1.0

package/src/widgets/card/template.js

@@ -0,0 +1,97 @@
+/**
+ * @typedef {import('../../../types/widgets/card').CardEntity} CardEntity
+ * @typedef {import('@inglorious/web').Api} Api
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html } from "@inglorious/web"
+
+/**
+ * Card component for Inglorious Web.
+ *
+ * @example
+ * // Stateless usage
+ * card.render({ title: 'Card Title', subtitle: 'Description' }, api)
+ *
+ * @example
+ * // Stateful usage with event handling
+ * // Entity: { type: 'card', id: 'myCard', title: 'Click me' }
+ * // In store: api.render('myCard')
+ *
+ * @param {CardEntity} entity
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(entity, api) {
+  const { hoverable = false, clickable = false, fullWidth = false } = entity
+  const type = getCardType(entity, api)
+
+  const classes = {
+    "iw-card": true,
+    "iw-card-hoverable": hoverable || clickable,
+    "iw-card-clickable": clickable,
+    "iw-card-full-width": fullWidth,
+  }
+
+  return html`
+    <div
+      class=${classMap(classes)}
+      @click=${() => api.notify(`#${entity.id}:click`)}
+    >
+      ${type.renderHeader(entity, api)} ${type.renderBody(entity, api)}
+      ${type.renderFooter(entity, api)}
+    </div>
+  `
+}
+
+/**
+ * Default header renderer.
+ * Override in composed types for custom header rendering.
+ * @param {CardEntity} entity
+ * @returns {TemplateResult | null}
+ */
+export function renderHeader(entity) {
+  const { title, subtitle } = entity
+  const hasHeader = title || subtitle
+  if (!hasHeader) return null
+
+  return html`<div class="iw-card-header">
+    ${title ? html`<h3 class="iw-card-title">${title}</h3>` : null}
+    ${subtitle ? html`<p class="iw-card-subtitle">${subtitle}</p>` : null}
+  </div>`
+}
+
+/**
+ * Default body renderer.
+ * Override in composed types for custom body rendering.
+ * @returns {TemplateResult}
+ */
+export function renderBody() {
+  return html`<div class="iw-card-body">
+    <slot></slot>
+  </div>`
+}
+
+/**
+ * Default footer renderer.
+ * Override in composed types for custom footer rendering.
+ * @returns {TemplateResult | null}
+ */
+export function renderFooter() {
+  return null
+}
+
+function getCardType(entity, api) {
+  const resolved = api?.getType?.(entity?.type)
+  return hasCardRenderers(resolved)
+    ? resolved
+    : { renderHeader, renderBody, renderFooter }
+}
+
+function hasCardRenderers(type) {
+  return (
+    typeof type?.renderHeader === "function" &&
+    typeof type?.renderBody === "function" &&
+    typeof type?.renderFooter === "function"
+  )
+}

package/types/controls/button-group.d.ts

@@ -0,0 +1,35 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export interface ButtonGroupItem {
+  id?: string
+  value?: string
+  label: string
+  children?: TemplateResult | string | number
+  disabled?: boolean
+  variant?: "default" | "outline" | "ghost"
+  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  size?: "sm" | "md" | "lg"
+  icon?: string
+  iconAfter?: string
+  [key: string]: unknown
+}
+
+export interface ButtonGroupEntity {
+  id?: string
+  buttons?: ButtonGroupItem[]
+  value?: string | string[]
+  multiple?: boolean
+  direction?: "row" | "column"
+  attached?: boolean
+  size?: "sm" | "md" | "lg"
+  variant?: "default" | "outline" | "ghost"
+  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  disabled?: boolean
+  [key: string]: unknown
+}
+
+export interface ButtonGroupType {
+  render(entity: ButtonGroupEntity, api: Api): TemplateResult
+}
+
+export declare const buttonGroup: ButtonGroupType

package/types/controls/button.d.ts

@@ -0,0 +1,23 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export interface ButtonEntity {
+  id?: string
+  children?: TemplateResult | string | number
+  variant?: "default" | "outline" | "ghost"
+  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  size?: "sm" | "md" | "lg"
+  shape?: "rectangle" | "pill" | "round" | "square"
+  disabled?: boolean
+  fullWidth?: boolean
+  type?: "button" | "submit" | "reset" | "menu"
+  ariaLabel?: string
+  ariaPressed?: boolean
+  className?: string
+  [key: string]: unknown
+}
+
+export interface ButtonType {
+  render(entity: ButtonEntity, api: Api): TemplateResult
+}
+
+export declare const button: ButtonType

package/types/controls/checkbox.d.ts

@@ -0,0 +1,18 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export interface CheckboxEntity {
+  id?: string
+  name?: string
+  label?: string
+  checked?: boolean
+  disabled?: boolean
+  required?: boolean
+  size?: "sm" | "md" | "lg"
+  [key: string]: unknown
+}
+
+export interface CheckboxType {
+  render(entity: CheckboxEntity, api: Api): TemplateResult
+}
+
+export declare const checkbox: CheckboxType

package/types/controls/fab.d.ts

@@ -0,0 +1,19 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export interface FabEntity {
+  id?: string
+  children?: TemplateResult | string | number
+  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  size?: "sm" | "md" | "lg"
+  disabled?: boolean
+  type?: "button" | "submit" | "reset" | "menu"
+  extended?: boolean
+  ariaLabel?: string
+  [key: string]: unknown
+}
+
+export interface FabType {
+  render(entity: FabEntity, api: Api): TemplateResult
+}
+
+export declare const fab: FabType

package/types/controls/icon-button.d.ts

@@ -0,0 +1,23 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export interface IconButtonEntity {
+  id?: string
+  icon?: string
+  label?: string
+  iconAfter?: string
+  direction?: "row" | "column"
+  iconOnly?: boolean
+  ariaLabel?: string
+  variant?: "default" | "outline" | "ghost"
+  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  size?: "sm" | "md" | "lg"
+  disabled?: boolean
+  fullWidth?: boolean
+  type?: "button" | "submit" | "reset" | "menu"
+}
+
+export interface IconButtonType {
+  render(entity: IconButtonEntity, api: Api): TemplateResult
+}
+
+export declare const iconButton: IconButtonType

package/types/controls/input.d.ts

@@ -0,0 +1,29 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export interface InputEntity {
+  id?: string
+  name?: string
+  type?: "text" | "password" | "email" | "number" | "tel" | "url" | "search"
+  value?: string
+  placeholder?: string
+  label?: string
+  hint?: string
+  error?: string
+  size?: "sm" | "md" | "lg"
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  fullWidth?: boolean
+  icon?: string
+  iconAfter?: string
+  [key: string]: unknown
+}
+
+export interface InputType {
+  render(entity: InputEntity, api: Api): TemplateResult
+  change(entity: InputEntity, payload: string, api: Api): void
+  blur(entity: InputEntity, payload: unknown, api: Api): void
+  focus(entity: InputEntity, payload: unknown, api: Api): void
+}
+
+export declare const input: InputType

package/types/controls/radio-group.d.ts

@@ -0,0 +1,25 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export interface RadioOption {
+  label: string
+  value: string
+  disabled?: boolean
+  [key: string]: unknown
+}
+
+export interface RadioGroupEntity {
+  id?: string
+  name?: string
+  label?: string
+  value?: string
+  options?: RadioOption[]
+  direction?: "column" | "row"
+  disabled?: boolean
+  [key: string]: unknown
+}
+
+export interface RadioGroupType {
+  render(entity: RadioGroupEntity, api: Api): TemplateResult
+}
+
+export declare const radioGroup: RadioGroupType

package/types/controls/rating.d.ts

@@ -0,0 +1,18 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export interface RatingEntity {
+  id?: string
+  value?: number
+  max?: number
+  disabled?: boolean
+  readonly?: boolean
+  symbol?: string
+  emptySymbol?: string
+  size?: "sm" | "md" | "lg"
+}
+
+export interface RatingType {
+  render(entity: RatingEntity, api: Api): TemplateResult
+}
+
+export declare const rating: RatingType

package/types/controls/select.d.ts

@@ -0,0 +1,56 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export type SelectOption =
+  | string
+  | number
+  | {
+      value: string | number
+      label?: string
+      disabled?: boolean
+      isDisabled?: boolean
+      [key: string]: unknown
+    }
+
+export interface SelectEntity {
+  id?: string
+  type?: string
+  label?: string
+  options?: SelectOption[]
+
+  isOpen?: boolean
+  searchTerm?: string
+  focusedIndex?: number
+
+  isMulti?: boolean
+  selectedValue?: string | number | (string | number)[] | null
+
+  isLoading?: boolean
+  isDisabled?: boolean
+  isSearchable?: boolean
+  isClearable?: boolean
+
+  placeholder?: string
+  noOptionsMessage?: string
+  loadingMessage?: string
+
+  fullWidth?: boolean
+  size?: "sm" | "md" | "lg"
+  [key: string]: unknown
+}
+
+export interface SelectType {
+  create(entity: SelectEntity): void
+  render(entity: SelectEntity, api: Api): TemplateResult
+  open(entity: SelectEntity): void
+  close(entity: SelectEntity): void
+  toggle(entity: SelectEntity): void
+  optionSelect(entity: SelectEntity, option: SelectOption): void
+  clear(entity: SelectEntity): void
+  searchChange(entity: SelectEntity, searchTerm: string): void
+  focusNext(entity: SelectEntity): void
+  focusPrev(entity: SelectEntity): void
+  focusFirst(entity: SelectEntity): void
+  focusLast(entity: SelectEntity): void
+}
+
+export declare const select: SelectType

package/types/controls/slider.d.ts

@@ -0,0 +1,21 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export interface SliderEntity {
+  id?: string
+  name?: string
+  label?: string
+  value?: number
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  showValue?: boolean
+  fullWidth?: boolean
+  [key: string]: unknown
+}
+
+export interface SliderType {
+  render(entity: SliderEntity, api: Api): TemplateResult
+}
+
+export declare const slider: SliderType

package/types/controls/switch.d.ts

@@ -0,0 +1,17 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export interface SwitchEntity {
+  id?: string
+  name?: string
+  label?: string
+  checked?: boolean
+  disabled?: boolean
+  size?: "sm" | "md" | "lg"
+  [key: string]: unknown
+}
+
+export interface SwitchType {
+  render(entity: SwitchEntity, api: Api): TemplateResult
+}
+
+export declare const switchControl: SwitchType

package/types/index.d.ts

@@ -0,0 +1,14 @@
+export type { ButtonEntity } from "./controls/button"
+export type { ButtonGroupEntity } from "./controls/button-group"
+export type { CheckboxEntity } from "./controls/checkbox"
+export type { FabEntity } from "./controls/fab"
+export type { IconButtonEntity } from "./controls/icon-button"
+export type { InputEntity } from "./controls/input"
+export type { RadioGroupEntity } from "./controls/radio-group"
+export type { RatingEntity } from "./controls/rating"
+export type { SelectEntity } from "./controls/select"
+export type { SliderEntity } from "./controls/slider"
+export type { SwitchEntity } from "./controls/switch"
+export type { CardEntity } from "./widgets/card"
+export type { FlexEntity } from "./layout/flex"
+export type { GridEntity } from "./layout/grid"

package/types/layout/flex.d.ts

@@ -0,0 +1,20 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export interface FlexEntity {
+  id?: string
+  type?: string
+  direction?: "row" | "column" | "row-reverse" | "column-reverse"
+  wrap?: "nowrap" | "wrap" | "wrap-reverse"
+  justify?: "start" | "center" | "end" | "between" | "around" | "evenly"
+  align?: "stretch" | "start" | "center" | "end" | "baseline"
+  gap?: "none" | "sm" | "md" | "lg" | "xl"
+  inline?: boolean
+  fullWidth?: boolean
+  children?: Array<TemplateResult | string | number>
+}
+
+export interface FlexType {
+  render(entity: FlexEntity, api: Api): TemplateResult
+}
+
+export declare const flex: FlexType

package/types/layout/grid.d.ts

@@ -0,0 +1,19 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export interface GridEntity {
+  id?: string
+  type?: string
+  columns?: number
+  minColumnWidth?: string
+  gap?: "none" | "sm" | "md" | "lg" | "xl"
+  align?: "stretch" | "start" | "center" | "end"
+  justify?: "stretch" | "start" | "center" | "end"
+  fullWidth?: boolean
+  children?: Array<TemplateResult | string | number>
+}
+
+export interface GridType {
+  render(entity: GridEntity, api: Api): TemplateResult
+}
+
+export declare const grid: GridType

package/types/widgets/card.d.ts

@@ -0,0 +1,21 @@
+import type { TemplateResult, Api } from "@inglorious/web"
+
+export interface CardEntity {
+  id?: string
+  type?: string
+  title?: string
+  subtitle?: string
+  hoverable?: boolean
+  clickable?: boolean
+  fullWidth?: boolean
+}
+
+export interface CardType {
+  render(entity: CardEntity, api: Api): TemplateResult
+  renderHeader(entity: CardEntity, api: Api): TemplateResult | null
+  renderBody(entity: CardEntity, api: Api): TemplateResult
+  renderFooter(entity: CardEntity, api: Api): TemplateResult | null
+  click(entity: CardEntity, payload: unknown, api: Api): void
+}
+
+export declare const card: CardType