@ossy/timesheets 3.7.1 → 3.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/timesheets",
   "description": "Timesheets — generate, review, save, and export monthly work hours",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
@@ -14,7 +14,7 @@
     "src": "./src"
   },
   "dependencies": {
-    "@ossy/resources": "^3.7.1",
+    "@ossy/resources": "^3.8.0",
     "html-to-image": "^1.11.13",
     "nanoid": "^5.1.11",
     "pdf-lib": "^1.17.1"
@@ -38,5 +38,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "1ee220424da6b065034a7f52f52aa4a6ce7c88d5"
+  "gitHead": "14548dfc2019e7258e8c75db527acbf66fe829bd"
 }

package/src/HolidayLocaleSelect.jsx

@@ -0,0 +1,32 @@
+import React, { useMemo } from 'react'
+import { Select, Text, useLocale, View } from '@ossy/design-system'
+import { HOLIDAY_COUNTRY_CODES } from '@ossy/calendar/holiday-locale'
+
+export function HolidayLocaleSelect ({ value, onChange, disabled }) {
+  const { language, t } = useLocale()
+  const displayNames = useMemo(() => {
+    try {
+      return new Intl.DisplayNames([language || 'en'], { type: 'region' })
+    } catch {
+      return null
+    }
+  }, [language])
+
+  return (
+    <View gap="xs">
+      <Text variant="small" weight="medium" text="timesheets.holidayLocale" />
+      <Select
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        aria-label={t('timesheets.holidayLocale')}
+      >
+        {HOLIDAY_COUNTRY_CODES.map((code) => (
+          <option key={code} value={code}>
+            {displayNames?.of(code) || code}
+          </option>
+        ))}
+      </Select>
+    </View>
+  )
+}

package/src/Timesheet.jsx

@@ -13,25 +13,39 @@ const calendarGrid = {
 }
 
 const dayCell = {
+  position: 'relative',
   boxSizing: 'border-box',
   display: 'flex',
-  flexDirection: 'column',
   alignItems: 'center',
-  justifyContent: 'flex-start',
-  gap: 4,
+  justifyContent: 'center',
   width: '100%',
   minHeight: 72,
+  margin: 0,
   borderRadius: 'var(--space-xxs, 2px)',
-  padding: '6px 4px',
+  padding: '18px 4px 8px',
+  cursor: 'text',
+}
+
+const dateNumber = {
+  position: 'absolute',
+  top: 4,
+  right: 5,
+  fontSize: 11,
+  fontWeight: 500,
+  lineHeight: 1,
+  letterSpacing: 0,
+  fontFamily: 'var(--text-default-font-family, sans-serif)',
+  pointerEvents: 'none',
 }
 
 const hoursInput = {
   width: '100%',
-  maxWidth: 48,
-  minHeight: 32,
-  padding: '6px 4px',
+  minHeight: 28,
+  padding: 0,
   textAlign: 'center',
-  fontSize: 13,
+  fontSize: 14,
+  fontWeight: 700,
+  lineHeight: 1,
   borderRadius: 'var(--space-xxs, 2px)',
   background: 'transparent',
   borderColor: 'transparent',
@@ -90,6 +104,11 @@ export function Timesheet ({ lines = [], onChange, disabled = false, periodStart
     <>
       <style href="@ossy/timesheets/day-surface" precedence="high">
         {`
+          [data-timesheet-root] [data-timesheet-day-number] {
+            color: var(--foreground);
+            font-family: var(--text-default-font-family, sans-serif);
+          }
+
           [data-timesheet-root] [data-ossy-calendar-day] {
             background: var(--surface-primary);
           }
@@ -102,6 +121,31 @@ export function Timesheet ({ lines = [], onChange, disabled = false, periodStart
           [data-timesheet-root] [data-ossy-calendar-day][data-day-off="true"]:hover {
             background: color-mix(in srgb, hsl(350 32% 55%) 13%, var(--surface-primary));
           }
+
+          [data-timesheet-root] [data-ossy-calendar-day][data-day-off="true"] [data-timesheet-day-number] {
+            color: color-mix(in srgb, hsl(350 28% 38%) 72%, var(--foreground));
+          }
+
+          [data-timesheet-root] [data-ossy-calendar-day]:focus-within {
+            background: color-mix(in srgb, var(--color-accent, #3dcf9a) 16%, var(--surface-primary));
+            box-shadow: inset 0 0 0 2px var(--color-accent, #3dcf9a);
+          }
+
+          [data-timesheet-root] [data-ossy-calendar-day][data-day-off="true"]:focus-within {
+            background: color-mix(in srgb, var(--color-accent, #3dcf9a) 14%, color-mix(in srgb, hsl(350 32% 58%) 9%, var(--surface-primary)));
+          }
+
+          [data-timesheet-root] [data-ossy-calendar-day] [data-component="input"] {
+            font-weight: 700;
+            font-size: 14px;
+            text-align: center;
+          }
+
+          [data-timesheet-root] [data-ossy-calendar-day] [data-component="input"]:focus {
+            outline: none;
+            border-color: transparent;
+            box-shadow: none;
+          }
         `}
       </style>
       <div
@@ -152,23 +196,20 @@ export function Timesheet ({ lines = [], onChange, disabled = false, periodStart
               const off = !line.isWorkday
 
               return (
-                <div
+                <label
                   key={cell.dateKey}
                   data-ossy-calendar-day
                   data-day-off={off}
                   style={dayCell}
                 >
-                  <Text
+                  <DateDisplay
+                    value={line.date}
+                    formatOptions={{ day: 'numeric' }}
                     variant="small"
-                    style={{
-                      fontWeight: 600,
-                      fontSize: 13,
-                      lineHeight: 1.2,
-                      color: 'var(--foreground)',
-                    }}
-                  >
-                    {cell.day}
-                  </Text>
+                    as="span"
+                    data-timesheet-day-number
+                    style={dateNumber}
+                  />
                   <Input
                     type="number"
                     min={0}
@@ -180,7 +221,7 @@ export function Timesheet ({ lines = [], onChange, disabled = false, periodStart
                     style={hoursInput}
                     aria-label="timesheets.hours"
                   />
-                </div>
+                </label>
               )
             })}
           </div>

package/src/TimesheetExportCard.jsx

@@ -6,6 +6,8 @@ import { TIMESHEET_EXPORT_FONT_FAMILY } from './export-capture.js'
 /** Matches on-screen Timesheet.jsx — solid colors for html-to-image capture. */
 const FG = 'hsl(199, 90%, 10%)'
 const FG_MUTED = 'hsl(182, 15%, 42%)'
+const DATE_FG = 'hsl(182, 23%, 30%)'
+const DATE_OFF_FG = 'hsl(350, 28%, 38%)'
 const ACCENT = 'hsl(167, 89%, 43%)'
 const CELL_BG = '#ffffff'
 const OFF_BG = 'color-mix(in srgb, hsl(350 32% 58%) 9%, #ffffff)'
@@ -22,16 +24,15 @@ const calendarGrid = {
 }
 
 const dayCell = {
+  position: 'relative',
   boxSizing: 'border-box',
   display: 'flex',
-  flexDirection: 'column',
   alignItems: 'center',
-  justifyContent: 'flex-start',
-  gap: 4,
+  justifyContent: 'center',
   width: '100%',
   minHeight: 72,
   borderRadius: 2,
-  padding: '6px 4px',
+  padding: '18px 4px 8px',
   background: CELL_BG,
 }
 
@@ -175,12 +176,14 @@ export function TimesheetExportCard ({ lines = [], periodStart, captureRef }) {
             >
               <span
                 style={{
-                  display: 'block',
+                  position: 'absolute',
+                  top: 4,
+                  right: 5,
                   fontFamily: TIMESHEET_EXPORT_FONT_FAMILY,
-                  fontSize: 13,
-                  fontWeight: 600,
-                  lineHeight: 1.2,
-                  color: 'inherit',
+                  fontSize: 11,
+                  fontWeight: 500,
+                  lineHeight: 1,
+                  color: off ? DATE_OFF_FG : DATE_FG,
                 }}
               >
                 {cell.day}
@@ -190,14 +193,11 @@ export function TimesheetExportCard ({ lines = [], periodStart, captureRef }) {
                   display: 'block',
                   boxSizing: 'border-box',
                   width: '100%',
-                  maxWidth: 48,
-                  minHeight: 32,
-                  padding: '6px 4px',
                   textAlign: 'center',
                   fontFamily: TIMESHEET_EXPORT_FONT_FAMILY,
-                  fontSize: 13,
-                  fontWeight: 600,
-                  lineHeight: 1.2,
+                  fontSize: 14,
+                  fontWeight: 700,
+                  lineHeight: 1,
                   color: 'inherit',
                 }}
               >

package/src/TimesheetsProductHome.jsx

@@ -9,6 +9,8 @@ import { invokeErrorMessage } from './invoke-error-message.js'
 import { metadata as ListTimesheets } from './list.action.js'
 import { metadata as GenerateTimesheet } from './generate.action.js'
 import { metadata as OpenNewTimesheet } from './open-new.action.js'
+import { HolidayLocaleSelect } from './HolidayLocaleSelect.jsx'
+import { resolveHolidayLocale } from './holiday-locale.js'
 
 function buildMonthOptions (language, yearsBack = 1, yearsForward = 0) {
   let locale = 'en-GB'
@@ -46,6 +48,7 @@ export default function TimesheetsProductHome () {
     const n = new Date()
     return `${n.getFullYear()}-${n.getMonth()}`
   })
+  const [holidayLocale, setHolidayLocale] = useState(() => resolveHolidayLocale(language))
   const [creating, setCreating] = useState(false)
   const [sheets, setSheets] = useState([])
   const [loading, setLoading] = useState(true)
@@ -104,6 +107,7 @@ export default function TimesheetsProductHome () {
     setCreateError(null)
     const n = new Date()
     setPeriodKey(`${n.getFullYear()}-${n.getMonth()}`)
+    setHolidayLocale(resolveHolidayLocale(language))
   }
 
   const handleGenerate = async () => {
@@ -114,7 +118,7 @@ export default function TimesheetsProductHome () {
       const data = await sdk.invoke(GenerateTimesheet, {
         year: selected.year,
         monthIndex: selected.monthIndex,
-        locale: language,
+        locale: holidayLocale,
       })
       if (data?.id) {
         openDetail(data.id)
@@ -196,6 +200,12 @@ export default function TimesheetsProductHome () {
                 </Select>
               </View>
 
+              <HolidayLocaleSelect
+                value={holidayLocale}
+                disabled={generating}
+                onChange={(e) => setHolidayLocale(e.target.value)}
+              />
+
               {periodAlreadyExists && (
                 <Text variant="small" color="secondary" text="timesheets.periodExistsHint" />
               )}

package/src/en.translations.json

@@ -32,8 +32,9 @@
   "timesheets.detail.description": "Review and adjust hours, then save or export.",
   "timesheets.new": "New",
   "timesheets.createTitle": "New timesheet",
-  "timesheets.createDescription": "Choose a month to generate a prefilled timesheet.",
+  "timesheets.createDescription": "Choose a month and holiday calendar to generate a prefilled timesheet.",
   "timesheets.period": "Period",
+  "timesheets.holidayLocale": "Holiday calendar",
   "timesheets.generate": "Generate",
   "timesheets.openExisting": "Open",
   "timesheets.periodExistsHint": "A timesheet already exists for this period — Open loads it.",

package/src/holiday-locale.js

@@ -1,64 +1,6 @@
-/**
- * Map UI language / BCP 47 tags to ISO 3166-1 alpha-2 country codes
- * for `date-holidays` (CalendarClient.isWorkDay).
- *
- * Prefer an explicit region (`sv-SE` → `SE`, `en-US` → `US`).
- * Language-only tags fall back to a common country for that language.
- */
-
-/** @type {Record<string, string>} */
-const LANGUAGE_TO_COUNTRY = {
-  sv: 'SE',
-  en: 'GB',
-  nb: 'NO',
-  nn: 'NO',
-  no: 'NO',
-  da: 'DK',
-  fi: 'FI',
-  de: 'DE',
-  fr: 'FR',
-  nl: 'NL',
-  es: 'ES',
-  it: 'IT',
-  pt: 'PT',
-  pl: 'PL',
-}
-
-const DEFAULT_HOLIDAY_LOCALE = 'SE'
-
-/**
- * @param {unknown} value
- * @returns {string | null} Uppercase ISO country code, or null if invalid
- */
-export function normalizeHolidayLocale (value) {
-  if (typeof value !== 'string') return null
-  const trimmed = value.trim()
-  if (!/^[A-Za-z]{2}$/.test(trimmed)) return null
-  return trimmed.toUpperCase()
-}
-
-/**
- * @param {string | null | undefined} languageOrTag UI language or BCP 47 tag
- * @param {string} [fallback]
- * @returns {string} ISO country code for holiday calendars
- */
-export function resolveHolidayLocale (languageOrTag, fallback = DEFAULT_HOLIDAY_LOCALE) {
-  if (typeof languageOrTag === 'string' && languageOrTag.trim()) {
-    try {
-      const loc = new Intl.Locale(languageOrTag.trim())
-      const region = normalizeHolidayLocale(loc.region)
-      if (region) return region
-      const fromLanguage = LANGUAGE_TO_COUNTRY[loc.language?.toLowerCase()]
-      if (fromLanguage) return fromLanguage
-    } catch {
-      // fall through
-    }
-
-    const asCountry = normalizeHolidayLocale(languageOrTag)
-    if (asCountry) return asCountry
-  }
-
-  return normalizeHolidayLocale(fallback) || DEFAULT_HOLIDAY_LOCALE
-}
-
-export { DEFAULT_HOLIDAY_LOCALE }
+export {
+  DEFAULT_HOLIDAY_LOCALE,
+  HOLIDAY_COUNTRY_CODES,
+  normalizeHolidayLocale,
+  resolveHolidayLocale,
+} from '@ossy/calendar/holiday-locale'

package/src/index.js

@@ -15,7 +15,7 @@ export { downloadTimesheetCsv } from './download-timesheet-csv.js'
 export { downloadTimesheetImage } from './download-timesheet-image.js'
 export { downloadTimesheetPdf } from './download-timesheet-pdf.js'
 export { buildPrefilledLines, monthPeriodBounds, WORKDAY_HOURS } from './build-prefilled-lines.js'
-export { resolveHolidayLocale, DEFAULT_HOLIDAY_LOCALE } from './holiday-locale.js'
+export { resolveHolidayLocale, DEFAULT_HOLIDAY_LOCALE, HOLIDAY_COUNTRY_CODES } from './holiday-locale.js'
 export { Timesheet } from './Timesheet.jsx'
 export { TimesheetExportCard } from './TimesheetExportCard.jsx'
 export { TimesheetsFreeTool } from './TimesheetsFreeTool.jsx'

package/src/sv.translations.json

@@ -32,8 +32,9 @@
   "timesheets.detail.description": "Granska och justera timmar, spara eller exportera.",
   "timesheets.new": "Ny",
   "timesheets.createTitle": "Ny tidrapport",
-  "timesheets.createDescription": "Välj en månad för att generera en förifylld tidrapport.",
+  "timesheets.createDescription": "Välj en månad och helgdagskalender för att generera en förifylld tidrapport.",
   "timesheets.period": "Period",
+  "timesheets.holidayLocale": "Helgdagskalender",
   "timesheets.generate": "Generera",
   "timesheets.openExisting": "Öppna",
   "timesheets.periodExistsHint": "Det finns redan en tidrapport för perioden — Öppna laddar den.",