create-react-docs-ui 0.5.2 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-react-docs-ui",
-    "version": "0.5.2",
+    "version": "0.5.4",
     "private": false,
     "type": "module",
     "bin": {
@@ -13,6 +13,7 @@
         "template/vite-plugin-mdx-components.ts",
         "template/public/**/*",
         "template/src/main.tsx",
+        "template/src/index.css",
         "template/src/react-docs-ui.d.ts",
         "template/src/vite-env.d.ts",
         "template/src/components/**/*",

package/template/package.json

@@ -10,7 +10,7 @@
     },
     "dependencies": {
         "react": "^19.0.0",
-        "react-docs-ui": "^0.5.1",
+        "react-docs-ui": "^0.5.3",
         "react-dom": "^19.0.0",
         "react-router-dom": "^7.8.0"
     },

package/template/public/docs/en/docs/test/mdx-test.mdx

@@ -50,6 +50,10 @@ The Alert component supports multiple types: info, success, warning, error
     An error occurred, please check and try again.
 </Alert>
 
+<Alert type="success" title="Success" icon="/images/success.svg">
+    Congratulations! The operation has been completed successfully.
+</Alert>
+   
 ### Feature Component
 
 The Feature component is used to display feature highlights:
@@ -86,24 +90,6 @@ The Callout component is used to emphasize important content:
     This is a secondary style Callout used for supplementary information.
 </Callout>
 
-### StepList Component
-
-The StepList component is used to display step processes:
-
-<StepList>
-    <StepList.Step title="Install Dependencies">
-        Run the `npm install` command to install the required dependencies for the project.
-    </StepList.Step>
-    <StepList.Step title="Configure Environment">
-        Configure environment variables and development environment according to project requirements.
-    </StepList.Step>
-    <StepList.Step title="Start Project">
-        Run `npm run dev` to start the development server.
-    </StepList.Step>
-    <StepList.Step title="Start Development">
-        Start writing code to implement your functional requirements.
-    </StepList.Step>
-</StepList>
 
 ### BadgeList Component
 

package/template/public/docs/zh-cn/docs/test/mdx-test.mdx

@@ -51,7 +51,9 @@ Alert 组件支持多种类型：info、success、warning、error
     发生了一个错误，请检查后重试。
 </Alert>
 
-
+<Alert type="success" title="Success" icon="/images/success.svg">
+    恭喜！操作已成功完成。
+</Alert>
 
 ### Feature 组件
 

package/template/public/images/success.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>

package/template/src/components/Alert.tsx

@@ -3,27 +3,139 @@ import * as React from 'react'
 interface AlertProps {
   type?: 'info' | 'success' | 'warning' | 'error'
   title?: string
+  icon?: string | React.ReactNode
   children: React.ReactNode
 }
 
-export function Alert({ type = 'info', title, children }: AlertProps) {
-  const styles = {
-    info: 'border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-200',
-    success: 'border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-200',
-    warning: 'border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-200',
-    error: 'border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200'
+export function Alert({ type = 'info', title, icon, children }: AlertProps) {
+  const [isDarkMode, setIsDarkMode] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsDarkMode(document.documentElement.classList.contains('dark'))
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains('dark'))
+    })
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
+    return () => observer.disconnect()
+  }, [])
+
+  const styles: Record<string, React.CSSProperties> = {
+    info: {
+      border: '1px solid #bfdbfe',
+      backgroundColor: '#eff6ff',
+      color: '#1e40af'
+    },
+    success: {
+      border: '1px solid #bbf7d0',
+      backgroundColor: '#f0fdf4',
+      color: '#166534'
+    },
+    warning: {
+      border: '1px solid #fef9c3',
+      backgroundColor: '#fefce8',
+      color: '#854d0e'
+    },
+    error: {
+      border: '1px solid #fecaca',
+      backgroundColor: '#fef2f2',
+      color: '#991b1b'
+    }
   }
 
-  const icons = {
+  const darkStyles: Record<string, React.CSSProperties> = {
+    info: {
+      border: '1px solid rgba(30, 58, 138, 0.15)',
+      backgroundColor: 'rgba(30, 58, 138, 0.1)',
+      color: '#bfdbfe'
+    },
+    success: {
+      border: '1px solid rgba(22, 101, 52, 0.15)',
+      backgroundColor: 'rgba(22, 101, 52, 0.1)',
+      color: '#bbf7d0'
+    },
+    warning: {
+      border: '1px solid rgba(133, 77, 14, 0.15)',
+      backgroundColor: 'rgba(133, 77, 14, 0.1)',
+      color: '#fef9c3'
+    },
+    error: {
+      border: '1px solid rgba(153, 27, 27, 0.2)',
+      backgroundColor: 'rgba(153, 27, 27, 0.15)',
+      color: '#fecaca'
+    }
+  }
+
+  const defaultIcons = {
     info: 'ℹ️',
     success: '✅',
     warning: '⚠️',
     error: '❌'
   }
 
+  // 判断 icon 的类型并渲染
+  const renderIcon = () => {
+    if (icon === undefined) {
+      return defaultIcons[type]
+    }
+
+    if (React.isValidElement(icon)) {
+      // 如果是 React 元素（如 SVG 组件）
+      const iconElement = icon as React.ReactElement<any>
+      return React.cloneElement(iconElement, {
+        style: {
+          display: 'inline-block',
+          verticalAlign: 'middle',
+          width: '1.25rem',
+          height: '1.25rem',
+          marginRight: '0.5rem',
+          ...(iconElement.props?.style || {})
+        }
+      })
+    }
+
+    if (typeof icon === 'string' && icon.startsWith('/')) {
+      // 如果是路径字符串，渲染为图片
+      return (
+        <img
+          src={icon}
+          alt=""
+          style={{
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            width: '1.25rem',
+            height: '1.25rem',
+            marginRight: '0.5rem'
+          }}
+        />
+      )
+    }
+
+    // 否则作为字符串渲染
+    return icon
+  }
+
   return (
-    <div className={`my-4 rounded-lg border p-4 ${styles[type]}`}>
-      {title && <div className="mb-2 font-semibold">{icons[type]} {title}</div>}
+    <div style={{
+      margin: '1rem 0',
+      borderRadius: '0.5rem',
+      border: '1px solid',
+      padding: '1rem',
+      ...(isDarkMode ? darkStyles[type] : styles[type])
+    }}>
+      {title && (
+        <div style={{
+          marginBottom: '0.5rem',
+          fontWeight: '600',
+          display: 'flex',
+          alignItems: 'center'
+        }}>
+          {renderIcon()}
+          <span>{title}</span>
+        </div>
+      )}
       <div>{children}</div>
     </div>
   )

package/template/src/components/BadgeList.tsx

@@ -10,16 +10,74 @@ interface BadgeListProps {
 }
 
 function Badge({ variant = 'default', children }: BadgeProps) {
-  const styles = {
-    default: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',
-    success: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
-    warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
-    error: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
-    info: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
+  const [isDarkMode, setIsDarkMode] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsDarkMode(document.documentElement.classList.contains('dark'))
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains('dark'))
+    })
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
+    return () => observer.disconnect()
+  }, [])
+
+  const styles: Record<string, React.CSSProperties> = {
+    default: {
+      backgroundColor: '#f3f4f6',
+      color: '#1f2937'
+    },
+    success: {
+      backgroundColor: '#dcfce7',
+      color: '#166534'
+    },
+    warning: {
+      backgroundColor: '#fef9c3',
+      color: '#854d0e'
+    },
+    error: {
+      backgroundColor: '#fee2e2',
+      color: '#991b1b'
+    },
+    info: {
+      backgroundColor: '#dbeafe',
+      color: '#1e40af'
+    }
+  }
+
+  const darkStyles: Record<string, React.CSSProperties> = {
+    default: {
+      backgroundColor: 'rgba(55, 65, 81, 0.2)',
+      color: '#e5e7eb'
+    },
+    success: {
+      backgroundColor: 'rgba(22, 101, 52, 0.2)',
+      color: '#bbf7d0'
+    },
+    warning: {
+      backgroundColor: 'rgba(133, 77, 14, 0.2)',
+      color: '#fef9c3'
+    },
+    error: {
+      backgroundColor: 'rgba(153, 27, 27, 0.2)',
+      color: '#fecaca'
+    },
+    info: {
+      backgroundColor: 'rgba(30, 58, 138, 0.2)',
+      color: '#bfdbfe'
+    }
   }
 
   return (
-    <span className={`inline-block rounded-full px-3 py-1 text-sm ${styles[variant]}`}>
+    <span style={{
+      display: 'inline-block',
+      borderRadius: '9999px',
+      padding: '0.25rem 0.75rem',
+      fontSize: '0.875rem',
+      ...(isDarkMode ? darkStyles[variant] : styles[variant])
+    }}>
       {children}
     </span>
   )
@@ -27,8 +85,13 @@ function Badge({ variant = 'default', children }: BadgeProps) {
 
 export function BadgeList({ children }: BadgeListProps) {
   return (
-    <div className="my-4 flex flex-wrap gap-2">
-      {React.Children.map(children, child => 
+    <div style={{
+      margin: '1rem 0',
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '0.5rem'
+    }}>
+      {React.Children.map(children, child =>
         React.isValidElement(child) ? child : null
       )}
     </div>

package/template/src/components/Callout.tsx

@@ -6,14 +6,58 @@ interface CalloutProps {
 }
 
 export function Callout({ variant = 'default', children }: CalloutProps) {
-  const styles = {
-    default: 'border-l-4 border-gray-500 bg-gray-50 dark:bg-gray-800',
-    primary: 'border-l-4 border-blue-500 bg-blue-50 dark:bg-blue-950',
-    secondary: 'border-l-4 border-purple-500 bg-purple-50 dark:bg-purple-950'
+  const [isDarkMode, setIsDarkMode] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsDarkMode(document.documentElement.classList.contains('dark'))
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains('dark'))
+    })
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
+    return () => observer.disconnect()
+  }, [])
+
+  const styles: Record<string, React.CSSProperties> = {
+    default: {
+      borderLeft: '4px solid #6b7280',
+      backgroundColor: '#f9fafb'
+    },
+    primary: {
+      borderLeft: '4px solid #3b82f6',
+      backgroundColor: '#eff6ff'
+    },
+    secondary: {
+      borderLeft: '4px solid #8b5cf6',
+      backgroundColor: '#faf5ff'
+    }
+  }
+
+  const darkStyles: Record<string, React.CSSProperties> = {
+    default: {
+      borderLeft: '4px solid rgba(75, 85, 99, 0.2)',
+      backgroundColor: 'rgba(17, 24, 39, 0.2)'
+    },
+    primary: {
+      borderLeft: '4px solid rgba(30, 58, 138, 0.2)',
+      backgroundColor: 'rgba(30, 58, 138, 0.2)'
+    },
+    secondary: {
+      borderLeft: '4px solid rgba(88, 28, 135, 0.2)',
+      backgroundColor: 'rgba(88, 28, 135, 0.2)'
+    }
   }
 
   return (
-    <div className={`my-4 rounded-r-lg p-4 ${styles[variant]}`}>
+    <div style={{
+      margin: '1rem 0',
+      borderTopRightRadius: '0.5rem',
+      borderBottomRightRadius: '0.5rem',
+      padding: '1rem',
+      ...(isDarkMode ? darkStyles[variant] : styles[variant])
+    }}>
       {children}
     </div>
   )

package/template/src/components/Feature.tsx

@@ -6,10 +6,10 @@ interface FeatureProps {
 
 export function Feature({ icon = '🚀', title, description }: FeatureProps) {
   return (
-    <div className="my-4 rounded-lg border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow dark:border-gray-700">
+    <div className="my-4 rounded-lg border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow dark:border-gray-600">
       <div className="mb-3 text-4xl">{icon}</div>
       <h3 className="mb-2 text-lg font-semibold">{title}</h3>
-      <p className="text-gray-600 dark:text-gray-300">{description}</p>
+      <p className="text-gray-600 dark:text-gray-400">{description}</p>
     </div>
   )
 }

package/template/src/components/MyTip.tsx

@@ -7,13 +7,13 @@ interface MyTipProps {
 
 export function MyTip({ title, children }: MyTipProps) {
   return (
-    <div className="my-4 rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-950">
+    <div className="my-4 rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-800/60 dark:bg-green-950/80">
       {title && (
         <div className="mb-2 font-semibold text-green-900 dark:text-green-100">
           💡 {title}
         </div>
       )}
-      <div className="text-green-800 dark:text-green-200">{children}</div>
+      <div className="text-green-800 dark:text-green-300">{children}</div>
     </div>
   )
 }

package/template/src/index.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));

package/template/src/components/StepList.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react'
-
-interface StepProps {
-  step: number
-  title: string
-  children: React.ReactNode
-}
-
-interface StepListProps {
-  children: React.ReactNode
-}
-
-function Step({ step, title, 'data-title': dataTitle, children }: StepProps & { 'data-title'?: string }) {
-  // 优先使用 title，如果没有则使用 data-title
-  const displayTitle = title || dataTitle
-  
-  return (
-    <div className="relative pb-8 last:pb-0">
-      <div className="absolute left-0 top-0 flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white">
-        {step}
-      </div>
-      <div className="ml-12">
-        <h4 className="mb-2 font-semibold">{displayTitle}</h4>
-        <div className="text-gray-600 dark:text-gray-300">{children}</div>
-      </div>
-    </div>
-  )
-}
-
-export function StepList({ children }: StepListProps) {
-  const steps = React.Children.toArray(children).filter(
-    (child): child is React.ReactElement<StepProps> => {
-      if (!React.isValidElement(child)) return false
-      
-      const childProps = child.props as any
-      
-      // 检查 props 中是否有 data-title 属性（通过我们的转换，title 变成了 data-title）
-      if (childProps && Object.prototype.hasOwnProperty.call(childProps, 'data-title')) return true
-      
-      // 检查 props 中是否有 node.tagName === 'steplist-step'
-      if (childProps?.node?.tagName === 'steplist-step') return true
-      
-      // 检查 props 中是否有 title 属性（直接使用的情况）
-      if (childProps && Object.prototype.hasOwnProperty.call(childProps, 'title')) return true
-      
-      return false
-    }
-  )
-
-  return (
-    <div className="my-4 rounded-lg border border-gray-200 p-6 dark:border-gray-700">
-      {steps.map((step, index) => 
-        React.cloneElement(step, { 
-          key: index,
-          step: index + 1 
-        })
-      )}
-    </div>
-  )
-}
-
-StepList.Step = Step