elementdrawing 1.0.0

package/src/jsx/components/Typography.jsx

@@ -0,0 +1,299 @@
+/**
+ * Typography Component for ElementDrawing Framework
+ * Supports Heading (h1-h6), Text, Paragraph, Title, strong, italic, underline, strikethrough, code, mark, delete, keyboard
+ */
+const ED = require('../core/element');
+
+const HEADING_SIZES = {
+  h1: 'ed-text-4xl ed-font-bold ed-leading-tight',
+  h2: 'ed-text-3xl ed-font-bold ed-leading-tight',
+  h3: 'ed-text-2xl ed-font-semibold ed-leading-snug',
+  h4: 'ed-text-xl ed-font-semibold ed-leading-snug',
+  h5: 'ed-text-lg ed-font-medium ed-leading-normal',
+  h6: 'ed-text-base ed-font-medium ed-leading-normal',
+};
+
+const TEXT_COLORS = {
+  default: 'ed-text-gray-900',
+  secondary: 'ed-text-gray-500',
+  success: 'ed-text-green-600',
+  warning: 'ed-text-yellow-600',
+  danger: 'ed-text-red-600',
+  info: 'ed-text-blue-600',
+  muted: 'ed-text-gray-400',
+  white: 'ed-text-white',
+  inherit: '',
+};
+
+function Heading(props) {
+  const {
+    level = 2,
+    children,
+    className = '',
+    style = {},
+    color,
+    align,
+    id,
+    weight,
+    truncate = false,
+    ellipsis = false,
+    underline: headingUnderline = false,
+    italic = false,
+    transform,
+    marginTop = true,
+    marginBottom = true,
+  } = props;
+
+  const tag = `h${level}`;
+  const sizeClass = HEADING_SIZES[tag] || HEADING_SIZES.h2;
+
+  const headingClasses = [
+    sizeClass,
+    color ? (TEXT_COLORS[color] || `ed-text-${color}`) : '',
+    align ? `ed-text-${align}` : '',
+    weight ? `ed-font-${weight}` : '',
+    truncate || ellipsis ? 'ed-truncate' : '',
+    headingUnderline ? 'ed-underline' : '',
+    italic ? 'ed-italic' : '',
+    transform ? `ed-${transform}` : '',
+    marginTop ? 'ed-mt-6' : '',
+    marginBottom ? 'ed-mb-2' : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return ED.createElement(tag, {
+    id,
+    className: headingClasses,
+    style: { ...(ellipsis ? { maxWidth: '100%' } : {}), ...style },
+    children,
+  });
+}
+
+Heading.displayName = 'Heading';
+
+function Text(props) {
+  const {
+    children,
+    className = '',
+    style = {},
+    size,
+    color,
+    weight,
+    align,
+    truncate = false,
+    ellipsis = false,
+    strong = false,
+    italic = false,
+    underline = false,
+    strikethrough = false,
+    delete: isDelete = false,
+    mark = false,
+    code = false,
+    keyboard = false,
+    small = false,
+    disabled = false,
+    copyable = false,
+    onCopy,
+    editable = false,
+    onEdit,
+    type,
+    transform,
+    tag: customTag,
+    onClick,
+    title,
+  } = props;
+
+  const colorClass = type ? (TEXT_COLORS[type] || '') : color ? (TEXT_COLORS[color] || `ed-text-${color}`) : '';
+
+  const sizeClasses = {
+    xs: 'ed-text-xs',
+    sm: 'ed-text-sm',
+    md: 'ed-text-base',
+    lg: 'ed-text-lg',
+    xl: 'ed-text-xl',
+  };
+
+  const textClasses = [
+    size ? sizeClasses[size] || `ed-text-${size}` : '',
+    colorClass,
+    weight ? `ed-font-${weight}` : strong ? 'ed-font-semibold' : '',
+    align ? `ed-text-${align}` : '',
+    truncate || ellipsis ? 'ed-truncate' : '',
+    italic ? 'ed-italic' : '',
+    underline ? 'ed-underline' : '',
+    strikethrough || isDelete ? 'ed-line-through' : '',
+    mark ? 'ed-bg-yellow-200 ed-px-1 ed-rounded' : '',
+    code ? 'ed-bg-gray-100 ed-px-1.5 ed-py-0.5 ed-rounded ed-text-sm ed-font-mono ed-text-pink-600' : '',
+    keyboard ? 'ed-bg-gray-100 ed-px-1.5 ed-py-0.5 ed-rounded ed-border ed-border-gray-300 ed-shadow-sm ed-text-xs ed-font-mono' : '',
+    small ? 'ed-text-xs' : '',
+    disabled ? 'ed-text-gray-400 ed-cursor-not-allowed' : '',
+    transform ? `ed-${transform}` : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  let content = children;
+
+  if (mark) {
+    content = ED.createElement('mark', {
+      className: 'ed-bg-yellow-200 ed-px-1 ed-rounded',
+    }, children);
+  }
+
+  if (code) {
+    content = ED.createElement('code', {
+      className: 'ed-bg-gray-100 ed-px-1.5 ed-py-0.5 ed-rounded ed-text-sm ed-font-mono ed-text-pink-600',
+    }, children);
+  }
+
+  if (keyboard) {
+    content = ED.createElement('kbd', {
+      className: 'ed-bg-gray-100 ed-px-1.5 ed-py-0.5 ed-rounded ed-border ed-border-gray-300 ed-shadow-sm ed-text-xs ed-font-mono',
+    }, children);
+  }
+
+  if (isDelete || strikethrough) {
+    content = ED.createElement('del', null, content);
+  }
+
+  if (strong && !weight) {
+    content = ED.createElement('strong', null, content);
+  }
+
+  const copyButton = copyable
+    ? ED.createElement('button', {
+        className: 'ed-ml-2 ed-p-0.5 ed-text-gray-400 hover:ed-text-gray-600 ed-transition-colors ed-inline-flex',
+        onClick: () => {
+          if (typeof navigator !== 'undefined' && navigator.clipboard) {
+            navigator.clipboard.writeText(typeof children === 'string' ? children : '');
+            onCopy?.();
+          }
+        },
+        'aria-label': 'Copy text',
+        children: ED.createElement('svg', {
+          className: 'ed-w-4 ed-h-4',
+          fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+          children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z' }),
+        }),
+      })
+    : null;
+
+  const Tag = customTag || 'span';
+
+  return ED.createElement(Tag, {
+    className: textClasses,
+    style: { ...(ellipsis ? { maxWidth: '100%' } : {}), ...style },
+    onClick,
+    title,
+    children: [content, copyButton].filter(Boolean),
+  });
+}
+
+Text.displayName = 'Text';
+
+function Paragraph(props) {
+  const {
+    children,
+    className = '',
+    style = {},
+    color,
+    size,
+    weight,
+    align,
+    truncate = false,
+    ellipsis = false,
+    strong = false,
+    italic = false,
+    underline = false,
+    mark = false,
+    code = false,
+    disabled = false,
+    type,
+    rows,
+    expandable = false,
+    onExpand,
+    copyable = false,
+    onCopy,
+    editable = false,
+    onEdit,
+  } = props;
+
+  const colorClass = type ? (TEXT_COLORS[type] || '') : color ? (TEXT_COLORS[color] || `ed-text-${color}`) : '';
+
+  const paragraphClasses = [
+    'ed-leading-relaxed ed-mb-4',
+    colorClass,
+    weight ? `ed-font-${weight}` : strong ? 'ed-font-semibold' : '',
+    align ? `ed-text-${align}` : '',
+    truncate || ellipsis ? 'ed-truncate' : '',
+    italic ? 'ed-italic' : '',
+    underline ? 'ed-underline' : '',
+    mark ? 'ed-bg-yellow-200 ed-px-1 ed-rounded' : '',
+    disabled ? 'ed-text-gray-400' : '',
+    rows && !ellipsis ? `ed-line-clamp-${rows}` : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return ED.createElement('p', {
+    className: paragraphClasses,
+    style,
+    children,
+  });
+}
+
+Paragraph.displayName = 'Paragraph';
+
+function Title(props) {
+  const {
+    children,
+    level = 3,
+    className = '',
+    style = {},
+    color,
+    align,
+    weight,
+    underline = false,
+    italic = false,
+    truncate = false,
+    id,
+  } = props;
+
+  return ED.createElement(Heading, {
+    level,
+    color,
+    align,
+    weight,
+    underline,
+    italic,
+    truncate,
+    id,
+    className,
+    style,
+    children,
+  });
+}
+
+Title.displayName = 'Title';
+
+function Typography(props) {
+  const {
+    children,
+    className = '',
+    style = {},
+  } = props;
+
+  return ED.createElement('div', {
+    className: `ed-typography ed-text-gray-900 ${className}`,
+    style,
+    children,
+  });
+}
+
+Typography.displayName = 'Typography';
+Typography.Heading = Heading;
+Typography.Text = Text;
+Typography.Paragraph = Paragraph;
+Typography.Title = Title;
+Typography.HEADING_SIZES = HEADING_SIZES;
+Typography.COLORS = TEXT_COLORS;
+
+module.exports = Typography;

package/src/jsx/components/index.jsx

@@ -0,0 +1,70 @@
+/**
+ * ElementDrawing Component Library - Index
+ * Exports all UI components
+ */
+
+const Button = require('./Button');
+const Card = require('./Card');
+const Modal = require('./Modal');
+const Input = require('./Input');
+const Table = require('./Table');
+const Navbar = require('./Navbar');
+const Sidebar = require('./Sidebar');
+const Form = require('./Form');
+const Tabs = require('./Tabs');
+const Accordion = require('./Accordion');
+const Alert = require('./Alert');
+const Avatar = require('./Avatar');
+const Badge = require('./Badge');
+const Breadcrumb = require('./Breadcrumb');
+const Carousel = require('./Carousel');
+const Checkbox = require('./Checkbox');
+const Dialog = require('./Dialog');
+const Drawer = require('./Drawer');
+const Dropdown = require('./Dropdown');
+const Menu = require('./Menu');
+const Pagination = require('./Pagination');
+const Progress = require('./Progress');
+const Radio = require('./Radio');
+const Select = require('./Select');
+const Slider = require('./Slider');
+const Spinner = require('./Spinner');
+const Switch = require('./Switch');
+const Textarea = require('./Textarea');
+const Toast = require('./Toast');
+const Tooltip = require('./Tooltip');
+const Typography = require('./Typography');
+
+module.exports = {
+  Button,
+  Card,
+  Modal,
+  Input,
+  Table,
+  Navbar,
+  Sidebar,
+  Form,
+  Tabs,
+  Accordion,
+  Alert,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  Carousel,
+  Checkbox,
+  Dialog,
+  Drawer,
+  Dropdown,
+  Menu,
+  Pagination,
+  Progress,
+  Radio,
+  Select,
+  Slider,
+  Spinner,
+  Switch,
+  Textarea,
+  Toast,
+  Tooltip,
+  Typography,
+};

package/src/jsx/core/element.js

@@ -0,0 +1,3 @@
+export default function element(tag, props = {}, ...children) {
+  return { tag, props, children };
+}