@trebired/frontend 1.6.0 → 1.7.1

package/dist/primitives/components/types.d.ts

@@ -0,0 +1,206 @@
+import type { ButtonHTMLAttributes, CSSProperties, FormHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import type { BindActionTriggerOptions } from "../../actions/triggers.d.ts";
+import type { SubmitActionButtonOptions } from "../../actions/types.d.ts";
+type attr_map = Record<string, unknown>;
+type PrimitiveAttrs = {
+    [key: string]: unknown;
+};
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & PrimitiveAttrs & {
+    actionButton?: SubmitActionButtonOptions;
+    actionTrigger?: BindActionTriggerOptions;
+    variant?: "solid";
+};
+type CardProps = HTMLAttributes<HTMLDivElement> & PrimitiveAttrs & {
+    actionTrigger?: BindActionTriggerOptions;
+};
+type ActionFormProps = Omit<FormHTMLAttributes<HTMLFormElement>, "action" | "children" | "method"> & {
+    action: string;
+    body?: "json";
+    children?: ReactNode;
+    ignoreResponseAction?: boolean;
+    lifecycle?: boolean;
+    method?: string;
+    success?: "soft-reload";
+    successTab?: string;
+} & PrimitiveAttrs;
+type CsrfInputProps = {
+    optional?: boolean;
+    token: unknown;
+};
+type AvatarProps = {
+    alt?: string;
+    className?: string;
+    height?: string | number;
+    size?: string;
+    src?: string;
+    style?: CSSProperties;
+    width?: string | number;
+};
+type PillProps = HTMLAttributes<HTMLSpanElement> & PrimitiveAttrs & {
+    children?: ReactNode;
+};
+type SeparatorProps = {
+    className?: string;
+    orientation?: "horizontal" | "vertical";
+    visible?: boolean;
+};
+type list_props<T = unknown> = {
+    className?: string;
+    getItemProps?: (item: T, index: number) => Record<string, unknown>;
+    getKey?: (item: T, index: number) => string | number;
+    itemClassName?: string;
+    items?: T[];
+    renderItem: (item: T, index: number) => ReactNode;
+    style?: CSSProperties;
+};
+type key_value_row = {
+    attributes?: string;
+    format?: "time";
+    id?: string;
+    label?: string;
+    label_attributes?: string;
+    value?: unknown;
+    value_attributes?: string;
+    value_html?: string;
+    value_node?: ReactNode;
+};
+type key_value_group = {
+    rows?: key_value_row[];
+    title?: string;
+};
+type key_value_props = {
+    card?: boolean;
+    className?: string;
+    groups?: key_value_group[];
+    layout?: "column" | "inline";
+    rowClassName?: string;
+    rows?: key_value_row[];
+    rowsClassName?: string;
+    separated?: boolean;
+};
+type masonry_props = HTMLAttributes<HTMLDivElement> & PrimitiveAttrs & {
+    columns?: ReactNode[];
+};
+type bar_props = {
+    card?: boolean;
+    hidden?: boolean;
+    label?: string;
+    meta?: string;
+    percent?: number;
+    wrapperAttributes?: string;
+};
+type circle_props = {
+    size?: string;
+};
+type StatusDotTone = "blue" | "cyan" | "error" | "gray" | "green" | "info" | "muted" | "purple" | "red" | "success" | "warning" | "yellow";
+type StatusDotSize = "xs" | "sm" | "md" | "lg";
+type StatusDotProps = {
+    ariaHidden?: boolean;
+    className?: string;
+    size?: StatusDotSize;
+    title?: string;
+    tone?: StatusDotTone;
+};
+type TimeCounterProps = {
+    alwaysRender?: boolean;
+    bare?: boolean;
+    className?: string;
+    count?: number | string;
+    end?: string;
+    id?: string;
+    live?: boolean;
+    mode?: "count";
+    reloadOnZero?: boolean;
+    remaining?: boolean;
+    start?: string;
+    unstyled?: boolean;
+};
+type CardSegment = {
+    className?: string;
+    kind?: string;
+    value?: ReactNode;
+};
+type CardSegmentRow = {
+    className?: string;
+    dataAttrs?: Record<string, string>;
+    segments?: CardSegment[];
+};
+type CardSegmentsProps = {
+    rows?: CardSegmentRow[];
+};
+type BodyProps = {
+    actionTrigger?: BindActionTriggerOptions;
+    actions?: ReactNode;
+    actionsClassName?: string;
+    bodyClassName?: string;
+    className?: string;
+    dataAttrs?: Record<string, unknown>;
+    extra?: ReactNode;
+    icon?: ReactNode;
+    live?: {
+        id: string;
+        kind: string;
+    };
+    meta?: ReactNode;
+    search?: Record<string, unknown>;
+    segments?: ReactNode;
+    select?: {
+        buttonType?: "button" | "reset" | "submit";
+        disabled?: boolean;
+        selected?: boolean;
+        value?: string;
+    };
+    showDivider?: boolean;
+    subtitle?: ReactNode;
+    subtitleClassName?: string;
+    title: ReactNode;
+    titleAttrs?: Record<string, string>;
+    titleClassName?: string;
+    titleWidthFit?: boolean;
+    type?: {
+        actions?: boolean;
+        divider?: boolean;
+        icon?: boolean;
+        segments?: boolean;
+        titleMeta?: boolean;
+    };
+    width?: "fit" | "full";
+};
+type SelectCardItem = {
+    attrs?: Record<string, unknown>;
+    buttonType?: "button" | "reset" | "submit";
+    className?: string;
+    content?: ReactNode;
+    description?: ReactNode;
+    details?: ReactNode;
+    disabled?: boolean;
+    iconSpec?: string;
+    id?: string;
+    selected?: boolean;
+    title?: ReactNode;
+    titleMeta?: ReactNode;
+    value?: string;
+};
+type SelectCardsProps = {
+    attrs?: Record<string, unknown>;
+    className?: string;
+    icon?: boolean;
+    items: SelectCardItem[];
+    layout?: "column" | "grid";
+};
+type CardItemProps = {
+    actionTrigger?: BindActionTriggerOptions;
+    className?: string;
+    dataAttrs?: Record<string, string>;
+    extraHtml?: string;
+    search?: Record<string, unknown>;
+    segmentRows?: CardSegmentRow[];
+    statusHtml?: string;
+    title?: ReactNode;
+    titleMetaHtml?: string;
+};
+type primitive_action_form_props = ActionFormProps;
+type primitive_button_props = ButtonProps;
+type primitive_card_props = CardProps;
+export type { ActionFormProps, AvatarProps, BodyProps, ButtonProps, CardItemProps, CardProps, CardSegment, CardSegmentRow, CardSegmentsProps, CsrfInputProps, PillProps, SelectCardItem, SelectCardsProps, SeparatorProps, StatusDotProps, StatusDotSize, StatusDotTone, TimeCounterProps, attr_map, bar_props, circle_props, key_value_group, key_value_props, key_value_row, list_props, masonry_props, primitive_action_form_props, primitive_button_props, primitive_card_props, };
+//# sourceMappingURL=types.d.ts.map

package/dist/primitives/components/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/primitives/components/types.ts"],"names":[],"mappings":"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"}

package/dist/primitives/components/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/primitives/components/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/primitives/components/types.ts"],"names":[],"mappings":""}

package/dist/primitives/index.d.ts

@@ -0,0 +1,21 @@
+import { type BindRoot } from "../dom/index.d.ts";
+type TimeCounterConfig = {
+    count?: number | string | null;
+    end?: string;
+    live?: boolean;
+    mode?: "count" | "remaining";
+    reloadOnZero?: boolean;
+    start?: string;
+};
+declare const TIME_COUNTER_SELECTOR = "[data-tbf-time-counter]";
+declare const TIME_COUNTER_CONFIG_SELECTOR = "script[type=\"application/json\"][data-tbf-time-counter-config]";
+declare function refreshTimeCounter(el: HTMLElement | null): boolean;
+declare function setTimeCounterConfig(el: HTMLElement | null, config: TimeCounterConfig | null): boolean;
+declare function bindTimeCounter(host: HTMLElement | null): boolean;
+declare function bindTimeCounters(root?: BindRoot): void;
+declare function bindPrimitiveControllers(root?: BindRoot): void;
+declare function refreshTimeCounters(root?: BindRoot): void;
+export { TIME_COUNTER_CONFIG_SELECTOR, TIME_COUNTER_SELECTOR, bindPrimitiveControllers, bindTimeCounter, bindTimeCounters, refreshTimeCounter, refreshTimeCounters, setTimeCounterConfig, };
+export type { TimeCounterConfig };
+export * from "./components/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAOzE,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,qBAAqB,4BAA4B,CAAC;AACxD,QAAA,MAAM,4BAA4B,oEAC+B,CAAC;AA8DlE,iBAAS,kBAAkB,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,WAQjD;AAkBD,iBAAS,oBAAoB,CAC3B,EAAE,EAAE,WAAW,GAAG,IAAI,EACtB,MAAM,EAAE,iBAAiB,GAAG,IAAI,WAajC;AAED,iBAAS,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,WAQhD;AAED,iBAAS,gBAAgB,CAAC,IAAI,GAAE,QAAmB,QAIlD;AAED,iBAAS,wBAAwB,CAAC,IAAI,GAAE,QAAmB,QAE1D;AAED,iBAAS,mBAAmB,CAAC,IAAI,GAAE,QAAmB,QAMrD;AAED,OAAO,EACL,4BAA4B,EAC5B,qBAAqB,EACrB,wBAAwB,EACxB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,GACrB,CAAC;AACF,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAClC,cAAc,uBAAuB,CAAC"}

package/dist/primitives/index.js

@@ -0,0 +1,127 @@
+import { queryAll, readElementJson } from "../dom/index.js";
+import { formatDuration, formatWrappedCount, parseCountValue, } from "./components/index.js";
+const TIME_COUNTER_SELECTOR = "[data-tbf-time-counter]";
+const TIME_COUNTER_CONFIG_SELECTOR = 'script[type="application/json"][data-tbf-time-counter-config]';
+const configs = new WeakMap();
+const positiveRemainingCounters = new WeakSet();
+const activeCounters = new Set();
+let intervalStarted = false;
+let reloadTriggered = false;
+function parseDateMsOrNull(value) {
+    const text = String(value || "").trim();
+    if (!text)
+        return null;
+    const parsed = Date.parse(text);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+function timeCounterTarget(host) {
+    const child = Array.from(host.children).find((entry) => {
+        return entry instanceof HTMLElement && entry.tagName.toLowerCase() !== "script";
+    });
+    return child instanceof HTMLElement ? child : host;
+}
+function renderCount(el, config) {
+    el.textContent = formatWrappedCount(parseCountValue(config.count));
+}
+function renderForward(el, config) {
+    const from = parseDateMsOrNull(config.start);
+    const to = parseDateMsOrNull(config.end);
+    el.textContent = from == null || to == null ? "-" : formatDuration(to - from);
+}
+function renderRemaining(el, config) {
+    const to = parseDateMsOrNull(config.end);
+    if (to == null) {
+        el.textContent = "-";
+        return;
+    }
+    const remainingMs = to - Date.now();
+    el.textContent = formatDuration(remainingMs);
+    if (remainingMs > 0) {
+        positiveRemainingCounters.add(el);
+        return;
+    }
+    if (positiveRemainingCounters.has(el) &&
+        config.reloadOnZero === true &&
+        !reloadTriggered) {
+        reloadTriggered = true;
+        window.location.reload();
+    }
+}
+function tickLive(el, config) {
+    if (config.mode === "remaining") {
+        renderRemaining(el, config);
+        return;
+    }
+    const from = parseDateMsOrNull(config.start);
+    el.textContent = from == null ? "-" : formatDuration(Date.now() - from);
+}
+function refreshTimeCounter(el) {
+    if (!(el instanceof HTMLElement))
+        return false;
+    const config = configs.get(el) || {};
+    if (config.mode === "count")
+        renderCount(el, config);
+    else if (config.mode === "remaining")
+        renderRemaining(el, config);
+    else if (config.live === true)
+        tickLive(el, config);
+    else
+        renderForward(el, config);
+    return true;
+}
+function tickActiveCounters() {
+    activeCounters.forEach((el) => {
+        if (!el.isConnected) {
+            activeCounters.delete(el);
+            return;
+        }
+        refreshTimeCounter(el);
+    });
+}
+function ensureInterval() {
+    if (intervalStarted)
+        return;
+    intervalStarted = true;
+    window.setInterval(tickActiveCounters, 1000);
+}
+function setTimeCounterConfig(el, config) {
+    if (!(el instanceof HTMLElement))
+        return false;
+    const next = config && typeof config === "object" ? { ...config } : {};
+    configs.set(el, next);
+    if (next.live === true || next.mode === "remaining") {
+        activeCounters.add(el);
+        ensureInterval();
+    }
+    else {
+        activeCounters.delete(el);
+    }
+    refreshTimeCounter(el);
+    return true;
+}
+function bindTimeCounter(host) {
+    if (!(host instanceof HTMLElement))
+        return false;
+    const target = timeCounterTarget(host);
+    if (!(target instanceof HTMLElement))
+        return false;
+    return setTimeCounterConfig(target, readElementJson(host, TIME_COUNTER_CONFIG_SELECTOR, {}));
+}
+function bindTimeCounters(root = document) {
+    queryAll(root, TIME_COUNTER_SELECTOR).forEach((host) => {
+        bindTimeCounter(host);
+    });
+}
+function bindPrimitiveControllers(root = document) {
+    bindTimeCounters(root);
+}
+function refreshTimeCounters(root = document) {
+    if (root instanceof HTMLElement && configs.has(root)) {
+        refreshTimeCounter(root);
+        return;
+    }
+    bindTimeCounters(root);
+}
+export { TIME_COUNTER_CONFIG_SELECTOR, TIME_COUNTER_SELECTOR, bindPrimitiveControllers, bindTimeCounter, bindTimeCounters, refreshTimeCounter, refreshTimeCounters, setTimeCounterConfig, };
+export * from "./components/index.js";
+//# sourceMappingURL=index.js.map

package/dist/primitives/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/primitives/index.ts"],"names":[],"mappings":"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"}

package/dist/primitives/styles/_card.scss

@@ -0,0 +1,106 @@
+.card {
+  min-height: var(--height-xs4, 35px);
+  border-radius: var(--radius-lg, var(--tbf-radius, 0));
+  border: var(--border-width) solid var(--border-surface-1);
+  background: var(--background-page);
+  padding: 14px 14px 12px 14px;
+  overflow: hidden;
+
+  h2 {
+    margin: 0 0 10px 0;
+    font-size: 15px;
+    font-weight: 700;
+  }
+}
+
+.card-row {
+  min-height: 0;
+  border-radius: var(--radius-lg, var(--tbf-radius, 0));
+  border: var(--border-width) solid var(--border-surface-1);
+  background: transparent;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 9px 12px;
+  transition: all var(--transition-2) ease;
+
+  &.excluded {
+    border-color: var(--border-surface-1);
+  }
+
+  &.selected {
+    background: var(--background-surface-1);
+  }
+
+  > * {
+    min-width: 0;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .card-row:hover {
+    background: var(--gray-900);
+  }
+}
+
+.card-body {
+  align-items: stretch;
+  min-width: 0;
+
+  > * {
+    min-width: 0;
+  }
+
+  > [aria-hidden="true"] {
+    flex: 0 0 auto;
+  }
+
+  > .column {
+    min-width: 0;
+  }
+
+  > .column > .inline-row:first-child {
+    align-items: flex-start;
+    flex-wrap: wrap;
+    min-width: 0;
+  }
+
+  > .column > .inline-row:first-child > :last-child:not(:first-child) {
+    flex: 0 0 auto;
+  }
+}
+
+.card-body-divider {
+  display: block;
+  align-self: stretch;
+  flex: 0 0 auto;
+  width: 1px;
+  min-width: 1px;
+  background: var(--border-surface-1);
+  border-radius: 999px;
+  opacity: 0.9;
+}
+
+.card-description {
+  align-items: center;
+  flex-wrap: wrap;
+  min-width: 0;
+
+  > * {
+    max-width: 100%;
+  }
+
+  > span:not(.pill),
+  > a:not(.pill) {
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+}
+
+
+@media (max-width: 640px) {
+  .card-description {
+    align-items: flex-start;
+  }
+}

package/dist/primitives/styles/_controls.scss

@@ -0,0 +1,195 @@
+@use "sass:list";
+@use "./variables" as *;
+
+.btn {
+  --button-icon-color: var(--gray-300);
+  box-sizing: border-box;
+  height: 28px;
+  min-height: 28px;
+  width: auto;
+  max-width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 12px;
+  padding-block: 0;
+  border-radius: var(--radius-md, var(--tbf-radius, 0));
+  border: var(--border-width) solid var(--border-surface-2);
+  background: var(--gray-900);
+  color: var(--text-color);
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  font-family: inherit;
+  white-space: nowrap;
+  text-decoration: none;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.15;
+  vertical-align: middle;
+  transition:
+    color var(--transition-1) ease,
+    background var(--transition-1) ease,
+    border-color var(--transition-1) ease,
+    opacity var(--transition-1) ease;
+
+  &:hover,
+  &.active {
+    --button-icon-color: currentColor;
+    background: var(--gray-800);
+    border-color: var(--gray-700);
+    color: var(--gray-200);
+  }
+
+  &:disabled,
+  &[disabled],
+  &.disabled {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+
+  &:not(.icon) {
+    > i,
+    > svg,
+    > i svg,
+    > [data-icon],
+    > [data-icon] svg {
+      color: var(--button-icon-color);
+      flex: 0 0 auto;
+    }
+
+    @each $name, $size in $tbf-primitive-button-sizes {
+      &.#{$name} {
+        height: list.nth($size, 1);
+        min-height: list.nth($size, 1);
+        padding-inline: list.nth($size, 2);
+        padding-block: 0;
+        font-size: list.nth($size, 3);
+      }
+    }
+  }
+
+  &.highlight {
+    --button-icon-color: var(--gray-800);
+    background: var(--gray-100);
+    color: var(--gray-950);
+    border-color: var(--gray-100);
+
+    &:hover,
+    &.active {
+      --button-icon-color: currentColor;
+      background: var(--gray-200);
+      border-color: var(--gray-100);
+      color: var(--gray-900);
+    }
+  }
+
+  &.red {
+    border-inline-color: var(--red-700);
+
+    &:hover,
+    &.active {
+      background: var(--red-800);
+      border-color: var(--red-700);
+      color: var(--gray-50-dark);
+      --button-icon-color: currentColor;
+    }
+  }
+
+  &.yellow {
+    border-inline-color: var(--yellow-700);
+
+    &:hover,
+    &.active {
+      --button-icon-color: currentColor;
+      background: var(--yellow-700);
+      border-color: var(--yellow-600);
+      color: var(--gray-50-dark);
+    }
+  }
+
+  &.green {
+    border-inline-color: var(--green-700);
+
+    &:hover,
+    &.active {
+      --button-icon-color: currentColor;
+      background: var(--green-800);
+      border-color: var(--green-700);
+      color: var(--gray-0-dark);
+    }
+  }
+
+  &.icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    min-width: 28px;
+    min-height: 28px;
+    gap: 0;
+    padding: 0;
+    font-size: 15px;
+    line-height: 1;
+    text-align: center;
+    position: relative;
+    overflow: visible;
+    flex-shrink: 0;
+
+    > i,
+    > svg,
+    > img {
+      display: block;
+      margin: 0;
+      flex: 0 0 auto;
+      font-size: inherit;
+    }
+
+    > svg,
+    > img,
+    > i svg {
+      width: 1em;
+      height: 1em;
+    }
+
+    > i::before {
+      display: block;
+      margin: 0;
+      line-height: 1;
+      text-align: center;
+    }
+
+    @each $name, $size in $tbf-primitive-icon-sizes {
+      &.#{$name} {
+        width: list.nth($size, 1);
+        height: list.nth($size, 1);
+        min-width: list.nth($size, 1);
+        min-height: list.nth($size, 1);
+        font-size: list.nth($size, 2);
+      }
+    }
+
+    &.transparent {
+      background-color: transparent;
+    }
+  }
+}
+
+.avatar {
+  border-radius: 50%;
+  object-fit: cover;
+  border: var(--border-width) solid var(--gray-700);
+
+  &.unknown {
+    background-color: var(--gray-700);
+  }
+
+  @each $name, $size in $tbf-primitive-avatar-sizes {
+    &.#{$name} {
+      width: $size;
+      height: $size;
+    }
+  }
+}