@inizioevoke/astro-core 1.0.0

package/src/components/ScrollContainer/ScrollContainer.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import './ScrollContainer.css';
+
+interface Props extends HTMLAttributes<'div'> { 
+  outerWidth?: string | number;
+  innerWidth?: string | number;
+  height?: string | number;
+  vertical?: boolean;
+  horizontal?: boolean;
+}
+
+const {
+  outerWidth,
+  innerWidth,
+  height,
+  vertical = true,
+  horizontal = false,
+  ...rest
+} = Astro.props;
+
+const containerAttrs = {...rest};
+const cssClass = containerAttrs['class'] ?? '';
+['class'].forEach((a) => {
+  delete containerAttrs[a as keyof typeof containerAttrs];
+});
+
+containerAttrs.style = typeof containerAttrs.style == 'string' ? `${containerAttrs.style}${containerAttrs.style.endsWith(';') ? '' : ';'}` : '';
+if (outerWidth) {
+  containerAttrs.style = `${containerAttrs.style}width:${typeof outerWidth == 'number' || /^\d+$/.test(outerWidth) ? `${outerWidth}px` : outerWidth};`;
+}
+if (height) {
+  containerAttrs.style = `${containerAttrs.style}height:${typeof height == 'number' || /^\d+$/.test(height) ? `${height}px` : height};`;
+}
+
+const contentAttrs: Record<string, string> = {};
+if (innerWidth) {
+  contentAttrs.style = `width:${typeof innerWidth == 'number' || /^\d+$/.test(innerWidth) ? `${innerWidth}px` : innerWidth};`
+}
+---
+<div class:list={['evo-scroll-container', cssClass]} {...containerAttrs}>
+  <div class="evo-scroll-content" {...contentAttrs}>
+    <slot />
+  </div>
+  {vertical && <div class="evo-scroll-track evo-scroll-track-y">
+    <div class="evo-scroll-thumb"></div>
+  </div>}
+  {horizontal && <div class="evo-scroll-track evo-scroll-track-x">
+    <div class="evo-scroll-thumb"></div>
+  </div>}
+</div>
+
+<script>
+  import './ScrollContainer';
+</script>

package/src/components/ScrollContainer/ScrollContainer.css

@@ -0,0 +1,64 @@
+@layer inizioevoke-astro-components {
+  :root {
+    --evo-scroll-container-border-radius: 4px;
+    --evo-scroll-container-track-width: 8px;
+    --evo-scroll-container-track-top: 0px;
+    --evo-scroll-container-track-bottom: 0px;
+    --evo-scroll-container-track-color: #dddddd;
+    --evo-scroll-container-thumb-color: #666666;
+    --evo-scroll-container-thumb-border-width: 0px;
+    --evo-scroll-container-thumb-border-color: var(--evo-scroll-container-track-color);
+  }
+
+  .evo-scroll-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    
+    * { 
+      box-sizing: border-box;
+    }
+
+    .evo-scroll-content {
+      height: 100%;
+      overflow-y: scroll;
+      padding-right: calc(1rem + var(--evo-scroll-container-track-width));
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      *:first-child {
+        margin-top: 0 !important;
+      }
+      *:last-child {
+        margin-bottom: 0 !important;
+      }
+    }
+
+    .evo-scroll-track {
+      position: absolute;
+      top: var(--evo-scroll-container-track-top);
+      right: 0px;
+      width: var(--evo-scroll-container-track-width);
+      height: calc(100% - var(--evo-scroll-container-track-top) - var(--evo-scroll-container-track-bottom));
+      background: var(--evo-scroll-container-track-color);
+      border-radius: var(--evo-scroll-container-border-radius);
+
+      .evo-scroll-thumb {
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+        background-color: var(--evo-scroll-container-thumb-color);
+        border: var(--evo-scroll-container-thumb-border-width) solid var(--evo-scroll-container-thumb-border-color);
+        border-radius: var(--evo-scroll-container-border-radius);
+        height: 50px;
+        cursor: grab;
+        font-size: 0;
+      }
+    }
+  }
+}

package/src/components/ScrollContainer/ScrollContainer.ts

@@ -0,0 +1,143 @@
+
+export interface IScrollContainer {
+  container: HTMLElement;
+  content: HTMLElement;
+  track: HTMLElement;
+  thumb: HTMLElement;
+  isDragging: boolean;
+  startY: number;
+  startScrollTop: number;
+}
+
+export function refresh(scrollContainer?: IScrollContainer) {
+  if (scrollContainer) {
+    updateThumbSize(scrollContainer);
+  } else {
+    [...scrollContainers.values()].forEach((scrollContainer) => {
+      updateThumbSize(scrollContainer);
+    });
+  }
+}
+
+export function getScroll(scrollContainer: IScrollContainer): { left: number, top: number } {
+  return {
+    left: scrollContainer.content.scrollLeft,
+    top: scrollContainer.content.scrollTop
+  };
+}
+export function scroll(scrollContainer: IScrollContainer, { left, top, behavior = 'auto' }: { left?: number, top?: number, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
+  const current = getScroll(scrollContainer);
+  scrollContainer.content.scroll({ left: left ?? current.left, top: top ?? current.top, behavior });
+}
+
+export function getScrollContainer(selector: string | HTMLElement): IScrollContainer | undefined {
+  const key = typeof selector == 'string' ? document.querySelector<HTMLElement>(selector) : selector;
+  return key ? scrollContainers.get(key) : undefined;
+}
+
+function thumbMouseDown(scrollContainer: IScrollContainer, e: MouseEvent) {
+  scrollContainer.isDragging = true;
+  scrollContainer.startY = e.clientY;
+  scrollContainer.startScrollTop = scrollContainer.content.scrollTop;
+  scrollContainer.thumb.style.cursor = 'grabbing';
+}
+
+function updateThumbSize(scrollContainer: IScrollContainer) {
+  const { container, content, thumb, track } = scrollContainer;
+  const scrollHeight = content.scrollHeight - getPaddingY(content);
+  const containerHeight = container.clientHeight - getPaddingY(container);
+  const visibleRatio = containerHeight / scrollHeight;
+  const thumbHeight = visibleRatio * containerHeight;
+  thumb.style.height = `${thumbHeight > 20 ? thumbHeight : 20}px`;
+  track.style.display = visibleRatio < 1 ? 'block' : 'none';
+}
+
+function scrollContent(scrollContainer: IScrollContainer) {
+  const { container, content, thumb, track } = scrollContainer;
+  const scrollHeight = content.scrollHeight - getPaddingY(content);
+  const containerHeight = container.clientHeight - getPaddingY(container);
+  const scrollRatio = content.scrollTop / (scrollHeight - containerHeight);
+  const top = scrollRatio * (track.clientHeight - thumb.clientHeight);
+  thumb.style.top = `${top}px`;
+}
+
+function getPaddingY(content: HTMLElement): number {
+  const style = getComputedStyle(content);
+  return parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+}
+
+function getScrollContainerElement(element: HTMLElement) {
+  let container = element;
+  while (container && !container.classList.contains('scroll-container')) {
+    container = container.parentElement as HTMLElement;
+  }
+  return container;
+}
+
+function createScrollContainer(container: HTMLElement): IScrollContainer {
+  return {
+    container: container,
+    content: container.querySelector('.evo-scroll-content') as HTMLElement,
+    track: container.querySelector('.evo-scroll-track') as HTMLElement,
+    thumb: container.querySelector('.evo-scroll-thumb') as HTMLElement,
+    isDragging: false,
+    startY: 0,
+    startScrollTop: 0
+  };
+}
+
+const scrollContainers = new Map<HTMLElement, IScrollContainer>();
+
+const intersectionObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        updateThumbSize(scrollContainers.get(entry.target as HTMLElement) as IScrollContainer);
+      }
+    });
+  },
+  { threshold: 0.1 }
+);
+
+const mutationObserver = new MutationObserver((mutations) => {
+  const containers: IScrollContainer[] = [];
+  mutations.forEach((mutation) => {
+    const sc = scrollContainers.get(getScrollContainerElement(mutation.target as HTMLElement));
+    if (sc && !containers.includes(sc)) {
+      containers.push(sc);
+    }
+  });
+  containers.forEach((container) => {
+    updateThumbSize(container);
+  });
+});
+
+document.querySelectorAll<HTMLElement>('.evo-scroll-container').forEach((container) => {
+  const scrollContainer = createScrollContainer(container);
+  scrollContainers.set(container, scrollContainer);
+  scrollContainer.thumb.addEventListener('mousedown', (e) => { thumbMouseDown(scrollContainer, e); }, { passive: true });
+  scrollContainer.content.addEventListener('scroll', (e) => { scrollContent(scrollContainer); }, { passive: true });
+  intersectionObserver.observe(container);
+  mutationObserver.observe(container, { childList: true, subtree: true });
+});
+document.addEventListener('mousemove', (e) => {
+  [...scrollContainers.values()].forEach((scrollContainer) => {
+    if (!scrollContainer.isDragging) return;
+    const { container, content, thumb } = scrollContainer;
+    const deltaY = e.clientY - scrollContainer.startY;
+    const scrollRatio =
+      (content.scrollHeight - container.clientHeight) /
+      (container.clientHeight - thumb.clientHeight);
+    scrollContainer.content.scrollTop = scrollContainer.startScrollTop + deltaY * scrollRatio;
+  });
+});
+document.addEventListener('mouseup', () => {
+  [...scrollContainers.values()].forEach((scrollContainer) => {
+    scrollContainer.isDragging = false;
+    scrollContainer.thumb.style.cursor = 'grab';
+  });
+});
+window.addEventListener('resize', () => {
+  [...scrollContainers.values()].forEach((scrollContainer) => {
+    updateThumbSize(scrollContainer);
+  });
+});

package/src/components/Tabs/TabItem.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import { undefined } from 'astro:schema';
+interface Props {
+  active?: true;
+  tabAttrs?: HTMLAttributes<'div'>
+  panelAttrs?: HTMLAttributes<'div'>;
+}
+const { 
+  active, 
+  tabAttrs,
+  panelAttrs
+} = Astro.props;
+const tabTitle = await Astro.slots.render('title');
+const attrs = { ...tabAttrs, title: tabTitle };
+console.log(attrs);
+---
+<div 
+  data-tab-attrs={attrs ? JSON.stringify(attrs) : undefined}
+  data-tab-active={active ?? false}
+  {...panelAttrs}
+  role="tabpanel" 
+  hidden="hidden"
+  ><slot /></div>

package/src/components/Tabs/Tabs.astro

@@ -0,0 +1,94 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import './Tabs.css';
+
+interface Props {
+  listType?: 'ul' | 'none'
+}
+
+const { listType = 'ul' } = Astro.props;
+
+const TabList = listType === 'none' ? 'div' : 'ul';
+const tabListAttrs: HTMLAttributes<'div'> = {
+  role: 'tablist'
+};
+
+const html = await Astro.slots.render('default');
+
+interface Tab extends HTMLAttributes<'div'> {
+  title: string;
+  index: number;
+  active: boolean;
+}
+
+const tabs: Tab[] = [];
+let index = 0;
+
+// Process each element with data-tab-title, capturing and removing custom attributes
+const itemHtml = html.replace(
+  /(<[^>]+\bdata-tab-attrs="([^"]*)"[^>]*>)/g,
+  (match) => {
+    const currentIndex = index++;
+
+    const getAttr = (attr: string) => {
+      const m = match.match(new RegExp(`${attr}="([^"]*)"`));
+      return m ? m[1] : undefined;
+    };
+
+    const tabAttrs: HTMLAttributes<'div'> = {};
+    const attrs = getAttr('data-tab-attrs') ?? '';
+    if (attrs) {
+      console.log(attrs);
+      Object.assign(tabAttrs, JSON.parse(attrs));
+    }
+    // const encodedTitle = getAttr('data-tab-title') ?? '';
+    // const cssClass = getAttr('data-tab-class');
+    const active = getAttr('data-tab-active') === 'true';
+
+    tabs.push({
+      ...tabAttrs,
+      title: tabAttrs.title ?? `Tab ${index + 1}`,
+      index: currentIndex,
+      active,
+    });
+
+    // Remove custom attrs, add data-tab, remove hidden if active
+    let updated = match
+      .replace(/\s*data-tab-attrs="[^"]*"/, '')
+      .replace(/\s*data-tab-active="[^"]*"/, '')
+      .replace(/\s*hidden(?:="[^"]*")?/, '')
+      + (active ? '' : '');
+
+    // Insert data-tab index
+    updated = updated.replace(/^<(\w+)/, `<$1 data-tab="${currentIndex}"`);
+
+    // Re-add hidden if not active
+    if (!active) {
+      updated = updated.replace(/^<(\w+)/, `<$1 hidden`);
+    }
+
+    return updated;
+  }
+);
+
+const tabHtml = tabs.map((tab) => {
+  const cssClass = ['evo-tab'];
+  tab.class && cssClass.push(tab.class);
+  tab.active && cssClass.push('evo-tab-active');
+
+  if (listType === 'none') {
+    return `<button class="${cssClass.join(' ')}" data-tab="${tab.index}" role="tab">${tab.title}</button>`;
+  } else {
+    return `<li class="${cssClass.join(' ')}"><button data-tab="${tab.index}" role="tab">${tab.title}</button></li>`;
+  }
+}).join('');
+---
+
+<div class="evo-tab-container">
+  <TabList {...tabListAttrs} set:html={tabHtml} />
+  <div class="evo-tab-panels" set:html={itemHtml}></div>
+</div>
+
+<script>
+  import './Tabs';
+</script>

package/src/components/Tabs/Tabs.css

@@ -0,0 +1,70 @@
+@layer inizioevoke-astro-components {
+  .evo-tab-container {
+    [role="tablist"] {
+      display: flex;
+      margin: 0;
+      padding: 0;
+
+      .evo-tab-active {
+        background-color: white;
+      }
+
+      button {
+        padding: 4px 8px;
+        font-size: 1rem;
+        border: none;
+        border-radius: 0;
+        background-color: transparent;
+        cursor: pointer;
+      }
+    }
+
+    /* <Tabs /> or <Tabs listType="ul" /> */
+    ul[role="tablist"] {
+      position: relative; 
+      top: 1px;
+      li {
+        display: block;
+        margin: 0px 8px;
+        padding: 4px 8px;
+        list-style: none;
+        background-color: #888888;
+        border: 1px solid #888888;
+        &.evo-tab-active {
+          border-bottom-color: white;
+        }
+
+        &:first-of-type {
+          margin-left: 0;
+        }
+        &:last-of-type {
+          margin-right: 0;
+        }
+      }
+    }
+
+    /* <Tabs listType="none" /> */
+    div[role="tablist"] {
+      button { 
+        margin: 0px 8px;
+        padding: 8px 16px;
+        background-color: #888888;
+
+        &:first-of-type {
+          margin-left: 0;
+        }
+        &:last-of-type {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .evo-tab-panels {
+      margin: 0;
+      padding: 8px;
+      color: black;
+      background-color: white;
+      border: 1px solid #888888;
+    }
+  }
+}

package/src/components/Tabs/Tabs.ts

@@ -0,0 +1,22 @@
+
+function handleTabClick(e: Event) {
+  const btn = (e.currentTarget ?? e.target) as HTMLElement;
+  const tab = btn.getAttribute('data-tab');
+  const list = btn.closest('[role="tablist"]') as HTMLElement;
+  list.querySelectorAll('.evo-tab-active').forEach((t) => { t.classList.remove('evo-tab-active'); });
+  btn.closest('.evo-tab')?.classList.add('evo-tab-active');
+
+  list.closest('.evo-tab-container')?.querySelector('.evo-tab-panels')?.querySelectorAll('[data-tab]')?.forEach((panel) => {
+    if (panel.getAttribute('data-tab') === tab) {
+      panel.removeAttribute('hidden');
+    } else if (!panel.hasAttribute('hidden')) {
+      panel.setAttribute('hidden', 'hidden');
+    }
+  });
+}
+
+document.querySelectorAll<HTMLElement>('.evo-tab-container').forEach((container) => {
+  container.querySelectorAll<HTMLElement>('[role="tab"]').forEach((tab) => {
+    tab.addEventListener('click', handleTabClick);
+  });
+});

package/src/components/Zoom/Zoom.astro

@@ -0,0 +1,64 @@
+---
+import { randomUUID } from 'node:crypto';
+import type { HTMLAttributes } from 'astro/types';
+import Modal from '../Modal/Modal.astro';
+import ModalTrigger from '../Modal/ModalTrigger.astro';
+import type { ModalAnimation } from '../Modal/Modal';
+
+interface Props extends HTMLAttributes<'div'> {
+  animation?: ModalAnimation;
+  modalIncludeTitle?: boolean;
+  modalIncludeFooter?: boolean;
+  modalSlot?: string;
+}
+
+const { 
+  animation,
+  modalIncludeTitle = true,
+  modalIncludeFooter = true,
+  modalSlot,
+  ...rest
+} = Astro.props;
+
+const uuid = randomUUID().replace(/-/g, '');
+const modalId = `evo-modal-${uuid}`;
+
+const attrs: HTMLAttributes<'div'> & { 'data-uuid': string } = {
+  ...rest,
+  'data-uuid': uuid
+};
+---
+<div {...attrs}>
+  <div class="evo-zoom-wrapper">
+    <div class="evo-zoom-trigger"><ModalTrigger modal={`#${modalId}`} animation={animation}><slot name="trigger">+</slot></ModalTrigger></div>
+    {Astro.slots.has('header') &&
+    <div class="evo-zoom-header"><slot name="header" /></div>
+    }
+    <slot name="content" />
+    {Astro.slots.has('footer') &&
+    <div class="evo-zoom-footer"><slot name="footer" /></div>
+    }
+  </div>
+  <Modal slot={modalSlot} id={modalId} class="evo-zoom-modal">
+    {Astro.slots.has('modal-header') &&
+    <div class="evo-zoom-modal-header"><slot name="modal-header" /></div>
+    }
+    {modalIncludeTitle && !Astro.slots.has('modal-header') && Astro.slots.has('header') &&
+    <div class="evo-zoom-modal-header"><slot name="header" /></div>
+    }
+    <div class="evo-zoom-modal-content">
+      {Astro.slots.has('modal-content') &&
+      <slot name="modal-content" />
+      }
+      {!Astro.slots.has('modal-content') &&
+      <slot name="content" />
+      }
+    </div>
+    {Astro.slots.has('modal-footer') && 
+    <div class="evo-zoom-modal-footer"><slot name="modal-footer" /></div>
+    }
+    {modalIncludeFooter && !Astro.slots.has('modal-footer') && Astro.slots.has('footer') &&
+    <div class="evo-zoom-modal-footer"><slot name="footer" /></div>
+    }
+  </Modal>
+</div>

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export { default as Modal } from './Modal/Modal.astro';
+export { default as ModalOverlay } from './Modal/ModalOverlay.astro';
+export { default as ModalTrigger } from './Modal/ModalTrigger.astro';
+export { default as PdfViewer } from './PdfViewer/PdfViewer.astro';
+export { default as ScrollContainer } from './ScrollContainer/ScrollContainer.astro';
+export { default as Tabs } from './Tabs/Tabs.astro';
+export { default as TabItem } from './Tabs/TabItem.astro';
+export { default as Zoom } from './Zoom/Zoom.astro';

package/src/integrations/index.ts

@@ -0,0 +1,2 @@
+export { default as pruneBuild } from './prune-build';
+export { default as relativeLinks } from './relative-links';

package/src/integrations/prune-build.ts

@@ -0,0 +1,71 @@
+import { readdir, readFile, rm } from 'node:fs/promises';
+import { basename, extname, join, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { AstroIntegration } from 'astro';
+
+async function getFiles(dir: string, { includeExts, excludeExts }: { includeExts?: string[], excludeExts?: string[] } = {}): Promise<string[]> {
+  let files: string[] = [];
+  const content = await readdir(dir, { withFileTypes: true });
+  for (const c of content) {
+    if (c.isDirectory()) {
+      files = files.concat(await getFiles(join(dir, c.name), { includeExts, excludeExts }));
+    } else {
+      const ext = extname(c.name);
+      if ((!includeExts || includeExts.includes(ext)) && (!excludeExts || !excludeExts.includes(ext))) {
+        files.push(join(dir, c.name));
+      }
+    }
+  }
+  return files;
+}
+
+interface PruneBuildOpts {
+  keep?: (string | RegExp)[]
+}
+export default function(opts?: PruneBuildOpts): AstroIntegration {
+  return {
+    name: 'prune-build',
+    hooks: {
+      'astro:build:done': async ({ dir, logger }) => {
+        logger.info('Pruning unused assets from build');
+        let dirPath = fileURLToPath(dir);
+        if (dirPath.endsWith(sep)) {
+          dirPath = dirPath.slice(0, -1);
+        }
+        const assets = await getFiles(dirPath, { excludeExts: ['.html'] });
+        const files = await getFiles(dirPath, { includeExts: ['.css', '.html', '.js'] });
+        const keep = new Set<string>();
+        
+        for (const file of files) {
+          const content = await readFile(file, 'utf8');
+          for (const asset of assets) {
+            if (content.includes(basename(asset))) {
+              keep.add(asset);
+            }
+          }
+        }
+
+        for (const asset of assets) {
+          if (!keep.has(asset)) {
+            let prune = true;
+            const relPath = asset.replace(dirPath, '').replace(/\\/g, '/');
+            if (opts?.keep && opts.keep.length > 0) {
+              for (const k of opts.keep) {
+                if ((typeof k == 'string' && k === relPath) || (k instanceof RegExp && k.test(relPath))) {
+                  prune = false;
+                  break;
+                }
+              }
+            }
+            if (prune) {
+              logger.warn(`Pruning asset: ${relPath}`);
+              await rm(asset, { force: true });
+            } else {
+              logger.info(`Retaining asset: ${relPath}`);
+            }
+          }
+        }
+      }
+    }
+  }
+}