@tetherto/mdk-react-devkit 0.0.0-stage → 0.12.1

package/src/domain/components/timeline-chart/timeline-chart.scss

@@ -0,0 +1,166 @@
+@use '@primitives/styles/mixins' as *;
+
+$content-child-min-width: 750px;
+
+.mdk-timeline-chart {
+  width: 100%;
+
+  &__loading {
+    @include flex_center;
+
+    min-height: 200px;
+  }
+
+  &__legend {
+    @include flex_wrap;
+
+    gap: 16px;
+    margin-bottom: 16px;
+    padding: 0 8px;
+  }
+
+  &__legend-item {
+    @include flex_align;
+
+    gap: 6px;
+  }
+
+  &__legend-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+
+  &__legend-label {
+    font-size: 12px;
+    color: var(--mdk-color-text-secondary);
+    text-transform: capitalize;
+  }
+
+  &__visualization {
+    display: flex;
+    width: 100%;
+  }
+
+  &__y-axis-title {
+    @include flex_center;
+
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    transform: rotate(180deg);
+    font-size: 11px;
+    color: var(--mdk-color-text-tertiary);
+    padding-right: 8px;
+  }
+
+  &__content {
+    @include flex_column;
+
+    flex: 1;
+    min-width: 0;
+    overflow-x: auto;
+  }
+
+  &__rows {
+    @include flex_column;
+
+    gap: 4px;
+    max-height: 300px;
+    overflow-y: auto;
+    padding-right: 8px;
+    min-width: $content-child-min-width;
+  }
+
+  &__row {
+    @include flex_align;
+
+    gap: 8px;
+    min-height: 24px;
+  }
+
+  &__row-label {
+    @include text_ellipsis;
+
+    width: 120px;
+    min-width: 120px;
+    font-size: 11px;
+    color: var(--mdk-color-text-secondary);
+  }
+
+  &__row-track {
+    flex: 1;
+    height: 20px;
+    background: var(--mdk-color-bg-secondary);
+    border-radius: 4px;
+    position: relative;
+    overflow: hidden;
+  }
+
+  &__bar {
+    position: absolute;
+    height: 100%;
+    min-width: 2px;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: opacity 0.15s ease;
+
+    &:hover {
+      opacity: 0.85;
+    }
+  }
+
+  &__time-axis {
+    margin-top: 8px;
+    padding-left: 128px;
+    min-width: $content-child-min-width;
+  }
+
+  &__time-axis-labels {
+    @include flex_between;
+
+    padding-right: 8px;
+  }
+
+  &__time-label {
+    font-size: 10px;
+    color: var(--mdk-color-text-tertiary);
+  }
+
+  &__x-axis-title {
+    text-align: center;
+    font-size: 11px;
+    color: var(--mdk-color-text-tertiary);
+    margin-top: 4px;
+  }
+
+  &__tooltip {
+    @include flex_column;
+
+    gap: 4px;
+    padding: 4px 0;
+  }
+
+  &__tooltip-title {
+    font-weight: 600;
+    font-size: 12px;
+    color: var(--mdk-color-text-primary);
+    text-transform: capitalize;
+    margin-bottom: 2px;
+  }
+
+  &__tooltip-row {
+    display: flex;
+    gap: 8px;
+    font-size: 12px;
+  }
+
+  &__tooltip-label {
+    color: var(--mdk-color-text-tertiary);
+    min-width: 40px;
+  }
+
+  &__tooltip-value {
+    color: var(--mdk-color-text-primary);
+  }
+}

package/src/domain/components/widget-top-row/USAGE.md

@@ -0,0 +1,48 @@
+# `WidgetTopRow`
+
+Compact header row used at the top of container / miner widgets — title,
+per-category alarm badges, and the current power reading (or an error tooltip).
+
+<!-- BEGIN GENERATED: props — do not edit; npm run generate:usage-proptables (source: component JSDoc/types via registry.json) -->
+## Props
+
+| Prop | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `title` | Required | `string` | - | Widget title |
+| `alarms` | Optional | `WidgetAlarmGroup[]` | - | Alarm category badges, in display order. Categories with no items render nothing |
+| `className` | Optional | `string` | - | Additional class names |
+| `power` | Optional | `number` | - | Power reading; rendered in kilo-units |
+| `statsErrorMessage` | Optional | `string \| ErrorWithTimestamp[] \| null` | - | Error tooltip content; replaces power |
+| `unit` | Optional | `string` | - | Power unit (e.g. `"kW"`) |
+
+### `WidgetAlarmGroup`
+
+| Field | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `icon` | Required | `React.ReactNode` | - | Badge icon |
+| `title` | Required | `string` | - | Category label; the tooltip heading reads `<title> issues` |
+| `items` | Optional | `AlertRecord[]` | - | Active alerts in this category; the badge is hidden when empty |
+<!-- END GENERATED: props -->
+
+## Example
+
+```tsx
+import { PressureAlarmIcon, WidgetTopRow } from "@tetherto/mdk-react-devkit"
+
+<WidgetTopRow
+  title="Container 03"
+  power={31500}
+  unit="kW"
+  alarms={[{ title: "Pressure", icon: <PressureAlarmIcon />, items: pressureAlerts }]}
+/>
+```
+
+You choose the alarm categories: pass one `{ title, icon, items }` per badge, in
+display order. The alarm icons in `@tetherto/mdk-react-devkit/primitives`
+(`TemperatureAlarmIcon`, `FluidAlarmIcon`, `PressureAlarmIcon`, `OtherAlarmIcon`)
+cover the usual cooling categories.
+
+## Notes
+
+- Uses `useTimezoneFormatter` from `@tetherto/mdk-react-adapter`; wrap in
+  `<MdkProvider>`

package/src/domain/components/widget-top-row/styles.scss

@@ -0,0 +1,57 @@
+@use '@primitives/styles/mixins' as *;
+
+.mdk-widget-top-row {
+  @include flex_row;
+
+  align-items: center;
+  gap: 10px;
+  color: var(--mdk-color-white) !important;
+  font-weight: 500;
+  font-size: 16px;
+  padding: 16px;
+  border-bottom: 1px solid var(--mdk-dialog-border-color);
+
+  &__inner {
+    flex: 1;
+
+    @include flex_center;
+  }
+
+  &__title {
+    @include flex_align;
+
+    color: var(--mdk-color-background-light);
+    font-size: 15px;
+    font-weight: 500;
+    flex-grow: 1;
+  }
+
+  &__power {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--mdk-color-white);
+
+    span {
+      font-size: 13px;
+      font-weight: 400;
+      color: var(--mdk-color-gray-450);
+    }
+  }
+
+  &__alarm-info-icon {
+    $icon-size: 28px;
+
+    width: $icon-size;
+    height: $icon-size;
+    margin: -16px 0;
+
+    & > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__alarm-info-title {
+    margin: 0;
+  }
+}

package/src/domain/components/widget-top-row/widget-top-row.example.tsx

@@ -0,0 +1,28 @@
+/**
+ * Runnable example for WidgetTopRow.
+ */
+import { TemperatureAlarmIcon, WidgetTopRow } from '@tetherto/mdk-react-devkit'
+
+export const WidgetTopRowExample = () => {
+  return (
+    <WidgetTopRow
+      title="Container 03"
+      power={31_500}
+      unit="kW"
+      alarms={[
+        {
+          title: 'Liquid',
+          icon: <TemperatureAlarmIcon />,
+          items: [
+            {
+              severity: 'critical',
+              name: 'inlet_overheating',
+              description: 'Inlet > 78°C',
+              createdAt: Date.now() - 5 * 60 * 1000,
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}

package/src/domain/styles/global-colors.scss

@@ -0,0 +1,7 @@
+:root {
+  // Power mode colors
+  --mdk-power-mode-sleep-color: var(--mdk-color-sleep-blue);
+  --mdk-power-mode-low-color: var(--mdk-color-dark-green);
+  --mdk-power-mode-normal-color: var(--mdk-color-strong-green);
+  --mdk-power-mode-high-color: var(--mdk-color-mint-green);
+}

package/src/domain/styles/index.scss

@@ -0,0 +1,80 @@
+@use '@primitives/styles/mixins' as *;
+
+@forward './global-colors.scss';
+
+// ─── Domain Components ──────────────────────────────────────────────────────
+//
+// Each foundation component imports its own .scss file from its .tsx so that
+// consuming apps running Vite/webpack against the source can pick up styles
+// per-component. The published package, however, strips those side-effect
+// imports from `dist/*.js` (see `scripts/strip-style-imports.mjs`) — so every
+// component's stylesheet must be reachable from this index in order to land
+// in the bundled `dist/styles.css`. Keep this list complete; missing entries
+// silently ship a component with no styles.
+
+// Active incidents
+@forward '../components/active-incidents-card/styles';
+
+// Mining Pools panel
+@forward "../components/mining-pools-panel/styles";
+
+// Dashboard composition (header strip, stats bar, timeline selector)
+@forward "../components/dashboard/site-stats-bar/site-stats-bar";
+@forward "../components/dashboard/dashboard-date-range-picker/dashboard-date-range-picker";
+@forward "../components/dashboard/export-button/export-button";
+@forward "../components/header-stats/header-stats-bar";
+@forward "../components/header-actions/header-actions";
+
+// Alarms / Alerts
+@forward '../components/alarm/alarm-contents/alarm-contents';
+@forward '../components/alarm/alarm-row/alarm-row';
+@forward '../components/alerts/alerts-panel';
+@forward '../components/alerts/alerts-table-columns';
+@forward '../components/alerts/alerts-table-title/alerts-table-title';
+@forward '../components/alerts/current-alerts/alert-confirmation-modal/alert-confirmation-modal';
+@forward '../components/alerts/tag-filter-bar/tag-filter-bar';
+
+// Charts & timelines
+@forward "../components/line-chart-card/styles";
+@forward "../components/timeline-chart/timeline-chart";
+
+// Containers (generic data & layout boxes)
+@forward '../components/data-box/content-box/content-box';
+@forward '../components/data-box/data-row/data-row';
+@forward '../components/enabled-disable-toggle/enabled-disable-toggle';
+@forward '../components/data-box/generic-data-box/generic-data-box';
+
+// Device explorer
+@forward '../components/device-explorer/styles';
+@forward '../components/device-explorer/components/device-card-col-text/styles';
+@forward '../components/device-explorer/components/mining-status-indicator/styles';
+@forward '../components/device-explorer/components/status-label/styles';
+
+// Stat cards and miners activity chart
+@forward '../components/stat-cards/miner-metric-card/miner-metric-card';
+@forward '../components/miners-activity-chart/miners-activity-chart';
+@forward '../components/stat-cards/single-stat-card/single-stat-card';
+
+// Misc layout helpers
+@forward '../components/info-container/info-container';
+@forward '../components/widget-top-row/styles';
+
+// Pool details
+@forward '../components/composite/metric-card/styles';
+@forward '../components/pool-details-card/styles';
+@forward '../components/pool-details-popover/styles';
+
+// Timeframe controls
+@forward '../components/timeframe/timeframe-controls/timeframe-controls';
+@forward '../components/timeframe/report-time-frame-selector/report-time-frame-selector';
+
+// Settings
+@forward '../components/settings/add-user-modal/add-user-modal';
+@forward '../components/settings/feature-flags/feature-flags-settings';
+@forward '../components/settings/header-controls/header-controls-settings';
+@forward '../components/settings/import-export/import-export-settings';
+@forward '../components/settings/manage-user-modal/manage-user-modal';
+@forward '../components/settings/rbac-control/rbac-control-settings';
+@forward '../components/settings/settings-dashboard/settings-dashboard';
+
+// Stats export

package/src/primitives/components/accordion/USAGE.md

@@ -0,0 +1,72 @@
+# Accordion
+
+Collapsible panel with a title trigger and animated content area. Exports both a high-level `Accordion` wrapper and composable primitives (`AccordionRoot`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`).
+
+<!-- BEGIN GENERATED: props — do not edit; npm run generate:usage-proptables (source: component JSDoc/types via registry.json) -->
+## Props
+
+### `Accordion` props
+
+| Prop | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `customLabel` | Optional | `React.ReactNode` | - | Extra content (e.g. a badge) rendered in the trigger header |
+| `isOpened` | Optional | `boolean` | `false` | Whether the panel starts expanded |
+| `isRow` | Optional | `boolean` | `false` | Lays out the content area as a flex row instead of column |
+| `noBorder` | Optional | `boolean` | `false` | Removes the bottom border from the trigger |
+| `onValueChange` | Optional | `((value: string \| string[]) => void)` | - | Fired when the open/close state changes |
+| `showToggleIcon` | Optional | `boolean` | `true` | Shows/hides the expand/collapse chevron icon |
+| `solidBackground` | Optional | `boolean` | `false` | Applies a solid background to the accordion container |
+| `title` | Optional | `string` | `""` | Header label shown in the trigger button |
+| `toggleIconPosition` | Optional | `"left" \| "right"` | `"left"` | Side on which the toggle icon appears |
+| `unpadded` | Optional | `boolean` | `false` | Removes the default inner padding from the content area |
+
+### `AccordionTrigger` props
+
+| Prop | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `customLabel` | Optional | `React.ReactNode` | - | Slot for extra content in the trigger header |
+| `showToggleIcon` | Optional | `boolean` | `true` | Shows/hides the toggle icon |
+| `timestamp` | Optional | `string` | - | Forwarded to the underlying Radix trigger element; not rendered by the component |
+| `toggleIconPosition` | Optional | `"left" \| "right"` | `"left"` | Side on which the toggle icon appears |
+<!-- END GENERATED: props -->
+
+## Props detail
+
+> **Props and the object shapes they reference are generated from this component's TypeScript types, the source of truth.** The following is supplementary (sub-component props, allowed values, `ref` methods, or passthrough props), not the full prop list.
+
+### `AccordionItem` / `AccordionContent`
+
+Thin wrappers around Radix UI `AccordionPrimitive.Item` and `AccordionPrimitive.Content`. Accept all native Radix props plus an optional `className`.
+
+## Example
+
+```tsx
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@tetherto/mdk-react-devkit"
+
+// High-level usage
+<Accordion title="Device details" isOpened>
+  <p>Panel content goes here.</p>
+</Accordion>
+
+// With a badge in the trigger
+<Accordion
+  title="Alerts"
+  customLabel={<Tag color="red">3</Tag>}
+  showToggleIcon={false}
+>
+  <ul>…</ul>
+</Accordion>
+
+// Composable primitives
+<AccordionRoot type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Question 1</AccordionTrigger>
+    <AccordionContent>Answer 1</AccordionContent>
+  </AccordionItem>
+</AccordionRoot>
+```
+
+## Notes
+
+- `Accordion` wraps the primitives with `type="multiple"` and a single hard-coded item value; use `AccordionRoot` directly when you need multi-item control
+- `toggleIconPosition="right"` swaps to `PlusIcon`/`MinusIcon` style; `"left"` uses `ChevronDown`/`ChevronRight`

package/src/primitives/components/accordion/accordion.example.tsx

@@ -0,0 +1,37 @@
+/**
+ * Runnable example for Accordion.
+ */
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+} from '@tetherto/mdk-react-devkit'
+
+export const AccordionExample = () => (
+  <div className="mdk-example-col">
+    <Accordion title="Basic Accordion" isOpened>
+      <p>Collapsed/expanded content goes here. Supports any React node as children.</p>
+    </Accordion>
+
+    <Accordion title="Solid Background" solidBackground>
+      <p>This variant uses a solid background for the accordion panel.</p>
+    </Accordion>
+
+    <AccordionRoot type="multiple">
+      <AccordionItem value="item-1">
+        <AccordionTrigger toggleIconPosition="right">Custom trigger position</AccordionTrigger>
+        <AccordionContent>
+          <p>Content for item 1 using low-level Accordion primitives.</p>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Another section</AccordionTrigger>
+        <AccordionContent>
+          <p>Content for item 2.</p>
+        </AccordionContent>
+      </AccordionItem>
+    </AccordionRoot>
+  </div>
+)

package/src/primitives/components/accordion/styles.scss

@@ -0,0 +1,205 @@
+@use '../../styles/mixins' as *;
+// Variables
+$accordion-transition: 0.2s ease;
+$accordion-animation: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
+
+// Accordion root
+.mdk-accordion {
+  @include flex_column;
+
+  background-color: rgba(var(--mdk-color-black), 0.05);
+
+  &--solid-background {
+    background-color: var(--mdk-select-content-bg);
+  }
+
+  // Accordion header — Radix renders this as <h3>; reset browser heading margin.
+  &__header {
+    margin: 0;
+    padding: 0;
+  }
+
+  // Accordion item
+  &__item {
+    border: 1px solid var(--mdk-popover-border);
+    background-color: var(--mdk-accordion-item-bg);
+    margin-bottom: 1rem;
+    transition: all $accordion-transition;
+
+    &:hover {
+      border-color: var(--mdk-input-border-hover);
+    }
+  }
+
+  // Accordion trigger
+  &__trigger {
+    @include flex_align_between;
+
+    width: 100%;
+    padding: 1rem 1.5rem;
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid var(--mdk-popover-border);
+    color: var(--mdk-color-white);
+    font-family: var(--font-mono);
+    font-size: 18px;
+    font-weight: 400;
+    text-align: left;
+    cursor: pointer;
+    transition: all $accordion-transition;
+    gap: 1rem;
+
+    &[data-state='open'] {
+      border-bottom-color: var(--mdk-popover-border);
+
+      .mdk-accordion__trigger {
+        @include flex_align_between;
+
+        width: 100%;
+        font-size: 20px;
+        font-weight: 400;
+        gap: 10px;
+        cursor: pointer;
+        user-select: none;
+        padding: 10px 20px;
+        border: none;
+        background: none;
+        color: inherit;
+        text-align: left;
+        border: 1px solid var(--mdk-color-primary);
+      }
+
+      .mdk-accordion__icon--minus {
+        opacity: 1;
+        transform: rotate(0deg);
+      }
+
+      .mdk-accordion__icon--plus {
+        opacity: 0;
+        transform: rotate(90deg);
+      }
+    }
+
+    &[data-state='closed'] {
+      border-bottom: none;
+    }
+
+    &--no-border {
+      border-bottom: none !important;
+    }
+  }
+
+  // Left side (toggle + title)
+  &__trigger-left {
+    @include flex_align;
+
+    gap: 0.75rem;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__title {
+    font-family: inherit;
+    font-weight: 400;
+    letter-spacing: 0.01em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // Right side (custom label)
+  &__trigger-right {
+    @include flex_align;
+
+    gap: 1rem;
+    flex-shrink: 0;
+  }
+
+  // Custom label
+  &__custom-label {
+    font-family: inherit;
+    font-size: 14px;
+    color: var(--mdk-color-text-disabled);
+  }
+
+  // Toggler icon container
+  &__toggler {
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    color: var(--mdk-color-text-disabled);
+    transition: color $accordion-transition;
+    flex-shrink: 0;
+  }
+
+  // Icon states
+  &__icon--minus,
+  &__icon--plus {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    transition:
+      opacity $accordion-transition,
+      transform $accordion-transition;
+  }
+
+  &__icon--minus {
+    opacity: 0;
+    transform: rotate(-90deg);
+  }
+
+  &__icon--plus {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+
+  // Content area
+  &__content {
+    overflow: hidden;
+    transition: height $accordion-animation;
+    background-color: var(--mdk-accordion-item-bg);
+
+    &[data-state='closed'] {
+      animation: mdk-accordion-slide-up $accordion-animation;
+    }
+
+    &[data-state='open'] {
+      animation: mdk-accordion-slide-down $accordion-animation;
+    }
+  }
+
+  &__content-inner {
+    padding: 1.5rem;
+    font-family: inherit;
+    line-height: 1.6;
+
+    &--no-padding {
+      padding: 0;
+    }
+
+    &--row {
+      @include flex_row;
+
+      gap: 1rem;
+    }
+  }
+}
+
+// Animations
+@keyframes mdk-accordion-slide-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes mdk-accordion-slide-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}