Skip to content

Commit

Permalink
feat(core): doc database properties
Browse files Browse the repository at this point in the history
  • Loading branch information
pengx17 committed Oct 23, 2024
1 parent 3f0219a commit 61100a2
Show file tree
Hide file tree
Showing 67 changed files with 3,205 additions and 921 deletions.
10 changes: 10 additions & 0 deletions packages/common/infra/src/modules/doc/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,14 @@ export const BUILT_IN_CUSTOM_PROPERTY_TYPE = [
show: 'always-hide',
index: 'a0000003',
},
{
id: 'createdAt',
type: 'createdAt',
index: 'a0000004',
},
{
id: 'updatedAt',
type: 'updatedAt',
index: 'a0000005',
},
] as DocCustomPropertyInfo[];
23 changes: 15 additions & 8 deletions packages/frontend/component/.storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import './polyfill';
import { getOrCreateI18n, I18nextProvider } from '@affine/i18n';
import { ThemeProvider } from 'next-themes';
import type { ComponentType } from 'react';
import '../src/theme';
import './polyfill';
import './preview.css';
import { ConfirmModalProvider } from '../src/ui/modal/confirm-modal';

import { ThemeProvider, useTheme as useNextTheme } from 'next-themes';
import type { ComponentType } from 'react';
import React, { useEffect } from 'react';
import type { Preview } from '@storybook/react';
import React, { useEffect } from 'react';
import { ConfirmModalProvider } from '../src/ui/modal/confirm-modal';

import { setupGlobal } from '@affine/env/global';
import { useTheme as useNextTheme } from 'next-themes';

setupGlobal();

Expand Down Expand Up @@ -45,14 +48,18 @@ const ThemeToggle = ({ context }) => {
return null;
};

const i18n = getOrCreateI18n();

export const decorators = [
(Story: ComponentType, context) => {
return (
<ThemeProvider themes={['dark', 'light']} enableSystem={true}>
<ThemeToggle context={context} />
<ConfirmModalProvider>
<Story {...context} />
</ConfirmModalProvider>
<I18nextProvider i18n={i18n}>
<ConfirmModalProvider>
<Story {...context} />
</ConfirmModalProvider>
</I18nextProvider>
</ThemeProvider>
);
},
Expand Down
2 changes: 2 additions & 0 deletions packages/frontend/component/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,11 @@
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-collapsible": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-progress": "^1.1.0",
"@radix-ui/react-radio-group": "^1.1.3",
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-slider": "^1.2.0",
Expand Down
1 change: 1 addition & 0 deletions packages/frontend/component/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export * from './ui/menu';
export * from './ui/modal';
export * from './ui/notification';
export * from './ui/popover';
export * from './ui/progress';
export * from './ui/property';
export * from './ui/radio';
export * from './ui/safe-area';
Expand Down
3 changes: 2 additions & 1 deletion packages/frontend/component/src/theme/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,8 @@ body {
/**
* A hack to make the anchor wrapper not affect the layout of the page.
*/
[data-lit-react-wrapper] {
[data-lit-react-wrapper],
affine-lit-template-wrapper {
display: contents;
}

Expand Down
1 change: 1 addition & 0 deletions packages/frontend/component/src/ui/progress/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './progress';
71 changes: 71 additions & 0 deletions packages/frontend/component/src/ui/progress/progress.css.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { cssVar } from '@toeverything/theme';
import { cssVarV2 } from '@toeverything/theme/v2';
import { createVar, style } from '@vanilla-extract/css';

const progressHeight = createVar();

export const root = style({
height: '20px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
width: 240,
gap: 12,
vars: {
[progressHeight]: '10px',
},
});

export const progress = style({
height: progressHeight,
flex: 1,
background: cssVarV2('layer/background/hoverOverlay'),
borderRadius: 5,
position: 'relative',
});

export const sliderRoot = style({
height: progressHeight,
width: '100%',
position: 'absolute',
top: 0,
left: 0,
});

export const thumb = style({
width: '4px',
height: `calc(${progressHeight} + 2px)`,
transform: 'translateY(-1px)',
borderRadius: '2px',
display: 'block',
background: cssVarV2('layer/insideBorder/primaryBorder'),
opacity: 0,
selectors: {
[`${root}:hover &, &:is(:focus-visible, :focus-within)`]: {
opacity: 1,
},
},
});

export const label = style({
width: '40px',
fontSize: cssVar('fontSm'),
});

export const indicator = style({
height: '100%',
width: '100%',
borderRadius: 5,
background: cssVarV2('toast/iconState/regular'),
transition: 'background 0.2s ease-in-out',
selectors: {
[`${root}:hover &, &:has(${thumb}:is(:focus-visible, :focus-within, :active))`]:
{
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
},
[`[data-state="complete"]&`]: {
background: cssVarV2('status/success'),
},
},
});
19 changes: 19 additions & 0 deletions packages/frontend/component/src/ui/progress/progress.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import type { Meta, StoryFn } from '@storybook/react';
import { useState } from 'react';

import type { ProgressProps } from './progress';
import { Progress } from './progress';

export default {
title: 'UI/Progress',
component: Progress,
} satisfies Meta<typeof Progress>;

const Template: StoryFn<ProgressProps> = () => {
const [value, setValue] = useState<number>(30);
return (
<Progress style={{ width: '200px' }} value={value} onChange={setValue} />
);
};

export const Default: StoryFn<ProgressProps> = Template.bind(undefined);
51 changes: 51 additions & 0 deletions packages/frontend/component/src/ui/progress/progress.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import * as RadixProgress from '@radix-ui/react-progress';
import * as RadixSlider from '@radix-ui/react-slider';
import clsx from 'clsx';

import * as styles from './progress.css';

export interface ProgressProps {
/**
* The value of the progress bar.
* A value between 0 and 100.
*/
value: number;
onChange?: (value: number) => void;
onBlur?: () => void;
readonly?: boolean;
className?: string;
style?: React.CSSProperties;
}

export const Progress = ({
value,
onChange,
onBlur,
readonly,
className,
style,
}: ProgressProps) => {
return (
<div className={clsx(styles.root, className)} style={style}>
<RadixProgress.Root className={styles.progress} value={value}>
<RadixProgress.Indicator
className={styles.indicator}
style={{ width: `${value}%` }}
/>
{!readonly ? (
<RadixSlider.Root
className={styles.sliderRoot}
min={0}
max={100}
value={[value]}
onValueChange={values => onChange?.(values[0])}
onBlur={onBlur}
>
<RadixSlider.Thumb className={styles.thumb} />
</RadixSlider.Root>
) : null}
</RadixProgress.Root>
<div className={styles.label}>{value}%</div>
</div>
);
};
76 changes: 69 additions & 7 deletions packages/frontend/component/src/ui/property/property.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -129,15 +129,13 @@ export const propertyValueContainer = style({
color: cssVarV2('text/placeholder'),
},
selectors: {
'&[data-readonly="false"]': {
'&[data-readonly="false"][data-hoverable="true"]': {
cursor: 'pointer',
},
'&[data-readonly="false"]:hover': {
backgroundColor: cssVarV2('layer/background/hoverOverlay'),
},
'&[data-readonly="false"]:focus-within': {
backgroundColor: cssVarV2('layer/background/hoverOverlay'),
},
'&[data-readonly="false"][data-hoverable="true"]:is(:hover, :focus-within)':
{
backgroundColor: cssVarV2('layer/background/hoverOverlay'),
},
},
});

Expand All @@ -162,3 +160,67 @@ globalStyle(`${tableButton} svg`, {
globalStyle(`${tableButton}:hover svg`, {
color: cssVarV2('icon/primary'),
});

export const section = style({
display: 'flex',
flexDirection: 'column',
gap: 8,
});

export const sectionHeader = style({
display: 'flex',
alignItems: 'center',
gap: 4,
padding: '4px 6px',
minHeight: 30,
});

export const sectionHeaderTrigger = style({
display: 'flex',
alignItems: 'center',
gap: 4,
flex: 1,
});

export const sectionHeaderIcon = style({
width: 16,
height: 16,
fontSize: 16,
color: cssVarV2('icon/primary'),
});

export const sectionHeaderName = style({
display: 'flex',
alignItems: 'center',
fontSize: cssVar('fontSm'),
fontWeight: 500,
whiteSpace: 'nowrap',
selectors: {
'&[data-collapsed="true"]': {
color: cssVarV2('text/secondary'),
},
},
});

export const sectionCollapsedIcon = style({
transition: 'all 0.2s ease-in-out',
color: cssVarV2('icon/primary'),
fontSize: 20,
selectors: {
'&[data-collapsed="true"]': {
transform: 'rotate(90deg)',
color: cssVarV2('icon/secondary'),
},
},
});

export const sectionContent = style({
display: 'flex',
flexDirection: 'column',
gap: 4,
selectors: {
'&[hidden]': {
display: 'none',
},
},
});
24 changes: 18 additions & 6 deletions packages/frontend/component/src/ui/property/property.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { FrameIcon } from '@blocksuite/icons/rc';
import { useDraggable, useDropTarget } from '../dnd';
import { MenuItem } from '../menu';
import {
PropertyCollapsible,
PropertyCollapsibleContent,
PropertyCollapsibleSection,
PropertyName,
PropertyRoot,
PropertyValue,
Expand Down Expand Up @@ -100,9 +101,9 @@ export const HideEmptyProperty = () => {
);
};

export const BasicPropertyCollapsible = () => {
export const BasicPropertyCollapsibleContent = () => {
return (
<PropertyCollapsible collapsible>
<PropertyCollapsibleContent collapsible>
<PropertyRoot>
<PropertyName name="Always show" icon={<FrameIcon />} />
<PropertyValue>Value</PropertyValue>
Expand All @@ -115,13 +116,24 @@ export const BasicPropertyCollapsible = () => {
<PropertyName name="Hide" icon={<FrameIcon />} />
<PropertyValue>Value</PropertyValue>
</PropertyRoot>
</PropertyCollapsible>
</PropertyCollapsibleContent>
);
};

export const BasicPropertyCollapsibleSection = () => {
return (
<PropertyCollapsibleSection
icon={<FrameIcon />}
title="Collapsible Section"
>
<BasicPropertyCollapsibleContent />
</PropertyCollapsibleSection>
);
};

export const PropertyCollapsibleCustomButton = () => {
return (
<PropertyCollapsible
<PropertyCollapsibleContent
collapsible
collapseButtonText={({ hide, isCollapsed }) =>
`${isCollapsed ? 'Show' : 'Hide'} ${hide} properties`
Expand All @@ -139,6 +151,6 @@ export const PropertyCollapsibleCustomButton = () => {
<PropertyName name="Hide" icon={<FrameIcon />} />
<PropertyValue>Value</PropertyValue>
</PropertyRoot>
</PropertyCollapsible>
</PropertyCollapsibleContent>
);
};
Loading

0 comments on commit 61100a2

Please sign in to comment.