refactor(infra): directory structure (#4615)

2026-07-25 22:38:56 +08:00 · 2023-10-18 23:30:08 +08:00
parent 814d552be8
commit bed9310519
1150 changed files with 539 additions and 584 deletions
@@ -0,0 +1,33 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+
+import * as styles from './styles.css';
+
+export const BlockCard = forwardRef<
+  HTMLDivElement,
+  {
+    left?: ReactNode;
+    title: string;
+    desc?: string;
+    right?: ReactNode;
+    disabled?: boolean;
+  } & HTMLAttributes<HTMLDivElement>
+>(({ left, title, desc, right, disabled, onClick, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={styles.blockCard}
+      role="button"
+      aria-disabled={disabled}
+      onClick={disabled ? undefined : onClick}
+      {...props}
+    >
+      {left && <div className={styles.blockCardAround}>{left}</div>}
+      <div className={styles.blockCardContent}>
+        <div>{title}</div>
+        <div className={styles.blockCardDesc}>{desc}</div>
+      </div>
+      {right && <div className={styles.blockCardAround}>{right}</div>}
+    </div>
+  );
+});
+BlockCard.displayName = 'BlockCard';
@@ -0,0 +1,44 @@
+import { style } from '@vanilla-extract/css';
+
+export const blockCard = style({
+  display: 'flex',
+  gap: '12px',
+  padding: '8px 12px',
+  color: 'var(--affine-text-primary-color)',
+  backgroundColor: 'var(--affine-white-80)',
+  borderRadius: '8px',
+  userSelect: 'none',
+  cursor: 'pointer',
+  textAlign: 'start',
+  boxShadow: 'var(--affine-shadow-1)',
+  selectors: {
+    '&:hover': {
+      backgroundColor: 'var(--affine-hover-color)',
+    },
+    '&[aria-disabled]': {
+      color: 'var(--affine-text-disable-color)',
+    },
+    '&[aria-disabled]:hover': {
+      backgroundColor: 'var(--affine-white-80)',
+      cursor: 'not-allowed',
+    },
+    // TODO active styles
+  },
+});
+
+export const blockCardAround = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const blockCardContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+});
+
+export const blockCardDesc = style({
+  color: 'var(--affine-text-secondary-color)',
+  fontSize: 'var(--affine-font-xs)',
+});
@@ -0,0 +1,134 @@
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
+import { CollaborationIcon, SettingsIcon } from '@blocksuite/icons';
+import { Skeleton } from '@mui/material';
+import { Avatar } from '@toeverything/components/avatar';
+import { Divider } from '@toeverything/components/divider';
+import { Tooltip } from '@toeverything/components/tooltip';
+import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
+import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
+import { getBlockSuiteWorkspaceAtom } from '@toeverything/infra/__internal__/workspace';
+import { useAtomValue } from 'jotai/react';
+import { useCallback } from 'react';
+
+import {
+  StyledCard,
+  StyledIconContainer,
+  StyledSettingLink,
+  StyledWorkspaceInfo,
+  StyledWorkspaceTitle,
+  StyledWorkspaceTitleArea,
+  StyledWorkspaceType,
+  StyledWorkspaceTypeEllipse,
+  StyledWorkspaceTypeText,
+} from './styles';
+
+export interface WorkspaceTypeProps {
+  flavour: WorkspaceFlavour;
+  isOwner: boolean;
+}
+
+const WorkspaceType = ({ flavour, isOwner }: WorkspaceTypeProps) => {
+  const t = useAFFiNEI18N();
+  if (flavour === WorkspaceFlavour.LOCAL) {
+    return (
+      <StyledWorkspaceType>
+        <StyledWorkspaceTypeEllipse />
+        <StyledWorkspaceTypeText>{t['Local']()}</StyledWorkspaceTypeText>
+      </StyledWorkspaceType>
+    );
+  }
+
+  return isOwner ? (
+    <StyledWorkspaceType>
+      <StyledWorkspaceTypeEllipse cloud={true} />
+      <StyledWorkspaceTypeText>
+        {t['com.affine.brand.affineCloud']()}
+      </StyledWorkspaceTypeText>
+    </StyledWorkspaceType>
+  ) : (
+    <StyledWorkspaceType>
+      <StyledWorkspaceTypeEllipse cloud={true} />
+      <StyledWorkspaceTypeText>
+        {t['com.affine.brand.affineCloud']()}
+      </StyledWorkspaceTypeText>
+      <Divider
+        orientation="vertical"
+        size="thinner"
+        style={{ margin: '0px 8px', height: '7px' }}
+      />
+      <Tooltip content={t['com.affine.workspaceType.joined']()}>
+        <StyledIconContainer>
+          <CollaborationIcon />
+        </StyledIconContainer>
+      </Tooltip>
+    </StyledWorkspaceType>
+  );
+};
+
+export interface WorkspaceCardProps {
+  currentWorkspaceId: string | null;
+  meta: RootWorkspaceMetadata;
+  onClick: (workspaceId: string) => void;
+  onSettingClick: (workspaceId: string) => void;
+  isOwner?: boolean;
+}
+
+export const WorkspaceCardSkeleton = () => {
+  return (
+    <div>
+      <StyledCard data-testid="workspace-card">
+        <Skeleton variant="circular" width={28} height={28} />
+        <Skeleton
+          variant="rectangular"
+          height={43}
+          width={220}
+          style={{ marginLeft: '12px' }}
+        />
+      </StyledCard>
+    </div>
+  );
+};
+
+export const WorkspaceCard = ({
+  onClick,
+  onSettingClick,
+  currentWorkspaceId,
+  meta,
+  isOwner = true,
+}: WorkspaceCardProps) => {
+  const [workspaceAtom] = getBlockSuiteWorkspaceAtom(meta.id);
+  const workspace = useAtomValue(workspaceAtom);
+  const [name] = useBlockSuiteWorkspaceName(workspace);
+  const [workspaceAvatar] = useBlockSuiteWorkspaceAvatarUrl(workspace);
+  return (
+    <StyledCard
+      data-testid="workspace-card"
+      onClick={useCallback(() => {
+        onClick(meta.id);
+      }, [onClick, meta.id])}
+      active={workspace.id === currentWorkspaceId}
+    >
+      <Avatar size={28} url={workspaceAvatar} name={name} colorfulFallback />
+      <StyledWorkspaceInfo>
+        <StyledWorkspaceTitleArea style={{ display: 'flex' }}>
+          <StyledWorkspaceTitle>{name}</StyledWorkspaceTitle>
+
+          <StyledSettingLink
+            size="small"
+            className="setting-entry"
+            onClick={e => {
+              e.stopPropagation();
+              onSettingClick(meta.id);
+            }}
+            withoutHoverStyle={true}
+          >
+            <SettingsIcon />
+          </StyledSettingLink>
+        </StyledWorkspaceTitleArea>
+        <WorkspaceType isOwner={isOwner} flavour={meta.flavour} />
+      </StyledWorkspaceInfo>
+    </StyledCard>
+  );
+};
@@ -0,0 +1,137 @@
+import { IconButton } from '@toeverything/components/button';
+
+import { displayFlex, styled, textEllipsis } from '../../../styles';
+
+export const StyledWorkspaceInfo = styled('div')(() => {
+  return {
+    marginLeft: '12px',
+    width: '100%',
+  };
+});
+
+export const StyledWorkspaceTitle = styled('div')(() => {
+  return {
+    fontSize: 'var(--affine-font-sm)',
+    fontWeight: 700,
+    lineHeight: '22px',
+    maxWidth: '190px',
+    color: 'var(--affine-text-primary-color)',
+    ...textEllipsis(1),
+  };
+});
+
+export const StyledCard = styled('div')<{
+  active?: boolean;
+}>(({ active }) => {
+  const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
+  const backgroundColor = active ? 'var(--affine-white-30)' : 'transparent';
+  return {
+    width: '100%',
+    cursor: 'pointer',
+    padding: '12px',
+    borderRadius: '8px',
+    border: `1px solid ${borderColor}`,
+    ...displayFlex('flex-start', 'flex-start'),
+    transition: 'background .2s',
+    alignItems: 'center',
+    position: 'relative',
+    color: 'var(--affine-text-secondary-color)',
+    background: backgroundColor,
+    ':hover': {
+      background: 'var(--affine-hover-color)',
+      '.add-icon': {
+        borderColor: 'var(--affine-primary-color)',
+        color: 'var(--affine-primary-color)',
+      },
+      '.setting-entry': {
+        opacity: 1,
+        pointerEvents: 'auto',
+        backgroundColor: 'var(--affine-white-30)',
+        boxShadow: 'var(--affine-shadow-1)',
+        ':hover': {
+          background:
+            'linear-gradient(0deg, var(--affine-hover-color) 0%, var(--affine-hover-color) 100%), var(--affine-white-30)',
+        },
+      },
+    },
+    '@media (max-width: 720px)': {
+      width: '100%',
+    },
+  };
+});
+
+export const StyledModalHeader = styled('div')(() => {
+  return {
+    width: '100%',
+    height: '72px',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    borderRadius: '24px 24px 0 0',
+    padding: '0 40px',
+    ...displayFlex('space-between', 'center'),
+  };
+});
+
+export const StyledSettingLink = styled(IconButton)(() => {
+  return {
+    position: 'absolute',
+    right: '10px',
+    top: '10px',
+    opacity: 0,
+    borderRadius: '4px',
+    color: 'var(--affine-primary-color)',
+    pointerEvents: 'none',
+    transition: 'all .15s',
+    ':hover': {
+      background: 'var(--affine-hover-color)',
+    },
+  };
+});
+
+export const StyledWorkspaceType = styled('div')(() => {
+  return {
+    ...displayFlex('flex-start', 'center'),
+    width: '100%',
+    height: '20px',
+  };
+});
+
+export const StyledWorkspaceTitleArea = styled('div')(() => {
+  return {
+    display: 'flex',
+    justifyContent: 'space-between',
+  };
+});
+
+export const StyledWorkspaceTypeEllipse = styled('div')<{
+  cloud?: boolean;
+}>(({ cloud }) => {
+  return {
+    width: '5px',
+    height: '5px',
+    borderRadius: '50%',
+    background: cloud
+      ? 'var(--affine-palette-shape-blue)'
+      : 'var(--affine-palette-shape-green)',
+  };
+});
+
+export const StyledWorkspaceTypeText = styled('div')(() => {
+  return {
+    fontSize: '12px',
+    fontWeight: 500,
+    lineHeight: '20px',
+    marginLeft: '4px',
+    color: 'var(--affine-text-secondary-color)',
+  };
+});
+
+export const StyledIconContainer = styled('div')(() => {
+  return {
+    ...displayFlex('flex-start', 'center'),
+    fontSize: '14px',
+    gap: '8px',
+    color: 'var(--affine-icon-secondary)',
+  };
+});