kubesphere · donniean · Jun 12, 2024 · Jun 12, 2024
diff --git a/docs/lib/components/CodeBox/index.tsx b/docs/lib/components/CodeBox/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
 import { Language } from 'prism-react-renderer';
 import { LiveProvider } from 'react-live';
 import { mdx, MDXContext } from '@mdx-js/react';

diff --git a/docs/lib/components/CodeBox/use-code-demo.ts b/docs/lib/components/CodeBox/use-code-demo.ts
@@ -1,26 +1,4 @@
 import { get, cloneDeep } from 'lodash';
-import * as React from 'react';
-
-export const useCodeDemo = ({ scope, code: inputCode }) => {
-  let code = cloneDeep(inputCode?.trim());
-  let noInline = false;
-
-  const scopeKeys = Object.keys(scope);
-  const scopeValues = scopeKeys.map((key) => {
-    return { [key]: `${key}` };
-  });
-
-  // add 'React' to scopeValues
-  scopeValues.push({ React: 'React' });
-  // convert scopeValues to object
-  const imports = Object.assign({}, ...scopeValues);
-  code = transformCode(code, imports);
-  noInline = code.includes('render');
-  return {
-    code,
-    noInline,
-  };
-};
 
 const importRegex = /^(import)\s(?!type(of\s|\s)(?!from)).*?$/gm;
 const exportDefaultRegex = /export\s+default\s+function\s+\w+\s*\(\s*\)\s*\{/;
@@ -63,3 +41,24 @@ export const transformCode = (code: string, imports = {}, compName = 'App') => {
 
   return cleanedCode;
 };
+
+export const useCodeDemo = ({ scope, code: inputCode }) => {
+  let code = cloneDeep(inputCode?.trim());
+  let noInline = false;
+
+  const scopeKeys = Object.keys(scope);
+  const scopeValues = scopeKeys.map((key) => {
+    return { [key]: `${key}` };
+  });
+
+  // add 'React' to scopeValues
+  scopeValues.push({ React: 'React' });
+  // convert scopeValues to object
+  const imports = Object.assign({}, ...scopeValues);
+  code = transformCode(code, imports);
+  noInline = code.includes('render');
+  return {
+    code,
+    noInline,
+  };
+};
diff --git a/docs/lib/components/IconList/IconList.tsx b/docs/lib/components/IconList/IconList.tsx
@@ -1,7 +1,8 @@
+import * as React from 'react';
 import * as KubeIcon from '@kubed/icons';
 import styled from 'styled-components';
-import { Text, notify, Notify } from "@kubed/components";
-import { useClipboard } from "@kubed/hooks";
+import { Text, notify, Notify } from '@kubed/components';
+import { useClipboard } from '@kubed/hooks';
 
 const Content = styled.div`
   cursor: pointer;
@@ -17,30 +18,38 @@ const Content = styled.div`
 `;
 const GridContent = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fill, 90px);
+  grid-template-columns: repeat(auto-fill, 120px);
   grid-gap: 5px;
 `;
 
 const IconList = () => {
   const icons = Object.entries(KubeIcon);
-  const { copy } = useClipboard()
+  const { copy } = useClipboard();
   const renderIconList = () => {
     return icons.map((icon) => {
       const [iconName, Svg] = icon;
       return (
-        <Content key={iconName} onClick={() => {
-          const copyElement = `<${iconName}/>`
-          copy(copyElement)
-          notify.success(copyElement+ ' copied 🎉')
-        }}>
+        <Content
+          key={iconName}
+          onClick={() => {
+            const copyElement = `<${iconName}/>`;
+            copy(copyElement);
+            notify.success(`${copyElement} copied 🎉`);
+          }}
+        >
           <Svg size={48} />
           <Text>{iconName}</Text>
         </Content>
       );
     });
   };
 
-  return <GridContent>{renderIconList()}<Notify position="top-right" /></GridContent>;
+  return (
+    <GridContent>
+      {renderIconList()}
+      <Notify position="top-right" />
+    </GridContent>
+  );
 };
 
 export default IconList;
diff --git a/docs/lib/menuData.ts b/docs/lib/menuData.ts
@@ -1,76 +1,76 @@
 export default {
   guide: [
     {
-      title: "Getting Started",
-      menu: ["Introduction", "Installation", "Changelog"]
+      title: 'Getting Started',
+      menu: ['Introduction', 'Installation', 'Changelog'],
     },
     {
-      title: "Customization",
-      menu: ["Colors", "Themes"]
-    }
+      title: 'Customization',
+      menu: ['Colors', 'Themes'],
+    },
   ],
   Icons: [],
   components: [
     {
-      title: "Layout",
-      menu: ["Grid", "Group", "Divider", "Container", "Center"]
+      title: 'Layout',
+      menu: ['Grid', 'Group', 'Divider', 'Container', 'Center'],
     },
     {
-      title: "General",
-      menu: ["Button", "Text"]
+      title: 'General',
+      menu: ['Button', 'Text'],
     },
     {
-      title: "Data Entry",
+      title: 'Data Entry',
       menu: [
-        "Checkbox",
-        "DatePicker",
-        "AutoComplete",
-        "Input",
-        "InputNumber",
-        "Radio",
-        "Select",
-        "Slider",
-        "Switch"
-      ]
+        'Checkbox',
+        'DatePicker',
+        'AutoComplete',
+        'Input',
+        'InputNumber',
+        'Radio',
+        'Select',
+        'Slider',
+        'Switch',
+      ],
     },
     {
-      title: "Data Display",
+      title: 'Data Display',
       menu: [
-        "Badge",
-        "Card",
-        "Popover",
-        "Tabs",
-        "Tag",
-        "Tooltip",
-        "menu",
-        "Navs",
-        "Notify",
-        "Banner",
-        "Descriptions",
-        "Entity",
-        "Empty",
-        "Form",
-        "Dropdown",
-        "Table"
-      ]
+        'Badge',
+        'Card',
+        'Popover',
+        'Tabs',
+        'Tag',
+        'Tooltip',
+        'menu',
+        'Navs',
+        'Notify',
+        'Banner',
+        'Descriptions',
+        'Entity',
+        'Empty',
+        'Form',
+        'Dropdown',
+        'Table',
+      ],
     },
     {
-      title: "Feedback",
-      menu: ["Alert", "Loading", "LoadingOverlay", "Modal", "StatusDot"]
-    }
+      title: 'Feedback',
+      menu: ['Alert', 'Loading', 'LoadingOverlay', 'Modal', 'StatusDot'],
+    },
   ],
   hooks: [
     {
-      title: "State Management",
-      menu: ["useId", "useToggle"]
+      title: 'State Management',
+      menu: ['useId', 'useToggle'],
     },
     {
-      title: "UI and Dom",
-      menu: ["useClickOutside", "useScrollLock"]
+      title: 'UI and Dom',
+      menu: ['useClickOutside', 'useScrollLock'],
     },
     {
-      title: "Others",
-      menu: ["useClipboard", "useDidUpdate", "useForceUpdate"]
-    }
-  ]
+      title: 'Others',
+      menu: ['useClipboard', 'useDidUpdate', 'useForceUpdate'],
+    },
+  ],
 };
diff --git a/docs/pages/[category]/[slug].tsx b/docs/pages/[category]/[slug].tsx
@@ -1,19 +1,19 @@
-import React from "react";
-import Head from "next/head";
-import { MDXRemote } from "next-mdx-remote";
-import styled from "styled-components";
-import { Tabs, Tab } from "@kubed/components";
-import * as Kubed from "@kubed/components";
-import * as KubeIcon from "@kubed/icons";
-import * as KubeHooks from "@kubed/hooks";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import { getMdxData } from "../../lib/getMdx";
-import { DocLayout } from "../../lib/layouts/DocLayout";
-import MetadataCard from "../../lib/components/MetadataCard";
-import TOC from "../../lib/components/TOC";
-import CodeBox from "../../lib/components/CodeBox";
-import PropsTable from "../../lib/components/PropsTable";
-import IconList from "../../lib/components/IconList/IconList";
+import React from 'react';
+import Head from 'next/head';
+import { MDXRemote } from 'next-mdx-remote';
+import styled from 'styled-components';
+import { Tabs, Tab } from '@kubed/components';
+import * as Kubed from '@kubed/components';
+import * as KubeIcon from '@kubed/icons';
+import * as KubeHooks from '@kubed/hooks';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { getMdxData } from '../../lib/getMdx';
+import { DocLayout } from '../../lib/layouts/DocLayout';
+import MetadataCard from '../../lib/components/MetadataCard';
+import TOC from '../../lib/components/TOC';
+import CodeBox from '../../lib/components/CodeBox';
+import PropsTable from '../../lib/components/PropsTable';
+import IconList from '../../lib/components/IconList/IconList';
 
 const Pre = ({ children }: React.PropsWithChildren<any>) => <>{children}</>;
 
@@ -23,7 +23,7 @@ const components = {
   KubeIcon,
   pre: Pre,
   code: CodeBox,
-  IconList
+  IconList,
 };
 
 const MainContent = styled.div`
@@ -96,7 +96,7 @@ export default function Slug(props: any) {
       <Head>
         <title>{title} - Kube Design</title>
       </Head>
-      {group === "components" && (
+      {group === 'components' && (
         <>
           <MetadataCard
             title={title}
@@ -120,7 +120,7 @@ export default function Slug(props: any) {
           </Tabs>
         </>
       )}
-      {group === "hooks" && (
+      {group === 'hooks' && (
         <>
           <MetadataCard
             title={title}
@@ -137,7 +137,7 @@ export default function Slug(props: any) {
           </MainContent>
         </>
       )}
-      {group === "guide" && (
+      {group === 'guide' && (
         <>
           <MainContent>
             <Content>
@@ -147,7 +147,7 @@ export default function Slug(props: any) {
           </MainContent>
         </>
       )}
-      {group === "Icons" && (
+      {group === 'Icons' && (
         <>
           <MainContent>
             <Content>
@@ -173,7 +173,7 @@ export async function getServerSideProps({ params, locale }: Params) {
       toc,
       locale,
       metaData,
-      ...(await serverSideTranslations(locale, ["common", "menu"]))
-    }
+      ...(await serverSideTranslations(locale, ['common', 'menu'])),
+    },
   };
 }