@inglorious/ui 1.0.2 → 2.0.0

package/src/data-display/data-grid/template.js

@@ -7,11 +7,11 @@
 
 import { classMap, html, repeat, when } from "@inglorious/web"
 
-import { input } from "../../controls/input/index.js"
-import { select } from "../../controls/select/index.js"
-import { pagination } from "../../navigation/pagination/index.js"
-import { virtualList } from "../virtual-list/index.js"
-import { filters } from "./filters"
+import { Input } from "../../controls/input/index.js"
+import { Select } from "../../controls/select/index.js"
+import { Pagination } from "../../navigation/pagination/index.js"
+import { VirtualList } from "../virtual-list/index.js"
+import { Filters } from "./filters"
 import {
   getPaginationInfo,
   getRowKeyValue,
@@ -25,7 +25,7 @@ const PRETTY_PAGE = 1
 const FIRST_PAGE = 0
 const LAST_PAGE = 1
 
-export const dataGrid = {
+export const DataGrid = {
   /**
    * Main entrypoint for the data grid template. It delegates to the base grid renderer so overrides can still reuse it.
    * Data grids support sorting, filtering, selection, pagination, and optional virtualization.
@@ -108,7 +108,7 @@ export const dataGrid = {
         ${column.title} ${getSortIcon(getSortDirection(props, column.id))}
       </div>
 
-      ${column.isFilterable && filters.render(props, column)}
+      ${column.isFilterable && Filters.render(props, column)}
 
       <div
         class="iw-data-grid-column-resizer"
@@ -130,7 +130,7 @@ export const dataGrid = {
    */
   renderSearchbar(props) {
     return html`<div class="iw-data-grid-searchbar">
-      ${input.render({
+      ${Input.render({
         size: "sm",
         isFullWidth: true,
         name: "search",
@@ -164,7 +164,7 @@ export const dataGrid = {
     const virtualState = getVirtualizationState(props, rows.length)
     const virtualEntity = {
       id: props.id,
-      type: "dataGridVirtualRows",
+      type: "DataGridVirtualRows",
       items: rows,
       className: "iw-data-grid-body",
       scrollTop: virtualState.scrollTop,
@@ -190,7 +190,7 @@ export const dataGrid = {
       }),
     }
 
-    return virtualList.render(virtualEntity, virtualApi)
+    return VirtualList.render(virtualEntity, virtualApi)
   },
 
   /**
@@ -300,7 +300,7 @@ export const dataGrid = {
    */
   renderPagination(props, paginationInfo) {
     return html`<div class="iw-data-grid-row">
-      ${pagination.renderControl(
+      ${Pagination.renderControl(
         {
           buttonSize: "sm",
           buttonVariant: "outline",
@@ -313,7 +313,7 @@ export const dataGrid = {
           onChange: () => props.onPageChange?.(FIRST_PAGE),
         },
       )}
-      ${pagination.renderControl(
+      ${Pagination.renderControl(
         {
           buttonSize: "sm",
           buttonVariant: "outline",
@@ -326,7 +326,7 @@ export const dataGrid = {
           onChange: () => props.onPagePrev?.(),
         },
       )}
-      ${input.render({
+      ${Input.render({
         name: "page",
         size: "sm",
         inputType: "number",
@@ -337,7 +337,7 @@ export const dataGrid = {
       })}
       /
       <span>${paginationInfo.totalPages}</span>
-      ${pagination.renderControl(
+      ${Pagination.renderControl(
         {
           buttonSize: "sm",
           buttonVariant: "outline",
@@ -350,7 +350,7 @@ export const dataGrid = {
           onChange: () => props.onPageNext?.(),
         },
       )}
-      ${pagination.renderControl(
+      ${Pagination.renderControl(
         {
           buttonSize: "sm",
           buttonVariant: "outline",
@@ -370,7 +370,7 @@ export const dataGrid = {
   renderPageSize(props, pagination) {
     return html`<div class="iw-data-grid-footer-row">
       <div>Page size:</div>
-      ${select.render({
+      ${Select.render({
         size: "sm",
         value: pagination.pageSize,
         options: pagination.pageSizes,

package/src/data-display/divider/divider.stories.js

@@ -1,12 +1,12 @@
 import { render } from "@inglorious/web/test"
 
 import { createRender } from "../../stories/notifyStory.js"
-import { divider } from "."
+import { Divider } from "."
 
 export default {
   title: "Data Display/Divider",
   tags: ["autodocs"],
-  render: createRender(divider),
+  render: createRender(Divider),
   argTypes: {
     orientation: {
       control: "select",

package/src/data-display/divider/index.js

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

package/src/data-display/icon/icon-implementations.mdx

@@ -83,13 +83,13 @@ Use this page as a quick reference for supported icon strategies in `@inglorious
   <div className="iw-icon-tab-panels">
     <section className="iw-icon-tab-panel iw-icon-tab-panel-generic">
       <p>Use <code>@inglorious/ui/icon</code> for glyphs, emoji, and simple symbols. Reference: <a href="/?path=/story/data-display-icon--unicode">UTF-8 Icons</a></p>
-      <pre><code>{`icon.render({ children: "★", size: "md", color: "primary" })`}</code></pre>
+      <pre><code>{`Icon.render({ children: "★", size: "md", color: "primary" })`}</code></pre>
       <div className="iw-icon-example">★ ⚑ ♫</div>
     </section>
 
     <section className="iw-icon-tab-panel iw-icon-tab-panel-svg">
       <p>Use inline SVG when you want a custom icon pack without font dependencies.</p>
-      <pre><code>{`icon.render({
+      <pre><code>{`Icon.render({
     children: html\`<svg viewBox="0 0 24 24" ...>...</svg>\`,
     size: "md",
 })`}</code></pre>
@@ -109,7 +109,7 @@ Use this page as a quick reference for supported icon strategies in `@inglorious
 
     <section className="iw-icon-tab-panel iw-icon-tab-panel-material">
       <p>Use <code>@inglorious/ui/material-icon</code> when Material Symbols fonts are loaded. Reference: <a href="https://fonts.google.com/icons?icon.set=Material+Icons" target="_blank">Material Icons</a></p>
-      <pre><code>{`materialIcon.render({ name: "home", filled: true, size: "md" })`}</code></pre>
+      <pre><code>{`MaterialIcon.render({ name: "home", filled: true, size: "md" })`}</code></pre>
       <div className="iw-icon-example">
         <span className="iw-material-symbol" aria-hidden="true">home</span>
         <span className="iw-material-symbol" aria-hidden="true">settings</span>
@@ -119,7 +119,7 @@ Use this page as a quick reference for supported icon strategies in `@inglorious
 
     <section className="iw-icon-tab-panel iw-icon-tab-panel-fa">
       <p>Load Font Awesome CSS globally, then pass an icon element as <code>children</code>. Reference: <a href="https://fontawesome.com/search" target="_blank">Font Awesome Icons</a></p>
-      <pre><code>{`icon.render({
+      <pre><code>{`Icon.render({
     children: html\`<i class="fa-solid fa-user" aria-hidden="true"></i>\`,
 })`}</code></pre>
 

package/src/data-display/icon/icon-utf8.stories.js

@@ -1,18 +1,18 @@
-import { virtualList } from "@inglorious/ui/virtual-list"
+import { VirtualList } from "@inglorious/ui/virtual-list"
 import { html, repeat } from "@inglorious/web"
 
-import { button } from "../../controls/button"
+import { Button } from "../../controls/button"
 import {
   createEntityRender,
   notifyActionArgType,
 } from "../../stories/notifyStory.js"
-import { icon } from "."
+import { Icon } from "."
 
 const unicodeList = {
-  ...virtualList,
+  ...VirtualList,
 
   create(entity) {
-    virtualList.create(entity)
+    VirtualList.create(entity)
 
     const items = []
     let rowIndex = 0
@@ -35,7 +35,7 @@ const unicodeList = {
   },
 
   render(entity, api) {
-    return virtualList.render(entity, {
+    return VirtualList.render(entity, {
       ...api,
       getType: () => unicodeList,
     })
@@ -64,7 +64,7 @@ const unicodeList = {
               .toUpperCase()
               .padStart(4, "0")}`
 
-            return button.render({
+            return Button.render({
               id: code,
               variant: "ghost",
               color: "default",
@@ -72,7 +72,7 @@ const unicodeList = {
               shape: "square",
               ariaLabel: label,
               onClick: () => copyGlyph(glyph),
-              children: icon.render({
+              children: Icon.render({
                 children: glyph,
                 size,
                 color: "current",
@@ -128,7 +128,7 @@ export default {
 export const Unicode = {
   args: {
     id: "unicodeList",
-    type: "unicodeList",
+    type: "UnicodeList",
     start: 0,
     end: 129799,
     columns: 20,

package/src/data-display/icon/icon.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { icon } from "."
+import { Icon } from "."
 
 export default {
   title: "Data Display/Icon",
   tags: ["autodocs"],
-  render: createRender(icon),
+  render: createRender(Icon),
   argTypes: {
     children: { control: "text", description: "Icon glyph or inline content." },
     size: {

package/src/data-display/icon/index.js

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

package/src/data-display/list/index.js

@@ -1,4 +1,4 @@
 import * as handlers from "./handlers.js"
-import { list as renderers } from "./template.js"
+import { List as renderers } from "./template.js"
 
-export const list = { ...renderers, ...handlers }
+export const List = { ...renderers, ...handlers }

package/src/data-display/list/list.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { list } from "."
+import { List } from "."
 
 export default {
   title: "Data Display/List",
   tags: ["autodocs"],
-  render: createRender(list),
+  render: createRender(List),
   argTypes: {
     items: {
       control: "object",

package/src/data-display/list/template.js

@@ -21,13 +21,13 @@
 
 import { classMap, html, ref, repeat, when } from "@inglorious/web"
 
-import { iconButton } from "../../controls/icon-button"
-import { flex } from "../../layout/flex"
+import { IconButton } from "../../controls/icon-button"
+import { Flex } from "../../layout/flex"
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
 const PRETTY_INDEX = 1
 
-export const list = {
+export const List = {
   /**
    * Main entrypoint for the list component. It delegates to the base list renderer so overrides can reuse it.
    * Lists support ordered/unordered modes, nested items, and optional dividers.
@@ -158,7 +158,7 @@ export const list = {
       .filter(Boolean)
       .join(" ")
 
-    return flex.render({
+    return Flex.render({
       element: "li",
       padding: "sm",
       direction: "column",
@@ -170,12 +170,12 @@ export const list = {
         props.onItemClick?.(raw ?? item, path)
       },
       children: [
-        flex.render({
+        Flex.render({
           align: "center",
           gap: "sm",
           children: [
             when(icon, () =>
-              iconButton.render({
+              IconButton.render({
                 icon,
                 size: "sm",
                 color: "secondary",
@@ -184,7 +184,7 @@ export const list = {
                 className: "iw-list-item-icon",
               }),
             ),
-            flex.render({
+            Flex.render({
               direction: "column",
               gap: "sm",
               className: "iw-list-item-content",
@@ -204,7 +204,7 @@ export const list = {
               () =>
                 html`<span class="iw-list-item-trailing">
                   ${when(hasChildren, () =>
-                    iconButton.render({
+                    IconButton.render({
                       variant: "ghost",
                       color: "secondary",
                       size: "sm",

package/src/data-display/material-icon/index.js

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

package/src/data-display/material-icon/material-icon.stories.js

@@ -1,6 +1,6 @@
 import { html, repeat } from "@inglorious/web"
 
-import { materialIcon } from "."
+import { MaterialIcon } from "."
 
 const materialIcons = [
   "search",
@@ -87,7 +87,7 @@ export const Gallery = {
           materialIcons,
           (name) => name,
           (name) =>
-            materialIcon.render({
+            MaterialIcon.render({
               name,
               size,
               isFilled,

package/src/data-display/table/index.js

@@ -1 +1 @@
-export { table } from "./template.js"
+export { Table } from "./template.js"

package/src/data-display/table/table.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { table } from "."
+import { Table } from "."
 
 export default {
   title: "Data Display/Table",
   tags: ["autodocs"],
-  render: createRender(table),
+  render: createRender(Table),
   argTypes: {
     columns: { control: "object", description: "Column definitions." },
     rows: { control: "object", description: "Row records." },

package/src/data-display/table/template.js

@@ -11,7 +11,7 @@ import { applyElementProps } from "../../shared/applyElementProps.js"
 const EVEN_ROW_DIVISOR = 2
 const STRIPED_OFFSET = 1
 
-export const table = {
+export const Table = {
   /**
    * Main entrypoint for the table component. It delegates to the base table renderer so overrides can reuse it.
    * Tables render columns and rows and can be striped or full width.

package/src/data-display/tooltip/index.js

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

package/src/data-display/tooltip/tooltip.stories.js

@@ -1,12 +1,12 @@
 import { html } from "@inglorious/web"
 
 import { createRender } from "../../stories/notifyStory.js"
-import { tooltip } from "."
+import { Tooltip } from "."
 
 export default {
   title: "Data Display/Tooltip",
   tags: ["autodocs"],
-  render: createRender(tooltip),
+  render: createRender(Tooltip),
   argTypes: {
     content: { control: "text", description: "Tooltip text." },
     position: {

package/src/data-display/typography/index.js

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

package/src/data-display/typography/typography.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { typography } from "."
+import { Typography } from "."
 
 export default {
   title: "Data Display/Typography",
   tags: ["autodocs"],
-  render: createRender(typography),
+  render: createRender(Typography),
   argTypes: {
     children: { control: "text", description: "Text content." },
     variant: {

package/src/data-display/virtual-list/index.js

@@ -1,4 +1,4 @@
 import * as handlers from "./handlers.js"
 import * as renderers from "./template.js"
 
-export const virtualList = { ...handlers, ...renderers }
+export const VirtualList = { ...handlers, ...renderers }

package/src/examples/dashboard/app-drawer.js

@@ -1,13 +1,13 @@
 import { html } from "@inglorious/web"
 
-import { avatar } from "../../data-display/avatar"
-import { badge } from "../../data-display/badge"
-import { list } from "../../data-display/list"
-import { materialIcon } from "../../data-display/material-icon"
-import { flex } from "../../layout/flex"
-import { drawer } from "../../navigation/drawer"
-
-export const appDrawer = {
+import { Avatar } from "../../data-display/avatar"
+import { Badge } from "../../data-display/badge"
+import { List } from "../../data-display/list"
+import { MaterialIcon } from "../../data-display/material-icon"
+import { Flex } from "../../layout/flex"
+import { Drawer } from "../../navigation/drawer"
+
+export const AppDrawer = {
   create(entity) {
     entity.items ??= getDefaultItems()
   },
@@ -32,23 +32,23 @@ export const appDrawer = {
   render(entity, api) {
     const items = mapItemsForRender(entity.items ?? [], api)
 
-    return drawer.render({
+    return Drawer.render({
       ...entity,
       anchor: "left",
       onClose: () => api.notify(`#${entity.id}:toggle`),
       onCollapseToggle: () => api.notify(`#${entity.id}:collapseToggle`),
-      title: flex.render({
+      title: Flex.render({
         align: "center",
         gap: "sm",
         padding: "md",
         className: "iw-dashboard-brand",
         children: [
-          avatar.render({ src: "/transparent.png", shape: "square" }),
+          Avatar.render({ src: "/transparent.png", shape: "square" }),
           html`<span class="iw-dashboard-brand-title">Inglorious UI</span>`,
         ],
       }),
       children: html`
-        ${list.render({
+        ${List.render({
           isInset: true,
           padding: "sm",
           items,
@@ -67,18 +67,18 @@ function mapItemsForRender(items, api) {
     const mappedItem = { ...item }
 
     if (item.icon) {
-      mappedItem.icon = materialIcon.render({ name: item.icon, size: "lg" })
+      mappedItem.icon = MaterialIcon.render({ name: item.icon, size: "lg" })
     }
 
     if (item.badge) {
-      mappedItem.action = badge.render(item.badge)
+      mappedItem.action = Badge.render(item.badge)
     }
 
     if (item.href) {
       mappedItem.onClick = () => api.notify("#router:navigate", item.href)
     }
 
-    if (router.path === item.href) {
+    if (router?.path === item.href) {
       mappedItem.isSelected = true
     }