Merge pull request #47 from Pivot-Studio/feature-component-router

组件路由分离

package.json

@@ -11,15 +11,16 @@
     "packages/*"
   ],
   "devDependencies": {
-    "@commitlint/cli": "^17.3.0",
-    "@commitlint/config-conventional": "^17.3.0",
-    "eslint-config-psfe": "1.0.5",
-    "husky": "^8.0.2",
     "@babel/core": "^7.19.1",
     "@babel/helper-plugin-utils": "^7.20.2",
     "@babel/parser": "^7.21.2",
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
     "babel-plugin-jsx": "^1.2.0",
-    "es-dirname": "^0.1.0"
+    "es-dirname": "^0.1.0",
+    "eslint-config-psfe": "1.0.5",
+    "@typescript-eslint/parser": "^6.4.1",
+    "husky": "^8.0.2"
   },
   "dependencies": {
     "core-js": "^3.25.1",

packages/demo/.eslintrc

@@ -7,5 +7,9 @@
         "extensions": [".tsx", ".ts"]
       }
     }
+  },
+  "rules": {
+    "import/extensions": 0,
+    "import/no-unresolved": 0
   }
 }

packages/demo/index.scss

@@ -3,6 +3,10 @@
   margin: 0;
 }
 
+a {
+  text-decoration: none;
+  color: inherit;
+}
 body,
 html,
 #root {

packages/demo/mdx.d.ts

@@ -3,3 +3,8 @@ declare module '*.mdx' {
   let MDXComponent: (props: any) => React.ReactElement;
   export default MDXComponent;
 }
+
+declare module '*.mdx?code' {
+  const content: string;
+  export default content;
+}

packages/demo/src/pages/components/button.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button } from 'pivot-design';
+import ButtonMdx from '@/components/Button/index.mdx';
+import CodeBlock from '@/components/_CodeBlock/codeBlock';
+import { list } from '@/components/Button/.catalog';
+import { renderCatalog } from '@/utils';
+
+const ButtonPage: React.FC = () => {
+  return (
+    <>
+      <ButtonMdx components={{ Button, CodeBlock }} />
+      <div className="demo-component-catalogue">
+        {renderCatalog(list)}
+        {/* {select === 'Draggable' && renderCatalog(DraggableList)}
+  {select === 'Button' && renderCatalog(ButtonList)}
+  {select === 'Card' && renderCatalog(CardList)}
+  {select === 'Skeleton' && renderCatalog(SkeletonList)}
+  {select === 'Popover' && renderCatalog(PopoverList)}
+  {select === 'Input' && renderCatalog(InputList)}
+  {select === 'Icon' && renderCatalog(IconList)}
+  {select === 'Transition' && renderCatalog(TransitionList)} */}
+      </div>
+    </>
+  );
+};
+export default ButtonPage;

packages/demo/src/pages/components/card.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Card } from 'pivot-design';
+import CardMdx from '@/components/Card/index.mdx';
+import CodeBlock from '@/components/_CodeBlock/codeBlock';
+import { list } from '@/components/Card/.catalog';
+import { renderCatalog } from '@/utils';
+const CardPage: React.FC = () => {
+  return (
+    <>
+      <CardMdx components={{ Card, CodeBlock }} />
+      <div className="demo-component-catalogue">{renderCatalog(list)}</div>
+    </>
+  );
+};
+export default CardPage;

packages/demo/src/pages/components/draggable.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import DraggableMdx from '@/components/Draggable/index.mdx';
+import CodeBlock from '@/components/_CodeBlock/codeBlock';
+import { list } from '@/components/Draggable/.catalog';
+import { renderCatalog } from '@/utils';
+const DraggablePage: React.FC = () => {
+  return (
+    <>
+      <DraggableMdx components={{ CodeBlock }} />
+      <div className="demo-component-catalogue">{renderCatalog(list)}</div>
+    </>
+  );
+};
+export default DraggablePage;

packages/demo/src/pages/components/icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Icon } from 'pivot-design';
+import IconMdx from '@/components/Icon/index.mdx';
+import CodeBlock from '@/components/_CodeBlock/codeBlock';
+import { list } from '@/components/Icon/.catalog';
+import { renderCatalog } from '@/utils';
+
+const IconPage: React.FC = () => {
+  return (
+    <>
+      <IconMdx components={{ Icon, CodeBlock }} />
+      <div className="demo-component-catalogue">{renderCatalog(list)}</div>
+    </>
+  );
+};
+export default IconPage;