fix: add Icon docs

51wangping · May 15, 2024 · 3a35bbb · 3a35bbb
1 parent 5ff24e8
commit 3a35bbb
Show file tree

Hide file tree

Showing 13 changed files with 143 additions and 24 deletions.
diff --git a/.changeset/blue-llamas-remember.md b/.changeset/blue-llamas-remember.md
@@ -0,0 +1,5 @@
+---
+'kubed-documents': minor
+---
+
+fix: add Icon docs
diff --git a/docs/docs/en/Icons/Icons.mdx b/docs/docs/en/Icons/Icons.mdx
@@ -0,0 +1,20 @@
+---
+group: 'Icons'
+title: Icons
+description: Semantic vector graphics
+order: 1
+---
+
+# Icon
+Semantic vector graphics.
+
+# Instructions
+To use icon components, you need to install the @kubed/icons icon component package
+
+``` bash
+npm install @kubed/icons
+```
+
+# Icon list
+
+<IconList/>
diff --git a/docs/docs/zh/Icons/Icons.mdx b/docs/docs/zh/Icons/Icons.mdx
@@ -0,0 +1,20 @@
+---
+group: 'Icons'
+title: Icons
+description: 语义化的矢量图形
+order: 1
+---
+
+# Icon 图标
+语义化的矢量图形。
+
+# 使用方法
+使用图标组件，你需要安装 @kubed/icons 图标组件包
+
+``` bash
+npm install @kubed/icons
+```
+
+# 图标列表
+
+<IconList/>
diff --git a/docs/lib/components/CodeBox/CodeEditor.tsx b/docs/lib/components/CodeBox/CodeEditor.tsx
@@ -18,7 +18,7 @@ interface StateProps {
 
 const EditorContainer = styled.div`
   padding: 20px 20px 20px 10px;
-  background-color: rgba(248, 249, 250, 0.65);
+  background-color: ${({ theme }) => theme.palette.accents_1};
   border: 1px solid ${({ theme }) => theme.palette.accents_2};
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;

diff --git a/docs/lib/components/IconList/IconList.tsx b/docs/lib/components/IconList/IconList.tsx
@@ -0,0 +1,46 @@
+import * as KubeIcon from '@kubed/icons';
+import styled from 'styled-components';
+import { Text, notify, Notify } from "@kubed/components";
+import { useClipboard } from "@kubed/hooks";
+
+const Content = styled.div`
+  cursor: pointer;
+  width: 100px;
+  height: 90px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.accents_1};
+  }
+`;
+const GridContent = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 90px);
+  grid-gap: 5px;
+`;
+
+const IconList = () => {
+  const icons = Object.entries(KubeIcon);
+  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 🎉')
+        }}>
+          <Svg size={48} />
+          <Text>{iconName}</Text>
+        </Content>
+      );
+    });
+  };
+
+  return <GridContent>{renderIconList()}<Notify position="top-right" /></GridContent>;
+};
+
+export default IconList;
diff --git a/docs/lib/components/MetadataCard/index.tsx b/docs/lib/components/MetadataCard/index.tsx
@@ -55,7 +55,7 @@ const List = styled.div`
   }
 `;
 
-const REPO_BASE = 'https://github.com/chenz24/kube-design/blob/master';
+const REPO_BASE = 'https://github.com/kubesphere/kube-design/blob/next';
 const DOCS_BASE = `${REPO_BASE}/docs/docs`;
 const SOURCE_BASE = `${REPO_BASE}/packages`;
 

diff --git a/docs/lib/layouts/DocLayout/index.tsx b/docs/lib/layouts/DocLayout/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
+import { isEmpty } from 'lodash';
 import TopBar from '../TopBar';
 import SideMenu from '../../components/SideMenu';
 import menuData from '../../menuData';
@@ -68,22 +69,26 @@ export function DocLayout({ children, category, slug }: DocLayoutProps) {
     <BodyWrapper>
       <TopBar isHome={false} isScroll={isScroll} />
       <MainSection>
-        <SideBar>
-          <SideBarInner isScroll={isScroll}>
-            {categoryMenu.map((item) => {
-              return (
-                <SideMenu
-                  title={item.title}
-                  category={category}
-                  menu={item.menu}
-                  key={item.title}
-                  slug={slug}
-                />
-              );
-            })}
-          </SideBarInner>
-        </SideBar>
-        <SideShadow />
+        {!isEmpty(categoryMenu) && (
+          <>
+            <SideBar>
+              <SideBarInner isScroll={isScroll}>
+                {categoryMenu.map((item) => {
+                  return (
+                    <SideMenu
+                      title={item.title}
+                      category={category}
+                      menu={item.menu}
+                      key={item.title}
+                      slug={slug}
+                    />
+                  );
+                })}
+              </SideBarInner>
+            </SideBar>
+            <SideShadow />
+          </>
+        )}
         <MainContent>{children}</MainContent>
       </MainSection>
     </BodyWrapper>

diff --git a/docs/lib/layouts/TopBar/index.tsx b/docs/lib/layouts/TopBar/index.tsx
@@ -86,6 +86,7 @@ const menus = [
   { label: 'Guide', value: 'guide' },
   { label: 'Components', value: 'components' },
   // { label: 'Hooks', value: 'hooks' },
+  { label: 'Icons', value: 'Icons' },
 ];
 
 interface TopBarProps {

diff --git a/docs/lib/menuData.ts b/docs/lib/menuData.ts
@@ -9,18 +9,15 @@ export default {
       menu: ['Colors', 'Themes'],
     },
   ],
+  Icons: [],
   components: [
     {
       title: 'Layout',
       menu: ['Grid', 'Group', 'Divider', 'Container', 'Center'],
     },
     {
       title: 'General',
-      menu: [
-        'Button',
-        'Text',
-        // 'Icon'
-      ],
+      menu: ['Button', 'Text'],
     },
     {
       title: 'Data Entry',

diff --git a/docs/next.config.js b/docs/next.config.js
@@ -28,6 +28,11 @@ module.exports = withPlugins([withTM], {
         permanent: true,
         destination: '/hooks/use-id',
       },
+      {
+        source: '/Icons',
+        permanent: true,
+        destination: '/Icons/Icons',
+      },
     ];
   },
 });
diff --git a/docs/pages/[category]/[slug].tsx b/docs/pages/[category]/[slug].tsx
@@ -12,6 +12,7 @@ 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}</>;
 
@@ -20,6 +21,7 @@ const components = {
   KubeIcon,
   pre: Pre,
   code: CodeBox,
+  IconList,
 };
 
 const MainContent = styled.div`
@@ -115,7 +117,13 @@ export default function Slug(props: any) {
       )}
       {group === 'hooks' && (
         <>
-          <MetadataCard title={title} description={description} group={group} imports={imports} />
+          <MetadataCard
+            title={title}
+            description={description}
+            group={group}
+            imports={imports}
+            locale={props.locale}
+          />
           <MainContent>
             <Content>
               <MDXRemote {...props.source} components={components} />
@@ -134,6 +142,16 @@ export default function Slug(props: any) {
           </MainContent>
         </>
       )}
+      {group === 'Icons' && (
+        <>
+          <MainContent>
+            <Content>
+              <MDXRemote {...props.source} components={components} />
+            </Content>
+            <TOC headings={props.toc} withTabs />
+          </MainContent>
+        </>
+      )}
     </DocLayout>
   );
 }

diff --git a/docs/public/locales/en/menu.json b/docs/public/locales/en/menu.json
@@ -15,6 +15,7 @@
   "General": "General",
   "Button": "Button",
   "Text": "Text",
+  "Icon": "Icon",
   "Data Entry": "Data Entry",
   "Checkbox": "Checkbox",
   "DatePicker": "DatePicker",

diff --git a/docs/public/locales/zh/menu.json b/docs/public/locales/zh/menu.json
@@ -15,6 +15,7 @@
   "General": "常规",
   "Button": "Button 按钮",
   "Text": "Text 文本",
+  "Icon": "Icon 图标",
   "Data Entry": "信息录入",
   "Checkbox": "Checkbox 复选框",
   "DatePicker": "DatePicker 时间选择框",