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

package/src/domain/components/mining-pools-panel/styles.scss

@@ -0,0 +1,129 @@
+@use "@primitives/styles/mixins" as *;
+
+$_prefix: "mdk-mining-pools-panel";
+
+.#{$_prefix} {
+  @include flex_column;
+
+  margin: 0;
+  border-radius: 0;
+  padding: 10px 5px;
+  box-sizing: border-box;
+  background-color: var(--mdk-color-surface);
+  border: 1px solid var(--mdk-dialog-border-color);
+
+  &__header {
+    padding: 5px;
+    padding-left: 10px;
+    border-bottom: 1px solid var(--mdk-dialog-border-color);
+  }
+
+  &__label {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 22px;
+    text-transform: uppercase;
+    color: var(--mdk-color-white);
+  }
+
+  /* Inner sub-card frame — the table sits inside a second surface with its own
+   * border + slight inset. */
+  &__table {
+    @include flex_column;
+
+    box-sizing: border-box;
+    margin: 12px 10px 10px;
+    padding: 0;
+    background-color: var(--mdk-color-background-dark);
+    border: 1px solid var(--mdk-table-border);
+    /* The flex parent already stretches children; explicit `width:
+     * 100%` combined with horizontal margins would push the inner
+     * frame past the outer card. */
+  }
+
+  &__row {
+    display: grid;
+    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.9fr) auto;
+    align-items: center;
+    column-gap: 16px;
+    padding: 14px 20px;
+    border-bottom: 1px solid var(--mdk-table-row-border);
+
+    &--head {
+      padding-block: 16px;
+      background-color: transparent;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &__cell {
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--mdk-color-text-secondary);
+    font-family: "JetBrains Mono", monospace, sans-serif;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+
+    &--head {
+      color: var(--mdk-color-text-muted);
+      font-size: 13px;
+      line-height: 20px;
+    }
+
+    &--name {
+      color: var(--mdk-color-text-secondary);
+    }
+
+    &--action {
+      justify-self: end;
+    }
+  }
+
+  &__details-btn {
+    appearance: none;
+    cursor: pointer;
+    padding: 10px 20px;
+    font-size: 13px;
+    line-height: 20px;
+    background-color: transparent;
+    color: var(--mdk-color-white);
+    border: 1px solid var(--mdk-button-secondary-border);
+    border-radius: var(--mdk-radius);
+    font-family: "JetBrains Mono", monospace, sans-serif;
+    white-space: nowrap;
+
+    &:hover {
+      border-color: var(--mdk-button-secondary-border-hover);
+      color: var(--mdk-color-white);
+    }
+  }
+
+  &__empty {
+    @include flex_column_center;
+
+    padding: 24px;
+    font-size: 13px;
+    min-height: 120px;
+    color: var(--mdk-color-text-disabled);
+  }
+
+  &__details-body {
+    // Strip the nested card surface — the dialog is the container.
+    .mdk-pool-details-card {
+      padding: 0;
+      background: transparent;
+      border: none;
+    }
+  }
+
+  &__skeleton-container {
+    @include flex_column;
+
+    gap: 14px;
+    padding: 12px;
+  }
+}

package/src/domain/components/pool-details-card/USAGE.md

@@ -0,0 +1,39 @@
+# `PoolDetailsCard`
+
+Compact key/value card for pool metadata. Empty list renders a "No data
+available" placeholder.
+
+<!-- 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 |
+|------|--------|----------------|---------|-------------|
+| `details` | Required | `PoolDetailItem[]` | - | Detail rows to render |
+| `className` | Optional | `string` | - | Additional class names |
+| `label` | Optional | `string` | - | Header label |
+| `underline` | Optional | `boolean` | `false` | Render an underline under the label |
+
+### `PoolDetailItem`
+
+| Field | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `title` | Required | `string` | - | Row label, rendered with a trailing colon |
+| `value` | Optional | `string \| number` | - | Row value; renders `-` when undefined or an empty string |
+<!-- END GENERATED: props -->
+
+## Example
+
+```tsx
+<PoolDetailsCard
+  label="Pool details"
+  details={[
+    { title: "URL", value: "stratum+tcp://..." },
+    { title: "Worker", value: "rig-01" },
+  ]}
+/>
+```
+
+## Data contracts
+
+`PoolDetailItem` is exported alongside the component — `{ title: string;
+value?: string | number }`. Undefined values render as `-`.

package/src/domain/components/pool-details-card/pool-details-card.example.tsx

@@ -0,0 +1,16 @@
+/**
+ * Runnable example for PoolDetailsCard.
+ */
+import { PoolDetailsCard } from '@tetherto/mdk-react-devkit'
+
+const details = [
+  { title: 'URL', value: 'stratum+tcp://eu.example.pool:3333' },
+  { title: 'Worker', value: 'rig-01' },
+  { title: 'Fee', value: '1.5 %' },
+  { title: 'Active workers', value: 42 },
+  { title: 'Pool status', value: 'Healthy' },
+]
+
+export const PoolDetailsCardExample = () => {
+  return <PoolDetailsCard label="Primary pool" details={details} />
+}

package/src/domain/components/pool-details-card/styles.scss

@@ -0,0 +1,88 @@
+@use '@primitives/styles/mixins' as *;
+
+$_prefix: 'mdk-pool-details-card';
+
+.#{$_prefix} {
+  @include flex_column;
+
+  border-radius: 0;
+  padding: 10px 5px;
+  box-sizing: border-box;
+  background-color: var(--mdk-color-surface);
+  border: 1px solid var(--mdk-dialog-border-color);
+
+  &__header {
+    padding: 5px;
+    padding-left: 10px;
+
+    &--underline {
+      border-bottom: 1px solid var(--mdk-dialog-border-color);
+    }
+  }
+
+  &__label {
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    text-transform: uppercase;
+    color: var(--mdk-color-white);
+  }
+
+  // Key/value list. Grid so the colon column aligns vertically and
+  // numeric values can sit right-flush with tabular monospace — the
+  // dancing-digits problem the old flex layout had.
+  &__list {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    column-gap: 24px;
+    row-gap: 0;
+    width: 100%;
+    padding: 12px 16px;
+    box-sizing: border-box;
+  }
+
+  &__item {
+    display: contents; // children participate in the parent grid
+  }
+
+  &__item-title,
+  &__item-value {
+    padding: 8px 0;
+    font-size: 13px;
+    line-height: 1.45;
+    border-top: 1px solid var(--mdk-color-white-05);
+  }
+
+  &__item-title {
+    font-weight: 500;
+    color: var(--mdk-color-text-muted);
+    white-space: nowrap;
+  }
+
+  &__item-value {
+    @include text_ellipsis;
+
+    color: var(--mdk-color-text-secondary);
+    min-width: 0;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  // First row sits flush with the body — no leading divider.
+  &__item:first-child &__item-title,
+  &__item:first-child &__item-value {
+    border-top: none;
+  }
+
+  &__empty {
+    @include flex_center;
+
+    grid-column: 1 / -1;
+    padding: 10px;
+    min-width: 176px;
+    font-size: 12px;
+    text-align: center;
+    color: var(--mdk-color-text-disabled);
+  }
+}

package/src/domain/components/pool-details-popover/USAGE.md

@@ -0,0 +1,26 @@
+# `PoolDetailsPopover`
+
+Trigger button + modal dialog revealing a `PoolDetailsCard`.
+
+<!-- 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 |
+|------|--------|----------------|---------|-------------|
+| `details` | Required | `PoolDetailItem[]` | - | Detail rows |
+| `className` | Optional | `string` | - | Additional class names |
+| `description` | Optional | `string` | - | Dialog body description |
+| `disabled` | Optional | `boolean` | `false` | Disable the trigger |
+| `title` | Optional | `string` | - | Dialog title |
+| `triggerLabel` | Optional | `string` | - | Trigger button label |
+<!-- END GENERATED: props -->
+
+## Example
+
+```tsx
+<PoolDetailsPopover triggerLabel="View pool" title="Pool details" details={details} />
+```
+
+## Notes
+
+- Uses MDK's `Dialog`; no portal wiring needed

package/src/domain/components/pool-details-popover/pool-details-popover.example.tsx

@@ -0,0 +1,14 @@
+/**
+ * Runnable example for PoolDetailsPopover.
+ */
+import { PoolDetailsPopover } from '@tetherto/mdk-react-devkit'
+
+const details = [
+  { title: 'URL', value: 'stratum+tcp://eu.example.pool:3333' },
+  { title: 'Worker', value: 'rig-01' },
+  { title: 'Fee', value: '1.5 %' },
+]
+
+export const PoolDetailsPopoverExample = () => {
+  return <PoolDetailsPopover triggerLabel="View pool" title="Pool details" details={details} />
+}

package/src/domain/components/pool-details-popover/styles.scss

@@ -0,0 +1,49 @@
+// The trigger-side wrapper. Just makes the button sit inline; the dialog
+// surface itself is portaled out of this tree by Radix, so all surface
+// styles live under `.mdk-pool-details-popover-content` below.
+.mdk-pool-details-popover {
+  display: inline-block;
+}
+
+// Portaled dialog surface, in the warm-dark confirm-dialog
+// language (Figma 10407-35765): narrow, bold title, single divider
+// under the header, flush key/value list — no nested card chrome.
+.mdk-pool-details-popover-content {
+  &.mdk-dialog__content {
+    max-width: 26rem;
+    gap: 16px;
+    padding: 20px 24px 24px;
+    background-color: rgb(var(--mdk-color-dark-black));
+  }
+
+  .mdk-dialog__header {
+    padding-bottom: 16px;
+
+    &__close {
+      background: transparent !important;
+      color: var(--mdk-color-white-60) !important;
+    }
+  }
+
+  .mdk-dialog__title {
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.4;
+    letter-spacing: -0.005em;
+    text-transform: none;
+    color: var(--mdk-color-white);
+  }
+
+  &__body {
+    margin: 0;
+    padding: 0;
+
+    // Strip the embedded card chrome — the dialog is the surface; the
+    // key/value list sits flush inside it instead of in a sub-box.
+    .mdk-pool-details-card {
+      padding: 0;
+      background: transparent;
+      border: none;
+    }
+  }
+}

package/src/domain/components/settings/add-user-modal/USAGE.md

@@ -0,0 +1,35 @@
+# `AddUserModal`
+
+Modal form for inviting a new user to the system. Captures name, email address, and role assignment. Uses React Hook Form + Zod validation; submission is async to allow the caller to integrate with any API layer.
+
+<!-- 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 |
+|------|--------|----------------|---------|-------------|
+| `onClose` | Required | `VoidFunction` | - | Called when the user dismisses the modal (cancel or backdrop) |
+| `onSubmit` | Required | `(data: { name: string; email: string; role: string }) => Promise<void>` | - | Async handler called with validated form values on submission |
+| `open` | Required | `boolean` | - | Controls whether the dialog is visible |
+| `roles` | Required | `RoleOption[]` | - | List of assignable roles rendered in the role select drop-down |
+| `isSubmitting` | Optional | `boolean` | `false` | Disables the submit button and shows a loading label while the parent is saving |
+<!-- END GENERATED: props -->
+
+## Minimal example
+
+```tsx
+<AddUserModal
+  open={isOpen}
+  onClose={() => setIsOpen(false)}
+  roles={[{ value: 'admin', label: 'Admin' }, { value: 'viewer', label: 'Viewer' }]}
+  onSubmit={async (data) => {
+    await api.createUser(data)
+    setIsOpen(false)
+  }}
+/>
+```
+
+## Notes
+
+- The form resets automatically after a successful submission
+- `roles` must be populated before opening the modal — an empty list leaves the role select empty with no options
+- Closing via the backdrop is disabled (`closeOnClickOutside={false}`) to prevent accidental dismissal mid-form

package/src/domain/components/settings/add-user-modal/add-user-modal.example.tsx

@@ -0,0 +1,25 @@
+/**
+ * Runnable example for AddUserModal.
+ */
+import { AddUserModal } from '@tetherto/mdk-react-devkit'
+
+const mockRoles = [
+  { value: 'admin', label: 'Admin' },
+  { value: 'operator', label: 'Operator' },
+  { value: 'viewer', label: 'Viewer' },
+]
+
+export const AddUserModalExample = () => (
+  <div className="mdk-example-row">
+    <AddUserModal
+      open={true}
+      onClose={() => {
+        console.warn('modal closed')
+      }}
+      roles={mockRoles}
+      onSubmit={async (data) => {
+        console.warn('create user', data)
+      }}
+    />
+  </div>
+)

package/src/domain/components/settings/add-user-modal/add-user-modal.scss

@@ -0,0 +1,9 @@
+@use '@primitives/styles/mixins' as *;
+
+.mdk-settings-add-user-modal {
+  &__form {
+    @include flex_column;
+
+    gap: 20px;
+  }
+}

package/src/domain/components/settings/change-confirmation-modal/USAGE.md

@@ -0,0 +1,38 @@
+# `ChangeConfirmationModal`
+
+Generic confirmation dialog that presents a summary of pending changes before applying them. Supports both standard (primary) and destructive (danger) confirmation actions. The body content is passed as `children`, making it flexible enough to render diffs, item lists, or plain text.
+
+<!-- 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` | - | Body content — use to describe the change being confirmed |
+| `onClose` | Required | `VoidFunction` | - | Called when the user cancels or dismisses the dialog |
+| `onConfirm` | Required | `VoidFunction` | - | Called when the user clicks the confirm button |
+| `open` | Required | `boolean` | - | Controls whether the dialog is visible |
+| `title` | Required | `string` | - | Dialog header title |
+| `confirmText` | Optional | `string` | `"Confirm"` | Label for the confirm button |
+| `destructive` | Optional | `boolean` | `false` | When `true`, the confirm button uses the danger variant |
+<!-- END GENERATED: props -->
+
+## Minimal example
+
+```tsx
+<ChangeConfirmationModal
+  open={isOpen}
+  title="Delete Site Configuration?"
+  onConfirm={handleDelete}
+  onClose={() => setIsOpen(false)}
+  confirmText="Delete"
+  destructive
+>
+  This will permanently remove the site and all associated pool assignments.
+</ChangeConfirmationModal>
+```
+
+## Notes
+
+- Closing via the backdrop is disabled to prevent accidental dismissal
+- Use `destructive={true}` any time the action is irreversible (delete, reset, revoke)
+- For non-destructive confirmations such as applying setting changes, omit `destructive` or set it to `false`

package/src/domain/components/settings/change-confirmation-modal/change-confirmation-modal.example.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react'
+import { ChangeConfirmationModal } from '@tetherto/mdk-react-devkit'
+
+export const ChangeConfirmationModalExample = () => {
+  const [open, setOpen] = useState(false)
+  return (
+    <div className="mdk-example-row">
+      <button onClick={() => setOpen(true)}>Confirm Change</button>
+      <ChangeConfirmationModal
+        open={open}
+        title="Apply Configuration Changes?"
+        onConfirm={() => {
+          console.warn('confirmed')
+          setOpen(false)
+        }}
+        onClose={() => setOpen(false)}
+        confirmText="Apply"
+      >
+        This will update pool assignments for 12 devices.
+      </ChangeConfirmationModal>
+    </div>
+  )
+}

package/src/domain/components/settings/feature-flags/USAGE.md

@@ -0,0 +1,28 @@
+# `FeatureFlagsSettings`
+
+Settings panel listing all feature flags with per-flag enable/disable toggles. Shows a save button when changes are pending.
+
+<!-- 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 |
+|------|--------|----------------|---------|-------------|
+| `featureFlags` | Required | `Record<string, boolean>` | - | Current flag values keyed by flag name |
+| `isEditingEnabled` | Required | `boolean` | - | Whether editing is permitted |
+| `onSave` | Required | `(flags: Record<string, boolean>) => void` | - | Called with updated flags when saved |
+| `className` | Optional | `string` | - | Additional CSS class |
+| `isLoading` | Optional | `boolean` | `false` | Show loading state |
+| `isSaving` | Optional | `boolean` | `false` | Show saving spinner on save button |
+<!-- END GENERATED: props -->
+
+## Minimal example
+
+```tsx
+import { FeatureFlagsSettings } from "@tetherto/mdk-react-devkit";
+
+<FeatureFlagsSettings
+  featureFlags={{ "new-dashboard": true, "beta-charts": false }}
+  isEditingEnabled={true}
+  onSave={(flags) => console.log(flags)}
+/>
+```

package/src/domain/components/settings/feature-flags/feature-flags-settings.example.tsx

@@ -0,0 +1,11 @@
+import { FeatureFlagsSettings } from '@tetherto/mdk-react-devkit'
+
+export const FeatureFlagsSettingsExample = () => (
+  <div className="mdk-example-row">
+    <FeatureFlagsSettings
+      featureFlags={{ 'new-dashboard': true, 'beta-charts': false, 'pool-manager': true }}
+      isEditingEnabled={true}
+      onSave={(flags) => console.warn('saved flags', flags)}
+    />
+  </div>
+)

package/src/domain/components/settings/feature-flags/feature-flags-settings.scss

@@ -0,0 +1,67 @@
+@use '@primitives/styles/mixins' as *;
+
+.mdk-settings-feature-flags {
+  padding: 20px;
+
+  &__add-row {
+    @include flex_align;
+
+    gap: 12px;
+    margin-bottom: 24px;
+  }
+
+  &__input {
+    flex: 1;
+  }
+
+  &__add-btn-text {
+    white-space: nowrap;
+  }
+
+  &__toggles {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+    margin-top: 16px;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: 1200px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  &__flag-item {
+    @include flex_align;
+
+    gap: 16px;
+  }
+
+  &__flag-name {
+    flex: 1;
+    word-break: break-word;
+    font-size: 14px;
+    min-width: 0;
+  }
+
+  &__flag-delete {
+    @include flex_align;
+
+    background: none;
+    border: none;
+    color: rgb(var(--mdk-color-error));
+    cursor: pointer;
+    font-size: 16px;
+    padding: 4px;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &__save {
+    margin-top: 40px;
+  }
+}

package/src/domain/components/settings/header-controls/USAGE.md

@@ -0,0 +1,27 @@
+# `HeaderControlsSettings`
+
+Settings panel for configuring the global application header, including which controls are visible, sticky behaviour, and theme defaults.
+
+<!-- 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 |
+|------|--------|----------------|---------|-------------|
+| `onReset` | Required | `VoidFunction` | - | Reset all preferences to defaults |
+| `onToggle` | Required | `(key: keyof HeaderPreferences, value: boolean) => void` | - | Called when a preference toggle changes |
+| `preferences` | Required | `HeaderPreferences` | - | Current header preference values |
+| `className` | Optional | `string` | - | Additional CSS class |
+| `isLoading` | Optional | `boolean` | `false` | Show loading state |
+<!-- END GENERATED: props -->
+
+## Minimal example
+
+```tsx
+import { HeaderControlsSettings } from "@tetherto/mdk-react-devkit";
+
+<HeaderControlsSettings
+  preferences={{ sticky: true, showTimezone: true }}
+  onToggle={(key, value) => updatePref(key, value)}
+  onReset={resetPrefs}
+/>
+```

package/src/domain/components/settings/header-controls/header-controls-settings.example.tsx

@@ -0,0 +1,11 @@
+import { HeaderControlsSettings } from '@tetherto/mdk-react-devkit'
+
+export const HeaderControlsSettingsExample = () => (
+  <div className="mdk-example-row">
+    <HeaderControlsSettings
+      preferences={{ sticky: true, showTimezone: true } as never}
+      onToggle={(key, value) => console.warn(key, value)}
+      onReset={() => console.warn('reset')}
+    />
+  </div>
+)