base

plane-src/packages/ui/src/row/helper.tsx

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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",
+};

plane-src/packages/ui/src/row/index.ts

@@ -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 "./row";

plane-src/packages/ui/src/row/row.tsx

@@ -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.
+ */
+
+import * as React from "react";
+import { cn } from "../utils";
+import type { TRowVariant } from "./helper";
+import { ERowVariant, rowStyle } from "./helper";
+
+export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: TRowVariant;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const Row = React.forwardRef(function Row(props: RowProps, ref: React.ForwardedRef<HTMLDivElement>) {
+  const { variant = ERowVariant.REGULAR, className = "", children, ...rest } = props;
+
+  const style = rowStyle[variant];
+
+  return (
+    <div ref={ref} className={cn(style, className)} {...rest}>
+      {children}
+    </div>
+  );
+});
+
+Row.displayName = "plane-ui-row";
+
+export { Row, ERowVariant };