Skip to content

Commit 82c685d

Browse files
xiejay97xiejay97
committed
chore(site): add codesandbox and stackblitz
1 parent 7bd740b commit 82c685d

66 files changed

Lines changed: 1832 additions & 276 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.eslintrc.json‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,6 @@
5555
},
5656
"warnOnUnassignedImports": true
5757
}
58-
],
59-
"react-hooks/exhaustive-deps": [
60-
"warn",
61-
{
62-
"additionalHooks": "(useIsomorphicLayoutEffect)"
63-
}
6458
]
6559
}
6660
},
@@ -101,6 +95,17 @@
10195
"jsdoc/require-jsdoc": "off"
10296
}
10397
},
98+
{
99+
"files": ["*.tsx", "*.jsx"],
100+
"rules": {
101+
"react-hooks/exhaustive-deps": [
102+
"warn",
103+
{
104+
"additionalHooks": "(useIsomorphicLayoutEffect)"
105+
}
106+
]
107+
}
108+
},
104109
{
105110
"files": ["**/*.md/*.ts", "**/*.md/*.tsx"],
106111
"rules": {

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@
3030
},
3131
"dependencies": {
3232
"@ant-design/icons-svg": "^4.2.1",
33+
"@stackblitz/sdk": "^1.8.0",
34+
"codesandbox": "^2.2.3",
3335
"core-js": "^3.24.1",
3436
"dayjs": "^1.11.5",
3537
"highlight.js": "^11.6.0",

‎packages/hooks/tsconfig.lib.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"compilerOptions": {
44
"outDir": "../../dist/out-tsc",
55
"declaration": true,
6-
"types": ["node", "react/next", "react-dom/next"]
6+
"types": ["node"]
77
},
88
"files": ["../../node_modules/@nrwl/react/typings/cssmodule.d.ts", "../../node_modules/@nrwl/react/typings/image.d.ts"],
99
"exclude": [

‎packages/hooks/tsconfig.spec.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"compilerOptions": {
44
"outDir": "../../dist/out-tsc",
55
"module": "commonjs",
6-
"types": ["jest", "node", "react/next", "react-dom/next", "@testing-library/jest-dom"]
6+
"types": ["jest", "node", "@testing-library/jest-dom"]
77
},
88
"include": [
99
"jest.config.ts",

‎packages/icons/tsconfig.lib.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"compilerOptions": {
44
"outDir": "../../dist/out-tsc",
55
"declaration": true,
6-
"types": ["node", "react/next", "react-dom/next"]
6+
"types": ["node"]
77
},
88
"files": ["../../node_modules/@nrwl/react/typings/cssmodule.d.ts", "../../node_modules/@nrwl/react/typings/image.d.ts"],
99
"exclude": [

‎packages/icons/tsconfig.spec.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"compilerOptions": {
44
"outDir": "../../dist/out-tsc",
55
"module": "commonjs",
6-
"types": ["jest", "node", "react/next", "react-dom/next", "@testing-library/jest-dom"]
6+
"types": ["jest", "node", "@testing-library/jest-dom"]
77
},
88
"include": [
99
"jest.config.ts",

‎packages/site/src/app/components/route/component/ComponentRouteArticle.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export function AppComponentRouteArticle(props: AppComponentRouteArticleProps) {
4141

4242
return (
4343
<AppRouteArticle links={links}>
44-
<h1 id="title" className="app-component-route-article__title">
44+
<h1 id="component-route-title" className="app-component-route-article__title">
4545
{title}
4646
{i18n.language !== 'en-US' && <span className="app-component-route-article__subtitle">{subtitle}</span>}
4747
</h1>
@@ -71,7 +71,7 @@ export function AppComponentRouteArticle(props: AppComponentRouteArticleProps) {
7171
</li>
7272
)}
7373
</ul>
74-
<h2 id="Examples" className="app-component-route-article__examples">
74+
<h2 id="component-route-examples" className="app-component-route-article__examples">
7575
{t('Examples')}
7676
</h2>
7777
<section className="app-component-route-article__demos" data-demo={title}>

‎packages/site/src/app/components/route/component/DemoBox.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { copy, getClassName } from '@react-devui/utils';
88

99
import marked, { toString } from '../utils';
1010
import './DemoBox.scss';
11+
import { openCodeSandbox, openStackBlitz } from './online-ide';
1112

1213
export interface AppDemoBoxProps {
1314
id: string;
@@ -102,10 +103,24 @@ ${'```'}
102103
</div>
103104
<div className="app-demo-box__toolbar">
104105
<DTooltip dTitle={t('Open in CodeSandbox')}>
105-
<CodeSandboxOutlined className="app-icon-button" dSize={18} />
106+
<CodeSandboxOutlined
107+
className="app-icon-button"
108+
dSize={18}
109+
onClick={() => {
110+
const el = document.getElementById('component-route-title');
111+
openCodeSandbox(`${el!.textContent!.match(/[a-zA-Z]+/)![0]}:${title}`, tsxSource, scssSource);
112+
}}
113+
/>
106114
</DTooltip>
107115
<DTooltip dTitle={t('Open in Stackblitz')}>
108-
<ThunderboltOutlined className="app-icon-button" dSize={18} />
116+
<ThunderboltOutlined
117+
className="app-icon-button"
118+
dSize={18}
119+
onClick={() => {
120+
const el = document.getElementById('component-route-title');
121+
openStackBlitz(`${el!.textContent!.match(/[a-zA-Z]+/)![0]}:${title}`, tsxSource, scssSource);
122+
}}
123+
/>
109124
</DTooltip>
110125
<DTooltip dTitle={copyCode ? t('Copied!') : t('Copy code')} afterVisibleChange={afterCopyTrige}>
111126
<div className="app-icon-button">

‎packages/site/src/app/components/route/component/online-ide/codesandbox.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { getParameters } from 'codesandbox/lib/api/define';
2+
3+
import AppTsx from './files/App.tsx';
4+
import packageJsonFn from './files/codesandbox/package.json';
5+
import tsconfigJson from './files/codesandbox/tsconfig.json';
6+
import indexHtml from './files/index.html';
7+
import indexTsx from './files/index.tsx';
8+
import stylesScss from './files/styles.scss';
9+
10+
export function openCodeSandbox(name: string, tsxSource: string, scssSource?: string) {
11+
const files: any = {
12+
'public/index.html': {
13+
content: indexHtml,
14+
},
15+
'src/App.tsx': {
16+
content: AppTsx,
17+
},
18+
'src/Demo.tsx': {
19+
content: tsxSource,
20+
},
21+
'src/index.tsx': {
22+
content: indexTsx,
23+
},
24+
'src/styles.scss': {
25+
content: stylesScss,
26+
},
27+
'package.json': {
28+
content: packageJsonFn(name),
29+
},
30+
'tsconfig.json': {
31+
content: tsconfigJson,
32+
},
33+
};
34+
if (scssSource) {
35+
files['src/styles.scss'] = {
36+
content: `${stylesScss}
37+
${scssSource}`,
38+
};
39+
}
40+
const parameters = getParameters({ files });
41+
42+
const form = document.createElement('form');
43+
const parametersInput = document.createElement('input');
44+
form.method = 'POST';
45+
form.action = 'https://codesandbox.io/api/v1/sandboxes/define?module=/src/Demo.tsx';
46+
form.target = '_blank';
47+
parametersInput.name = 'parameters';
48+
parametersInput.value = parameters;
49+
form.appendChild(parametersInput);
50+
document.body.append(form);
51+
form.submit();
52+
document.body.removeChild(form);
53+
}

‎packages/site/src/app/components/route/component/online-ide/files/App.tsx.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export default `import type { DConfigContextData } from "@react-devui/ui/hooks/d-config";
2+
3+
import { useMemo } from "react";
4+
5+
import { DRoot } from "@react-devui/ui";
6+
7+
import Demo from "./Demo";
8+
import "./styles.scss";
9+
10+
export default function App() {
11+
const rootContext = useMemo<DConfigContextData>(
12+
() => ({
13+
layout: { scrollEl: "main", resizeEl: "article" }
14+
}),
15+
[]
16+
);
17+
18+
return (
19+
<DRoot dContext={rootContext}>
20+
<main>
21+
<article>
22+
<Demo />
23+
</article>
24+
</main>
25+
</DRoot>
26+
);
27+
}
28+
`;

0 commit comments

Comments
 (0)