Layout overhaul

.changeset/cruel-ads-march.md

@@ -0,0 +1,30 @@
+---
+"@musica-sacra/layout": major
+---
+
+Create new layout King.
+
+- **what** Create new 3 column layout KIng and refactor old layouts.
+- **why** We wanted a 3 column layout.
+- **how** Breaking changes! Follow instructions:
+
+1. **If you are using layout `<LayoutBasic>`**
+
+This layout was renamed to `<Prince>`. All classNames derived from `layout-basic` were renamed to `prince`.
+
+There was change from layout content + sidebar width, from `1200px` to `1280px`.
+
+2. **If you are using layout `<LayoutWithSidebar>`**
+
+This layout was renamed to `<Queen>`. All classNames derived from `layout-with-sidebar` were renamed to `queen`.
+
+There was added prop `fullWidth`, default set to `false`. With this prop you can make the layout to take full width of the page, and dont have max-width of content.
+
+There was change from layout content + sidebar width, from `1200px` to `1280px`.
+
+3. **New layout `<King>`**
+
+There was added new layout `<King>`. Layout has 3 column, see readme for more information.
+
+
+

packages/layout/CHANGELOG.md

@@ -4,8 +4,8 @@
 
 ### Minor Changes
 
-- 50e606b: Renamed prop `classname` to `className` in Container.tsx and LayoutBasic.tsx
-  - **What** Renamed prop `classname` to `className` in Container.tsx and LayoutBasic.tsx
+- 50e606b: Renamed prop `classname` to `className` in Container.tsx and Prince.tsx
+  - **What** Renamed prop `classname` to `className` in Container.tsx and Prince.tsx
   - **Why** Matches React convention, improves consistency.
   - **How** Rename `classname` prop to `className` in `Container` and `LayoutBasic`.
     Update your code by replacing all `classname` props with `className`.

packages/layout/README.md

@@ -11,12 +11,13 @@ Layout components for building easy and consistent web app layouts in React.
 This package provides the following React layout components:
 
 - `Container`: Styled wrapper. 
-- `LayoutBasic`: Single column layout utilizing previously mentioned Container as main wrapper.
-- `LayoutWithSidebar`: Double column layout with main content and left sidebar. 
+- `Prince`: Single column layout utilizing previously mentioned Container as main wrapper.
+- `Queen`: Double column layout with main content and left sidebar. 
+- `King`: Triple column layout with main content and two sidebars. 
 
-## \<Container />
+### \<Container />
 
-Basic styled wrapper that provides container of with 1200px with auto margins on sides.
+Basic styled wrapper that provides container of with 1280px with auto margins on sides.
 
 ```jsx
 import { Container } from '@musica-sacra/layout'
@@ -30,41 +31,63 @@ export function ExampleComponent() {
 }
 ```
 
-## \<LayoutBasic />
+### \<Prince />
 
 Component for creating page layouts. Single column. Provides aditional wrapper around `<Container/>`.
 
 ```jsx
-import { LayoutBasic } from '@musica-sacra/layout'
+import { Prince } from '@musica-sacra/layout'
 
 export function ExampleComponent() {
     return (
-        <LayoutBasic>
+        <Prince>
             {/* Your Content */}
-        </LayoutBasic>
+        </Prince>
     )
 }
 ```
 
-## \<LayoutWithSidebar />
+### \<Queen />
 
 Double column layout with main content and sidebar on the left side. 
 
 ```jsx
-import { LayoutWithSidebar } from '@musica-sacra/layout'
+import { Queen } from '@musica-sacra/layout'
 
 export function ExampleComponent() {
     return (
-        <LayoutWithSidebar
+        <Queen
             sidebar={<div>{/* Your Sidebar Content*/}</div>}
         >
             {/* Your Main Content */}
-        </LayoutWithSidebar>
+        </Queen>
     )
 }
 ```
 
-Also provides context through hook useSidebar(), which gives you methods:
+### \<King />
+
+Triple column layout.
+
+```jsx
+import { King } from '@musica-sacra/layout'
+
+export function ExampleComponent() {
+    return (
+        <King
+            leftSidebar={<div>{/* Your LEFT Sidebar Content*/}</div>}
+            rightSidebar={<div>{/* Your RIGHT Sidebar Content*/}</div>}
+        >
+            {/* Your Main Content */}
+        </King>
+    )
+}
+```
+
+
+### useSidebar
+
+Layouts with sidebar also provide context through hook useSidebar(), which gives you methods:
 - closeSidebar()
 
 ```jsx

packages/layout/src/components/container/container.scss

@@ -1,5 +1,5 @@
 .ms-container {
-    max-width: 1200px;
+    max-width: 1280px;
     width: 100%;
 
     margin: 0 auto;

packages/layout/src/components/king/King.tsx

@@ -0,0 +1,94 @@
+import { ReactNode, useState } from 'react';
+import { useBem } from '@musica-sacra/hooks';
+import { SidebarExpandButton } from '../sidebarExpandButton/SidebarExpandButton';
+import { Overlay } from '../overlay/Overlay';
+import { SidebarContext } from '../../context/SidebarContext';
+
+type KingProps = {
+    className?: string;
+    isPageLayout?: boolean;
+    children: React.ReactNode;
+    leftSidebar: ReactNode;
+    rightSidebar: ReactNode;
+    mergeSidebarsWhenResponsive?: boolean;
+};
+
+export function King({
+    className = '',
+    isPageLayout = false,
+    children,
+    leftSidebar,
+    rightSidebar,
+    mergeSidebarsWhenResponsive = false,
+}: KingProps) {
+    const { bem, base } = useBem('ms-king');
+
+    const [isSidebarExpanded, setSidebarExpanded] = useState(false);
+
+    const toggleSidebar = () => {
+        setSidebarExpanded((prev) => !prev);
+    };
+
+    const closeSidebar = () => setSidebarExpanded(false);
+
+    return (
+        <div
+            className={bem(base, {
+                [className]: true,
+                'ms-king--page-layout': isPageLayout,
+                'ms-king--merge-sidebars': mergeSidebarsWhenResponsive,
+            })}
+        >
+            <SidebarExpandButton onClickCallback={toggleSidebar} />
+            <Overlay
+                shouldBeVisible={isSidebarExpanded}
+                onClickCallback={toggleSidebar}
+            />
+
+            <div
+                className={bem({
+                    sidebar: true,
+                    'sidebar--left': true,
+                    'sidebar--expanded': isSidebarExpanded,
+                })}
+            >
+                <div className={bem('sidebar-close-button')}>
+                    <button
+                        onClick={toggleSidebar}
+                        aria-label="Zatvoriť sidebar"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            width="24"
+                            fill="currentColor"
+                        >
+                            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+                        </svg>
+                    </button>
+                </div>
+
+                <SidebarContext.Provider value={{ closeSidebar }}>
+                    <div className={bem('sidebar-content')}>
+                        {leftSidebar}
+                        {mergeSidebarsWhenResponsive && (
+                            <div className={bem('sidebar--merged')}>
+                                <div className={bem('hr')} />
+                                {rightSidebar}
+                            </div>
+                        )}
+                    </div>
+                </SidebarContext.Provider>
+            </div>
+
+            <div className={bem('content')}>
+                <div className={bem('content-inner')}>{children}</div>
+            </div>
+
+            <div className={bem({ sidebar: true, 'sidebar--right': true })}>
+                <div className={bem('sidebar-content')}>{rightSidebar}</div>
+            </div>
+        </div>
+    );
+}

packages/layout/src/components/king/__tests__/King.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { King } from '../King';
+
+const meta: Meta<typeof King> = {
+    title: '@musica-sacra/Layout/components/King',
+    component: King,
+    args: {
+        children: 'children',
+        leftSidebar: 'leftSidebar',
+        rightSidebar: 'rightSidebar',
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const PageLayout: Story = {
+    args: {
+        isPageLayout: true,
+    },
+};
+
+export const MergedSidebars: Story = {
+    args: {
+        mergeSidebarsWhenResponsive: true,
+    },
+};