feat(core): doc database properties

packages/frontend/component/.storybook/preview.tsx

@@ -2,6 +2,7 @@ import './polyfill';
 import '../src/theme';
 import './preview.css';
 import { ThemeProvider } from 'next-themes';
+import { getOrCreateI18n, I18nextProvider } from '@affine/i18n';
 import type { ComponentType } from 'react';
 
 import type { Preview } from '@storybook/react';
@@ -42,14 +43,18 @@ const useTheme = context => {
   }, [theme]);
 };
 
+const i18n = getOrCreateI18n();
+
 export const decorators = [
   (Story: ComponentType, context) => {
     useTheme(context);
     return (
       <ThemeProvider themes={['dark', 'light']} enableSystem={true}>
-        <ConfirmModalProvider>
-          <Story {...context} />
-        </ConfirmModalProvider>
+        <I18nextProvider i18n={i18n}>
+          <ConfirmModalProvider>
+            <Story {...context} />
+          </ConfirmModalProvider>
+        </I18nextProvider>
       </ThemeProvider>
     );
   },

packages/frontend/component/package.json

@@ -30,6 +30,7 @@
     "@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",

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';

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;
 }
 

packages/frontend/component/src/ui/progress/index.ts

@@ -0,0 +1 @@
+export * from './progress';

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'),
+    },
+  },
+});

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);

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>
+  );
+};

packages/frontend/component/src/ui/tags/index.ts

@@ -0,0 +1,3 @@
+export * from './tag';
+export * from './tags-editor';
+export * from './types';

packages/frontend/component/src/ui/tags/inline-tag-list.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const inlineTagsContainer = style({
+  display: 'flex',
+  gap: '6px',
+  flexWrap: 'wrap',
+  width: '100%',
+});

packages/frontend/component/src/ui/tags/inline-tag-list.tsx

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+import * as styles from './inline-tag-list.css';
+import { TagItem } from './tag';
+import type { TagLike } from './types';
+
+interface InlineTagListProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  onRemoved?: (id: string) => void;
+  tags: TagLike[];
+  focusedIndex?: number;
+}
+
+export const InlineTagList = ({
+  children,
+  focusedIndex,
+  tags,
+  onRemoved,
+}: PropsWithChildren<InlineTagListProps>) => {
+  return (
+    <div className={styles.inlineTagsContainer} data-testid="inline-tags-list">
+      {tags.map((tag, idx) => {
+        if (!tag) {
+          return null;
+        }
+        const handleRemoved = onRemoved
+          ? () => {
+              onRemoved?.(tag.id);
+            }
+          : undefined;
+        return (
+          <TagItem
+            key={tag.id}
+            idx={idx}
+            focused={focusedIndex === idx}
+            onRemoved={handleRemoved}
+            mode="inline"
+            tag={tag}
+          />
+        );
+      })}
+      {children}
+    </div>
+  );
+};

packages/frontend/component/src/ui/tags/readme.md

@@ -0,0 +1,3 @@
+# Tags Editor
+
+A common module for both page and database tags editing (serviceless).

packages/frontend/core/src/components/doc-properties/tags-inline-editor.css.ts → packages/frontend/component/src/ui/tags/styles.css.ts

@@ -115,20 +115,6 @@ export const spacer = style({
   flexGrow: 1,
 });
 
-export const tagColorIconWrapper = style({
-  width: 20,
-  height: 20,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
-
-export const tagColorIcon = style({
-  width: 16,
-  height: 16,
-  borderRadius: '50%',
-});
-
 export const menuItemListScrollable = style({});
 
 export const menuItemListScrollbar = style({

packages/frontend/component/src/ui/tags/tag-edit-menu.css.ts

@@ -0,0 +1,32 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const menuItemListScrollable = style({});
+
+export const menuItemListScrollbar = style({
+  transform: 'translateX(4px)',
+});
+
+export const menuItemList = style({
+  display: 'flex',
+  flexDirection: 'column',
+  maxHeight: 200,
+  overflow: 'auto',
+});
+
+globalStyle(`${menuItemList}[data-radix-scroll-area-viewport] > div`, {
+  display: 'table !important',
+});
+
+export const tagColorIconWrapper = style({
+  width: 20,
+  height: 20,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const tagColorIcon = style({
+  width: 16,
+  height: 16,
+  borderRadius: '50%',
+});