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

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

@@ -0,0 +1,83 @@
+/**
+ * Runnable example for LogsCard (and supporting log components).
+ */
+import { useState } from 'react'
+import { LogsCard } from '@tetherto/mdk-react-devkit'
+import type { LogData } from '@tetherto/mdk-react-devkit'
+
+const INCIDENT_LOGS: LogData[] = [
+  {
+    uuid: '1',
+    title: 'High temperature detected',
+    subtitle: 'Miner S19-042 · Rack 3',
+    body: 'Chip temp: 98°C|Ambient: 42°C',
+    status: 'Critical',
+  },
+  {
+    uuid: '2',
+    title: 'Hash rate drop',
+    subtitle: 'Miner S19-017 · Rack 1',
+    body: 'Expected: 100 TH/s|Actual: 62 TH/s',
+    status: 'High',
+  },
+  {
+    uuid: '3',
+    title: 'Pool connection unstable',
+    subtitle: 'Pool Manager',
+    body: 'Reconnections: 4 in last 15 min',
+    status: 'Medium',
+  },
+]
+
+const ACTIVITY_LOGS: LogData[] = [
+  {
+    uuid: '4',
+    title: 'Firmware update completed',
+    subtitle: '12 miners · Rack 2',
+    body: 'Version: 2.1.4',
+    status: 'Success',
+  },
+  {
+    uuid: '5',
+    title: 'Miner restarted',
+    subtitle: 'Miner A1346-008',
+    body: 'Reason: Manual restart',
+    status: 'Info',
+  },
+]
+
+export const LogsExample = () => {
+  const [page, setPage] = useState(2)
+
+  return (
+    <div className="mdk-example-row" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+      {/* Incidents with pagination */}
+      <LogsCard
+        label="Recent Incidents"
+        type="Incidents"
+        logsData={INCIDENT_LOGS}
+        pagination={{
+          current: page,
+          total: 30,
+          pageSize: 3,
+          handlePaginationChange: setPage,
+        }}
+        onLogClicked={(uuid) => console.warn('clicked', uuid)}
+      />
+
+      {/* Activity log */}
+      <LogsCard label="Activity Log" type="Activity" logsData={ACTIVITY_LOGS} />
+
+      {/* Loading state */}
+      <LogsCard label="Loading…" type="Incidents" isLoading skeletonRows={4} />
+
+      {/* Empty state */}
+      <LogsCard
+        label="No Incidents"
+        type="Incidents"
+        logsData={[]}
+        emptyMessage="All systems normal"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,125 @@
+@use '../../styles/mixins' as *;
+
+.mdk-logs-card {
+  &__container {
+    @include flex-row;
+
+    width: 100%;
+  }
+
+  &__header-container {
+    @include flex-row;
+
+    align-items: center;
+  }
+
+  &__inner-container {
+    @include flex_column;
+
+    width: 100%;
+  }
+
+  &__log-inner-container {
+    @include flex_row;
+
+    gap: 5px;
+    width: 100%;
+    cursor: pointer;
+  }
+
+  &__data-container {
+    @include flex_column;
+
+    flex: 1;
+  }
+
+  &__status-icon {
+    width: 10px;
+    height: 10px;
+    margin: 5px;
+    margin-top: 8px;
+    border-radius: 50%;
+
+    &--critical {
+      background-color: rgb(var(--mdk-color-error));
+    }
+
+    &--high {
+      background-color: var(--mdk-color-primary);
+    }
+
+    &--medium {
+      background-color: var(--mdk-color-warning);
+    }
+  }
+
+  &__list-container {
+    @include flex_column;
+
+    gap: 15px;
+    height: 100%;
+    padding: 10px;
+    overflow-y: auto;
+    max-height: 500px;
+
+    &--empty {
+      padding: 0;
+    }
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      background: transparent;
+    }
+  }
+
+  &__title-text {
+    font-size: 12px;
+    color: var(--mdk-color-background-light);
+  }
+
+  &__subtitle-text {
+    font-size: 10px;
+    padding: 5px 0;
+    max-width: 100%;
+    color: var(--mdk-color-text-muted);
+  }
+
+  &__body-text {
+    display: flex;
+    gap: 5px;
+    font-size: 10px;
+    color: var(--mdk-color-text-muted-warm);
+  }
+
+  &__icon-wrapper {
+    @include flex_column_center;
+
+    margin: 5px;
+  }
+
+  &__row-container {
+    @include flex_row;
+
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__empty {
+    @include flex_column_center;
+
+    padding: 18px;
+    font-size: 14px;
+  }
+
+  &__pagination {
+    margin: 16px 10px;
+  }
+
+  &__skeleton-row {
+    @include flex_column;
+
+    gap: 8px;
+    width: 100%;
+    padding: 8px;
+  }
+}

package/src/primitives/components/mdk-wordmark/USAGE.md

@@ -0,0 +1,29 @@
+# MdkWordmark
+
+The canonical MDK brand lockup, rendered as inline SVG so it tints to
+`currentColor`. Use it in `<AppHeader>` via the `logo` slot, on
+sign-in pages, or anywhere else the brand should appear.
+
+<!-- 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` | - | Optional class hook on the outer `<svg>` |
+| `size` | Optional | `"sm" \| "md" \| "lg"` | `"md"` | Visual size of the wordmark. `sm` ≈ 24px tall, `md` ≈ 32px, `lg` ≈ 64px |
+| `title` | Optional | `string` | `"MDK"` | Accessible label |
+<!-- END GENERATED: props -->
+
+## When to use
+
+- You need the MDK lockup at a known size (sm / md / lg).
+- The surrounding text color or design token should drive the brand color
+  via `currentColor`.
+
+## Example
+
+```tsx
+import { MdkWordmark } from "@tetherto/mdk-react-devkit/primitives";
+
+<MdkWordmark size="md" />;
+```

package/src/primitives/components/mdk-wordmark/mdk-wordmark.example.tsx

@@ -0,0 +1,12 @@
+import { MdkWordmark } from './index'
+
+/**
+ * Three sizes of the MDK wordmark, tinting to `currentColor`.
+ */
+export const MdkWordmarkExample = (): React.ReactNode => (
+  <div className="mdk-wordmark-example">
+    <MdkWordmark size="sm" />
+    <MdkWordmark size="md" />
+    <MdkWordmark size="lg" />
+  </div>
+)

package/src/primitives/components/mdk-wordmark/mdk-wordmark.scss

@@ -0,0 +1,27 @@
+@use "../../styles/mixins" as *;
+
+@layer mdk {
+  .mdk-wordmark {
+    display: inline-block;
+    color: currentColor;
+    height: auto;
+
+    &--sm {
+      height: 1.5rem;
+    }
+
+    &--md {
+      height: 2rem;
+    }
+
+    &--lg {
+      height: 4rem;
+    }
+  }
+
+  .mdk-wordmark-example {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+}

package/src/primitives/components/min-max-avg/USAGE.md

@@ -0,0 +1,35 @@
+# `MinMaxAvg`
+
+Displays Min, Max, and Avg labels with MDK chart footer styling (orange labels, grey values).
+
+<!-- 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 |
+|------|--------|----------------|---------|-------------|
+| `avg` | Optional | `string` | - | Average value (hidden if empty) |
+| `className` | Optional | `string` | - | Additional root class |
+| `max` | Optional | `string` | - | Maximum value (hidden if empty) |
+| `min` | Optional | `string` | - | Minimum value (hidden if empty) |
+<!-- END GENERATED: props -->
+
+## Usage
+
+```tsx
+import { MinMaxAvg } from "@tetherto/mdk-react-devkit/primitives"
+
+<MinMaxAvg min="10 TH/s" max="100 TH/s" avg="55 TH/s" />
+```
+
+Use with `ChartContainer` via the `minMaxAvg` prop (pre-formatted strings) or the `footer` slot.
+
+With numeric data, pair `computeStats` and `formatMinMaxAvg` from chart utils:
+
+```tsx
+import { computeStats, formatMinMaxAvg } from "@tetherto/mdk-react-devkit/primitives"
+
+const stats = computeStats(values)
+const minMaxAvg = formatMinMaxAvg(stats, (v, key) =>
+  key === "avg" ? `${v.toFixed(1)} TH/s` : `${v} TH/s`,
+)
+```

package/src/primitives/components/min-max-avg/min-max-avg.example.tsx

@@ -0,0 +1,8 @@
+/**
+ * Runnable example for MinMaxAvg.
+ */
+import { MinMaxAvg } from './index'
+
+export const MinMaxAvgExample = () => (
+  <MinMaxAvg min="65 TH/s" max="80 TH/s" avg="72.6 TH/s" />
+)

package/src/primitives/components/min-max-avg/styles.scss

@@ -0,0 +1,26 @@
+@use '../../styles/mixins' as *;
+
+@layer mdk {
+  .mdk-min-max-avg {
+    @include flex_row;
+
+    gap: 16px;
+    align-items: center;
+    flex-wrap: wrap;
+
+    &__item {
+      @include flex_row;
+
+      gap: 10px;
+      align-items: center;
+    }
+
+    &__label {
+      @include chart_stat_label;
+    }
+
+    &__value {
+      @include chart_stat_value;
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+# Mosaic
+
+A CSS Grid layout component that maps named areas to child `Mosaic.Item` elements. Supports 1D (space-separated string rows) and 2D array templates.
+
+<!-- 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` | - | `Mosaic.Item` elements |
+| `template` | Required | `string[] \| string[][]` | - | Grid area layout. 1D: each string is a row of space-separated area names. 2D: each inner array is a row |
+| `className` | Optional | `string` | - | Additional class for the grid element |
+| `columns` | Optional | `string \| string[]` | - | Custom `grid-template-columns` value or array of track sizes. Defaults to equal-width fractional tracks |
+| `gap` | Optional | `string` | `"12px"` | CSS gap between grid cells |
+| `rowHeight` | Optional | `string` | `"auto"` | CSS height for each row |
+<!-- 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.
+
+### `Mosaic.Item`
+
+| Prop        | Status   | Type / Options | Default | Description                                           |
+| ----------- | -------- | ----------------- | ------- | ----------------------------------------------------- |
+| `area`      | Optional | `string`          | —       | Grid area name (must match a name used in `template`) |
+| `children`  | Optional | `React.ReactNode` | —       | Item content                                          |
+| `className` | Optional | `string`          | —       | Additional class for the item element                 |
+
+All other `div` HTML attributes are forwarded.
+
+## Example
+
+```tsx
+import { Mosaic } from "@tetherto/mdk-react-devkit"
+
+// 2D array template
+<Mosaic
+  template={[
+    ["header", "header"],
+    ["sidebar", "content"],
+    ["footer", "footer"],
+  ]}
+  gap="16px"
+>
+  <Mosaic.Item area="header"><Header /></Mosaic.Item>
+  <Mosaic.Item area="sidebar"><Sidebar /></Mosaic.Item>
+  <Mosaic.Item area="content"><Main /></Mosaic.Item>
+  <Mosaic.Item area="footer"><Footer /></Mosaic.Item>
+</Mosaic>
+
+// 1D string template
+<Mosaic
+  template={[
+    "header header header",
+    "nav    main   aside",
+    "footer footer footer",
+  ]}
+  columns={["200px", "1fr", "300px"]}
+>
+  ...
+</Mosaic>
+```
+
+## Notes
+
+- CSS `grid-area` names cannot start with a digit; `Mosaic` automatically prefixes numeric names with `'a'` (e.g. area `'1'` becomes `'a1'`)
+- Use `.` in the template to leave a cell empty
+- On mobile (below the SCSS breakpoint) the grid stacks as a single column by default

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

@@ -0,0 +1,43 @@
+/**
+ * Runnable example for Mosaic.
+ */
+import { Mosaic } from '@tetherto/mdk-react-devkit'
+
+export const MosaicExample = () => (
+  <div className="mdk-example-col">
+    <Mosaic
+      template={['header header', 'sidebar content', 'footer footer']}
+      gap="8px"
+      rowHeight="auto"
+    >
+      <Mosaic.Item
+        area="header"
+        className="mdk-example-inline"
+        style={{ background: 'var(--mdk-color-bg-card)', padding: '8px', borderRadius: '4px' }}
+      >
+        Header
+      </Mosaic.Item>
+      <Mosaic.Item
+        area="sidebar"
+        className="mdk-example-inline"
+        style={{ background: 'var(--mdk-color-bg-card)', padding: '8px', borderRadius: '4px' }}
+      >
+        Sidebar
+      </Mosaic.Item>
+      <Mosaic.Item
+        area="content"
+        className="mdk-example-inline"
+        style={{ background: 'var(--mdk-color-bg-card)', padding: '8px', borderRadius: '4px' }}
+      >
+        Content
+      </Mosaic.Item>
+      <Mosaic.Item
+        area="footer"
+        className="mdk-example-inline"
+        style={{ background: 'var(--mdk-color-bg-card)', padding: '8px', borderRadius: '4px' }}
+      >
+        Footer
+      </Mosaic.Item>
+    </Mosaic>
+  </div>
+)

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

@@ -0,0 +1,22 @@
+@use '../../styles/mixins' as *;
+
+.mosaic-grid {
+  @include flex_column;
+
+  gap: 16px;
+
+  // Desktop: use CSS Grid with named areas
+  @media (min-width: 1640px) {
+    display: grid;
+    grid-template-columns: var(--mosaic-columns);
+    grid-auto-rows: var(--mosaic-row-height);
+    gap: var(--mosaic-gap);
+    grid-template-areas: var(--mosaic-areas);
+  }
+}
+
+.mosaic-item {
+  min-width: 0;
+  min-height: 0;
+  // grid-area is set via inline style
+}

package/src/primitives/components/multi-level-select/USAGE.md

@@ -0,0 +1,50 @@
+# `MultiLevelSelect`
+
+Grouped select control with collapsible sections, built on the MDK `Select` primitive.
+
+## Sub-components
+
+All sub-components are accessed through the `MultiLevelSelect` namespace.
+
+| Export                     | Description                                      |
+| -------------------------- | ------------------------------------------------ |
+| `MultiLevelSelect.Root`    | Select root (controls open state and value)      |
+| `MultiLevelSelect.Trigger` | Button that opens the dropdown                   |
+| `MultiLevelSelect.Value`   | Displays the currently selected value            |
+| `MultiLevelSelect.Content` | Floating list panel                              |
+| `MultiLevelSelect.Item`    | Selectable option                                |
+| `MultiLevelSelect.Section` | Collapsible group of items with a section header |
+
+## `MultiLevelSelect.Section` 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.
+
+| Prop           | Status   | Type / Options | Default | Description                                      |
+| -------------- | -------- | ------------------------- | ------- | ------------------------------------------------ |
+| `sectionTitle` | Required | `ReactNode`               | —       | Title displayed in the section header            |
+| `children`     | Optional | `ReactNode`               | —       | `MultiLevelSelect.Item` elements in the section  |
+| `open`         | Optional | `boolean`                 | —       | Controlled open state                            |
+| `defaultOpen`  | Optional | `boolean`                 | `false` | Initial open state (uncontrolled)                |
+| `onToggle`     | Optional | `(open: boolean) => void` | —       | Called when the section is expanded or collapsed |
+
+## Example
+
+```tsx
+<MultiLevelSelect.Root>
+  <MultiLevelSelect.Trigger>
+    <MultiLevelSelect.Value placeholder="Select a pool" />
+  </MultiLevelSelect.Trigger>
+  <MultiLevelSelect.Content>
+    <MultiLevelSelect.Section sectionTitle="Region A" defaultOpen>
+      <MultiLevelSelect.Item value="pool-1">Pool 1</MultiLevelSelect.Item>
+      <MultiLevelSelect.Item value="pool-2">Pool 2</MultiLevelSelect.Item>
+    </MultiLevelSelect.Section>
+  </MultiLevelSelect.Content>
+</MultiLevelSelect.Root>
+```
+
+## Notes
+
+- `MultiLevelSelect.Root`, `Trigger`, `Value`, `Content`, and `Item` are pass-through re-exports of the base `Select` primitives
+- `MultiLevelSelect.Section` supports both controlled (`open` + `onToggle`) and uncontrolled (`defaultOpen`) patterns

package/src/primitives/components/multi-level-select/multi-level-select.example.tsx

@@ -0,0 +1,29 @@
+/**
+ * Runnable example for MultiLevelSelect.
+ */
+import { useState } from 'react'
+
+import { MultiLevelSelect } from '@tetherto/mdk-react-devkit'
+
+export const MultiLevelSelectExample = () => {
+  const [worker, setWorker] = useState('')
+
+  return (
+    <div className="mdk-example-col">
+      <MultiLevelSelect.Root value={worker} onValueChange={setWorker}>
+        <MultiLevelSelect.Trigger>
+          <MultiLevelSelect.Value placeholder="Select worker..." />
+        </MultiLevelSelect.Trigger>
+        <MultiLevelSelect.Content>
+          <MultiLevelSelect.Section sectionTitle="Foundry EU" defaultOpen>
+            <MultiLevelSelect.Item value="worker-eu-1">Worker EU-1</MultiLevelSelect.Item>
+            <MultiLevelSelect.Item value="worker-eu-2">Worker EU-2</MultiLevelSelect.Item>
+          </MultiLevelSelect.Section>
+          <MultiLevelSelect.Section sectionTitle="AntPool">
+            <MultiLevelSelect.Item value="worker-ap-1">Worker AP-1</MultiLevelSelect.Item>
+          </MultiLevelSelect.Section>
+        </MultiLevelSelect.Content>
+      </MultiLevelSelect.Root>
+    </div>
+  )
+}

package/src/primitives/components/multi-level-select/styles.scss

@@ -0,0 +1,45 @@
+@use '../../styles/mixins' as *;
+
+.mdk-multi-level-select__section {
+  border-bottom: 1px solid var(--mdk-color-white-transparent);
+}
+
+.mdk-multi-level-select__section-header {
+  @include flex_align_between;
+
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  user-select: none;
+  padding: 9px 16px;
+  letter-spacing: -0.5px;
+  font-family: inherit;
+  color: var(--mdk-color-white-alpha-08c, var(--mdk-color-white-7));
+}
+
+.mdk-multi-level-select__section-title {
+  min-width: 0;
+}
+
+.mdk-multi-level-select__section-body--collapsed {
+  display: none;
+}
+
+.mdk-multi-level-select__section-toggle {
+  @include flex_center;
+
+  width: 16px;
+  height: 16px;
+  font: inherit;
+  color: inherit;
+  flex-shrink: 0;
+  cursor: pointer;
+  border: 1px solid transparent;
+  background-color: var(--mdk-color-white-transparent);
+
+  &:hover {
+    transition: background-color 0.3s ease;
+    background-color: var(--mdk-color-primary-10);
+  }
+}