Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP Update app layout #394

Open
wants to merge 47 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
9f40efc
Add PageContainer component
vesnushka Dec 2, 2024
eec11cb
Update Table component and add Tabs component
vesnushka Dec 2, 2024
e6fe2f3
Use PageContainer across the app
vesnushka Dec 2, 2024
35cd4dd
Update table header bg color
vesnushka Dec 2, 2024
2d4ace6
Update Search bar styles
vesnushka Dec 2, 2024
2af6bf4
Refactor search bar styles copies
vesnushka Dec 2, 2024
1507cfb
Extract locales
vesnushka Dec 2, 2024
d643fcd
Add Search bar solid choice control
vesnushka Dec 2, 2024
11cf04b
Add default value for Solid Choice control on Search bar
vesnushka Dec 3, 2024
597d7fb
Merge 354-generic-resource-list. Fix conflicts
vesnushka Dec 3, 2024
9aceceb
Add default value for Search bar choice control
vesnushka Dec 3, 2024
18814ed
Add Single Date Search bar control
vesnushka Dec 3, 2024
d52a4a0
Fix questionnaire validation
vesnushka Dec 3, 2024
919219b
Merge 354-generic-resource-list. Fix conflicts
vesnushka Dec 4, 2024
cc82291
Merge branch 'update-app-layout' of github.com:beda-software/fhir-emr…
vesnushka Dec 4, 2024
7c8e277
Merge branch '354-generic-resource-list' into update-app-layout
ruscoder Dec 4, 2024
edf03f6
Extract locales
ruscoder Dec 4, 2024
3726822
Merge branch '354-generic-resource-list' into update-app-layout
ruscoder Dec 5, 2024
a10ad67
Merge branch '354-generic-resource-list' into update-app-layout
ruscoder Dec 5, 2024
904fe52
Merge branch '354-generic-resource-list' into update-app-layout
ruscoder Dec 5, 2024
4235e11
Merge branch '354-generic-resource-list' of github.com:beda-software/…
vesnushka Dec 5, 2024
b1b0390
Merge branch '354-generic-resource-list' of github.com:beda-software/…
vesnushka Dec 5, 2024
332c15d
Merge branch '354-generic-resource-list' of github.com:beda-software/…
vesnushka Dec 5, 2024
6b0822e
Merge branch '354-generic-resource-list' into update-app-layout
ruscoder Dec 6, 2024
990a63c
Merge branch '354-generic-resource-list' into update-app-layout
ruscoder Dec 6, 2024
e3d9214
Hide search bar if no filters
ruscoder Dec 6, 2024
6bfe852
Merge branch '354-generic-resource-list' into update-app-layout
ruscoder Dec 6, 2024
86dc77c
Merge branch '354-generic-resource-list' into update-app-layout
ruscoder Dec 6, 2024
27d933b
Merge branch '354-generic-resource-list' into update-app-layout
ruscoder Dec 6, 2024
0b4a65e
Merge branch '354-generic-resource-list' of github.com:beda-software/…
vesnushka Dec 10, 2024
b122366
Add default value for refernce search bar column
vesnushka Dec 10, 2024
241e068
Merge branch '354-generic-resource-list' of github.com:beda-software/…
vesnushka Dec 10, 2024
dc063a3
Add table cards and filters mobile version
vesnushka Dec 13, 2024
9419491
Extract locales
vesnushka Dec 13, 2024
026fc2c
Add empty state for mobile cards
vesnushka Dec 14, 2024
5470fc9
Merge branch '354-generic-resource-list' of github.com:beda-software/…
vesnushka Dec 14, 2024
8cff01f
Remove header title bottom margin
vesnushka Dec 16, 2024
531711a
Merge branch '354-generic-resource-list' of github.com:beda-software/…
vesnushka Dec 16, 2024
7589ce7
Merge branch '354-generic-resource-list' of github.com:beda-software/…
vesnushka Dec 18, 2024
ad6af5d
Merge branch '354-generic-resource-list' of github.com:beda-software/…
vesnushka Dec 18, 2024
f8e522c
Merge branch '354-generic-resource-list' of github.com:beda-software/…
vesnushka Dec 19, 2024
275e2fc
Add card selection
vesnushka Dec 19, 2024
4d77218
Merge branch '354-generic-resource-list' of github.com:beda-software/…
vesnushka Dec 19, 2024
c79126d
Update batch action for mobile
vesnushka Dec 19, 2024
c2e4c3b
Merge branch '354-generic-resource-list' of github.com:beda-software/…
vesnushka Dec 20, 2024
2acc20f
Add clear button for single date search bar control
vesnushka Dec 20, 2024
4504352
Merge branch '354-generic-resource-list' of github.com:beda-software/…
vesnushka Dec 20, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 0 additions & 35 deletions src/components/BaseLayout/BaseLayout.module.scss

This file was deleted.

62 changes: 58 additions & 4 deletions src/components/BaseLayout/BaseLayout.styles.ts
Original file line number Diff line number Diff line change
@@ -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)`
Expand All @@ -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}
`,
};
172 changes: 172 additions & 0 deletions src/components/BaseLayout/PageContainer/PageContainer.stories.tsx
Original file line number Diff line number Diff line change
@@ -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,
},
};
52 changes: 52 additions & 0 deletions src/components/BaseLayout/PageContainer/index.tsx
Original file line number Diff line number Diff line change
@@ -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} />;
}
57 changes: 57 additions & 0 deletions src/components/BaseLayout/PageContainer/styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import styled, { css } from 'styled-components';

import { BasePageContent, BasePageHeader } from '..';
import { Title } from 'src/components/Typography';
import { mobileWidth } from 'src/theme/utils';

export const S = {
HeaderContainer: styled(BasePageHeader)<{ $variant?: 'default' | 'with-table' | 'with-tabs' }>`
display: flex;
flex-direction: column;

${({ $variant }) =>
$variant === 'with-table' &&
css`
padding-bottom: 79px;
`}

${({ $variant }) =>
$variant === 'with-tabs' &&
css`
padding-bottom: 0;
`}
`,
Header: styled.div`
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px 40px;
position: relative;

@media screen and (max-width: ${() => `${mobileWidth - 1}px`}) {
padding-right: 48px;
}
`,
Title: styled(Title)`
margin-bottom: 0 !important;
`,
HeaderLeftColumn: styled.div`
display: flex;
align-items: center;
gap: 0 8px;
`,
HeaderRightColumn: styled.div`
display: flex;
align-items: center;
gap: 0 40px;
`,
ContentContainer: styled(BasePageContent)<{ $variant?: 'default' | 'with-table' | 'with-tabs' }>`
${({ $variant }) =>
$variant === 'with-table' &&
css`
padding-top: 0;
margin-top: -47px;
`}
`,
};
Loading
Loading