import { useState } from 'react';
import { Screen, View, Icon, Text, Button } from '../index';
import type { IconName } from '../Icon/icon-types';
// Test Components for Plugin
const SimpleVariableTest = () => {
const homeIcon = "home";
const accountIcon = "account";
const cogIcon = "cog";
return (
<>
);
};
const NamespaceTest = () => {
const starIcon = "mdi:star";
const heartIcon = "mdi:heart";
const rocketIcon = "mdi:rocket";
return (
<>
);
};
const TemplateLiteralTest = () => {
const bellIcon = `bell`;
const mailIcon = `mail`;
return (
<>
);
};
const MultipleVariablesTest = () => {
const deleteIcon = "delete";
const editIcon = "pencil";
const saveIcon = "content-save";
const copyIcon = "content-copy";
return (
<>
);
};
const FalsePositiveTest = () => {
const pageName = "home"; // Not used with Icon
const title = "account"; // Not used with Icon
return (
<>
Page: {pageName}
Title: {title}
These strings are NOT transformed (not used with Icon)
);
};
export const IconExamples = () => {
// Test state for dynamic icon switching
const [isPlaying, setIsPlaying] = useState(false);
const [userStatus, setUserStatus] = useState<'online' | 'offline' | 'away'>('online');
// Test function that returns an icon name
const getStatusIcon = (status: string): IconName => {
switch (status) {
case 'online': return 'check-circle';
case 'offline': return 'close-circle';
case 'away': return 'clock';
default: return 'help-circle';
}
};
return (
Icon Examples
{/* Color Variants */}
Color Variants
Intent Primary
Intent Success
Blue
Green
Red
Orange
{/* Text Colors */}
Text Colors
Primary
Secondary
Tertiary
{/* Inverse Text Colors */}
Inverse Text Colors
Inverse
Inverse Secondary
Inverse Tertiary
{/* Color Shades */}
Color Shades
Blue 200
Blue 500
Blue 800
Red 300
Red 600
Red 900
{/* Basic Icons */}
Basic Icons
{/* Icon Sizes */}
Sizes
XS (12px)
SM (16px)
MD (24px)
LG (32px)
XL (48px)
{/* Custom Colors vs Variants */}
Custom Colors vs Variants
Custom Red
Red Variant
Custom Green
Green Variant
{/* Navigation Icons */}
Navigation & Movement
{/* Action Icons */}
Actions & Controls
{/* Communication Icons */}
Communication
{/* Social Media Icons */}
Social Media
{/* Status & Alert Icons with Variants */}
Status & Alerts (Using Variants)
Success
Warning
Error
Info
{/* File & Document Icons */}
Files & Documents
{/* Media Icons */}
Media & Content
{/* Technology Icons */}
Technology & Devices
{/* Weather Icons */}
Weather
{/* Gaming & Entertainment Icons */}
Gaming & Entertainment
{/* Business & Work Icons */}
Business & Work
{/* Tool Icons */}
Tools & Utilities
{/* Enhanced Plugin Testing Section */}
Enhanced Plugin Testing
These examples test the new context-aware babel plugin features
{/* Test 1: Simple Variable */}
Test 1: Simple Variable
Icon name from a simple variable
const iconName = "home"; <Icon name={'{iconName}'} />
{/* Test 2: Namespace Prefix */}
Test 2: Namespace Prefix (mdi:)
Explicit marking with mdi: prefix
const icon = "mdi:star"; <Icon name={'{icon}'} />
{/* Test 3: Conditional Expression */}
Test 3: Conditional Expression
Ternary operator with two icons
Currently: {isPlaying ? 'Playing' : 'Paused'}
<Icon name={'{isPlaying ? "pause" : "play"}'} />
{/* Test 4: Function Return */}
Test 4: Function Return Value
Icon name from function (requires manifest or namespace)
<Icon name={'{getStatusIcon(status)}'} />
{/* Test 5: Namespace with Conditional */}
Test 5: Namespace + Conditional
Guaranteed transformation with mdi: prefix
Audio: {isPlaying ? 'On' : 'Muted'}
<Icon name={'{isPlaying ? "mdi:volume-high" : "mdi:volume-mute"}'} />
{/* Test 6: Logical Expression */}
Test 6: Logical Expression
Using && and || operators
<Icon name={'{condition && "wifi"}'} />
{/* Test 7: Template Literal (Static) */}
Test 7: Template Literal (Static)
Static template strings
const icon = `bell`; <Icon name={'{icon}'} />
{/* Test 8: No False Positives */}
Test 8: No False Positives
Common words NOT used with Icon shouldn't transform
{/* Test 9: Multiple Variables */}
Test 9: Multiple Icon Variables
Several variables used with Icon components
Multiple icon variables in same scope
{/* Summary */}
Plugin Features Tested:
✓ Simple variables
✓ Namespace prefix (mdi:)
✓ Conditional expressions
✓ Function returns
✓ Logical operators
✓ Template literals
✓ No false positives
✓ Multiple variables
);
};