@tcn/ui-time-selector 1.0.0

package/src/components/utils.ts

@@ -0,0 +1,95 @@
+/**
+ * Returns the timezone offset in minutes using the same sign convention as
+ * Date.getTimezoneOffset(): positive = behind UTC (e.g. CDT/UTC-5 → +300),
+ * negative = ahead of UTC (e.g. CEST/UTC+2 → -120).
+ */
+export function getTimezoneOffsetMinutes(iana: string, date: Date): number {
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone: iana,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  }).formatToParts(date);
+  const get = (type: string) =>
+    parseInt(parts.find(p => p.type === type)?.value ?? '0', 10);
+  const hour = get('hour') % 24; // handle 24 → 0
+  const tzMs = Date.UTC(
+    get('year'),
+    get('month') - 1,
+    get('day'),
+    hour,
+    get('minute'),
+    get('second')
+  );
+  return Math.round((date.getTime() - tzMs) / 60000);
+}
+
+/** Returns the short timezone abbreviation, e.g. "CDT", "CEST", "UTC". */
+export function getTimezoneAbbreviation(iana: string, date: Date): string {
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone: iana,
+    timeZoneName: 'short',
+  }).formatToParts(date);
+  return parts.find(p => p.type === 'timeZoneName')?.value ?? iana;
+}
+
+/**
+ * Formats an offset (in getTimezoneOffset sign convention) as "UTC+HH:MM" or "UTC-HH:MM".
+ * Positive offsetMinutes (behind UTC) → negative sign in display (e.g. +300 → "UTC-05:00").
+ */
+export function formatUTCOffset(offsetMinutes: number): string {
+  const sign = offsetMinutes <= 0 ? '+' : '-';
+  const abs = Math.abs(offsetMinutes);
+  const hours = Math.floor(abs / 60)
+    .toString()
+    .padStart(2, '0');
+  const mins = (abs % 60).toString().padStart(2, '0');
+  return `UTC${sign}${hours}:${mins}`;
+}
+
+/**
+ * Shifts a real UTC moment so that DatePickerInput (which always renders in the
+ * browser's local timezone) visually displays the wall-clock time of `targetIana`.
+ */
+export function shiftForDisplay(date: Date, targetIana: string): Date {
+  const browserOffsetMin = date.getTimezoneOffset();
+  const targetOffsetMin = getTimezoneOffsetMinutes(targetIana, date);
+  const shiftMs = (browserOffsetMin - targetOffsetMin) * 60000;
+  return new Date(date.getTime() + shiftMs);
+}
+
+/**
+ * Reverses shiftForDisplay: given a display date (shifted), recovers the real UTC moment.
+ */
+export function unshiftFromDisplay(displayDate: Date, targetIana: string): Date {
+  const browserOffsetMin = displayDate.getTimezoneOffset();
+  const targetOffsetMin = getTimezoneOffsetMinutes(targetIana, displayDate);
+  const shiftMs = (browserOffsetMin - targetOffsetMin) * 60000;
+  return new Date(displayDate.getTime() - shiftMs);
+}
+
+export function formatDate(date: Date): string {
+  return date.toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+}
+
+export interface PresetItem {
+  label: string;
+  minutes: number;
+}
+
+export function datesFromPreset(item: PresetItem): { start: Date; end: Date } {
+  const end = new Date();
+  const start = new Date(end.getTime() - item.minutes * 60 * 1000);
+  return { start, end };
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { TimeSelector } from './components/time_selector/time_selector.js';
+export type {
+  TimeSelectorProps,
+  TimeSelectorOwnProps,
+} from './components/time_selector/time_selector.js';

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "."
+  },
+  "include": ["src/**/*", ".storybook/**/*", "types/**/*", "package.json"]
+}

package/types/file_types.d.ts

@@ -0,0 +1,54 @@
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css?url' {
+  const url: string;
+  export default url;
+}
+
+declare module '*.css?raw' {
+  const url: string;
+  export default url;
+}
+
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.png' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.pdf' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.wasm' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.prql' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.wav' {
+  const content: string;
+  export default content;
+}

package/types/react_color.d.ts

@@ -0,0 +1,61 @@
+declare module 'react-color' {
+  export type Color =
+    | string
+    | {
+        hex: string;
+        rgb: {
+          r: number;
+          g: number;
+          b: number;
+          a?: number;
+        };
+        hsl: {
+          h: number;
+          s: number;
+          l: number;
+          a?: number;
+        };
+      };
+
+  export interface ColorResult {
+    hex: string;
+    rgb: {
+      r: number;
+      g: number;
+      b: number;
+      a?: number;
+    };
+    hsl: {
+      h: number;
+      s: number;
+      l: number;
+      a?: number;
+    };
+  }
+
+  export interface ColorState {
+    hex: string;
+    rgb: {
+      r: number;
+      g: number;
+      b: number;
+      a?: number;
+    };
+    hsl: {
+      h: number;
+      s: number;
+      l: number;
+      a?: number;
+    };
+  }
+
+  export interface ChromePickerProps {
+    color?: Color | string;
+    onChange?: (color: ColorResult) => void;
+    onChangeComplete?: (color: ColorResult) => void;
+    disableAlpha?: boolean;
+    [key: string]: unknown;
+  }
+
+  export const ChromePicker: React.ComponentType<ChromePickerProps>;
+}