chore: add changeLog to storybook (#2118)

Co-authored-by: himself65 <himself65@outlook.com>

apps/web/src/components/pure/workspace-slider-bar/changeLog/index.tsx

@@ -1,21 +1,15 @@
-import { IconButton } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
-import { CloseIcon, NewIcon } from '@blocksuite/icons';
-import { useCallback, useState } from 'react';
+import ChangeLogComponent from '@affine/component/changeLog';
+import { useCallback } from 'react';
 
 import {
   useGuideHidden,
   useGuideHiddenUntilNextUpdate,
 } from '../../../../hooks/use-is-first-load';
-import { StyledChangeLog, StyledChangeLogWrapper } from '../shared-styles';
-import { StyledLink } from '../style';
 
 export const ChangeLog = () => {
   const [guideHidden, setGuideHidden] = useGuideHidden();
   const [guideHiddenUntilNextUpdate, setGuideHiddenUntilNextUpdate] =
     useGuideHiddenUntilNextUpdate();
-  const [isClose, setIsClose] = useState(false);
-  const { t } = useTranslation();
   const onCloseWhatsNew = useCallback(() => {
     setTimeout(() => {
       setGuideHiddenUntilNextUpdate({
@@ -33,28 +27,7 @@ export const ChangeLog = () => {
   if (guideHiddenUntilNextUpdate.changeLog) {
     return <></>;
   }
-  return (
-    <StyledChangeLogWrapper isClose={isClose}>
-      <StyledChangeLog data-testid="change-log" isClose={isClose}>
-        <StyledLink
-          href="https://github.com/toeverything/AFFiNE/releases"
-          target="_blank"
-        >
-          <NewIcon />
-          {t("Discover what's new!")}
-        </StyledLink>
-        <IconButton
-          onClick={() => {
-            setIsClose(true);
-            onCloseWhatsNew();
-          }}
-          data-testid="change-log-close-button"
-        >
-          <CloseIcon />
-        </IconButton>
-      </StyledChangeLog>
-    </StyledChangeLogWrapper>
-  );
+  return <ChangeLogComponent onCloseWhatsNew={onCloseWhatsNew} />;
 };
 
 export default ChangeLog;

apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts

@@ -1,10 +1,4 @@
-import {
-  alpha,
-  displayFlex,
-  keyframes,
-  styled,
-  textEllipsis,
-} from '@affine/component';
+import { alpha, displayFlex, styled, textEllipsis } from '@affine/component';
 
 export const StyledListItem = styled('div')<{
   active?: boolean;
@@ -123,105 +117,6 @@ export const StyledCollapseItem = styled('div')<{
   };
 });
 
-const slideIn = keyframes({
-  '0%': {
-    height: '0px',
-  },
-  '50%': {
-    height: '36px',
-  },
-  '100%': {
-    height: '32px',
-  },
-});
-const slideIn2 = keyframes({
-  '0%': {
-    transform: 'translateX(100%)',
-  },
-  '50%': {
-    transform: 'translateX(100%)',
-  },
-  '80%': {
-    transform: 'translateX(-10%)',
-  },
-  '100%': {
-    transform: 'translateX(0%)',
-  },
-});
-
-const slideOut = keyframes({
-  '0%': {
-    height: '32px',
-  },
-  '60%': {
-    height: '32px',
-  },
-  '80%': {
-    height: '32px',
-  },
-  '100%': {
-    height: '0px',
-  },
-});
-const slideOut2 = keyframes({
-  '0%': {
-    transform: 'translateX(0%)',
-  },
-  '100%': {
-    transform: 'translateX(100%)',
-  },
-});
-
-export const StyledChangeLog = styled('div')<{
-  isClose?: boolean;
-}>(({ isClose }) => {
-  return {
-    width: '110%',
-    height: '32px',
-    ...displayFlex('flex-start', 'center'),
-    color: 'var(--affine-primary-color)',
-    backgroundColor: 'var(--affine-hover-color)',
-    border: '1px solid var(--affine-primary-color)',
-    borderRight: 'none',
-    marginLeft: '8px',
-    paddingLeft: '8px',
-    borderRadius: '16px 0 0 16px',
-    cursor: 'pointer',
-    zIndex: 1001,
-    position: 'absolute',
-    userSelect: 'none',
-    transition: 'all 0.3s',
-    animation: isClose
-      ? `${slideOut2} .3s ease-in-out forwards`
-      : `${slideIn2} 1s ease-in-out forwards`,
-    '> svg, a > svg': {
-      fontSize: '20px',
-      marginRight: '12px',
-      color: 'var(--affine-primary-color)',
-    },
-    button: {
-      marginRight: '12%',
-    },
-  };
-});
-export const StyledChangeLogWrapper = styled('div')<{
-  isClose?: boolean;
-}>(({ isClose }) => {
-  return {
-    width: 'calc(100% + 4px)',
-    height: '0px',
-    animation: isClose
-      ? `${slideOut} .3s ease-in-out forwards`
-      : `${slideIn} 1s ease-in-out forwards`,
-    ...displayFlex('flex-start', 'center'),
-    marginBottom: '4px',
-    position: 'relative',
-    userSelect: 'none',
-    transition: 'all 0.3s',
-    overflow: 'hidden',
-  };
-});
-
 export const StyledRouteNavigationWrapper = styled('div')({
   height: '32px',
   width: '80px',