fix(Previewer): add reset style for Typography of LobeUI

yuntijs · Jul 29, 2024 · 7041ba0 · 7041ba0
1 parent fd33163
commit 7041ba0
Show file tree

Hide file tree

Showing 10 changed files with 189 additions and 34 deletions.
diff --git a/example/src/Example/demos/Breadcrumb.tsx 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 (
+    <StoryBook levaStore={store}>
+      <Breadcrumb {...control} items={items} />
+    </StoryBook>
+  );
+};
diff --git 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
@@ -0,0 +1,46 @@
+import React from 'react';
+
+export default () => {
+  return (
+    <table>
+      <tbody>
+        <tr>
+          <td>
+            <div>
+              <span>状态</span>
+              <span>
+                <span>
+                  <span>已发布</span>
+                </span>
+              </span>
+            </div>
+          </td>
+          <td>
+            <div>
+              <span>发布时间</span>
+              <span>
+                <span>2024-07-29 19:44:30</span>
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <div>
+              <span>创建者</span>
+              <span>Luobo Zhang</span>
+            </div>
+          </td>
+          <td>
+            <div>
+              <span>更新时间</span>
+              <span>
+                <span>2024-07-29 19:44:30</span>
+              </span>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
diff --git 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
@@ -11,3 +11,11 @@ description: This is an doc example
 ## CustomSize
 
 <code src="./demos/CustomSize.tsx" nopadding></code>
+
+## Breadcrumb
+
+<code src="./demos/Breadcrumb.tsx" nopadding></code>
+
+## Table
+
+<code src="./demos/Table.tsx" center></code>
diff --git 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']
       )}
     >
-      <Previewer {...props} />
+      <StyleProvider hashPriority="high">
+        <Previewer {...props} />
+      </StyleProvider>
     </div>
   );
 };
diff --git a/src/builtins/Previewer/style-reset.ts 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
@@ -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
@@ -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
@@ -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 = (
-    <>
-      <Outlet />
-    </>
-  );
+  const demoPage = pathname.startsWith('/~demos');
+
+  // ============================ Render ============================
+  let content: React.ReactNode = outlet;
+
+  // Demo page should not contain App component
+  if (!demoPage) {
+    content = <App>{outlet}</App>;
+  }
 
-  const SSRGlobalLayoutJSX = (
+  if (ssr) {
+    (global as any).styleCache = styleCache;
+  }
+
+  return (
     <StyleProvider
       cache={styleCache}
       linters={[logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter]}
     >
-      {BaseGlobalLayoutJSX}
+      {content}
     </StyleProvider>
   );
-  if (ssr) {
-    (global as any).styleCache = styleCache;
-    return SSRGlobalLayoutJSX;
-  }
-  return BaseGlobalLayoutJSX;
 };
 
 export default GlobalLayout;