@equinor/fusion-react-layout 0.0.0

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @equinor/fusion-react-layout

package/README.md

@@ -0,0 +1,172 @@
+# @equinor/fusion-react-layout [![Published on npm](https://img.shields.io/npm/v/@equinor/fusion-react-layout.svg)](https://www.npmjs.com/package/@equinor/fusion-react-layout)
+
+Component for handling layout in your application.
+
+Use this package to compose app-level layouts with an optional sidebar and page sections for header, main content, and footer.
+
+## [Storybook](https://equinor.github.io/fusion-react-components/?path=/docs/ui-layout)
+
+## Installation
+
+```sh
+npm install @equinor/fusion-react-layout
+```
+
+Or using pnpm:
+
+```sh
+pnpm install @equinor/fusion-react-layout
+```
+
+## Components
+
+### `Layout`
+
+`Layout` is the top-level container. It renders the application shell and accepts two child components:
+
+- `Layout.Sidebar` for sidebar content
+- `Layout.Content` for the main content area
+
+If `Layout.Sidebar` is omitted, the layout automatically renders without a sidebar.
+
+### `Layout.Sidebar`
+
+`Layout.Sidebar` places its children in the layout sidebar slot. Use it for navigation, filters, secondary actions, or supporting information.
+
+### `Layout.Content`
+
+`Layout.Content` places its children in the main content slot. This is typically where you render pages, dashboards, or other primary content.
+
+### `Page`
+
+`Page` is a page-level wrapper that can be rendered inside `Layout.Content`. It provides structured slots for common page sections:
+
+- `Page.Header`
+- `Page.Main`
+- `Page.Footer`
+
+### `Page.Header`
+
+Use `Page.Header` for page titles, summaries, breadcrumbs, and top-level actions.
+
+### `Page.Main`
+
+Use `Page.Main` for the primary page content.
+
+### `Page.Footer`
+
+Use `Page.Footer` for secondary actions, metadata, or status information shown at the bottom of the page.
+
+## Usage
+
+### Import from the main entry point
+
+```ts
+import { Layout, Page } from '@equinor/fusion-react-layout';
+```
+
+### Basic layout
+
+Use `Layout` with `Layout.Content` when your view does not need a sidebar.
+
+```tsx
+import { Layout } from '@equinor/fusion-react-layout';
+
+export function Example() {
+  return (
+    <Layout>
+      <Layout.Content>
+        <h1>Main content</h1>
+        <p>This area is used for the primary content of the application.</p>
+      </Layout.Content>
+    </Layout>
+  );
+}
+```
+
+### Layout with sidebar
+
+Add `Layout.Sidebar` when the page needs navigation or supporting content.
+
+```tsx
+import { Layout } from '@equinor/fusion-react-layout';
+
+export function Example() {
+  return (
+    <Layout>
+      <Layout.Sidebar>
+        <h2>Navigation</h2>
+        <p>Sidebar content goes here.</p>
+      </Layout.Sidebar>
+      <Layout.Content>
+        <h1>Main content</h1>
+        <p>This is the primary application area.</p>
+      </Layout.Content>
+    </Layout>
+  );
+}
+```
+
+### Page structure inside layout content
+
+Render `Page` inside `Layout.Content` when you want to split a page into header, main, and footer sections.
+
+```tsx
+import { Layout, Page } from '@equinor/fusion-react-layout';
+
+export function Example() {
+  return (
+    <Layout>
+      <Layout.Content>
+        <Page>
+          <Page.Header>
+            <h1>Page title</h1>
+            <p>Short description of the current page.</p>
+          </Page.Header>
+          <Page.Main>
+            <p>This is the main page content.</p>
+          </Page.Main>
+          <Page.Footer>
+            <p>Last updated just now.</p>
+          </Page.Footer>
+        </Page>
+      </Layout.Content>
+    </Layout>
+  );
+}
+```
+
+### Full example with sidebar and page sections
+
+```tsx
+import { Layout, Page } from '@equinor/fusion-react-layout';
+
+export function Example() {
+  return (
+    <Layout>
+      <Layout.Sidebar>
+        <h2>Filters</h2>
+        <p>Use the sidebar for contextual tools and navigation.</p>
+      </Layout.Sidebar>
+      <Layout.Content>
+        <Page>
+          <Page.Header>
+            <h1>Projects</h1>
+          </Page.Header>
+          <Page.Main>
+            <p>Project overview content.</p>
+          </Page.Main>
+          <Page.Footer>
+            <p>Showing 24 results.</p>
+          </Page.Footer>
+        </Page>
+      </Layout.Content>
+    </Layout>
+  );
+}
+```
+
+## Notes
+
+- `Layout` detects whether `Layout.Sidebar` is present and enables the sidebar slot automatically.
+- `Page` is optional. You can render any content directly inside `Layout.Content`.

package/dist/components/layout/index.d.ts

@@ -0,0 +1,14 @@
+import { type PropsWithChildren, type ReactNode } from 'react';
+import '@equinor/fusion-wc-layout';
+type LayoutComponent = ((props: PropsWithChildren) => ReactNode) & {
+    Sidebar: (props: PropsWithChildren) => ReactNode;
+    Content: (props: PropsWithChildren) => ReactNode;
+    displayName?: string;
+};
+/**
+ * Wraps the Fusion layout web component and exposes compound components for
+ * assigning children to the layout content and sidebar slots.
+ */
+export declare const Layout: LayoutComponent;
+export default Layout;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAEf,OAAO,2BAA2B,CAAC;AAEnC,KAAK,eAAe,GAAG,CAAC,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC,GAAG;IACjE,OAAO,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;IACjD,OAAO,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,eAgBpB,CAAC;AAeF,eAAe,MAAM,CAAC"}

package/dist/components/layout/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement, useEffect, useState, } from 'react';
+import '@equinor/fusion-wc-layout';
+/**
+ * Wraps the Fusion layout web component and exposes compound components for
+ * assigning children to the layout content and sidebar slots.
+ */
+export const Layout = ({ children }) => {
+    const childArray = Children.toArray(children);
+    // Keep the web component sidebar state aligned with the compound component tree.
+    const hasSidebarChild = childArray.some((child) => {
+        return isValidElement(child) && child.type === Layout.Sidebar;
+    });
+    const [hasSidebar, setHasSidebar] = useState(hasSidebarChild);
+    useEffect(() => {
+        setHasSidebar(hasSidebarChild);
+    }, [hasSidebarChild]);
+    /* @ts-expect-error fwc-layout is a web component */
+    return _jsx("fwc-layout", { sidebar: hasSidebar || undefined, children: children });
+};
+Layout.displayName = 'Layout';
+// Compound components mirror the slots supported by the underlying web component.
+Layout.Sidebar = ({ children }) => {
+    // The underlying web component projects this content into its sidebar slot.
+    return _jsx("div", { slot: "sidebar", children: children });
+};
+Layout.Content = ({ children }) => {
+    // The underlying web component projects this content into its main content slot.
+    return _jsx("div", { slot: "content", children: children });
+};
+export default Layout;

package/dist/components/page/index.d.ts

@@ -0,0 +1,15 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+import '@equinor/fusion-wc-page';
+type PageComponent = ((props: PropsWithChildren) => ReactNode) & {
+    Header: (props: PropsWithChildren) => ReactNode;
+    Main: (props: PropsWithChildren) => ReactNode;
+    Footer: (props: PropsWithChildren) => ReactNode;
+    displayName?: string;
+};
+/**
+ * Wraps the Fusion page web component and exposes compound components for
+ * assigning children to the page header, main, and footer slots.
+ */
+export declare const Page: PageComponent;
+export default Page;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,yBAAyB,CAAC;AAEjC,KAAK,aAAa,GAAG,CAAC,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC,GAAG;IAC/D,MAAM,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;IAChD,IAAI,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;IAC9C,MAAM,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,IAAI,EAAE,aAGlB,CAAC;AA0BF,eAAe,IAAI,CAAC"}

package/dist/components/page/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@equinor/fusion-wc-page';
+/**
+ * Wraps the Fusion page web component and exposes compound components for
+ * assigning children to the page header, main, and footer slots.
+ */
+export const Page = ({ children }) => {
+    /* @ts-expect-error fwc-page is a web component */
+    return _jsx("fwc-page", { children: children });
+};
+Page.displayName = 'Page';
+const Header = ({ children }) => {
+    // The underlying web component projects this content into its header slot.
+    return _jsx("div", { slot: "header", children: children });
+};
+Header.displayName = 'Page.Header';
+const Main = ({ children }) => {
+    // The underlying web component projects this content into its main slot.
+    return _jsx("div", { slot: "main", children: children });
+};
+Main.displayName = 'Page.Main';
+const Footer = ({ children }) => {
+    // The underlying web component projects this content into its footer slot.
+    return _jsx("div", { slot: "footer", children: children });
+};
+Footer.displayName = 'Page.Footer';
+// Compound components mirror the slots supported by the underlying web component.
+Page.Header = Header;
+Page.Main = Main;
+Page.Footer = Footer;
+export default Page;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/layout';
+export * from './components/page';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './components/layout';
+export * from './components/page';

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@equinor/fusion-react-layout",
+  "version": "0.0.0",
+  "description": "Fusion React Layout Component.",
+  "keywords": [
+    "react",
+    "components",
+    "fusion",
+    "equinor",
+    "layout"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./layout": {
+      "import": "./dist/components/layout/index.js",
+      "types": "./dist/components/layout/index.d.ts"
+    },
+    "./page": {
+      "import": "./dist/components/page/index.js",
+      "types": "./dist/components/page/index.d.ts"
+    },
+    "./package.json": "./package.json",
+    "./README.md": "./README.md",
+    "./CHANGELOG.md": "./CHANGELOG.md"
+  },
+  "homepage": "https://github.com/equinor/fusion-react-components/blob/main/packages/layout#readme",
+  "license": "ISC",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "directories": {
+    "dist": "dist"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/equinor/fusion-react-components.git",
+    "directory": "packages/layout"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "lint": "biome lint",
+    "format": "biome format",
+    "prepack": "npm run build"
+  },
+  "bugs": {
+    "url": "https://github.com/equinor/fusion-react-components/issues"
+  },
+  "dependencies": {
+    "@equinor/fusion-wc-layout": "^0.0.0",
+    "@equinor/fusion-wc-page": "^0.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "react": "^19.2.5"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19"
+  }
+}