binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* chore: headers + common containers

* fix: filters code splitting

* fix: home header

* fix: header changes

* fix: uncommented filters

* fix: used enums

* fix: enum changes
This commit is contained in:
Akshita Goyal 2024-09-04 14:38:30 +05:30 • committed by GitHub
parent 747905a96d
commit 22656d0114
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
64 changed files with 1356 additions and 1119 deletions
Download patch file Download diff file Expand all files Collapse all files

39
packages/ui/src/header/header.tsx Normal file
View file

@ -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 };

25
packages/ui/src/header/helper.tsx Normal file
View file

@ -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;
};

1
packages/ui/src/header/index.ts Normal file
View file

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