@chassis-ui/docs 0.1.10 → 0.3.0

package/src/js/icon-loader.js

@@ -1,229 +0,0 @@
-/**
- * Chassis Icons SVG Sprite Loader
- *
- * Efficiently loads and caches the chassis-icons.svg sprite using localStorage.
- * This reduces page size by avoiding inline SVG and enables browser caching.
- *
- * Features:
- * - localStorage caching with version control
- * - Automatic fallback on cache miss or corruption
- * - Network request deduplication
- * - Small footprint and fast execution
- */
-
-;(function () {
-  'use strict'
-
-  // Configuration
-  const CACHE_KEY = 'chassis-icons-sprite'
-  const VERSION_KEY = 'chassis-icons-version'
-  const CURRENT_VERSION = '1.0.0' // Update when icons change
-  const SVG_URL = '/static/icons/chassis-icons.svg' // Icons SVG sprite path
-
-  // State management
-  let loadPromise = null
-
-  /**
-   * Get SVG sprite from localStorage cache
-   * @returns {string|null} Cached SVG content or null if not found/invalid
-   */
-  function getCachedSprite() {
-    try {
-      const cachedVersion = localStorage.getItem(VERSION_KEY)
-      const cachedSprite = localStorage.getItem(CACHE_KEY)
-
-      if (cachedVersion === CURRENT_VERSION && cachedSprite) {
-        return cachedSprite
-      }
-    } catch (error) {
-      console.warn('Failed to read icon cache:', error)
-    }
-
-    return null
-  }
-
-  /**
-   * Store SVG sprite in localStorage cache
-   * @param {string} spriteContent - SVG content to cache
-   */
-  function setCachedSprite(spriteContent) {
-    try {
-      localStorage.setItem(VERSION_KEY, CURRENT_VERSION)
-      localStorage.setItem(CACHE_KEY, spriteContent)
-    } catch (error) {
-      console.warn('Failed to cache icon sprite:', error)
-      // Handle localStorage quota exceeded or other errors
-      // Clear old cache and try again
-      try {
-        localStorage.removeItem(CACHE_KEY)
-        localStorage.removeItem(VERSION_KEY)
-        localStorage.setItem(VERSION_KEY, CURRENT_VERSION)
-        localStorage.setItem(CACHE_KEY, spriteContent)
-      } catch (retryError) {
-        console.warn('Failed to cache icon sprite after retry:', retryError)
-      }
-    }
-  }
-
-  /**
-   * Fetch SVG sprite from network
-   * @returns {Promise<string>} Promise resolving to SVG content
-   */
-  async function fetchSprite() {
-    const response = await fetch(SVG_URL)
-
-    if (!response.ok) {
-      throw new Error(`Failed to fetch icon sprite: ${response.status} ${response.statusText}`)
-    }
-
-    const spriteContent = await response.text()
-
-    // Basic validation - ensure it's actually SVG content
-    if (!spriteContent.includes('<svg') || !spriteContent.includes('</svg>')) {
-      throw new Error('Invalid SVG content received')
-    }
-
-    return spriteContent
-  }
-
-  /**
-   * Inject SVG sprite into the DOM
-   * @param {string} spriteContent - SVG content to inject
-   */
-  function injectSprite(spriteContent) {
-    // Remove any existing sprite container
-    const existingContainer = document.getElementById('chassis-icons-sprite')
-    if (existingContainer) {
-      existingContainer.remove()
-    }
-
-    // Create hidden container for the sprite
-    const container = document.createElement('div')
-    container.id = 'chassis-icons-sprite'
-    container.style.display = 'none'
-    container.setAttribute('aria-hidden', 'true')
-
-    // Use DOMParser to safely parse SVG content instead of innerHTML
-    const parsed = new DOMParser().parseFromString(spriteContent, 'image/svg+xml')
-    const svgEl = parsed.querySelector('svg')
-    if (svgEl) {
-      container.appendChild(svgEl)
-    } else {
-      // Fallback: should not happen given fetchSprite validation
-      container.innerHTML = spriteContent
-    }
-
-    // Insert at the end of body
-    document.body.appendChild(container)
-  }
-
-  /**
-   * Load and inject the icon sprite
-   * @returns {Promise<void>} Promise that resolves when sprite is loaded
-   */
-  function loadIconSprite() {
-    // Return existing promise if already loading
-    if (loadPromise) {
-      return loadPromise
-    }
-
-    // Check cache first
-    const cachedSprite = getCachedSprite()
-    if (cachedSprite) {
-      injectSprite(cachedSprite)
-      return Promise.resolve()
-    }
-
-    // Fetch from network
-    loadPromise = fetchSprite()
-      .then((spriteContent) => {
-        // Cache the content
-        setCachedSprite(spriteContent)
-
-        // Inject into DOM
-        injectSprite(spriteContent)
-      })
-      .catch((error) => {
-        console.error('Failed to load icon sprite:', error)
-        // Don't throw - let the page continue to work without icons
-      })
-      .finally(() => {
-        loadPromise = null
-      })
-
-    return loadPromise
-  }
-
-  /**
-   * Initialize icon loading
-   * Runs immediately if DOM is ready, or waits for DOMContentLoaded
-   */
-  function init() {
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', loadIconSprite)
-    } else {
-      loadIconSprite()
-    }
-  }
-
-  // Public API for manual cache management
-  window.ChassisIcons = {
-    /**
-     * Manually reload the icon sprite (bypasses cache)
-     * @returns {Promise<void>}
-     */
-    reload: async function () {
-      try {
-        // Clear cache
-        localStorage.removeItem(CACHE_KEY)
-        localStorage.removeItem(VERSION_KEY)
-
-        // Force reload
-        loadPromise = null
-        await loadIconSprite()
-      } catch (error) {
-        console.error('Failed to reload icon sprite:', error)
-      }
-    },
-
-    /**
-     * Clear the icon cache
-     */
-    clearCache: function () {
-      try {
-        localStorage.removeItem(CACHE_KEY)
-        localStorage.removeItem(VERSION_KEY)
-      } catch (error) {
-        console.warn('Failed to clear icon cache:', error)
-      }
-    },
-
-    /**
-     * Get cache information
-     * @returns {object} Cache status and size info
-     */
-    getCacheInfo: function () {
-      try {
-        const version = localStorage.getItem(VERSION_KEY)
-        const sprite = localStorage.getItem(CACHE_KEY)
-        return {
-          version: version,
-          cached: !!sprite,
-          size: sprite ? sprite.length : 0,
-          currentVersion: CURRENT_VERSION
-        }
-      } catch (error) {
-        return {
-          version: null,
-          cached: false,
-          size: 0,
-          currentVersion: CURRENT_VERSION,
-          error: error.message
-        }
-      }
-    }
-  }
-
-  // Initialize
-  init()
-})()

package/src/libs/chassis.ts

@@ -1,38 +0,0 @@
-import type { HTMLAttributes } from 'astro/types'
-
-export function getChassisCssProps(direction: 'rtl' | undefined) {
-  let cxCssLinkHref = '/static/css/chassis'
-
-  if (direction === 'rtl') {
-    cxCssLinkHref = `${cxCssLinkHref}.rtl`
-  }
-
-  if (import.meta.env.PROD) {
-    cxCssLinkHref = `${cxCssLinkHref}.min`
-  }
-
-  cxCssLinkHref = `${cxCssLinkHref}.css`
-
-  const cxCssLinkProps: HTMLAttributes<'link'> = {
-    href: cxCssLinkHref,
-    rel: 'stylesheet'
-  }
-
-  return cxCssLinkProps
-}
-
-export function getChassisJsProps() {
-  let cxJsScriptSrc = '/static/js/chassis.bundle'
-
-  if (import.meta.env.PROD) {
-    cxJsScriptSrc = `${cxJsScriptSrc}.min`
-  }
-
-  cxJsScriptSrc = `${cxJsScriptSrc}.js`
-
-  const cxJsLinkProps: HTMLAttributes<'script'> = {
-    src: cxJsScriptSrc
-  }
-
-  return cxJsLinkProps
-}

package/src/scss/_brand.scss

@@ -1,59 +0,0 @@
-//
-// Brand guidelines
-//
-
-// Logo series wrapper
-.cxd-brand-logos {
-  color: $cxd-subtle;
-
-  .inverse {
-    color: $white;
-    background-color: $cxd-subtle;
-  }
-}
-
-// Individual items
-.cxd-brand-item {
-  + .cxd-brand-item {
-    border-top: 1px solid var(--cx-border-color);
-  }
-
-  @include media-breakpoint-up(medium) {
-    + .cxd-brand-item {
-      border-top: 0;
-      border-left: 1px solid var(--cx-border-color);
-    }
-  }
-}
-
-//
-// Color swatches
-//
-
-.color-swatches {
-  margin: 0 -5px;
-
-  // Docs colors
-  .cxd-main {
-    background-color: $cxd-main;
-  }
-  .cxd-main-light {
-    background-color: $cxd-main-light;
-  }
-  .cxd-main-lighter {
-    background-color: #e5e1ea;
-  }
-  .cxd-gray {
-    background-color: #f9f9f9;
-  }
-}
-
-.color-swatch {
-  width: 4rem;
-  height: 4rem;
-
-  @include media-breakpoint-up(medium) {
-    width: 6rem;
-    height: 6rem;
-  }
-}

package/src/scss/_buttons.scss

@@ -1,33 +0,0 @@
-// Buttons
-//
-// Custom buttons for the docs.
-
-// scss-docs-start cxd-button
-.cxd-button {
-
-  --#{$prefix}padding-y: var(--#{$prefix}space-3xsmall);
-  --#{$prefix}padding-x: var(--#{$prefix}space-large);
-  --#{$prefix}gap: var(--#{$prefix}space-small);
-  --#{$prefix}font-family: var(--#{$prefix}font-family-text);
-  --#{$prefix}font-size: var(--#{$prefix}font-size-large);
-  --#{$prefix}font-weight: var(--#{$prefix}font-weight-mass);
-  // --#{$prefix}line-height: var(--#{$prefix}line-height-large);
-  --#{$prefix}icon-size: var(--#{$prefix}icon-large);
-
-  display: inline-flex;
-  gap: var(--#{$prefix}gap);
-  align-items: center;
-  text-decoration: if($link-decoration == none, null, none);
-
-  @extend %button, %solid-button, %component;
-  // @include exclude-strokes(button);
-
-  &.large {
-    --#{$prefix}font-size: var(--#{$prefix}font-size-xlarge);
-    --#{$prefix}line-height: var(--#{$prefix}line-height-xlarge);
-    --#{$prefix}font-weight: var(--#{$prefix}font-weight-strong);
-    --#{$prefix}icon-size: var(--#{$prefix}icon-xlarge);
-  }
-
-}
-// scss-docs-end cxd-button

package/src/scss/_clipboard-js.scss

@@ -1,63 +0,0 @@
-// clipboard.js
-//
-// JS-based `Copy` buttons for code snippets.
-
-.cxd-mode {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 3;
-  margin-top: .75rem;
-  margin-right: .75rem;
-  .button-mode {
-    background-color: var(--cx-bg-idle);
-    border: var(--cx-border-width) solid var(--cx-border-subtle);
-  }
-  &:not(.cxd-example:hover &) {
-    display: none;
-  }
-}
-.cxd-clipboard,
-.cxd-edit {
-  position: relative;
-  display: none;
-  float: right;
-
-  + .highlight {
-    margin-top: 0;
-  }
-
-  @include media-breakpoint-up(medium) {
-    display: block;
-  }
-}
-
-.button-mode,
-.button-clipboard,
-.button-edit {
-  --cx-icon-color: var(--cx-fg-subtle);
-  --cx-icon-size: var(--cx-icon-small);
-  display: block;
-  padding: .5em .25em;
-  line-height: 1;
-  background-color: var(--cxd-pre-bg);
-  border: 0;
-  @include border-radius(.25rem);
-
-  &:hover {
-    color: var(--cx-hover-color);
-  }
-
-  &:focus {
-    z-index: 3;
-  }
-}
-
-.button-mode,
-.button-clipboard {
-  position: relative;
-  z-index: 2;
-  margin-top: .75rem;
-  margin-right: .75rem;
-}
-

package/src/scss/_code.scss

@@ -1,116 +0,0 @@
-//
-// Docs examples
-//
-
-.cxd-code-snippet {
-  //background-color: var(--cx-bg-evident);
-  margin: 0 ($cxd-gutter-x * -.5) 1rem;
-  border: solid var(--cx-border-subtle);
-  border-width: 1px 0;
-
-  @include media-breakpoint-up(medium) {
-    margin-right: 0;
-    margin-left: 0;
-    border-width: 1px;
-    @include border-radius(var(--cx-border-radius));
-  }
-}
-
-.cxd-example {
-
-  // background-color: var(--cx-bg-main);
-  --cxd-example-padding: 1rem;
-
-  position: relative;
-  padding: var(--cxd-example-padding);
-  margin: 0 ($cxd-gutter-x * -.5) 1rem;
-  border: solid var(--cx-border-subtle);
-  border-width: 1px 0;
-  @include clearfix();
-
-  @include media-breakpoint-up(medium) {
-    --cxd-example-padding: 1.5rem;
-
-    margin-right: 0;
-    margin-left: 0;
-    border-width: 1px;
-    @include border-radius(var(--cx-border-radius));
-    &:has(~ .highlight-toolbar) {
-      @include border-bottom-radius(0);
-    }
-  }
-
-  + p {
-    margin-top: 2rem;
-  }
-}
-
-//
-// Code snippets
-//
-
-.highlight {
-  position: relative;
-  padding: 1.25rem ($cxd-gutter-x * .5);
-  background-color: var(--cxd-pre-bg, var(--cx-bg-even));
-
-
-  @include media-breakpoint-up(medium) {
-    padding: 1.25rem;
-    @include border-radius(calc(var(--cx-border-radius) - 1px));
-  }
-
-  @include media-breakpoint-up(large) {
-    pre {
-      margin-right: 1.875rem;
-    }
-  }
-
-  pre {
-    // padding: .25rem 0 .875rem;
-    // margin-top: .8125rem;
-    margin-bottom: 0;
-    overflow: overlay;
-    @include font-size(var(--cx-font-size-code-small));
-    line-height: var(--cx-line-height-code-small);
-    white-space: pre;
-    background-color: transparent;
-    border: 0;
-  }
-
-  pre code {
-    color: var(--cx-fg-color); // Effectively the base text color
-    word-wrap: normal;
-  }
-}
-
-.cxd-example-snippet .highlight pre {
-  margin-right: 0;
-}
-
-.highlight-toolbar {
-  background-color: var(--cxd-pre-bg, var(--cx-bg-even));
-  border-top: var(--cx-border-width) var(--cx-border-style) var(--cx-border-subtle);
-  border-bottom: var(--cx-border-width) var(--cx-border-style) var(--cx-border-subtle);
-
-  + .highlight {
-    @include border-top-radius(0);
-  }
-
-  > a {
-    @include font-size(var(--cx-font-size-small));
-  }
-}
-
-.cxd-file-ref {
-  .highlight-toolbar {
-    border-top: 0;
-    @include media-breakpoint-up(medium) {
-      @include border-top-radius(calc(var(--cx-border-radius) - 1px));
-    }
-  }
-}
-
-.cxd-content .cxd-code-snippet {
-  margin-bottom: 1rem;
-}

package/src/scss/_colors.scss

@@ -1,140 +0,0 @@
-// Colors used in Chassis Docs for custom components and syntax highlighting.
-
-$aqua:       #0cc !default;
-$black:      #000 !default;
-$blue:       #00f !default;
-$cyan:       #0cf !default;
-$green:      #090 !default;
-$gray:       #999 !default;
-$graydark:   #666 !default;
-$fuchsia:    #c0c !default;
-$indigo:     #639 !default;
-$olive:      #990 !default;
-$orange:     #f90 !default;
-$red:        #f00 !default;
-$pink:       #f39 !default;
-$purple:     #90f !default;
-$teal:       #099 !default;
-$violet:     #c3c !default;
-$white:      #fff !default;
-$yellow:     #fc0 !default;
-
-// $gray-100: #f8f9fa !default;
-// $gray-200: #e9ecef !default;
-// $gray-300: #dee2e6 !default;
-// $gray-400: #ced4da !default;
-// $gray-500: #adb5bd !default;
-// $gray-600: #6c757d !default;
-// $gray-700: #495057 !default;
-// $gray-800: #343a40 !default;
-// $gray-900: #212529 !default;
-
-$gray-100: tint-color($gray, 80%) !default;
-$gray-200: tint-color($gray, 60%) !default;
-$gray-300: tint-color($gray, 40%) !default;
-$gray-400: tint-color($gray, 20%) !default;
-$gray-500: $gray !default;
-$gray-600: shade-color($gray, 20%) !default;
-$gray-700: shade-color($gray, 40%) !default;
-$gray-800: shade-color($gray, 60%) !default;
-$gray-900: shade-color($gray, 80%) !default;
-
-$blue-100: tint-color($blue, 80%) !default;
-$blue-200: tint-color($blue, 60%) !default;
-$blue-300: tint-color($blue, 40%) !default;
-$blue-400: tint-color($blue, 20%) !default;
-$blue-500: $blue !default;
-$blue-600: shade-color($blue, 20%) !default;
-$blue-700: shade-color($blue, 40%) !default;
-$blue-800: shade-color($blue, 60%) !default;
-$blue-900: shade-color($blue, 80%) !default;
-
-$indigo-100: tint-color($indigo, 80%) !default;
-$indigo-200: tint-color($indigo, 60%) !default;
-$indigo-300: tint-color($indigo, 40%) !default;
-$indigo-400: tint-color($indigo, 20%) !default;
-$indigo-500: $indigo !default;
-$indigo-600: shade-color($indigo, 20%) !default;
-$indigo-700: shade-color($indigo, 40%) !default;
-$indigo-800: shade-color($indigo, 60%) !default;
-$indigo-900: shade-color($indigo, 80%) !default;
-
-$purple-100: tint-color($purple, 80%) !default;
-$purple-200: tint-color($purple, 60%) !default;
-$purple-300: tint-color($purple, 40%) !default;
-$purple-400: tint-color($purple, 20%) !default;
-$purple-500: $purple !default;
-$purple-600: shade-color($purple, 20%) !default;
-$purple-700: shade-color($purple, 40%) !default;
-$purple-800: shade-color($purple, 60%) !default;
-$purple-900: shade-color($purple, 80%) !default;
-
-$pink-100: tint-color($pink, 80%) !default;
-$pink-200: tint-color($pink, 60%) !default;
-$pink-300: tint-color($pink, 40%) !default;
-$pink-400: tint-color($pink, 20%) !default;
-$pink-500: $pink !default;
-$pink-600: shade-color($pink, 20%) !default;
-$pink-700: shade-color($pink, 40%) !default;
-$pink-800: shade-color($pink, 60%) !default;
-$pink-900: shade-color($pink, 80%) !default;
-
-$red-100: tint-color($red, 80%) !default;
-$red-200: tint-color($red, 60%) !default;
-$red-300: tint-color($red, 40%) !default;
-$red-400: tint-color($red, 20%) !default;
-$red-500: $red !default;
-$red-600: shade-color($red, 20%) !default;
-$red-700: shade-color($red, 40%) !default;
-$red-800: shade-color($red, 60%) !default;
-$red-900: shade-color($red, 80%) !default;
-
-$orange-100: tint-color($orange, 80%) !default;
-$orange-200: tint-color($orange, 60%) !default;
-$orange-300: tint-color($orange, 40%) !default;
-$orange-400: tint-color($orange, 20%) !default;
-$orange-500: $orange !default;
-$orange-600: shade-color($orange, 20%) !default;
-$orange-700: shade-color($orange, 40%) !default;
-$orange-800: shade-color($orange, 60%) !default;
-$orange-900: shade-color($orange, 80%) !default;
-
-$yellow-100: tint-color($yellow, 80%) !default;
-$yellow-200: tint-color($yellow, 60%) !default;
-$yellow-300: tint-color($yellow, 40%) !default;
-$yellow-400: tint-color($yellow, 20%) !default;
-$yellow-500: $yellow !default;
-$yellow-600: shade-color($yellow, 20%) !default;
-$yellow-700: shade-color($yellow, 40%) !default;
-$yellow-800: shade-color($yellow, 60%) !default;
-$yellow-900: shade-color($yellow, 80%) !default;
-
-$green-100: tint-color($green, 80%) !default;
-$green-200: tint-color($green, 60%) !default;
-$green-300: tint-color($green, 40%) !default;
-$green-400: tint-color($green, 20%) !default;
-$green-500: $green !default;
-$green-600: shade-color($green, 20%) !default;
-$green-700: shade-color($green, 40%) !default;
-$green-800: shade-color($green, 60%) !default;
-$green-900: shade-color($green, 80%) !default;
-
-$teal-100: tint-color($teal, 80%) !default;
-$teal-200: tint-color($teal, 60%) !default;
-$teal-300: tint-color($teal, 40%) !default;
-$teal-400: tint-color($teal, 20%) !default;
-$teal-500: $teal !default;
-$teal-600: shade-color($teal, 20%) !default;
-$teal-700: shade-color($teal, 40%) !default;
-$teal-800: shade-color($teal, 60%) !default;
-$teal-900: shade-color($teal, 80%) !default;
-
-$cyan-100: tint-color($cyan, 80%) !default;
-$cyan-200: tint-color($cyan, 60%) !default;
-$cyan-300: tint-color($cyan, 40%) !default;
-$cyan-400: tint-color($cyan, 20%) !default;
-$cyan-500: $cyan !default;
-$cyan-600: shade-color($cyan, 20%) !default;
-$cyan-700: shade-color($cyan, 40%) !default;
-$cyan-800: shade-color($cyan, 60%) !default;
-$cyan-900: shade-color($cyan, 80%) !default;