milestone: publish alpha version (#637)

- document folder
- full-text search
- blob storage
- basic edgeless support

Co-authored-by: tzhangchi <terry.zhangchi@outlook.com>
Co-authored-by: QiShaoXuan <qishaoxuan777@gmail.com>
Co-authored-by: DiamondThree <diamond.shx@gmail.com>
Co-authored-by: MingLiang Wang <mingliangwang0o0@gmail.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Yifeng Wang <doodlewind@toeverything.info>
Co-authored-by: Himself65 <himself65@outlook.com>
Co-authored-by: lawvs <18554747+lawvs@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>

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

@@ -0,0 +1,55 @@
+import { InputHTMLAttributes, useEffect, useState } from 'react';
+import { StyledInput } from './style';
+
+type inputProps = {
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  width?: number;
+  maxLength?: number;
+  minLength?: number;
+  onChange?: (value: string) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onBlur?: (e: any) => void;
+};
+
+export const Input = (props: inputProps) => {
+  const {
+    disabled,
+    value: valueProp,
+    placeholder,
+    maxLength,
+    minLength,
+    width = 260,
+    onChange,
+    onBlur,
+  } = props;
+  const [value, setValue] = useState<string>(valueProp || '');
+  const handleChange: InputHTMLAttributes<HTMLInputElement>['onChange'] = e => {
+    if (
+      (maxLength && e.target.value.length > maxLength) ||
+      (minLength && e.target.value.length < minLength)
+    )
+      return;
+    setValue(e.target.value);
+    onChange && onChange(e.target.value);
+  };
+  const handleBlur: InputHTMLAttributes<HTMLInputElement>['onBlur'] = e => {
+    onBlur && onBlur(e);
+  };
+  useEffect(() => {
+    setValue(valueProp || '');
+  }, [valueProp]);
+  return (
+    <StyledInput
+      value={value}
+      disabled={disabled}
+      placeholder={placeholder}
+      width={width}
+      maxLength={maxLength}
+      minLength={minLength}
+      onChange={handleChange}
+      onBlur={handleBlur}
+    ></StyledInput>
+  );
+};

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