@qwickapps/react-framework 1.4.8 → 1.5.0

package/src/components/Markdown.tsx

@@ -22,7 +22,7 @@
 
 import { Box } from '@mui/material';
 import { marked } from 'marked';
-import React, { ReactElement } from 'react';
+import React from 'react';
 import type { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../hooks';
 import MarkdownModel from '../schemas/MarkdownSchema';
@@ -35,7 +35,7 @@ type MarkdownViewProps = SchemaProps<MarkdownModel> & {
   /** Custom transformation configuration for HTML conversion */
   htmlTransformConfig?: TransformConfig;
   /** Custom sanitization options */
-  sanitizeOptions?: any;
+  sanitizeOptions?: unknown;
   /** Container element type */
   component?: React.ElementType;
   /** Marked options for Markdown parsing */
@@ -78,7 +78,7 @@ function MarkdownView({
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
 
   // Mark as QwickApp component
-  (MarkdownView as any)[QWICKAPP_COMPONENT] = true;
+  (MarkdownView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
 
   // Return placeholder if no Markdown content
   if (!children || !children.trim()) {
@@ -192,7 +192,7 @@ export class Markdown extends ModelView<MarkdownProps, MarkdownModel> {
   static readonly version = '1.0.0';
   
   // Component-specific serialization properties
-  protected getComponentSpecificProps(): any {
+  protected getComponentSpecificProps(): unknown {
     return {
       children: this.props.children,
       sanitize: this.props.sanitize,
@@ -202,7 +202,7 @@ export class Markdown extends ModelView<MarkdownProps, MarkdownModel> {
 
   // Markdown component renders traditional props view
   protected renderView(): React.ReactElement {
-    const { dataSource, bindingOptions, ...restProps } = this.props;
+    const { ...restProps } = this.props;
     return <MarkdownView {...restProps} />;
   }
 
@@ -212,7 +212,7 @@ export class Markdown extends ModelView<MarkdownProps, MarkdownModel> {
   }
 
   // Register HTML patterns that Markdown component can handle
-  static registerPatternHandlers(registry: any): void {
+  static registerPatternHandlers(registry: unknown): void {
     // Register div elements with specific classes for Markdown transformation
     if (!registry.hasPattern('div.markdown-content')) {
       registry.registerPattern('div.markdown-content', Markdown.transformMarkdownDiv);
@@ -225,7 +225,7 @@ export class Markdown extends ModelView<MarkdownProps, MarkdownModel> {
   }
 
   // Transform div with markdown-content class to Markdown component
-  private static transformMarkdownDiv(element: Element): any {
+  private static transformMarkdownDiv(element: Element): unknown {
     const sanitize = element.getAttribute('data-sanitize') !== 'false';
     const placeholder = element.getAttribute('data-placeholder');
     
@@ -240,7 +240,7 @@ export class Markdown extends ModelView<MarkdownProps, MarkdownModel> {
   }
 
   // Transform elements with data-markdown attribute to Markdown component
-  private static transformDataMarkdown(element: Element): any {
+  private static transformDataMarkdown(element: Element): unknown {
     const markdownContent = element.getAttribute('data-markdown') || element.textContent;
     const sanitize = element.getAttribute('data-sanitize') !== 'false';
     const placeholder = element.getAttribute('data-placeholder');
@@ -261,7 +261,7 @@ function MarkdownWithDataBinding(props: MarkdownProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
   // Use data binding
-  const { dataSource: _source, loading, error, cached, ...markdownProps } = useDataBinding<MarkdownModel>(
+  const { loading, error, ...markdownProps } = useDataBinding<MarkdownModel>(
     dataSource!,
     restProps as Partial<MarkdownModel>,
     MarkdownModel.getSchema(),

package/src/components/ProductLogo.tsx

@@ -0,0 +1,118 @@
+/**
+ * ProductLogo - Simplified QwickApps product logo component
+ *
+ * A convenience wrapper around the Logo component specifically designed for
+ * QwickApps product branding. Automatically handles icon positioning and
+ * styling to create consistent product logos across the QwickApps suite.
+ *
+ * Features:
+ * - Automatically positions the icon close to the product name
+ * - Consistent styling across all QwickApps products
+ * - Simple API: just provide icon and name
+ * - Supports all Logo component features (size, variant, badge, etc.)
+ *
+ * Example Usage:
+ * ```tsx
+ * import { ProductLogo, QwickIcon } from '@qwickapps/react-framework';
+ *
+ * // Simple usage
+ * <ProductLogo icon={<QwickIcon />} name="wick Press" />
+ *
+ * // With custom size
+ * <ProductLogo
+ *   icon={<QwickIcon size={32} />}
+ *   name="wick Forge"
+ *   size="small"
+ * />
+ *
+ * // With click handler
+ * <ProductLogo
+ *   icon={<QwickIcon />}
+ *   name="wick Apps"
+ *   onClick={() => window.location.href = '/'}
+ * />
+ * ```
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { cloneElement, isValidElement } from 'react';
+import Logo from './Logo';
+import type { LogoProps } from './Logo';
+import QwickIcon from './QwickIcon';
+
+export interface ProductLogoProps extends Omit<LogoProps, 'image' | 'imagePosition'> {
+  /** The icon element (defaults to QwickIcon) */
+  icon?: React.ReactElement;
+  /** The product name (e.g., "wick Press", "wick Forge") */
+  name: string;
+  /** Optional click handler */
+  onClick?: (event: React.MouseEvent<SVGSVGElement | HTMLDivElement>) => void;
+  /** Additional inline styles */
+  style?: React.CSSProperties;
+  /** Additional CSS class names */
+  className?: string;
+}
+
+/**
+ * ProductLogo Component
+ *
+ * Creates a branded product logo by combining a QwickIcon with a product name.
+ * The icon is automatically positioned close to the text with proper styling.
+ */
+const ProductLogo: React.FC<ProductLogoProps> = ({
+  icon,
+  name,
+  size = 'small',
+  onClick,
+  style,
+  className,
+  ...restProps
+}) => {
+  // Calculate icon size based on logo size
+  const getIconSize = (logoSize: string = 'small'): number => {
+    const sizeMap: Record<string, number> = {
+      'tiny': 20,
+      'small': 32,
+      'medium': 40,
+      'large': 52,
+      'extra-large': 68
+    };
+    return sizeMap[logoSize] || 32;
+  };
+
+  // Use QwickIcon as default if no icon provided
+  const iconElement = icon || <QwickIcon />;
+
+  // Clone the icon element and apply positioning styles
+  const styledIcon = isValidElement(iconElement)
+    ? cloneElement(iconElement, {
+        size: (iconElement.props as Record<string, unknown>).size || getIconSize(size as string),
+        style: {
+          position: 'relative',
+          left: '25px',
+          zIndex: 999,
+          ...((iconElement.props as Record<string, unknown>).style as React.CSSProperties | undefined)
+        }
+      } as Record<string, unknown>)
+    : iconElement;
+
+  return (
+    <Logo
+      name={name}
+      size={size}
+      image={styledIcon}
+      imagePosition="start"
+      style={{
+        cursor: onClick ? 'pointer' : 'default',
+        zIndex: 1000,
+        ...style
+      }}
+      className={className}
+      onClick={onClick}
+      {...restProps}
+    />
+  );
+};
+
+export default ProductLogo;