toeverything · graphite-app · Oct 24, 2024 · Oct 24, 2024
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>
   );
 };