@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

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

@@ -0,0 +1,37 @@
+/**
+ * Runnable example for TextArea.
+ */
+import { TextArea } from '@tetherto/mdk-react-devkit'
+
+export const TextAreaExample = () => (
+  <div className="mdk-example-col">
+    <TextArea
+      id="notes"
+      label="Device Notes"
+      placeholder="Add notes about this miner..."
+      rows={4}
+    />
+
+    <TextArea
+      id="config"
+      label="Custom Configuration"
+      placeholder="Paste raw config JSON..."
+      rows={6}
+    />
+
+    <TextArea
+      id="error-ta"
+      label="Pool URL"
+      placeholder="stratum+tcp://..."
+      error="Invalid stratum URL format."
+    />
+
+    <TextArea
+      id="disabled-ta"
+      label="Read-only Log"
+      defaultValue="2025-05-18 12:34:56 — Pool connected successfully."
+      disabled
+      rows={3}
+    />
+  </div>
+)

package/src/primitives/components/threshold-line-chart/USAGE.md

@@ -0,0 +1,49 @@
+# `ThresholdLineChart`
+
+Line chart for time series with optional horizontal threshold lines (`thresholds`).
+Includes `ChartContainer` chrome: title, legend with series toggle, and empty state.
+
+<!-- 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` | - | Extra class on the container |
+| `data` | Optional | `ThresholdLineChartData` | - | `series` points plus optional `thresholds` lines |
+| `emptyMessage` | Optional | `string` | - | Message when data is missing or all zero |
+| `height` | Optional | `number` | `280` | Chart height in pixels (`360` when `isTall`) |
+| `isLegendVisible` | Optional | `boolean` | `true` | Legend with click-to-hide series |
+| `isTall` | Optional | `boolean` | `false` | When true, uses a taller default height (360px) |
+| `title` | Optional | `string` | - | Chart title (unit appended when `unit` is set) |
+| `unit` | Optional | `string` | - | Shown in title and axis/tooltip formatting |
+| `yTicksFormatter` | Optional | `(value: number) => string` | - | Custom Y-axis tick labels |
+
+### `ThresholdLineChartData`
+
+| Field | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `series` | Required | `ThresholdLineChartSeries[]` | - | Data lines; points with a non-finite timestamp are dropped. All-zero values render the empty state |
+| `thresholds` | Optional | `ThresholdLineChartThreshold[]` | - | Horizontal reference lines at a fixed `value`, spanning every timestamp in `series` |
+<!-- END GENERATED: props -->
+
+## Example
+
+```tsx
+<ThresholdLineChart
+  title="Power Consumption"
+  unit="MW"
+  data={{
+    series: [
+      {
+        label: 'Power',
+        color: '#f59e0b',
+        points: [
+          { timestamp: '2025-01-01T00:00:00.000Z', value: 30 },
+          { timestamp: '2025-01-02T00:00:00.000Z', value: 34 },
+        ],
+      },
+    ],
+    thresholds: [{ label: 'Availability', value: 38, color: '#22c55e' }],
+  }}
+/>
+```

package/src/primitives/components/threshold-line-chart/threshold-line-chart.example.tsx

@@ -0,0 +1,22 @@
+import { CHART_COLORS, ThresholdLineChart, UNITS } from '@tetherto/mdk-react-devkit/primitives'
+
+const powerData = {
+  series: [
+    {
+      label: 'Power Consumption',
+      color: CHART_COLORS.orange,
+      points: [
+        { timestamp: '2025-01-01T00:00:00.000Z', value: 28 },
+        { timestamp: '2025-01-02T00:00:00.000Z', value: 31 },
+        { timestamp: '2025-01-03T00:00:00.000Z', value: 29 },
+      ],
+    },
+  ],
+  thresholds: [{ label: 'Power Availability', value: 38, color: CHART_COLORS.green }],
+}
+
+export const ThresholdLineChartExample = () => (
+  <div className="mdk-example-row">
+    <ThresholdLineChart title="Power Consumption" data={powerData} unit={UNITS.ENERGY_MW} />
+  </div>
+)

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

@@ -0,0 +1,54 @@
+# Toast / toaster
+
+Transient notifications shown in a corner of the viewport, built on Radix UI.
+The simplest path is `<Toaster>` (Provider + Viewport in one) wrapping a
+list of `<Toast>` elements.
+
+<!-- BEGIN GENERATED: props — do not edit; npm run generate:usage-proptables (source: component JSDoc/types via registry.json) -->
+## Props
+
+### `Toast` props
+
+| Prop | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `title` | Required | `string` | - | Title shown at the top of the toast |
+| `description` | Optional | `string` | - | Body text |
+| `duration` | Optional | `number` | - | Auto-dismiss after N ms |
+| `icon` | Optional | `React.JSX.Element` | - | Override the default variant icon |
+| `onOpenChange` | Optional | `((open: boolean) => void)` | - | Open-state change handler |
+| `open` | Optional | `boolean` | - | Controlled open state |
+| `variant` | Optional | `"success" \| "info" \| "warning" \| "error"` | `"info"` | Determines the icon and accent |
+
+### `Toaster` props
+
+| Prop | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `children` | Required | `React.ReactNode` | - | The `<Toast>` elements to render |
+| `position` | Optional | `"top-left" \| "top-right" \| "bottom-left" \| "bottom-right" \| "top-center" \| "bottom-center"` | `"top-left"` | Where the viewport is anchored |
+<!-- END GENERATED: props -->
+
+## Example
+
+```tsx
+<Toaster position="bottom-right">
+  <Toast title="Saved" description="Your changes were saved." variant="success" />
+</Toaster>
+```
+
+In practice, render toasts from state managed by `useNotification`:
+
+```tsx
+const { notifications } = useNotification();
+
+<Toaster position="bottom-right">
+  {notifications.map((n) => (
+    <Toast key={n.id} title={n.title} description={n.description} variant={n.variant} />
+  ))}
+</Toaster>;
+```
+
+## Notes
+
+- The compound parts (`ToastProvider`, `ToastViewport`) are available for
+  fine-grained control; most code should stick to `<Toaster>`
+- Place exactly one `<Toaster>` in your app root

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

@@ -0,0 +1,324 @@
+@use '../../styles/mixins' as *;
+$viewport-padding: 24px;
+
+.mdk_toast {
+  @include flex_column;
+
+  gap: 8px;
+  max-width: 384px;
+  min-width: 384px;
+  padding: 20px 16px;
+  background: var(--mdk-color-gray-900);
+
+  &__viewport {
+    @include flex_column;
+
+    position: fixed;
+    gap: 8px;
+    margin: 0;
+    z-index: 9999;
+    outline: none;
+    list-style: none;
+    padding: $viewport-padding;
+
+    // Position modifiers
+    &--top-left {
+      top: 0;
+      left: 0;
+
+      .mdk_toast[data-state='open'] {
+        animation: mdk_toast_slideInFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
+      }
+
+      .mdk_toast[data-state='closed'] {
+        animation: mdk_toast_slideOutToLeft 100ms ease-in;
+      }
+
+      .mdk_toast[data-swipe='end'] {
+        animation: mdk_toast_swipeOutLeft 100ms ease-out;
+      }
+    }
+
+    &--top-right {
+      top: 0;
+      right: 0;
+
+      .mdk_toast[data-state='open'] {
+        animation: mdk_toast_slideInFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
+      }
+
+      .mdk_toast[data-state='closed'] {
+        animation: mdk_toast_slideOutToRight 100ms ease-in;
+      }
+
+      .mdk_toast[data-swipe='end'] {
+        animation: mdk_toast_swipeOutRight 100ms ease-out;
+      }
+    }
+
+    &--bottom-left {
+      bottom: 0;
+      left: 0;
+      flex-direction: column-reverse;
+
+      .mdk_toast[data-state='open'] {
+        animation: mdk_toast_slideInFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
+      }
+
+      .mdk_toast[data-state='closed'] {
+        animation: mdk_toast_slideOutToLeft 100ms ease-in;
+      }
+
+      .mdk_toast[data-swipe='end'] {
+        animation: mdk_toast_swipeOutLeft 100ms ease-out;
+      }
+    }
+
+    &--bottom-right {
+      bottom: 0;
+      right: 0;
+      flex-direction: column-reverse;
+
+      .mdk_toast[data-state='open'] {
+        animation: mdk_toast_slideInFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
+      }
+
+      .mdk_toast[data-state='closed'] {
+        animation: mdk_toast_slideOutToRight 100ms ease-in;
+      }
+
+      .mdk_toast[data-swipe='end'] {
+        animation: mdk_toast_swipeOutRight 100ms ease-out;
+      }
+    }
+
+    &--top-center {
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+
+      .mdk_toast[data-state='open'] {
+        animation: mdk_toast_slideInFromTop 150ms cubic-bezier(0.16, 1, 0.3, 1);
+      }
+
+      .mdk_toast[data-state='closed'] {
+        animation: mdk_toast_slideOutToTop 100ms ease-in;
+      }
+
+      .mdk_toast[data-swipe='end'] {
+        animation: mdk_toast_swipeOutTop 100ms ease-out;
+      }
+    }
+
+    &--bottom-center {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      flex-direction: column-reverse;
+
+      .mdk_toast[data-state='open'] {
+        animation: mdk_toast_slideInFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
+      }
+
+      .mdk_toast[data-state='closed'] {
+        animation: mdk_toast_slideOutToBottom 100ms ease-in;
+      }
+
+      .mdk_toast[data-swipe='end'] {
+        animation: mdk_toast_swipeOutBottom 100ms ease-out;
+      }
+    }
+  }
+
+  // Swipe move (common for all positions)
+  &[data-swipe='move'] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
+  &[data-swipe='cancel'] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  &__header {
+    display: flex;
+    gap: 12px;
+
+    &-content {
+      @include flex_align_start_between;
+
+      flex: 1;
+      gap: 8px;
+    }
+  }
+
+  &__variant {
+    overflow: hidden;
+  }
+
+  &__body {
+    padding-left: 33px;
+  }
+
+  &__title {
+    font-family: var(--font-mono);
+    font-size: 16px;
+    font-weight: 500;
+    word-break: break-all;
+    color: var(--mdk-color-text-secondary);
+  }
+
+  &__description {
+    font-family: var(--font-mono);
+    font-size: 14px;
+    font-weight: 400;
+    word-break: break-word;
+    color: var(--mdk-color-text-secondary);
+  }
+
+  &__close {
+    display: flex;
+    border: none;
+    cursor: pointer;
+    background: unset;
+
+    svg {
+      width: 22px;
+      height: 22px;
+    }
+
+    svg path {
+      stroke: var(--mdk-color-gray-400);
+    }
+
+    &:hover {
+      border-radius: 4px;
+      transition: background-color 0.2s ease-in-out;
+      background-color: var(--mdk-color-white-12);
+
+      svg path {
+        transition: stroke 0.2s ease-in-out;
+        stroke: var(--mdk-color-gray-300);
+      }
+    }
+  }
+}
+
+// Keyframes for slide in animations
+@keyframes mdk_toast_slideInFromLeft {
+  from {
+    transform: translateX(calc(-100% - #{$viewport-padding}));
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes mdk_toast_slideInFromRight {
+  from {
+    transform: translateX(calc(100% + #{$viewport-padding}));
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes mdk_toast_slideInFromTop {
+  from {
+    transform: translateY(calc(-100% - #{$viewport-padding}));
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes mdk_toast_slideInFromBottom {
+  from {
+    transform: translateY(calc(100% + #{$viewport-padding}));
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+// Keyframes for slide out animations
+@keyframes mdk_toast_slideOutToLeft {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(calc(-100% - #{$viewport-padding}));
+    opacity: 0;
+  }
+}
+
+@keyframes mdk_toast_slideOutToRight {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(calc(100% + #{$viewport-padding}));
+    opacity: 0;
+  }
+}
+
+@keyframes mdk_toast_slideOutToTop {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(calc(-100% - #{$viewport-padding}));
+    opacity: 0;
+  }
+}
+
+@keyframes mdk_toast_slideOutToBottom {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(calc(100% + #{$viewport-padding}));
+    opacity: 0;
+  }
+}
+
+// Keyframes for swipe out animations
+@keyframes mdk_toast_swipeOutLeft {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(calc(-100% - #{$viewport-padding}));
+  }
+}
+
+@keyframes mdk_toast_swipeOutRight {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(calc(100% + #{$viewport-padding}));
+  }
+}
+
+@keyframes mdk_toast_swipeOutTop {
+  from {
+    transform: translateY(var(--radix-toast-swipe-end-y));
+  }
+  to {
+    transform: translateY(calc(-100% - #{$viewport-padding}));
+  }
+}
+
+@keyframes mdk_toast_swipeOutBottom {
+  from {
+    transform: translateY(var(--radix-toast-swipe-end-y));
+  }
+  to {
+    transform: translateY(calc(100% + #{$viewport-padding}));
+  }
+}

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

@@ -0,0 +1,26 @@
+/**
+ * Runnable example for Toast / Toaster.
+ */
+import { useState } from 'react'
+import { Button, Toast, Toaster } from '@tetherto/mdk-react-devkit'
+
+export const ToastExample = () => {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Button variant="primary" onClick={() => setOpen(true)}>
+        Show toast
+      </Button>
+      <Toaster position="bottom-right">
+        <Toast
+          open={open}
+          onOpenChange={setOpen}
+          title="Saved"
+          description="Your changes were saved successfully."
+          variant="success"
+          duration={3000}
+        />
+      </Toaster>
+    </>
+  )
+}

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

@@ -0,0 +1,46 @@
+# Tooltip
+
+Hover-triggered floating label built on Radix UI. Two ways to use it:
+
+- **`SimpleTooltip`** — one-prop wrapper, recommended for most cases.
+- **`Tooltip` + sub-parts** — full composition for advanced control.
+
+<!-- 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` | - | Element that triggers the tooltip |
+| `content` | Required | `React.ReactNode` | - | Tooltip content (string or JSX) |
+| `className` | Optional | `string` | - | Additional class for content |
+| `delayDuration` | Optional | `number` | `200` | Delay before showing tooltip (ms) |
+| `showArrow` | Optional | `boolean` | `true` | Whether to show the arrow |
+| `side` | Optional | `"left" \| "right" \| "top" \| "bottom"` | `"top"` | Position of the tooltip relative to trigger |
+| `sideOffset` | Optional | `number` | `8` | Distance from the trigger in pixels |
+<!-- END GENERATED: props -->
+
+## Composable parts
+
+```tsx
+<TooltipProvider delayDuration={200}>
+  <Tooltip>
+    <TooltipTrigger asChild><InfoIcon /></TooltipTrigger>
+    <TooltipContent side="right">Helpful explanation</TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+```
+
+## Example
+
+```tsx
+<SimpleTooltip content="Refresh data" side="bottom">
+  <Button icon={<ReloadIcon />} aria-label="Refresh" />
+</SimpleTooltip>
+```
+
+## Notes
+
+- For click-triggered panels, use `Popover` instead
+- If `content` is empty/null, `SimpleTooltip` renders the trigger unwrapped
+- Wrap your app in a single `<TooltipProvider>` when you have many tooltips
+  to share the open/close timing logic

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

@@ -0,0 +1,99 @@
+/**
+ * Tooltip Component Styles
+ */
+
+.mdk-tooltip__content {
+  --mdk-tooltip-border-color: var(--mdk-color-white-alpha-04);
+  --mdk-tooltip-surface-color: var(--mdk-popover-bg);
+
+  max-width: 200px;
+  padding: 6px 10px;
+  z-index: 10001;
+  word-wrap: break-word;
+  position: relative;
+
+  color: var(--mdk-color-white);
+  background-color: var(--mdk-tooltip-surface-color);
+  border: 1px solid var(--mdk-tooltip-border-color);
+
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.4;
+
+  border-radius: 2px;
+
+  animation-duration: 0.09s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+
+  &[data-state='delayed-open'],
+  &[data-state='instant-open'] {
+    animation-name: mdk-tooltip-fade-in;
+  }
+
+  &[data-state='closed'] {
+    animation-name: mdk-tooltip-fade-out;
+    animation-duration: 0.15s;
+    animation-timing-function: ease-in;
+  }
+
+  &-main {
+    overflow-y: auto;
+    max-height: 300px;
+  }
+
+  @media (max-height: 400px) {
+    max-height: 300px;
+  }
+
+  @media (min-width: 768px) {
+    max-width: 250px;
+    padding: 8px 12px;
+  }
+}
+
+.mdk-tooltip__arrow {
+  display: block;
+  width: 14px;
+  height: 7px;
+  position: relative;
+  overflow: visible;
+
+  /* 1px borders on two sides of a rotated square — matches the box border weight */
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4px;
+    left: 50%;
+    width: 9px;
+    height: 9px;
+    box-sizing: border-box;
+    transform: translateX(-50%) rotate(45deg);
+    background: var(--mdk-tooltip-surface-color);
+    border-right: 1px solid var(--mdk-tooltip-border-color);
+    border-bottom: 1px solid var(--mdk-tooltip-border-color);
+  }
+}
+
+@keyframes mdk-tooltip-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes mdk-tooltip-fade-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}

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

@@ -0,0 +1,17 @@
+/**
+ * Runnable example for Tooltip / SimpleTooltip.
+ */
+import { Button, SimpleTooltip } from '@tetherto/mdk-react-devkit'
+
+export const TooltipExample = () => {
+  return (
+    <div style={{ display: 'flex', gap: 16 }}>
+      <SimpleTooltip content="Refresh data" side="bottom">
+        <Button>Refresh</Button>
+      </SimpleTooltip>
+      <SimpleTooltip content="Saves to the current workspace" side="right">
+        <Button variant="primary">Save</Button>
+      </SimpleTooltip>
+    </div>
+  )
+}