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

package/src/primitives/components/data-table/styles.scss

@@ -0,0 +1,226 @@
+@use '../../styles/mixins' as *;
+$_prefix: mdk-table;
+
+.#{$_prefix} {
+  margin: 10px 0;
+
+  &-content-wrapper {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+
+    .#{$_prefix}__empty-body-wrapper {
+      @include flex_center;
+      border: 1px solid var(--mdk-table-border);
+      border-top: none;
+
+      &.#{$_prefix}__empty-body--hidden {
+        min-height: 200px;
+      }
+
+      .#{$_prefix}__empty-body {
+        @include flex_column_align_center;
+
+        gap: 10px;
+        padding: 30px;
+        color: var(--mdk-table-text-secondary);
+      }
+    }
+
+    .#{$_prefix}__loader-overlay {
+      @include flex_center;
+
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: var(--mdk-table-loader-overlay-bg);
+    }
+  }
+
+  &__content-section {
+    overflow-x: scroll;
+    border: 1px solid var(--mdk-table-border);
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+
+    &::-webkit-scrollbar-corner {
+      display: none;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--mdk-color-primary);
+      border-radius: 0;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: var(--mdk-color-primary-hover);
+    }
+
+    &--empty {
+      @include flex_column;
+
+      .#{$_prefix}__empty-body {
+        align-self: center;
+      }
+    }
+
+    &--no-overflow {
+      overflow-x: hidden;
+    }
+
+    &--bordered {
+      border: 1px solid var(--mdk-table-border);
+    }
+
+    .#{$_prefix}__element {
+      font-family: var(--font-mono);
+      text-align: left;
+      border-collapse: collapse;
+
+      &--width-full {
+        width: 100%;
+      }
+
+      &--bordered {
+        border-collapse: separate;
+        border-spacing: 0;
+
+        thead tr {
+          th {
+            border-right: 1px solid var(--mdk-table-border);
+            border-bottom: 1px solid var(--mdk-table-border);
+
+            &:last-child {
+              border-right: none;
+            }
+          }
+        }
+
+        tbody {
+          .#{$_prefix}__body-row {
+            td {
+              border-right: 1px solid var(--mdk-table-border);
+
+              &:last-child {
+                border-right: none;
+              }
+            }
+          }
+        }
+      }
+
+      thead tr {
+        border-bottom: 1px solid var(--mdk-table-border);
+
+        th {
+          padding: 10px 16px;
+          color: var(--mdk-table-text-primary);
+          background-color: var(--mdk-table-header-bg);
+          border-spacing: 0;
+          font-size: 12px;
+          height: 50px;
+
+          position: sticky;
+          top: 0;
+
+          &.sortable {
+            cursor: pointer;
+            user-select: none;
+
+            &:hover {
+              background-color: var(--mdk-table-header-hover-bg);
+            }
+          }
+
+          &.sorted {
+            background-color: var(--mdk-table-header-sorted-bg, var(--mdk-color-white-transparent));
+          }
+
+          &.mdk-table__cell--align-center .#{$_prefix}-header-content {
+            justify-content: center;
+          }
+
+          &.mdk-table__cell--align-right .#{$_prefix}-header-content {
+            justify-content: flex-end;
+          }
+
+          .#{$_prefix}-header {
+            &-content {
+              @include flex_align_between;
+
+              .#{$_prefix}-header-subject {
+                &-checkbox {
+                  line-height: 0;
+                }
+              }
+
+              .#{$_prefix}-header-sort {
+                svg {
+                  color: var(--mdk-color-primary);
+                }
+              }
+            }
+          }
+        }
+      }
+
+      tbody {
+        .#{$_prefix}__body-row {
+          &:hover {
+            background-color: var(--mdk-table-body-hover-bg);
+          }
+
+          &--skeleton:hover {
+            background-color: transparent;
+          }
+
+          &--clickable {
+            cursor: pointer;
+          }
+
+          &--selected {
+            background-color: var(--mdk-table-selected-row-bg);
+
+            &:hover {
+              background-color: var(--mdk-table-selected-row-hover-bg);
+            }
+          }
+
+          td {
+            padding: 16px;
+            margin: 0;
+            color: var(--mdk-color-white);
+            border-spacing: 0;
+            font-size: 12px;
+            border-bottom: 1px solid var(--mdk-table-row-border);
+
+            &.mdk-table__cell--align-center {
+              text-align: center;
+            }
+
+            &.mdk-table__cell--align-right {
+              text-align: right;
+            }
+
+            .#{$_prefix}-body__row-selection {
+              line-height: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &__pagination-section {
+    padding-top: 10px;
+  }
+}

package/src/primitives/components/date-picker/USAGE.md

@@ -0,0 +1,64 @@
+# `DatePicker` & `DateRangePicker`
+
+Single-date and range-date pickers built on `react-day-picker`. The range
+picker includes presets and a modal-style popover with Clear / Apply actions.
+
+<!-- BEGIN GENERATED: props — do not edit; npm run generate:usage-proptables (source: component JSDoc/types via registry.json) -->
+## Props
+
+### `DatePicker` props
+
+| Prop | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `calendarClassName` | Optional | `string` | - | Custom className for the calendar |
+| `dateFormat` | Optional | `string` | `"MM/dd/yyyy"` | Date format for display |
+| `disabled` | Optional | `(boolean & (Matcher \| Matcher[]))` | `false` | Whether the picker is disabled |
+| `onSelect` | Optional | `((date: Date \| undefined) => void)` | - | Callback when date changes |
+| `placeholder` | Optional | `string` | `"Pick a date"` | Placeholder text when no date is selected |
+| `selected` | Optional | `Date` | - | Currently selected date |
+| `triggerClassName` | Optional | `string` | - | Custom className for the trigger button |
+
+### `DateRangePicker` props
+
+| Prop | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `allowFutureDates` | Optional | `boolean` | `false` | Whether to allow future dates |
+| `calendarClassName` | Optional | `string` | - | Custom className for the calendar |
+| `dateFormat` | Optional | `string` | `"MM/dd/yyyy"` | Date format for display |
+| `disabled` | Optional | `(boolean & (Matcher \| Matcher[]))` | `false` | Whether the picker is disabled |
+| `modalClassName` | Optional | `string` | - | Custom className for the modal |
+| `onSelect` | Optional | `((range: DateRange \| undefined) => void)` | - | Callback when date range changes |
+| `placeholder` | Optional | `string` | `"Pick a date range"` | Placeholder text when no range is selected |
+| `presets` | Optional | `PresetItem[]` | - | Custom preset items |
+| `selected` | Optional | `DateRange` | - | Selected date range |
+| `showPresets` | Optional | `boolean` | `true` | Whether to show preset buttons |
+| `triggerClassName` | Optional | `string` | - | Custom className for the trigger button |
+
+### `DateRange`
+
+| Field | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `from` | Required | `Date` | - | Range start; `undefined` means nothing is selected and the placeholder shows |
+| `to` | Optional | `Date` | - | Range end; while unset the trigger shows `from` alone and Apply stays disabled |
+
+### `PresetItem`
+
+| Field | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `label` | Required | `string` | - | Preset button text; also used as the React key, so keep it unique |
+| `value` | Required | `DateRange` | - | Range applied to the draft on click; needs both `from` and `to`. Highlighted when the draft is within 5 minutes of it at both ends |
+<!-- END GENERATED: props -->
+
+## Example
+
+```tsx
+<DatePicker selected={date} onSelect={setDate} />
+<DateRangePicker selected={range} onSelect={setRange} showPresets />
+```
+
+## Data contracts
+
+```ts
+type DateRange = { from: Date | undefined; to?: Date | undefined };
+type PresetItem = { label: string; value: DateRange };
+```

package/src/primitives/components/date-picker/date-picker.example.tsx

@@ -0,0 +1,18 @@
+/**
+ * Runnable example for DatePicker and DateRangePicker.
+ */
+import { useState } from 'react'
+import type { DateRange } from '@tetherto/mdk-react-devkit'
+import { DatePicker, DateRangePicker } from '@tetherto/mdk-react-devkit'
+
+export const DatePickerExample = () => {
+  const [date, setDate] = useState<Date>()
+  const [range, setRange] = useState<DateRange>()
+
+  return (
+    <div className="mdk-example-row">
+      <DatePicker selected={date} onSelect={setDate} />
+      <DateRangePicker selected={range} onSelect={setRange} showPresets />
+    </div>
+  )
+}