mtrl 0.3.6 → 0.3.8

package/src/core/collection/list-manager.ts

@@ -0,0 +1,333 @@
+// src/core/collection/list-manager.ts
+
+import { createRouteAdapter, RouteAdapter, QueryDefinition } from './adapters/route';
+
+/**
+ * List item interface
+ */
+export interface ListItem {
+  id: string;
+  [key: string]: any;
+}
+
+/**
+ * List with items setter
+ */
+export interface List {
+  setItems: (items: any[]) => void;
+}
+
+/**
+ * Metadata for pagination
+ */
+export interface PaginationMeta {
+  cursor: string | null;
+  hasNext: boolean;
+}
+
+/**
+ * Response format from loadItems
+ */
+export interface LoadItemsResponse<T = any> {
+  items: T[];
+  meta: PaginationMeta;
+}
+
+/**
+ * Load status callback data
+ */
+export interface LoadStatus<T = any> {
+  loading: boolean;
+  hasNext?: boolean;
+  hasPrev?: boolean;
+  items?: T[];
+}
+
+/**
+ * Page loader configuration
+ */
+export interface PageLoaderConfig<T = any> {
+  onLoad?: (status: LoadStatus<T>) => void;
+  pageSize?: number;
+}
+
+/**
+ * Page loader interface
+ */
+export interface PageLoader<T = any> {
+  /**
+   * Load a specific page by cursor
+   * @param cursor - Cursor pointing to the page
+   * @param addToHistory - Whether to add current cursor to history
+   * @returns Page status
+   */
+  load: (cursor?: string | null, addToHistory?: boolean) => Promise<{
+    hasNext: boolean;
+    hasPrev: boolean;
+  } | undefined>;
+
+  /**
+   * Load next page
+   * @returns Page status
+   */
+  loadNext: () => Promise<{
+    hasNext: boolean;
+    hasPrev: boolean;
+  } | undefined>;
+
+  /**
+   * Load previous page
+   * @returns Page status
+   */
+  loadPrev: () => Promise<{
+    hasNext: boolean;
+    hasPrev: boolean;
+  } | undefined>;
+
+  /**
+   * Current loading state
+   */
+  readonly loading: boolean;
+
+  /**
+   * Current cursor
+   */
+  readonly cursor: string | null;
+}
+
+/**
+ * List manager config
+ */
+export interface ListManagerConfig<T = any> {
+  /**
+   * Transform function to convert API items to app format
+   */
+  transform?: (item: any) => T;
+  
+  /**
+   * Base URL for API requests
+   */
+  baseUrl?: string;
+}
+
+/**
+ * List manager interface
+ */
+export interface ListManager<T = any> {
+  /**
+   * Load items with optional parameters
+   * @param params - Query parameters
+   * @returns Loaded items with pagination metadata
+   */
+  loadItems: (params?: Record<string, any>) => Promise<LoadItemsResponse<T>>;
+  
+  /**
+   * Create a page loader for the specified list
+   * @param list - List to manage
+   * @param config - Page loader configuration
+   * @returns Page loader
+   */
+  createPageLoader: (list: List, config?: PageLoaderConfig<T>) => PageLoader<T>;
+}
+
+/**
+ * Creates a list manager for a specific collection
+ * @param collection - Collection name
+ * @param config - Configuration options
+ * @returns List manager methods
+ */
+export const createListManager = <T = any>(
+  collection: string, 
+  config: ListManagerConfig<T> = {}
+): ListManager<T> => {
+  const {
+    transform = (item: any) => item as T,
+    baseUrl = 'http://localhost:4000/api'
+  } = config;
+
+  // Initialize route adapter
+  const adapter: RouteAdapter = createRouteAdapter({
+    base: baseUrl,
+    endpoints: {
+      list: `/${collection}`
+    },
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  });
+
+  /**
+   * Load items with cursor pagination
+   * @param params - Query parameters
+   * @returns Loaded items with pagination metadata
+   */
+  const loadItems = async (params: Record<string, any> = {}): Promise<LoadItemsResponse<T>> => {
+    try {
+      const response = await adapter.read(params as QueryDefinition);
+
+      return {
+        items: response.items.map(transform),
+        meta: response.meta as PaginationMeta
+      };
+    } catch (error) {
+      console.error(`Error loading ${collection}:`, error);
+      return {
+        items: [],
+        meta: {
+          cursor: null,
+          hasNext: false
+        }
+      };
+    }
+  };
+
+  /**
+   * Create a page loader for the specified list
+   * @param list - List to manage
+   * @param config - Page loader configuration
+   * @returns Page loader
+   */
+  const createPageLoader = (
+    list: List, 
+    { onLoad, pageSize = 20 }: PageLoaderConfig<T> = {}
+  ): PageLoader<T> => {
+    let currentCursor: string | null = null;
+    let loading = false;
+    const pageHistory: Array<string | null> = [];
+
+    /**
+     * Load a specific page by cursor
+     * @param cursor - Cursor pointing to the page
+     * @param addToHistory - Whether to add current cursor to history
+     * @returns Page status
+     */
+    const load = async (
+      cursor: string | null = null, 
+      addToHistory = true
+    ): Promise<{ hasNext: boolean; hasPrev: boolean } | undefined> => {
+      if (loading) return;
+
+      loading = true;
+      onLoad?.({ loading: true });
+
+      const { items, meta } = await loadItems({
+        limit: pageSize,
+        cursor
+      });
+
+      if (addToHistory && cursor) {
+        pageHistory.push(currentCursor);
+      }
+      currentCursor = meta.cursor;
+
+      list.setItems(items);
+      loading = false;
+
+      const status = {
+        loading: false,
+        hasNext: meta.hasNext,
+        hasPrev: pageHistory.length > 0,
+        items
+      };
+      
+      onLoad?.(status);
+
+      return {
+        hasNext: meta.hasNext,
+        hasPrev: pageHistory.length > 0
+      };
+    };
+
+    /**
+     * Load next page
+     * @returns Page status
+     */
+    const loadNext = (): Promise<{ hasNext: boolean; hasPrev: boolean } | undefined> => 
+      load(currentCursor);
+
+    /**
+     * Load previous page
+     * @returns Page status
+     */
+    const loadPrev = (): Promise<{ hasNext: boolean; hasPrev: boolean } | undefined> => {
+      const previousCursor = pageHistory.pop();
+      return load(previousCursor, false);
+    };
+
+    return {
+      load,
+      loadNext,
+      loadPrev,
+      get loading(): boolean { return loading; },
+      get cursor(): string | null { return currentCursor; }
+    };
+  };
+
+  return {
+    loadItems,
+    createPageLoader
+  };
+};
+
+/**
+ * Transform functions for common collections
+ */
+export const transforms = {
+  /**
+   * Transform track data
+   * @param track - Raw track data
+   * @returns Formatted track data
+   */
+  track: (track: any): ListItem => ({
+    id: track._id,
+    headline: track.title || 'Untitled',
+    supportingText: track.artist || 'Unknown Artist',
+    meta: track.year?.toString() || ''
+  }),
+
+  /**
+   * Transform playlist data
+   * @param playlist - Raw playlist data
+   * @returns Formatted playlist data
+   */
+  playlist: (playlist: any): ListItem => ({
+    id: playlist._id,
+    headline: playlist.name || 'Untitled Playlist',
+    supportingText: `${playlist.tracks?.length || 0} tracks`,
+    meta: playlist.creator || ''
+  }),
+
+  /**
+   * Transform country data
+   * @param country - Raw country data
+   * @returns Formatted country data
+   */
+  country: (country: any): ListItem => ({
+    id: country._id,
+    headline: country.name || country.code,
+    supportingText: country.continent || '',
+    meta: country.code || ''
+  })
+};
+
+/**
+ * Usage example:
+ *
+ * const trackManager = createListManager<TrackItem>('track', {
+ *   transform: transforms.track
+ * });
+ *
+ * const loader = trackManager.createPageLoader(list, {
+ *   onLoad: ({ loading, hasNext, items }) => {
+ *     updateNavigation({ loading, hasNext });
+ *     logEvent(`Loaded ${items.length} tracks`);
+ *   }
+ * });
+ *
+ * // Initial load
+ * await loader.load();
+ *
+ * // Navigation
+ * nextButton.onclick = () => loader.loadNext();
+ * prevButton.onclick = () => loader.loadPrev();
+ */

package/src/index.ts

@@ -12,7 +12,7 @@ import createBadge from './components/badge';
 import createBottomAppBar from './components/bottom-app-bar';
 import createButton from './components/button';
 import createCard from './components/card';
-import { 
+import {
   createCardContent, 
   createCardHeader, 
   createCardActions, 
@@ -36,6 +36,7 @@ import createSegmentedButton, { createSegment } from './components/segmented-but
 import createSheet from './components/sheet';
 import createSlider from './components/slider';
 import createSnackbar from './components/snackbar';
+import createSelect from './components/select';
 import createSwitch from './components/switch';
 import createTabs, { createTab } from './components/tabs';
 import createTextfield from './components/textfield';
@@ -59,7 +60,7 @@ export {
   createCarousel,
   createCheckbox,
   createChip,
-  createChipSet,
+  createChips,
   createDatePicker,
   createDialog,
   createDivider,
@@ -73,6 +74,7 @@ export {
   createProgress,
   createRadios,
   createSearch,
+  createSelect,
   createSegmentedButton,
   createSegment,
   createSheet,
@@ -85,47 +87,4 @@ export {
   createTimePicker,
   createTopAppBar,
   createTooltip
-};
-
-// Export all "f*" aliases
-export {
-  createElement as fElement,
-  createLayout as fLayout,
-  createBadge as fBadge,
-  createBottomAppBar as fBottomAppBar,
-  createButton as fButton,
-  createCard as fCard,
-  createCardContent as fCardContent, 
-  createCardHeader as fCardHeader, 
-  createCardActions as fCardActions, 
-  createCardMedia as fCardMedia,
-  createCarousel as fCarousel,
-  createCheckbox as fCheckbox,
-  createChip as fChip,
-  createChips as fChips,
-  createDatePicker as fDatePicker,
-  createDialog as fDialog,
-  createDivider as fDivider,
-  createFab as fFab,
-  createExtendedFab as fExtendedFab,
-  createList as fList,
-  createListItem as fListItem,
-  createMenu as fMenu,
-  createNavigation as fNavigation,
-  createNavigationSystem as fNavigationSystem,
-  createProgress as fProgress,
-  createRadios as fRadios,
-  createSearch as fSearch,
-  createSegmentedButton as fSegmentedButton,
-  createSegment as fSegment,
-  createSheet as fSheet,
-  createSlider as fSlider,
-  createSnackbar as fSnackbar,
-  createSwitch as fSwitch,
-  createTabs as fTabs,
-  createTab as fTab,
-  createTextfield as fTextfield,
-  createTimePicker as fTimePicker,
-  createTopAppBar as fTopAppBar,
-  createTooltip as fTooltip
 };

package/src/styles/abstract/_variables.scss

@@ -284,4 +284,22 @@ $spacing-scale: (
     @return map.get($chip-config, $key);
   }
   @return $fallback;
+}
+
+// Textfield configuration
+$textfield: (
+  'height': 56px,
+  'height-small': 48px,
+  'height-large': 64px,
+  'padding-horizontal': 16px,
+  'padding-vertical': 16px,
+  'border-radius': map.get($shape, 'extra-small'),
+  'border-width': 1px,
+  'label-offset': 16px,
+  'icon-size': 24px
+) !default;
+
+// Add textfield function
+@function textfield($key) {
+  @return map.get($textfield, $key);
 }

package/src/styles/components/_button.scss

@@ -106,6 +106,17 @@ $component: '#{base.$prefix}-button';
     opacity: 0.38
   }
 
+  // Active state - applied when the button has a menu open
+  &--active {
+    // Common active state styling for all variants
+    box-shadow: none;
+    
+    // ARIA attribute to indicate active state for accessibility
+    &[aria-expanded="true"] {
+      // For compatibility with ARIA
+    }
+  }
+
   // Variants
   &--filled {
     background-color: t.color('primary');
@@ -116,7 +127,8 @@ $component: '#{base.$prefix}-button';
       @include m.elevation(1);
     }
     
-    &:active {
+    &:active,
+    &.#{$component}--active {
       @include m.state-layer(t.color('on-primary'), 'pressed');
       @include m.elevation(0);
     }
@@ -133,7 +145,8 @@ $component: '#{base.$prefix}-button';
       @include m.elevation(2);
     }
     
-    &:active {
+    &:active,
+    &.#{$component}--active {
       @include m.state-layer(t.color('primary'), 'pressed');
       @include m.elevation(1);
     }
@@ -160,7 +173,8 @@ $component: '#{base.$prefix}-button';
       @include m.elevation(1);
     }
     
-    &:active {
+    &:active,
+    &.#{$component}--active {
       @include m.state-layer(t.color('on-secondary-container'), 'pressed');
       @include m.elevation(0);
     }
@@ -175,7 +189,8 @@ $component: '#{base.$prefix}-button';
       background-color: t.alpha('primary', 0.08);
     }
     
-    &:active {
+    &:active,
+    &.#{$component}--active {
       @include m.state-layer(t.color('primary'), 'pressed');
     }
   }
@@ -189,7 +204,8 @@ $component: '#{base.$prefix}-button';
       background-color: t.alpha('primary', 0.08);
     }
     
-    &:active {
+    &:active,
+    &.#{$component}--active {
       background-color: t.alpha('primary', 0.12);
     }
     

package/src/styles/components/{_chip.scss → _chips.scss}

@@ -44,6 +44,17 @@ $container: '#{base.$prefix}-chips';
     outline-offset: 2px;
   }
   
+  // Active state - applied when the chip has a menu open
+  &--active {
+    // Base active state styling
+    // Will use variant-specific implementations below
+    
+    // ARIA attribute to indicate active state for accessibility
+    &[aria-expanded="true"] {
+      // For compatibility with ARIA
+    }
+  }
+  
   // Disabled state
   &--disabled {
     opacity: 0.38;
@@ -127,7 +138,8 @@ $container: '#{base.$prefix}-chips';
       border-radius: v.chip('border-radius');
     }
     
-    &:active::after {
+    &:active::after,
+    &.#{$component}--active::after {
       content: '';
       position: absolute;
       inset: 0;
@@ -151,7 +163,8 @@ $container: '#{base.$prefix}-chips';
         border-radius: inherit;
       }
       
-      &:active::after {
+      &:active::after,
+      &.#{$component}--active::after {
         content: '';
         position: absolute;
         inset: 0;
@@ -182,7 +195,8 @@ $container: '#{base.$prefix}-chips';
       border-color: t.alpha('outline', v.chip('outlined-border-focus-opacity'));
     }
     
-    &:active::after {
+    &:active::after,
+    &.#{$component}--active::after {
       content: '';
       position: absolute;
       inset: 0;
@@ -206,6 +220,17 @@ $container: '#{base.$prefix}-chips';
         pointer-events: none;
         border-radius: inherit;
       }
+      
+      &:active::after,
+      &.#{$component}--active::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.12;
+        pointer-events: none;
+        border-radius: inherit;
+      }
     }
   }
   
@@ -225,7 +250,8 @@ $container: '#{base.$prefix}-chips';
       border-radius: inherit;
     }
     
-    &:active::after {
+    &:active::after,
+    &.#{$component}--active::after {
       content: '';
       position: absolute;
       inset: 0;
@@ -248,6 +274,17 @@ $container: '#{base.$prefix}-chips';
         pointer-events: none;
         border-radius: inherit;
       }
+      
+      &:active::after,
+      &.#{$component}--active::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.12;
+        pointer-events: none;
+        border-radius: inherit;
+      }
     }
   }
   
@@ -268,6 +305,17 @@ $container: '#{base.$prefix}-chips';
       border-radius: calc(v.chip('border-radius') - 1px);
     }
     
+    &:active::after,
+    &.#{$component}--active::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.12;
+      pointer-events: none;
+      border-radius: calc(v.chip('border-radius') - 1px);
+    }
+    
     &.#{$component}--selected {
       
       padding-left: 8px;
@@ -310,6 +358,17 @@ $container: '#{base.$prefix}-chips';
         pointer-events: none;
         border-radius: calc(v.chip('border-radius') - 1px);
       }
+      
+      &:active::after,
+      &.#{$component}--active::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.12;
+        pointer-events: none;
+        border-radius: calc(v.chip('border-radius') - 1px);
+      }
     }
   }
   
@@ -332,6 +391,17 @@ $container: '#{base.$prefix}-chips';
       border-radius: v.chip('border-radius');
     }
     
+    &:active::after,
+    &.#{$component}--active::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.12;
+      pointer-events: none;
+      border-radius: v.chip('border-radius');
+    }
+    
     &.#{$component}--selected {
       background-color: t.color('secondary-container');
       color: t.color('on-secondary-container');
@@ -349,6 +419,17 @@ $container: '#{base.$prefix}-chips';
         pointer-events: none;
         border-radius: inherit;
       }
+      
+      &:active::after,
+      &.#{$component}--active::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.12;
+        pointer-events: none;
+        border-radius: inherit;
+      }
     }
   }
   
@@ -375,6 +456,17 @@ $container: '#{base.$prefix}-chips';
       pointer-events: none;
       border-radius: inherit;
     }
+    
+    &:active::after,
+    &.#{$component}--active::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.12;
+      pointer-events: none;
+      border-radius: inherit;
+    }
   }
   
   // Suggestion chip
@@ -403,6 +495,17 @@ $container: '#{base.$prefix}-chips';
       border-radius: inherit;
     }
     
+    &:active::after,
+    &.#{$component}--active::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.12;
+      pointer-events: none;
+      border-radius: inherit;
+    }
+    
     &.#{$component}--selected {
       background-color: t.color('secondary-container');
       color: t.color('on-secondary-container');
@@ -416,6 +519,17 @@ $container: '#{base.$prefix}-chips';
         pointer-events: none;
         border-radius: inherit;
       }
+      
+      &:active::after,
+      &.#{$component}--active::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.12;
+        pointer-events: none;
+        border-radius: inherit;
+      }
     }
   }
 }