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

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

@@ -0,0 +1,188 @@
+@use '../../styles/mixins' as *;
+.mdk-tag-input__dropdown {
+  padding: 0;
+  margin-top: unset;
+  background-color: var(--mdk-color-obsidian);
+  min-width: fit-content;
+}
+
+.mdk-cascader {
+  position: relative;
+  display: block;
+
+  &__panels {
+    @include flex_row;
+
+    width: 100%;
+  }
+
+  &__panel {
+    @include flex_column;
+
+    min-height: 0;
+    max-height: 180px;
+    overflow-y: auto;
+    padding: 4px;
+
+    &--options {
+      flex: 1;
+      background-color: var(--mdk-color-obsidian);
+    }
+
+    &--categories {
+      flex: 1;
+      min-width: 0;
+      border-right: 1px solid var(--mdk-border-default-color);
+
+      &:not(:only-child) {
+        flex: 0 0 auto;
+      }
+    }
+
+    &--search {
+      flex: 1;
+      width: 100%;
+      background-color: var(--mdk-color-obsidian);
+      border-left: none;
+    }
+
+    &--empty {
+      display: none;
+    }
+  }
+
+  &__option,
+  &__category {
+    @include flex_center;
+
+    gap: 0.5rem;
+    padding: 5px 12px;
+    transition: all 0.2s ease;
+    border-radius: 4px;
+    height: 32px;
+    cursor: pointer;
+    width: 100%;
+    transition: background-color 0.2s ease;
+
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+    &:hover:not(&--disabled):not(&--active) {
+      background-color: rgba(var(--mdk-color-white-rgb), 0.08);
+    }
+  }
+
+  &__category {
+    justify-content: flex-start;
+
+    &--active {
+      background-color: var(--mdk-cascader-active-bg);
+    }
+
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &-checkbox {
+      flex-shrink: 0;
+      border-width: 1px;
+      width: 14px;
+      height: 14px;
+      background-color: var(--mdk-cascader-checkbox-bg);
+      border-color: var(--mdk-border-default-color);
+
+      &[data-state='indeterminate'] {
+        background-color: var(--mdk-cascader-checkbox-bg);
+        border-color: var(--mdk-cascader-active-bg);
+      }
+    }
+
+    &-button {
+      @include flex_center;
+
+      gap: 0.5rem;
+      flex: 1;
+      padding: 0;
+      background: transparent;
+      border: none;
+      color: var(--mdk-color-text-secondary);
+      font-family: var(--font-mono);
+      font-size: 14px;
+      text-align: left;
+      cursor: pointer;
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
+
+    &-label {
+      @include text_ellipsis;
+
+      flex: 1;
+      transition: color 0.2s ease;
+    }
+
+    &-arrow {
+      width: 1rem;
+      height: 1rem;
+      opacity: 0.5;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+    }
+  }
+
+  &__options-list {
+    flex: 1;
+    overflow-y: auto;
+
+    .mdk-radio-group {
+      gap: 0;
+    }
+  }
+
+  &__option {
+    &--search {
+      // Search result items have full width
+      width: 100%;
+    }
+
+    &-label {
+      flex: 1;
+      font-size: 14px;
+      color: var(--mdk-color-text-secondary);
+      user-select: none;
+    }
+
+    &-separator {
+      color: var(--mdk-color-text-secondary);
+      opacity: 0.5;
+      padding: 0 0.25rem;
+    }
+  }
+
+  // Highlight matching search text
+  &__highlight {
+    color: var(--mdk-cascader-color-highlight);
+  }
+
+  // Override TagInput styles for filter context
+  .mdk-tag-input__wrapper {
+    margin-top: 8px;
+    width: 100%;
+    display: block;
+    align-items: unset;
+    max-height: 150px;
+    overflow-y: scroll;
+
+    &:focus-within {
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mdk-color-primary) 29%, transparent);
+    }
+  }
+}

package/src/primitives/components/chart-container/USAGE.md

@@ -0,0 +1,78 @@
+# `ChartContainer`
+
+A layout wrapper for charts that provides a title/header row, interactive legend, range selector, highlighted value display, loading/empty states, and a stats footer.
+
+<!-- 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 |
+|------|--------|----------------|---------|-------------|
+| `children` | Required | `React.ReactNode` | - | The chart element to render |
+| `className` | Optional | `string` | - | Additional class for the root element |
+| `empty` | Optional | `boolean` | - | Hides the chart and shows `emptyMessage` |
+| `emptyMessage` | Optional | `React.ReactNode` | `"No data available"` | Message shown when `empty` is true: a string, or any element (an `EmptyState`, say) |
+| `footer` | Optional | `React.ReactNode` | - | Custom footer content rendered below the chart |
+| `footerClassName` | Optional | `string` | - | Additional class for the footer area |
+| `header` | Optional | `React.ReactNode` | - | Replaces the default `title` heading with a custom element |
+| `headerAction` | Optional | `React.ReactNode` | - | Optional action rendered on the right side of the header row (e.g. an expand/fullscreen toggle). Sits alongside the range selector when both are present. Purely additive - omit it and the header renders exactly as before |
+| `highlightedValue` | Optional | `HighlightedValueProps` | - | Large value/unit displayed alongside the legend |
+| `legendData` | Optional | `LegendItem[]` | - | Color-keyed legend items; each item can be toggled |
+| `loader` | Optional | `React.ReactNode` | - | Replaces the default `<Loader>` in the loading overlay |
+| `loading` | Optional | `boolean` | - | Shows a centered `<Loader>` overlay |
+| `minMaxAvg` | Optional | `Partial<{ min: string; max: string; avg: string }>` | - | Built-in footer showing Min / Avg / Max values |
+| `onToggleDataset` | Optional | `((index: number) => void)` | - | Fired when a legend item is clicked |
+| `rangeSelector` | Optional | `RangeSelectorProps` | - | Radio-card time-range selector |
+| `timeRange` | Optional | `string` | - | Time range label shown in the footer |
+| `title` | Optional | `string` | - | Chart heading (renders as `<h3>` unless `header` is provided) |
+| `titleExtra` | Optional | `React.ReactNode` | - | Optional node rendered immediately after the title text (e.g. an info tooltip). Only shown when `title` is set and `header` is not. Additive - omit it and the title renders exactly as before |
+
+### `LegendItem`
+
+| Field | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `color` | Required | `string` | - | Color string (hex, hsl, etc.) |
+| `label` | Required | `string` | - | Legend label |
+| `hidden` | Optional | `boolean` | - | Whether this dataset is currently hidden |
+
+### `HighlightedValueProps`
+
+| Field | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `value` | Required | `string \| number` | - | The primary value to display |
+| `className` | Optional | `string` | - | Additional class |
+| `style` | Optional | `React.CSSProperties` | - | Inline style |
+| `unit` | Optional | `string` | - | Unit suffix |
+
+### `RangeSelectorProps`
+
+| Field | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `onChange` | Required | `(value: string) => void` | - | Fires when user picks a range |
+| `options` | Required | `RangeSelectorOption[]` | - | `{ label, value }` items |
+| `value` | Required | `string` | - | Currently selected value |
+| `buttonClassName` | Optional | `string` | - | Additional class for each option button |
+| `className` | Optional | `string` | - | Additional class for the selector |
+| `style` | Optional | `React.CSSProperties` | - | Inline style for the selector |
+<!-- END GENERATED: props -->
+
+## Example
+
+```tsx
+import { ChartContainer, BarChart } from "@tetherto/mdk-react-devkit"
+
+<ChartContainer
+  title="Hashrate"
+  loading={isLoading}
+  empty={!data.length}
+  legendData={[{ label: "Pool A", color: "#59E8E8" }]}
+  rangeSelector={{ options: [{ label: "1H", value: "1h" }, { label: "24H", value: "24h" }], value: range, onChange: setRange }}
+  minMaxAvg={{ min: "10 TH/s", avg: "55 TH/s", max: "100 TH/s" }}
+  onToggleDataset={(i) => toggleDataset(i)}
+>
+  <BarChart data={chartData} />
+</ChartContainer>
+```
+
+## Notes
+
+- `minMaxAvg` and `timeRange` are only rendered when the chart is not loading or empty

package/src/primitives/components/chart-container/chart-container.example.tsx

@@ -0,0 +1,67 @@
+/**
+ * Runnable example for ChartContainer.
+ */
+import { useState } from 'react'
+import { ChartContainer } from '@tetherto/mdk-react-devkit'
+
+const RANGE_OPTIONS = [
+  { label: '1H', value: '1h' },
+  { label: '24H', value: '24h' },
+  { label: '7D', value: '7d' },
+]
+
+const LEGEND_DATA = [
+  { label: 'Pool A', color: '#59E8E8' },
+  { label: 'Pool B', color: '#FF9500' },
+]
+
+const MockChart = () => (
+  <div
+    style={{
+      height: 160,
+      background: 'var(--mdk-color-surface-secondary, #1a1a2e)',
+      borderRadius: 4,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: 'var(--mdk-color-text-secondary, #888)',
+      fontSize: 13,
+    }}
+  >
+    Chart content
+  </div>
+)
+
+export const ChartContainerExample = () => {
+  const [range, setRange] = useState('24h')
+
+  return (
+    <div className="mdk-example-row" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+      {/* Basic with title only */}
+      <ChartContainer title="Simple Chart">
+        <MockChart />
+      </ChartContainer>
+
+      {/* Full-featured: highlighted value, legend, range selector, min/max/avg */}
+      <ChartContainer
+        title="Hashrate"
+        highlightedValue={{ value: 102.4, unit: 'TH/s' }}
+        legendData={LEGEND_DATA}
+        rangeSelector={{ options: RANGE_OPTIONS, value: range, onChange: setRange }}
+        minMaxAvg={{ min: '10 TH/s', avg: '55 TH/s', max: '100 TH/s' }}
+      >
+        <MockChart />
+      </ChartContainer>
+
+      {/* Loading state */}
+      <ChartContainer title="Loading" loading>
+        <MockChart />
+      </ChartContainer>
+
+      {/* Empty state */}
+      <ChartContainer title="No Data" empty emptyMessage="No data available for this period">
+        <MockChart />
+      </ChartContainer>
+    </div>
+  )
+}

package/src/primitives/components/chart-container/styles.scss

@@ -0,0 +1,207 @@
+@use '../../styles/mixins' as *;
+
+$chart-container-compact-width: 560px;
+
+.mdk-chart-container {
+  @include flex_column;
+
+  gap: 16px;
+  container-type: inline-size;
+  container-name: mdk-chart-container;
+  min-width: 0;
+  width: 100%;
+
+  @container mdk-chart-container (max-width: #{$chart-container-compact-width}) {
+    .mdk-chart-container__highlighted-value__number {
+      font-size: 22px;
+    }
+
+    .mdk-chart-container__highlighted-value__unit {
+      font-size: 14px;
+    }
+  }
+
+  &__legend {
+    @include flex_wrap;
+
+    gap: 0.5rem 1rem;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+
+    &-item {
+      @include flex_align;
+
+      gap: 0.5rem;
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      transition: opacity 0.15s ease;
+    }
+
+    &-box {
+      box-sizing: border-box;
+      width: 12px;
+      height: 12px;
+      border: 1px solid;
+      flex-shrink: 0;
+    }
+    &-label {
+      font-family: var(--font-mono);
+      font-size: 14px;
+    }
+  }
+
+  &__header {
+    &-row {
+      @include flex_align_start_between;
+
+      gap: 1rem;
+      width: 100%;
+      margin-bottom: 0;
+    }
+
+    &-left {
+      flex: 1 1 100%;
+      width: 100%;
+      min-width: 0;
+    }
+
+    &-right {
+      @include flex_align;
+
+      flex-shrink: 0;
+    }
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--mdk-chart-container-title);
+  }
+
+  &__range {
+    &-selector {
+      @include flex_align;
+
+      gap: 0;
+      border-radius: 0;
+      overflow: hidden;
+      border: 1px solid hsl(var(--foreground) / 0.2);
+    }
+  }
+
+  &__highlighted {
+    &-value {
+      @include flex_align;
+
+      align-items: baseline;
+      gap: 0.25rem;
+      flex-shrink: 0;
+      white-space: nowrap;
+
+      &__number {
+        font-size: 28px;
+        font-weight: 600;
+        color: var(--mdk-color-primary);
+      }
+
+      &__unit {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--mdk-color-white-5);
+      }
+    }
+  }
+
+  &__body {
+    position: relative;
+    min-height: 200px;
+
+    &--with-highlight {
+      @include flex_align_start;
+      gap: 1rem;
+    }
+  }
+
+  &__chart-slot {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__panel {
+    @include flex_column;
+
+    gap: 16px;
+    box-sizing: border-box;
+    min-width: 0;
+  }
+
+  &__panel-header {
+    @include flex_align_start_between;
+
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0.5rem 1rem;
+    width: 100%;
+
+    .mdk-chart-container__legend-area {
+      flex: 1 1 0;
+      min-width: 0;
+    }
+
+    .mdk-chart-container__highlight-area {
+      flex: 0 0 auto;
+      flex-shrink: 0;
+      white-space: nowrap;
+    }
+  }
+
+  &--combined-panel {
+    .mdk-chart-container__footer-area {
+      margin-top: 0;
+      padding-top: 0;
+    }
+  }
+
+  &__footer-area {
+    margin-top: 0;
+    padding-top: 0;
+    color: unset;
+    font-size: unset;
+    font-weight: unset;
+  }
+
+  &__time-range {
+    @include chart_stat_value;
+  }
+
+  &__empty {
+    @include flex_center;
+
+    min-height: 200px;
+    color: hsl(var(--foreground) / 0.6);
+  }
+
+  &__loading-overlay {
+    @include flex_center;
+
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    background: transparent;
+    pointer-events: none;
+  }
+
+  &__chart-area {
+    position: relative;
+    min-height: 200px;
+    width: 100%;
+  }
+
+  &__body {
+    position: relative;
+  }
+}

package/src/primitives/components/chart-stats-footer/USAGE.md

@@ -0,0 +1,59 @@
+# `ChartStatsFooter`
+
+Displays Min/Max/Avg values and an optional grid of additional stat items below a chart.
+
+<!-- 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 |
+|------|--------|----------------|---------|-------------|
+| `className` | Optional | `string` | - | Custom class name |
+| `minMaxAvg` | Optional | `Partial<{ min: string; max: string; avg: string }>` | - | Min/Max/Avg values row |
+| `secondaryLabel` | Optional | `SecondaryLabel` | - | Secondary label displayed below stats |
+| `stats` | Optional | `ChartStatsFooterItem[]` | - | Additional stats displayed in a columnar grid |
+| `statsPerColumn` | Optional | `number` | `1` | Number of stat items per column (default: 1) |
+
+### `ChartStatsFooterItem`
+
+| Field | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `label` | Required | `string` | - | Stat label |
+| `value` | Required | `string \| number` | - | Stat value |
+
+### `SecondaryLabel`
+
+| Field | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `title` | Required | `string` | - | Label text |
+| `value` | Required | `string \| number` | - | Value text |
+<!-- END GENERATED: props -->
+
+## Example
+
+```tsx
+import { ChartStatsFooter } from "@tetherto/mdk-react-devkit"
+
+<ChartStatsFooter
+  minMaxAvg={{ min: "10 TH/s", avg: "55 TH/s", max: "100 TH/s" }}
+  stats={[
+    { label: "Uptime", value: "99.5%" },
+    { label: "Rejected", value: "0.2%" },
+  ]}
+/>
+
+// Multiple stats per column
+<ChartStatsFooter
+  stats={[
+    { label: "A", value: "1" },
+    { label: "B", value: "2" },
+    { label: "C", value: "3" },
+    { label: "D", value: "4" },
+  ]}
+  statsPerColumn={2}
+/>
+```
+
+## Notes
+
+- Returns `null` when none of `minMaxAvg`, `stats`, or `secondaryLabel` are provided
+- If `minMaxAvg.avg` is `'-'`, all three values display as `'-'`

package/src/primitives/components/chart-stats-footer/chart-stats-footer.example.tsx

@@ -0,0 +1,40 @@
+/**
+ * Runnable example for ChartStatsFooter.
+ */
+import { ChartStatsFooter } from '@tetherto/mdk-react-devkit'
+
+export const ChartStatsFooterExample = () => (
+  <div className="mdk-example-row" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+    {/* Min/Max/Avg only */}
+    <ChartStatsFooter minMaxAvg={{ min: '10 TH/s', avg: '55 TH/s', max: '100 TH/s' }} />
+
+    {/* Stats grid alongside min/max/avg */}
+    <ChartStatsFooter
+      minMaxAvg={{ min: '10 TH/s', avg: '55 TH/s', max: '100 TH/s' }}
+      stats={[
+        { label: 'Uptime', value: '99.5%' },
+        { label: 'Rejected', value: '0.2%' },
+      ]}
+    />
+
+    {/* Multiple stats per column */}
+    <ChartStatsFooter
+      stats={[
+        { label: 'Pool A', value: '60 TH/s' },
+        { label: 'Pool B', value: '42 TH/s' },
+        { label: 'Pool C', value: '38 TH/s' },
+        { label: 'Pool D', value: '27 TH/s' },
+      ]}
+      statsPerColumn={2}
+    />
+
+    {/* Secondary label row */}
+    <ChartStatsFooter
+      minMaxAvg={{ min: '800 W', avg: '1 100 W', max: '1 400 W' }}
+      secondaryLabel={{ title: 'Time range', value: 'Last 24 hours' }}
+    />
+
+    {/* Average placeholder when no data */}
+    <ChartStatsFooter minMaxAvg={{ min: '-', avg: '-', max: '-' }} />
+  </div>
+)