@sproutsocial/seeds-react-datepicker 1.0.51 → 1.1.0

package/src/__tests__/DatepickerRouting.test.tsx

@@ -0,0 +1,501 @@
+import fs from "fs";
+import path from "path";
+import React from "react";
+import moment, { type Moment } from "moment";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import {
+  SingleDatePicker,
+  StatefulSingleDatePicker,
+} from "../SingleDatePicker";
+import { StatefulDateRangePicker } from "../DateRangePicker";
+import { theme } from "@sproutsocial/seeds-react-theme";
+
+/**
+ * Routing and static-CSS tests for the Datepicker Tailwind hybrid.
+ *
+ * Two pieces were styled by this package and both move to static CSS:
+ *
+ *   1. the day cell, which becomes semantic `seeds-datepicker-day*` classes;
+ *   2. the react-dates global overrides, which become an UNLAYERED block in
+ *      datepicker.css (see the file's own comment for why unlayered).
+ *
+ * The audit found no per-instance routing signal for either piece — the public
+ * prop types carry no styled-system props, and the react-dates controllers drop
+ * `className`, so a `styled()` extension has nothing to preserve. The only
+ * consumer-visible branch is `renderDayContents`, which replaces the day cell
+ * outright. So "routing" here is structural, and these tests pin it.
+ *
+ * jest mocks CSS imports and jsdom implements neither `@layer` precedence nor
+ * cross-stylesheet insertion order, so the static rules are asserted against
+ * the CSS source text. Cascade behavior needs a real browser.
+ */
+
+const FIXED_NOW = new Date("2026-06-15T12:00:00Z");
+const CSS_PATH = path.join(__dirname, "..", "datepicker.css");
+// Splits the file into its unlayered half and its layered half. Matched with the
+// brace so the prose in the file header does not split it in the wrong place.
+const LAYER_OPEN = "@layer components {";
+
+const noop = () => {};
+
+const PACKAGE_JSON_PATH = path.join(__dirname, "..", "..", "package.json");
+
+const readCss = () => fs.readFileSync(CSS_PATH, "utf-8");
+const stripComments = (css: string) => css.replace(/\/\*[\s\S]*?\*\//g, "");
+const unlayeredHalf = () => stripComments(readCss().split(LAYER_OPEN)[0] ?? "");
+const layeredHalf = () => stripComments(readCss().split(LAYER_OPEN)[1] ?? "");
+
+/** Splits a flat CSS string into selector -> { property: value }. */
+const parseRules = (css: string) => {
+  const rules = new Map<string, Map<string, string>>();
+  for (const block of css.split("}")) {
+    const brace = block.indexOf("{");
+    if (brace === -1) continue;
+    const declarations = new Map<string, string>();
+    for (const declaration of block.slice(brace + 1).split(";")) {
+      const colon = declaration.indexOf(":");
+      if (colon === -1) continue;
+      declarations.set(
+        declaration.slice(0, colon).trim(),
+        declaration.slice(colon + 1).trim()
+      );
+    }
+    for (const selector of block.slice(0, brace).split(",")) {
+      const trimmed = selector.trim();
+      if (trimmed) rules.set(trimmed, declarations);
+    }
+  }
+  return rules;
+};
+
+/** The light-mode `:root` custom properties shipped by seeds-react-theme. */
+const themeCustomProperties = (() => {
+  const themeCss = fs.readFileSync(
+    require.resolve("@sproutsocial/seeds-react-theme/css/theme-all"),
+    "utf-8"
+  );
+  const open = themeCss.indexOf(":root {");
+  const body = themeCss.slice(
+    open + ":root {".length,
+    themeCss.indexOf("}", open)
+  );
+  const properties = new Map<string, string>();
+  for (const declaration of body.split(";")) {
+    const colon = declaration.indexOf(":");
+    if (colon === -1) continue;
+    const name = declaration.slice(0, colon).trim();
+    if (name.startsWith("--")) {
+      properties.set(name, declaration.slice(colon + 1).trim());
+    }
+  }
+  return properties;
+})();
+
+const resolveVars = (value: string) =>
+  value
+    .replace(/var\((--[a-z0-9-]+)\)/g, (_match, name) => {
+      const resolved = themeCustomProperties.get(name);
+      if (resolved === undefined) {
+        throw new Error(`${name} is not defined in theme-all.css`);
+      }
+      return resolved;
+    })
+    .toLowerCase();
+
+const readInjectedStyles = () =>
+  Array.from(document.querySelectorAll("style"))
+    .map((tag) => tag.textContent ?? "")
+    .join("\n");
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(FIXED_NOW);
+  moment.locale("en");
+});
+
+describe("day cell routing", () => {
+  it("renders the static day cell by default", () => {
+    render(<SingleDatePicker date={moment()} onDateChange={noop} />);
+    const cell = screen.getByLabelText("Wednesday, June 17, 2026");
+    const day = cell.firstElementChild as HTMLElement;
+    expect(day).toHaveClass("seeds-datepicker-day");
+    expect(day.className).not.toMatch(/\bsc-/);
+  });
+
+  it("marks a selected day and both of its pill edges", () => {
+    render(
+      <SingleDatePicker date={moment("2026-06-17")} onDateChange={noop} />
+    );
+    const day = screen.getByLabelText("Selected. Wednesday, June 17, 2026")
+      .firstElementChild as HTMLElement;
+    expect(day).toHaveClass("seeds-datepicker-day-selected");
+    expect(day).toHaveClass("seeds-datepicker-day-pill-left");
+    expect(day).toHaveClass("seeds-datepicker-day-pill-right");
+  });
+
+  it("marks the interior of a selected span without pill edges", () => {
+    render(
+      <StatefulDateRangePicker
+        startDate={moment("2026-06-15")}
+        endDate={moment("2026-06-19")}
+      />
+    );
+    const day = screen.getByLabelText("Selected. Wednesday, June 17, 2026")
+      .firstElementChild as HTMLElement;
+    expect(day).toHaveClass("seeds-datepicker-day-selected");
+    expect(day).not.toHaveClass("seeds-datepicker-day-pill-left");
+    expect(day).not.toHaveClass("seeds-datepicker-day-pill-right");
+  });
+
+  it("marks an out-of-range day", () => {
+    render(
+      <StatefulSingleDatePicker
+        date={moment()}
+        isOutsideRange={(date: Moment) =>
+          date.isSame(moment("2026-06-17"), "day")
+        }
+      />
+    );
+    const day = screen.getByLabelText("Not available. Wednesday, June 17, 2026")
+      .firstElementChild as HTMLElement;
+    expect(day).toHaveClass("seeds-datepicker-day-out-of-range");
+  });
+
+  it("is bypassed entirely by a consumer renderDayContents", () => {
+    render(
+      <StatefulSingleDatePicker
+        date={moment()}
+        renderDayContents={(day: Moment) => <b>{`d${day.format("D")}`}</b>}
+      />
+    );
+    const cell = screen.getByLabelText("Wednesday, June 17, 2026");
+    expect(cell.querySelector(".seeds-datepicker-day")).toBeNull();
+    expect(cell.querySelector("b")).toHaveTextContent("d17");
+  });
+});
+
+describe("runtime CSS-in-JS", () => {
+  /**
+   * On the legacy implementation, mounting a picker injects two styled-components
+   * rules for the day cell (Box's base rule plus CalendarDay's extension). The
+   * static path must inject none.
+   *
+   * This does NOT speak to the react-dates global overrides: `createGlobalStyle`
+   * output is not observable from jsdom under jest-styled-components, so their
+   * removal is verified from the CSS source below and, for cascade behavior,
+   * only in a real browser.
+   */
+  it("injects no styled-components rules while a picker is mounted", () => {
+    render(
+      <SingleDatePicker date={moment("2026-06-17")} onDateChange={noop} />
+    );
+    expect(readInjectedStyles().trim()).toBe("");
+  });
+});
+
+describe("datepicker.css delivery", () => {
+  const css = readCss;
+
+  /**
+   * Two delivery mechanisms, each of which can break silently:
+   * racine/buildComponents.ts globs `src/*.css` NON-recursively (so the file
+   * must sit at the src root, not under a component folder), and the package
+   * build has to copy it into dist itself — tsup does not.
+   */
+  it("ships the stylesheet where both racine and the package build expect it", () => {
+    expect(fs.existsSync(CSS_PATH)).toBe(true);
+
+    const { scripts } = JSON.parse(fs.readFileSync(PACKAGE_JSON_PATH, "utf-8"));
+    const copyStep = "cp src/datepicker.css dist/datepicker.css";
+    expect(scripts.build).toContain(copyStep);
+    expect(scripts["build:debug"]).toContain(copyStep);
+  });
+
+  it("puts the semantic day classes in the components layer", () => {
+    const layered = layeredHalf();
+    for (const selector of [
+      ".seeds-datepicker-day",
+      ".seeds-datepicker-day-selected",
+      ".seeds-datepicker-day-pill-left",
+      ".seeds-datepicker-day-pill-right",
+      ".seeds-datepicker-day-hovered",
+      ".seeds-datepicker-day-out-of-range",
+    ]) {
+      expect(layered).toContain(`${selector} {`);
+    }
+  });
+
+  /**
+   * Guards the `&`-flattening of the old createGlobalStyle block. A mis-expanded
+   * nested selector produces no error anywhere else in this suite, because jsdom
+   * never applies these rules.
+   */
+  it("keeps the react-dates overrides unlayered and fully expanded", () => {
+    const unlayered = unlayeredHalf();
+    for (const selector of [
+      ".DayPicker {",
+      ".DayPicker .DayPicker_transitionContainer {",
+      ".DayPicker .DayPicker_weekHeader {",
+      ".DayPicker .DayPicker_weekHeader_li {",
+      ".DayPicker.DayPicker__horizontal {",
+      ".DayPicker .CalendarDay {",
+      ".DayPicker .CalendarDay:hover",
+      ".DayPicker .CalendarDay__selected",
+      ".DayPicker .CalendarDay__selected_span",
+      ".DayPicker .CalendarDay__default",
+      ".DayPicker .CalendarMonth {",
+      ".DayPicker .CalendarMonth_caption {",
+      ".DayPicker .CalendarMonth_table {",
+      ".DayPicker .CalendarMonthGrid {",
+      ".DayPicker .DayPickerNavigation_button__horizontal {",
+    ]) {
+      expect(unlayered).toContain(selector);
+    }
+    // A stray `&` means a nested selector was copied rather than flattened.
+    expect(unlayered).not.toContain("&");
+  });
+
+  /**
+   * `width: 230px` on the week header assumed content-box and broke under
+   * Tailwind's preflight, wrapping Saturday onto a second line. It and the two
+   * rules that compensated for it were deleted so the header shrink-wraps to
+   * the month and tracks `daySize`. Reinstating any of them re-breaks it.
+   */
+  it("does not pin the week header width or its compensating rules", () => {
+    // Checked across the WHOLE stylesheet, not just the unlayered half, so a
+    // reinstatement cannot hide by being added in the wrong block. Comments are
+    // stripped because the rule above this one explains the deletion by name.
+    const rules = stripComments(readCss());
+    expect(rules).not.toContain("width: 230px");
+    expect(rules).not.toContain("DayPicker_weekHeader_ul");
+    expect(rules).not.toContain("DayPicker_weekHeaders__horizontal");
+    // The rest of the week-header rule stays.
+    expect(unlayeredHalf()).toContain(".DayPicker .DayPicker_weekHeader {");
+    expect(unlayeredHalf()).toContain("top: 26px");
+  });
+
+  it("preserves the react-dates layout magic numbers verbatim", () => {
+    const unlayered = unlayeredHalf();
+    for (const declaration of [
+      "height: 228px !important",
+      "top: 26px",
+      "line-height: 21.333px",
+      "padding: 0 15px",
+      "left: 22px",
+      "right: 22px",
+      "top: -4px",
+      "padding: 7px 8px",
+    ]) {
+      expect(unlayered).toContain(declaration);
+    }
+  });
+
+  /**
+   * The legacy styled day cell emitted NO declaration when a pill edge was
+   * absent (see the contract test of the same name). Writing a `0` fallback
+   * would collapse the selection's rounded ends into square ones.
+   */
+  it("never writes a zero fallback for an absent pill edge", () => {
+    const layered = layeredHalf();
+    expect(layered).not.toMatch(/margin-(left|right):\s*0\s*;/);
+    expect(layered).not.toMatch(/border-[a-z]+-[a-z]+-radius:\s*0\s*;/);
+  });
+
+  it("reads every themed value from a CSS custom property", () => {
+    // The legacy implementation read the runtime theme, so no palette value may
+    // be hardcoded. `#fff`-style literals would break dark mode.
+    expect(css()).not.toMatch(/#[0-9a-fA-F]{3,8}\b/);
+
+    // ...and every property referenced must actually exist in theme-all.css.
+    // The value assertions further down only cover the layered day-cell rules,
+    // so without this a typo in the unlayered overrides would ship silently.
+    const references = stripComments(css()).match(/var\(--[a-z0-9-]+\)/g) ?? [];
+    expect(references.length).toBeGreaterThanOrEqual(18);
+    for (const reference of references) {
+      expect(() => resolveVars(reference)).not.toThrow();
+    }
+  });
+});
+
+/**
+ * F3 — the react-dates overrides target THIRD-PARTY DOM.
+ *
+ * Every other test in this file checks that the selector TEXT is present. None
+ * of them would notice if react-dates renamed a class: the peer range is
+ * `^21.8.0`, these are react-dates' private BEM names, and a minor bump could
+ * silently orphan an override while the whole suite stays green. So render a
+ * real picker and require each selector to match something.
+ */
+describe("react-dates override selectors match real DOM", () => {
+  const renderFullCalendar = () =>
+    render(
+      // A range picker with a selection exercises every selector the overrides
+      // use: two months, nav buttons, week headers, day cells, and the
+      // __selected / __selected_span states.
+      <StatefulDateRangePicker
+        startDate={moment("2026-06-15")}
+        endDate={moment("2026-06-19")}
+      />
+    );
+
+  const overrideSelectors = () => [...parseRules(unlayeredHalf()).keys()];
+
+  it("matches at least one node for every override selector", () => {
+    const { container } = renderFullCalendar();
+    const selectors = overrideSelectors();
+
+    // Guards the filter below against silently passing on an empty list.
+    expect(selectors.length).toBeGreaterThanOrEqual(20);
+
+    // :hover and :active can never match in a static render; assert the rest of
+    // the selector, which is what carries the class names at risk of renaming.
+    const unmatched = selectors.filter((selector) => {
+      const structural = selector.replace(/:(hover|active|focus)\b/g, "");
+      return container.querySelectorAll(structural).length === 0;
+    });
+
+    expect(unmatched).toEqual([]);
+  });
+});
+
+/**
+ * F4 — bind the declaration VALUES to the theme.
+ *
+ * dayModifiers.ts stops the two paths disagreeing about WHICH state a day is
+ * in; nothing yet stops datepicker.css disagreeing about what a state LOOKS
+ * like. Someone could swap --color-container-bg-selected for --color-text-body
+ * and every other test would still pass.
+ *
+ * Resolving the custom properties through theme-all.css and comparing against
+ * the same theme JS values the legacy styled cell read gives styled == CSS
+ * transitively, via the contract tests that already pin styled == theme JS.
+ * Deliberately does NOT diff against the styled component, so it outlives
+ * styles.ts in Phase B.
+ */
+describe("day cell CSS values match the theme the legacy cell read", () => {
+  /**
+   * [selector, property, exact declaration text, value the legacy cell read]
+   *
+   * Both halves are load-bearing. The declaration text pins WHICH custom
+   * property is used, because two tokens can share a value in one theme and
+   * diverge in the other — --color-container-bg-selected and --color-text-body
+   * are both #364141 in light mode but differ in dark, so a value-only check
+   * would wave that swap through. The theme value then proves the token is
+   * semantically the one the styled cell read.
+   */
+  const expectations: [string, string, string, string][] = [
+    // Box's baseline, which the legacy day cell inherited from styled(Box).
+    [".seeds-datepicker-day", "box-sizing", "border-box", "border-box"],
+    [
+      ".seeds-datepicker-day",
+      "font-family",
+      "var(--font-family)",
+      theme.fontFamily,
+    ],
+    [
+      ".seeds-datepicker-day-selected",
+      "background-color",
+      "var(--color-container-bg-selected)",
+      theme.colors.container.background.selected,
+    ],
+    [
+      ".seeds-datepicker-day-selected",
+      "color",
+      "var(--color-text-inverse)",
+      theme.colors.text.inverse,
+    ],
+    [
+      ".seeds-datepicker-day-pill-left",
+      "margin-left",
+      "var(--space-200)",
+      theme.space[200],
+    ],
+    [
+      ".seeds-datepicker-day-pill-left",
+      "border-top-left-radius",
+      "var(--radius-pill)",
+      theme.radii.pill,
+    ],
+    [
+      ".seeds-datepicker-day-pill-left",
+      "border-bottom-left-radius",
+      "var(--radius-pill)",
+      theme.radii.pill,
+    ],
+    [
+      ".seeds-datepicker-day-pill-right",
+      "margin-right",
+      "var(--space-200)",
+      theme.space[200],
+    ],
+    [
+      ".seeds-datepicker-day-pill-right",
+      "border-top-right-radius",
+      "var(--radius-pill)",
+      theme.radii.pill,
+    ],
+    [
+      ".seeds-datepicker-day-pill-right",
+      "border-bottom-right-radius",
+      "var(--radius-pill)",
+      theme.radii.pill,
+    ],
+    [
+      ".seeds-datepicker-day-hovered",
+      "margin",
+      "0 var(--space-200)",
+      `0 ${theme.space[200]}`,
+    ],
+    [
+      ".seeds-datepicker-day-hovered",
+      "border-radius",
+      "var(--radius-pill)",
+      theme.radii.pill,
+    ],
+    [
+      ".seeds-datepicker-day-hovered",
+      "border",
+      "1px solid var(--color-container-border-selected)",
+      `1px solid ${theme.colors.container.border.selected}`,
+    ],
+    [
+      ".seeds-datepicker-day-out-of-range",
+      "color",
+      "var(--color-text-subtext)",
+      theme.colors.text.subtext,
+    ],
+    // From the `disabled` mixin in seeds-react-mixins, which has no tokens.
+    [".seeds-datepicker-day-out-of-range", "opacity", "0.4", "0.4"],
+    [".seeds-datepicker-day-out-of-range", "pointer-events", "none", "none"],
+  ];
+
+  it.each(expectations)(
+    "%s { %s }",
+    (selector, property, declaration, themeValue) => {
+      const declarations = parseRules(layeredHalf()).get(selector);
+      expect(declarations).toBeDefined();
+
+      const declared = declarations?.get(property);
+      // Exact token identity — catches a swap to a token that happens to share
+      // this theme's value.
+      expect(declared).toBe(declaration);
+      // And the token resolves to what the legacy styled cell actually read.
+      expect(resolveVars(declared as string)).toBe(themeValue.toLowerCase());
+    }
+  );
+
+  it("leaves no declaration in the layered half unchecked", () => {
+    const covered = new Set(
+      expectations.map(([selector, property]) => `${selector} ${property}`)
+    );
+    const declared: string[] = [];
+    for (const [selector, declarations] of parseRules(layeredHalf())) {
+      for (const property of declarations.keys()) {
+        declared.push(`${selector} ${property}`);
+      }
+    }
+
+    expect(declared.length).toBe(expectations.length);
+    expect(declared.filter((entry) => !covered.has(entry))).toEqual([]);
+  });
+});

package/src/cn.ts

@@ -0,0 +1,28 @@
+/**
+ * Minimal className combiner, mirroring the local copies in seeds-react-list,
+ * seeds-react-profile and seeds-react-tree —
+ * @sproutsocial/seeds-react-utilities does NOT export a `cn` helper.
+ *
+ * Falsy inputs are dropped; object inputs contribute each truthy key.
+ */
+export function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  for (const input of inputs) {
+    if (!input) continue;
+
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+}

package/src/common.tsx

@@ -3,7 +3,7 @@ import "react-dates/lib/css/_datepicker.css";
 import type { Moment } from "moment";
 import React from "react";
 import Icon, { type TypeIconName } from "@sproutsocial/seeds-react-icon";
-import { CalendarDay } from "./styles";
+import CalendarDay from "./CalendarDayTailwind";
 import type { TypeCommonDatePickerProps } from "./types";
 
 type TypeCalendarNavButtonType = "left" | "right";