Skip to content

Commit

Permalink
Merge branch 'feature' into feat-cp-rangepicker
Browse files Browse the repository at this point in the history
  • Loading branch information
li-jia-nan committed Oct 23, 2023
2 parents 2567579 + 2940f62 commit 63df2a5
Show file tree
Hide file tree
Showing 28 changed files with 230 additions and 143 deletions.
2 changes: 1 addition & 1 deletion .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ version: 2.1
jobs:
test-argos-ci:
docker:
- image: cimg/node:18.18-browsers
- image: cimg/node:21.0-browsers
environment:
NODE_OPTIONS: --openssl-legacy-provider
steps:
Expand Down
2 changes: 0 additions & 2 deletions .dumi/pages/index/components/Group.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@ export const GroupMask: React.FC<GroupMaskProps> = (props) => {
? {}
: {
position: 'relative',
background: `rgba(255, 255, 255, 0.1)`,
backdropFilter: `blur(25px)`,
zIndex: 1,
};

Expand Down
13 changes: 9 additions & 4 deletions .dumi/pages/index/components/PreviewBanner/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { Suspense } from 'react';
import { Button, ConfigProvider, Space, Typography } from 'antd';
import { createStyles, useTheme } from 'antd-style';
import { Link, useLocation } from 'dumi';
Expand All @@ -7,9 +7,10 @@ import useLocale from '../../../../hooks/useLocale';
import SiteContext from '../../../../theme/slots/SiteContext';
import * as utils from '../../../../theme/utils';
import { GroupMask } from '../Group';
import ComponentsBlock from './ComponentsBlock';
import useMouseTransform from './useMouseTransform';

const ComponentsBlock = React.lazy(() => import('./ComponentsBlock'));

const locales = {
cn: {
slogan: '助力设计开发者「更灵活」地搭建出「更美」的产品,让用户「快乐工作」~',
Expand All @@ -34,7 +35,7 @@ const useStyle = () => {
const mask = cx(css`
position: absolute;
inset: 0;
backdrop-filter: blur(2.5px);
backdrop-filter: blur(4px);
transition: all 1s ease;
`);

Expand All @@ -48,6 +49,8 @@ const useStyle = () => {
position: relative;
overflow: hidden;
perspective: 800px;
/* fix safari bug by removing blur style */
transform: translateZ(1000px);
row-gap: ${token.marginXL}px;
&:hover .${mask} {
Expand Down Expand Up @@ -129,7 +132,9 @@ const PreviewBanner: React.FC<PreviewBannerProps> = (props) => {

<div className={styles.holder}>
{/* Mobile not show the component preview */}
{!isMobile && <ComponentsBlock className={styles.block} style={componentsBlockStyle} />}
<Suspense fallback={null}>
{!isMobile && <ComponentsBlock className={styles.block} style={componentsBlockStyle} />}
</Suspense>
<div className={styles.mask} />

<Typography className={styles.typography}>
Expand Down
23 changes: 15 additions & 8 deletions .dumi/pages/index/index.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import React from 'react';
import React, { Suspense } from 'react';
import { ConfigProvider, theme } from 'antd';
import { createStyles, css } from 'antd-style';

import useDark from '../../hooks/useDark';
import useLocale from '../../hooks/useLocale';
// import BannerRecommends, { BannerRecommendsFallback } from './components/BannerRecommends';
import ComponentsList from './components/ComponentsList';
import DesignFramework from './components/DesignFramework';
import Group from './components/Group';
import PreviewBanner from './components/PreviewBanner';
import Theme from './components/Theme';
import Group from './components/Group';

const ComponentsList = React.lazy(() => import('./components/ComponentsList'));
const DesignFramework = React.lazy(() => import('./components/DesignFramework'));
const Theme = React.lazy(() => import('./components/Theme'));

const useStyle = createStyles(() => ({
image: css`
Expand Down Expand Up @@ -58,7 +59,9 @@ const Homepage: React.FC = () => {
algorithm: theme.defaultAlgorithm,
}}
>
<Theme />
<Suspense fallback={null}>
<Theme />
</Suspense>
</ConfigProvider>

{/* 组件列表 */}
Expand All @@ -69,7 +72,9 @@ const Homepage: React.FC = () => {
description={locale.assetsDesc}
id="design"
>
<ComponentsList />
<Suspense fallback={null}>
<ComponentsList />
</Suspense>
</Group>

{/* 设计语言 */}
Expand All @@ -85,7 +90,9 @@ const Homepage: React.FC = () => {
/>
}
>
<DesignFramework />
<Suspense fallback={null}>
<DesignFramework />
</Suspense>
</Group>
</div>
</section>
Expand Down
15 changes: 11 additions & 4 deletions .dumi/theme/builtins/Previewer/CodePreviewer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import stackblitzSdk from '@stackblitz/sdk';
import { Alert, Badge, Space, Tooltip } from 'antd';
import { createStyles, css } from 'antd-style';
import classNames from 'classnames';
import { FormattedMessage, useSiteData } from 'dumi';
import { FormattedMessage, useSiteData, LiveContext } from 'dumi';
import LZString from 'lz-string';

import type { AntdPreviewerProps } from './Previewer';
Expand All @@ -21,6 +21,7 @@ import RiddleIcon from '../../common/RiddleIcon';
import type { SiteContextProps } from '../../slots/SiteContext';
import SiteContext from '../../slots/SiteContext';
import { ping } from '../../utils';
import LiveDemo from 'dumi/theme-default/slots/LiveDemo';

const { ErrorBoundary } = Alert;

Expand Down Expand Up @@ -107,6 +108,8 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
const { pkg } = useSiteData();
const location = useLocation();

const { enabled: liveEnabled } = useContext(LiveContext);

const { styles } = useStyle();

const entryCode = asset.dependencies['index.tsx'].value;
Expand Down Expand Up @@ -363,9 +366,13 @@ createRoot(document.getElementById('container')).render(<Demo />);
const codeBox: React.ReactNode = (
<section className={codeBoxClass} id={asset.id}>
<section className="code-box-demo" style={codeBoxDemoStyle}>
<ErrorBoundary>
<React.StrictMode>{liveDemo.current}</React.StrictMode>
</ErrorBoundary>
{!liveEnabled ? (
<ErrorBoundary>
<React.StrictMode>{liveDemo.current}</React.StrictMode>
</ErrorBoundary>
) : (
<LiveDemo />
)}
</section>
<section className="code-box-meta markdown">
<div className="code-box-title">
Expand Down
20 changes: 18 additions & 2 deletions .dumi/theme/builtins/Previewer/Previewer.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import type { IPreviewerProps } from 'dumi';
import { useTabMeta } from 'dumi';
import { LiveProvider, useTabMeta } from 'dumi';

import CodePreviewer from './CodePreviewer';
import DesignPreviewer from './DesignPreviewer';
Expand All @@ -16,7 +16,23 @@ const Previewer: React.FC<AntdPreviewerProps> = (props) => {
return <DesignPreviewer {...props} />;
}

return <CodePreviewer {...props} />;
const codePreviewer = <CodePreviewer {...props} />;

if (props.live === false || props.iframe) {
return codePreviewer;
}

return (
<LiveProvider
initialCode={
Object.entries(props.asset.dependencies).filter(([, { type }]) => type === 'FILE')[0][1]
.value
}
demoId={props.asset.id}
>
{codePreviewer}
</LiveProvider>
);
};

export default Previewer;
39 changes: 26 additions & 13 deletions .dumi/theme/common/CodePreview.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
import React, { useEffect, useMemo } from 'react';
import { Tabs, Typography, Button } from 'antd';
import { Button, Tabs, Typography } from 'antd';
import { createStyles } from 'antd-style';
import { LiveContext } from 'dumi';
import toReactElement from 'jsonml-to-react-element';
import JsonML from 'jsonml.js/lib/utils';
import Prism from 'prismjs';
import { createStyles } from 'antd-style';
import React, { useContext, useEffect, useMemo } from 'react';
import LiveCode from './LiveCode';

const useStyle = createStyles(({ token, css }) => {
const { colorIcon, colorBgTextHover, antCls } = token;

return {
code: css`
position: relative;
margin-top: -16px;
`,

copyButton: css`
color: ${colorIcon};
position: absolute;
top: 0;
top: 16px;
inset-inline-end: 16px;
width: 32px;
text-align: center;
Expand Down Expand Up @@ -110,14 +113,20 @@ const CodePreview: React.FC<CodePreviewProps> = ({

const { styles } = useStyle();

const { enabled: liveEnabled } = useContext(LiveContext);

const items = useMemo(
() =>
langList.map((lang: keyof typeof LANGS) => ({
label: LANGS[lang],
key: lang,
children: (
<div className={styles.code}>
{toReactComponent(['pre', { lang, highlighted: highlightedCodes[lang] }])}
{lang === 'tsx' && liveEnabled ? (
<LiveCode />
) : (
toReactComponent(['pre', { lang, highlighted: highlightedCodes[lang] }])
)}
<Button type="text" className={styles.copyButton}>
<Typography.Text className={styles.copyIcon} copyable={{ text: sourceCodes[lang] }} />
</Button>
Expand All @@ -132,14 +141,18 @@ const CodePreview: React.FC<CodePreviewProps> = ({
}

if (langList.length === 1) {
return toReactComponent([
'pre',
{
lang: langList[0],
highlighted: highlightedCodes[langList[0] as keyof typeof LANGS],
className: 'highlight',
},
]);
return liveEnabled ? (
<LiveCode />
) : (
toReactComponent([
'pre',
{
lang: langList[0],
highlighted: highlightedCodes[langList[0] as keyof typeof LANGS],
className: 'highlight',
},
])
);
}

return <Tabs centered className="highlight" onChange={onCodeTypeChange} items={items} />;
Expand Down
85 changes: 85 additions & 0 deletions .dumi/theme/common/LiveCode.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import type { FC } from 'react';
import React, { useEffect, useState } from 'react';
import { createStyles } from 'antd-style';
import LiveEditor from '../slots/LiveEditor';
import LiveError from '../slots/LiveError';
import { EditFilled } from '@ant-design/icons';
import { Tooltip } from 'antd';
import useLocale from '../../hooks/useLocale';

const useStyle = createStyles(({ token, css }) => {
const { colorPrimaryBorder, colorIcon, colorPrimary } = token;

return {
editor: css`
.npm__react-simple-code-editor__textarea {
outline: none;
&:hover {
border: 1px solid ${colorPrimaryBorder} !important;
}
&:focus {
border: 1px solid ${colorPrimary} !important;
}
}
`,

editableIcon: css`
position: absolute;
height: 32px;
width: 32px;
display: flex;
align-items: center;
justify-content: center;
top: 16px;
inset-inline-end: 56px;
color: ${colorIcon};
`,
};
});

const locales = {
cn: {
demoEditable: '编辑 Demo 可实时预览',
},
en: {
demoEditable: 'Edit demo with real-time preview',
},
};

const HIDE_LIVE_DEMO_TIP = 'hide-live-demo-tip';

const LiveCode: FC = () => {
const [open, setOpen] = useState(false);
const { styles } = useStyle();
const [locale] = useLocale(locales);

useEffect(() => {
const shouldOpen = !localStorage.getItem(HIDE_LIVE_DEMO_TIP);
if (shouldOpen) {
setOpen(true);
}
}, []);

const handleOpenChange = (newOpen: boolean) => {
setOpen(newOpen);
if (!newOpen) {
localStorage.setItem(HIDE_LIVE_DEMO_TIP, 'true');
}
};

return (
<>
<div className={styles.editor}>
<LiveEditor />
<LiveError />
</div>
<Tooltip title={locale.demoEditable} open={open} onOpenChange={handleOpenChange}>
<EditFilled className={styles.editableIcon} />
</Tooltip>
</>
);
};

export default LiveCode;
1 change: 0 additions & 1 deletion .dumi/theme/common/styles/Demo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,6 @@ const GlobalDemoStyles: React.FC = () => {
border: none;
box-shadow: unset;
padding: 12px 16px;
margin-top: -16px;
font-size: 13px;
}
}
Expand Down
21 changes: 21 additions & 0 deletions .dumi/theme/slots/LiveEditor/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import type { FC } from 'react';
import React from 'react';
import DumiLiveEditor from 'dumi/theme-default/slots/LiveEditor';

const LiveEditor: FC = () => (
<DumiLiveEditor
style={{
fontSize: 13,
lineHeight: 2,
fontFamily: `'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace`,
}}
padding={{
top: 12,
right: 16,
bottom: 12,
left: 16,
}}
/>
);

export default LiveEditor;

0 comments on commit 63df2a5

Please sign in to comment.