@ossy/design-system 3.0.3 → 3.0.4

package/src/dropdown/Dropdown.jsx

@@ -0,0 +1,119 @@
+import React, {
+  useState,
+  useRef,
+  useId,
+  useCallback,
+  useLayoutEffect,
+  useEffect,
+} from 'react'
+import { createPortal } from 'react-dom'
+
+function mergeRefs (...refs) {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (ref == null) return
+      if (typeof ref === 'function') ref(node)
+      else ref.current = node
+    })
+  }
+}
+
+function supportsAnchorPositioning () {
+  if (typeof CSS === 'undefined' || typeof CSS.supports !== 'function') return false
+  return CSS.supports('top', 'anchor(bottom)') || CSS.supports('position-anchor', 'auto')
+}
+
+export const Dropdown = ({
+  trigger,
+  children
+}) => {
+  const triggerRef = useRef(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const [portalRoot, setPortalRoot] = useState(null)
+  const anchorName = `--ossy-dropdown-${useId().replace(/:/g, '')}`
+  const useAnchors = supportsAnchorPositioning()
+
+  useEffect(() => {
+    setPortalRoot(document.body)
+  }, [])
+
+  useLayoutEffect(() => {
+    if (!useAnchors) return
+    const el = triggerRef.current
+    if (!el) return
+    el.style.setProperty('anchor-name', anchorName)
+    return () => el.style.removeProperty('anchor-name')
+  }, [anchorName, useAnchors, isOpen])
+
+  const setContentRef = useCallback((node) => {
+    if (!node) return
+    node.style.setProperty('position', 'fixed')
+    node.style.setProperty('z-index', '101')
+    node.style.setProperty('display', 'inline-block')
+
+    const triggerEl = triggerRef.current
+    if (!triggerEl) return
+
+    if (useAnchors) {
+      node.style.setProperty('position-anchor', anchorName)
+      node.style.setProperty('top', 'anchor(bottom)')
+      node.style.setProperty('left', 'anchor(left)')
+      return
+    }
+
+    const rect = triggerEl.getBoundingClientRect()
+    node.style.setProperty('top', `${rect.bottom}px`)
+    node.style.setProperty('left', `${rect.left}px`)
+  }, [anchorName, useAnchors])
+
+  if (!React.isValidElement(trigger)) {
+    throw new Error(
+      'Dropdown `trigger` must be a single React element (e.g. `<Button />`).'
+    )
+  }
+
+  if (trigger.type === React.Fragment) {
+    throw new Error(
+      'Dropdown `trigger` cannot be a Fragment; pass one element such as `<Button />`.'
+    )
+  }
+
+  const triggerRefFromProps = trigger.props?.ref ?? trigger.ref
+  const mergedRef = mergeRefs(triggerRef, triggerRefFromProps)
+
+  const triggerNode = React.cloneElement(trigger, {
+    ref: mergedRef,
+    onClick: (event) => {
+      trigger.props.onClick?.(event)
+      if (event.defaultPrevented) return
+      setIsOpen((open) => !open)
+    },
+  })
+
+  return (
+    <>
+      {triggerNode}
+      {isOpen && portalRoot && createPortal(
+        <>
+          <div
+            style={{
+              position: 'fixed',
+              inset: 0,
+              zIndex: 100,
+              backgroundColor: 'hsla(0, 0%, 0%, .1)',
+            }}
+            onClick={() => setIsOpen(false)}
+            aria-hidden
+          />
+          <div
+            ref={setContentRef}
+            onClick={() => setIsOpen(false)}
+          >
+            {children}
+          </div>
+        </>,
+        portalRoot
+      )}
+    </>
+  )
+}

package/src/dropdown/Dropdown.stories.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Dropdown } from './Dropdown.jsx'
+import { ContextMenu } from '../context-menu/index.js'
+import { Button } from '../button/index.js'
+
+export default {
+  title: 'Design System/Other/Dropdown',
+  component: Dropdown,
+  render: () => (
+    <Dropdown trigger={<Button variant="neutral">Click me</Button>}>
+      <ContextMenu>
+        <ContextMenu.Item>foo</ContextMenu.Item>
+        <ContextMenu.Separator />
+        <ContextMenu.Item>bar</ContextMenu.Item>
+      </ContextMenu>
+    </Dropdown>
+  ),
+}
+
+export const Default = {}

package/src/dropdown/index.js

@@ -0,0 +1 @@
+export * from './Dropdown.jsx'

package/src/empty-state/EmptyState.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { useLocale } from '../locale/index.js'
+
+export const EmptyState = ({
+  message,
+  as: Element = 'span',
+  style = {},
+  ...props
+}) => {
+  const { t } = useLocale()
+  const displayMessage = message ?? t('design-system.emptyState.message')
+
+  return (
+  <Element
+    data-empty-state
+    style={{
+      display: 'block',
+      fontSize: '12px',
+      color: 'var(--text-muted-color, hsl(0, 0%, 55%))',
+      padding: '12px 20px',
+      ...style,
+    }}
+    {...props}
+  >
+    {displayMessage}
+  </Element>
+  )
+}

package/src/empty-state/EmptyState.stories.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { View } from '../view'
+import { EmptyState } from './EmptyState.jsx'
+
+export default {
+  title: 'Design System/Feedback/EmptyState',
+  component: EmptyState,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Muted placeholder when a list or panel has no items. Defaults to the locale key `design-system.emptyState.message`.',
+      },
+    },
+  },
+}
+
+export const Default = () => (
+  <View surface="primary" roundness="m" inset="m" style={{ maxWidth: 360 }}>
+    <EmptyState />
+  </View>
+)
+
+export const CustomMessage = () => (
+  <View surface="primary" roundness="m" inset="m" style={{ maxWidth: 360 }}>
+    <EmptyState message="No resources in this folder yet." />
+  </View>
+)
+
+export const AsParagraph = () => (
+  <View surface="secondary" roundness="m" inset="m" style={{ maxWidth: 360 }}>
+    <EmptyState as="p" message="Nothing scheduled for this week." />
+  </View>
+)

package/src/empty-state/index.js

@@ -0,0 +1 @@
+export * from './EmptyState.jsx'

package/src/en.translations.json

@@ -0,0 +1,46 @@
+{
+  "design-system.emptyState.message": "Empty",
+  "design-system.fields.addTagPlaceholder": "Add tag…",
+  "design-system.fields.addTag": "Add",
+  "design-system.fields.noTagSuggestions": "No suggestions — add a tag below.",
+  "design-system.fields.booleanOn": "On",
+  "design-system.fields.booleanOff": "Off",
+  "design-system.fields.datePlaceholder": "Select date…",
+  "design-system.fields.datePickerLabel": "Choose date",
+  "design-system.fields.datePrevMonth": "Previous month",
+  "design-system.fields.dateNextMonth": "Next month",
+  "design-system.fields.dateClear": "Clear date",
+  "design-system.fields.dateRangeStart": "Start",
+  "design-system.fields.dateRangeEnd": "End",
+  "design-system.fields.dateRangeAdd": "Add range",
+  "design-system.fields.dateRangeRemove": "Remove range",
+  "design-system.fields.dateRangeItem": "Range {index}",
+  "design-system.upload.label": "Upload",
+  "design-system.overview": "Overview",
+  "design-system.add": "Add",
+  "design-system.loading": "Loading...",
+  "design-system.errorLoadingProfile": "Error loading profile",
+  "design-system.goToHomepage": "Go to homepage",
+  "design-system.signIn": "Sign in",
+  "design-system.tryAgain": "Try again",
+  "design-system.notifyMe": "Notify me",
+  "design-system.cancel": "Cancel",
+  "design-system.save": "Save",
+  "design-system.comingSoon": "Coming soon",
+  "design-system.dev.pagesPanel.title": "Dev",
+  "design-system.dev.pagesPanel.currentPage": "Current page",
+  "design-system.dev.pagesPanel.id": "id",
+  "design-system.dev.pagesPanel.path": "path",
+  "design-system.dev.pagesPanel.url": "url",
+  "design-system.dev.pagesPanel.viewPackage": "View package ({package})",
+  "design-system.dev.pagesPanel.pages": "Pages ({count})",
+  "design-system.dev.pagesPanel.openPage": "Open page",
+  "design-system.dev.pagesPanel.accessLabel": "Access: {access}",
+  "design-system.dev.pagesPanel.credentialsLabel": "Credentials: {credentials}",
+  "design-system.story.pageTitle": "Example page",
+  "design-system.story.pageDescription": "Short description for layout and header demos.",
+  "design-system.story.analyticsTitle": "Analytics",
+  "design-system.story.analyticsDescription": "Metrics and reporting for your workspace.",
+  "design-system.story.toolsTitle": "Tools",
+  "design-system.story.toolsDescription": "Utilities and integrations you can enable for this workspace."
+}

package/src/fields/DatePicker.jsx

@@ -0,0 +1,233 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { View } from '../view'
+import { Text } from '../text'
+import { Button } from '../button'
+import { useLocale } from '../locale/index.js'
+import {
+  dateInputValueToMs,
+  formatDisplayDate,
+  msToDateInputValue,
+} from './time.js'
+
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate()
+}
+
+function getMondayFirstOffset(year, month) {
+  return (new Date(year, month, 1).getDay() + 6) % 7
+}
+
+const calendarPanelStyle = {
+  position: 'absolute',
+  top: 'calc(100% + var(--space-xs, 4px))',
+  left: 0,
+  zIndex: 101,
+  minWidth: 280,
+  boxShadow: '0 8px 24px hsla(0, 0%, 0%, 0.12)',
+}
+
+/**
+ * Custom date picker — displays a calendar popover and persists Unix ms (ADR 0004).
+ */
+export function DatePicker({
+  id,
+  name,
+  value,
+  onChange,
+  disabled,
+  placeholder,
+  minMs,
+  maxMs,
+  style = {},
+  ...rest
+}) {
+  const { t, language } = useLocale()
+  const containerRef = useRef(null)
+  const [open, setOpen] = useState(false)
+
+  const ms = useMemo(() => {
+    if (typeof value === 'number' && !Number.isNaN(value)) return value
+    if (value == null || value === '') return undefined
+    return dateInputValueToMs(msToDateInputValue(value))
+  }, [value])
+
+  const today = new Date()
+  const [viewYear, setViewYear] = useState(ms ? new Date(ms).getFullYear() : today.getFullYear())
+  const [viewMonth, setViewMonth] = useState(ms ? new Date(ms).getMonth() : today.getMonth())
+
+  useEffect(() => {
+    if (ms == null) return
+    const d = new Date(ms)
+    setViewYear(d.getFullYear())
+    setViewMonth(d.getMonth())
+  }, [ms])
+
+  useEffect(() => {
+    if (!open) return
+    const onDocClick = (event) => {
+      if (!containerRef.current?.contains(event.target)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onDocClick)
+    return () => document.removeEventListener('mousedown', onDocClick)
+  }, [open])
+
+  const commitMs = useCallback(
+    (nextMs) => {
+      onChange({
+        target: {
+          id: id ?? name,
+          name,
+          type: 'number',
+          value: nextMs,
+        },
+      })
+      setOpen(false)
+    },
+    [id, name, onChange],
+  )
+
+  const monthLabel = useMemo(() => {
+    const locale = language === 'sv' ? 'sv-SE' : 'en-GB'
+    return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(
+      new Date(viewYear, viewMonth, 1),
+    )
+  }, [viewYear, viewMonth, language])
+
+  const weekdayLabels = useMemo(() => {
+    const locale = language === 'sv' ? 'sv-SE' : 'en-GB'
+    const monday = new Date(2025, 0, 6)
+    return Array.from({ length: 7 }, (_, i) => {
+      const d = new Date(monday)
+      d.setDate(monday.getDate() + i)
+      return new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(d)
+    })
+  }, [language])
+
+  const todayKey = msToDateInputValue(today.getTime())
+  const daysInMonth = getDaysInMonth(viewYear, viewMonth)
+  const firstDayOffset = getMondayFirstOffset(viewYear, viewMonth)
+  const cells = []
+  for (let i = 0; i < firstDayOffset; i++) cells.push(null)
+  for (let d = 1; d <= daysInMonth; d++) cells.push(d)
+
+  const selectedKey = ms != null ? msToDateInputValue(ms) : null
+  const display =
+    ms != null
+      ? formatDisplayDate(ms, language)
+      : (placeholder ?? t('design-system.fields.datePlaceholder'))
+
+  const isDayDisabled = (dayMs) => {
+    if (minMs != null && dayMs < minMs) return true
+    if (maxMs != null && dayMs > maxMs) return true
+    return false
+  }
+
+  return (
+    <View ref={containerRef} style={{ position: 'relative', ...style }} {...rest}>
+      <Button
+        type="button"
+        id={id}
+        variant="neutral"
+        disabled={disabled}
+        suffix="calendar"
+        onClick={() => !disabled && setOpen(o => !o)}
+        style={{ justifyContent: 'flex-start', width: '100%' }}
+        aria-expanded={open}
+        aria-haspopup="dialog"
+      >
+        {display}
+      </Button>
+      {open && (
+        <View
+          surface="primary"
+          roundness="m"
+          inset="m"
+          gap="s"
+          role="dialog"
+          aria-label={t('design-system.fields.datePickerLabel')}
+          style={calendarPanelStyle}
+        >
+          <View layout="row" justifyContent="space-between" alignItems="center">
+            <Button
+              type="button"
+              variant="neutral"
+              size="s"
+              aria-label={t('design-system.fields.datePrevMonth')}
+              onClick={() => {
+                if (viewMonth === 0) {
+                  setViewMonth(11)
+                  setViewYear(y => y - 1)
+                } else {
+                  setViewMonth(m => m - 1)
+                }
+              }}
+            >
+              ‹
+            </Button>
+            <Text weight="medium">{monthLabel}</Text>
+            <Button
+              type="button"
+              variant="neutral"
+              size="s"
+              aria-label={t('design-system.fields.dateNextMonth')}
+              onClick={() => {
+                if (viewMonth === 11) {
+                  setViewMonth(0)
+                  setViewYear(y => y + 1)
+                } else {
+                  setViewMonth(m => m + 1)
+                }
+              }}
+            >
+              ›
+            </Button>
+          </View>
+          <View
+            layout="row"
+            gap="xs"
+            style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)' }}
+          >
+            {weekdayLabels.map(label => (
+              <Text key={label} variant="small" style={{ textAlign: 'center', opacity: 0.6 }}>
+                {label}
+              </Text>
+            ))}
+          </View>
+          <View gap="xs" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)' }}>
+            {cells.map((day, idx) => {
+              if (!day) return <View key={`empty-${idx}`} />
+              const dateKey = `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+              const dayMs = dateInputValueToMs(dateKey)
+              const isSelected = selectedKey === dateKey
+              const isToday = todayKey === dateKey
+              const dayDisabled = isDayDisabled(dayMs)
+              return (
+                <Button
+                  key={dateKey}
+                  type="button"
+                  variant={isSelected ? 'tag-active' : isToday ? 'tag' : 'neutral'}
+                  size="s"
+                  disabled={dayDisabled}
+                  onClick={() => !dayDisabled && commitMs(dayMs)}
+                  style={{ padding: '8px 4px', minWidth: 0 }}
+                >
+                  {day}
+                </Button>
+              )
+            })}
+          </View>
+          {ms != null && (
+            <Button
+              type="button"
+              variant="link"
+              size="s"
+              onClick={() => commitMs(undefined)}
+            >
+              {t('design-system.fields.dateClear')}
+            </Button>
+          )}
+        </View>
+      )}
+    </View>
+  )
+}