Feat/cloud integration (#569)

* Chore/unit test (#538)

* chore: add unit test

* chore: add github action for unit test

* feat: init firebase

* chore: add development secrets

* fix: rename auth -> data-services

* feat: update blocksuite 0.3.0-alpha.4 (#543)

* feat: add requests

* feat: optimize  swr cache

* feat: add Authorization

* feat: add confirm-invitation page

* feat: add account sdk api and proxy

* docs: update contributing (#550)

* docs: update contributing

* Update CONTRIBUTING.md

* Update CONTRIBUTING.md

Co-authored-by: ShortCipher5 <me@shortcipher.me>

* feat: update api

* feat: remove babelrc setting

* feat: add create workspace ui

* feat: choose workspaces

* feat: login modal

* feat: authorization api

* feat: login status

* fix: remove unused variables

* feat: login button

* fix: lint

* fix: workspace id

* fix: i18n type error

Co-authored-by: MingLiang Wang <mingliangwang0o0@gmail.com>
Co-authored-by: ShortCipher5 <me@shortcipher.me>

packages/app/src/ui/button/icon-button.tsx

@@ -39,7 +39,7 @@ export type IconButtonProps = {
     | typeof SIZE_NORMAL
     | [number, number];
   disabled?: boolean;
-  hoverBackground?: string;
+  hoverBackground?: CSSProperties['background'];
   hoverColor?: string;
   hoverStyle?: CSSProperties;
   children: ReactElement<HTMLAttributes<SVGElement>, 'svg'>;

packages/app/src/ui/button/index.ts

@@ -1,2 +1,3 @@
 export * from './icon-button';
 export * from './button';
+export * from './text-button';

packages/app/src/ui/button/styles.ts

@@ -21,7 +21,7 @@ export const StyledIconButton = styled('button', {
   height: number;
   borderRadius: number;
   disabled?: boolean;
-  hoverBackground?: string;
+  hoverBackground?: CSSProperties['background'];
   hoverColor?: string;
   hoverStyle?: CSSProperties;
 }>(
@@ -68,6 +68,70 @@ export const StyledIconButton = styled('button', {
     };
   }
 );
+
+export const StyledTextButton = styled('button', {
+  shouldForwardProp: prop => {
+    return ![
+      'borderRadius',
+      'top',
+      'right',
+      'width',
+      'height',
+      'hoverBackground',
+      'hoverColor',
+      'hoverStyle',
+    ].includes(prop);
+  },
+})<
+  Pick<
+    ButtonProps,
+    | 'size'
+    | 'disabled'
+    | 'hoverBackground'
+    | 'hoverColor'
+    | 'hoverStyle'
+    | 'shape'
+    | 'type'
+    | 'bold'
+  >
+>(
+  ({
+    theme,
+    size = 'default',
+    disabled,
+    hoverBackground,
+    hoverColor,
+    hoverStyle,
+    bold = false,
+    shape = 'default',
+    // TODO: Implement type
+    type = 'default',
+  }) => {
+    const { fontSize, borderRadius, padding, height } = getSize(size);
+    console.log('size', size, height);
+
+    return {
+      height,
+      paddingLeft: padding,
+      paddingRight: padding,
+      ...displayInlineFlex('flex-start', 'center'),
+      position: 'relative',
+      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
+      transition: 'background .15s',
+      // TODO: Implement circle shape
+      borderRadius: shape === 'default' ? borderRadius : height / 2,
+      fontSize,
+      fontWeight: bold ? '500' : '400',
+
+      ':hover': {
+        color: hoverColor ?? theme.colors.primaryColor,
+        background: hoverBackground ?? theme.colors.hoverBackground,
+        ...(hoverStyle ?? {}),
+      },
+    };
+  }
+);
+
 export const StyledButton = styled('button', {
   shouldForwardProp: prop => {
     return !['hoverBackground', 'hoverColor', 'hoverStyle', 'type'].includes(

packages/app/src/ui/button/text-button.tsx

@@ -0,0 +1,53 @@
+import { cloneElement, Children, forwardRef } from 'react';
+import { StyledTextButton } from './styles';
+
+import { ButtonProps } from './interface';
+import { getSize } from './utils';
+
+export const TextButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      size = 'default',
+      disabled = false,
+      hoverBackground,
+      hoverColor,
+      hoverStyle,
+      shape = 'default',
+      icon,
+      type = 'default',
+      children,
+      bold = false,
+      ...props
+    },
+    ref
+  ) => {
+    const { iconSize } = getSize(size);
+
+    return (
+      <StyledTextButton
+        ref={ref}
+        disabled={disabled}
+        size={size}
+        shape={shape}
+        hoverBackground={hoverBackground}
+        hoverColor={hoverColor}
+        hoverStyle={hoverStyle}
+        // @ts-ignore
+        type={type}
+        bold={bold}
+        {...props}
+      >
+        {icon &&
+          cloneElement(Children.only(icon), {
+            width: iconSize,
+            height: iconSize,
+            className: `affine-button-icon ${icon.props.className ?? ''}`,
+          })}
+        {children && <span>{children}</span>}
+      </StyledTextButton>
+    );
+  }
+);
+TextButton.displayName = 'TextButton';
+
+export default TextButton;

packages/app/src/ui/divider/index.ts

@@ -0,0 +1,8 @@
+import MuiDivider from '@mui/material/Divider';
+import { styled } from '@/styles';
+
+export const Divider = styled(MuiDivider)(({ theme }) => {
+  return {
+    borderColor: theme.colors.borderColor,
+  };
+});

packages/app/src/ui/input/index.ts

@@ -0,0 +1,3 @@
+export * from './input';
+import { Input } from './input';
+export default Input;

packages/app/src/ui/input/input.tsx

@@ -0,0 +1,37 @@
+import { InputHTMLAttributes, useState } from 'react';
+import { StyledInput } from './style';
+
+type inputProps = {
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  width?: number;
+  maxLength?: number;
+  onChange?: (value: string) => void;
+};
+
+export const Input = (props: inputProps) => {
+  const {
+    disabled,
+    value: valueProp,
+    placeholder,
+    maxLength,
+    width = 260,
+    onChange,
+  } = props;
+  const [value, setValue] = useState<string>(valueProp || '');
+  const handleChange: InputHTMLAttributes<HTMLInputElement>['onChange'] = e => {
+    setValue(e.target.value);
+    onChange && onChange(e.target.value);
+  };
+  return (
+    <StyledInput
+      value={value}
+      disabled={disabled}
+      placeholder={placeholder}
+      width={width}
+      maxLength={maxLength}
+      onChange={handleChange}
+    ></StyledInput>
+  );
+};

packages/app/src/ui/input/style.ts

@@ -0,0 +1,30 @@
+import { styled } from '@/styles';
+
+export const StyledInput = styled('input')<{
+  disabled?: boolean;
+  value?: string;
+  width: number;
+}>(({ theme, width, disabled }) => {
+  const fontWeight = 400;
+  const fontSize = '16px';
+  return {
+    width: `${width}px`,
+    lineHeight: '22px',
+    padding: '8px 12px',
+    fontWeight,
+    fontSize,
+    color: disabled ? theme.colors.disableColor : theme.colors.inputColor,
+    border: `1px solid`,
+    borderColor: theme.colors.borderColor, // TODO: check out disableColor,
+    backgroundColor: theme.colors.popoverBackground,
+    borderRadius: '10px',
+    '&::placeholder': {
+      fontWeight,
+      fontSize,
+      color: theme.colors.placeHolderColor,
+    },
+    '&:focus': {
+      borderColor: theme.colors.primaryColor,
+    },
+  };
+});