@shipfox/react-ui 0.22.0 → 0.24.0

package/dist/utils/date.js

@@ -43,33 +43,141 @@ const DURATION_SHORTCUTS_REVERSED = Object.fromEntries(Object.entries(DURATION_S
         value,
         key
     ]));
-const DURATION_SHORTCUT_REGEX = new RegExp(`^(\\d+)(${Object.keys(DURATION_SHORTCUTS_REVERSED).join('|')})$`);
+const UNIT_NAMES = {
+    minutes: [
+        'm',
+        'min',
+        'minute',
+        'minutes'
+    ],
+    hours: [
+        'h',
+        'hr',
+        'hour',
+        'hours'
+    ],
+    days: [
+        'd',
+        'day',
+        'days'
+    ],
+    weeks: [
+        'w',
+        'wk',
+        'week',
+        'weeks'
+    ],
+    months: [
+        'mo',
+        'mon',
+        'month',
+        'months'
+    ],
+    years: [
+        'y',
+        'yr',
+        'year',
+        'years'
+    ],
+    seconds: [
+        's',
+        'sec',
+        'second',
+        'seconds'
+    ]
+};
+const UNIT_NAME_TO_KEY = {};
+for (const [key, names] of Object.entries(UNIT_NAMES)){
+    for (const name of names){
+        UNIT_NAME_TO_KEY[name.toLowerCase()] = key;
+    }
+}
+const SHORTCUT_PATTERN = Object.keys(DURATION_SHORTCUTS_REVERSED).join('|');
+const FULL_NAME_PATTERN = Object.values(UNIT_NAMES).flat().sort((a, b)=>b.length - a.length).map((name)=>name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|');
+const DURATION_SHORTCUT_REGEX = new RegExp(`^(\\d+)\\s*(${SHORTCUT_PATTERN})$`, 'i');
+const DURATION_FULL_REGEX = new RegExp(`^(\\d+)\\s*(${FULL_NAME_PATTERN})\\s*$`, 'i');
 export function generateDurationShortcut(duration) {
-    const keys = Object.keys(duration);
-    if (keys.length !== 1) return '';
-    const key = keys[0];
-    const value = duration[key];
-    return `${value}${DURATION_SHORTCUTS[key]}`;
+    for (const [key, shortcut] of Object.entries(DURATION_SHORTCUTS)){
+        const value = duration[key];
+        if (value) {
+            return `${value}${shortcut}`;
+        }
+    }
+    return '';
 }
 export function parseTextDurationShortcut(text) {
-    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 trimmed = text.trim();
+    if (!trimmed) return undefined;
+    const shortcutMatch = trimmed.match(DURATION_SHORTCUT_REGEX);
+    if (shortcutMatch) {
+        const [_, value, shortcut] = shortcutMatch;
+        const unit = DURATION_SHORTCUTS_REVERSED[shortcut.toLowerCase()];
+        if (unit) {
+            return {
+                [unit]: Number.parseInt(value, 10)
+            };
+        }
+    }
+    const fullMatch = trimmed.match(DURATION_FULL_REGEX);
+    if (fullMatch) {
+        const [_, value, unitName] = fullMatch;
+        const normalizedUnitName = unitName.toLowerCase().trim();
+        const unit = UNIT_NAME_TO_KEY[normalizedUnitName];
+        if (unit) {
+            return {
+                [unit]: Number.parseInt(value, 10)
+            };
+        }
+    }
+    return undefined;
+}
+const DATE_SPLITTER_REGEX = /[-\u2013]/;
+const YEAR_REGEX = /\d{4}/;
+function hasYearInText(text) {
+    return YEAR_REGEX.test(text);
+}
+function parseDateString(dateText) {
+    const date = new Date(dateText);
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+function assignYearsToDates(start, end, startHasYear, endHasYear, currentYear) {
+    if (!startHasYear && !endHasYear) {
+        start.setFullYear(currentYear);
+        end.setFullYear(currentYear);
+    } else if (!startHasYear) {
+        start.setFullYear(end.getFullYear());
+    } else if (!endHasYear) {
+        end.setFullYear(currentYear);
+    }
+}
+function fixInvalidInterval(start, end, startHasYear, endHasYear) {
+    if (end < start) {
+        if (startHasYear || endHasYear) return false;
+        const endYear = end.getFullYear();
+        start.setFullYear(endYear - 1);
+    }
+    return true;
 }
-const dateSplitterRefex = /[-\u2013]/;
 export function parseTextInterval(text) {
-    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;
+    const textDates = text.split(DATE_SPLITTER_REGEX).map((token)=>token.trim());
+    if (textDates.length !== 2) {
+        return undefined;
+    }
+    const [startText, endText] = textDates;
+    const startHasYear = hasYearInText(startText);
+    const endHasYear = hasYearInText(endText);
+    const start = parseDateString(startText);
+    const end = parseDateString(endText);
+    if (!start || !end) {
+        return undefined;
+    }
+    const now = new Date();
+    const currentYear = now.getFullYear();
+    assignYearsToDates(start, end, startHasYear, endHasYear, currentYear);
+    const isValid = fixInvalidInterval(start, end, startHasYear, endHasYear);
+    if (!isValid) {
+        return undefined;
+    }
     return {
         start,
         end

package/dist/utils/format/date.d.ts

@@ -1,6 +1,7 @@
 import { type NormalizedInterval } from 'date-fns';
 interface DateTimeFormatOptions extends Intl.DateTimeFormatOptions {
     locale?: string;
+    forceShowTime?: boolean;
 }
 export declare function formatDateTime(date: Date, options?: DateTimeFormatOptions): string;
 export declare function formatDateTimeRelativeToInterval(date: Date, interval: NormalizedInterval, options?: DateTimeFormatOptions): string;

package/dist/utils/format/date.js

@@ -30,14 +30,21 @@ export function formatDateTimeRelativeToInterval(date, interval, options) {
 }
 export function formatDateTimeRange(interval, options) {
     const { start, end } = interval;
+    const { forceShowTime, ...formatOptions } = options || {};
     const areFullDays = isStartOfDay(start) && isEndOfDay(end);
+    const shouldShowTime = forceShowTime || !areFullDays;
     const formatter = getDateTimeFormatter({
         year: areCurrentYear(interval) ? undefined : defaultOptions.year,
-        hour: areFullDays ? undefined : defaultOptions.hour,
-        minute: areFullDays ? undefined : defaultOptions.minute,
-        ...options
+        hour: shouldShowTime ? defaultOptions.hour : undefined,
+        minute: shouldShowTime ? defaultOptions.minute : undefined,
+        ...formatOptions
     });
-    return formatter.formatRange(start, end);
+    if (areFullDays && !forceShowTime) {
+        return formatter.formatRange(start, end);
+    }
+    const startFormatted = formatter.format(start);
+    const endFormatted = formatter.format(end);
+    return `${startFormatted} – ${endFormatted}`;
 }
 export function formatTimeSeriesTick(date, { locale, ...options } = {}) {
     const tickOptions = isStartOfDay(date) ? {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/react-ui",
   "license": "MIT",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,6 +21,7 @@
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dismissable-layer": "^1.1.11",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.15",
@@ -86,8 +87,8 @@
     "zod": "^4.1.12",
     "@shipfox/biome": "1.6.0",
     "@shipfox/swc": "1.2.2",
-    "@shipfox/typescript": "1.1.2",
     "@shipfox/ts-config": "1.3.5",
+    "@shipfox/typescript": "1.1.2",
     "@shipfox/vite": "1.2.2",
     "@shipfox/vitest": "1.2.0"
   },

package/dist/components/dashboard/filters/expression-filter-bar.d.ts

@@ -1,42 +0,0 @@
-/**
- * Expression Filter Bar Component
- *
- * A horizontal button group for filtering by resource type.
- */
-import type { ComponentProps } from 'react';
-import type { ResourceType } from '../context';
-export interface ResourceTypeOption {
-    id: ResourceType;
-    label: string;
-    disabled?: boolean;
-}
-export interface ExpressionFilterBarProps extends Omit<ComponentProps<'div'>, 'children'> {
-    /**
-     * Available resource type options
-     */
-    options?: ResourceTypeOption[];
-    /**
-     * Currently selected resource type
-     */
-    value?: ResourceType;
-    /**
-     * Callback when resource type changes
-     */
-    onValueChange?: (value: ResourceType) => void;
-}
-/**
- * Expression Filter Bar
- *
- * Displays a horizontal button group for selecting resource types.
- * Integrates with the dashboard context for state management.
- *
- * @example
- * ```tsx
- * <ExpressionFilterBar
- *   value="ci-pipeline"
- *   onValueChange={setResourceType}
- * />
- * ```
- */
-export declare function ExpressionFilterBar({ options, value, onValueChange, className, ...props }: ExpressionFilterBarProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=expression-filter-bar.d.ts.map

package/dist/components/dashboard/filters/expression-filter-bar.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Expression Filter Bar Component
- *
- * A horizontal button group for filtering by resource type.
- */ import { Button } from '../../../components/button/index.js';
-import { cn } from '../../../utils/cn.js';
-/**
- * Default resource type options
- */ const DEFAULT_OPTIONS = [
-    {
-        id: 'ci-pipeline',
-        label: 'CI Pipeline'
-    },
-    {
-        id: 'ci-jobs',
-        label: 'CI Jobs'
-    },
-    {
-        id: 'ci-steps',
-        label: 'CI Steps'
-    },
-    {
-        id: 'runners',
-        label: 'Runners',
-        disabled: true
-    },
-    {
-        id: 'suite',
-        label: 'Suite',
-        disabled: true
-    },
-    {
-        id: 'cases',
-        label: 'Cases',
-        disabled: true
-    }
-];
-/**
- * Expression Filter Bar
- *
- * Displays a horizontal button group for selecting resource types.
- * Integrates with the dashboard context for state management.
- *
- * @example
- * ```tsx
- * <ExpressionFilterBar
- *   value="ci-pipeline"
- *   onValueChange={setResourceType}
- * />
- * ```
- */ export function ExpressionFilterBar({ options = DEFAULT_OPTIONS, value = 'ci-pipeline', onValueChange, className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        className: cn(// Desktop: Normal flex layout
-        'md:flex md:gap-4 md:items-start', // Mobile: Swipeable with scroll-snap
-        'overflow-x-auto scrollbar-none', // Scroll snap for smooth swiping
-        'snap-x snap-mandatory', // Hide scrollbar but allow scrolling
-        '[&::-webkit-scrollbar]:hidden', className),
-        ...props,
-        children: /*#__PURE__*/ _jsx("div", {
-            className: "flex gap-4 items-start px-0",
-            children: options.map((option)=>{
-                const isActive = value === option.id;
-                return /*#__PURE__*/ _jsx(Button, {
-                    variant: isActive ? 'secondary' : 'transparent',
-                    size: "md",
-                    disabled: option.disabled,
-                    onClick: ()=>!option.disabled && onValueChange?.(option.id),
-                    className: cn('flex items-center justify-center gap-8 px-10 py-6 rounded-6', 'text-sm font-medium leading-20 tracking-0', 'transition-colors', // Mobile: Prevent shrinking, snap alignment
-                    'shrink-0 snap-start', // Active state
-                    isActive && 'shadow-none bg-background-button-neutral-pressed', // Inactive state
-                    !isActive && !option.disabled && 'bg-transparent text-foreground-neutral-subtle hover:text-foreground-neutral-base'),
-                    children: option.label
-                }, option.id);
-            })
-        })
-    });
-}
-
-//# sourceMappingURL=expression-filter-bar.js.map

package/dist/components/dashboard/filters/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * Filter components exports
- */
-export type { ExpressionFilterBarProps, ResourceTypeOption } from './expression-filter-bar';
-export { ExpressionFilterBar } from './expression-filter-bar';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/dashboard/filters/index.js

@@ -1,5 +0,0 @@
-/**
- * Filter components exports
- */ export { ExpressionFilterBar } from './expression-filter-bar.js';
-
-//# sourceMappingURL=index.js.map