jouw-stem__design-system 0.1.0

package/src/components/OrderList/reorder.ts

@@ -0,0 +1,114 @@
+/**
+ * Pure helpers for OrderList reordering — move-up / move-down /
+ * move-to-top / move-to-bottom and drag-drop reorder.
+ *
+ * Extracted so each branch (boundary, multi-select, gap-aware swap) is
+ * unit-testable directly without mounting a component.
+ */
+
+export type Item = unknown
+
+/** Sort indices ascending, stripping non-finite or out-of-range entries. */
+function normaliseIndices(indices: readonly number[], length: number): number[] {
+  return indices
+    .filter(i => Number.isInteger(i) && i >= 0 && i < length)
+    .sort((a, b) => a - b)
+}
+
+/**
+ * Swap each selected item with its predecessor, in ascending order.
+ *
+ * - No-op when nothing is selected or the first selected item is at index 0
+ *   (matches the component's `isFirstSelected` guard — block instead of
+ *   sliding everything down).
+ * - Adjacent selected items move together (the swap of index 1 puts what
+ *   was at 1 into position 0, so the swap of the next selected index 2
+ *   sees the *original* item 2 against the moved-up neighbour at 1).
+ */
+export function moveUp<T extends Item>(items: readonly T[], indices: readonly number[]): T[] {
+  const result = [...items]
+  const sorted = normaliseIndices(indices, items.length)
+  if (sorted.length === 0) return result
+  if (sorted[0] === 0) return result
+  for (const i of sorted) {
+    const tmp = result[i]
+    result[i] = result[i - 1]
+    result[i - 1] = tmp
+  }
+  return result
+}
+
+/**
+ * Swap each selected item with its successor, in descending order.
+ *
+ * - No-op when nothing is selected or the last selected item is at the
+ *   final index.
+ */
+export function moveDown<T extends Item>(items: readonly T[], indices: readonly number[]): T[] {
+  const result = [...items]
+  const sorted = normaliseIndices(indices, items.length).sort((a, b) => b - a)
+  if (sorted.length === 0) return result
+  if (sorted[0] === items.length - 1) return result
+  for (const i of sorted) {
+    const tmp = result[i]
+    result[i] = result[i + 1]
+    result[i + 1] = tmp
+  }
+  return result
+}
+
+/**
+ * Lift every selected item to the top of the array, preserving their
+ * relative order.
+ *
+ * No-op when nothing is selected or every selected index is already at
+ * the top contiguous block (matches `isFirstSelected` guard).
+ */
+export function moveToTop<T extends Item>(items: readonly T[], indices: readonly number[]): T[] {
+  const sorted = normaliseIndices(indices, items.length)
+  if (sorted.length === 0) return [...items]
+  if (sorted[0] === 0) return [...items]
+
+  const selected = sorted.map(i => items[i])
+  const rest = items.filter((_, i) => !sorted.includes(i))
+  return [...selected, ...rest]
+}
+
+/**
+ * Sink every selected item to the bottom of the array, preserving their
+ * relative order.
+ */
+export function moveToBottom<T extends Item>(items: readonly T[], indices: readonly number[]): T[] {
+  const sorted = normaliseIndices(indices, items.length)
+  if (sorted.length === 0) return [...items]
+  if (sorted[sorted.length - 1] === items.length - 1) return [...items]
+
+  const selected = sorted.map(i => items[i])
+  const rest = items.filter((_, i) => !sorted.includes(i))
+  return [...rest, ...selected]
+}
+
+/**
+ * Move the item at `sourceIndex` to `targetIndex` (drag-drop reorder).
+ *
+ * No-op when source equals target, or either index is out of range.
+ */
+export function reorderByDrag<T extends Item>(
+  items: readonly T[],
+  sourceIndex: number,
+  targetIndex: number,
+): T[] {
+  const result = [...items]
+  if (
+    !Number.isInteger(sourceIndex) ||
+    !Number.isInteger(targetIndex) ||
+    sourceIndex === targetIndex ||
+    sourceIndex < 0 || sourceIndex >= items.length ||
+    targetIndex < 0 || targetIndex >= items.length
+  ) {
+    return result
+  }
+  const [item] = result.splice(sourceIndex, 1)
+  result.splice(targetIndex, 0, item)
+  return result
+}

package/src/components/OrganizationChart/OrganizationChart.matrix.ts

@@ -0,0 +1,11 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.organization-chart',
+  // Simple 3-level org chart so the layout / line-drawing chrome
+  // renders against a real shape.
+  baseQuery: {
+    value: '{"label":"CEO","children":[{"label":"VP Eng"},{"label":"VP Sales"}]}'
+  },
+  variants: []
+}

package/src/components/OrganizationChart/OrganizationChart.scss

@@ -0,0 +1,147 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: organization-chart;
+
+.#{$c} {
+  display: flex;
+  justify-content: center;
+  padding: var(--organizationChart-padding, $organizationChart-padding);
+  background-color: var(--organizationChart-background, $organizationChart-background);
+  overflow: auto;
+}
+
+.#{$c}__node-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.#{$c}__node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: var(--organizationChart-node-minWidth, $organizationChart-node-minWidth);
+  padding: var(--organizationChart-node-padding, $organizationChart-node-padding);
+  background-color: var(--organizationChart-node-background-default, $organizationChart-node-background-default);
+  border: var(--organizationChart-node-border-width, $organizationChart-node-border-width) solid var(--organizationChart-node-border-color-default, $organizationChart-node-border-color-default);
+  border-radius: var(--organizationChart-node-radius, $organizationChart-node-radius);
+  box-shadow: var(--organizationChart-node-shadow-default, $organizationChart-node-shadow-default);
+  transition: background-color var(--organizationChart-transition-duration, $organizationChart-transition-duration) ease,
+              border-color var(--organizationChart-transition-duration, $organizationChart-transition-duration) ease,
+              box-shadow var(--organizationChart-transition-duration, $organizationChart-transition-duration) ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--organizationChart-node-background-hover, $organizationChart-node-background-hover);
+    border-color: var(--organizationChart-node-border-color-hover, $organizationChart-node-border-color-hover);
+    box-shadow: var(--organizationChart-node-shadow-hover, $organizationChart-node-shadow-hover);
+  }
+
+  &--selectable {
+    cursor: pointer;
+  }
+
+  &--state-selected {
+    background-color: var(--organizationChart-node-background-selected, $organizationChart-node-background-selected);
+    border-color: var(--organizationChart-node-border-color-selected, $organizationChart-node-border-color-selected);
+  }
+}
+
+.#{$c}__node-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--organizationChart-nodeContent-gap, $organizationChart-nodeContent-gap);
+  text-align: center;
+}
+
+.#{$c}__node-title {
+  font-size: var(--organizationChart-nodeContent-title-fontSize, $organizationChart-nodeContent-title-fontSize);
+  font-weight: var(--organizationChart-nodeContent-title-fontWeight, $organizationChart-nodeContent-title-fontWeight);
+  color: var(--organizationChart-nodeContent-title-color, $organizationChart-nodeContent-title-color);
+}
+
+.#{$c}__node-subtitle {
+  font-size: var(--organizationChart-nodeContent-subtitle-fontSize, $organizationChart-nodeContent-subtitle-fontSize);
+  font-weight: var(--organizationChart-nodeContent-subtitle-fontWeight, $organizationChart-nodeContent-subtitle-fontWeight);
+  color: var(--organizationChart-nodeContent-subtitle-color, $organizationChart-nodeContent-subtitle-color);
+}
+
+.#{$c}__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--organizationChart-toggleButton-size, $organizationChart-toggleButton-size);
+  height: var(--organizationChart-toggleButton-size, $organizationChart-toggleButton-size);
+  margin-top: var(--inset-xs, $inset-xs);
+  padding: 0;
+  border: 1px solid var(--organizationChart-toggleButton-borderColor, $organizationChart-toggleButton-borderColor);
+  background-color: var(--organizationChart-toggleButton-background, $organizationChart-toggleButton-background);
+  border-radius: var(--organizationChart-toggleButton-radius, $organizationChart-toggleButton-radius);
+  cursor: pointer;
+  transition: background-color var(--organizationChart-transition-duration, $organizationChart-transition-duration) ease;
+
+  svg {
+    width: 12px;
+    height: 12px;
+    color: var(--organizationChart-toggleButton-color, $organizationChart-toggleButton-color);
+  }
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--surface-muted, $surface-muted);
+  }
+}
+
+.#{$c}__children {
+  display: flex;
+  justify-content: center;
+  gap: var(--organizationChart-spacing-horizontal, $organizationChart-spacing-horizontal);
+  padding-top: var(--organizationChart-spacing-vertical, $organizationChart-spacing-vertical);
+  position: relative;
+
+  // Vertical connector from parent to horizontal line
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: var(--organizationChart-connector-width, $organizationChart-connector-width);
+    height: calc(var(--organizationChart-spacing-vertical, $organizationChart-spacing-vertical) / 2);
+    background-color: var(--organizationChart-connector-color, $organizationChart-connector-color);
+    transform: translateX(-50%);
+  }
+
+  // Horizontal connector line
+  &::after {
+    content: "";
+    position: absolute;
+    top: calc(var(--organizationChart-spacing-vertical, $organizationChart-spacing-vertical) / 2);
+    left: calc(50% / var(--organizationChart-children-count, 1));
+    right: calc(50% / var(--organizationChart-children-count, 1));
+    height: var(--organizationChart-connector-width, $organizationChart-connector-width);
+    background-color: var(--organizationChart-connector-color, $organizationChart-connector-color);
+  }
+}
+
+// Child nodes vertical connectors
+.#{$c}__children > .#{$c}__node-wrapper {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: calc(-1 * var(--organizationChart-spacing-vertical, $organizationChart-spacing-vertical) / 2);
+    left: 50%;
+    width: var(--organizationChart-connector-width, $organizationChart-connector-width);
+    height: calc(var(--organizationChart-spacing-vertical, $organizationChart-spacing-vertical) / 2);
+    background-color: var(--organizationChart-connector-color, $organizationChart-connector-color);
+    transform: translateX(-50%);
+  }
+}
+
+// Single child - no horizontal line needed
+.#{$c}__children:has(> .#{$c}__node-wrapper:only-child)::after {
+  display: none;
+}

package/src/components/OrganizationChart/OrganizationChart.tokens.theme-dark.json

@@ -0,0 +1,188 @@
+{
+  "organizationChart": {
+    "background": {
+      "value": "transparent",
+      "type": "color",
+      "description": "Chart container background"
+    },
+    "padding": {
+      "value": "{inset.l}",
+      "type": "dimension",
+      "description": "Chart container padding"
+    },
+    "node": {
+      "background": {
+        "default": {
+          "value": "{surface.panel}",
+          "type": "color",
+          "description": "Node default background"
+        },
+        "hover": {
+          "value": "{surface.elevated}",
+          "type": "color",
+          "description": "Node hover background"
+        },
+        "selected": {
+          "value": "{surface.highlight}",
+          "type": "color",
+          "description": "Node selected background"
+        }
+      },
+      "border": {
+        "width": {
+          "value": "1px",
+          "type": "dimension",
+          "description": "Node border width"
+        },
+        "color": {
+          "default": {
+            "value": "{border.subtle}",
+            "type": "color",
+            "description": "Node default border color"
+          },
+          "hover": {
+            "value": "{border.default}",
+            "type": "color",
+            "description": "Node hover border color"
+          },
+          "selected": {
+            "value": "{brand.primary}",
+            "type": "color",
+            "description": "Node selected border color"
+          }
+        }
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Node border radius"
+      },
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Node content padding"
+      },
+      "shadow": {
+        "default": {
+          "value": "{shadow.xs}",
+          "type": "shadow",
+          "description": "Node default shadow"
+        },
+        "hover": {
+          "value": "{shadow.s}",
+          "type": "shadow",
+          "description": "Node hover shadow"
+        }
+      },
+      "minWidth": {
+        "value": "160px",
+        "type": "dimension",
+        "description": "Node minimum width"
+      }
+    },
+    "nodeContent": {
+      "gap": {
+        "value": "{stack.2xs}",
+        "type": "dimension",
+        "description": "Gap between node content elements"
+      },
+      "title": {
+        "color": {
+          "value": "{text.heading}",
+          "type": "color",
+          "description": "Node title color"
+        },
+        "fontSize": {
+          "value": "14px",
+          "type": "dimension",
+          "description": "Node title font size"
+        },
+        "fontWeight": {
+          "value": "600",
+          "type": "fontWeight",
+          "description": "Node title font weight"
+        }
+      },
+      "subtitle": {
+        "color": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Node subtitle color"
+        },
+        "fontSize": {
+          "value": "12px",
+          "type": "dimension",
+          "description": "Node subtitle font size"
+        },
+        "fontWeight": {
+          "value": "400",
+          "type": "fontWeight",
+          "description": "Node subtitle font weight"
+        }
+      }
+    },
+    "connector": {
+      "color": {
+        "value": "{border.default}",
+        "type": "color",
+        "description": "Connector line color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Connector line width"
+      },
+      "style": {
+        "value": "solid",
+        "type": "string",
+        "description": "Connector line style"
+      }
+    },
+    "spacing": {
+      "horizontal": {
+        "value": "{stack.xl}",
+        "type": "dimension",
+        "description": "Horizontal spacing between nodes"
+      },
+      "vertical": {
+        "value": "{stack.l}",
+        "type": "dimension",
+        "description": "Vertical spacing between levels"
+      }
+    },
+    "toggleButton": {
+      "size": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Toggle button size"
+      },
+      "background": {
+        "value": "{surface.panel}",
+        "type": "color",
+        "description": "Toggle button background"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Toggle button border color"
+      },
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Toggle button icon color"
+      },
+      "radius": {
+        "value": "9999px",
+        "type": "dimension",
+        "description": "Toggle button border radius"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}

package/src/components/OrganizationChart/OrganizationChart.tokens.theme-high-contrast-solarized-dark.json

@@ -0,0 +1,188 @@
+{
+  "organizationChart": {
+    "background": {
+      "value": "transparent",
+      "type": "color",
+      "description": "Chart container background"
+    },
+    "padding": {
+      "value": "{inset.l}",
+      "type": "dimension",
+      "description": "Chart container padding"
+    },
+    "node": {
+      "background": {
+        "default": {
+          "value": "{surface.panel}",
+          "type": "color",
+          "description": "Node default background"
+        },
+        "hover": {
+          "value": "{surface.elevated}",
+          "type": "color",
+          "description": "Node hover background"
+        },
+        "selected": {
+          "value": "{surface.highlight}",
+          "type": "color",
+          "description": "Node selected background"
+        }
+      },
+      "border": {
+        "width": {
+          "value": "1px",
+          "type": "dimension",
+          "description": "Node border width"
+        },
+        "color": {
+          "default": {
+            "value": "{border.subtle}",
+            "type": "color",
+            "description": "Node default border color"
+          },
+          "hover": {
+            "value": "{border.default}",
+            "type": "color",
+            "description": "Node hover border color"
+          },
+          "selected": {
+            "value": "{brand.primary}",
+            "type": "color",
+            "description": "Node selected border color"
+          }
+        }
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Node border radius"
+      },
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Node content padding"
+      },
+      "shadow": {
+        "default": {
+          "value": "{shadow.xs}",
+          "type": "shadow",
+          "description": "Node default shadow"
+        },
+        "hover": {
+          "value": "{shadow.s}",
+          "type": "shadow",
+          "description": "Node hover shadow"
+        }
+      },
+      "minWidth": {
+        "value": "160px",
+        "type": "dimension",
+        "description": "Node minimum width"
+      }
+    },
+    "nodeContent": {
+      "gap": {
+        "value": "{stack.2xs}",
+        "type": "dimension",
+        "description": "Gap between node content elements"
+      },
+      "title": {
+        "color": {
+          "value": "{text.heading}",
+          "type": "color",
+          "description": "Node title color"
+        },
+        "fontSize": {
+          "value": "14px",
+          "type": "dimension",
+          "description": "Node title font size"
+        },
+        "fontWeight": {
+          "value": "600",
+          "type": "fontWeight",
+          "description": "Node title font weight"
+        }
+      },
+      "subtitle": {
+        "color": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Node subtitle color"
+        },
+        "fontSize": {
+          "value": "12px",
+          "type": "dimension",
+          "description": "Node subtitle font size"
+        },
+        "fontWeight": {
+          "value": "400",
+          "type": "fontWeight",
+          "description": "Node subtitle font weight"
+        }
+      }
+    },
+    "connector": {
+      "color": {
+        "value": "{border.default}",
+        "type": "color",
+        "description": "Connector line color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Connector line width"
+      },
+      "style": {
+        "value": "solid",
+        "type": "string",
+        "description": "Connector line style"
+      }
+    },
+    "spacing": {
+      "horizontal": {
+        "value": "{stack.xl}",
+        "type": "dimension",
+        "description": "Horizontal spacing between nodes"
+      },
+      "vertical": {
+        "value": "{stack.l}",
+        "type": "dimension",
+        "description": "Vertical spacing between levels"
+      }
+    },
+    "toggleButton": {
+      "size": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Toggle button size"
+      },
+      "background": {
+        "value": "{surface.panel}",
+        "type": "color",
+        "description": "Toggle button background"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Toggle button border color"
+      },
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Toggle button icon color"
+      },
+      "radius": {
+        "value": "9999px",
+        "type": "dimension",
+        "description": "Toggle button border radius"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}