delete name from footer

package.json

@@ -139,6 +139,7 @@
     "exports": {
         ".": null,
         "./components": "./dist/components/index.js",
+        "./uberComponents": "./dist/uberComponents/index.js",
         "./containers": "./dist/containers/index.js",
         "./services": "./dist/services/index.js",
         "./hooks": "./dist/hooks/index.js",

src/components/BaseLayout/BaseLayout.styles.ts

@@ -1,5 +1,26 @@
 import { Layout } from 'antd';
-import styled from 'styled-components';
+import { isNumber, isString } from 'lodash';
+import styled, { css } from 'styled-components';
+
+const maxWidthStyles = css<{ $maxWidth?: number | string }>`
+    ${({ $maxWidth }) => {
+        if (isNumber($maxWidth)) {
+            return css`
+                max-width: ${() => `${$maxWidth}px`};
+            `;
+        }
+
+        if (isString($maxWidth)) {
+            return css`
+                max-width: ${() => `${$maxWidth}`};
+            `;
+        }
+
+        return css`
+            max-width: 1080px;
+        `;
+    }}
+`;
 
 export const S = {
     Container: styled(Layout)`
@@ -10,9 +31,42 @@ export const S = {
             padding-top: 50px;
         }
     `,
-    PageWrapper: styled.div`
-        background-color: ${({ theme }) => theme.primaryPalette.bcp_1};
+    Layout: styled(Layout)`
+        background: 0;
+        position: relative;
+        padding-bottom: 64px;
+    `,
+    PageHeaderContainer: styled.div`
+        background-color: ${({ theme }) => theme.neutralPalette.gray_1};
         display: flex;
-        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        padding: 0 24px;
+    `,
+    PageHeader: styled.div<{ $maxWidth?: number | string }>`
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 24px 0;
+        gap: 32px 0;
+        width: 100%;
+
+        ${maxWidthStyles}
+    `,
+    PageContentContainer: styled.div`
+        padding: 0 24px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    `,
+    PageContent: styled.div<{ $maxWidth?: number | string }>`
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 32px 0;
+        gap: 24px 0;
+        width: 100%;
+
+        ${maxWidthStyles}
     `,
 };

src/components/BaseLayout/Footer/index.tsx

@@ -10,10 +10,7 @@ export function AppFooter(props: Props) {
     return (
         <S.Footer className={`_${type}`}>
             <S.Content>
-                Made with &#10084;&#65039; by{' '}
-                <S.Link href="https://beda.software/emr" target="_blank" rel="noreferrer">
-                    Beda Software
-                </S.Link>
+                Testing - Ferrer Pulmonary
             </S.Content>
         </S.Footer>
     );

src/components/BaseLayout/PageContainer/PageContainer.stories.tsx

@@ -0,0 +1,172 @@
+import { CalendarOutlined, MailOutlined, PhoneOutlined, PlusOutlined } from '@ant-design/icons';
+import { Meta, StoryObj } from '@storybook/react';
+import { Button, Input } from 'antd';
+import styled from 'styled-components';
+
+import { Table } from 'src/components/Table';
+import { Tabs } from 'src/components/Tabs';
+import { Text } from 'src/components/Typography';
+import { withColorSchemeDecorator } from 'src/storybook/decorators';
+
+import { PageContainer, PageContainerProps } from './index';
+
+const content = (
+    <>
+        <Text>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit magna sed pretium maximus. Duis
+            bibendum a lacus ut commodo. Nam eget justo tristique, tincidunt ligula vel, accumsan odio. Morbi purus
+            ante, bibendum vitae arcu eget, ultrices faucibus dolor. Sed fermentum blandit malesuada. Duis fringilla ac
+            tortor ut convallis. Fusce iaculis arcu dui. Ut non neque rhoncus, tincidunt ipsum in, lobortis magna. Donec
+            aliquet leo tellus. Proin pulvinar lacus sodales tortor eleifend rhoncus. Praesent varius maximus pulvinar.
+        </Text>
+    </>
+);
+
+const table = (
+    <Table
+        bordered
+        dataSource={[]}
+        columns={[
+            {
+                title: 'Patient',
+                dataIndex: 'patient',
+                key: 'patient',
+                width: '50%',
+                render: () => '-',
+            },
+            {
+                title: 'Practitioner',
+                dataIndex: 'practitioner',
+                key: 'practitioner',
+                width: '50%',
+                render: () => '-',
+            },
+        ]}
+    />
+);
+
+const tabs = (
+    <Tabs
+        boxShadow={false}
+        items={[
+            {
+                label: 'Tab',
+                key: 'tab1',
+            },
+            {
+                label: 'Tab',
+                key: 'tab2',
+            },
+            {
+                label: 'Tab',
+                key: 'tab3',
+            },
+            {
+                label: 'Tab',
+                key: 'tab4',
+            },
+        ]}
+        activeKey={'tab1'}
+    />
+);
+
+const S = {
+    Container: styled.div`
+        background-color: ${({ theme }) => theme.neutralPalette.gray_2};
+    `,
+    CustomRightColumn: styled.div`
+        display: flex;
+        align-items: center;
+        gap: 0 16px;
+    `,
+    Item: styled.div`
+        display: flex;
+        align-items: center;
+        gap: 0 4px;
+        color: ${({ theme }) => theme.neutral.secondaryText};
+    `,
+};
+
+const rightColumn1 = (
+    <S.CustomRightColumn>
+        <S.Item>
+            <CalendarOutlined />
+            <Text>05/12/1955 • 66 y.o.</Text>
+        </S.Item>
+        <S.Item>
+            <PhoneOutlined />
+            <Text>+972-222-3333</Text>
+        </S.Item>
+        <S.Item>
+            <MailOutlined />
+            <Text>[email protected]</Text>
+        </S.Item>
+    </S.CustomRightColumn>
+);
+
+const rightColumn2 = (
+    <>
+        <Input.Search placeholder="Search by email or phone" style={{ width: 328 }} />
+        <Button type="primary" icon={<PlusOutlined />}>
+            Add patient
+        </Button>
+    </>
+);
+
+const meta: Meta<typeof PageContainer> = {
+    title: 'Layout / PageContainer',
+    component: PageContainer,
+    // @ts-ignore
+    decorators: [withColorSchemeDecorator],
+    args: {
+        title: 'Patients',
+        children: content,
+    },
+    render: (args) => {
+        return (
+            <S.Container>
+                <PageContainer {...args} />
+            </S.Container>
+        );
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<PageContainerProps>;
+
+export const Default: Story = {
+    args: {
+        title: 'Madison Cooper',
+        headerRightColumn: rightColumn1,
+    },
+};
+
+export const WithTable: Story = {
+    args: {
+        variant: 'with-table',
+        children: table,
+        headerRightColumn: rightColumn2,
+    },
+};
+
+export const WithTabs: Story = {
+    args: {
+        variant: 'with-tabs',
+        header: {
+            children: tabs,
+        },
+    },
+};
+
+export const FullWidth: Story = {
+    args: {
+        maxWidth: '100%',
+    },
+};
+
+export const CustomWidth: Story = {
+    args: {
+        maxWidth: 500,
+    },
+};

src/components/BaseLayout/PageContainer/index.tsx

@@ -0,0 +1,52 @@
+import { S } from './styles';
+import { BasePageContentProps, BasePageHeaderProps } from '..';
+
+export interface PageContainerProps {
+    variant?: 'default' | 'with-table' | 'with-tabs';
+    maxWidth?: number | string;
+    title?: React.ReactNode;
+    headerLeftColumn?: React.ReactNode;
+    headerRightColumn?: React.ReactNode;
+    children?: React.ReactNode;
+
+    header?: BasePageHeaderProps;
+    content?: BasePageContentProps;
+}
+
+export function PageContainer(props: PageContainerProps = {}) {
+    const {
+        variant = 'default',
+        title,
+        header,
+        content,
+        children,
+        maxWidth,
+        headerLeftColumn,
+        headerRightColumn,
+    } = props;
+
+    return (
+        <>
+            <S.HeaderContainer maxWidth={maxWidth} $variant={variant} {...header}>
+                <S.Header>
+                    <S.HeaderLeftColumn>
+                        {headerLeftColumn ? (
+                            headerLeftColumn
+                        ) : (
+                            <>{title && <PageContainerTitle>{title}</PageContainerTitle>}</>
+                        )}
+                    </S.HeaderLeftColumn>
+                    {headerRightColumn && <S.HeaderRightColumn>{headerRightColumn}</S.HeaderRightColumn>}
+                </S.Header>
+                {header?.children}
+            </S.HeaderContainer>
+            <S.ContentContainer $variant={variant} maxWidth={maxWidth} {...content}>
+                {content?.children ?? children}
+            </S.ContentContainer>
+        </>
+    );
+}
+
+export function PageContainerTitle(props: React.HTMLAttributes<HTMLHeadingElement>) {
+    return <S.Title level={3} {...props} />;
+}