base

2026-04-18 18:39:25 +03:00
commit 3ba092b60c
4944 changed files with 497564 additions and 0 deletions
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { ERowVariant, Row } from "../row";
+import { cn } from "../utils";
+import type { THeaderVariant } from "./helper";
+import { EHeaderVariant, getHeaderStyle } from "./helper";
+
+export interface HeaderProps {
+  variant?: THeaderVariant;
+  setHeight?: boolean;
+  className?: string;
+  children: React.ReactNode;
+  showOnMobile?: boolean;
+}
+
+const HeaderContext = React.createContext<THeaderVariant | null>(null);
+
+function Header(props: HeaderProps) {
+  const {
+    variant = EHeaderVariant.PRIMARY,
+    className = "",
+    showOnMobile = true,
+    setHeight = true,
+    children,
+    ...rest
+  } = props;
+
+  const style = getHeaderStyle(variant, setHeight, showOnMobile);
+  return (
+    <HeaderContext.Provider value={variant}>
+      <Row
+        variant={variant === EHeaderVariant.PRIMARY ? ERowVariant.HUGGING : ERowVariant.REGULAR}
+        className={cn(style, className)}
+        {...rest}
+      >
+        {children}
+      </Row>
+    </HeaderContext.Provider>
+  );
+}
+
+function LeftItem(props: HeaderProps) {
+  return (
+    <div
+      className={cn(
+        "flex max-w-[80%] flex-grow flex-wrap items-center gap-2 overflow-ellipsis whitespace-nowrap",
+        props.className
+      )}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+function RightItem(props: HeaderProps) {
+  const variant = React.useContext(HeaderContext);
+  if (variant === undefined) throw new Error("RightItem must be used within Header");
+  return (
+    <div
+      className={cn(
+        "flex w-auto items-center justify-end gap-2",
+        {
+          "items-baseline": variant === EHeaderVariant.TERNARY,
+        },
+        props.className
+      )}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+Header.LeftItem = LeftItem;
+Header.RightItem = RightItem;
+Header.displayName = "plane-ui-header";
+
+export { Header, EHeaderVariant };
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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-surface-1 bg-surface-1 z-[18]",
+  [EHeaderVariant.SECONDARY]: "!py-0  overflow-y-hidden border-b border-subtle justify-between bg-surface-1 z-[15]",
+  [EHeaderVariant.TERNARY]: "flex flex-wrap justify-between py-2  border-b border-subtle gap-2 bg-surface-1 z-[12]",
+};
+export const minHeights: IHeaderProperties = {
+  [EHeaderVariant.PRIMARY]: "",
+  [EHeaderVariant.SECONDARY]: "min-h-[52px]",
+  [EHeaderVariant.TERNARY]: "",
+};
+export const getHeaderStyle = (variant: THeaderVariant, setMinHeight: boolean, showOnMobile: boolean) => {
+  const height = setMinHeight ? minHeights[variant] : "";
+  const display = variant === EHeaderVariant.SECONDARY ? (showOnMobile ? "flex" : "hidden md:flex") : "";
+  return " @container " + headerStyle[variant] + " " + height + " " + display;
+};
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./header";