feat: migrate workspace setting with new design to setting modal (#2900)

Co-authored-by: Alex Yang <himself65@outlook.com>

packages/component/src/components/setting-components/index.tsx

@@ -0,0 +1,4 @@
+export { SettingModal, type SettingModalProps } from './modal';
+export { SettingHeader } from './setting-header';
+export { SettingRow } from './setting-row';
+export { SettingWrapper } from './wrapper';

packages/component/src/components/setting-components/modal.tsx

@@ -0,0 +1,42 @@
+import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
+import type { FC, PropsWithChildren } from 'react';
+import { useCallback } from 'react';
+
+export type SettingModalProps = {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+};
+
+export const SettingModal: FC<PropsWithChildren<SettingModalProps>> = ({
+  children,
+  open,
+  setOpen,
+}) => {
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      wrapperPosition={['center', 'center']}
+      data-testid="setting-modal"
+    >
+      <ModalWrapper
+        width={1080}
+        height={760}
+        style={{
+          maxHeight: '85vh',
+          maxWidth: '70vw',
+          overflow: 'hidden',
+          display: 'flex',
+          backgroundColor: 'var(--affine-white)',
+        }}
+      >
+        <ModalCloseButton top={16} right={20} onClick={handleClose} />
+        {children}
+      </ModalWrapper>
+    </Modal>
+  );
+};

packages/component/src/components/setting-components/setting-header.tsx

@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+
+import { settingHeader } from './share.css';
+export const SettingHeader: FC<{ title: string; subtitle?: string }> = ({
+  title,
+  subtitle,
+}) => {
+  return (
+    <div className={settingHeader}>
+      <div className="title">{title}</div>
+      <div className="subtitle">{subtitle}</div>
+    </div>
+  );
+};

packages/component/src/components/setting-components/setting-row.tsx

@@ -0,0 +1,30 @@
+import clsx from 'clsx';
+import type { CSSProperties, FC, PropsWithChildren, ReactElement } from 'react';
+
+import { settingRow } from './share.css';
+
+export const SettingRow: FC<
+  PropsWithChildren<{
+    name: string | ReactElement;
+    desc: string | ReactElement;
+    style?: CSSProperties;
+    onClick?: () => void;
+    spreadCol?: boolean;
+  }>
+> = ({ name, desc, children, onClick, style, spreadCol = true }) => {
+  return (
+    <div
+      className={clsx(settingRow, {
+        'two-col': spreadCol,
+      })}
+      style={style}
+      onClick={onClick}
+    >
+      <div className="left-col">
+        <div className="name">{name}</div>
+        <div className="desc">{desc}</div>
+      </div>
+      {spreadCol ? <div className="right-col">{children}</div> : children}
+    </div>
+  );
+};

packages/component/src/components/setting-components/share.css.ts

@@ -0,0 +1,82 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const settingHeader = style({
+  height: '68px',
+  borderBottom: '1px solid var(--affine-border-color)',
+  marginBottom: '24px',
+});
+
+globalStyle(`${settingHeader} .title`, {
+  fontSize: 'var(--affine-font-base)',
+  fontWeight: 600,
+  lineHeight: '24px',
+  marginBottom: '4px',
+});
+
+globalStyle(`${settingHeader} .subtitle`, {
+  fontSize: 'var(--affine-font-xs)',
+  lineHeight: '16px',
+  color: 'var(--affine-text-secondary-color)',
+});
+
+export const wrapper = style({
+  borderBottom: '1px solid var(--affine-border-color)',
+  paddingBottom: '24px',
+  marginBottom: '24px',
+  selectors: {
+    '&:last-of-type': {
+      borderBottom: 'none',
+      paddingBottom: '0',
+      marginBottom: '0',
+    },
+  },
+});
+
+globalStyle(`${wrapper} .title`, {
+  fontSize: 'var(--affine-font-sm)',
+  fontWeight: 600,
+  lineHeight: '18px',
+  color: 'var(--affine-text-secondary-color)',
+  marginBottom: '16px',
+});
+
+export const settingRow = style({
+  marginBottom: '25px',
+  color: 'var(--affine-text-primary-color)',
+  borderRadius: '8px',
+  selectors: {
+    '&.two-col': {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    '&:last-of-type': {
+      marginBottom: '0',
+    },
+  },
+});
+
+globalStyle(`${settingRow} .left-col`, {
+  flexShrink: 0,
+  maxWidth: '100%',
+});
+globalStyle(`${settingRow}.two-col .left-col`, {
+  flexShrink: 0,
+  maxWidth: '80%',
+});
+globalStyle(`${settingRow} .name`, {
+  marginBottom: '2px',
+  fontSize: 'var(--affine-font-sm)',
+  fontWeight: 600,
+});
+globalStyle(`${settingRow} .desc`, {
+  fontSize: 'var(--affine-font-xs)',
+  color: 'var(--affine-text-secondary-color)',
+});
+globalStyle(`${settingRow} .right-col`, {
+  flexGrow: 1,
+  display: 'flex',
+  justifyContent: 'flex-end',
+  paddingLeft: '15px',
+  flexShrink: 0,
+});

packages/component/src/components/setting-components/wrapper.tsx

@@ -0,0 +1,15 @@
+import type { FC, PropsWithChildren } from 'react';
+
+import { wrapper } from './share.css';
+export const SettingWrapper: FC<
+  PropsWithChildren<{
+    title?: string;
+  }>
+> = ({ title, children }) => {
+  return (
+    <div className={wrapper}>
+      {title ? <div className="title">{title}</div> : null}
+      {children}
+    </div>
+  );
+};