EnvironmentConfigProvider

const datePickerFixture = {
  id: "datepicker",
  label: "Kickoff date",
  // Pinned for the same reason as calendarFixture: the trigger's mono readout
  // and the popover's today-ring must not move with the wall clock.
  selectedIsoDay: "2026-06-21",
  todayIsoDay: "2026-06-21",
} satisfies {
  id: string;
  label: string;
  selectedIsoDay: string;
  todayIsoDay: string;
};
 
/**
 * Turns a fixture's pinned `yyyy-mm-dd` string into the `Date` the calendar
 * adapters take.
 *
 * Fixtures stay plain JSON (the proof test rejects `Date` instances, and
 * `date` is a forbidden field name), but Calendar/DatePicker/DateRangePicker
 * are `Date`-valued — so the conversion lives here, once, instead of five
 * `new Date(...)` literals drifting apart in five demo files.
 *
 * Parsed field-by-field into *local* midnight on purpose: `new Date("2026-06-18")`
 * is parsed as UTC midnight, which renders as the 17th everywhere west of
 * Greenwich, so the demo month grid would highlight a different day depending
 * on the reader's timezone. Field-by-field construction pins the rendered
 * year/month/day in every timezone, forever.
 */
function isoDayToDate(isoDay: string): Date {
  const [year, month, day] = isoDay.split("-").map(Number);
  return new Date(year!, month! - 1, day!);
}
 
import { DatePicker, EnvironmentConfigProvider } from "@grassroot/ui-react";
 
const arabicCalendar = {
  locale: "ar-EG",
  dir: "rtl",
  weekStartsOn: 6,
} as const;
 
export default function EnvironmentConfigProviderDemo() {
  return (
    <EnvironmentConfigProvider value={arabicCalendar}>
      <div>
        <p lang="ar">تقويم عربي من اليمين إلى اليسار، يبدأ الأسبوع يوم السبت.</p>
        <DatePicker
          id={`${datePickerFixture.id}-environment-config-react`}
          label="تاريخ المتابعة"
          defaultValue={isoDayToDate(datePickerFixture.selectedIsoDay)}
          defaultOpen
          today={isoDayToDate(datePickerFixture.todayIsoDay)}
        />
      </div>
    </EnvironmentConfigProvider>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const datePickerFixture = {
  id: "datepicker",
  label: "Kickoff date",
  // Pinned for the same reason as calendarFixture: the trigger's mono readout
  // and the popover's today-ring must not move with the wall clock.
  selectedIsoDay: "2026-06-21",
  todayIsoDay: "2026-06-21",
} satisfies {
  id: string;
  label: string;
  selectedIsoDay: string;
  todayIsoDay: string;
};
 
/**
 * Turns a fixture's pinned `yyyy-mm-dd` string into the `Date` the calendar
 * adapters take.
 *
 * Fixtures stay plain JSON (the proof test rejects `Date` instances, and
 * `date` is a forbidden field name), but Calendar/DatePicker/DateRangePicker
 * are `Date`-valued — so the conversion lives here, once, instead of five
 * `new Date(...)` literals drifting apart in five demo files.
 *
 * Parsed field-by-field into *local* midnight on purpose: `new Date("2026-06-18")`
 * is parsed as UTC midnight, which renders as the 17th everywhere west of
 * Greenwich, so the demo month grid would highlight a different day depending
 * on the reader's timezone. Field-by-field construction pins the rendered
 * year/month/day in every timezone, forever.
 */
function isoDayToDate(isoDay: string): Date {
  const [year, month, day] = isoDay.split("-").map(Number);
  return new Date(year!, month! - 1, day!);
}
 
import { DatePicker, EnvironmentConfigProvider } from "@grassroot/ui-vue";
import type { EnvironmentConfig } from "@grassroot/ui-core";
 
const selected = ref(isoDayToDate(datePickerFixture.selectedIsoDay));
const today = isoDayToDate(datePickerFixture.todayIsoDay);
const arabicCalendar: EnvironmentConfig = {
  locale: "ar-EG",
  dir: "rtl",
  weekStartsOn: 6,
};
</script>
 
<template>
  <EnvironmentConfigProvider :value="arabicCalendar">
    <div>
      <p lang="ar">تقويم عربي من اليمين إلى اليسار، يبدأ الأسبوع يوم السبت.</p>
      <DatePicker
        v-model="selected"
        :id="`${datePickerFixture.id}-environment-config-vue`"
        label="تاريخ المتابعة"
        :default-open="true"
        :today="today"
      />
    </div>
  </EnvironmentConfigProvider>
</template>

import { Component } from "@angular/core";
const datePickerFixture = {
  id: "datepicker",
  label: "Kickoff date",
  // Pinned for the same reason as calendarFixture: the trigger's mono readout
  // and the popover's today-ring must not move with the wall clock.
  selectedIsoDay: "2026-06-21",
  todayIsoDay: "2026-06-21",
} satisfies {
  id: string;
  label: string;
  selectedIsoDay: string;
  todayIsoDay: string;
};
 
/**
 * Turns a fixture's pinned `yyyy-mm-dd` string into the `Date` the calendar
 * adapters take.
 *
 * Fixtures stay plain JSON (the proof test rejects `Date` instances, and
 * `date` is a forbidden field name), but Calendar/DatePicker/DateRangePicker
 * are `Date`-valued — so the conversion lives here, once, instead of five
 * `new Date(...)` literals drifting apart in five demo files.
 *
 * Parsed field-by-field into *local* midnight on purpose: `new Date("2026-06-18")`
 * is parsed as UTC midnight, which renders as the 17th everywhere west of
 * Greenwich, so the demo month grid would highlight a different day depending
 * on the reader's timezone. Field-by-field construction pins the rendered
 * year/month/day in every timezone, forever.
 */
function isoDayToDate(isoDay: string): Date {
  const [year, month, day] = isoDay.split("-").map(Number);
  return new Date(year!, month! - 1, day!);
}
 
import {
  EnvironmentConfigProvider,
  GrassrootDatePicker,
} from "@grassroot/ui-angular";
 
@Component({
  selector: "app-environment-config-provider-demo",
  standalone: true,
  imports: [EnvironmentConfigProvider, GrassrootDatePicker],
  template: `
    <grassroot-environment-config [value]="environment">
      <div>
        <p lang="ar">تقويم عربي من اليمين إلى اليسار، يبدأ الأسبوع يوم السبت.</p>
        <grassroot-date-picker
          [id]="id"
          label="تاريخ المتابعة"
          [defaultValue]="selected"
          [defaultOpen]="true"
          [today]="today"
        />
      </div>
    </grassroot-environment-config>
  `,
})
export class EnvironmentConfigProviderDemoComponent {
  protected readonly environment = {
    locale: "ar-EG",
    dir: "rtl" as const,
    weekStartsOn: 6 as const,
  };
  protected readonly id = `${datePickerFixture.id}-environment-angular`;
  protected readonly selected = isoDayToDate(datePickerFixture.selectedIsoDay);
  protected readonly today = isoDayToDate(datePickerFixture.todayIsoDay);
}
 
export default EnvironmentConfigProviderDemoComponent;

<script lang="ts">
  const datePickerFixture = {
    id: "datepicker",
    label: "Kickoff date",
    // Pinned for the same reason as calendarFixture: the trigger's mono readout
    // and the popover's today-ring must not move with the wall clock.
    selectedIsoDay: "2026-06-21",
    todayIsoDay: "2026-06-21",
  } satisfies {
    id: string;
    label: string;
    selectedIsoDay: string;
    todayIsoDay: string;
  };
 
  /**
   * Turns a fixture's pinned `yyyy-mm-dd` string into the `Date` the calendar
   * adapters take.
   *
   * Fixtures stay plain JSON (the proof test rejects `Date` instances, and
   * `date` is a forbidden field name), but Calendar/DatePicker/DateRangePicker
   * are `Date`-valued — so the conversion lives here, once, instead of five
   * `new Date(...)` literals drifting apart in five demo files.
   *
   * Parsed field-by-field into *local* midnight on purpose: `new Date("2026-06-18")`
   * is parsed as UTC midnight, which renders as the 17th everywhere west of
   * Greenwich, so the demo month grid would highlight a different day depending
   * on the reader's timezone. Field-by-field construction pins the rendered
   * year/month/day in every timezone, forever.
   */
  function isoDayToDate(isoDay: string): Date {
    const [year, month, day] = isoDay.split("-").map(Number);
    return new Date(year!, month! - 1, day!);
  }
 
  import { DatePicker, EnvironmentConfigProvider } from "@grassroot/ui-svelte";
 
  const environment = { locale: "ar-EG", dir: "rtl" as const, weekStartsOn: 6 as const };
</script>
 
<EnvironmentConfigProvider value={environment}>
  <div>
    <p lang="ar">تقويم عربي من اليمين إلى اليسار، يبدأ الأسبوع يوم السبت.</p>
    <DatePicker
      id={`${datePickerFixture.id}-environment-svelte`}
      label="تاريخ المتابعة"
      defaultValue={isoDayToDate(datePickerFixture.selectedIsoDay)}
      defaultOpen
      today={isoDayToDate(datePickerFixture.todayIsoDay)}
    />
  </div>
</EnvironmentConfigProvider>

/** @jsxImportSource solid-js */
const datePickerFixture = {
  id: "datepicker",
  label: "Kickoff date",
  // Pinned for the same reason as calendarFixture: the trigger's mono readout
  // and the popover's today-ring must not move with the wall clock.
  selectedIsoDay: "2026-06-21",
  todayIsoDay: "2026-06-21",
} satisfies {
  id: string;
  label: string;
  selectedIsoDay: string;
  todayIsoDay: string;
};
 
/**
 * Turns a fixture's pinned `yyyy-mm-dd` string into the `Date` the calendar
 * adapters take.
 *
 * Fixtures stay plain JSON (the proof test rejects `Date` instances, and
 * `date` is a forbidden field name), but Calendar/DatePicker/DateRangePicker
 * are `Date`-valued — so the conversion lives here, once, instead of five
 * `new Date(...)` literals drifting apart in five demo files.
 *
 * Parsed field-by-field into *local* midnight on purpose: `new Date("2026-06-18")`
 * is parsed as UTC midnight, which renders as the 17th everywhere west of
 * Greenwich, so the demo month grid would highlight a different day depending
 * on the reader's timezone. Field-by-field construction pins the rendered
 * year/month/day in every timezone, forever.
 */
function isoDayToDate(isoDay: string): Date {
  const [year, month, day] = isoDay.split("-").map(Number);
  return new Date(year!, month! - 1, day!);
}
 
import { DatePicker, EnvironmentConfigProvider } from "@grassroot/ui-solid";
 
const environment = { locale: "ar-EG", dir: "rtl" as const, weekStartsOn: 6 as const };
 
export default function EnvironmentConfigProviderDemo() {
  return (
    <EnvironmentConfigProvider value={environment}>
      <div>
        <p lang="ar">تقويم عربي من اليمين إلى اليسار، يبدأ الأسبوع يوم السبت.</p>
        <DatePicker
          id={`${datePickerFixture.id}-environment-solid`}
          label="تاريخ المتابعة"
          defaultValue={isoDayToDate(datePickerFixture.selectedIsoDay)}
          defaultOpen
          today={isoDayToDate(datePickerFixture.todayIsoDay)}
        />
      </div>
    </EnvironmentConfigProvider>
  );
}