Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wangdicoder merged 5 commits into from
Mar 18, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
68dc4b8
feat: update code editor
wangdicoder Mar 18, 2026
fb40ee2
feat: convert demo files from .md to .tsx for editor support
wangdicoder Mar 18, 2026
cdffb5f
Merge remote-tracking branch 'origin/master' into docs-support-more-e…
wangdicoder Mar 18, 2026
68969d2
chore: lint
wangdicoder Mar 18, 2026
383321a
fix: update docs
wangdicoder Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
7 changes: 5 additions & 2 deletions apps/docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,17 @@
"preview": "vite preview"
},
"dependencies": {
"@mdx-js/react": "^3.1.1",
"@stackblitz/sdk": "^1.11.0",
"@tiny-design/icons": "workspace:*",
"@tiny-design/react": "workspace:*",
"@tiny-design/tokens": "workspace:*",
"@mdx-js/react": "^3.1.1",
"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-router-dom": "^6.0.0",
"react-runner": "^1.0.5"
},
"devDependencies": {
"@mdx-js/rollup": "^3.1.1",
Expand Down
43 changes: 38 additions & 5 deletions apps/docs/src/components/code-block/code-block.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,19 +35,52 @@
width: 100%;
}

&__controller {
&__actions {
border-top: dashed 1px var(--ty-color-border-secondary);
height: 36px;
line-height: 36px;
height: 40px;
box-sizing: border-box;
background-color: var(--ty-color-bg-elevated);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
text-align: center;
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;
transition: 0.2s;
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);
Expand Down
45 changes: 41 additions & 4 deletions apps/docs/src/components/code-block/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,30 @@ 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 } from '@tiny-design/react';
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 = () => (
<svg viewBox="0 0 28 28" width="1em" height="1em" fill="currentColor">
<path d="M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.672-10.227z" />
</svg>
);

/** CodeSandbox logo icon (inline SVG) */
const CodeSandboxIcon = () => (
<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
<path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.4 0.3L0 256v512l512 256 512-256V256L755 140.3zM512 59.2l205.3 115.5-205.3 115.5L306.7 174.7 512 59.2zM288 370.4V589l-224-112V265.8L288 370.4zm-224 263l224 112.4V962L64 850v-216.6zm256 226.8V632.5l224-112V291.7l224 111.7V633.4l-448 226.8zM960 589l-224 112V370.4l224-104.6V589z" />
</svg>
);

export const CodeBlock = ({ children, className, live }: Props): React.ReactElement => {
const [showCode, setShowCode] = useState(false);
const ref = useRef<HTMLDivElement | null>(null);
Expand All @@ -48,9 +63,11 @@ export const CodeBlock = ({ children, className, live }: Props): React.ReactElem
}

if (live) {
const code = children.trim();

return (
<div className="code-block__container" ref={ref}>
<LiveProvider code={children.trim()} theme={codeTheme} scope={{ ...Components, ...SvgIcons }}>
<LiveProvider code={code} theme={codeTheme} scope={{ ...Components, ...SvgIcons }}>
<LivePreview className="code-block__previewer" />
<LiveError />
<CollapseTransition isShow={showCode}>
Expand All @@ -64,8 +81,28 @@ export const CodeBlock = ({ children, className, live }: Props): React.ReactElem
</div>
</div>
</CollapseTransition>
<div className="code-block__controller" onClick={() => setShowCode(!showCode)}>
{showCode ? s.codeBlock.hideCode : s.codeBlock.showCode}
<div className="code-block__actions">
<Tooltip title={s.codeBlock.openInCodeSandbox}>
<button
className="code-block__action-btn"
onClick={() => openInCodeSandbox(code)}
aria-label={s.codeBlock.openInCodeSandbox}>
<CodeSandboxIcon />
</button>
</Tooltip>
<Tooltip title={s.codeBlock.openInStackBlitz}>
<button
className="code-block__action-btn"
onClick={() => openInStackBlitz(code)}
aria-label={s.codeBlock.openInStackBlitz}>
<StackBlitzIcon />
</button>
</Tooltip>
<span
className="code-block__action-toggle"
onClick={() => setShowCode(!showCode)}>
{showCode ? s.codeBlock.hideCode : s.codeBlock.showCode}
</span>
</div>
</LiveProvider>
</div>
Expand Down
136 changes: 136 additions & 0 deletions apps/docs/src/components/demo-block/demo-block.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
@use '../../variables' as *;

.demo-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;
}
}

&__error {
color: #e53e3e;
font-size: 13px;
padding: 12px;
margin: 0;
background-color: #fff5f5;
border-radius: 4px;
font-family: Menlo, Consolas, "Droid Sans Mono", monospace;
white-space: pre-wrap;
word-break: break-word;
}

&__editor-container {
background-color: var(--ty-color-fill);
border-top: solid 1px var(--ty-color-border-secondary);
overflow-x: auto;
font-family: Menlo, Consolas, "Droid Sans Mono", monospace;
font-size: 13px;
line-height: 1.6;
tab-size: 2;
}

&__editor-wrapper {
max-width: 800px;
width: 100%;
}

&__editor-overlay {
position: relative;

pre {
margin: 0;
pointer-events: none;
}
}

&__editor-textarea {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 15px;
margin: 0;
border: none;
outline: none;
resize: none;
overflow: hidden;
background: transparent;
color: transparent;
-webkit-text-fill-color: transparent;
caret-color: var(--ty-color-text-secondary, #000);
font-family: inherit;
font-size: inherit;
line-height: inherit;
tab-size: inherit;
white-space: pre;
box-sizing: border-box;

&::selection {
background: rgba(0, 0, 0, 0.15);
}
}

&__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);
}
}
}
Loading
Loading