From 9f91fcda52be441093ec4a1d0a93b59bb16142a6 Mon Sep 17 00:00:00 2001 From: wangdicoder Date: Wed, 18 Mar 2026 23:12:00 +1100 Subject: [PATCH 1/4] fix: Tag doc issue --- packages/react/src/tag/index.md | 3 --- packages/react/src/tag/index.zh_CN.md | 3 --- 2 files changed, 6 deletions(-) diff --git a/packages/react/src/tag/index.md b/packages/react/src/tag/index.md index 590d905c..08fc2ae9 100755 --- a/packages/react/src/tag/index.md +++ b/packages/react/src/tag/index.md @@ -35,9 +35,6 @@ const { CheckableTag } = Tag; ### Basic -```jsx live -``` - diff --git a/packages/react/src/tag/index.zh_CN.md b/packages/react/src/tag/index.zh_CN.md index 67a082bb..c4e9e90c 100644 --- a/packages/react/src/tag/index.zh_CN.md +++ b/packages/react/src/tag/index.zh_CN.md @@ -35,9 +35,6 @@ const { CheckableTag } = Tag; ### 基础用法 -```jsx live -``` - From b8c7da0f341c3369e9680447a66f9aec8947ba4e Mon Sep 17 00:00:00 2001 From: wangdicoder Date: Thu, 19 Mar 2026 09:18:40 +1100 Subject: [PATCH 2/4] chore: remove code block --- apps/docs/package.json | 1 - .../src/components/code-block/code-block.scss | 90 ------------ apps/docs/src/components/code-block/index.tsx | 135 ------------------ .../code-theme.ts} | 0 apps/docs/src/components/demo-block/index.tsx | 2 +- .../highlighted-code/HighlightedCode.tsx | 56 ++++++++ .../src/components/highlighted-code/index.ts | 1 + .../src/components/markdown-tag/index.jsx | 6 +- pnpm-lock.yaml | 27 ---- 9 files changed, 61 insertions(+), 257 deletions(-) delete mode 100755 apps/docs/src/components/code-block/code-block.scss delete mode 100755 apps/docs/src/components/code-block/index.tsx rename apps/docs/src/components/{code-block/code-theme.js => demo-block/code-theme.ts} (100%) create mode 100644 apps/docs/src/components/highlighted-code/HighlightedCode.tsx create mode 100644 apps/docs/src/components/highlighted-code/index.ts diff --git a/apps/docs/package.json b/apps/docs/package.json index 63b6c04b..44f04ab0 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -16,7 +16,6 @@ "codesandbox": "^2.2.3", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-live": "^4.1.0", "react-router-dom": "^6.0.0", "react-runner": "^1.0.5" }, diff --git a/apps/docs/src/components/code-block/code-block.scss b/apps/docs/src/components/code-block/code-block.scss deleted file mode 100755 index e9b3a2a4..00000000 --- a/apps/docs/src/components/code-block/code-block.scss +++ /dev/null @@ -1,90 +0,0 @@ -@use '../../variables' as *; - -.code-block { - &__container { - border-top: solid 1px var(--ty-color-border-secondary); - transition: 0.2s; - margin: 20px 0 0; - } - - &__previewer { - color: var(--ty-color-text-secondary); - padding: 24px; - overflow-x: auto; - - @media (max-width: $size-md) { - padding: 16px; - } - } - - &__editor-container { - background-color: var(--ty-color-fill); - border-top: solid 1px var(--ty-color-border-secondary); - padding: 15px; - overflow-x: scroll; - font-family: Menlo, Consolas, "Droid Sans Mono", monospace; - - .npm__react-simple-code-editor__textarea { - outline: none; - font-family: inherit; - } - } - - &__editor-wrapper { - max-width: 800px; - width: 100%; - } - - &__actions { - border-top: dashed 1px var(--ty-color-border-secondary); - height: 40px; - box-sizing: border-box; - background-color: var(--ty-color-bg-elevated); - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - display: flex; - align-items: center; - justify-content: center; - gap: 4px; - padding: 0 12px; - position: relative; - } - - &__action-btn { - display: inline-flex; - align-items: center; - justify-content: center; - width: 28px; - height: 28px; - border: none; - background: none; - color: var(--ty-color-text-tertiary); - cursor: pointer; - border-radius: 4px; - font-size: 15px; - transition: color 0.2s, background-color 0.2s; - padding: 0; - - &:hover { - color: var(--ty-color-primary); - background-color: var(--ty-color-fill); - } - } - - &__action-toggle { - display: inline-flex; - align-items: center; - color: var(--ty-color-text-tertiary); - cursor: pointer; - font-size: 12px; - padding: 4px 8px; - border-radius: 4px; - transition: color 0.2s, background-color 0.2s; - user-select: none; - - &:hover { - color: var(--ty-color-primary); - background-color: var(--ty-color-fill); - } - } -} diff --git a/apps/docs/src/components/code-block/index.tsx b/apps/docs/src/components/code-block/index.tsx deleted file mode 100755 index f1f1a9b4..00000000 --- a/apps/docs/src/components/code-block/index.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import React, { useRef, useState } from 'react'; -import './code-block.scss'; -import { Highlight, themes, Prism, type Language } from 'prism-react-renderer'; - -// Register bash/shell grammar (not included in prism-react-renderer's default bundle) -Prism.languages.bash = Prism.languages.shell = { - comment: { pattern: /(^|[^"{\\$])#.*/, lookbehind: true }, - 'shell-symbol': { pattern: /^\$(?=\s)/m, alias: 'punctuation' }, - string: [ - { pattern: /\$'(?:[^'\\]|\\[\s\S])*'/, greedy: true }, - { pattern: /(^|[^\\])"(?:[^"\\]|\\.)*"/, lookbehind: true, greedy: true }, - { pattern: /(^|[^\\])'[^']*'/, lookbehind: true, greedy: true }, - ], - variable: [/\$\{[^}]+\}/, /\$\([^)]+\)/, /\$(?:\w+|[!#?*@_])/], - keyword: - /\b(?:if|then|else|elif|fi|for|do|done|case|esac|while|until|function|in|select|return|exit)\b/, - function: - /\b(?:npm|npx|node|yarn|pnpm|bun|git|curl|wget|mkdir|cp|mv|rm|ls|cat|grep|sed|awk|chmod|chown|sudo|apt|brew|pip|python|ruby|go|cargo|make|docker|cd|echo|export|source|touch)\b/, - 'flag': { pattern: /(^|\s)--?[\w-]+/, lookbehind: true, alias: 'keyword' }, - number: /\b\d+\b/, - operator: /&&|\|\||[|;]/, - punctuation: /[{}[\]()]/, -}; -import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'; -import { LightCodeTheme, DarkCodeTheme } from './code-theme'; -import * as Components from '@tiny-design/react'; -import * as SvgIcons from '@tiny-design/icons'; -import CollapseTransition from '@tiny-design/react/collapse-transition'; -import { useTheme, Tooltip } from '@tiny-design/react'; -import { useLocaleContext } from '../../context/locale-context'; -import { openInStackBlitz, openInCodeSandbox } from '../../utils/sandbox'; - -type Props = { - children: string; - className?: string; - live?: boolean; -}; - -/** StackBlitz logo icon (inline SVG) */ -const StackBlitzIcon = () => ( - - - -); - -/** CodeSandbox logo icon (inline SVG) */ -const CodeSandboxIcon = () => ( - - - -); - -export const CodeBlock = ({ children, className, live }: Props): React.ReactElement => { - const [showCode, setShowCode] = useState(false); - const ref = useRef(null); - const { resolvedTheme } = useTheme(); - const { siteLocale: s } = useLocaleContext(); - const codeTheme = (resolvedTheme === 'dark' ? DarkCodeTheme : LightCodeTheme) as typeof themes.github; - - let language: Language = 'markup'; - if (className != null) { - language = className.replace(/language-/, '') as Language; - } - - if (live) { - const code = children.trim(); - - return ( -
- - - - -
-
- -
-
- -
- - - - - - - setShowCode(!showCode)}> - {showCode ? s.codeBlock.hideCode : s.codeBlock.showCode} - -
- -
- ); - } - return ( - - {({ className, style, tokens, getLineProps, getTokenProps }) => ( - 
-          
-            {tokens.map((line, i) => {
-              const { key: _lk, ...lineProps } = getLineProps({ line });
-              return (
-                

-                  {line.map((token, j) => {
-                    const { key: _tk, ...tokenProps } = getTokenProps({ token });
-                    return ;
-                  })}
-                

-              );
-            })}
-          
-
- )} - - ); -}; diff --git a/apps/docs/src/components/code-block/code-theme.js b/apps/docs/src/components/demo-block/code-theme.ts similarity index 100% rename from apps/docs/src/components/code-block/code-theme.js rename to apps/docs/src/components/demo-block/code-theme.ts diff --git a/apps/docs/src/components/demo-block/index.tsx b/apps/docs/src/components/demo-block/index.tsx index e9a5c34e..044d46c8 100644 --- a/apps/docs/src/components/demo-block/index.tsx +++ b/apps/docs/src/components/demo-block/index.tsx @@ -1,7 +1,7 @@ import React, { useState, useCallback, useRef } from 'react'; import { useRunner } from 'react-runner'; import { Highlight, themes } from 'prism-react-renderer'; -import { LightCodeTheme, DarkCodeTheme } from '../code-block/code-theme'; +import { LightCodeTheme, DarkCodeTheme } from './code-theme'; import * as TinyDesign from '@tiny-design/react'; import * as TinyIcons from '@tiny-design/icons'; import CollapseTransition from '@tiny-design/react/collapse-transition'; diff --git a/apps/docs/src/components/highlighted-code/HighlightedCode.tsx b/apps/docs/src/components/highlighted-code/HighlightedCode.tsx new file mode 100644 index 00000000..f2f8ecde --- /dev/null +++ b/apps/docs/src/components/highlighted-code/HighlightedCode.tsx @@ -0,0 +1,56 @@ +import { Highlight, Prism, PrismTheme } from 'prism-react-renderer'; +import { DarkCodeTheme, LightCodeTheme } from '../demo-block/code-theme'; +import { useTheme } from '@tiny-design/react'; + +// Register bash/shell grammar (not included in prism-react-renderer's default bundle) +Prism.languages.bash = Prism.languages.shell = { + comment: { pattern: /(^|[^"{\\$])#.*/, lookbehind: true }, + 'shell-symbol': { pattern: /^\$(?=\s)/m, alias: 'punctuation' }, + string: [ + { pattern: /\$'(?:[^'\\]|\\[\s\S])*'/, greedy: true }, + { pattern: /(^|[^\\])"(?:[^"\\]|\\.)*"/, lookbehind: true, greedy: true }, + { pattern: /(^|[^\\])'[^']*'/, lookbehind: true, greedy: true }, + ], + variable: [/\$\{[^}]+\}/, /\$\([^)]+\)/, /\$(?:\w+|[!#?*@_])/], + keyword: /\b(?:if|then|else|elif|fi|for|do|done|case|esac|while|until|function|in|select|return|exit)\b/, + function: + /\b(?:npm|npx|node|yarn|pnpm|bun|git|curl|wget|mkdir|cp|mv|rm|ls|cat|grep|sed|awk|chmod|chown|sudo|apt|brew|pip|python|ruby|go|cargo|make|docker|cd|echo|export|source|touch)\b/, + 'flag': { pattern: /(^|\s)--?[\w-]+/, lookbehind: true, alias: 'keyword' }, + number: /\b\d+\b/, + operator: /&&|\|\||[|;]/, + punctuation: /[{}[\]()]/, + }; + + export const HighlightedCode = ({ className, children }: { className: string, children: string }) => { + const { resolvedTheme } = useTheme(); + const codeTheme = resolvedTheme === 'dark' ? DarkCodeTheme : LightCodeTheme; + + let language = 'markup'; + if (className != null) { + language = className.replace(/language-/, ''); + } + + const code = String(children ?? '').trim(); + + return ( + + {({ className: preClassName, style, tokens, getLineProps, getTokenProps }) => ( + 
+            
+              {tokens.map((line, i) => {
+                const { key: _lk, ...lineProps } = getLineProps({ line });
+                return (
+                  

+                    {line.map((token, j) => {
+                      const { key: _tk, ...tokenProps } = getTokenProps({ token });
+                      return ;
+                    })}
+                  

+                );
+              })}
+            
+
+ )} + + ); + }; \ No newline at end of file diff --git a/apps/docs/src/components/highlighted-code/index.ts b/apps/docs/src/components/highlighted-code/index.ts new file mode 100644 index 00000000..70c2c9f7 --- /dev/null +++ b/apps/docs/src/components/highlighted-code/index.ts @@ -0,0 +1 @@ +export * from './HighlightedCode'; \ No newline at end of file diff --git a/apps/docs/src/components/markdown-tag/index.jsx b/apps/docs/src/components/markdown-tag/index.jsx index 77dc2257..53c5f63f 100755 --- a/apps/docs/src/components/markdown-tag/index.jsx +++ b/apps/docs/src/components/markdown-tag/index.jsx @@ -3,8 +3,8 @@ */ import React from 'react'; import './md-tag.scss'; -import { CodeBlock } from '../code-block'; import { DemoBlock } from '../demo-block'; +import { HighlightedCode } from '../highlighted-code'; const slugifyLink = (name) => { if (name.includes(' ')) { @@ -49,14 +49,14 @@ export const components = { const { className, children: code } = children.props; return (
- {code} + {code}
); } return
{children}
; }, code: ({ className, ...props }) => - className ? : , + className ? : , // Customised tags (PascalCase for MDX v3 provider resolution) Layout: (props) =>
, Column: (props) =>
, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b1e65667..86bf3d99 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -89,9 +89,6 @@ importers: react-dom: specifier: ^18.2.0 version: 18.3.1(react@18.3.1) - react-live: - specifier: ^4.1.0 - version: 4.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-router-dom: specifier: ^6.0.0 version: 6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -4225,13 +4222,6 @@ packages: react-is@18.3.1: resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==} - react-live@4.1.8: - resolution: {integrity: sha512-B2SgNqwPuS2ekqj4lcxi5TibEcjWkdVyYykBEUBshPAPDQ527x2zPEZg560n8egNtAjUpwXFQm7pcXV65aAYmg==} - engines: {node: '>= 0.12.0', npm: '>= 2.0.0'} - peerDependencies: - react: '>=18.0.0' - react-dom: '>=18.0.0' - react-refresh@0.18.0: resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==} engines: {node: '>=0.10.0'} @@ -5148,11 +5138,6 @@ packages: url-parse@1.5.10: resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==} - use-editable@2.3.3: - resolution: {integrity: sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==} - peerDependencies: - react: '>= 16.8.0' - util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} @@ -10230,14 +10215,6 @@ snapshots: react-is@18.3.1: {} - react-live@4.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - prism-react-renderer: 2.4.1(react@18.3.1) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - sucrase: 3.35.1 - use-editable: 2.3.3(react@18.3.1) - react-refresh@0.18.0: {} react-router-dom@6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1): @@ -11363,10 +11340,6 @@ snapshots: querystringify: 2.2.0 requires-port: 1.0.0 - use-editable@2.3.3(react@18.3.1): - dependencies: - react: 18.3.1 - util-deprecate@1.0.2: {} v8-to-istanbul@9.3.0: From 6f5888e885d876d0362ddbfaaa696cd59263f110 Mon Sep 17 00:00:00 2001 From: wangdicoder Date: Thu, 19 Mar 2026 09:20:47 +1100 Subject: [PATCH 3/4] fix: update Drawer doc --- packages/react/src/drawer/demo/Basic.tsx | 2 +- packages/react/src/drawer/demo/MultiLevel.tsx | 4 ++-- packages/react/src/drawer/demo/Placement.tsx | 2 +- packages/react/src/drawer/index.md | 2 +- packages/react/src/drawer/index.zh_CN.md | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react/src/drawer/demo/Basic.tsx b/packages/react/src/drawer/demo/Basic.tsx index 1dc04760..3e52d6d0 100644 --- a/packages/react/src/drawer/demo/Basic.tsx +++ b/packages/react/src/drawer/demo/Basic.tsx @@ -13,7 +13,7 @@ export default function BasicDemo() { header="Basic Drawer" placement="right" onClose={() => setVisible(false)} - open={visible} + visible={visible} >
Some contents...
Some contents...
diff --git a/packages/react/src/drawer/demo/MultiLevel.tsx b/packages/react/src/drawer/demo/MultiLevel.tsx index 5423a8fc..75f40c91 100644 --- a/packages/react/src/drawer/demo/MultiLevel.tsx +++ b/packages/react/src/drawer/demo/MultiLevel.tsx @@ -15,7 +15,7 @@ export default function MultiLevelDemo() { size={520} closable={false} onClose={() => setVisible(false)} - open={visible} + visible={visible} > - + ); } \ No newline at end of file