Merge pull request #20 from toeverything/feat/layout

feat: update blocksuite version

packages/app/package.json

@@ -10,9 +10,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@blocksuite/blocks": "^0.2.5",
+    "@blocksuite/blocks": "^0.2.6",
-    "@blocksuite/editor": "^0.2.5",
+    "@blocksuite/editor": "^0.2.6",
-    "@blocksuite/store": "^0.2.5",
+    "@blocksuite/store": "^0.2.6",
     "@emotion/css": "^11.10.0",
     "@emotion/react": "^11.10.4",
     "@emotion/server": "^11.10.0",

packages/app/src/pages/affine.tsx

@@ -1,7 +1,136 @@
-import React from 'react';
+import type { ReactNode } from 'react';
+import { useRef, useState, useEffect } from 'react';
+import { styled } from '@/styles';
+import { PaperIcon, EdgelessIcon } from '../components/Header/icons';
+export const StyledHeader = styled('div')({
+  height: '60px',
+  width: '100vw',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  position: 'relative',
+  padding: '0 22px',
+  borderBottom: '1px solid #e5e5e5',
+});
+
+export const StyledAnimateRadio = styled('div')<{ shrink: boolean }>(
+  ({ shrink }) => {
+    const shrinkStyle = shrink
+      ? {
+          width: '66px',
+          background: 'transparent',
+          '::after': {
+            opacity: '0',
+          },
+        }
+      : {};
+    return {
+      border: '1px solid #e5e5e5',
+      width: '132px',
+      height: '36px',
+      borderRadius: '18px',
+      background: '#F1F3FF',
+      position: 'relative',
+      display: 'flex',
+      transition:'all .3s',
+      '::after': {
+        content: '""',
+        width: '1px',
+        height: '14px',
+        background: '#D0D7E3',
+        position: 'absolute',
+        left: '0',
+        right: '0',
+        top: '0',
+        bottom: '0',
+        margin: 'auto',
+      },
+      ...shrinkStyle,
+    };
+  }
+);
+
+export const StyledAnimateRadioItem = styled('div')<{
+  active: boolean;
+  shrink: boolean;
+}>(({ shrink }) => {
+  const shrinkStyle = shrink
+    ? {
+        width: '100%',
+        display: 'none',
+      }
+    : {};
+  return {
+    width: '66px',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    ...shrinkStyle,
+  };
+});
+
+type AnimateRadioProps = {
+  labelLeft: ReactNode;
+  labelRight: ReactNode;
+};
+
+const AnimateRadio = ({ labelLeft, labelRight }: AnimateRadioProps) => {
+  const [active, setActive] = useState('left');
+  const [isHover, setIsHover] = useState(false);
+  const isAnimating = useRef(false);
+  const stretch = () => {
+    !isAnimating.current && setIsHover(true);
+  };
+  const shrink = () => {
+    !isAnimating.current && setIsHover(false);
+  };
+
+  useEffect(() => {
+    // isAnimating.current = true;
+    // setTimeout(() => {
+    //   isAnimating.current = false;
+    // }, 500);
+  }, [isHover]);
+
+  return (
+    <StyledAnimateRadio
+      shrink={isHover}
+      onMouseEnter={() => {
+        stretch();
+      }}
+      onMouseLeave={() => {
+        shrink();
+      }}
+    >
+      <StyledAnimateRadioItem
+        active={active === 'left'}
+        shrink={isHover && active === 'right'}
+        onClick={() => {
+          setActive('left');
+        }}
+      >
+        {labelLeft}
+      </StyledAnimateRadioItem>
+      <StyledAnimateRadioItem
+        active={active === 'right'}
+        shrink={isHover && active === 'left'}
+        onClick={() => {
+          setActive('right');
+        }}
+      >
+        {labelRight}
+      </StyledAnimateRadioItem>
+    </StyledAnimateRadio>
+  );
+};
 
 const Affine = () => {
-  return <div className="">Affine Page</div>;
+  return (
+    <StyledHeader>
+      <AnimateRadio labelLeft={<PaperIcon />} labelRight={<EdgelessIcon />} />
+    </StyledHeader>
+  );
 };
 
 export default Affine;

pnpm-lock.yaml

@@ -18,9 +18,9 @@ importers:
 
   packages/app:
     specifiers:
-      '@blocksuite/blocks': ^0.2.5
+      '@blocksuite/blocks': ^0.2.6
-      '@blocksuite/editor': ^0.2.5
+      '@blocksuite/editor': ^0.2.6
-      '@blocksuite/store': ^0.2.5
+      '@blocksuite/store': ^0.2.6
       '@emotion/css': ^11.10.0
       '@emotion/react': ^11.10.4
       '@emotion/server': ^11.10.0
@@ -41,9 +41,9 @@ importers:
       react-dom: 18.2.0
       typescript: 4.8.3
     dependencies:
-      '@blocksuite/blocks': 0.2.5
+      '@blocksuite/blocks': 0.2.6
-      '@blocksuite/editor': 0.2.5
+      '@blocksuite/editor': 0.2.6
-      '@blocksuite/store': 0.2.5
+      '@blocksuite/store': 0.2.6
       '@emotion/css': 11.10.0
       '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34
       '@emotion/server': 11.10.0_@emotion+css@11.10.0
@@ -137,11 +137,11 @@ packages:
       to-fast-properties: 2.0.0
     dev: false
 
-  /@blocksuite/blocks/0.2.5:
+  /@blocksuite/blocks/0.2.6:
-    resolution: {integrity: sha512-e1pMkrbUmGBDBaquK8Ho7VONKkXsIyOz76tC9K+srDbCFhL3Vw6ozPVMn5s3v6k4A9f69q2xdHoQSSgbD2zX1A==}
+    resolution: {integrity: sha512-2AcyzWdkvgYjck4Ber8qOxmChhuquBiQoAE45q6ojSr5jf+DgFkWCh6kilRFj8kIJmSH2yARXOi7EXljDFf7IQ==}
     dependencies:
-      '@blocksuite/shared': 0.2.5
+      '@blocksuite/shared': 0.2.6
-      '@blocksuite/store': 0.2.5
+      '@blocksuite/store': 0.2.6
       lit: 2.4.0
       quill: 1.3.7
       quill-cursors: 4.0.0
@@ -151,12 +151,12 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@blocksuite/editor/0.2.5:
+  /@blocksuite/editor/0.2.6:
-    resolution: {integrity: sha512-dKNNRuaMostt199L2+inY+aMzIjK0KFehU95zKPo/nBqQEBc69F7Bc2BWbvPFJHMYyItkz7zwtLbK/h2gV0wwg==}
+    resolution: {integrity: sha512-L1S5J1s4pZ+BMHenO92YeXNCxA2L7G/jQ2B9CYFNffTZFT2d8TXGVv4yKTycO4GlGFIyMJE6EGKDvouVAqeq8g==}
     dependencies:
-      '@blocksuite/blocks': 0.2.5
+      '@blocksuite/blocks': 0.2.6
-      '@blocksuite/shared': 0.2.5
+      '@blocksuite/shared': 0.2.6
-      '@blocksuite/store': 0.2.5
+      '@blocksuite/store': 0.2.6
       lit: 2.4.0
       marked: 4.1.1
       turndown: 7.1.1
@@ -166,10 +166,10 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@blocksuite/shared/0.2.5:
+  /@blocksuite/shared/0.2.6:
-    resolution: {integrity: sha512-bibt5pPXxtHzq27CUpgBOjqj5T0WG0tu9B0KWR1VTERzTElyzSr4vzT8RLdUJNBfMbtJvpXL6MTFxtQqmmreUQ==}
+    resolution: {integrity: sha512-F2BN26GOLG2/BcEgNWjl1XVDWj1nSq8Kd/C6mC7h2m574Qtw+wZh03h7Sfs3AT1K3+jv7KlWwbKugstned8w6A==}
     dependencies:
-      '@blocksuite/store': 0.2.5
+      '@blocksuite/store': 0.2.6
       hotkeys-js: 3.10.0
     transitivePeerDependencies:
       - bufferutil
@@ -177,8 +177,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@blocksuite/store/0.2.5:
+  /@blocksuite/store/0.2.6:
-    resolution: {integrity: sha512-YU+WRN2PnAF+GDpEcHJyGGWdSCIclLWMkKBuYGR0ddWWOfJ35UGkHVjCQaLKvwB8IidhFrfrrj9wEVp7Ma/Pog==}
+    resolution: {integrity: sha512-UfYuDFxjjXcYAn1yXhAOe6B6nn2Tr0uTWMRYA1qhBmA68g32w83fGqRFxLwzsS5099+PUunbJkqAqZwuMeCYcA==}
     dependencies:
       lib0: 0.2.52
       y-protocols: 1.0.5