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/layout/Content.tsx

@@ -0,0 +1,45 @@
+import { CSSProperties } from 'react';
+import { styled, textEllipsis } from '@/styles';
+
+// This component should be just used to be contained the text content
+export type ContentProps = {
+  width?: CSSProperties['width'];
+  maxWidth?: CSSProperties['maxWidth'];
+  align?: CSSProperties['textAlign'];
+  color?: CSSProperties['color'];
+  fontSize?: CSSProperties['fontSize'];
+  weight?: CSSProperties['fontWeight'];
+  lineHeight?: CSSProperties['lineHeight'];
+  ellipsis?: boolean;
+  lineNum?: number;
+  children: string;
+};
+
+export const Content = styled.div<ContentProps>(
+  ({
+    theme,
+    color,
+    fontSize,
+    weight,
+    lineHeight,
+    ellipsis,
+    lineNum,
+    width,
+    maxWidth,
+    align,
+  }) => {
+    return {
+      width,
+      maxWidth,
+      textAlign: align,
+      display: 'inline-block',
+      color: color ?? theme.colors.textColor,
+      fontSize: fontSize ?? theme.font.base,
+      fontWeight: weight ?? 400,
+      lineHeight: lineHeight ?? 1.5,
+      ...(ellipsis ? textEllipsis(lineNum) : {}),
+    };
+  }
+);
+
+export default Content;

packages/app/src/ui/layout/Wrapper.tsx

@@ -0,0 +1,49 @@
+import type { CSSProperties } from 'react';
+import { styled } from '@/styles';
+
+export type WrapperProps = {
+  display?: CSSProperties['display'];
+  flexDirection?: CSSProperties['flexDirection'];
+  justifyContent?: CSSProperties['justifyContent'];
+  alignItems?: CSSProperties['alignItems'];
+  wrap?: boolean;
+  flexShrink?: CSSProperties['flexShrink'];
+  flexGrow?: CSSProperties['flexGrow'];
+};
+
+// Sometimes we just want to wrap a component with a div to set flex or other styles, but we don't want to create a new component for it.
+export const Wrapper = styled('div', {
+  shouldForwardProp: prop => {
+    return ![
+      'display',
+      'justifyContent',
+      'alignItems',
+      'wrap',
+      'flexDirection',
+      'flexShrink',
+      'flexGrow',
+    ].includes(prop);
+  },
+})<WrapperProps>(
+  ({
+    display = 'flex',
+    justifyContent = 'flex-start',
+    alignItems = 'center',
+    wrap = false,
+    flexDirection = 'row',
+    flexShrink = '0',
+    flexGrow = '0',
+  }) => {
+    return {
+      display,
+      justifyContent,
+      alignItems,
+      flexWrap: wrap ? 'wrap' : 'nowrap',
+      flexDirection,
+      flexShrink,
+      flexGrow,
+    };
+  }
+);
+
+export default Wrapper;

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

@@ -0,0 +1,2 @@
+export * from './Wrapper';
+export * from './Content';