mtrl 0.2.6 → 0.2.8

package/index.ts

@@ -3,23 +3,32 @@ import {
   createLayout,
   createElement,
   createBadge,
+  createBottomAppBar,
   createButton,
+  createDatePicker,
+  createFab,
+  createExtendedFab,
+  createSegmentedButton,
   createCard,
   createCarousel,
   createCheckbox,
   createChip,
   createDialog,
+  createDivider,
   createList,
   createMenu,
   createNavigation,
   createProgress,
   createRadios,
+  createSearch,
   createSheet,
   createSlider,
   createSnackbar,
   createTabs,
   createTextfield,
+  createTimePicker,
   createTooltip,
+  createTopAppBar,
   createSwitch
 } from './src/index.js'
 
@@ -27,22 +36,31 @@ export {
   createLayout,
   createElement,
   createBadge,
+  createBottomAppBar,
   createButton,
+  createDatePicker,
+  createFab,
+  createExtendedFab,
+  createSegmentedButton,
   createCard,
   createCarousel,
   createCheckbox,
   createChip,
   createDialog,
+  createDivider,
   createList,
   createMenu,
   createNavigation,
   createProgress,
   createRadios,
+  createSearch,
   createSheet,
   createSlider,
   createSnackbar,
   createTabs,
   createTextfield,
+  createTimePicker,
   createTooltip,
+  createTopAppBar,
   createSwitch
 }

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "mtrl",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "A functional TypeScript/JavaScript component library with composable architecture based on Material Design 3",
+  "author": "floor",
+  "license": "MIT License",
   "keywords": [
     "component",
     "library",
@@ -13,8 +15,18 @@
     "material design 3",
     "md3"
   ],
+  "type": "module",
   "main": "index.js",
   "scripts": {
+    "start": "bun run server.js",
+    "dev": "bun --watch server.js",
+    "build:demo": "bun run demo/build.ts",
+    "dev:demo": "bun run demo/build.ts --watch",
+    "clean:demo": "rm -rf demo/dist",
+    "build:js": "bun build demo/main.js --outfile=demo/dist/bundle.js --format=esm",
+    "build:css": "sass src/styles/main.scss:demo/dist/styles.css --style=compressed",
+    "build": "bun run build:js && bun run build:css",
+    "build:watch": "bun build --watch demo/main.js --outfile=demo/dist/bundle.js & sass --watch src/styles/main.scss:demo/dist/styles.css",
     "test": "bun test",
     "test:watch": "bun test --watch",
     "test:coverage": "bun test --coverage",
@@ -29,9 +41,8 @@
     "type": "git",
     "url": "https://github.com/floor/mtrl.git"
   },
-  "author": "floor",
-  "license": "MIT License",
   "devDependencies": {
+    "sass": "^1.85.1",
     "typedoc": "^0.27.9"
   }
 }

package/server.ts

@@ -0,0 +1,86 @@
+// server.ts - TypeScript version of the Bun server for the component library demo
+import { serve, type ServeOptions } from "bun";
+import { join } from "path";
+import { readFileSync, existsSync } from "fs";
+
+// Content type mapping
+const contentTypes: Record<string, string> = {
+  ".html": "text/html",
+  ".js": "text/javascript",
+  ".mjs": "text/javascript", // Add this for ES modules
+  ".css": "text/css",
+  ".json": "application/json",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".svg": "image/svg+xml"
+};
+
+// Define the port (hardcoded instead of using environment variable)
+const PORT: number = 3301;
+
+// Define demo directory path
+const DEMO_DIR: string = "./demo";
+
+/**
+ * Serves a file from the demo directory
+ * @param path Path to the file relative to the demo directory
+ * @returns Response object with the file content or error message
+ */
+function serveFile(path: string): Response {
+  // Add demo directory to path
+  const filePath: string = join(DEMO_DIR, path);
+  
+  // Handle index.html for directory request
+  let resolvedPath: string = filePath;
+  if (filePath.endsWith('/') || !filePath.includes('.')) {
+    resolvedPath = join(filePath, 'index.html');
+  }
+  
+  // Check if file exists
+  if (!existsSync(resolvedPath)) {
+    return new Response("File not found", { status: 404 });
+  }
+  
+  // Get file extension for content type
+  const ext: string = resolvedPath.substring(resolvedPath.lastIndexOf('.'));
+  const contentType: string = contentTypes[ext] || "application/octet-stream";
+  
+  // Read and serve the file
+  try {
+    const content: Buffer = readFileSync(resolvedPath);
+    
+    // For JavaScript files, ensure they're served with the correct MIME type
+    // and additionally add proper headers for modules
+    if (ext === '.js') {
+      return new Response(content, {
+        headers: { 
+          "Content-Type": "text/javascript",
+          "Cache-Control": "no-cache"
+        }
+      });
+    }
+    
+    return new Response(content, {
+      headers: { "Content-Type": contentType }
+    });
+  } catch (error) {
+    console.error(`Error serving ${resolvedPath}:`, error);
+    return new Response("Server error", { status: 500 });
+  }
+}
+
+// Server options with typings
+const serverOptions: ServeOptions = {
+  port: PORT,
+  fetch(req: Request): Response | Promise<Response> {
+    const url = new URL(req.url);
+    const path = url.pathname === '/' ? '/' : url.pathname;
+    
+    return serveFile(path);
+  },
+};
+
+// Create and start the server
+const server = serve(serverOptions);
+
+console.log(`Server running at http://localhost:${PORT}`);

package/src/components/badge/api.ts

@@ -1,6 +1,6 @@
 // src/components/badge/api.ts
-import { BadgeComponent } from './types';
-import { BADGE_VARIANTS, BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS } from './constants';
+import { BadgeComponent, BadgeColor, BadgeVariant, BadgePosition } from './types';
+import { formatBadgeLabel } from './config';
 
 interface ApiOptions {
   visibility: {
@@ -19,7 +19,8 @@ interface ComponentWithElements {
   wrapper?: HTMLElement;
   config: {
     max?: number;
-    content?: string | number;
+    label?: string | number;
+    variant?: string;
   };
   getClass: (name: string) => string;
   addClass: (...classes: string[]) => any;
@@ -28,6 +29,20 @@ interface ComponentWithElements {
   off: (event: string, handler: Function) => any;
 }
 
+// Common variant constants for internal use
+const VARIANT_SMALL = 'small';
+
+// Map of all badge colors for class removal
+const ALL_COLORS = [
+  'error', 'primary', 'secondary', 'tertiary', 'success', 'warning', 'info'
+];
+
+// Map of all badge variants for class removal
+const ALL_VARIANTS = ['small', 'large'];
+
+// Map of all badge positions for class removal
+const ALL_POSITIONS = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
+
 /**
  * Enhances a badge component with API methods
  * @param {ApiOptions} options - API configuration options
@@ -39,27 +54,33 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
     ...component as any,
     
     /**
-     * Sets the badge content
-     * @param {string|number} content - Content to display in the badge
+     * Sets the badge label
+     * @param {string|number} label - Label to display in the badge
      * @returns {BadgeComponent} Badge component instance for chaining
      */
-    setContent(content: string | number) {
-      const stringContent = String(content);
-      component.config.content = content;
+    setLabel(label: string | number) {
+      component.config.label = label;
       
-      // If max is defined and content is a number greater than max, show max+
-      if (component.config.max !== undefined && 
-          typeof content === 'number' && 
-          content > component.config.max) {
-        component.element.textContent = String(component.config.max);
-        component.element.classList.add(`${component.getClass('badge')}--max`);
-      } else {
-        component.element.textContent = stringContent;
-        component.element.classList.remove(`${component.getClass('badge')}--max`);
+      // Small badges (dot variant) don't have text
+      if (component.config.variant === VARIANT_SMALL) {
+        component.element.textContent = '';
+        return this;
       }
       
-      // Toggle the dot variant based on whether content is empty
-      if (stringContent === '' || stringContent === '0') {
+      // Format the label
+      const formattedLabel = formatBadgeLabel(label, component.config.max);
+      component.element.textContent = formattedLabel;
+      
+      // Add overflow class if label was truncated
+      component.element.classList.remove(`${component.getClass('badge')}--overflow`);
+      if (typeof label === 'number' && 
+          component.config.max !== undefined && 
+          label > component.config.max) {
+        component.element.classList.add(`${component.getClass('badge')}--overflow`);
+      }
+      
+      // Toggle visibility based on whether label is empty
+      if (formattedLabel === '' || formattedLabel === '0') {
         this.hide();
       } else {
         this.show();
@@ -69,10 +90,10 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
     },
     
     /**
-     * Gets the badge content
-     * @returns {string} Current badge content
+     * Gets the badge label
+     * @returns {string} Current badge label
      */
-    getContent() {
+    getLabel() {
       return component.element.textContent || '';
     },
     
@@ -114,19 +135,16 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
     
     /**
      * Sets maximum value (after which badge shows max+)
+     * 
      * @param {number} max - Maximum value to display
      * @returns {BadgeComponent} Badge component instance for chaining
      */
     setMax(max: number) {
       component.config.max = max;
       
-      // Apply max formatting if current content exceeds max
-      if (typeof component.config.content === 'number' && 
-          component.config.content > max) {
-        component.element.textContent = String(max);
-        component.element.classList.add(`${component.getClass('badge')}--max`);
-      } else {
-        component.element.classList.remove(`${component.getClass('badge')}--max`);
+      // Apply max formatting if current label exceeds max
+      if (component.config.label !== undefined) {
+        this.setLabel(component.config.label);
       }
       
       return this;
@@ -137,9 +155,9 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
      * @param {string} color - Color variant to apply
      * @returns {BadgeComponent} Badge component instance for chaining
      */
-    setColor(color: keyof typeof BADGE_COLORS | BADGE_COLORS) {
+    setColor(color: BadgeColor | string) {
       // Remove existing color classes
-      Object.values(BADGE_COLORS).forEach(colorName => {
+      ALL_COLORS.forEach(colorName => {
         component.element.classList.remove(`${component.getClass('badge')}--${colorName}`);
       });
       
@@ -150,44 +168,32 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
     
     /**
      * Sets badge variant
-     * @param {string} variant - Variant to apply
+     * @param {string} variant - Variant to apply (small or large)
      * @returns {BadgeComponent} Badge component instance for chaining
      */
-    setVariant(variant: keyof typeof BADGE_VARIANTS | BADGE_VARIANTS) {
+    setVariant(variant: BadgeVariant | string) {
       // Remove existing variant classes
-      Object.values(BADGE_VARIANTS).forEach(variantName => {
+      ALL_VARIANTS.forEach(variantName => {
         component.element.classList.remove(`${component.getClass('badge')}--${variantName}`);
       });
       
-      // Add new variant class if not standard
-      if (variant !== BADGE_VARIANTS.STANDARD) {
-        component.element.classList.add(`${component.getClass('badge')}--${variant}`);
-      }
+      // Add new variant class
+      component.element.classList.add(`${component.getClass('badge')}--${variant}`);
       
-      // Clear content if dot variant
-      if (variant === BADGE_VARIANTS.DOT) {
-        component.element.textContent = '';
-      } else if (component.config.content !== undefined) {
-        this.setContent(component.config.content);
-      }
+      // Update component config
+      component.config.variant = variant;
       
-      return this;
-    },
-    
-    /**
-     * Sets badge size
-     * @param {string} size - Size variant to apply
-     * @returns {BadgeComponent} Badge component instance for chaining
-     */
-    setSize(size: keyof typeof BADGE_SIZES | BADGE_SIZES) {
-      // Remove existing size classes
-      Object.values(BADGE_SIZES).forEach(sizeName => {
-        component.element.classList.remove(`${component.getClass('badge')}--${sizeName}`);
-      });
-      
-      // Add new size class if not medium (default)
-      if (size !== BADGE_SIZES.MEDIUM) {
-        component.element.classList.add(`${component.getClass('badge')}--${size}`);
+      // Update accessibility attributes
+      if (variant === VARIANT_SMALL) {
+        component.element.textContent = '';
+        component.element.setAttribute('aria-hidden', 'true');
+      } else {
+        component.element.setAttribute('role', 'status');
+        
+        // Restore label for large badges
+        if (component.config.label !== undefined) {
+          this.setLabel(component.config.label);
+        }
       }
       
       return this;
@@ -198,9 +204,9 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
      * @param {string} position - Position variant to apply
      * @returns {BadgeComponent} Badge component instance for chaining
      */
-    setPosition(position: keyof typeof BADGE_POSITIONS | BADGE_POSITIONS) {
+    setPosition(position: BadgePosition | string) {
       // Remove existing position classes
-      Object.values(BADGE_POSITIONS).forEach(posName => {
+      ALL_POSITIONS.forEach(posName => {
         component.element.classList.remove(`${component.getClass('badge')}--${posName}`);
       });
       
@@ -224,6 +230,7 @@ export const withAPI = ({ visibility, lifecycle }: ApiOptions) =>
       // Create a new wrapper to hold the target and badge
       const wrapper = document.createElement('div');
       wrapper.classList.add(component.getClass('badge-wrapper'));
+      wrapper.style.position = 'relative';
       
       // Replace the target with the wrapper
       const parent = target.parentNode;

package/src/components/badge/badge.ts

@@ -9,7 +9,6 @@ import {
   withVisibility,
   withVariant,
   withColor, 
-  withSize,
   withPosition,
   withMax,
   withAttachment
@@ -22,18 +21,33 @@ import { createBaseConfig, getElementConfig, getApiConfig } from './config';
  * Creates a new Badge component
  * @param {BadgeConfig} config - Badge configuration object
  * @returns {BadgeComponent} Badge component instance
+ * 
+ * @example
+ * // Create a small dot badge
+ * const notificationBadge = createBadge({ 
+ *   variant: 'small',
+ *   target: document.querySelector('.icon-button')
+ * });
+ * 
+ * @example
+ * // Create a large badge with a count
+ * const countBadge = createBadge({
+ *   variant: 'large',
+ *   label: 5,
+ *   target: document.querySelector('.notification-icon')
+ * });
  */
 const createBadge = (config: BadgeConfig = {}): BadgeComponent => {
   const baseConfig = createBaseConfig(config);
 
   try {
+    // Compose the badge component from multiple feature enhancers
     const badge = pipe(
       createBase,
       withEvents(),
       withElement(getElementConfig(baseConfig)),
       withVariant(baseConfig),
       withColor(baseConfig),
-      withSize(baseConfig),
       withPosition(baseConfig),
       withMax(baseConfig),
       withVisibility(),

package/src/components/badge/config.ts

@@ -1,23 +1,24 @@
 // src/components/badge/config.ts
 import { 
   createComponentConfig, 
-  createElementConfig,
-  BaseComponentConfig 
+  createElementConfig
 } from '../../core/config/component-config';
 import { BadgeConfig } from './types';
-import { BADGE_VARIANTS, BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS } from './constants';
+
+/**
+ * Maximum character count for badge labels
+ */
+export const BADGE_MAX_CHARACTERS = 4;
 
 /**
  * Default configuration for the Badge component
  */
 export const defaultConfig: BadgeConfig = {
-  variant: BADGE_VARIANTS.STANDARD,
-  size: BADGE_SIZES.MEDIUM,
-  color: BADGE_COLORS.ERROR,
-  position: BADGE_POSITIONS.TOP_RIGHT,
-  content: '',
-  visible: true,
-  standalone: false
+  variant: 'large',
+  color: 'error',
+  position: 'top-right',
+  label: '',
+  visible: true
 };
 
 /**
@@ -37,14 +38,21 @@ export const getElementConfig = (config: BadgeConfig) => {
   // Create the attributes object
   const attrs: Record<string, any> = {};
   
-  // Convert numeric content to string if needed
-  const content = config.content !== undefined ? String(config.content) : '';
+  // For large badges, set appropriate ARIA attributes
+  if (config.variant !== 'small') {
+    attrs.role = 'status';
+  }
+  
+  // Format the label if needed
+  const formattedLabel = config.variant === 'small' 
+    ? '' 
+    : formatBadgeLabel(config.label || '', config.max);
   
   return createElementConfig(config, {
     tag: 'span',
     attrs,
     className: config.class,
-    content: config.variant === BADGE_VARIANTS.DOT ? '' : content
+    text: formattedLabel // Use the formatted label
   });
 };
 
@@ -65,4 +73,49 @@ export const getApiConfig = (comp) => ({
   }
 });
 
+/**
+ * Format a label
+ * - Max 4 characters including "+" for overflow
+ * - Add "+" for numeric values exceeding max
+ * 
+ * @param {string|number} label - Original label
+ * @param {number} max - Maximum value before using "+"
+ * @returns {string} Formatted label
+ */
+export const formatBadgeLabel = (label: string | number, max?: number): string => {
+  // Handle empty or undefined labels
+  if (label === undefined || label === null || label === '') {
+    return '';
+  }
+  
+  let formattedLabel = String(label);
+  
+  const numericLabel = Number(label);
+
+  // Apply max value formatting
+  if (max !== undefined && !isNaN(numericLabel) && numericLabel > max) {
+    formattedLabel = `${max}+`;
+  }
+  
+  // Ensure label doesn't exceed max characters
+  if (formattedLabel.length > BADGE_MAX_CHARACTERS) {
+    // Try to preserve as much information as possible
+    // For large numbers, use abbreviated format with "+"
+    const numericValue = Number(label);
+    if (!isNaN(numericValue)) {
+      if (numericValue >= 1000) {
+        formattedLabel = '999+';
+      } else {
+        // For numbers under 1000 but still too long, truncate
+        formattedLabel = formattedLabel.substring(0, BADGE_MAX_CHARACTERS - 1) + '+';
+      }
+    } else {
+      // For non-numeric values, simply truncate
+      formattedLabel = formattedLabel.substring(0, BADGE_MAX_CHARACTERS);
+    }
+  }
+  
+  return formattedLabel;
+};
+
 export default defaultConfig;