From 7041ba0cea6e8715c323929b3dbc6e3efdbca551 Mon Sep 17 00:00:00 2001 From: Carrotzpc Date: Mon, 29 Jul 2024 20:13:40 +0800 Subject: [PATCH] fix(Previewer): add reset style for Typography of LobeUI --- example/src/Example/demos/Breadcrumb.tsx | 34 ++++++++++++++ example/src/Example/demos/CustomSize.tsx | 3 +- example/src/Example/demos/Table.tsx | 46 +++++++++++++++++++ example/src/Example/demos/index.tsx | 3 +- example/src/Example/index.md | 8 ++++ src/builtins/Previewer/index.tsx | 7 ++- src/builtins/Previewer/style-reset.ts | 58 ++++++++++++++++++++++++ src/builtins/Previewer/style.ts | 3 ++ src/layouts/DocLayout/GlobalStyle.ts | 29 +++++------- src/layouts/GlobalLayout.tsx | 32 +++++++------ 10 files changed, 189 insertions(+), 34 deletions(-) create mode 100644 example/src/Example/demos/Breadcrumb.tsx create mode 100644 example/src/Example/demos/Table.tsx create mode 100644 src/builtins/Previewer/style-reset.ts diff --git a/example/src/Example/demos/Breadcrumb.tsx b/example/src/Example/demos/Breadcrumb.tsx new file mode 100644 index 0000000..f2a2151 --- /dev/null +++ b/example/src/Example/demos/Breadcrumb.tsx @@ -0,0 +1,34 @@ +import { StoryBook, useControls, useCreateStore } from '@lobehub/ui'; +import type { BreadcrumbProps } from 'antd'; +import { Breadcrumb } from 'antd'; +import React from 'react'; + +const items = [ + { + path: '/apps', + title: 'Application List', + }, + { + path: '/detail/app-1', + title: 'Detail', + }, + { + path: '/versions', + title: 'Version', + }, +]; + +export default () => { + const store = useCreateStore(); + const control: BreadcrumbProps | any = useControls( + { + separator: '/', + }, + { store } + ); + return ( + + + + ); +}; diff --git a/example/src/Example/demos/CustomSize.tsx b/example/src/Example/demos/CustomSize.tsx index 3ff9d7c..24481a5 100644 --- a/example/src/Example/demos/CustomSize.tsx +++ b/example/src/Example/demos/CustomSize.tsx @@ -1,5 +1,6 @@ import { ActionIcon, ActionIconProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui'; import { Settings } from 'lucide-react'; +import React from 'react'; export default () => { const store = useCreateStore(); @@ -30,7 +31,7 @@ export default () => { value: 2, }, }, - { store }, + { store } ); return ( diff --git a/example/src/Example/demos/Table.tsx b/example/src/Example/demos/Table.tsx new file mode 100644 index 0000000..9256bd9 --- /dev/null +++ b/example/src/Example/demos/Table.tsx @@ -0,0 +1,46 @@ +import React from 'react'; + +export default () => { + return ( + + + + + + + + + + + +
+
+ 状态 + + + 已发布 + + +
+ 		+
+ 发布时间 + + 2024-07-29 19:44:30 + +
+
+
+ 创建者 + Luobo Zhang +
+ 		+
+ 更新时间 + + 2024-07-29 19:44:30 + +
+
+ ); +}; diff --git a/example/src/Example/demos/index.tsx b/example/src/Example/demos/index.tsx index 810a4dc..df8d3a7 100644 --- a/example/src/Example/demos/index.tsx +++ b/example/src/Example/demos/index.tsx @@ -1,6 +1,7 @@ import { ActionIcon, ActionIconProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui'; import { folder } from 'leva'; import * as LucideIcon from 'lucide-react'; +import React from 'react'; export default () => { const store = useCreateStore(); @@ -40,7 +41,7 @@ export default () => { title: '', }), }, - { store }, + { store } ); return ( diff --git a/example/src/Example/index.md b/example/src/Example/index.md index 8ac1158..1cb6f62 100644 --- a/example/src/Example/index.md +++ b/example/src/Example/index.md @@ -11,3 +11,11 @@ description: This is an doc example ## CustomSize + +## Breadcrumb + + + +## Table + + diff --git a/src/builtins/Previewer/index.tsx b/src/builtins/Previewer/index.tsx index 50bd47d..31cf726 100644 --- a/src/builtins/Previewer/index.tsx +++ b/src/builtins/Previewer/index.tsx @@ -1,3 +1,4 @@ +import { StyleProvider } from '@ant-design/cssinjs'; import { IPreviewerProps } from 'dumi/dist/client/theme-api/types'; import Previewer from 'dumi/theme-default/builtins/Previewer'; @@ -19,10 +20,12 @@ export default ({ center, codePlacement, nopadding, pure, ...props }: PreviewerP pure && styles.pure, center && styles.center, nopadding && styles.nopadding, - styles[codePlacement as 'left' | 'right' | 'top'], + styles[codePlacement as 'left' | 'right' | 'top'] )} > - + + + ); }; diff --git a/src/builtins/Previewer/style-reset.ts b/src/builtins/Previewer/style-reset.ts new file mode 100644 index 0000000..b1f3f39 --- /dev/null +++ b/src/builtins/Previewer/style-reset.ts @@ -0,0 +1,58 @@ +import { css } from 'antd-style'; + +export const resetStyle = css` + blockquote, + code, + h1, + h2, + h3, + h4, + h5, + h6, + hr, + img, + kbd, + p, + pre, + strong, + video { + all: unset; + } + + details { + all: unset; + + summary { + all: unset; + } + } + + a { + color: unset; + + &:hover { + color: unset; + } + } + + ol, + ul { + all: unset; + + & > li { + all: unset; + } + } + + table { + all: unset; + + code, + thead, + tr, + th, + td { + all: unset; + } + } +`; diff --git a/src/builtins/Previewer/style.ts b/src/builtins/Previewer/style.ts index d46753b..239cf17 100644 --- a/src/builtins/Previewer/style.ts +++ b/src/builtins/Previewer/style.ts @@ -1,6 +1,8 @@ import { createStyles } from 'antd-style'; import { rgba } from 'polished'; +import { resetStyle } from './style-reset'; + export const useStyles = createStyles(({ css, token, prefixCls }) => { return { center: css` @@ -11,6 +13,7 @@ export const useStyles = createStyles(({ css, token, prefixCls }) => { } `, container: css` + ${resetStyle} .dumi-default-previewer { overflow: hidden; display: flex; diff --git a/src/layouts/DocLayout/GlobalStyle.ts b/src/layouts/DocLayout/GlobalStyle.ts index 1efa850..78c2876 100644 --- a/src/layouts/DocLayout/GlobalStyle.ts +++ b/src/layouts/DocLayout/GlobalStyle.ts @@ -1,24 +1,19 @@ import { createGlobalStyle } from 'antd-style'; const GlobalStyle = createGlobalStyle` - -#nprogress { - .bar { - background: ${({ theme }) => theme.colorText}; - } - - .peg { - display: none !important; - } - - .spinner { - display: none; + #nprogress { + .bar { + background: ${({ theme }) => theme.colorText}; + } + + .peg { + display: none !important; + } + + .spinner { + display: none; + } } -} - - - - `; export default GlobalStyle; diff --git a/src/layouts/GlobalLayout.tsx b/src/layouts/GlobalLayout.tsx index aef9e6a..0147d99 100644 --- a/src/layouts/GlobalLayout.tsx +++ b/src/layouts/GlobalLayout.tsx @@ -6,13 +6,16 @@ import { logicalPropertiesLinter, parentSelectorLinter, } from '@ant-design/cssinjs'; -import { Outlet, useServerInsertedHTML } from 'dumi'; +import { App } from 'antd'; +import { useLocation, useOutlet, useServerInsertedHTML } from 'dumi'; import type { FC } from 'react'; import React from 'react'; import { useAdditionalThemeConfig } from '../hooks/useAdditionalThemeConfig'; const GlobalLayout: FC = () => { + const { pathname } = useLocation(); + const outlet = useOutlet(); const { ssr } = useAdditionalThemeConfig(); const [styleCache] = React.useState(() => createCache()); @@ -39,25 +42,28 @@ const GlobalLayout: FC = () => { ); }); - const BaseGlobalLayoutJSX = ( - <> - - - ); + const demoPage = pathname.startsWith('/~demos'); + + // ============================ Render ============================ + let content: React.ReactNode = outlet; + + // Demo page should not contain App component + if (!demoPage) { + content = {outlet}; + } - const SSRGlobalLayoutJSX = ( + if (ssr) { + (global as any).styleCache = styleCache; + } + + return ( - {BaseGlobalLayoutJSX} + {content} ); - if (ssr) { - (global as any).styleCache = styleCache; - return SSRGlobalLayoutJSX; - } - return BaseGlobalLayoutJSX; }; export default GlobalLayout;