@inglorious/ui 0.1.0 → 1.0.1

package/src/feedback/alert/template.js

@@ -0,0 +1,74 @@
+/**
+ * @typedef {import('../../../types/feedback/alert').AlertProps} AlertProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref } from "@inglorious/web"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
+
+/**
+ * @param {AlertProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    type, // eslint-disable-line no-unused-vars
+    title,
+    description,
+    children,
+    severity = "info",
+    variant = "filled",
+    icon,
+    action,
+    onClose,
+    className = "",
+    ...rest
+  } = props
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
+  const classes = {
+    "iw-alert": true,
+    [`iw-alert-${severity}`]: true,
+    [`iw-alert-${variant}`]: true,
+    ...extraClasses,
+  }
+
+  const content = description ?? children
+  const hasTrailing = !!action || !!onClose
+
+  return html`<div
+    class=${classMap(classes)}
+    role="alert"
+    ${ref((el) => applyElementProps(el, rest))}
+  >
+    ${icon ? html`<div class="iw-alert-icon">${icon}</div>` : null}
+    <div class="iw-alert-content">
+      ${title ? html`<div class="iw-alert-title">${title}</div>` : null}
+      ${content
+        ? html`<div class="iw-alert-description">${content}</div>`
+        : null}
+    </div>
+    ${hasTrailing
+      ? html`<div class="iw-alert-trailing">
+          ${action ? html`<div class="iw-alert-action">${action}</div>` : null}
+          ${onClose
+            ? html`<button
+                type="button"
+                class="iw-alert-close"
+                aria-label="Dismiss"
+                @click=${onClose}
+              >
+                ×
+              </button>`
+            : null}
+        </div>`
+      : null}
+  </div>`
+}

package/src/feedback/backdrop/backdrop.stories.js

@@ -0,0 +1,21 @@
+import { html } from "@inglorious/web"
+
+import { createRender } from "../../stories/notifyStory.js"
+import { backdrop } from "."
+
+export default {
+  title: "Feedback/Backdrop",
+  tags: ["autodocs"],
+  render: createRender(backdrop),
+  argTypes: {
+    isOpen: { control: "boolean" },
+    onClick: { action: "onClick" },
+  },
+}
+
+export const Open = {
+  args: {
+    isOpen: true,
+    children: html`<div>Loading content…</div>`,
+  },
+}

package/src/feedback/backdrop/index.js

@@ -0,0 +1,3 @@
+import { render } from "./template.js"
+
+export const backdrop = { render }

package/src/feedback/backdrop/style.css

@@ -0,0 +1,25 @@
+.iw-backdrop {
+  position: fixed;
+  inset: 0;
+  background: color-mix(in srgb, var(--iw-color-black) 65%, transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--iw-z-modal-backdrop, 1040);
+  color: var(--iw-color-white);
+  backdrop-filter: blur(3px);
+  padding: var(--iw-space-4);
+}
+
+.iw-backdrop-content {
+  max-width: min(28rem, 90vw);
+  padding: var(--iw-space-4) var(--iw-space-5);
+  border-radius: var(--iw-radius-md);
+  background: color-mix(
+    in srgb,
+    var(--iw-color-surface, #111) 88%,
+    transparent
+  );
+  border: 1px solid color-mix(in srgb, var(--iw-color-white) 14%, transparent);
+  box-shadow: var(--iw-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.35));
+}

package/src/feedback/backdrop/template.js

@@ -0,0 +1,31 @@
+/**
+ * @typedef {import('../../../types/feedback/backdrop').BackdropProps} BackdropProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, when } from "@inglorious/web"
+
+/**
+ * @param {BackdropProps} props
+ * @returns {TemplateResult | null}
+ */
+export function render({ isOpen = false, className = "", onClick, children }) {
+  if (!isOpen) return null
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
+  return html`<div
+    class=${classMap({ "iw-backdrop": true, ...extraClasses })}
+    @click=${onClick}
+  >
+    ${when(
+      children,
+      () => html`<div class="iw-backdrop-content">${children}</div>`,
+    )}
+  </div>`
+}

package/src/feedback/dialog/dialog.stories.js

@@ -0,0 +1,27 @@
+import { html } from "@inglorious/web"
+
+import { createRender } from "../../stories/notifyStory.js"
+import { dialog } from "."
+
+export default {
+  title: "Feedback/Dialog",
+  tags: ["autodocs"],
+  render: createRender(dialog),
+  argTypes: {
+    isOpen: { control: "boolean" },
+    title: { control: "text" },
+    description: { control: "text" },
+    onClose: { action: "onClose" },
+  },
+}
+
+export const Open = {
+  args: {
+    isOpen: true,
+    title: "Delete item",
+    description: "This action cannot be undone.",
+    children: html`<p>Are you sure you want to continue?</p>`,
+    actions: html`<button class="iw-button iw-button-outline">Cancel</button>
+      <button class="iw-button iw-button-primary">Confirm</button>`,
+  },
+}

package/src/feedback/dialog/index.js

@@ -0,0 +1,3 @@
+import { render } from "./template.js"
+
+export const dialog = { render }

package/src/feedback/dialog/style.css

@@ -0,0 +1,68 @@
+.iw-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  background: color-mix(in srgb, var(--iw-color-black) 55%, transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--iw-z-modal, 1050);
+  padding: var(--iw-space-4);
+  backdrop-filter: blur(2px);
+}
+
+.iw-dialog {
+  background: var(--iw-color-surface);
+  color: var(--iw-color-text);
+  border-radius: var(--iw-radius-md);
+  border: 1px solid color-mix(in srgb, var(--iw-color-border) 70%, transparent);
+  min-width: min(32rem, 90vw);
+  max-width: min(48rem, 90vw);
+  box-shadow: var(--iw-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.3));
+  padding: var(--iw-space-4);
+}
+
+.iw-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--iw-space-2);
+}
+
+.iw-dialog-title {
+  font-weight: var(--iw-font-weight-semibold);
+  font-size: 1.1rem;
+}
+
+.iw-dialog-close {
+  border: 0 none;
+  background: transparent;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--iw-radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: inherit;
+}
+
+.iw-dialog-close:hover {
+  background-color: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.iw-dialog-description {
+  margin-top: var(--iw-space-2);
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+}
+
+.iw-dialog-body {
+  margin-top: var(--iw-space-3);
+}
+
+.iw-dialog-actions {
+  margin-top: var(--iw-space-4);
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--iw-space-2);
+}

package/src/feedback/dialog/template.js

@@ -0,0 +1,64 @@
+/**
+ * @typedef {import('../../../types/feedback/dialog').DialogProps} DialogProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html } from "@inglorious/web"
+
+/**
+ * @param {DialogProps} props
+ * @returns {TemplateResult | null}
+ */
+export function render(props) {
+  const {
+    isOpen = false,
+    title,
+    description,
+    children,
+    actions,
+    className = "",
+    onClose,
+    onBackdropClick,
+  } = props
+
+  if (!isOpen) return null
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
+  return html`<div
+    class=${classMap({ "iw-dialog-backdrop": true })}
+    @click=${onBackdropClick ?? onClose}
+  >
+    <div
+      class=${classMap({ "iw-dialog": true, ...extraClasses })}
+      role="dialog"
+      aria-modal="true"
+      @click=${(event) => event.stopPropagation()}
+    >
+      ${(title || onClose) &&
+      html`<div class="iw-dialog-header">
+        ${title ? html`<div class="iw-dialog-title">${title}</div>` : null}
+        ${onClose
+          ? html`<button
+              type="button"
+              class="iw-dialog-close"
+              aria-label="Close"
+              @click=${onClose}
+            >
+              ×
+            </button>`
+          : null}
+      </div>`}
+      ${description
+        ? html`<div class="iw-dialog-description">${description}</div>`
+        : null}
+      ${children ? html`<div class="iw-dialog-body">${children}</div>` : null}
+      ${actions ? html`<div class="iw-dialog-actions">${actions}</div>` : null}
+    </div>
+  </div>`
+}

package/src/feedback/feedback.css

@@ -0,0 +1,6 @@
+@import "./alert/style.css";
+@import "./backdrop/style.css";
+@import "./dialog/style.css";
+@import "./progress/style.css";
+@import "./skeleton/style.css";
+@import "./snackbar/style.css";

package/src/feedback/progress/index.js

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

package/src/feedback/progress/progress.stories.js

@@ -0,0 +1,54 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { progress } from "."
+
+export default {
+  title: "Feedback/Progress",
+  tags: ["autodocs"],
+  render: createRender(progress),
+  argTypes: {
+    variant: { control: "select", options: ["linear", "circular"] },
+    value: { control: "number" },
+    size: { control: "number" },
+    thickness: { control: "number" },
+    color: {
+      control: "select",
+      options: [
+        "default",
+        "primary",
+        "secondary",
+        "success",
+        "warning",
+        "info",
+      ],
+    },
+  },
+}
+
+export const Linear = {
+  args: {
+    variant: "linear",
+    value: 40,
+  },
+}
+
+export const LinearIndeterminate = {
+  args: {
+    variant: "linear",
+  },
+}
+
+export const Circular = {
+  args: {
+    variant: "circular",
+    value: 65,
+    size: 48,
+    thickness: 4,
+  },
+}
+
+export const CircularIndeterminate = {
+  args: {
+    variant: "circular",
+    size: 48,
+  },
+}

package/src/feedback/progress/style.css

@@ -0,0 +1,95 @@
+.iw-progress {
+  &.iw-progress-primary {
+    color: var(--iw-color-primary);
+  }
+
+  &.iw-progress-secondary {
+    color: var(--iw-color-secondary);
+  }
+
+  &.iw-progress-success {
+    color: var(--iw-color-success);
+  }
+
+  &.iw-progress-error {
+    color: var(--iw-color-error);
+  }
+
+  &.iw-progress-warning {
+    color: var(--iw-color-warning);
+  }
+
+  &.iw-progress-info {
+    color: var(--iw-color-info);
+  }
+}
+
+.iw-progress-linear {
+  width: 100%;
+}
+
+.iw-progress-linear-track {
+  width: 100%;
+  height: 8px;
+  background: color-mix(in srgb, currentColor 24%, transparent);
+  border-radius: var(--iw-radius-sm);
+  overflow: hidden;
+}
+
+.iw-progress-linear-bar {
+  display: block;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, currentColor 84%, white),
+    currentColor
+  );
+  transition: width 0.2s ease;
+  min-width: 8px;
+}
+
+.iw-progress-linear.iw-progress-indeterminate .iw-progress-linear-bar {
+  width: 30%;
+  animation: iw-progress-linear 1.4s ease-in-out infinite;
+}
+
+@keyframes iw-progress-linear {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(350%);
+  }
+}
+
+.iw-progress-circular svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+  display: block;
+}
+
+.iw-progress-circular .iw-progress-track {
+  fill: none;
+  stroke: color-mix(in srgb, currentColor 20%, transparent);
+}
+
+.iw-progress-circular .iw-progress-value {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.2s ease;
+}
+
+.iw-progress-circular.iw-progress-indeterminate {
+  animation: iw-progress-rotate 1.2s linear infinite;
+}
+
+@keyframes iw-progress-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/feedback/progress/template.js

@@ -0,0 +1,88 @@
+/**
+ * @typedef {import('../../../types/feedback/progress').ProgressProps} ProgressProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html } from "@inglorious/web"
+
+function clamp(value) {
+  return Math.max(0, Math.min(100, value))
+}
+
+/**
+ * @param {ProgressProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    variant = "linear",
+    value,
+    size = 40,
+    thickness = 4,
+    color = "default",
+    className = "",
+  } = props
+
+  const extraClasses = Object.fromEntries(
+    className
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((name) => [name, true]),
+  )
+
+  if (variant === "circular") {
+    const radius = (size - thickness) / 2
+    const circumference = 2 * Math.PI * radius
+    const progress = value == null ? null : clamp(value)
+    const dashOffset =
+      progress == null ? null : circumference * (1 - progress / 100)
+
+    return html`<div
+      class=${classMap({
+        "iw-progress": true,
+        "iw-progress-circular": true,
+        "iw-progress-${color}": true,
+        "iw-progress-indeterminate": progress == null,
+        ...extraClasses,
+      })}
+      style=${`width: ${size}px; height: ${size}px;`}
+    >
+      <svg viewBox="0 0 ${size} ${size}">
+        <circle
+          class="iw-progress-track"
+          cx=${size / 2}
+          cy=${size / 2}
+          r=${radius}
+          stroke-width=${thickness}
+        ></circle>
+        <circle
+          class="iw-progress-value"
+          cx=${size / 2}
+          cy=${size / 2}
+          r=${radius}
+          stroke-width=${thickness}
+          stroke-dasharray=${circumference}
+          stroke-dashoffset=${dashOffset ?? circumference * 0.75}
+        ></circle>
+      </svg>
+    </div>`
+  }
+
+  const progress = value == null ? null : clamp(value)
+
+  return html`<div
+    class=${classMap({
+      "iw-progress": true,
+      "iw-progress-linear": true,
+      "iw-progress-indeterminate": progress == null,
+      ...extraClasses,
+    })}
+  >
+    <div class="iw-progress-linear-track">
+      <div
+        class="iw-progress-linear-bar"
+        style=${progress == null ? "" : `width: ${progress}%;`}
+      ></div>
+    </div>
+  </div>`
+}

package/src/feedback/skeleton/index.js

@@ -0,0 +1,3 @@
+import { render } from "./template.js"
+
+export const skeleton = { render }

package/src/feedback/skeleton/skeleton.stories.js

@@ -0,0 +1,44 @@
+import { createRender } from "../../stories/notifyStory.js"
+import { skeleton } from "."
+
+export default {
+  title: "Feedback/Skeleton",
+  tags: ["autodocs"],
+  render: createRender(skeleton),
+  argTypes: {
+    variant: { control: "select", options: ["text", "rect", "circle"] },
+    width: { control: "text" },
+    height: { control: "text" },
+    lines: { control: "number" },
+  },
+}
+
+export const Text = {
+  args: {
+    variant: "text",
+    width: "60%",
+  },
+}
+
+export const Rect = {
+  args: {
+    variant: "rect",
+    width: 240,
+    height: 120,
+  },
+}
+
+export const Circle = {
+  args: {
+    variant: "circle",
+    width: 48,
+    height: 48,
+  },
+}
+
+export const MultiLine = {
+  args: {
+    lines: 3,
+    width: "100%",
+  },
+}

package/src/feedback/skeleton/style.css

@@ -0,0 +1,41 @@
+.iw-skeleton {
+  background: color-mix(in srgb, var(--iw-color-text) 14%, transparent);
+  border-radius: var(--iw-radius-sm);
+  position: relative;
+  overflow: hidden;
+  height: 1em;
+}
+
+.iw-skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.35),
+    transparent
+  );
+  animation: iw-skeleton-shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes iw-skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.iw-skeleton-rect {
+  border-radius: var(--iw-radius-sm);
+}
+
+.iw-skeleton-circle {
+  border-radius: 999px;
+}
+
+.iw-skeleton-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--iw-space-2);
+}