feat: convert demo files from .md to .tsx for editor support

Migrate demo files from markdown format to TypeScript/React format
to support more code editors with proper syntax highlighting and
type checking.

Author: wangdicoder

apps/docs/src/components/demo-block/index.tsx

@@ -158,7 +158,7 @@ export const DemoBlock = ({ component: Component, source, title, description }:
             <StackBlitzIcon />
           </button>
         </Tooltip>
-        <Tooltip title={copied ? 'Copied!' : 'Copy code'}>
+        <Tooltip title={copied ? s.codeBlock.copied : s.codeBlock.copyCode}>
           <button
             className="demo-block__action-btn"
             onClick={handleCopy}
@@ -167,7 +167,7 @@ export const DemoBlock = ({ component: Component, source, title, description }:
           </button>
         </Tooltip>
         {isEditing && (
-          <Tooltip title="Reset demo">
+          <Tooltip title={s.codeBlock.resetDemo}>
             <button
               className="demo-block__action-btn"
               onClick={handleReset}

apps/docs/src/locale/en_US.ts

@@ -80,6 +80,9 @@ const en_US: SiteLocale = {
   codeBlock: {
     showCode: 'Show Code',
     hideCode: 'Hide Code',
+    copyCode: 'Copy Code',
+    resetDemo: 'Reset Demo',
+    copied: 'Copied',
     openInStackBlitz: 'Open in StackBlitz',
     openInCodeSandbox: 'Open in CodeSandbox',
   },

apps/docs/src/locale/types.ts

@@ -71,6 +71,9 @@ export type SiteLocale = {
   codeBlock: {
     showCode: string;
     hideCode: string;
+    copyCode: string;
+    resetDemo: string;
+    copied: string;
     openInStackBlitz: string;
     openInCodeSandbox: string;
   };

apps/docs/src/locale/zh_CN.ts

@@ -74,6 +74,9 @@ const zh_CN: SiteLocale = {
   codeBlock: {
     showCode: '显示代码',
     hideCode: '隐藏代码',
+    copyCode: '复制代码',
+    resetDemo: '重置演示',
+    copied: '已复制',
     openInStackBlitz: '在 StackBlitz 中打开',
     openInCodeSandbox: '在 CodeSandbox 中打开',
   },

packages/react/src/alert/demo/Basic.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Alert } from '@tiny-design/react';
+
+export default function BasicDemo() {
+  return <Alert>Info alert</Alert>;
+}

packages/react/src/alert/demo/Closable.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Alert } from '@tiny-design/react';
+
+export default function ClosableDemo() {
+  return (
+    <>
+      <Alert closable>Info alert</Alert>
+      <Alert closable type="success">Success alert</Alert>
+      <Alert closable type="warning">Warning alert</Alert>
+      <Alert closable type="error">Error alert</Alert>
+    </>
+  );
+}

packages/react/src/alert/demo/CloseBtn.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Alert } from '@tiny-design/react';
+
+export default function CloseBtnDemo() {
+  return <Alert closeText="close now">Info alert</Alert>;
+}

packages/react/src/alert/demo/Icon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Alert } from '@tiny-design/react';
+
+export default function IconDemo() {
+  return (
+    <>
+      <Alert icon>Info alert</Alert>
+      <Alert icon type="success">Success alert</Alert>
+      <Alert icon type="warning">Warning alert</Alert>
+      <Alert icon type="error">Error alert</Alert>
+
+      <Alert icon iconSize={20} title="INFO">Info alert</Alert>
+      <Alert icon iconSize={20} type="success" title="SUCCESS">Success alert</Alert>
+      <Alert icon iconSize={20} type="warning" title="WARNING">Warning alert</Alert>
+      <Alert icon iconSize={20} type="error" title="ERROR">Error alert</Alert>
+    </>
+  );
+}

packages/react/src/alert/demo/Title.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Alert } from '@tiny-design/react';
+
+export default function TitleDemo() {
+  return (
+    <Alert title="Well done!" type="success">
+      Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+    </Alert>
+  );
+}

packages/react/src/alert/demo/Type.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Alert } from '@tiny-design/react';
+
+export default function TypeDemo() {
+  return (
+    <>
+      <Alert>Info alert</Alert>
+      <Alert type="success">Success alert</Alert>
+      <Alert type="warning">Warning alert</Alert>
+      <Alert type="error">Error alert</Alert>
+    </>
+  );
+}