@shipfox/react-ui 0.0.1

package/src/utils/date.test.ts

@@ -0,0 +1,119 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {
+  generateDurationShortcut,
+  intervalToNowFromDuration,
+  parseTextDurationShortcut,
+} from './date';
+
+describe('date utils', () => {
+  const now = new Date('2024-03-20T17:45:00Z');
+
+  beforeEach(() => {
+    vi.useFakeTimers({now});
+  });
+
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+  });
+
+  describe('intervalToNowFromDuration', () => {
+    it('should return the interval for days', () => {
+      const result = intervalToNowFromDuration({days: 2});
+      expect(result).toEqual({
+        start: new Date('2024-03-18T17:45:00Z'),
+        end: new Date('2024-03-20T17:45:00Z'),
+      });
+    });
+
+    it('should return the interval for days rounded, when the options is given', () => {
+      const result = intervalToNowFromDuration({days: 2}, {attemptRounding: true});
+      expect(result).toEqual({
+        start: new Date('2024-03-18T00:00:00Z'),
+        end: new Date('2024-03-20T23:59:59.999Z'),
+      });
+    });
+
+    it('should not round the hours intervals, even when the options is given', () => {
+      const result = intervalToNowFromDuration({hours: 48}, {attemptRounding: true});
+      expect(result).toEqual({
+        start: new Date('2024-03-18T17:45:00Z'),
+        end: new Date('2024-03-20T17:45:00Z'),
+      });
+    });
+  });
+
+  describe('parseTextDurationShortcut', () => {
+    it('should parse a duration shortcut in seconds', () => {
+      const result = parseTextDurationShortcut('100s');
+      expect(result).toEqual({seconds: 100});
+    });
+
+    it('should parse a duration shortcut in minutes', () => {
+      const result = parseTextDurationShortcut('100m');
+      expect(result).toEqual({minutes: 100});
+    });
+
+    it('should parse a duration shortcut in hours', () => {
+      const result = parseTextDurationShortcut('100h');
+      expect(result).toEqual({hours: 100});
+    });
+
+    it('should parse a duration shortcut in days', () => {
+      const result = parseTextDurationShortcut('100d');
+      expect(result).toEqual({days: 100});
+    });
+
+    it('should parse a duration shortcut in weeks', () => {
+      const result = parseTextDurationShortcut('100w');
+      expect(result).toEqual({weeks: 100});
+    });
+
+    it('should parse a duration shortcut in months', () => {
+      const result = parseTextDurationShortcut('100mo');
+      expect(result).toEqual({months: 100});
+    });
+
+    it('should parse a duration shortcut in years', () => {
+      const result = parseTextDurationShortcut('100y');
+      expect(result).toEqual({years: 100});
+    });
+  });
+
+  describe('generateDurationShortcut', () => {
+    it('should generate a duration shortcut in seconds', () => {
+      const result = generateDurationShortcut({seconds: 100});
+      expect(result).toEqual('100s');
+    });
+
+    it('should generate a duration shortcut in minutes', () => {
+      const result = generateDurationShortcut({minutes: 100});
+      expect(result).toEqual('100m');
+    });
+
+    it('should generate a duration shortcut in hours', () => {
+      const result = generateDurationShortcut({hours: 100});
+      expect(result).toEqual('100h');
+    });
+
+    it('should generate a duration shortcut in days', () => {
+      const result = generateDurationShortcut({days: 100});
+      expect(result).toEqual('100d');
+    });
+
+    it('should generate a duration shortcut in weeks', () => {
+      const result = generateDurationShortcut({weeks: 100});
+      expect(result).toEqual('100w');
+    });
+
+    it('should generate a duration shortcut in months', () => {
+      const result = generateDurationShortcut({months: 100});
+      expect(result).toEqual('100mo');
+    });
+
+    it('should generate a duration shortcut in years', () => {
+      const result = generateDurationShortcut({years: 100});
+      expect(result).toEqual('100y');
+    });
+  });
+});

package/src/utils/date.ts

@@ -0,0 +1,99 @@
+import {
+  type Duration,
+  endOfDay,
+  formatDuration,
+  type NormalizedInterval,
+  startOfDay,
+  startOfMonth,
+  sub,
+} from 'date-fns';
+
+export function isStartOfDay(date: Date): boolean {
+  return date.getTime() === startOfDay(date).getTime();
+}
+
+export function isStartOfMonth(date: Date): boolean {
+  return date.getTime() === startOfMonth(date).getTime();
+}
+
+export function isEndOfDay(date: Date): boolean {
+  return date.getTime() === endOfDay(date).getTime();
+}
+
+export function humanizeDurationToNow(duration: Duration): string {
+  return `Past ${formatDuration(duration)}`;
+}
+
+export interface IntervalToNowFromDurationOptions {
+  /** When set, if an interval is given in a precise unit, it will be rounded to full days
+   *  (ex: 1 day, will generate intervals from midnight (d-1) to midnight (d))
+   *  Does not apply to units lower than day */
+  attemptRounding?: boolean;
+}
+
+export function intervalToNowFromDuration(
+  duration: Duration,
+  options?: IntervalToNowFromDurationOptions,
+): NormalizedInterval {
+  const now = new Date();
+  const interval = {
+    start: sub(now, duration),
+    end: now,
+  };
+  if (!options?.attemptRounding) return interval;
+  const units = Object.keys(duration);
+  if (units.length !== 1) return interval;
+  if (['hours', 'minutes', 'seconds'].includes(units[0])) return interval;
+  return {
+    start: startOfDay(interval.start),
+    end: endOfDay(interval.end),
+  };
+}
+
+const DURATION_SHORTCUTS: Record<keyof Duration, string> = {
+  years: 'y',
+  months: 'mo',
+  weeks: 'w',
+  days: 'd',
+  hours: 'h',
+  minutes: 'm',
+  seconds: 's',
+};
+
+const DURATION_SHORTCUTS_REVERSED: Record<string, keyof Duration> = Object.fromEntries(
+  Object.entries(DURATION_SHORTCUTS).map(([key, value]) => [value, key as keyof Duration]),
+);
+
+const DURATION_SHORTCUT_REGEX = new RegExp(
+  `^(\\d+)(${Object.keys(DURATION_SHORTCUTS_REVERSED).join('|')})$`,
+);
+
+export function generateDurationShortcut(duration: Duration): string {
+  const keys = Object.keys(duration) as (keyof Duration)[];
+  if (keys.length !== 1) return '';
+  const key = keys[0];
+  const value = duration[key];
+  return `${value}${DURATION_SHORTCUTS[key]}`;
+}
+
+export function parseTextDurationShortcut(text: string): Duration | undefined {
+  const match = text.match(DURATION_SHORTCUT_REGEX);
+  if (!match) return;
+  const [_, value, shortcut] = match;
+  const unit = DURATION_SHORTCUTS_REVERSED[shortcut];
+  return {[unit]: Number.parseInt(value, 10)};
+}
+
+const dateSplitterRefex = /[-\u2013]/;
+
+export function parseTextInterval(text: string): NormalizedInterval | undefined {
+  const durationShortcut = parseTextDurationShortcut(text);
+  if (durationShortcut) return intervalToNowFromDuration(durationShortcut);
+  const textDates = text.split(dateSplitterRefex).map((token) => token.trim());
+  if (textDates.length !== 2) return;
+  const start = new Date(textDates[0]);
+  const end = new Date(textDates[1]);
+  if (Number.isNaN(start.getTime())) return;
+  if (Number.isNaN(end.getTime())) return;
+  return {start, end};
+}

package/src/utils/format/chart.ts

@@ -0,0 +1,16 @@
+import {formatDateTime, formatTimeSeriesTick} from './date';
+import {formatNumber, formatNumberCompact} from './number';
+
+export function formatAxisTick(value: unknown) {
+  if (value instanceof Date) return formatTimeSeriesTick(value);
+  if (typeof value !== 'number')
+    throw new Error(`Expecting value to be a number, got ${typeof value}`);
+  return formatNumberCompact(value);
+}
+
+export function formatTooltipLabel(value: unknown) {
+  if (value instanceof Date) return formatDateTime(value);
+  if (typeof value !== 'number')
+    throw new Error(`Expecting value to be a number, got ${typeof value}`);
+  return formatNumber(value);
+}

package/src/utils/format/date.test.ts

@@ -0,0 +1,65 @@
+import {
+  addDays,
+  addYears,
+  endOfDay,
+  type NormalizedInterval,
+  startOfDay,
+  subDays,
+  subHours,
+  subYears,
+} from 'date-fns';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {formatDateTimeRange} from './date';
+
+describe('Format - Date', () => {
+  describe('formatDateTimeRange', () => {
+    const now = new Date('2024-03-20T17:45:00Z');
+    let interval: NormalizedInterval;
+
+    beforeEach(() => {
+      interval = {
+        start: subHours(now, 1),
+        end: now,
+      };
+      vi.useFakeTimers({now});
+    });
+
+    afterEach(() => {
+      vi.runOnlyPendingTimers();
+      vi.useRealTimers();
+    });
+
+    it('displays only the hour of the second date if both on same day (en-US)', () => {
+      const result = formatDateTimeRange(interval);
+      expect(result).toEqual('Mar 20, 4:45\u2009\u2013\u20095:45\u202fPM');
+    });
+
+    it('displays the date for the second day if not on same day (en-US)', () => {
+      interval.end = addDays(interval.end, 1);
+      const result = formatDateTimeRange(interval);
+      expect(result).toEqual('Mar 20, 4:45\u202fPM\u2009\u2013\u2009Mar 21, 5:45\u202fPM');
+    });
+
+    it('displays the year for the second day if not on same day (en-US)', () => {
+      interval.end = addYears(interval.end, 1);
+      const result = formatDateTimeRange(interval);
+      expect(result).toEqual(
+        'Mar 20, 2024, 4:45\u202fPM\u2009\u2013\u2009Mar 20, 2025, 5:45\u202fPM',
+      );
+    });
+
+    it('displays the year when the dates are both in another year (en-US)', () => {
+      interval.start = subYears(interval.start, 1);
+      interval.end = subYears(interval.end, 1);
+      const result = formatDateTimeRange(interval);
+      expect(result).toEqual('Mar 20, 2023, 4:45\u2009\u2013\u20095:45\u202fPM');
+    });
+
+    it('does not display time when interval if full days', () => {
+      interval.start = startOfDay(subDays(interval.start, 1));
+      interval.end = endOfDay(interval.end);
+      const result = formatDateTimeRange(interval);
+      expect(result).toEqual('Mar 19\u2009\u2013\u200920');
+    });
+  });
+});

package/src/utils/format/date.ts

@@ -0,0 +1,75 @@
+import {getYear, type NormalizedInterval} from 'date-fns';
+import {isEndOfDay, isStartOfDay} from 'utils/date';
+
+interface DateTimeFormatOptions extends Intl.DateTimeFormatOptions {
+  locale?: string;
+}
+
+const defaultOptions: DateTimeFormatOptions = {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+};
+
+function getDateTimeFormatter({
+  locale,
+  ...options
+}: DateTimeFormatOptions = {}): Intl.DateTimeFormat {
+  return new Intl.DateTimeFormat(locale, {
+    ...defaultOptions,
+    ...options,
+  });
+}
+
+function areCurrentYear({start, end}: NormalizedInterval): boolean {
+  const now = new Date();
+  return getYear(end) === getYear(now) && getYear(start) === getYear(now);
+}
+
+export function formatDateTime(date: Date, options?: DateTimeFormatOptions): string {
+  const formatter = getDateTimeFormatter(options);
+  return formatter.format(date);
+}
+
+export function formatDateTimeRelativeToInterval(
+  date: Date,
+  interval: NormalizedInterval,
+  options?: DateTimeFormatOptions,
+) {
+  const formatter = getDateTimeFormatter({
+    year: areCurrentYear(interval) ? undefined : defaultOptions.year,
+    ...options,
+  });
+  return formatter.format(date);
+}
+
+export function formatDateTimeRange(
+  interval: NormalizedInterval,
+  options?: DateTimeFormatOptions,
+): string {
+  const {start, end} = interval;
+  const areFullDays = isStartOfDay(start) && isEndOfDay(end);
+  const formatter = getDateTimeFormatter({
+    year: areCurrentYear(interval) ? undefined : defaultOptions.year,
+    hour: areFullDays ? undefined : defaultOptions.hour,
+    minute: areFullDays ? undefined : defaultOptions.minute,
+    ...options,
+  });
+  return formatter.formatRange(start, end);
+}
+
+export function formatTimeSeriesTick(
+  date: Date,
+  {locale, ...options}: DateTimeFormatOptions = {},
+): string {
+  const tickOptions: DateTimeFormatOptions = isStartOfDay(date)
+    ? {month: 'short', day: 'numeric'}
+    : {hour: 'numeric', minute: '2-digit'};
+  const formatter = new Intl.DateTimeFormat(locale, {
+    ...tickOptions,
+    ...options,
+  });
+  return formatter.format(date);
+}

package/src/utils/format/duration.test.ts

@@ -0,0 +1,58 @@
+import {describe, expect, it} from 'vitest';
+import {formatDuration} from './duration';
+
+describe('formatDuration', () => {
+  it('returns a ns precision string', () => {
+    expect(formatDuration({nanoseconds: 100})).toBe('100 ns');
+  });
+
+  it('returns a μs precision string', () => {
+    expect(formatDuration({nanoseconds: 31000})).toBe('31 μs');
+    expect(formatDuration({microseconds: 31})).toBe('31 μs');
+  });
+
+  it('returns a ms precision string', () => {
+    expect(formatDuration({nanoseconds: 567000000})).toBe('567 ms');
+    expect(formatDuration({milliseconds: 567})).toBe('567 ms');
+  });
+
+  it('returns a s precision string', () => {
+    expect(formatDuration({nanoseconds: 43000000000})).toBe('43 s');
+    expect(formatDuration({seconds: 43})).toBe('43 s');
+  });
+
+  it('returns a min precision string', () => {
+    expect(formatDuration({nanoseconds: 180000000000})).toBe('3 min');
+    expect(formatDuration({minutes: 3})).toBe('3 min');
+  });
+
+  it('returns a h precision string', () => {
+    expect(formatDuration({nanoseconds: 3600000000000})).toBe('1 h');
+    expect(formatDuration({hours: 1})).toBe('1 h');
+  });
+
+  it('returns a d precision string', () => {
+    expect(formatDuration({nanoseconds: 86400000000000})).toBe('1 d');
+    expect(formatDuration({days: 1})).toBe('1 d');
+  });
+
+  it('returns a w precision string', () => {
+    expect(formatDuration({nanoseconds: 604800000000000})).toBe('1 w');
+    expect(formatDuration({weeks: 1})).toBe('1 w');
+  });
+
+  it('returns a mo precision string', () => {
+    expect(formatDuration({nanoseconds: 2592000000000000})).toBe('1 mo');
+    expect(formatDuration({months: 1})).toBe('1 mo');
+  });
+
+  it('returns a y precision string', () => {
+    expect(formatDuration({nanoseconds: 31536000000000000})).toBe('1 y');
+    expect(formatDuration({years: 1})).toBe('1 y');
+  });
+
+  it('rounds to one digit', () => {
+    expect(formatDuration({nanoseconds: 31567})).toBe('31.6 μs');
+    expect(formatDuration({microseconds: 31, nanoseconds: 567})).toBe('31.6 μs');
+  });
+});

package/src/utils/format/duration.ts

@@ -0,0 +1,82 @@
+import type {Duration as BaseDuration} from 'date-fns';
+import {formatNumber} from './number';
+
+export interface Duration extends BaseDuration {
+  milliseconds?: number | bigint;
+  microseconds?: number | bigint;
+  nanoseconds?: number | bigint;
+}
+
+interface Unit {
+  key: keyof Duration;
+  symbol: string;
+  ns: number;
+}
+
+const units: Unit[] = [
+  {
+    key: 'years',
+    symbol: 'y',
+    ns: 365 * 24 * 60 * 60 * 1000 * 1000 * 1000,
+  },
+  {
+    key: 'months',
+    symbol: 'mo',
+    ns: 30 * 24 * 60 * 60 * 1000 * 1000 * 1000,
+  },
+  {
+    key: 'weeks',
+    symbol: 'w',
+    ns: 7 * 24 * 60 * 60 * 1000 * 1000 * 1000,
+  },
+  {
+    key: 'days',
+    symbol: 'd',
+    ns: 24 * 60 * 60 * 1000 * 1000 * 1000,
+  },
+  {
+    key: 'hours',
+    symbol: 'h',
+    ns: 60 * 60 * 1000 * 1000 * 1000,
+  },
+  {
+    key: 'minutes',
+    symbol: 'min',
+    ns: 60 * 1000 * 1000 * 1000,
+  },
+  {
+    key: 'seconds',
+    symbol: 's',
+    ns: 1000 * 1000 * 1000,
+  },
+  {
+    key: 'milliseconds',
+    symbol: 'ms',
+    ns: 1000 * 1000,
+  },
+  {
+    key: 'microseconds',
+    symbol: 'μs',
+    ns: 1000,
+  },
+  {
+    key: 'nanoseconds',
+    symbol: 'ns',
+    ns: 1,
+  },
+];
+
+/** Format a duration in nanoseconds to a human readable string */
+export function formatDuration(duration: Duration): string {
+  const nanoseconds = Object.entries(duration).reduce((acc, [key, value]) => {
+    const unit = units.find((u) => u.key === key);
+    if (!unit) throw new Error(`Received unknown duration unit: ${key}`);
+    return acc + Number(value) * unit.ns;
+  }, 0);
+
+  for (const unit of units) {
+    const value = nanoseconds / unit.ns;
+    if (value >= 1) return `${formatNumber(value, {maximumFractionDigits: 1})} ${unit.symbol}`;
+  }
+  return `${formatNumber(nanoseconds, {maximumFractionDigits: 1})} ns`;
+}

package/src/utils/format/index.ts

@@ -0,0 +1,4 @@
+export * from './chart';
+export * from './date';
+export * from './duration';
+export * from './number';

package/src/utils/format/number.test.ts

@@ -0,0 +1,38 @@
+import {describe, expect, it} from 'vitest';
+import {formatNumber, formatNumberCompact, formatPercent} from './number';
+
+describe('Format - Number', () => {
+  describe('formatPercent', () => {
+    it('formats 0.5 as 50% for en-US', () => {
+      expect(formatPercent(0.5, {locale: 'en-US'})).toBe('50%');
+    });
+  });
+
+  describe('formatNumber', () => {
+    it('formats 1_000 as 1,000 for en-US', () => {
+      expect(formatNumber(1_000, {locale: 'en-US'})).toBe('1,000');
+    });
+
+    it('formats 1_000 as 1 000 for fr-Fr', () => {
+      expect(formatNumber(1_000, {locale: 'fr-FR'})).toBe('1\u202f000');
+    });
+  });
+
+  describe('formatNumberCompact', () => {
+    it('formats 1_000 as 1K for en-US', () => {
+      expect(formatNumberCompact(1_000, {locale: 'en-US'})).toBe('1K');
+    });
+
+    it('formats 1_000_000 as 1M for en-US', () => {
+      expect(formatNumberCompact(1_000_000, {locale: 'en-US'})).toBe('1M');
+    });
+
+    it('formats 1_000_000_000 as 1B for en-US', () => {
+      expect(formatNumberCompact(1_000_000_000, {locale: 'en-US'})).toBe('1B');
+    });
+
+    it('format 10_000 as 1万 for zh-CN', () => {
+      expect(formatNumberCompact(10_000, {locale: 'zh-CN'})).toBe('1万');
+    });
+  });
+});

package/src/utils/format/number.ts

@@ -0,0 +1,33 @@
+export interface NumberFormatOptions extends Intl.NumberFormatOptions {
+  locale?: string;
+}
+
+export function formatNumber(
+  value: number | bigint,
+  {locale, ...options}: NumberFormatOptions = {},
+): string {
+  const formatter = new Intl.NumberFormat(locale, options);
+  return formatter.format(value);
+}
+
+export function formatNumberCompact(
+  value: number | bigint,
+  options: NumberFormatOptions = {},
+): string {
+  return formatNumber(value, {
+    ...options,
+    style: 'decimal',
+    notation: 'compact',
+    compactDisplay: 'short',
+  });
+}
+
+export function formatPercent(
+  value: number,
+  {locale, ...options}: NumberFormatOptions = {},
+): string {
+  return formatNumber(value, {
+    ...options,
+    style: 'percent',
+  });
+}

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './clipboard';
+export * from './cn';
+export * from './date';
+export * from './format';

package/test/global.ts

@@ -0,0 +1,3 @@
+export const setup = () => {
+  process.env.TZ = 'UTC';
+};

package/test/setup.ts

@@ -0,0 +1,9 @@
+import * as extensions from '@testing-library/jest-dom/matchers';
+import {cleanup} from '@testing-library/react';
+import {afterEach, expect} from 'vitest';
+
+expect.extend(extensions);
+
+afterEach(() => {
+  cleanup();
+});

package/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@shipfox/ts-config",
+  "compilerOptions": {
+    "rootDir": "src",
+    "baseUrl": "src",
+    "outDir": "dist",
+    "lib": ["DOM", "ESNext"],
+    "jsx": "react-jsx",
+    "types": ["@shipfox/vite/client"]
+  },
+  "include": ["src"],
+  "exclude": ["**/*.test.tsx", "**/*.test.ts", "**/*.stories.tsx", "**/*.stories.ts"]
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "references": [
+    {
+      "path": "tsconfig.build.json"
+    },
+    {
+      "path": "tsconfig.test.json"
+    }
+  ],
+  "exclude": ["**/*.stories.ts", "**/*.stories.js", "**/*.stories.jsx", "**/*.stories.tsx"]
+}

package/tsconfig.test.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.build.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "paths": {
+      "test": ["../test"],
+      "test/*": ["../test/*"]
+    }
+  },
+  "include": ["src", "test", "jest.config.ts", "vite.config.ts"],
+  "exclude": []
+}

package/vercel.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "turbo build && pnpm run storybook:build",
+  "devCommand": "pnpm run storybook",
+  "installCommand": "pnpm install",
+  "framework": null,
+  "outputDirectory": "./storybook-static"
+}

package/vitest.config.ts

@@ -0,0 +1,17 @@
+import {defineConfig} from '@shipfox/vitest';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig(
+  {
+    plugins: [react(), tailwindcss()],
+    css: {},
+    test: {
+      environment: 'jsdom',
+      setupFiles: ['./test/setup.ts'],
+      globalSetup: './test/global.ts',
+    },
+  },
+  import.meta.url,
+);