mithril-materialized 2.0.0-beta.9 → 2.0.0-rc.2

package/README.md

@@ -20,7 +20,7 @@ This is a **major breaking release** that removes all external JavaScript depend
 
 - **Removed dependencies**: No longer requires `materialize-css` or `material-icons` packages
 - **Component updates**: DatePicker and TimePicker now have custom implementations
-- **Icon changes**: Uses custom SVG icons instead of Material Icons font
+- **Icon changes**: Library uses custom SVG icons. Material Icons font is supported too, but not required.
 - **Installation**: Simpler installation process with fewer dependencies
 
 ### 📈 Migration from v1.x
@@ -54,10 +54,10 @@ Your CSS imports can remain the same, but you no longer need the materialize-css
   - EmailInput
   - NumberInput
   - ColorInput
-  - RangeInput
+  - RangeInput (with vertical, double-thumb support, and smart tooltip display)
   - Chips
 - [Pickers](https://erikvullings.github.io/mithril-materialized/#!/pickers)
-  - DatePicker
+  - DatePicker (with optional week numbers and date range selection)
   - TimePicker
 - [Selections](https://erikvullings.github.io/mithril-materialized/#!/selections)
   - Select
@@ -68,12 +68,28 @@ Your CSS imports can remain the same, but you no longer need the materialize-css
 - [Collections](https://erikvullings.github.io/mithril-materialized/#!/collections)
   - Basic, Link and Avatar Collections
   - Collapsible or accordion
+- [Theme & Upload](https://erikvullings.github.io/mithril-materialized/#!/theme)
+  - ThemeSwitcher (light/dark/auto theme switching)
+  - ThemeToggle (simple light/dark toggle)
+  - FileUpload (drag-and-drop with validation and preview)
+- [Navigation](https://erikvullings.github.io/mithril-materialized/#!/navigation)
+  - Sidenav (responsive navigation drawer)
+  - Breadcrumb (navigation path indicator)
+  - Wizard/Stepper (multi-step process guidance)
 - [Others](https://erikvullings.github.io/mithril-materialized/#!/modals)
   - ModalPanel
   - MaterialBox
   - Carousel
   - Pagination
+  - PaginationControls
   - Parallax
+- [Layout & Display](https://erikvullings.github.io/mithril-materialized/#!/layout)
+  - Masonry (Pinterest-style responsive grid layout)
+  - ImageList (responsive image galleries with various layouts)
+  - Timeline (vertical timeline with events and milestones)
+- Data & Tables
+  - DataTable (sorting, filtering, pagination, selection)
+  - TreeView (hierarchical data with expand/collapse, selection, and customizable icons)
 - Additional
   - Label
   - HelperText
@@ -102,21 +118,171 @@ Your CSS imports can remain the same, but you no longer need the materialize-css
 
    ```typescript
    import m from 'mithril';
-   import { TextInput, Button, DatePicker } from 'mithril-materialized';
+   import { 
+     TextInput, 
+     Button, 
+     RangeInput,
+     DatePicker,
+     DataTable,
+     TreeView,
+     ThemeToggle,
+     FileUpload,
+     Sidenav,
+     Breadcrumb,
+     Wizard,
+     Masonry,
+     Timeline,
+     ImageList
+   } from 'mithril-materialized';
 
    const MyComponent = () => ({
      view: () => m('.container', [
+       // Theme toggle in header
+       m('nav', [
+         m('.nav-wrapper', [
+           m('.right', m(ThemeToggle))
+         ])
+       ]),
+       
+       // Breadcrumb navigation
+       m(Breadcrumb, {
+         items: [
+           { text: 'Home', href: '/' },
+           { text: 'Products', href: '/products' },
+           { text: 'Details', active: true }
+         ]
+       }),
+       
+       // Form inputs
        m(TextInput, {
          label: 'Your name',
          onchange: (value) => console.log(value)
        }),
+       
+       // Enhanced range sliders with smart tooltips
+       m(RangeInput, {
+         label: 'Volume',
+         min: 0,
+         max: 100,
+         valueDisplay: 'auto', // Show tooltip on drag
+         onchange: (value) => console.log('Volume:', value)
+       }),
+       
+       m(RangeInput, {
+         label: 'Price Range',
+         min: 0,
+         max: 1000,
+         minmax: true,
+         minValue: 100,
+         maxValue: 500,
+         valueDisplay: 'always', // Always show values
+         onchange: (min, max) => console.log('Range:', min, '-', max)
+       }),
+       
+       m(RangeInput, {
+         label: 'Vertical Slider',
+         min: 0,
+         max: 100,
+         vertical: true,
+         height: '200px',
+         valueDisplay: 'auto',
+         tooltipPos: 'right',
+         onchange: (value) => console.log('Vertical:', value)
+       }),
+       
+       // Enhanced DatePicker with range selection
+       m(DatePicker, {
+         label: 'Event Date',
+         helperText: 'Select a single date',
+         format: 'mmmm d, yyyy',
+         onchange: (value) => console.log('Date:', value)
+       }),
+       
+       m(DatePicker, {
+         dateRange: true,
+         label: 'Project Timeline',
+         helperText: 'Select start and end dates',
+         format: 'mmmm d, yyyy',
+         minDateRange: 1,
+         maxDateRange: 30,
+         onchange: (value) => console.log('Date range:', value)
+       }),
+       
        m(Button, { 
          label: 'Submit',
          onclick: () => alert('Hello!')
        }),
-       m(DatePicker, {
-         label: 'Select date',
-         onchange: (date) => console.log(date)
+       
+       // File upload
+       m(FileUpload, {
+         accept: 'image/*',
+         multiple: true,
+         onFilesSelected: (files) => console.log(files)
+       }),
+       
+       // TreeView for hierarchical data
+       m(TreeView, {
+         data: [
+           {
+             id: 'root',
+             label: 'Project Root',
+             expanded: true,
+             children: [
+               { id: 'src', label: 'src/' },
+               { id: 'docs', label: 'docs/' },
+             ]
+           }
+         ],
+         selectionMode: 'multiple',
+         iconType: 'caret',
+         showConnectors: true,
+         onselection: (selectedIds) => console.log('Selected:', selectedIds)
+       }),
+       
+       // Layout components
+       m(Masonry, {
+         items: [
+           { id: 1, title: 'Card 1', content: 'Short content' },
+           { id: 2, title: 'Card 2', content: 'Much longer content...' },
+           { id: 3, title: 'Card 3', content: 'Medium content' }
+         ],
+         columnWidth: 250,
+         gap: 16,
+         renderItem: (item) => m('.card', [
+           m('.card-content', [
+             m('span.card-title', item.title),
+             m('p', item.content)
+           ])
+         ])
+       }),
+       
+       m(Timeline, {
+         events: [
+           {
+             id: 1,
+             title: 'Project Started',
+             date: '2024-01-15',
+             description: 'Initial project kickoff',
+             type: 'milestone'
+           },
+           {
+             id: 2,
+             title: 'First Release',
+             date: '2024-03-20',
+             description: 'Released version 1.0',
+             type: 'release'
+           }
+         ]
+       }),
+       
+       m(ImageList, {
+         images: [
+           { src: '/image1.jpg', alt: 'Image 1' },
+           { src: '/image2.jpg', alt: 'Image 2' },
+           { src: '/image3.jpg', alt: 'Image 3' }
+         ],
+         layout: 'masonry', // 'grid' | 'masonry' | 'quilted'
+         cols: 3
        })
      ])
    });
@@ -132,6 +298,113 @@ Your CSS imports can remain the same, but you no longer need the materialize-css
 
 See the [live documentation](https://erikvullings.github.io/mithril-materialized/index.html) for examples and component APIs.
 
+> **Note**: The date range picker is now fully implemented with comprehensive validation and formatting support.
+
+## 🗺️ Roadmap & Planned Improvements
+
+### 🚀 Phase 1: Core Optimizations & New Components (In Progress)
+
+**✅ Completed:**
+
+- ✅ Modular CSS architecture with tree-shaking support
+- ✅ Dark theme system with CSS custom properties  
+- ✅ File upload component with drag-and-drop
+- ✅ Theme switching components (ThemeSwitcher, ThemeToggle)
+- ✅ Sidenav component with responsive behavior
+- ✅ Breadcrumb navigation component
+- ✅ Wizard/Stepper component for multi-step forms
+
+**✅ Recently Completed:**
+
+- ✅ DataTable component with sorting, filtering, and pagination
+- ✅ TreeView component for hierarchical data with expand/collapse, selection, and VSCode-style connectors
+- ✅ Enhanced TypeScript definitions with better JSDoc comments
+- ✅ Performance optimizations and bundle size improvements
+- ✅ Enhanced RangeInput with vertical orientation, double-thumb range selection, and smart tooltip display
+- ✅ Advanced DatePicker with date range selection, constraints, and format support
+- ✅ Layout components: Masonry (Pinterest-style grid), Timeline (vertical event display), ImageList (responsive galleries)
+- ✅ Improved RangeInput components converted to proper Mithril components with better lifecycle management
+- ✅ Enhanced accessibility with individual thumb slider elements and PageUp/PageDown keyboard support
+
+### 🎯 Phase 2: Advanced Components & Features
+
+**Data Display:**
+
+- Card layouts with enhanced Material Design 3.0 styling
+- Advanced tree operations (drag & drop, context menus)
+
+**Input & Forms:**
+
+- ✅ Advanced date range picker with validation and constraints
+- Autocomplete with async data loading
+
+**Navigation & Layout:**
+
+- AppBar/Toolbar component with responsive behavior
+- Bottom navigation component for mobile apps
+- Drawer/Sidebar component with overlay and push modes
+- Grid system enhancements with CSS Grid support
+
+### 🔮 Phase 3: Modern Features & Integration
+
+**Developer Experience:**
+
+- Storybook integration for component documentation
+- Figma design system integration
+- CLI tools for component generation
+- Better accessibility (ARIA) support throughout
+
+**Performance & Optimization:**
+
+- Virtual scrolling for large lists
+- Lazy loading component utilities
+- Bundle analyzer and optimization tools
+- CSS-in-JS runtime support option
+
+### 📊 Bundle Size Targets
+
+**Current Status (v2.0.0-beta.15):**
+
+- Total: 70KB gzipped (44KB JS + 26KB CSS)
+- Modular CSS can reduce bundle by 30-50%
+
+**Phase 1 Targets:**
+
+- Core bundle: <40KB gzipped
+- Modular approach: <25KB for typical apps
+- Tree-shaking effectiveness: 60%+
+
+**Long-term Goals:**
+
+- Individual components: <2KB each
+- Micro-bundle support for single components
+- Zero-runtime CSS option for static sites
+
+### 🤝 Contributing
+
+We welcome contributions! Priority areas for community involvement:
+
+1. **Usage**: Accessibility improvements, performance optimizations
+2. **Documentation**: Examples, guides, API documentation
+3. **Testing**: Unit tests, visual regression tests, browser compatibility
+
+See our [contributing guide](CONTRIBUTING.md) for detailed information.
+
+### 📈 Performance Benchmarks
+
+**Bundle Size Comparison:**
+
+- mithril-materialized v2.0: 64KB gzipped
+- Material-UI: ~350KB gzipped
+- Materialize CSS + jQuery: ~180KB gzipped
+- Vuetify: ~250KB gzipped
+
+**Runtime Performance:**
+
+- Component initialization: <5ms average
+- Theme switching: <10ms for full page
+- File upload processing: Real-time without blocking
+
 ## Build instructions
 
 This repository consists of two packages, combined using `lerna`: the `lib` package that is published to `npm`, as well as an `example` project which uses this library to display the Mithril components that it contains.
@@ -155,11 +428,81 @@ import 'mithril-materialized/index.css';
 - ✅ Custom optimizations for better performance
 - ✅ No external font dependencies
 
+### 🔥 NEW: Modular CSS Architecture
+
+**Tree-shakable CSS modules** for optimal bundle sizes! Import only the CSS you need:
+
+```typescript
+// Option 1: Import everything (64KB total)
+import 'mithril-materialized/index.css';
+
+// Option 2: Import only what you need (modular approach)
+import 'mithril-materialized/core.css';      // Essential styles (18KB)
+import 'mithril-materialized/forms.css';     // Form components only
+import 'mithril-materialized/components.css'; // Interactive components
+
+// Option 3: Advanced components only when needed
+import 'mithril-materialized/pickers.css';   // Date/Time pickers
+import 'mithril-materialized/advanced.css';  // Carousel, sidenav, etc.
+import 'mithril-materialized/utilities.css'; // Badges, icons, cards
+```
+
+**CSS Modules Available:**
+
+- `core.css` (18KB) - Essential foundation (normalize, grid, typography, variables)
+- `components.css` - Interactive components (buttons, dropdowns, modals, tabs)
+- `forms.css` - All form components (inputs, selects, switches, file upload)
+- `pickers.css` - Date and time picker components
+- `advanced.css` - Specialized components (carousel, sidenav, navbar, preloader)
+- `utilities.css` - Visual utilities (badges, cards, icons, toast, chips)
+
+**Bundle Size Optimization:**
+
+- Full bundle: 64KB gzipped (44KB JS + 20KB CSS)
+- Modular approach can reduce CSS by 30-50%
+- Use only `core.css` + specific modules for your use case
+
+### 🌓 Dark Theme Support
+
+Built-in dark theme support with CSS custom properties:
+
+```typescript
+import { ThemeManager, ThemeSwitcher } from 'mithril-materialized';
+
+// Programmatic theme control
+ThemeManager.setTheme('dark');    // 'light' | 'dark' | 'auto'
+ThemeManager.toggle();            // Toggle between light/dark
+ThemeManager.getTheme();          // Get current theme
+
+// UI Components
+m(ThemeSwitcher, {
+  onThemeChange: (theme) => console.log('Theme:', theme)
+});
+
+m(ThemeToggle); // Simple toggle button
+```
+
+**CSS Custom Properties**: All colors use CSS variables for runtime theme switching:
+
+```css
+:root {
+  --mm-primary-color: #26a69a;
+  --mm-background-color: #ffffff;
+  --mm-text-primary: rgba(0, 0, 0, 0.87);
+}
+
+[data-theme="dark"] {
+  --mm-primary-color: #80cbc4;
+  --mm-background-color: #121212;
+  --mm-text-primary: rgba(255, 255, 255, 0.87);
+}
+```
+
 ### SASS Usage
 
 For advanced customization, you can use the SASS source files directly:
 
-```scss
+```css
 // Import all SASS components
 @import 'mithril-materialized/sass/materialize.scss';
 
@@ -171,7 +514,7 @@ For advanced customization, you can use the SASS source files directly:
 
 **SASS Variables**: You can customize colors, spacing, and other design tokens by overriding SASS variables before importing:
 
-```scss
+```css
 // Customize Material Design variables
 $primary-color: #2196F3;
 $secondary-color: #FF9800;
@@ -190,7 +533,7 @@ The library includes these additional styles for enhanced functionality:
 .clear-10,
 .clear-15 {
   clear: both;
-  /* overflow: hidden; Précaution pour IE 7 */
+  /* overflow: hidden; Precaution pour IE 7 */
 }
 .clear-10 {
   margin-bottom: 10px;

package/dist/advanced.css

@@ -205,21 +205,21 @@ video.responsive-video {
   height: 30px;
 }
 .pagination li a {
-  color: #444;
+  color: var(--mm-text-primary, #444);
   display: inline-block;
   font-size: 1.2rem;
   padding: 0 10px;
   line-height: 30px;
 }
 .pagination li.active a {
-  color: #fff;
+  color: var(--mm-text-on-primary, #fff);
 }
 .pagination li.active {
   background-color: #ee6e73;
 }
 .pagination li.disabled a {
   cursor: default;
-  color: #999;
+  color: var(--mm-text-disabled, #999);
 }
 .pagination li i {
   font-size: 2rem;
@@ -550,8 +550,8 @@ td, th {
 .collection .collection-item.avatar i.circle {
   font-size: 18px;
   line-height: 42px;
-  color: #fff;
-  background-color: #999;
+  color: var(--mm-text-on-primary, #fff);
+  background-color: var(--mm-text-disabled, #999);
   text-align: center;
 }
 .collection .collection-item.avatar .title {
@@ -573,7 +573,7 @@ td, th {
   color: rgb(234.25, 250.25, 248.75);
 }
 .collection .collection-item.active .secondary-content {
-  color: #fff;
+  color: var(--mm-text-on-primary, #fff);
 }
 .collection a.collection-item {
   display: block;

package/dist/button.d.ts

@@ -1,30 +1,75 @@
 import m, { FactoryComponent, Attributes } from 'mithril';
+import { MaterialPosition, IconClass, ButtonVariant } from './types';
+/**
+ * HTML attributes that can be passed to button elements
+ * @deprecated Use native HTML attributes directly instead
+ */
 export interface HtmlAttrs {
     id?: string;
     for?: string;
     placeholder?: string;
     autofocus?: boolean;
     disabled?: boolean;
-    type?: 'submit' | 'button' | 'text' | 'textarea' | 'number';
+    type?: 'submit' | 'button' | 'reset';
 }
+/**
+ * Enhanced button attributes with improved TypeScript support
+ * @example
+ * ```typescript
+ * // Basic button
+ * m(Button, { label: 'Click me' })
+ *
+ * // Submit button with icon
+ * m(Button, {
+ *   variant: { type: 'submit' },
+ *   label: 'Save',
+ *   iconName: 'save',
+ *   iconClass: 'small left'
+ * })
+ *
+ * // Modal trigger button
+ * m(Button, {
+ *   variant: { type: 'modal', modalId: 'my-modal' },
+ *   label: 'Open Modal'
+ * })
+ * ```
+ */
 export interface ButtonAttrs extends Attributes {
-    /** Optional (e.g. in case you only want to use an icon) button label */
+    /** Button label text (optional for icon-only buttons) */
     label?: string;
-    /** Optional icon material-icons name, @see https://materializecss.com/icons.html */
+    /** Material icon name - see https://materializecss.com/icons.html */
     iconName?: string;
-    /** Optional icon class, e.g. tiny (1em), small (2em), medium (4em), large (6em), or 'tiny right' */
-    iconClass?: string;
     /**
-     * If the button is intended to open a modal, specify its modal id so we can trigger it,
-     * @see https://materializecss.com/modals.html
+     * Icon size and position class
+     * @example 'small', 'medium left', 'large right'
+     */
+    iconClass?: IconClass;
+    /**
+     * Button behavior variant - determines button type and behavior
+     * @example
+     * { type: 'button' } - Standard button
+     * { type: 'submit' } - Form submit button
+     * { type: 'modal', modalId: 'my-modal' } - Modal trigger
+     * { type: 'reset' } - Form reset button
+     */
+    variant?: ButtonVariant;
+    /**
+     * @deprecated Use variant instead
+     * If the button is intended to open a modal, specify its modal id so we can trigger it
      */
     modalId?: string;
-    /** Some additional HTML attributes that can be attached to the button */
+    /**
+     * @deprecated Use native HTML attributes directly instead
+     * Some additional HTML attributes that can be attached to the button
+     */
     attr?: HtmlAttrs;
-    /** Optional text-based tooltip, @see https://materializecss.com/tooltips.html */
+    /** Tooltip text to display on hover */
     tooltip?: string;
-    /** Optional location for the tooltip */
-    tooltipPostion?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Tooltip position
+     * @fixed typo: tooltipPostion -> tooltipPosition
+     */
+    tooltipPosition?: MaterialPosition;
 }
 /**
  * A factory to create new buttons.