@inglorious/ui 0.1.0 → 1.0.1

package/src/stories/notifyStory.js

@@ -1,5 +1,6 @@
-import { augmentType } from "@inglorious/store/types"
-import { createMockApi, render } from "@inglorious/web/test"
+import { createStore } from "@inglorious/store"
+import { mount } from "@inglorious/web"
+import { render } from "@inglorious/web/test"
 
 export const notifyActionArgType = {
   onNotify: {
@@ -9,35 +10,31 @@ export const notifyActionArgType = {
   },
 }
 
-export function makeStoryRender(typeDefinition, id, options = {}) {
-  const { resolveByEntityType = false } = options
-  const type = augmentType(typeDefinition)
-
+export function createRender(type) {
   return (args) => {
     const container = document.createElement("div")
-    const { onNotify, ...entityArgs } = args
-    const entity = { id, ...entityArgs }
-    const api = createInstrumentedApi(entity, onNotify)
-
-    if (resolveByEntityType && entity.type) {
-      const getType = api.getType?.bind(api)
-      api.getType = (typeName) =>
-        typeName === entity.type ? type : getType?.(typeName)
-    }
-
-    render(type.render(entity, api), container)
+    render(type.render(args), container)
     return container
   }
 }
 
-function createInstrumentedApi(entityOrState, onNotify) {
-  const api = createMockApi(entityOrState)
-  const originalNotify = api.notify.bind(api)
+export function createEntityRender(types) {
+  return (args) => {
+    const { onNotify, ...entity } = args
+
+    const store = createStore({
+      types,
+      entities: { [entity.id]: entity },
+      autoCreateEntities: true,
+    })
+    const originalNotify = store._api.notify
+    store._api.notify = (type, payload) => {
+      onNotify?.({ type, payload })
+      return originalNotify(type, payload)
+    }
 
-  api.notify = (type, payload) => {
-    onNotify?.({ type, payload })
-    return originalNotify(type, payload)
+    const container = document.createElement("div")
+    mount(store, (api) => api.render(entity.id), container)
+    return container
   }
-
-  return api
 }

package/src/styles/base.css

@@ -0,0 +1,2 @@
+@import "./reset.css";
+@import "./tokens.css";

package/src/styles/reset.css

@@ -0,0 +1,15 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  min-height: 100%;
+}

package/src/{themes → styles/themes}/bootstrap.css

@@ -1,4 +1,6 @@
 .iw-theme-bootstrap {
+  font-family: var(--iw-font-family-sans);
+
   /* ========================================
      BOOTSTRAP THEME - Bootstrap Inspired
      ======================================== */

package/src/{themes → styles/themes}/inglorious.css

@@ -1,4 +1,6 @@
 .iw-theme-inglorious {
+  font-family: var(--iw-font-family-sans);
+
   /* ========================================
      INGLORIOUS THEME - Neon Videogame Aesthetic
      ======================================== */
@@ -27,6 +29,12 @@
   --iw-color-accent-hover: #ff33ff;
   --iw-color-accent-active: #ff66ff;
 
+  /* Geometry: keep Inglorious mostly squared */
+  --iw-radius-sm: 0;
+  --iw-radius-md: 0;
+  --iw-radius-lg: 0;
+  --iw-radius-xl: 0;
+
   /* ========================================
      COMPONENT TOKENS
      ======================================== */
@@ -79,7 +87,7 @@
 
   /* Alert */
   --iw-alert-radius: var(--iw-radius-none);
-  --iw-alert-shadow: 0 0 10px currentColor;
+  --iw-alert-shadow: none;
   color-scheme: dark;
 }
 

package/src/{themes → styles/themes}/material.css

@@ -1,4 +1,6 @@
 .iw-theme-material {
+  font-family: var(--iw-font-family-sans);
+
   /* ========================================
      MATERIAL THEME - Material Design Inspired
      ======================================== */

package/src/{tokens/index.css → styles/tokens.css}

@@ -63,6 +63,15 @@
   --iw-space-20: 5rem;
   --iw-space-24: 6rem;
 
+  /* ========================================
+     BREAKPOINTS
+     ======================================== */
+  --iw-breakpoint-xs: 20rem;
+  --iw-breakpoint-sm: 40rem;
+  --iw-breakpoint-md: 48rem;
+  --iw-breakpoint-lg: 64rem;
+  --iw-breakpoint-xl: 80rem;
+
   /* ========================================
      BORDER RADIUS
      ======================================== */

package/src/surfaces/accordion/accordion.stories.js

@@ -0,0 +1,60 @@
+import { html } from "@inglorious/web"
+
+import { createRender } from "../../stories/notifyStory.js"
+import { accordion } from "."
+
+export default {
+  title: "Surfaces/Accordion",
+  tags: ["autodocs"],
+  render: createRender(accordion),
+  argTypes: {
+    items: {
+      control: "object",
+      description: "Accordion sections with title, content, and state flags.",
+    },
+    onItemToggle: { action: "onItemToggle" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Collapsible surface sections. Override `renderItem(item, index, props)` for custom row rendering.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    items: [
+      {
+        title: "Account",
+        content: "Manage your account settings.",
+        isExpanded: true,
+      },
+      {
+        title: "Security",
+        content: "Set up 2FA and app passwords.",
+      },
+      {
+        title: "Billing",
+        content: html`<strong>Invoices and subscriptions</strong>`,
+      },
+    ],
+  },
+}
+
+export const WithIcons = {
+  args: {
+    items: [
+      {
+        icon: "👤",
+        title: "Profile",
+        content: "Public profile details",
+        isExpanded: true,
+      },
+      { icon: "🔒", title: "Privacy", content: "Visibility and permissions" },
+      { icon: "💳", title: "Payments", content: "Payment methods" },
+    ],
+  },
+}

package/src/surfaces/accordion/index.js

@@ -0,0 +1 @@
+export { accordion } from "./template.js"

package/src/surfaces/accordion/style.css

@@ -0,0 +1,64 @@
+.iw-accordion {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--iw-color-border);
+  border-radius: var(--iw-radius-md);
+  overflow: hidden;
+  background: var(--iw-color-surface);
+}
+
+.iw-accordion-item + .iw-accordion-item {
+  border-top: 1px solid var(--iw-color-border);
+}
+
+.iw-accordion-trigger {
+  width: 100%;
+  border: 0 none;
+  background: transparent;
+  color: inherit;
+  padding: var(--iw-space-3) var(--iw-space-4);
+  display: flex;
+  align-items: center;
+  gap: var(--iw-space-2);
+  text-align: left;
+  cursor: pointer;
+}
+
+.iw-accordion-trigger:hover:enabled {
+  background: color-mix(
+    in srgb,
+    var(--iw-color-surface-hover) 75%,
+    transparent
+  );
+}
+
+.iw-accordion-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+}
+
+.iw-accordion-title {
+  flex: 1 1 auto;
+  font-weight: var(--iw-font-weight-normal);
+}
+
+.iw-accordion-caret {
+  display: inline-flex;
+  transition: transform var(--iw-transition-fast);
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+}
+
+.iw-accordion-item-expanded .iw-accordion-caret {
+  transform: rotate(180deg);
+}
+
+.iw-accordion-panel {
+  padding: 0 var(--iw-space-4) var(--iw-space-4);
+  color: var(--iw-color-text-secondary, var(--iw-color-text));
+}
+
+.iw-accordion-item-disabled {
+  opacity: 0.6;
+}

package/src/surfaces/accordion/template.js

@@ -0,0 +1,85 @@
+/**
+ * @typedef {import('../../../types/surfaces/accordion').AccordionProps} AccordionProps
+ * @typedef {import('../../../types/surfaces/accordion').AccordionItem} AccordionItem
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref } from "@inglorious/web"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+export const accordion = {
+  /**
+   * @param {AccordionProps} props
+   * @returns {TemplateResult}
+   */
+  render(props) {
+    const {
+      type, // eslint-disable-line no-unused-vars
+      items = [],
+      className = "",
+      ...rest
+    } = props
+
+    const extraClasses = Object.fromEntries(
+      className
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((name) => [name, true]),
+    )
+
+    return html`<div
+      class=${classMap({
+        "iw-accordion": true,
+        ...extraClasses,
+      })}
+      ${ref((el) => applyElementProps(el, rest))}
+    >
+      ${items.map((item, index) => this.renderItem(item, index, props))}
+    </div>`
+  },
+
+  /**
+   * @param {AccordionItem} item
+   * @param {number} index
+   * @param {AccordionProps} props
+   * @returns {TemplateResult}
+   */
+  renderItem(item, index, props) {
+    const {
+      title,
+      content,
+      isDisabled = false,
+      isExpanded = false,
+      onToggle,
+      icon,
+    } = item
+
+    return html`<section
+      class=${classMap({
+        "iw-accordion-item": true,
+        "iw-accordion-item-expanded": isExpanded,
+        "iw-accordion-item-disabled": isDisabled,
+      })}
+    >
+      <button
+        class="iw-accordion-trigger"
+        type="button"
+        aria-expanded=${isExpanded}
+        ?disabled=${isDisabled}
+        @click=${() => {
+          if (isDisabled) return
+          onToggle?.(item, index, !isExpanded)
+          props.onItemToggle?.(item, index, !isExpanded)
+        }}
+      >
+        ${icon ? html`<span class="iw-accordion-icon">${icon}</span>` : null}
+        <span class="iw-accordion-title">${title}</span>
+        <span class="iw-accordion-caret">▾</span>
+      </button>
+      ${isExpanded
+        ? html`<div class="iw-accordion-panel">${content}</div>`
+        : null}
+    </section>`
+  },
+}

package/src/surfaces/app-bar/app-bar.stories.js

@@ -0,0 +1,109 @@
+import { html } from "@inglorious/web"
+
+import { createRender } from "../../stories/notifyStory.js"
+import { appBar } from "."
+
+export default {
+  title: "Surfaces/App Bar",
+  tags: ["autodocs"],
+  render: createRender(appBar),
+  argTypes: {
+    title: {
+      control: "text",
+      description: "Primary heading content in the bar.",
+    },
+    subtitle: {
+      control: "text",
+      description: "Secondary supporting text under the title.",
+    },
+    leading: {
+      control: "text",
+      description: "Optional start-aligned control area.",
+    },
+    trailing: {
+      control: "text",
+      description: "Optional end-aligned actions.",
+    },
+    position: {
+      control: "select",
+      options: ["static", "sticky", "fixed", "absolute", "relative"],
+      description: "Positioning strategy for the bar.",
+    },
+    placement: {
+      control: "select",
+      options: ["top", "bottom"],
+      description: "Anchor the bar to the top or bottom edge.",
+    },
+    variant: {
+      control: "select",
+      options: ["regular", "dense", "prominent"],
+      description: "Height and vertical rhythm preset.",
+    },
+    color: {
+      control: "select",
+      options: ["default", "primary", "secondary", "transparent", "inherit"],
+      description: "Color scheme for the app bar.",
+    },
+    isDense: {
+      control: "boolean",
+      description: 'Legacy compact mode alias (forces `variant="dense"`).',
+    },
+    isElevated: {
+      control: "boolean",
+      description: "Enable drop shadow separation from content.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Top application chrome with optional leading controls, title area, content slot, and trailing actions.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    title: "Dashboard",
+    subtitle: "Workspace",
+    variant: "regular",
+    color: "default",
+    placement: "top",
+    leading: html`<button class="iw-icon-button">☰</button>`,
+    trailing: html`<button class="iw-button iw-button-outline iw-button-sm">
+      New
+    </button>`,
+  },
+}
+
+export const WithContent = {
+  args: {
+    title: "Projects",
+    color: "default",
+    children: html`<input class="iw-input-input" placeholder="Search" />`,
+    trailing: html`<button class="iw-icon-button">⚙</button>`,
+  },
+}
+
+export const Prominent = {
+  args: {
+    title: "Design System",
+    subtitle: "Surfaces and layout tokens",
+    variant: "prominent",
+    color: "primary",
+    leading: html`<button class="iw-icon-button">←</button>`,
+    trailing: html`<button class="iw-icon-button">⋯</button>`,
+  },
+}
+
+export const BottomAppBar = {
+  args: {
+    title: "Playback",
+    subtitle: "Now playing",
+    color: "secondary",
+    position: "fixed",
+    placement: "bottom",
+    trailing: html`<button class="iw-icon-button">⏯</button>`,
+  },
+}

package/src/surfaces/app-bar/index.js

@@ -0,0 +1,3 @@
+import * as renderers from "./template.js"
+
+export const appBar = { ...renderers }

package/src/surfaces/app-bar/style.css

@@ -0,0 +1,109 @@
+.iw-app-bar {
+  display: flex;
+  align-items: center;
+  min-height: var(--iw-space-16);
+  /* gap: var(--iw-space-3); */
+  background: var(--iw-color-surface);
+  color: var(--iw-color-text);
+  border-bottom: 1px solid var(--iw-color-border);
+}
+
+.iw-app-bar-elevated {
+  box-shadow: var(--iw-shadow-md);
+}
+
+.iw-app-bar-prominent {
+  align-items: flex-start;
+  padding-top: var(--iw-space-3);
+  padding-bottom: var(--iw-space-3);
+}
+
+.iw-app-bar-fixed {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: var(--iw-z-fixed, 1030);
+}
+
+.iw-app-bar-sticky {
+  position: sticky;
+  z-index: var(--iw-z-sticky, 1020);
+}
+
+.iw-app-bar-absolute {
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+.iw-app-bar-relative {
+  position: relative;
+}
+
+.iw-app-bar-placement-top {
+  top: 0;
+}
+
+.iw-app-bar-placement-bottom {
+  bottom: 0;
+  border-bottom: 0 none;
+  border-top: 1px solid var(--iw-color-border);
+}
+
+.iw-app-bar-color-default {
+  background: var(--iw-color-surface);
+  color: var(--iw-color-text);
+}
+
+.iw-app-bar-color-primary {
+  background: var(--iw-color-primary);
+  color: var(--iw-color-primary-text, var(--iw-color-white));
+  border-color: color-mix(in srgb, currentColor 18%, transparent);
+}
+
+.iw-app-bar-color-secondary {
+  background: var(--iw-color-accent, var(--iw-color-gray-700));
+  color: var(--iw-color-white);
+  border-color: color-mix(in srgb, currentColor 18%, transparent);
+}
+
+.iw-app-bar-color-transparent {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.iw-app-bar-color-inherit {
+  background: inherit;
+  color: inherit;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.iw-app-bar-leading,
+.iw-app-bar-trailing {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--iw-space-2);
+}
+
+.iw-app-bar-meta {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.iw-app-bar-title {
+  font-weight: var(--iw-font-weight-semibold);
+  line-height: var(--iw-line-height-tight);
+}
+
+.iw-app-bar-subtitle {
+  font-size: var(--iw-font-size-sm);
+  color: color-mix(in srgb, currentColor 72%, transparent);
+  line-height: var(--iw-line-height-tight);
+}
+
+.iw-app-bar-trailing {
+  margin-left: auto;
+}

package/src/surfaces/app-bar/template.js

@@ -0,0 +1,78 @@
+/**
+ * @typedef {import('../../../types/surfaces/app-bar').AppBarProps} AppBarProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref, when } from "@inglorious/web"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+/**
+ * @param {AppBarProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    type, // eslint-disable-line no-unused-vars
+    title,
+    subtitle,
+    leading,
+    trailing,
+    children,
+    isDense = false,
+    variant = "regular",
+    color = "default",
+    isElevated = true,
+    position = "static",
+    placement = "top",
+    className = "",
+    ...rest
+  } = props
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
+  const hasMeta = title || subtitle
+  const effectiveVariant = isDense ? "dense" : variant
+
+  return html`<header
+    class=${classMap({
+      "iw-app-bar": true,
+      "iw-app-bar-elevated": isElevated,
+      [`iw-app-bar-${effectiveVariant}`]: true,
+      [`iw-app-bar-color-${color}`]: true,
+      [`iw-app-bar-${position}`]: true,
+      [`iw-app-bar-placement-${placement}`]: true,
+      ...extraClasses,
+    })}
+    ${ref((el) => applyElementProps(el, rest))}
+  >
+    ${when(
+      leading,
+      () => html`<div class="iw-app-bar-leading">${leading}</div>`,
+    )}
+    ${when(
+      hasMeta,
+      () =>
+        html`<div class="iw-app-bar-meta">
+          ${when(
+            title,
+            () => html`<div class="iw-app-bar-title">${title}</div>`,
+          )}
+          ${when(
+            subtitle,
+            () => html`<div class="iw-app-bar-subtitle">${subtitle}</div>`,
+          )}
+        </div>`,
+    )}
+    ${children}
+    ${when(
+      trailing,
+      () => html`<div class="iw-app-bar-trailing">${trailing}</div>`,
+    )}
+  </header>`
+}