From 9a20f50b05b963df82cf08afd8decade7a5b24b7 Mon Sep 17 00:00:00 2001 From: Himself65 Date: Mon, 3 Apr 2023 18:13:43 -0500 Subject: [PATCH] refactor: move `WorkspaceCard` (#1803) --- .husky/pre-commit | 5 +++ apps/electron/yarn.lock | 3 +- .../panel/general/index.tsx | 2 +- .../pure/workspace-list-modal/index.tsx | 2 +- .../WorkspaceSelector/WorkspaceSelector.tsx | 2 +- apps/web/src/pages/_app.tsx | 2 +- package.json | 1 + packages/component/.storybook/main.ts | 6 +++ packages/component/.storybook/preview.tsx | 1 + packages/component/package.json | 2 + .../components}/workspace-avatar/index.tsx | 31 ++++++++++--- .../src/components}/workspace-card/index.tsx | 44 ++++++++++++++----- .../src/components}/workspace-card/styles.ts | 4 +- .../src/stories/WorkspaceCard.stories.tsx | 31 +++++++++++++ .../component/src/theme/global.css | 0 yarn.lock | 32 ++++++++++++++ 16 files changed, 143 insertions(+), 25 deletions(-) rename {apps/web/src/components/pure => packages/component/src/components}/workspace-avatar/index.tsx (81%) rename {apps/web/src/components/pure => packages/component/src/components}/workspace-card/index.tsx (72%) rename {apps/web/src/components/pure => packages/component/src/components}/workspace-card/styles.ts (94%) create mode 100644 packages/component/src/stories/WorkspaceCard.stories.tsx rename apps/web/src/styles/globals.css => packages/component/src/theme/global.css (100%) diff --git a/.husky/pre-commit b/.husky/pre-commit index 600e12fe6f..931f8cb11f 100755 --- a/.husky/pre-commit +++ b/.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 diff --git a/apps/electron/yarn.lock b/apps/electron/yarn.lock index 0f8c30694a..93344ff7d1 100644 --- a/apps/electron/yarn.lock +++ b/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 diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx b/apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx index 0e6e76208f..07574429c8 100644 --- a/apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx +++ b/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'; diff --git a/apps/web/src/components/pure/workspace-list-modal/index.tsx b/apps/web/src/components/pure/workspace-list-modal/index.tsx index c771de808a..8a8765d1d9 100644 --- a/apps/web/src/components/pure/workspace-list-modal/index.tsx +++ b/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, diff --git a/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx b/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx index ee34a83114..ea7f532690 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx +++ b/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, diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx index b7a8ffb98d..629820fca1 100644 --- a/apps/web/src/pages/_app.tsx +++ b/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'; diff --git a/package.json b/package.json index e6aa628c92..08bf85be7a 100644 --- a/package.json +++ b/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" }, diff --git a/packages/component/.storybook/main.ts b/packages/component/.storybook/main.ts index d2193e8451..e4d06d30c8 100644 --- a/packages/component/.storybook/main.ts +++ b/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': {}, }, diff --git a/packages/component/.storybook/preview.tsx b/packages/component/.storybook/preview.tsx index a82ef0ab71..2f588c50dd 100644 --- a/packages/component/.storybook/preview.tsx +++ b/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'; diff --git a/packages/component/package.json b/packages/component/package.json index 896445a95c..0f9120d057 100644 --- a/packages/component/package.json +++ b/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", diff --git a/apps/web/src/components/pure/workspace-avatar/index.tsx b/packages/component/src/components/workspace-avatar/index.tsx similarity index 81% rename from apps/web/src/components/pure/workspace-avatar/index.tsx rename to packages/component/src/components/workspace-avatar/index.tsx index d00b1dfc2f..6ac5a09c93 100644 --- a/apps/web/src/components/pure/workspace-avatar/index.tsx +++ b/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 = memo(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 = ({ @@ -99,7 +118,7 @@ export const BlockSuiteWorkspaceAvatar: React.FC = ({ diff --git a/apps/web/src/components/pure/workspace-card/index.tsx b/packages/component/src/components/workspace-card/index.tsx similarity index 72% rename from apps/web/src/components/pure/workspace-card/index.tsx rename to packages/component/src/components/workspace-card/index.tsx index 763c1be9da..627a4b13e3 100644 --- a/apps/web/src/components/pure/workspace-card/index.tsx +++ b/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 ; +}; +const LocalWorkspaceIcon = () => { + return ; +}; + +const CloudWorkspaceIcon = () => { + return ; +}; + +const LocalDataIcon = () => { + return ; +}; +const PublishIcon = () => { + return ; }; const WorkspaceType: React.FC = ({ workspace }) => { @@ -58,9 +78,9 @@ const WorkspaceType: React.FC = ({ 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 = ({ diff --git a/apps/web/src/components/pure/workspace-card/styles.ts b/packages/component/src/components/workspace-card/styles.ts similarity index 94% rename from apps/web/src/components/pure/workspace-card/styles.ts rename to packages/component/src/components/workspace-card/styles.ts index 51fddfe584..8d8cd158d3 100644 --- a/apps/web/src/components/pure/workspace-card/styles.ts +++ b/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 { diff --git a/packages/component/src/stories/WorkspaceCard.stories.tsx b/packages/component/src/stories/WorkspaceCard.stories.tsx new file mode 100644 index 0000000000..cba0427952 --- /dev/null +++ b/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 ( + {}} + onSettingClick={() => {}} + currentWorkspaceId={null} + /> + ); +}; diff --git a/apps/web/src/styles/globals.css b/packages/component/src/theme/global.css similarity index 100% rename from apps/web/src/styles/globals.css rename to packages/component/src/theme/global.css diff --git a/yarn.lock b/yarn.lock index 50bb9a3cd3..cc28f4a1f2 100644 --- a/yarn.lock +++ b/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"