@levino/shipyard-base 0.5.11 → 0.6.0

package/astro/components/Admonition.astro

@@ -0,0 +1,44 @@
+---
+/**
+ * Admonition component for displaying callouts/alerts.
+ * Supports: note, tip, info, warning, danger
+ *
+ * @example
+ * ```astro
+ * <Admonition type="note">
+ *   This is a note
+ * </Admonition>
+ *
+ * <Admonition type="warning" title="Be Careful">
+ *   This is a warning with custom title
+ * </Admonition>
+ * ```
+ */
+export type AdmonitionType = 'note' | 'tip' | 'info' | 'warning' | 'danger'
+
+interface Props {
+  type: AdmonitionType
+  title?: string
+}
+
+const { type, title } = Astro.props
+
+const defaultTitles: Record<AdmonitionType, string> = {
+  note: 'Note',
+  tip: 'Tip',
+  info: 'Info',
+  warning: 'Warning',
+  danger: 'Danger',
+}
+
+const displayTitle = title ?? defaultTitles[type]
+---
+
+<div class={`admonition admonition-${type}`} data-admonition-type={type}>
+  <div class="admonition-heading">
+    {displayTitle}
+  </div>
+  <div class="admonition-content">
+    <slot />
+  </div>
+</div>

package/astro/components/AnnouncementBar.astro

@@ -0,0 +1,131 @@
+---
+import type { AnnouncementBar } from '../../src/schemas/config'
+
+interface Props {
+  config: AnnouncementBar
+}
+
+const { config } = Astro.props
+const {
+  id = 'announcement-bar',
+  content,
+  backgroundColor = 'primary',
+  textColor = 'primary-content',
+  isCloseable = true,
+} = config
+
+// Determine CSS classes for colors
+const getDaisyClass = (
+  color: string,
+  type: 'bg' | 'text',
+): string | undefined => {
+  const daisyColors = [
+    'primary',
+    'secondary',
+    'accent',
+    'info',
+    'success',
+    'warning',
+    'error',
+    'primary-content',
+    'secondary-content',
+    'accent-content',
+    'base-content',
+  ]
+  if (daisyColors.includes(color)) {
+    return `${type}-${color}`
+  }
+  return undefined
+}
+
+const bgClass = getDaisyClass(backgroundColor, 'bg')
+const textClass = getDaisyClass(textColor, 'text')
+
+// Use custom style if not a DaisyUI color
+const customStyle = [
+  bgClass ? undefined : `background-color: ${backgroundColor}`,
+  textClass ? undefined : `color: ${textColor}`,
+]
+  .filter(Boolean)
+  .join('; ')
+---
+
+<div
+  id={id}
+  class:list={[
+    'announcement-bar',
+    'py-2 px-4 text-center text-sm font-medium relative',
+    bgClass,
+    textClass,
+  ]}
+  style={customStyle || undefined}
+  role="banner"
+>
+  <div class="announcement-content" set:html={content} />
+  {
+    isCloseable && (
+      <button
+        type="button"
+        class="announcement-close absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:opacity-70 transition-opacity"
+        aria-label="Close announcement"
+        data-announcement-id={id}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    )
+  }
+</div>
+
+<script>
+  // Handle announcement bar dismissal with localStorage persistence
+  document.addEventListener('DOMContentLoaded', () => {
+    const closeButtons = document.querySelectorAll('.announcement-close')
+
+    closeButtons.forEach((button) => {
+      const announcementId = button.getAttribute('data-announcement-id')
+      const storageKey = `shipyard-announcement-dismissed-${announcementId}`
+
+      // Check if already dismissed
+      if (localStorage.getItem(storageKey) === 'true') {
+        const bar = button.closest('.announcement-bar')
+        if (bar) {
+          bar.remove()
+        }
+        return
+      }
+
+      // Handle close click
+      button.addEventListener('click', () => {
+        const bar = button.closest('.announcement-bar')
+        if (bar) {
+          bar.remove()
+          localStorage.setItem(storageKey, 'true')
+        }
+      })
+    })
+  })
+</script>
+
+<style>
+  .announcement-content :global(a) {
+    text-decoration: underline;
+    font-weight: 600;
+  }
+
+  .announcement-content :global(a:hover) {
+    opacity: 0.8;
+  }
+</style>

package/astro/components/GlobalDesktopNavigation.astro

@@ -2,6 +2,7 @@
 import type { Config } from '../../src/schemas/config'
 import { cn } from '../../src/tools/cn'
 import LanguageSwitcher from './LanguageSwitcher.astro'
+import ThemeToggle from './ThemeToggle.astro'
 
 type Props = Pick<Config, 'brand' | 'navigation'> & { showBrand: boolean }
 
@@ -69,6 +70,7 @@ const { brand, navigation, showBrand = false } = Astro.props as Props
         )
       }
     </ul>
+    <ThemeToggle class="btn btn-ghost btn-circle" />
     <LanguageSwitcher variant="dropdown" />
   </div>
 </div>

package/astro/components/Npm2YarnScript.astro

@@ -0,0 +1,54 @@
+---
+/**
+ * Client-side script for npm2yarn tabs functionality.
+ * Include this component once in your layout to enable tab switching.
+ */
+---
+
+<script>
+  // Initialize npm2yarn tabs
+  document.addEventListener('DOMContentLoaded', () => {
+    const tabContainers = document.querySelectorAll('.npm2yarn-tabs')
+
+    tabContainers.forEach((container) => {
+      const buttons = container.querySelectorAll('.tab-button')
+      const contents = container.querySelectorAll('.tab-content')
+
+      buttons.forEach((button) => {
+        button.addEventListener('click', () => {
+          const tabId = button.getAttribute('data-tab')
+
+          // Update buttons
+          buttons.forEach((btn) => btn.classList.remove('active'))
+          button.classList.add('active')
+
+          // Update content
+          contents.forEach((content) => {
+            const contentId = content.getAttribute('data-tab-content')
+            if (contentId === tabId) {
+              content.classList.add('active')
+            } else {
+              content.classList.remove('active')
+            }
+          })
+
+          // Store preference in localStorage
+          if (tabId) {
+            localStorage.setItem('shipyard-package-manager', tabId)
+          }
+        })
+      })
+
+      // Restore preference from localStorage
+      const savedPm = localStorage.getItem('shipyard-package-manager')
+      if (savedPm) {
+        const savedButton = container.querySelector(
+          `.tab-button[data-tab="${savedPm}"]`,
+        )
+        if (savedButton) {
+          ;(savedButton as HTMLButtonElement).click()
+        }
+      }
+    })
+  })
+</script>

package/astro/components/SidebarElement.astro

@@ -30,20 +30,72 @@ const isActiveOrHasActiveChild = (entryValue: Entry[string]): boolean => {
   const label = entryValue.label ?? key;
   const isActive = entryValue.href && normalizePath(entryValue.href) === normalizePath(currentPath);
   const hasActiveChild = entryValue.subEntry && Object.values(entryValue.subEntry).some(isActiveOrHasActiveChild);
+  const hasChildren = entryValue.subEntry && Object.keys(entryValue.subEntry).length > 0;
+  const isCollapsible = hasChildren && (entryValue.collapsible !== false);
+  // Auto-expand if has active child, otherwise use collapsed setting (default true)
+  const shouldBeOpen = hasActiveChild || !(entryValue.collapsed ?? true);
+
+  // Extract badge info from customProps
+  const badge = entryValue.customProps?.badge as string | undefined;
+  const badgeType = (entryValue.customProps?.badgeType as string) ?? 'info';
+  const badgeClass = badge ? `badge badge-${badgeType} badge-sm` : undefined;
+
+  // Helper to render label with optional badge
+  const renderLabelWithBadge = (labelContent: any, extraClass?: string) => (
+    <span class={cn('flex items-center gap-2', extraClass)}>
+      {labelContent}
+      {badge && <span class={badgeClass}>{badge}</span>}
+    </span>
+  );
+
   return (
     <li class={entryValue.className}>
-      {entryValue.href
-        ? entryValue.labelHtml
-          ? <Fragment set:html={entryValue.labelHtml} />
-          : <a href={entryValue.href} class={cn({ 'bg-base-200/50 font-medium text-primary': isActive })}>{label}</a>
-        : entryValue.labelHtml
-          ? <Fragment set:html={entryValue.labelHtml} />
-          : <span class='menu-title'>{label}</span>}
-      {entryValue.subEntry ? (
-        <ul>
-          <Astro.self entry={entryValue.subEntry} currentPath={currentPath} />
-        </ul>
-      ) : null}
+      {hasChildren && isCollapsible ? (
+        // Collapsible category with children
+        <details open={shouldBeOpen}>
+          <summary>
+            {entryValue.href ? (
+              entryValue.labelHtml
+                ? <Fragment set:html={entryValue.labelHtml} />
+                : <a href={entryValue.href} class={cn({ 'bg-base-200/50 font-medium text-primary': isActive })}>{renderLabelWithBadge(label)}</a>
+            ) : (
+              entryValue.labelHtml
+                ? <Fragment set:html={entryValue.labelHtml} />
+                : <span class='menu-title'>{renderLabelWithBadge(label)}</span>
+            )}
+          </summary>
+          <ul>
+            <Astro.self entry={entryValue.subEntry} currentPath={currentPath} />
+          </ul>
+        </details>
+      ) : hasChildren ? (
+        // Non-collapsible category with children (always expanded)
+        <>
+          {entryValue.href ? (
+            entryValue.labelHtml
+              ? <Fragment set:html={entryValue.labelHtml} />
+              : <a href={entryValue.href} class={cn({ 'bg-base-200/50 font-medium text-primary': isActive })}>{renderLabelWithBadge(label)}</a>
+          ) : (
+            entryValue.labelHtml
+              ? <Fragment set:html={entryValue.labelHtml} />
+              : <span class='menu-title'>{renderLabelWithBadge(label)}</span>
+          )}
+          <ul>
+            <Astro.self entry={entryValue.subEntry} currentPath={currentPath} />
+          </ul>
+        </>
+      ) : (
+        // Leaf node (no children)
+        entryValue.href ? (
+          entryValue.labelHtml
+            ? <Fragment set:html={entryValue.labelHtml} />
+            : <a href={entryValue.href} class={cn({ 'bg-base-200/50 font-medium text-primary': isActive })}>{renderLabelWithBadge(label)}</a>
+        ) : (
+          entryValue.labelHtml
+            ? <Fragment set:html={entryValue.labelHtml} />
+            : <span class='menu-title'>{renderLabelWithBadge(label)}</span>
+        )
+      )}
     </li>
   )
 })}

package/astro/components/SidebarNavigation.astro

@@ -2,6 +2,7 @@
 import { cn } from '../../src/tools/cn'
 import LanguageSwitcher from './LanguageSwitcher.astro'
 import SidebarElement from './SidebarElement.astro'
+import ThemeToggle from './ThemeToggle.astro'
 import type { Entry } from './types'
 
 interface Props {
@@ -36,6 +37,10 @@ const withLocale = (path: string) =>
       }
     </li>
     <LanguageSwitcher variant="list" />
+    <li class="flex flex-row items-center gap-2 px-4 py-2">
+      <span class="text-sm opacity-70">Theme</span>
+      <ThemeToggle />
+    </li>
     <div class={cn("divider my-1 block md:hidden", { hidden: !local })}></div>
   </div>
   {local && <div data-testid="sidebar-local-nav"><SidebarElement entry={local} /></div>}

package/astro/components/TabItem.astro

@@ -0,0 +1,39 @@
+---
+/**
+ * TabItem component for use inside Tabs.
+ *
+ * @example
+ * ```astro
+ * <Tabs items={['Tab 1', 'Tab 2']}>
+ *   <TabItem value="Tab 1">
+ *     Content for tab 1
+ *   </TabItem>
+ *   <TabItem value="Tab 2">
+ *     Content for tab 2
+ *   </TabItem>
+ * </Tabs>
+ * ```
+ */
+
+interface Props {
+  /**
+   * The value that matches the tab button label
+   */
+  value: string
+  /**
+   * Whether this tab is shown by default
+   */
+  default?: boolean
+}
+
+const { value, default: isDefault } = Astro.props
+---
+
+<div
+  class="shipyard-tab-panel"
+  role="tabpanel"
+  data-tab-value={value}
+  hidden={!isDefault}
+>
+  <slot />
+</div>

package/astro/components/Tabs.astro

@@ -0,0 +1,200 @@
+---
+/**
+ * Tabs component for organizing content into tabbed panels.
+ * Supports groupId for syncing tabs across the page.
+ *
+ * @example
+ * ```astro
+ * <Tabs items={['JavaScript', 'TypeScript', 'Python']}>
+ *   <TabItem value="JavaScript">
+ *     JS content
+ *   </TabItem>
+ *   <TabItem value="TypeScript">
+ *     TS content
+ *   </TabItem>
+ *   <TabItem value="Python">
+ *     Python content
+ *   </TabItem>
+ * </Tabs>
+ * ```
+ */
+
+interface Props {
+  /**
+   * Array of tab labels
+   */
+  items: string[]
+  /**
+   * Group ID for syncing tabs across the page
+   */
+  groupId?: string
+  /**
+   * Whether to persist selection in URL query string
+   */
+  queryString?: boolean | string
+  /**
+   * Default selected tab (by value/label)
+   */
+  defaultValue?: string
+}
+
+const { items, groupId, queryString, defaultValue } = Astro.props
+
+const tabId = `tabs-${Math.random().toString(36).slice(2, 9)}`
+const defaultTab = defaultValue ?? items[0]
+---
+
+<div
+  class="shipyard-tabs"
+  data-tabs-id={tabId}
+  data-group-id={groupId}
+  data-query-string={queryString === true ? groupId : (queryString || undefined)}
+>
+  <div class="shipyard-tabs-list" role="tablist" aria-label="Content tabs">
+    {items.map((item, index) => (
+      <button
+        type="button"
+        role="tab"
+        class="shipyard-tab-button"
+        id={`${tabId}-tab-${index}`}
+        aria-controls={`${tabId}-panel-${index}`}
+        aria-selected={item === defaultTab ? 'true' : 'false'}
+        tabindex={item === defaultTab ? 0 : -1}
+        data-tab-value={item}
+      >
+        {item}
+      </button>
+    ))}
+  </div>
+  <slot />
+</div>
+
+<script>
+  // Tab synchronization and interaction logic
+  function initTabs() {
+    const tabContainers = document.querySelectorAll('.shipyard-tabs')
+
+    tabContainers.forEach((container) => {
+      const buttons = container.querySelectorAll<HTMLButtonElement>('.shipyard-tab-button')
+      const panels = container.querySelectorAll<HTMLDivElement>('.shipyard-tab-panel')
+      const groupId = container.getAttribute('data-group-id')
+      const queryStringParam = container.getAttribute('data-query-string')
+
+      // Check URL for initial selection
+      if (queryStringParam) {
+        const urlParams = new URLSearchParams(window.location.search)
+        const urlValue = urlParams.get(queryStringParam)
+        if (urlValue) {
+          const matchingButton = Array.from(buttons).find(
+            (button) => button.getAttribute('data-tab-value') === urlValue
+          )
+          if (matchingButton) {
+            selectTab(matchingButton, buttons, panels, false)
+          }
+        }
+      }
+
+      // Check localStorage for group selection
+      if (groupId) {
+        const storedValue = localStorage.getItem(`shipyard-tabs-${groupId}`)
+        if (storedValue) {
+          const matchingButton = Array.from(buttons).find(
+            (button) => button.getAttribute('data-tab-value') === storedValue
+          )
+          if (matchingButton) {
+            selectTab(matchingButton, buttons, panels, false)
+          }
+        }
+      }
+
+      buttons.forEach((button) => {
+        button.addEventListener('click', () => {
+          selectTab(button, buttons, panels, true)
+
+          const value = button.getAttribute('data-tab-value')
+
+          // Sync with other tabs in the same group
+          if (groupId && value) {
+            localStorage.setItem(`shipyard-tabs-${groupId}`, value)
+            syncTabsInGroup(groupId, value)
+          }
+
+          // Update URL query string
+          if (queryStringParam && value) {
+            const url = new URL(window.location.href)
+            url.searchParams.set(queryStringParam, value)
+            window.history.replaceState({}, '', url.toString())
+          }
+        })
+
+        // Keyboard navigation
+        button.addEventListener('keydown', (event: KeyboardEvent) => {
+          const currentIndex = Array.from(buttons).indexOf(button)
+          let newIndex = currentIndex
+
+          if (event.key === 'ArrowRight') {
+            newIndex = (currentIndex + 1) % buttons.length
+          } else if (event.key === 'ArrowLeft') {
+            newIndex = (currentIndex - 1 + buttons.length) % buttons.length
+          } else if (event.key === 'Home') {
+            newIndex = 0
+          } else if (event.key === 'End') {
+            newIndex = buttons.length - 1
+          } else {
+            return
+          }
+
+          event.preventDefault()
+          buttons[newIndex].focus()
+          buttons[newIndex].click()
+        })
+      })
+    })
+  }
+
+  function selectTab(
+    selectedButton: HTMLButtonElement,
+    allButtons: NodeListOf<HTMLButtonElement>,
+    panels: NodeListOf<HTMLDivElement>,
+    focus: boolean
+  ) {
+    const selectedValue = selectedButton.getAttribute('data-tab-value')
+
+    allButtons.forEach((button, index) => {
+      const isSelected = button === selectedButton
+      button.setAttribute('aria-selected', isSelected ? 'true' : 'false')
+      button.tabIndex = isSelected ? 0 : -1
+
+      if (panels[index]) {
+        panels[index].hidden = !isSelected
+      }
+    })
+
+    if (focus) {
+      selectedButton.focus()
+    }
+  }
+
+  function syncTabsInGroup(groupId: string, value: string) {
+    const tabContainers = document.querySelectorAll(
+      `.shipyard-tabs[data-group-id="${groupId}"]`
+    )
+
+    tabContainers.forEach((container) => {
+      const buttons = container.querySelectorAll<HTMLButtonElement>('.shipyard-tab-button')
+      const panels = container.querySelectorAll<HTMLDivElement>('.shipyard-tab-panel')
+
+      const matchingButton = Array.from(buttons).find(
+        (button) => button.getAttribute('data-tab-value') === value
+      )
+
+      if (matchingButton) {
+        selectTab(matchingButton, buttons, panels, false)
+      }
+    })
+  }
+
+  // Initialize on DOMContentLoaded and after Astro page transitions
+  document.addEventListener('DOMContentLoaded', initTabs)
+  document.addEventListener('astro:page-load', initTabs)
+</script>

package/astro/components/ThemeToggle.astro

@@ -0,0 +1,98 @@
+---
+/**
+ * Theme toggle component for switching between light and dark modes.
+ * Uses DaisyUI themes and persists preference in localStorage.
+ */
+interface Props {
+  /**
+   * The light theme name (DaisyUI theme).
+   * @default 'light'
+   */
+  lightTheme?: string
+  /**
+   * The dark theme name (DaisyUI theme).
+   * @default 'dark'
+   */
+  darkTheme?: string
+  /**
+   * Additional CSS classes for the toggle button.
+   */
+  class?: string
+}
+
+const {
+  lightTheme = 'light',
+  darkTheme = 'dark',
+  class: className,
+} = Astro.props
+---
+
+<label class:list={['swap swap-rotate', className]}>
+  <input
+    type="checkbox"
+    class="theme-controller"
+    data-light-theme={lightTheme}
+    data-dark-theme={darkTheme}
+  />
+  <!-- Sun icon (light mode) -->
+  <svg
+    class="swap-off h-6 w-6 fill-current"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
+    ></path>
+  </svg>
+  <!-- Moon icon (dark mode) -->
+  <svg
+    class="swap-on h-6 w-6 fill-current"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
+    ></path>
+  </svg>
+</label>
+
+<script>
+  // Initialize theme on page load
+  function initTheme() {
+    const toggles = document.querySelectorAll<HTMLInputElement>('.theme-controller')
+
+    toggles.forEach((toggle) => {
+      const lightTheme = toggle.dataset.lightTheme || 'light'
+      const darkTheme = toggle.dataset.darkTheme || 'dark'
+
+      // Get saved theme or detect system preference
+      const savedTheme = localStorage.getItem('theme')
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+      const currentTheme = savedTheme || (prefersDark ? darkTheme : lightTheme)
+
+      // Set initial state
+      document.documentElement.setAttribute('data-theme', currentTheme)
+      toggle.checked = currentTheme === darkTheme
+
+      // Handle toggle changes
+      toggle.addEventListener('change', () => {
+        const newTheme = toggle.checked ? darkTheme : lightTheme
+        document.documentElement.setAttribute('data-theme', newTheme)
+        localStorage.setItem('theme', newTheme)
+
+        // Sync other toggles on the page
+        toggles.forEach((otherToggle) => {
+          if (otherToggle !== toggle) {
+            otherToggle.checked = toggle.checked
+          }
+        })
+      })
+    })
+  }
+
+  // Run on initial load
+  initTheme()
+
+  // Re-run on Astro navigation (View Transitions)
+  document.addEventListener('astro:after-swap', initTheme)
+</script>