feat(core): doc database properties (#8520)

fix AF-1454 1. move inline tags editor to components 2. add progress component 3. adjust doc properties styles for desktop 4. subscribe bs database links and display in doc info 5. move update/create dates to doc info 6. a trivial e2e test <div class='graphite__hidden'> <div>🎥 Video uploaded on Graphite:</div> <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/eed266c1-fdac-4f0e-baa9-4aa00d14a2e8.mp4"> <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/eed266c1-fdac-4f0e-baa9-4aa00d14a2e8.mp4"> </a> </div> <video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/eed266c1-fdac-4f0e-baa9-4aa00d14a2e8.mp4">10月23日.mp4</video>
toeverything · Oct 24, 2024 · 4b6c4ed · 4b6c4ed
1 parent f7dc65e
commit 4b6c4ed
Show file tree

Hide file tree

Showing 67 changed files with 3,146 additions and 921 deletions.
diff --git a/packages/common/infra/src/modules/doc/constants.ts b/packages/common/infra/src/modules/doc/constants.ts
@@ -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[];
diff --git a/packages/frontend/component/.storybook/preview.tsx b/packages/frontend/component/.storybook/preview.tsx
@@ -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();
 
@@ -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>
     );
   },

diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json
@@ -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",

diff --git a/packages/frontend/component/src/index.ts b/packages/frontend/component/src/index.ts
@@ -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';

diff --git a/packages/frontend/component/src/theme/global.css b/packages/frontend/component/src/theme/global.css
@@ -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;
 }
 

diff --git a/packages/frontend/component/src/ui/progress/index.ts b/packages/frontend/component/src/ui/progress/index.ts
@@ -0,0 +1 @@
+export * from './progress';
diff --git a/packages/frontend/component/src/ui/progress/progress.css.ts b/packages/frontend/component/src/ui/progress/progress.css.ts
@@ -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'),
+    },
+  },
+});
diff --git a/packages/frontend/component/src/ui/progress/progress.stories.tsx b/packages/frontend/component/src/ui/progress/progress.stories.tsx
@@ -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);
diff --git a/packages/frontend/component/src/ui/progress/progress.tsx b/packages/frontend/component/src/ui/progress/progress.tsx
@@ -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>
+  );
+};
diff --git a/packages/frontend/component/src/ui/property/property.css.ts b/packages/frontend/component/src/ui/property/property.css.ts
@@ -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'),
+      },
   },
 });
 
@@ -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',
+    },
+  },
+});
diff --git a/packages/frontend/component/src/ui/property/property.stories.tsx b/packages/frontend/component/src/ui/property/property.stories.tsx
@@ -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,
@@ -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>
@@ -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`
@@ -139,6 +151,6 @@ export const PropertyCollapsibleCustomButton = () => {
         <PropertyName name="Hide" icon={<FrameIcon />} />
         <PropertyValue>Value</PropertyValue>
       </PropertyRoot>
-    </PropertyCollapsible>
+    </PropertyCollapsibleContent>
   );
 };