Pivot-Studio · 1360151219 · Jul 10, 2023 · May 17, 2023 · May 21, 2023 · May 28, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -16,5 +16,6 @@
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  } // required to format on save
+  },
+  "svg.preview.background": "white" // required to format on save
 }
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "husky": "^8.0.2"
   },
   "dependencies": {
-    "core-js": "^3.25.1"
+    "core-js": "^3.25.1",
+    "gsap": "^3.12.2"
   }
 }
diff --git a/packages/demo/index.scss b/packages/demo/index.scss
@@ -1,7 +1,8 @@
 :root {
   --master-bg-color: rgb(252, 234, 220);
   --master-deep-bg-color: #c76591;
-  --master-text-color: #634f47;
+  --master-text-color: #fff;
+  --link-color: #eabe9e;
 }
 * {
   padding: 0;
@@ -11,6 +12,7 @@ body,
 html,
 #root {
   height: 100%;
+  font-family: 'Helvetica Neue', 'Gilroy ExtraBold', Times, serif;
 }
 
 h1 {
@@ -69,51 +71,3 @@ h3 {
   padding: 32px 40px;
   margin: 24px;
 }
-
-.pivot-code-box {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  margin: 16px 0;
-  overflow: hidden;
-  border: 1px solid rgba(5, 5, 5, 0.06);
-  border-radius: 6px;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  &-actions {
-    display: flex;
-    flex-direction: row-reverse;
-    padding: 4px 8px;
-    .pivot-code-box-icon {
-      width: 20px;
-      height: 20px;
-      cursor: pointer;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-  &-demo {
-    padding: 24px 30px;
-    display: flex;
-    border-bottom: 1px solid rgba(5, 5, 5, 0.06);
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    > :not(.PIVOT-draggable-item) {
-      margin: 0 24px;
-    }
-  }
-
-  .line-numbers {
-    //width: 100%;
-    .code-toolbar {
-      .data-prismjs-copy {
-        //width: 70vw;
-        //width: 100%;
-        overflow: auto;
-      }
-    }
-  }
-}
diff --git a/packages/demo/index.tsx b/packages/demo/index.tsx
@@ -1,61 +1,26 @@
-import { useState } from 'react';
 import ReactDom from 'react-dom/client';
-import { Outlet, BrowserRouter as Router, useRoutes } from 'react-router-dom';
-import { Button, Icon, Input, Skeleton, Card } from 'pivot-design';
+import React, { ReactNode } from 'react';
+import { BrowserRouter as Router, useLocation, useRoutes } from 'react-router-dom';
 import router from '@/routers';
-import ButtonMdx from './src/components/Button/index.mdx';
-import IconMdx from './src/components/Icon/index.mdx';
-import InputMdx from './src/components/Input/index.mdx';
-import CardMdx from './src/components/Card/index.mdx';
-import SkeletonMdx from './src/components/Skeleton/index.mdx';
-import Draggable from '@/examples/Draggable/Draggable';
-import CodeBlock from '@/components/codeBlock';
 import './index.scss';
-const App = () => {
-  const [select, setSelect] = useState('Input');
-  const demoSelect = () => {
-    return (
-      <div className="demo-container">
-        <div className={`demo-item ${select === 'Button' ? 'active' : ''}`} onClick={() => setSelect('Button')}>
-          按钮
-        </div>
-        <div className={`demo-item ${select === 'Card' ? 'active' : ''}`} onClick={() => setSelect('Card')}>
-          卡片
-        </div>
-
-        <div className={`demo-item ${select === 'Draggable' ? 'active' : ''}`} onClick={() => setSelect('Draggable')}>
-          拖拽列表
-        </div>
-        <div className={`demo-item ${select === 'Skeleton' ? 'active' : ''}`} onClick={() => setSelect('Skeleton')}>
-          骨架屏
-        </div>
-        <div className={`demo-item ${select === 'Icon' ? 'active' : ''}`} onClick={() => setSelect('Icon')}>
-          图标
-        </div>
-        <div className={`demo-item ${select === 'Input' ? 'active' : ''}`} onClick={() => setSelect('Input')}>
-          输入框
-        </div>
-      </div>
-    );
-  };
+import { useLayoutEffect } from 'react';
 
+const App = () => {
   return useRoutes(router);
+};
 
-  /* <div className="pivot-design-docs-content">
-        {demoSelect()}
-        <div className="demo-component">
-          {select === 'Button' ? <ButtonMdx components={{ Button, CodeBlock }} /> : null}
-          {select === 'Icon' ? <IconMdx components={{ Icon, CodeBlock }} /> : null}
-          {select === 'Input' ? <InputMdx components={{ Input, CodeBlock }} /> : null}
-          {select === 'Card' ? <CardMdx components={{ Card, CodeBlock }} /> : null}
-          {select === 'Draggable' ? <Draggable /> : null}
-          {select === 'Skeleton' ? <SkeletonMdx components={{ Skeleton, CodeBlock }} /> : null}
-        </div>
-      </div> */
+const AutoScrollToTop: React.FC<{ children: React.ReactElement }> = ({ children }) => {
+  const location = useLocation();
+  useLayoutEffect(() => {
+    document.documentElement.scrollTo(0, 0);
+  }, [location.pathname]);
+  return children;
 };
 
 ReactDom.createRoot(document.getElementById('root') as HTMLElement).render(
   <Router>
-    <App />
+    <AutoScrollToTop>
+      <App />
+    </AutoScrollToTop>
   </Router>
 );
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -38,6 +38,7 @@
   "dependencies": {
     "@mdx-js/loader": "^2.1.5",
     "babel-plugin-prismjs": "^2.1.0",
+    "gsap": "^3.11.5",
     "pivot-design": "workspace:*",
     "pivot-design-icon": "workspace:*",
     "prismjs": "^1.29.0",

diff --git a/packages/demo/src/components/codeBlock.tsx → ...o/src/components/_CodeBlock/codeBlock.tsx b/packages/demo/src/components/codeBlock.tsx → ...o/src/components/_CodeBlock/codeBlock.tsx
@@ -1,5 +1,6 @@
 import Prism from 'prismjs';
 import React, { useRef, useState, useEffect, TransitionEventHandler } from 'react';
+import './index.scss';
 interface ICodeProps {
   children: React.ReactNode;
   code: string;

diff --git a/packages/demo/src/components/_CodeBlock/index.scss b/packages/demo/src/components/_CodeBlock/index.scss
@@ -0,0 +1,47 @@
+.pivot-code-box {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  margin: 16px 0;
+  overflow: hidden;
+  border: 1px solid rgba(5, 5, 5, 0.06);
+  border-radius: 6px;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  &-actions {
+    display: flex;
+    flex-direction: row-reverse;
+    padding: 4px 8px;
+    .pivot-code-box-icon {
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  &-demo {
+    padding: 24px 30px;
+    display: flex;
+    border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    > :not(.PIVOT-draggable-item) {
+      margin: 0 24px;
+    }
+  }
+
+  .line-numbers {
+    //width: 100%;
+    .code-toolbar {
+      .data-prismjs-copy {
+        //width: 70vw;
+        //width: 100%;
+        overflow: auto;
+      }
+    }
+  }
+}
diff --git a/packages/demo/src/examples/Draggable/Draggable.tsx b/packages/demo/src/examples/Draggable/Draggable.tsx
@@ -1,6 +1,6 @@
 import DraggableMdx from '../../components/Draggable/index.mdx';
 import { DraggableItem, Droppable, arrayMove, DndContext, Sortable } from 'pivot-design';
-import CodeBlock from '@/components/codeBlock';
+import CodeBlock from '@/components/_CodeBlock/codeBlock';
 import { useState } from 'react';
 
 const Draggable = () => {

diff --git a/packages/demo/src/images/.DS_Store b/packages/demo/src/images/.DS_Store
diff --git a/packages/demo/src/images/bat.min.tsx b/packages/demo/src/images/bat.min.tsx
diff --git a/packages/demo/src/images/left_bird.svg b/packages/demo/src/images/left_bird.svg
diff --git a/packages/demo/src/images/logo.tsx b/packages/demo/src/images/logo.tsx
@@ -1,6 +1,6 @@
 function Logo() {
   return (
-    <svg viewBox="0 0 1000 1000" version="1.1" id="svg_null">
+    <svg viewBox="0 0 1500 375" version="1.1" id="svg_null">
       <g id="root" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
         <rect id="background" x="0" y="0" width="500" />
         <g id="shape" transform="translate(120.000000, 70.000000)">
@@ -62,14 +62,12 @@ function Logo() {
             height="39.828"
           />
         </g>
-        <g id="Group" transform="translate(40.000000, 364.000000)">
-          <rect id="Rectangle-10" x="0" y="0" width="420" height="58" />
+        <g id="Group" transform="translate(40.000000, 404.000000)">
           <text
             id="headerText"
             fontFamily="Fira Mono"
-            fontSize="100"
-            fontWeight="700"
-            fill="#634f47"
+            fontSize="150"
+            fill="#fff"
             data-text-alignment="C"
             fontStyle="normal"
           >

diff --git a/packages/demo/src/images/mountains/mountain.min.tsx b/packages/demo/src/images/mountains/mountain.min.tsx
@@ -0,0 +1,10 @@
+export default function Mountain(props) {
+  return (
+    <svg width="1980" height="820" {...props} xmlns="http://www.w3.org/2000/svg" version="1.0">
+      <path
+        stroke="null"
+        d="M1826.956 453.966c-9.27 2.858-16.462 8.044-40.436 28.473-11.667 9.95-28.45 23.286-37.4 29.637-8.789 6.245-23.334 17.888-32.125 25.72-8.79 7.833-25.572 20.746-37.08 28.579-11.507 7.832-25.732 18.417-31.645 23.392-5.914 4.975-16.622 12.384-23.815 16.406-23.974 13.442-34.682 20.11-39.637 24.556-2.557 2.435-5.434 4.446-6.233 4.446s-6.233 4.234-12.147 9.526c-10.068 8.997-11.027 9.526-16.623 9.526-12.784 0-29.887 2.752-69.844 11.22l-22.535 4.869-7.83-2.646c-11.51-3.81-24.775-5.399-40.598-4.552-7.51.318-23.975 1.059-36.76 1.694-21.257.952-31.486 2.223-55.94 6.668-11.347 2.117-47.47 6.033-55.14 6.033-3.995 0-7.512-.846-10.868-2.752-2.557-1.482-8.95-4.022-13.906-5.715-5.114-1.694-17.421-6.563-27.33-10.903-10.068-4.34-22.536-9.208-27.65-10.796-5.115-1.588-16.302-6.35-24.773-10.584-20.938-10.373-36.92-15.983-49.706-17.36-5.913-.74-17.102-3.28-25.893-6.032-16.782-5.293-27.33-6.669-51.624-6.775-14.225 0-40.276 3.705-53.063 7.515-11.346 3.493-37.399 21.381-50.825 34.93-6.073 6.033-17.262 15.347-24.773 20.64-7.672 5.292-19.339 14.289-25.892 20.216-14.545 12.596-23.975 18.312-37.4 22.546-12.626 4.022-21.097 4.128-31.805.423-40.117-14.183-78.635-33.66-126.264-63.825-9.75-6.14-26.691-15.877-37.879-21.593-38.678-19.793-57.058-35.247-82.95-69.647-15.823-20.957-31.806-36.834-50.027-49.536-32.444-22.651-42.194-26.779-69.364-29.32-9.43-.952-21.097-2.645-25.893-3.81-32.924-7.938-30.207-7.515-41.555-6.245-14.543 1.588-31.645 7.515-44.111 15.136-5.595 3.493-20.46 14.819-32.926 25.086-36.6 29.954-69.524 50.489-101.33 63.084-14.864 5.928-20.937 9.103-30.047 15.666-33.724 24.662-40.277 28.472-68.406 40.221-17.741 7.304-24.774 8.68-42.195 7.727-19.979-.953-30.847-4.869-58.177-20.64-21.737-12.596-32.285-19.582-42.194-28.155a5474.713 5474.713 0 00-11.668-10.056c-1.598-1.27-1.917 77.903-2.077 370.674V1320h2045.789V498.845l-8.31-4.128c-4.636-2.329-12.787-6.033-18.062-8.362-5.273-2.329-18.539-8.256-29.566-13.23-15.664-7.093-24.615-10.268-41.237-14.608-19.499-5.08-22.535-5.61-37.56-6.033-13.744-.423-17.26-.212-22.695 1.482z"
+      />
+    </svg>
+  );
+}