From 017b9c86153e64ff52a052393b03a433eb680418 Mon Sep 17 00:00:00 2001 From: Whitewater Date: Tue, 16 May 2023 03:19:28 -0700 Subject: [PATCH] feat: add block card component (#2398) --- .../src/components/card/block-card/index.tsx | 25 +++++++++ .../components/card/block-card/styles.css.ts | 35 ++++++++++++ .../{ => card}/workspace-card/index.tsx | 2 +- .../{ => card}/workspace-card/styles.ts | 4 +- .../src/components/share-menu/share-menu.tsx | 2 +- .../src/components/workspace-list/index.tsx | 2 +- .../component/src/stories/card.stories.tsx | 55 +++++++++++++++++++ .../src/stories/workspace-card.stories.tsx | 31 ----------- 8 files changed, 120 insertions(+), 36 deletions(-) create mode 100644 packages/component/src/components/card/block-card/index.tsx create mode 100644 packages/component/src/components/card/block-card/styles.css.ts rename packages/component/src/components/{ => card}/workspace-card/index.tsx (98%) rename packages/component/src/components/{ => card}/workspace-card/styles.ts (94%) create mode 100644 packages/component/src/stories/card.stories.tsx delete mode 100644 packages/component/src/stories/workspace-card.stories.tsx diff --git a/packages/component/src/components/card/block-card/index.tsx b/packages/component/src/components/card/block-card/index.tsx new file mode 100644 index 0000000000..ffdc614209 --- /dev/null +++ b/packages/component/src/components/card/block-card/index.tsx @@ -0,0 +1,25 @@ +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; + } & HTMLAttributes +>(({ left, title, desc, right, ...props }, ref) => { + return ( +
+ {left &&
{left}
} +
+
{title}
+
{desc}
+
+ {right &&
{right}
} +
+ ); +}); +BlockCard.displayName = 'BlockCard'; diff --git a/packages/component/src/components/card/block-card/styles.css.ts b/packages/component/src/components/card/block-card/styles.css.ts new file mode 100644 index 0000000000..04e238d4f8 --- /dev/null +++ b/packages/component/src/components/card/block-card/styles.css.ts @@ -0,0 +1,35 @@ +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-background-primary-color)', + borderRadius: '4px', + userSelect: 'none', + cursor: 'pointer', + selectors: { + '&:hover': { + boxShadow: 'var(--affine-shadow-1)', + }, + // 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)', +}); diff --git a/packages/component/src/components/workspace-card/index.tsx b/packages/component/src/components/card/workspace-card/index.tsx similarity index 98% rename from packages/component/src/components/workspace-card/index.tsx rename to packages/component/src/components/card/workspace-card/index.tsx index d545603c49..3b2e80bf99 100644 --- a/packages/component/src/components/workspace-card/index.tsx +++ b/packages/component/src/components/card/workspace-card/index.tsx @@ -10,7 +10,7 @@ import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite- import type { FC } from 'react'; import { useCallback } from 'react'; -import { WorkspaceAvatar } from '../workspace-avatar'; +import { WorkspaceAvatar } from '../../workspace-avatar'; import { StyledCard, StyledSettingLink, diff --git a/packages/component/src/components/workspace-card/styles.ts b/packages/component/src/components/card/workspace-card/styles.ts similarity index 94% rename from packages/component/src/components/workspace-card/styles.ts rename to packages/component/src/components/card/workspace-card/styles.ts index ea995ec9a0..7b32c78b5e 100644 --- a/packages/component/src/components/workspace-card/styles.ts +++ b/packages/component/src/components/card/workspace-card/styles.ts @@ -1,5 +1,5 @@ -import { displayFlex, styled, textEllipsis } from '../..'; -import { IconButton } from '../..'; +import { displayFlex, styled, textEllipsis } from '../../../styles'; +import { IconButton } from '../../../ui/button/icon-button'; export const StyleWorkspaceInfo = styled('div')(() => { return { diff --git a/packages/component/src/components/share-menu/share-menu.tsx b/packages/component/src/components/share-menu/share-menu.tsx index 99e0b729a7..10e493f05f 100644 --- a/packages/component/src/components/share-menu/share-menu.tsx +++ b/packages/component/src/components/share-menu/share-menu.tsx @@ -9,7 +9,7 @@ import type { FC } from 'react'; import { useRef } from 'react'; import { useCallback, useState } from 'react'; -import { Menu } from '../..'; +import { Menu } from '../../ui/menu/menu'; import { Export } from './export'; import { containerStyle, indicatorContainerStyle, tabStyle } from './index.css'; import { SharePage } from './share-page'; diff --git a/packages/component/src/components/workspace-list/index.tsx b/packages/component/src/components/workspace-list/index.tsx index 5730bb89ab..3e69dd03e1 100644 --- a/packages/component/src/components/workspace-list/index.tsx +++ b/packages/component/src/components/workspace-list/index.tsx @@ -12,7 +12,7 @@ import { import { SortableContext, useSortable } from '@dnd-kit/sortable'; import type { FC } from 'react'; -import { WorkspaceCard } from '../workspace-card'; +import { WorkspaceCard } from '../../components/card/workspace-card'; import { workspaceItemStyle } from './index.css'; export type WorkspaceListProps = { diff --git a/packages/component/src/stories/card.stories.tsx b/packages/component/src/stories/card.stories.tsx new file mode 100644 index 0000000000..f3d838ed51 --- /dev/null +++ b/packages/component/src/stories/card.stories.tsx @@ -0,0 +1,55 @@ +import { BlockCard } from '@affine/component/card/block-card'; +import { WorkspaceFlavour } from '@affine/workspace/type'; +import { EdgelessIcon, PageIcon } from '@blocksuite/icons'; +import { Workspace } from '@blocksuite/store'; + +import { WorkspaceCard } from '../components/card/workspace-card'; +import { toast } from '../ui/toast'; + +export default { + title: 'AFFiNE/Card', + component: WorkspaceCard, +}; + +const blockSuiteWorkspace = new Workspace({ + id: 'blocksuite-local', +}); + +blockSuiteWorkspace.meta.setName('Hello World'); + +export const AffineWorkspaceCard = () => { + return ( + {}} + onSettingClick={() => {}} + currentWorkspaceId={null} + /> + ); +}; + +export const AffineBlockCard = () => { + return ( +
+ toast('clicked')} /> + } + onClick={() => toast('clicked page')} + /> + } + right={} + onClick={() => toast('clicked edgeless')} + /> +
+ ); +}; diff --git a/packages/component/src/stories/workspace-card.stories.tsx b/packages/component/src/stories/workspace-card.stories.tsx deleted file mode 100644 index cba0427952..0000000000 --- a/packages/component/src/stories/workspace-card.stories.tsx +++ /dev/null @@ -1,31 +0,0 @@ -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} - /> - ); -};