@inglorious/ui 0.1.0 → 1.0.0

package/src/data-display/chip/style.css

@@ -0,0 +1,84 @@
+.iw-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--iw-space-1);
+  padding: var(--iw-space-1) var(--iw-space-2);
+  border-radius: 999px;
+  background: var(--iw-color-bg-secondary);
+  color: var(--iw-color-text);
+  font-size: var(--iw-font-size-sm);
+  line-height: 1;
+
+  .iw-chip-label {
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+  }
+
+  .iw-chip-remove {
+    display: inline-grid;
+    place-items: center;
+    align-self: center;
+    width: 1em;
+    height: 1em;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+    font-size: var(--iw-font-size-sm);
+    line-height: 1;
+  }
+
+  &.iw-chip-sm {
+    padding-block: var(--iw-space-1);
+    padding-inline: var(--iw-space-2);
+    font-size: var(--iw-font-size-xs);
+
+    .iw-chip-remove {
+      font-size: var(--iw-font-size-xs);
+    }
+  }
+
+  &.iw-chip-lg {
+    padding-block: var(--iw-space-2);
+    padding-inline: var(--iw-space-3);
+    font-size: var(--iw-font-size-base);
+
+    .iw-chip-remove {
+      font-size: var(--iw-font-size-base);
+    }
+  }
+
+  &.iw-chip-shape-rounded {
+    border-radius: var(--iw-radius-md);
+  }
+
+  &.iw-chip-shape-square {
+    border-radius: var(--iw-radius-none);
+  }
+
+  &.iw-chip-primary {
+    background: color-mix(in srgb, var(--iw-color-primary) 20%, transparent);
+  }
+
+  &.iw-chip-secondary {
+    background: color-mix(in srgb, var(--iw-color-gray-600) 20%, transparent);
+  }
+
+  &.iw-chip-success {
+    background: color-mix(in srgb, var(--iw-color-success) 20%, transparent);
+  }
+
+  &.iw-chip-warning {
+    background: color-mix(in srgb, var(--iw-color-warning) 24%, transparent);
+  }
+
+  &.iw-chip-error {
+    background: color-mix(in srgb, var(--iw-color-error) 20%, transparent);
+  }
+
+  &.iw-chip-info {
+    background: color-mix(in srgb, var(--iw-color-info) 20%, transparent);
+  }
+}

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

@@ -0,0 +1,32 @@
+/**
+ * @typedef {import('../../../types/data-display/chip').ChipProps} ChipProps
+ */
+
+import { classMap, html } from "@inglorious/web"
+
+export function render(props) {
+  const {
+    children,
+    isRemovable = false,
+    color = "default",
+    size = "md",
+    shape = "pill",
+    onClick,
+  } = props
+
+  const classes = {
+    "iw-chip": true,
+    [`iw-chip-${color}`]: color !== "default",
+    [`iw-chip-${size}`]: size !== "md",
+    [`iw-chip-shape-${shape}`]: shape !== "pill",
+  }
+
+  return html`<span class=${classMap(classes)}>
+    <span class="iw-chip-label">${children}</span>
+    ${isRemovable
+      ? html`<button type="button" class="iw-chip-remove" @click=${onClick}>
+          ×
+        </button>`
+      : null}
+  </span>`
+}

package/src/data-display/data-display.css

@@ -0,0 +1,11 @@
+@import "./avatar/style.css";
+@import "./badge/style.css";
+@import "./chip/style.css";
+@import "./data-grid/style.css";
+@import "./divider/style.css";
+@import "./icon/style.css";
+@import "./list/style.css";
+@import "./material-icon/style.css";
+@import "./table/style.css";
+@import "./tooltip/style.css";
+@import "./typography/style.css";

package/src/data-display/data-grid/base.css

@@ -0,0 +1,58 @@
+.iw-data-grid {
+  user-select: none;
+
+  .iw-data-grid-header {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .iw-data-grid-header-row {
+    display: flex;
+  }
+
+  .iw-data-grid-header-column {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .iw-data-grid-toolbar {
+    display: flex;
+  }
+
+  .iw-data-grid-searchbar {
+    flex: 1 1 auto;
+  }
+
+  .iw-data-grid-filter-input,
+  .iw-data-grid-filter-select {
+    width: 100%;
+  }
+
+  .iw-data-grid-filter-range {
+    display: flex;
+    align-items: center;
+    gap: var(--iw-space-2);
+  }
+
+  .iw-data-grid-filter-range-input {
+    min-width: 0;
+    flex: 1 1 0;
+  }
+
+  .iw-data-grid-row {
+    display: flex;
+  }
+
+  .iw-data-grid-footer-row {
+    display: flex;
+  }
+
+  .iw-data-grid-column-resizer {
+    position: absolute;
+    inset: 0 0 0 auto;
+    width: 1rem;
+    cursor: col-resize;
+    touch-action: none;
+  }
+}

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

@@ -0,0 +1,158 @@
+import {
+  createEntityRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { dataGrid } from "."
+
+const baseRows = [
+  { id: 1, name: "Charlie", age: 35, active: true, role: "Admin" },
+  { id: 2, name: "Alice", age: 30, active: true, role: "User" },
+  { id: 3, name: "Bob", age: 25, active: false, role: "User" },
+  { id: 4, name: "David", age: 40, active: true, role: "Admin" },
+]
+
+const baseColumns = [
+  {
+    id: "id",
+    title: "Id",
+    type: "number",
+    isSortable: true,
+    isFilterable: true,
+    filter: { type: "number" },
+  },
+  { id: "name", title: "Name", isSortable: true, isFilterable: true },
+  {
+    id: "age",
+    title: "Age",
+    type: "number",
+    isSortable: true,
+    isFilterable: true,
+  },
+  {
+    id: "active",
+    title: "Active",
+    type: "boolean",
+    isFilterable: true,
+    width: 100,
+  },
+  {
+    id: "role",
+    title: "Role",
+    isFilterable: true,
+    filter: { type: "select", options: ["", "Admin", "User"] },
+    width: 100,
+  },
+]
+
+function createRows(count) {
+  return Array.from({ length: count }, (_, index) => ({
+    id: index + 1,
+    name: `User ${index + 1}`,
+    age: 20 + (index % 35),
+    active: index % 3 !== 0,
+    role: index % 4 === 0 ? "Admin" : "User",
+  }))
+}
+
+export default {
+  title: "Data Display/DataGrid",
+  tags: ["autodocs"],
+  render: createEntityRender({ dataGrid }),
+  argTypes: {
+    ...notifyActionArgType,
+    id: { control: "text", description: "Optional grid id" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Data grid primitive with overridable `renderHeaderCell`, `renderRow`, and `renderCell` sub-renders.",
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    id: "dataGrid",
+    type: "dataGrid",
+    rows: baseRows,
+    columns: baseColumns,
+    search: {},
+    selection: [2],
+    isStriped: true,
+  },
+}
+
+export const Paginated = {
+  args: {
+    ...Default.args,
+    rows: createRows(48),
+    selection: [],
+    pagination: {
+      page: 0,
+      pageSize: 10,
+      pageSizes: [10, 20, 50],
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Shows the grid with enough rows to exercise pagination, footer controls, and the global search toolbar.",
+      },
+    },
+  },
+}
+
+export const FlexibleWidths = {
+  args: {
+    ...Default.args,
+    columns: [
+      { ...baseColumns[0], width: "auto" },
+      { ...baseColumns[1], width: "2fr" },
+      { ...baseColumns[2], width: "1fr" },
+      { ...baseColumns[3], width: 100 },
+      { ...baseColumns[4], width: "40%" },
+    ],
+    selection: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates mixed column sizing with `auto`, fractional `fr`, percentage, and fixed widths before any manual resizing.",
+      },
+    },
+  },
+}
+
+export const Virtualized = {
+  args: {
+    id: "virtualizedGrid",
+    type: "dataGrid",
+    rows: createRows(1000),
+    columns: baseColumns,
+    search: null,
+    selection: [],
+    pagination: null,
+    isStriped: true,
+    isVirtualized: true,
+    virtualization: {
+      viewportHeight: 480,
+      estimatedHeight: 44,
+      bufferSize: 6,
+      visibleRange: { start: 0, end: 20 },
+      itemHeight: null,
+      scrollTop: 0,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders 1000 rows with virtualization enabled and pagination disabled.",
+      },
+    },
+  },
+}

package/src/data-display/data-grid/filters/helpers.js

@@ -0,0 +1,8 @@
+export function format(value, type) {
+  if (type === "number") return Number(value)
+  if (type === "boolean")
+    return value === "true" ? true : value === "false" ? false : null
+  if (["date", "time", "datetime"].includes(type))
+    return new Date(value).getTime()
+  return value
+}

package/src/data-display/data-grid/filters/index.js

@@ -0,0 +1,21 @@
+import { choose, html } from "@inglorious/web"
+
+import { inputFilter } from "./input.js"
+import { rangeFilter } from "./range.js"
+import { selectFilter } from "./select.js"
+
+export const filters = {
+  render(entity, column) {
+    return html`${choose(
+      column.filter.type,
+      [
+        ["range", () => rangeFilter.render(entity, column)],
+        ["date", () => rangeFilter.render(entity, column)],
+        ["time", () => rangeFilter.render(entity, column)],
+        ["datetime", () => rangeFilter.render(entity, column)],
+        ["select", () => selectFilter.render(entity, column)],
+      ],
+      () => inputFilter.render(entity, column),
+    )}`
+  },
+}

package/src/data-display/data-grid/filters/input.js

@@ -0,0 +1,24 @@
+import { input } from "../../../controls/input"
+import { format } from "./helpers"
+
+const DEFAULT_PLACEHOLDER = {
+  number: "=",
+  text: "Contains...",
+}
+
+export const inputFilter = {
+  render(entity, column) {
+    return input.render({
+      name: column.id,
+      inputType: column.filter.type,
+      placeholder:
+        column.filter.placeholder ?? DEFAULT_PLACEHOLDER[column.filter.type],
+      size: "sm",
+      isFullWidth: true,
+      onChange: (value) => {
+        const formattedValue = value ? format(value, column.type) : null
+        entity.onFilterChange?.({ columnId: column.id, value: formattedValue })
+      },
+    })
+  },
+}

package/src/data-display/data-grid/filters/range.js

@@ -0,0 +1,48 @@
+import { html } from "@inglorious/web"
+
+import { input } from "../../../controls/input"
+import { format } from "./helpers"
+
+const RANGE_TYPE = {
+  range: "number",
+  date: "date",
+  time: "time",
+  datetime: "datetime-local",
+}
+
+export const rangeFilter = {
+  render(entity, column) {
+    return html`<div class="iw-data-grid-filter-range">
+      ${input.render({
+        name: `${column.id}Min`,
+        inputType: RANGE_TYPE[column.filter.type],
+        placeholder: column.filter.placeholder ?? "≥",
+        size: "sm",
+        isFullWidth: true,
+        className: "iw-data-grid-filter-range-input",
+        onChange: (value) => {
+          const formattedValue = value ? format(value, column.type) : null
+          entity.onFilterChange?.({
+            columnId: column.id,
+            value: { ...entity.filters[column.id], min: formattedValue },
+          })
+        },
+      })}
+      ${input.render({
+        name: `${column.id}Max`,
+        inputType: RANGE_TYPE[column.filter.type],
+        placeholder: column.filter.placeholder ?? "≤",
+        size: "sm",
+        isFullWidth: true,
+        className: "iw-data-grid-filter-range-input",
+        onChange: (value) => {
+          const formattedValue = value ? format(value, column.type) : null
+          entity.onFilterChange?.({
+            columnId: column.id,
+            value: { ...entity.filters[column.id], max: formattedValue },
+          })
+        },
+      })}
+    </div>`
+  },
+}

package/src/data-display/data-grid/filters/select.js

@@ -0,0 +1,17 @@
+import { select } from "../../../controls/select"
+import { format } from "./helpers"
+
+export const selectFilter = {
+  render(entity, column) {
+    return select.render({
+      name: column.id,
+      size: "sm",
+      isFullWidth: true,
+      options: column.filter.options,
+      onChange: (value) => {
+        const formattedValue = value ? format(value, column.type) : null
+        entity.onFilterChange?.({ columnId: column.id, value: formattedValue })
+      },
+    })
+  },
+}