@delightui/components 0.1.104 → 0.1.106

package/docs/components/utils/WrapTextNodes.md

@@ -0,0 +1,614 @@
+# WrapTextNodes
+
+## Description
+
+A utility component that wraps text nodes within its children with specified Text component styling. WrapTextNodes automatically identifies text content and applies consistent typography styling, making it perfect for scenarios where you want to ensure uniform text appearance across complex component hierarchies without manually wrapping every text element.
+
+## Aliases
+
+- WrapTextNodes
+- Text Wrapper
+- Typography Wrapper
+- Auto Text Styler
+
+## Props Breakdown
+
+**Extends:** `TextProps` (excluding `className`)
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `type` | `TextTypeEnum` | `'BodyMedium'` | No | Typography type for wrapped text |
+| `weight` | `TextWeightEnum \| number` | `'Regular'` | No | Font weight for wrapped text |
+| `decoration` | `TextDecorationEnum` | `'None'` | No | Text decoration (underline, strikethrough) |
+| `transform` | `TextTransformEnum` | `'None'` | No | Text transformation (uppercase, lowercase, etc.) |
+| `italic` | `boolean` | `false` | No | Whether text should be italic |
+| `wrap` | `boolean` | `true` | No | Whether text should wrap |
+| `ellipsis` | `boolean` | `false` | No | Whether to show ellipsis for overflow |
+| `as` | `string` | `'span'` | No | HTML element to render as |
+| `children` | `ReactNode` | - | Yes | Content containing text nodes to wrap |
+
+This component applies text styling to text nodes without adding standard HTML attributes.
+
+## Examples
+
+### Basic Text Wrapping
+
+```tsx
+import { WrapTextNodes, Card, Button } from '@delightui/components';
+
+function BasicTextWrappingExample() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+      <Card style={{ padding: '20px' }}>
+        <WrapTextNodes weight="Bold" type="Heading3">
+          <div>
+            This text will be automatically wrapped with Bold Heading3 styling.
+            <Button style={{ margin: '0 8px' }}>Button stays unchanged</Button>
+            More text here will also get the same styling.
+          </div>
+        </WrapTextNodes>
+      </Card>
+
+      <Card style={{ padding: '20px' }}>
+        <WrapTextNodes weight="Light" decoration="Underline">
+          <div>
+            All text nodes in this container will be underlined and light weight.
+            <div>
+              Even nested text gets wrapped consistently.
+              <span>This span text too!</span>
+            </div>
+          </div>
+        </WrapTextNodes>
+      </Card>
+    </div>
+  );
+}
+```
+
+### Form Error Messages
+
+```tsx
+import { WrapTextNodes, Form, FormField, Input, Button, Card } from '@delightui/components';
+
+function FormErrorMessagesExample() {
+  const [errors, setErrors] = useState({
+    email: 'Please enter a valid email address',
+    password: 'Password must be at least 8 characters long'
+  });
+
+  return (
+    <Card style={{ padding: '20px', maxWidth: '400px' }}>
+      <Form onSubmit={(data) => console.log(data)}>
+        <FormField name="email" label="Email" required invalid={!!errors.email}>
+          <Input inputType="Email" placeholder="Enter your email" />
+          <WrapTextNodes weight="Regular" type="BodySmall" style={{ color: '#d32f2f' }}>
+            <div style={{ marginTop: '4px' }}>
+              {errors.email}
+            </div>
+          </WrapTextNodes>
+        </FormField>
+
+        <FormField name="password" label="Password" required invalid={!!errors.password}>
+          <Input inputType="Password" placeholder="Enter your password" />
+          <WrapTextNodes weight="Regular" type="BodySmall" style={{ color: '#d32f2f' }}>
+            <div style={{ marginTop: '4px' }}>
+              {errors.password}
+            </div>
+          </WrapTextNodes>
+        </FormField>
+
+        <WrapTextNodes weight="Light" type="BodySmall" style={{ color: '#666' }}>
+          <div style={{ marginTop: '16px', marginBottom: '16px' }}>
+            By creating an account, you agree to our 
+            <a href="/terms" style={{ margin: '0 4px' }}>Terms of Service</a>
+            and
+            <a href="/privacy" style={{ margin: '0 4px' }}>Privacy Policy</a>.
+          </div>
+        </WrapTextNodes>
+
+        <Button actionType="submit" style={{ width: '100%' }}>
+          Create Account
+        </Button>
+      </Form>
+    </Card>
+  );
+}
+```
+
+### Notification System
+
+```tsx
+import { WrapTextNodes, Card, Button, Icon } from '@delightui/components';
+
+function NotificationSystemExample() {
+  const [notifications, setNotifications] = useState([
+    { id: 1, type: 'success', title: 'Success!', message: 'Your changes have been saved successfully.' },
+    { id: 2, type: 'warning', title: 'Warning', message: 'Your session will expire in 5 minutes.' },
+    { id: 3, type: 'error', title: 'Error', message: 'Failed to upload file. Please try again.' }
+  ]);
+
+  const getNotificationStyle = (type: string) => {
+    switch (type) {
+      case 'success':
+        return { backgroundColor: '#e8f5e8', borderLeft: '4px solid #4caf50' };
+      case 'warning':
+        return { backgroundColor: '#fff3e0', borderLeft: '4px solid #ff9800' };
+      case 'error':
+        return { backgroundColor: '#ffebee', borderLeft: '4px solid #f44336' };
+      default:
+        return { backgroundColor: '#f5f5f5', borderLeft: '4px solid #2196f3' };
+    }
+  };
+
+  const getTextColor = (type: string) => {
+    switch (type) {
+      case 'success': return '#2e7d32';
+      case 'warning': return '#f57c00';
+      case 'error': return '#d32f2f';
+      default: return '#1976d2';
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: '500px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      {notifications.map(notification => (
+        <Card key={notification.id} style={{ ...getNotificationStyle(notification.type), padding: '16px' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+            <div style={{ flex: 1 }}>
+              <WrapTextNodes 
+                weight="Bold" 
+                type="BodyMedium" 
+                style={{ color: getTextColor(notification.type) }}
+              >
+                <div style={{ marginBottom: '4px' }}>
+                  {notification.title}
+                </div>
+              </WrapTextNodes>
+              
+              <WrapTextNodes 
+                weight="Regular" 
+                type="BodySmall"
+                style={{ color: '#666' }}
+              >
+                <div>
+                  {notification.message}
+                </div>
+              </WrapTextNodes>
+            </div>
+            
+            <Button 
+              size="Small" 
+              type="Ghost"
+              onClick={() => setNotifications(prev => prev.filter(n => n.id !== notification.id))}
+            >
+              ×
+            </Button>
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+}
+```
+
+### Documentation Content
+
+```tsx
+import { WrapTextNodes, Card, Button } from '@delightui/components';
+
+function DocumentationContentExample() {
+  return (
+    <div style={{ maxWidth: '800px', lineHeight: 1.6 }}>
+      <WrapTextNodes weight="Bold" type="Heading1">
+        <h1>Component Documentation</h1>
+      </WrapTextNodes>
+
+      <WrapTextNodes weight="Regular" type="BodyLarge">
+        <div style={{ marginBottom: '24px' }}>
+          This documentation provides comprehensive information about using our component library.
+          Follow the examples below to get started with implementation.
+        </div>
+      </WrapTextNodes>
+
+      <Card style={{ padding: '20px', marginBottom: '24px' }}>
+        <WrapTextNodes weight="SemiBold" type="Heading3">
+          <h3 style={{ marginBottom: '12px' }}>Installation</h3>
+        </WrapTextNodes>
+        
+        <WrapTextNodes weight="Regular" type="BodyMedium">
+          <div style={{ marginBottom: '12px' }}>
+            Install the package using npm or yarn:
+          </div>
+        </WrapTextNodes>
+
+        <WrapTextNodes weight="Medium" type="BodyMedium" as="code">
+          <div style={{ 
+            backgroundColor: '#f5f5f5', 
+            padding: '12px', 
+            borderRadius: '4px',
+            fontFamily: 'monospace',
+            marginBottom: '16px'
+          }}>
+            npm install @delightui/components
+          </div>
+        </WrapTextNodes>
+
+        <WrapTextNodes weight="Regular" type="BodyMedium">
+          <div>
+            Then import the components you need:
+          </div>
+        </WrapTextNodes>
+
+        <WrapTextNodes weight="Medium" type="BodyMedium" as="code">
+          <div style={{ 
+            backgroundColor: '#f5f5f5', 
+            padding: '12px', 
+            borderRadius: '4px',
+            fontFamily: 'monospace'
+          }}>
+            import {`{ Button, Card, Text }`} from '@delightui/components';
+          </div>
+        </WrapTextNodes>
+      </Card>
+
+      <Card style={{ padding: '20px', marginBottom: '24px' }}>
+        <WrapTextNodes weight="SemiBold" type="Heading3">
+          <h3 style={{ marginBottom: '12px' }}>Quick Start</h3>
+        </WrapTextNodes>
+
+        <WrapTextNodes weight="Regular" type="BodyMedium">
+          <div style={{ marginBottom: '16px' }}>
+            Here's a simple example to get you started:
+          </div>
+        </WrapTextNodes>
+
+        <WrapTextNodes weight="Regular" type="BodyMedium">
+          <ol style={{ paddingLeft: '20px' }}>
+            <li style={{ marginBottom: '8px' }}>Import the necessary components</li>
+            <li style={{ marginBottom: '8px' }}>Create your component structure</li>
+            <li style={{ marginBottom: '8px' }}>Add event handlers and state management</li>
+            <li>Style your components using the provided props</li>
+          </ol>
+        </WrapTextNodes>
+      </Card>
+
+      <WrapTextNodes weight="Light" type="BodySmall" style={{ color: '#666' }}>
+        <div style={{ textAlign: 'center', marginTop: '40px' }}>
+          For more information, visit our 
+          <a href="#" style={{ margin: '0 4px', color: '#1976d2' }}>GitHub repository</a>
+          or check out the
+          <a href="#" style={{ margin: '0 4px', color: '#1976d2' }}>complete API reference</a>.
+        </div>
+      </WrapTextNodes>
+    </div>
+  );
+}
+```
+
+### Dashboard Widget Content
+
+```tsx
+import { WrapTextNodes, Card, ProgressBar, Button } from '@delightui/components';
+
+function DashboardWidgetExample() {
+  const widgets = [
+    {
+      title: 'Sales Performance',
+      value: '$45,678',
+      change: '+12.5%',
+      description: 'Compared to last month',
+      trend: 'positive'
+    },
+    {
+      title: 'Active Users',
+      value: '2,847',
+      change: '-3.2%',
+      description: 'Online right now',
+      trend: 'negative'
+    },
+    {
+      title: 'Conversion Rate',
+      value: '3.4%',
+      change: '+0.8%',
+      description: 'This week vs last week',
+      trend: 'positive'
+    }
+  ];
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '20px' }}>
+      {widgets.map((widget, index) => (
+        <Card key={index} style={{ padding: '20px' }}>
+          <WrapTextNodes weight="Medium" type="BodyMedium" style={{ color: '#666' }}>
+            <div style={{ marginBottom: '8px' }}>
+              {widget.title}
+            </div>
+          </WrapTextNodes>
+
+          <WrapTextNodes weight="Bold" type="Heading2">
+            <div style={{ marginBottom: '4px' }}>
+              {widget.value}
+            </div>
+          </WrapTextNodes>
+
+          <WrapTextNodes 
+            weight="SemiBold" 
+            type="BodySmall"
+            style={{ color: widget.trend === 'positive' ? '#4caf50' : '#f44336' }}
+          >
+            <div style={{ marginBottom: '8px' }}>
+              {widget.change}
+            </div>
+          </WrapTextNodes>
+
+          <WrapTextNodes weight="Regular" type="BodySmall" style={{ color: '#888' }}>
+            <div style={{ marginBottom: '16px' }}>
+              {widget.description}
+            </div>
+          </WrapTextNodes>
+
+          <ProgressBar 
+            value={Math.random() * 100} 
+            max={100} 
+            style={{ marginBottom: '12px' }}
+          />
+
+          <Button size="Small" type="Outlined" style={{ width: '100%' }}>
+            View Details
+          </Button>
+        </Card>
+      ))}
+    </div>
+  );
+}
+```
+
+### Chat Message Styling
+
+```tsx
+import { WrapTextNodes, Card } from '@delightui/components';
+
+function ChatMessageStylingExample() {
+  const messages = [
+    { id: 1, user: 'Alice', content: 'Hey everyone! How is the project going?', time: '2:30 PM', isOwn: false },
+    { id: 2, user: 'You', content: 'Great progress! We finished the UI components and are working on the backend integration now.', time: '2:32 PM', isOwn: true },
+    { id: 3, user: 'Bob', content: 'Awesome! Let me know if you need any help with the API endpoints.', time: '2:35 PM', isOwn: false },
+    { id: 4, user: 'You', content: 'Thanks Bob! Will definitely reach out if needed.', time: '2:36 PM', isOwn: true }
+  ];
+
+  return (
+    <div style={{ maxWidth: '500px', height: '400px', overflow: 'auto', padding: '16px', backgroundColor: '#f5f5f5' }}>
+      {messages.map(message => (
+        <div
+          key={message.id}
+          style={{
+            display: 'flex',
+            justifyContent: message.isOwn ? 'flex-end' : 'flex-start',
+            marginBottom: '12px'
+          }}
+        >
+          <Card
+            style={{
+              padding: '12px 16px',
+              maxWidth: '70%',
+              backgroundColor: message.isOwn ? '#2196f3' : '#ffffff',
+              color: message.isOwn ? 'white' : 'black'
+            }}
+          >
+            {!message.isOwn && (
+              <WrapTextNodes 
+                weight="SemiBold" 
+                type="BodySmall"
+                style={{ color: message.isOwn ? '#e3f2fd' : '#1976d2' }}
+              >
+                <div style={{ marginBottom: '4px' }}>
+                  {message.user}
+                </div>
+              </WrapTextNodes>
+            )}
+
+            <WrapTextNodes 
+              weight="Regular" 
+              type="BodyMedium"
+              style={{ color: message.isOwn ? 'white' : 'black' }}
+            >
+              <div style={{ marginBottom: '4px' }}>
+                {message.content}
+              </div>
+            </WrapTextNodes>
+
+            <WrapTextNodes 
+              weight="Light" 
+              type="BodySmall"
+              style={{ color: message.isOwn ? '#bbdefb' : '#666' }}
+            >
+              <div style={{ textAlign: 'right' }}>
+                {message.time}
+              </div>
+            </WrapTextNodes>
+          </Card>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Article Content Formatting
+
+```tsx
+import { WrapTextNodes, Card } from '@delightui/components';
+
+function ArticleContentExample() {
+  return (
+    <Card style={{ padding: '40px', maxWidth: '700px', lineHeight: 1.7 }}>
+      <WrapTextNodes weight="Bold" type="Heading1">
+        <h1 style={{ marginBottom: '16px' }}>The Future of Web Development</h1>
+      </WrapTextNodes>
+
+      <WrapTextNodes weight="Light" type="BodyMedium" style={{ color: '#666' }}>
+        <div style={{ marginBottom: '24px' }}>
+          Published on January 15, 2024 • 5 min read
+        </div>
+      </WrapTextNodes>
+
+      <WrapTextNodes weight="Regular" type="BodyLarge">
+        <div style={{ marginBottom: '20px' }}>
+          Web development continues to evolve at a rapid pace, bringing new technologies, frameworks, and methodologies that reshape how we build digital experiences.
+        </div>
+      </WrapTextNodes>
+
+      <WrapTextNodes weight="SemiBold" type="Heading3">
+        <h3 style={{ marginBottom: '12px', marginTop: '32px' }}>Component-Driven Development</h3>
+      </WrapTextNodes>
+
+      <WrapTextNodes weight="Regular" type="BodyMedium">
+        <div style={{ marginBottom: '16px' }}>
+          Modern web development has shifted towards component-driven architectures. This approach offers several key benefits:
+        </div>
+      </WrapTextNodes>
+
+      <WrapTextNodes weight="Regular" type="BodyMedium">
+        <ul style={{ paddingLeft: '24px', marginBottom: '20px' }}>
+          <li style={{ marginBottom: '8px' }}>Improved code reusability and maintainability</li>
+          <li style={{ marginBottom: '8px' }}>Better separation of concerns</li>
+          <li style={{ marginBottom: '8px' }}>Enhanced testing capabilities</li>
+          <li>Faster development cycles</li>
+        </ul>
+      </WrapTextNodes>
+
+      <WrapTextNodes weight="SemiBold" type="Heading3">
+        <h3 style={{ marginBottom: '12px', marginTop: '32px' }}>Performance Optimization</h3>
+      </WrapTextNodes>
+
+      <WrapTextNodes weight="Regular" type="BodyMedium">
+        <div style={{ marginBottom: '16px' }}>
+          Performance remains a critical factor in web development. Key areas of focus include:
+        </div>
+      </WrapTextNodes>
+
+      <WrapTextNodes weight="Medium" type="BodyMedium">
+        <div style={{ 
+          backgroundColor: '#f8f9fa', 
+          padding: '16px', 
+          borderLeft: '4px solid #2196f3',
+          marginBottom: '20px'
+        }}>
+          "Performance is not just about speed—it's about creating seamless user experiences that feel natural and responsive."
+        </div>
+      </WrapTextNodes>
+
+      <WrapTextNodes weight="Regular" type="BodyMedium">
+        <div style={{ marginBottom: '20px' }}>
+          As we look towards the future, emerging technologies like WebAssembly, Progressive Web Apps, and advanced build tools will continue to push the boundaries of what's possible on the web.
+        </div>
+      </WrapTextNodes>
+
+      <WrapTextNodes weight="Light" type="BodySmall" style={{ color: '#666' }}>
+        <div style={{ 
+          textAlign: 'center', 
+          marginTop: '40px', 
+          paddingTop: '20px',
+          borderTop: '1px solid #eee'
+        }}>
+          Share this article on 
+          <a href="#" style={{ margin: '0 4px', color: '#1976d2' }}>Twitter</a>
+          or
+          <a href="#" style={{ margin: '0 4px', color: '#1976d2' }}>LinkedIn</a>
+        </div>
+      </WrapTextNodes>
+    </Card>
+  );
+}
+```
+
+### Dynamic Content Styling
+
+```tsx
+import { WrapTextNodes, Card, Button } from '@delightui/components';
+
+function DynamicContentStylingExample() {
+  const [textStyle, setTextStyle] = useState({
+    weight: 'Regular' as const,
+    type: 'BodyMedium' as const,
+    decoration: 'None' as const,
+    transform: 'None' as const
+  });
+
+  const content = `This is dynamic content that changes its styling based on the controls below. 
+    You can see how WrapTextNodes applies the styling to all text within this container, 
+    including this paragraph and any other text elements that might be nested inside.`;
+
+  return (
+    <div style={{ maxWidth: '600px' }}>
+      <Card style={{ padding: '20px', marginBottom: '20px' }}>
+        <WrapTextNodes 
+          weight={textStyle.weight}
+          type={textStyle.type}
+          decoration={textStyle.decoration}
+          transform={textStyle.transform}
+        >
+          <div>
+            {content}
+            <div style={{ marginTop: '16px' }}>
+              This is additional nested content that will also receive the same styling.
+            </div>
+          </div>
+        </WrapTextNodes>
+      </Card>
+
+      <Card style={{ padding: '20px' }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
+          <div>
+            <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Weight:</label>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              {['Light', 'Regular', 'Medium', 'SemiBold', 'Bold'].map(weight => (
+                <Button
+                  key={weight}
+                  size="Small"
+                  type={textStyle.weight === weight ? 'Filled' : 'Outlined'}
+                  onClick={() => setTextStyle(prev => ({ ...prev, weight: weight as any }))}
+                >
+                  {weight}
+                </Button>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Decoration:</label>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              {['None', 'Underline', 'Strikethrough'].map(decoration => (
+                <Button
+                  key={decoration}
+                  size="Small"
+                  type={textStyle.decoration === decoration ? 'Filled' : 'Outlined'}
+                  onClick={() => setTextStyle(prev => ({ ...prev, decoration: decoration as any }))}
+                >
+                  {decoration}
+                </Button>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Transform:</label>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              {['None', 'Uppercase', 'Lowercase', 'Capitalize'].map(transform => (
+                <Button
+                  key={transform}
+                  size="Small"
+                  type={textStyle.transform === transform ? 'Filled' : 'Outlined'}
+                  onClick={() => setTextStyle(prev => ({ ...prev, transform: transform as any }))}
+                >
+                  {transform}
+                </Button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delightui/components",
-  "version": "0.1.104",
+  "version": "0.1.106",
   "private": false,
   "scripts": {
     "start": "vite",
@@ -95,7 +95,8 @@
     "dist/assets",
     "dist/cjs",
     "dist/esm",
-    "dist/index.d.ts"
+    "dist/index.d.ts",
+    "docs"
   ],
   "types": "dist/index.d.ts"
 }