[WEB-2273] Chore: header UI (#5467)

* chore: headers + common containers

* fix: filters code splitting

* fix: home header

* fix: header changes

* fix: uncommented filters

* fix: used enums

* fix: enum changes

packages/ui/src/header/header.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { cn } from "../../helpers";
+import { EHeaderVariant, getHeaderStyle, THeaderVariant } from "./helper";
+import { ERowVariant, CustomRow } from "../row";
+
+export interface CustomHeaderProps {
+  variant?: THeaderVariant;
+  setHeight?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const CustomHeader = (props: CustomHeaderProps) => {
+  const { variant = EHeaderVariant.PRIMARY, className = "", setHeight = true, children, ...rest } = props;
+
+  const style = getHeaderStyle(variant, setHeight);
+  return (
+    <CustomRow
+      variant={variant === EHeaderVariant.PRIMARY ? ERowVariant.HUGGING : ERowVariant.REGULAR}
+      className={cn(style, className)}
+      {...rest}
+    >
+      {children}
+    </CustomRow>
+  );
+};
+
+const LeftItem = (props: CustomHeaderProps) => (
+  <div className="flex flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">{props.children}</div>
+);
+const RightItem = (props: CustomHeaderProps) => (
+  <div className="w-full flex items-center justify-end gap-3">{props.children}</div>
+);
+
+CustomHeader.LeftItem = LeftItem;
+CustomHeader.RightItem = RightItem;
+CustomHeader.displayName = "plane-ui-header";
+
+export { CustomHeader, EHeaderVariant };

packages/ui/src/header/helper.tsx

@@ -0,0 +1,25 @@
+export enum EHeaderVariant {
+  PRIMARY = "primary",
+  SECONDARY = "secondary",
+  TERNARY = "ternary",
+}
+export type THeaderVariant = EHeaderVariant.PRIMARY | EHeaderVariant.SECONDARY | EHeaderVariant.TERNARY;
+
+export interface IHeaderProperties {
+  [key: string]: string;
+}
+export const headerStyle: IHeaderProperties = {
+  [EHeaderVariant.PRIMARY]:
+    "relative flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100",
+  [EHeaderVariant.SECONDARY]: "block !py-0  overflow-y-hidden border-b border-custom-border-200",
+  [EHeaderVariant.TERNARY]: "flex justify-between py-2  border-b border-custom-border-200",
+};
+export const minHeights: IHeaderProperties = {
+  [EHeaderVariant.PRIMARY]: "",
+  [EHeaderVariant.SECONDARY]: "min-h-[52px]",
+  [EHeaderVariant.TERNARY]: "",
+};
+export const getHeaderStyle = (variant: THeaderVariant, setMinHeight: boolean) => {
+  const height = setMinHeight ? minHeights[variant] : "";
+  return headerStyle[variant] + " " + height;
+};

packages/ui/src/header/index.ts

@@ -0,0 +1 @@
+export * from "./header";

packages/ui/src/index.ts

@@ -23,3 +23,5 @@ export * from "./loader";
 export * from "./collapsible";
 export * from "./popovers";
 export * from "./tables";
+export * from "./header";
+export * from "./row";

packages/ui/src/row/helper.tsx

@@ -0,0 +1,12 @@
+export enum ERowVariant {
+  REGULAR = "regular",
+  HUGGING = "hugging",
+}
+export type TRowVariant = ERowVariant.REGULAR | ERowVariant.HUGGING;
+export interface IRowProperties {
+  [key: string]: string;
+}
+export const rowStyle: IRowProperties = {
+  [ERowVariant.REGULAR]: "px-page-x",
+  [ERowVariant.HUGGING]: "px-0",
+};

packages/ui/src/row/index.ts

@@ -0,0 +1 @@
+export * from "./row";

packages/ui/src/row/row.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { cn } from "../../helpers";
+import { ERowVariant, rowStyle, TRowVariant } from "./helper";
+
+export interface CustomRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: TRowVariant;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const CustomRow = React.forwardRef<HTMLDivElement, CustomRowProps>((props, ref) => {
+  const { variant = ERowVariant.REGULAR, className = "", children, ...rest } = props;
+
+  const style = rowStyle[variant];
+
+  return (
+    <div ref={ref} className={cn(style, className)} {...rest}>
+      {children}
+    </div>
+  );
+});
+
+CustomRow.displayName = "plane-ui-row";
+
+export { CustomRow, ERowVariant };