@astronox/core 0.1.0 → 0.2.1

package/src/patterns/Table/tableFilterController.ts

@@ -13,8 +13,57 @@ type CachedFilterValues = {
 };
 
 const initializedAttribute = 'data-table-filters-initialized';
+const externalFiltersAttribute = 'data-table-filter-external';
+const exclusionsAttribute = 'data-table-filter-exclusions';
+const refreshEvent = 'table-filter:refresh';
 const noop = (): void => undefined;
 
+export function setTableExternalFilterActive(
+  root: HTMLElement,
+  key: string,
+  active: boolean,
+): void {
+  setTokenAttribute(root, externalFiltersAttribute, key, active);
+}
+
+export function setTableRowFilterExclusion(
+  row: HTMLElement,
+  key: string,
+  excluded: boolean,
+): void {
+  setTokenAttribute(row, exclusionsAttribute, key, excluded);
+}
+
+function setTokenAttribute(
+  element: HTMLElement,
+  attribute: string,
+  key: string,
+  enabled: boolean,
+): void {
+  const normalizedKey = key.trim();
+  if (!normalizedKey || /\s/.test(normalizedKey)) {
+    throw new Error('Table filter keys must be non-empty tokens');
+  }
+
+  const tokens = new Set(
+    (element.getAttribute(attribute) ?? '')
+      .split(/\s+/)
+      .filter(Boolean),
+  );
+  if (enabled) tokens.add(normalizedKey);
+  else tokens.delete(normalizedKey);
+
+  if (tokens.size > 0) {
+    element.setAttribute(attribute, [...tokens].join(' '));
+  } else {
+    element.removeAttribute(attribute);
+  }
+}
+
+export function refreshTableFilters(root: HTMLElement): void {
+  root.dispatchEvent(new Event(refreshEvent));
+}
+
 export function initTableFilters(root: HTMLElement): () => void {
   if (root.getAttribute(initializedAttribute) === 'true') return noop;
 
@@ -79,7 +128,11 @@ export function initTableFilters(root: HTMLElement): () => void {
     const activeSelections = [...selections.entries()].filter(
       ([, value]) => value.length > 0,
     );
-    const active = query.length > 0 || activeSelections.length > 0;
+    const hasExternalFilter =
+      root.hasAttribute(externalFiltersAttribute) ||
+      rows.some((row) => row.hasAttribute(exclusionsAttribute));
+    const active =
+      query.length > 0 || activeSelections.length > 0 || hasExternalFilter;
     let visibleRows = 0;
 
     for (const row of rows) {
@@ -92,7 +145,10 @@ export function initTableFilters(root: HTMLElement): () => void {
         ([field, selectedValue]) =>
           (cached.values[field] ?? []).includes(selectedValue),
       );
-      const visible = matchesSearch && matchesSelections;
+      const visible =
+        matchesSearch &&
+        matchesSelections &&
+        !row.hasAttribute(exclusionsAttribute);
 
       if (row.hidden !== !visible) row.hidden = !visible;
       if (visible) visibleRows += 1;
@@ -168,6 +224,7 @@ export function initTableFilters(root: HTMLElement): () => void {
   applyFilters();
   search?.addEventListener('input', handleSearch);
   root.addEventListener('combobox:change', handleComboboxChange);
+  root.addEventListener(refreshEvent, scheduleFilters);
   table.addEventListener('table:rows-appended', handleRowsAppended);
   table.addEventListener(
     'table:progressive-complete',
@@ -182,6 +239,7 @@ export function initTableFilters(root: HTMLElement): () => void {
     }
     search?.removeEventListener('input', handleSearch);
     root.removeEventListener('combobox:change', handleComboboxChange);
+    root.removeEventListener(refreshEvent, scheduleFilters);
     table.removeEventListener('table:rows-appended', handleRowsAppended);
     table.removeEventListener(
       'table:progressive-complete',

package/src/patterns/Table/tableLayout.ts

@@ -25,7 +25,7 @@ const compactIndexRoleMinimums = {
 
 const regularIndexRoleMinimums = {
   ...compactIndexRoleMinimums,
-  value: 7,
+  value: 8.5,
 } satisfies Record<TableColumnRole, number>;
 
 export function getTableColumnDensity(
@@ -39,6 +39,7 @@ export function getTableColumnTemplate(
   layout: TableLayout = 'default',
   indexSizing: TableIndexSizing = 'compact',
 ): string {
+  const columnDensity = getTableColumnDensity(columns);
   const indexMinimums = getIndexRoleMinimums(columns);
 
   return columns
@@ -46,7 +47,7 @@ export function getTableColumnTemplate(
       layout === 'index'
         ? indexSizing === 'overflow'
           ? 'max-content'
-          : getIndexColumnTrack(column.role, indexMinimums)
+          : getIndexColumnTrack(column.role, indexMinimums, columnDensity)
         : getDefaultColumnTrack(column),
     )
     .join(' ');
@@ -91,9 +92,15 @@ function getIndexRoleMinimums(
 function getIndexColumnTrack(
   role: TableColumnRole,
   minimums: Record<TableColumnRole, number>,
+  density: 'compact' | 'regular',
 ): string {
   const minimum = `${minimums[role]}rem`;
-  return role === 'primary' ? `minmax(${minimum}, 1fr)` : minimum;
+  if (role === 'primary') {
+    const weight = density === 'compact' ? 2 : 1;
+    return `minmax(${minimum}, ${weight}fr)`;
+  }
+  if (role === 'value') return `minmax(${minimum}, 1fr)`;
+  return minimum;
 }
 
 function getDefaultColumnTrack(column: TableColumn): string {

package/src/routing/index.ts

@@ -0,0 +1 @@
+export * from './localized';

package/src/routing/localized.ts

@@ -0,0 +1,155 @@
+import type { LocaleConfig, LocaleDefinition } from '../i18n/config';
+import { normalizePathname } from '../seo/url';
+
+export type LocalizedRoutePolicy = 'localized' | 'technical';
+
+export type LocalizedRouter<TLocale extends string> = {
+  localizePath(path: string, locale: TLocale): string;
+  stripLocalePrefix(path: string): { locale: TLocale; path: string };
+  resolveLocale(path: string): TLocale;
+  getEquivalentPath(path: string, locale: TLocale): string;
+  getRoutePolicy(path: string): LocalizedRoutePolicy;
+  normalizePath(path: string): string;
+};
+
+export function createLocalizedRouter<
+  TDefinition extends LocaleDefinition,
+>({
+  localeConfig,
+  localizedRoots = ['/'],
+  technicalRoots = [],
+}: {
+  localeConfig: LocaleConfig<TDefinition>;
+  localizedRoots?: readonly string[];
+  technicalRoots?: readonly string[];
+}): LocalizedRouter<TDefinition['id']> {
+  type Locale = TDefinition['id'];
+
+  const normalizedLocalizedRoots = localizedRoots.map(normalizePathname);
+  const normalizedTechnicalRoots = technicalRoots.map(normalizePathname);
+
+  const localizePath = (path: string, locale: Locale): string => {
+    const { pathname, suffix } = splitPathReference(path);
+    const normalizedPath = normalizePathname(pathname);
+    if (
+      !localeConfig.prefixDefaultLocale &&
+      locale === localeConfig.defaultLocale
+    ) {
+      return `${normalizedPath}${suffix}`;
+    }
+
+    const prefix = `/${localeConfig.getDefinition(locale).urlCode}`;
+    const localizedPath = normalizedPath === '/'
+      ? prefix
+      : normalizePathname(`${prefix}${normalizedPath}`);
+    return `${localizedPath}${suffix}`;
+  };
+
+  const stripLocalePrefix = (
+    path: string,
+  ): { locale: Locale; path: string } => {
+    const { pathname, suffix } = splitPathReference(path);
+    const normalizedPath = normalizePathname(pathname);
+    const [firstSegment = ''] = normalizedPath.slice(1).split('/');
+    const locale = localeConfig.getLocaleFromUrlCode(firstSegment);
+
+    if (!locale) {
+      return {
+        locale: localeConfig.defaultLocale,
+        path: `${normalizedPath}${suffix}`,
+      };
+    }
+
+    const prefix = `/${firstSegment}`;
+    const unprefixedPath = normalizedPath.slice(prefix.length);
+    return {
+      locale,
+      path: `${normalizePathname(unprefixedPath || '/')}${suffix}`,
+    };
+  };
+
+  const matchesRoot = (path: string, root: string): boolean =>
+    path === root || path.startsWith(`${root}/`);
+
+  const getRoutePolicy = (path: string): LocalizedRoutePolicy => {
+    const { path: unprefixedPath } = stripLocalePrefix(path);
+    const normalizedPath = normalizePathname(unprefixedPath);
+
+    if (
+      normalizedTechnicalRoots.some((root) =>
+        matchesRoot(normalizedPath, root),
+      )
+    ) {
+      return 'technical';
+    }
+
+    return normalizedLocalizedRoots.some(
+      (root) => root === '/' || matchesRoot(normalizedPath, root),
+    )
+      ? 'localized'
+      : 'technical';
+  };
+
+  return {
+    localizePath,
+    stripLocalePrefix,
+    resolveLocale(path: string): Locale {
+      return stripLocalePrefix(path).locale;
+    },
+    getEquivalentPath(path: string, locale: Locale): string {
+      const { path: unprefixedPath } = stripLocalePrefix(path);
+      return getRoutePolicy(unprefixedPath) === 'localized'
+        ? localizePath(unprefixedPath, locale)
+        : unprefixedPath;
+    },
+    getRoutePolicy,
+    normalizePath(path: string): string {
+      const { pathname, suffix } = splitPathReference(path);
+      return `${normalizePathname(pathname)}${suffix}`;
+    },
+  };
+}
+
+export type LocalizedRouteParams = {
+  locale: string;
+};
+
+export function createLocalizedRoutePaths<
+  TDefinition extends LocaleDefinition,
+>(localeConfig: LocaleConfig<TDefinition>): readonly {
+  params: LocalizedRouteParams;
+  props: { locale: TDefinition['id'] };
+}[] {
+  return localeConfig.localizedLocales.map((locale) => ({
+    params: {
+      locale: localeConfig.getDefinition(locale).urlCode,
+    },
+    props: { locale },
+  }));
+}
+
+function splitPathReference(value: string): {
+  pathname: string;
+  suffix: string;
+} {
+  const cleanValue = value.trim();
+
+  if (/^https?:\/\//i.test(cleanValue)) {
+    const url = new URL(cleanValue);
+    return {
+      pathname: url.pathname,
+      suffix: `${url.search}${url.hash}`,
+    };
+  }
+
+  const searchIndex = cleanValue.indexOf('?');
+  const hashIndex = cleanValue.indexOf('#');
+  const suffixIndex = [searchIndex, hashIndex]
+    .filter((index) => index >= 0)
+    .reduce((lowest, index) => Math.min(lowest, index), cleanValue.length);
+
+  return {
+    pathname: cleanValue.slice(0, suffixIndex),
+    suffix: cleanValue.slice(suffixIndex),
+  };
+}

package/src/seo/index.ts

@@ -1,5 +1,6 @@
 export { default as StaticRedirect } from './StaticRedirect.astro';
 export * from './pageSeo';
+export * from './localizedMeta';
 export * from './robots';
 export * from './sitemap';
 export * from './structuredData';

package/src/seo/localizedMeta.ts

@@ -0,0 +1,58 @@
+import type { PageMeta } from '../config/pageMeta';
+import type { LocaleConfig, LocaleDefinition } from '../i18n/config';
+import type { LocalizedRouter } from '../routing/localized';
+import { normalizePathname } from './url';
+
+export type LocalizedMetaInput = Omit<
+  PageMeta,
+  | 'alternates'
+  | 'canonical'
+  | 'lang'
+  | 'openGraphLocale'
+  | 'openGraphLocaleAlternates'
+> & {
+  canonical: string;
+};
+
+export function createLocalizedPageMeta<
+  TDefinition extends LocaleDefinition,
+>({
+  input,
+  locale,
+  localeConfig,
+  router,
+  socialImageAlt,
+}: {
+  input: LocalizedMetaInput;
+  locale: TDefinition['id'];
+  localeConfig: LocaleConfig<TDefinition>;
+  router: LocalizedRouter<TDefinition['id']>;
+  socialImageAlt?: string;
+}): PageMeta {
+  const definition = localeConfig.getDefinition(locale);
+  const { path } = router.stripLocalePrefix(
+    normalizePathname(input.canonical),
+  );
+  const alternates = localeConfig.definitions.map((alternateLocale) => ({
+    lang: alternateLocale.languageTag,
+    href: router.localizePath(path, alternateLocale.id),
+  }));
+
+  return {
+    ...input,
+    canonical: router.localizePath(path, locale),
+    lang: definition.languageTag,
+    socialImageAlt: input.socialImageAlt ?? socialImageAlt,
+    openGraphLocale: definition.openGraphLocale,
+    openGraphLocaleAlternates: localeConfig.definitions
+      .filter((alternateLocale) => alternateLocale.id !== locale)
+      .map((alternateLocale) => alternateLocale.openGraphLocale),
+    alternates: [
+      ...alternates,
+      {
+        lang: 'x-default',
+        href: router.localizePath(path, localeConfig.defaultLocale),
+      },
+    ],
+  };
+}

package/src/styles/style.css

@@ -41,8 +41,10 @@
 @import '../components/data-display/Tag/Tag.css' layer(components);
 @import '../components/data-display/TextPair/TextPair.css'
   layer(components);
+@import '../components/forms/Checkbox/Checkbox.css' layer(components);
 @import '../components/forms/FieldLabel/FieldLabel.css' layer(components);
 @import '../components/forms/FieldError/FieldError.css' layer(components);
+@import '../components/forms/FieldGroup/FieldGroup.css' layer(components);
 @import '../components/forms/TextInput/TextInput.css' layer(components);
 @import '../components/feedback/Tooltip/Tooltip.css' layer(components);
 @import '../components/feedback/Spinner/Spinner.css' layer(components);