feat: add layout component

packages/app/src/ui/Layout/content.tsx

@@ -0,0 +1,23 @@
+import React, { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';
+import { StyledContent } from '@/ui/Layout/styles';
+
+// This component should be just used to be contained the text content
+export type ContentProps = {
+  width?: CSSProperties['width'];
+  maxWidth?: CSSProperties['maxWidth'];
+  color?: CSSProperties['color'];
+  fontSize?: CSSProperties['fontSize'];
+  fontWeight?: CSSProperties['fontWeight'];
+  lineHeight?: CSSProperties['lineHeight'];
+  ellipsis?: boolean;
+  lineNum?: number;
+  children: string;
+};
+export const Content = ({
+  children,
+  ...props
+}: ContentProps & HTMLAttributes<HTMLDivElement>) => {
+  return <StyledContent {...props}>{children}</StyledContent>;
+};
+
+export default Content;

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

@@ -0,0 +1,2 @@
+export * from './wrapper';
+export * from './content';

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

@@ -0,0 +1,50 @@
+import { styled, textEllipsis } from '@/styles';
+import { WrapperProps } from './wrapper';
+import { ContentProps } from '@/ui/Layout/content';
+
+export const StyledWrapper = styled.div<WrapperProps>(
+  ({
+    display,
+    justifyContent,
+    alignItems,
+    flexWrap,
+    flexDirection,
+    flexShrink,
+    flexGrow,
+  }) => {
+    return {
+      display,
+      justifyContent,
+      alignItems,
+      flexWrap,
+      flexDirection,
+      flexShrink,
+      flexGrow,
+    };
+  }
+);
+
+export const StyledContent = styled.div<ContentProps>(
+  ({
+    theme,
+    color,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    ellipsis,
+    lineNum,
+    width,
+    maxWidth,
+  }) => {
+    return {
+      width,
+      maxWidth,
+      display: 'inline-block',
+      color: color ?? theme.colors.textColor,
+      fontSize: fontSize ?? theme.font.base,
+      fontWeight: fontWeight ?? 400,
+      lineHeight: lineHeight ?? 1.5,
+      ...(ellipsis ? textEllipsis(lineNum) : {}),
+    };
+  }
+);

packages/app/src/ui/Layout/wrapper.tsx

@@ -0,0 +1,42 @@
+import type { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';
+import { StyledWrapper } from './styles';
+
+// 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 type WrapperProps = {
+  display?: CSSProperties['display'];
+  flexDirection?: CSSProperties['flexDirection'];
+  justifyContent?: CSSProperties['justifyContent'];
+  alignItems?: CSSProperties['alignItems'];
+  flexWrap?: CSSProperties['flexWrap'];
+  flexShrink?: CSSProperties['flexShrink'];
+  flexGrow?: CSSProperties['flexGrow'];
+};
+
+export const Wrapper = ({
+  children,
+  display = 'flex',
+  justifyContent = 'flex-start',
+  alignItems = 'center',
+  flexWrap = 'nowrap',
+  flexDirection = 'row',
+  flexShrink = '0',
+  flexGrow = '0',
+  ...props
+}: PropsWithChildren<WrapperProps & HTMLAttributes<HTMLDivElement>>) => {
+  return (
+    <StyledWrapper
+      display={display}
+      justifyContent={justifyContent}
+      alignItems={alignItems}
+      flexWrap={flexWrap}
+      flexDirection={flexDirection}
+      flexShrink={flexShrink}
+      flexGrow={flexGrow}
+      {...props}
+    >
+      {children}
+    </StyledWrapper>
+  );
+};
+
+export default Wrapper;