auto-loading-skeleton 1.0.3 → 2.0.0

package/src/styles.js

@@ -1,76 +1,190 @@
-const STYLE_ID = 'auto-skeleton-styles';
-
-const CSS = `
-.ask-block {
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-  background-color: var(--ask-base-color, #e2e8f0);
-  border-radius: var(--ask-border-radius, 4px);
-  vertical-align: middle;
-}
-.ask-shimmer::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  transform: translateX(-100%);
-  background: linear-gradient(90deg, transparent 0%, var(--ask-shimmer-color, rgba(255,255,255,0.55)) 50%, transparent 100%);
-  animation: ask-shimmer var(--ask-duration, 1.4s) infinite;
-}
-@keyframes ask-shimmer { 100% { transform: translateX(100%); } }
-.ask-pulse { animation: ask-pulse var(--ask-duration, 1.8s) ease-in-out infinite; }
-@keyframes ask-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
-.ask-wave::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  transform: translateX(-100%);
-  background: linear-gradient(90deg, transparent 0%, var(--ask-shimmer-color, rgba(255,255,255,0.8)) 50%, transparent 100%);
-  animation: ask-wave var(--ask-duration, 1.6s) ease-in-out infinite;
-  overflow: hidden;
-}
-@keyframes ask-wave { 0% { transform: translateX(-100%); } 100% { transform: translateX(150%); } }
-@media (prefers-color-scheme: dark) {
-  .ask-block { background-color: var(--ask-base-color-dark, #2d3748); }
-}
-.ask-circle  { border-radius: 50%; }
-.ask-rounded { border-radius: 8px; }
-.ask-pill    { border-radius: 9999px; }
-.ask-wrapper { pointer-events: none; user-select: none; }
-`;
-
-let injected = false;
-
-function injectStyles() {
-  if (injected || typeof document === 'undefined') return;
-  if (document.getElementById(STYLE_ID)) { injected = true; return; }
-  const style = document.createElement('style');
-  style.id = STYLE_ID;
-  style.textContent = CSS;
-  document.head.appendChild(style);
-  injected = true;
-}
-
-function blockClass(animation, shape) {
-  animation = animation || 'shimmer';
-  const parts = ['ask-block'];
-  if (animation !== 'none') parts.push('ask-' + animation);
-  if (shape) parts.push('ask-' + shape);
-  return parts.join(' ');
-}
-
-function buildThemeVars(theme) {
-  theme = theme || {};
-  const map = {
-    baseColor:    '--ask-base-color',
-    shimmerColor: '--ask-shimmer-color',
-    duration:     '--ask-duration',
-    borderRadius: '--ask-border-radius',
-  };
-  return Object.entries(theme)
-    .filter(function(pair) { return map[pair[0]]; })
-    .map(function(pair) { return map[pair[0]] + ':' + pair[1]; })
-    .join(';');
-}
-
-module.exports = { injectStyles, blockClass, buildThemeVars, CSS };
+'use strict';
+
+/**
+ * styles.js — V2
+ *
+ * Improvements over V1:
+ *  - Full dark-mode awareness via prefers-color-scheme
+ *  - prefers-reduced-motion: replaces shimmer/wave with fade-only
+ *  - Named theme presets (default, dark, minimal, brand, soft)
+ *  - Per-instance CSS variable injection via data-ask-id attribute
+ *  - All skeleton CSS vars scoped under [data-ask] to avoid global leakage
+ *  - SSR-safe (guards typeof document)
+ */
+
+var STYLE_ID = 'ask-v2-styles';
+
+var BASE_CSS = `
+/* ── auto-skeleton-v2 base ── */
+[data-ask] {
+  --ask-base:       #e2e8f0;
+  --ask-highlight:  rgba(255,255,255,0.65);
+  --ask-dur:        1.4s;
+  --ask-radius:     4px;
+  --ask-radius-lg:  8px;
+  --ask-radius-xl:  9999px;
+}
+@media (prefers-color-scheme: dark) {
+  [data-ask] {
+    --ask-base:      #2d3748;
+    --ask-highlight: rgba(255,255,255,0.06);
+  }
+}
+
+/* block primitive */
+.ask-b {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  background: var(--ask-base);
+  border-radius: var(--ask-radius);
+  flex-shrink: 0;
+}
+.ask-b.ask-circle  { border-radius: 50%; }
+.ask-b.ask-pill    { border-radius: var(--ask-radius-xl); }
+.ask-b.ask-rounded { border-radius: var(--ask-radius-lg); }
+
+/* animations */
+.ask-shimmer.ask-b::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--ask-highlight) 50%,
+    transparent 100%
+  );
+  animation: ask-shimmer-kf var(--ask-dur) infinite;
+}
+@keyframes ask-shimmer-kf { to { transform: translateX(100%); } }
+
+.ask-pulse.ask-b {
+  animation: ask-pulse-kf var(--ask-dur) ease-in-out infinite;
+}
+@keyframes ask-pulse-kf { 0%,100%{opacity:1} 50%{opacity:.35} }
+
+.ask-wave.ask-b::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--ask-highlight) 50%,
+    transparent 100%
+  );
+  animation: ask-wave-kf calc(var(--ask-dur) * 1.15) ease-in-out infinite;
+}
+@keyframes ask-wave-kf { 0%{transform:translateX(-100%)} 100%{transform:translateX(150%)} }
+
+.ask-glow.ask-b {
+  animation: ask-glow-kf var(--ask-dur) ease-in-out infinite;
+}
+@keyframes ask-glow-kf {
+  0%,100%{ box-shadow: 0 0 0px 0px transparent; }
+  50%    { box-shadow: 0 0 12px 2px var(--ask-highlight); }
+}
+
+.ask-none.ask-b { opacity: .55; }
+
+/* reduced motion: replace all animation with simple fade */
+@media (prefers-reduced-motion: reduce) {
+  .ask-shimmer.ask-b::after,
+  .ask-wave.ask-b::after { animation: none; background: none; }
+  .ask-shimmer.ask-b,
+  .ask-wave.ask-b,
+  .ask-pulse.ask-b,
+  .ask-glow.ask-b {
+    animation: ask-pulse-kf calc(var(--ask-dur)*2) ease-in-out infinite;
+  }
+}
+
+/* wrapper utilities */
+.ask-wrap { pointer-events: none; user-select: none; }
+.ask-row  { display: flex; flex-direction: row;    }
+.ask-col  { display: flex; flex-direction: column; }
+
+/* transition helper applied to real children */
+.ask-fade-in { animation: ask-fadein 0.25s ease both; }
+@keyframes ask-fadein { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
+`;
+
+var injected = false;
+
+function injectStyles() {
+  if (injected) return;
+  if (typeof document === 'undefined') { injected = true; return; }
+  if (document.getElementById(STYLE_ID)) { injected = true; return; }
+  var s = document.createElement('style');
+  s.id          = STYLE_ID;
+  s.textContent = BASE_CSS;
+  document.head.appendChild(s);
+  injected = true;
+}
+
+/* ── theme presets ── */
+var THEMES = {
+  default: {},
+  dark: {
+    '--ask-base':      '#1a202c',
+    '--ask-highlight': 'rgba(255,255,255,0.04)',
+  },
+  minimal: {
+    '--ask-base':      '#f1f5f9',
+    '--ask-highlight': 'rgba(255,255,255,0.9)',
+    '--ask-dur':       '1.8s',
+  },
+  soft: {
+    '--ask-base':      '#ede9fe',
+    '--ask-highlight': 'rgba(255,255,255,0.7)',
+    '--ask-radius':    '8px',
+  },
+  brand: {
+    '--ask-base':      '#dbeafe',
+    '--ask-highlight': 'rgba(255,255,255,0.75)',
+    '--ask-radius':    '6px',
+    '--ask-dur':       '1.2s',
+  },
+  warm: {
+    '--ask-base':      '#fef3c7',
+    '--ask-highlight': 'rgba(255,255,255,0.7)',
+    '--ask-radius':    '6px',
+  },
+};
+
+/**
+ * Build an inline style object merging a named preset + user overrides.
+ * Returns a plain object suitable for React style={} prop.
+ */
+function buildThemeStyle(preset, overrides) {
+  preset    = preset    || 'default';
+  overrides = overrides || {};
+  var base  = THEMES[preset] || {};
+  var merged = Object.assign({}, base);
+
+  // Map user-facing keys → CSS vars
+  var keyMap = {
+    baseColor:    '--ask-base',
+    highlightColor: '--ask-highlight',
+    shimmerColor: '--ask-highlight',  // alias
+    duration:     '--ask-dur',
+    borderRadius: '--ask-radius',
+  };
+  Object.keys(overrides).forEach(function(k) {
+    var cssVar = keyMap[k] || k;
+    merged[cssVar] = overrides[k];
+  });
+
+  return merged;
+}
+
+function blockClass(animation, shape) {
+  var parts = ['ask-b', 'ask-' + (animation || 'shimmer')];
+  if (shape) parts.push('ask-' + shape);
+  return parts.join(' ');
+}
+
+module.exports = { injectStyles, blockClass, buildThemeStyle, THEMES, BASE_CSS };

package/src/AutoSkeleton.jsx

@@ -1,72 +0,0 @@
-/**
- * AutoSkeleton.jsx
- * Main wrapper component.
- *
- * Usage:
- *   <AutoSkeleton loading={isLoading}>
- *     <ProductCard />
- *   </AutoSkeleton>
- */
-
-import React, { useEffect, useMemo } from 'react';
-import { analyzeTree } from './analyzer.js';
-import { renderSkeletonNodes } from './renderer.js';
-import { injectStyles } from './styles.js';
-
-/**
- * @typedef {Object} AutoSkeletonProps
- * @property {boolean}           loading       - Show skeleton when true
- * @property {React.ReactNode}   children      - The real UI component(s)
- * @property {'shimmer'|'pulse'|'wave'|'none'} [animation='shimmer']
- * @property {number}            [repeat=1]    - Repeat skeleton N times (e.g. list items)
- * @property {object}            [theme]       - { baseColor, highlightColor }
- * @property {React.CSSProperties} [style]     - Wrapper style
- * @property {string}            [className]   - Wrapper className
- * @property {string}            [ariaLabel]   - aria-label for the skeleton wrapper
- */
-
-export function AutoSkeleton({
-  loading = false,
-  children,
-  animation = 'shimmer',
-  repeat = 1,
-  theme = {},
-  style,
-  className,
-  ariaLabel = 'Loading…',
-}) {
-  // Inject global CSS once
-  useEffect(() => { injectStyles(); }, []);
-
-  // Analyse the child tree once (memoised — re-runs only when children change)
-  const skeletonNodes = useMemo(() => {
-    if (!loading) return null;
-    const childArray = React.Children.toArray(children);
-    return childArray.flatMap(child => analyzeTree(child));
-  }, [loading, children]);
-
-  if (!loading) return children;
-
-  const options = { animation, theme };
-  const units = Array.from({ length: repeat }, (_, i) =>
-    React.createElement(
-      'div',
-      { key: i, style: i > 0 ? { marginTop: 16 } : undefined },
-      renderSkeletonNodes(skeletonNodes, options)
-    )
-  );
-
-  return React.createElement(
-    'div',
-    {
-      role: 'status',
-      'aria-busy': true,
-      'aria-label': ariaLabel,
-      style,
-      className,
-    },
-    ...units
-  );
-}
-
-export default AutoSkeleton;

package/src/SkeletonItem.jsx

@@ -1,99 +0,0 @@
-/**
- * SkeletonItem.jsx
- * Low-level primitive for manual skeleton building if needed.
- *
- * Usage:
- *   <SkeletonItem type="text" lines={2} />
- *   <SkeletonItem type="avatar" size={48} />
- *   <SkeletonItem type="image" width="100%" height={200} />
- */
-
-import React, { useEffect } from 'react';
-import { buildClassName, injectStyles } from './styles.js';
-
-export function SkeletonItem({
-  type = 'text',
-  lines = 1,
-  width,
-  height,
-  size,
-  animation = 'shimmer',
-  theme = {},
-  style: extraStyle = {},
-}) {
-  useEffect(() => { injectStyles(); }, []);
-
-  const cssVars = {
-    ...(theme.baseColor && { '--skeleton-base-color': theme.baseColor }),
-    ...(theme.highlightColor && { '--skeleton-highlight-color': theme.highlightColor }),
-    ...extraStyle,
-  };
-
-  switch (type) {
-    case 'text': {
-      const cls = buildClassName(animation, 'auto-skeleton-text-line');
-      if (lines === 1) {
-        return React.createElement('div', {
-          className: cls,
-          style: { width: width || '80%', ...cssVars },
-          'aria-hidden': true,
-        });
-      }
-      const lineEls = Array.from({ length: lines }, (_, i) =>
-        React.createElement('div', {
-          key: i,
-          className: cls,
-          style: { width: i === lines - 1 ? '65%' : '100%', ...cssVars },
-          'aria-hidden': true,
-        })
-      );
-      return React.createElement('div', {
-        className: 'auto-skeleton-text-block',
-        style: cssVars,
-        'aria-hidden': true,
-      }, ...lineEls);
-    }
-
-    case 'avatar': {
-      const px = size ? `${size}px` : (width || '40px');
-      return React.createElement('div', {
-        className: buildClassName(animation, 'auto-skeleton-avatar-block'),
-        style: { width: px, height: size ? `${size}px` : (height || px), ...cssVars },
-        'aria-hidden': true,
-      });
-    }
-
-    case 'image': {
-      return React.createElement('div', {
-        className: buildClassName(animation, 'auto-skeleton-image-block'),
-        style: {
-          width: width || '100%',
-          ...(height ? { paddingTop: 0, height } : {}),
-          ...cssVars,
-        },
-        'aria-hidden': true,
-      });
-    }
-
-    case 'button': {
-      return React.createElement('div', {
-        className: buildClassName(animation, 'auto-skeleton-button-block'),
-        style: { width: width || 100, ...cssVars },
-        'aria-hidden': true,
-      });
-    }
-
-    case 'input': {
-      return React.createElement('div', {
-        className: 'auto-skeleton-input-block',
-        style: cssVars,
-        'aria-hidden': true,
-      });
-    }
-
-    default:
-      return null;
-  }
-}
-
-export default SkeletonItem;