@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/src/core/filter.ts

@@ -0,0 +1,229 @@
+import { toDate } from './dates';
+
+/*
+ * Filters (filter-builder, data-table): groups of conditions combined with
+ * AND / OR, nested. Each field has a type; each type its operators, with
+ * Spanish labels and how many values they take. matchesFilter() tests a
+ * record (text ignores case and accents; dates compare whole days; incomplete
+ * conditions do not filter); describeFilter() writes the filter as a sentence
+ * ("Estado es Activo y (Monto mayor que 100 o País es México)").
+ */
+
+export type FilterFieldType = 'text' | 'number' | 'date' | 'select' | 'boolean';
+
+export interface FilterField {
+  key: string;
+  label: string;
+  type?: FilterFieldType;
+  /** 'select' fields: the values to choose from. */
+  options?: Array<{ value: string; label: string }>;
+}
+
+export type FilterValue = string | number | null | [string | number | null, string | number | null];
+
+export interface FilterRule {
+  id: string;
+  field: string;
+  operator: string;
+  value?: FilterValue;
+}
+
+export interface FilterGroup {
+  id: string;
+  combinator: 'and' | 'or';
+  rules: FilterNode[];
+}
+
+export type FilterNode = FilterRule | FilterGroup;
+
+export interface OperatorDef {
+  id: string;
+  label: string;
+  /** How many values it takes. */
+  arity: 0 | 1 | 2;
+}
+
+export const OPERATORS: Record<FilterFieldType, OperatorDef[]> = {
+  text: [
+    { id: 'contains', label: 'contiene', arity: 1 },
+    { id: 'not_contains', label: 'no contiene', arity: 1 },
+    { id: 'equals', label: 'es', arity: 1 },
+    { id: 'not_equals', label: 'no es', arity: 1 },
+    { id: 'starts', label: 'empieza por', arity: 1 },
+    { id: 'ends', label: 'termina en', arity: 1 },
+    { id: 'empty', label: 'está vacío', arity: 0 },
+    { id: 'not_empty', label: 'no está vacío', arity: 0 },
+  ],
+  number: [
+    { id: 'eq', label: 'igual a', arity: 1 },
+    { id: 'neq', label: 'distinto de', arity: 1 },
+    { id: 'gt', label: 'mayor que', arity: 1 },
+    { id: 'gte', label: 'mayor o igual que', arity: 1 },
+    { id: 'lt', label: 'menor que', arity: 1 },
+    { id: 'lte', label: 'menor o igual que', arity: 1 },
+    { id: 'between', label: 'entre', arity: 2 },
+    { id: 'empty', label: 'está vacío', arity: 0 },
+    { id: 'not_empty', label: 'no está vacío', arity: 0 },
+  ],
+  date: [
+    { id: 'on', label: 'es el', arity: 1 },
+    { id: 'before', label: 'antes del', arity: 1 },
+    { id: 'after', label: 'después del', arity: 1 },
+    { id: 'between', label: 'entre', arity: 2 },
+    { id: 'empty', label: 'está vacío', arity: 0 },
+    { id: 'not_empty', label: 'no está vacío', arity: 0 },
+  ],
+  select: [
+    { id: 'is', label: 'es', arity: 1 },
+    { id: 'is_not', label: 'no es', arity: 1 },
+    { id: 'empty', label: 'está vacío', arity: 0 },
+    { id: 'not_empty', label: 'no está vacío', arity: 0 },
+  ],
+  boolean: [
+    { id: 'true', label: 'es sí', arity: 0 },
+    { id: 'false', label: 'es no', arity: 0 },
+  ],
+};
+
+let sequence = 0;
+export const filterId = () => `f${(++sequence).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+
+export const isGroup = (node: FilterNode): node is FilterGroup => 'rules' in node && Array.isArray((node as FilterGroup).rules);
+
+export const emptyFilter = (combinator: 'and' | 'or' = 'and'): FilterGroup => ({ id: filterId(), combinator, rules: [] });
+
+export const typeOf = (field: FilterField | undefined): FilterFieldType => field?.type ?? 'text';
+
+export const operatorsFor = (field: FilterField | undefined) => OPERATORS[typeOf(field)];
+
+export const operatorOf = (field: FilterField | undefined, id: string) => operatorsFor(field).find((operator) => operator.id === id) ?? operatorsFor(field)[0]!;
+
+/** A new condition on `field`: its type's first operator, no value yet. */
+export function newRule(field: FilterField): FilterRule {
+  const operator = operatorsFor(field)[0]!;
+  return { id: filterId(), field: field.key, operator: operator.id, value: operator.arity === 2 ? [null, null] : null };
+}
+
+const blank = (value: unknown) => value === null || value === undefined || (typeof value === 'string' && value.trim() === '');
+
+/** The condition has every value its operator needs. */
+export function isComplete(rule: FilterRule, fields: FilterField[]): boolean {
+  const field = fields.find((candidate) => candidate.key === rule.field);
+  if (!field) return false;
+  const { arity } = operatorOf(field, rule.operator);
+  if (arity === 0) return true;
+  if (arity === 1) return !blank(rule.value);
+  return Array.isArray(rule.value) && !blank(rule.value[0]) && !blank(rule.value[1]);
+}
+
+const fold = (value: unknown) => String(value ?? '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase().trim();
+const day = (value: unknown) => {
+  if (blank(value)) return null;
+  const date = toDate(value as string, new Date(Number.NaN));
+  return Number.isNaN(date.getTime()) ? null : date.getTime();
+};
+
+function testRule(record: Record<string, unknown>, rule: FilterRule, field: FilterField): boolean {
+  const raw = record[field.key];
+  const type = typeOf(field);
+  const { id } = operatorOf(field, rule.operator);
+  if (id === 'empty') return blank(raw);
+  if (id === 'not_empty') return !blank(raw);
+  const [a, b] = Array.isArray(rule.value) ? rule.value : [rule.value, null];
+  switch (type) {
+    case 'number': {
+      const n = Number(raw);
+      const x = Number(a);
+      const y = Number(b);
+      if (blank(raw) || Number.isNaN(n)) return false;
+      if (id === 'eq') return n === x;
+      if (id === 'neq') return n !== x;
+      if (id === 'gt') return n > x;
+      if (id === 'gte') return n >= x;
+      if (id === 'lt') return n < x;
+      if (id === 'lte') return n <= x;
+      return n >= Math.min(x, y) && n <= Math.max(x, y);
+    }
+    case 'date': {
+      const n = day(raw);
+      const x = day(a);
+      const y = day(b);
+      if (n === null || x === null) return false;
+      if (id === 'on') return n === x;
+      if (id === 'before') return n < x;
+      if (id === 'after') return n > x;
+      return y !== null && n >= Math.min(x, y) && n <= Math.max(x, y);
+    }
+    case 'boolean':
+      return id === 'true' ? Boolean(raw) : !raw;
+    case 'select':
+      return id === 'is' ? String(raw) === String(a) : String(raw) !== String(a);
+    default: {
+      const text = fold(raw);
+      const needle = fold(a);
+      if (id === 'contains') return text.includes(needle);
+      if (id === 'not_contains') return !text.includes(needle);
+      if (id === 'equals') return text === needle;
+      if (id === 'not_equals') return text !== needle;
+      if (id === 'starts') return text.startsWith(needle);
+      return text.endsWith(needle);
+    }
+  }
+}
+
+/** Whether `record` passes `filter`; incomplete conditions (and empty groups) do not filter. */
+export function matchesFilter(record: Record<string, unknown>, filter: FilterGroup, fields: FilterField[]): boolean {
+  const results: boolean[] = [];
+  for (const node of filter.rules) {
+    if (isGroup(node)) {
+      if (!hasConditions(node, fields)) continue;
+      results.push(matchesFilter(record, node, fields));
+      continue;
+    }
+    const field = fields.find((candidate) => candidate.key === node.field);
+    if (!field || !isComplete(node, fields)) continue;
+    results.push(testRule(record, node, field));
+  }
+  if (!results.length) return true;
+  return filter.combinator === 'and' ? results.every(Boolean) : results.some(Boolean);
+}
+
+/** The group holds at least one complete condition (at any depth). */
+export function hasConditions(filter: FilterGroup, fields: FilterField[]): boolean {
+  return filter.rules.some((node) => (isGroup(node) ? hasConditions(node, fields) : isComplete(node, fields)));
+}
+
+const shown = (field: FilterField, value: unknown) => {
+  if (blank(value)) return '…';
+  if (typeOf(field) === 'select') return field.options?.find((option) => option.value === String(value))?.label ?? String(value);
+  if (typeOf(field) === 'date') {
+    const date = toDate(value as string, new Date(Number.NaN));
+    if (!Number.isNaN(date.getTime())) return new Intl.DateTimeFormat('es', { day: 'numeric', month: 'short', year: 'numeric' }).format(date);
+  }
+  return String(value);
+};
+
+/** The filter as a sentence; incomplete conditions are left out. Empty: ''. */
+export function describeFilter(filter: FilterGroup, fields: FilterField[], nested = false): string {
+  const joiner = filter.combinator === 'and' ? ' y ' : ' o ';
+  const parts: string[] = [];
+  for (const node of filter.rules) {
+    if (isGroup(node)) {
+      const inner = describeFilter(node, fields, true);
+      if (inner) parts.push(inner);
+      continue;
+    }
+    const field = fields.find((candidate) => candidate.key === node.field);
+    if (!field || !isComplete(node, fields)) continue;
+    const operator = operatorOf(field, node.operator);
+    const [a, b] = Array.isArray(node.value) ? node.value : [node.value, null];
+    const values = operator.arity === 0 ? '' : operator.arity === 1 ? ` ${shown(field, a)}` : ` ${shown(field, a)} y ${shown(field, b)}`;
+    parts.push(`${field.label} ${operator.label}${values}`);
+  }
+  if (!parts.length) return '';
+  const text = parts.join(joiner);
+  return nested && parts.length > 1 ? `(${text})` : text;
+}
+
+/** A deep copy (callbacks get their own). */
+export const cloneFilter = (filter: FilterGroup): FilterGroup => JSON.parse(JSON.stringify(filter)) as FilterGroup;

package/src/core/gsap.ts

@@ -1,65 +1,80 @@
-import { gsap } from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
-import { SplitText } from 'gsap/SplitText';
-import { CustomEase } from 'gsap/CustomEase';
-import { Flip } from 'gsap/Flip';
-import { PATHS, springPath } from './curves';
-
-/** elastic overshoot; close to the `--mk-ease-elastic` CSS curve. */
-export const ELASTIC = 'elastic.out(1, 0.45)';
-
-/** Custom eases registered by `registerMotion()`. Use the names as GSAP `ease` values. */
-export const EASE = {
-  signature: 'mk-signature',
-  flow: 'mk-flow',
-  /** A closing surface's fade (`.56,.27,0,1`). Kept from v0.1; same curve as `fadeAway`. */
-  close: 'mk-close',
-  fadeAway: 'mk-fade-away',
-  /** A closing surface's blur (`.37,.35,0,1`). */
-  blurAway: 'mk-blur-away',
-  chatScroll: 'mk-chat-scroll',
-  /** Items travelling to a new place in a list (spring ratio .52). */
-  layoutReflow: 'mk-layout-reflow',
-  /** A dragged item landing in its slot (spring ratio .62). */
-  sortableLand: 'mk-sortable-land',
-  slot: 'mk-slot',
-  slotResize: 'mk-slot-resize',
-  liquidSize: 'mk-liquid-size',
-  swatch: 'mk-swatch',
-  swatchLight: 'mk-swatch-light',
-  sheet: 'mk-sheet',
-  inOut: 'mk-in-out',
-} as const;
-
-const CURVES: Record<keyof typeof EASE, string> = {
-  signature: PATHS.signature,
-  flow: PATHS.flow,
-  close: '.56,.27,0,1',
-  fadeAway: '.56,.27,0,1',
-  blurAway: '.37,.35,0,1',
-  chatScroll: PATHS.chatScroll,
-  layoutReflow: springPath(0.52),
-  sortableLand: springPath(0.62),
-  slot: '.34,1.56,.64,1',
-  slotResize: '.2,0,0,1',
-  liquidSize: '.8,.3,.5,.8',
-  swatch: '.38,.49,0,1.5',
-  swatchLight: '.11,1,0,1',
-  sheet: '.16,1,.3,1',
-  inOut: '.42,0,.58,1',
-};
-
-let registered = false;
-
-/** Register plugins and eases once. Safe to call from every recipe and during SSR (no-op). */
-export function registerMotion() {
-  if (typeof window === 'undefined') return;
-  // Cancels the MK_HEAD_SCRIPT safety net: JS owns the entrance states from here on.
-  document.documentElement.classList.add('mk-ready');
-  if (registered) return;
-  registered = true;
-  gsap.registerPlugin(ScrollTrigger, SplitText, CustomEase, Flip);
-  for (const key of Object.keys(EASE) as Array<keyof typeof EASE>) CustomEase.create(EASE[key], CURVES[key]);
-}
-
-export { gsap, ScrollTrigger, SplitText, CustomEase, Flip };
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { SplitText } from 'gsap/SplitText';
+import { CustomEase } from 'gsap/CustomEase';
+import { Flip } from 'gsap/Flip';
+import { PATHS, springPath } from './curves';
+
+/** elastic overshoot; close to the `--mk-ease-elastic` CSS curve. */
+export const ELASTIC = 'elastic.out(1, 0.45)';
+
+/** Custom eases registered by `registerMotion()`. Use the names as GSAP `ease` values. */
+export const EASE = {
+  signature: 'mk-signature',
+  flow: 'mk-flow',
+  /** A closing surface's fade (`.56,.27,0,1`). Kept from v0.1; same curve as `fadeAway`. */
+  close: 'mk-close',
+  fadeAway: 'mk-fade-away',
+  /** A closing surface's blur (`.37,.35,0,1`). */
+  blurAway: 'mk-blur-away',
+  chatScroll: 'mk-chat-scroll',
+  /** Items travelling to a new place in a list (spring ratio .52). */
+  layoutReflow: 'mk-layout-reflow',
+  /** A dragged item landing in its slot (spring ratio .62). */
+  sortableLand: 'mk-sortable-land',
+  slot: 'mk-slot',
+  slotResize: 'mk-slot-resize',
+  liquidSize: 'mk-liquid-size',
+  swatch: 'mk-swatch',
+  swatchLight: 'mk-swatch-light',
+  sheet: 'mk-sheet',
+  inOut: 'mk-in-out',
+  /** Melonmind's button press (`buttonClickAnimation`, .37,1.42,.37,1). */
+  click: 'mk-click',
+  /** Melonmind's playful padding/radius morph (.38,.49,0,2). */
+  playful: 'mk-playful',
+  /** Melonmind's surface entrance (`animation-general-in-2`, .1,.8,0,1.1). */
+  pop: 'mk-pop',
+  /** Melonmind's entry wipe (.38,.49,0,1). */
+  wipe: 'mk-wipe',
+  /** Melonmind's error shake (.6,.6,.12,1.26). */
+  shake: 'mk-shake',
+} as const;
+
+const CURVES: Record<keyof typeof EASE, string> = {
+  signature: PATHS.signature,
+  flow: PATHS.flow,
+  close: '.56,.27,0,1',
+  fadeAway: '.56,.27,0,1',
+  blurAway: '.37,.35,0,1',
+  chatScroll: PATHS.chatScroll,
+  layoutReflow: springPath(0.52),
+  sortableLand: springPath(0.62),
+  slot: '.34,1.56,.64,1',
+  slotResize: '.2,0,0,1',
+  liquidSize: '.8,.3,.5,.8',
+  swatch: '.38,.49,0,1.5',
+  swatchLight: '.11,1,0,1',
+  sheet: '.16,1,.3,1',
+  inOut: '.42,0,.58,1',
+  click: '.37,1.42,.37,1',
+  playful: '.38,.49,0,2',
+  pop: '.1,.8,0,1.1',
+  wipe: '.38,.49,0,1',
+  shake: '.6,.6,.12,1.26',
+};
+
+let registered = false;
+
+/** Register plugins and eases once. Safe to call from every recipe and during SSR (no-op). */
+export function registerMotion() {
+  if (typeof window === 'undefined') return;
+  // Cancels the MK_HEAD_SCRIPT safety net: JS owns the entrance states from here on.
+  document.documentElement.classList.add('mk-ready');
+  if (registered) return;
+  registered = true;
+  gsap.registerPlugin(ScrollTrigger, SplitText, CustomEase, Flip);
+  for (const key of Object.keys(EASE) as Array<keyof typeof EASE>) CustomEase.create(EASE[key], CURVES[key]);
+}
+
+export { gsap, ScrollTrigger, SplitText, CustomEase, Flip };