refactor: move WorkspaceCard (#1803)

.husky/pre-commit

@@ -1,4 +1,9 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+# check lockfile is up to date
+yarn install
+cd ./apps/eletron && yarn install
+
+# lint staged files
 yarn exec lint-staged

apps/electron/yarn.lock

@@ -59,6 +59,7 @@ __metadata:
     "@storybook/react-vite": 7.0.0
     "@storybook/test-runner": 0.10.0-next.12
     "@storybook/testing-library": 0.0.14-next.2
+    "@toeverything/hooks": "workspace:*"
     "@types/react": ^18.0.31
     "@types/react-dnd": ^3.0.2
     "@types/react-dom": 18.0.11
@@ -5707,7 +5708,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@toeverything/hooks@workspace:../../packages/hooks":
+"@toeverything/hooks@workspace:*, @toeverything/hooks@workspace:../../packages/hooks":
   version: 0.0.0-use.local
   resolution: "@toeverything/hooks@workspace:../../packages/hooks"
   languageName: unknown

apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx

@@ -1,4 +1,5 @@
 import { Button, FlexWrapper, MuiFade } from '@affine/component';
+import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { useTranslation } from '@affine/i18n';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-blocksuite-workspace-avatar-url';
@@ -13,7 +14,6 @@ import {
   JoinedWorkspaceIcon,
   LocalWorkspaceIcon,
 } from '../../../../pure/icons';
-import { WorkspaceAvatar } from '../../../../pure/workspace-avatar';
 import type { PanelProps } from '../../index';
 import { StyledRow, StyledSettingKey } from '../../style';
 import { WorkspaceDeleteModal } from './delete';

apps/web/src/components/pure/workspace-list-modal/index.tsx

@@ -4,13 +4,13 @@ import {
   ModalWrapper,
   Tooltip,
 } from '@affine/component';
+import { WorkspaceCard } from '@affine/component/workspace-card';
 import { useTranslation } from '@affine/i18n';
 import type { AccessTokenMessage } from '@affine/workspace/affine/login';
 import { HelpIcon, PlusIcon } from '@blocksuite/icons';
 
 import type { AllWorkspace } from '../../../shared';
 import { Footer } from '../footer';
-import { WorkspaceCard } from '../workspace-card';
 import { LanguageMenu } from './language-menu';
 import {
   StyledCreateWorkspaceCard,

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

@@ -1,10 +1,10 @@
+import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { CloudWorkspaceIcon, LocalWorkspaceIcon } from '@blocksuite/icons';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-blocksuite-workspace-name';
 import type React from 'react';
 
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
 import type { AllWorkspace } from '../../../../shared';
-import { WorkspaceAvatar } from '../../workspace-avatar';
 import {
   StyledSelectorContainer,
   StyledSelectorWrapper,

apps/web/src/pages/_app.tsx

@@ -1,4 +1,4 @@
-import '../styles/globals.css';
+import '@affine/component/theme/global.css';
 
 import { config, setupGlobal } from '@affine/env';
 import { createI18n, I18nextProvider } from '@affine/i18n';

package.json

@@ -72,6 +72,7 @@
     "typescript": "^5.0.3",
     "vite": "^4.2.1",
     "vite-plugin-istanbul": "^4.0.1",
+    "vite-tsconfig-paths": "^4.0.8",
     "vitest": "^0.29.8",
     "vitest-fetch-mock": "^0.2.2"
   },

packages/component/.storybook/main.ts

@@ -1,6 +1,7 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 import { fileURLToPath } from 'node:url';
 import { mergeConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -15,6 +16,11 @@ export default {
   },
   async viteFinal(config, { configType }) {
     return mergeConfig(config, {
+      plugins: [
+        tsconfigPaths({
+          root: fileURLToPath(new URL('../../../', import.meta.url)),
+        }),
+      ],
       define: {
         'process.env': {},
       },

packages/component/.storybook/preview.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import '@blocksuite/editor/themes/affine.css';
+import '../src/theme/global.css';
 
 import { getDarkTheme, getLightTheme, ThemeProvider } from '@affine/component';
 import { useDarkMode } from 'storybook-dark-mode';

packages/component/package.json

@@ -10,6 +10,7 @@
   },
   "exports": {
     ".": "./src/index.ts",
+    "./theme/*": "./src/theme/*",
     "./*": "./src/components/*/index.tsx"
   },
   "dependencies": {
@@ -28,6 +29,7 @@
     "@mui/base": "5.0.0-alpha.123",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.15",
+    "@toeverything/hooks": "workspace:*",
     "lit": "^2.7.0",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",

packages/component/src/components/workspace-avatar/index.tsx

@@ -1,10 +1,29 @@
-import { UNTITLED_WORKSPACE_NAME } from '@affine/env';
+import type { AffineWorkspace, LocalWorkspace } from '@affine/workspace/type';
+import type { Workspace } from '@blocksuite/store';
 import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-blocksuite-workspace-avatar-url';
 import type React from 'react';
 import { memo } from 'react';
 
-import type { AllWorkspace, BlockSuiteWorkspace } from '../../../shared';
-import { stringToColour } from '../../../utils';
+function stringToColour(str: string) {
+  str = str || 'affine';
+  let colour = '#';
+  let hash = 0;
+  // str to hash
+  for (
+    let i = 0;
+    i < str.length;
+    hash = str.charCodeAt(i++) + ((hash << 5) - hash)
+  );
+
+  // int/hash to hex
+  for (
+    let i = 0;
+    i < 3;
+    colour += ('00' + ((hash >> (i++ * 8)) & 0xff).toString(16)).slice(-2)
+  );
+
+  return colour;
+}
 
 interface AvatarProps {
   size: number;
@@ -76,7 +95,7 @@ export const Avatar: React.FC<AvatarProps> = memo<AvatarProps>(function Avatar({
 
 export type WorkspaceUnitAvatarProps = {
   size?: number;
-  workspace: AllWorkspace | null;
+  workspace: LocalWorkspace | AffineWorkspace | null;
   style?: React.CSSProperties;
 };
 
@@ -84,7 +103,7 @@ export type BlockSuiteWorkspaceAvatar = Omit<
   WorkspaceUnitAvatarProps,
   'workspace'
 > & {
-  workspace: BlockSuiteWorkspace;
+  workspace: Workspace;
 };
 
 export const BlockSuiteWorkspaceAvatar: React.FC<BlockSuiteWorkspaceAvatar> = ({
@@ -99,7 +118,7 @@ export const BlockSuiteWorkspaceAvatar: React.FC<BlockSuiteWorkspaceAvatar> = ({
     <Avatar
       {...props}
       size={size}
-      name={workspace.meta.name ?? UNTITLED_WORKSPACE_NAME}
+      name={workspace.meta.name ?? 'Untitled'}
       avatar_url={avatar ?? ''}
       style={style}
     />

packages/component/src/components/workspace-card/index.tsx

@@ -1,19 +1,12 @@
 import { useTranslation } from '@affine/i18n';
 import { PermissionType } from '@affine/workspace/affine/api';
+import type { AffineWorkspace, LocalWorkspace } from '@affine/workspace/type';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { SettingsIcon } from '@blocksuite/icons';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-blocksuite-workspace-name';
 import type React from 'react';
 import { useCallback } from 'react';
 
-import type { AllWorkspace } from '../../../shared';
-import {
-  CloudWorkspaceIcon,
-  JoinedWorkspaceIcon,
-  LocalDataIcon,
-  LocalWorkspaceIcon,
-  PublishIcon,
-} from '../icons';
 import { WorkspaceAvatar } from '../workspace-avatar';
 import {
   StyledCard,
@@ -21,8 +14,35 @@ import {
   StyleWorkspaceInfo,
   StyleWorkspaceTitle,
 } from './styles';
+
 export type WorkspaceTypeProps = {
-  workspace: AllWorkspace;
+  workspace: AffineWorkspace | LocalWorkspace;
+};
+
+import {
+  CloudWorkspaceIcon as DefaultCloudWorkspaceIcon,
+  JoinedWorkspaceIcon as DefaultJoinedWorkspaceIcon,
+  LocalDataIcon as DefaultLocalDataIcon,
+  LocalWorkspaceIcon as DefaultLocalWorkspaceIcon,
+  PublishIcon as DefaultPublishIcon,
+} from '@blocksuite/icons';
+
+const JoinedWorkspaceIcon = () => {
+  return <DefaultJoinedWorkspaceIcon style={{ color: '#FF646B' }} />;
+};
+const LocalWorkspaceIcon = () => {
+  return <DefaultLocalWorkspaceIcon style={{ color: '#FDBD32' }} />;
+};
+
+const CloudWorkspaceIcon = () => {
+  return <DefaultCloudWorkspaceIcon style={{ color: '#60A5FA' }} />;
+};
+
+const LocalDataIcon = () => {
+  return <DefaultLocalDataIcon style={{ color: '#62CD80' }} />;
+};
+const PublishIcon = () => {
+  return <DefaultPublishIcon style={{ color: '#8699FF' }} />;
 };
 
 const WorkspaceType: React.FC<WorkspaceTypeProps> = ({ workspace }) => {
@@ -58,9 +78,9 @@ const WorkspaceType: React.FC<WorkspaceTypeProps> = ({ workspace }) => {
 
 export type WorkspaceCardProps = {
   currentWorkspaceId: string | null;
-  workspace: AllWorkspace;
-  onClick: (workspace: AllWorkspace) => void;
-  onSettingClick: (workspace: AllWorkspace) => void;
+  workspace: AffineWorkspace | LocalWorkspace;
+  onClick: (workspace: AffineWorkspace | LocalWorkspace) => void;
+  onSettingClick: (workspace: AffineWorkspace | LocalWorkspace) => void;
 };
 
 export const WorkspaceCard: React.FC<WorkspaceCardProps> = ({

packages/component/src/components/workspace-card/styles.ts

@@ -1,5 +1,5 @@
-import { displayFlex, styled, textEllipsis } from '@affine/component';
-import { IconButton } from '@affine/component';
+import { displayFlex, styled, textEllipsis } from '../..';
+import { IconButton } from '../..';
 
 export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
   return {

packages/component/src/stories/WorkspaceCard.stories.tsx

@@ -0,0 +1,31 @@
+import { WorkspaceFlavour } from '@affine/workspace/type';
+import { Workspace } from '@blocksuite/store';
+
+import { WorkspaceCard } from '../components/workspace-card';
+
+export default {
+  title: 'AFFiNE/WorkspaceCard',
+  component: WorkspaceCard,
+};
+
+const blockSuiteWorkspace = new Workspace({
+  id: 'blocksuite-local',
+});
+
+blockSuiteWorkspace.meta.setName('Hello World');
+
+export const Basic = () => {
+  return (
+    <WorkspaceCard
+      workspace={{
+        flavour: WorkspaceFlavour.LOCAL,
+        id: 'local',
+        blockSuiteWorkspace,
+        providers: [],
+      }}
+      onClick={() => {}}
+      onSettingClick={() => {}}
+      currentWorkspaceId={null}
+    />
+  );
+};

yarn.lock

@@ -92,6 +92,7 @@ __metadata:
     "@storybook/react-vite": 7.0.0
     "@storybook/test-runner": 0.10.0-next.12
     "@storybook/testing-library": 0.0.14-next.2
+    "@toeverything/hooks": "workspace:*"
     "@types/react": ^18.0.31
     "@types/react-dnd": ^3.0.2
     "@types/react-dom": 18.0.11
@@ -7448,6 +7449,7 @@ __metadata:
     typescript: ^5.0.3
     vite: ^4.2.1
     vite-plugin-istanbul: ^4.0.1
+    vite-tsconfig-paths: ^4.0.8
     vitest: ^0.29.8
     vitest-fetch-mock: ^0.2.2
   languageName: unknown
@@ -18447,6 +18449,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tsconfck@npm:^2.1.0":
+  version: 2.1.1
+  resolution: "tsconfck@npm:2.1.1"
+  peerDependencies:
+    typescript: ^4.3.5 || ^5.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  bin:
+    tsconfck: bin/tsconfck.js
+  checksum: c531525f39763cbbd7e6dbf5e29f12a7ae67eb8712816c14d06a9db6cbdc9dda9ac3cd6db07ef645f8a4cdea906447ab44e2c8679e320871cf9dd598756e8c83
+  languageName: node
+  linkType: hard
+
 "tsconfig-paths@npm:^3.14.1":
   version: 3.14.2
   resolution: "tsconfig-paths@npm:3.14.2"
@@ -19098,6 +19114,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-tsconfig-paths@npm:^4.0.8":
+  version: 4.0.8
+  resolution: "vite-tsconfig-paths@npm:4.0.8"
+  dependencies:
+    debug: ^4.1.1
+    globrex: ^0.1.2
+    tsconfck: ^2.1.0
+  peerDependencies:
+    vite: "*"
+  peerDependenciesMeta:
+    vite:
+      optional: true
+  checksum: 4ec41f5d2eb167c1d7dfa6dd196ce253406c071671199239f9721fd5f8aee5b0107503a520ca996da67bad7d2750829534ec6e93801abe6d24fbc71d46ae8665
+  languageName: node
+  linkType: hard
+
 "vite@npm:^3.0.0 || ^4.0.0, vite@npm:^4.2.1":
   version: 4.2.1
   resolution: "vite@npm:4.2.1"