@shipfox/react-ui 0.15.0 → 0.16.0

package/src/utils/debounce.ts

@@ -1,15 +0,0 @@
-export function debounce<T extends (...args: never[]) => void>(
-  fn: T,
-  delay: number,
-): (...args: Parameters<T>) => void {
-  let timeoutId: ReturnType<typeof setTimeout> | null = null;
-
-  return (...args: Parameters<T>) => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      fn(...args);
-    }, delay);
-  };
-}

package/src/utils/format/chart.ts

@@ -1,16 +0,0 @@
-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

@@ -1,65 +0,0 @@
-import {afterEach, beforeEach, describe, expect, it, vi} from '@shipfox/vitest/vi';
-import {
-  addDays,
-  addYears,
-  endOfDay,
-  type NormalizedInterval,
-  startOfDay,
-  subDays,
-  subHours,
-  subYears,
-} from 'date-fns';
-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

@@ -1,75 +0,0 @@
-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

@@ -1,58 +0,0 @@
-import {describe, expect, it} from '@shipfox/vitest/vi';
-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

@@ -1,82 +0,0 @@
-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

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

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

@@ -1,38 +0,0 @@
-import {describe, expect, it} from '@shipfox/vitest/vi';
-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

@@ -1,33 +0,0 @@
-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

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

package/test/global.ts

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

package/test/setup.ts

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

package/tsconfig.build.json

@@ -1,19 +0,0 @@
-{
-  "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",
-    "**/build-css-entry.ts"
-  ]
-}

package/tsconfig.json

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

package/tsconfig.test.json

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

package/vercel.json

@@ -1,8 +0,0 @@
-{
-  "$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/vite.css.config.ts

@@ -1,30 +0,0 @@
-import {dirname, resolve} from 'node:path';
-import {fileURLToPath} from 'node:url';
-import {defineConfig} from '@shipfox/vite';
-import tailwindcss from '@tailwindcss/vite';
-import react from '@vitejs/plugin-react';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-export default defineConfig(
-  {
-    plugins: [react(), tailwindcss()],
-    build: {
-      outDir: 'dist',
-      emptyOutDir: false,
-      cssCodeSplit: false,
-      rollupOptions: {
-        input: resolve(__dirname, 'src/build-css-entry.ts'),
-        output: {
-          entryFileNames: 'css-entry.js',
-          assetFileNames: 'styles.css',
-        },
-      },
-    },
-    css: {
-      minify: true,
-    },
-  },
-  import.meta.url,
-);

package/vitest.config.ts

@@ -1,44 +0,0 @@
-import * as path from 'node:path';
-import {fileURLToPath} from 'node:url';
-import {argosVitestPlugin} from '@argos-ci/storybook/vitest-plugin';
-import {defineConfig} from '@shipfox/vitest';
-import {storybookTest} from '@storybook/addon-vitest/vitest-plugin';
-import tailwindcss from '@tailwindcss/vite';
-import react from '@vitejs/plugin-react';
-import {playwright} from '@vitest/browser-playwright';
-
-const dirname =
-  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
-
-// https://vitejs.dev/config/
-export default defineConfig(
-  {
-    plugins: [react(), tailwindcss()],
-    css: {},
-    test: {
-      projects: [
-        {
-          extends: true,
-          plugins: [
-            storybookTest({configDir: path.join(dirname, '.storybook')}),
-            argosVitestPlugin({
-              uploadToArgos: !!process.env.CI,
-              token: process.env.ARGOS_TOKEN,
-            }),
-          ],
-          test: {
-            name: 'storybook',
-            browser: {
-              enabled: true,
-              headless: true,
-              provider: playwright(),
-              instances: [{browser: 'chromium'}],
-            },
-            setupFiles: ['.storybook/vitest.setup.ts'],
-          },
-        },
-      ],
-    },
-  },
-  import.meta.url,
-);